/* =====================================================================================
   ZOBLINS — skinned with the Spooky-Cute UI sheet
   1 tokens · 2 base · 3 HUD · 4 buttons · 5 panels & overlays · 6 screens · 7 editor · 8 media queries
   type: eyebrow 12/3px tracking · body 16/1.5 · small 13 · titles Creepster 44–56
   ===================================================================================== */

/* =================== 1. tokens =================== */
:root {
  /* colours */
  --bg:#07051a; --text:#f2e8cf; --cream:#ead9b0; --muted:#a59cc4; --acid:#9dff4a; --acid2:#d6ff7a; --lantern:#ffb347; --blood:#ff4a5a;
  --bg-rgb:7,5,26; --night-rgb:5,3,15; --cream-rgb:234,217,176; --acid-rgb:157,255,74; --lantern-rgb:255,179,71; --blood-rgb:255,74,90;
  --ink: 0 2px 0 #1a0f2a, 0 0 2px #1a0f2a, 1px 1px 0 #1a0f2a, -1px -1px 0 #1a0f2a;   /* outlined text */
  /* HUD scale (JS sets the live value inline on :root) */
  --s:1;
  /* spacing: 4 · 8 · 12 · 16 · 24 · 32 */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px;
  /* radii */
  --r-sm:8px; --r-md:12px; --r-pill:99px;
  /* stacking */
  --z-fx:4; --z-hud:5; --z-float:6; --z-banner:7; --z-overlay:8; --z-top:9; --z-loading:20;
  /* shadows */
  --drop-art:drop-shadow(0 6px 10px rgba(0,0,0,.7));
  --shadow-chip:0 4px 12px #000;
  --glow-acid:0 0 12px rgba(var(--acid-rgb),.6);
}

/* =================== 2. base =================== */
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:Fredoka, system-ui, sans-serif; overflow:hidden; user-select:none; }
button { font-family:inherit; cursor:pointer; }
img { -webkit-user-drag:none; }
#stage { position:fixed; inset:0; cursor:crosshair; }
#stage.can { cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34'><circle cx='17' cy='17' r='12' fill='none' stroke='%239dff4a' stroke-width='3'/><circle cx='17' cy='17' r='2.5' fill='%239dff4a'/></svg>") 17 17, crosshair; }
#stage.popping.can { cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34'><circle cx='17' cy='17' r='12' fill='none' stroke='%23ff4a5a' stroke-width='3'/><path d='M11 11L23 23M23 11L11 23' stroke='%23ff4a5a' stroke-width='3'/></svg>") 17 17, crosshair; }
#c { width:100%; height:100%; display:block; }

/* one keyboard focus ring for everything clickable */
:is(.btn, .ib, .skill, .tab, .edt, .edbar button, .step button, .rate button, .hit, .comm, input, select, textarea):focus-visible {
  outline:none; box-shadow:0 0 0 3px rgba(var(--acid-rgb),.75), 0 0 18px rgba(var(--acid-rgb),.4) !important; }
.skill:focus-visible { box-shadow:none !important; }
.skill:focus-visible .ring { box-shadow:0 0 0 3px rgba(var(--acid-rgb),.75); }

@keyframes pulse { 50% { opacity:.5; } }
@keyframes pulseGlow { 50% { filter:drop-shadow(0 0 22px rgba(var(--acid-rgb),.9)); } }
@keyframes rise { from { transform:translateY(24px) scale(.95); opacity:0; } }
@keyframes bob { 50% { transform:translateY(-8px) rotate(-1.5deg); } }
@keyframes fadein { from { opacity:0; transform:translateY(8px); } }

/* =================== 3. HUD =================== */
/* top bar: logo top-left, status top-centre, window controls top-right */
.hud { position:absolute; top:8px; left:10px; right:10px; z-index:var(--z-hud); pointer-events:none; opacity:0; transform:translateY(-14px); transition:opacity .4s, transform .4s; }
/* bottom dock: spawn speed · skill tray · time controls */
.dock { position:absolute; bottom:calc(10px * var(--s)); left:calc(10px * var(--s)); right:calc(10px * var(--s)); z-index:var(--z-hud);
        display:grid; grid-template-columns:1fr auto 1fr; align-items:end; justify-content:center; gap:calc(12px * var(--s));
        pointer-events:none; opacity:0; transform:translateY(14px); transition:opacity .4s, transform .4s; }
body.in-game .hud, body.in-game .dock { opacity:1; transform:none; }
body.in-game .hud > *, body.in-game .hud .hrow > *, body.in-game .dock > * { pointer-events:auto; }
body:not(.in-game) .hud, body:not(.in-game) .dock { visibility:hidden; }
.hud .hl { position:absolute; left:0; top:0; }
.hud .hc { position:absolute; left:50%; top:0; transform:translateX(-50%); }
.hud .hr { position:absolute; right:0; top:calc(6px * var(--s)); margin:0; }
.hud .hlogo.hl { display:block; height:calc(70px * var(--s)); z-index:var(--z-hud); pointer-events:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); transition:opacity .4s, transform .4s; }
.hrow { display:flex; align-items:center; gap:calc(8px * var(--s)); }

/* plates */
.uip { position:relative; background:center / 100% 100% no-repeat; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.uip small { font-size:calc(15px * var(--s)); font-weight:700; letter-spacing:1.5px; color:var(--cream); text-shadow:var(--ink); line-height:1; margin-top:calc(8px * var(--s)); }
.uip b { font-size:calc(30px * var(--s)); font-weight:700; color:var(--acid2); text-shadow:0 0 12px rgba(var(--acid-rgb),.7), var(--ink); font-variant-numeric:tabular-nums; line-height:1.05; }
/* level name: same plate art as its neighbours, only the plain middle stretches */
.uip.name { width:calc(380px * var(--s)); height:calc(70px * var(--s)); min-width:0; min-height:0; padding:0; background:none;
            border:0 solid transparent; border-width:0 calc(64px * var(--s)) 0 calc(80px * var(--s));
            border-image:url(../assets/ui/panel_name.webp) 0 152 0 190 fill / 0 calc(64px * var(--s)) 0 calc(80px * var(--s)) stretch; }
.uip.name span { position:relative; top:calc(2px * var(--s)); width:calc(100% + 88px * var(--s)); margin:0 calc(-40px * var(--s)) 0 calc(-48px * var(--s)); padding:0;
                 font-size:calc(20px * var(--s)); font-weight:700; line-height:1; text-align:center; color:var(--cream); text-shadow:var(--ink);
                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uip.sm { width:calc(76px * var(--s)); height:calc(78px * var(--s)); background-image:url(../assets/ui/panel_sm.webp); }
.uip.sm2 { width:calc(84px * var(--s)); height:calc(78px * var(--s)); background-image:url(../assets/ui/panel_sm2.webp); }
.uip.bar { width:calc(150px * var(--s)); height:calc(80px * var(--s)); background-image:url(../assets/ui/panel_bar.webp); justify-content:flex-start; }
.uip.bar b { font-size:calc(24px * var(--s)); }
.sbar { position:relative; width:76%; height:calc(9px * var(--s)); margin-top:calc(5px * var(--s)); border-radius:9px; background:#120c24; box-shadow:inset 0 1px 3px #000, 0 0 0 2px #2a1f44; }
.sbar i { position:absolute; left:0; top:0; bottom:0; border-radius:9px; background:linear-gradient(90deg,#3fae14,#b6ff4a); box-shadow:0 0 10px var(--acid); transition:width .3s; }
.sbar em { position:absolute; top:-4px; bottom:-4px; width:4px; border-radius:2px; background:var(--lantern); box-shadow:0 0 8px var(--lantern); }
#hTime.low { color:#ff8a8a; text-shadow:0 0 12px var(--blood), var(--ink); animation:pulse 1s infinite; }

/* icon buttons */
.tools { display:flex; gap:calc(4px * var(--s)); }
.dock .tools.br { justify-self:end; }
.ib { position:relative; width:calc(58px * var(--s)); height:calc(54px * var(--s)); padding:0; border:none; background:none; transition:transform .12s, filter .12s; }
.ib img { width:100%; height:100%; object-fit:contain; display:block; }
.ib:hover { transform:translateY(-2px) scale(1.05); filter:brightness(1.15); }
.ib:active { transform:scale(.95); }
.ib.glyph span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:calc(24px * var(--s)); color:#bfe0ff; text-shadow:0 0 10px #4aa8ff; padding-bottom:calc(3px * var(--s)); }
.ib.on { filter:drop-shadow(0 0 8px var(--acid)); }
#muteBtn.off::after { content:""; position:absolute; left:22%; right:22%; top:48%; height:calc(5px * var(--s)); background:var(--blood); border-radius:3px; transform:rotate(-38deg); box-shadow:0 0 6px var(--blood); }
#nukeBtn span { color:#ffb0b0; text-shadow:0 0 10px var(--blood); }
#nukeBtn.armed { filter:drop-shadow(0 0 12px var(--blood)); animation:pulse .3s infinite; }

/* release (spawn speed) panel; static so its .hit arrows sit on the dock */
.uip.release { position:static; justify-self:start; width:calc(250px * var(--s)); height:calc(74px * var(--s)); background-image:url(../assets/ui/panel_release.webp); flex-direction:row; }
.uip.release div { display:flex; flex-direction:column; align-items:center; }
.uip.release small { margin-top:0; font-size:calc(12px * var(--s)); }
.uip.release b { color:#ffd84d; text-shadow:0 0 12px rgba(255,190,60,.8), var(--ink); font-size:calc(28px * var(--s)); }
.ratev { display:flex; align-items:baseline; gap:6px; }
.ratev em { font-style:normal; font-size:calc(11px * var(--s)); color:var(--cream); text-shadow:var(--ink); opacity:.85; white-space:nowrap; }
.hit { position:absolute; top:30%; bottom:14%; width:20%; background:none; border:none; border-radius:10px; }
.hit.l { left:8%; } .hit.r { right:8%; }
.hit:hover { box-shadow:0 0 14px rgba(255,190,60,.6); }

/* skill tray: round medallions */
#skills { justify-self:center; display:flex; gap:calc(6px * var(--s)); align-items:flex-end; padding:calc(10px * var(--s)) calc(16px * var(--s)) calc(6px * var(--s)); border-radius:calc(26px * var(--s));
  background:linear-gradient(180deg, rgba(34,20,66,.82), rgba(12,7,28,.9)); border:1px solid rgba(var(--acid-rgb),.22);
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(6px); }
#skills.nudge { animation:nudge .4s; }
@keyframes nudge { 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }
#skills .sep { width:1px; align-self:stretch; margin:calc(8px * var(--s)) calc(4px * var(--s)); background:linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent); }
.skill { position:relative; width:calc(78px * var(--s)); padding:0; border:none; background:none; display:flex; flex-direction:column; align-items:center; gap:calc(3px * var(--s));
         cursor:pointer; transition:transform .14s, filter .14s; }
.skill .ring { position:relative; width:calc(64px * var(--s)); height:calc(64px * var(--s)); border-radius:50%; display:block; transition:transform .16s cubic-bezier(.3,1.6,.5,1), box-shadow .16s; box-shadow:0 4px 10px rgba(0,0,0,.55); }
.skill .ring img { width:100%; height:100%; display:block; }
.skill .lbl { font-size:calc(11.5px * var(--s)); font-weight:700; letter-spacing:.3px; color:var(--cream); text-shadow:0 1px 0 #000; white-space:nowrap; }
.skill .cnt { position:absolute; top:calc(-4px * var(--s)); right:calc(2px * var(--s)); z-index:2; width:calc(30px * var(--s)); height:calc(30px * var(--s)); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 40% 35%, #3a2f5a, #1a1430); border:2px solid #5a4a7a;
  color:#fff; font-weight:700; font-style:normal; font-size:calc(15px * var(--s)); box-shadow:0 2px 6px #000; }
.skill kbd { position:absolute; top:0; left:calc(2px * var(--s)); z-index:2; width:calc(18px * var(--s)); height:calc(18px * var(--s)); border-radius:6px;
  display:flex; align-items:center; justify-content:center; background:#1c1336; border:1px solid rgba(255,255,255,.18);
  font:700 calc(10.5px * var(--s)) Fredoka; color:rgba(var(--cream-rgb),.8); }
.skill:hover .ring { transform:translateY(-4px) scale(1.05); }
.skill.sel .ring { transform:translateY(-8px) scale(1.12); box-shadow:0 0 0 3px var(--acid), 0 0 22px rgba(var(--acid-rgb),.7), 0 8px 14px rgba(0,0,0,.6); }
.skill.sel .lbl { color:var(--acid2); }
.skill.sel .cnt { background:radial-gradient(circle at 40% 35%, #c8ff7a, #5bd12a); border-color:#d6ff7a; color:#132406; box-shadow:0 0 12px var(--acid); }
.skill.free .cnt { background:rgba(20,12,40,.9); color:var(--muted); border-color:rgba(255,255,255,.2); font-size:calc(15px * var(--s)); }
.skill.pop.sel .ring { box-shadow:0 0 0 3px var(--blood), 0 0 22px rgba(var(--blood-rgb),.7), 0 8px 14px rgba(0,0,0,.6); }
.skill.pop.sel .cnt { background:radial-gradient(circle at 40% 35%, #ff8a8a, #c02a3a); border-color:#ffb0b0; color:#fff; }
.skill.halt.sel .ring { box-shadow:0 0 0 3px var(--lantern), 0 0 22px rgba(var(--lantern-rgb),.7), 0 8px 14px rgba(0,0,0,.6); }
.skill.empty .ring { filter:grayscale(1) brightness(.45); }
.skill.empty .lbl { color:var(--muted); }
.skill.empty:hover .ring { transform:none; }

/* cursor tooltip and world-space markers */
#tip { position:absolute; left:0; top:0; z-index:var(--z-float); pointer-events:none; opacity:0; transition:opacity .12s; white-space:nowrap;
       background:rgba(16,10,34,.9); border:2px solid #4a3a6a; border-radius:10px; padding:4px 10px; font-size:14px; box-shadow:var(--shadow-chip); }
#tip b { color:var(--acid2); } #tip span { color:var(--muted); margin-left:6px; } #tip em { color:var(--lantern); margin-left:6px; font-style:normal; }
#fuses { position:absolute; inset:0; pointer-events:none; z-index:var(--z-fx); }
#fuses .qbash { position:absolute; left:-13px; top:-20px; font-size:24px; font-style:normal; filter:drop-shadow(0 0 6px #ffcf4a) drop-shadow(0 2px 0 #000); animation:qb 0.8s ease-in-out infinite alternate; }
@keyframes qb { to { margin-top:-4px; } }
#fuses span { position:absolute; left:-10px; top:-14px; font:700 22px Fredoka; color:#fff; text-shadow:0 0 8px var(--blood), 0 0 18px var(--blood), 0 2px 0 #000; }

/* =================== 4. buttons =================== */
/* ornate frame = the one primary action (.big); everything else is a clean secondary */
.btn { position:relative; border:solid transparent; border-width:18px 30px; border-image:url(../assets/ui/button2.webp) 96 150 fill / 18px 30px round stretch; background:none;
       color:var(--cream); text-shadow:var(--ink); padding:2px 8px; min-width:140px; font-size:16px; font-weight:700; letter-spacing:1.2px; line-height:22px;
       transition:transform .12s, filter .12s; }
.btn:hover { transform:translateY(-2px) scale(1.04); filter:brightness(1.15) drop-shadow(0 0 10px rgba(var(--acid-rgb),.5)); }
.btn.big { font-size:24px; min-width:230px; line-height:30px; border-width:22px 36px; border-image-width:22px 36px;
           color:var(--acid2); text-shadow:0 0 12px rgba(var(--acid-rgb),.8), var(--ink); filter:drop-shadow(0 0 14px rgba(var(--acid-rgb),.45)); }
.btn:active { transform:scale(.96); }
.btn:not(.big) { border:1.5px solid rgba(var(--acid-rgb),.3); border-image:none; border-radius:14px; padding:10px 22px; line-height:20px; min-width:0;
  background:linear-gradient(180deg, rgba(64,40,112,.94), rgba(30,18,58,.96)); color:var(--cream); font-weight:600; letter-spacing:1.4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.45); text-shadow:0 1px 0 #000; }
.btn:not(.big):hover { border-color:var(--acid); filter:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 3px rgba(var(--acid-rgb),.14), 0 8px 22px rgba(0,0,0,.5), 0 0 22px rgba(var(--acid-rgb),.25); }
.btn.ghost:not(.big) { background:rgba(20,12,40,.55); border-color:rgba(255,255,255,.14); color:var(--muted); }
.btn.sm:not(.big) { padding:7px 14px; font-size:13px; border-radius:11px; }
.btn.big.share { color:var(--lantern); text-shadow:0 0 12px rgba(var(--lantern-rgb),.8), var(--ink); filter:drop-shadow(0 0 14px rgba(var(--lantern-rgb),.4)); }

/* =================== 5. panels & overlays =================== */
.overlay { position:absolute; inset:0; z-index:var(--z-overlay); display:flex; align-items:center; justify-content:center; padding:20px;
           background:radial-gradient(circle at 50% 45%, rgba(var(--bg-rgb),.25), rgba(var(--bg-rgb),.82)); transition:opacity .35s; }
/* hidden screens are really gone: no tabbing into invisible buttons */
.overlay.hidden { opacity:0; pointer-events:none; visibility:hidden; transition:opacity .35s, visibility 0s .35s; }
/* 9-slice frame; JS scales a panel down to fit (--fit) instead of scrolling it, so glows never clip */
.panel { position:relative; text-align:center; margin:34px; padding:0 18px 4px;
         border:54px solid transparent; border-image:url(../assets/ui/frame2.webp) 196 fill / 104px / 34px stretch;
         filter:drop-shadow(0 20px 40px rgba(0,0,0,.7)); animation:rise .5s cubic-bezier(.2,.9,.3,1.25);
         scale:var(--fit, 1); transform-origin:50% 50%; scrollbar-width:none; }
.panel h2 { font-family:Creepster, Fredoka, cursive; font-weight:400; font-size:clamp(34px, 4.6vw, 58px); letter-spacing:2px; line-height:1.05; margin:0 0 var(--sp3);
            color:var(--acid2); text-shadow:0 0 18px rgba(var(--acid-rgb),.6), 0 4px 0 #1b3a08; text-wrap:balance; }
.panel h2.lose { color:#ff9a9a; text-shadow:0 0 18px rgba(var(--blood-rgb),.6), 0 4px 0 #3a0810; }
.eyebrow { font-size:12px; letter-spacing:3px; line-height:1.4; color:var(--muted); text-transform:uppercase; font-weight:600; }
.small { font-size:13px; color:var(--muted); margin:10px 0 0; }
.hint { color:var(--cream); font-size:16px; line-height:1.5; max-width:560px; margin:10px auto; }
.menu { display:flex; gap:var(--sp4); justify-content:center; align-items:center; flex-wrap:wrap; margin-top:var(--sp5); padding:var(--sp2) var(--sp3); }
.menu.col { flex-direction:column; align-items:stretch; width:280px; margin-inline:auto; }
.menu.col .btn { width:100%; }
.stars { color:var(--lantern); letter-spacing:1px; text-shadow:0 0 8px rgba(var(--lantern-rgb),.7); font-size:15px; }
.stars i { color:rgba(255,255,255,.18); font-style:normal; text-shadow:none; }
.headart { display:block; width:150px; margin:-6px auto -4px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.7)); animation:bob 3.5s ease-in-out infinite; }
.tabs { display:flex; gap:6px; justify-content:center; margin:6px 0 10px; }
.tab { padding:8px 20px; border-radius:var(--r-pill); border:1px solid rgba(var(--acid-rgb),.3); background:rgba(255,255,255,.04); color:var(--cream); font:600 15px Fredoka; }
.tab.on { background:rgba(var(--acid-rgb),.22); border-color:var(--acid); color:#fff; }

/* =================== 6. screens =================== */
/* ---------- title screen / main menu ---------- */
#loading { position:absolute; inset:0; z-index:var(--z-loading); background:#05030f; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; transition:opacity .8s; overflow:hidden; }
#loading::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%, rgba(var(--night-rgb),.55) 0%, rgba(var(--night-rgb),.15) 40%, transparent 60%), linear-gradient(180deg, transparent 70%, rgba(var(--night-rgb),.85)); }
#loading.ready { cursor:default; }
#loading.gone { opacity:0; pointer-events:none; visibility:hidden; transition:opacity .35s, visibility 0s .35s; }
#loading .splash { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform:scale(1.08) translate(-1%, -1%); } }
.mist { position:absolute; left:-20%; right:-20%; height:40%; bottom:-5%; pointer-events:none; opacity:.5;
        background:radial-gradient(ellipse at 30% 60%, rgba(120,110,170,.45), transparent 60%), radial-gradient(ellipse at 75% 70%, rgba(120,110,170,.35), transparent 55%);
        animation:mist 22s linear infinite alternate; }
.mist.m2 { bottom:10%; opacity:.3; animation-duration:31s; animation-direction:alternate-reverse; }
@keyframes mist { to { transform:translateX(12%); } }
.flies { position:absolute; inset:0; z-index:1; pointer-events:none; }
.flies i { position:absolute; left:var(--x); top:var(--y); width:5px; height:5px; border-radius:50%; background:#d6ff7a; box-shadow:0 0 10px 3px rgba(190,255,90,.7);
           opacity:0; animation:fly var(--t) var(--d) ease-in-out infinite; }
@keyframes fly { 0%, 100% { opacity:0; transform:translate(0, 0); } 30% { opacity:.9; } 50% { transform:translate(30px, -40px); opacity:.5; } 70% { opacity:.9; } }
.titlelogo { position:absolute; z-index:2; left:50%; top:var(--tt); width:var(--lw); transform:translateX(-50%);
             filter:drop-shadow(0 0 28px rgba(var(--acid-rgb),.45)) drop-shadow(0 12px 18px rgba(0,0,0,.8)); animation:logodrop 1.4s cubic-bezier(.2,1.4,.4,1) both, logofloat 6s 1.4s ease-in-out infinite; }
@keyframes logodrop { from { transform:translate(-50%, -60px) scale(.7); opacity:0; } }
@keyframes logofloat { 50% { transform:translate(-50%, -8px) rotate(-.6deg); } }
.tagline { position:absolute; z-index:2; left:0; right:0; top:calc(var(--tt) + var(--lw) * .42 + 4px); margin:0; text-align:center; font:600 clamp(14px, 1.6vw, 20px) Fredoka;
           letter-spacing:5px; text-transform:uppercase; color:var(--cream); text-shadow:0 2px 0 #000, 0 0 14px rgba(0,0,0,.9); animation:fadein 1.2s 1s both; }
.loadbox { position:absolute; z-index:2; left:50%; top:62%; transform:translateX(-50%); margin:0; display:flex; align-items:center; justify-content:center; gap:12px;
           min-width:300px; padding:2px 20px; border:solid transparent; border-width:24px 40px; border-image:url(../assets/ui/button2.webp) 96 150 fill / 24px 40px round stretch;
           backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:17px; filter:drop-shadow(0 0 22px rgba(var(--acid-rgb),.35)); }
#loading.ready .loadbox { display:none; }
.spin { width:20px; height:20px; border-radius:50%; border:3px solid rgba(var(--acid-rgb),.2); border-top-color:var(--acid); animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.mainmenu { position:absolute; z-index:3; left:50%; top:calc(var(--tt) + var(--lw) * .42 + 60px); transform:translateX(-50%); display:none; flex-direction:column; align-items:stretch; gap:12px; width:min(320px, 80vw); }
#loading.ready .mainmenu { display:flex; animation:fadein .8s .3s both; }
.mainmenu .btn { min-width:0; width:100%; }
.mainmenu .btn.big { font-size:26px; line-height:36px; margin-bottom:10px; }
.mainmenu .btn:not(.big) { padding:12px 22px; font-size:17px; background:linear-gradient(180deg, rgba(48,30,88,.88), rgba(22,13,44,.92)); backdrop-filter:blur(4px); }
.mmfs { position:absolute; z-index:3; right:16px; top:14px; width:52px; height:48px; display:none; }
#loading.ready .mmfs { display:block; }
.ver { position:absolute; z-index:2; right:16px; bottom:12px; color:rgba(var(--cream-rgb),.7); font-size:12px; letter-spacing:1px; }

/* ---------- world map bar (the map itself is the 3D canvas) ---------- */
.overlay.select { background:linear-gradient(180deg, rgba(var(--bg-rgb),.15), rgba(var(--bg-rgb),.7)); pointer-events:none; align-items:flex-start; justify-content:stretch; padding:14px 18px; }
.overlay.select::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(var(--night-rgb),.65)); pointer-events:none; }
.overlay.select .panel { position:absolute; inset:0; width:100%; margin:0; padding:0; border:0; border-image:none; filter:none; animation:none; pointer-events:none; }
.overlay.select .panel * { pointer-events:auto; }
/* the chrome never steals drags from the map */
.mapbar { position:absolute; left:18px; right:18px; top:16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:var(--sp4); pointer-events:none !important; }
.mapbar > * { pointer-events:auto; }
.mapbar > .btn { justify-self:start; margin-top:6px; }
.plaque { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 46px 14px; border:solid transparent; border-width:22px 44px;
          border-image:url(../assets/ui/frame2.webp) 196 fill / 50px / 10px round; filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)); }
.plaque b { font-family:Creepster, cursive; font-weight:400; font-size:clamp(26px, 2.6vw, 38px); letter-spacing:2px; line-height:1; color:var(--acid2); text-shadow:0 0 14px rgba(var(--acid-rgb),.55), 0 3px 0 #0e2204; white-space:nowrap; }
.plaque span { font-size:14px; color:var(--cream); white-space:nowrap; }
.plaque em { font-style:normal; font-weight:700; color:var(--acid2); } .plaque em.gold { color:var(--lantern); }
.plaque .dot { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--muted); margin:0 10px 3px; vertical-align:middle; }
.mapicons { justify-self:end; display:flex; gap:var(--sp2); }
.mapicons .ib { width:56px; height:52px; }
.mapicons .ib.glyph span { font-size:22px; font-weight:700; color:var(--cream); }
.maphint { position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:var(--sp2); text-align:center; color:var(--cream); font-size:14px; text-shadow:var(--ink); }
.maphint, .maphint span { pointer-events:none !important; }
.maphint span { padding:6px 14px; border-radius:var(--r-pill); background:rgba(8,5,22,.78); border:1px solid rgba(255,255,255,.1); font-size:13px; color:var(--cream); backdrop-filter:blur(6px); }

/* ---------- map tooltip ---------- */
#mapTip { position:absolute; left:0; top:0; z-index:var(--z-top); pointer-events:none; opacity:0; transition:opacity .15s; min-width:200px; text-align:center;
          border:30px solid transparent; border-image:url(../assets/ui/frame2.webp) 196 fill / 60px / 14px stretch; padding:0 6px 2px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.7)); }
#mapTip.on { opacity:1; }
#mapTip b { display:block; font-size:17px; color:var(--cream); text-shadow:var(--ink); }
#mapTip small { display:block; color:var(--muted); font-size:12px; }
#mapTip .tipart { display:block; width:140px; height:140px; object-fit:contain; margin:-8px auto 2px; filter:var(--drop-art); }

/* ---------- briefing (.brief2) and results (.brief2.result) ---------- */
.brief2 { display:grid; grid-template-columns:260px 1fr; gap:var(--sp6); align-items:center; text-align:left; min-width:min(800px, 84vw); max-width:min(900px, 86vw); padding:var(--sp3) var(--sp2) 0; }
.brief2.result { grid-template-columns:230px 1fr; }
.brief2 h2 { margin:0 0 var(--sp4); text-align:left; }
.brief2 .eyebrow { margin-bottom:var(--sp2); }
.brief2 .txt { min-width:0; }
/* art sits on a soft radial glow with no box edge, so nothing ever looks clipped */
.artbox { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:visible;
          background:radial-gradient(circle at 50% 46%, var(--glow, rgba(var(--acid-rgb),.35)) 0%, rgba(10,6,26,0) 68%); }
.artbox img { width:92%; height:92%; object-fit:contain; filter:drop-shadow(0 12px 10px rgba(0,0,0,.55)); animation:bob 3.5s ease-in-out infinite;
              -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 62%, transparent 72%); mask-image:radial-gradient(circle at 50% 50%, #000 62%, transparent 72%); }
.artbox img.win { animation:winbounce 1.2s cubic-bezier(.3,1.6,.5,1) both, bob 3.5s 1.2s ease-in-out infinite; }
.artbox img.lose { animation:shiver .5s ease-in-out 3, bob 3.5s 1.5s ease-in-out infinite; }
@keyframes winbounce { from { transform:scale(.3) translateY(60px) rotate(-12deg); opacity:0; } }
@keyframes shiver { 25% { transform:translateX(-4px) rotate(-2deg); } 75% { transform:translateX(4px) rotate(2deg); } }
.artbox .worldtag { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); white-space:nowrap; font:700 11px Fredoka; letter-spacing:2px; text-transform:uppercase;
                    color:var(--cream); background:rgba(8,5,22,.85); border:1px solid rgba(255,255,255,.15); padding:3px 12px; border-radius:var(--r-pill); }
.chips { display:flex; gap:var(--sp2); flex-wrap:wrap; margin:0 0 var(--sp4); }
.chip { display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--r-md); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:var(--cream); font-size:15px; }
.chip b { color:var(--acid2); font-size:19px; }
.chip.goal b { font-size:22px; }
.chip small { color:var(--muted); font-size:12px; }
/* skill kit: the same medallions as the in-game tray */
.kit { display:flex; gap:var(--sp3); flex-wrap:wrap; margin:0 0 var(--sp4); }
.kit em { color:var(--muted); }
.kit .kmed { position:relative; width:72px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.kit .kmed img { width:60px; height:60px; border-radius:50%; filter:drop-shadow(0 4px 6px rgba(0,0,0,.55)); }
.kit .kmed sub { position:absolute; right:2px; top:-4px; font:700 12px Fredoka; background:var(--acid); color:#122404; border-radius:9px; padding:1px 6px; }
.kit .kmed b { font:700 11.5px Fredoka; color:var(--cream); white-space:nowrap; text-shadow:0 1px 0 #000, 0 0 4px #000; letter-spacing:.2px; }
.brief2 .kit:has(> span:nth-child(7)) span.kmed { width:60px; }
.brief2 .kit:has(> span:nth-child(7)) .kmed img { width:50px; height:50px; }
.tipbox { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin-bottom:var(--sp3); border-radius:var(--r-md);
          background:linear-gradient(135deg, rgba(var(--lantern-rgb),.12), rgba(var(--lantern-rgb),.04)); border:1px solid rgba(var(--lantern-rgb),.28);
          color:var(--cream); font-size:15px; line-height:1.45; text-wrap:pretty; }
.tipbox::before { content:"💡"; font-size:18px; }
.tipbox.bad { background:linear-gradient(135deg, rgba(255,90,110,.14), rgba(255,90,110,.04)); border-color:rgba(255,90,110,.35); }
.tipbox.bad::before { content:"💀"; }
.tipbox.bad b { color:#ffb0b8; }
/* results: stars + tally */
.scoreline { display:flex; align-items:center; gap:var(--sp5); margin:var(--sp1) 0 var(--sp3); }
.bigstars { margin:0; font-size:50px; color:var(--lantern); letter-spacing:6px; text-shadow:0 0 18px rgba(var(--lantern-rgb),.8); line-height:1; white-space:nowrap; }
.bigstars span { display:inline-block; color:rgba(255,255,255,.14); text-shadow:none; font-size:58px; margin:0 2px; }
.bigstars span.on { color:var(--lantern); text-shadow:0 0 22px rgba(var(--lantern-rgb),.9), 0 3px 0 #6a3a00; animation:starpop .6s cubic-bezier(.3,1.8,.5,1) both; }
.bigstars span:nth-child(2) { font-size:70px; }
@keyframes starpop { from { transform:scale(0) rotate(-90deg); opacity:0; } }
.tallybox { flex:1; min-width:0; }
.tallybox .tally { font-size:15px; color:var(--cream); margin-bottom:6px; text-align:left; }
.tallybox .tally b { font-size:26px; color:var(--acid2); margin-right:4px; text-shadow:var(--glow-acid); }
.tallybox .tally span { color:var(--muted); }
.artbox.lose ~ .txt .tally b { color:#ff9a9a; }
.panel .bar { position:relative; width:100%; max-width:420px; height:12px; margin:0; border-radius:9px; background:#120c24; box-shadow:inset 0 1px 3px #000, 0 0 0 2px #2a1f44; }
.panel .bar i { position:absolute; left:0; top:0; bottom:0; border-radius:9px; background:linear-gradient(90deg,#3fae14,#b6ff4a); box-shadow:0 0 10px var(--acid); }
.panel .bar em { position:absolute; top:-4px; bottom:-4px; width:4px; background:var(--lantern); box-shadow:0 0 8px var(--lantern); }
.tallybox .thr { display:block; margin-top:6px; color:var(--muted); font-size:13px; letter-spacing:.5px; }
/* results: two primary actions up top, small secondary row beneath */
.ctas { display:flex; flex-direction:column; align-items:center; gap:var(--sp2); margin-top:var(--sp4); }
.ctas .menu { margin:0; padding:var(--sp1) var(--sp3); }
.ctas .menu.secondary { gap:var(--sp2); }

/* ---------- how to play ---------- */
.howwrap { width:min(900px, 80vw); }
.howwrap h2 { margin-bottom:var(--sp2); }
.howwrap .tabs { margin:0 0 var(--sp4); }
.howbody { height:min(56vh, 412px); overflow:auto; padding:var(--sp2) var(--sp3); margin:0 calc(-1 * var(--sp3)); scrollbar-width:thin; scrollbar-color:rgba(var(--acid-rgb),.4) transparent; scrollbar-gutter:stable;
           mask-image:linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent); }
.howlist { display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; gap:10px; text-align:left; }
.howlist > div { display:flex; gap:var(--sp3); align-items:flex-start; padding:6px 10px; border-radius:14px; background:rgba(255,255,255,.035); }
.howlist img { width:58px; height:58px; flex:none; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.howlist p { margin:0; font-size:14px; line-height:1.45; color:var(--cream); text-wrap:pretty; }
.howlist b { font-size:15.5px; color:var(--acid2); }
.howlist kbd, .keys kbd { display:inline-block; min-width:22px; margin-left:8px; padding:1px 7px; border-radius:6px; background:#1c1336; border:1px solid rgba(255,255,255,.18); border-bottom-width:3px;
  font:700 12px Fredoka; color:var(--cream); text-align:center; vertical-align:2px; }
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp4); }
.steps > div { display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp2); padding:var(--sp3); border-radius:16px; background:rgba(255,255,255,.035); }
.steps img { width:132px; height:132px; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
.steps b { font-size:17px; color:var(--acid2); }
.steps p { margin:0; font-size:14.5px; line-height:1.45; color:var(--cream); text-wrap:pretty; }
.howtips { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp3); margin-top:var(--sp4); text-align:left; }
.howtips div { padding:10px 14px; border-radius:var(--r-md); background:linear-gradient(135deg, rgba(var(--lantern-rgb),.12), rgba(var(--lantern-rgb),.04)); border:1px solid rgba(var(--lantern-rgb),.25); font-size:14px; color:var(--cream); line-height:1.45; }
.howtips b { color:var(--lantern); }
.keys { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp2) var(--sp5); text-align:left; }
.keys > div { display:flex; align-items:center; gap:var(--sp3); padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.035); }
.keys kbd { margin:0; min-width:150px; font-size:12.5px; padding:4px 8px; }
.keys span { color:var(--cream); font-size:15px; }

/* ---------- community levels ---------- */
.overlay.community { background:rgba(var(--bg-rgb),.72); backdrop-filter:blur(3px); }
.overlay.community .panel { max-width:min(1040px, 97vw); }
.commlist { display:grid; gap:6px; max-height:52vh; overflow:auto; min-width:min(720px, 90vw); text-align:left; scrollbar-width:thin; }
.comm { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:8px 12px; border-radius:var(--r-md); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.comm:hover { background:rgba(var(--acid-rgb),.08); }
.comm .ct b { display:block; font-size:17px; color:var(--cream); } .comm small { color:var(--muted); font-size:12px; }
.comm .cs { text-align:right; } .comm .cs small { display:block; }
.comm .btn { font-size:15px; }
.rate { margin-top:8px; } .rate small { display:block; font-size:12px; color:var(--muted); }
.rate button { background:none; border:none; font-size:26px; color:rgba(255,255,255,.2); padding:0 2px; transition:transform .1s, color .1s; }
.rate span:hover button { color:var(--lantern); } .rate span button:hover ~ button { color:rgba(255,255,255,.2); }
.rate button.on { color:var(--lantern); text-shadow:0 0 10px rgba(var(--lantern-rgb),.7); } .rate button:hover { transform:scale(1.2); }

/* ---------- share / challenge ---------- */
.vsline { margin:4px 0 2px; padding:6px 12px; border-radius:10px; background:rgba(var(--lantern-rgb),.12); border:1px solid rgba(var(--lantern-rgb),.35); color:var(--cream); font-size:16px; }
.vsline b { color:var(--lantern); } .vsline .ok { color:var(--acid2); font-size:13px; margin-left:6px; } .vsline .bad { color:#ffb0a0; font-size:13px; margin-left:6px; }
.vs { color:var(--cream); font-size:17px; margin:2px 0 8px; } .vs b { color:var(--acid2); }
.namerow { display:flex; gap:10px; align-items:center; justify-content:center; color:var(--cream); font-weight:600; margin:10px 0; }
.namerow input, .linkrow input { font:500 16px Fredoka; padding:8px 12px; border-radius:10px; border:1px solid rgba(var(--acid-rgb),.4); background:rgba(5,3,18,.75); color:var(--text); }
.namerow.sm { font-size:13px; margin:8px 0 0; }
.namerow.sm input { padding:5px 10px; font-size:14px; width:150px; }
.namerow.sm .btn { font-size:13px; }
.comm .btn:not(.big), .edmine .btn:not(.big), .namerow .btn:not(.big) { padding:8px 16px; }
.linkrow { display:flex; gap:8px; align-items:center; justify-content:center; }
.linkrow input { width:min(520px, 60vw); font-size:13px; color:var(--muted); }

/* ---------- leaderboard ---------- */
.lbslot { margin-top:var(--sp4); text-align:left; }
.lbslot > small { display:block; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--lantern); margin-bottom:4px; }
.lbslot > small b { color:var(--acid2); }
.lb { list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:180px; overflow:auto; scrollbar-width:thin; }
.lb li { display:grid; grid-template-columns:26px 1fr 40px 46px; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-sm); background:rgba(255,255,255,.04); font-size:14px; }
.lb li:nth-child(1) i { color:#ffd76a; } .lb li:nth-child(2) i { color:#d8e2ef; } .lb li:nth-child(3) i { color:#e0a070; }
.lb li i { font-style:normal; font-weight:700; color:var(--muted); }
.lb li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cream); }
.lb li b { color:var(--acid2); text-align:right; } .lb li em { font-style:normal; color:var(--muted); text-align:right; font-size:13px; }
.lb li.me { background:rgba(var(--acid-rgb),.16); outline:1px solid rgba(var(--acid-rgb),.5); }
.lbempty { color:var(--muted); font-size:14px; margin:4px 0; }

/* ---------- target reached: a proper moment ---------- */
#targetBanner { position:absolute; z-index:var(--z-banner); left:50%; top:34%; width:0; height:0; overflow:visible; transform:translate(-50%, -50%) scale(.6); opacity:0; pointer-events:none; text-align:center; }
#targetBanner::before { content:""; position:absolute; left:50%; top:20px; width:900px; height:300px; transform:translate(-50%, -50%); background:radial-gradient(ellipse, rgba(var(--night-rgb),.55), transparent 65%); opacity:0; }
#targetBanner b { position:absolute; left:50%; top:0; transform:translate(-50%, -50%); display:block; white-space:nowrap;
  font-family:Creepster, cursive; font-weight:400; font-size:clamp(46px, 7vw, 96px); letter-spacing:4px;
  background:linear-gradient(180deg, #f4ffcf 10%, #b6ff4a 55%, #4fbf12 90%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(var(--acid-rgb),.9)) drop-shadow(0 5px 0 #133006) drop-shadow(0 10px 20px rgba(0,0,0,.6)); text-shadow:none; }
#targetBanner span { position:absolute; left:50%; top:calc(clamp(46px, 7vw, 96px) * .62); transform:translateX(-50%); white-space:nowrap; font-size:19px; font-weight:600;
  color:var(--cream); text-shadow:var(--ink); padding:6px 18px; border-radius:var(--r-pill); background:rgba(8,5,22,.8); border:1px solid rgba(var(--acid-rgb),.4); }
#targetBanner .rays { position:absolute; left:50%; top:0; width:900px; height:900px; transform:translate(-50%, -50%); border-radius:50%; opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(190,255,110,.22) 0deg 7deg, transparent 7deg 20deg);
  mask-image:radial-gradient(circle, #000 0, #000 18%, transparent 62%); -webkit-mask-image:radial-gradient(circle, #000 0, #000 18%, transparent 62%); }
#targetBanner .ringwave { position:absolute; left:50%; top:0; width:120px; height:120px; transform:translate(-50%, -50%); border-radius:50%; border:6px solid rgba(190,255,110,.9); opacity:0; }
#targetBanner .sparks i { position:absolute; left:0; top:0; width:10px; height:10px; border-radius:50%; background:#e6ff9a; box-shadow:0 0 12px 4px rgba(var(--acid-rgb),.8); opacity:0; }
#targetBanner.on { transform:none; opacity:1; }
#targetBanner.on::before { animation:tgSub 2.8s ease forwards; }
#targetBanner.on b { animation:tgTitle 2.8s cubic-bezier(.2,1.5,.4,1) forwards; }
#targetBanner.on span { animation:tgSub 2.8s ease forwards; }
#targetBanner.on .rays { animation:tgRays 2.8s ease-out forwards; }
#targetBanner.on .ringwave { animation:tgRing .9s ease-out forwards; }
#targetBanner.on .sparks i { animation:tgSpark 1.2s var(--t) cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes tgTitle { 0% { opacity:0; transform:translate(-50%, -50%) scale(2.4) rotate(-6deg); } 12% { opacity:1; transform:translate(-50%, -50%) scale(.92) rotate(1deg); }
  20% { transform:translate(-50%, -50%) scale(1.04); } 28%, 78% { opacity:1; transform:translate(-50%, -50%) scale(1); } 100% { opacity:0; transform:translate(-50%, -80%) scale(.96); } }
@keyframes tgSub { 0%, 18% { opacity:0; transform:translate(-50%, 10px); } 30%, 78% { opacity:1; transform:translate(-50%, 0); } 100% { opacity:0; } }
@keyframes tgRays { 0% { opacity:0; transform:translate(-50%, -50%) rotate(0) scale(.4); } 15% { opacity:1; } 70% { opacity:.7; } 100% { opacity:0; transform:translate(-50%, -50%) rotate(50deg) scale(1.15); } }
@keyframes tgRing { 0% { opacity:1; transform:translate(-50%, -50%) scale(.3); } 100% { opacity:0; transform:translate(-50%, -50%) scale(7); border-width:1px; } }
@keyframes tgSpark { 0% { opacity:1; transform:rotate(var(--a)) translateX(0) scale(1.4); } 100% { opacity:0; transform:rotate(var(--a)) translateX(var(--d)) scale(.3); } }

/* ---------- in-play banners: finish, show-me demo, rival (they never share a spot) ---------- */
#finishBtn { position:absolute; z-index:var(--z-float); left:50%; top:calc(150px * var(--s)); transform:translateX(-50%); display:none;
             border:solid transparent; border-width:18px 30px; border-image:url(../assets/ui/button2.webp) 96 150 fill / 18px 30px round stretch; background:none; padding:2px 10px;
             color:var(--acid2); font:700 17px Fredoka; letter-spacing:1px; text-shadow:0 0 10px rgba(var(--acid-rgb),.8), var(--ink); filter:drop-shadow(0 0 14px rgba(var(--acid-rgb),.5)); cursor:pointer; }
#finishBtn.on { display:block; animation:pulseGlow 1.6s infinite; }
#demoBanner { position:absolute; z-index:var(--z-float); left:50%; top:calc(96px * var(--s)); transform:translateX(-50%); display:none; padding:8px 18px; border-radius:var(--r-pill);
              background:rgba(10,6,24,.85); border:2px solid rgba(var(--acid-rgb),.5); color:var(--cream); font-size:15px; box-shadow:0 0 24px rgba(var(--acid-rgb),.35); animation:pulse 2s infinite; }
#demoBanner.on { display:block; }
#demoBanner b { color:var(--acid2); }
#rival { position:absolute; z-index:var(--z-float); right:calc(14px * var(--s)); top:calc(96px * var(--s)); display:none; max-width:min(360px, 40vw); padding:7px 16px; border-radius:var(--r-pill);
         background:rgba(20,10,40,.82); border:1px solid rgba(var(--lantern-rgb),.55); color:var(--cream); font-size:14px; box-shadow:0 0 16px rgba(var(--lantern-rgb),.3); pointer-events:none;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rival.on { display:block; } #rival b { color:var(--lantern); }

/* =================== 7. level editor =================== */
#editor { position:absolute; inset:0; z-index:var(--z-top); display:none; grid-template-columns:184px 1fr 290px; background:radial-gradient(ellipse at 50% 40%, #150d30, #07051a); color:var(--text); font-family:Fredoka, sans-serif; }
#editor.on { display:grid; }
#editor input[type=range] { accent-color:var(--acid); }
#edTools, #edSide { overflow:auto; padding:10px; background:linear-gradient(180deg, rgba(30,18,60,.96), rgba(12,8,30,.98)); box-shadow:inset 0 0 30px rgba(0,0,0,.5);
                    border-right:1px solid rgba(var(--acid-rgb),.18); scrollbar-width:thin; }
#edSide { overflow-x:hidden; border-right:none; border-left:1px solid rgba(var(--acid-rgb),.18); display:flex; flex-direction:column; gap:8px; }
.edg { margin-bottom:10px; } .edg small, #edSide small { display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:2px 0 4px; }
/* tool palette */
.edt { display:flex; align-items:center; gap:6px; width:100%; margin:2px 0; padding:5px 7px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.08);
       background:rgba(255,255,255,.04); color:var(--cream); font:500 13px Fredoka; text-align:left; cursor:pointer; }
.edt:hover { background:rgba(var(--acid-rgb),.12); }
.edt.on { background:linear-gradient(180deg, rgba(var(--acid-rgb),.32), rgba(var(--acid-rgb),.12)); border-color:var(--acid); color:#fff; box-shadow:0 0 10px rgba(var(--acid-rgb),.35); }
.edt.sm { justify-content:center; }
.edgrid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.edgrid .edt { flex-direction:column; gap:3px; padding:6px 2px 5px; text-align:center; justify-content:center; margin:0; }
.edgrid .edt span { width:30px; height:22px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:18px; }
.edgrid .edt .sw { border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.5); }
.edgrid .edt .ti { width:34px; height:34px; border-radius:50%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.edgrid .edt[data-t="beltL"] .ti { transform:scaleX(-1); }
.edgrid .edt em { font-style:normal; font-size:11px; line-height:1.1; color:var(--cream); }
.edrow { display:flex; gap:6px; } .edrow > * { flex:1; min-width:0; }
.edsz { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); } .edsz input { flex:1; min-width:0; }
/* level settings */
#edSide label { display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--muted); }
#edSide input, #edSide select, #edSide textarea { font:500 14px Fredoka; padding:5px 8px; border-radius:var(--r-sm); border:1px solid rgba(var(--acid-rgb),.25); background:rgba(5,3,18,.8); color:var(--text); width:100%; }
#editor select { appearance:none; -webkit-appearance:none; padding-right:26px; background:rgba(5,3,18,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239dff4a'/%3E%3C/svg%3E") no-repeat right 9px center; }
.edskills { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px 2px; }
.edskills label { position:relative; min-width:0; align-items:center; text-align:center; gap:3px !important; opacity:.55; transition:opacity .15s; }
.edskills label.has { opacity:1; }
.edskills .skico { width:42px; height:42px; border-radius:50%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.edskills .sknm { font:700 10px Fredoka; color:var(--cream); white-space:nowrap; margin-top:1px; }
.step { display:flex; align-items:center; gap:1px; }
.step button { width:20px; height:22px; padding:0; border:none; border-radius:5px; background:rgba(255,255,255,.08); color:var(--cream); font:700 14px Fredoka; cursor:pointer; }
.step button:hover { background:rgba(var(--acid-rgb),.3); }
.step input { width:24px !important; padding:1px 0 !important; text-align:center; -moz-appearance:textfield; }
.step input::-webkit-inner-spin-button { -webkit-appearance:none; }
.edbtns { display:flex; flex-direction:column; gap:4px; margin-top:auto; }
.edbtns .btn.big { min-width:0; padding:0 4px; font-size:19px; border-width:18px 28px; border-image-width:18px 28px; }
.edbtns .btn:not(.big) { padding:8px 10px; font-size:13px; }
/* canvas + floating toolbar */
.edstage { position:relative; overflow:hidden; }
#edCanvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; }
.edbar { position:absolute; left:50%; top:10px; transform:translateX(-50%); display:flex; gap:4px; align-items:center; padding:5px 8px; border-radius:14px;
         background:rgba(14,9,32,.88); border:1px solid rgba(var(--acid-rgb),.25); box-shadow:0 6px 20px rgba(0,0,0,.5); z-index:1; }
.edbar button { min-width:34px; height:32px; border-radius:9px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:var(--cream); font:600 16px Fredoka; padding:0 8px; cursor:pointer; }
.edbar button:hover { background:rgba(var(--acid-rgb),.16); } .edbar button.on { background:rgba(var(--acid-rgb),.3); border-color:var(--acid); }
.edbar button.go { background:linear-gradient(180deg,#5bd12a,#2f8a10); color:#0d2004; border-color:#9dff4a; font-weight:700; }
.edbar i { width:1px; height:22px; background:rgba(255,255,255,.12); margin:0 3px; }
.edstat { position:absolute; left:12px; bottom:8px; font:500 12px Fredoka; color:var(--muted); background:rgba(var(--bg-rgb),.7); padding:4px 10px; border-radius:var(--r-pill); pointer-events:none; }
.edhelp { position:absolute; right:12px; bottom:8px; font-size:12px; color:var(--muted); background:rgba(var(--bg-rgb),.7); padding:4px 12px; border-radius:var(--r-pill); pointer-events:none; white-space:nowrap; }
/* toast clears the toolbar */
#edToast { position:absolute; left:50%; top:64px; z-index:3; transform:translateX(-50%); padding:8px 18px; border-radius:var(--r-pill); background:rgba(20,10,40,.92); border:1px solid var(--acid);
           color:var(--acid2); opacity:0; pointer-events:none; }
#edToast.on { animation:toast 2.4s ease forwards; }
@keyframes toast { 10%, 75% { opacity:1; } 100% { opacity:0; } }
/* "My Levels" box; its list scrolls */
#edMineBox { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(var(--bg-rgb),.75); z-index:2; }
#edMineBox.on { display:flex; }
#edMineBox .panel { min-width:min(560px, 92vw); margin:0; }
#edMineList { max-height:min(56vh, 520px); overflow:auto; scrollbar-width:thin; }
.edmine { display:grid; grid-template-columns:1fr auto auto; grid-template-rows:auto auto; gap:0 8px; align-items:center; text-align:left; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.edmine small { grid-column:1; color:var(--muted); font-size:12px; }
.edmine .btn { grid-row:1 / span 2; font-size:14px; }

/* =================== 8. media queries =================== */
@media (max-width:1500px) { :root { --s:.86; } }
@media (max-width:1200px) { :root { --s:.72; } }
@media (max-width:900px) {
  :root { --s:.58; }
  .howlist, .howtips { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .steps { grid-template-columns:1fr 1fr; }
  .keys { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .hud .hc { top:calc(66px * var(--s)); }
  .brief2 { grid-template-columns:1fr; }
  .artbox { width:180px; margin:0 auto; }
}

/* ---------- top bar: logo + level name share the left plate; status stays centred ---------- */
.uip.name.hl { width:auto; min-width:calc(330px * var(--s)); max-width:calc(560px * var(--s)); flex-direction:row; justify-content:flex-start; gap:calc(10px * var(--s)); }
.uip.name .hlogo { position:static; display:block; height:calc(50px * var(--s)); margin:0 0 0 calc(-56px * var(--s)); pointer-events:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)); flex:none; }
.uip.name.hl span { width:auto; margin:0 calc(-30px * var(--s)) 0 0; text-align:left; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 1100px) { .hud .hc { top:0; } }

/* ---------- community: level thumbnails ---------- */
.comm { grid-template-columns:auto 1fr auto auto; }
.comm .cthumb { display:block; width:132px; height:auto; min-height:48px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:#120c24; image-rendering:pixelated; box-shadow:0 4px 10px rgba(0,0,0,.4); }
/* V13: unlimited sign drawn as a vector so it sits dead centre in its badge */
.skill .cnt .inf { width:62%; height:auto; display:block; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linejoin:round; }

/* ---------- V13 HUD art ---------- */
/* name banner: the logo is painted into the art; the level name sits on its empty plaque (x 46.7%–94.2%, y 41.5%–85%) */
.hname { width:calc(500px * var(--s)); aspect-ratio:1200 / 253; background:url(../assets/ui/hud_name.webp) center / 100% 100% no-repeat; filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.hname span { position:absolute; left:47.5%; right:7%; top:41.5%; bottom:15%; display:flex; align-items:center; justify-content:center;
  font-size:calc(21px * var(--s)); font-weight:700; line-height:1; color:var(--cream); text-shadow:var(--ink); white-space:nowrap; overflow:hidden; }
/* status crest: one painted piece hanging from the top; each value sits in its own window (positions measured off the art) */
.hstat { width:calc(470px * var(--s)); aspect-ratio:1100 / 326; background:url(../assets/ui/hud_status.webp) center / 100% 100% no-repeat; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.hstat .w { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(2px * var(--s)); }
.hstat .wl { left:8.4%; width:14.7%; top:36.8%; height:40.5%; }
.hstat .wr { left:77.1%; width:14.7%; top:37.1%; height:40.5%; }
.hstat .wm { left:29.6%; width:41.3%; top:46%; height:25.2%; flex-direction:row; align-items:baseline; gap:calc(10px * var(--s)); }
.hstat small { font-size:calc(11px * var(--s)); font-weight:700; letter-spacing:1.5px; color:var(--cream); text-shadow:var(--ink); line-height:1; opacity:.9; }
.hstat b { font-size:calc(25px * var(--s)); font-weight:700; line-height:1; color:var(--acid2); text-shadow:0 0 12px rgba(var(--acid-rgb),.7), var(--ink); font-variant-numeric:tabular-nums; }
.hstat .wm small { font-size:calc(13px * var(--s)); }
.hstat .wm b { font-size:calc(27px * var(--s)); }
.hstat .sbar { position:absolute; left:34.2%; width:31.6%; top:79.5%; height:5.5%; margin:0; border-radius:99px; background:none; box-shadow:none; }
.hstat .sbar em { top:-35%; bottom:-35%; }
/* control buttons: each its own painted piece (stone, tombstone, shield, gear, gem, mushroom, brass, lava) */
.ib { width:calc(60px * var(--s)); height:calc(60px * var(--s)); }
.tools { gap:calc(6px * var(--s)); }
.ib.on { filter:drop-shadow(0 0 6px var(--acid)) drop-shadow(0 0 12px var(--acid)) brightness(1.15); transform:scale(1.06); }
#nukeBtn.armed { filter:drop-shadow(0 0 14px var(--blood)) brightness(1.25); }
/* spawn speed gauge: −/+ knobs, the rate in the top window, a fill bar in the bone trough */
.hspawn { position:relative; justify-self:start; width:calc(330px * var(--s)); aspect-ratio:1000 / 286; background:url(../assets/ui/hud_spawn.webp) center / 100% 100% no-repeat; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.hspawn .knob { position:absolute; top:36%; width:14%; height:50%; padding:0; border:none; border-radius:50%; background:none; cursor:pointer; transition:transform .12s, filter .12s; }
.hspawn .knob.l { left:3%; } .hspawn .knob.r { left:83%; }
.hspawn .knob:hover { background:radial-gradient(circle, rgba(255,200,80,.35), transparent 70%); }
.hspawn .knob:active { transform:scale(.92); }
.hspawn .win { position:absolute; left:38.5%; width:23.1%; top:15%; height:24.5%; display:flex; align-items:center; justify-content:center;
  font-size:calc(21px * var(--s)); font-weight:700; line-height:1; color:#ffd84d; text-shadow:0 0 12px rgba(255,190,60,.8), var(--ink); font-variant-numeric:tabular-nums; }
.hspawn .trough { position:absolute; left:24.5%; width:51.2%; top:55%; height:19%; border-radius:99px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; padding:0 calc(8px * var(--s)); }
.hspawn .trough i { position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg, rgba(200,120,20,.55), rgba(255,200,70,.75)); box-shadow:0 0 10px rgba(255,190,60,.5); transition:width .25s; }
.hspawn .trough small, .hspawn .trough em { position:relative; font-size:calc(10px * var(--s)); font-weight:700; letter-spacing:.8px; line-height:1; color:var(--cream); text-shadow:var(--ink); font-style:normal; white-space:nowrap; }
.hspawn .trough em { letter-spacing:0; opacity:.9; }

/* skill tray: no backing bar, the medallions stand on their own, each with a little nailed name tag */
#skills { background:none; border:none; box-shadow:none; backdrop-filter:none; padding:0 0 calc(4px * var(--s)); gap:calc(4px * var(--s)); }
#skills .sep { width:calc(10px * var(--s)); background:none; margin:0; }
.skill { width:calc(80px * var(--s)); gap:0; }
.skill .ring { filter:drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.skill .lbl { position:relative; z-index:1; margin-top:calc(-8px * var(--s)); min-width:calc(72px * var(--s)); padding:calc(4px * var(--s)) calc(8px * var(--s)) calc(4px * var(--s));
  background:url(../assets/ui/tag.webp) center / 100% 100% no-repeat; border-radius:calc(6px * var(--s)); box-shadow:0 0 0 1.5px #2a1a10, 0 3px 6px rgba(0,0,0,.6);
  font-size:calc(11px * var(--s)); color:#3a220c; text-shadow:0 1px 0 rgba(255,240,200,.5); text-align:center; }
.skill.sel .lbl { color:#1d3a06; box-shadow:0 0 0 2px var(--acid), 0 0 12px rgba(var(--acid-rgb),.7); }
.skill.empty .lbl { color:#7a6a58; filter:grayscale(.7) brightness(.7); }

/* ---------- V14: calmer HUD ---------- */
/* skill names: plain dark pill with cream text (readable at any size); the lifted ring never covers it */
.skill .lbl { margin-top:calc(3px * var(--s)); z-index:3; min-width:0; padding:calc(3px * var(--s)) calc(8px * var(--s)); background:rgba(14,9,30,.88); border-radius:99px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.6); font-size:calc(12px * var(--s)); color:var(--cream); text-shadow:none; }
.skill.sel .lbl { color:#132406; background:var(--acid2); box-shadow:0 0 0 1px var(--acid), 0 0 10px rgba(var(--acid-rgb),.6); }
.skill.empty .lbl { color:var(--muted); filter:none; }
.skill.sel .ring { transform:translateY(calc(-5px * var(--s))) scale(1.07); }
.skill:hover .ring { transform:translateY(calc(-3px * var(--s))) scale(1.04); }
/* top-left: logo + slim plate, the same height as the button row */
.hname { width:auto; aspect-ratio:auto; background:none; filter:none; display:flex; align-items:center; gap:calc(4px * var(--s)); top:calc(4px * var(--s)); }
.hname .hlogo { height:calc(58px * var(--s)); width:auto; display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)); pointer-events:none; }
.hname .plate { position:relative; width:calc(250px * var(--s)); aspect-ratio:1000 / 236; background:url(../assets/ui/c_name.webp) center / 100% 100% no-repeat; filter:drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.hname span { left:7.5%; right:7.5%; top:24.2%; bottom:25%; font-size:calc(17px * var(--s)); }
/* top-centre: calm status bar; each stat its own colour */
.hstat { width:calc(440px * var(--s)); aspect-ratio:1000 / 361; background-image:url(../assets/ui/c_status.webp); filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.hstat .wl { left:5.7%; width:21.1%; top:21.3%; height:61%; }
.hstat .wr { left:73%; width:21.4%; top:21.3%; height:61%; }
.hstat .wm { left:28.6%; width:42.4%; top:22.4%; height:51%; flex-direction:column; align-items:center; gap:calc(3px * var(--s)); }
.hstat small { font-size:calc(12px * var(--s)); letter-spacing:2px; opacity:.75; }
.hstat b { font-size:calc(34px * var(--s)); }
.hstat .wm small { font-size:calc(12px * var(--s)); }
.hstat .wm b { font-size:calc(36px * var(--s)); }
.hstat .wl b { color:#8fdcff; text-shadow:0 0 12px rgba(80,180,255,.7), var(--ink); }
.hstat .wr b { color:#ffd84d; text-shadow:0 0 12px rgba(255,190,60,.7), var(--ink); }
.hstat .wr b.low { color:#ff8a8a; text-shadow:0 0 12px var(--blood), var(--ink); }
.hstat .sbar { left:30%; width:39.6%; top:79.5%; height:6%; }
.hstat .sbar em { top:-40%; bottom:-40%; }
/* spawn speed: calm panel; knobs over the carved −/+, the rate in the window, the fill in the groove */
.hspawn { width:calc(300px * var(--s)); aspect-ratio:1000 / 296; background-image:url(../assets/ui/c_spawn.webp); }
.hspawn .knob { top:15%; width:20%; height:70%; }
.hspawn .knob.l { left:4%; } .hspawn .knob.r { left:76%; }
.hspawn .win { left:27.5%; width:44.9%; top:15.5%; height:53%; flex-direction:column; gap:calc(2px * var(--s)); font-size:inherit; text-shadow:none; color:inherit; }
.hspawn .win small { font-size:calc(9.5px * var(--s)); font-weight:700; letter-spacing:1.5px; color:var(--cream); opacity:.75; line-height:1; }
.hspawn .win span { display:flex; align-items:baseline; gap:calc(5px * var(--s)); }
.hspawn .win b { font-size:calc(22px * var(--s)); font-weight:700; line-height:1; color:#ffd84d; text-shadow:0 0 10px rgba(255,190,60,.7), var(--ink); font-variant-numeric:tabular-nums; }
.hspawn .win em { font-style:normal; font-size:calc(9.5px * var(--s)); color:var(--cream); opacity:.85; white-space:nowrap; }
.hspawn .trough { left:29%; width:41.5%; top:74%; height:10%; padding:0; }
.hspawn .knob:hover { background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
/* ---------- V14: one calm button family everywhere (title menu, map, briefing, results, pause, editor) ---------- */
.btn, .btn:not(.big) { border:solid transparent; border-radius:0; background:none; box-shadow:none; backdrop-filter:none;
  border-image:url(../assets/ui/c_btn2.webp) 50 80 45 80 fill / 15px 24px 14px 24px stretch; border-width:15px 24px 14px 24px;
  padding:0 6px; line-height:22px; color:var(--cream); text-shadow:0 1px 0 #000, 0 0 8px rgba(0,0,0,.6); filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.btn:hover, .btn:not(.big):hover { box-shadow:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(var(--acid-rgb),.45)) brightness(1.12); }
.btn.sm, .btn.sm:not(.big) { border-width:11px 18px 10px; border-image-width:11px 18px 10px; padding:0 4px; font-size:13px; line-height:18px; border-radius:0; }
.btn.ghost, .btn.ghost:not(.big) { background:none; color:var(--muted); filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)) saturate(.7); }
.btn.big { border-image-source:url(../assets/ui/c_btn1.webp); border-width:20px 30px 18px; border-image-width:20px 30px 18px;
  color:#0f2604; text-shadow:0 1px 0 rgba(220,255,170,.55); filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(var(--acid-rgb),.35)); }
.btn.big:hover { filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(var(--acid-rgb),.6)) brightness(1.08); }
.btn.big.share { border-image-source:url(../assets/ui/c_btn2.webp); color:var(--lantern); text-shadow:0 0 12px rgba(var(--lantern-rgb),.7), 0 1px 0 #000; }
.mainmenu .btn:not(.big) { padding:4px 10px; font-size:17px; background:none; backdrop-filter:none; }
.mainmenu .btn.big { font-size:26px; line-height:34px; }
/* world map: title on the gem banner, calm hint pills */
.plaque { border:none; border-image:none; padding:0; width:clamp(360px, 32vw, 500px); aspect-ratio:800 / 278; justify-content:center; gap:4px;
  background:url(../assets/ui/c_banner.webp) center / 100% 100% no-repeat; padding-top:clamp(14px, 1.3vw, 20px); filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)); }
.plaque b { font-size:clamp(24px, 2.3vw, 34px); }
.maphint span { border:solid transparent; border-width:9px 18px; border-image:url(../assets/ui/c_pill.webp) 40 60 40 60 fill / 9px 18px stretch;
  border-radius:0; background:none; backdrop-filter:none; padding:0 4px; line-height:16px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.loadbox { border-width:15px 24px 14px; border-image:url(../assets/ui/c_btn2.webp) 50 80 45 80 fill / 15px 24px 14px stretch; backdrop-filter:none; -webkit-backdrop-filter:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
#finishBtn { border-width:20px 30px 18px; border-image:url(../assets/ui/c_btn1.webp) 50 80 45 80 fill / 20px 30px 18px stretch; color:#0f2604; text-shadow:0 1px 0 rgba(220,255,170,.55); }
/* dialog panels and the map tooltip: the calm square frame (corners ~92px of 800) */
.panel { border-width:40px; border-image:url(../assets/ui/c_panel.webp) 92 fill / 40px / 14px stretch; }
#mapTip { border-width:22px; border-image:url(../assets/ui/c_panel.webp) 92 fill / 22px / 6px stretch; }

/* ---------- V14 editor ---------- */
.edshapes { gap:4px; }
.edshapes .edt { flex-direction:column; gap:1px; padding:4px 2px; margin:0; font-size:11px; }
.edshapes .edt b, .edsel b { font-size:15px; line-height:1; }
.edsel { justify-content:center; }
.edbar .edgstep { min-width:30px; font-size:12px; font-variant-numeric:tabular-nums; padding:0 6px; }
.edbar .edgstep.dim { opacity:.5; }
.edbar button:disabled, .edbtns .btn:disabled { opacity:.55; cursor:progress; }
.edstat { max-width:calc(50% - 20px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.edhelp { max-width:calc(50% - 20px); white-space:normal; text-align:right; line-height:1.35; border-radius:12px; }
/* editor sidebar: compact steppers (no overlap between neighbouring skills) and slimmer calm buttons */
.step { justify-content:center; gap:0; }
.step button { width:14px; height:20px; font-size:13px; background:none; }
.step input { width:20px !important; }
.edbtns .btn, .edbtns .btn:not(.big) { border-width:10px 16px 9px; border-image-width:10px 16px 9px; padding:2px 2px; font-size:12.5px; line-height:16px; white-space:nowrap; }
.edbtns .btn.big { border-width:14px 22px 12px; border-image-width:14px 22px 12px; font-size:17px; line-height:24px; }

/* ---------- V15 ---------- */
/* armageddon: the first tap arms it and says so loudly; a second tap within 3s sets every fuse */
.nukeask { position:absolute; right:-4px; bottom:calc(100% + 10px); padding:6px 12px; border-radius:10px; background:linear-gradient(180deg,#e0303e,#8a1020); border:2px solid #ffb0b0;
  color:#fff; font:700 13px Fredoka; white-space:nowrap; box-shadow:0 0 18px rgba(255,60,60,.7), 0 4px 10px rgba(0,0,0,.5); opacity:0; transform:translateY(6px) scale(.9); transition:opacity .15s, transform .15s; pointer-events:none; }
.nukeask::after { content:""; position:absolute; right:24px; top:100%; border:7px solid transparent; border-top-color:#8a1020; }
#nukeBtn.armed .nukeask { opacity:1; transform:none; }
#nukeBtn.armed { animation:pulse .5s infinite; filter:drop-shadow(0 0 16px #ff3040) brightness(1.3); }

/* ---------- V15: result / briefing / pause cards (centred, mobile-game style) ---------- */
.panel:has(> .card) { width:min(600px, 94vw); padding:0 10px 6px; overflow:visible; }
.card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:46px; }
/* ribbon header straddling the top of the frame: green win, red loss, purple everything else */
.ribbon { position:absolute; left:50%; top:-74px; transform:translateX(-50%); width:min(520px, 100%); aspect-ratio:1000 / 260; display:flex; align-items:center; justify-content:center;
  background:center / 100% 100% no-repeat; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)); animation:ribbonin .5s cubic-bezier(.2,1.5,.4,1) both; z-index:2; }
.ribbon.win { background-image:url(../assets/ui/rib_win.webp); }
.ribbon.lose { background-image:url(../assets/ui/rib_lose.webp); }
.ribbon.neutral { background-image:url(../assets/ui/rib_neutral.webp); }
.ribbon span { margin-top:-4%; font:700 clamp(18px, 2.2vw, 24px) Fredoka; letter-spacing:3px; text-transform:uppercase; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45), 0 0 10px rgba(0,0,0,.3); white-space:nowrap; }
@keyframes ribbonin { from { transform:translateX(-50%) scale(.4); opacity:0; } }
.card .cardtitle { margin:4px 0 2px; font-size:clamp(34px, 4vw, 50px); }
.cardtitle.win { color:#d6ff7a; text-shadow:0 0 22px rgba(var(--acid-rgb),.6), 0 4px 0 #0e2204; }
.cardtitle.lose { color:#ff9a9a; }
.card .sub { font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
/* hero art: light rays spin behind it (gold on a win, cold red on a loss) */
.hero { position:relative; width:220px; height:200px; margin:6px 0 2px; display:grid; place-items:center; }
.hero.small { width:170px; height:150px; }
.hero img { position:relative; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)); animation:winbounce .6s cubic-bezier(.2,1.4,.4,1) both; }
.hero .rays { position:absolute; inset:-60px; border-radius:50%; pointer-events:none; opacity:.55;
  background:conic-gradient(from 0deg, transparent 0 8deg, var(--ray, rgba(170,255,120,.35)) 8deg 16deg, transparent 16deg 30deg, var(--ray, rgba(170,255,120,.35)) 30deg 38deg, transparent 38deg 52deg, var(--ray, rgba(170,255,120,.35)) 52deg 60deg, transparent 60deg 74deg, var(--ray, rgba(170,255,120,.35)) 74deg 82deg, transparent 82deg 96deg, var(--ray, rgba(170,255,120,.35)) 96deg 104deg, transparent 104deg 118deg, var(--ray, rgba(170,255,120,.35)) 118deg 126deg, transparent 126deg 140deg, var(--ray, rgba(170,255,120,.35)) 140deg 148deg, transparent 148deg 162deg, var(--ray, rgba(170,255,120,.35)) 162deg 170deg, transparent 170deg 184deg, var(--ray, rgba(170,255,120,.35)) 184deg 192deg, transparent 192deg 206deg, var(--ray, rgba(170,255,120,.35)) 206deg 214deg, transparent 214deg 228deg, var(--ray, rgba(170,255,120,.35)) 228deg 236deg, transparent 236deg 250deg, var(--ray, rgba(170,255,120,.35)) 250deg 258deg, transparent 258deg 272deg, var(--ray, rgba(170,255,120,.35)) 272deg 280deg, transparent 280deg 294deg, var(--ray, rgba(170,255,120,.35)) 294deg 302deg, transparent 302deg 316deg, var(--ray, rgba(170,255,120,.35)) 316deg 324deg, transparent 324deg 338deg, var(--ray, rgba(170,255,120,.35)) 338deg 346deg, transparent 346deg);
  -webkit-mask:radial-gradient(circle, #000 18%, transparent 68%); mask:radial-gradient(circle, #000 18%, transparent 68%); animation:spin 24s linear infinite; }
.brief .hero .rays, .pause .hero .rays { --ray:var(--glow, rgba(180,140,255,.3)); opacity:.4; }
.hero.win .rays { --ray:rgba(255,215,90,.45); opacity:.7; }
.hero.lose .rays { --ray:rgba(255,70,90,.25); opacity:.45; animation-duration:60s; }
.hero.lose img { animation:winbounce .6s cubic-bezier(.2,1.4,.4,1) both, shiver .5s .7s 2; filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)) saturate(.85); }
.hero .worldtag { position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); white-space:nowrap; font:700 11px Fredoka; letter-spacing:2px; text-transform:uppercase;
  padding:4px 12px; border-radius:99px; background:rgba(10,6,24,.9); color:var(--cream); box-shadow:0 0 0 1px rgba(255,255,255,.15); }
.hero .earned { position:absolute; right:-30px; top:6px; font:700 14px Fredoka; color:#ffd76a; background:rgba(10,6,24,.85); padding:3px 10px; border-radius:99px; }
.hero .earned + .earned { top:36px; }
/* stars: middle one raised and bigger, they slam in one by one */
.stars3 { display:flex; align-items:flex-end; justify-content:center; gap:4px; margin:2px 0 8px; height:76px; }
.stars3 span { width:60px; height:60px; background:url(../assets/ui/star_off.webp) center / contain no-repeat; }
.stars3 span:nth-child(2) { width:76px; height:76px; margin-bottom:12px; }
.stars3 span.on { background-image:url(../assets/ui/star_on.webp); animation:starpop .45s cubic-bezier(.2,1.6,.4,1) both; filter:drop-shadow(0 0 12px rgba(255,200,60,.7)); }
/* stat tiles */
.stats { display:flex; justify-content:center; gap:8px; margin:4px 0 8px; flex-wrap:wrap; }
.st { min-width:92px; padding:7px 12px 6px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.35); }
.st small { display:block; font:700 10px Fredoka; letter-spacing:2px; color:var(--muted); }
.st b { display:block; font:700 26px Fredoka; line-height:1.1; color:var(--cream); font-variant-numeric:tabular-nums; }
.st b i { font-style:normal; font-size:15px; opacity:.6; }
.st.good b { color:#b8ff5a; text-shadow:0 0 10px rgba(var(--acid-rgb),.5); }
.st.bad b { color:#ff8a8a; text-shadow:0 0 10px rgba(var(--blood-rgb),.5); }
.st.gold b { color:#ffd84d; }
.st.blue b { color:#8fdcff; }
.card .bar.res { max-width:330px; margin:0 0 6px; }
.card.lose .bar.res i { background:linear-gradient(90deg,#a02030,#ff6a7a); box-shadow:0 0 10px var(--blood); }
.card .thr { color:var(--muted); font-size:12.5px; margin-bottom:4px; }
.card .tipbox { text-align:left; max-width:500px; margin:4px 0 6px; font-size:14px; }
.card .kit { justify-content:center; margin:2px 0 8px; }
.card .lbslot { width:100%; max-width:440px; margin-top:4px; }
.card .lbslot .lb li:nth-child(n+6) { display:none; }
.card .vs { margin:0 0 6px; }
/* one big call to action, then round icon buttons */
.card .btn.cta { margin-top:12px; min-width:300px; font-size:26px; line-height:34px; animation:ctapulse 2.2s 1.2s infinite; }
.card .btn.cta2 { margin-top:8px; min-width:300px; font-size:18px; line-height:26px; }
@keyframes ctapulse { 50% { transform:scale(1.035); } }
.iconrow { display:flex; justify-content:center; gap:14px; margin:12px 0 4px; }
.ibtn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:0; border:none; background:none; cursor:pointer; color:var(--cream); font:700 12px Fredoka; letter-spacing:.5px; }
.ibtn img { width:54px; height:54px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); transition:transform .12s, filter .12s; }
.ibtn:hover img { transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(var(--acid-rgb),.5)); }
.ibtn span { text-shadow:0 1px 0 #000; opacity:.85; }
.card .small { margin-top:6px; }
/* ---------- V15 HUD: the happy medium (calm stone with a little character) ---------- */
.hname .plate { width:calc(380px * var(--s)); aspect-ratio:1000 / 234; background-image:url(../assets/ui/m_name.webp); }
.hname span { left:46.5%; right:6.5%; top:35.5%; bottom:24.8%; font-size:calc(16px * var(--s)); }
.hstat { width:calc(470px * var(--s)); aspect-ratio:1000 / 389; background-image:url(../assets/ui/m_status.webp); }
.hstat .wl { left:4.9%; width:21.4%; top:35.2%; height:49.6%; }
.hstat .wr { left:73.8%; width:21.4%; top:35.2%; height:49.6%; }
.hstat .wm { left:28.9%; width:42.2%; top:29.6%; height:42.9%; }
.hstat .sbar { left:31%; width:38%; top:79.5%; height:6.5%; }
.ribbon { width:min(440px, 100%); aspect-ratio:1000 / 392; top:-104px; }
.ribbon span { margin-top:0; font-size:clamp(17px, 2vw, 22px); }
.card { padding-top:62px; }
.card .tipbox { display:block; }
.card .tipbox::before { margin-right:6px; }
.card .hero { width:250px; height:210px; }
.hero img { width:100%; height:100%; min-height:0; }
.card .hero { margin-bottom:12px; }
.card.res .hero { margin-bottom:0; }

/* ---------- V16 ---------- */
/* map: a proper-sized MENU button */
.mapbar > .btn, .mapbar > .btn.sm { margin-top:10px; border-width:17px 26px 16px; border-image-width:17px 26px 16px; padding:2px 10px; font-size:18px; line-height:24px; letter-spacing:1.5px; }
.mapicons .ib { width:64px; height:64px; }
/* briefing: picture left; cure / time / spawn and the skill kit beside it; hint and leaderboard below */
.panel:has(> .card.brief) { width:min(700px, 95vw); }
.bhead { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; width:100%; margin:4px 0 8px; }
.bhead .hero { margin:0; width:230px; height:200px; }
.bside { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; }
.bside .stats { margin:0; }
.bside .kit { margin:0; }
.card.brief .lbslot .lb li:nth-child(n+4) { display:none; }   /* briefing shows the podium only, so the card never outgrows the screen */
/* tattered cloth ribbons nailed to stone */
.ribbon { width:min(470px, 100%); aspect-ratio:1000 / 320; top:-92px; }
.ribbon span { font-family:Creepster, Fredoka, cursive; font-weight:400; font-size:clamp(24px, 2.6vw, 32px); letter-spacing:3px; text-shadow:0 3px 0 rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.35); }
/* title storm */
#bolts { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; mix-blend-mode:screen; }
#loading .flash { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 10%, rgba(200,230,255,.55), rgba(140,180,255,.15) 60%, transparent); }
#loading.storm .flash { animation:flash .7s ease-out; }
#loading.storm .splash { animation:kenburns 30s ease-in-out infinite alternate, flashimg .7s ease-out; }
@keyframes flash { 0% { opacity:0; } 8% { opacity:1; } 20% { opacity:.25; } 30% { opacity:.8; } 100% { opacity:0; } }
@keyframes flashimg { 8% { filter:brightness(1.7) saturate(.8); } 30% { filter:brightness(1.4); } 100% { filter:none; } }
#loading .logoglow { position:absolute; left:50%; top:calc(var(--tt) + var(--lw) * .2); width:min(760px, 90vw); height:min(300px, 36vw); transform:translate(-50%, -50%); z-index:1; pointer-events:none;
  background:radial-gradient(ellipse, rgba(140,255,80,.32), transparent 65%); animation:glowpulse 3.2s ease-in-out infinite; }
@keyframes glowpulse { 50% { opacity:.45; transform:translate(-50%, -50%) scale(1.08); } }
/* the Show Me banner sits under the status crest, not on top of it */
#demoBanner, #rival { top:calc(190px * var(--s)); }
#finishBtn { top:calc(196px * var(--s)); }
/* coloured glass-faced buttons: green = go, teal = community, orange = make / challenge, violet = learn */
.btn.big { border-image-source:url(../assets/ui/mb_green.webp); border-image-slice:44 90 44 90 fill; border-width:22px 34px; border-image-width:22px 34px;
  color:#fff; text-shadow:0 2px 0 rgba(10,40,0,.75), 0 0 6px rgba(0,0,0,.5); padding:4px 8px; }
.btn.big.share { border-image-source:url(../assets/ui/mb_orange.webp); color:#fff; text-shadow:0 2px 0 rgba(70,20,0,.8), 0 0 6px rgba(0,0,0,.5); filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,140,40,.35)); }
.btn, .btn:not(.big) { border-width:18px 28px 17px; border-image-width:18px 28px 17px; padding:2px 8px; }
.mainmenu { gap:14px; width:min(360px, 82vw); }
.mainmenu .btn, .mainmenu .btn:not(.big) { border-image-slice:44 90 44 90 fill; border-width:22px 34px; border-image-width:22px 34px; padding:6px 8px; font-size:19px; letter-spacing:2px;
  color:#fff; filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
.mainmenu .btn.big { font-size:30px; line-height:40px; padding:10px 8px; margin-bottom:6px; }
.mainmenu [data-m="community"] { border-image-source:url(../assets/ui/mb_teal.webp); text-shadow:0 2px 0 rgba(0,40,60,.8), 0 0 6px rgba(0,0,0,.5); }
.mainmenu [data-m="editor"] { border-image-source:url(../assets/ui/mb_orange.webp); text-shadow:0 2px 0 rgba(70,20,0,.8), 0 0 6px rgba(0,0,0,.5); }
.mainmenu [data-m="how"] { border-image-source:url(../assets/ui/mb_violet.webp); text-shadow:0 2px 0 rgba(30,0,60,.8), 0 0 6px rgba(0,0,0,.5); }
.mainmenu .btn:hover { filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)) brightness(1.15); transform:translateY(-2px) scale(1.03); }

/* ---------- V17 ---------- */
/* title: logo + tagline + menu as one block, centred vertically (block ≈ logo + 60px + ~350px of buttons) */
#loading { --tt:max(2vh, calc(50vh - (var(--lw) * .42 + 60px + 350px) / 2)); }
/* hover: no scaling on 9-slice buttons (fractional scaling split the frame seams) */
.btn:hover, .btn:not(.big):hover, .mainmenu .btn:hover { transform:translateY(-2px); }
.card .btn.cta { animation:none; }
/* the storm: the painting waits in the dark until lightning lights it up */
#loading .splash { filter:brightness(.55) saturate(.85); transition:filter 1.2s; }
#loading.storm .splash { animation:kenburns 30s ease-in-out infinite alternate, flashimg 1.1s ease-out; }
@keyframes flashimg { 0% { filter:brightness(.55); } 6% { filter:brightness(1.9) saturate(.7); } 14% { filter:brightness(.8); } 22% { filter:brightness(1.6) saturate(.8); } 100% { filter:brightness(.55) saturate(.85); } }
#loading.storm .flash { animation:flash 1.1s ease-out; }
@keyframes flash { 0% { opacity:0; } 6% { opacity:1; } 14% { opacity:.2; } 22% { opacity:.9; } 100% { opacity:0; } }
#loading.storm { animation:quake .45s; }
@keyframes quake { 20% { transform:translate(-3px, 2px); } 40% { transform:translate(3px, -2px); } 60% { transform:translate(-2px, 1px); } 80% { transform:translate(1px, 0); } }
.card .btn.cta { animation:ctaglow 2.2s 1.2s infinite; }
@keyframes ctaglow { 50% { filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(var(--acid-rgb),.75)) brightness(1.1); } }

/* ===== V18: the result card goes wide: the run on the left, leaderboard and what-next on the right ===== */
.panel:has(> .card.res) { width:min(980px, 96vw); }
.rcols { display:grid; grid-template-columns:minmax(0, 400px) minmax(0, 1fr); gap:28px; width:100%; align-items:center; margin-top:4px; }
.rleft, .rright { display:flex; flex-direction:column; align-items:center; min-width:0; }
.rright { border-left:1px solid rgba(180,150,255,.14); padding-left:24px; }
.rright .lbslot { max-width:none; margin-top:0; }
.rright .lbslot:empty { display:none; }
.rright .btn.cta, .rright .btn.cta2 { min-width:0; width:min(340px, 100%); }
.rright .namerow { flex-wrap:wrap; justify-content:center; }
@media (max-width:760px), (max-height:520px) and (max-width:900px) {
  .rcols { grid-template-columns:1fr; gap:6px; }
  .rright { border-left:0; padding-left:0; }
}
.card.res .rright .lb li:nth-child(n+6) { display:flex; }
.card.res .rright .lb li:nth-child(n+9) { display:none; }   /* the wide card has room for the top 8 */

/* ===== V18: slimmer HUD: the status crest and spawn panel take up less of the level ===== */
.hstat { zoom:.78; }
.hspawn { zoom:.8; }
/* editor: a preview of the world's painted backdrop under the World picker */
.edbg { position:relative; height:74px; margin:6px 0 2px; border-radius:10px; background:#120c22 center / cover no-repeat; border:1px solid rgba(180,150,255,.25); box-shadow:inset 0 -30px 30px -10px rgba(0,0,0,.75); }
.edbg span { position:absolute; left:8px; bottom:5px; font:700 10px Fredoka; letter-spacing:1.5px; text-transform:uppercase; color:var(--cream); text-shadow:var(--ink); }


/* ===== V18: daily challenge ===== */
#mainMenu [data-m="daily"] { border-image-source:url(../assets/ui/mb_orange.webp); filter:hue-rotate(-38deg) saturate(1.35) brightness(.95) drop-shadow(0 6px 12px rgba(0,0,0,.55)); text-shadow:0 2px 0 rgba(80,0,10,.8), 0 0 6px rgba(0,0,0,.5); }
.card .tipbox.daily { border-color:rgba(255,190,80,.45); }
.card .tipbox.daily span { display:block; margin-top:6px; color:#ffd76a; font-weight:700; }
.card .dailyline { margin:4px 0 0; color:#ffd76a; font-weight:700; font-size:14px; }
.mapbar .btn.daily { margin-left:8px; }
#mainMenu [data-m="daily"]:hover { filter:hue-rotate(-38deg) saturate(1.35) brightness(1.1) drop-shadow(0 6px 12px rgba(0,0,0,.55)); }

/* ===== V18: title centring: logo + tagline + five-button menu sit dead centre; short screens shrink logo and menu together ===== */
#loading { --lw:min(560px, 62vw, 48vh); --mh:456px; --tt:max(1.5vh, calc(50vh - (var(--lw) * .42 + 60px + var(--mh)) / 2)); }
@media (max-height:860px) { #loading { --mh:400px; } #loading .mainmenu { transform:translateX(-50%) scale(.84); transform-origin:50% 0; } }
@media (max-height:680px) { #loading { --mh:340px; } #loading .mainmenu { transform:translateX(-50%) scale(.7); transform-origin:50% 0; } }

/* ===== V18: connection notice ===== */
#netNote { position:fixed; z-index:60; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); max-width:min(560px, 92vw);
  padding:10px 18px; border-radius:14px; background:rgba(14,8,32,.94); border:1px solid rgba(255,190,80,.45); color:var(--cream);
  font:600 14px/1.35 Fredoka; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; }
#netNote.on { opacity:1; transform:translate(-50%, 0); }
#netNote.ok { border-color:rgba(var(--acid-rgb),.6); }
body.in-game #netNote { bottom:calc(120px * var(--s)); }
.legal { max-width:560px; margin:10px auto 0; opacity:.55; font-size:12px; line-height:1.4; text-align:center; }

/* ===== V18: phones and tablets ===== */
/* the game handles every touch itself: no page scrolling, bouncing, pinch-zoom or double-tap zoom over it */
html, body { overscroll-behavior:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
#stage, #stage canvas { touch-action:none; }
button, .btn, .ib { touch-action:manipulation; }
/* keep the HUD clear of the notch / rounded corners in landscape */
.hud { left:calc(10px + env(safe-area-inset-left)); right:calc(10px + env(safe-area-inset-right)); top:calc(8px + env(safe-area-inset-top)); }
.dock { left:calc(10px * var(--s) + env(safe-area-inset-left)); right:calc(10px * var(--s) + env(safe-area-inset-right)); bottom:calc(10px * var(--s) + env(safe-area-inset-bottom)); }
/* no fullscreen API (iPhone Safari): hide the button rather than show one that does nothing */
.nofs #fsBtn, .nofs #mmFs, .nofs [data-a="fs"] { display:none !important; }
/* phones held upright: the game is landscape, so ask for a turn */
#rotateNote { display:none; position:fixed; inset:0; z-index:200; background:rgba(8,4,22,.96); color:var(--cream); flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; }
#rotateNote .ph { font-size:64px; animation:rot 2.4s ease-in-out infinite; }
#rotateNote b { font:400 34px Creepster, Fredoka; letter-spacing:2px; color:#9dff4a; text-shadow:0 0 14px rgba(120,255,60,.5); }
#rotateNote p { margin:0; max-width:320px; font:500 15px/1.45 Fredoka; opacity:.85; }
#rotateNote button { margin-top:8px; }
@keyframes rot { 0%, 30% { transform:rotate(0); } 60%, 100% { transform:rotate(-90deg); } }
@media (orientation:portrait) and (pointer:coarse) and (max-width:900px) { body:not(.upright) #rotateNote { display:flex; } }
#iosTip { position:fixed; z-index:61; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(440px, 92vw); padding:10px 40px 10px 16px; border-radius:14px;
  background:rgba(14,8,32,.95); border:1px solid rgba(var(--acid-rgb),.5); color:var(--cream); font:600 14px/1.4 Fredoka; box-shadow:0 8px 24px rgba(0,0,0,.6); display:none; }
#iosTip.on { display:block; }
#iosTip button { position:absolute; right:8px; top:6px; background:none; border:0; color:var(--cream); font-size:20px; cursor:pointer; }
/* ===== V18: ads ===== */
.adask { position:fixed; inset:0; z-index:150; display:grid; place-items:center; background:rgba(5,3,14,.7); }
.adask .card { padding:26px 28px; max-width:min(420px, 90vw); background:rgba(20,12,40,.97); border:1px solid rgba(var(--acid-rgb),.4); border-radius:18px; text-align:center; }
.adask p { font:600 18px/1.4 Fredoka; color:var(--cream); margin:0 0 14px; }
body.in-ad #stage { filter:brightness(.4); }
.mmlinks { position:absolute; z-index:3; left:calc(16px + env(safe-area-inset-left)); bottom:calc(10px + env(safe-area-inset-bottom)); display:none; gap:14px; font:600 13px Fredoka; }
#loading.ready .mmlinks { display:flex; }
.mmlinks a { color:var(--cream); opacity:.6; text-decoration:none; text-shadow:var(--ink); }
.mmlinks a:hover { opacity:1; color:#9dff4a; }
/* map bar: Menu + Daily share the left column so the plaque stays centred and the icons stay right */
.mapleft { justify-self:start; display:flex; gap:8px; align-items:flex-start; }
.mapleft .btn { margin-top:10px; }
.mapbar .btn.daily { margin-left:0; }
/* short screens (phones in landscape): a slimmer bar and hints, so the map itself shows */
@media (max-height:520px) {
  .mapbar { top:calc(6px + env(safe-area-inset-top)); left:calc(10px + env(safe-area-inset-left)); right:calc(10px + env(safe-area-inset-right)); gap:8px; }
  .mapleft .btn, .mapbar > .btn.sm { margin-top:4px; border-width:12px 18px 11px; border-image-width:12px 18px 11px; font-size:14px; line-height:18px; padding:1px 6px; }
  .plaque { width:clamp(220px, 30vw, 300px); }
  .plaque b { font-size:20px; }
  .plaque span { font-size:11px; }
  .mapicons .ib { width:44px; height:44px; }
  .maphint { bottom:calc(6px + env(safe-area-inset-bottom)); gap:6px; }
  .maphint span { font-size:11px; border-width:6px 12px; }
}
/* ===== V18: cards on short screens (phones in landscape): compact so they barely need shrinking and text stays readable ===== */
@media (max-height:520px) {
  .panel { margin:8px; }
  .panel:has(> .card) { padding:0 8px 2px; }
  .card { padding-top:34px; }
  .card .ribbon { transform:translateX(-50%) scale(.72); transform-origin:50% 0; top:-66px; }
  .card .cardtitle { font-size:28px; margin:0 0 2px; }
  .card .sub { font-size:12px; }
  .card .hero, .bhead .hero { width:150px; height:118px; margin:0; }
  .hero .rays { inset:-30px; }
  .bhead { gap:12px; margin:0 0 4px; }
  .card .stats .st { padding:4px 10px; }
  .card .tipbox { font-size:14px; margin:2px 0 4px; padding:6px 10px; }
  .card.brief .lbslot { display:none; }
  .card .btn.cta { margin-top:6px; font-size:22px; line-height:28px; }
  .card .btn.cta2 { margin-top:6px; font-size:16px; }
  .card .iconrow { margin-top:4px; }
  .card .stars3 { transform:scale(.8); margin:-6px 0 -4px; }
  .rcols { gap:16px; }
  .card.res .rright .lb li:nth-child(n+4) { display:none; }
  .card .small, .card .thr { font-size:12px; }
}
/* ===== V18: save codes ===== */
.panel:has(> .card.cloud) { width:min(560px, 94vw); }
.savecode { margin:8px 0 6px; padding:12px 22px; border-radius:14px; border:2px dashed rgba(var(--acid-rgb),.6); background:rgba(20,40,10,.35);
  font:700 clamp(24px, 5vw, 34px) Fredoka; letter-spacing:4px; color:#b9ff7a; text-shadow:0 0 12px rgba(var(--acid-rgb),.45); user-select:all; -webkit-user-select:all; }
.card.cloud .menu.row { display:flex; gap:10px; justify-content:center; margin:4px 0; }
.card.cloud .cloudload { margin-top:14px; padding-top:10px; border-top:1px solid rgba(180,150,255,.18); width:100%; }
.card.cloud .cloudload small { color:var(--muted); letter-spacing:1px; }
.card.cloud input { text-transform:none; }
#svLoad { text-transform:uppercase; letter-spacing:2px; width:180px; }
#svEmail { width:220px; }
.savenudge a { color:#b9ff7a; }