/* IDOLBOUND palette — dark is the default; light is an optional alternate. */
:root {
  color-scheme: dark;
  --canvas: #071c16;
  --ink: #f5f0e5;
  --muted: #b8c8bd;
  --border: #355447;
  --border-strong: #668575;
  --surface: #123b2a;
  --surface-2: #1b4835;
  --accent: #ffc857;
  --accent-ink: #071c16;
  --accent-soft: #214e3a;
  --accent-strong: #36d9c7;
  --accent-text: #ffc857;
  --accent-hover: #ffd67b;
  --accent-border: #9e7a35;
  --success: #36d9c7;
  --success-ink: #071c16;
  --success-soft: #174d43;
  --success-strong: #71efdc;
  --warning: #ff9f43;
  --warning-ink: #071c16;
  --warning-soft: #603b1e;
  --warning-strong: #ffc078;
  --danger: #ee785f;
  --danger-ink: #071c16;
  --danger-soft: #5e2b25;
  --danger-strong: #ffab99;
  --chart-1: #36d9c7;
  --chart-2: #ffc857;
  --chart-3: #ff9f43;
  --chart-4: #77b6a2;
  --chart-5: #b1a77e;
  --chart-6: #e07a64;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --radius-btn: 999px;
  --radius-card: 1rem;
  --radius-input: 0.75rem;
  --shadow-card: 0 24px 64px rgba(0, 0, 0, .28);
  --x-gold: #ffc857;
  --x-jungle: #123b2a;
  --x-mist: #36d9c7;
  --x-amber: #ff9f43;
}
html[data-theme="light"] {
  color-scheme: light;
  --canvas: #edf2e8;
  --ink: #152b21;
  --muted: #516a5d;
  --border: #c8d7c9;
  --border-strong: #607c68;
  --surface: #ffffff;
  --surface-2: #dfe9dc;
  --accent: #875400;
  --accent-ink: #fffaf0;
  --accent-soft: #f5e6c3;
  --accent-strong: #145d50;
  --accent-text: #76500b;
  --accent-hover: #6f4400;
  --accent-border: #8c5c08;
  --success: #145d50;
  --success-ink: #ffffff;
  --success-soft: #d9eee6;
  --success-strong: #0d493e;
  --warning: #99531b;
  --warning-ink: #ffffff;
  --warning-soft: #fae7cd;
  --warning-strong: #81400f;
  --danger: #a7392c;
  --danger-ink: #ffffff;
  --danger-soft: #f8dfd9;
  --danger-strong: #8b2b20;
  --chart-1: #145d50;
  --chart-2: #875400;
  --chart-3: #99531b;
  --chart-4: #4d8570;
  --chart-5: #756a42;
  --chart-6: #a7392c;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --radius-btn: 999px;
  --radius-card: 1rem;
  --radius-input: 0.75rem;
  --shadow-card: 0 24px 64px rgba(15, 35, 25, .12);
  --x-gold: #875400;
  --x-jungle: #1b4835;
  --x-mist: #145d50;
  --x-amber: #99531b;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/static/fonts/dm-sans.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/static/fonts/dm-mono.woff2") format("woff2");
  font-display: swap;
}
* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body.idolbound-body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% -18%, color-mix(in srgb, var(--x-jungle) 78%, transparent), transparent 62%), var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--x-mist); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .5; }
.game-app { width: min(100% - 48px, 1380px); margin: 0 auto; padding-bottom: 28px; }
.topbar { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--border); }
.brand-lockup { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand-mark { height:25px; width:22px; display:inline-flex; align-items:flex-end; gap:3px; transform:skew(-12deg); }
.brand-mark span { display:block; width:5px; border-radius:2px 2px 0 0; background:var(--x-gold); }
.brand-mark span:nth-child(1) { height:13px; opacity:.72; }
.brand-mark span:nth-child(2) { height:23px; }
.brand-mark span:nth-child(3) { height:17px; opacity:.86; }
.brand-name { font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.12em; }
.topbar-meta, .eyebrow, .screen-kicker, .menu-records span, .menu-bottom, .hud-label, .result-grid span, .notes-sub, .game-footer, .touch-controls small, .mission-note, .mission-status, .mission-value {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
}
.topbar-meta { display:flex; align-items:center; gap:10px; color:var(--muted); }
.status-dot { width:6px; height:6px; display:inline-block; border-radius:99px; background:var(--x-mist); box-shadow:0 0 14px color-mix(in srgb, var(--x-mist) 70%, transparent); }
.topbar-actions { display:flex; align-items:center; gap:9px; }
.icon-button { display:inline-grid; place-items:center; border:1px solid var(--border); border-radius:50%; width:38px; height:38px; color:var(--ink); background:color-mix(in srgb, var(--surface) 84%, transparent); cursor:pointer; transition:border-color .18s,color .18s,background .18s; }
.icon-button:hover { border-color:var(--x-mist); color:var(--x-mist); }
.icon-button.is-muted { color:var(--muted); }
.ui-icon { display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.game-intro { min-height:164px; display:flex; align-items:end; justify-content:space-between; gap:28px; padding:32px 0 24px; }
.eyebrow { margin:0 0 12px; color:var(--x-mist); display:flex; align-items:center; gap:10px; }
.eyebrow-rule { width:26px; height:1px; display:inline-block; background:var(--x-mist); }
.game-intro h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(35px,4.7vw,64px); letter-spacing:-.055em; line-height:.96; margin:0; }
.game-intro h1 em { color:var(--x-gold); font-style:normal; }
.intro-note { color:var(--muted); font-size:13px; line-height:1.7; margin:0 0 4px; text-align:right; }
.game-stage { height:clamp(540px,69vh,800px); min-height:540px; position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--canvas); box-shadow:0 28px 84px rgba(0,0,0,.26); touch-action:none; }
#game-canvas { display:block; width:100%; height:100%; position:absolute; inset:0; }
.stage-vignette { position:absolute; inset:0; pointer-events:none; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 24%,transparent 72%,rgba(0,0,0,.2)); }
.game-hud { position:absolute; inset:18px 18px auto; z-index:3; display:flex; align-items:start; justify-content:space-between; gap:12px; pointer-events:none; }
.game-hud[hidden] { display:none !important; }
.hud-main { display:flex; gap:10px; }
.hud-stat, .hud-pill, .hud-pause { background:color-mix(in srgb,var(--canvas) 76%,transparent); border:1px solid color-mix(in srgb,var(--x-mist) 22%,var(--border)); box-shadow:0 8px 28px rgba(0,0,0,.12); backdrop-filter:blur(12px); }
.hud-stat { display:grid; gap:5px; min-width:92px; padding:11px 13px; border-radius:9px; }
.hud-label { color:var(--muted); font-size:9px; }
.hud-stat strong { font-family:var(--font-mono); font-size:21px; font-weight:500; letter-spacing:-.04em; }
.hud-stat strong small { font-size:10px; color:var(--muted); margin-left:4px; }
.hud-side { display:flex; align-items:start; gap:7px; pointer-events:auto; }
.hud-pill { min-height:40px; display:flex; align-items:center; gap:8px; padding:0 11px; border-radius:9px; font-family:var(--font-mono); font-size:13px; }
.coin-glyph, .relic-glyph { color:var(--x-gold); font-size:12px; }
.relic-glyph { color:var(--x-mist); }
.multiplier-pill { color:var(--x-gold); }
.hud-pause { border-radius:9px; display:grid; place-items:center; height:40px; width:40px; cursor:pointer; color:var(--ink); }
.pause-bars { width:11px; height:13px; display:block; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.powerup-status { position:absolute; top:55px; right:4px; color:var(--x-gold); font-family:var(--font-mono); text-align:right; letter-spacing:.08em; font-size:10px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.screen { position:absolute; z-index:4; inset:0; display:grid; place-items:center; overflow:auto; background:linear-gradient(90deg,color-mix(in srgb,var(--canvas) 94%,transparent) 0%,color-mix(in srgb,var(--canvas) 78%,transparent) 43%,color-mix(in srgb,var(--canvas) 16%,transparent) 100%); }
.screen[hidden], [hidden] { display:none !important; }
.screen-menu { align-items:stretch; justify-items:stretch; }
.menu-content { width:min(58%,600px); padding:clamp(30px,5vw,68px); padding-bottom:92px; align-self:center; position:relative; z-index:2; }
.screen-kicker { margin:0 0 13px; color:var(--x-mist); font-size:10px; }
.menu-content h2 { font-family:var(--font-display); font-size:clamp(48px,6.2vw,84px); font-weight:700; line-height:.9; letter-spacing:-.08em; margin:0 0 20px; }
.menu-content h2 span { color:var(--x-gold); }
.menu-tagline { color:var(--ink); font-size:clamp(14px,1.6vw,18px); line-height:1.65; margin:0 0 26px; }
.play-button { width:min(100%,310px); min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid var(--accent); border-radius:9px; padding:0 18px; background:var(--accent); color:var(--accent-ink); font-family:var(--font-mono); font-size:12px; letter-spacing:.11em; font-weight:700; cursor:pointer; box-shadow:0 10px 36px color-mix(in srgb,var(--accent) 20%,transparent); transition:transform .18s,background .18s,box-shadow .18s; }
.play-button:hover { transform:translateY(-2px); background:var(--accent-hover); box-shadow:0 16px 42px color-mix(in srgb,var(--accent) 30%,transparent); }
.play-icon { display:inline-grid; place-items:center; }
.play-arrow { font-size:18px; margin-left:auto; }
.menu-records { display:flex; gap:28px; margin:29px 0 14px; }
.menu-records > div { min-width:116px; display:grid; gap:7px; }
.menu-records span { color:var(--muted); font-size:9px; }
.menu-records strong { font-family:var(--font-mono); font-size:20px; font-weight:500; }
.menu-records small { color:var(--muted); font-size:10px; }
.text-button { display:inline-flex; align-items:center; gap:12px; padding:12px 0; border:0; background:transparent; color:var(--x-mist); font-family:var(--font-mono); font-size:10px; letter-spacing:.11em; cursor:pointer; }
.text-button span { font-size:14px; }
.controls-panel { width:min(100%,335px); display:grid; gap:7px; padding:14px 16px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface) 90%,transparent); }
.controls-panel[hidden] { display:none; }
.controls-panel > div { display:flex; align-items:center; gap:5px; min-height:26px; }
.controls-panel span { color:var(--muted); font-size:12px; margin-left:auto; }
kbd { min-width:24px; padding:4px 6px; display:inline-block; text-align:center; border:1px solid var(--border-strong); border-radius:4px; font-family:var(--font-mono); font-size:9px; color:var(--ink); background:var(--surface-2); }
.menu-orbit { position:absolute; right:8%; top:12%; width:clamp(190px,26vw,360px); aspect-ratio:1; display:grid; place-items:center; opacity:.78; }
.orbit-ring { position:absolute; inset:2%; border:1px solid color-mix(in srgb,var(--x-gold) 45%,transparent); border-radius:50%; transform:rotateX(62deg) rotate(-24deg); box-shadow:0 0 70px color-mix(in srgb,var(--x-gold) 8%,transparent); }
.orbit-ring-two { inset:14%; transform:rotateX(62deg) rotate(34deg); border-color:color-mix(in srgb,var(--x-mist) 35%,transparent); }
.relic-silhouette { color:var(--x-gold); font-size:clamp(60px,10vw,136px); text-shadow:0 0 38px color-mix(in srgb,var(--x-gold) 65%,transparent),0 0 94px color-mix(in srgb,var(--x-amber) 26%,transparent); animation:relic-float 4s ease-in-out infinite; }
@keyframes relic-float { 0%,100% { transform:translateY(0) rotate(-7deg); } 50% { transform:translateY(-10px) rotate(4deg); } }
.menu-bottom { position:absolute; left:30px; right:30px; bottom:22px; display:flex; justify-content:space-between; gap:18px; color:var(--muted); font-size:9px; }
.screen-pause, .screen-over { background:color-mix(in srgb,var(--canvas) 78%,transparent); backdrop-filter:blur(10px); }
.overlay-panel { width:min(420px,calc(100% - 34px)); max-height:calc(100% - 30px); overflow-y:auto; border:1px solid var(--border-strong); border-radius:15px; background:color-mix(in srgb,var(--surface) 95%,transparent); padding:clamp(25px,4vw,40px); box-shadow:var(--shadow-card); }
.overlay-panel h2 { font-family:var(--font-display); font-size:clamp(32px,4vw,46px); letter-spacing:-.06em; margin:0 0 12px; }
.overlay-panel > p:not(.screen-kicker):not(.result-score):not(.personal-best) { margin:0 0 26px; color:var(--muted); font-size:14px; line-height:1.6; }
.overlay-panel .play-button { width:100%; }
.secondary-button { width:min(100%,310px); display:block; min-height:46px; margin-top:10px; border:1px solid var(--border-strong); border-radius:8px; background:transparent; color:var(--ink); font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; cursor:pointer; }
.secondary-button:hover { border-color:var(--x-mist); color:var(--x-mist); }
.result-score { margin:12px 0 0; font-family:var(--font-mono); font-size:clamp(42px,6vw,60px); letter-spacing:-.06em; color:var(--x-gold); line-height:1; }
.result-score-label { color:var(--muted); font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; display:block; margin:8px 0 22px; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.result-grid > div { padding:12px; border:1px solid var(--border); border-radius:8px; display:grid; gap:7px; background:color-mix(in srgb,var(--surface-2) 45%,transparent); }
.result-grid span { color:var(--muted); font-size:8px; }
.result-grid strong { font-family:var(--font-mono); font-size:17px; font-weight:500; }
.personal-best { color:var(--x-gold); font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; margin:-8px 0 18px; }
.toast-line { position:absolute; z-index:5; left:50%; bottom:23px; transform:translate(-50%,12px); opacity:0; pointer-events:none; padding:10px 16px; border:1px solid var(--accent-border); border-radius:999px; background:color-mix(in srgb,var(--canvas) 89%,transparent); color:var(--accent-text); font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; white-space:nowrap; transition:opacity .2s,transform .2s; }
.toast-line.is-visible { opacity:1; transform:translate(-50%,0); }
.touch-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px 0 0; }
.touch-controls button { min-height:56px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:border-color .14s,background .14s; }
.touch-controls button:hover, .touch-controls button:active { border-color:var(--x-mist); background:var(--surface-2); }
.touch-controls button > span { font-size:22px; line-height:1; color:var(--x-gold); }
.touch-controls small { font-size:9px; color:var(--muted); }
.mission-section { padding:38px 0 18px; border-top:1px solid var(--border); }
.mission-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.mission-heading .eyebrow { margin-bottom:9px; }
.mission-heading h2 { margin:0; font-family:var(--font-display); font-size:clamp(30px,4vw,46px); font-weight:600; line-height:1; letter-spacing:-.05em; }
.mission-heading h2 em { color:var(--x-gold); font-style:normal; }
.mission-note { color:var(--muted); font-size:9px; padding-bottom:4px; }
.mission-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.mission-card { min-width:0; padding:15px 14px 13px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface) 78%,transparent); transition:border-color .2s,background .2s; }
.mission-card.is-complete { border-color:var(--success); background:color-mix(in srgb,var(--success-soft) 40%,var(--surface)); }
.mission-card-top { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.mission-index { color:var(--x-gold); font-family:var(--font-mono); font-size:10px; }
.mission-status { color:var(--muted); font-size:7px; text-align:right; }
.mission-card h3 { font-family:var(--font-display); font-size:15px; line-height:1.15; margin:16px 0 7px; letter-spacing:-.02em; }
.mission-card p { min-height:34px; color:var(--muted); font-size:11px; line-height:1.5; margin:0 0 16px; }
.mission-meter { width:100%; height:4px; border-radius:99px; overflow:hidden; background:var(--surface-2); }
.mission-meter span { display:block; width:0; height:100%; border-radius:99px; background:var(--x-gold); transition:width .2s; }
.mission-card.is-complete .mission-meter span { background:var(--success); }
.mission-value { color:var(--muted); font-size:8px; margin-top:9px; }
.run-notes { padding:38px 0; }
.notes-head { display:flex; align-items:center; gap:14px; }
.notes-head .eyebrow { margin:0; }
.notes-divider { flex:1; height:1px; background:var(--border); }
.notes-sub { color:var(--muted); font-size:9px; }
.notes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding-top:20px; }
.note-card { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; padding:15px 16px 17px 0; border-top:1px solid var(--border); }
.note-index { color:var(--x-gold); font-family:var(--font-mono); font-size:11px; padding-top:2px; }
.note-card h3 { margin:0 0 8px; font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:-.03em; }
.note-card p { color:var(--muted); font-size:12px; line-height:1.65; margin:0; max-width:310px; }
.game-footer { min-height:52px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--border); color:var(--muted); font-size:9px; }
.footer-mark { color:var(--x-gold); margin:0 5px; }
@media (max-width: 1000px) {
  .mission-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .game-app { width:min(100% - 28px,1380px); }
  .game-intro { min-height:142px; padding:25px 0 20px; }
  .game-intro h1 { font-size:clamp(32px,6vw,47px); }
  .intro-note { font-size:11px; }
  .game-stage { height:min(70svh,730px); min-height:530px; }
  .menu-content { width:70%; padding:30px; padding-bottom:85px; }
  .menu-orbit { right:2%; top:16%; width:31vw; }
  .notes-grid { gap:15px; }
  .note-card { grid-template-columns:25px minmax(0,1fr); gap:8px; padding-right:5px; }
  .note-card h3 { font-size:15px; }
  .note-card p { font-size:11px; }
}
@media (max-width: 560px) {
  .game-app { width:calc(100% - 24px); }
  .topbar { min-height:62px; gap:10px; }
  .brand-name { font-size:13px; letter-spacing:.09em; }
  .topbar-meta { display:none; }
  .icon-button { width:35px; height:35px; }
  .game-intro { align-items:start; flex-direction:column; gap:12px; padding:25px 0 19px; }
  .game-intro h1 { font-size:clamp(34px,9vw,48px); }
  .intro-note { text-align:left; font-size:11px; line-height:1.5; }
  .game-stage { height:67svh; min-height:495px; max-height:690px; border-radius:12px; }
  .game-hud { inset:9px 9px auto; }
  .hud-main { gap:5px; }
  .hud-stat { min-width:68px; padding:8px; gap:4px; }
  .hud-stat strong { font-size:16px; }
  .hud-label { font-size:7px; }
  .hud-side { gap:4px; }
  .hud-pill { padding:0 7px; min-height:34px; gap:5px; font-size:11px; }
  .hud-pause { width:34px; height:34px; }
  .powerup-status { top:41px; font-size:8px; }
  .screen { background:linear-gradient(90deg,color-mix(in srgb,var(--canvas) 92%,transparent),color-mix(in srgb,var(--canvas) 68%,transparent)); }
  .menu-content { width:88%; padding:25px 21px; padding-bottom:76px; }
  .menu-content h2 { font-size:clamp(48px,12vw,62px); }
  .menu-tagline { font-size:13px; margin-bottom:20px; }
  .menu-orbit { right:-13%; top:14%; width:46vw; opacity:.46; }
  .relic-silhouette { font-size:70px; }
  .menu-records { gap:18px; margin-top:23px; }
  .menu-records > div { min-width:0; gap:5px; }
  .menu-records span { font-size:8px; }
  .menu-records strong { font-size:17px; }
  .menu-bottom { left:16px; right:16px; bottom:14px; font-size:7px; gap:12px; }
  .touch-controls { gap:6px; padding-top:9px; }
  .touch-controls button { min-height:49px; gap:5px; flex-direction:column; }
  .touch-controls button > span { font-size:19px; }
  .touch-controls small { font-size:8px; }
  .mission-section { padding:30px 0 12px; }
  .mission-heading { align-items:start; flex-direction:column; gap:10px; margin-bottom:16px; }
  .mission-heading h2 { font-size:34px; }
  .mission-note { font-size:8px; }
  .mission-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .mission-card { padding:12px 10px; }
  .mission-card h3 { font-size:14px; margin:12px 0 6px; }
  .mission-card p { min-height:30px; font-size:10px; margin-bottom:13px; }
  .mission-status { font-size:6px; }
  .run-notes { padding:28px 0; }
  .notes-sub { font-size:7px; letter-spacing:.06em; }
  .notes-grid { grid-template-columns:1fr; gap:8px; padding-top:15px; }
  .note-card { grid-template-columns:27px minmax(0,1fr); padding:13px 0 14px; gap:9px; }
  .note-card p { max-width:none; font-size:12px; }
  .game-footer { min-height:50px; font-size:7px; letter-spacing:.05em; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}