/* =====================================================================
   wow·poly — polymarket-style dark
   Flat surfaces, no glass, no shadows. Single orange accent. Tabular
   numerals. Two cards per row on big screens; hero widget at the top.
   ===================================================================== */

:root{
  /* Backgrounds — kainos canonical */
  --bg:        #0a0b10;
  --surface:   #0d0e14;
  --surface-2: #111218;
  --surface-3: #1a1b25;
  --line:      rgba(255, 255, 255, 0.04);
  --line-2:    rgba(255, 255, 255, 0.10);

  --ink:       #f2f2f2;
  --sub:       #a8a8a8;
  /* Raised from #6a6a6a (2026-08-28 audit: 3.4-3.7:1 vs both --bg and
     --surface — fails WCAG AA 4.5:1 for the ~86 rules that use it as body
     text). #949494 clears 4.5:1 against --bg (#0a0b10 -> 6.48:1) AND
     against the card surface (--surface #0d0e14 -> 6.35:1, --surface-2
     #111218 -> 6.16:1) with margin. */
  --muted:     #949494;

  /* Brand — kainos red-pink primary, orange partner only in gradient */
  --accent:    #ff3d5a;
  --accent-2:  #ff7a2d;                        /* gradient partner */
  --accent-hi: #ff5874;
  --accent-dim: rgba(255, 61, 90, 0.10);
  --accent-dim-2: rgba(255, 61, 90, 0.20);
  --brand-grad-90:  linear-gradient(90deg,  #ff3d5a, #ff7a2d);
  --brand-grad-135: linear-gradient(135deg, #ff3d5a, #ff7a2d);
  /* Round 3 (F2, 2026-08-30): the bright brand colors fail AA under white
     12px text (measured composited: #ff3d5a 3.46:1, #ff7a2d 2.60:1). Every
     fill that CARRIES white small text uses these -deep variants instead
     (worst gradient stop 4.76:1 under #fff); :hover uses the darker -press
     pair (worst stop 5.39:1) so hover RAISES contrast — a brightness() hover
     on a text-bearing fill un-fixes the rest state (F1). The bright originals
     stay for non-text UI: borders, tally bars, dots, and gradient-clip
     display text on the dark bg (that direction measures 5.6:1, passes). */
  --accent-deep:         #d63249;              /* white on it: 4.76:1 */
  --brand-grad-90-deep:  linear-gradient(90deg,  #d63249, #b4551d);
  --brand-grad-135-deep: linear-gradient(135deg, #d63249, #b4551d);
  --brand-grad-90-press:  linear-gradient(90deg,  #c62f46, #a9511e);
  --brand-grad-135-press: linear-gradient(135deg, #c62f46, #a9511e);

  /* Round 5: var(--text-soft) was referenced 11 times (admin header-config
     UI) but NEVER DEFINED — the labels inherited default black and measured
     1.09:1 on the dark panel. One definition fixes the class. */
  --text-soft: #b8bcc8;                        /* 9.4:1 on the dark panels */

  /* Functional — never blends with brand red */
  --up:        #14F195;                        /* solana green — longs/yes/up */
  --up-hi:     #1aff9f;
  --up-dim:    rgba(20, 241, 149, 0.08);
  --up-dim-2:  rgba(20, 241, 149, 0.18);
  --dn:        #ef5350;                        /* coral red — shorts/no/down */
  --dn-hi:     #ff6a67;
  --dn-dim:    rgba(239, 83, 80, 0.08);
  --dn-dim-2:  rgba(239, 83, 80, 0.18);
  --warn:      #f59e0b;

  /* Round 3 (F5, 2026-08-30): ONE track definition for the market card grid.
     .grid and .awaiting-body both read this variable, so they cannot drift
     apart again at any breakpoint (the round-2 C12 fix copied the value and
     the mobile override then only reached .grid — 340px minimum tracks
     overflowed 320-360px phones inside expanded disclosures). The mobile
     media blocks override the VARIABLE, which retargets every reader. */
  --card-grid-tracks: repeat(auto-fill, minmax(340px, 1fr));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Round 4 (2026-08-30): Chrome's UA placeholder (#757575) measures 4.05:1
   on the app's dark inputs - pin every placeholder to the AA-checked muted
   grey (element-specific rules below may still override with >= AA pairs). */
input::placeholder, textarea::placeholder{ color: var(--muted); opacity: 1; }

/* Author rules with display: flex/grid/etc. would otherwise override the
   built-in [hidden] UA rule. Force hidden to win. */
[hidden] { display: none !important; }

html, body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}
body{ padding-bottom: 60px; }                  /* room for danmaku bar */
#heatmap, .halo, .grid-bg, .grain, .vignette { display: none !important; }
.reveal { /* no-op */ }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* ─────────────────────────── TOP BAR ─────────────────────────── */

.topbar{
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* The shared topnav (#topnav-root .topbar, holds the notif bell/dropdown)
   and the legacy category chips bar (.topbar-legacy-chips) on the home
   page are sibling sticky headers that both match .topbar and therefore
   share the same z-index:30 stacking context. Per stacking-context rules,
   equal z-index siblings paint in DOM order — since the chips bar comes
   second in the markup it was painting over the notif dropdown even
   though .notif-menu itself has a much higher z-index (that z-index is
   scoped inside the topnav header's own stacking context and can't
   escape it). Bump the topnav header above the chips bar so its
   dropdowns (notif menu, wallet menu) render on top. */
#topnav-root .topbar{ z-index: 40; }
.topbar-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  flex-wrap: wrap;                                /* let wallet pill drop on tablets */
}
.topbar-inner > .search{
  flex: 1 1 240px;                                /* search shrinks/grows; lets wallet wrap */
  min-width: 180px;
}

.brand{ display: flex; align-items: center; gap: 10px; }
.brand-mark{
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand-text{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600; font-size: 13.5px;
  color: var(--ink);
}
.brand-text span{
  background: var(--brand-grad-90);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 1px;
  font-weight: 700;
}

.search-wrap{
  position: relative;
  flex: 1;
  max-width: 380px;
  display: inline-flex;
}
.search{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  flex: 1; width: 100%;
  color: var(--muted);
}
/* Recent / suggested searches dropdown — appears on focus */
.search-suggestions{
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 0;
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.search-suggestions[hidden]{ display: none; }
.search-sugg-header{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px 4px;
}
.search-sugg-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.search-sugg-item:hover{ background: rgba(255,255,255,0.04); }
.search-sugg-icon{ color: var(--muted); font-size: 12px; }
.search-sugg-clear{
  display: inline-block;
  margin-left: auto;
  background: transparent; border: 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
}
.search-sugg-clear:hover{ color: var(--accent); }
.search:focus-within{ border-color: var(--accent); color: var(--ink); }
.search input{
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--ink);
  font-family: inherit; font-size: 13px;
}
.search input::placeholder{ color: var(--muted); }

.nav-meta{ display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Compact "wallet connect" pill at the top right */
.wallet-pill{ position: relative; }

/* Floating +/− delta indicator above the wallet pill — fires whenever the
   WWB balance changes (bet placed, winnings credited, tie refund). */
.wallet-delta-layer{
  position: absolute;
  top: 0; right: 0;
  pointer-events: none;
  height: 0;
}
.wallet-delta{
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  pointer-events: none;
  animation: walletDelta 1.8s cubic-bezier(.22, 1, .36, 1) forwards;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.wallet-delta.pos.wwb { color: var(--up); }
.wallet-delta.neg.wwb { color: var(--accent); }
/* Free PT — muted so it visually reads as play-money */
.wallet-delta.pos.free{
  color: var(--sub);
  font-size: 12px;
  font-weight: 600;
}
.wallet-delta.neg.free{
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
@keyframes walletDelta {
  0%   { opacity: 0; transform: translateY(8px) scale(0.85); }
  18%  { opacity: 1; transform: translateY(0)   scale(1.05); }
  30%  { transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.95); }
}
.btn-wallet{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px;
  background: var(--surface);
  border: 1px solid rgba(255, 61, 90, 0.28);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  transition: all .15s;
}
.btn-wallet:hover{ border-color: var(--accent); background: var(--surface-2); }
.btn-wallet .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 6px var(--up);
}
.btn-wallet .addr{
  color: var(--sub);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.btn-wallet .amt{ color: var(--ink); font-weight: 600; }
.btn-wallet .lbl{
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.wallet-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 240px;
  padding: 12px 14px;
  background: rgba(13, 14, 20, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: 'Inter', sans-serif;
}
.wallet-menu[hidden]{ display: none !important; }
.wm-head{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.wm-head .mono{ color: var(--ink); font-weight: 600; }
.wm-addr{
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;            /* keep visual rhythm with neighbouring elements */
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wm-addr:hover{
  background: var(--surface-2, #16161a);
  border-color: var(--line);
}
.wm-addr.copied{
  color: var(--up);
  border-color: var(--up);
}
.wm-status{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--up);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wm-status::before{
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 4px var(--up);
}
.wm-row{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
  color: var(--sub);
}
.wm-row.small{ font-size: 12px; color: var(--muted); }
.wm-row .mono{ color: var(--ink); font-size: 12px; font-weight: 600; }
.wm-refresh{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 1px 6px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 6px;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 1.4;
}
.wm-refresh:hover{ color: var(--accent); border-color: var(--accent); }
.wm-refresh:disabled{ opacity: 0.5; cursor: wait; }
.wm-row .mono.accent{
  background: var(--brand-grad-90);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm-rule{ height: 1px; background: var(--line); margin: 3px 0; }
.wm-status.connected{
  color: var(--up);
}
.wm-status.connected::before{ background: var(--up); box-shadow: 0 0 4px var(--up); }

/* Wallet menu action buttons */
.wm-connect, .wm-deposit{
  margin-top: 8px;
  width: 100%;
  text-align: center;
  margin-left: 0 !important;          /* override .btn-primary's margin-left:auto */
}
.wm-disconnect{
  margin-top: 4px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: inherit; font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.wm-disconnect:hover{ color: var(--dn); border-color: var(--dn); }
.btn-secondary{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--sub);
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.btn-secondary:hover{ color: var(--ink); border-color: var(--line-2); }

/* ─────────────────────── DEPOSIT MODAL ─────────────────────── */

.deposit-modal{
  position: fixed; inset: 0;
  z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  animation: dm-bg-in .2s ease;
}
@keyframes dm-bg-in { from { opacity: 0; } to { opacity: 1; } }
.dm-card{
  width: min(440px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  animation: dm-pop .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes dm-pop { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.dm-head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.dm-close{
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.dm-close:hover{ color: var(--ink); }
.dm-body{
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.dm-row{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
  color: var(--sub);
}
.dm-lbl{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dm-val{ color: var(--ink); }
.dm-amount-label{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
#dmAmount{
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  letter-spacing: 0.02em;
}
#dmAmount:focus{ border-color: var(--accent); }
.dm-quick{ display: flex; gap: 4px; }
.dm-quick-btn{
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all .12s;
}
.dm-quick-btn:hover{ color: var(--accent); border-color: var(--accent); }
.dm-status{
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.dm-status.ok{ border-color: var(--up); color: var(--up); }
.dm-status.err{ border-color: var(--dn); color: var(--dn); }
.dm-submit{
  margin-top: 4px !important;
  margin-left: 0 !important;
  width: 100%;
  padding: 11px 14px !important;
  font-size: 13px !important;
  text-align: center;
}
.dm-submit:disabled{ opacity: 0.55; cursor: not-allowed; }
.dm-tiny{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}

.btn-ghost{
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--sub);
  font-size: 13px;
}
.btn-ghost:hover{ border-color: var(--line-2); color: var(--ink); }
.btn-guide{ font-size: 15px; padding: 5px 9px; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }

.chips-bar{
  border-top: 1px solid var(--line);
}
.chips-bar-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.chips{
  display: flex;
  gap: 4px;
  flex: 1; min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip{
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--sub);
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.chip:hover{ color: var(--ink); border-color: var(--line-2); }
.chip.active{
  background: var(--ink);
  color: #000;
  border-color: var(--ink);
  font-weight: 600;
}

/* ─────────────────────────── HERO WIDGET ─────────────────────────── */

.hero-widget-wrap{
  position: relative;
  max-width: 1280px;
  margin: 22px auto 0;
  padding: 0 20px;
  display: flex; align-items: center; gap: 8px;
}

.hw-arrow{
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
  transition: all .15s;
}
.hw-arrow:hover{ background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

.hero-widget{
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: 160px 180px 1.4fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* rotating news headline ticker (left column) */
.hw-news-ticker{
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
}
.hw-nt-head{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--up);
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
  position: relative; z-index: 2;
}
.hw-nt-head .dot.live{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 6px var(--up);
  animation: pulse 1.6s infinite;
}
.hw-nt-head span:not(.dot){ color: var(--ink); font-weight: 600; }

/* Stage: single item visible at a time, others slide in/out */
.hw-nt-stage{
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
}
.hw-nt-item{
  position: absolute;
  inset: 0;
  padding: 12px 12px 8px;
  display: flex; flex-direction: column;
  gap: 6px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity 0.4s ease;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}
.hw-nt-item[style*="background-image"]::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 100%);
  z-index: 0;
}
.hw-nt-item[style*="background-image"] .hw-nt-cat,
.hw-nt-item[style*="background-image"] .hw-nt-title,
.hw-nt-item[style*="background-image"] .hw-nt-source,
.hw-nt-item[style*="background-image"] .hw-nt-source a {
  position: relative; z-index: 1;
  color: #fff !important;
}
.hw-nt-item.active{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.hw-nt-item.exiting{
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.55,0.055,0.675,0.19),
              opacity 0.3s ease;
}
.hw-nt-cat{
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}
.hw-nt-title{
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hw-nt-source{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: auto;
}
.hw-nt-source a{ color: var(--muted); text-decoration: none; }
.hw-nt-source a:hover{ color: var(--accent); }

/* Pagination dots */
.hw-nt-foot{
  display: flex; justify-content: center; align-items: center;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  position: relative; z-index: 2;
}
.hw-nt-dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background 0.3s;
}
.hw-nt-dot.active{ background: var(--accent); }

/* live comment column */
.hw-live-comments{
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  min-height: 240px;
}
.hw-lc-head{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--up);
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}
.hw-lc-head .dot.live{ width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 6px var(--up);animation:pulse 1.6s infinite; }
.hw-lc-head span:not(.dot){ color:var(--ink);font-weight:600; }
.hw-lc-list{
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 8px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.hw-lc-list::-webkit-scrollbar{ width:4px; }
.hw-lc-list::-webkit-scrollbar-thumb{ background:var(--line-2); }
.hw-lc-empty{ text-align:center;color:var(--muted);font-size:12px;padding:20px 6px; }
.hw-lc-item{ display:flex;align-items:baseline;gap:6px;font-size:12px;line-height:1.45;padding:3px 4px;border-left:2px solid transparent; }
.hw-lc-item.mine{ border-left-color:var(--accent); }
.hw-lc-item.fresh{ animation:lc-fade-in .25s ease; }
@keyframes lc-fade-in{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.hw-lc-meta{ flex-shrink:0;font-size:12px;color:var(--muted); }
.hw-lc-text{ color:var(--ink);word-break:break-word;flex:1;font-size:12px; }
.hw-lc-del{ flex-shrink:0;background:transparent;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:0 2px; }
.hw-lc-del:hover{ color:var(--dn); }
.hw-lc-compose{ display:flex;border-top:1px solid var(--line);background:rgba(0,0,0,0.18);flex-shrink:0; }
#hwLcInput{ flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);font-family:'Inter',sans-serif;font-size:12px;padding:8px 8px; }
#hwLcInput::placeholder{ color:var(--muted); }
.hw-lc-send{ background:transparent;border:none;border-left:1px solid var(--line);color:var(--accent);padding:0 10px;font-size:14px;cursor:pointer; }
.hw-lc-send:hover{ background:var(--accent-dim); }

.hw-chart-pane{
  display: flex; flex-direction: column;
  min-height: 240px;
  border-right: 1px solid var(--line);
  padding: 14px 16px;
  gap: 10px;
}
.hw-head{
  display: flex; justify-content: space-between; align-items: center;
}
.hw-sym-block{
  display: flex; align-items: center; gap: 10px;
}
.hw-sym-text{
  display: flex; align-items: baseline; gap: 8px;
}
/* Coin icon — 24px, image or letter-badge fallback */
.hw-sym-icon{
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--brand-grad-135-deep);  /* letter fallback icon — was 2.60:1 (F2) */
  overflow: hidden;
}
.hw-sym-icon.has-img{
  background: transparent;
}
.hw-sym-icon img{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.hw-sym-icon[data-sym="btc"]{ background: linear-gradient(135deg, #f7931a, #ffb547); }
.hw-sym-icon[data-sym="nyan"]{ background: linear-gradient(135deg, #ff4fa3, #ff7a2d); }
.hw-sym-icon[data-sym="wwb"]{ background: linear-gradient(135deg, #14F195, #0db87a); }
.hw-sym{
  font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.01em;
}
.hw-period{
  font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-grad-90-deep);  /* was 2.60:1 at orange stop (F2) */
  padding: 3px 7px;
  font-weight: 700;
}
.hw-time{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink);
}
.hw-time .dot.live{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up);
  animation: pulse 1.6s infinite;
}
.hw-phase{
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 1px 6px;
}
.hw-phase.betting{
  color: var(--up);
  background: var(--up-dim);
}
.hw-phase.locked{
  color: var(--dn);
  background: var(--dn-dim);
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.hw-chart{
  flex: 1; min-height: 160px;
  width: 100%;
  display: block;
  background:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px) 0 0/8.33% 100%;
}
.hw-meta{
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.hw-pool-delta{
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  animation: poolDelta 1.8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.hw-pool-delta.wwb { color: var(--up); }
.hw-pool-delta.free{
  color: var(--sub);
  font-size: 12px;
  font-weight: 600;
  /* offset slightly so a simultaneous WWB + PT pair don't perfectly overlap */
  left: 6px;
  animation-delay: 80ms;
}
@keyframes poolDelta {
  0%   { opacity: 0; transform: translateY(8px)  scale(0.9); }
  18%  { opacity: 1; transform: translateY(0)    scale(1.06); }
  30%  { transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(1); }
}
.hw-meta span span{ color: var(--ink); }
.hw-meta-up{ color: var(--up); font-weight: 600; }
.hw-meta-dn{ color: var(--dn); font-weight: 600; }
.hw-meta-up span{ color: var(--up); }
.hw-meta-dn span{ color: var(--dn); }
.hw-meta-up .muted, .hw-meta-dn .muted{ color: var(--muted); font-weight: 400; }

.hw-vote-pane{
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.hw-price-block{
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--line);
}
.hw-price{
  font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.hw-delta{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.hw-delta.up{ color: var(--up); }
.hw-delta.dn{ color: var(--dn); }
/* Price feed stale (2026-09-03): the number on screen is the LAST KNOWN quote,
   not a live one. Dim it and colour the note amber so it reads as a warning
   rather than as a market that happens to be flat — which is exactly how the
   frozen feed read for eight days. Measured on --bg #0a0b10: #9a9a9a = 6.99:1,
   #FFB020 = 10.75:1 (both over the 4.5:1 floor this file holds to; --muted
   #6a6a6a would be 3.63:1 and only passes as large text, so it is not used). */
.hw-price.is-stale{ color: #9a9a9a; }
.hw-delta.is-stale{ color: #FFB020; }
.hw-vote-split{
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.hwvs-row{
  display: flex; align-items: baseline; gap: 8px;
}
.hwvs-row .hwvs-side{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  width: 60px;
}
.hwvs-row.up .hwvs-side{ color: var(--up); }
.hwvs-row.dn .hwvs-side{ color: var(--dn); }
.hwvs-pct{
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  min-width: 38px;
}
.hwvs-detail{
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.hwvs-bar{
  display: flex;
  height: 4px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.hwvs-bar-fill{
  height: 100%;
  transition: width .4s ease;
}
.hwvs-bar-fill.up{ background: var(--up); }
.hwvs-bar-fill.dn{ background: var(--dn); }

.hw-quad-wrap{
  position: relative;
  flex: 1;
  display: flex;
}
.hw-quad-wrap > .hw-quad{ flex: 1; }
.hw-quad{
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  flex: 1;
}

/* Settle-phase overlay over the 4 buttons */
.hw-lock-overlay{
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  background: rgba(13, 14, 20, 0.94);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(239, 83, 80, 0.4);
  text-align: center;
  animation: lockIn .25s ease;
}
@keyframes lockIn { from { opacity: 0; } to { opacity: 1; } }
/* Round-4 follow-up (2026-08-30): the shared `pulse` keyframe drops to
   opacity .35, which composited this glyph to 2.97:1 over the .94-alpha lock
   overlay - under the 3:1 bar for a meaning-bearing monochrome symbol. The
   round-4 contrast sweep re-encoded STATIC opacity dimming but not the
   ANIMATED kind, and the measurer samples mid-animation, which is how it was
   caught. Scoped keyframe (the shared `pulse` also drives decorative dots
   elsewhere and must keep its full range). */
@keyframes lockIconPulse { 0%,100%{opacity:1} 50%{opacity:0.82} }
.hw-lock-icon{
  font-size: 22px;
  animation: lockIconPulse 1.4s infinite;
}
.hw-lock-msg{
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink);
}
.hw-lock-sub{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.hw-lock-time{
  font-size: 16px;
  font-weight: 700;
  color: var(--dn);
  margin-top: 4px;
}

.hw-claim-btn{
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  /* dark text: #fff on --up green measured 1.50:1 (F2, 2026-08-30);
     #00120c on it is 12.86:1 — same pattern as .qbtn.yes.wwb below. */
  background: var(--up); color: #00120c; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 700; padding: 5px 14px; cursor: pointer;
  white-space: nowrap; letter-spacing: 0.04em; z-index: 2;
}
.hw-claim-btn:hover{ opacity: 0.88; }

.hw-dots{
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.hw-dot{
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all .15s;
}
.hw-dot:hover{ color: var(--ink); border-color: var(--line-2); }
.hw-dot.on{
  color: var(--accent);
  border-color: var(--accent);
}

/* ─────────────────────────── SECTIONS ─────────────────────────── */

.section{
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 0 20px;
}

/* Daily side-by-side — when a daily market has m.videoId, .daily-split
   overrides the absolute-overlay model with a clean 7:3 grid. Video on
   the LEFT (fully shown, no overlay), title + bet panel on the RIGHT. */
.featured-big.daily-split{
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 14px;
  padding: 14px;
  align-items: stretch;
  min-height: 0;
}
.featured-big.daily-split .ds-video{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  min-height: 0;
}
.featured-big.daily-split .ds-video-frame{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.featured-big.daily-split .ds-side{
  display: flex; flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.featured-big.daily-split .ds-badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 1px;
  color: var(--muted);
}
.featured-big.daily-split .ds-cat{
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface-2); color: var(--text);
}
.featured-big.daily-split .ds-pct{
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.featured-big.daily-split .ds-pct-num{
  font-size: 2rem; font-weight: 700; color: var(--text);
}
.featured-big.daily-split .ds-pct-lbl{
  font-size: 12px; color: var(--muted); letter-spacing: 1px;
}
.featured-big.daily-split .ds-q{
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
}
.featured-big.daily-split .ds-reason{
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
  /* clamp so it doesn't push the bet panel off-screen */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-big.daily-split .fb-bet-grid,
.featured-big.daily-split .fb-meta{
  margin-top: auto;
}
@media (max-width: 760px){
  .featured-big.daily-split{
    grid-template-columns: 1fr;
  }
}

/* Featured #1 + Daily (legacy overlay variant) — when no videoId,
   .fb-bg slot is replaced with an autoplay-muted-loop YouTube iframe
   that sits behind the content. CRITICAL: keep position:absolute +
   inset:0 from the base .fb-bg rule. */
.fb-bg.has-video{
  position: absolute; inset: 0;
  overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.fb-bg.has-video .fb-bg-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;       /* clicks fall through to bet buttons */
}
/* Daily — show the video FULLY, not cropped. Aspect ratio 16/9
   inside the available space; black bars are fine. */
.fb-bg.has-video.video-contain .fb-bg-video{
  position: relative; inset: auto;
  aspect-ratio: 16 / 9;
  width: 100%; height: auto;
  max-width: 100%; max-height: 100%;
}
/* Featured Top #1 — full-bleed cover background video. Scale the
   16:9 frame to fill the (often taller) card without letterboxing. */
.fb-bg.has-video.video-cover .fb-bg-video{
  width: 100%; height: 100%;
  transform: scale(1.4);
  transform-origin: center;
}
.fb-bg.has-video::after{
  /* readability scrim over the video so the white % numbers stay legible */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

/* Compact card variant for the 3 stocks stacked beside the section
   video. Each card must fit in ~1/3 of the 16:9 video height (often
   ~90-110px tall). Hide non-essential rows, tighten padding, shrink
   the quad buttons. The .stock-hero block below makes each card
   flex:1 so the 3 split the column equally. */
.stock-hero-cards .card{
  padding: 6px 10px;
  gap: 4px;
  grid-template-columns: 32px 1fr;
  align-items: center;
}
.stock-hero-cards .card .card-thumb{ width: 32px; height: 32px; }
.stock-hero-cards .card .card-body{ gap: 4px; padding: 0; min-height: 0; }
.stock-hero-cards .card .jp-spark{ display: none; }
.stock-hero-cards .card .why{ display: none; }
.stock-hero-cards .card .q{
  /* 12px, not 11px — this was the only font the readability pass made SMALLER,
     below its own 12px mobile floor (defect C15, 2026-08-29). */
  font-size: 12px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stock-hero-cards .card .card-head{ margin: 0; }
.stock-hero-cards .card .card-head .cat{ font-size: 11px; }
.stock-hero-cards .card .card-head .vol{ font-size: 11px; }
.stock-hero-cards .card .prob-row{ margin: 0; gap: 1px; }
.stock-hero-cards .card .prob-pct{ font-size: 11px; }
.stock-hero-cards .card .prob-bar{ height: 4px; }
.stock-hero-cards .card .prob-pool,
.stock-hero-cards .card .prob-tickets{ display: none; }
.stock-hero-cards .card .quad{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3px;
}
.stock-hero-cards .card .quad .qbtn{
  padding: 6px 3px;
  font-size: 12px;
  min-height: 30px; /* real bet buttons — keep a usable tap target on mobile */
  line-height: 1.15;
}
.stock-hero-cards .card .quad .qbtn .qb-side{ font-size: 11px; }
.stock-hero-cards .card .quad .qbtn .qb-kind{ font-size: 11px; }
.stock-hero-cards .card .card-foot{ display: none; }

/* US / JP — top row: one big video on one side, 3 stacked cards on the
   other side. The grid stretches both columns to equal height, so the
   3 cards split that height evenly (each gets exactly 1/3 of the
   video's height). Below the hero, the rest of the markets fall into
   the normal .grid layout. */
.stock-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.stock-hero[data-side="left"]  { grid-template-areas: 'video cards'; }
.stock-hero[data-side="right"] { grid-template-areas: 'cards video'; }
.stock-hero-video{
  grid-area: video;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  min-height: 0;
}
.stock-hero-video iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.stock-hero-cards{
  grid-area: cards;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  /* Match the video's height — set max-height to the video aspect ratio
     of the same column width. The grid auto-stretches both columns to
     the taller one; pinning max-height to the video clamps the cards
     to the video's height exactly. */
}
.stock-hero-cards .card{
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
@media (max-width: 760px){
  .stock-hero{ grid-template-columns: 1fr; }
  .stock-hero[data-side="left"],
  .stock-hero[data-side="right"]{ grid-template-areas: 'video' 'cards'; }
  .stock-hero-cards .card{ flex: 0 0 auto; }
}

.section-head{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

/* Daily carousel nav */
.daily-nav{
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}
.daily-nav-btn{
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); font-size: 16px; line-height: 1;
  padding: 2px 8px; cursor: pointer; border-radius: 3px;
  font-family: inherit;
}
.daily-nav-btn:hover{ background: var(--accent-dim); color: var(--accent); }
.daily-dots{ display: flex; gap: 5px; align-items: center; }
.daily-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-2); transition: background 0.25s;
}
.daily-dot.active{ background: var(--accent); }

/* Daily carousel — single big card, slides horizontally */
.daily-carousel{
  position: relative;
  overflow: hidden;
  min-height: 460px;
}
.daily-slide{
  position: absolute; inset: 0;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.35s ease;
}
.daily-slide.from-left{ transform: translateX(-100%); }
.daily-slide.active{
  transform: translateX(0);
  opacity: 1;
}
.daily-slide.exiting-left{
  transform: translateX(-100%);
  opacity: 0;
}
.daily-slide.exiting-right{
  transform: translateX(100%);
  opacity: 0;
}
.section-no{
  color: #fff;
  font-weight: 700;
  background: var(--brand-grad-135-deep);  /* was 2.60:1 at orange stop (F2) */
  padding: 2px 7px;
}
.section-title{
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.section-filter{
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.section-dot{ flex: 1; height: 1px; background: var(--line); }
.section-meta{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.live-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up);
  animation: pulse 1.6s infinite;
}

/* ─────────────────────────── FEATURED · TOP 4 ─────────────────────────── */
/* Layout: [big card] [betting col] [3 small cards stacked]                */

.featured-grid{
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 8px;
  /* Big card spans the full left column; right column stacks all small cards. */
}

/* ─── BIG card (left) ─── */
.featured-big{
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: block;
  min-height: 460px;
}
.fb-bg{
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,61,90,0.85) 0%, rgba(255,122,45,0.85) 100%),
    radial-gradient(800px 400px at 80% 20%, rgba(255,255,255,0.10), transparent 60%);
}
/* Per-category accent on the big card */
.fb-bg[data-cat="crypto"]{ background: linear-gradient(135deg, #ff7a2d, #ffb547); }
.fb-bg[data-cat="ai"]    { background: linear-gradient(135deg, #7a3dff, #b38dff); }
.fb-bg[data-cat="tech"]  { background: linear-gradient(135deg, #ff4fa3, #ff7a2d); }
.fb-bg[data-cat="economy"]{ background: linear-gradient(135deg, #14f195, #0db87a); }
.fb-bg[data-cat="sports"] { background: linear-gradient(135deg, #14f195, #ff7a2d); }
.fb-bg[data-cat="japan"]  { background: linear-gradient(135deg, #b38dff, #ff3d5a); }
.fb-bg[data-cat="world"]  { background: linear-gradient(135deg, #ff3d5a, #ff7a2d); }
.fb-bg[data-cat="science"], .fb-bg[data-cat="entertainment"]{ background: linear-gradient(135deg, #ff4fa3, #b38dff); }
.fb-bg[data-cat="breaking"]{ background: linear-gradient(135deg, #ef4444, #ff3d5a); }
/* When admin set an image, draw a vertical dark gradient over it for legibility */
.fb-bg.has-image{
  background-color: #0a0a0c;
}
.fb-bg.has-image::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.fb-watermark{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(60px, 9vw, 110px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.10);
  pointer-events: none;
  white-space: nowrap;
  text-transform: uppercase;
}

.fb-badge{
  position: absolute;
  top: 16px; left: 16px;
  display: flex; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
}
.fb-badge > span{
  padding: 4px 10px;
  /* Round 4: 0.45 black over a white admin image left white text at 2.3:1
     (and the light .fb-cat chip at 1.1:1). Near-opaque dark chips measure
     >= 15:1 over any frame. */
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(8px);
}
.fb-badge .fb-cat{ background: rgba(8, 8, 8, 0.88); }

.fb-pct{
  position: absolute;
  /* Round 6: top-anchored. The old top:50% + translateY(-50%) centered the
     plate on the WHOLE card, which sank it under the bottom .fb-text panel
     (rgba(0,0,0,.78)): the "YES probability" label rendered at 1.43:1 and
     the big % at 1.62:1 at 1440, and the plate was fully buried at 390 —
     silently "occluded" by the round-4/5 measurer, visible in
     r6-fb-pct-before-1440.png. Top-anchoring keeps it on the media band. */
  top: 18px; right: 24px;
  text-align: right;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  /* Round 4: the big % floated raw on the admin image/category gradient -
     1.12:1 over a bright frame, 1.6:1 on the economy green. Round 6: 0.72
     -> 0.85 — once the plate surfaced from behind .fb-text, its POOL line's
     12px #ff7a2d numerals measured 3.43:1 over the media worst case; 0.85
     puts them at >= 4.9:1 and matches the .fb-badge 0.88 family. */
  background: rgba(8, 8, 8, 0.85);
  padding: 10px 14px;
  border-radius: 12px;
}
.fb-pct-num{
  font-size: clamp(64px, 8vw, 96px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.fb-pct-num span{
  font-size: 0.4em;
  font-weight: 700;
  vertical-align: top;
  margin-left: 4px;
}
.fb-pct-lbl{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9d9d9;   /* was inherited #fff at opacity .85 — same rendered value, dim encoded in the color (F3) */
}
@media (max-width: 760px){
  /* Round 6: the 64px number floor made the plate ~124px tall — taller than
     the mobile media band above .fb-text (~110px), so its lower rows sank
     under the panel again. Smaller number + tighter padding keep the whole
     plate on the media band at 320-760px. */
  .fb-pct{ top: 12px; right: 14px; padding: 8px 10px; }
  .fb-pct-num{ font-size: 44px; }
}

.fb-text{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 20px 18px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fb-q{
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fb-reason{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.45;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fb-meta{
  display: flex; justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}
.fb-meta a{ color: #fff; }

/* ─── Bet grid inside the big card ─── */
.fb-bet-grid{
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: 6px;
  align-items: stretch;
  margin-top: 10px;
  margin-bottom: 12px;
}
.fb-bet-row-lbl{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border-left: 2px solid var(--accent);
  padding: 0 8px;
}
.qbtn.fb-bet{
  padding: 12px 14px;
  min-height: 52px;
}
.qbtn.fb-bet .qb-side{ font-size: 14px; }
.qbtn.fb-bet .qb-kind{ font-size: 12px; }
/* Round 4 (2026-08-30): the free-bet buttons and the row label sat with a
   transparent / 8% fill directly on the admin-set media - the NO side
   measured 3.5:1 on the fixture image and ~1:1 over a white frame. Text
   over arbitrary media carries its own near-opaque scrim (worst rgb(38)):
   UP 10.2:1, NO(-hi) 5.4:1, kind 5.0:1, label 15:1. */
.featured-big .qbtn.free,
.featured-big .fb-bet-row-lbl{
  background: rgba(8, 8, 8, 0.88);
}
.featured-big .qbtn.no.free .qb-side{ color: var(--dn-hi); }
.featured-big .card-time{
  background: rgba(8, 8, 8, 0.85);   /* --accent-dim over a bright frame was 3.24:1 */
  color: #ff8fa0;                    /* 6.4:1 on the chip's worst case */
}

/* ─── Small cards (right column, stacked) ─── */
.featured-small{
  grid-column: 2;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  cursor: pointer;
  min-width: 0;
}
.fs-head{
  display: flex; align-items: flex-start; gap: 10px;
  flex: 1;
}
.fs-thumb{
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 5px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  background: var(--surface-2);
}
.fs-head-text{
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.fs-head-row{
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.fs-rank{
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.fs-cat{
  color: var(--muted);
  letter-spacing: 0.06em;
  flex: 1;
}
.fs-pct{
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}
.fs-q{
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.fs-buys{
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.fs-buys .qbtn{
  padding: 6px 8px;
}
.fs-buys .qbtn .qb-side{ font-size: 12px; }
.fs-buys .qbtn .qb-kind{ font-size: 12px; }

.fs-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.fs-foot .card-time{ color: var(--text); }

@media (max-width: 880px) {
  .featured-grid{
    grid-template-columns: 1fr;
  }
  .featured-big{ grid-column: 1; grid-row: 1; min-height: 380px; }
  .featured-small{ grid-column: 1; grid-row: auto !important; }
  .fb-bet-grid{ grid-template-columns: 56px 1fr 1fr; }
}
@media (max-width: 480px) {
  .fb-bet-grid{
    grid-template-columns: 1fr 1fr;
  }
  /* Hide the row-label column on very narrow screens — labels live on the
     button text instead (qb-kind already shows "PT" / "WWB"). */
  .fb-bet-row-lbl{ display: none; }
}

/* ─────────────────────────── MARKET GRID ─────────────────────────── */

.grid{
  display: grid;
  grid-template-columns: var(--card-grid-tracks);  /* see --card-grid-tracks (F5) */
  gap: 8px;
}

.card{
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.card:hover{
  border-color: var(--line-2);
  background: var(--surface-2);
}

/* When a card has a left thumbnail, switch to a row layout. Small square icon
   on the left, Polymarket style — keeps the card's normal padding. */
.card.has-thumb{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: start;
}
.card.has-thumb .card-thumb{
  width: 56px; height: 56px;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}
.card.has-thumb .card-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.card.has-thumb .card-body{
  display: flex; flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.card.is-manual{ border-left: 2px solid var(--accent); }
@media (max-width: 540px){
  .card.has-thumb{ grid-template-columns: 48px 1fr; gap: 10px; }
  .card.has-thumb .card-thumb{ width: 48px; height: 48px; }
}

/* ── Compact "awaiting result" card (defect audit 2026-08-28) ───────────
   A closed-but-unresolved market can't be acted on, so it drops the
   quad bet grid / poll rings / trend line entirely — just thumbnail,
   question, current split and a status line at readable size. Built on
   top of .card.has-thumb's existing thumb+body grid. */
.card.card-compact{
  padding: 10px 14px;
  gap: 10px;
}
.card.card-compact .q{
  -webkit-line-clamp: 2;
  min-height: calc(15px * 1.4 * 1);
}
.cc-pct{
  font-size: 12px;
  display: flex; align-items: center; gap: 6px;
}
.cc-pct .up{ color: var(--up); }
.cc-pct .dn{ color: var(--dn); }
.cc-pct .vs{ color: var(--muted); }
/* Open/Last line on the compact stock card (C1, 2026-08-29). */
.cc-price{
  font-size: 12px;
  color: var(--sub);
}
.cc-price strong{ color: var(--ink); font-weight: 600; }
.cc-foot{ flex-wrap: wrap; }
.cc-status{
  font-size: 12px;
  color: var(--muted);
  /* No white-space:nowrap — it clipped mid-word ("closed 1h ag") on desktop
     cards and inside the awaiting columns (defect C6+C9, 2026-08-29). The
     .cc-foot is flex-wrap:wrap, so the status wraps to its own line and then
     within itself; min-width:0 lets it shrink instead of overflowing. */
  min-width: 0;
}

/* ── "Awaiting result (N)" disclosure — groups >3 compact cards behind a
   collapsed-by-default toggle instead of flooding the section. Spans the
   full grid width regardless of column count. ── */
.awaiting-disclosure{ grid-column: 1 / -1; }
.awaiting-toggle{
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--sub);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  cursor: pointer;
}
.awaiting-toggle:hover{ border-color: var(--line-2); color: var(--ink); }
.awaiting-toggle-arrow{ color: var(--muted); }
.awaiting-body{
  display: grid;
  /* Locked to .grid through the shared --card-grid-tracks variable (F5,
     2026-08-30). Round 2 copied .grid's 340px minmax literally, so .grid's
     mobile 1fr override never reached this rule and a disclosure with 4+
     cards overflowed 320-360px phones (340px track vs ~296px available,
     measured 40px horizontal overflow at 320). The variable makes the
     lockstep structural — a breakpoint change retargets both rules. */
  grid-template-columns: var(--card-grid-tracks);
  gap: 8px;
  margin-top: 8px;
}

.card-head{
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.cat{
  color: var(--accent);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.cat.japan{ color: #b38dff; }
.cat.crypto{ color: #ffb547; }
.cat.tech{ color: #ff7ac8; }
.cat.ai{ color: #b38dff; }
.cat.economy, .cat.sports{ color: var(--up); }
.cat.science, .cat.entertainment{ color: #ff7ac8; }
.cat.world{ color: var(--accent); }
.cat.breaking{ color: var(--dn); }
.cat.politics{ color: #b38dff; }
.vol{ color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }

.q{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(15px * 1.4 * 2);
}
.jp-name{ font-size: 16px; -webkit-line-clamp: 2; min-height: auto; }

.why{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  font-style: italic;
  border-left: 2px solid var(--line);
  padding-left: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prob-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
/* When the ring cluster is present, shift to a two-column layout */
.prob-row:has(.poll-rings) {
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 4px 8px;
}
.poll-rings {
  grid-row: 1 / 3;
  grid-column: 1;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.poll-rings canvas.poll-pie { display: block; }
.prob-row:has(.poll-rings) .prob-pct,
.prob-row:has(.poll-rings) .prob-bar {
  grid-column: 2;
}
/* YES%-over-time trend line under the prob row */
.poll-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.poll-trend canvas.poll-line {
  flex: 1 1 auto;
  height: 30px;
  min-width: 0;
}
.poll-trend-lbl {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.prob-pct{
  font-size: 13px; font-weight: 600;
  display: flex; gap: 4px; align-items: baseline;
}
.prob-pct .up{ color: var(--up); }
.prob-pct .dn{ color: var(--dn); }
.prob-pct .vs{ color: var(--muted); }
.prob-bar{
  height: 6px;
  background: var(--dn-dim);
  position: relative;
  overflow: hidden;
}
.prob-fill{
  position: absolute; inset: 0;
  width: var(--w, 0%);
  background: var(--up);
}

/* JP price strip */
.jp-prices{
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.jp-prices > div{
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  border-right: 1px solid var(--line);
}
.jp-prices > div:last-child{ border-right: none; }
.jp-prices .lbl{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.jp-prices .mono{ font-size: 12px; font-weight: 600; }
.jp-prices .mono.up{ color: var(--up); }
.jp-prices .mono.dn{ color: var(--dn); }

/* 4-button quad — used by hero, news, and JP cards */
.quad{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.qbtn{
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  transition: all .12s;
}
.qbtn .qb-side{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.qbtn .qb-kind{
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.qbtn:disabled{ opacity: 0.4; cursor: wait; }

/* === Entry confirmation — fires the moment user clicks a bet button === */
@keyframes qbtn-firing-yes {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(20,241,149,0); }
  35%  { transform: scale(0.96); box-shadow: 0 0 0 4px rgba(20,241,149,0.45), 0 0 18px 2px rgba(20,241,149,0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(20,241,149,0); }
}
@keyframes qbtn-firing-no {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,61,90,0); }
  35%  { transform: scale(0.96); box-shadow: 0 0 0 4px rgba(255,61,90,0.45), 0 0 18px 2px rgba(255,61,90,0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,61,90,0); }
}
.qbtn.is-firing.yes { animation: qbtn-firing-yes 0.55s ease-out; }
.qbtn.is-firing.no  { animation: qbtn-firing-no  0.55s ease-out; }

/* Floating "-1🎫 / -100 WWB" chip that pops out of the bet button */
.qbtn-stake-chip{
  position: absolute;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(10,10,12,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  z-index: 50;
  animation: qbtn-stake-chip-pop 1.1s cubic-bezier(.16,.84,.36,1) forwards;
  white-space: nowrap;
}
.qbtn-stake-chip.yes { color: var(--up); border-color: rgba(20,241,149,0.4); }
.qbtn-stake-chip.no  { color: var(--accent); border-color: rgba(255,61,90,0.4); }
@keyframes qbtn-stake-chip-pop {
  0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  20%  { transform: translate(-50%, -8px) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -38px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .qbtn.is-firing.yes, .qbtn.is-firing.no { animation: none; }
  .qbtn-stake-chip { animation: none; opacity: 1; }
}

/* Free YES — green outline */
.qbtn.yes.free .qb-side{ color: var(--up); }
.qbtn.yes.free:hover{ background: var(--up-dim); border-color: var(--up); }
/* Free NO — red outline */
.qbtn.no.free .qb-side{ color: var(--dn); }
.qbtn.no.free:hover{ background: var(--dn-dim); border-color: var(--dn); }
/* WWB YES — solid green */
.qbtn.yes.wwb{
  background: var(--up); color: #00120c;
  border-color: var(--up);
}
.qbtn.yes.wwb .qb-side{ color: #00120c; }
.qbtn.yes.wwb .qb-kind{ color: rgba(0, 18, 12, 0.75); }  /* was alpha .55 = 3.78:1 on --up; .75 measures ~5.9:1 (C8, 2026-08-29) */
.qbtn.yes.wwb:hover{ background: var(--up-hi); border-color: var(--up-hi); }
/* WWB NO — solid red. Bg darkened from --dn (#ef5350) to #cc302b: white text
   on #ef5350 measured 3.49:1 (fails AA 4.5:1); #cc302b clears it at 5.22:1
   while staying clearly red. Scoped to this button only — --dn itself is
   left alone since it's shared by unrelated down/no indicators elsewhere. */
.qbtn.no.wwb{
  background: #cc302b; color: #ffffff;
  border-color: #cc302b;
}
.qbtn.no.wwb .qb-side{ color: #fff; }
.qbtn.no.wwb .qb-kind{ color: #ffffff; }  /* was alpha .78 = 3.70:1 on #cc302b; solid white measures 5.22:1 —
   hierarchy vs .qb-side is kept by the smaller font (C8, 2026-08-29) */
/* Round 3 (F1, 2026-08-30): hovering used to swap the fill to --dn-hi
   (#ff6a67) — white text dropped from 5.22:1 to 2.80:1, defeating the rest
   fix above. Hover now darkens instead: #b13e3b keeps white at 5.80:1. */
.qbtn.no.wwb:hover{ background: #b13e3b; border-color: #b13e3b; }

.card-foot{
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.card-foot a{ color: var(--accent); }
.card-time{
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 6px;
  background: var(--accent-dim);
  white-space: nowrap;
}
.btn-cmt{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  transition: color .12s, border-color .12s;
}
.btn-cmt:hover{ color: var(--ink); border-color: var(--line-2); }

.empty{
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--line);
}

/* ─────────────────────────── DANMAKU ─────────────────────────── */

.danmaku-layer{
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  overflow: hidden;
}
.danmaku{
  position: absolute;
  white-space: nowrap;
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 600;
  text-shadow: 0 0 4px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5);
  /* Round 4 (2026-08-30): the shadow is a glow, not a scrim - flying text
     measured 1.12:1 crossing a white frame. The chip guarantees the letter
     always sits on near-black (worst case rgb(36): every cosmetic color and
     the default ink stay >= 5:1). */
  background: rgba(8, 8, 8, 0.86);
  padding: 2px 12px;
  border-radius: 999px;
  left: 100vw;
  animation: danmaku-fly 18s linear forwards;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.danmaku.market{
  pointer-events: none;
}
.danmaku.mine{ pointer-events: auto; }
.danmaku.mine .dm-del{
  pointer-events: auto;
  background: rgba(8, 8, 8, 0.92);   /* Round 4: same half-scrim class as .dm-report */
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 18px; height: 18px;
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.danmaku.mine .dm-del:hover{ background: var(--dn); border-color: var(--dn); }
@keyframes danmaku-fly {
  from { transform: translateX(0); }
  to   { transform: translateX(-110vw); }
}

.danmaku-bar{
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.dm-context{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 10px;
  background: var(--accent-dim);
  border: 1px solid rgba(247, 147, 26, 0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  max-width: 50%;
  /* overflow:hidden removed (defect audit 2026-08-28): .dm-ctx-label already
     clips/ellipsizes its own text below, and clipping here also cut off
     .dm-ctx-exit's mobile ::before tap-target expansion. */
}
.dm-ctx-arrow{ color: var(--accent); }
.dm-ctx-label{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px;
}
.dm-ctx-exit{
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 4px;
}
.dm-ctx-exit:hover{ color: var(--ink); }

.danmaku-glyph{ color: var(--accent); font-size: 13px; flex-shrink: 0; }
#danmakuInput{
  flex: 1; min-width: 0;
  background: transparent;
  border: none; outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 0;
}
#danmakuInput::placeholder{ color: var(--muted); }
.danmaku-hint{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* (right-side wallet drawer removed — replaced by .wallet-pill dropdown above) */

/* ─────────────────────────── TOAST ─────────────────────────── */

.toast{
  position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  padding: 9px 14px;
  background: #0d0d0d;
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.toast.show.ok{ border-color: var(--up); color: var(--up); }
.toast.show.err{ border-color: var(--dn); color: var(--dn); }

/* ─────────────────────────── COLOPHON ─────────────────────────── */

.colophon{
  max-width: 1280px;
  margin: 36px auto 24px;
  padding: 16px 20px 0;
  border-top: 1px solid var(--line);
}
.col-rule{ display: none; }
.col-body{
  display: flex; justify-content: space-between; gap: 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.col-body i{ color: var(--ink); font-style: normal; font-weight: 600; }
.col-body u{ text-decoration: none; color: var(--sub); border-bottom: 1px dotted var(--line-2); }
.small-caps{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}
.col-sig{ color: var(--muted); white-space: nowrap; }

/* ─────────────────────────── MARKET DETAIL PANEL ─────────────────────────── */

.detail-panel{
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex; flex-direction: column;
  animation: detail-in .22s ease;
  overflow: hidden;
}
@keyframes detail-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.detail-header{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.dp-back{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s;
}
.dp-back:hover{ border-color: var(--accent); color: var(--accent); }
.dp-headmeta{
  display: flex; align-items: center; gap: 10px;
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
}
.dp-cat{
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dp-divider{ color: var(--line-2); }
.dp-source{
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
}
.dp-source:hover{ text-decoration: underline; }
.dp-close{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 32px; height: 32px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.dp-close:hover{ color: var(--ink); border-color: var(--line-2); }

.detail-body{
  flex: 1;
  overflow: auto;
  scrollbar-width: none;            /* Firefox: hide scrollbar */
  -ms-overflow-style: none;         /* IE/Edge */
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 28px 80px;
}

.detail-main{
  display: flex; flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.dp-title{
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.dp-hero-img{
  width: 100%; height: 200px;
  background-size: cover; background-position: center;
  border-radius: 10px;
  margin-top: 14px;
}

/* Detail-panel topic video — shown at the top when m.videoId is set.
   16:9, fully visible, sits where dp-hero-img would otherwise be. */
.dp-hero-video{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  margin-top: 14px;
  border: 1px solid var(--line);
}
.dp-hero-video[hidden]{ display: none; }
.dp-hero-video iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.dp-prob-block{
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.dp-prob-num{
  display: flex; flex-direction: column;
  gap: 4px;
}
.dp-prob-pct{
  font-family: 'JetBrains Mono', monospace;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--brand-grad-90);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dp-prob-lbl{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.dp-prob-bar{
  display: flex; flex-direction: column; gap: 8px;
}
.dp-prob-bar > .dp-prob-fill{
  height: 8px;
  background: var(--up);
  position: relative;
  width: 0%;
  transition: width .4s ease;
}
.dp-prob-bar{ position: relative; }
.dp-prob-bar > .dp-prob-fill::after{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 100%; right: -1000px;            /* spillover red rail */
  background: var(--dn);
}
.dp-prob-legend{
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.dp-prob-legend .up{ color: var(--up); }
.dp-prob-legend .dn{ color: var(--dn); }
.dp-prob-legend .dot{
  display: inline-block;
  width: 7px; height: 7px;
  margin: 0 4px;
}
.dp-prob-legend .dot.up{ background: var(--up); }
.dp-prob-legend .dot.dn{ background: var(--dn); }

.dp-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: var(--surface);
}
.dp-stat{
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}
.dp-stat:last-child{ border-right: none; }
.dp-stat .lbl{
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.dp-stat .num{
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.dp-section{
  display: flex; flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.dp-section h2{
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.dp-about{
  display: flex; flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
}
.dp-about-row{ display: flex; gap: 10px; }
.dp-about-row .lbl{
  flex-shrink: 0;
  width: 88px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  padding-top: 3px;
}
.dp-about-row .val{ color: var(--sub); flex: 1; }

.dp-cmt-list{
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dp-cmt-list::-webkit-scrollbar,
.detail-body::-webkit-scrollbar{ width: 0; height: 0; display: none; }
.dp-cmt-list .mcp-item{
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 9px 12px;
}
.dp-cmt-hint{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding-top: 4px;
}

/* Right sidebar — sticky trade card */
.detail-side{
  display: flex; flex-direction: column;
  gap: 12px;
}
.dp-side-card{
  position: sticky;
  top: 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
}
.dp-side-head{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.dp-quad{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dp-quad .qbtn{
  padding: 14px 12px;
}
.dp-quad .qbtn .qb-side{ font-size: 13px; }
.dp-side-foot{
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

@media (max-width: 920px) {
  .detail-body{ grid-template-columns: 1fr; gap: 22px; padding: 20px 16px 80px; }
  .dp-side-card{ position: static; }
  .dp-stats{ grid-template-columns: repeat(2, 1fr); }
  .dp-stat:nth-child(2){ border-right: none; }
  .dp-stat:nth-child(1), .dp-stat:nth-child(2){ border-bottom: 1px solid var(--line); }
}

/* ─────────────────────────── TOPNAV LINKS ─────────────────────────── */

.topnav-links{
  display: flex;
  gap: 14px;
  margin-left: 4px;
}
.topnav-link{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--sub);
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.topnav-link:hover{ color: var(--ink); border-bottom-color: var(--accent); text-decoration: none; }
/* Round 4: #maConnectBtn is a <button class="topnav-link"> - without this
   reset it rendered on the UA ButtonFace (#efefef): 2.2:1 at rest and
   1.03:1 under the hover ink. */
button.topnav-link{ background: none; border: none; cursor: pointer; padding: 4px 0; }

/* Badge for resolved/unclaimed positions on the Portfolio link */
.topnav-link{ position: relative; display: inline-flex; align-items: center; gap: 6px; }
.topnav-icon{ display: none; font-size: 16px; line-height: 1; }
@media (max-width: 640px){
  .topnav-icon{ display: inline-flex; }
  .topnav-text{ display: none; }
  .topnav-link{ padding: 4px 6px; white-space: nowrap; }
  /* Pages that hard-code their own text nav (martial-arts.html) instead of the
     injected icon nav overflowed at 390px: the row measured 433px, "MARTIAL
     ARTS" wrapped to two lines and "HISTORY" was cut to "HIST…" with nothing
     saying it could scroll (production, 2026-09-03). Scroll it, and put a fade
     on the right edge so the cut edge reads as "there is more".  */
  .topnav-links{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  .topnav-links::-webkit-scrollbar{ display: none; }
}
.topnav-badge{
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  letter-spacing: 0;
  animation: topnav-badge-pulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,61,90,0.55);
}
@keyframes topnav-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,61,90,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255,61,90,0); }
}
@media (prefers-reduced-motion: reduce){
  .topnav-badge{ animation: none; }
}

/* ─────────────────────────── SUB-BANNER ─────────────────────────── */
/* Replaces the legacy Portfolio/Leaderboard/Martial Arts top-nav.
   6 category pages: HEADLINE · CRYPTO · AI · SPORTS · ESPORTS · ECONOMICS */
.subbanner{
  display: flex;
  gap: 16px;
  margin-left: 4px;
  flex-wrap: wrap;
}
.subbanner .sb-link{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--sub);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.subbanner .sb-link:hover{ color: var(--ink); border-bottom-color: var(--accent); }
.subbanner .sb-link.active{ color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 720px){
  .subbanner{ gap: 10px; font-size: 12px; }
  .subbanner .sb-link{ font-size: 12px; padding: 4px 2px; }
}
.brand-link{ display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }

/* HEADLINE landing tiles — Portfolio + Leaderboard surface */
.headline-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.headline-tile{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms, transform 120ms;
}
.headline-tile:hover{ border-color: var(--accent); transform: translateY(-1px); }
.headline-tile .ht-icon{ font-size: 28px; }
.headline-tile .ht-title{ font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.headline-tile .ht-sub{ font-size: 12px; color: var(--sub); }

.headline-aggregate{
  margin: 24px 0;
}
.headline-aggregate-empty{
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--sub);
  font-size: 13px;
  text-align: center;
}

/* ─────────────────────────── STAKE SELECTOR ─────────────────────────── */
/* Single horizontal pill, sits on the right of the chips bar.
   Layout: [STAKE] [WWB] 100 500 1k │ [PT] 100 500 1k                    */

.stake-selector{
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  flex-wrap: wrap;                                /* don't overflow on narrow viewports */
}
.ss-lbl{
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-right: 4px;
  font-size: 12px;
  font-weight: 700;
}
.ss-kind{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  margin-right: 1px;
}
.ss-kind.wwb{
  color: var(--accent);
  background: var(--accent-dim);
}
.ss-kind.free{
  color: var(--up);
  background: var(--up-dim);
}
.ss-divider{
  width: 1px;
  height: 14px;
  background: var(--line-2);
  margin: 0 6px;
}
.ss-btn{
  padding: 3px 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sub);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  min-width: 32px;
}
.ss-btn:hover{ color: var(--ink); }
.ss-btn.wwb.active{
  background: var(--accent-deep);   /* white on bright accent measured 3.46:1 (F2) */
  color: #fff;
  border-color: var(--accent-deep);
}
.ss-btn.free.active{
  background: var(--up);
  color: #00120c;
  border-color: var(--up);
}

/* ─────────────────────────── RESOLVED CARD STATE ─────────────────────────── */

.card.is-resolved{
  /* 0.72 composited the card's own text below AA (accent .cat measured
     3.34:1, muted foot 3.81:1) — the RESOLVED chip carries the semantics,
     so the fade only needs to be a hint. 0.9 keeps every composited text
     ratio >= 4.5:1 (F3, 2026-08-30). */
  opacity: 0.9;
}
.card.is-resolved:hover{ opacity: 1; }
/* Inside the 0.9-composited resolved card the accent close-time chip lands at
   4.41:1 — the one text the fade still pushed under AA. The brighter accent
   shade clears it (measured 5.3:1 composited) without touching live cards. */
.card.is-resolved .card-time{ color: var(--accent-hi); }
.card-resolved{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  background: var(--brand-grad-90-deep);  /* was 2.60:1 at orange stop (F2) */
  color: #fff;
}

/* ─── Settled / paid-out panels ─── */
.fb-settled{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.fb-settled-outcome{
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.fb-settled-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.fs-settled{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
}
.fs-settled-outcome{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.fs-settled-label{
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.outcome-yes{ color: #14f195; }
.outcome-no { color: #ff3d5a; }
.outcome-tie{ color: var(--muted); }

/* ─────────────────────────── RESULT BANNER ─────────────────────────── */

.result-banner{
  margin: 12px auto 0;
  width: min(560px, 92%);
  pointer-events: auto;
  animation: rb-in .35s cubic-bezier(.22, 1, .36, 1);
}
@keyframes rb-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rb-card{
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 18px 24px 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  text-align: center;
}
.result-banner.won .rb-card{ border-color: var(--up); box-shadow: 0 0 24px rgba(20,241,149,0.25); }
.result-banner.lost .rb-card{ border-color: var(--dn); box-shadow: 0 0 24px rgba(239,83,80,0.25); }
.result-banner.tied .rb-card{ border-color: var(--accent); }
.rb-icon{
  font-size: 36px;
  line-height: 1;
  margin-bottom: 4px;
}
.rb-title{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.rb-sub{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.rb-amt{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.result-banner.won  .rb-amt{ color: var(--up); }
.result-banner.lost .rb-amt{ color: var(--dn); }
.result-banner.tied .rb-amt{ color: var(--sub); }
.rb-actions{
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
}
.rb-close{
  padding: 5px 14px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.rb-close:hover{ color: var(--ink); border-color: var(--line-2); }

.rb-countdown{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.rb-countdown #rbCountdown{
  color: var(--ink);
  font-weight: 700;
}

/* Depleting progress bar at the bottom of the card */
.rb-progress{
  position: relative;
  width: 100%;
  height: 2px;
  margin-top: 12px;
  background: var(--line);
  overflow: hidden;
}
.rb-progress-fill{
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  /* Initial state: full width. The animation property is set inline by JS
     so it can be re-triggered every time the banner shows. */
}
.result-banner.won  .rb-progress-fill{ background: var(--up); }
.result-banner.lost .rb-progress-fill{ background: var(--dn); }
.result-banner.tied .rb-progress-fill{ background: var(--accent); }
@keyframes rb-deplete {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ─────────────────────────── PORTFOLIO + LEADERBOARD ─────────────────────────── */

.me-stats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.me-stat{
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
}
.me-stat .lbl{
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.me-stat .num{
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.pnl-pos{ color: var(--up); }
.pnl-neg{ color: var(--dn); }

.me-list{
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.me-bet{
  display: grid;
  grid-template-columns: 60px 130px 1fr 90px 130px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.me-bet:hover{ background: var(--surface-2); }
.me-bet-side{
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.me-bet-stake{ color: var(--ink); }
.me-bet-scope{ color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-bet-time{ color: var(--muted); font-size: 12px; }
.me-bet-status{ font-weight: 700; text-align: right; font-size: 12px; letter-spacing: 0.06em; }
.me-bet-status.pnl-pos{ color: var(--up); }
.me-bet-status.pnl-neg{ color: var(--dn); }

/* Leaderboard */
.lb-period{ display: flex; gap: 4px; }
.lb-period-btn{
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lb-period-btn.active{ background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

.lb-list{
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.lb-row{
  display: grid;
  grid-template-columns: 70px 1fr 200px 140px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
}
.lb-row:hover{ background: var(--surface-2); }
.lb-row.mine{ border-left: 3px solid var(--accent); }
.lb-rank{ font-size: 14px; font-weight: 700; color: var(--ink); }
.lb-user{ font-size: 13px; font-weight: 600; color: var(--ink); }
.lb-bets{ font-size: 12px; color: var(--muted); }
.lb-pnl{ text-align: right; font-size: 14px; font-weight: 700; }

@media (max-width: 760px) {
  .me-bet{ grid-template-columns: 1fr 1fr; gap: 6px; row-gap: 4px; }
  .me-bet-status{ text-align: left; }
  .lb-row{ grid-template-columns: 50px 1fr 110px; }
  .lb-bets{ display: none; }
}

/* ─────────────────────────── VOTE TICKER ─────────────────────────── */

/* News headline marquee */
.news-marquee{
  position: relative;
  height: 28px;
  overflow: hidden;
  background: rgba(220,38,38,.06);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid rgba(220,38,38,.18);
  padding: 0 12px;
  font-size: 12px;
  display: flex; align-items: center;
}
.news-marquee::before, .news-marquee::after{
  content: '';
  position: absolute; top: 0; bottom: 0; width: 40px;
  pointer-events: none; z-index: 1;
}
.news-marquee::before{ left: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 100%); }
.news-marquee::after { right: 0; background: linear-gradient(90deg, transparent 0%, var(--bg) 100%); }
.news-marquee-track{
  display: inline-flex; flex-shrink: 0;
  white-space: nowrap;
  animation: nm-marquee 90s linear infinite;
  will-change: transform;
}
.news-marquee:hover .news-marquee-track{ animation-play-state: paused; }
@keyframes nm-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.nm-item{ display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.nm-dot{ color: #dc2626; font-size: 12px; line-height: 1; }
.nm-title{ color: var(--ink); font-size: 12px; }
.nm-sep{ margin: 0 10px; color: var(--line-2); }

/* Hidden after community feedback — scrolling marquee induced motion sickness.
   Live entries now surface as a soft green/red glow on the entered market card
   (see .card.glow-up / .glow-down below). The element stays in the DOM for
   aria-live screen reader announcements. */
.vote-ticker{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.vote-ticker--legacy{
  position: relative;
  height: 30px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,61,90,0.06), rgba(255,122,45,0.06));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

/* === Soft card glow when someone enters a market (replaces scrolling ticker) === */
@keyframes card-glow-up {
  0%   { box-shadow: 0 0 0 0 rgba(20,241,149,0), 0 0 0 0 rgba(20,241,149,0); }
  18%  { box-shadow: 0 0 0 2px rgba(20,241,149,0.55), 0 0 24px 6px rgba(20,241,149,0.32); }
  100% { box-shadow: 0 0 0 0 rgba(20,241,149,0), 0 0 0 0 rgba(20,241,149,0); }
}
@keyframes card-glow-down {
  0%   { box-shadow: 0 0 0 0 rgba(255,61,90,0), 0 0 0 0 rgba(255,61,90,0); }
  18%  { box-shadow: 0 0 0 2px rgba(255,61,90,0.55), 0 0 24px 6px rgba(255,61,90,0.32); }
  100% { box-shadow: 0 0 0 0 rgba(255,61,90,0), 0 0 0 0 rgba(255,61,90,0); }
}
.card.glow-up,
.featured-big.glow-up,
.featured-small.glow-up{
  animation: card-glow-up 2.6s ease-out;
}
.card.glow-down,
.featured-big.glow-down,
.featured-small.glow-down{
  animation: card-glow-down 2.6s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .card.glow-up, .card.glow-down,
  .featured-big.glow-up, .featured-big.glow-down,
  .featured-small.glow-up, .featured-small.glow-down{
    animation: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
    transition: box-shadow 0.3s ease;
  }
}
.vote-ticker::before, .vote-ticker::after{
  /* Side fades so items look like they emerge / disappear instead of cut off */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 1;
}
.vote-ticker::before{
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.vote-ticker::after{
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--bg) 100%);
}
.vote-ticker-track{
  display: inline-flex;
  flex-shrink: 0;
  white-space: nowrap;
  animation: tk-marquee 60s linear infinite;
  will-change: transform;
}
.vote-ticker:hover .vote-ticker-track{ animation-play-state: paused; }
@keyframes tk-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tk-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
}
.tk-addr{ color: var(--accent); font-weight: 700; font-size: 12px; }
.tk-verb{ color: var(--muted); }
.tk-side{ font-weight: 700; letter-spacing: 0.04em; font-size: 12px; }
.tk-side.tk-yes{ color: var(--up); }
.tk-side.tk-no { color: var(--dn); }
.tk-amt{ color: var(--muted); font-size: 12px; }
.tk-on{ color: var(--muted); }
.tk-title{ color: var(--ink); }
.tk-sep{ margin-right: 14px; color: var(--line-2); }
.tk-empty{
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 0 12px;
}

/* ─────────────────────────── DETAIL PANEL COMMENT COMPOSER ─────────────────────────── */

.dp-cmt-compose{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-top: 10px;
}
.dp-cmt-compose input{
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}
.dp-cmt-compose input:focus{ outline: none; border-color: var(--accent); }
.dp-cmt-send{
  background: var(--brand-grad-90-deep);  /* was 2.60:1 at orange stop (F2) */
  color: #fff;
  border: none;
  padding: 8px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.dp-cmt-send:hover{ background: var(--brand-grad-90-press); }  /* Round 4: brightness(1.08) re-brightened the deep fill to 4.17:1 (F2-class); press grad is 5.39:1 */
.dp-cmt-send:disabled{ opacity: 0.5; cursor: wait; }

/* ─────────────────────────── ADMIN DASHBOARD ─────────────────────────── */

.admin-body{ padding-bottom: 40px; }              /* no danmaku bar on admin */

/* Live markets — sortable table */
#liveList{
  /* Wrap so the table can horizontally scroll on tablets / phones rather
     than overflowing the viewport. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.live-table{
  width: 100%;
  min-width: 880px;                                /* keeps cells legible while scrolling */
  border-collapse: collapse;
  font-size: 12px;
}
.live-table thead th{
  text-align: left;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  text-transform: uppercase;
}
.live-row{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: default;
}
.live-row.dragging{ opacity: 0.4; }
.live-row td{
  padding: 10px 10px;
  vertical-align: top;
}
.lr-handle{
  cursor: grab;
  user-select: none;
  text-align: center;
  font-size: 18px;
  color: var(--text-soft);
  width: 28px;
}
.lr-handle:active{ cursor: grabbing; }
.lr-rank{ width: 50px; color: var(--accent); font-weight: 700; font-size: 13px; }
.lr-img{ width: 70px; }
.lr-img-preview{
  width: 60px; height: 60px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: block;
}
.lr-img-empty{
  display: inline-block;
  width: 60px; height: 60px;
  border: 1px dashed var(--border);
  color: var(--text-soft);
  text-align: center;
  line-height: 60px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.lr-img-wrap{ position: relative; display: inline-block; }
.lr-img-tag{
  position: absolute;
  bottom: 2px; left: 2px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 2px;
  pointer-events: none;
}
.lr-q-text{ font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.lr-q-meta{
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.lr-edit{ width: 280px; }
.lr-field{ display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.lr-field > span{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lr-input{
  background: #0e0e10;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 8px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  width: 100%;
}
.lr-input:focus{ outline: none; border-color: var(--accent); }
.lr-textarea{
  resize: vertical;
  min-height: 44px;
  font-family: 'Inter', sans-serif;
}
.lr-input.lr-locked{
  opacity: 0.55;
  cursor: not-allowed;
  background: #16161a;
}
.lr-lock{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 1px 6px;
  font-size: 12px;
  margin-left: 6px;
  cursor: pointer;
  border-radius: 3px;
  vertical-align: middle;
}
.lr-lock:hover{ border-color: var(--accent); color: var(--accent); }
/* Custom file picker — replaces the browser-locale "ファイルを選択" / "Choose File"
   text with one we fully control. The native input is overlaid on top of the
   styled button so clicking either opens the OS file dialog. */
.file-pick{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.file-pick-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.file-pick-btn{
  display: inline-block;
  background: var(--surface-2, #0e0e10);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 10px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.file-pick:hover .file-pick-btn{
  border-color: var(--accent);
  color: var(--accent);
}
.file-pick-name{
  font-size: 12px;
  color: var(--text-soft);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.lr-actions{ width: 130px; display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.lr-save{ font-size: 12px; padding: 6px 10px; }
.lr-resolve-row{ display: flex; gap: 3px; }
.btn-resolve.sm, .btn-unpublish.sm{
  flex: 1;
  padding: 4px 6px;
  font-size: 12px;
}
.live-row.drag-over{ outline: 2px dashed var(--accent); outline-offset: -2px; }

.live-tabs{
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.live-tab{
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 4px;
  transition: all .12s;
}
.live-tab:hover{ color: var(--text); border-color: var(--accent); }
.live-tab.active{
  background: var(--brand-grad-90-deep);  /* was 2.60:1 at orange stop (F2) */
  color: #fff;
  border-color: transparent;
}

.btn-pin{
  padding: 5px 9px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.btn-pin:hover{ color: var(--text); border-color: var(--accent); }
.btn-pin.pinned{
  background: rgba(255,61,90,0.15);
  color: var(--accent);
  border-color: var(--accent);
}

/* Manual-add form */
.add-market-form{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 12px;
}
.add-market-form .lr-field{ margin: 0; }
.add-market-form .full{ grid-column: 1 / -1; }
.add-market-form button{ align-self: end; }

/* Live header markets editor */
.hdr-cfg-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hdr-cfg-row{
  display: grid;
  grid-template-columns: 70px 90px 1fr 1.2fr 1.1fr 100px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.hdr-cfg-sym{
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.hdr-cfg-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}
.hdr-cfg-toggle input{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.hdr-cfg-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hdr-cfg-field > span{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-transform: uppercase;
}
.hdr-cfg-field input{
  background: var(--surface-2, #0e0e10);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 9px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.hdr-cfg-field input:focus{
  outline: none;
  border-color: var(--accent);
}
.hdr-cfg-save{
  padding: 9px 14px;
  font-size: 12px;
  letter-spacing: 0.05em;
}
@media (max-width: 720px){
  .hdr-cfg-row{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 10px;
  }
  .hdr-cfg-sym, .hdr-cfg-save{ grid-column: 1 / -1; }
}

.admin-badge{
  margin-left: 6px;
  padding: 2px 8px;
  background: var(--brand-grad-90-deep);  /* was 2.60:1 at orange stop (F2) */
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.admin-gate{
  max-width: 480px;
  margin: 80px auto 0;
  padding: 0 20px;
}
.gate-card{
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  gap: 14px;
}
.gate-card h1{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gate-hint{
  font-size: 12px; color: var(--muted); line-height: 1.55;
}
.gate-hint code{
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface-2);
  padding: 1px 5px;
  font-size: 12px;
  color: var(--accent);
}
.gate-card input{
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  outline: none;
  letter-spacing: 0.04em;
}
.gate-card input:focus{ border-color: var(--accent); }
.gate-err{
  color: var(--dn);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.btn-primary{
  padding: 9px 14px;
  /* -deep: white 12px text needs >=4.5:1 — bright grad measured 2.60:1 at
     the orange stop (F2, 2026-08-30); deep grad worst stop 4.76:1. */
  background: var(--brand-grad-135-deep);
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-left: auto;                              /* push to right of section-head */
}
/* brightness(1.1) pushed the already-failing fill further down (2.41:1
   measured) — hover now darkens via the -press gradient: 5.39:1 (F1/F2). */
.btn-primary:hover{ background: var(--brand-grad-135-press); }
.btn-primary:disabled{ opacity: 0.5; cursor: wait; }

/* Round 4 (2026-08-30): wallet-menu CTA. This styling lived as an inline
   style= on #wmConnectBtn (bright gradient + brightness() hover) and
   outranked every stylesheet fix - white measured 2.60:1 at rest. Deep fill
   is 4.76:1 at the worst stop; hover DARKENS via the press pair (5.39:1). */
.wm-connect{
  background: var(--brand-grad-135-deep);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(255,61,90,0.30);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.wm-connect:hover{ background: var(--brand-grad-135-press); transform: translateY(-1px); }
.wm-connect:active{ transform: translateY(0); }
/* Round 5 (C6): the frame-escape CTA anchor is styled by class — it used to
   copy #wmConnectBtn's inline style attribute, which round 4 emptied. An
   anchor needs an explicit block box and no underline to render like the
   button it stands in for; everything else comes from .wm-connect above. */
a.wm-connect-escape{ display: block; text-decoration: none; }

/* Draft + live cards */
.draft-card, .live-card{
  gap: 8px;
}
.draft-card .raw{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  display: flex; gap: 6px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.draft-card .raw-lbl{
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.draft-card .raw-text{
  color: var(--sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.draft-meta{
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.draft-actions{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: stretch;
}
.btn-approve{
  padding: 9px 12px;
  background: var(--up);
  color: #00120c;
  border: 1px solid var(--up);
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.btn-approve:hover{ background: var(--up-hi); }
.btn-reject{
  padding: 9px 12px;
  background: transparent;
  color: var(--dn);
  border: 1px solid var(--dn);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.btn-reject:hover{ background: var(--dn-dim); }
.btn-unpublish{
  padding: 7px 12px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  grid-column: span 1;
}
.btn-resolve{
  padding: 7px 10px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.btn-resolve:hover{ background: var(--brand-grad-135-press); color: #fff; }/* Round 5: flat
  --accent under white measured 3.46:1 — same class F1/F2 closed with the -press pair (5.39:1) */
.btn-unpublish:hover{ color: var(--dn); border-color: var(--dn); }
.btn-sourcelink{
  display: inline-flex; align-items: center;
  padding: 9px 12px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.btn-sourcelink:hover{ border-color: var(--accent); }

.rejected-list{
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.rej-row{
  display: grid;
  grid-template-columns: 90px 1fr 80px;
  gap: 12px;
  padding: 8px 14px;
  font-size: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.rej-row:last-child{ border-bottom: none; }
.rej-cat{
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rej-q{
  color: var(--sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rej-time{ color: var(--muted); font-size: 12px; text-align: right; }

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */

@media (max-width: 1100px) {
  .hero-widget{ grid-template-columns: 1.4fr 1fr; }
  .hw-news-ticker{ display: none; }
  .hw-live-comments{ display: none; }
}
@media (max-width: 980px) {
  .hero-widget{ grid-template-columns: 1fr; }
  .hw-chart-pane{ border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .topbar-inner{ padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
  .search{ order: 3; flex-basis: 100%; max-width: none; }
  .search input{ font-size: 13px; }
  /* The category chips sat on the same flex row as the STAKE selector. With
     `flex:1; min-width:0` they SHRANK instead of wrapping, so at 390px the
     chip strip measured 67px wide against a 708px scroll width — "All" and a
     sliver of the next chip, with 10 categories unreachable (measured
     2026-09-03 on production). flex-basis:100% makes the row wrap properly and
     `order:-1` keeps the chips above the stake selector, where they were. */
  .chips{ padding: 6px 10px; gap: 6px; flex-basis: 100%; order: -1; }
  .chip{ font-size: 12px; padding: 4px 9px; }
  .section{ padding: 0 12px; margin-top: 22px; }
  /* F4 follow-through (2026-08-30): with honest 44px floors the live-card
     foot row (source + close-time + comment + shorts) is wider than a 320px
     card — 26px measured past the card edge. flex-wrap only engages when the
     row actually overflows, so wider phones keep the single line. */
  .card-foot{ flex-wrap: wrap; }
  .hero-widget-wrap{ padding: 0 12px; gap: 4px; }
  .hw-arrow{ width: 32px; height: 32px; font-size: 18px; }
  .hw-price{ font-size: 24px; }
  :root{ --card-grid-tracks: 1fr; }  /* .grid AND .awaiting-body (F5) */
  .colophon{ padding: 16px 12px 0; }
  .col-body{ flex-direction: column; gap: 8px; }
  .danmaku-bar{ padding: 8px 12px; }
  .danmaku-hint{ display: none; }
  .dm-context{ max-width: 70%; }

  /* Tester feedback (mobile): top 1/3 of the screen was consumed by chrome.
     We hide the news marquee (still accessible elsewhere), shrink the wallet
     button label, and use icon-only nav links to recover vertical space. */
  .news-marquee{ display: none; }
  .btn-wallet{ padding: 4px 8px; gap: 5px; }
  .btn-wallet .lbl{ display: none; }
  .topnav-links{ gap: 8px; margin-left: 0; }
  .nav-meta{ gap: 6px; }
  /* Tap target floor (defect audit 2026-08-28): was a fixed 30x30 box, well
     under the 44x44 minimum. min-width/min-height instead of width/height so
     the box grows to a real hit area while the icon glyph (font-size, set on
     .btn-ghost/.btn-guide) stays the same visual size. */
  #refreshBtn, #guideBtn{ min-width: 44px; min-height: 44px; width: auto; height: auto; padding: 0; }
}

/* ── Watch-Ad overlay + Points-Convert dialog ─────────────────────── */
.ad-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
}
.ad-overlay[hidden] { display: none; }
.ad-inner {
  background: var(--bg2); border: 1px solid var(--line);
  padding: 32px 28px; width: 320px; max-width: 94vw;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.ad-title { font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.ad-countdown-wrap { position: relative; width: 80px; height: 80px; }
.ad-ring { width: 80px; height: 80px; transform: rotate(-90deg); }
.ad-ring-bg   { fill: none; stroke: var(--border); stroke-width: 5; }
.ad-ring-fill { fill: none; stroke: var(--accent); stroke-width: 5;
                stroke-linecap: round; transition: stroke-dashoffset .9s linear; }
.ad-countdown { position: absolute; inset: 0; display: flex;
                align-items: center; justify-content: center;
                font-size: 26px; font-weight: 700; color: var(--fg); }
.ad-label { font-size: 12px; color: var(--muted); }
.ad-cancel { font-size: 12px; margin-top: 4px; }
.wm-watch-ad { width: 100%; margin-top: 6px; font-size: 13px; }

/* Poll pie chart */
canvas.poll-pie {
  flex-shrink: 0;
  border-radius: 50%;
  align-self: center;
}

/* Stock card logo thumb */
.card-thumb.stock-thumb {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
}
.card-thumb.stock-thumb img {
  object-fit: contain;
}
.stock-thumb-letter {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  background: var(--surface-2); color: var(--fg);
  border-radius: 4px;
}

/* JP stock sparkline */
.jp-spark {
  display: block;
  width: 100%;
  height: 52px;
  margin: 6px 0 2px;
  border-radius: 4px;
}

/* ── Admin — daily poll cards ───────────────────────────────────────── */
#dailyAdminList { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.daily-admin-card {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.dac-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dac-rank { font-size: 12px; color: var(--muted); min-width: 24px; }
.dac-cat {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-dim,rgba(99,102,241,.12));
  padding: 2px 7px; border-radius: 4px;
}
.badge-resolved {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  background: rgba(16,185,129,.15); color: #10b981;
}
.badge-open {
  font-size: 12px; padding: 2px 8px; border-radius: 4px;
  background: rgba(99,102,241,.12); color: var(--muted);
}
.dac-q { font-size: 13px; font-weight: 600; line-height: 1.4; }
.dac-reason { font-size: 12px; color: var(--muted); }
.dac-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dac-q-input, .dac-cat-input {
  width: 100%; font-size: 13px;
  background: var(--bg3,var(--bg)); border: 1px solid var(--line);
  color: var(--fg); border-radius: 5px; padding: 6px 10px;
  box-sizing: border-box;
}
.dac-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;
}
.dac-actions .btn-ghost {
  font-size: 12px; padding: 4px 10px;
}

/* ── Admin — featured market cards ─────────────────────────────────── */
.fad-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 8px;
}
.fad-thumb {
  width: 72px; height: 48px; object-fit: cover;
  border-radius: 5px; flex-shrink: 0;
}
.fad-thumb-placeholder {
  width: 72px; height: 48px; border-radius: 5px; flex-shrink: 0;
  background: var(--accent-dim,rgba(99,102,241,.15));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--accent);
}
.fad-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fad-head { display: flex; align-items: center; gap: 6px; }
.fad-q { font-size: 13px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─────────────────────────── GUIDE POPUP ─────────────────────────── */

.guide-overlay{
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 56px 16px 16px;
  backdrop-filter: blur(2px);
  animation: guideIn 0.18s ease;
}
@keyframes guideIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
.guide-panel{
  width: 360px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: guidePanelIn 0.2s cubic-bezier(.22,1,.36,1);
}
@keyframes guidePanelIn{
  from{ transform: translateY(-12px) scale(0.97); opacity: 0; }
  to  { transform: translateY(0) scale(1);        opacity: 1; }
}
.guide-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.guide-title{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg);
}
.guide-close{
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1;
  padding: 0 2px; transition: color 0.15s;
}
.guide-close:hover{ color: var(--fg); }
.guide-body{
  overflow-y: auto; padding: 12px 16px 16px;
  display: flex; flex-direction: column; gap: 18px;
}
.guide-section{ display: flex; flex-direction: column; gap: 8px; }
.guide-section-title{
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 2px;
}
.guide-item{
  display: flex; gap: 10px; align-items: flex-start;
}
.guide-icon{
  font-size: 16px; line-height: 1.4; flex-shrink: 0; width: 22px;
  text-align: center;
}
.guide-item > div{
  font-size: 13px; color: var(--sub); line-height: 1.5;
}
.guide-item > div strong{
  color: var(--fg); font-weight: 600;
}

/* ============================================================
   2026-05-08 — first-visit guide popup, convert-points button,
   coming-soon button styling, daily-tickets note
   ============================================================ */

/* "Coming soon" disabled button — applied to the Watch Ad button while
   AdSense approval is pending. Greyed-out, not-allowed cursor, no hover. */
.coming-soon,
button.coming-soon{
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: auto;                     /* still receives clicks for toast */
  position: relative;
}
.coming-soon:hover,
button.coming-soon:hover{
  background: inherit !important;
  border-color: inherit !important;
  transform: none !important;
}

/* Daily-tickets note under the 🎫 row — small muted helper text. */
.wm-tickets-note{
  margin-top: -6px;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.wm-tickets-note .muted{ color: var(--sub); opacity: 0.78; }

/* Convert Points → WWB button inside the wallet menu. Visually pops to
   draw attention when points > 0. Uses kainos red→orange gradient. */
.wm-convert-points{
  width: 100%;
  margin: 4px 0 6px 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  background: var(--brand-grad-135-deep);  /* was 2.60:1 at orange stop (F2) */
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.wm-convert-points:hover{
  background: var(--brand-grad-135-press);  /* darker on hover — 5.39:1 (F1) */
  transform: translateY(-1px);
}
.wm-convert-points:active{ transform: translateY(0); }

/* First-visit guide modal — same content as ⓘ guide, but with a
   kainos-red outline, slightly stronger backdrop, and a Got It footer
   button. Triggered only once per browser via localStorage flag. */
.guide-overlay.guide-firstvisit{
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.guide-overlay.guide-firstvisit .guide-panel{
  border: 2px solid #ff3d5a;
  box-shadow:
    0 0 0 1px rgba(255, 61, 90, 0.15),
    0 0 32px rgba(255, 61, 90, 0.32),
    0 12px 48px rgba(0, 0, 0, 0.65);
  animation: firstVisitPulse 2.4s ease-in-out infinite;
}
@keyframes firstVisitPulse{
  0%, 100% { box-shadow:
    0 0 0 1px rgba(255, 61, 90, 0.15),
    0 0 32px rgba(255, 61, 90, 0.32),
    0 12px 48px rgba(0, 0, 0, 0.65); }
  50%      { box-shadow:
    0 0 0 1px rgba(255, 61, 90, 0.25),
    0 0 48px rgba(255, 61, 90, 0.50),
    0 12px 56px rgba(0, 0, 0, 0.70); }
}

/* Banner shown only in first-visit mode — friendly intro line at top. */
.guide-firstvisit-banner{
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255, 61, 90, 0.18), rgba(255, 122, 45, 0.18));
  border-bottom: 1px solid rgba(255, 61, 90, 0.35);
  font-size: 13px;
  color: var(--fg);
  text-align: center;
}
.guide-firstvisit-banner strong{
  color: #ff7a2d;
  font-weight: 700;
}

/* Footer with "Got it" CTA — matches kainos red→orange gradient. */
.guide-footer{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg2);
}
.guide-gotit{
  padding: 9px 22px;
  /* Round 4: the bright pair measured 2.60:1 under the white 13px label at
     rest (the earlier rounds only touched its hover). Deep pair: 4.76:1. */
  background: var(--brand-grad-135-deep);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.guide-gotit:hover{ background: var(--brand-grad-135-press); transform: translateY(-1px); }  /* Round 4: same brightness-hover class as .dp-cmt-send */
.guide-gotit:active{ transform: translateY(0); }

/* ============================================================
   Inline WWB pool display next to YES/NO % on every market card
   ============================================================ */
/* News + stock cards — appears at the right edge of the prob-pct row */
.prob-pct{
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.prob-pool{
  margin-left: auto;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--sub);
  background: rgba(255, 122, 45, 0.08);
  border: 1px solid rgba(255, 122, 45, 0.22);
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.prob-tickets{
  padding: 1px 6px;
  font-size: 12px;
  color: var(--sub);
  background: rgba(120, 180, 255, 0.06);
  border: 1px solid rgba(120, 180, 255, 0.22);
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  margin-left: 4px;
}

/* Featured small card — slot inside the head row with the rank/category */
.fs-pct-pool{
  color: #ff7a2d;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Featured big + Daily big — line under "YES probability" label */
.fb-pct-pool{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.fb-pct-pool strong{
  color: #ff7a2d;
  font-weight: 700;
}

/* ============================================================
   Guide carousel — ◀ ▶ navigation, page dots, per-slide layout
   ============================================================ */
.guide-carousel{
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  width: min(620px, 96vw);
}
.guide-step{
  margin-left: auto;
  margin-right: 14px;
  font-size: 12px;
  color: var(--sub);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.guide-stage{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.guide-arrow{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
  margin: 16px 6px;
  height: 44px;
  align-self: center;
  border-radius: 50%;
}
.guide-arrow:hover{
  background: rgba(255, 61, 90, 0.10);
  border-color: #ff3d5a;
  color: #ff7a2d;
  transform: scale(1.06);
}
.guide-arrow:disabled{
  opacity: 0.28;
  cursor: not-allowed;
  transform: none;
  background: transparent;
  border-color: var(--border);
  color: var(--sub);
}

.guide-slides{
  position: relative;
  overflow: hidden;
  min-height: 380px;
  /* allow inner slides to handle their own vertical scroll */
}
.guide-slide{
  position: absolute;
  inset: 0;
  padding: 22px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.guide-slide.active{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.guide-slide-hero{
  font-size: 48px;
  line-height: 1;
  text-align: center;
  margin-bottom: 4px;
}
.guide-slide-title{
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  text-align: center;
  margin: 0;
  background: linear-gradient(90deg, #ff3d5a, #ff7a2d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.guide-slide-lead{
  font-size: 14px;
  color: var(--fg);
  line-height: 1.55;
  margin: 0;
  text-align: center;
}
.guide-slide-foot{
  font-size: 12px;
  color: var(--sub);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.guide-slide-list{
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-slide-list li{
  font-size: 13px;
  color: var(--sub);
  line-height: 1.5;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.guide-slide-list li strong{ color: var(--fg); font-weight: 600; }

/* Two-tile grid used on the bet-phase / lock-phase slide */
.guide-tile-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0;
}
.guide-tile{
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-size: 12px;
  color: var(--sub);
}
.guide-tile-icon{ font-size: 22px; line-height: 1; }
.guide-tile strong{ color: var(--fg); font-weight: 700; font-size: 13px; }

/* Payout math summary box */
.guide-payout-box{
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.guide-payout-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--sub);
}
.guide-payout-row .mono{ color: var(--fg); }

/* UP/DOWN/YES/NO color tags inside slide-lead */
.guide-slide-lead .up{ color: #1ec76a; }
.guide-slide-lead .dn{ color: #ff3d5a; }

/* Page dots — kainos red active, dim grey inactive */
.guide-dots{
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 14px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.guide-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.guide-dot:hover{ background: #ff7a2d; }
.guide-dot.active{
  background: linear-gradient(135deg, #ff3d5a, #ff7a2d);
  transform: scale(1.4);
}

/* Got-it CTA inside last slide — keep the existing style but center it */
.guide-slide .guide-gotit{
  align-self: center;
  margin-top: 10px;
}

/* Mobile — collapse arrows under the slide so the panel uses full width */
@media (max-width: 520px){
  .guide-carousel{ width: 96vw; }
  .guide-stage{ grid-template-columns: 1fr; }
  .guide-arrow{ display: none; }            /* dots + swipe is enough */
  .guide-slide{ padding: 18px 16px 12px; }
  .guide-slides{ min-height: 320px; }
}



/* =====================================================================
   Martial Arts (martial-arts.html) — wireframe layout:
   Headlines (now/pending) + Timeline (alternating with date markers)
   ===================================================================== */

/* Ticket badge in top nav — shows current ticket balance, glows red when empty */
.ma-ticket-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ma-ticket-badge.empty{
  border-color: var(--dn);
  color: var(--dn);
  background: var(--dn-dim);
}

.ma-health-banner{
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 8px;
  color: var(--warn);
  font-size: 13px;
}
.ma-health-banner .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn);
  animation: ma-pulse 1.2s ease-in-out infinite;
}
@keyframes ma-pulse{ 0%,100%{ opacity:1; } 50%{ opacity: 0.3; } }

/* ─── Tabs ─── */
.ma-tabs{
  display: flex; gap: 4px;
  margin: 22px 0 16px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: fit-content;
}
.ma-tab{
  padding: 8px 18px;
  background: transparent; border: 0;
  border-radius: 7px;
  color: var(--sub);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ma-tab:hover{ color: var(--ink); }
.ma-tab.active{ background: var(--accent-dim); color: var(--accent); }

/* ====================================================================
   Shared bits (pills, status badges, tally bars, vote buttons)
   ==================================================================== */
.ma-pill{
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  background: var(--brand-grad-90-deep);  /* was 2.60:1 at orange stop (F2) */
  color: #fff;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ma-pill-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  backdrop-filter: blur(4px);
}
.ma-status{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.10em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ma-status.open    { background: var(--up-dim);   color: var(--up);   }
.ma-status.closed  { background: var(--surface-3); color: var(--muted); }
.ma-status.live    { background: var(--dn-dim);   color: var(--dn);   animation: ma-pulse 1.4s ease-in-out infinite; }
.ma-status.pending { background: rgba(245,158,11,0.10); color: var(--warn); }
.ma-status.resolved{ background: var(--up-dim);   color: var(--up);   }
.ma-status.voided  { background: var(--surface-3); color: var(--muted); }

/* tally bar (horizontal bar split A/B) — animates in on first paint */
@keyframes ma-bar-fill {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); }
}
.ma-tally-bar{
  display: flex;
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.ma-tally-bar .a,
.ma-tally-bar .b{
  animation: ma-bar-fill 0.7s cubic-bezier(.2,.7,.3,1.2) both;
}
.ma-tally-bar.small{ height: 5px; margin-top: 8px; }
.ma-tally-bar .a{
  background: var(--brand-grad-90);
  transition: width 0.4s ease;
}
.ma-tally-bar .b{
  background: var(--surface-3);
  border-left: 1px solid rgba(255,255,255,0.06);
  transition: width 0.4s ease;
}
.ma-tally-counts{
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 12px; color: var(--sub);
}

/* vote buttons */
.ma-vote-btn{
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
}
.ma-vote-btn:hover:not(:disabled){
  border-color: var(--accent);
  background: var(--accent-dim);
}
.ma-vote-btn:disabled{
  opacity: 0.55; cursor: not-allowed;
}
.ma-vote-btn.picked{
  background: var(--accent-dim-2);
  border-color: var(--accent);
  color: var(--accent-hi);
  opacity: 1;                /* Round 4: :disabled's 0.55 must not dim the pick record */
}
/* Round 4 (2026-08-30): tuning the opacity value (round 3) was still the
   same broken mechanism - a group opacity composites the text below AA no
   matter which colors the children carry. Dim is encoded in the color. */
.ma-vote-btn.not-picked{ opacity: 1; color: var(--sub); border-color: var(--line-2); }
.ma-vote-btn.small{
  padding: 6px 10px;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ====================================================================
   HEADLINES — Fight Night CINEMATIC.
   Full-bleed poster: image is the entire backdrop, dark overlay on top,
   text + CTAs layered. 16:9 aspect on desktop, taller on mobile.
   ==================================================================== */
.ma-headlines{
  display: flex; flex-direction: column;
  gap: 22px;
  margin-bottom: 8px;
}
.ma-headline{
  position: relative;
  width: 100%;
  /* THE RIGHT FIX: cap MAX-WIDTH (not max-height). Capping height with
     aspect-ratio: 16/9 produces a wider-than-16:9 card on big screens —
     browser respects max-height over aspect-ratio. 854px wide × 9/16 =
     480px tall, the visual ceiling we want. Centered. */
  max-width: 854px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: #0a0b10;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px -20px rgba(255,61,90,0.25),
              0 0 0 1px rgba(255,255,255,0.04);
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1.2), box-shadow 0.3s ease;
}
.ma-headline:hover{
  transform: translateY(-3px);
  box-shadow: 0 40px 80px -20px rgba(255,61,90,0.45),
              0 0 0 1px rgba(255,61,90,0.30);
}
.ma-headline.flash{
  box-shadow: 0 0 0 3px var(--accent), 0 30px 60px -20px var(--accent);
}
.ma-headline:hover{ border-color: var(--line-2); }
.ma-headline.flash{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Full-bleed YouTube backdrop — no static image, just video. The iframe
   is oversized to cover the hero regardless of aspect (YouTube returns
   16:9, hero is ~16:9, so this works either way). */
.ma-headline-bg-video{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, calc(100vh * 16 / 9));
  height: max(100%, calc(100vw * 9 / 16));
  border: 0;
  z-index: 0;
  /* pointer-events: none → clicks on the hero pass THROUGH the iframe so
     they don't trigger YouTube's default click-to-pause. Vote buttons +
     status badges layered above stay clickable. Volume is controlled via
     our own slider through the IFrame JS API. */
  pointer-events: none;
}
/* Fallback: dark gradient panel if a fight has no videoId (rare, since
   the API filter hides those). */
.ma-headline-bg-fallback{
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,61,90,0.30), rgba(255,122,45,0.10) 60%, transparent 80%),
    radial-gradient(circle at 50% 50%, #1a0810, #0a0b10);
  z-index: 0;
}
/* Darkening + brand-tinted overlay so text is readable on any photo */
.ma-headline-overlay{
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* bottom-to-top fade for legibility of bottom CTAs */
    linear-gradient(180deg, rgba(10,11,16,0.55) 0%, rgba(10,11,16,0.20) 35%, rgba(10,11,16,0.20) 50%, rgba(10,11,16,0.75) 80%, rgba(10,11,16,0.92) 100%),
    /* diagonal kainos brand glow from top-right */
    linear-gradient(225deg, rgba(255,122,45,0.22), rgba(255,61,90,0.10) 30%, transparent 60%);
}
/* Subtle film grain via repeating noise gradient — adds texture, very low opacity */
.ma-headline-grain{
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.15;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,0.04) 0.5px, transparent 1px),
    radial-gradient(circle at 75% 65%, rgba(255,255,255,0.03) 0.5px, transparent 1px);
  background-size: 4px 4px, 6px 6px;
  mix-blend-mode: overlay;
}

/* Top strip — promotion pill, event name, status badge */
.ma-headline-top{
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  gap: 12px;
}
.ma-headline-top-left{
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.ma-headline-eventname{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CENTER STAGE — fighters + VS */
.ma-headline-stage{
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2vw, 32px);
  padding: 0 clamp(20px, 4vw, 56px);
}
.ma-headline-fighter{
  display: flex; flex-direction: column;
  min-width: 0;
}
.ma-headline-fighter.a{ text-align: right; }
.ma-headline-fighter.b{ text-align: left; }
.ma-headline-fname{
  font-size: clamp(22px, 4vw, 56px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,0.7);
  text-transform: uppercase;
}
.ma-headline-fdesc{
  margin-top: 10px;
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 600;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Massive VS — gradient text, central anchor */
.ma-headline-vs-wrap{
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.ma-headline-vs{
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  background: var(--brand-grad-135);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(255,61,90,0.45));
  /* Round 4: the gradient-clipped glyphs measured 2.65:1 on the hero art
     (large-text floor is 3:1). background-clip:text eats every background
     layer on the element itself, so the plate lives on ::before. */
  position: relative;
}
.ma-headline-vs::before{
  content: '';
  position: absolute;
  inset: -6px -16px;
  background: rgba(8, 8, 8, 0.85);   /* worst stop 3.97:1 even over a white frame */
  border-radius: 999px;
  z-index: -1;
}
.ma-headline-vs-line{
  margin-top: 8px;
  height: 2px;
  width: clamp(40px, 5vw, 80px);
  background: var(--brand-grad-90);
  opacity: 0.55;
}

/* BOTTOM strip — tally + CTAs + meta */
.ma-headline-bottom{
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 18px 22px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.ma-headline-tally{
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.ma-headline-tally .ma-tally-bar{
  height: 6px;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}
.ma-headline-tally .ma-tally-counts{
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Big cinematic vote CTAs */
.ma-headline-votes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.ma-vote-btn.cinematic{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px;
  background: rgba(20, 12, 18, 0.65);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.15s ease;
}
.ma-vote-btn.cinematic .vbtn-side{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--brand-grad-90-deep);  /* was 2.60:1 at orange stop (F2) */
  color: #fff;
}
.ma-vote-btn.cinematic .vbtn-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ma-vote-btn.cinematic:hover:not(:disabled){
  background: rgba(255,61,90,0.20);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -6px var(--accent);
}
.ma-vote-btn.cinematic:disabled{
  opacity: 0.45; cursor: not-allowed;
}
/* Round 4 (2026-08-30): post-vote pick display. The dimming used to be a
   group opacity (.not-picked 0.72; :disabled 0.45 also hit .picked), which
   composited the side pill to 1.04:1 (picked) / 4.05:1 (not-picked) at the
   real hero backdrop. Opacity resets to 1; the dim is encoded in colors. */
.ma-vote-btn.cinematic.picked,
.ma-vote-btn.cinematic.not-picked{ opacity: 1; }
.ma-vote-btn.cinematic.picked{
  background: linear-gradient(135deg, rgba(255,61,90,0.30), rgba(255,122,45,0.30));
  border-color: var(--accent);
  color: #fff;
}
.ma-vote-btn.cinematic.picked .vbtn-side{
  background: #fff;
  color: var(--accent-deep);   /* accent on white was 3.46:1; -deep measures 4.76:1 */
}
.ma-vote-btn.cinematic.not-picked{
  background: rgba(16, 10, 14, 0.88);   /* darker fill carries the "dimmed" cue */
  border-color: rgba(255, 255, 255, 0.10);
}
.ma-vote-btn.cinematic.not-picked .vbtn-side{ background: var(--brand-grad-90-deep); color: #fff; }
.ma-vote-btn.cinematic.not-picked .vbtn-name{ color: #cfcfcf; }  /* 9.4:1 even over a white hero frame */

.ma-headline-battleline{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.ma-headline-battleline .dot-sep{
  color: var(--accent);
  font-size: 12px;
}

/* ====================================================================
   COMMENTS PANEL — sibling of the hero, sitting on its RIGHT (not overlay).
   Existing wow-poly comment API (/api/comments/market/:id) reused with
   fight ID as the market ID — no new backend.
   ==================================================================== */
/* Wrap the hero + comments in a 2-column row */
.ma-headlines{
  display: flex; flex-direction: column;
  gap: 22px;
  margin-bottom: 8px;
}
.ma-headlines > .ma-headline,
.ma-headlines > .ma-headline-comments{
  /* default: full width; the 2-column layout applies via grid container below */
}
/* Build a row of hero + comments. Implemented via :has() — when a hero
   is immediately followed by .ma-headline-comments, they sit side-by-side. */
.ma-headlines{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: stretch;
  max-width: 1200px;
  margin: 22px auto;
}
.ma-headline{ grid-column: 1; }
.ma-headline-comments{
  grid-column: 2;
  position: relative;         /* used to be absolute → over hero */
  width: 100%;
  height: auto;
  min-height: 320px;
  align-self: stretch;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  color: var(--ink);
}
.hc-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hc-title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
}
.hc-count{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 999px;
}
.hc-list{
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.hc-list::-webkit-scrollbar{ width: 4px; }
.hc-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius: 4px; }
.hc-empty{
  font-size: 12px;
  color: var(--muted);   /* Round 4: 0.40 white measured 3.81:1 */
  text-align: center;
  padding: 24px 8px;
  font-style: italic;
}
.hc-row{
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.hc-row.mine{
  background: rgba(255,61,90,0.10);
  border-color: rgba(255,61,90,0.30);
}
.hc-meta{
  font-size: 12px;
  color: rgba(255,255,255,0.62); /* Round 5: 0.45 computes ~4.0:1 on the comment card — same
    low-alpha-white class the audit flagged on the h2 video wells (unreached here: no comment
    data in the audit env; fixed as part of the class, value chosen to clear 4.5 with margin) */
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.hc-text{
  color: rgba(255,255,255,0.92);
  word-wrap: break-word;
}
.hc-form{
  display: flex;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.30);
}
.hc-input{
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
}
.hc-input::placeholder{ color: var(--muted); }  /* Round 4: 0.40 white measured 3.78:1 */
.hc-input:focus{
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.10);
}
.hc-send{
  width: 36px; height: 36px;
  border: 0;
  background: var(--brand-grad-90-deep);  /* 16px glyph is not WCAG-large — was 2.60:1 (F2) */
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s ease;
}
.hc-send:hover{ transform: translateY(-1px); }
.hc-send:active{ transform: translateY(0); }

/* Mobile: stack comments below the hero (single column) */
@media (max-width: 720px){
  .ma-headlines{
    grid-template-columns: 1fr;
    margin: 14px 0;
  }
  .ma-headline-comments{
    grid-column: 1;
    height: 360px;
    min-height: 360px;
  }
}

/* ====================================================================
   TIMELINE (bottom — alternating rows with date markers)
   ==================================================================== */
.ma-timeline{
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.ma-timeline::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  width: 0;
  border-left: 2px dotted var(--line-2);
  transform: translateX(-1px);
  z-index: 0;
}
/* NEW 3-column row: [card OR video] [spine] [video OR card]
   For .left rows: card sits left, video sits right (across the spine).
   For .right rows: video sits left, card sits right (across the spine).
   The 'spine' column holds the dot + the date marker, anchored on the
   vertical timeline line. */
.timeline-row{
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  position: relative;
}
.timeline-row > .timeline-card,
.timeline-row > .timeline-video{
  align-self: start;
}
.timeline-spine{
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 8px;
  padding-top: 10px;
  z-index: 1;
}

.timeline-dot{
  position: relative;
  align-self: center;
  width: 14px; height: 14px;
  justify-self: center;
  border-radius: 50%;
  background: var(--brand-grad-135);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent-dim);
  z-index: 1;
}

/* Card body — pure text + buttons + bios, no image. */
.timeline-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
  transition: border-color 0.18s ease, transform 0.25s cubic-bezier(.2,.7,.3,1.2), box-shadow 0.25s ease;
}
/* Right-row cards get text alignment mirrored so the visual rhythm
   matches the layout (card to right of spine → text-align right). */
.timeline-row.right > .timeline-card{ text-align: right; }
.timeline-row.right > .timeline-card .vs-fighter.a{ text-align: right; }
.timeline-row.right > .timeline-card .vs-fighter.b{ text-align: left; }

/* Video container — 16:9 aspect locked, autoplay muted iframe. */
.timeline-video{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.6);
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1.2), box-shadow 0.25s ease;
}
.timeline-video:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(255,61,90,0.30);
}
.timeline-video .timeline-iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.timeline-video-channel{
  position: absolute;
  bottom: 8px; right: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.85);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
}
/* Fight Night accent: gradient stripe along the inner edge facing the spine */
.timeline-card::before{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: var(--brand-grad-135);
  opacity: 0.7;
  transition: opacity 0.18s ease;
}
.timeline-row.left  .timeline-card::before{ right: 0; }
.timeline-row.right .timeline-card::before{ left: 0; }
.timeline-card:hover{
  border-color: rgba(255,61,90,0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(255,61,90,0.30);
}
.timeline-card:hover::before{ opacity: 1; }
/* Tape-style angled label for the promotion — sits over the image corner */
.timeline-card .timeline-promo{
  position: absolute;
  top: 6px; left: 6px;
  font-size: 12px;
  padding: 3px 8px;
  z-index: 2;
  transform: rotate(-3deg);
  background: var(--brand-grad-135-deep);  /* was 2.60:1 at orange stop (F2) */
  color: #fff;                             /* inherited near-white measured 4.40:1 on the deep stop; solid #fff is 4.93:1 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.timeline-row.right .timeline-card{
  grid-template-columns: 1fr 160px;
}
.timeline-row.right .timeline-card .timeline-media{ order: 2; }
.timeline-row.right .timeline-card .timeline-info{ order: 1; text-align: right; }

/* timeline-media: container for either the static image OR the YouTube iframe.
   Same aspect lock as before (16:9), bigger on cards with embedded video so
   the player is actually usable. */
.timeline-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-self: start;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.timeline-media img,
.timeline-media iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.timeline-media img{ object-fit: cover; }
.timeline-iframe{ background: #000; }

/* Legacy class — kept for any leftover references */
.timeline-img{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-self: start;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}
.timeline-img img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.timeline-img-grad{
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,61,90,0.20), transparent 60%);
  pointer-events: none;
}
.timeline-promo{
  position: absolute;
  top: 6px; left: 6px;
  font-size: 12px;
  padding: 2px 6px;
  z-index: 1;
}

.timeline-info{ min-width: 0; }
/* VS layout with per-fighter name + small descriptor underneath.
   Two columns separated by a small "vs" badge in the middle. */
.timeline-vs{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  line-height: 1.25;
}
.vs-fighter{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vs-fighter.b{ text-align: right; }
.timeline-row.right .timeline-card .vs-fighter.a{ text-align: right; }
.timeline-row.right .timeline-card .vs-fighter.b{ text-align: left; }
.vs-name{
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-desc{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-vs .vs{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.15em;
  padding: 0 4px;
  text-transform: uppercase;
}
.vs-name.winner{ color: var(--up); font-weight: 800; }
.timeline-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Gemini-generated matchup preview — opportunistic, only renders if present.
   Italic + slight indent so it reads as commentary, not data. */
.timeline-summary{
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  color: var(--sub);
  padding-left: 8px;
  border-left: 2px solid var(--accent-dim);
}

/* Per-fighter bios — search-grounded Gemini output. Shown under the vote
   buttons. Each bio gets the fighter's name in a brand-color accent. */
.fighter-bios{
  margin-top: 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fighter-bio{
  font-size: 12px;
  line-height: 1.5;
  color: var(--sub);
}
.fighter-bio strong{
  background: var(--brand-grad-90);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.timeline-row.right .timeline-card .timeline-summary{
  padding-left: 0;
  padding-right: 8px;
  border-left: 0;
  border-right: 2px solid var(--accent-dim);
}
.timeline-votes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.timeline-votes .ma-vote-btn{
  /* Full fighter names need more width than just "A"/"B" had */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Big year-style date header — like the social-network timeline screenshot:
   prominent gradient number that anchors each row visually. */
.timeline-date{
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
}
.timeline-row.right .timeline-date{ align-items: flex-end; padding-right: 18px; }
.timeline-row.left  .timeline-date{ align-items: flex-start; padding-left: 18px; }
.timeline-date-num{
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  background: var(--brand-grad-90);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
  font-family: 'Inter', sans-serif;
}
.timeline-date-sub{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.10em;
  text-transform: lowercase;
}

/* ====================================================================
   Match history bits
   ==================================================================== */
.ma-result{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink);
}
.ma-result strong{
  background: var(--brand-grad-90);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800;
}
.ma-result.voided{ color: var(--warn); }
.ma-result.muted{ color: var(--muted); }
.pick-result{
  display: inline-block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
}
.pick-result.correct{ background: var(--up-dim); color: var(--up); }
.pick-result.wrong  { background: var(--dn-dim); color: var(--dn); }
.pick-result.voided { background: rgba(245,158,11,0.10); color: var(--warn); }
.pick-result.none   { color: var(--muted); }

/* ====================================================================
   Admin section bits (unchanged from previous design)
   ==================================================================== */
.ma-admin-tools{
  display: flex; gap: 8px;
  margin: 8px 0 14px;
}
.ma-admin-row-actions{
  display: flex; gap: 6px; flex-wrap: wrap;
}

/* ====================================================================
   Mobile (< 720px) — collapse to single column
   ==================================================================== */
@media (max-width: 720px){
  /* Cinematic headline taller on mobile — text needs vertical room.
     Drop the desktop max-height cap; switch to a portrait-ish aspect. */
  .ma-headline{
    aspect-ratio: 3 / 4;
    max-height: none;
    min-height: 360px;
  }
  .ma-headline-stage{
    gap: 6px;
    padding: 0 18px;
  }
  .ma-headline-fname{ font-size: 22px; }
  .ma-headline-vs{ font-size: 38px; }
  .ma-headline-fdesc{ margin-top: 6px; font-size: 12px; }
  .ma-headline-top{ padding: 14px 16px; }
  .ma-headline-bottom{ padding: 14px 16px; gap: 8px; }
  .ma-headline-votes{ grid-template-columns: 1fr; }
  .ma-headline-eventname{ max-width: 50vw; }

  /* Timeline on mobile: collapse to single column (video on top, card
     below). Spine sits at the very left. */
  .ma-timeline::before{ left: 16px; }
  .timeline-row,
  .timeline-row.right{
    grid-template-columns: 32px 1fr;
    gap: 12px;
    padding: 12px 0;
  }
  .timeline-spine{
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 6px;
  }
  .timeline-row > .timeline-card,
  .timeline-row.right > .timeline-card{
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    padding: 14px;
  }
  .timeline-row.right > .timeline-card .vs-fighter.a,
  .timeline-row > .timeline-card .vs-fighter.a{ text-align: left; }
  .timeline-row.right > .timeline-card .vs-fighter.b,
  .timeline-row > .timeline-card .vs-fighter.b{ text-align: right; }
  .timeline-row > .timeline-video,
  .timeline-row.right > .timeline-video{
    grid-column: 2;
    grid-row: 1;
  }
  .timeline-date-num{ font-size: 24px; }
}

/* =====================================================================
   POLISH PASS — display font, ticker, sticky banner, shimmer, vote anim
   ===================================================================== */

/* Display font for fighter names (Bebas Neue is the canonical fight-poster
   font — condensed, all-caps, massive presence). Loaded in <head>. */
.ma-headline-fname,
.timeline-vs .vs-name,
.ma-headline-vs{
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  letter-spacing: 0.02em;
}
.ma-headline-fname{
  font-size: clamp(28px, 5.5vw, 76px);     /* even bigger with display font */
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.ma-headline-vs{
  font-size: clamp(40px, 6.5vw, 96px);
}
.vs-fighter .vs-name{
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 18px;                          /* bigger than the old 14px */
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ─── Marquee ticker ──────────────────────────────────────────────── */
.ma-ticker{
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,61,90,0.10), rgba(255,122,45,0.08));
  border-top: 1px solid rgba(255,61,90,0.20);
  border-bottom: 1px solid rgba(255,61,90,0.20);
  margin: 0;
  height: 36px;
  display: flex;
  align-items: center;
}
.ma-ticker-track{
  display: inline-flex;
  white-space: nowrap;
  gap: 36px;
  padding-left: 100%;
  animation: ma-ticker-scroll 38s linear infinite;
}
.ma-ticker-item{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-hi);
  text-transform: uppercase;
}
@keyframes ma-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }    /* duplicated content loops */
}

/* ─── Sticky featured banner (slides in when hero scrolls off) ────── */
.ma-sticky{
  position: fixed;
  top: 60px;                                /* below the wow-poly topbar */
  left: 0; right: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(10,11,16,0.96), rgba(10,11,16,0.92));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,61,90,0.30);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
  animation: ma-sticky-in 0.3s cubic-bezier(.2,.7,.3,1.2);
}
@keyframes ma-sticky-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ma-sticky-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
}
.ma-sticky-status{
  color: var(--muted);
  font-size: 14px;
}
.ma-sticky-status.live{
  color: var(--dn);
  animation: ma-pulse 1.2s ease-in-out infinite;
}
.ma-sticky-meta{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ma-sticky-vs{
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ma-sticky-sub{
  font-size: 12px;
  color: var(--sub);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ma-sticky-cta{
  display: flex;
  gap: 6px;
}
.ma-sticky .ma-vote-btn.small{
  padding: 6px 10px;
  font-size: 12px;
  min-width: 60px;
}

/* ─── Live HUD: pulsing rings around the LIVE status badge ────────── */
.ma-status.live{
  position: relative;
}
.ma-status.live::before{
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid var(--dn);
  opacity: 0.6;
  animation: ma-live-ring 1.6s ease-out infinite;
}
@keyframes ma-live-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0;   }
}

/* ─── Skeleton shimmer for loading images ─────────────────────────── */
.ma-headline-bg[src*="fallback.svg"],
.timeline-img img[src*="fallback.svg"]{
  animation: none;
}
.ma-headline:has(.ma-headline-bg[src*="fallback.svg"])::after,
.timeline-img:has(img[src*="fallback.svg"])::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: ma-shimmer 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes ma-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Ticket badge pulse on vote ──────────────────────────────────── */
.ma-ticket-badge.pulse{
  animation: ma-ticket-pulse 0.5s cubic-bezier(.2,.7,.3,1.2);
}
@keyframes ma-ticket-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--accent-dim-2); }
  50%  { transform: scale(1.12); box-shadow: 0 0 0 8px transparent; }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}

/* ─── Vote button press feedback ──────────────────────────────────── */
.ma-vote-btn:active:not(:disabled){
  transform: translateY(1px) scale(0.98);
  transition: transform 0.05s ease-out;
}

/* Mobile tweaks for the new elements */
@media (max-width: 720px){
  .ma-sticky{ top: 56px; }
  .ma-sticky-inner{ padding: 8px 12px; gap: 8px; }
  .ma-sticky-vs{ font-size: 14px; }
  .ma-sticky-sub{ font-size: 12px; }
  .ma-sticky .ma-vote-btn.small{ padding: 5px 7px; min-width: 44px; font-size: 12px; }
  .ma-ticker{ height: 30px; }
  .ma-ticker-item{ font-size: 12px; }
}

/* ====================================================================
   Volume controls — toggle button + popover panel in the nav
   ==================================================================== */
.ma-vol-toggle{
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ma-vol-toggle:hover{
  border-color: var(--accent);
  background: var(--accent-dim);
}
.ma-vol-panel{
  position: absolute;
  top: 56px;
  right: 16px;
  z-index: 60;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
}
.ma-vol-row{
  display: grid;
  grid-template-columns: 50px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.ma-vol-row + .ma-vol-row{
  border-top: 1px solid var(--line);
}
.ma-vol-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
}
.ma-vol-slider{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.ma-vol-slider::-webkit-slider-thumb{
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand-grad-90);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.ma-vol-slider::-moz-range-thumb{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
}
.ma-vol-val{
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

/* ─────────────────── CATEGORY PAGES (crypto + economics) ─────────────────── */
/* Added 2026-05-22 by Lane C refactor — crypto.html + economics.html. */

/* Crypto: alternating [video | vote] rows below the hero headline tile. */
.crypto-rows{ margin-top: 24px; }
.cr-rows{ display: flex; flex-direction: column; gap: 18px; }
.cr-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--surface, #14141a);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 14px;
}
.cr-row[data-layout="vote-left"] .cr-row-video{ order: 2; }
.cr-row[data-layout="vote-left"] .cr-row-vote { order: 1; }
.cr-row-video{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000 center/cover no-repeat;
  border-radius: 10px;
  overflow: hidden;
}
.cr-row-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cr-row-video-fallback{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
  background: rgba(0,0,0,0.45); color: #fff; font-weight: 600;
}
.cr-row-vote{ display:flex; flex-direction:column; gap:8px; }
.cr-row-title{ font-weight:700; font-size:16px; color: inherit; text-decoration:none; }
.cr-row-title:hover{ text-decoration: underline; }
.cr-row-pools{ font-size: 12px; color: var(--sub, #a8a8a8); }  /* dim via color, not opacity (F3) */
.cr-row-bar{
  position: relative; height: 8px; border-radius: 4px;
  background: rgba(255,80,80,0.25); overflow: hidden;
}
.cr-row-bar-yes{
  position:absolute; left:0; top:0; bottom:0;
  background: rgba(80,200,120,0.7);
}
.cr-row-bar-lbl{ display:flex; justify-content: space-between; font-size: 12px; }
.cr-row-bar-lbl .up{ color: #5fd28a; }
.cr-row-bar-lbl .dn{ color: #ff7a7a; }
.cr-row-quad{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.cr-row-source{ font-size: 12px; color: var(--muted, #949494); margin-top: auto; }  /* dim via color, not opacity (F3) */
.cr-rows-empty{ padding: 24px; text-align: center; color: var(--muted, #949494); }  /* dim via color, not opacity (F3) */
@media (max-width: 720px){
  .cr-row{ grid-template-columns: 1fr; }
  .cr-row[data-layout="vote-left"] .cr-row-video,
  .cr-row[data-layout="vote-left"] .cr-row-vote { order: initial; }
}

/* Economics: TradingView + comment column. */
.econ-top{ margin-top: 16px; }
.econ-top-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: stretch;
}
.econ-comments{
  display: flex; flex-direction: column;
  background: var(--surface, #14141a);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  min-height: 520px;
  overflow: hidden;
}
.econ-comments .ec-head{
  padding: 10px 12px; font-weight: 600; font-size: 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  display: flex; align-items: center; gap: 8px;
}
.econ-comments .ec-list{
  flex: 1; overflow-y: auto; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
}
.ec-empty{ opacity: 0.5; font-size: 12px; text-align: center; padding: 12px; }
.ec-item{ display: flex; gap: 8px; }
.ec-who{ opacity: 0.6; flex: 0 0 auto; }
.ec-txt{ flex: 1; word-break: break-word; }
.econ-comments .ec-compose{
  display: flex; gap: 6px; padding: 8px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.econ-comments .ec-compose input{
  flex: 1; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent; color: inherit;
}
.ec-send{
  padding: 6px 12px; border-radius: 8px; border: 0;
  background: var(--accent, #ff7a2d); color: #fff; cursor: pointer;
}
.econ-tv-wrap{
  background: #0F0F0F;
  border-radius: 14px;
  overflow: hidden;
  min-height: 520px;
}
.econ-tv-wrap .tradingview-widget-container{ height: 100%; }
/* Round 4: TradingView's embed injects its OWN !important color (#2962FF -
   3.9:1 on the dark wrap) in a <style> added after this sheet, so equal
   specificity loses on order. The extra ancestor outranks it. 7.5:1 now. */
.econ-tv-wrap .tradingview-widget-copyright a,
.econ-tv-wrap .tradingview-widget-copyright .blue-text,
div[id$="TvContainer"] .tradingview-widget-copyright a,
div[id$="TvContainer"] .tradingview-widget-copyright .blue-text{ color: #6ba1ff !important; }
@media (max-width: 880px){
  .econ-top-grid{ grid-template-columns: 1fr; }
  .econ-comments{ min-height: 280px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE POLISH — cross-page UX pass (≤720px / ≤480px)
   Targets touch ergonomics, layout stacking, iOS-zoom prevention,
   and overflow control across all category pages. Additive; meant
   to be loaded last so it overrides earlier rules where needed.
   ═══════════════════════════════════════════════════════════════════ */

/* Universal: stop horizontal page overflow on phone */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  body { -webkit-text-size-adjust: 100%; }
  img, video, iframe { max-width: 100%; }

  /* iOS zooms inputs <16px on focus. Force min 16px on all text inputs. */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="number"], input[type="password"], textarea, select {
    font-size: 16px !important;
  }

  /* ── Topbar: stack search below brand row; let subbanner own a row ── */
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 6px 10px;
  }
  .search-wrap {
    order: 99;
    flex-basis: 100%;
    max-width: 100%;
  }
  .search-wrap .search input { width: 100%; }
  .brand-text { font-size: 14px; }
  .brand-mark { width: 22px; height: 22px; }

  /* ── Subbanner: horizontal swipe row (7 items don't fit on phone) ── */
  .subbanner {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 14px;
    padding: 4px 10px;
    margin: 0 -10px;
    scrollbar-width: none;
  }
  .subbanner::-webkit-scrollbar { display: none; }
  .subbanner .sb-link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: 12px;
    padding: 6px 4px;
    /* Tap target floor (defect audit 2026-08-28): tabs measured 24-29px
       tall. min-height + flex-center grows the hit area without touching
       the label font-size. */
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  /* ── News marquee already hidden ≤640px; keep that ── */

  /* ── Wallet pill: shrink address, keep amount visible ── */
  .btn-wallet { padding: 4px 8px; gap: 4px; font-size: 12px; }
  .btn-wallet .addr { max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
  .wallet-menu {
    position: fixed;
    top: auto;
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    z-index: 9500;
    /* Cap height + scroll internally so long menus stay fully reachable and
       never run off-screen behind the fixed bottom .danmaku-bar (~56px). The
       lower rows — incl. ✨ WowPOLY Points — were being clipped on portrait
       phones; landscape already had this fix (see the landscape @media below). */
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Tap targets ≥ 44px (WCAG AAA) for primary actions ── */
  .btn-primary, .btn-secondary, .ec-send,
  .qbtn, .esp-vote-btn, .poll-vote-btn, .comm-vote-btn {
    min-height: 44px;
  }
  /* Remaining mobile tap targets under 44px found by the 2026-08-28 audit.
     RULE (defect C2, 2026-08-29): NEVER put a numeric min-width on a flex
     item under shrink pressure. It replaces the content-based min-width:auto
     floor, so the item collapses to exactly that width and its nowrap label
     overprints the neighbour (every chip rendered 44px wide under labels up
     to ~90px, "Entertainment"+"Japan" smeared together). Width grows via
     padding, or via an invisible ::before hit-box where the visible box must
     stay small.
     Round 3 (F4, 2026-08-30) corrects the round-2 rule: what smeared the
     chips was never min-width itself — an explicit min-width REPLACES the
     flex item's content-based auto minimum, so shrink pressure could squeeze
     a 105px label down to 44px. The durable pattern for a flex item that
     needs a floor is flex-shrink:0 (the item can never shrink below its
     content — this is what prevents the smear) PLUS min-width:44px (which
     then only ever RAISES short items, never squeezes long ones). Round 2's
     "no min-width" left short chips at 37.5-41px, under the very floor this
     block is named for. Per-selector decision:
     - .chip           flex-shrink:0 + min-width — "AI"/"All" rise to 44px,
                       "Entertainment" stays content-sized (~105px)
     - .btn-cmt        same: its "N" label is variable, so the floor needs
                       the shrink lock too
     - .ss-btn         inside .stake-selector{flex-wrap:wrap} — wrap absorbs
                       pressure today; flex-shrink:0 added so the floor stays
                       safe if the wrap is ever removed
     - .btn-ghost      header/dialog buttons, content under 44px → the floor
                       only raises; flex-shrink:0 added for the same reason
     - .hw-arrow /
       .daily-nav-btn  icon squares whose real width matters: forcing 44px
                       stole 2x12px from the flex:1 hero widget and clipped
                       28px of live content at 390px (defect C7) → keep the
                       32px visual box, extend taps with a ::before hit-box
                       (same pattern as .wp-gb-dismiss below)
     Inline text links (source "Manifold ↗", "See all ▶", the brand mark)
     stay exempt under WCAG 2.5.8's inline-target carve-out. */
  .chip { min-width: 44px; min-height: 44px; flex-shrink: 0; padding: 0 12px; display: inline-flex; align-items: center; }
  .btn-cmt { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .ss-btn { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .hw-arrow, .daily-nav-btn { position: relative; }
  .hw-arrow::before, .daily-nav-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }
  /* Was 36px — under the 44px floor this section is named for (defect audit
     2026-08-28). #refreshBtn/#guideBtn carry their own ID-scoped 44px rule
     above (higher specificity, same floor) so this just brings every other
     .btn-ghost (notifications bell, etc.) up to match. Icon/short-label
     buttons whose content never exceeds 44px — the C2 shrink-collapse
     cannot fire, so the numeric floor is safe here. */
  .btn-ghost { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  /* This branch's own new controls join the floor (defect C10, 2026-08-29):
     the awaiting disclosure toggle, the detail-panel controls it leads to,
     the guest-banner connect button and the guide chrome. */
  .awaiting-toggle, .dp-back, .wp-gb-connect, .guide-close { min-height: 44px; }
  .dp-close, .guide-close { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .guide-dot { position: relative; }
  .guide-dot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* Dots sit on a 13px pitch — a 44px-wide box would steal the neighbours'
       taps (same trade-off as .wp-gb-dismiss below, WCAG 2.5.8 spacing
       exception); 12px keeps the boxes apart, 44px tall meets the floor
       while the visible dot stays 7px. */
    width: 12px;
    height: 44px;
  }

  /* Small dismiss/exit glyphs (19x20 / 12x14 measured) sit inside pills that
     shouldn't visually grow to 44px — an invisible ::before hit box extends
     the tap area instead, centered on the glyph, without resizing it. */
  .wp-gb-dismiss, .dm-ctx-exit { position: relative; }
  .wp-gb-dismiss { margin-left: 6px; }
  .wp-gb-dismiss::before, .dm-ctx-exit::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* 36px wide: a full 44px box overlapped the adjacent Connect button's
       edge and stole its taps (WCAG 2.5.8 spacing exception applies). */
    width: 36px;
    height: 44px;
  }

  /* ── Sections: tighter side padding, no horizontal scroll ── */
  .section { padding: 0 12px; margin-top: 18px; }
  :root { --card-grid-tracks: 1fr; }  /* retargets .grid + .awaiting-body (F5) */
  .grid { grid-template-columns: var(--card-grid-tracks) !important; gap: 12px; }

  /* ── Crypto page: TradingView + Jupiter swap + BTC chat stack ── */
  .csc-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .csc-left, .csc-right { width: 100%; min-width: 0; }
  .csc-jup-pane, .csc-chat-pane { width: 100%; min-width: 0; }
  #JUPITER_PLUGIN_CONTAINER { max-width: 100%; }
  .csc-tv-pane iframe, .csc-tv-pane { min-height: 480px; }

  /* ── Economics page ── */
  .econ-top-grid { grid-template-columns: 1fr !important; }
  .commodity-polls { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .econ-comments { min-height: 240px; }
  .econ-tv-wrap { min-height: 360px; }

  /* ── Esports Joy-Con: full vertical stack ── */
  .esp-joycon-row {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto;
    padding: 10px !important;
    gap: 8px;
  }
  .esp-vote-tall {
    width: 100% !important;
    min-width: 0;
    flex-direction: row !important;
    min-height: 56px;
  }
  .esp-vote-tall .esp-vote-btn { flex: 1 1 50%; padding: 10px 6px; font-size: 13px; }
  .esp-video-col { width: 100%; aspect-ratio: 16 / 9; }
  .esp-video-col iframe { width: 100%; height: 100%; }

  /* ── Esports / generic modals: full-screen on phone ── */
  .esp-modal, .modal, [role="dialog"].modal {
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 12px !important;
    overflow-y: auto;
  }
  .esp-modal-vote { grid-template-columns: 1fr !important; }

  /* ── Martial-arts page ── */
  .ma-headlines { grid-template-columns: 1fr !important; gap: 12px; }
  .ma-headline-comments { width: 100%; min-height: 200px; }
  .ma-hero, .ma-headline-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .ma-fight-card { padding: 10px; }

  /* ── HEADLINE2 vertical feed ── */
  .h2-section, .h2-card { padding: 12px; }
  .h2-vote-row .h2-vote-btn { padding: 12px; font-size: 14px; min-height: 48px; }

  /* ── AI terminal page: ASCII banner already uses clamp(); just ensure
     it doesn't push horizontal scroll ── */
  .ai-banner, pre.ai-ascii { white-space: pre; overflow-x: auto; max-width: 100%; }

  /* ── Comment composers across pages: input + send button row ── */
  .ec-compose, .comments-compose { padding: 8px; gap: 6px; }
  .ec-compose input, .comments-compose input { flex: 1; min-width: 0; }

  /* ── Featured big hero: tighter padding, larger fb-bet buttons ── */
  .featured-big { padding: 12px !important; }
  .fb-bet-grid .fb-bet-btn { min-height: 48px; font-size: 14px; }

  /* ── Card grid (markets): stack to single column ── */
  .card, .market-card { padding: 12px; }
  .card .quad .qbtn { min-height: 44px; font-size: 12px; }
}

/* Extra-small phones (iPhone SE width 375 / Galaxy 360) */
@media (max-width: 420px) {
  .subbanner { gap: 10px; }
  .subbanner .sb-link { font-size: 12px; padding: 6px 2px; }
  .commodity-polls { grid-template-columns: 1fr !important; }
  .brand-text { font-size: 13px; }
  .btn-wallet .addr { max-width: 48px; }
  .csc-tv-pane iframe, .csc-tv-pane { min-height: 420px; }
  .section { padding: 0 10px; }
}

/* Landscape phones: keep TradingView readable */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
  .csc-tv-pane iframe, .csc-tv-pane { min-height: 320px; }
  .econ-tv-wrap { min-height: 300px; }
  .wallet-menu { max-height: 80vh; overflow-y: auto; }
}

/* Hero headline — value-prop hook above the live widget (leads with the
   real-time social differentiator; free-to-play framing). */
.hero-headline{
  max-width: 900px;
  margin: 26px auto 0;
  padding: 0 20px;
  text-align: center;
}
.hero-headline h1{
  margin: 0;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg, #eef1f8);
}
.hero-headline .hh-accent{ color: var(--up, #14F195); }
.hero-headline #hhCycleWord{ display: inline-block; min-width: 0.6em; animation: hh-cycle-in 0.12s ease-out; }
@keyframes hh-cycle-in{ from{ opacity: .3; transform: translateY(3px); } to{ opacity: 1; transform: translateY(0); } }
.hero-headline p{
  margin: 8px 0 0;
  font-size: clamp(12px, 1.6vw, 15px);
  color: var(--muted, #9aa3b8);
  opacity: .9;
}
@media (max-width: 640px){ .hero-headline{ margin-top: 16px; } }

/* Resolve-time notification bell + inbox dropdown */
.notif-wrap{ position: relative; }
#notifBtn{ position: relative; }
.notif-badge{
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  /* --accent-deep: white 12px count on bright #ff3d5a measured 3.46:1 (F2) */
  border-radius: 8px; background: var(--accent-deep, #d63249); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg, #0a0b10);
}
.notif-menu{
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px; max-width: 86vw; max-height: 60vh; overflow-y: auto;
  background: var(--panel, #12141c);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.5);
  z-index: 1000; padding: 6px;
}
.notif-head{ font-size: 12px; font-weight: 700; color: var(--muted, #9aa3b8);
  padding: 6px 8px 4px; text-transform: uppercase; letter-spacing: .05em; }
.notif-empty{ padding: 14px 10px; font-size: 13px; color: var(--muted, #9aa3b8); line-height: 1.4; }
.notif-item{ display: flex; gap: 8px; padding: 8px; border-radius: 8px; align-items: flex-start; }
.notif-item.fresh{ background: var(--accent-dim, rgba(255,61,90,.10)); }
.notif-ic{ flex-shrink: 0; font-size: 15px; line-height: 1.35; }
.notif-title{ font-size: 13px; font-weight: 600; color: var(--fg, #eef1f8); line-height: 1.25; }
.notif-sub{ font-size: 12px; color: var(--muted, #9aa3b8); margin-top: 2px; line-height: 1.3; }
@media (max-width: 640px){ .notif-menu{ width: 288px; right: -36px; } }

/* =====================================================================
   Growth/retention additions (frontend agent) — utility bar, streak,
   currency badge, guest banner, wallet-ask, first-bet tooltip, share
   card, urgency styling, closing-soon nudge, season leaderboard preview,
   wallet history panel, recap, danmaku moderation, empty-category link.
   ===================================================================== */

.wp-utility-bar{
  max-width: 1280px; margin: 0 auto; padding: 6px 20px;
}
.wp-util-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-size: 12px;
}
.wp-currency-badge{
  color: var(--sub, #a8a8a8);
  background: var(--surface-2, #111218);
  border: 1px solid var(--line-2, rgba(255,255,255,.10));
  border-radius: 999px; padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
}
.wp-currency-badge strong{ color: var(--ink, #f2f2f2); }
.wp-streak-badge, .wp-potd-badge{
  border: 1px solid var(--line-2, rgba(255,255,255,.10));
  background: var(--surface-2, #111218);
  color: var(--ink, #f2f2f2);
  border-radius: 999px; padding: 4px 10px;
  font-family: inherit; font-size: 12px; cursor: pointer;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-streak-badge:hover, .wp-potd-badge:hover{ border-color: var(--accent); color: var(--accent); }
.wp-potd-badge span{ color: var(--ink, #f2f2f2); }

.wp-guest-banner{
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding: 8px 12px;
  background: var(--accent-dim, rgba(255,61,90,.10));
  border: 1px solid var(--accent-dim-2, rgba(255,61,90,.20));
  border-radius: 10px;
  font-size: 12px; color: var(--sub, #a8a8a8);
}
.wp-gb-icon{ flex-shrink: 0; }
.wp-gb-connect{
  flex-shrink: 0; font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent); background: transparent; border: 1px solid var(--accent);
  border-radius: 6px; padding: 4px 10px;
}
.wp-gb-connect:hover{ background: var(--accent-deep); color: #fff; }  /* Round 4: white on bright accent was 3.46:1; -deep is 4.76:1 */
.wp-gb-dismiss{
  flex-shrink: 0; margin-left: auto; background: none; border: none;
  color: var(--muted, #949494); font-size: 16px; line-height: 1; padding: 2px 4px;
}
.wp-gb-dismiss:hover{ color: var(--ink, #f2f2f2); }

.wp-closing-banner{
  position: fixed; left: 50%; bottom: 68px; transform: translateX(-50%);
  z-index: 210; display: flex; align-items: center; gap: 10px;
  background: #0d0d0d; border: 1px solid var(--warn, #f59e0b);
  color: var(--ink, #f2f2f2); padding: 8px 12px; border-radius: 10px;
  font-size: 12px; max-width: 92vw;
}
.wp-cs-icon{ flex-shrink: 0; }
.wp-cs-go{
  flex-shrink: 0; font-family: inherit; font-size: 12px; font-weight: 700;
  color: #0a0b10; background: var(--warn, #f59e0b); border: none;
  border-radius: 6px; padding: 4px 10px;
}
.wp-cs-dismiss{
  flex-shrink: 0; background: none; border: none; color: var(--muted, #949494);
  font-size: 16px; line-height: 1; padding: 2px 4px;
}

.wp-first-bet-tip{
  position: absolute; z-index: 220; max-width: 260px;
  transform: translateY(-100%);
  background: #0d0d0d; border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 12px;
  font-size: 12px; color: var(--ink, #f2f2f2); line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.wp-fbt-arrow{
  position: absolute; bottom: -6px; left: 20px;
  width: 12px; height: 12px; background: #0d0d0d;
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
}
.wp-fbt-close{
  display: block; margin-top: 8px; font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--accent); background: transparent; border: 1px solid var(--accent);
  border-radius: 6px; padding: 3px 10px;
}

.toast-share-btn{
  display: inline-block; margin-left: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: var(--accent); background: transparent; border: 1px solid var(--accent);
  border-radius: 6px; padding: 2px 8px;
}

/* Urgency styling — final 60s before close */
.card.closing-urgent, .hw-vote-pane.closing-urgent{
  animation: wp-urgent-pulse 1.1s ease-in-out infinite;
  border-color: var(--warn, #f59e0b) !important;
}
.card.closing-urgent .card-time{ color: var(--warn, #f59e0b); font-weight: 700; }
@keyframes wp-urgent-pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

/* Season leaderboard homepage preview */
.season-lb-list{ display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.season-lb-row{
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px; background: var(--surface-2, #111218);
  border: 1px solid var(--line, rgba(255,255,255,.04));
  font-size: 13px;
}
.season-lb-row.mine{ border-color: var(--accent); background: var(--accent-dim, rgba(255,61,90,.10)); }
.slb-rank{ color: var(--muted, #949494); }
.slb-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slb-points{ color: var(--ink, #f2f2f2); }
.slb-wins{ color: var(--up, #14F195); }
.season-lb-more{
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600;
}

/* Wallet menu — USDC history + P&L panel (appended by app.js) */
.wp-wallet-history{
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2, rgba(255,255,255,.10));
}
.wp-wh-head{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #949494); margin-bottom: 6px; }
.wp-wh-stats{ display: flex; gap: 10px; font-size: 12px; color: var(--sub, #a8a8a8); flex-wrap: wrap; }
.wp-wh-stats .pos{ color: var(--up, #14F195); }
.wp-wh-stats .neg{ color: var(--dn, #ef5350); }
.wp-wh-list{ margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.wp-wh-row{ display: flex; gap: 8px; align-items: center; font-size: 12px; }
.wp-wh-title{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink, #f2f2f2); }
.wp-wh-side.up{ color: var(--up, #14F195); }
.wp-wh-side.dn{ color: var(--dn, #ef5350); }
.wp-wh-status{ color: var(--muted, #949494); }
.wp-wh-empty{ font-size: 12px; color: var(--muted, #949494); margin-top: 6px; }

.wp-recap-body{ width: 100%; }

/* Empty-category "try X" link */
.empty-cat-link{
  font-family: inherit; font-size: inherit; font-weight: 700;
  color: var(--accent); background: none; border: none; text-decoration: underline;
  cursor: pointer; padding: 0;
}

/* Danmaku / comment moderation */
/* Round 3 (F3, 2026-08-30): never pair a text color with opacity < 1 — the
   round-2 grey sweep set the colors but the leftover opacity composited them
   back down (.mcp-report measured 3.00:1, not the advertised 6.4:1). The
   dimming is encoded in the color itself now; hover still brightens. */
.danmaku .dm-report{
  pointer-events: auto;
  /* Round 4: rgba(0,0,0,.5) was a half scrim - #999 measured 1.4:1 when the
     strip crossed a white frame. 0.92 keeps >= 6:1 over ANY backdrop. */
  margin-left: 6px; background: rgba(8,8,8,0.92); border: 1px solid rgba(255,255,255,0.25);
  color: #999999;  /* = the old #fff at 0.6 over the chip; 7.1:1 there, and no longer backdrop-dependent */
  width: 18px; height: 18px; border-radius: 3px;
  font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.danmaku .dm-report:hover{ color: var(--warn, #f59e0b); border-color: var(--warn, #f59e0b); }
.mcp-report{
  background: none; border: none; color: var(--muted, #949494);  /* 6.35:1 now that the 0.6 opacity is gone */
  font-size: 12px; cursor: pointer;
}
.mcp-report:hover{ color: var(--warn, #f59e0b); }

@media (max-width: 640px){
  .wp-utility-bar{ padding: 6px 12px; }
  .wp-potd-badge{ max-width: 200px; }
  .wp-guest-banner{ flex-wrap: wrap; }
}


/* ============================================================
   Wallet pill: ticket count + dropdown cutoff hardening (2026-07-17)
   ============================================================ */
/* Ticket count shown inline in the always-visible wallet pill */
.btn-wallet .wp-pill-sep{ width:1px; height:12px; background:var(--line-2, rgba(255,255,255,0.16)); margin:0 1px; flex:0 0 auto; }
.btn-wallet .tk-amt{ color:var(--ink); font-weight:600; }
.btn-wallet .tk-lbl{ font-size:12px; line-height:1; flex:0 0 auto; }

/* Never let the wallet dropdown (incl. the Connect Wallet button) run off-screen. */
.wallet-menu{ max-width:calc(100vw - 16px); }
/* Tablet / medium widths (and the /debugger embed): pin the menu to the viewport
   so it can't be clipped or pushed off the right edge. */
@media (min-width:641px) and (max-width:900px){
  .wallet-menu{
    position:fixed; top:auto; right:8px; left:auto;
    min-width:260px; max-width:calc(100vw - 16px);
    z-index:9500; max-height:calc(100dvh - 96px); overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}
/* Keep the ticket glyph visible on phones even though the USDC text label hides. */
@media (max-width:640px){
  .btn-wallet .tk-lbl{ display:inline; }
  .btn-wallet .wp-pill-sep{ display:inline-block; }
}


/* ============================================================
   Embedded (kainos.fi/debugger iframe): hide scrollbars, no content loss.
   ============================================================ */
html.wp-embedded{ scrollbar-width:none; -ms-overflow-style:none; }
html.wp-embedded::-webkit-scrollbar,
html.wp-embedded body::-webkit-scrollbar{ width:0; height:0; display:none; }
/* Keep the wallet pill (with ticket count) from pushing the bell/refresh/guide
   buttons off-screen on narrow phones. */
@media (max-width:640px){
  .btn-wallet .amt, .btn-wallet .tk-amt{ max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}


/* ============================================================
   Outcome-reveal: icon slam + animated price count-up (2026-07-17)
   ============================================================ */
@keyframes rb-reveal-pop{
  0%{ transform:scale(0) rotate(-12deg); opacity:0; }
  60%{ transform:scale(1.25) rotate(4deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.result-banner .rb-icon{ display:inline-block; }
.result-banner .rb-arrow{ font-weight:800; padding:0 2px; }
.result-banner .rb-arrow.up{ color:var(--up, #22c55e); }
.result-banner .rb-arrow.down{ color:var(--accent, #ff3d5a); }
.result-banner .rb-cur{ font-weight:700; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){
  .result-banner .rb-icon{ animation:none !important; }
}


/* ============================================================
   Live reactions — floating emoji + reaction bar (2026-07-17)
   ============================================================ */
.wp-reaction{
  position:absolute; bottom:12%; font-size:34px; line-height:1;
  pointer-events:none; will-change:transform,opacity;
  animation: wp-reaction-rise 2.2s cubic-bezier(.25,.8,.3,1) forwards;
}
@keyframes wp-reaction-rise{
  0%{ opacity:0; transform:translateY(0) translateX(0) scale(.4); }
  14%{ opacity:1; transform:translateY(-9vh) translateX(calc(var(--rx,0px)*.3)) scale(var(--rs,1)); }
  100%{ opacity:0; transform:translateY(-60vh) translateX(var(--rx,0px)) scale(var(--rs,1)); }
}
.wp-reaction-bar{
  position:fixed; right:14px; bottom:64px; z-index:60;
  display:flex; gap:3px; padding:5px 7px; border-radius:999px;
  background:rgba(13,14,20,0.82); backdrop-filter:blur(10px);
  border:1px solid var(--line-2, rgba(255,255,255,0.12));
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.wp-rx-btn{
  background:none; border:none; cursor:pointer; font-size:19px; line-height:1;
  padding:2px 3px; border-radius:8px; transition:transform .12s, background .12s;
}
.wp-rx-btn:hover{ transform:scale(1.25); background:rgba(255,255,255,0.06); }
.wp-rx-btn:active{ transform:scale(.9); }
.wp-rx-btn:disabled{ opacity:.5; cursor:default; }
@media (max-width:640px){ .wp-reaction-bar{ bottom:58px; right:8px; } .wp-rx-btn{ font-size:17px; } }
@media (prefers-reduced-motion:reduce){ .wp-reaction{ animation-duration:.9s; } }


/* ---- Cosmetics: danmaku colour swatches in the wallet menu ---- */
.wm-cosmetics{ display:inline-flex; gap:5px; flex-wrap:wrap; align-items:center; }
.wm-swatch{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,0.22);
  cursor:pointer; padding:0; position:relative; transition:transform .12s; }
.wm-swatch:hover{ transform:scale(1.22); }
.wm-swatch.owned{ border-color:rgba(255,255,255,0.5); }
.wm-swatch.equipped{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.35); }
.wm-swatch:not(.owned)::after{ content:'✨'; position:absolute; top:-9px; right:-9px; font-size:12px; }


/* ---- Reaction bar: collapsed ^ toggle → expands emoji tray ---- */
.wp-reaction-bar{ transition:padding .18s ease; }
.wp-reaction-bar.collapsed{ padding:2px; gap:0; }
.wp-rx-tray{
  display:inline-flex; gap:3px; align-items:center; overflow:hidden;
  max-width:280px; opacity:1;
  transition:max-width .22s ease, opacity .16s ease;
}
.wp-reaction-bar.collapsed .wp-rx-tray{ max-width:0; opacity:0; }
.wp-rx-toggle{
  background:none; border:none; cursor:pointer;
  color:var(--sub, #9aa4b2); font-size:15px; font-weight:800; line-height:1;
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  transition:transform .15s, color .15s, background .15s;
}
.wp-rx-toggle:hover{ color:var(--ink, #fff); background:rgba(255,255,255,0.08); transform:translateY(-1px); }
.wp-reaction-bar:not(.collapsed) .wp-rx-toggle{ margin-left:3px; }