:root{
  --yellow:#f5d90a;
  --yellow2:#fff36a;
  --orange:#ff8a00;
  --ink:#111827;
  --muted:#64748b;
  --blue:#0426A6;
  --royal:#243477;
  --green:#16a34a;
  --red:#dc2626;
  --white:#fffdf0;
  --panel:rgba(4,38,166,.82);
  --shadow:0 24px 70px rgba(0,0,0,.38);
  --safe-bottom:max(16px, env(safe-area-inset-bottom));
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07102a;color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
button{font:inherit;cursor:pointer;border:0}
#app{position:fixed;inset:0;background:radial-gradient(circle at 50% 18%,#1f64ff 0%,#0426A6 42%,#07102a 100%);overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:max(18px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom));z-index:20;background:radial-gradient(circle at 50% 22%,rgba(255,243,106,.84),rgba(245,217,10,.54) 30%,rgba(4,38,166,.74) 78%);backdrop-filter:blur(3px)}
.screen.show{display:grid}
#menu{align-content:center;gap:16px}
.badge{font-weight:950;letter-spacing:.18em;font-size:clamp(11px,2.4vw,14px);color:#fef3c7;background:rgba(4,38,166,.78);border:2px solid rgba(245,217,10,.54);padding:9px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
h1{margin:0;font-weight:1000;font-size:clamp(48px,14vw,126px);line-height:.82;letter-spacing:-.08em;text-transform:uppercase;color:#f5d90a;text-shadow:0 5px 0 #0426A6,0 16px 38px rgba(0,0,0,.32)}
h1 span{display:block;color:white;letter-spacing:-.04em;text-shadow:0 5px 0 #0426A6,0 16px 38px rgba(0,0,0,.32)}
.lead{max-width:720px;margin:0 auto;color:#fffdf0;font-size:clamp(16px,3.5vw,22px);line-height:1.45;font-weight:800;text-shadow:0 2px 8px rgba(4,38,166,.65)}
.menu-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:6px}
.primary,.secondary{min-height:48px;border-radius:16px;padding:13px 20px;font-weight:950;box-shadow:0 8px 0 rgba(0,0,0,.23),0 18px 36px rgba(0,0,0,.22);transition:transform .08s ease,filter .12s ease}
.primary{background:linear-gradient(180deg,#ff8a00,#f5d90a);color:#07102a;border:2px solid #7c2d12}.secondary{background:linear-gradient(180deg,#fffbe6,#f4ce00);color:#111827;border:2px solid #8a6f00}.primary:active,.secondary:active{transform:translateY(5px);box-shadow:0 3px 0 rgba(0,0,0,.25),0 10px 22px rgba(0,0,0,.18)}
.mini-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:790px}.mini-stats span{font-size:13px;font-weight:900;padding:8px 11px;border-radius:999px;background:rgba(4,38,166,.66);color:#fffdf0;border:1px solid rgba(245,217,10,.32)}
.foot{font-size:12px;color:rgba(255,253,240,.82);font-weight:800}.card{width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 44px);overflow:auto;background:var(--panel);color:#f8fafc;border:2px solid rgba(245,217,10,.26);border-radius:28px;padding:24px;box-shadow:var(--shadow);text-align:left}.card h2{margin:0 0 12px;text-align:center;font-size:clamp(28px,7vw,48px);line-height:.95;color:var(--yellow)}.card ul{margin:12px 0 16px;padding-left:22px;line-height:1.65}.card p{color:#dbeafe;line-height:1.55}.result-card{text-align:center}.big-emoji{font-size:64px}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.result-grid div{border-radius:16px;background:rgba(255,255,255,.1);padding:13px}.result-grid small{display:block;color:#fde68a;font-weight:800;font-size:11px;letter-spacing:.08em}.result-grid strong{font-size:22px;color:white}
.hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:grid;grid-template-columns:.72fr .9fr 1.1fr 1.55fr .9fr;gap:8px;z-index:8;pointer-events:none}.hud-box{background:rgba(4,38,166,.78);color:white;border:1px solid rgba(245,217,10,.26);border-radius:14px;padding:8px 10px;box-shadow:0 8px 22px rgba(0,0,0,.18);backdrop-filter:blur(5px)}.hud-box small{display:block;color:#fde68a;font-size:10px;font-weight:950;letter-spacing:.12em}.hud-box strong{display:block;font-size:clamp(14px,3.4vw,24px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-box.stage strong{font-size:clamp(12px,2.8vw,20px)}
#energyWrap{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:calc(max(10px,env(safe-area-inset-top)) + 72px);height:18px;border-radius:999px;background:rgba(4,38,166,.58);border:2px solid rgba(245,217,10,.26);overflow:hidden;z-index:8;box-shadow:0 8px 22px rgba(0,0,0,.16)}#energyBar{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#16a34a,#f5d90a,#ff8a00,#ef4444);transform-origin:left center;transition:transform .12s linear}#energyLabel{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:950;color:white;text-shadow:0 1px 3px black;text-transform:uppercase;letter-spacing:.14em}
#touch{position:absolute;left:50%;right:auto;bottom:var(--safe-bottom);transform:translateX(-50%);width:min(960px,100%);display:grid;grid-template-columns:minmax(54px,140px) minmax(54px,140px) minmax(42px,1.5fr) minmax(54px,140px) minmax(54px,140px);gap:10px;padding:0 max(14px,env(safe-area-inset-left));z-index:12;pointer-events:none}#touch button{pointer-events:auto;min-height:54px;border-radius:18px;background:rgba(4,38,166,.72);color:white;border:2px solid rgba(245,217,10,.24);font-size:24px;font-weight:950;box-shadow:0 8px 22px rgba(0,0,0,.24);backdrop-filter:blur(4px)}#leftBtn{grid-column:1}#boostBtn{grid-column:2;background:rgba(245,217,10,.88)!important;color:#07102a!important;border-color:#8a6f00!important}#shieldBtn{grid-column:4;background:rgba(36,52,119,.78)!important}#rightBtn{grid-column:5}
#toast{position:absolute;left:50%;top:45%;translate:-50% -50%;z-index:14;min-width:min(420px,80vw);padding:14px 18px;border-radius:18px;background:rgba(4,38,166,.86);color:white;font-size:clamp(18px,5vw,34px);font-weight:1000;text-align:center;box-shadow:var(--shadow);opacity:0;transform:scale(.94);transition:opacity .18s,transform .18s;pointer-events:none;border:1px solid rgba(245,217,10,.28)}#toast.show{opacity:1;transform:scale(1)}
body.playing .screen{pointer-events:none}body.playing #menu,body.playing #rules,body.playing #over{display:none!important}
@media (max-width:560px){.hud{grid-template-columns:.72fr 1fr 1fr}.hud-box.stage{grid-column:1/-1}.primary,.secondary{width:100%;min-width:0}.menu-actions{width:min(420px,100%)}#energyWrap{top:calc(max(10px,env(safe-area-inset-top)) + 104px)}.screen{padding-left:14px;padding-right:14px}.result-grid{grid-template-columns:1fr 1fr}#touch{gap:6px;grid-template-columns:minmax(46px,1fr) minmax(46px,1fr) minmax(26px,.55fr) minmax(46px,1fr) minmax(46px,1fr)}#touch button{min-height:50px}}
@media (pointer:fine){.lead{font-size:20px}}