/* Shared tokens + challenge UI kit. The hub shell may override the --c-* theme variables. */
:root {
  /* spacing (8pt grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  /* motion */
  --d-press: 100ms; --d-fast: 180ms; --d-med: 320ms; --d-slow: 500ms; --d-hero: 800ms;
  --e-std: cubic-bezier(0.2, 0, 0, 1);
  --e-dec: cubic-bezier(0, 0, 0, 1);
  --e-acc: cubic-bezier(0.3, 0, 1, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-spring-soft: cubic-bezier(0.34, 1.20, 0.64, 1);
  /* theme (shell overrides these) */
  --c-bg: #0b0d14;
  --c-surface: #151a26;
  --c-surface-2: #1e2534;
  --c-line: rgba(255, 255, 255, 0.09);
  --c-text: #eef1f8;
  --c-muted: #8b93a7;
  --c-accent: #ffcc00;
  --c-accent-ink: #1a1400;
  --c-accent-2: #3b82f6;
  --c-good: #22c55e;
  --c-bad: #ff3b5c;
  --c-warn: #f59e0b;
  --c-radius: 16px;
  --c-radius-sm: 10px;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}
html { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; font-optical-sizing: auto; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- challenge root ---------- */
.gm-challenge {
  position: relative; width: 100%; height: 100%; min-height: 100%;
  color: var(--c-text); font-family: var(--font-ui);
  overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.gm-challenge *, .gm-challenge *::before, .gm-challenge *::after { box-sizing: border-box; }

/* layout primitives */
.ch-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.ch-stack--tight { gap: var(--s-2); }
.ch-stack--loose { gap: var(--s-8); }
.ch-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ch-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-4); width: 100%; max-width: 640px; margin-inline: auto; padding: var(--s-6) var(--s-4); min-height: 100%; }
.ch-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; }

/* type */
.ch-title { font-family: var(--font-display); font-size: clamp(24px, 3.2vw + 12px, 44px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; margin: 0; text-wrap: balance; }
.ch-sub { color: var(--c-muted); font-size: 15px; line-height: 1.5; margin: 0; text-wrap: pretty; max-width: 52ch; }
.ch-kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); font-weight: 700; }
.ch-num { font-variant-numeric: tabular-nums; }

/* surfaces */
.ch-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: var(--s-6); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6); }

/* controls */
.ch-btn {
  appearance: none; border: 0; cursor: pointer; user-select: none; -webkit-user-select: none;
  font: 700 16px/1 var(--font-ui); letter-spacing: -0.01em;
  padding: var(--s-4) var(--s-6); border-radius: 999px; min-height: 48px;
  background: var(--c-accent); color: var(--c-accent-ink);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--c-accent) 70%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transition: transform var(--d-fast) var(--e-spring), box-shadow var(--d-fast) var(--e-std), background var(--d-fast) var(--e-std), opacity var(--d-fast) var(--e-std);
}
@media (hover: hover) { .ch-btn:hover { transform: translateY(-2px); } }
.ch-btn:active { transform: translateY(1px) scale(0.97); transition-duration: var(--d-press); }
.ch-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.ch-btn--ghost { background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line); }
.ch-btn--danger { background: var(--c-bad); color: #fff; }
.ch-input {
  width: 100%; font: 600 20px/1.2 var(--font-ui); color: var(--c-text);
  background: var(--c-surface-2); border: 2px solid var(--c-line); border-radius: var(--c-radius-sm);
  padding: var(--s-3) var(--s-4); outline: none;
  transition: border-color var(--d-fast) var(--e-std), box-shadow var(--d-fast) var(--e-std);
}
.ch-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 25%, transparent); }

/* progress bar */
.ch-bar { width: 100%; height: 12px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.ch-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 60%, #fff)); border-radius: inherit; transition: width var(--d-med) var(--e-std); }

/* entrance helper */
.ch-in { animation: ch-in var(--d-slow) var(--e-dec) both; }
@keyframes ch-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.ch-pop { animation: ch-pop var(--d-med) var(--e-spring) both; }
@keyframes ch-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* ---------- engine overlays ---------- */
.gm-fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }
.gm-toasts { position: fixed; left: 50%; top: var(--s-4); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--s-2); z-index: 9998; pointer-events: none; width: min(92vw, 420px); }
.gm-toast { background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-line); border-radius: 14px; padding: var(--s-3) var(--s-4); font: 600 14px/1.35 var(--font-ui); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6); animation: ch-pop var(--d-med) var(--e-spring) both; }
.gm-toast--bad { border-color: color-mix(in srgb, var(--c-bad) 60%, transparent); }
.gm-toast--good { border-color: color-mix(in srgb, var(--c-good) 60%, transparent); }
.gm-toast.is-out { opacity: 0; transform: translateY(-8px); transition: all var(--d-med) var(--e-acc); }

/* ---------- jokers ---------- */
.gm-jk-btn { position: fixed; z-index: 9990; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); min-height: 40px;
  border-radius: 999px; border: 1px solid rgba(255, 204, 0, 0.45); background: rgba(14, 17, 26, 0.88); color: #ffe27a; backdrop-filter: blur(8px);
  font: 700 14px/1 var(--font-ui); cursor: pointer; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  transition: transform var(--d-fast) var(--e-spring), border-color var(--d-fast) var(--e-std); }
.gm-jk-btn b { font-variant-numeric: tabular-nums; color: #fff; }
@media (hover: hover) { .gm-jk-btn:hover { transform: translateY(-2px); border-color: #ffcc00; } }
.gm-jk-btn:active { transform: scale(0.96); }
.gm-jk-ic { font-size: 16px; }
.gm-jk-modal { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; padding: var(--s-4);
  background: rgba(5, 6, 10, 0.72); backdrop-filter: blur(6px); animation: ch-in var(--d-med) var(--e-dec) both; }
.gm-jk-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: 20px;
  background: #151a26; border: 1px solid rgba(255, 255, 255, 0.08); color: #eef1f8; font-family: var(--font-ui); }
.gm-jk-k { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; color: #ffcc00; }
.gm-jk-card h3 { margin: 0; font-size: clamp(22px, 2vw + 14px, 28px); line-height: 1.1; letter-spacing: -0.02em; }
.gm-jk-card p { margin: 0; color: #a9b0c2; font-size: 15px; line-height: 1.5; }
.gm-jk-card .gm-jk-left { color: #ffe27a; font-weight: 600; }
.gm-jk-row { display: flex; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-2); }
.gm-jk-row button { appearance: none; border: 0; cursor: pointer; font: 700 15px/1 var(--font-ui); padding: var(--s-3) var(--s-5); min-height: 44px; border-radius: 999px; }
.gm-jk-no { background: transparent; color: #8b93a7; }
.gm-jk-yes { background: #ffcc00; color: #1a1400; }

/* ---------- "better on PC" notice ---------- */
.gm-pc { position: fixed; z-index: 9993; display: flex; align-items: center; justify-content: center; padding: var(--s-4); background: rgba(5, 6, 10, 0.86); backdrop-filter: blur(6px); animation: ch-in var(--d-med) var(--e-dec) both; }
.gm-pc-card { width: min(320px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; color: #eef1f8; font-family: var(--font-ui); }
.gm-pc-ic { font-size: 40px; }
.gm-pc-card h3 { margin: 0; font-size: clamp(22px, 2vw + 14px, 28px); line-height: 1.1; letter-spacing: -0.02em; }
.gm-pc-card p { margin: 0; color: #a9b0c2; font-size: 15px; }
.gm-pc-go { appearance: none; border: 0; cursor: pointer; margin-top: var(--s-2); font: 700 15px/1 var(--font-ui); padding: var(--s-3) var(--s-6); min-height: 44px; border-radius: 999px; background: #ffcc00; color: #1a1400; }