/* ============================================================
   BOOM TRIVIA — THEME.css
   Design source of truth (mirrors THEME.md §1 tokens)
   Monochrome silhouette base + single hot danger accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* --- color: DARK base (primary) --- */
  --bg:          #161310;
  --bg-2:        #1d1813;
  --surface:     #221d17;
  --surface-2:   #2b251e;
  --ink:         #f3efe6;
  --ink-dim:     #c8c1b3;
  --muted:       #968d7e;
  --line:        rgba(243,239,230,0.12);
  --line-strong: rgba(243,239,230,0.22);

  /* --- the single hot accent (danger) + warn --- */
  --accent-danger:      #e8392b;
  --accent-danger-deep: #b3271d;
  --accent-danger-glow: rgba(232,57,43,0.45);
  --accent-warn:        #f4b41a;
  --accent-warn-deep:   #c98c06;
  --success:            #46b06a;
  --success-deep:       #2f8a4e;

  /* --- wire colors (carry letter labels for accessibility) --- */
  --wire-1: #3f78d6; /* A */
  --wire-2: #2fa79f; /* B */
  --wire-3: #9a6fd4; /* C */
  --wire-4: #d65f9c; /* D */

  /* --- type --- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- spacing --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* --- radius --- */
  --r-sm:6px; --r-md:10px; --r-lg:18px; --r-pill:999px;

  /* --- shadow --- */
  --sh-card: 0 1px 2px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35);
  --sh-overlay: 0 18px 50px rgba(0,0,0,.6);

  /* --- motion --- */
  --t-fast:120ms; --t-base:240ms; --t-slow:480ms;
  --ease-std: cubic-bezier(.2,.7,.2,1);
  --ease-sharp: cubic-bezier(.4,0,.7,.2);
  --ease-back: cubic-bezier(.2,1.35,.45,1);
}

/* --- LIGHT base (variant) --- */
.bt-light {
  --bg:          #f0ece3;
  --bg-2:        #e7e1d5;
  --surface:     #fbf9f4;
  --surface-2:   #f1ede4;
  --ink:         #1a1713;
  --ink-dim:     #3c372f;
  --muted:       #6f685c;
  --line:        rgba(26,23,19,0.12);
  --line-strong: rgba(26,23,19,0.22);
  --sh-card: 0 1px 2px rgba(60,50,35,.12), 0 6px 16px rgba(60,50,35,.10);
  --sh-overlay: 0 18px 50px rgba(40,33,22,.22);
}

* { box-sizing: border-box; }

/* ---- type helpers ---- */
.bt-display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; line-height: .98; }
.bt-mono { font-family: var(--font-mono); }
.bt-label {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.bt-kicker {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent-warn);
}

/* hazard stripe texture (warning tape) */
.bt-hazard {
  background-image: repeating-linear-gradient(
    -45deg, var(--accent-warn) 0 14px, #161310 14px 28px);
}
.bt-hazard-thin {
  background-image: repeating-linear-gradient(
    -45deg, var(--accent-warn) 0 7px, transparent 7px 14px);
}

/* real art background */
.bt-art { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* striped image-gap placeholder */
.bt-gap {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(45deg,
     rgba(150,141,126,.16) 0 2px, transparent 2px 11px);
  border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted); position: relative;
}
.bt-gap .bt-gap-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 0 10px; line-height: 1.5;
}

/* phone shell */
.bt-phone {
  width: 360px; height: 780px; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.bt-statusbar {
  height: 30px; flex: 0 0 30px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px 0 18px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--ink); letter-spacing: .02em; z-index: 5;
}
.bt-statusbar .bt-sb-icons { display: flex; gap: 5px; align-items: center; }
.bt-navpill {
  height: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center;
}
.bt-navpill::after {
  content: ''; width: 120px; height: 4px; border-radius: 999px;
  background: var(--ink); opacity: .55;
}
.bt-screen { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }

/* buttons */
.bt-btn {
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  border: none; border-radius: var(--r-md); padding: 13px 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--t-fast) var(--ease-std), filter var(--t-fast);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.bt-btn:active { transform: translateY(1px) scale(.99); }
.bt-btn-primary { background: var(--accent-danger); color: #fff; box-shadow: 0 0 0 1px var(--accent-danger-deep) inset, 0 6px 16px var(--accent-danger-glow); }
.bt-btn-ghost { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.bt-btn-warn { background: var(--accent-warn); color: #161310; }

/* card */
.bt-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.bt-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* scrollbars hidden inside phone */
.bt-scroll { overflow-y: auto; scrollbar-width: none; min-height: 0; }
.bt-scroll::-webkit-scrollbar { display: none; }

/* ===== keyframes (documented in THEME.md §4) ===== */
@keyframes bt-spark { 0%,100%{ transform: scale(1); opacity:1 } 50%{ transform: scale(1.5); opacity:.65 } }
@keyframes bt-armed-pulse { 0%,100%{ box-shadow: inset 0 0 0 0 var(--accent-danger-glow), inset 0 0 60px 8px transparent } 50%{ box-shadow: inset 0 0 0 3px var(--accent-danger), inset 0 0 90px 18px var(--accent-danger-glow) } }
@keyframes bt-shake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3px,2px)} 40%{transform:translate(3px,-2px)} 60%{transform:translate(-2px,-2px)} 80%{transform:translate(2px,2px)} }
@keyframes bt-heartbeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.05)} 28%{transform:scale(1)} 42%{transform:scale(1.05)} 56%{transform:scale(1)} }
@keyframes bt-fuse-flicker { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes bt-pop { 0%{transform:scale(.6); opacity:0} 60%{transform:scale(1.12); opacity:1} 100%{transform:scale(1)} }
@keyframes bt-rise { from{transform:translateY(8px); opacity:0} to{transform:translateY(0); opacity:1} }
@keyframes bt-kaboom-flash { 0%{opacity:0} 8%{opacity:1} 100%{opacity:0} }
@keyframes bt-snip { 0%{transform:translateX(0)} 100%{transform:translateX(0)} }
@keyframes bt-sheet-up { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes bt-spin { to{transform:rotate(360deg)} }
@keyframes bt-shimmer { 0%{background-position:180% 0} 100%{background-position:-80% 0} }
@keyframes bt-iconpulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }