:root {
  --bg: #05070d;
  --panel: #0d1322;
  --line: #26324a;
  --ink: #f4f1e8;
  --muted: #a9b1c2;
  --accent: #ffb84d;
  --accent2: #4fd1c5;
  --danger: #ff6b6b;
  --ok: #6ee7a8;
}
* { box-sizing: border-box; }
/* Pans only (no pinch or double-tap zoom). Not touch-action: none here: iPhone browsers apply it to everything inside,
   which stopped the panels (leaderboard, how to play) from scrolling. The game canvas blocks all gestures itself. */
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; touch-action: pan-x pan-y; overscroll-behavior: none;
  font-family: 'Chakra Petch', Arial, Helvetica, sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; }
canvas { display: block; }
button { font: 700 15px 'Chakra Petch', Arial, sans-serif; cursor: pointer; border-radius: 8px; padding: 10px 16px;
  border: 1px solid var(--accent); background: var(--accent); color: #1a1205; }
button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button:disabled { opacity: 0.45; cursor: default; }
input { font: 15px Arial, sans-serif; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: #070b16; color: var(--ink); width: 140px; user-select: text; -webkit-user-select: text; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; display: none; }
#dist { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 40px; font-family: 'Bungee', Impact, sans-serif;
  text-shadow: 0 2px 6px #000; }
#score { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); font-size: 16px; font-weight: bold;
  color: var(--accent2); text-shadow: 0 2px 4px #000; white-space: nowrap; }
#speed { position: absolute; top: 16px; left: 16px; font-size: 20px; font-weight: bold; color: var(--accent); }
#zoneLabel { position: absolute; top: 44px; left: 16px; font-size: 13px; font-weight: bold; letter-spacing: 0.5px;
  color: var(--ink); opacity: 0.85; text-shadow: 0 2px 4px #000; }
#zoneBanner { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0;
  font-size: 30px; font-weight: bold; letter-spacing: 3px; color: var(--ink); text-shadow: 0 2px 10px #000; white-space: nowrap; }
#zoneBanner .sub { font-size: 14px; letter-spacing: 1px; color: var(--accent); margin-top: 4px; }
#modeBadge { position: absolute; top: 14px; right: 16px; max-width: 46vw; text-align: right; font-size: 13px;
  font-weight: bold; letter-spacing: 0.5px; padding: 6px 10px; border-radius: 6px; background: rgba(13,19,34,0.8);
  border: 1px solid var(--line); }
#modeBadge.practice { color: var(--accent); }
#modeBadge.nft { color: var(--accent2); }
#modeBadge.demo { color: var(--accent2); border-color: rgba(79,209,197,0.6); }
#laserBox { position: absolute; left: 16px; bottom: 16px; pointer-events: auto; cursor: pointer; font-size: 16px; font-weight: bold; color: #ff8a8a;
  text-shadow: 0 2px 4px #000; display: none; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px;
  background: rgba(10,15,30,0.7); border: 1px solid rgba(255,107,107,0.45); }
.lz-key { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 7px; background: #1a2236; color: var(--ink);
  border: 1px solid #ff8a8a; box-shadow: 0 3px 0 #7a2d2d; font: 15px 'Bungee', Impact, sans-serif; }
.lz-eye { display: none; }
.lz-name { letter-spacing: 1px; }
#laserBox.fire { animation: laserFire 0.35s ease-out; }
#laserBox.fire .lz-key { transform: translateY(3px); box-shadow: 0 0 0 #7a2d2d; transition: transform 0.05s; }
@keyframes laserFire { 0% { box-shadow: 0 0 0 rgba(255,80,80,0); } 30% { box-shadow: 0 0 22px rgba(255,80,80,0.9); border-color: #ff6b6b; } 100% { box-shadow: 0 0 0 rgba(255,80,80,0); } }
#laserBox.empty { opacity: 0.45; }
/* Touch screens: the laser counter becomes a round FIRE button under the right thumb (steer with the left) */
@media (hover: none) and (pointer: coarse) {
  #laserBox { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: max(100px, calc(env(safe-area-inset-bottom) + 86px));   /* above Safari's bottom strip, where taps open its toolbar */
    width: 84px; height: 84px; padding: 0; border-radius: 50%; flex-direction: column; justify-content: center; gap: 2px;
    pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    background: radial-gradient(circle at 50% 40%, rgba(255,107,107,0.35), rgba(40,10,14,0.85) 70%); border: 2px solid #ff6b6b;
    box-shadow: 0 0 18px rgba(255,80,80,0.35), inset 0 0 12px rgba(255,80,80,0.25); }
  .lz-key { display: none; }
  .lz-eye { display: block; width: 26px; height: 14px; border-radius: 50%; border: 2px solid #ffd0d0; position: relative; }
  .lz-eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
  .lz-name { font-size: 11px; letter-spacing: 1.5px; color: #ffd0d0; }
  #laserCount { font-size: 12px; color: var(--ink); }
  #laserBox:active, #laserBox.fire { transform: scale(0.93); }
  #laserBox.fire { animation: laserFire 0.35s ease-out; }
}
/* Same button wherever touch is detected (body.touch, set by the game), in case the media query doesn't match */
body.touch #laserBox { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: max(100px, calc(env(safe-area-inset-bottom) + 86px));   /* above Safari's bottom strip, where taps open its toolbar */
  width: 84px; height: 84px; padding: 0; border-radius: 50%; flex-direction: column; justify-content: center; gap: 2px;
  pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 40%, rgba(255,107,107,0.35), rgba(40,10,14,0.85) 70%); border: 2px solid #ff6b6b;
  box-shadow: 0 0 18px rgba(255,80,80,0.35), inset 0 0 12px rgba(255,80,80,0.25); }
body.touch .lz-key { display: none; }
body.touch .lz-eye { display: block; width: 26px; height: 14px; border-radius: 50%; border: 2px solid #ffd0d0; position: relative; }
body.touch .lz-eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
body.touch .lz-name { font-size: 11px; letter-spacing: 1.5px; color: #ffd0d0; }
body.touch #laserCount { font-size: 12px; color: var(--ink); }
body.touch #laserBox:active, body.touch #laserBox.fire { transform: scale(0.93); }
body.touch #laserBox.fire { animation: laserFire 0.35s ease-out; }
#dustBox { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 220px; text-align: center;
  font-weight: 700; font-size: 14px; text-shadow: 0 2px 4px #000; }
.dust-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dust-gem { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); background: #ffd27a;
  box-shadow: 0 0 8px #ffb84d; }
.lives { color: var(--ok); margin-left: 6px; }
.dust-track { margin-top: 5px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15); overflow: hidden; }
#dustBar { height: 100%; width: 0; background: linear-gradient(90deg, #ffb84d, #ffe2a0); }
#powerBar { position: absolute; top: 56px; right: 16px; display: flex; gap: 8px; }
.pw { position: relative; width: 46px; height: 46px; border-radius: 50%; padding: 3px; }
.pw img { width: 100%; height: 100%; border-radius: 50%; display: block; background: #0b1020; }
.pw span { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px #000; }
#pickupPop { position: absolute; top: 36%; left: 50%; transform: translateX(-50%); font-family: 'Bungee', Impact, sans-serif;
  font-size: 26px; letter-spacing: 2px; opacity: 0; text-shadow: 0 2px 10px #000; white-space: nowrap; }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#zoneFlash { position: fixed; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
#zoneBanner .pre { font-size: 14px; letter-spacing: 6px; color: var(--accent2); margin-bottom: 4px; }
#zoneBanner .title { font-family: 'Bungee', Impact, sans-serif; font-weight: normal; }
#zoneBanner.pop { animation: zonePop 0.7s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes zonePop { from { transform: translateX(-50%) scale(1.8); letter-spacing: 14px; } to { transform: translateX(-50%) scale(1); letter-spacing: 3px; } }
/* Slow-Mo tint and Dash edge glow */
body.slowmo::after, body.dashing::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body.slowmo::after { box-shadow: inset 0 0 160px rgba(150,110,255,0.45); }
body.dashing::after { box-shadow: inset 0 0 140px rgba(255,184,77,0.4); }
#nearMiss { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font-size: 22px; font-weight: bold;
  color: var(--accent2); opacity: 0; text-shadow: 0 2px 6px #000; }
#msg { position: absolute; top: clamp(84px, 14vh, 140px); left: 50%; transform: translateX(-50%); text-align: center;
  font-size: 20px; font-weight: bold; color: var(--accent); text-shadow: 0 2px 8px #000;
  line-height: 1.45; white-space: pre-line; width: min(640px, 92vw); }
#msg .sub { display: block; font-size: 15px; color: var(--ink); font-weight: normal; margin-top: 6px; }
#msg .warn { color: var(--danger); }
#msg .good { color: var(--ok); }
#hudMenuBtn { position: absolute; left: 16px; top: 72px; pointer-events: auto; padding: 6px 12px; font-size: 13px; }
/* Pause: a two-bar button in the Menu button's spot (Menu is hidden while flying) */
#hudPauseBtn { position: absolute; left: 16px; top: 72px; pointer-events: auto; width: 44px; height: 44px; padding: 0; display: none;
  align-items: center; justify-content: center; gap: 6px; background: rgba(5,8,18,0.55); border-color: rgba(255,255,255,0.25); border-radius: 12px; }
#hudPauseBtn span { width: 5px; height: 16px; border-radius: 2px; background: var(--ink); }
body.flying #hudPauseBtn { display: flex; }
body.flying.paused, body.flying.paused #gameCanvas { cursor: auto; }
#pauseBox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: auto;
  background: rgba(3,5,12,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 15; }
#pauseBox.show { display: flex; animation: fadeIn 0.2s ease-out; }
.pz-card { width: min(320px, calc(100vw - 32px)); padding: 24px 22px 18px; border-radius: 18px; text-align: center;
  background: rgba(10,15,30,0.94); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
.pz-title { font: 28px 'Bungee', Impact, sans-serif; color: var(--ink); letter-spacing: 2px; }
.pz-dist { margin: 4px 0 18px; font-weight: 700; color: var(--accent); font-size: 16px; }
.pz-card button { display: block; width: 100%; min-height: 48px; margin-top: 10px; font-size: 17px; letter-spacing: 1px; }
#pauseResume { font-family: 'Bungee', Impact, sans-serif; font-weight: 400; box-shadow: 0 4px 0 #b9761d; }
.pz-note { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.4; }
/* Resume countdown: 3, 2, 1 */
#countdown { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); pointer-events: none; z-index: 16;   /* above the rocket, so you can line up */
  font: clamp(80px, 18vh, 150px) 'Bungee', Impact, sans-serif; color: var(--accent); text-shadow: 0 6px 0 #8a4f12, 0 10px 30px rgba(0,0,0,0.6);
  opacity: 0; }
#countdown.show { animation: countPop 0.95s ease-out forwards; }
@keyframes countPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(0.96); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.75); } }
@media (prefers-reduced-motion: reduce) { #countdown.show { animation: none; opacity: 1; } }

/* ---------- Panels (modal cards over the live scene) ---------- */
.panel { position: fixed; inset: 0; display: none; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: rgba(3,5,12,0.72); padding: 24px 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.panel.show { display: block; animation: fadeIn 0.25s ease-out; }
.panel .wrap { max-width: 860px; margin: 3vh auto; background: rgba(10,15,30,0.92); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.panel h2 { font-family: 'Bungee', Impact, sans-serif; font-weight: normal; letter-spacing: 1px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.how-grid h3 { margin: 0 0 6px; color: var(--accent); font-size: 16px; letter-spacing: 1px; text-transform: uppercase; }
.how-grid b { color: var(--ink); }
.wrap { max-width: 860px; margin: 0 auto; }

/* ---------- Home screen ---------- */
.home { position: fixed; inset: 0; display: none; pointer-events: none; }
.home.show { display: block; }
.home > * { pointer-events: auto; }
.home-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 10px;
  animation: drop 0.5s ease-out both; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(10,15,30,0.75); border: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--ink); }
.chip-label { color: var(--accent); letter-spacing: 1px; font-size: 12px; }
.chip-btn { cursor: pointer; }
.top-right, .top-left { display: flex; gap: 8px; }
.fs-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fs-btn .fs-close, .is-fullscreen .fs-btn .fs-open { display: none; }
.is-fullscreen .fs-btn .fs-close { display: inline; }
.fs-btn.unsupported { display: none !important; }
/* The ridden Chog's real portrait: the rider faces away from the camera in flight */
#riderCard { position: absolute; right: 16px; top: 96px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--accent2); box-shadow: 0 0 0 2px rgba(0,0,0,0.5); display: none; }
body.flying #riderCard { top: 52px; }
#hudFsBtn { position: absolute; right: 16px; top: 52px; pointer-events: auto; padding: 6px 8px; line-height: 0; }
/* Hide the mouse cursor while flying: the rocket shows where you are steering */
body.flying, body.flying #gameCanvas { cursor: none; }
#gameCanvas { touch-action: none; }
.chip-btn:hover { border-color: var(--accent2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.home-main { position: absolute; left: clamp(16px, 7vw, 110px); top: 50%; transform: translateY(-50%); width: min(500px, 90vw); }
.logo { display: flex; flex-direction: column; line-height: 0.88; transform: skew(-8deg); margin-bottom: 10px;
  font-family: 'Bungee', Impact, sans-serif; animation: pop 0.6s cubic-bezier(.2,1.4,.4,1) both; }
.logo-1 { font-size: clamp(56px, 9vw, 124px); color: #fff3d6;
  text-shadow: 0 4px 0 #c45a12, 0 8px 0 #7a3208, 0 16px 28px rgba(0,0,0,0.6); }
.logo-2 { position: relative; font-size: clamp(56px, 9vw, 124px); color: var(--accent); padding-left: 0.5em;
  text-shadow: 0 4px 0 #8a4310, 0 8px 0 #4a2208, 0 16px 28px rgba(0,0,0,0.6); }
.logo-2::before { content: ""; position: absolute; left: 0; top: 30%; width: 0.4em; height: 40%;
  background: repeating-linear-gradient(180deg, var(--accent2) 0 5px, transparent 5px 12px); opacity: 0.9; }
.tagline { font-weight: 700; letter-spacing: 6px; color: var(--muted); font-size: 14px; margin: 14px 0 26px;
  animation: rise 0.5s 0.15s ease-out both; }
.mode-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(10,15,30,0.8); border: 1px solid var(--line);
  animation: rise 0.5s 0.25s ease-out both; }
.mode { background: transparent; border: 0; color: var(--muted); border-radius: 999px; padding: 9px 18px; letter-spacing: 1px; }
.mode.on { background: var(--ink); color: #0b0f1c; }
.mode-hint { color: var(--muted); font-size: 14px; margin: 10px 0 18px; min-height: 20px; animation: rise 0.5s 0.3s ease-out both; }
.play { display: block; width: min(320px, 100%); padding: 18px 0 16px; border-radius: 18px; border: 0;
  font-family: 'Bungee', Impact, sans-serif; font-size: 40px; font-weight: normal; letter-spacing: 3px; color: #2a1404;
  background: var(--accent); box-shadow: 0 7px 0 #b8691a, 0 12px 30px rgba(255,184,77,0.35);
  transition: transform 0.08s, box-shadow 0.08s; animation: rise 0.5s 0.35s ease-out both, glow 2.2s 1s ease-in-out infinite; }
.play:hover { transform: translateY(-2px); }
.play:active { transform: translateY(5px); box-shadow: 0 2px 0 #b8691a, 0 6px 16px rgba(255,184,77,0.3); }
.key-hint { margin-top: 18px; font-size: 13px; letter-spacing: 2px; color: var(--muted); animation: blink 1.6s ease-in-out infinite; }
.home-bottom { position: absolute; left: clamp(16px, 7vw, 110px); bottom: 20px; display: flex; gap: 12px;
  animation: rise 0.5s 0.45s ease-out both; }
.icon-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 14px;
  background: rgba(10,15,30,0.75); border: 1px solid var(--line); color: var(--ink); }
.icon-btn:hover { border-color: var(--accent); }
.icon-btn .tb-count { font: 13px 'Bungee', Impact, sans-serif; color: var(--accent); }
.icon-btn .tb-count:empty { display: none; }
.icon-btn.hidden { display: none; }
.mode-hint.warn { color: #ffcfb8; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pop { from { opacity: 0; transform: skew(-8deg) scale(0.8); } to { opacity: 1; transform: skew(-8deg) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes glow { 0%, 100% { box-shadow: 0 7px 0 #b8691a, 0 12px 30px rgba(255,184,77,0.35); }
  50% { box-shadow: 0 7px 0 #b8691a, 0 12px 44px rgba(255,184,77,0.7); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
@media (prefers-reduced-motion: reduce) { .home *, .panel.show { animation: none !important; } }
/* Tall and narrow screens: stack in the middle, rocket shows below */
@media (max-aspect-ratio: 1/1) {
  .home-main { left: 50%; top: 13vh; transform: translateX(-50%); text-align: center; }
  .logo { align-items: center; }
  .logo-2 { padding-left: 0; }
  .logo-2::before { display: none; }
  .play { margin: 0 auto; }
  .home-bottom { left: 50%; transform: translateX(-50%); }
  .home-bottom { animation: none; }
}
/* Phones: the home buttons as a row of icons with small labels underneath, so all four fit */
@media (max-width: 520px) {
  .home-bottom { gap: 6px; width: calc(100% - 32px); justify-content: center; }
  .icon-btn { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 8px 4px 7px; font-size: 11px; border-radius: 12px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .icon-btn .tb-count { position: absolute; top: 5px; right: 8px; font-size: 11px; }
}
@media (pointer: coarse) { .key-hint { display: none; } }
@media (max-width: 600px) { .fs-label { display: none; } }
/* Short screens (phones held sideways): smaller logo and button, icons move to the right */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .home-main { top: 54%; }
  .logo { margin-bottom: 4px; }
  .logo-1, .logo-2 { font-size: 13vh; }
  .tagline { margin: 6px 0 10px; font-size: 11px; letter-spacing: 4px; }
  .mode { padding: 6px 14px; font-size: 13px; }
  .mode-hint { margin: 6px 0 8px; font-size: 12px; }
  .play { width: 220px; font-size: 26px; padding: 10px 0 8px; }
  .key-hint { display: none; }
  .home-bottom { left: auto; right: 16px; bottom: 12px; }
  .chip { padding: 6px 12px; font-size: 13px; }
}
h1 { font-size: 44px; margin: 8px 0 4px; letter-spacing: 1px; }
h2 { font-size: 22px; margin: 0 0 10px; }
.lead { color: var(--muted); margin: 0 0 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.card ul { margin: 8px 0 16px; padding-left: 18px; color: var(--muted); line-height: 1.5; }
.tag { display: inline-block; font-size: 12px; font-weight: bold; padding: 3px 8px; border-radius: 4px; margin-bottom: 8px; }
.tag.practice { background: rgba(255,184,77,0.15); color: var(--accent); }
.tag.nft { background: rgba(79,209,197,0.15); color: var(--accent2); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.status { color: var(--muted); font-size: 14px; white-space: pre-line; }
.status.err { color: var(--danger); }
.status.ok { color: var(--ok); }
.foot { color: var(--muted); font-size: 13px; margin-top: 20px; line-height: 1.5; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.tok { background: #070b16; border: 1px solid var(--line); border-radius: 10px; padding: 6px; color: var(--ink);
  font: 13px Arial, sans-serif; text-align: center; }
.tok img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #111; display: block; }
.tok.sel { border-color: var(--accent2); }
.chosen { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.chosen img { width: 180px; height: 180px; object-fit: cover; border-radius: 10px; background: #111; }
@media (max-width: 560px) { .chosen { grid-template-columns: 1fr; } }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: normal; }
.tablewrap { overflow-x: auto; }

/* Small screens: keep the HUD from overlapping */
@media (max-width: 600px) {
  #dist { top: 50px; font-size: 32px; }
  #score { top: 88px; font-size: 14px; }
  #modeBadge { font-size: 11px; padding: 5px 8px; }
  #dustBox { width: 170px; }
  #powerBar { top: 120px; }
  #msg { top: clamp(120px, 16vh, 160px); }
}
@media (max-height: 450px) {
  #msg { top: 70px; font-size: 16px; line-height: 1.3; }
  #msg .sub { font-size: 13px; margin-top: 3px; }
  #zoneBanner { top: 16%; font-size: 22px; }
}

#err { position: fixed; left: 8px; right: 8px; top: 8px; z-index: 99; display: none;
  background: #3a0d16; color: #ffd0d8; font: 14px/1.4 Arial, sans-serif; padding: 10px 12px;
  border: 1px solid #ff5a76; border-radius: 6px; white-space: pre-wrap; }

/* ---------- Leaderboard ---------- */
.lb { padding-bottom: 84px; }
.lb-wrap { max-width: 720px; margin: 2vh auto 0; padding: 0 16px; }
/* Ranks only: the panel itself doesn't scroll (the panel's blur makes it the frame for the YOU bar, so a scrolling
   panel would carry the bar along): the header stays on top, the YOU bar at the bottom, and only .lb-scroll scrolls.
   (Tickets, Demo and Quests share the .lb look but scroll as whole panels.) */
#lbPanel { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }   /* room for the YOU bar */
#lbPanel.show { display: flex; flex-direction: column; overflow: hidden; }
#lbPanel .lb-wrap { flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.lb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  margin: 0 -16px; padding: 14px 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lb-title { text-align: center; }
.lb-title h2 { margin: 0; font: 40px 'Bungee', Impact, sans-serif; letter-spacing: 2px; color: var(--ink); text-shadow: 0 3px 0 #000, 0 0 18px rgba(255,184,77,0.35); }
.lb-sub { font-size: 12px; letter-spacing: 3px; color: var(--accent2); font-weight: 700; }
.lb-status { text-align: center; color: var(--muted); margin: 14px 0; }
.lb-status.err { color: var(--danger); }
.lb-rule { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; }

/* Podium: 2nd, 1st, 3rd */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.pod { --medal: #cfd6e3; flex: 1 1 0; min-width: 0; max-width: 200px; text-align: center; background: rgba(13,19,34,0.92); border: 2px solid var(--medal);
  border-radius: 16px; padding: 14px 8px 12px; position: relative; animation: podIn 0.45s cubic-bezier(.2,1.3,.4,1) both; }
/* Each podium card glows in its medal colour, pulsing gently (gold strongest) */
.pod.r1 { --medal: #ffcf4d; --glow: rgba(255,207,77,0.7); padding-top: 22px; animation: podIn 0.45s cubic-bezier(.2,1.3,.4,1) 0.1s both, podGlow 2.4s ease-in-out 0.6s infinite; }
.pod.r2 { --medal: #cfd6e3; --glow: rgba(207,214,227,0.55); animation: podIn 0.45s cubic-bezier(.2,1.3,.4,1) both, podGlow 2.4s ease-in-out 0.5s infinite; }
.pod.r3 { --medal: #d08a4e; --glow: rgba(208,138,78,0.6); animation: podIn 0.45s cubic-bezier(.2,1.3,.4,1) 0.2s both, podGlow 2.4s ease-in-out 0.7s infinite; }
.pod { box-shadow: 0 0 22px var(--glow), inset 0 0 18px var(--glow); }
.pod .face { box-shadow: 0 0 16px var(--glow); }
.pod .medal { box-shadow: 0 2px 0 #000, 0 0 14px var(--glow); }
@keyframes podGlow { 0%, 100% { box-shadow: 0 0 18px var(--glow), inset 0 0 14px var(--glow); } 50% { box-shadow: 0 0 34px var(--glow), inset 0 0 22px var(--glow); } }
@media (prefers-reduced-motion: reduce) { .pod.r1, .pod.r2, .pod.r3 { animation: none; } }
.pod .medal { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%;
  background: var(--medal); color: #1a1205; font: 16px/32px 'Bungee', Impact, sans-serif; box-shadow: 0 2px 0 #000; }
.pod .face { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--medal); object-fit: cover; background: #0b1020; display: block; margin: 0 auto 8px; }
.pod.r1 .face { width: 96px; height: 96px; }
.pod .who { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .chog { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .big { font: 22px 'Bungee', Impact, sans-serif; color: var(--medal); margin-top: 6px; }
.pod.r1 .big { font-size: 26px; }
@keyframes podIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Rows 4+ */
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; background: rgba(13,19,34,0.92); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.lb-row .rk { width: 34px; text-align: center; font: 18px 'Bungee', Impact, sans-serif; color: var(--muted); }
.lb-row .face { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #0b1020; border: 2px solid var(--line); }
.lb-row .names { flex: 1; min-width: 0; }
.lb-row .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .chog { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .big { font: 20px 'Bungee', Impact, sans-serif; color: var(--ink); white-space: nowrap; }
.big small { font: 700 12px 'Chakra Petch', Arial, sans-serif; color: var(--muted); margin-left: 2px; }
.lb-entry.mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lb-row.skeleton { height: 60px; border-color: transparent; background: linear-gradient(90deg, rgba(13,19,34,0.9) 0%, rgba(38,50,74,0.9) 50%, rgba(13,19,34,0.9) 100%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* Empty board */
.lb-empty { text-align: center; padding: 34px 16px; background: rgba(13,19,34,0.92); border: 1px dashed var(--line); border-radius: 16px; }
.lb-empty .t { font: 24px 'Bungee', Impact, sans-serif; margin-bottom: 6px; }
.lb-empty p { color: var(--muted); margin: 0 0 16px; }

/* The player's own standing, always visible */
.lb-me { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(0,0,0,0.6); }
.lb-me .bar { width: 100%; max-width: 720px; display: flex; align-items: center; gap: 12px; }
.lb-me .you { font: 13px 'Bungee', Impact, sans-serif; color: #1a1205; background: var(--accent); border-radius: 6px; padding: 3px 8px; }
.lb-me .rk { font: 20px 'Bungee', Impact, sans-serif; color: var(--accent); min-width: 44px; text-align: center; }
.lb-me .face { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); background: #0b1020; }
.lb-me .names { flex: 1; min-width: 0; }
.lb-me .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-me .chog { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-me .hint { font-size: 12px; color: var(--muted); }
.lb-me .big { font: 20px 'Bungee', Impact, sans-serif; white-space: nowrap; }
.lb-me button { padding: 8px 12px; font-size: 13px; }
@media (max-width: 560px) {
  .lb-title h2 { font-size: 30px; }
  .podium { gap: 6px; }
  .pod { padding: 12px 4px 10px; border-radius: 12px; }
  .pod .who { font-size: 13px; }
  .pod .chog { font-size: 10px; }
  .pod .face { width: 56px; height: 56px; }
  .pod.r1 .face { width: 68px; height: 68px; }
  .pod .big { font-size: 16px; }
  .pod.r1 .big { font-size: 19px; }
  .lb-row { padding: 8px 10px; gap: 8px; }
  .lb-row .big, .lb-me .big { font-size: 16px; }
  #lbRefresh { display: none; }
}

/* ---------- Run card ---------- */
#endBar { text-align: center; margin-top: 14px; }
.again { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font: 26px 'Bungee', Impact, sans-serif;
  letter-spacing: 1px; padding: 16px 20px; border-radius: 16px; box-shadow: 0 5px 0 #8a5a12, 0 0 28px rgba(255,184,77,0.35); }
.again:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a5a12; }
.again svg { width: 28px; height: 28px; fill: none; stroke: #1a1205; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.end-row { display: flex; gap: 10px; margin-top: 10px; }
.end-sm { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; min-height: 44px;
  background: rgba(10,15,30,0.85); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.end-sm:hover { border-color: var(--accent2); }
.end-sm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.end-hint { margin-top: 8px; font-size: 12px; color: var(--muted); text-shadow: 0 1px 3px #000; }

.card-panel { background: rgba(5,7,13,0.88); z-index: 20; }
.card-wrap { max-width: 560px; margin: 3vh auto; padding: 0 16px; text-align: center; }
#cardImg { width: 100%; max-width: 520px; border-radius: 16px; border: 1px solid var(--line); display: block; margin: 0 auto 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6); background: #070b18; }
.card-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Touch screens: comfortable tap targets (at least 44px) */
@media (pointer: coarse) {
  .mode { min-height: 44px; }
  .chip-btn, .icon-btn, .panel button, #hudMenuBtn, #hudFsBtn, .card-actions button, .lb-me button, .career-pill, .dcareer { min-height: 44px; }
  .dcareer { display: inline-flex; align-items: center; }
  #hudFsBtn { min-width: 44px; }
}
.card-formats { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(10,15,30,0.8); border: 1px solid var(--line); margin-bottom: 12px; }
.card-formats .mode { font-size: 13px; padding: 8px 16px; }
#cardImg.square { aspect-ratio: 1; }
#cardImg.wide { aspect-ratio: 16 / 9; max-width: 640px; }
.card-wrap { max-width: 680px; }
.x-btn { display: inline-flex; align-items: center; gap: 8px; background: #f4f1e8; border-color: #f4f1e8; color: #0b0f1c; }
.x-btn svg { width: 16px; height: 16px; fill: #0b0f1c; }

/* Home screen helper lines (tagline, mode hint, key hint): each sits on its own small dark, softly
   blurred backing with brighter text, so it reads over bright nebula without darkening the scene. */
.tagline, .mode-hint, .key-hint {
  display: table; width: auto; max-width: 100%; box-sizing: border-box;
  padding: 5px 12px; border-radius: 14px;
  background: rgba(5, 8, 18, 0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #e3e7f0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.tagline { color: #f1ede2; }
.mode-hint:empty { display: none; }
@media (max-aspect-ratio: 1/1) {
  .tagline, .mode-hint, .key-hint { margin-left: auto; margin-right: auto; }
}
/* Keep the key hint hidden where it was before (touch screens, short landscape screens) */
@media (pointer: coarse) { .key-hint { display: none; } }
@media (max-height: 500px) and (min-aspect-ratio: 1/1) { .key-hint { display: none; } }

/* ---------- Practice / Chog NFT switch: animated ---------- */
/* A pill slides behind the chosen mode (like a segmented control) */
.mode-switch { position: relative; }
.mode-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); z-index: 0; pointer-events: none;
  transition: transform 0.38s cubic-bezier(.3,1.25,.5,1), width 0.38s cubic-bezier(.3,1.25,.5,1); }
.mode-switch .mode { position: relative; z-index: 1; transition: color 0.25s ease; }
.mode-switch .mode.on { background: transparent; color: #0b0f1c; }
.mode-switch.no-anim .mode-pill { transition: none; }
/* The hint keeps the same height whatever its text, so switching never moves PLAY */
.mode-hint-slot { display: flex; align-items: center; min-height: 52px; margin: 6px 0 10px; }
.mode-hint-slot .mode-hint { margin: 0; }
@media (max-aspect-ratio: 1/1) { .mode-hint-slot { justify-content: center; } }
@media (max-height: 500px) and (min-aspect-ratio: 1/1) { .mode-hint-slot { min-height: 30px; margin: 2px 0 6px; } }
/* PLAY and PICK CHOG: same button size in both modes; only the label changes */
.play { height: 78px; padding: 0; display: flex; align-items: center; justify-content: center; }
.play-label { display: inline-block; white-space: nowrap; transition: font-size 0.2s ease; }
.play.pick .play-label { font-size: 0.78em; }
@media (max-height: 500px) and (min-aspect-ratio: 1/1) { .play { height: 48px; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .mode-pill, .play-label { transition: none; } }

/* ---------- How to play: swipeable pages ---------- */
.how .how-wrap { max-width: 760px; margin: 3vh auto; padding: 18px 16px; background: rgba(10,15,30,0.92); border: 1px solid var(--line); border-radius: 18px; }
.how-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.how-head h2 { margin: 0; font: 26px 'Bungee', Impact, sans-serif; letter-spacing: 1px; }
.how-step { color: var(--muted); font-weight: 700; min-width: 54px; text-align: right; }
.how-viewport { overflow: hidden; touch-action: pan-y; }
.how-track { display: flex; transition: transform 0.38s cubic-bezier(.3,1.1,.5,1); }
.how-page { flex: 0 0 100%; min-width: 0; padding: 8px 4px 4px; min-height: 360px; box-sizing: border-box; }
.how-kicker { font: 14px 'Bungee', Impact, sans-serif; letter-spacing: 3px; color: var(--accent2); margin-bottom: 12px; text-align: center; }
.how-visual { display: flex; justify-content: center; align-items: center; min-height: 150px; margin-bottom: 12px; }
.how-points { list-style: none; padding: 0; margin: 0 auto; max-width: 560px; display: grid; gap: 10px; }
.how-points li { background: rgba(13,19,34,0.9); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; color: var(--muted); line-height: 1.45; }
.how-points b, .how-modes b { color: var(--ink); }
.how-note { text-align: center; color: var(--muted); font-size: 13px; margin: 14px auto 0; max-width: 560px; }
/* Controls */
.ctl-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.ctl-keys { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ctl-keys > div { display: flex; gap: 6px; }
.ctl-or { color: var(--muted); font-weight: 700; }
.keycap { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 8px;
  background: linear-gradient(#f4f1e8, #d8d3c6); color: #151515; font: 700 15px 'Chakra Petch', Arial, sans-serif; box-shadow: 0 3px 0 #8d8778; vertical-align: middle; }
.how-points .keycap { min-width: 28px; height: 26px; font-size: 12px; box-shadow: 0 2px 0 #8d8778; margin: 0 2px; }
.keycap.wide { min-width: 70px; }
.how-mouse { width: 46px; height: 70px; fill: none; stroke: var(--ink); stroke-width: 3; }
.how-mouse .wheel { fill: var(--accent); stroke: none; animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.ctl-touch { width: 150px; height: 150px; }
.how-finger { width: 100%; height: 100%; }
.how-finger .trail { fill: none; stroke: var(--accent2); stroke-width: 4; stroke-dasharray: 6 7; stroke-linecap: round; }
.how-finger .arrow { fill: none; stroke: var(--accent2); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.how-finger .touch { fill: rgba(255,184,77,0.25); stroke: var(--accent); stroke-width: 3; animation: drag 2s ease-in-out infinite; }
.how-finger .touch-dot { fill: var(--accent); animation: drag 2s ease-in-out infinite; }
@keyframes drag { 0%, 10% { transform: translate(0, 0); } 60%, 100% { transform: translate(60px, -48px); } }
.how-scene { width: min(360px, 100%); height: auto; }
/* Pickups */
.how-pickups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pk { display: flex; align-items: center; gap: 12px; background: rgba(13,19,34,0.9); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.pk-ic { width: 52px; height: 52px; flex: 0 0 52px; animation: bob 2.4s ease-in-out infinite; }
.pk:nth-child(2n) .pk-ic { animation-delay: -1.2s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pk-n { font: 14px 'Bungee', Impact, sans-serif; letter-spacing: 1px; }
.pk-d { color: var(--muted); font-size: 13px; line-height: 1.35; }
/* Zones */
.how-zones { display: grid; gap: 0; max-width: 520px; margin: 0 auto; position: relative; }
.zn { display: flex; gap: 14px; align-items: flex-start; position: relative; padding-bottom: 14px; }
.zn:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 3px; background: linear-gradient(var(--zc), rgba(255,255,255,0.12)); }
.zn-dot { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--zc); color: #0b0f1c; font: 16px/36px 'Bungee', Impact, sans-serif; text-align: center; box-shadow: 0 0 14px var(--zc); }
.zn-n { font-weight: 700; color: var(--ink); }
.zn-t { color: var(--zc); font-size: 13px; margin-left: 6px; }
.zn-d { color: var(--muted); font-size: 13px; }
/* Modes */
.how-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.md { background: rgba(13,19,34,0.9); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
.md-nft { border-color: rgba(79,209,197,0.55); }
.md-face { width: 72px; height: 72px; border-radius: 50%; display: block; margin: 0 auto 6px; background: #0b1020; object-fit: cover; }
.md-chog { display: flex; align-items: center; justify-content: center; font: 16px 'Bungee', Impact, sans-serif; color: #0b0f1c; background: var(--accent2); }
.md-n { font: 18px 'Bungee', Impact, sans-serif; margin-bottom: 6px; }
.md ul { list-style: none; padding: 0; margin: 0; text-align: left; display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.md li::before { content: "·"; color: var(--accent); font-weight: 700; margin-right: 6px; }
.tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; justify-content: center; }
.tier-chip { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; border: 1px solid currentColor; }
.t-common { color: #cfd6e3; } .t-uncommon { color: #6ee7a8; } .t-rare { color: #4fa8ff; } .t-epic { color: #c084fc; } .t-legendary { color: #ffcf4d; }
/* Navigation */
.how-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.how-nav > button { min-width: 96px; }
.how-dots { display: flex; gap: 8px; }
.how-dots .how-dot { width: 10px; height: 10px; min-width: 0; min-height: 0; padding: 0; flex: 0 0 auto; border-radius: 50%; border: 0; background: rgba(255,255,255,0.25); transition: width 0.25s, background 0.25s; }
.how-dots .how-dot.on { width: 26px; border-radius: 6px; background: var(--accent); }
@media (pointer: coarse) { .how-dots .how-dot { min-height: 10px; } .how-dots { padding: 12px 0; } }
#howNext.how-play { font: 18px 'Bungee', Impact, sans-serif; letter-spacing: 1px; box-shadow: 0 4px 0 #8a5a12; }
@media (max-width: 560px) { .how-head h2 { font-size: 20px; } .how-page { min-height: 0; }
  .how-nav { gap: 8px; } .how-nav > button { min-width: 0; padding-left: 16px; padding-right: 16px; } .how-dots { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .how-track { transition: none; } .pk-ic, .how-finger .touch, .how-finger .touch-dot, .how-mouse .wheel { animation: none; } }
.md-chog img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Sound on/off */
.mute-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mute-btn .off { display: none; }
body.muted .mute-btn .on { display: none; }
body.muted .mute-btn .off { display: inline; }
/* Sound panel: opens from the speaker buttons, with a switch for music and one for sound effects */
.sound-panel { position: fixed; z-index: 30; display: none; width: 230px; padding: 12px 14px; border-radius: 14px;
  background: rgba(13,19,34,0.97); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.sound-panel.show { display: block; animation: spIn 0.18s ease-out both; }
@keyframes spIn { from { opacity: 0; transform: translateY(-6px); } }
.sp-title { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--muted); margin-bottom: 6px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-weight: 700; font-size: 14px; }
.sp-hint { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sp-hint b { color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.sw { position: relative; flex: none; width: 46px; height: 26px; padding: 0; border-radius: 999px;
  background: #1a2236; border: 1px solid var(--line); transition: background 0.2s, border-color 0.2s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted);
  transition: transform 0.2s, background 0.2s; }
.sw[aria-checked="true"] { background: rgba(79,209,197,0.25); border-color: var(--accent2); }
.sw[aria-checked="true"] i { transform: translateX(20px); background: var(--accent2); }
@media (pointer: coarse) { .sp-hint { display: none; } .sp-row { padding: 10px 0; } .sw { width: 52px; height: 30px; } .sw i { width: 22px; height: 22px; } .sw[aria-checked="true"] i { transform: translateX(22px); } }
@media (prefers-reduced-motion: reduce) { .sound-panel.show { animation: none; } .sw, .sw i { transition: none; } }
#hudMuteBtn { position: absolute; right: 64px; top: 52px; pointer-events: auto; padding: 6px 8px; line-height: 0; }
body.flying #hudMuteBtn { display: none; }
@media (pointer: coarse) { #hudMuteBtn { min-width: 44px; min-height: 44px; } }

/* ---------- Quests ---------- */
.icon-btn { position: relative; }
.new-dot { display: none; position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.icon-btn.has-new .new-dot { display: block; }
.quests { padding-bottom: 24px; }

/* Badges: the frame's shape and metal show the tier, the glyph's colour the quest's difficulty */
.qbadge { --c: #888; --m: #3a4560; flex: none; display: inline-block; width: 48px; height: 48px; }
.qbadge svg { width: 100%; height: 100%; overflow: visible; display: block; }
.qbadge .fr { fill: #0b1020; stroke: color-mix(in srgb, var(--c) 30%, #2a3348); stroke-width: 2; stroke-dasharray: 4 3; }
.qbadge .gl { fill: none; stroke: color-mix(in srgb, var(--c) 38%, #3a4560); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qbadge.on .fr { fill: color-mix(in srgb, var(--c) 16%, #0b1020); stroke: var(--m); stroke-width: 3; stroke-dasharray: none; }
.qbadge.on .gl { stroke: var(--c); stroke-width: 2.2; }
.qbadge.on svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); }
.qbadge.t-platinum svg { animation: platGlow 2.4s ease-in-out infinite; }
@keyframes platGlow { 50% { filter: drop-shadow(0 0 12px var(--m)) drop-shadow(0 0 4px var(--c)); } }
.qbadge.mini { width: 30px; height: 30px; }
.qbadge.big { width: 132px; height: 132px; }
@media (prefers-reduced-motion: reduce) { .qbadge.t-platinum svg { animation: none; } }

.qstreak { background: rgba(13,19,34,0.92); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; }
.qstreak.on { border-color: #ff7a3d; box-shadow: 0 0 18px rgba(255,122,61,0.25); }
.qs-top { display: flex; align-items: center; gap: 14px; }
.qs-mid { flex: 1; min-width: 0; }
.qs-n { font: 20px 'Bungee', Impact, sans-serif; }
.qs-d { font-size: 13px; color: var(--muted); }
.qs-today { font: 24px 'Bungee', Impact, sans-serif; color: var(--accent); text-align: center; line-height: 1; }
.qs-today span { display: block; font: 700 10px 'Chakra Petch', Arial, sans-serif; letter-spacing: 2px; color: var(--muted); margin-top: 4px; }
.qhead { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 2px 8px; font: 15px 'Bungee', Impact, sans-serif; letter-spacing: 2px; color: var(--accent2); }
.qreset { font: 700 12px 'Chakra Petch', Arial, sans-serif; letter-spacing: 1px; color: var(--muted); }
.qcard { --c: #888; display: flex; align-items: center; gap: 14px; background: rgba(13,19,34,0.92); border: 1px solid var(--line);
  border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.qcard.done { border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 30%, transparent); }
.qmain { flex: 1; min-width: 0; }
.qtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qtitle { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qdiff { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--c); border: 1px solid var(--c); border-radius: 999px; padding: 2px 8px; }
.qdesc { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.qbar { height: 8px; border-radius: 999px; background: #1a2338; overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--c); border-radius: 999px; transition: width 0.6s ease-out; }
.qprog { font-size: 12px; color: var(--ink); margin-top: 5px; font-weight: 700; }
.qcard.done .qprog { color: var(--c); }
.qtiers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 2px 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.qtiers span:not(.qbadge) { margin-right: 8px; }
.qtiers .qbadge.mini { width: 24px; height: 24px; }
.qbadges { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px 8px; background: rgba(13,19,34,0.92);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px; }
.qb { position: relative; background: transparent; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; min-height: 0; }
.qb .qbadge { width: 52px; height: 52px; transition: transform 0.15s; }
.qb:hover .qbadge { transform: scale(1.08); }
.qpin { position: absolute; top: -4px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.qpin svg { width: 12px; height: 12px; fill: none; stroke: #1a1205; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qbinfo { font-size: 13px; color: var(--muted); text-align: center; margin: 10px 0 0; min-height: 18px; }
.qi-top { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: rgba(13,19,34,0.92); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.qi-top .qbadge { width: 56px; height: 56px; }
.qi-top b { color: var(--ink); font-size: 15px; }
.qi-tier { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--m); border: 1px solid var(--m); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.qi-lock { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.qi-d { margin-top: 3px; }
.qi-r { margin-top: 5px; color: var(--accent2); font-weight: 700; }
.qi-pin { margin-top: 10px; }
.q-locked svg { width: 40px; height: 40px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.lb-badges { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 12px; color: var(--accent); vertical-align: 1px; }
.lb-badges svg { width: 12px; height: 12px; fill: var(--accent); stroke: none; }
.who .lb-pin { width: 22px; height: 22px; margin-left: 6px; vertical-align: -5px; }

/* Today's quests on the ready and crash screens */
#questStrip { position: absolute; left: 16px; top: 128px; width: 230px; display: none; background: rgba(10,15,30,0.82); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 12px; pointer-events: none; }
#questStrip.show { display: block; animation: fadeIn 0.3s ease-out; }
.qs-h { font: 12px 'Bungee', Impact, sans-serif; letter-spacing: 1.5px; color: var(--accent2); margin-bottom: 6px; display: flex; justify-content: space-between; }
.qs-h b { color: var(--accent); font-weight: normal; }
.qs-row { --c: #888; display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.qs-txt { flex: 1; min-width: 0; }
.qs-t { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-row .qbar { height: 5px; margin: 3px 0 2px; }
.qs-p { font-size: 11px; color: var(--muted); font-weight: 700; }
.qs-row.done .qs-p { color: var(--c); }
@media (max-width: 760px), (max-height: 520px) {
  #questStrip { top: auto; bottom: 86px; left: 10px; width: auto; padding: 6px 8px; }
  #questStrip .qs-h { display: none; }
  #questStrip .qs-txt { display: none; }
  #questStrip .qs-row { padding: 2px 0; }
}
body.flying #questStrip { display: none; }

/* In-run "Quest complete" */
#questToast { --c: var(--ok); position: absolute; top: 92px; left: 50%; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px;
  background: rgba(10,15,30,0.88); border: 2px solid var(--c); border-radius: 14px; box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent);
  opacity: 0; transform: translate(-50%, -12px); pointer-events: none; white-space: nowrap; }
#questToast.show { animation: qToast 2.8s ease-out forwards; }
@keyframes qToast { 0% { opacity: 0; transform: translate(-50%, -12px) scale(0.9); } 8% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
  14% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
.qt-k { font: 11px 'Bungee', Impact, sans-serif; letter-spacing: 2px; color: var(--c); }
.qt-n { font-weight: 700; font-size: 16px; color: var(--ink); }

/* Badge reveal after a run */
#badgeReveal { --c: #fff; --m: #fff; position: fixed; right: 16px; top: 190px; width: 260px; display: none; flex-direction: column;
  align-items: center; text-align: center; pointer-events: none; z-index: 6; }
#badgeReveal.show { display: flex; animation: brIn 2.6s ease-out forwards; }
#badgeReveal .qbadge.big { animation: brPop 0.6s cubic-bezier(.2,1.5,.4,1) both; }
#badgeReveal .qbadge.big svg { filter: drop-shadow(0 0 18px var(--c)) drop-shadow(0 0 6px var(--m)); }
.br-ring { position: absolute; top: 66px; left: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; border: 3px solid var(--m);
  animation: brRing 0.9s ease-out 0.15s both; }
.br-k { margin-top: 10px; font: 14px 'Bungee', Impact, sans-serif; letter-spacing: 3px; color: var(--m); text-shadow: 0 2px 6px #000; }
.br-n { font: 24px 'Bungee', Impact, sans-serif; color: var(--ink); text-shadow: 0 3px 0 #000, 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); }
@keyframes brIn { 0% { opacity: 0; } 6% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes brPop { 0% { transform: scale(0.2) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes brRing { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@media (max-width: 760px), (max-height: 520px) {
  #badgeReveal { right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  #badgeReveal .qbadge.big, .br-ring { width: 96px; height: 96px; }
  .br-ring { top: 48px; margin: -48px 0 0 -48px; }
}
@media (prefers-reduced-motion: reduce) { #badgeReveal .qbadge.big, .br-ring { animation: none; } .br-ring { display: none; } }

@media (max-width: 520px) {
  .qcard { gap: 10px; padding: 10px; }
  .qcard .qbadge { width: 42px; height: 42px; }
  .qtitle { font-size: 14px; }
  .qbadges { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
  .qb .qbadge { width: 46px; height: 46px; }
  .qbadge.big { width: 108px; height: 108px; }
}

/* Laser shot: a quick red glow at the screen edges */
#laserFlash { position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(255,50,50,0.45) 100%); }
#laserFlash.on { animation: laserEdge 0.32s ease-out; }
@keyframes laserEdge { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #laserFlash.on { animation-duration: 0.15s; } }

/* "NEW BEST!" when a run passes your best */
#newBest { position: absolute; top: 33%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; white-space: nowrap; }
#newBest.show { animation: nbPop 2.6s ease-out forwards; }
.nb-t { font: clamp(34px, 6vw, 60px) 'Bungee', Impact, sans-serif; color: #ffcf4d; letter-spacing: 2px;
  text-shadow: 0 4px 0 #8a5a12, 0 0 24px rgba(255,207,77,0.8), 0 0 60px rgba(255,160,40,0.5); }
.nb-s { margin-top: 4px; font-weight: 700; font-size: 16px; letter-spacing: 1px; color: var(--ink); text-shadow: 0 2px 6px #000; }
@keyframes nbPop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.3) rotate(-6deg); }
  10% { opacity: 1; transform: translateX(-50%) scale(1.18) rotate(2deg); }
  18% { transform: translateX(-50%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) { #newBest.show { animation: nbFade 2.6s linear forwards; } @keyframes nbFade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } }

/* Streak lives */
.lives .bank { color: #ff9a5a; font-weight: 700; }
.qs-req { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.qr { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 10px;
  background: #0b1020; border: 1px solid #1d2740; font-size: 13px; color: var(--muted); }
.qr b { color: var(--ink); }
.qr.ok { border-color: rgba(110,231,168,0.6); }
.qr.ok b { color: var(--ok); }
.qr i { position: absolute; left: 0; bottom: 0; height: 3px; background: #ff7a3d; }
.qr.ok i { background: var(--ok); }
.qs-badge-next { margin-top: 8px; }
.qs-streak { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--muted); }
.qs-streak svg { width: 14px; height: 14px; fill: none; stroke: #ff7a3d; stroke-width: 2; stroke-linejoin: round; }
.qs-streak.done { color: #ff9a5a; }
.qs-streak.done svg { fill: #ff7a3d; }
@media (max-width: 760px), (max-height: 520px) { #questStrip .qs-streak { display: none; } }
@media (max-width: 520px) { .qs-req { grid-template-columns: 1fr; } }

/* Streak card: hero flame, road to the next streak lives, banked hearts */
.qs-hero { display: flex; align-items: center; gap: 14px; }
.sflame { flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
.sflame svg { width: 100%; height: 100%; overflow: visible; }
.sflame .fo { fill: #ff7a3d; filter: drop-shadow(0 0 10px rgba(255,122,61,0.7)); transform-origin: 50% 90%; animation: flick 1.6s ease-in-out infinite; }
.sflame .fi { fill: #ffd27a; transform-origin: 50% 90%; animation: flick 1.1s ease-in-out infinite reverse; }
.sflame.f1 svg { transform: scale(0.8); }
.sflame.f2 svg { transform: scale(1); }
.sflame.f3 .fo { fill: #ff4d2e; filter: drop-shadow(0 0 14px rgba(255,77,46,0.85)); }
.sflame.f3 .fi { fill: #ffe066; }
.sflame.f4 .fo { fill: #3fb6ff; filter: drop-shadow(0 0 16px rgba(63,182,255,0.9)); }
.sflame.f4 .fi { fill: #d9f3ff; }
.sflame.f3 svg, .sflame.f4 svg { transform: scale(1.12); }
.sflame.risk .fo, .sflame.f0 .fo { fill: #3a4560; filter: none; animation: none; }
.sflame.risk .fi, .sflame.f0 .fi { fill: #59647e; animation: none; }
@keyframes flick { 50% { transform: scaleY(1.06) scaleX(0.96); } }
.qs-big { font: 40px 'Bungee', Impact, sans-serif; line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.qs-big span { font: 13px 'Bungee', Impact, sans-serif; letter-spacing: 2px; color: var(--accent); }
.qstreak.at-risk { border-color: rgba(255,107,107,0.7); box-shadow: 0 0 18px rgba(255,107,107,0.2); }
.qstreak.at-risk .qs-d b { color: #ff8a8a; }
.qs-best { flex: none; text-align: center; line-height: 1.1; padding-left: 12px; border-left: 1px solid var(--line); }
.qs-best b { display: block; font: 24px 'Bungee', Impact, sans-serif; color: var(--ink); }
.qs-best span { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--muted); }
.road { display: grid; grid-template-columns: repeat(6, 1fr) 1.35fr; gap: 6px; margin-top: 12px; align-items: stretch; }
.rd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 0 6px; border-radius: 10px;
  background: #0b1020; border: 1px solid #1d2740; }
.rd svg { width: 22px; height: 22px; fill: none; stroke: #2e3a55; stroke-width: 2; stroke-linejoin: round; }
.rd-d { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.rd.lit { background: rgba(255,122,61,0.14); border-color: rgba(255,122,61,0.6); }
.rd.lit svg { fill: #ff7a3d; stroke: #ffb27a; filter: drop-shadow(0 0 6px rgba(255,122,61,0.8)); }
.rd.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.rd.today:not(.lit) { animation: todayPulse 1.6s ease-in-out infinite; }
.rd.today .rd-d { color: var(--accent); }
@keyframes todayPulse { 50% { box-shadow: 0 0 14px rgba(255,184,77,0.55); } }
.rd.reward { background: rgba(255,90,110,0.08); border: 1px dashed rgba(255,110,130,0.6); }
.rd.reward.lit { border-style: solid; background: rgba(255,90,110,0.2); }
.rd-gift { display: flex; align-items: center; gap: 2px; }
.rd-gift svg { width: 24px; height: 24px; fill: #ff5d73; stroke: none; filter: drop-shadow(0 0 6px rgba(255,93,115,0.7)); }
.rd.reward:not(.lit) .rd-gift svg { animation: heartBeat 1.4s ease-in-out infinite; }
.rd-gift b { font: 16px 'Bungee', Impact, sans-serif; color: #ff8a9a; }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.qs-lives { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,93,115,0.07); border: 1px solid rgba(255,93,115,0.3); }
.ql-h { font: 12px 'Bungee', Impact, sans-serif; letter-spacing: 1.5px; color: #ff8a9a; }
.ql-none { font-size: 13px; color: var(--muted); }
.ql-next { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ql-next svg { width: 15px; height: 15px; fill: #ff5d73; stroke: none; }
.ql-next b { color: #ff8a9a; }
.hearts { display: inline-flex; align-items: center; gap: 3px; }
.hearts svg { width: 20px; height: 20px; fill: #ff5d73; stroke: none; filter: drop-shadow(0 0 4px rgba(255,93,115,0.6)); }
.hearts .hx { font: 14px 'Bungee', Impact, sans-serif; color: #ff8a9a; margin-left: 2px; }
.qs-streak.risk { color: #ff8a8a; }
.br-heart { position: relative; width: 132px; height: 132px; display: grid; place-items: center; animation: brPop 0.6s cubic-bezier(.2,1.5,.4,1) both; }
.br-heart svg { width: 100%; height: 100%; fill: #ff5d73; filter: drop-shadow(0 0 22px rgba(255,93,115,0.9)); }
.br-heart b { position: absolute; font: 34px 'Bungee', Impact, sans-serif; color: #fff; text-shadow: 0 3px 0 #9b1c2e; }
@media (prefers-reduced-motion: reduce) { .sflame .fo, .sflame .fi, .rd.today, .rd-gift svg { animation: none !important; } }
@media (max-width: 520px) {
  .sflame { width: 52px; height: 52px; }
  .qs-big { font-size: 32px; }
  .road { gap: 4px; grid-template-columns: repeat(6, 1fr) 1.4fr; }
  .rd svg { width: 18px; height: 18px; }
  .rd-d { font-size: 8px; letter-spacing: 0; }
  .ql-next { margin-left: 0; }
  .br-heart { width: 96px; height: 96px; }
}

/* How to play, page 6: a sample streak */
.how-streak { display: block; max-width: 560px; margin: 0 auto; }
/* How to play, page 7: ticket -> pool -> top 10, and the top 10 shares as bars */
.how-tk { flex-direction: column; gap: 14px; }
.tk-flow { display: flex; align-items: stretch; justify-content: center; gap: 8px; width: 100%; max-width: 560px; }
.tk-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px; border-radius: 12px; text-align: center;
  background: rgba(13,19,34,0.9); border: 1px solid rgba(255,184,77,0.45); }
.tk-step svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.tk-step b { font: 18px 'Bungee', Impact, sans-serif; color: var(--accent); }
.tk-step span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.tk-arrow { align-self: center; width: 14px; height: 14px; flex: none; border-top: 2px solid var(--accent2); border-right: 2px solid var(--accent2); transform: rotate(45deg); }
.tk-split { display: flex; align-items: flex-end; justify-content: center; gap: 6px; width: 100%; max-width: 560px; }
.tk-bar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.tk-bar i { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), #c97a1c); }
.tk-bar:nth-child(n+4) i { background: linear-gradient(180deg, var(--accent2), #2a8f86); }
.tk-pc { font-size: 11px; font-weight: 700; color: var(--ink); }
.tk-rk { font-size: 11px; color: var(--muted); }
@media (max-width: 520px) { .tk-step b { font-size: 15px; } .tk-step span { font-size: 11px; } .tk-flow { gap: 5px; } .tk-split { gap: 3px; } .tk-pc { font-size: 10px; } }
.hs-top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.how-streak .sflame { width: 48px; height: 48px; }
.how-streak .qs-big { font-size: 30px; }
.how-streak .road { margin-top: 8px; }

/* Demo mode */
.demo-tag { display: inline-block; font: 13px 'Bungee', Impact, sans-serif; letter-spacing: 2px; color: var(--accent2); border: 2px solid var(--accent2);
  border-radius: 8px; padding: 3px 10px; transform: rotate(-4deg); box-shadow: 0 0 12px rgba(79,209,197,0.35); }
.demo-intro { color: var(--muted); text-align: center; font-size: 14px; max-width: 620px; margin: 0 auto 14px; }
.demo-intro b { color: var(--ink); }
.demo .lb-wrap { max-width: 1100px; }
.demo-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1000px) { .demo-list { grid-template-columns: repeat(3, 1fr); } }
.demo-card { --tc: var(--line); display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; border-radius: 14px; cursor: pointer;
  background: rgba(13,19,34,0.95); border: 2px solid var(--tc); color: var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.demo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 18px color-mix(in srgb, var(--tc) 45%, transparent); }
.demo-card.sel { box-shadow: 0 0 0 2px var(--accent), 0 0 20px rgba(255,184,77,0.4); }
.demo-card.t-common { --tc: #8a94a8; }
.demo-card.t-uncommon { --tc: #6ee7a8; }
.demo-card.t-rare { --tc: #4fa8ff; }
.demo-card.t-epic { --tc: #b6ff3a; }
.demo-card.t-legendary { --tc: #ffcf4d; }
.dimg { position: relative; aspect-ratio: 1; overflow: hidden; background: #0b1020; display: grid; place-items: center; }
.dimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dload { font-size: 12px; color: var(--muted); }
.dbody { position: relative; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dname { font: 18px 'Bungee', Impact, sans-serif; }
.dtier { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--tc); text-transform: uppercase; }
.dchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.dchip { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; border: 1px solid; }
.dchip.laser { color: #ff8a8a; border-color: rgba(255,107,107,0.6); background: rgba(255,107,107,0.08); }
.dchip.trail { color: #ffcf4d; border-color: rgba(255,207,77,0.5); background: rgba(255,207,77,0.08); }
.dchip.rocket { color: var(--accent2); border-color: rgba(79,209,197,0.5); background: rgba(79,209,197,0.08); }
.dblurb { font-size: 12px; color: var(--muted); margin-top: 2px; margin-bottom: 8px; }   /* FLY sits at the bottom, level on every card */
.dfly { align-self: flex-start; margin-top: auto; font: 14px 'Bungee', Impact, sans-serif; letter-spacing: 1px; color: #1a1205; background: var(--accent);
  border-radius: 8px; padding: 6px 14px; box-shadow: 0 3px 0 #b8691a; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent2); text-decoration: underline; font: inherit; cursor: pointer; min-height: 0; }
.demo-note { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.demo-note .demo-tag { font-size: 11px; padding: 2px 8px; }
@media (max-width: 520px) { .demo-list { grid-template-columns: 1fr 1fr; gap: 8px; } .dname { font-size: 15px; } .dblurb { display: none; } }
.how-demo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 0; font-size: 13px; color: var(--muted); text-align: left; }
.how-demo .demo-tag { flex: none; font-size: 11px; padding: 2px 8px; }
.how-demo b { color: var(--ink); }
.lb-tabs { display: flex; width: max-content; margin: -6px auto 18px; }
.lb-tabs .mode { padding: 8px 18px; }
.lb-tabs.mode-switch .mode.on { background: var(--ink); color: #0b0f1c; }   /* no sliding pill here, so the chosen tab fills itself */
.demo-board .lb-title h2 { text-shadow: 0 3px 0 #000, 0 0 18px rgba(79,209,197,0.45); }
.demo-board .lb-sub { color: var(--accent2); }
.demo-board #lbTabDemo.on { background: var(--accent2); color: #062320; }
.demo-account { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 auto 14px; max-width: 760px; padding: 10px 14px;
  border-radius: 12px; border: 1px dashed rgba(79,209,197,0.5); background: rgba(79,209,197,0.06); font-size: 13px; color: var(--muted); text-align: center; }
.demo-account b { color: var(--ink); }
.demo-account.ok { border-style: solid; }
.demo-account button { padding: 7px 14px; font-size: 13px; }

/* ---------- Game over ---------- */
#gameOver { --tc: var(--accent); position: fixed; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center;
  padding: 12px 16px; overflow-y: auto; pointer-events: none; background: radial-gradient(ellipse at center, rgba(5,7,13,0.55), rgba(5,7,13,0.15) 70%); }
#gameOver.show { display: flex; animation: fadeIn 0.3s ease-out; }
.go-card { position: relative; isolation: isolate; pointer-events: auto; width: min(480px, 100%); margin: auto; padding: 18px 20px 16px; border-radius: 20px; text-align: center;
  background: rgba(10,15,30,0.95); border: 2px solid color-mix(in srgb, var(--tc) 55%, var(--line));
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 26px color-mix(in srgb, var(--tc) 35%, transparent), 0 0 0 1px rgba(255,255,255,0.03) inset;
  animation: goIn 0.5s cubic-bezier(.2,1.25,.4,1) both, goBreathe 3.6s ease-in-out 0.8s infinite; }
/* The card breathes a soft glow in the tier colour */
@keyframes goBreathe {
  50% { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 46px color-mix(in srgb, var(--tc) 55%, transparent), 0 0 0 1px rgba(255,255,255,0.03) inset; }
}
/* A thin light travelling slowly around the edge */
.go-card::before { content: ""; position: absolute; inset: -2px; border-radius: 20px; padding: 2px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--go-a, 0deg), transparent 0 72%, color-mix(in srgb, var(--tc) 90%, #fff) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: goSweep 6s linear infinite; opacity: 0.85; }
@property --go-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes goSweep { to { --go-a: 360deg; } }
/* Faint stars drifting inside the card */
.go-stars { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 78% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 36% 68%, #fff, transparent), radial-gradient(1px 1px at 88% 58%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 58% 36%, color-mix(in srgb, var(--tc) 80%, #fff), transparent), radial-gradient(1px 1px at 22% 88%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 84%, color-mix(in srgb, var(--tc) 80%, #fff), transparent), radial-gradient(1px 1px at 46% 8%, #fff, transparent);
  background-size: 100% 200%; animation: goStars 22s linear infinite; }
@keyframes goStars { from { background-position: 0 0; } to { background-position: 0 -100%; } }
/* Sections float in one after another */
#gameOver.show .go-title, #gameOver.show .go-mode, #gameOver.show .go-hero, #gameOver.show .go-best, #gameOver.show .go-tile,
#gameOver.show .go-rank, #gameOver.show .go-notes, #gameOver.show .go-quests, #gameOver.show #endBar { animation: goUp 0.5s cubic-bezier(.2,1,.4,1) both; }
#gameOver.show .go-mode { animation-delay: 0.12s; }
#gameOver.show .go-hero { animation-delay: 0.18s; }
#gameOver.show .go-best { animation-delay: 0.3s; }
#gameOver.show .go-tile { animation-delay: calc(0.38s + var(--i, 0) * 0.07s); }
#gameOver.show .go-rank { animation-delay: 0.7s; }
#gameOver.show .go-notes { animation-delay: 0.76s; }
#gameOver.show .go-quests { animation-delay: 0.82s; }
#gameOver.show #endBar { animation-delay: 0.9s; }
@keyframes goUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* The total pops when its count lands */
.go-total.landed { animation: goPop 0.45s cubic-bezier(.2,1.6,.4,1); }
@keyframes goPop { 40% { transform: scale(1.1); text-shadow: 0 4px 0 #8a5a12, 0 0 26px color-mix(in srgb, var(--tc) 80%, transparent); } }
/* PLAY AGAIN invites another go */
#gameOver.show .again { animation: goInvite 2.4s ease-in-out 1.6s infinite; }
@keyframes goInvite { 50% { box-shadow: 0 5px 0 #8a5a12, 0 0 44px rgba(255,184,77,0.65); } }
/* NEW BEST: a shine sweeping across the words */
#gameOver.best .go-best .nb { background: linear-gradient(100deg, #ffcf4d 35%, #fff6d6 50%, #ffcf4d 65%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 0 #8a5a12) drop-shadow(0 0 12px rgba(255,207,77,0.6));   /* a text shadow would cover the shine */
  animation: goSlam 0.55s cubic-bezier(.2,1.6,.4,1) 0.9s both, goShine 2.6s ease-in-out 1.5s infinite; }
@keyframes goShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes goIn { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
.go-title { font: 40px 'Bungee', Impact, sans-serif; letter-spacing: 2px; color: var(--ink); line-height: 1;
  text-shadow: 0 4px 0 #000, 0 0 22px rgba(255,107,107,0.45); animation: goSlam 0.5s cubic-bezier(.2,1.6,.4,1) 0.05s both; }
@keyframes goSlam { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }
.go-mode { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.go-hero { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0 6px; }
.go-face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--tc); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 50%, transparent); background: #0b1020; }
.go-main { min-width: 0; }
.go-label { font: 12px 'Bungee', Impact, sans-serif; letter-spacing: 2px; color: var(--accent2); }
.go-total { font: 54px 'Bungee', Impact, sans-serif; line-height: 1.05; color: var(--accent); text-shadow: 0 4px 0 #8a5a12; font-variant-numeric: tabular-nums; }
.go-total small { font-size: 22px; color: var(--ink); text-shadow: none; }
.go-formula { font-size: 12px; color: var(--muted); font-weight: 700; }
.go-best { margin: 8px auto 4px; max-width: 340px; }
.go-best .nb { font: 30px 'Bungee', Impact, sans-serif; color: #ffcf4d; text-shadow: 0 3px 0 #8a5a12, 0 0 20px rgba(255,207,77,0.7);
  animation: goSlam 0.55s cubic-bezier(.2,1.6,.4,1) 0.9s both; }
.go-bestrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); }
.go-bestrow b { font: 16px 'Bungee', Impact, sans-serif; color: var(--ink); letter-spacing: 0; }
.go-bar { height: 8px; border-radius: 999px; background: #1a2338; overflow: hidden; margin: 5px 0 4px; }
.go-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; animation: goBar 1s ease-out 0.6s both; }
@keyframes goBar { from { width: 0; } }
.go-small { font-size: 12px; color: var(--muted); font-weight: 700; }
.go-stats { --n: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.go-tile.zone b { font-size: 12px; white-space: normal; line-height: 1.15; }
body.game-over #dist, body.game-over #score { visibility: hidden; }   /* the card shows the total */
.go-tile { --zc: var(--ink); background: #0b1020; border: 1px solid #1d2740; border-radius: 10px; padding: 7px 6px; }
.go-tile span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); }
.go-tile b { display: block; font: 15px 'Bungee', Impact, sans-serif; color: var(--zc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 700; color: var(--muted); background: #0b1020; border: 1px solid #1d2740; }
.go-rank.empty { display: none; }
.go-rank.good { color: var(--ok); border-color: rgba(110,231,168,0.5); }
.go-rank.warn { color: #ffb3a1; }
.go-rank.wait span::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; border: 2px solid var(--muted);
  border-top-color: transparent; vertical-align: -1px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.go-rk { font: 22px 'Bungee', Impact, sans-serif; color: var(--accent); }
.go-notes { margin-top: 6px; }
.go-note { font-size: 13px; font-weight: 700; color: var(--ok); margin-top: 2px; }
.go-quests { margin-top: 10px; text-align: left; background: #0b1020; border: 1px solid #1d2740; border-radius: 12px; padding: 8px 10px; }
.go-qh { display: flex; justify-content: space-between; font: 11px 'Bungee', Impact, sans-serif; letter-spacing: 1.5px; color: var(--accent2); margin-bottom: 4px; }
.go-qh b { color: var(--accent); font-weight: normal; }
.go-q { --c: #888; display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; font-weight: 700; }
.go-q .qbadge.mini { width: 22px; height: 22px; }
.go-qt { flex: 0 0 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go-qbar { flex: 1; height: 6px; border-radius: 999px; background: #1a2338; overflow: hidden; }
.go-qbar i { display: block; height: 100%; background: var(--c); }
.go-qp { flex: none; min-width: 76px; text-align: right; color: var(--muted); }
.go-q.done .go-qp { color: var(--c); }
/* Upright phones: a tighter card (three stats across, smaller type), and if it still doesn't fit (short screens,
   wallet apps' browsers) the middle scrolls while PLAY AGAIN and the buttons stay pinned at the bottom */
@media (max-width: 520px) {
  #gameOver { padding: 10px 12px; }
  .go-card { padding: 12px 12px 10px; }
  .go-body { max-height: calc(100vh - 44px); max-height: calc(100dvh - 44px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .go-body::-webkit-scrollbar { display: none; }
  #endBar { position: sticky; bottom: 0; z-index: 2; margin-top: 10px; padding-top: 8px;
    background: linear-gradient(to bottom, rgba(10,15,30,0), rgba(10,15,30,0.97) 26%); }
  .go-title { font-size: 28px; }
  .go-mode { margin-top: 4px; font-size: 11px; }
  .go-hero { gap: 12px; margin: 8px 0 4px; }
  .go-face { width: 50px; height: 50px; }
  .go-total { font-size: 40px; }
  .go-total small { font-size: 18px; }
  .go-formula { font-size: 11px; }
  .go-best { margin: 6px auto 2px; }
  .go-best .nb { font-size: 24px; }
  .go-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
  .go-stats[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }                 /* 4 stats: one row */
  .go-stats[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }                 /* 5 stats: 3 + 2 wider */
  .go-stats[data-n="5"] .go-tile { grid-column: span 2; }
  .go-stats[data-n="5"] .go-tile:nth-child(n+4) { grid-column: span 3; }
  .go-tile { padding: 5px 4px; border-radius: 9px; }
  .go-tile span { font-size: 9px; letter-spacing: 1px; }
  .go-tile b { font-size: 13px; }
  .go-tile.zone b { font-size: 11px; }
  .go-rank { margin-top: 8px; padding: 6px 10px; font-size: 12px; gap: 8px; }
  .go-rk { font-size: 18px; }
  .go-notes { margin-top: 4px; }
  .go-note { font-size: 12px; margin-top: 1px; }
  .go-quests { margin-top: 8px; padding: 6px 8px; }
  .go-q { padding: 2px 0; font-size: 11px; gap: 6px; }
  .go-q .qbadge.mini { width: 18px; height: 18px; }
  .go-qp { min-width: 64px; }
  .again { font-size: 22px; padding-top: 10px; padding-bottom: 10px; }
  .again svg { width: 24px; height: 24px; }
  .end-row { margin-top: 8px; gap: 8px; }
  .end-sm { font-size: 13px; white-space: nowrap; gap: 5px; }
  .end-hint { display: none; }
}
/* Short landscape screens (phones on their side): two columns, the result on the left, actions on the right */
@media (max-height: 520px) and (min-width: 600px) {
  .go-card { width: min(820px, 100%); }
  .go-body { display: flex; gap: 16px; align-items: center; text-align: center; }
  .go-left, .go-right { flex: 1; min-width: 0; }
  .go-right #endBar { margin-top: 8px; }
}
@media (max-height: 560px) {
  #gameOver { align-items: flex-start; }
  .go-card { padding: 10px 14px; }
  .go-title { font-size: 26px; }
  .go-hero { margin: 6px 0 2px; }
  .go-face { width: 48px; height: 48px; }
  .go-total { font-size: 36px; }
  .go-quests, .go-formula { display: none; }
  .go-stats { margin-top: 6px; }
  .again { font-size: 20px; padding: 10px 16px; }
  .end-row { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .go-card, .go-card::before, .go-stars, .go-title, .go-best .nb, .go-bar i, .go-total.landed, #gameOver.show .again,
  #gameOver.show .go-title, #gameOver.show .go-mode, #gameOver.show .go-hero, #gameOver.show .go-best, #gameOver.show .go-tile,
  #gameOver.show .go-rank, #gameOver.show .go-notes, #gameOver.show .go-quests, #gameOver.show #endBar { animation: none !important; }
}

/* ---------- Wallet picker: one row per wallet (logo, name, status), like other connect dialogs ---------- */
.wl-head { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; margin: 0 0 10px; }
.wl-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 460px; margin-bottom: 12px; }
.wl-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 10px 12px; text-align: left;
  background: #0b1020; border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
  transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.wl-row:hover { border-color: var(--accent2); background: #0f172b; }
.wl-row:active { transform: scale(0.99); }
.wl-row.on { border-color: var(--ok); }
.wl-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.wl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wl-txt b { font-size: 15px; }
.wl-txt small { font-size: 12px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); }
.wl-tag.ok { color: var(--accent2); border-color: rgba(79,209,197,0.45); background: rgba(79,209,197,0.08); }
.wl-tag.on { color: var(--ok); border-color: rgba(110,231,168,0.5); background: rgba(110,231,168,0.1); }
.wl-row.missing .wl-ic { opacity: 0.85; }
.wl-row.missing .wl-tag { color: var(--accent); border-color: rgba(255,184,77,0.45); }
@media (pointer: coarse) { .wl-row { padding: 12px; min-height: 56px; } }
@media (prefers-reduced-motion: reduce) { .wl-row { transition: none; } }

/* ---------- Tickets and the weekly prize pool (Chog NFT mode) ---------- */

/* The "no tickets" prompt */
.nt { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(3,5,12,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nt.show { display: flex; animation: fadeIn 0.2s ease-out; }
.nt-card { position: relative; width: 100%; max-width: 380px; padding: 22px 20px 18px; border-radius: 16px;
  background: var(--panel, #0d1322); border: 1px solid rgba(255,184,77,0.45); box-shadow: 0 16px 50px rgba(0,0,0,0.55); animation: rise 0.25s ease-out both; }
.nt-card h3 { margin: 0 0 10px; font: 22px 'Bungee', Impact, sans-serif; color: var(--accent); letter-spacing: 1px; }
.nt-list { margin: 0; padding-left: 18px; color: #e3e7f0; font-size: 14px; line-height: 1.5; }
.nt-list b { color: var(--ink); }
.nt-play { width: 100%; margin-top: 10px; padding: 10px; }
.nt-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .nt.show, .nt-card { animation: none; } }

/* The ticket panel */
.tk .lb-wrap { max-width: 640px; }
.tk-pool { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.tk-pool > div { background: #0b1020; border: 1px solid #1d2740; border-radius: 12px; padding: 10px; text-align: center; }
.tk-pool span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); }
.tk-pool b { display: block; font: 18px 'Bungee', Impact, sans-serif; color: var(--accent); margin: 4px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pool small { font-size: 11px; color: var(--muted); font-weight: 700; }
.tk-buy { background: rgba(13,19,34,0.95); border: 1px solid rgba(255,184,77,0.45); border-radius: 16px; padding: 14px; }
.tk-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-label { font-weight: 700; }
.tk-step { display: flex; align-items: center; gap: 10px; }
.tk-step button { width: 40px; height: 40px; padding: 0; font-size: 20px; }
.tk-step b { font: 24px 'Bungee', Impact, sans-serif; min-width: 34px; text-align: center; }
.tk-quick { display: flex; gap: 6px; margin-left: auto; }
.tk-quick button { padding: 6px 12px; min-width: 40px; }
.tk-quick button.on { border-color: var(--accent); color: var(--accent); }
.tk-price { margin-top: 12px; font-size: 13px; color: var(--muted); font-weight: 700; }
.tk-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tk-total span { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); }
.tk-total b { font: 18px 'Bungee', Impact, sans-serif; color: var(--ink); }
.tk-bal { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tk-bal.warn { color: #ffb3a1; }
.tk-go { width: 100%; margin-top: 12px; font: 20px 'Bungee', Impact, sans-serif; padding: 12px; border-radius: 12px; box-shadow: 0 5px 0 #8a5a12; }
.tk-go:disabled { box-shadow: none; }
.tk-get { display: block; text-align: center; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent2); }
.tk-steps { display: none; list-style: none; padding: 0; margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tk-steps.on { display: grid; gap: 4px; }
.tk-steps li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--line); vertical-align: -1px; }
.tk-steps li.doing { color: var(--ink); }
.tk-steps li.doing::before { border-color: var(--accent); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.tk-steps li.done { color: var(--ok); }
.tk-steps li.done::before { background: var(--ok); border-color: var(--ok); }
.tk-steps li.bad { color: #ffb3a1; }
.tk-steps li.bad::before { background: var(--danger); border-color: var(--danger); }
.tk-rules { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tk .lb-rule a { color: var(--accent2); }
@media (max-width: 520px) { .tk-pool b { font-size: 15px; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; } .tk-pool > div { padding: 8px 6px; } .tk-quick { margin-left: 0; } }

/* Ranks: the week selector and each top-10 place's prize */
.lb-week { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 auto 14px; max-width: 760px;
  padding: 8px 10px; border-radius: 12px; background: #0b1020; border: 1px solid rgba(255,184,77,0.35); }
.lb-week button { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.lbw-mid { text-align: center; min-width: 0; }
.lbw-mid b { display: block; font: 15px 'Bungee', Impact, sans-serif; color: var(--accent); }
.lbw-mid span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.prize { font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(255,184,77,0.12); border: 1px solid rgba(255,184,77,0.4);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.pod .prize { display: inline-block; margin-top: 4px; }
.lb-row .prize { flex: none; margin-right: 8px; }

/* ---------- Chog careers and the trait of the week ---------- */
/* The level badge: "LV" over the number */
.gc-lv { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px;
  border-radius: 10px; background: #1a1205; border: 2px solid var(--accent); color: var(--accent); font: 9px 'Bungee', Impact, sans-serif; letter-spacing: 1px; line-height: 1; }
.gc-lv b { font: 17px 'Bungee', Impact, sans-serif; color: var(--accent); letter-spacing: 0; font-weight: normal; }
.gc-lv.big { min-width: 58px; height: 58px; border-radius: 14px; font-size: 11px; }
.gc-lv.big b { font-size: 26px; }
/* Titles */
.cr-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); }
.cr-chip.on { color: #ffcf4d; border: 1px solid rgba(255,207,77,0.55); background: rgba(255,207,77,0.08); }
.cr-chip.new { animation: goSlam 0.5s cubic-bezier(.2,1.6,.4,1) 0.9s both; }
.cr-muted { font-size: 12px; color: var(--muted); font-style: normal; }
/* Game over: level, XP gained, new titles */
.go-career { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: #0b1020; border: 1px solid #1d2740; text-align: left; }
.go-career.empty { display: none; }
.go-career.up { border-color: rgba(255,184,77,0.7); box-shadow: 0 0 16px rgba(255,184,77,0.25); }
.gc-row { display: flex; align-items: center; gap: 10px; }
.gc-mid { flex: 1; min-width: 0; }
.gc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 700; }
.gc-top b { font: 13px 'Bungee', Impact, sans-serif; color: var(--ink); font-weight: normal; }
.go-career.up .gc-top b { color: var(--accent); }
.gc-top span { color: var(--ok); }
.gc-bar { margin: 4px 0 0; height: 6px; }
.gc-btn { flex: none; padding: 6px 10px; font-size: 12px; }
.gc-titles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
/* Picker: the chosen Chog's level, and the weekly trait on Chogs that have it */
.chosen-career { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; font-size: 13px; color: var(--muted); }
.chosen-career:empty { display: none; }
.chosen-career b { color: var(--ink); }
.tok { position: relative; }
.tok-week { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; color: #062320; background: var(--accent2); }
.dchip.week { color: #062320; border-color: var(--accent2); background: var(--accent2); }
/* Ranks: the Chog's level, the week's trait, and entries that open a career */
.lb-lv { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 5px; font: 10px 'Bungee', Impact, sans-serif; color: #1a1205; background: var(--accent); vertical-align: 1px; }
.lb-entry.linked { cursor: pointer; }
.lb-entry.linked:hover { border-color: var(--accent2); }
.lbw-mid .lb-trait { color: var(--accent2); }
.lb-trait:empty { display: none; }
/* The career panel */
.career .lb-wrap { max-width: 640px; }
.cr-body { display: grid; gap: 14px; }
.cr-head { display: flex; align-items: center; gap: 14px; }
.cr-face { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); background: #0b1020; display: block; }
.cr-id { min-width: 0; }
.cr-name { font: 22px 'Bungee', Impact, sans-serif; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-tier { font-size: 13px; color: var(--muted); font-weight: 700; margin: 2px 0 6px; }
.cr-level { background: rgba(13,19,34,0.92); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.cr-lvtop { display: flex; align-items: center; gap: 12px; }
.cr-lvtop b { display: block; font: 18px 'Bungee', Impact, sans-serif; color: var(--ink); font-weight: normal; }
.cr-lvtop span:not(.gc-lv) { font-size: 13px; font-weight: 700; color: var(--muted); }
.cr-level .go-bar { margin: 0; height: 10px; }
.cr-trait { font-size: 13px; color: var(--muted); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(13,19,34,0.92); }
.cr-trait b { color: var(--ink); }
.cr-trait.has { color: var(--accent2); border-color: rgba(79,209,197,0.55); }
.cr-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cr-h { margin: 4px 0 -4px; font: 13px 'Bungee', Impact, sans-serif; letter-spacing: 2px; color: var(--accent2); font-weight: normal; }
.cr-h span { color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.cr-titles { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-list { display: grid; gap: 6px; }
.cr-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px;
  background: rgba(13,19,34,0.92); border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.cr-row b { font: 15px 'Bungee', Impact, sans-serif; color: var(--accent); font-weight: normal; }
.cr-row .cr-muted { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .cr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-face { width: 64px; height: 64px; }
  .cr-name { font-size: 18px; }
}
/* How to play, page 8 */
.how-cr { flex-direction: column; gap: 10px; }
.hc-card { width: 100%; max-width: 420px; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(13,19,34,0.92); border: 1px solid rgba(255,184,77,0.45); }
.hc-card .go-bar { margin: 0; }
.hc-weeks { display: flex; gap: 8px; width: 100%; max-width: 560px; }
.hc-week { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; text-align: center;
  background: rgba(13,19,34,0.9); border: 1px solid var(--line); }
.hc-week.now { border-color: var(--accent2); }
.hc-week span { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.hc-week b { font-size: 13px; color: var(--ink); }
.hc-week i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent2); }
@media (prefers-reduced-motion: reduce) { .cr-chip.new { animation: none; } }
/* Home: the selected Chog's level in the BEST chip, which opens its career */
.best-chip { cursor: default; }
.best-chip.has-career { cursor: pointer; }
.best-chip.has-career:hover { border-color: var(--accent2); }
.chip-lv { font: 11px 'Bungee', Impact, sans-serif; color: #1a1205; background: var(--accent); border-radius: 6px; padding: 2px 6px; }
.chip-lv:empty { display: none; }
/* Demo cards: FLY and Career */
.drow { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.drow .dfly { margin-top: 0; }
.dcareer { font-size: 12px; font-weight: 700; color: var(--accent2); padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(79,209,197,0.5); cursor: pointer; }
.dcareer:hover { background: rgba(79,209,197,0.12); }
/* Home: the selected Chog's career, under the mode line */
.career-pill { display: flex; width: fit-content; align-items: center; gap: 8px; max-width: 100%; margin: -4px 0 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(5,8,18,0.72); border: 1px solid rgba(79,209,197,0.55); color: var(--ink); font: 700 13px 'Chakra Petch', Arial, sans-serif; cursor: pointer;
  pointer-events: auto; box-shadow: none; }
.career-pill span:not(.chip-lv) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.career-pill b { flex: none; color: var(--accent2); font-size: 12px; letter-spacing: 1px; }
.career-pill:hover { border-color: var(--accent2); background: rgba(79,209,197,0.12); }
@media (max-aspect-ratio: 1/1) { .career-pill { margin-left: auto; margin-right: auto; } }
@media (max-height: 500px) and (min-aspect-ratio: 1/1) { .career-pill { margin: 0 0 6px; padding: 4px 10px; font-size: 12px; } }
/* Career lookup by token ID */
.cr-find { display: flex; gap: 8px; margin: 0 0 12px; }
.cr-find input { flex: 1; min-width: 0; font: 15px 'Chakra Petch', Arial, sans-serif; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #070b16; color: var(--ink); }
.cr-find input:focus { outline: none; border-color: var(--accent2); }
/* The career can open from the game over card, which sits above the other panels: it goes on top, and Back returns to the card */
#careerPanel { z-index: 20; }
/* Demo picker: this week's trait */
.demo-week { max-width: 760px; margin: 0 auto 12px; padding: 8px 14px; border-radius: 12px; text-align: center; font-size: 13px; color: var(--accent2);
  border: 1px solid rgba(79,209,197,0.5); background: rgba(79,209,197,0.07); }
.demo-week b { color: var(--ink); }
.demo-week:empty { display: none; }

/* ---------- New high score: orange sunburst, speed streaks, the rocket flying in (drawn by the game) ---------- */
@property --hs-spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
#hsScreen { --vx: 50%; --vy: 38%; padding: 0; overflow: hidden; z-index: 30; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }
/* The visuals sit in a stage, so the screen itself always covers the whole page for taps while the stage animates */
.hs-stage { position: absolute; inset: 0;
  /* Blue light breaking through space, in the gameplay's colours: a bright cyan-white glow where the rocket vanishes,
     the nebula blue around it and deep space navy at the edges */
  background: radial-gradient(ellipse 85% 80% at 50% 50%, rgba(4,10,32,0) 50%, rgba(4,10,32,0.6) 100%),
    radial-gradient(circle at var(--vx) var(--vy), #effcff 0%, #9be6ff 12%, #46b4ff 30%, #2f7df0 52%, #173f9e 78%, #0b2160 100%); }
/* In: the gold light opens out from its bright point over the game. Out: a short fade to the game over card. */
#hsScreen.show { animation: none; }
#hsScreen.show .hs-stage { animation: hsReveal 0.7s cubic-bezier(.55,0,.25,1) both; }
#hsScreen.closing { animation: hsFadeOut 0.28s ease-in forwards; pointer-events: none; }
@keyframes hsReveal { from { clip-path: circle(0% at var(--vx) var(--vy)); } to { clip-path: circle(125% at var(--vx) var(--vy)); } }
@keyframes hsFadeOut { to { opacity: 0; } }
.hs-rays { position: absolute; inset: 0; pointer-events: none; animation: hsSpin 30s linear infinite;
  background: repeating-conic-gradient(from var(--hs-spin) at var(--vx) var(--vy), rgba(214,244,255,0.13) 0deg 6deg, rgba(255,255,255,0) 6deg 15deg); }
@keyframes hsSpin { to { --hs-spin: 15deg; } }
.hs-streaks { position: absolute; inset: 0; pointer-events: none; }
.hs-streak { position: absolute; left: var(--vx); top: var(--vy); height: var(--h, 3px); width: var(--w, 120px); border-radius: 99px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 70%); opacity: 0; animation: hsStreak var(--d, 0.8s) linear var(--dl, 0s) infinite; }
@keyframes hsStreak {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(4vmax) scaleX(0.4); }
  15% { opacity: 0.95; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(115vmax) scaleX(1.2); } }
/* A few teal sparkles (the game's second colour) twinkling around the rocket */
.hs-spark { position: absolute; width: var(--s, 14px); height: var(--s, 14px); pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #ffffff 0 18%, #4fd1c5 30%, rgba(79,209,197,0) 70%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: hsTwinkle var(--d, 1.6s) ease-in-out var(--dl, 0s) infinite; }
@keyframes hsTwinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
#hsCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* A sparkle where the rocket disappears into the light */
.hs-twinkle { position: absolute; left: var(--vx); top: var(--vy); width: 90px; height: 90px; margin: -45px 0 0 -45px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #ffffff 0 12%, rgba(255,255,255,0.7) 22%, rgba(255,255,255,0) 60%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
#hsScreen.gone .hs-twinkle { animation: hsTwinkleOut 0.9s ease-out forwards; }
@keyframes hsTwinkleOut { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 30% { opacity: 1; transform: scale(1.3) rotate(30deg); } 100% { opacity: 0; transform: scale(0.6) rotate(60deg); } }
#hsScreen .hs-top { position: absolute; left: 0; right: 0; top: max(5vh, 22px); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.hs-title { font: clamp(18px, min(3.6vh, 5.6vw), 30px) 'Bungee', Impact, sans-serif; color: #ffffff; letter-spacing: 1px; text-shadow: 0 3px 0 #0b1a4a, 0 0 18px rgba(79,209,255,0.6); }
/* Sized by the screen's height and width, so it never crowds a narrow phone */
.hs-score { margin-top: 2px; font: clamp(36px, min(10vh, 11vw), 92px) 'Bungee', Impact, sans-serif; line-height: 1.05; color: #fff;
  -webkit-text-stroke: 0.08em #0b1a4a; paint-order: stroke fill; text-shadow: 0 0.055em 0 #0b1a4a, 0 0 28px rgba(79,209,255,0.55); }
#hsScreen.show .hs-title, #hsScreen.show .hs-score { animation: hsPop 0.45s cubic-bezier(.2,1.6,.4,1) 0.25s both; }
#hsScreen.show .hs-score { animation-delay: 0.33s; }
@keyframes hsPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.hs-sub { margin-top: 6px; font: 700 clamp(13px, 2vh, 16px) 'Chakra Petch', sans-serif; color: #dff4ff; letter-spacing: 1px; text-shadow: 0 2px 0 #0b1a4a; }
.hs-tap { position: absolute; left: 0; right: 0; bottom: max(5vh, calc(env(safe-area-inset-bottom) + 18px)); text-align: center; pointer-events: none;
  font: clamp(18px, 3vh, 26px) 'Bungee', Impact, sans-serif; color: #fff; text-shadow: 0 3px 0 #0b1a4a; letter-spacing: 1px; opacity: 0; transition: opacity 0.3s; }
#hsScreen.ready .hs-tap { opacity: 1; animation: hsPulse 1.2s ease-in-out infinite; }
@keyframes hsPulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { #hsScreen.show .hs-stage { animation: fadeIn 0.3s ease-out both; } .hs-rays, .hs-streak, .hs-spark, .hs-twinkle, #hsScreen.ready .hs-tap { animation: none; } .hs-spark { opacity: 0.8; } }

/* After a new best, "Share your new best" glows on the game over card: the moment to share */
#cardBtn.hot { border-color: #4fd1c5; color: #eafffb; background: rgba(79,209,197,0.16); animation: shareGlow 1.6s ease-in-out 1.2s infinite; }
@keyframes shareGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(79,209,197,0); } 50% { box-shadow: 0 0 0 3px rgba(79,209,197,0.35), 0 0 18px rgba(79,209,197,0.55); } }
@media (prefers-reduced-motion: reduce) { #cardBtn.hot { animation: none; box-shadow: 0 0 0 2px rgba(79,209,197,0.5); } }
.sb-short { display: none; }
@media (max-width: 480px) { .sb-long { display: none; } .sb-short { display: inline; } }   /* narrow phones: the three buttons share one row */