/* SPARK reference UI kit — v64.14. Shared visual values, not game rules.
   Reference: UI kit + four-screen composition supplied by the owner.
   Keep the approved dark HOLD/PASS gradients and #ff1419 danger fill. */
:root {
  --spark-font-ui: "Roboto Condensed", "Arial Narrow", sans-serif;
  --spark-midnight: #0a0f1f;
  --spark-surface: #111827;
  --spark-blue: #0066ff;
  --spark-cyan: #00e5ff;
  --spark-violet: #a855ff;
  --spark-magenta: #ff2d9b;
  --spark-danger: #ff3b3b;
  --spark-risk-fill: #ff1419;
  --spark-success: #00e676;
  --spark-gold: #ffc107;
  --spark-white: #ffffff;
  --spark-muted: #7da2ff;
  --spark-copy: #b5d5fb;
  --spark-type-h1: 32px;
  --spark-type-h2: 20px;
  --spark-type-h3: 16px;
  --spark-type-body: 14px;
  --spark-type-caption: 12px;
  --spark-type-numeric: 24px;
  --spark-radius-card: 15px;
  --spark-radius-button: 16px;
  --spark-card-fill: linear-gradient(145deg, #071326f5, #030b18fa);
  --spark-card-edge: linear-gradient(120deg, #126699a6, #5361b44d 45%, #442b7266 75%, #125e9d80);
  --spark-primary-fill:
    radial-gradient(ellipse at 0% 0%, #fc22e7 0%, #fc22e760 17%, transparent 42%),
    radial-gradient(ellipse at 100% 110%, #e91bdccc 0%, transparent 40%),
    linear-gradient(105deg, #9626f2 0%, #4527db 34%, #2021bc 67%, #3a21c7 100%);
  --reference-gold: var(--spark-gold);
  --reference-line: #2988e757;
  --text: var(--spark-white);
  --cyan: var(--spark-cyan);
  --success: var(--spark-success);
}

body, .app-shell, .app-shell button, .app-shell input { font-family: var(--spark-font-ui); }
.app-shell { padding-inline: 12px; }
.app-shell .reference-close { font-style: normal; font-weight: 400; }
.app-shell .reference-more-dots { font-size: 0; width: 4px; height: 4px; margin: 0; border-radius: 50%; background: currentColor; box-shadow: -6px 0 currentColor, 6px 0 currentColor; transform: none; }
/* Override the historical, conflicting per-screen fallback lists in styles.css.
   Brush h1/wordmark artwork intentionally stays independent of UI typography. */
#app .reference-screen :is(button, strong, b, small, em, p, h2, h3),
.app-shell .reference-topbar, .app-shell .reference-topbar button,
.reference-home .reference-logo-lockup > span { font-family: var(--spark-font-ui); font-stretch: normal; }
#app .reference-screen :is(strong,b) { font-weight: 700; }
#app .reference-screen :is(.reference-stat-value, .reference-danger-card, .reference-xp-bank, .reference-profile-progress, .reference-result-callout, .reference-loss-panel) {
  font-variant-numeric: lining-nums tabular-nums;
}
.reference-home .reference-logo-lockup > span { font-weight: 500; }
.reference-home .reference-profile-card small { font-weight: 400; }
.reference-home .reference-stat-row > .reference-stat-card small { font-weight: 400; }
#app .reference-game .reference-chain-head .reference-chain-meta :is(span,strong) { font-weight: 400; }
.reference-game .reference-danger-card small,
.reference-game .reference-xp-bank small { color: var(--spark-copy); font-weight: 400; }
.reference-game .reference-danger-card small { color: #ffb4bd; }
.reference-game .reference-xp-bank strong,
.reference-result-callout strong { color: var(--spark-gold); text-shadow: 0 0 14px #ffc10730; }
.reference-game .reference-action-grid button > strong { letter-spacing: -.015em; }
.reference-game .reference-action-grid button > small b { color: #ffdb27; }
.reference-game .reference-risk-track i { background: var(--spark-risk-fill); }

/* Dark glass: thin coloured edges and a narrow reflected top facet. */
.reference-home .reference-stat-row > .reference-stat-card,
.reference-home .reference-incoming,
.reference-game .reference-xp-bank,
.reference-result-callout,
.reference-loss-panel {
  border: 1px solid transparent;
  border-radius: var(--spark-radius-card);
  background: var(--spark-card-fill) padding-box, var(--spark-card-edge) border-box;
  box-shadow: inset 0 1px 0 #c1dfff12, 0 8px 22px #00000038;
}
.reference-result-callout {
  --spark-card-fill: linear-gradient(145deg, #05202af5, #030d1bfa);
  --spark-card-edge: linear-gradient(120deg, #10afbd99, #21679660 65%, #5353bc70);
}
.reference-loss-panel {
  --spark-card-fill: linear-gradient(145deg, #150d20f5, #080c18fa);
  --spark-card-edge: linear-gradient(120deg, #a73a715c, #42305260 65%, #4f428060);
}
.reference-result-callout strong { font-size: 40px; line-height: 1.1; }
.reference-result-callout span { font-size: 16px; line-height: 1.25; color: var(--spark-copy); }
.reference-result-callout b { color: var(--spark-danger); }
/* Interim headings stay separate from the UI font until brush artwork is ready.
   Prevent overlapping lines and bloom obscuring the letter edges. */
.reference-screen .reference-brush-title { font-weight: 400; line-height: 1; }
.reference-brush-title.success { text-shadow: 0 0 6px #00f58370, 0 0 20px #00ff8c38; }
.reference-brush-title.explosion { text-shadow: 0 0 6px #ff143970, 0 0 20px #ff1f4a38; }
.reference-loss-panel span { font-size: 14px; }
.reference-loss-panel strong { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 16px; line-height: 1.2; }
.reference-loss-panel > div { min-height: 44px; border-bottom: 0; }
.reference-loss-panel > div:first-child strong,
.reference-loss-panel > div:last-child strong { color: var(--spark-gold); }

/* One primary treatment for Start, Restart and Telegram handoff. */
.reference-screen .reference-primary,
.reference-home .reference-primary {
  min-height: 60px;
  padding: 12px 16px;
  border: 1px solid #bb7dffb3;
  border-radius: var(--spark-radius-button);
  background: var(--spark-primary-fill);
  color: var(--spark-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  box-shadow: inset 0 1px #eed0ff70, inset 0 -1px #ed47ff38, 0 0 12px #822fff33, 0 8px 20px #5728d92e;
}
.reference-screen .reference-telegram {
  --spark-primary-fill: radial-gradient(ellipse at 0 0, #fa28ec, transparent 40%), linear-gradient(105deg, #9a28eb 0%, #3347eb 42%, #0066ff 78%, #008fff 100%);
  border-color: #39a4ff;
}
.reference-screen .reference-secondary {
  border-radius: var(--spark-radius-button);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(145deg, #1b2037, #0c1021);
  box-shadow: inset 0 1px #d5ddff17;
}
.reference-screen :is(.reference-primary,.reference-secondary,.reference-hold,.reference-pass-button) {
  transition: box-shadow 150ms ease, transform 150ms ease, opacity 150ms ease;
  touch-action: manipulation;
}
.reference-screen :is(.reference-primary,.reference-secondary,.reference-hold,.reference-pass-button):active:not(:disabled) { transform: translateY(1px); }
.app-shell button:focus-visible, .app-shell summary:focus-visible { outline: 2px solid #b6f5ff; outline-offset: 3px; }
.reference-screen :is(.reference-primary,.reference-hold,.reference-pass-button):disabled { animation: none; cursor: wait; opacity: .55; }

/* Vector icons have predictable bounds; no platform-specific emoji/glyph shape. */
.spark-ui-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; fill: currentColor; vertical-align: middle; }
.reference-primary .spark-ui-icon, .reference-secondary .spark-ui-icon { width: 22px; height: 22px; }
.reference-primary > span, .reference-secondary > span { display: grid; place-items: center; }
.reference-incoming .spark-ui-icon { width: 22px; height: 22px; }
.reference-loss-panel .spark-ui-icon { width: 21px; height: 24px; }
.reference-loss-panel .reference-fire-icon { width: 19px; height: 24px; }
.reference-loss-panel .reference-people-icon { width: 23px; height: 22px; fill: #b8b7d8; }
.reference-fire-icon .fire-outer { fill: #ff2346; }
.reference-fire-icon .fire-core { fill: #ff6a18; }
.reference-fire-icon .fire-hotspot { fill: #ffda52; }
.reference-share-actions .spark-ui-icon { width: 23px; height: 23px; }
.reference-share-actions button { min-height: 68px; }
.reference-share-actions small { font-size: 12px; line-height: 16px; font-weight: 400; }
.reference-screen :is(.reference-button-note,.reference-keep-alive) { font-size: 14px; line-height: 20px; color: var(--spark-copy); }
.reference-home .reference-incoming strong { font-size: 15px; font-weight: 500; }
.reference-home .reference-incoming small { font-size: 12px; line-height: 16px; }
body:has(.reference-home) .bottom-nav button { font-size: 12px; line-height: 16px; }
body:has(.reference-home) .bottom-nav button.active { color: #bb6bff; }
body:has(.reference-home) .bottom-nav button:not(.active) { color: #7f9ac9; }

@media (max-width: 350px) {
  .reference-loss-panel { padding-inline: 10px; }
  .reference-loss-panel strong { font-size: 14px; }
  .reference-loss-panel > div { gap: 6px; }
  .reference-screen .reference-primary { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-screen :is(.reference-primary,.reference-secondary,.reference-hold,.reference-pass-button) { transition: none; }
}