*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a1a;--bg-surface:#12122a;--accent-neon:#b8ff00;--accent-pink:#ff0080;--accent-cyan:#0ff;--text-primary:#f0f0e0;--text-dim:#8888a0;--row-inactive:#1a1a2e;--row-active:#1e1e3a;--font-pixel:"Press Start 2P", cursive;--font-mono:"Share Tech Mono", monospace;--glow-neon:0 0 10px var(--accent-neon), 0 0 40px var(--accent-neon);--glow-pink:0 0 10px var(--accent-pink), 0 0 40px var(--accent-pink);--glow-cyan:0 0 10px var(--accent-cyan), 0 0 40px var(--accent-cyan);--transition-fast:.15s ease;--transition-medium:.3s ease}button{touch-action:manipulation}:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}html,body{background-color:var(--bg-primary);height:100%;color:var(--text-primary);font-family:var(--font-mono);overflow-x:hidden}#root{flex-direction:column;align-items:center;min-height:100%;display:flex}#root:after{content:"";pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000014 2px 4px);width:100%;height:100%;position:fixed;top:0;left:0}.screen-enter{animation:.3s both screen-fade-in}@keyframes screen-fade-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--text-dim);border-radius:3px}.setup{flex-direction:column;align-items:center;width:100%;max-width:680px;min-height:100vh;margin:0 auto;padding:3rem 2rem 4rem;animation:.3s both screen-fade-in;display:flex}.setup__header{text-align:center;margin-bottom:3rem}.setup__title{font-family:var(--font-pixel);letter-spacing:2px;margin-bottom:1rem;font-size:clamp(1.6rem,5vw,2.8rem);line-height:1.6}.setup__title--green{color:var(--accent-neon);text-shadow:var(--glow-neon)}.setup__title--pink{color:var(--accent-pink);text-shadow:var(--glow-pink);animation:2s infinite flicker}@keyframes flicker{0%,90%,to{opacity:1}92%{opacity:.6}94%{opacity:1}96%{opacity:.3}98%{opacity:1}99%{opacity:.7}}.setup__subtitle{font-family:var(--font-mono);color:var(--accent-cyan);text-shadow:0 0 8px var(--accent-cyan);letter-spacing:4px;font-size:.85rem}.setup__panel{background:var(--bg-surface);border:1px solid var(--text-dim);border-radius:4px;flex-direction:column;gap:1.5rem;width:100%;margin-bottom:2.5rem;padding:2rem;display:flex}.setup__row{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.setup__label{font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:2px;min-width:110px;font-size:.6rem}.setup__options{flex-wrap:wrap;gap:.5rem;display:flex}.setup__opt-btn{font-family:var(--font-pixel);letter-spacing:1px;color:var(--text-dim);border:1px solid var(--text-dim);cursor:pointer;transition:color var(--transition-fast), border-color var(--transition-fast), text-shadow var(--transition-fast), transform var(--transition-fast);text-align:center;background:0 0;border-radius:2px;min-width:42px;padding:.5rem .75rem;font-size:.55rem}.setup__opt-btn--wide{min-width:90px}.setup__opt-btn:disabled{opacity:.25;cursor:not-allowed;pointer-events:none}.setup__opt-btn:hover:not(:disabled){color:var(--accent-cyan);border-color:var(--accent-cyan);text-shadow:0 0 6px var(--accent-cyan);transform:scale(1.05)}.setup__opt-btn--active{color:var(--accent-neon);border-color:var(--accent-neon);text-shadow:var(--glow-neon);background:#b8ff000f}.setup__opt-btn--active:hover{color:var(--accent-neon);border-color:var(--accent-neon);text-shadow:var(--glow-neon)}.setup__tip{font-family:var(--font-mono);color:var(--text-dim);letter-spacing:1px;flex-basis:100%;margin:0;padding-left:calc(110px + 1rem);font-size:.6rem}.setup__attempts{font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:2px;text-align:center;border-top:1px solid #ffffff0f;padding-top:.5rem;font-size:.65rem}.setup__attempts-count{color:var(--accent-pink);text-shadow:var(--glow-pink);margin:0 .3rem;font-size:1rem}.setup__htp{width:100%;margin-bottom:1.5rem}.setup__htp-toggle{font-family:var(--font-pixel);letter-spacing:2px;width:100%;color:var(--accent-cyan);border:1px solid var(--accent-cyan);cursor:pointer;text-shadow:0 0 6px var(--accent-cyan);transition:color var(--transition-fast), border-color var(--transition-fast), text-shadow var(--transition-fast), box-shadow var(--transition-fast);text-align:left;background:0 0;border-radius:2px;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;font-size:.55rem;display:flex;box-shadow:0 0 8px #00ffee26}.setup__htp-toggle:hover{text-shadow:0 0 10px var(--accent-cyan);box-shadow:0 0 16px #00ffee4d}.setup__htp-arrow{font-size:.5rem}.setup__htp-body{background:var(--bg-surface);border:1px solid var(--text-dim);border-top:none;border-radius:0 0 2px 2px;flex-direction:column;gap:1rem;padding:1.5rem;animation:.2s both screen-fade-in;display:flex}.setup__htp-section{flex-direction:column;gap:.3rem;display:flex}.setup__htp-heading{font-family:var(--font-pixel);color:var(--accent-cyan);text-shadow:0 0 6px var(--accent-cyan);letter-spacing:2px;margin:0;font-size:.45rem}.setup__htp-text{font-family:var(--font-mono);color:var(--text-dim);letter-spacing:.5px;margin:0;font-size:.7rem;line-height:1.6}.setup__start-btn{font-family:var(--font-pixel);letter-spacing:3px;color:var(--accent-neon);border:2px solid var(--accent-neon);text-shadow:var(--glow-neon);cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast);background:0 0;border-radius:2px;padding:1.1rem 3rem;font-size:.75rem;box-shadow:0 0 16px #b8ff004d,inset 0 0 16px #b8ff000d}.setup__start-btn:hover{transform:scale(1.04);box-shadow:0 0 28px #b8ff0080,inset 0 0 20px #b8ff001a}.setup__start-btn:active{transform:scale(.98)}@media (width<=599px){.setup{padding:2rem 1rem 3rem}.setup__header{margin-bottom:2rem}.setup__subtitle{letter-spacing:2px;font-size:.7rem}.setup__panel{gap:1.25rem;padding:1.25rem 1rem}.setup__row{flex-direction:column;align-items:flex-start;gap:.6rem}.setup__label{min-width:unset;font-size:.55rem}.setup__opt-btn{min-width:38px;padding:.55rem .7rem;font-size:.5rem}.setup__opt-btn--wide{min-width:80px}.setup__attempts{font-size:.55rem}.setup__tip{padding-left:0;font-size:.5rem}.setup__htp-toggle{padding:.65rem 1rem;font-size:.5rem}.setup__htp-text{font-size:.65rem}.setup__start-btn{letter-spacing:2px;padding:1rem 2rem;font-size:.65rem}}.board{flex-direction:column;align-items:center;width:100%;max-width:720px;min-height:100vh;margin:0 auto;padding:1.5rem 1rem 2rem;animation:.3s both screen-fade-in;display:flex}.board__header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;width:100%;margin-bottom:1.5rem;display:flex}.board__logo{font-family:var(--font-pixel);letter-spacing:2px;font-size:clamp(.65rem,2vw,.9rem)}.board__logo--green{color:var(--accent-neon);text-shadow:var(--glow-neon)}.board__logo--pink{color:var(--accent-pink);text-shadow:var(--glow-pink)}.board__attempt-counter{font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:1px;font-size:.55rem}.board__counter-num{color:var(--accent-cyan);text-shadow:0 0 6px var(--accent-cyan)}.board__give-up-btn{font-family:var(--font-pixel);letter-spacing:1px;color:var(--text-dim);border:1px solid var(--text-dim);cursor:pointer;transition:color var(--transition-fast), border-color var(--transition-fast);background:0 0;border-radius:2px;padding:.45rem .75rem;font-size:.5rem}.board__give-up-btn:hover{color:var(--accent-pink);border-color:var(--accent-pink)}.board__layout{align-items:flex-start;gap:1.5rem;width:100%;display:flex}.board__rows-wrap{flex:1;align-items:flex-start;gap:.75rem;min-width:0;display:flex}.board__rows{flex-direction:column;flex:1;gap:.5rem;min-width:0;padding-bottom:.5rem;display:flex}.board__row{background:var(--row-inactive);transition:background var(--transition-fast), border-color var(--transition-fast);opacity:.45;border:1px solid #0000;border-radius:3px;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.board__row--submitted{opacity:.7;background:var(--row-inactive);animation:.3s both row-lock}@keyframes row-lock{0%{opacity:1;background:var(--row-active)}to{opacity:.7;background:var(--row-inactive)}}.board__row--active{opacity:1;background:var(--row-active);border-color:#b8ff0033;box-shadow:0 0 12px #b8ff000f}.board__row-num{font-family:var(--font-pixel);color:var(--accent-cyan);text-shadow:0 0 6px var(--accent-cyan);text-align:right;min-width:22px;font-size:.65rem}.board__bottle{flex-direction:column;flex-shrink:0;align-self:flex-start;align-items:center;gap:.4rem;padding-top:.35rem;display:flex;position:sticky;top:1rem}.board__bottle-track{background:#ffffff0f;border:1px solid #00ffee40;border-radius:7px;flex-direction:column;justify-content:flex-end;width:14px;height:260px;display:flex;overflow:hidden}.board__bottle-fill{background:var(--accent-cyan);width:100%;box-shadow:0 0 8px var(--accent-cyan), inset 0 0 6px #fff3;transition:background var(--transition-fast), box-shadow var(--transition-fast);border-radius:6px}.board__bottle--danger .board__bottle-track{border-color:#ff333359}.board__bottle--danger .board__bottle-fill{background:var(--accent-pink);box-shadow:0 0 10px var(--accent-pink)}.board__bottle-fill--refilling{transition:height .5s linear, background var(--transition-fast), box-shadow var(--transition-fast)}.board__bottle-num{font-family:var(--font-pixel);color:var(--accent-cyan);text-shadow:0 0 6px var(--accent-cyan);transition:color var(--transition-fast);font-size:.5rem}.board__bottle--danger .board__bottle-num{color:var(--accent-pink);text-shadow:var(--glow-pink)}.board__guess{flex:1;align-items:center;gap:.5rem;min-width:0;display:flex}.board__slots{gap:.5rem;display:flex}.board__slot{border:2px solid var(--text-dim);cursor:default;width:clamp(36px,7vw,50px);height:clamp(36px,7vw,50px);transition:transform var(--transition-fast), border-color var(--transition-fast);background:0 0;border-radius:50%;flex-shrink:0}.board__slot--filled{background-color:var(--peg-color);box-shadow:0 0 8px var(--peg-color), 0 0 20px color-mix(in srgb, var(--peg-color) 40%, transparent);border-color:#0000;animation:.18s both peg-pop}@keyframes peg-pop{0%{opacity:.4;transform:scale(.5)}70%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.board__slot--clickable{cursor:pointer}.board__slot--clickable:hover{border-color:var(--accent-cyan);transform:scale(1.1)}.board__slot--clickable.board__slot--filled:hover{border-color:var(--accent-pink);filter:brightness(1.2)}.board__feedback{justify-content:flex-start;align-items:center;min-width:80px;padding-left:1.6rem;display:flex}.feedback--standard{grid-template-columns:repeat(var(--peg-cols), 1fr);gap:5px;display:grid}.feedback__peg{border-radius:50%;width:18px;height:18px;animation:.25s both peg-reveal;display:block}.feedback__peg:first-child{animation-delay:50ms}.feedback__peg:nth-child(2){animation-delay:.12s}.feedback__peg:nth-child(3){animation-delay:.19s}.feedback__peg:nth-child(4){animation-delay:.26s}.feedback__peg:nth-child(5){animation-delay:.33s}.feedback__peg:nth-child(6){animation-delay:.4s}@keyframes peg-reveal{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.feedback__peg--black{box-shadow:0 0 8px var(--accent-neon), 0 0 2px #fff;background:#cf0;border:2.5px solid #fffc}.feedback__peg--white{background:0 0;border:2.5px solid #ffffffa6;box-shadow:0 0 3px #ffffff4d}.feedback__peg--empty{background:0 0;border:2px solid #ffffff1a}.feedback--expired{justify-content:center;align-items:center;display:flex}.feedback__expired-mark{font-family:var(--font-pixel);color:var(--accent-pink);text-shadow:0 0 10px var(--accent-pink), 0 0 20px var(--accent-pink);font-size:1.4rem;animation:.25s both peg-reveal}.feedback--limited{justify-content:center;align-items:center;display:flex}.feedback__count{font-family:var(--font-pixel);color:var(--accent-cyan);text-shadow:0 0 8px var(--accent-cyan);font-size:1rem}.board__side{flex-direction:column;flex-shrink:0;align-self:flex-start;align-items:center;gap:1rem;width:140px;padding-top:.35rem;display:flex;position:sticky;top:1rem}.board__side-label{font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:2px;font-size:.45rem}.board__palette{grid-template-columns:repeat(2,1fr);gap:.6rem;display:grid}.board__color-btn{cursor:pointer;background-color:var(--peg-color);width:clamp(40px,8vw,55px);height:clamp(40px,8vw,55px);box-shadow:0 0 4px color-mix(in srgb, var(--peg-color) 53%, transparent);transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);border:2px solid #0000;border-radius:50%}.board__color-btn:hover{transform:scale(1.15)}.board__color-btn--selected{box-shadow:0 0 12px var(--peg-color), 0 0 30px var(--peg-color);border-color:#fff;transform:scale(1.2)}.board__selected-hint{font-family:var(--font-pixel);color:var(--accent-cyan);letter-spacing:1px;text-shadow:0 0 6px var(--accent-cyan);text-align:center;max-width:130px;font-size:.4rem;animation:.15s both peg-reveal}.board__selected-hint--warn{color:var(--accent-pink);text-shadow:var(--glow-pink);letter-spacing:2px;font-size:.55rem;line-height:1.8}.board__clear-btn{font-family:var(--font-pixel);letter-spacing:2px;width:100%;color:var(--accent-pink);cursor:pointer;transition:color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);opacity:.7;background:0 0;border:1px solid #f366;border-radius:2px;padding:.7rem .75rem;font-size:.45rem}.board__clear-btn:hover{opacity:1;border-color:var(--accent-pink);box-shadow:0 0 8px #ff33664d}.board__submit-btn{font-family:var(--font-pixel);letter-spacing:2px;width:100%;color:var(--text-dim);border:2px solid var(--text-dim);cursor:not-allowed;transition:color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);opacity:.4;background:0 0;border-radius:2px;padding:.85rem .5rem;font-size:.55rem}.board__submit-btn--ready{color:var(--accent-neon);border-color:var(--accent-neon);text-shadow:var(--glow-neon);cursor:pointer;opacity:1;box-shadow:0 0 16px #b8ff004d}.board__submit-btn--ready:hover{transform:scale(1.04);box-shadow:0 0 28px #b8ff0080}.board__submit-btn--ready:active{transform:scale(.98)}.board__bottle-mobile{display:none}@media (width<=599px){.board{max-width:100%;padding:1rem .5rem 0}.board__header{text-align:center;flex-direction:column;justify-content:center;align-items:center;margin-bottom:.75rem}.board__attempt-counter{font-size:.45rem}.board__bottle-mobile{flex-shrink:0;align-items:center;gap:.5rem;width:100%;display:flex}.board__bottle-mobile-track{background:#ffffff0f;border:1px solid #00ffee40;border-radius:5px;flex:1;align-items:stretch;height:10px;display:flex;overflow:hidden}.board__bottle-mobile-fill{background:var(--accent-cyan);height:100%;box-shadow:0 0 6px var(--accent-cyan), inset 0 0 4px #fff3;transition:background var(--transition-fast), box-shadow var(--transition-fast);border-radius:4px}.board__bottle-mobile--danger .board__bottle-mobile-track{border-color:#ff333359}.board__bottle-mobile--danger .board__bottle-mobile-fill{background:var(--accent-pink);box-shadow:0 0 8px var(--accent-pink)}.board__bottle-mobile-fill--refilling{transition:width .5s linear, background var(--transition-fast), box-shadow var(--transition-fast)}.board__bottle-mobile-num{font-family:var(--font-pixel);color:var(--accent-cyan);text-align:right;min-width:24px;transition:color var(--transition-fast);font-size:.45rem}.board__bottle-mobile--danger .board__bottle-mobile-num{color:var(--accent-pink);text-shadow:var(--glow-pink)}.board__layout{flex-direction:column;gap:0}.board__rows-wrap{order:1;gap:0;width:100%}.board__bottle{display:none}.board__rows{padding-bottom:max(14rem,35dvh)}.board__row{gap:.4rem;padding:.35rem .4rem}.board__row-num{min-width:16px;font-size:.5rem}.board__feedback{min-width:52px;padding-left:.6rem}.feedback__peg{width:13px;height:13px}.feedback--standard{gap:3px}.board__side{background:var(--bg-primary);align-items:center;gap:.6rem;align-self:unset;width:100%;bottom:0;top:unset;z-index:20;border-top:1px solid #ffffff12;flex-direction:column;order:2;padding:.75rem .75rem 1.75rem;position:sticky}.board__bottle-mobile{display:flex}.board__palette{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.board__selected-hint{font-size:.38rem}.board__selected-hint--warn{font-size:.55rem;line-height:1.8}.board__submit-btn{width:auto;min-width:160px;padding:.75rem 1.5rem;font-size:.5rem}}.end{flex-direction:column;justify-content:center;align-items:center;gap:3rem;width:100%;max-width:600px;min-height:100vh;margin:0 auto;padding:3rem 2rem;animation:.5s both end-enter;display:flex}@keyframes end-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.end__message{text-align:center}.end__title{font-family:var(--font-pixel);letter-spacing:2px;margin-bottom:1rem;font-size:clamp(1.2rem,4vw,2rem);line-height:1.6}.end__title--win{color:var(--accent-neon);text-shadow:var(--glow-neon);animation:2s infinite flicker}.end__title--loss{color:var(--text-dim);text-shadow:none}.end__subtitle{font-family:var(--font-mono);color:var(--accent-cyan);letter-spacing:3px;font-size:.8rem}.end--loss .end__subtitle{color:var(--text-dim)}.end__code-section{text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex}.end__code-label{font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:3px;font-size:.55rem}.end__code{gap:1rem;display:flex}.end__code-peg{background-color:var(--peg-color);width:clamp(36px,8vw,48px);height:clamp(36px,8vw,48px);box-shadow:0 0 12px var(--peg-color), 0 0 30px color-mix(in srgb, var(--peg-color) 40%, transparent);border-radius:50%}.end__score-section-header{font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:3px;margin-bottom:.15rem;font-size:.5rem}.end__score-val--harder{color:var(--accent-cyan);text-shadow:0 0 6px var(--accent-cyan)}.end__score-section{width:100%;max-width:360px}.end__score-label{font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:3px;text-align:center;margin-bottom:1rem;font-size:.55rem}.end__score-breakdown{background:var(--bg-surface);border:1px solid #ffffff14;border-radius:4px;flex-direction:column;gap:.6rem;padding:1.25rem 1.5rem;display:flex}.end__score-row{justify-content:space-between;align-items:center;display:flex}.end__score-key{font-family:var(--font-mono);color:var(--text-dim);letter-spacing:1px;font-size:.75rem}.end__score-key--label{font-family:var(--font-pixel);letter-spacing:2px;font-size:.55rem}.end__score-val{font-family:var(--font-mono);color:var(--text-primary);font-size:.85rem}.end__score-val--bonus{color:var(--accent-cyan);text-shadow:0 0 6px var(--accent-cyan)}.end__score-divider{background:#ffffff14;height:1px;margin:.25rem 0}.end__score-row--total .end__score-key{font-family:var(--font-pixel);color:var(--text-primary);font-size:.6rem}.end__score-val--total{font-family:var(--font-pixel);color:var(--accent-neon);text-shadow:var(--glow-neon);font-size:1.2rem}.end--loss .end__score-val--total{color:var(--text-dim);text-shadow:none}.end__play-again-btn{font-family:var(--font-pixel);letter-spacing:3px;color:var(--accent-neon);border:2px solid var(--accent-neon);text-shadow:var(--glow-neon);cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast);background:0 0;border-radius:2px;padding:1.1rem 3rem;font-size:.75rem;box-shadow:0 0 16px #b8ff004d,inset 0 0 16px #b8ff000d}.end--loss .end__play-again-btn{color:var(--accent-cyan);border-color:var(--accent-cyan);text-shadow:0 0 8px var(--accent-cyan);box-shadow:0 0 16px #0ff3}.end__play-again-btn:hover{transform:scale(1.04);box-shadow:0 0 28px #b8ff0080,inset 0 0 20px #b8ff001a}.end--loss .end__play-again-btn:hover{box-shadow:0 0 28px #00ffff59}.end__play-again-btn:active{transform:scale(.98)}@media (width<=599px){.end{gap:2rem;padding:2rem 1.25rem}.end__subtitle{letter-spacing:2px;font-size:.65rem}.end__code{flex-wrap:wrap;justify-content:center;gap:.6rem}.end__score-section{width:100%;max-width:100%}.end__score-breakdown{gap:.5rem;padding:1rem 1.1rem}.end__score-key{font-size:.65rem}.end__score-val{font-size:.75rem}.end__play-again-btn{letter-spacing:2px;padding:1rem 2rem;font-size:.65rem}}.app--placeholder{min-height:100vh;font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:2px;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;font-size:.75rem;display:flex}.app__placeholder-btn{font-family:var(--font-pixel);letter-spacing:2px;color:var(--accent-cyan);border:1px solid var(--accent-cyan);cursor:pointer;transition:transform var(--transition-fast);background:0 0;padding:.75rem 1.5rem;font-size:.6rem}.app__placeholder-btn:hover{transform:scale(1.05)}