:root{--hud-blue: #3f7dd9;--hud-blue-dark: #2c5eae;--hud-navy: #1e3f77;--panel-bg: rgba(16, 46, 42, .92);--accent: #ffcf5e;--text: #f4fbf7;font-family:Trebuchet MS,Segoe UI,system-ui,-apple-system,sans-serif}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;overflow:hidden;background:#10443c;color:var(--text)}#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.hidden{display:none!important}.hud{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;width:min(420px,calc(100% - 24px));padding:8px 12px;border-radius:18px;background:linear-gradient(180deg,var(--hud-blue) 0%,var(--hud-blue-dark) 100%);box-shadow:0 4px #152e59e6,0 10px 24px #00141059;z-index:20}.hud-btn{display:grid;place-items:center;width:44px;height:44px;border:none;border-radius:50%;color:#4a4a55;background:radial-gradient(circle at 35% 30%,#fff,#cdd3de 75%);box-shadow:inset 0 -3px #5a647873,0 2px 4px #0000144d;cursor:pointer}.hud-btn:hover{filter:brightness(1.06)}.hud-btn:active{transform:translateY(1px)}.hud-level{flex:1;text-align:center;font-size:30px;font-weight:800;color:#fff;text-shadow:0 2px 0 rgba(20,40,80,.55);letter-spacing:1px}.hud-coins{display:flex;align-items:center;gap:8px;min-width:96px;height:42px;padding:0 14px 0 8px;border-radius:12px;background:var(--hud-navy);box-shadow:inset 0 2px 6px #00001e80;font-size:22px;font-weight:800;justify-content:flex-start}#hudCoins{flex:1;text-align:center}.score-chip{position:absolute;top:calc(74px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);padding:3px 14px;border-radius:12px;background:#0a221e8c;font-size:15px;font-weight:700;color:#d7f2e6;z-index:15}.combo-pop{position:absolute;top:calc(112px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%) scale(.4);font-size:42px;font-weight:900;color:var(--accent);text-shadow:0 3px 0 rgba(90,50,0,.55),0 6px 16px rgba(0,0,0,.4);opacity:0;pointer-events:none;z-index:15}.combo-pop.show{animation:comboPop .9s ease-out forwards}@keyframes comboPop{0%{opacity:0;transform:translate(-50%) scale(.4)}18%{opacity:1;transform:translate(-50%) scale(1.15)}30%{transform:translate(-50%) scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%) scale(1) translateY(-18px)}}.toast{position:absolute;bottom:calc(34px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);max-width:min(520px,calc(100% - 32px));padding:10px 18px;border-radius:14px;background:#0a221ec7;font-size:15px;font-weight:600;text-align:center;z-index:15;transition:opacity .4s}#screens .screen{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#0516138c;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:30}.panel{width:min(400px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;padding:26px 24px;border-radius:22px;background:var(--panel-bg);border:1px solid rgba(150,220,190,.18);box-shadow:0 18px 48px #000a088c;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:stretch}.panel-plain{background:transparent;border:none;box-shadow:none;align-items:center}.title{font-size:40px;line-height:1.02;font-weight:900;color:#ffdf9a;text-shadow:0 3px 0 rgba(90,50,0,.5);letter-spacing:2px}.title span{color:#ffb84d}.subtitle{font-size:15px;color:#cfe8dc;line-height:1.5}h2{font-size:28px;font-weight:900;color:#ffdf9a;text-shadow:0 2px 0 rgba(90,50,0,.5)}.btn{min-height:48px;padding:10px 22px;border:none;border-radius:14px;background:linear-gradient(180deg,#4d8ce4,#35639f);color:#fff;font-size:17px;font-weight:800;letter-spacing:1px;cursor:pointer;box-shadow:0 4px #24477a,0 8px 18px #000a1459;transition:transform .08s,filter .15s}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(2px);box-shadow:0 2px #24477a}.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.btn-primary{background:linear-gradient(180deg,#ffc65c,#e08f2c);color:#5b3406;text-shadow:0 1px 0 rgba(255,240,200,.5);box-shadow:0 4px #a86420,0 8px 18px #000a1459}.btn-primary:active{box-shadow:0 2px #a86420}.btn-small{min-height:44px;font-size:14px;padding:8px 16px}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.level-cell{aspect-ratio:1;min-height:44px;border:none;border-radius:12px;font-size:19px;font-weight:800;color:#5b3406;background:linear-gradient(180deg,#f4c988,#d9a45c);box-shadow:0 3px #9a6a2e;cursor:pointer}.level-cell:hover{filter:brightness(1.07)}.level-cell:active{transform:translateY(2px);box-shadow:0 1px #9a6a2e}.level-cell:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.level-cell[disabled]{background:linear-gradient(180deg,#5a6e68,#46564f);color:#9fb3ab;box-shadow:0 3px #303d38;cursor:not-allowed}.level-cell.done:after{content:" ✓";font-size:13px}.kbd-hint{font-size:12.5px;color:#9fc5b5}.score-table{display:flex;flex-direction:column;gap:5px;font-size:15px}.score-table>div{display:flex;justify-content:space-between;padding:2px 10px}.score-table dt{color:#b9dcc9}.score-table dd{font-weight:800}.score-table .total{border-top:1px solid rgba(160,220,190,.25);margin-top:4px;padding-top:7px;font-size:18px;color:var(--accent)}.score-table .total dt{color:var(--accent)}.bonus-wrap{display:flex;flex-direction:column;gap:10px}.bonus-label{font-size:14px;color:#cfe8dc;font-weight:700}.bonus-bar{position:relative;display:flex;height:40px;border-radius:12px;overflow:hidden;box-shadow:inset 0 2px 8px #00001480}.zone{display:grid;place-items:center;font-size:14px;font-weight:900;color:#ffffffeb;text-shadow:0 1px 2px rgba(0,0,0,.4)}.zone.z2{background:#4f8b64}.zone.z3{background:#d9a43c}.zone.z4{background:#e0653a}.bonus-marker{position:absolute;top:-2px;bottom:-2px;width:5px;left:0;border-radius:3px;background:#fff;box-shadow:0 0 8px #ffffffe6}.bonus-actions{display:flex;gap:10px;justify-content:center}.bonus-result{font-size:22px;font-weight:900;color:var(--accent)}.all-coins{font-size:18px}.all-coins strong{color:var(--accent);font-size:24px}.spinner{width:46px;height:46px;border-radius:12px;background:linear-gradient(180deg,#f4c988,#d9a45c);box-shadow:0 4px #9a6a2e;animation:spin 1.1s ease-in-out infinite}@keyframes spin{0%{transform:rotate(0) scale(1);border-radius:12px}50%{transform:rotate(180deg) scale(.82);border-radius:50%}to{transform:rotate(360deg) scale(1);border-radius:12px}}#coinFlyLayer{position:absolute;inset:0;pointer-events:none;z-index:40}.fly-coin{position:absolute;width:20px;height:16px;border-radius:4px;background:linear-gradient(180deg,#8ce07c,#4faf55);border:1.5px solid #2c8f43;box-shadow:0 0 8px #78e68c99}@media(max-width:420px){.hud-level{font-size:25px}.hud-coins{min-width:82px;font-size:19px}.title{font-size:33px}}@media(max-height:420px){.hud{transform:translate(-50%) scale(.85);transform-origin:top center}.panel{padding:16px;gap:9px}}@media(prefers-reduced-motion:reduce){.combo-pop.show{animation-duration:.55s}.spinner{animation-duration:2.4s}.btn,.hud-btn{transition:none}}