@layer base,game;@layer game{.game-root{--bg: #08090c;--surface: #0f1118;--surface2: #161922;--border: rgba(255, 255, 255, .07);--text: #f0f0f0;--text-dim: rgba(240, 240, 240, .38);--text-mid: rgba(240, 240, 240, .65);--c1: #ff2d55;--c1g: rgba(255, 45, 85, .7);--c2: #ff9f0a;--c2g: rgba(255, 159, 10, .7);--c3: #ffd60a;--c3g: rgba(255, 214, 10, .65);--c4: #30d158;--c4g: rgba(48, 209, 88, .65);--c5: #0a84ff;--c5g: rgba(10, 132, 255, .7);--c6: #bf5af2;--c6g: rgba(191, 90, 242, .7);--exact: #30d158;--colour: #ffd60a;--timer-ok: #f0f0f0;--timer-warn: #ff9f0a;--timer-danger: #ff2d55;--navbar-h: 52px;position:relative;#start-screen{display:none;position:absolute;inset:0;z-index:12;background:#08090ce0;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.06);border-radius:18px;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2rem 1rem;overflow-y:auto}#start-screen.visible{display:flex}.start-title{font-size:clamp(1.4rem,5vw,2rem);letter-spacing:.08em;line-height:1;color:var(--text);text-align:center}.start-title span{color:var(--c5);text-shadow:0 0 30px var(--c5g)}.start-sub{font-size:.82rem;color:var(--text-dim);margin-top:6px;letter-spacing:.06em;text-transform:uppercase;text-align:center}.duration-picker{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap;justify-content:center}.dur-btn{width:80px;height:80px;border-radius:14px;background:var(--surface2);border:2px solid var(--border);color:var(--text-dim);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .15s;outline:none}.dur-btn .dur-num{font-size:2rem;line-height:1;color:var(--text)}.dur-btn .dur-label{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}.dur-btn:hover{border-color:#0a84ff80;background:#0a84ff14}.dur-btn.selected{border-color:var(--c5);background:#0a84ff24;box-shadow:0 0 24px #0a84ff40}.dur-btn.selected .dur-num{color:var(--c5);text-shadow:0 0 16px var(--c5g)}.start-best{margin-top:16px;font-size:.78rem;color:var(--text-dim);text-align:center;height:1.2em}.start-best span{color:var(--c4);font-weight:700}.start-btn{margin-top:24px;width:100%;height:60px;background:var(--c5);color:#fff;font-size:1.4rem;letter-spacing:.14em;border:none;border-radius:14px;cursor:pointer;box-shadow:0 0 32px #0a84ff66;transition:all .15s}.start-btn:hover{background:#2a94ff;box-shadow:0 0 48px #0a84ff8c;transform:translateY(-1px)}.start-btn:active{transform:scale(.97)}.start-hint{margin-top:12px;font-size:.72rem;color:var(--text-dim);text-align:center}.start-hint kbd{font-size:.85em}#game-screen{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;gap:0}#timer-wrap{width:100%;text-align:center;margin-bottom:4px}#timer-val{font-size:clamp(4.5rem,22vw,7rem);line-height:1;color:var(--timer-ok);text-shadow:0 0 40px rgba(240,240,240,.2);transition:color .3s,text-shadow .3s;letter-spacing:.04em}#timer-val.warn{color:var(--timer-warn);text-shadow:0 0 40px rgba(255,159,10,.5)}#timer-val.danger{color:var(--timer-danger);text-shadow:0 0 40px rgba(255,45,85,.6);animation:danger-pulse .5s ease-in-out infinite alternate}#score-row{display:flex;gap:12px;width:100%;margin-bottom:20px}.score-box{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;text-align:center}.score-label{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:4px}.score-val{font-size:2.2rem;line-height:1;color:var(--c4);text-shadow:0 0 16px rgba(48,209,88,.5)}.score-val.personal-best{color:var(--c3);text-shadow:0 0 16px rgba(255,214,10,.5)}#score-pb{font-size:.7rem;color:var(--text-dim);text-align:center;margin-top:4px;display:block}#vault{display:flex;gap:10px;margin-bottom:14px;align-items:center;justify-content:center}.vault-slot{width:72px;height:72px;border-radius:16px;border:2px solid rgba(255,255,255,.1);background:#ffffff0a;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:all .25s cubic-bezier(.34,1.3,.64,1)}.vault-slot.hidden:after{content:"?";font-size:1.8rem;color:#ffffff1f}.vault-slot.reveal{animation:vault-crack .35s cubic-bezier(.34,1.56,.64,1)}#feedback-col{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;padding:4px 2px;flex-shrink:0}.fb-pip{width:16px;height:16px;border-radius:50%;background:#ffffff14;border:1.5px solid rgba(255,255,255,.1);transition:background .15s,box-shadow .15s,border-color .15s;flex-shrink:0}.fb-pip.exact{background:var(--exact);border-color:transparent;box-shadow:0 0 8px #30d158cc}.fb-pip.colour{background:var(--colour);border-color:transparent;box-shadow:0 0 8px #ffd60acc}.fb-pip.pop{animation:pip-pop .22s cubic-bezier(.34,1.4,.64,1) forwards}#guess-area.shake{animation:no-match-shake .28s ease}#guess-area{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}#guess-row-inner{display:flex;align-items:center;gap:10px}#guess-slots{display:flex;gap:10px}.guess-slot{touch-action:manipulation;width:72px;height:72px;border-radius:16px;border:2px dashed rgba(255,255,255,.15);background:#ffffff08;display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .15s,background .15s;cursor:pointer;overflow:hidden}.guess-slot.active-slot{border-color:#ffffff59;background:#ffffff0f}.guess-slot.active-slot:after{content:"";position:absolute;bottom:6px;left:50%;transform:translate(-50%);width:16px;height:2px;border-radius:1px;background:#fff6}.guess-slot[data-color]{border-style:solid;border-color:transparent}.guess-slot[data-color]:before{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.5) 0%,transparent 55%);z-index:1;pointer-events:none}.guess-slot[data-color="1"]{background:radial-gradient(circle at 40% 35%,#ff758a,var(--c1) 50%,#8b0020);box-shadow:0 0 20px var(--c1g),inset 0 -4px 10px #00000080}.guess-slot[data-color="2"]{background:radial-gradient(circle at 40% 35%,#ffcc70,var(--c2) 50%,#7a4400);box-shadow:0 0 20px var(--c2g),inset 0 -4px 10px #00000080}.guess-slot[data-color="3"]{background:radial-gradient(circle at 40% 35%,#fff07a,var(--c3) 50%,#7a6600);box-shadow:0 0 20px var(--c3g),inset 0 -4px 10px #00000080}.guess-slot[data-color="4"]{background:radial-gradient(circle at 40% 35%,#7aff9e,var(--c4) 50%,#006622);box-shadow:0 0 20px var(--c4g),inset 0 -4px 10px #00000080}.guess-slot[data-color="5"]{background:radial-gradient(circle at 40% 35%,#70b8ff,var(--c5) 50%,#003d7a);box-shadow:0 0 20px var(--c5g),inset 0 -4px 10px #00000080}.guess-slot[data-color="6"]{background:radial-gradient(circle at 40% 35%,#d98fff,var(--c6) 50%,#5a0099);box-shadow:0 0 20px var(--c6g),inset 0 -4px 10px #00000080}.guess-slot.just-placed{animation:gem-pop .2s cubic-bezier(.22,1,.36,1) forwards}#palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%;margin-top:8px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.color-btn{touch-action:manipulation;font-size:1rem;aspect-ratio:1;border-radius:12px;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;outline:none;transition:transform .1s,box-shadow .1s}.color-btn:before{content:"";position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.5) 0%,transparent 55%);z-index:1;pointer-events:none}.color-btn:after{content:attr(data-key);position:absolute;bottom:4px;right:5px;font-size:.6rem;font-weight:500;color:#ffffff8c;z-index:2;line-height:1}.color-btn:hover{transform:scale(1.08)}.color-btn:active{transform:scale(.93)}.color-btn.selected{border-color:#fff;box-shadow:0 0 0 2px #fff3;transform:scale(1.06)}.color-btn[data-color="1"]{background:radial-gradient(circle at 40% 35%,#ff758a,var(--c1) 50%,#8b0020);box-shadow:0 0 14px var(--c1g)}.color-btn[data-color="2"]{background:radial-gradient(circle at 40% 35%,#ffcc70,var(--c2) 50%,#7a4400);box-shadow:0 0 14px var(--c2g)}.color-btn[data-color="3"]{background:radial-gradient(circle at 40% 35%,#fff07a,var(--c3) 50%,#7a6600);box-shadow:0 0 14px var(--c3g)}.color-btn[data-color="4"]{background:radial-gradient(circle at 40% 35%,#7aff9e,var(--c4) 50%,#006622);box-shadow:0 0 14px var(--c4g)}.color-btn[data-color="5"]{background:radial-gradient(circle at 40% 35%,#70b8ff,var(--c5) 50%,#003d7a);box-shadow:0 0 14px var(--c5g)}.color-btn[data-color="6"]{background:radial-gradient(circle at 40% 35%,#d98fff,var(--c6) 50%,#5a0099);box-shadow:0 0 14px var(--c6g)}#kb-hint{width:100%;text-align:center;margin-top:8px;font-size:.7rem;color:var(--text-dim);letter-spacing:.04em}#kb-hint kbd{font-size:.8em}#solve-flash{position:fixed;inset:0;z-index:50;background:#30d1582e;pointer-events:none;opacity:0;transition:opacity .08s}#solve-flash.show{opacity:1}#status-line{margin-top:10px;font-size:.78rem;color:var(--text-dim);text-align:center;height:1.3em;letter-spacing:.03em}#end-screen{display:none;position:fixed;inset:0;z-index:115;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2rem max(1rem,calc((100% - 400px)/2));overflow-y:auto}#end-screen.visible{display:flex}.end-title{font-size:clamp(2rem,10vw,3rem);letter-spacing:.1em;color:var(--text);text-align:center;margin-bottom:4px}.end-result{font-size:clamp(5rem,26vw,9rem);line-height:1;color:var(--c4);text-shadow:0 0 50px rgba(48,209,88,.5);text-align:center}.end-result-label{font-size:.75rem;color:var(--text-dim);text-align:center;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}.end-pb-banner{display:none;width:100%;background:linear-gradient(135deg,#ffd60a26,#ffd60a0d);border:1px solid rgba(255,214,10,.4);border-radius:12px;padding:12px 20px;text-align:center;margin-bottom:16px;font-size:1.1rem;letter-spacing:.1em;color:var(--c3);text-shadow:0 0 16px rgba(255,214,10,.5)}.end-pb-banner.show{display:block}.end-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-bottom:20px}.end-stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}.end-stat-val{font-size:2rem;line-height:1;color:var(--c5);display:block;margin-bottom:4px}.end-stat-label{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);display:block}.end-buttons{display:flex;gap:10px;width:100%}.end-btn{flex:1;height:54px;border-radius:12px;font-size:1.1rem;letter-spacing:.12em;cursor:pointer;border:none;transition:all .15s}.end-btn.primary{background:var(--c5);color:#fff;box-shadow:0 0 28px #0a84ff66}.end-btn.primary:hover{background:#2a94ff;box-shadow:0 0 40px #0a84ff8c}.end-btn.secondary{background:var(--surface2);color:var(--text-dim);border:1px solid var(--border)}.end-btn.secondary:hover{background:#ffffff14;color:var(--text)}}@keyframes danger-pulse{0%{opacity:1}to{opacity:.6}}@keyframes vault-crack{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes pip-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}@keyframes no-match-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes gem-pop{0%{transform:scale(.3) rotate(-10deg);opacity:0}65%{transform:scale(1.15) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}}