:root{
  --bg-app:#dfe4ec; --bg-panel:#ffffff; --bg-screen:#e8edf4;
  --surface:#ffffff; --surface-2:#e6ebf3;
  --chassis:#c5ccd8; --border-ui:rgba(20,22,28,.17); --border-strong:rgba(20,22,28,.30);
  --text-main:#13161c; --text-dim:#4b5563;
  --accent:#7c5cff; --accent-cyan:#0aa5c4;
  --accent-grad:linear-gradient(135deg,#22d3ee,#7c5cff);
  --amber:#c2790a; --good:#1a7f37; --red:#cf222e;
  --shadow:0 10px 40px rgba(20,22,28,.13);
  --frame-gap:9px; --header-h:54px; --footer-h:42px; --side-w:50px;
  --radius:13px; --radius-sm:9px;
  --grid:rgba(20,22,28,.08);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
}
html[data-theme=dark]{
  --bg-app:#070809; --bg-panel:#0f1217; --bg-screen:#0c0e14;
  --surface:#13161d; --surface-2:#1a1e27;
  --chassis:#262b35; --border-ui:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20);
  --text-main:#e6e9ef; --text-dim:#8b94a3;
  --accent:#9d86ff; --accent-cyan:#3ddbf0;
  --accent-grad:linear-gradient(135deg,#3ddbf0,#9d86ff);
  --amber:#d29922; --good:#3fb950; --red:#f85149;
  --shadow:0 12px 50px rgba(0,0,0,.6);
  --grid:rgba(61,219,240,.07);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;touch-action:manipulation}
body{font-family:var(--font);color:var(--text-main);background:var(--bg-app);-webkit-font-smoothing:antialiased;overflow:hidden;transition:background .4s ease,color .4s ease}
.chassis{position:fixed;inset:0;display:flex;flex-direction:column}
.bezel{position:absolute;inset:0;pointer-events:none;z-index:80;border:1px solid var(--chassis)}
.corner{position:absolute;width:20px;height:20px;border-color:var(--accent-cyan);opacity:.7}
.corner.tl{top:6px;left:6px;border-top:2px solid;border-left:2px solid}
.corner.tr{top:6px;right:6px;border-top:2px solid;border-right:2px solid}
.corner.bl{bottom:6px;left:6px;border-bottom:2px solid;border-left:2px solid}
.corner.br{bottom:6px;right:6px;border-bottom:2px solid;border-right:2px solid}
.frame{flex:1;min-height:0;margin:var(--frame-gap);display:flex;flex-direction:column;background:var(--bg-screen);border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hdr{height:var(--header-h);min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bg-panel);border-bottom:1px solid var(--border-strong);position:relative}
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent-grad);opacity:.6}
.hl{display:flex;align-items:center;gap:20px;min-width:0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:14px;color:var(--accent-cyan)}
.logo svg{width:24px;height:24px}
.bname{display:flex;flex-direction:column;line-height:1.1}
.wordmark{font-family:var(--mono);font-weight:800;letter-spacing:.13em;font-size:15px;display:inline-flex;align-items:baseline}
a.wordmark{color:inherit;text-decoration:none;display:inline-block}
a.wordmark:hover{color:var(--accent-cyan)}
a.wordmark:focus-visible{outline:2px solid rgba(10,165,196,.55);outline-offset:3px;border-radius:6px}
.wordmark .a{color:var(--text-main)}
.wordmark .b{color:var(--text-main)}
.wordmark .slash{color:var(--accent);margin:0 .04em}
.wordmark .cur{display:inline-block;width:.46em;height:.92em;background:var(--accent);margin-left:.22em;align-self:center}
a.wordmark:hover .cur{animation:wmblink 1.05s steps(1) infinite}
@keyframes wmblink{50%{opacity:0}}
a.wordmark:hover .a, a.wordmark:hover .b{color:var(--accent-cyan)}
.subkick{font-family:var(--mono);font-size:7.5px;letter-spacing:.32em;color:var(--text-dim);opacity:.85;text-transform:uppercase;margin-top:3px}
.tools{display:flex;align-items:center;gap:2px}
.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:color .2s,background .2s}
.icon-btn:hover{color:var(--text-main);background:var(--surface-2)}
.icon-btn svg{width:16px;height:16px}
.main{flex:1;min-height:0;display:flex;overflow:hidden}
.side{width:var(--side-w);min-width:var(--side-w);background:var(--bg-panel);display:flex;flex-direction:column;align-items:center;padding:14px 0;position:relative;overflow:hidden}
.side.left{border-right:1px solid var(--border-strong)}
.side.right{border-left:1px solid var(--border-strong)}
.tex{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--text-main) .5px,transparent 0);background-size:15px 15px;opacity:.022;pointer-events:none}
.vsocial{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:10px;position:relative;z-index:2}
.vsocial .vs-link{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--text-dim);opacity:.72;transition:color .15s,opacity .15s,background .15s}
.vsocial .vs-link:hover{color:var(--accent-cyan);opacity:1;background:var(--surface-2)}
.vsocial .vs-link:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}
.vsocial .vs-link svg{width:17px;height:17px}
.screen{flex:1;min-width:0;position:relative;overflow-y:auto;overflow-x:hidden;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:34px 34px}
.content{position:relative;z-index:3}
.ftr{height:var(--footer-h);min-height:var(--footer-h);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--bg-panel);border-top:1px solid var(--border-strong)}
.links{display:flex;align-items:center;gap:18px;font-size:12px}
.links .cp{color:var(--text-dim);font-family:var(--mono);font-size:11px}
.links a{color:var(--text-dim);text-decoration:none;transition:color .2s}
.links a:hover{color:var(--accent-cyan)}
.status{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim)}
.status .d{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good)}

/* Breadcrumbs */
.crumb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.03em;white-space:nowrap;overflow:hidden;padding-left:20px;border-left:1px solid var(--border-ui)}
.crumb .sep{opacity:.45}
.crumb .cur{color:var(--accent-cyan);font-weight:600}
.crumb a{color:var(--text-dim);text-decoration:none;transition:color .15s}
.crumb a:visited{color:var(--text-dim)}
.crumb a:hover{color:var(--accent-cyan)}
.crumb a:focus-visible{outline:2px solid rgba(10,165,196,.55);outline-offset:3px;border-radius:5px}

.crumbbar{display:none}
@media(max-width:780px){
  .hl .crumb{display:none}
  .crumbbar{
    display:flex; align-items:center; gap:6px;
    padding:9px 14px; background:var(--bg-panel); border-bottom:1px solid var(--border-strong);
    overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .crumbbar::-webkit-scrollbar{display:none}
  .crumbbar .crumb{padding:0; border-left:0; overflow:visible; font-size:12.5px}
  .crumbbar .crumb a{padding:4px 2px}
  .side{display:none}
  .links .ext{display:none}
}

/* Ghostly scrollbar: the screen is the shell's single scroll container. */
*{scrollbar-width:thin;scrollbar-color:rgba(123,134,156,.4) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(123,134,156,.36);border:2px solid transparent;border-radius:9px;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(123,134,156,.62);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--accent-cyan);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Cookie Banner */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--bg-panel);border-top:1px solid var(--border-strong);box-shadow:0 -8px 30px rgba(0,0,0,0.30);font-family:var(--mono);visibility:hidden;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;}
.cc-banner.is-open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;transition:opacity .15s ease,transform .15s ease;}
.cc-inner{max-width:980px;margin:0 auto;padding:18px 22px;display:flex;flex-wrap:wrap;align-items:stretch;gap:14px 24px}
.cc-main{flex:1 1 360px;min-width:260px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.cc-text{flex:0 0 auto}
.cc-text strong{color:var(--text-main);display:block;margin-bottom:5px;letter-spacing:0.5px;font-family:var(--mono);font-size:18px;font-weight:700}
.cc-text p{margin:0;font-size:13px;color:var(--text-dim);font-family:var(--mono)}
.cc-text a{color:var(--text-main);text-decoration:underline;text-decoration-color:var(--accent-cyan);text-underline-offset:2px}
.cc-cats{display:flex;flex-direction:column;gap:16px;flex:1 1 260px;font-size:13px;color:var(--text-main);font-family:var(--mono)}
.cc-cats label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.cc-cats label input{margin-top:2px;flex:none}
.cc-cats label input[disabled]{cursor:not-allowed}
.cc-ct{display:flex;flex-direction:column;gap:4px}
.cc-cn{display:flex;align-items:center;gap:7px;color:var(--text-main)}
.cc-cd{font-size:11px;line-height:1.5;color:var(--text-dim);opacity:.9}
.cc-ctag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--border-ui);border-radius:5px;padding:1px 6px;font-weight:600}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cc-btn{font-family:var(--mono);font-size:13px;letter-spacing:0.5px;padding:10px 18px;background:var(--surface-2);color:var(--text-main);border:1px solid var(--border-ui);border-radius:7px;cursor:pointer;min-height:40px;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.cc-btn:hover{border-color:var(--border-strong)}
.cc-primary{background:var(--good);border-color:var(--good);color:#fff}
.cc-primary:hover{background:rgba(26,127,55,.18);box-shadow:0 0 0 3px rgba(26,127,55,0.18)}
.cc-neutral{background:var(--surface-2);border-color:var(--border-ui);color:var(--text-main)}
.cc-neutral:hover{border-color:rgba(10,165,196,.55);color:var(--accent-cyan);box-shadow:0 0 0 3px rgba(10,165,196,0.14)}
.cc-danger{background:rgba(207,34,46,.10);border-color:rgba(207,34,46,.45);color:var(--red)}
.cc-danger:hover{background:rgba(207,34,46,.14);box-shadow:0 0 0 3px rgba(207,34,46,0.14)}
@media(max-width:780px){
  .cc-text strong{font-size:19px}
  .cc-cats label{padding-bottom:16px;border-bottom:1px solid var(--border-ui)}
  .cc-cats label:last-child{padding-bottom:0;border-bottom:0}
}


/* GAME SPECIFIC STYLES */
.game-viewport {
  position: relative;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}
#game-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg-screen);
}

#ui-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#score-display {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
  letter-spacing: 0.05em;
}

.overlay-screen {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.overlay-screen::-webkit-scrollbar { display: none; }

.overlay-screen.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 20;
}

.overlay-screen > * { flex-shrink: 0; }

.overlay-screen h1,
.overlay-screen h2 {
  font-family: var(--mono);
  font-size: 48px;
  font-weight: 900;
  color: var(--accent-cyan);
  margin: 0 0 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(61, 219, 240, 0.4);
}

.overlay-screen p {
  font-size: 16px;
  color: var(--text-dim);
  margin-bottom: 32px;
  max-width: 400px;
  text-align: center;
  line-height: 1.5;
}

.instructions {
  background: rgba(0, 0, 0, 0.4);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 32px;
  border: 1px solid var(--border-ui);
}

.instructions p {
  margin-bottom: 8px;
  font-size: 14px;
}

.instructions p:last-child {
  margin-bottom: 0;
}

.game-btn {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 16px 32px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.3);
}

.game-btn:hover {
  background: var(--accent-cyan);
  box-shadow: 0 8px 24px rgba(61, 219, 240, 0.4);
  transform: translateY(-2px);
}

.game-btn:active {
  transform: translateY(0);
}

html[data-theme="dark"] .game-btn {
  color: #000;
}


/* ============ DART RUNNER v2 UI ============ */
#best-display {
  position: absolute;
  top: 60px;
  left: 24px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

#combo-display {
  position: absolute;
  top: 86px;
  left: 24px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  text-shadow: 0 0 14px rgba(61,219,240,0.55);
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#combo-display.show { opacity: 1; transform: translateY(0) scale(1); }

#hud-right {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.hud-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border-ui);
  background: rgba(0,0,0,0.38);
  color: var(--text-main);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hud-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.hud-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

#shield-indicator {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--good);
  border: 1px solid var(--good);
  border-radius: 20px;
  padding: 6px 16px;
  background: rgba(63,185,80,0.14);
  box-shadow: 0 0 16px rgba(63,185,80,0.3);
  display: none;
}
#shield-indicator.show { display: block; }

#new-best {
  display: none;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(210,153,34,0.55);
  animation: newbestpulse 1s ease-in-out infinite;
}
@keyframes newbestpulse { 50% { transform: scale(1.09); } }

.tag-best {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}
.tag-best span { color: var(--accent-cyan); font-weight: 700; }

#speed-lines {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(61,219,240,0.12) 100%);
  transition: opacity 0.3s ease;
}

/* Mobile controls: broad steering zones plus a nearby jump button. */
#touch-controls {
  position:absolute;
  inset:0;
  z-index:8;
  display:none;
  pointer-events:none;
}
.touch-zone {
  position:absolute;
  bottom:0;
  top:20%;
  width:42%;
  padding:0 0 24px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border:0;
  color:var(--accent-cyan);
  background:transparent;
  opacity:.42;
  pointer-events:auto;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.touch-zone.left { left:0; }
.touch-zone svg { width:52px; height:52px; }
.touch-zone:active { opacity:.72; }
.touch-right-group {
  position:absolute;
  right:0;
  bottom:0;
  top:20%;
  width:49%;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:9px;
  padding:0 18px 24px 0;
  pointer-events:none;
}
.touch-right-group .touch-zone.right {
  position:relative;
  inset:auto;
  width:76px;
  height:74px;
  padding:0;
  flex:0 0 76px;
  align-items:center;
  pointer-events:auto;
}
.touch-jump {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  flex:0 0 58px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);
  border-radius:15px;
  color:#fff;
  background:color-mix(in srgb,var(--accent) 25%,rgba(10,13,20,.64));
  box-shadow:0 8px 22px rgba(0,0,0,.24);
  backdrop-filter:blur(7px);
  pointer-events:auto;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.touch-jump svg { width:28px; height:28px; }
.touch-jump:active { transform:scale(.92); filter:brightness(1.35); }
@media (max-width:780px), (hover:none) and (pointer:coarse) {
  body.game-playing #touch-controls { display:block; }
}
@media (max-width:420px) {
  .touch-zone { width:40%; padding-bottom:17px; }
  .touch-right-group { width:53%; gap:7px; padding:0 10px 17px 0; }
  .touch-right-group .touch-zone.right { width:68px; height:66px; flex-basis:68px; }
  .touch-jump { width:54px; height:54px; flex-basis:54px; }
}
/* Real AltRepo logo in the header (replaces the placeholder layers glyph). */
.logo img{width:34px;height:34px;display:block;object-fit:contain}


/* ===== No-zoom / fit-any-screen (v2.2) ===== */
/* touch-action:manipulation removes the double-tap-to-zoom gesture; combined with
   the locked viewport + gesturestart blocking in JS, the view never zooms. */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
.game-btn, .icon-btn, .touch-zone, .touch-jump, .wordmark, .crumbbar a { touch-action: manipulation; }

.report-bug{margin:18px auto 0;max-width:90%;text-align:center;font-size:13px;font-family:var(--mono);color:var(--text-main);opacity:1;background:rgba(0,0,0,.22);border:1px solid var(--border-ui);border-radius:8px;padding:9px 14px;line-height:1.45}
.report-bug a{color:var(--accent-cyan);text-decoration:none;font-weight:600}
.report-bug a:hover{text-decoration:underline}
/* Screen-reader/crawler-only content (e.g. FAQ matching FAQPage schema) */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Lock page scroll/zoom during active play */
body.game-playing{overflow:hidden;overscroll-behavior:none}
body.game-playing .screen{overflow:hidden !important}

/* ===================================================================
   Dart Runner v3 — "Stages" update UI
   =================================================================== */


/* Biome wash overlay (sits above canvas, below HUD, ignores input) */
#biome-tint {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  transition: background .8s ease; mix-blend-mode: screen;
}

/* ---- Combo meter ---- */
#combo-meter {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; z-index: 6; opacity: 0; transition: opacity .2s ease;
  font-weight: 800; letter-spacing: .5px;
}
#combo-meter.show { opacity: 1; }
#combo-count {
  font-size: 15px; color: var(--amber);
  text-shadow: 0 0 12px rgba(0,0,0,.5); white-space: nowrap;
}
#combo-bar {
  width: 120px; height: 5px; border-radius: 4px;
  background: rgba(127,127,127,.28); overflow: hidden;
}
#combo-fill {
  height: 100%; width: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--amber), var(--accent-cyan));
  transition: width .08s linear;
}

/* ---- Active power-up pills ---- */
#power-hud {
  position: absolute; top: 92px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: 90%; pointer-events: none; z-index: 6;
}
.ppill {
  position: relative; overflow: hidden;
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: #fff; padding: 4px 10px 6px; border-radius: 999px;
  background: rgba(10,12,20,.55); border: 1px solid var(--pc);
  box-shadow: 0 0 12px -2px var(--pc);
}
.ppill span { position: relative; z-index: 1; text-shadow: 0 0 6px rgba(0,0,0,.6); }
.ppill i {
  position: absolute; left: 0; bottom: 0; height: 3px;
  background: var(--pc); transition: width .1s linear;
}

/* ---- Stage banner: compact HUD notice, never covers the track ---- */
#stage-banner {
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%) translateY(-10px);
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  min-height:34px;
  padding:7px 13px;
  pointer-events:none;
  z-index:7;
  opacity:0;
  white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--accent-cyan) 42%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--bg-panel) 84%,transparent);
  box-shadow:0 8px 24px -14px rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
}
#stage-banner.show { animation:stageNotice 1.65s ease forwards; }
#stage-banner .sb-num {
  font-family:var(--mono);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--text-main);
}
#stage-banner .sb-name {
  padding-left:10px;
  border-left:1px solid var(--border-ui);
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-cyan);
}
@keyframes stageNotice {
  0% { opacity:0; transform:translateX(-50%) translateY(-10px); }
  16%,78% { opacity:1; transform:translateX(-50%) translateY(0); }
  100% { opacity:0; transform:translateX(-50%) translateY(-6px); }
}
/* ---- Floating popups (near-miss / dodge / power) ---- */
#popup-layer, #toast-layer { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.popup {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 15px; font-weight: 900; letter-spacing: .5px; white-space: nowrap;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6);
  animation: popFloat .75s ease-out forwards;
}
.popup.near { color: var(--accent-cyan); }
.popup.pw   { color: #ffd166; }
@keyframes popFloat {
  0%   { opacity: 0; transform: translate(-50%,-40%) scale(.7); }
  20%  { opacity: 1; transform: translate(-50%,-55%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%,-120%) scale(1); }
}

/* ---- Mission toasts ---- */
#toast-layer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  top: auto; bottom: 90px; justify-content: flex-end;
}
.toast {
  pointer-events: none;
  font-size: 13px; font-weight: 700; color: var(--text-main);
  background: rgba(10,12,20,.78); border: 1px solid var(--good);
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
  animation: toastIn .3s ease both; transition: opacity .4s ease, transform .4s ease;
}
.toast.out { opacity: 0; transform: translateY(-6px); }
.toast-badge { color: var(--good); font-weight: 900; margin-right: 4px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Daily challenge toggle ---- */
#daily-wrap {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-secondary, var(--text-main));
  margin: 4px 0 10px; user-select: none;
}
#daily-wrap input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
#daily-best { font-size: 12px; opacity: .7; }

/* ---- Skin picker ---- */
.skin-row {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 320px; margin: 0 auto 12px;
}
.skin {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 2px;
  font: inherit; color: var(--text-main);
}
.skin .sw {
  width: 30px; height: 30px; border-radius: 8px; background: var(--sc);
  border: 2px solid transparent; transition: transform .15s ease, border-color .15s ease;
  box-shadow: 0 0 12px -3px var(--sc);
}
.skin .sn { font-size: 10px; font-weight: 700; letter-spacing: .3px; opacity: .85; }
.skin.sel .sw { border-color: #fff; transform: scale(1.12); }
.skin:hover .sw { transform: scale(1.1); }
.skin.locked { opacity: .55; }
.skin.locked .sw { filter: grayscale(.6) brightness(.7); box-shadow: none; }

/* ---- Mission checklist ---- */
.mission-list {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  max-width: 300px; margin: 0 auto 14px; width: 100%;
}
.mission {
  font-size: 12px; color: var(--text-secondary, var(--text-main)); opacity: .75;
  display: flex; align-items: center; gap: 8px;
}
.mission.done { opacity: 1; color: var(--good); }
.mission .mck { font-weight: 900; width: 14px; text-align: center; }

/* ---- Game over stats ---- */
.go-stats {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  font-size: 13px; color: var(--text-secondary, var(--text-main));
  margin: 4px 0 14px;
}
.go-stats .go-daily { color: var(--accent); font-weight: 700; }

@media (max-width: 480px) {
  #combo-meter { top: 48px; }
  #combo-bar { width: 100px; }
  #power-hud { top: 84px; }
  .skin-row { max-width: 260px; }
}

/* ===================================================================
   Page scroll + How-to-Play guide (below the game)
   =================================================================== */


.howto {
  position: relative;
  z-index: 3;
  min-height: 100%;
  padding: 48px 20px 64px;
  color: var(--text-main);
  background: var(--bg-screen);
  border-top: 1px solid var(--border-strong);
}
.howto-inner { max-width: 920px; margin: 0 auto; }
.howto-head { text-align: center; margin-bottom: 32px; }
.howto-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--accent-cyan); }
.howto-head h2 { font-size: clamp(26px, 5vw, 38px); font-weight: 900; letter-spacing: -.5px; margin: 8px 0 12px; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.howto-head p { max-width: 640px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--text-dim); }

.howto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ht-card {
  --card-accent: var(--accent-cyan);
  position: relative;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--card-accent) 6%), var(--surface));
  border: 1px solid var(--border-ui);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ht-card::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--card-accent); opacity:.75; }
.ht-card::after { content:''; position:absolute; width:110px; height:110px; right:-58px; top:-62px; border:1px solid var(--card-accent); opacity:.12; transform:rotate(45deg); }
.ht-card:hover { border-color: color-mix(in srgb, var(--card-accent) 70%, var(--border-ui)); transform: translateY(-2px); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--card-accent) 45%, transparent); }
.ht-obstacles { --card-accent: var(--red); }
.ht-power { --card-accent: var(--good); }
.ht-score { --card-accent: var(--amber); }
.ht-wide { grid-column: 1 / -1; }
.ht-card h3 { display:flex; align-items:center; gap:12px; min-height:42px; font-size:17px; font-weight:800; margin:0 0 17px; position:relative; z-index:1; }
.ht-card h3 > span:last-child { display:flex; flex-direction:column; gap:2px; }
.ht-card h3 small { font-family:var(--mono); font-size:8px; line-height:1; letter-spacing:.2em; color:var(--card-accent); }
.ht-ico { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; color:var(--card-accent); border:1px solid color-mix(in srgb, var(--card-accent) 58%, transparent); border-radius:10px; background:color-mix(in srgb, var(--card-accent) 10%, transparent); box-shadow:inset 0 0 14px color-mix(in srgb, var(--card-accent) 8%, transparent); }
.ht-ico svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ht-card h4 { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin:0 0 11px; padding-bottom:8px; border-bottom:1px solid var(--border-ui); }
.ht-card > p { font-size:14px; line-height:1.55; color:var(--text-dim); margin:0 0 10px; }

.ht-list { list-style:none; margin:0; padding:0; display:grid; gap:1px; border:1px solid var(--border-ui); border-radius:9px; overflow:hidden; background:var(--border-ui); }
.ht-list li { display:grid; grid-template-columns:minmax(90px,.42fr) 1fr; gap:13px; align-items:start; min-height:44px; padding:11px 13px; font-size:13px; line-height:1.45; color:var(--text-dim); background:var(--surface); }
.ht-list li::before { display:none; }
.ht-list li strong { color:var(--text-main); font-family:var(--mono); font-size:12px; letter-spacing:.02em; }
.ht-list em { color:var(--accent-cyan); font-style:normal; font-weight:700; }

.ctrl-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ctrl-cols > div { min-width:0; padding:15px; border:1px solid var(--border-ui); border-radius:10px; background:color-mix(in srgb, var(--surface-2) 45%, transparent); }
.ctrl-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ctrl-list li { display:grid; grid-template-columns:minmax(116px,auto) 1fr; align-items:center; gap:12px; min-height:30px; font-size:13px; color:var(--text-dim); }
.ctrl-list li > span:last-child { margin:0; color:var(--text-main); font-weight:600; text-align:right; }
.keyset { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
kbd { font-family:var(--mono); font-size:10px; min-width:24px; text-align:center; padding:4px 6px; border-radius:6px; background:var(--surface); border:1px solid var(--border-strong); border-bottom-width:2px; color:var(--text-main); line-height:1; box-shadow:0 2px 5px rgba(0,0,0,.1); }
.tap { justify-self:start; font-family:var(--mono); font-size:10px; color:var(--text-main); background:var(--surface); border:1px solid var(--border-ui); border-radius:6px; padding:5px 8px; white-space:nowrap; }

.pw-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pw-list li { display:grid; grid-template-columns:22px 92px 1fr; align-items:center; gap:9px; min-height:38px; padding:7px 10px; font-size:13px; color:var(--text-dim); border:1px solid var(--border-ui); border-radius:8px; background:var(--surface); }
.pw-list strong { color:var(--text-main); font-family:var(--mono); font-size:12px; }
.pw-dot { width:12px; height:12px; transform:rotate(45deg); border-radius:2px; background:var(--c); box-shadow:0 0 12px -1px var(--c); justify-self:center; }

.biome-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
.biome { display:flex; align-items:center; justify-content:center; min-height:36px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.03em; padding:7px 10px; border-radius:8px; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 70%,transparent); background:color-mix(in srgb,var(--c) 10%,transparent); text-align:center; }
.howto-tip { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--text-dim); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 16px 20px; }
.howto-tip strong { color: var(--accent-cyan); }

@media (max-width: 700px) {
  .howto { padding:36px 14px 48px; }
  .howto-grid, .ctrl-cols { grid-template-columns:1fr; }
  .ht-wide { grid-column:auto; }
  .ht-card { padding:17px 16px 18px; }
  .ht-list li { grid-template-columns:1fr; gap:4px; }
  .ctrl-list li { grid-template-columns:minmax(108px,auto) 1fr; }
  .biome-row { grid-template-columns:repeat(2,1fr); }
}