:root{--bg: #000814;--deep-blue: #001d3d;--text: #ffffff;--muted: rgba(255,255,255,.72);--line: rgba(173, 216, 255, .18);--shadow: rgba(0, 0, 0, .34)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Trebuchet MS,Segoe UI,Tahoma,sans-serif;background:var(--bg);color:var(--text)}.app{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:18px 14px 80px;position:relative;overflow:hidden;flex-direction:column}@media(min-width:640px){.app{padding:28px 24px 92px}}@media(min-width:1024px){.app{padding:36px 32px 96px}}.bg-decor{position:absolute;inset:0;z-index:-10;background:var(--bg)}main{text-align:center;width:100%;max-width:760px;transform:translateY(-10px)}@media(min-width:1024px){main{max-width:860px;transform:translateY(-16px)}}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:20px}.topbar-secondary{display:flex;align-items:center;justify-content:flex-end;gap:12px;grid-column:3;justify-self:end}.mode-switch,.toggle-pill,.language-switch{display:inline-flex;align-items:center;gap:6px;padding:5px;border:0;border-radius:999px;background:#ffffff0a;color:var(--text);cursor:pointer;box-shadow:0 10px 24px #0000001a;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,filter .16s ease}.mode-switch{gap:4px;justify-content:center;width:min(100%,420px);grid-column:2;justify-self:center;box-shadow:0 14px 34px #0000001f}.toggle-pill{justify-self:start}.language-switch{justify-self:end}.mode-chip{min-width:72px;padding:7px 12px;border:0;border-radius:999px;background:transparent;color:#ffffffb3;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease,filter .16s ease}.mode-chip:hover{transform:translateY(-1px);color:#fff;background:#ffffff14;filter:brightness(1.03)}.mode-chip.is-active{background:linear-gradient(135deg,#114ca0,#0f4c81);color:#fff;box-shadow:0 10px 20px #03102747}.mode-switch:hover,.toggle-pill:hover,.language-switch:hover{transform:translateY(-1px);background:#ffffff14;box-shadow:0 16px 30px #00000029;filter:brightness(1.02)}.mode-switch:focus-within,.toggle-pill:focus-visible,.language-switch:focus-visible{outline:none;box-shadow:0 0 0 3px #bfe6ff24,0 16px 30px #0000002e}.toggle-pill__chip,.language-chip{min-width:42px;padding:7px 10px;border-radius:999px;color:#ffffffb8;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}.toggle-pill__chip.is-active,.language-chip.is-active{background:linear-gradient(135deg,#0a2a66,#0f4c81);color:#fff;box-shadow:0 10px 20px #03102757}.toggle-pill:hover .toggle-pill__chip.is-active,.language-switch:hover .language-chip.is-active{transform:scale(1.02)}.mode-chip:focus-visible{outline:none;box-shadow:0 0 0 3px #bfe6ff29,inset 0 0 0 1px #ffffff3d;color:#fff}.hero{margin-bottom:18px}.eyebrow{margin:0 0 10px;color:#add8ffd1;font-size:clamp(.72rem,1.6vw,.82rem);font-weight:700;letter-spacing:clamp(.16rem,.8vw,.28rem);text-transform:uppercase}#level-title{font-size:clamp(3.3rem,10vw,7rem);margin:0;font-weight:900;line-height:.9;letter-spacing:clamp(.03em,.35vw,.06em);text-transform:uppercase;background:linear-gradient(180deg,#fff 15%,#d7efff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 22px rgba(180,230,255,.18)}.subtitle{max-width:540px;margin:12px auto 18px;color:var(--muted);font-size:clamp(.95rem,2.2vw,1.06rem);font-weight:500;line-height:1.6;letter-spacing:.01em}.status{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;margin-bottom:0;border:1px solid var(--line);border-radius:999px;color:#fffffff5;background:#ffffff0a;box-shadow:0 10px 30px #0000002e;font-weight:700;font-size:clamp(.85rem,2vw,.95rem);letter-spacing:.04em;text-transform:uppercase}.status-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;min-height:44px}.high-score{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;margin:0;border:1px solid rgba(255,209,102,.28);border-radius:999px;background:#ffd16614;color:#ffe28a;box-shadow:0 10px 30px #0000002e;font-size:clamp(.8rem,1.9vw,.92rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.actions{display:flex;justify-content:center;margin-bottom:20px}.actions--below-board{margin:24px 0 10px}.start-btn{padding:13px 24px;border-radius:9999px;font-weight:800;font-size:clamp(.84rem,2vw,1.02rem);letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:linear-gradient(135deg,#0a2a66,#0f4c81);box-shadow:0 18px 36px #0310276b;border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.start-btn.is-idle{animation:start-idle-pulse 2.6s ease-in-out infinite}.start-btn:hover{transform:translateY(-2px);box-shadow:0 24px 44px #0310277a;filter:brightness(1.05)}.start-btn:focus-visible{outline:3px solid rgba(255,255,255,.35);outline-offset:4px}@media(min-width:640px){.start-btn{padding:15px 34px}}@media(min-width:1024px){.start-btn{padding:16px 38px}}.start-btn:active{transform:translateY(2px) scale(.98)}.game-feedback{margin:0 auto 22px;max-width:560px;padding:14px 16px 16px;border:1px solid var(--line);border-radius:24px;background:#ffffff0a;box-shadow:0 14px 34px #00000029;transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;animation:phase-panel-enter .3s cubic-bezier(.22,1,.36,1)}.game-stage{width:min(100%,620px);margin:0 auto}.game-feedback.is-watching{border-color:#8ed8ff57;background:#4db6ff14;box-shadow:0 16px 38px #2563eb24}.game-feedback.is-playing{border-color:#19e3a54d;background:#19e3a514;box-shadow:0 16px 38px #10b98124}.game-feedback.is-over{border-color:#ff8b8b4d;background:#ff5d7314}.phase-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:8px 14px;margin-bottom:10px;border-radius:999px;background:#ffffff1a;color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;animation:phase-pill-pop .34s ease-out}.phase-text{margin:0 0 12px;color:#ffffffd6;font-size:clamp(.86rem,2.1vw,.96rem);line-height:1.5;animation:phase-text-rise .34s ease-out}.game-over-card{margin:0 auto 22px;width:min(100%,560px);padding:22px 22px 24px;border:1px solid rgba(255,139,139,.24);border-radius:28px;background:radial-gradient(circle at top,rgba(255,93,115,.16),transparent 58%),#ffffff0b;box-shadow:0 18px 48px #0003;animation:game-over-enter .42s cubic-bezier(.22,1,.36,1)}.game-over-card__eyebrow{margin:0 0 10px;color:#ffb3be;font-size:.78rem;font-weight:900;letter-spacing:.24em;text-transform:uppercase}.game-over-card__label{margin:0;color:#ffffffad;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.game-over-card__score{margin:8px 0 10px;color:#fff;font-size:clamp(4rem,14vw,7rem);font-weight:900;line-height:.95;letter-spacing:.04em;text-shadow:0 0 30px rgba(255,255,255,.18);animation:score-pop .55s cubic-bezier(.2,.9,.2,1)}.game-over-card__text{margin:0;color:#ffffffd1;font-size:clamp(.88rem,2vw,.98rem);line-height:1.5}.board-shell{width:fit-content;margin:0 auto;transition:opacity .24s ease,transform .24s ease,filter .24s ease,box-shadow .24s ease;border-radius:36px}.board-shell.is-watching{transform:translateY(-2px);box-shadow:0 0 0 1px #8ed8ff14}.board-shell.is-playing{transform:translateY(0);box-shadow:0 0 0 1px #19e3a51a,0 0 28px #19e3a514}.board-shell.is-over{opacity:.55;transform:scale(.98);filter:saturate(.9)}.start-hint{margin:0 0 14px;color:#ffffffd1;font-size:clamp(.84rem,2vw,.96rem);font-weight:700;letter-spacing:.02em}.progress-track{width:100%;height:8px;overflow:hidden;border-radius:999px;background:#ffffff1a;transition:background .24s ease,transform .24s ease}.game-feedback.is-watching .progress-track{background:#8ed8ff24;transform:scaleX(.985)}.game-feedback.is-playing .progress-track{background:#19e3a524;transform:scaleX(1)}.progress-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#19e3a5,#8ed8ff);box-shadow:0 0 20px #8ed8ff40;position:relative;overflow:hidden;transition:width .42s cubic-bezier(.22,1,.36,1)}.progress-fill:after{content:"";position:absolute;top:0;right:-24%;width:24%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);opacity:.8;animation:progress-sheen 1.3s ease-in-out infinite}.tip{margin-top:1.4rem;font-size:clamp(.72rem,1.7vw,.84rem);color:#ffffffa3;letter-spacing:.06em;text-transform:uppercase}.keyboard-hint{margin:10px 0 0;color:#add8ffb8;font-size:clamp(.72rem,1.7vw,.82rem);font-weight:700;letter-spacing:.05em}.leaderboard{width:min(100%,560px);margin:22px auto 0;padding:16px;border:1px solid var(--line);border-radius:24px;background:#ffffff09;box-shadow:0 14px 34px #00000024;text-align:left}.leaderboard__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.leaderboard__label,.leaderboard__mode{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.leaderboard__label{color:#fff}.leaderboard__mode{color:#add8ffc2}.leaderboard__empty{margin:0;color:#ffffffb8;font-size:.92rem;line-height:1.5}.leaderboard__empty-state{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px;border:1px dashed rgba(173,216,255,.18);border-radius:18px;background:#ffffff08}.leaderboard__empty-kicker{margin:0;color:#add8ffcc;font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.leaderboard__list{margin:0;padding-left:20px}.leaderboard__item{color:#ffffffe6;font-size:.92rem;line-height:1.7}.leaderboard__item.is-top{color:#fff;font-size:1rem;font-weight:900}.leaderboard__item.is-top::marker{color:#ffe28a;font-size:1.05em}.footer{position:absolute;bottom:14px;left:0;right:0;padding:0 16px;text-align:center;font-size:.7rem;color:#ffffff61;font-weight:700;letter-spacing:.14em;text-transform:uppercase}@media(min-width:640px){.footer{bottom:16px;font-size:.72rem}}@media(min-width:1024px){.footer{bottom:20px;font-size:.74rem}}.container{position:relative;display:flex;flex-direction:column;gap:14px;margin:0 auto;padding:10px}.container:before{content:"";position:absolute;inset:50%;width:72%;height:72%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.16),transparent 68%);filter:blur(28px);z-index:-1}@media(min-width:640px){.container{gap:18px;padding:14px}}@media(min-width:1024px){.container{gap:22px;padding:18px}}.row{display:flex;gap:14px;justify-content:center}@media(min-width:640px){.row{gap:18px}}@media(min-width:1024px){.row{gap:22px}}.btn{width:min(39vw,152px);height:min(39vw,152px);border:0;border-radius:24px;box-shadow:inset 0 1px #ffffff3d,inset 0 -8px 18px #0000002e,0 16px 30px var(--shadow);cursor:pointer;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.btn:hover{transform:translateY(-4px) scale(1.01);filter:saturate(1.08)}.btn:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.34),transparent 58%);opacity:0;transform:scale(.88)}.btn:after{content:"";position:absolute;inset:10px;border-radius:18px;border:1px solid rgba(255,255,255,.18);opacity:.65}@media(min-width:640px){.btn{width:164px;height:164px;border-radius:34px}}@media(min-width:1024px){.btn{width:196px;height:196px;border-radius:38px}}@media(min-width:1200px){.btn{width:228px;height:228px;border-radius:42px}}.btn:active{transform:translateY(1px) scale(.98)}.btn:focus-visible{outline:4px solid rgba(255,255,255,.76);outline-offset:6px}.btn:disabled{cursor:not-allowed;opacity:.92}.green{--pad-glow: rgba(25, 227, 165, .5);--pad-glow-soft: rgba(25, 227, 165, .22);background:linear-gradient(180deg,#19e3a5,#00b894 58%,#008f71)}.red{--pad-glow: rgba(255, 93, 115, .5);--pad-glow-soft: rgba(255, 93, 115, .22);background:linear-gradient(180deg,#ff8b8b,#ff5d73 58%,#d83b57)}.yellow{--pad-glow: rgba(255, 209, 102, .52);--pad-glow-soft: rgba(255, 209, 102, .24);background:linear-gradient(180deg,#ffe28a,#ffd166 55%,#e7aa00)}.blue{--pad-glow: rgba(77, 182, 255, .5);--pad-glow-soft: rgba(77, 182, 255, .22);background:linear-gradient(180deg,#8ed8ff,#4db6ff 55%,#1d73e8)}.pressed{animation:pad-pulse .34s ease-out;filter:brightness(1.5) saturate(1.18);transform:scale(.94);box-shadow:inset 0 2px #ffffff57,inset 0 -10px 20px #0000001a,0 0 0 5px var(--pad-glow-soft, rgba(255,255,255,.18)),0 0 44px var(--pad-glow, rgba(255,255,255,.34)),0 0 72px var(--pad-glow-soft, rgba(255,255,255,.18))}.pressed:before{opacity:1;transform:scale(1.04)}.pressed:after{border-color:#ffffff7a;opacity:1}.game-over{animation:flash .2s ease-in-out}@keyframes flash{0%{background:#ff4d4d}to{background:transparent}}@keyframes pad-pulse{0%{transform:scale(1);filter:brightness(1) saturate(1)}35%{transform:scale(.92);filter:brightness(1.62) saturate(1.22)}to{transform:scale(.94);filter:brightness(1.5) saturate(1.18)}}@keyframes game-over-enter{0%{opacity:0;transform:translateY(18px) scale(.96);box-shadow:0 0 #0000}to{opacity:1;transform:translateY(0) scale(1);box-shadow:0 18px 48px #0003}}@keyframes phase-panel-enter{0%{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes phase-pill-pop{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes phase-text-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes progress-sheen{0%{transform:translate(0);opacity:0}30%{opacity:.75}to{transform:translate(-520%);opacity:0}}@keyframes score-pop{0%{opacity:0;transform:scale(.78);letter-spacing:.12em}55%{opacity:1;transform:scale(1.06);letter-spacing:.03em}to{opacity:1;transform:scale(1);letter-spacing:.04em}}@keyframes start-idle-pulse{0%{transform:translateY(0) scale(1);box-shadow:0 18px 36px #0310276b;filter:brightness(1)}50%{transform:translateY(-2px) scale(1.02);box-shadow:0 24px 44px #03102780;filter:brightness(1.06)}to{transform:translateY(0) scale(1);box-shadow:0 18px 36px #0310276b;filter:brightness(1)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:639px){.topbar{display:flex;flex-direction:column;align-items:center;margin-bottom:18px}.mode-switch{width:100%;justify-content:center}.topbar-secondary{width:100%;justify-content:center;gap:10px}.toggle-pill,.language-switch{width:calc(50% - 5px);justify-content:center;flex:0 0 auto}.mode-chip{flex:1 1 0;min-width:0}.toggle-pill,.language-switch{min-width:0}.toggle-pill__chip,.language-chip{min-width:0;padding:7px 12px}.status-row{gap:10px}.game-feedback{margin-bottom:18px;padding:13px 14px 14px;border-radius:20px}.game-over-card{margin-bottom:18px;padding:18px 16px 20px;border-radius:22px}.phase-pill{min-height:32px;padding:7px 12px;margin-bottom:8px;font-size:.68rem}.progress-track{height:7px}.tip{margin-top:1.1rem;letter-spacing:.04em}.actions--below-board{margin:20px 0 10px}.leaderboard{margin-top:18px;padding:14px;border-radius:20px}.leaderboard__header{flex-direction:column;align-items:flex-start}}@media(min-width:1400px){main{max-width:980px}.hero{margin-bottom:30px}.game-feedback{max-width:620px;padding:16px 18px 18px}.game-over-card{width:min(100%,620px)}.container{padding:24px}}