@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap";*{box-sizing:border-box}body{margin:0;min-height:100dvh;color:#eafbf3;background:radial-gradient(circle at 75% 12%,#163952 0,transparent 28rem),#07101d;font-family:Space Grotesk,sans-serif}button{font:inherit;cursor:pointer}.app-shell{width:min(100%,620px);min-height:100dvh;margin:auto;padding:max(24px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;gap:18px}header,.stats,.header-actions{display:flex;align-items:center;justify-content:space-between}.header-actions{gap:8px}.eyebrow,small{margin:0;font:500 .68rem DM Mono,monospace;letter-spacing:.14em;color:#77c9a2}h1{margin:2px 0 0;font-size:clamp(1.65rem,8vw,2.5rem);line-height:.9;letter-spacing:-.08em}h1 span{color:#68ecad}.icon-button,.action-button{height:42px;border:1px solid #315466;background:#0b1a29;color:#9ff8c9}.icon-button{width:42px;border-radius:50%;font-size:1.3rem}.action-button{padding:0 12px;border-radius:9px;font:500 .68rem DM Mono,monospace;letter-spacing:.08em}.action-button:disabled{opacity:.45;cursor:not-allowed}.stats{background:#0f2332e0;border:1px solid #26475a;border-radius:14px;padding:13px 16px}.stats div{display:grid;gap:2px}.stats strong{font:500 1.1rem DM Mono,monospace}.game-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border:1px solid #3d6b70;border-radius:18px;box-shadow:0 18px 55px #0008,inset 0 0 30px #4cc49b10}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;background:#07101dd9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .25s,visibility .25s}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}h2{margin:0;font-size:clamp(1.6rem,8vw,2.65rem);letter-spacing:-.06em}.overlay p:not(.eyebrow){margin:0;color:#a9c1c9}#startButton{margin-top:8px;border:0;border-radius:9px;padding:13px 18px;background:#75f0b2;color:#082019;font-weight:700;box-shadow:0 0 24px #65edac66}#startButton span{margin-left:9px;font-size:1.1em}.hint{margin:0;text-align:center;color:#7d9ca8;font-size:.8rem}.controls{display:grid;justify-items:center;gap:5px}.controls div{display:flex;gap:5px}.controls button{width:56px;height:47px;border:1px solid #315466;border-radius:11px;background:#102335;color:#b8fdd7;font-size:1.4rem}.controls button:active{transform:scale(.94);background:#1d5946}@media(min-width:700px){.app-shell{min-height:auto;padding-top:34px}.controls{display:none}}@media(max-height:720px){.app-shell{gap:10px;justify-content:flex-start}.controls button{height:40px}}.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:min(100%,400px)}.mode-card{padding:15px 8px;border:1px solid #315466;border-radius:12px;background:#102335;color:#b8fdd7}.mode-card strong,.mode-card span{display:block}.mode-card strong{font-size:.9rem}.mode-card span{margin-top:4px;font:500 .58rem DM Mono,monospace;letter-spacing:.08em;color:#7d9ca8}.mode-card.selected{border-color:#75f0b2;background:#164536;box-shadow:0 0 18px #65edac33}.score-form{width:min(100%,340px);margin-top:6px}.score-form label{display:block;margin-bottom:7px;font:500 .66rem DM Mono,monospace;letter-spacing:.1em;color:#77c9a2}.score-form div{display:flex;gap:7px}.score-form input{min-width:0;flex:1;border:1px solid #315466;border-radius:8px;padding:10px;background:#091927;color:#eafbf3;font:inherit}.score-form button{border:0;border-radius:8px;padding:0 12px;background:#75f0b2;color:#082019;font-weight:700;font-size:.72rem}.score-form p{min-height:1em!important;font-size:.75rem}.leaderboard{width:min(100%,360px);max-height:70%;overflow:auto;border:1px solid #315466;border-radius:12px;background:#0b1a29;padding:13px;text-align:left}.leaderboard-head{display:flex;justify-content:space-between;align-items:center;font:500 .7rem DM Mono,monospace;letter-spacing:.1em;color:#77c9a2}.leaderboard-head button{border:0;background:none;color:#eafbf3;font-size:1.4rem}.leaderboard-tabs{display:flex;gap:7px;margin:11px 0}.leaderboard-tabs button{border:1px solid #315466;border-radius:6px;background:transparent;color:#b8fdd7;padding:5px 7px;font:.6rem DM Mono,monospace}.leaderboard ol{margin:0;padding-left:25px}.leaderboard li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #315466;font-size:.85rem}.hidden{display:none!important}.restart-button{border:1px solid #315466;border-radius:8px;padding:8px 10px;background:transparent;color:#b8fdd7;font:.66rem DM Mono,monospace;letter-spacing:.06em}.leaderboard-trigger{position:fixed;z-index:5;right:0;top:50%;transform:translateY(-50%);border:1px solid #f4d85c;border-right:0;border-radius:10px 0 0 10px;padding:14px 8px;background:#111b2bd9;color:#f7dc5d;writing-mode:vertical-rl;letter-spacing:.18em;font:500 .64rem DM Mono,monospace;box-shadow:0 8px 24px #0007;transition:background .18s,transform .18s}.leaderboard-trigger:hover,.leaderboard-trigger:focus-visible{background:#1d3144;transform:translateY(-50%) translate(-2px)}.leaderboard-dialog{width:min(100% - 32px,480px);max-height:min(700px,calc(100dvh - 32px));margin:auto;padding:0;border:1px solid #315466;border-radius:18px;background:#0b1a29;color:#eafbf3;box-shadow:0 25px 80px #000c}.leaderboard-dialog::backdrop{background:#030913bb;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.leaderboard-modal{display:flex;max-height:inherit;flex-direction:column;padding:20px}.leaderboard-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.leaderboard-status{margin:0 0 5px;color:#77c9a2;font:500 .63rem DM Mono,monospace;letter-spacing:.15em}.leaderboard-modal h2{font-size:1.6rem;letter-spacing:-.05em}.leaderboard-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid #315466;border-radius:50%;background:transparent;color:#eafbf3;font-size:1.6rem;line-height:1}.leaderboard-close:hover,.leaderboard-close:focus-visible{border-color:#f4d85c;color:#f7dc5d}.leaderboard-dialog .leaderboard-tabs{flex:none;margin:19px 0 9px}.leaderboard-dialog .leaderboard-tabs button{flex:1;padding:8px 7px}.leaderboard-dialog .leaderboard-tabs button.active{border-color:#f4d85c;background:#f4d85c1c;color:#f7dc5d}.score-list{min-height:70px;overflow:auto;margin:0;padding:0;list-style:none}.score-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid #315466}.score-rank{color:#77c9a2;font:500 .72rem DM Mono,monospace}.score-player{display:grid;min-width:0;gap:4px}.score-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}.score-player small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7d9ca8;font-size:.57rem;letter-spacing:.06em}.score-value{align-self:center;color:#f7dc5d;font:500 1rem DM Mono,monospace;text-align:right}.leaderboard-message{padding:26px 4px;color:#7d9ca8;text-align:center;font:500 .66rem DM Mono,monospace;letter-spacing:.08em}@media(max-width:480px){.leaderboard-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:14px}.leaderboard-modal{padding:16px}.leaderboard-modal h2{font-size:1.4rem}.score-row{grid-template-columns:23px minmax(0,1fr) auto;gap:7px;padding:11px 1px}.score-player small{font-size:.52rem}.score-value{font-size:.9rem}}@media(max-width:699px){.app-shell{padding-bottom:calc(132px + env(safe-area-inset-bottom))}.controls{position:fixed;z-index:10;bottom:max(12px,env(safe-area-inset-bottom));left:50%;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(calc(100% - 24px),420px);height:78px;transform:translate(-50%);justify-items:stretch}.controls .control-half{display:grid;gap:7px;min-width:0}.controls .control-horizontal{grid-template-columns:1fr 1fr}.controls .control-vertical{grid-template-rows:1fr 1fr}.controls button:not(.control-layout-button){width:auto;height:auto;border-color:#3d6b70;background:#102b3b;color:#b8fdd7;font-size:1.5rem;touch-action:manipulation;box-shadow:0 7px 17px #0006}.controls .control-layout-button{position:absolute;top:-31px;left:50%;width:auto;height:24px;transform:translate(-50%);border-radius:8px;padding:0 9px;background:#0b1a29;color:#77c9a2;font:500 .55rem DM Mono,monospace;letter-spacing:.08em;white-space:nowrap}.controls[data-layout=compact]{left:auto;right:12px;width:min(calc(100% - 24px),310px);height:66px;transform:none}.controls[data-layout=compact] button:not(.control-layout-button){font-size:1.25rem}.controls[data-layout=large]{right:8px;left:8px;width:auto;height:94px;transform:none}.controls[data-layout=large] button:not(.control-layout-button){font-size:1.8rem}.controls button:active{transform:scale(.94);background:#1d5946}.controls .control-layout-button:active{transform:translate(-50%) scale(.94)}}