/* Readable interface; pixel art stays on the pitch and character portraits. */
@font-face{font-family:Rubik;src:url('assets/fonts/rubik.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{--ui:Rubik,system-ui,sans-serif;--gold:#ffd66b;--grass:#4bd19a;--red:#ff8d8d;--surface:#102332f5;--card:#1d3446;--muted:#b9cad8;--line:#ffffff24;--px:2px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#8fcaff;color:#fff;font:500 16px/1.45 var(--ui);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
button{font:inherit;color:inherit}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hidden{display:none!important}
#pitch{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated}
#dim{position:fixed;inset:0;pointer-events:none;background:#10203066;transition:opacity .2s}
#dim.clear{opacity:0}

/* Menus scroll instead of shrinking text to fit short screens. */
#overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#06121b66;touch-action:pan-y}
.panel{width:min(100%,560px);max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;display:grid;gap:20px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px #0005;touch-action:pan-y;scroll-padding:16px}
.panel>*{min-width:0}
.block-button{display:block;min-width:0;min-height:44px;padding:12px 18px;border:1px solid var(--line);border-radius:10px;background:#29465d;font-size:16px;font-weight:700;line-height:1.3;text-align:center;overflow-wrap:anywhere;cursor:pointer}
.block-button:hover{background:#365a75}
.block-button:active{filter:brightness(.9)}
.block-button.primary{min-height:50px;background:var(--grass);color:#092b20;font-size:19px}
.block-button.primary:hover{background:#6de4b2}
.block-button.reward{background:#6445a1;font-size:16px}
.block-button.locker-cta{background:#285ca4}
.block-button.glow,.block-button.locker-cta.has-new,.block-button.tab.active{background:var(--gold);color:#30230a}
.block-button.small{font-size:14px;padding:10px 12px}
.block-button em,.locker-item em,.striker-card em{display:inline-block;margin:3px 4px;padding:2px 6px;border-radius:4px;background:#8b3043;color:#fff;font-size:11px;font-style:normal;line-height:1.4}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.actions.stack{display:grid;width:100%}
.logo{display:grid;justify-items:center;line-height:1.1;font-weight:800}
.logo-block{font-size:40px;color:var(--grass)}
.logo-striker{font-size:32px;color:var(--gold);margin-top:6px}
.tagline{text-align:center;font-size:14px;color:var(--muted)}
.over-title,.locker-title{font-size:26px;text-align:center;color:var(--gold)}
.over-score{font-size:32px;color:var(--gold)}
.over-rank,.select-hint{font-size:14px;text-align:center;color:var(--muted)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stats div{display:flex;justify-content:space-between;gap:12px;padding:10px;background:var(--card);border-radius:8px}
.stats dt{font-size:14px}.stats dd{font-weight:700}

/* Three flow regions prevent the HUD, notifications and instructions colliding. */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.hud-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:8px}
.hud-score,.hud-level,.hud-controls{min-width:0;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.hud-score{display:grid;gap:3px;justify-self:start;max-width:100%;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.score{font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.15}
.best{font-size:12px;color:var(--muted)}
.hud-progress{display:grid;gap:3px;font-size:11px;color:#b9eaff}
.hud-progress i{display:block;height:3px;background:#ffffff26;background-image:linear-gradient(90deg,#83d9ff 0 var(--fill,0%),transparent 0)}
.combo{display:none;font-size:14px;font-weight:700;color:var(--gold)}
.combo.show{display:block}
.hud-level{display:grid;justify-items:center;justify-self:center;gap:4px}
#hud-level{font-size:18px;font-weight:800}
.rank{font-size:12px;color:var(--muted)}
.level-blocks{display:flex;gap:4px}
.level-blocks i{width:14px;height:5px;border-radius:2px;background:#ffffff26}
.level-blocks i.on{background:var(--grass)}
.hud-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;justify-self:end;gap:10px}
.hearts{display:flex;gap:4px}
.heart{width:21px;height:18px}
.pause-button{width:44px;height:44px;padding:0;flex-shrink:0;pointer-events:auto}
.special-tag{grid-column:1/-1;display:none;justify-self:center;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;max-width:100%;padding:7px 14px;background:var(--surface);border:1px solid var(--gold);border-radius:9px;text-align:center}
.special-tag.show{display:flex}
.special-tag strong{font-size:14px;color:var(--gold)}
.special-tag span{font-size:13px}
.hud-notices{min-height:0;display:grid;align-content:start;justify-items:center;gap:8px;overflow:hidden}
.verdict,.banner,.toast{display:none;max-width:min(100%,560px);padding:12px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-align:center;gap:4px}
.verdict.show,.banner.show,.toast.show{display:grid}
.verdict strong{font-size:clamp(24px,4vw,38px);font-weight:800;line-height:1.2}
.verdict b{font-size:18px;color:var(--gold)}
.verdict span,.banner span,.toast strong{font-size:14px}
.verdict.target strong,.verdict.bullseye strong{color:var(--gold)}
.verdict.miss strong,.verdict.miss b{color:var(--red)}
.banner strong{font-size:22px;color:var(--grass)}
.toast b{font-size:14px;color:var(--gold)}
.hud-bottom{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;min-width:0}
.phase-prompt{display:none;max-width:min(100%,580px);padding:12px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:16px;text-align:center}
.phase-prompt.show{display:block}
.phase-prompt.tutorial.show{display:grid;width:100%;max-width:580px;gap:6px;padding:16px 20px;border-color:var(--gold)}
.tutorial-step{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--gold)}
.tutorial-title{font-size:clamp(22px,3vw,28px);font-weight:800;line-height:1.2}
.tutorial-instruction{font-size:17px}
.audio-toggle{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;min-height:40px;padding:10px 14px;background:var(--surface);font-size:13px}
.audio-toggle.off{color:var(--red)}
body.loading .audio-toggle{display:none}
.swipe{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.swipe polyline{fill:none;stroke:#fff;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;opacity:.85;filter:drop-shadow(2px 2px 0 #000a)}
.swipe.fade polyline{opacity:0;transition:opacity .45s}
.charge{width:min(220px,100%);height:12px;background:#102332;border:1px solid #ffffff60;border-radius:6px;overflow:hidden}
.charge i{display:block;height:100%;width:var(--fill,0%);background:linear-gradient(90deg,#4bd19a,#ffd66b 60%,#ff8d8d)}

/* Results and progress. */
.results-panel{width:min(100%,880px);gap:18px}
.r-hero{display:grid;justify-items:center;gap:6px;text-align:center}
.r-title{font-size:25px;font-weight:800;color:var(--red)}
.r-title.best{color:var(--gold)}
.r-score{font-size:clamp(38px,6vw,56px);font-weight:800;line-height:1.1;overflow-wrap:anywhere;max-width:100%}
.r-gap{font-size:16px;font-weight:700;color:var(--gold)}
.r-streak{font-size:14px;color:var(--gold)}
.r-meta{font-size:13px;color:var(--muted)}
.r-card{display:grid;gap:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.r-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;font-size:15px}
.r-row>*{min-width:0;overflow-wrap:anywhere}
.r-xp{font-size:22px;font-weight:800;color:var(--gold)}
.r-small,.r-label,.section-title{font-size:13px;color:var(--muted)}
.r-label,.section-title{font-weight:700}
.r-unlocked{justify-self:start;padding:5px 10px;border-radius:6px;font-size:14px;font-weight:700;background:var(--gold);color:#30230a}
.r-actions{display:grid;gap:10px}
.r-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.r-boost{text-align:center;color:var(--gold)}
.bar{display:block;height:7px;border-radius:4px;background:#ffffff26;background-image:linear-gradient(90deg,var(--grass) 0 var(--fill,0%),transparent 0);overflow:hidden}
.game-progress{display:grid;gap:8px;width:100%;padding-top:12px;border-top:1px solid var(--line)}
.locker-panel .game-progress{padding-top:0;border-top:0}
.gp-percent{font-size:18px;color:var(--grass)}
.game-progress .bar{background-image:linear-gradient(90deg,#83d9ff 0 var(--fill,0%),transparent 0)}
.gp-parts{text-align:center}
.missions{display:grid;gap:12px;width:100%;list-style:none}
.missions li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:5px 8px;font-size:14px}
.missions .tick{width:16px;height:16px;border:1px solid #ffffff60;border-radius:3px;font-style:normal;font-size:12px;line-height:14px;text-align:center;color:#102332}
.mission-text{grid-column:2;grid-row:1}
.missions .bar{grid-column:2;grid-row:2}
.missions b{grid-column:3;grid-row:1;font-size:12px;color:var(--muted);white-space:nowrap}
.missions li.done{color:#a4efcc}
.missions li.done .tick{background:var(--grass);border-color:var(--grass)}
.missions li.done b{color:var(--gold)}

/* Collections keep readable card sizes, adding rows when space is limited. */
.locker-panel,.select-panel{width:min(100%,900px)}
.locker-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tab-count{display:block;font-size:12px;font-weight:500}
.locker,.strikers{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px}
.locker-item,.striker-card{position:relative;display:grid;justify-items:center;align-content:start;gap:7px;min-width:0;padding:14px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:inherit;color:#fff;cursor:pointer;overflow-wrap:anywhere}
.locker-item:hover:not(:disabled),.striker-card:hover:not(:disabled){background:#29465d}
.locker-item.equipped,.striker-card.selected{border:2px solid var(--grass);background:#1c4039}
.locker-item:disabled,.striker-card.locked{cursor:default}
.locker-item.locked,.striker-card.locked{color:var(--muted)}
.swatch{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff40;border-radius:4px;background:#999;color:var(--gold);font-style:normal;font-size:24px;box-shadow:inset -10px 0 0 var(--accent,transparent)}
.locker-item.celebration .swatch{background:#453369}
.locker-item.ball .swatch{border-radius:50%}
.locker-item.locked .swatch{filter:saturate(.55) brightness(.7)}
.item-type{font-size:11px;color:var(--muted)}
.item-name{font-size:14px;text-align:center}
.item-state{font-size:12px;text-align:center}
.striker-card .sprite{width:48px;height:96px;image-rendering:pixelated}
.striker-card strong{font-size:15px;text-align:center}
.striker-card span{font-size:12px;text-align:center;color:var(--muted)}
.striker-card.locked .sprite{filter:grayscale(1) brightness(.65)}
.collection{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font-size:14px}
.collection b{color:var(--gold)}

#preloader{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:20px;padding:24px;background:#102332;text-align:center}
.preloader-brand{font-size:clamp(28px,5vw,44px);font-weight:800;color:var(--gold)}
.preloader-brand span{color:var(--grass)}
.preloader-track{width:min(280px,80vw);height:8px;border-radius:4px;background:#ffffff26;overflow:hidden}
.preloader-track span{display:block;height:100%;width:30%;background:var(--grass);animation:load 1.2s linear infinite}
@keyframes load{to{transform:translateX(333%)}}
#preloader.failed .preloader-track{display:none}
@media(min-width:600px){
  .results-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"hero actions" "progress actions" "tasks actions";align-items:start}
  .r-hero{grid-area:hero}.r-progress{grid-area:progress}.r-missions{grid-area:tasks}.r-actions{grid-area:actions;align-self:start;position:sticky;top:0}
}
@media(max-width:600px){
  .hud-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hud-score{grid-column:1;grid-row:1/3;padding:8px 10px}
  .hud-controls{grid-column:2;grid-row:1;padding:5px;gap:6px}
  .hud-level{grid-column:2;grid-row:2;justify-self:end;justify-items:end;gap:3px;padding:6px 10px}
  .heart{width:17px;height:15px}.hearts{gap:2px}
  #hud-level{font-size:16px}.rank{font-size:12px}.score{font-size:25px}
  .panel{padding:18px}.locker-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tutorial-instruction{font-size:16px}
}
@media(max-height:500px){
  #hud{gap:6px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .hud-score,.hud-level,.hud-controls{padding:6px}
  .hud-score{gap:2px}
  .score{font-size:24px}.hud-progress{display:none}.combo{font-size:12px}
  #hud-level{font-size:16px}.special-tag{padding:3px 10px}
  .phase-prompt.tutorial.show{padding:9px 14px;gap:3px}
  .tutorial-title{font-size:21px}.tutorial-instruction{font-size:15px}.tutorial-step{font-size:11px}
  .verdict,.banner,.toast{padding:7px 12px;gap:2px}
  .verdict strong{font-size:24px}.verdict b{font-size:15px}.verdict span,.banner span{font-size:12px}
  .panel{padding:16px}.logo-block{font-size:30px}.logo-striker{font-size:24px}
  .results-panel{gap:12px}.r-actions{gap:7px}
  .r-actions .block-button{padding:9px 12px}
  .r-more{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .pause-panel{gap:12px}.pause-panel .logo{display:flex;justify-content:center;gap:8px;align-items:baseline}
  .pause-panel .logo-striker{margin-top:0}
}

/* ==========================================================================
   Look and feel. The rules above lay the interface out (regions, sizes,
   scrolling, tap targets); this layer only dresses it: colours, depth,
   borders and motion. Game identity: a grass-block edge on every panel,
   night-pitch gradients, chunky 3D buttons that press down, and headlines
   with a block drop shadow.
   ========================================================================== */
:root{
  --grass:#3ddc84;--grass-deep:#1f9d57;--gold:#ffd24a;--gold-deep:#c98a14;--red:#ff6b6b;--violet:#8b5cf6;--violet-deep:#5b32c4;
  --blue:#3b82f6;--blue-deep:#1e4fb8;--muted:#a9bfd2;--ink:#0a1622;
  --surface:linear-gradient(180deg,#17344ced,#0c1d2bf2);
  --card:#ffffff0d;--line:#ffffff1f;
  --drop:0 2px 0 #0007,0 4px 0 #0003;
}
.block-button,.locker-item,.striker-card{-webkit-tap-highlight-color:transparent}

/* ---- Panels: grass-block top edge, night-pitch body ----------------------- */
#overlay{background:radial-gradient(ellipse at 50% 40%,#06121b33,#06121bb3 75%)}
.panel{background:linear-gradient(var(--grass) 0 6px,var(--grass-deep) 6px 9px,#6b4a2b 9px 11px,transparent 11px),
  linear-gradient(180deg,#17344c,#0c1d2b);border:1px solid #ffffff26;
  box-shadow:0 18px 50px #000a,inset 0 1px 0 #ffffff1a;animation:panel-in .28s ease-out both}
@keyframes panel-in{from{opacity:0}}
.r-card{background:linear-gradient(180deg,#ffffff10,#ffffff06);border-color:#ffffff1c;box-shadow:inset 0 1px 0 #ffffff12}

/* ---- Headlines: heavy, uppercase, a block drop ----------------------------- */
.r-title,.over-title,.locker-title,#hud-level,.banner strong,.verdict strong,.tutorial-title,.preloader-brand,.logo{
  font-weight:800;letter-spacing:.02em;text-shadow:var(--drop)}
.r-title{color:#ff7a7a;letter-spacing:.06em}
.r-title.best{color:var(--gold)}
.r-score{color:#fff;text-shadow:0 3px 0 var(--gold-deep),0 6px 0 #0006,0 0 30px #ffd24a33;font-variant-numeric:tabular-nums}
.over-title,.locker-title{color:var(--gold)}
.logo-block{color:var(--grass);text-shadow:0 3px 0 var(--grass-deep),0 6px 0 #6b4a2b,0 9px 0 #0005}
.logo-striker{color:var(--gold);text-shadow:0 3px 0 var(--gold-deep),0 6px 0 #0005}
.tagline{letter-spacing:.3em;font-weight:700}
.r-xp,.gp-percent{text-shadow:0 2px 0 #0006}

/* ---- Buttons: chunky blocks that press down --------------------------------- */
.block-button{border:0;border-radius:12px;background:linear-gradient(180deg,#355a78,#264460);
  box-shadow:0 4px 0 #18293a,0 7px 14px #0005,inset 0 1px 0 #ffffff2e;text-shadow:0 1px 0 #0006;
  transition:transform .08s,box-shadow .08s,filter .12s}
.block-button:hover{background:linear-gradient(180deg,#416b8d,#2e5171);transform:translateY(-1px)}
.block-button:active{transform:translateY(3px);box-shadow:0 1px 0 #18293a,0 2px 6px #0005,inset 0 1px 0 #ffffff2e;filter:none}
.block-button.primary{color:#07301b;text-shadow:0 1px 0 #ffffff5c;letter-spacing:.04em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1l7 4-7 4z' fill='%2307301b'/%3E%3C/svg%3E") left 16px center/14px no-repeat,
    linear-gradient(180deg,#6ef3a8,#2cc873);
  box-shadow:0 5px 0 var(--grass-deep),0 9px 18px #0006,inset 0 2px 0 #ffffff66}
.block-button.primary:hover{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1l7 4-7 4z' fill='%2307301b'/%3E%3C/svg%3E") left 16px center/14px no-repeat,
    linear-gradient(180deg,#86f7b8,#3dd682)}
.block-button.primary:active{box-shadow:0 1px 0 var(--grass-deep),0 3px 8px #0006,inset 0 2px 0 #ffffff66}
.block-button.reward{color:#fff;background:linear-gradient(110deg,var(--violet) 0 40%,#b794ff 50%,var(--violet) 60% 100%) 0 0/250% 100%,var(--violet);
  box-shadow:0 5px 0 var(--violet-deep),0 9px 18px #0006,inset 0 1px 0 #ffffff40;animation:shimmer 2.6s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.block-button.locker-cta{color:#fff;background:linear-gradient(180deg,#5b9bff,var(--blue));box-shadow:0 5px 0 var(--blue-deep),0 9px 18px #0006,inset 0 1px 0 #ffffff40}
.block-button.glow,.block-button.locker-cta.has-new,.block-button.tab.active{color:#3a2600;text-shadow:0 1px 0 #ffffff66;
  background:linear-gradient(180deg,#ffe48a,var(--gold));box-shadow:0 4px 0 var(--gold-deep),0 7px 14px #0005,inset 0 1px 0 #ffffffaa}
.block-button.locker-cta.has-new{animation:glow-pulse 1.6s ease-in-out infinite}
@keyframes glow-pulse{50%{box-shadow:0 4px 0 var(--gold-deep),0 0 22px #ffd24aaa,inset 0 1px 0 #ffffffaa}}
.block-button em,.locker-item em,.striker-card em{background:linear-gradient(180deg,#ff6b6b,#d9304a);box-shadow:0 2px 0 #8b1d2e;
  font-weight:800;animation:badge-bob 1.2s ease-in-out infinite}
@keyframes badge-bob{50%{transform:translateY(-2px)}}
.audio-toggle{background:linear-gradient(180deg,#17344cee,#0c1d2bee);border:1px solid #ffffff26}

/* ---- HUD: glass cards with a coloured top edge ------------------------------- */
.hud-score,.hud-level,.hud-controls,.special-tag,.phase-prompt{background:linear-gradient(180deg,#17344ce6,#0c1d2be6);
  border:1px solid #ffffff22;box-shadow:0 6px 18px #0005,inset 0 1px 0 #ffffff14}
.hud-score{border-top:3px solid var(--gold)}
.hud-level{border-top:3px solid var(--grass)}
.hud-controls{border-top:3px solid var(--red)}
.score{text-shadow:0 2px 0 var(--gold-deep),0 4px 0 #0005;font-variant-numeric:tabular-nums}
.hud-progress i,.level-blocks i{border-radius:3px}
.level-blocks i.on{background:linear-gradient(180deg,#6ef3a8,var(--grass));box-shadow:0 0 8px #3ddc8488}
.heart.full{filter:drop-shadow(0 0 4px #ff4d4d88)}
.combo.show{color:var(--gold);text-shadow:0 2px 0 #0006;animation:badge-bob .9s ease-in-out infinite}
.special-tag{border:2px solid var(--gold)}
.special-tag strong{letter-spacing:.04em}
.special-tag.golden{background:linear-gradient(180deg,#ffe48a,#f5b82a);border-color:#fff3c0;color:#3a2600}
.special-tag.golden strong,.special-tag.golden span{color:#3a2600}
.special-tag.moving{border-color:#54e0ff}.special-tag.moving strong{color:#8feaff}
.special-tag.freekick{border-color:#fff}.special-tag.freekick strong{color:#fff}
.special-tag.boss{background:linear-gradient(180deg,#5b32c4,#2e1a6b);border-color:#b794ff}.special-tag.boss strong{color:#e6d9ff}
.special-tag.bonus{border-color:var(--grass)}.special-tag.bonus strong{color:#8ff5b9}
.special-tag.keeper{border-color:var(--red)}.special-tag.keeper strong{color:#ffb0b0}

/* ---- Notices: the shot verdict pops, level-ups are a ribbon, missions a star -- */
.verdict,.banner,.toast{border:1px solid #ffffff22;box-shadow:0 8px 24px #0006}
.verdict{background:linear-gradient(180deg,#0f2436f0,#081521f0)}
.verdict.show{animation:pop .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.verdict strong{color:#fff;font-size:clamp(28px,4.4vw,44px)}
.verdict.target strong{color:var(--gold);text-shadow:0 3px 0 var(--gold-deep),0 5px 0 #0006}
.verdict.bullseye{border-color:var(--gold);box-shadow:0 0 28px #ffd24a55,0 8px 24px #0006}
.verdict.bullseye strong{color:var(--gold);text-shadow:0 3px 0 var(--gold-deep),0 5px 0 #0006,0 0 24px #ffd24a88}
.verdict.miss strong{color:var(--red);text-shadow:0 3px 0 #8b1d2e,0 5px 0 #0006}
.verdict.miss.show{animation:shake .35s ease-out both}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.verdict b{text-shadow:0 2px 0 #0006}
.banner{background:linear-gradient(180deg,#3ddc84,#1f9d57);border-color:#8ff5b9;color:#062414}
.banner strong{color:#fff;text-shadow:0 3px 0 #146b3b,0 5px 0 #0004}
.banner span{color:#063b1f;font-weight:700}
.banner.show{animation:pop .4s cubic-bezier(.2,1.6,.4,1) both}
.toast{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .5l1.3 2.9 3.2.3-2.4 2.1.7 3.1L5 7.3 2.2 8.9l.7-3.1L.5 3.7l3.2-.3z' fill='%23ffd24a'/%3E%3C/svg%3E") 14px center/22px no-repeat,
  linear-gradient(180deg,#17344cf2,#0c1d2bf2);border:2px solid var(--gold);padding-left:46px}
.toast.show{animation:pop .35s cubic-bezier(.2,1.6,.4,1) both}
.phase-prompt.tutorial.show{border:2px solid var(--gold);box-shadow:0 0 24px #ffd24a33,0 8px 24px #0006}
.tutorial-step{display:inline-block;justify-self:center;padding:2px 10px;border-radius:99px;background:var(--gold);color:#3a2600}

/* ---- Progress bars fill in; missions tick off ----------------------------------- */
.bar{position:relative;height:8px;background:#ffffff1a;box-shadow:inset 0 1px 2px #0006}
.bar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--fill,0%);border-radius:inherit;
  background:linear-gradient(90deg,#2cc873,#8ff5b9);box-shadow:0 0 8px #3ddc8466;animation:fill-in .9s ease-out both}
@keyframes fill-in{from{width:0}}
.bar,.game-progress .bar{background-image:none}
.game-progress .bar::after{background:linear-gradient(90deg,#2f9bff,#8feaff);box-shadow:0 0 8px #54e0ff66}
.missions li.done .tick{background:linear-gradient(180deg,#6ef3a8,var(--grass));box-shadow:0 0 8px #3ddc8488}
.r-unlocked{background:linear-gradient(180deg,#ffe48a,var(--gold));box-shadow:0 3px 0 var(--gold-deep);animation:glow-pulse 1.6s ease-in-out infinite}

/* ---- Locker and striker cards ------------------------------------------------------ */
.locker-item,.striker-card{background:linear-gradient(180deg,#ffffff12,#ffffff05);border:1px solid #ffffff1f;
  box-shadow:0 4px 0 #0a1622,inset 0 1px 0 #ffffff14;transition:transform .1s,box-shadow .1s}
.locker-item:hover:not(:disabled),.striker-card:hover:not(:disabled){background:linear-gradient(180deg,#ffffff1c,#ffffff0a);transform:translateY(-2px)}
.locker-item.equipped,.striker-card.selected{border:2px solid var(--grass);background:linear-gradient(180deg,#1f5a3f,#123827);
  box-shadow:0 4px 0 #0a1622,0 0 18px #3ddc8455}
.swatch{border-radius:8px;box-shadow:inset -10px 0 0 var(--accent,transparent),0 3px 0 #0006}
.locker-item.ball .swatch{border-radius:50%}
.striker-card .sprite{filter:drop-shadow(0 4px 0 #0005)}
.locker-item.locked,.striker-card.locked{opacity:.8}

/* ---- Loading screen ------------------------------------------------------------------- */
#preloader{background:linear-gradient(180deg,#8fcaff 0 55%,var(--grass) 55% calc(55% + 14px),var(--grass-deep) 0 calc(55% + 20px),#6b4a2b 0)}
.preloader-brand{color:var(--gold);text-shadow:0 4px 0 var(--gold-deep),0 8px 0 #0004}
.preloader-brand span{color:#fff;text-shadow:0 4px 0 var(--grass-deep),0 8px 0 #0004}
.preloader-track{background:#0006;box-shadow:inset 0 2px 4px #0008}
#preloader p{color:#fff;font-weight:700;text-shadow:0 2px 0 #0006}

/* Room for the play icon on either side, so the label stays centred. */
.block-button.primary{padding-left:40px;padding-right:40px}

/* Wide results: result and progress on the left; actions, then missions, on the
   right, so neither column runs long while the other sits half empty. */
@media(min-width:600px){
  .results-panel{grid-template-areas:"hero actions" "progress tasks"}
  .r-actions{position:static}
}
@media(prefers-reduced-motion:reduce){.bar::after{animation:none}}
/* Pull coach: a small looping demo of the gesture, a dot, a band and a finger pulling down. */
.coach-demo{position:relative;justify-self:center;width:60px;height:74px;margin-bottom:2px}
.coach-anchor{position:absolute;left:25px;top:4px;width:10px;height:10px;border-radius:50%;background:#fff}
.coach-band{position:absolute;left:27px;top:9px;width:6px;height:0;border-radius:3px;background:var(--grass);animation:coach-band 1.8s ease-in-out infinite}
.coach-hand{position:absolute;left:14px;top:0;font-size:30px;font-style:normal;line-height:1;animation:coach-hand 1.8s ease-in-out infinite}
@keyframes coach-hand{0%,15%{transform:translateY(0)}55%,75%{transform:translateY(40px)}100%{transform:translateY(0)}}
@keyframes coach-band{0%,15%{height:0}55%,75%{height:40px}100%{height:0}}
/* The run's unlock: a gold card under the score with a preview and a use button. */
.unlock-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;margin-top:6px;padding:12px 14px;
  border-radius:14px;border:2px solid var(--gold);background:linear-gradient(180deg,#3a2f0cee,#1c1606ee);text-align:left;
  box-shadow:0 0 26px #ffd24a55,0 8px 20px #0006;animation:unlock-in .6s cubic-bezier(.2,1.6,.4,1) both,glow-pulse 1.8s ease-in-out .6s infinite}
@keyframes unlock-in{from{transform:scale(.5) rotate(-4deg);opacity:0}}
.unlock-preview{display:grid;place-items:center;width:64px;height:64px;border-radius:12px;background:#0008}
.unlock-preview .swatch{width:44px;height:44px}
.unlock-card.ball .unlock-preview .swatch{border-radius:50%}
.unlock-preview .sprite{width:30px;height:60px;image-rendering:pixelated}
.unlock-text{display:grid;gap:2px;min-width:0}
.unlock-kind{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--gold)}
.unlock-name{font-size:20px;font-weight:800;color:#fff;text-shadow:0 2px 0 #0006;overflow-wrap:anywhere}
.unlock-style{font-size:12px;color:var(--muted)}
.unlock-inuse{font-size:13px;font-weight:800;color:var(--grass)}
/* The rush clock: big numbers in the HUD's top-right card; red and pulsing in the last ten seconds. */
.hud-clock{position:relative;display:flex;align-items:center;gap:6px;font-size:clamp(24px,3vw,32px);font-weight:800;
  font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 2px 0 #0007;min-width:3.4ch}
.clock-icon{font-style:normal;font-size:.75em}
.hud-clock.hurry{color:#ff6b6b;animation:clock-hurry .5s ease-in-out infinite alternate}
@keyframes clock-hurry{to{transform:scale(1.12)}}
.clock-bonus{position:absolute;right:0;top:100%;font-size:18px;font-weight:800;color:var(--grass);white-space:nowrap;
  text-shadow:0 2px 0 #0008;pointer-events:none;animation:clock-bonus 1.1s ease-out forwards}
@keyframes clock-bonus{from{transform:translateY(0);opacity:1}to{transform:translateY(26px);opacity:0}}
/* The rush's reward screen: one column, the unlock as the centrepiece. */
.reward-panel{width:min(100%,520px);justify-items:stretch;text-align:center;grid-template-columns:minmax(0,1fr)}
.reward-panel>*{grid-area:auto!important;position:static!important}
.reward-panel .r-title,.reward-panel .r-score,.reward-panel .r-meta{justify-self:center}
.reward-heading{font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--gold);margin-top:4px}
.unlock-card.big{grid-template-columns:1fr;justify-items:center;text-align:center;padding:20px 16px;gap:10px}
.unlock-card.big .unlock-preview{width:112px;height:112px;border-radius:18px}
.unlock-card.big .unlock-preview .swatch{width:76px;height:76px}
.unlock-card.big .unlock-preview .sprite{width:48px;height:96px}
.unlock-card.big .unlock-text{justify-items:center}
.unlock-card.big .unlock-kind{font-size:14px}
.unlock-card.big .unlock-name{font-size:28px}
.unlock-card.big .unlock-use{min-width:160px}
/* Reward screen layout: head, reward, actions; side by side on wide screens, compact on short ones. */
.reward-head,.reward-body{display:grid;justify-items:center;gap:6px;min-width:0}
.reward-body{justify-items:stretch}
.reward-panel .r-actions{grid-column:1/-1}
@media(min-aspect-ratio:1/1){
  .reward-panel{width:min(100%,780px);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
}
@media(max-height:500px){
  .reward-panel{gap:10px}
  .reward-panel .r-score{font-size:40px}
  .unlock-card.big{grid-template-columns:auto 1fr auto;justify-items:start;text-align:left;padding:10px 12px;gap:10px}
  .unlock-card.big .unlock-preview{width:64px;height:64px;border-radius:12px}
  .unlock-card.big .unlock-preview .swatch{width:44px;height:44px}
  .unlock-card.big .unlock-preview .sprite{width:30px;height:60px}
  .unlock-card.big .unlock-text{justify-items:start}
  .unlock-card.big .unlock-name{font-size:20px}
  .unlock-card.big .unlock-use{min-width:0}
}
.swatch.icon{background:#ffffff14!important;box-shadow:none;font-size:26px;line-height:1;color:#fff;text-shadow:none}
.unlock-card.big .swatch.icon{font-size:52px}
.locker-tabs{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))!important}
/* Landscape: the tutorial card becomes a side panel on the left, clear of the
   striker (bottom centre) and the goal (centre), vertically centred. */
@media(min-aspect-ratio:1/1){
  .phase-prompt.tutorial.show{position:absolute;left:max(12px,env(safe-area-inset-left));top:50%;transform:translateY(-45%);
    width:min(290px,32vw);max-width:none;text-align:left;justify-items:start}
  .phase-prompt.tutorial .coach-demo,.phase-prompt.tutorial .tutorial-step{justify-self:start}
  .phase-prompt.tutorial .tutorial-title{font-size:clamp(18px,2.4vw,26px)}
  .phase-prompt.tutorial .tutorial-instruction{font-size:clamp(13px,1.5vw,16px)}
}
/* Portrait: a compact card, the gesture demo beside the text, so it stays below the striker. */
@media(max-aspect-ratio:1/1){
  .phase-prompt.tutorial.show{grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;text-align:left;
    align-items:center;padding:10px 14px}
  .phase-prompt.tutorial .coach-demo{grid-row:1/4;width:44px;height:64px;margin:0}
  .phase-prompt.tutorial .coach-hand{font-size:24px;left:10px}
  .phase-prompt.tutorial .coach-anchor{left:17px}.phase-prompt.tutorial .coach-band{left:19px}
  .phase-prompt.tutorial .tutorial-step{justify-self:start;font-size:10px}
  .phase-prompt.tutorial .tutorial-step,.phase-prompt.tutorial .tutorial-title,.phase-prompt.tutorial .tutorial-instruction{grid-column:-2}
  .phase-prompt.tutorial:not(:has(.coach-demo)).show{grid-template-columns:minmax(0,1fr)}
  .phase-prompt.tutorial .tutorial-title{font-size:19px}
  .phase-prompt.tutorial .tutorial-instruction{font-size:14px}
}

/* ---- Landscape: no scrolling; more clicks instead ------------------------------------------ */
.off-page{display:none!important}
.pager{display:flex;align-items:center;justify-content:center;gap:12px}
.pager-label{font-size:13px;font-weight:700;color:var(--muted);min-width:44px;text-align:center}
.block-button.pager-button{min-width:44px;padding:6px 10px}
.detail-button,.detail-back{display:none!important}
@media(min-aspect-ratio:1/1){
  /* Pause: logo and buttons | missions. */
  .pause-panel{width:min(100%,760px);grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center}
  .pause-main,.pause-side{display:grid;gap:10px;justify-items:center;min-width:0}
  .pause-side{justify-items:stretch}
  /* Cards: compact, one page at a time. */
  .locker,.strikers{gap:8px}
  .striker-card .sprite{width:36px;height:72px}
  .striker-card{padding:10px 6px;gap:4px}
  .locker-item{padding:10px 6px;gap:4px}
  .locker-panel .game-progress{display:none}
  .locker-panel,.select-panel{gap:12px}
}
@media(min-aspect-ratio:1/1) and (max-height:640px){
  .panel{gap:10px;padding:14px 16px}
  .pause-panel .logo{display:flex;gap:8px;align-items:baseline}
  .pause-panel .logo-block{font-size:30px}.pause-panel .logo-striker{font-size:24px;margin-top:0}
  .over-title,.locker-title{font-size:20px}
  .select-hint{display:none}
  /* Results: score, XP and the actions; missions and game progress one click away. */
  .results-panel{grid-template-areas:"hero actions" "progress actions"!important}
  .results-panel .r-missions,.results-panel .game-progress{display:none}
  .results-panel .detail-button{display:block!important}
  .results-panel.show-detail{grid-template-areas:"progress tasks" "back back"!important}
  .results-panel.show-detail .r-hero,.results-panel.show-detail .r-actions{display:none}
  .results-panel.show-detail .r-missions{display:grid;grid-area:tasks}
  .results-panel.show-detail .game-progress{display:grid}
  .results-panel.show-detail .detail-back{display:block!important;grid-area:back;justify-self:center;min-width:180px}
  .r-hero{gap:2px}.r-score{font-size:40px}
  .r-card{padding:10px 12px;gap:8px}
  .r-actions{gap:6px}.r-actions .block-button{min-height:38px;padding:8px 12px}
  .unlock-card{padding:8px 10px;margin-top:2px}
  .reward-panel{gap:8px}
}
@media(min-aspect-ratio:1/1) and (max-height:480px){
  .actions{align-items:center}
  .locker-panel>.over-rank{display:none}
  .locker-tabs{gap:5px}
  .locker-tabs .block-button{min-height:32px;padding:5px 6px;font-size:12px}
  .locker-tabs .tab-count{display:inline;font-size:11px}
  .locker-tabs .block-button em{display:none}
  .locker-item .item-type,.striker-card span{display:none}
  .locker-item .swatch{width:30px;height:30px}.locker-item .swatch.icon{font-size:20px}
  .locker-item,.striker-card{padding:6px 4px;gap:3px}
  .striker-card .sprite{width:26px;height:52px}
  .striker-card strong,.item-name{font-size:12px}
  .actions .block-button{min-height:38px;padding:8px 14px}
}
@media(min-aspect-ratio:1/1) and (max-height:380px){
  .panel{padding:10px 12px;gap:7px}
  .over-title,.locker-title{font-size:17px}
  .r-title{font-size:18px}.r-score{font-size:32px}
  .r-gap,.r-streak{font-size:13px}.r-meta{font-size:12px}
  .locker-item .item-state{font-size:10px}
  .locker-tabs .block-button{min-height:28px;padding:3px 6px}
  .locker-item{padding:5px 4px;gap:2px}
}
/* Reduced motion stills everything except the tutorial gesture, which is the lesson itself. */
@media(prefers-reduced-motion:reduce){:not(.gesture *),:not(.gesture *)::before,:not(.gesture *)::after{animation:none!important;transition:none!important}}

/* The pull shot's band: an anchor where the finger went down, a band, a knob at the finger. */
.swipe .pull-band,.swipe .pull-anchor,.swipe .pull-knob{display:none}
.swipe.pulling .pull-band,.swipe.pulling .pull-anchor,.swipe.pulling .pull-knob{display:inline}
.pull-band{stroke:var(--pull,#6ef3a8);stroke-width:10px;stroke-linecap:round;opacity:.9;filter:drop-shadow(0 3px 0 #0007)}
.pull-anchor{fill:#fff;stroke:#0008;stroke-width:3px}
.pull-knob{fill:var(--pull,#6ef3a8);stroke:#fff;stroke-width:4px;filter:drop-shadow(0 4px 0 #0007)}

/* ==========================================================================
   Menus: TILES. Chunky colourful hub tiles with cartoon outlines. Every
   screen's actions sit in a `.dock` (the big button, then `.sec` tiles, icon
   over label); landscape never scrolls: results keep missions one click away.
   ========================================================================== */
@font-face{font-family:Pixelify;src:url('assets/fonts/pixelify-sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
.b-icon{display:none;line-height:1;font-style:normal}
.panel[data-screen] .block-button{display:flex;align-items:center;justify-content:center;gap:8px}
.panel[data-screen] .block-button.primary{padding-left:18px;padding-right:18px}
.panel[data-screen] .b-icon{display:inline}
/* Several unlocks: small cards side by side. */
.reward-cards{display:grid;gap:8px}
.reward-cards .unlock-card{grid-template-columns:1fr;justify-items:center;text-align:center;margin:0;padding:10px 8px;gap:6px}
.reward-cards .unlock-text{justify-items:center}
.reward-cards .unlock-preview{width:52px;height:52px}
.reward-cards .unlock-preview .swatch{width:36px;height:36px}.reward-cards .swatch.icon{font-size:28px}
.reward-cards .unlock-kind{font-size:10px;letter-spacing:.04em}
.reward-cards .unlock-name{font-size:15px}
.reward-cards .unlock-use{min-height:34px;padding:6px 14px}
/* Landscape results (every style): missions and game progress are one click away. */
@media(min-aspect-ratio:1/1){
  .panel.results-panel[data-screen] .r-missions,.panel.results-panel[data-screen] .game-progress{display:none}
  .panel.results-panel[data-screen] .detail-button{display:flex!important}
  .panel.results-panel[data-screen].show-detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"progress tasks" "back back"!important}
  .panel.results-panel[data-screen].show-detail>.r-hero,.panel.results-panel[data-screen].show-detail>.r-actions{display:none!important}
  .panel.results-panel[data-screen].show-detail .r-missions{display:grid;grid-area:tasks}
  .panel.results-panel[data-screen].show-detail .game-progress{display:grid}
  .panel.results-panel[data-screen].show-detail .detail-back{display:flex!important;grid-area:back;justify-self:center;min-width:180px}
}

/* ---- Menus on short landscape screens: compact buttons -------------------------------- */
.panel.locker-panel[data-screen] .locker-tabs .block-button{min-height:36px;padding:5px 6px;font-size:13px;letter-spacing:0;text-transform:none}
@media(min-aspect-ratio:1/1) and (max-height:520px){
  .panel[data-screen] .block-button.primary{min-height:46px!important;font-size:18px!important}
  .panel[data-screen] .block-button.reward{min-height:38px!important;font-size:13px!important}
.panel[data-screen] .block-button.small{min-height:36px}
  .panel.locker-panel[data-screen] .locker-tabs .block-button{min-height:30px;font-size:12px;padding:3px 5px}
}
@media(min-aspect-ratio:1/1) and (max-height:400px){
  .panel[data-screen] .block-button.primary{min-height:40px!important;font-size:17px!important}
  .panel[data-screen] .block-button.reward{min-height:34px!important}
.panel[data-screen] .block-button.small{min-height:32px;padding:4px 10px}
  .panel.locker-panel[data-screen] .locker-tabs .block-button{min-height:28px}
}
@media(min-aspect-ratio:1/1) and (max-height:400px){
  .panel.results-panel[data-screen].show-detail .missions{gap:6px}
  .panel.results-panel[data-screen].show-detail .r-card{padding:8px 10px;gap:6px}
  .panel.results-panel[data-screen].show-detail .gp-parts,.panel.results-panel[data-screen].show-detail .r-progress .r-small{display:none}
  .panel.results-panel[data-screen] .block-button.detail-back{min-height:34px!important;font-size:15px!important}
}

/* ---- TILES: chunky colourful hub tiles, cartoon outlines ------------------------------ */
.panel.tiles{border-radius:22px;border:4px solid #0b1622;
  background:repeating-linear-gradient(135deg,#ffffff08 0 14px,transparent 14px 28px),linear-gradient(180deg,#2458b8,#173f8f);
  box-shadow:0 8px 0 #0b1622,0 24px 50px #000a}
.panel.tiles .r-title,.panel.tiles .over-title,.panel.tiles .locker-title,.panel.tiles .r-score,.panel.tiles .logo span{
  text-shadow:0 4px 0 #0b1622,2px 0 0 #0b1622,-2px 0 0 #0b1622,0 -2px 0 #0b1622,2px 2px 0 #0b1622,-2px 2px 0 #0b1622}
.panel.tiles .r-title{color:#ffd24a}
.panel.tiles .block-button{border:3px solid #0b1622;border-radius:16px;background:linear-gradient(#5b8ff0,#3b6fd6);color:#fff;font-weight:800;
  text-shadow:0 2px 0 #0b1622,1px 0 0 #0b1622,-1px 0 0 #0b1622;box-shadow:0 5px 0 #0b1622,inset 0 3px 0 #ffffff40;transform:none;animation:none}
.panel.tiles .block-button:hover{filter:brightness(1.1);transform:translateY(-2px)}
.panel.tiles .block-button:active{transform:translateY(3px);box-shadow:0 2px 0 #0b1622,inset 0 3px 0 #ffffff40}
.panel.tiles .block-button.primary{background:linear-gradient(#9cf54a,#3fc21f);font-size:22px}
.panel.tiles .block-button.reward{background:linear-gradient(#b27bff,#7a3df0)}
.panel.tiles .block-button.locker-cta{background:linear-gradient(#ffc04a,#ff8a1c)}
.panel.tiles .block-button.daily-button{background:linear-gradient(#5cc2ff,#2f7df0)}
.panel.tiles .block-button.striker-button{background:linear-gradient(#4de8d2,#16a896)}
.panel.tiles .block-button.detail-button{background:linear-gradient(#ff8ac4,#e8488f)}
.panel.tiles .block-button.tab.active{background:linear-gradient(#ffe066,#ffb81c)}
.panel.tiles .r-card,.panel.tiles .locker-item,.panel.tiles .striker-card{border:3px solid #0b1622;border-radius:16px;background:#0b16224d;box-shadow:0 4px 0 #0b1622}
.panel.tiles .locker-item.equipped,.panel.tiles .striker-card.selected{background:#3fc21f55;border-color:#0b1622;box-shadow:0 4px 0 #0b1622,inset 0 0 0 3px #9cf54a}
.panel.tiles .unlock-card{border:3px solid #0b1622;box-shadow:0 5px 0 #0b1622}
.panel.tiles .dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.panel.tiles .r-more{display:contents}
.panel.tiles .dock>.primary,.panel.tiles .dock>.reward,.panel.tiles .dock>.pager,.panel.tiles .dock>.r-boost{grid-column:1/-1}
.panel.tiles .dock .sec{position:relative;flex-direction:column;gap:4px;min-height:70px;font-size:12px;padding:6px 4px}
.panel.tiles .dock .sec .b-icon{font-size:26px;filter:drop-shadow(0 2px 0 #0b1622)}
.panel.tiles .dock .sec em{position:absolute;top:-8px;right:-6px;margin:0}
.panel.tiles .dock .primary{min-height:62px}
.panel.tiles .dock .primary .b-icon{font-size:24px}
.panel.tiles.results-panel{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"hero" "actions" "progress" "tasks"!important}
.panel.tiles.pause-panel .pause-main{display:contents}
.panel.tiles.pause-panel .logo{grid-area:logo}.panel.tiles.pause-panel .tagline{grid-area:tag}.panel.tiles.pause-panel .pause-side{grid-area:side}
.panel.tiles.pause-panel .dock{grid-area:dock}
.panel.tiles.pause-panel{grid-template-areas:"logo" "tag" "dock" "side"}
@media(min-aspect-ratio:1/1){
  .panel.tiles .dock{grid-template-columns:repeat(2,92px);align-content:center}
  .panel.tiles.results-panel{width:min(100%,820px);grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"hero actions" "progress actions"!important;align-items:center}
  .panel.tiles.reward-panel{width:min(100%,800px);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head actions" "body actions";align-items:center}
  .panel.tiles.reward-panel>.reward-head{grid-area:head!important}.panel.tiles.reward-panel>.reward-body{grid-area:body!important}
  .panel.tiles.reward-panel>.r-actions{grid-area:actions!important}
  .panel.tiles.pause-panel{width:min(100%,860px);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;grid-template-areas:"logo side dock" "tag side dock"}
  .panel.tiles.locker-panel,.panel.tiles.select-panel{grid-template-columns:minmax(0,1fr) auto}
  .panel.tiles.locker-panel>*,.panel.tiles.select-panel>*{grid-column:1}
  .panel.tiles.locker-panel>.dock{grid-column:2;grid-row:1/span 5}
  .panel.tiles.select-panel>.dock{grid-column:2;grid-row:1/span 3}
}
@media(min-aspect-ratio:1/1) and (max-height:520px){
  .panel.tiles .dock{grid-template-columns:repeat(2,84px);gap:8px}
  .panel.tiles .dock .sec{min-height:56px;font-size:11px}
  .panel.tiles .dock .sec .b-icon{font-size:22px}
}
@media(min-aspect-ratio:1/1) and (max-height:400px){
  .panel.tiles .dock{grid-template-columns:repeat(2,76px);gap:6px}
  .panel.tiles .dock .sec{min-height:44px;font-size:10px;gap:2px}
  .panel.tiles .dock .sec .b-icon{font-size:17px}
}
@media(min-aspect-ratio:1/1) and (max-height:400px){
  .panel.results-panel[data-screen].show-detail .missions li{font-size:12.5px}
}

/* ---- Tutorial gesture: a big finger on the pitch presses, drags down and lets go ------- */
.gesture{position:fixed;left:50%;top:34%;z-index:6;width:120px;height:210px;margin-left:-60px;pointer-events:none}
.gesture.hidden{display:none}
.gesture i{position:absolute;font-style:normal}
.g-anchor{left:50px;top:18px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #0006,0 0 16px #fff;
  animation:g-anchor 2.2s ease-in-out infinite}
.g-band{left:55px;top:28px;width:10px;height:0;border-radius:5px;background:#6ef3a8;box-shadow:0 0 0 3px #0005,0 0 14px #6ef3a8;
  animation:g-band 2.2s ease-in-out infinite}
.g-finger{left:34px;top:14px;font-size:56px;line-height:1;filter:drop-shadow(0 4px 0 #0008);animation:g-finger 2.2s ease-in-out infinite}
.g-shot{left:44px;top:-10px;font-size:28px;opacity:0;animation:g-shot 2.2s ease-out infinite}
.g-label{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;padding:4px 12px;border-radius:99px;
  background:#0b1622e6;border:2px solid #6ef3a8;color:#fff;font-size:15px;font-weight:800;letter-spacing:.06em;animation:g-label 2.2s ease-in-out infinite}
.g-label::before{content:"\2B07";display:inline-block;margin-right:6px;color:#6ef3a8;animation:g-tug 2.2s ease-in-out infinite}
@keyframes g-finger{0%{transform:translateY(-14px) scale(1.1);opacity:0}10%{transform:translateY(0) scale(1);opacity:1}
  20%{transform:translateY(0) scale(.92)}62%,74%{transform:translateY(118px) scale(.92)}82%{transform:translateY(104px) scale(1.05);opacity:1}100%{transform:translateY(104px);opacity:0}}
@keyframes g-band{0%,20%{height:0;opacity:1}62%,74%{height:118px;opacity:1}78%{height:0;opacity:1}100%{height:0;opacity:0}}
@keyframes g-anchor{0%,10%{transform:scale(0)}20%,74%{transform:scale(1)}82%,100%{transform:scale(0)}}
@keyframes g-shot{0%,74%{opacity:0;transform:translateY(40px) scale(1)}78%{opacity:1;transform:translateY(20px) scale(1)}100%{opacity:0;transform:translateY(-70px) scale(.5)}}
@keyframes g-label{0%,15%{opacity:0;transform:translate(-50%,0)}25%{opacity:1;transform:translate(-50%,0)}
  62%,74%{opacity:1;transform:translate(-50%,10px) scaleY(1.08)}80%{transform:translate(-50%,-4px)}88%,90%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@keyframes g-tug{0%,20%{transform:translateY(-3px)}62%,74%{transform:translateY(5px)}80%,100%{transform:translateY(-3px)}}
@media(min-aspect-ratio:1/1){.gesture{top:30%}}
@media(max-height:420px){.gesture{transform:scale(.8);top:24%}}

/* ---- On fire: the bonus level ------------------------------------------------------ */
/* Flames lick in from the screen edges while the striker is on fire. */
body.on-fire::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 70px 16px #ff5a1acc,inset 0 -50px 90px -10px #ffb03aaa;animation:fire-edge .45s ease-in-out infinite alternate}
@keyframes fire-edge{to{box-shadow:inset 0 0 90px 22px #ff7a1add,inset 0 -70px 110px -6px #ffd24abb}}
.hud-level.bonus{border-top-color:#ff7a1a;background:linear-gradient(180deg,#5a1f0ae6,#2a0c04e6);box-shadow:0 0 22px #ff7a1a88,0 6px 18px #0005}
.hud-level.bonus #hud-level{color:#ffd24a;text-shadow:0 2px 0 #b3400f,0 0 12px #ff7a1a}
.hud-level.bonus .rank{color:#ffb070;font-weight:800}
.hud-level.bonus .level-blocks i.on{background:linear-gradient(180deg,#ffd24a,#ff6a1a);box-shadow:0 0 8px #ff7a1a}
.special-tag.fire{background:linear-gradient(180deg,#ff9a1a,#d8401a);border-color:#ffd24a}
.special-tag.fire strong{color:#fff;text-shadow:0 2px 0 #7a1f06}.special-tag.fire span{color:#ffe6c0}
.banner.fire{background:linear-gradient(180deg,#ff9a1a,#d8401a);border-color:#ffd24a;color:#3a0f00}
.banner.fire strong{color:#fff;text-shadow:0 3px 0 #7a1f06,0 0 18px #ffd24a}
.banner.fire span{color:#fff3d6}
/* The pull hint mid-run: the tutorial's finger, smaller and fainter. */
.gesture.subtle{opacity:.7;transform:scale(.72)}
.gesture.subtle .g-label{font-size:13px}

/* Poki: the rewarded tile stays smaller than the big button beside it. */
.panel.tiles .dock>.reward{font-size:13px;line-height:1.2;min-height:0;padding:8px 10px}

/* The gesture, bigger and on open grass: a dark spotlight behind it, a bright label. */
.gesture{left:64%;top:40%;width:150px;height:260px;margin-left:-75px}
.gesture::before{content:"";position:absolute;inset:-18px -24px 10px;border-radius:90px;
  background:radial-gradient(ellipse at 50% 45%,#0b1622cc 0%,#0b162288 55%,transparent 75%)}
.g-anchor{left:63px;top:22px;width:24px;height:24px}
.g-band{left:69px;top:34px;width:12px}
.g-finger{left:38px;top:16px;font-size:74px}
.g-shot{left:57px;top:-14px;font-size:34px}
.g-label{bottom:0;padding:6px 16px;background:#6ef3a8;border:3px solid #0b1622;color:#0b1622;font-size:19px;box-shadow:0 4px 0 #0b1622}
.g-label::before{color:#0b1622}
@keyframes g-finger{0%{transform:translateY(-14px) scale(1.1);opacity:0}10%{transform:translateY(0) scale(1);opacity:1}
  20%{transform:translateY(0) scale(.92)}62%,74%{transform:translateY(140px) scale(.92)}82%{transform:translateY(124px) scale(1.05);opacity:1}100%{transform:translateY(124px);opacity:0}}
@keyframes g-band{0%,20%{height:0;opacity:1}62%,74%{height:140px;opacity:1}78%{height:0;opacity:1}100%{height:0;opacity:0}}
.gesture.subtle{opacity:.9;transform:scale(.85)}
@media(max-aspect-ratio:1/1){.gesture{left:50%;top:36%}}
@media(max-height:420px){.gesture{transform:scale(.75);top:22%}.gesture.subtle{transform:scale(.65)}}

/* The gesture kept small: a compact finger and a short pull, on a dark spot so it reads. */
.gesture{left:62%;top:44%;width:84px;height:150px;margin-left:-42px}
.gesture::before{inset:-10px -14px 8px;border-radius:60px}
.g-anchor{left:36px;top:12px;width:13px;height:13px}
.g-band{left:39px;top:18px;width:7px}
.g-finger{left:22px;top:8px;font-size:40px}
.g-shot{left:32px;top:-10px;font-size:20px}
.g-label{bottom:0;padding:3px 10px;font-size:12px;border-width:2px;box-shadow:0 3px 0 #0b1622}
.g-label::before{margin-right:4px}
@keyframes g-finger{0%{transform:translateY(-8px) scale(1.1);opacity:0}10%{transform:translateY(0) scale(1);opacity:1}
  20%{transform:translateY(0) scale(.92)}62%,74%{transform:translateY(72px) scale(.92)}82%{transform:translateY(62px) scale(1.05);opacity:1}100%{transform:translateY(62px);opacity:0}}
@keyframes g-band{0%,20%{height:0;opacity:1}62%,74%{height:72px;opacity:1}78%{height:0;opacity:1}100%{height:0;opacity:0}}
.gesture.subtle{opacity:.95;transform:none}
@media(max-aspect-ratio:1/1){.gesture{left:50%;top:40%}}
@media(max-height:420px){.gesture{transform:scale(.85);top:30%}.gesture.subtle{transform:scale(.85)}}
.gesture::before{background:radial-gradient(ellipse at 50% 45%,#0b162299 0%,#0b162244 55%,transparent 72%)}

/* Mission toasts: top left, under the score and Poki's pill, sliding in from the left. */
.toast{position:fixed;left:max(12px,env(safe-area-inset-left));z-index:7;max-width:min(320px,calc(100vw - 24px));text-align:left;justify-items:start}
.toast.show{animation:toast-in .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes toast-in{from{transform:translateX(-120%);opacity:0}}

/* ---- Chaos: stars, the level result, the level map ------------------------------------- */
.level-blocks.stars{gap:2px}
.level-blocks.stars i{width:auto;height:auto;background:none;font-style:normal;font-size:15px;line-height:1;color:#ffffff40;text-shadow:0 2px 0 #0b1622}
.level-blocks.stars i.on{background:none;color:#ffd24a}
.special-tag.pickup{background:linear-gradient(180deg,#7a3df0,#4b1fa8);border-color:#ffd24a}
.special-tag.pickup strong{color:#fff}.special-tag.pickup span{color:#f1e6ff}
.star-row{display:flex;gap:4px;justify-content:center}
.star-row .star{font-style:normal;font-size:16px;line-height:1;color:#ffffff38;text-shadow:0 2px 0 #0b1622}
.star-row .star.on{color:#ffd24a}
.star-row.big{gap:10px}
.star-row.big .star{font-size:54px;text-shadow:0 5px 0 #0b1622}
.star-row.big .star.on{animation:star-pop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.25s + var(--i) * .32s);text-shadow:0 5px 0 #b3400f,0 0 22px #ffd24a}
@keyframes star-pop{from{transform:scale(0) rotate(-40deg);opacity:0}}
.level-panel{width:min(100%,560px);text-align:center;justify-items:stretch}
.level-head{display:grid;gap:6px;justify-items:center}
.level-name{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.level-needs{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:13px;font-weight:800;color:#ffffff80}
.level-needs .met{color:#ffd24a}
.level-body{display:grid;gap:10px}
.power-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:10px 14px;
  border:3px solid #0b1622;border-radius:16px;background:linear-gradient(180deg,#ff9a1a,#d8401a);box-shadow:0 5px 0 #0b1622}
.power-card .power-icon{grid-row:1/span 2;font-size:40px}
.power-card strong{color:#fff;font-size:18px;text-shadow:0 2px 0 #7a1f06}.power-card span:last-child{color:#fff3d6;font-size:13px}
.level-gate{font-size:13px;font-weight:700;color:#ffd24a}
.map-panel{width:min(100%,760px);gap:12px}
.map-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.map-total{font-size:20px;font-weight:800;color:#ffd24a}
.map-worlds{display:grid;gap:12px}
.map-world-name{font-size:14px;letter-spacing:.08em;margin-bottom:6px}
.map-world.locked .map-world-name{color:var(--muted)}
.map-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.panel.tiles .block-button.map-level{position:relative;display:grid;justify-items:center;gap:2px;min-height:86px;padding:8px 4px;font-size:10px;line-height:1.1;
  background:linear-gradient(#5b8ff0,#3b6fd6)}
.panel.tiles .block-button.map-level.current{background:linear-gradient(#9cf54a,#3fc21f)}
.panel.tiles .block-button.map-level.chaos{background:linear-gradient(#ff9a1a,#d8401a)}
.panel.tiles .block-button.map-level.locked{background:linear-gradient(#56606c,#3d4550);opacity:.75;cursor:default;transform:none}
.map-number{font-size:22px;line-height:1}
.map-name{min-height:2.2em;display:flex;align-items:center;text-align:center}
.map-tag{position:absolute;top:-8px;right:-4px;padding:1px 6px;border-radius:8px;background:#8b3dff;border:2px solid #0b1622;font-style:normal;font-size:9px}
.map-powers{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.map-power{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:#0b16224d;border:2px solid #0b1622;font-size:12px;font-weight:800;color:var(--muted)}
.map-power.on{background:linear-gradient(#ff9a1a,#d8401a);color:#fff}
.map-power i{font-style:normal}
.map-power:not(.on) i{filter:grayscale(1);opacity:.6}
@media(max-aspect-ratio:1/1){.map-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-aspect-ratio:1/1){
  .panel.tiles.level-panel{width:min(100%,860px);grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"head body actions";align-items:center}
  .panel.tiles.level-panel>.level-head{grid-area:head}.panel.tiles.level-panel>.level-body{grid-area:body}
  .panel.tiles.level-panel>.r-actions{grid-area:actions}
  .panel.tiles.level-panel:not(:has(.level-body)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head actions"}
  .panel.tiles.map-panel{width:min(100%,900px);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head actions" "worlds actions" "powers actions"}
  .panel.tiles.map-panel>.map-head{grid-area:head}.panel.tiles.map-panel>.map-worlds{grid-area:worlds}
  .panel.tiles.map-panel>.map-powers{grid-area:powers}.panel.tiles.map-panel>.r-actions{grid-area:actions}
}
@media(min-aspect-ratio:1/1) and (max-height:520px){
  .star-row.big .star{font-size:38px}
  .panel.tiles.level-panel .r-score{font-size:40px}
  .panel.tiles .block-button.map-level{min-height:64px;padding:4px 2px}
  .map-number{font-size:16px}.map-worlds{gap:6px}.map-world-name{margin-bottom:3px}
}

/* ---- Chaos: screen flashes and crazier verdicts ------------------------------------------ */
.screen-flash{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0}
.screen-flash.show{animation:screen-flash .45s ease-out both}
.screen-flash.boom{background:radial-gradient(circle at 50% 45%,#fffbe0 0%,#ffb040cc 35%,#ff4a1a55 70%,transparent 100%)}
.screen-flash.fire{background:radial-gradient(circle at 50% 50%,#ffe08066 0%,#ff6a1a55 50%,transparent 90%)}
.screen-flash.bolt{background:#e8eeffcc}
@keyframes screen-flash{0%{opacity:1}100%{opacity:0}}
.verdict.chaos strong{font-size:clamp(44px,11vw,88px);color:#ffd24a;
  text-shadow:0 4px 0 #b3400f,0 8px 0 #0b1622,0 0 28px #ff7a1a}
.verdict.chaos.show strong{animation:chaos-word .6s cubic-bezier(.2,1.8,.4,1) both}
@keyframes chaos-word{0%{transform:scale(.2) rotate(-12deg)}60%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(-2deg)}}
.special-tag.mods{background:linear-gradient(180deg,#2b3a55,#16223a);border-color:#6ef3a8}
.special-tag.mods strong{font-size:18px;letter-spacing:.1em}
/* The map, one world a page. */
.map-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:8px}
.map-nav .map-world-name{text-align:center;margin:0;font-size:16px}
.map-levels{grid-template-columns:repeat(6,minmax(0,1fr))}
.map-icons{font-size:12px;line-height:1;letter-spacing:1px}
.map-worlds.world-2 .map-world-name{color:#ffb070}.map-worlds.world-3 .map-world-name{color:#a8c4ff}
.map-worlds.world-4 .map-world-name{color:#ff7a4a}.map-worlds.world-5 .map-world-name{color:#c8b8ff}
@media(max-aspect-ratio:1/1){.map-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Chaos locations: a colour grade over the 3D view (under the HUD), so each world is a different place. */
#grade{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s}
body[data-location=sunset] #grade{opacity:1;mix-blend-mode:soft-light;background:linear-gradient(180deg,#ff5a2a 0%,#ff9a4a 45%,#ffd28a 100%)}
body[data-location=storm] #grade{opacity:1;mix-blend-mode:multiply;background:radial-gradient(ellipse at 50% 40%,#b8c6dc 0%,#6a7a96 70%,#3a4660 100%)}
body[data-location=lava] #grade{opacity:1;mix-blend-mode:multiply;background:radial-gradient(ellipse at 50% 55%,#ffd0a0 0%,#ff7a4a 55%,#8a1a0a 100%)}
body[data-location=moon] #grade{opacity:1;mix-blend-mode:multiply;background:radial-gradient(ellipse at 50% 50%,#c8d0ff 0%,#6a70c0 60%,#1a1a50 100%)}

/* ---- Small screens: big, clear, never clipped ------------------------------------------- */
.audio-toggle{min-width:44px;min-height:44px;padding:6px;font-size:22px;line-height:1;border-radius:12px}
#hud.chaos .hud-progress{display:none}
.panel[data-screen] .block-button,.map-level,.map-name{overflow-wrap:normal;word-break:normal;hyphens:none}
.map-name{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-tag{top:-7px;right:-6px;font-size:8px;padding:1px 4px}
.panel.tiles .dock .sec .b-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Phones in portrait: the level result in one screen. */
@media(max-width:400px){
  #hud .best{display:none}
  .panel.level-panel{gap:10px;padding:14px}
  .level-panel .r-title{font-size:24px}
  .star-row.big .star{font-size:42px}
  .level-panel .r-score{font-size:38px}
  .level-needs{font-size:12px;gap:4px 10px}
  .panel.tiles .dock{gap:7px}
  .panel.tiles .dock .sec{min-height:54px;font-size:11px}
  .panel.tiles .dock .sec .b-icon{font-size:21px}
  .panel.tiles .dock .primary{min-height:54px;font-size:19px}
  .panel.tiles .dock>.reward{padding:6px 8px}
  .map-panel{gap:8px;padding:14px}
  .panel.tiles .block-button.map-level{min-height:74px}
}
/* Short landscape phones: everything on one screen. */
@media(min-aspect-ratio:1/1) and (max-height:420px){
  #hud .best{display:none}
  .panel.tiles.level-panel,.panel.tiles.map-panel{gap:6px;padding:10px 14px}
  .level-panel .r-title{font-size:22px}
  .star-row.big .star{font-size:32px}
  .panel.tiles.level-panel .r-score{font-size:32px}
  .level-name,.level-needs,.level-panel .r-meta{font-size:11px}
  .map-head .r-title{font-size:20px}.map-total{font-size:16px}
  .map-nav{margin-bottom:4px}.map-nav .pager-button{min-height:34px;padding:4px 12px}
  .panel.tiles .block-button.map-level{min-height:0;padding:5px 2px 4px;gap:1px}
  .map-number{font-size:15px}.map-name{font-size:9px}.star-row .star{font-size:12px}.map-icons{font-size:10px}
  .map-powers{gap:4px}.map-power{padding:2px 8px;font-size:10px}
}
@media(min-aspect-ratio:1/1) and (max-height:420px){
  .panel.tiles .dock .primary{min-height:44px;font-size:16px;padding:6px 8px;white-space:nowrap}
  .panel.tiles .dock .primary .b-icon{font-size:18px}
  .panel.tiles .dock>.reward{font-size:11px;padding:4px 6px}
  .panel.tiles .dock .sec{min-height:38px;flex-direction:row;gap:4px;font-size:10px;padding:4px}
  .panel.tiles .dock .sec .b-icon{font-size:15px}
}
.panel.tiles .block-button.map-level.mayhem{background:linear-gradient(#ff5ac8,#b0208a)}
.panel.tiles .block-button.map-level.mayhem.locked{background:linear-gradient(#56606c,#3d4550)}
.map-levels{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-aspect-ratio:1/1){.map-levels{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- Desktop: the phone-sized tiles scaled back, so menus sit comfortably on a big screen ---- */
@media(min-width:1000px) and (min-height:620px){
  .panel.tiles{gap:14px;padding:22px 26px}
  .panel.tiles .r-title{font-size:26px}
  .panel.tiles .r-score{font-size:46px}
  .star-row.big .star{font-size:46px}
  .panel.tiles .dock{grid-template-columns:repeat(2,86px);gap:8px}
  .panel.tiles .dock .primary{min-height:48px;font-size:17px;padding:8px 10px;white-space:nowrap}
  .panel.tiles .dock .primary .b-icon{font-size:18px}
  .panel.tiles .dock>.reward{font-size:12px;padding:6px 8px}
  .panel.tiles .dock .sec{min-height:56px;font-size:11px}
  .panel.tiles .dock .sec .b-icon{font-size:20px}
  .panel.tiles.level-panel{width:min(100%,720px)}
  .panel.tiles.map-panel{width:min(100%,900px)}
  .panel.tiles.results-panel{width:min(100%,760px)}
  .panel.tiles.reward-panel{width:min(100%,720px)}
  .panel.tiles.pause-panel{width:min(100%,720px)}
  .panel.tiles .block-button.map-level{min-height:78px}
  .map-number{font-size:18px}
}

/* Chaos verdicts sized like the others (they covered the play); MAYHEM's volleys get a small score pop. */
.verdict.chaos strong{font-size:clamp(26px,4.5vw,40px);text-shadow:0 3px 0 #b3400f,0 0 16px #ff7a1a}
.verdict.chaos.show strong{animation:chaos-word .45s cubic-bezier(.2,1.8,.4,1) both}
.score-pop{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 118px);transform:translateX(-50%);z-index:6;pointer-events:none;
  padding:4px 12px;border-radius:99px;background:#0b1622cc;border:2px solid #ffd24a;color:#ffd24a;font-weight:800;font-size:16px;
  white-space:nowrap;opacity:0}
.score-pop.show{animation:score-pop .9s ease-out both}
@keyframes score-pop{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}
  70%{opacity:1;transform:translate(-50%,-6px) scale(1)}100%{opacity:0;transform:translate(-50%,-14px)}}
@media(max-width:400px),(max-height:420px){.score-pop{top:calc(env(safe-area-inset-top) + 96px);font-size:14px}}

/* Popups (verdicts, banners) on the right, out of the play in the middle; sized to match. */
.hud-notices{justify-items:end;align-content:start;padding-top:clamp(8px,6vh,60px)}
.verdict,.banner{max-width:min(46%,320px);text-align:right;justify-items:end}
.verdict strong{font-size:clamp(20px,3vw,30px)}
.verdict.chaos strong{font-size:clamp(22px,3.4vw,34px)}
.banner strong{font-size:clamp(17px,2.4vw,24px)}
@media(max-aspect-ratio:1/1){.verdict,.banner{max-width:min(64%,300px)}}
/* The sound toggle, now a button in the pause menu. */
.panel .audio-toggle{position:static;min-width:0;min-height:0;font-size:inherit;border-radius:16px}

/* The tutorial's ghost pull: a big finger whose tip sits on the pull point, doing the real shot. */
.ghost-finger{position:fixed;left:0;top:0;z-index:9;pointer-events:none;will-change:transform}
.ghost-finger.hidden{display:none}
.ghost-hand{position:absolute;left:-30px;top:-8px;font-style:normal;font-size:64px;line-height:1;
  filter:drop-shadow(0 4px 0 #0009) drop-shadow(0 0 10px #ffffff88);transition:transform .15s,opacity .25s}
.ghost-finger.press .ghost-hand{transform:scale(.88)}
.ghost-finger.up .ghost-hand{opacity:0;transform:translateY(-18px)}
.ghost-label{position:absolute;left:44px;top:10px;white-space:nowrap;padding:4px 10px;border-radius:99px;background:#6ef3a8;
  border:3px solid #0b1622;color:#0b1622;font-size:15px;font-weight:800;letter-spacing:.06em;box-shadow:0 3px 0 #0b1622;transition:opacity .25s}
.ghost-label::before{content:"\2B07  "}
.ghost-finger.up .ghost-label{opacity:0}
@media(max-width:400px),(max-height:420px){.ghost-hand{font-size:52px;left:-24px}.ghost-label{font-size:13px;left:34px}}

/* MAYHEM's first run: the ghost finger taps by the boot. */
.ghost-finger.wait .ghost-hand{opacity:.85}
.ghost-finger.tap .ghost-hand{animation:ghost-tap .45s ease-in-out infinite}
@keyframes ghost-tap{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(10px) scale(.86)}}
.ghost-finger.tap .ghost-label::before,.ghost-finger.wait .ghost-label::before{content:"\1F446  "}
/* NEXT LEVEL counting down to go by itself. */
.block-button.counting{box-shadow:0 0 0 3px #ffd24a,0 5px 0 #0b1622}