:root { --ink:#1b1426; --panel:rgba(26,19,38,.88); --accent:#ffb24a; --good:#9be564; --warn:#ffc94a; --bad:#ff5a4a; --rain:#7fd8ff; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#17131f; overflow:hidden; overscroll-behavior:none;
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif; color:#fff; }
#game { position:fixed; inset:0; height:100vh; height:100dvh; }
canvas#view { position:absolute; inset:0; width:100%; height:100%; display:block; }
#touchzone { position:absolute; inset:0; z-index:2; touch-action:none; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; z-index:4; pointer-events:none;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  max-width:620px; margin:0 auto; }
.row { display:flex; align-items:center; gap:10px; }
.stam { flex:1; display:flex; align-items:center; gap:8px; background:var(--panel); border:2px solid #fff3; border-radius:14px; padding:6px 10px; transition:transform .15s; }
.stam .ico { width:20px; height:20px; color:var(--warn); flex:none; }
.stam .bar { flex:1; height:16px; background:#0006; border-radius:9px; overflow:hidden; border:1px solid #fff2; }
#stamFill { height:100%; width:100%; border-radius:9px; background:linear-gradient(90deg,#69c43a,#b6f06a); transition:background .2s; }
.stam.low #stamFill { background:linear-gradient(90deg,#e0382c,#ff8a5a); }
.stam.low { border-color:var(--bad); animation:lowpulse .45s infinite alternate; }
.stam.gain { }
.stam.gain { animation:gain .4s; }
#stamText { min-width:2.2em; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }
@keyframes lowpulse { to { transform:scale(1.04); background:rgba(90,16,16,.9); } }
@keyframes gain { 0%{transform:scale(1)} 30%{transform:scale(1.08); box-shadow:0 0 18px #b6f06a} 100%{transform:scale(1)} }
.icon-btn { pointer-events:auto; width:46px; height:46px; flex:none; border-radius:14px; border:2px solid #fff3; background:var(--panel); color:#fff; padding:9px; cursor:pointer; touch-action:manipulation; }
.icon-btn svg { width:100%; height:100%; }
.icon-btn .slash { display:none; }
.icon-btn.muted .slash { display:block; color:var(--bad); }
.icon-btn.muted .waves { display:none; }
.icon-btn:active { transform:scale(.94); }
.scores { justify-content:space-between; margin-top:8px; padding:0 4px; text-shadow:0 2px 4px #000a; }
.lbl { font-size:13px; letter-spacing:.12em; opacity:.95; }
.lbl b { font-size:30px; letter-spacing:0; margin-left:4px; color:#fff; font-variant-numeric:tabular-nums; }
.best { font-size:13px; letter-spacing:.1em; opacity:.85; }

#alert { position:absolute; left:50%; top:104px; transform:translateX(-50%) scale(.8); opacity:0; pointer-events:none; text-align:center;
  padding:6px 18px 7px; border-radius:16px; min-width:200px; display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center; text-align:left; transition:opacity .12s, transform .12s; text-shadow:0 2px 3px #0008; }
#alert.show { opacity:1; transform:translateX(-50%) scale(1); }
#alert.warn { background:rgba(214,120,10,.94); border:3px solid #ffe08a; animation:alertpulse .5s infinite alternate; }
#alert.danger { background:rgba(190,30,30,.94); border:3px solid #ffb0a0; animation:alertpulse .3s infinite alternate; }
#alert.safe { background:rgba(24,110,150,.92); border:3px solid #a8ecff; }
#alertTitle { font-weight:900; letter-spacing:.12em; font-size:16px; }
#alertNum { grid-row:1 / span 2; grid-column:2; font-weight:900; font-size:34px; line-height:1; font-variant-numeric:tabular-nums; }
#alertSub { font-weight:700; font-size:13px; opacity:.95; }
@keyframes alertpulse { to { transform:translateX(-50%) scale(1.06); } }

#hint { position:absolute; left:50%; top:178px; transform:translate(-50%,10px); opacity:0; max-width:86%; text-align:center;
  background:var(--panel); border:2px solid #fff4; border-radius:14px; padding:9px 16px; font-weight:700; font-size:16px; transition:opacity .25s, transform .25s; }
#hint.show { opacity:1; transform:translate(-50%,0); }
#banner { position:absolute; left:50%; top:40%; transform:translate(-50%,0) scale(.5); opacity:0; font-size:56px; font-weight:900; color:#ffd84a;
  -webkit-text-stroke:3px #2a1536; paint-order:stroke fill; text-shadow:0 4px 0 #2a1536; white-space:nowrap; }
#banner.pop { animation:banner 1.5s ease-out; }
@keyframes banner { 0%{opacity:0; transform:translate(-50%,10px) scale(.4)} 15%{opacity:1; transform:translate(-50%,0) scale(1.15)} 25%{transform:translate(-50%,0) scale(1)} 80%{opacity:1} 100%{opacity:0; transform:translate(-50%,-30px) scale(1)} }

/* ---------- virtual joystick (floating; idle position bottom-left) ---------- */
#joy { position:fixed; left:0; top:0; width:140px; height:140px; z-index:3; pointer-events:none; display:none; opacity:.55; transition:opacity .15s; will-change:transform; }
body.touch #joy { display:block; }
#joy.active { opacity:1; }
#joy .ring { position:absolute; inset:0; border-radius:50%; border:4px solid #fff; background:radial-gradient(circle,#ffffff22,#ffffff0d 60%,#ffffff33); box-shadow:0 0 0 3px #0005, inset 0 0 18px #0004; }
#knob { position:absolute; left:35px; top:35px; width:70px; height:70px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe9b0,#ffb24a 70%); border:3px solid #fff; box-shadow:0 3px 8px #0008; }
.joylbl { position:absolute; left:-10px; right:-10px; top:-26px; text-align:center; font-size:12px; font-weight:800; letter-spacing:.12em; text-shadow:0 1px 3px #000; }
#joy.active .joylbl, body.playing:not(.hintjoy) #joy .joylbl { visibility:hidden; }

/* ---------- overlays ---------- */
.overlay { position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(12,8,22,.45); pointer-events:none; transition:opacity .25s; }
.overlay.hidden { opacity:0; visibility:hidden; }
.card { pointer-events:auto; width:min(420px,100%); max-height:100%; overflow:auto; text-align:center; padding:20px 22px 18px; border-radius:22px;
  background:var(--panel); border:3px solid #ffffff40; box-shadow:0 14px 40px #000a; animation:cardin .4s ease-out; }
@keyframes cardin { from { transform:translateY(20px) scale(.95); opacity:0; } }
h1 { margin:0; font-size:40px; line-height:1; letter-spacing:.02em; color:#fff; text-shadow:0 3px 0 #0007; }
h1 span { color:var(--accent); font-size:54px; }
h2 { margin:0 0 6px; font-size:34px; color:var(--bad); }
.tag { margin:8px 0 12px; opacity:.85; }
.legend { list-style:none; margin:0 0 16px; padding:0; text-align:left; display:grid; gap:7px; }
.legend li { display:flex; align-items:center; gap:12px; background:#ffffff12; border-radius:12px; padding:6px 10px; font-size:16px; }
.legend svg { width:30px; height:30px; flex:none; }
.legend em { font-style:normal; font-size:12px; font-weight:800; background:var(--accent); color:var(--ink); border-radius:6px; padding:1px 6px; margin-left:4px; }
.legend .tc { display:none; } body.touch .legend .tc { display:inline; } body.touch .legend .kb { display:none; }
.big { font:inherit; font-weight:900; font-size:26px; letter-spacing:.1em; width:100%; min-height:62px; border:0; border-radius:18px; color:var(--ink); cursor:pointer;
  background:linear-gradient(#ffd070,#ffa030); box-shadow:0 6px 0 #a35a10, 0 10px 18px #0006; touch-action:manipulation; animation:bob 1.4s ease-in-out infinite; }
.big:active { transform:translateY(4px); box-shadow:0 2px 0 #a35a10; }
@keyframes bob { 50% { transform:scale(1.03); } }
.small { font-size:13px; opacity:.7; margin:10px 0 0; }
.cause { margin:0 0 10px; font-size:17px; opacity:.95; }
.result { display:flex; flex-direction:column; align-items:center; }
.result span { font-size:13px; letter-spacing:.2em; opacity:.8; }
.result b { font-size:60px; line-height:1.05; color:#ffd84a; text-shadow:0 4px 0 #0007; }
.bestline { font-weight:800; font-size:18px; margin:2px 0 4px; }
.bestline.new { color:#9be564; animation:bob .7s infinite; font-size:24px; }
.overlay .small + .big, .overlay .small ~ .big { margin-top:12px; }
#overFlies { margin-bottom:14px; }

@media (max-height:520px) { .legend { grid-template-columns:1fr 1fr; } h1 { font-size:28px; } h1 span { font-size:36px; } .tag { display:none; } }
@media (max-width:380px) { .lbl b { font-size:26px; } h1 { font-size:34px; } h1 span { font-size:46px; } .legend li { font-size:15px; } }

body.touch .kbonly { display:none; }