/* ==========================================================================
   Aurora Night — BridgeQuest design system
   Load after theme.css so these tokens win.
   Prototype source: /srv/babgame/prototype (BridgeQuest Play / CLAUDE.md)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Outfit:wght@400;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Core palette & tokens ─────────────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg:        #17122a;
  --bg-2:      #1d1736;

  /* Surface layers */
  --surface:   #241d40;
  --surface-2: #2c2450;
  --surface-3: #362c60;

  /* Text */
  --ink:       #f6f2ff;
  --ink-mute:  #b6abdd;
  --ink-faint: #8a7fb8;

  /* Borders */
  --line:   rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.16);

  /* Brand accents */
  --c-coral:  #ff6e5e;
  --c-amber:  #ffc24b;
  --c-mint:   #2fe0ad;
  --c-violet: #a982ff;
  --c-sky:    #4cc6ff;
  --primary:  var(--c-coral);

  /* Per-dial accent colours */
  --dial-accuracy:     var(--c-sky);
  --dial-fairness:     var(--c-mint);
  --dial-rights:       var(--c-violet);
  --dial-transparency: var(--c-amber);
  --dial-timeliness:   var(--c-coral);
  --dial-french:       #4ade80;

  /* Typography */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui:      "Outfit", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  /* Radius scale */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  /* Elevation */
  --shadow-card: 0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-pop:  0 30px 70px -20px rgba(0,0,0,.8);

  /* Motion */
  --ease-spring: cubic-bezier(.34,1.3,.5,1);
  --ease-out:    cubic-bezier(.2,.8,.4,1);
  --t-fast:  150ms;
  --t-base:  250ms;
  --t-slow:  400ms;

  /* ── Bridge to legacy variable names used by pre-existing CSS ── */
  --bg-app:           var(--bg);
  --bg-surface:       var(--surface);
  --bg-surface-alt:   var(--surface-2);
  --bg-overlay:       rgba(10,6,24,.72);
  --text-main:        var(--ink);
  --text-muted:       var(--ink-mute);
  --color-primary:    var(--c-coral);
  --color-primary-glow: rgba(255,110,94,.35);
  --color-success:    var(--c-mint);
  --color-danger:     var(--c-coral);
  --border-subtle:    var(--line);
  --border-strong:    var(--line-2);
  --font-body:        var(--font-ui);
  --font-hud:         var(--font-mono);
  --radius-sm:        var(--r-sm);
  --radius-md:        var(--r-md);
  --radius-lg:        var(--r-lg);
  --radius-xl:        var(--r-xl);
  --shadow-sm:        var(--shadow-card);
  --ease-spring:      cubic-bezier(.34,1.3,.5,1);
}

/* ── Game-page body ────────────────────────────────────────────────────────── */
body[data-theme="game"] {
  background:
    radial-gradient(1200px 700px at 82% -8%,
      color-mix(in oklab, var(--c-violet) 22%, transparent),
      transparent 60%),
    radial-gradient(900px 600px at 5% 110%,
      color-mix(in oklab, var(--c-coral) 16%, transparent),
      transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ── Shared utility primitives ─────────────────────────────────────────────── */

/* card surface */
.bq-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

/* kicker label */
.bq-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-amber);
}

/* Aurora brand mark */
.bq-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--c-coral), var(--c-violet));
  box-shadow: 0 8px 20px -8px var(--c-violet),
              inset 0 1px 0 rgba(255,255,255,.4);
  flex: none;
  overflow: hidden;
}
/* When the mark IS an img (new SVG asset — already contains the gradient rounded square) */
img.bq-mark {
  display: block;
  background: none;
  box-shadow: 0 6px 16px -6px var(--c-violet);
  object-fit: contain;
  padding: 0;
}

/* Primary CTA button */
.bq-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 15px;
  color: #2a0d05;
  background: linear-gradient(180deg, #ff8a6f, var(--c-coral));
  box-shadow: 0 14px 30px -12px var(--c-coral);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.bq-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* Ghost button */
.bq-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), background var(--t-fast);
}
.bq-btn-ghost:hover { transform: translateY(-2px); background: var(--surface-3); }

/* Icon button (square) */
.bq-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink-mute);
  cursor: pointer;
  transition: transform var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.bq-icon-btn:hover { color: var(--ink); transform: translateY(-1px); background: var(--surface-2); }
.bq-icon-btn.on { color: var(--c-mint); border-color: color-mix(in oklab, var(--c-mint) 40%, transparent); }

/* Stat chip */
.bq-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
}
.bq-chip__num { font-family: var(--font-mono); font-weight: 700; }
.bq-chip__sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.bq-chip--streak { color: var(--c-amber); }
.bq-chip--coffee  { color: var(--c-amber); }

/* Spin button */
.bq-spin-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: 14px;
  color: #2a1500;
  background: linear-gradient(180deg, #ffd166, var(--c-amber));
  box-shadow: 0 10px 24px -10px var(--c-amber), inset 0 1px 0 rgba(255,255,255,.6);
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast);
}
.bq-spin-btn:disabled {
  background: var(--surface-3);
  color: var(--ink-faint);
  box-shadow: none;
  border: 1px solid var(--line);
  cursor: default;
}
.bq-spin-btn:not(:disabled):hover { transform: translateY(-2px) scale(1.02); }

/* Tag pill */
.bq-tag {
  padding: 6px 12px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 12px;
  background: rgba(10,6,24,.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  letter-spacing: .02em;
}
.bq-tag--cat { color: var(--c-amber); }

/* Consequence delta chip */
.bq-dchip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  animation: bqDchipIn .4s backwards;
}
.bq-dchip i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.bq-dchip b { font-family: var(--font-mono); }
@keyframes bqDchipIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; } }

/* Bottom sheet overlay */
.bq-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8,5,20,.72);
  backdrop-filter: blur(7px);
  animation: bqFade .25s ease;
}
@keyframes bqFade { from { opacity:0; } to { opacity:1; } }

.bq-sheet {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: bqSheetIn .45s cubic-bezier(.2,1.1,.4,1);
}
@keyframes bqSheetIn {
  from { opacity:0; transform:translateY(26px) scale(.96); }
  to   { opacity:1; transform:none; }
}

/* Toast layer */
.bq-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.bq-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-card);
  font-weight: 700;
  font-size: 14px;
  animation: bqToastIn .4s cubic-bezier(.2,1.2,.4,1);
  pointer-events: auto;
}
@keyframes bqToastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; } }

/* Confetti */
.bq-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.bq-confetti i {
  position: absolute; top: -12px;
  width: 9px; height: 14px;
  border-radius: 2px;
  animation: bqFall linear forwards;
}
@keyframes bqFall { to { transform: translateY(108vh) rotate(720deg); opacity: .9; } }

/* Reduced-motion override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}