:root {
  /* High-tech cyberpunk knight / samurai */
  --bg: #02040a;
  --surface: #070b14;
  --blade: #00e8ff;          /* katana edge cyan */
  --blood: #ff2d55;          /* blood-steel */
  --gold: #f0c14a;           /* ceremonial armor */
  --plasma: #ff00aa;         /* neon plasma */
  --jade: #39ff14;           /* UP signal */
  --violet: #a855f7;
  --steel: #8ba3b8;
  --text: #e8f4ff;
  --muted: #6b7c90;
  --accent: var(--blade);
  --glow-cyan: var(--blade);
  --glow-magenta: var(--plasma);
  --glow-green: var(--jade);
  --glow-red: var(--blood);
  --glow-violet: var(--violet);
  --glow-neutral: #4a5568;
  --neon-pink: var(--plasma);
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', 'Inter', system-ui, sans-serif;
  min-height: min(85vh, 540px);
  overflow: hidden;
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(0, 28, 48, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(8, 12, 20, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse at center, #0a1020 0%, #02040a 72%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 232, 255, 0.012) 2px,
      rgba(0, 232, 255, 0.012) 4px
    );
}

#app {
  display: flex;
  flex-direction: column;
  height: min(85vh, 540px);
  position: relative;
}

/* CRT scanlines + subtle vignette */
#app::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.14) 0px,
      rgba(0, 0, 0, 0.14) 1px,
      transparent 1px,
      transparent 3px
    );
  z-index: 100;
  opacity: 0.4;
  mix-blend-mode: multiply;
}

/* ── Header: armor plate ── */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 28px;
  background:
    linear-gradient(180deg, rgba(8, 14, 28, 0.95) 0%, rgba(2, 6, 14, 0.55) 100%);
  border-bottom: 1px solid rgba(240, 193, 74, 0.22);
  box-shadow:
    0 1px 0 rgba(0, 232, 255, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.45);
  z-index: 10;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 6px));
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.18em;
  font-size: 1.02rem;
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(0, 232, 255, 0.55),
    0 0 22px rgba(240, 193, 74, 0.25);
}

.logo .title {
  background: linear-gradient(90deg, #e8f4ff 0%, var(--blade) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glyph {
  color: var(--gold);
  font-size: 1.55rem;
  text-shadow:
    0 0 12px rgba(240, 193, 74, 0.7),
    0 0 28px rgba(0, 232, 255, 0.45);
  animation: blade-pulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 45, 85, 0.35));
}

@keyframes blade-pulse {
  0%, 100% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 0 6px rgba(255, 45, 85, 0.35)); }
  50% { opacity: 0.88; transform: scale(1.06); filter: brightness(1.35) drop-shadow(0 0 10px rgba(0, 232, 255, 0.55)); }
}

.controls {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Angular badge shape */
.accuracy-badge,
.law-badge {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 2px;
  font-family: 'Orbitron', sans-serif;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.accuracy-badge {
  border: 1px solid rgba(57, 255, 20, 0.4);
  background: linear-gradient(135deg, rgba(57, 255, 20, 0.08), rgba(0, 20, 10, 0.6));
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.12), inset 0 0 12px rgba(57, 255, 20, 0.04);
  min-width: 148px;
}
.accuracy-badge .acc-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.accuracy-badge .acc-col-right {
  align-items: flex-end;
  margin-left: 6px;
}
.accuracy-badge.cold {
  border-color: rgba(0, 232, 255, 0.35);
  background: linear-gradient(135deg, rgba(0, 232, 255, 0.07), rgba(0, 15, 30, 0.6));
  box-shadow: 0 0 14px rgba(0, 232, 255, 0.1);
}
.accuracy-badge.hot-bad {
  border-color: rgba(255, 45, 85, 0.45);
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.1), rgba(30, 0, 10, 0.6));
  box-shadow: 0 0 16px rgba(255, 45, 85, 0.15);
}
.accuracy-badge .acc-label {
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.accuracy-badge .acc-pct {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--jade);
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.5);
  line-height: 1.1;
}
.accuracy-badge.hot-bad .acc-pct {
  color: var(--blood);
  text-shadow: 0 0 12px rgba(255, 45, 85, 0.5);
}
.accuracy-badge .acc-frac {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.accuracy-badge .acc-detail {
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.accuracy-badge.cold .acc-pct {
  color: var(--blade);
  text-shadow: 0 0 10px rgba(0, 232, 255, 0.4);
}

/* Left panel hit-rate card */
.hit-rate-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(240, 193, 74, 0.12);
  background: linear-gradient(180deg, rgba(0, 40, 20, 0.25), transparent);
  flex-shrink: 0;
}
.hr-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}
.hr-pct {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--jade);
  text-shadow: 0 0 14px rgba(57, 255, 20, 0.45);
  line-height: 1;
}
.hr-pct.cold { color: var(--blade); text-shadow: 0 0 10px rgba(0, 232, 255, 0.35); }
.hr-pct.bad { color: var(--blood); text-shadow: 0 0 12px rgba(255, 45, 85, 0.45); }
.hr-pct-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.48rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: 4px;
}
.hr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  flex: 1;
}
.hr-stat {
  display: flex;
  flex-direction: column;
  font-family: 'Orbitron', sans-serif;
}
.hr-stat b {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.1;
}
.hr-stat span {
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.hr-roll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 6px 12px 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid rgba(240, 193, 74, 0.12);
  flex-shrink: 0;
}
.hr-roll b { color: var(--text); font-weight: 600; }
.hr-verdict {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid rgba(0, 232, 255, 0.35);
  color: var(--blade);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.hr-verdict.HEALTHY { color: var(--jade); border-color: rgba(57, 255, 20, 0.45); }
.hr-verdict.WATCH { color: var(--gold); border-color: rgba(240, 193, 74, 0.45); }
.hr-verdict.NEEDS-WORK { color: var(--blood); border-color: rgba(255, 45, 85, 0.45); }
.hr-verdict.COLLECTING { color: var(--blade); }


/* Graded call log (left panel) */
.call-log {
  flex: 0 1 32%;
  min-height: 100px;
  max-height: 40%;
  overflow-y: auto;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 1px solid rgba(240, 193, 74, 0.12);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 232, 255, 0.25) transparent;
}
.call-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  background: rgba(4, 10, 20, 0.7);
  border: 1px solid rgba(0, 232, 255, 0.1);
  font-size: 0.72rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.04em;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.call-row.open {
  border-color: rgba(240, 193, 74, 0.25);
  opacity: 0.85;
}
.call-row .mark { font-weight: 700; font-size: 0.85rem; }
.call-row .mark.ok { color: var(--jade); text-shadow: 0 0 8px rgba(57, 255, 20, 0.45); }
.call-row .mark.bad { color: var(--blood); text-shadow: 0 0 8px rgba(255, 45, 85, 0.45); }
.call-row .mark.pend { color: var(--gold); }
.call-row .call-dir { color: var(--blade); }
.call-row .call-out { color: var(--muted); }
.call-row .call-tick {
  grid-column: 1 / -1;
  font-size: 0.58rem;
  color: rgba(140, 160, 180, 0.7);
  letter-spacing: 0.02em;
  font-family: 'Rajdhani', sans-serif;
}
.call-empty {
  color: var(--muted);
  font-size: 0.7rem;
  padding: 10px 6px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.45;
}
.panel-head-sub {
  border-top: none;
}

.law-badge {
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(20, 0, 40, 0.55));
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.12);
}
.law-badge.lock {
  border-color: rgba(240, 193, 74, 0.6);
  background: linear-gradient(135deg, rgba(240, 193, 74, 0.14), rgba(40, 25, 0, 0.55));
  box-shadow: 0 0 18px rgba(240, 193, 74, 0.22);
  animation: law-pulse 1.6s ease-in-out infinite;
}
.law-badge .law-label {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.law-badge .law-status {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #d4a0ff;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}
.law-badge.lock .law-status {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(240, 193, 74, 0.55);
}
@keyframes law-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.mode-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0, 10, 20, 0.55);
  border: 1px solid rgba(0, 232, 255, 0.2);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.mode-tab,
#soundToggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.68rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.2s;
}
.mode-tab:hover,
#soundToggle:hover {
  color: var(--gold);
  border-color: rgba(240, 193, 74, 0.35);
}
.mode-tab.active {
  color: var(--blade);
  border-color: rgba(0, 232, 255, 0.5);
  background: rgba(0, 232, 255, 0.08);
  box-shadow: 0 0 14px rgba(0, 232, 255, 0.15);
}
@keyframes wire-hot-pulse {
  0%, 100% {
    color: #ffe49a;
    border-color: rgba(240, 193, 74, 0.7);
    box-shadow: 0 0 10px rgba(240, 193, 74, 0.35);
  }
  50% {
    color: #00e8ff;
    border-color: rgba(0, 232, 255, 0.75);
    box-shadow: 0 0 18px rgba(0, 232, 255, 0.55);
  }
}
#tabWire.wire-hot,
body[class*="mode-"]:not(.mode-wire) #tabWire.wire-hot,
body.beast-mode[class*="mode-"]:not(.mode-wire) #tabWire.wire-hot,
#app > header #tabWire.wire-hot,
body:not(.mode-wire) #app > header #tabWire.wire-hot,
body:not(.mode-wire) #app > header #tabWire.wire-hot.active {
  color: #ffe49a !important;
  border-color: rgba(240, 193, 74, 0.75) !important;
  background: rgba(240, 193, 74, 0.12) !important;
  box-shadow: 0 0 16px rgba(240, 193, 74, 0.45) !important;
  text-shadow: 0 0 10px rgba(240, 193, 74, 0.55) !important;
  animation: wire-hot-pulse 1.4s ease-in-out infinite;
}
#soundToggle {
  border: 1px solid rgba(0, 232, 255, 0.45);
  color: var(--blade);
  background: linear-gradient(135deg, rgba(0, 232, 255, 0.06), rgba(240, 193, 74, 0.05));
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
#soundToggle.muted {
  border-color: rgba(120, 140, 160, 0.35);
  color: var(--muted);
  box-shadow: none;
  opacity: 0.7;
}

/* Charts tab wall — game HUD, both pairs on screen */
.charts-view {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 18px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 40, 70, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(40, 0, 30, 0.15) 0%, transparent 45%);
}
.charts-view.hidden { display: none; }
.charts-pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 280px;
  margin-bottom: 12px;
}
.charts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 12px;
  height: auto;
  min-height: 0;
}
.chart-card {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  background: linear-gradient(145deg, rgba(8, 14, 26, 0.95), rgba(3, 6, 14, 0.96));
  border: 1px solid rgba(0, 232, 255, 0.2);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 18px rgba(0, 232, 255, 0.05);
}
.chart-card.chart-wide,
.chart-card.chart-pair {
  grid-column: span 1;
  grid-row: span 1;
  min-height: 260px;
}
.chart-card.chart-pair-btc {
  border-color: rgba(0, 232, 255, 0.42);
  box-shadow: 0 0 24px rgba(0, 232, 255, 0.12), inset 0 0 40px rgba(0, 30, 60, 0.25);
}
.chart-card.chart-pair-eth {
  border-color: rgba(57, 255, 20, 0.35);
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.1), inset 0 0 40px rgba(10, 40, 16, 0.22);
}
.chart-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(240, 193, 74, 0.12);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  flex-shrink: 0;
}
.chart-meta {
  color: var(--muted);
  letter-spacing: 0.04em;
  font-size: 0.55rem;
}
.chart-card canvas {
  flex: 1 1 auto;
  width: 100%;
  min-height: 160px;
  height: 160px;
  max-height: 220px;
  display: block;
}
.chart-card.chart-pair canvas,
.chart-card.chart-wide canvas {
  min-height: 220px;
  height: 220px;
  max-height: 220px;
}
.chart-card.chart-tape {
  min-height: 220px;
}
.chart-lock-list {
  margin: 0;
  padding: 6px 10px 8px;
  list-style: none;
  max-height: 132px;
  overflow-y: auto;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #c0e8ff;
  border-top: 1px solid rgba(240, 193, 74, 0.12);
  flex-shrink: 0;
}
.chart-lock-list.empty,
.chart-lock-empty {
  color: rgba(140, 160, 180, 0.8);
}
.chart-lock-row {
  display: grid;
  grid-template-columns: 44px 64px 1fr auto;
  gap: 8px;
  padding: 3px 0;
}
.chart-lock-row.lock-open { color: var(--gold); }
.chart-lock-row .lock-side.up { color: var(--jade); }
.chart-lock-row .lock-side.down { color: var(--blood); }
@media (max-width: 1100px) {
  .charts-pairs { grid-template-columns: 1fr 1fr; }
  .charts-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-card.chart-wide,
  .chart-card.chart-pair {
    grid-column: span 1;
    grid-row: span 1;
  }
}
@media (max-width: 640px) {
  .charts-pairs,
  .charts-grid { grid-template-columns: 1fr; }
  .chart-card.chart-wide,
  .chart-card.chart-pair { grid-column: span 1; }
}
#mainTable.hidden { display: none; }

.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--glow-neutral);
  box-shadow: 0 0 10px currentColor;
}
.dot.live { background: var(--jade); color: var(--jade); box-shadow: 0 0 14px var(--jade); }
.dot.warn { background: var(--gold); color: var(--gold); }
.dot.err { background: var(--blood); color: var(--blood); box-shadow: 0 0 14px var(--blood); }

main {
  flex: 1;
  position: relative;
  display: grid;
  /* Named areas — debate is always LEFT, candles always RIGHT */
  grid-template-columns: minmax(220px, 280px) 1fr minmax(220px, 300px);
  grid-template-areas: "table hierarchy";
  gap: 0;
  min-height: 0;
  overflow: hidden;
  direction: ltr; /* never mirror sides */
}

#debatePanel {
  grid-area: debate;
  order: 1;
}
#tableStage {
  grid-area: table;
  order: 2;
}
#hierarchyPanel {
  grid-area: hierarchy;
  order: 3;
}

/* ── Side panels: debate LEFT, candles RIGHT ── */
.side-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, rgba(6, 12, 22, 0.92) 0%, rgba(2, 6, 14, 0.88) 100%);
  z-index: 6;
}
.side-left {
  border-right: 1px solid rgba(240, 193, 74, 0.18);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}
.side-right {
  border-left: 1px solid rgba(0, 232, 255, 0.18);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(0, 232, 255, 0.12);
  flex-shrink: 0;
}
.panel-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(240, 193, 74, 0.35);
}
.side-right .panel-title { color: var(--blade); text-shadow: 0 0 8px rgba(0, 232, 255, 0.35); }
.panel-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Debate log (LEFT) */
.debate-log {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 232, 255, 0.25) transparent;
}
.debate-entry {
  padding: 8px 10px;
  background: rgba(4, 10, 20, 0.75);
  border: 1px solid rgba(0, 232, 255, 0.12);
  border-left: 2px solid rgba(0, 232, 255, 0.35);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  font-size: 0.78rem;
  line-height: 1.35;
}
.debate-entry.dir-UP { border-left-color: var(--jade); }
.debate-entry.dir-DOWN { border-left-color: var(--blood); }
.debate-entry.dir-WAIT { border-left-color: var(--blade); }
.debate-entry.dir-SWAP { border-left-color: var(--gold); }
.debate-entry .who {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--blade);
  margin-bottom: 3px;
}
.debate-entry .who .dir-tag {
  float: right;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}
.debate-entry .said {
  color: rgba(200, 220, 240, 0.85);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.84rem;
  clear: both;
}
.debate-empty {
  color: var(--muted);
  font-size: 0.75rem;
  padding: 16px 8px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.08em;
}

/* Candle chart (RIGHT) */
#candleChart {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
  opacity: 0.92;
}

.seat-spin-btn {
  display: none;
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 16;
  min-height: 32px;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 232, 255, 0.45);
  background: rgba(4, 12, 22, 0.88);
  color: #7fe9ff;
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  pointer-events: auto;
  cursor: pointer;
}
body.mode-floor .seat-spin-btn:not([hidden]),
body.floor-mode .seat-spin-btn:not([hidden]),
body.mode-art .seat-spin-btn:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.seat-spin-btn[aria-pressed="false"] {
  color: #c8d2dc;
  border-color: rgba(200, 210, 220, 0.35);
}

.table-stage {
  min-height: 480px;
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#roundtable {
  max-width: 100%;
  max-height: 100%;
  border-radius: 2px;
}

#dashboardOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 14px;
  padding: 40px;
  overflow: auto;
  z-index: 5;
}
#dashboardOverlay.hidden { display: none; }

@media (max-width: 960px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(140px, 22vh) 1fr minmax(160px, 26vh);
    grid-template-areas:
      "table"
      "hierarchy";
  }
  .side-left { border-right: none; border-bottom: 1px solid rgba(240, 193, 74, 0.18); }
  .side-right { border-left: none; border-top: 1px solid rgba(0, 232, 255, 0.18); }
}

/* Armor-plate agent cards */
.agent-card {
  background:
    linear-gradient(145deg, rgba(10, 16, 28, 0.94) 0%, rgba(4, 8, 16, 0.96) 100%);
  border: 1px solid rgba(0, 232, 255, 0.28);
  border-radius: 2px;
  padding: 12px 16px;
  width: 210px;
  pointer-events: auto;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 22px rgba(0, 232, 255, 0.07),
    inset 0 1px 0 rgba(240, 193, 74, 0.08);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  position: relative;
}
.agent-card::before {
  content: "";
  position: absolute;
  top: 0; left: 10px; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 193, 74, 0.45), transparent);
  pointer-events: none;
}
.agent-card .name {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 2px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.12em;
  color: var(--blade);
  text-shadow: 0 0 12px rgba(0, 232, 255, 0.4);
}
.agent-card .title {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 193, 74, 0.75);
  margin-bottom: 6px;
  font-family: 'Orbitron', sans-serif;
}
.agent-card .dir { font-size: 0.75rem; letter-spacing: 0.05em; }
.agent-card .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(160, 200, 230, 0.75);
}
.agent-card.pair-card {
  border-color: rgba(57, 255, 20, 0.35);
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.1);
}
.agent-card.pair-card .name { color: var(--jade); }
.agent-card .conf-bar {
  height: 4px;
  background: #0a1220;
  border-radius: 1px;
  margin: 7px 0;
  overflow: hidden;
  border: 1px solid rgba(0, 232, 255, 0.18);
}
.agent-card .conf-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 0.4s;
  box-shadow: 0 0 8px currentColor;
}
.agent-card .reason {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  font-family: 'Rajdhani', sans-serif;
}
.agent-card .subs {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(240, 193, 74, 0.18);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.agent-card .sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 1px;
  border: 1px solid rgba(0, 232, 255, 0.12);
  background: rgba(1, 4, 12, 0.6);
  font-size: 0.68rem;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.agent-card .sub-name {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.08em;
  color: rgba(224, 247, 255, 0.9);
  font-weight: 600;
}
.agent-card .sub-dir {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Footer: lower armor band ── */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background:
    linear-gradient(0deg, rgba(6, 10, 20, 0.98) 0%, rgba(2, 6, 14, 0.9) 100%);
  border-top: 1px solid rgba(240, 193, 74, 0.2);
  box-shadow: 0 -1px 0 rgba(0, 232, 255, 0.1), 0 -8px 28px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  position: relative;
  z-index: 10;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
}

#finalDecision {
  display: flex;
  align-items: center;
  gap: 14px;
}
#finalDecision .label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(240, 193, 74, 0.35);
}
.dir {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}
.dir.UP { color: var(--jade); text-shadow: 0 0 18px var(--jade), 0 0 36px rgba(57, 255, 20, 0.45); }
.dir.DOWN { color: var(--blood); text-shadow: 0 0 18px var(--blood), 0 0 36px rgba(255, 45, 85, 0.45); }
.dir.WAIT { color: var(--blade); text-shadow: 0 0 12px rgba(0, 232, 255, 0.4); }
.dir.SWAP {
  color: var(--gold);
  text-shadow: 0 0 16px rgba(240, 193, 74, 0.55), 0 0 28px rgba(255, 0, 170, 0.25);
  animation: swap-flash 1.4s ease-in-out infinite;
}
.dir.UP_HOLD {
  color: var(--jade);
  font-size: 1.05rem;
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.4);
  opacity: 0.92;
}
.dir.DOWN_HOLD {
  color: var(--blood);
  font-size: 1.05rem;
  text-shadow: 0 0 12px rgba(255, 45, 85, 0.4);
  opacity: 0.92;
}
@keyframes swap-flash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

#decisionConf { font-weight: 600; color: var(--plasma); text-shadow: 0 0 10px rgba(255, 0, 170, 0.4); }
#decisionSummary { color: var(--muted); max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#marketStrip {
  display: flex;
  gap: 24px;
  color: var(--muted);
  font-size: 0.82rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
#marketStrip b {
  color: var(--text);
  font-weight: 500;
  text-shadow: 0 0 8px rgba(0, 232, 255, 0.25);
}
#marketStrip .acc-strip b {
  color: var(--jade);
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.35);
}


/* ── Hierarchy side list ── */
.hierarchy-hint {
  font-size: 10px;
  color: rgba(160, 200, 230, 0.65);
  padding: 6px 10px 8px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(0, 232, 255, 0.12);
}
.hierarchy-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hier-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(4, 14, 28, 0.75);
  border: 1px solid rgba(0, 232, 255, 0.14);
  font-family: Orbitron, monospace;
}
.hier-row.top {
  border-color: rgba(255, 176, 0, 0.45);
  box-shadow: 0 0 12px rgba(255, 176, 0, 0.12);
}
.hier-row.muted-rank {
  opacity: 0.55;
  border-style: dashed;
}
.hier-rank {
  font-weight: 700;
  font-size: 11px;
  color: #ffb000;
}
.hier-name {
  font-size: 11px;
  color: #c8e8ff;
  letter-spacing: 0.04em;
}
.hier-meta {
  font-size: 9px;
  color: rgba(160, 200, 230, 0.7);
  font-family: Inter, sans-serif;
}
.hier-dir {
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}
.hier-dir.UP { color: #39ff14; }
.hier-dir.DOWN { color: #ff2a6d; }
.hier-dir.WAIT { color: #00f0ff; }
.hier-dir.SWAP, .hier-dir.UP_HOLD, .hier-dir.DOWN_HOLD { color: #ffb000; }
.open-charts-btn {
  margin: 8px 10px 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 232, 255, 0.35);
  background: rgba(0, 40, 60, 0.55);
  color: #9fefff;
  font-family: Orbitron, monospace;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.open-charts-btn:hover {
  background: rgba(0, 80, 110, 0.55);
  border-color: rgba(0, 232, 255, 0.6);
}


/* ── Info views: Bots + Ranks ── */
.info-view.hidden {
  display: none !important;
}
.info-view {
  padding: 16px 20px 28px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}
.info-hero {
  margin-bottom: 16px;
  max-width: 920px;
}
.info-hero h2 {
  font-family: Orbitron, monospace;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #00e8ff;
  margin: 0 0 8px;
  text-shadow: 0 0 12px rgba(0, 232, 255, 0.35);
}
.info-hero p {
  margin: 0;
  color: rgba(180, 210, 235, 0.85);
  font-size: 13px;
  line-height: 1.5;
}
.front-bots-guide {
  margin: 0 0 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(0, 232, 255, 0.16);
}
.front-bots-sub {
  margin: 0 0 12px;
  color: rgba(180, 210, 235, 0.8);
  font-size: 13px;
}
.front-bot-card.faded { opacity: 0.62; }
.bots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.bot-card {
  background: rgba(4, 14, 28, 0.85);
  border: 1px solid rgba(0, 232, 255, 0.18);
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bot-card.rank-top {
  border-color: rgba(255, 176, 0, 0.45);
  box-shadow: 0 0 16px rgba(255, 176, 0, 0.12);
}
.bot-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.bot-mark-wrap {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(4, 12, 22, 0.95);
  border: 1px solid rgba(0, 232, 255, 0.35);
}
.bot-mark-wrap > * { grid-area: 1 / 1; }
.bot-mark {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.bot-mark-letter {
  display: none;
  font-family: Orbitron, monospace;
  font-weight: 700;
  font-size: 14px;
  color: #7fe9ff;
  line-height: 1;
}
.bot-mark-wrap.no-art .bot-mark-letter { display: block; }
.bot-callsign {
  font-family: Orbitron, monospace;
  font-weight: 700;
  font-size: 14px;
  color: #d8f0ff;
  letter-spacing: 0.06em;
  flex: 1 1 auto;
  min-width: 0;
}
.bot-rank-pill {
  font-family: Orbitron, monospace;
  font-size: 11px;
  color: #ffb000;
  font-weight: 700;
  flex: 0 0 auto;
  margin-left: auto;
}
@media (max-width: 480px) {
  .bot-mark-wrap,
  .bot-mark {
    width: 36px;
    height: 36px;
  }
  .bot-mark-wrap { flex-basis: 36px; }
}
.bot-title {
  font-size: 11px;
  color: rgba(240, 193, 74, 0.75);
  font-family: Rajdhani, Inter, sans-serif;
}
.bot-blurb {
  font-size: 12px;
  color: rgba(180, 210, 235, 0.88);
  line-height: 1.45;
  flex: 1;
}
.bot-subs {
  font-size: 10px;
  color: rgba(0, 232, 255, 0.7);
  font-family: Orbitron, monospace;
  letter-spacing: 0.03em;
}
.bot-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: rgba(160, 200, 230, 0.8);
  font-family: Inter, sans-serif;
  border-top: 1px solid rgba(0, 232, 255, 0.1);
  padding-top: 8px;
  margin-top: 4px;
}
.bot-stats b { color: #c8e8ff; }

.ranks-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: rgba(160, 200, 230, 0.7);
  margin-bottom: 10px;
}
.ranks-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.rank-row {
  display: grid;
  grid-template-columns: 40px 90px 1fr 64px 64px 64px 72px 64px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(4, 14, 28, 0.8);
  border: 1px solid rgba(0, 232, 255, 0.14);
  font-family: Orbitron, monospace;
  font-size: 12px;
}
.rank-row.head {
  background: transparent;
  border: none;
  color: rgba(160, 200, 230, 0.55);
  font-size: 10px;
  padding-bottom: 2px;
}
.rank-row.top {
  border-color: rgba(255, 176, 0, 0.4);
}
.rank-row.muted-rank {
  opacity: 0.55;
  border-style: dashed;
}
.rank-row .rk { color: #ffb000; font-weight: 700; }
.rank-row .nm { color: #d8f0ff; font-weight: 700; letter-spacing: 0.04em; }
.rank-row .dir-live { font-weight: 700; }
.rank-row .dir-live.UP { color: #39ff14; }
.rank-row .dir-live.DOWN { color: #ff2a6d; }
.rank-row .dir-live.WAIT { color: #00f0ff; }
.learn-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.learn-notes li {
  font-size: 12px;
  color: rgba(180, 210, 235, 0.85);
  padding: 8px 10px;
  border-left: 2px solid rgba(0, 232, 255, 0.35);
  background: rgba(4, 14, 28, 0.55);
  border-radius: 0 8px 8px 0;
}
@media (max-width: 900px) {
  .rank-row {
    grid-template-columns: 36px 70px 1fr 52px 52px 52px;
    font-size: 11px;
  }
  .rank-row .hide-sm { display: none; }
}


/* Live CT clock + huddle */
.live-clock {
  margin-left: 14px;
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(0, 232, 255, 0.9);
  text-shadow: 0 0 8px rgba(0, 232, 255, 0.35);
  white-space: nowrap;
}
.huddle-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 176, 0, 0.25);
  background: rgba(20, 14, 4, 0.65);
  min-width: 88px;
}
.huddle-badge.active {
  border-color: rgba(255, 176, 0, 0.7);
  box-shadow: 0 0 14px rgba(255, 176, 0, 0.25);
  animation: huddlePulse 2s ease-in-out infinite;
}
@keyframes huddlePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 176, 0, 0.2); }
  50% { box-shadow: 0 0 18px rgba(255, 176, 0, 0.45); }
}
.huddle-label {
  font-family: Orbitron, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255, 176, 0, 0.75);
}
.huddle-status {
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: #ffe6a8;
  font-weight: 600;
}
.huddle-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;
  z-index: 40;
  max-width: min(640px, 92vw);
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(18, 12, 4, 0.92);
  border: 1px solid rgba(255, 176, 0, 0.45);
  color: #ffe6a8;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  display: none;
}
.huddle-banner.show { display: block; }
.huddle-banner b { color: #ffb000; }


/* Floor color counts – bottom RIGHT (clear of debate log on left) */
.color-tally {
  position: fixed;
  right: 14px;
  left: auto;
  bottom: 64px;
  z-index: 35;
  min-width: 108px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(4, 12, 24, 0.88);
  border: 1px solid rgba(0, 232, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-family: Orbitron, monospace;
  pointer-events: none;
}
.ct-title {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0, 232, 255, 0.7);
  margin-bottom: 6px;
}
.ct-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 3px 0;
  color: rgba(200, 220, 240, 0.9);
}
.ct-row b {
  margin-left: auto;
  font-size: 14px;
  color: #e8f6ff;
}
.ct-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.ct-dot.up { background: #39ff14; color: #39ff14; }
.ct-dot.down { background: #ff2a6d; color: #ff2a6d; }
.ct-dot.wait { background: #00f0ff; color: #00f0ff; }
.ct-lab { width: 42px; font-size: 10px; letter-spacing: 0.06em; }
.ct-quorum {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 232, 255, 0.12);
  font-size: 10px;
  color: rgba(255, 176, 0, 0.85);
  letter-spacing: 0.04em;
}


/* Paper journal */
.paper-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.paper-card {
  background: rgba(4, 14, 28, 0.85);
  border: 1px solid rgba(0, 232, 255, 0.18);
  border-radius: 10px;
  padding: 12px;
}
.paper-card .pc-label {
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(0, 232, 255, 0.7);
}
.paper-card .pc-pnl {
  font-family: Orbitron, monospace;
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0;
}
.paper-card .pc-pnl.pos { color: #39ff14; }
.paper-card .pc-pnl.neg { color: #ff2a6d; }
.paper-card .pc-pnl.flat { color: #00f0ff; }
.paper-card .pc-meta {
  font-size: 11px;
  color: rgba(180, 210, 235, 0.75);
}
.paper-cal-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.paper-cal-btn {
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 232, 255, 0.25);
  background: rgba(4, 14, 28, 0.7);
  color: rgba(200, 220, 240, 0.85);
  cursor: pointer;
}
.paper-cal-btn.active {
  border-color: rgba(255, 176, 0, 0.55);
  color: #ffb000;
  box-shadow: 0 0 12px rgba(255, 176, 0, 0.15);
}
.paper-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.paper-day {
  padding: 10px;
  border-radius: 8px;
  background: rgba(4, 14, 28, 0.75);
  border: 1px solid rgba(0, 232, 255, 0.12);
  font-size: 12px;
}
.paper-day .pd-key {
  font-family: Orbitron, monospace;
  font-size: 11px;
  color: rgba(0, 232, 255, 0.85);
}
.paper-day .pd-pnl { font-weight: 700; font-family: Orbitron, monospace; }
.paper-day .pd-pnl.pos { color: #39ff14; }
.paper-day .pd-pnl.neg { color: #ff2a6d; }
.paper-calls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.paper-call-row {
  display: grid;
  grid-template-columns: 72px 90px 70px 70px 80px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(4, 14, 28, 0.75);
  border: 1px solid rgba(0, 232, 255, 0.12);
  font-size: 12px;
  font-family: Inter, sans-serif;
}
.paper-call-row.head {
  background: transparent;
  border: none;
  color: rgba(160, 200, 230, 0.55);
  font-family: Orbitron, monospace;
  font-size: 10px;
}
.paper-call-row .dir-UP, .paper-call-row .dir-UP_HOLD { color: #39ff14; font-weight: 700; }
.paper-call-row .dir-DOWN, .paper-call-row .dir-DOWN_HOLD { color: #ff2a6d; font-weight: 700; }
.paper-call-row .pnl-pos { color: #39ff14; font-weight: 700; }
.paper-call-row .pnl-neg { color: #ff2a6d; font-weight: 700; }
.paper-call-row .st-open { color: #00f0ff; }
.paper-call-row .st-win { color: #39ff14; }
.paper-call-row .st-loss { color: #ff2a6d; }
@media (max-width: 800px) {
  .paper-call-row { grid-template-columns: 64px 70px 60px 60px 70px; font-size: 11px; }
  .paper-call-row .hide-sm { display: none; }
}


/* ——— BEAST MODE premium chrome ——— */
.beast-badge {
  font-family: Orbitron, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240, 193, 74, 0.55);
  background: linear-gradient(135deg, rgba(240, 193, 74, 0.18), rgba(0, 232, 255, 0.12));
  color: #ffd56a;
  cursor: pointer;
  text-shadow: 0 0 12px rgba(240, 193, 74, 0.55);
  box-shadow: 0 0 16px rgba(240, 193, 74, 0.15);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.beast-badge:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(240, 193, 74, 0.35); }
.beast-badge.off {
  opacity: 0.45;
  color: #8a9bb0;
  border-color: rgba(138, 155, 176, 0.35);
  background: rgba(20, 28, 40, 0.6);
  text-shadow: none;
  box-shadow: none;
}
body.beast-mode {
  --beast-glow: rgba(240, 193, 74, 0.22);
}
body.beast-mode .app-header,
body.beast-mode header.top-bar {
  box-shadow: 0 0 40px var(--beast-glow);
}
body.beast-mode .table-stage {
  min-height: 480px;
  min-width: 0;
  flex: 1 1 auto;
  box-shadow: inset 0 0 80px rgba(0, 232, 255, 0.06), 0 0 40px rgba(240, 193, 74, 0.08);
  border-color: rgba(240, 193, 74, 0.25);
}
body.beast-mode .mode-tab.active {
  border-color: rgba(240, 193, 74, 0.7);
  color: #ffe49a;
  text-shadow: 0 0 10px rgba(240, 193, 74, 0.4);
}
body.beast-mode #decisionDirection,
body.beast-mode .decision-dir {
  filter: drop-shadow(0 0 8px rgba(0, 232, 255, 0.45));
}
body.beast-mode .hier-row.top {
  border-left: 2px solid #f0c14a;
  background: linear-gradient(90deg, rgba(240, 193, 74, 0.1), transparent);
}
.settings-panel {
  max-width: 640px;
  margin: 24px auto;
  padding: 24px;
  border-radius: 16px;
  background: rgba(6, 12, 24, 0.92);
  border: 1px solid rgba(0, 232, 255, 0.2);
}
.settings-head h2 {
  font-family: Orbitron, monospace;
  letter-spacing: 0.2em;
  color: #00e8ff;
  margin: 0 0 6px;
}
.settings-sub { color: #8a9bb0; margin: 0 0 20px; font-size: 14px; }
.beast-card {
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(240, 193, 74, 0.4);
  background: linear-gradient(145deg, rgba(40, 28, 8, 0.55), rgba(8, 20, 36, 0.9));
  box-shadow: 0 0 28px rgba(240, 193, 74, 0.12);
  margin-bottom: 18px;
}
body:not(.beast-mode) .beast-card {
  border-color: rgba(100, 120, 140, 0.35);
  box-shadow: none;
  background: rgba(12, 18, 28, 0.85);
}
.beast-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.beast-title {
  font-family: Orbitron, monospace;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: #ffd56a;
}
body:not(.beast-mode) .beast-title { color: #8a9bb0; }
.beast-blurb { color: #a8b8c8; font-size: 13px; margin-top: 4px; }
.beast-switch {
  position: relative;
  width: 56px;
  height: 30px;
  display: inline-block;
}
.beast-switch input { opacity: 0; width: 0; height: 0; }
.beast-slider {
  position: absolute;
  inset: 0;
  background: #1a2433;
  border-radius: 999px;
  border: 1px solid rgba(138, 155, 176, 0.4);
  cursor: pointer;
  transition: 0.2s;
}
.beast-slider:before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background: #8a9bb0;
  border-radius: 50%;
  transition: 0.2s;
}
.beast-switch input:checked + .beast-slider {
  background: linear-gradient(90deg, #c9a227, #00c4d6);
  border-color: rgba(240, 193, 74, 0.7);
  box-shadow: 0 0 16px rgba(240, 193, 74, 0.35);
}
.beast-switch input:checked + .beast-slider:before {
  transform: translateX(26px);
  background: #fff8e0;
}
.beast-stats {
  margin-top: 14px;
  font-size: 12px;
  color: #9eb0c0;
  font-family: monospace;
}
.settings-row-extra {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.settings-row-extra .set-check {
  position: relative;
  z-index: 2;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.set-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 232, 255, 0.1);
  font-size: 13px;
  color: #9eb0c0;
}
.set-row strong { color: #e8f4ff; font-family: Orbitron, monospace; font-size: 12px; }
.settings-foot { margin-top: 18px; font-size: 12px; color: #6a7a8a; }
.settings-foot code { color: #00e8ff; }
body.beast-mode .color-tally {
  border-color: rgba(240, 193, 74, 0.35);
  box-shadow: 0 0 18px rgba(240, 193, 74, 0.1);
}


/* ——— Summon gate / tutorial ——— */
body.gate-locked #app {
  filter: blur(8px) brightness(0.35);
  pointer-events: none;
  user-select: none;
}
body.gate-locked.gate-revealing #app {
  filter: blur(4px) brightness(0.55);
  transition: filter 2.2s ease;
}
body:not(.gate-locked) #app {
  filter: none;
  transition: filter 1.4s ease;
}
.summon-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 42%, #1a0a28 0%, #0a0414 55%, #020108 100%);
  overflow: hidden;
}
.summon-gate.fade-out {
  animation: gateFade 1.6s ease forwards;
  pointer-events: none;
}
@keyframes gateFade {
  to { opacity: 0; visibility: hidden; }
}
.fog-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
}
.gate-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.75) 100%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.85);
}
.gate-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 32px 28px;
  max-width: 480px;
  animation: gateRise 1.2s ease both;
}
@keyframes gateRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.gate-glyph {
  font-size: 42px;
  filter: drop-shadow(0 0 18px rgba(0, 232, 255, 0.45));
  margin-bottom: 12px;
  animation: glyphPulse 3s ease-in-out infinite;
}
@keyframes glyphPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.gate-title {
  font-family: Orbitron, monospace;
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: 0.22em;
  color: #e8f4ff;
  margin: 0 0 10px;
  text-shadow: 0 0 24px rgba(0, 232, 255, 0.35);
}
.gate-tagline {
  color: #7a8fa8;
  font-size: 15px;
  margin: 0 0 28px;
  font-style: italic;
}
.gate-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.gate-btn {
  font-family: Orbitron, monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  padding: 14px 20px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s;
}
.gate-btn:hover { transform: translateY(-2px); }
.gate-btn-ghost {
  background: rgba(12, 20, 32, 0.85);
  border-color: rgba(0, 232, 255, 0.35);
  color: #a8d8f0;
}
.gate-btn-ghost:hover {
  box-shadow: 0 0 20px rgba(0, 232, 255, 0.2);
  border-color: rgba(0, 232, 255, 0.6);
}
.gate-btn-summon {
  background: linear-gradient(135deg, rgba(40, 20, 60, 0.9), rgba(0, 40, 60, 0.95));
  border-color: rgba(240, 193, 74, 0.55);
  color: #ffd56a;
  text-shadow: 0 0 12px rgba(240, 193, 74, 0.4);
  box-shadow: 0 0 28px rgba(120, 40, 180, 0.25), 0 0 12px rgba(240, 193, 74, 0.15);
}
.gate-btn-summon:hover {
  box-shadow: 0 0 40px rgba(160, 60, 220, 0.4), 0 0 20px rgba(240, 193, 74, 0.3);
}
.gate-skip {
  margin-top: 18px;
  background: none;
  border: none;
  color: #5a6a7a;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.06em;
}
.gate-skip:hover { color: #8a9bb0; }

.gate-tutorial {
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding: 28px 26px;
  text-align: left;
  background: rgba(6, 12, 22, 0.88);
  border: 1px solid rgba(0, 232, 255, 0.25);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.gate-tutorial.hidden, .summon-status.hidden, .gate-inner.hidden { display: none !important; }
.tut-progress {
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #00e8ff;
  margin-bottom: 12px;
}
.tut-title {
  font-family: Orbitron, monospace;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: #e8f4ff;
  margin: 0 0 12px;
}
.tut-body {
  color: #9eb0c0;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.tut-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.summon-status {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px;
}
.summon-line {
  font-family: Orbitron, monospace;
  font-size: clamp(14px, 2.5vw, 18px);
  letter-spacing: 0.18em;
  color: #c8d8e8;
  text-shadow: 0 0 20px rgba(120, 80, 200, 0.5);
  animation: summonPulse 2s ease-in-out infinite;
}
@keyframes summonPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* During summon: thicker fog feel */
.summon-gate.summoning .fog-canvas {
  opacity: 1;
  filter: contrast(1.15) saturate(1.25) brightness(0.95);
}
.summon-gate.summoning .gate-vignette {
  background: radial-gradient(ellipse at center, rgba(120, 30, 160, 0.12) 15%, rgba(20, 4, 30, 0.55) 55%, rgba(0,0,0,0.92) 100%);
}
.gate-vignette {
  background: radial-gradient(ellipse at center, transparent 28%, rgba(20, 4, 30, 0.45) 70%, rgba(0,0,0,0.88) 100%) !important;
  box-shadow: inset 0 0 140px rgba(40, 10, 60, 0.55) !important;
}


.tut-bots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin: 0 0 16px;
  padding-right: 4px;
}
.tut-bot {
  background: rgba(0, 20, 36, 0.65);
  border: 1px solid rgba(0, 232, 255, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
}
.tut-bot-name {
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #00e8ff;
}
.tut-bot-role {
  font-size: 10px;
  color: #f0c14a;
  margin: 2px 0 4px;
}
.tut-bot-desc {
  font-size: 12px;
  color: #9eb0c0;
  line-height: 1.35;
}
.gate-tutorial {
  max-width: 560px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
}
.tut-tip {
  font-size: 12px;
  color: #6a8a9a;
  margin: 0 0 14px;
  font-style: italic;
  position: relative;
  display: block;
}

/* Full-viewport summon cinematic */
.summon-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.summon-video-wrap.hidden { display: none !important; }
.summon-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.summon-video-skip {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 10051;
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #c8d8e8;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.summon-video-skip:hover {
  border-color: rgba(240, 193, 74, 0.7);
  color: #ffd56a;
}

/* Council mark — upper controls, gold hex seal */
.zt-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(240, 193, 74, 0.55);
  background: radial-gradient(circle at 30% 30%, rgba(255, 200, 80, 0.25), rgba(20, 12, 4, 0.9));
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 14px rgba(240, 193, 74, 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.zt-logo-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 22px rgba(255, 200, 60, 0.45);
}
.zt-mark {
  font-family: Orbitron, Impact, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #ffd56a;
  text-shadow: 0 0 10px rgba(255, 180, 40, 0.7);
}
body.beast-mode .zt-logo-btn {
  border-color: rgba(255, 210, 80, 0.75);
}
.zt-logo-btn.streak-hot {
  animation: ztPulse 1.2s ease-in-out infinite;
}
@keyframes ztPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(240, 193, 74, 0.3); }
  50% { box-shadow: 0 0 28px rgba(255, 200, 60, 0.75); }
}

#settingsView.hidden, #seatsView.hidden, #botsView.hidden, #ranksView.hidden, #paperView.hidden, #chartsView.hidden { display: none !important; }

.info-view:not(.hidden),
.charts-view:not(.hidden) {
  position: relative;
  z-index: 20;
  background: rgba(2, 6, 14, 0.97);
  min-height: calc(100vh - 110px);
}
#tableStage canvas#roundtable {
  width: 100%;
  height: 100%;
  display: block;
}

.odds-live b { color: #39ff14; }
.odds-live.down b { color: #ff2d55; }
.window-timer b { color: #00e8ff; font-family: Orbitron, monospace; letter-spacing: 0.06em; }
.set-check {
  display: flex; align-items: center; gap: 8px;
  color: #9eb0c0; font-size: 13px; margin: 8px 0;
  cursor: pointer;
}
.settings-row-extra { margin-bottom: 12px; }


/* ========== Missing / polish styles (audit pass) ========== */

/* Ranks tab notes */
.ranks-notes,
.learn-notes {
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  color: rgba(180, 210, 235, 0.85);
  font-size: 13px;
  line-height: 1.45;
}
.ranks-notes li,
.learn-notes li {
  margin-bottom: 6px;
}
#ranksPhase {
  color: rgba(160, 190, 220, 0.9);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
}

/* HOLD + SWAP direction tags everywhere */
.hier-dir.UP_HOLD,
.dir-live.UP_HOLD,
.dir.UP_HOLD,
.debate-entry.dir-UP_HOLD { color: #7dff9a; border-left-color: #7dff9a; }
.hier-dir.DOWN_HOLD,
.dir-live.DOWN_HOLD,
.dir.DOWN_HOLD,
.debate-entry.dir-DOWN_HOLD { color: #ff7a9a; border-left-color: #ff7a9a; }
.hier-dir.SWAP,
.dir-live.SWAP { color: #f0c14a; }

/* Rank row HOLD colors */
.rank-row .dir-live.UP_HOLD { color: #7dff9a; }
.rank-row .dir-live.DOWN_HOLD { color: #ff7a9a; }
.rank-row .dir-live.SWAP { color: #f0c14a; }

/* Header controls: don't crush on tablet */
header {
  flex-wrap: wrap;
  gap: 8px 12px;
}
header .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}

/* Footer market strip — live odds + timer readable */
#marketStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  font-size: 12px;
  color: rgba(180, 200, 220, 0.85);
}
#marketStrip b {
  font-family: Orbitron, monospace;
  font-weight: 600;
}
.odds-live {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(57, 255, 20, 0.08);
  border: 1px solid rgba(57, 255, 20, 0.25);
}
.odds-live.down {
  background: rgba(255, 45, 85, 0.08);
  border-color: rgba(255, 45, 85, 0.3);
}
.window-timer {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 232, 255, 0.08);
  border: 1px solid rgba(0, 232, 255, 0.3);
}

/* Color tally stays above footer */
.color-tally {
  z-index: 40;
}

/* Settings panel spacing on small screens */
@media (max-width: 640px) {
  .settings-panel {
    margin: 12px;
    padding: 16px;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .gate-actions {
    width: 100%;
  }
  .gate-btn {
    width: 100%;
  }
  #marketStrip {
    font-size: 11px;
    gap: 6px 10px;
  }
  .zt-logo-btn {
    width: 36px;
    height: 36px;
  }
  .beast-badge {
    font-size: 10px;
    padding: 5px 8px;
  }
}

/* Info views full-bleed over main when open */
.info-view:not(.hidden),
.charts-view:not(.hidden) {
  flex: 1;
  overflow-y: auto;
}

/* Ensure hidden utility always wins */
.hidden {
  display: none !important;
}

/* Debate empty / call empty */
.debate-empty,
.call-empty {
  padding: 16px 12px;
  color: rgba(140, 160, 180, 0.75);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* Paper cal buttons if thin */
.paper-cal-btn {
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 232, 255, 0.25);
  background: rgba(8, 16, 28, 0.8);
  color: #9eb0c0;
  cursor: pointer;
}
.paper-cal-btn.active,
.paper-cal-btn:hover {
  border-color: rgba(240, 193, 74, 0.55);
  color: #ffd56a;
  background: rgba(40, 28, 8, 0.55);
}

/* Accuracy badge states */
.accuracy-badge.cold .acc-pct { color: #8a9bb0; }
.accuracy-badge.hot .acc-pct { color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.45); }
.accuracy-badge.warn .acc-pct { color: #f0c14a; }

/* LAW badge alert */
.law-badge.lockdown,
.law-badge.find-out {
  border-color: rgba(255, 45, 85, 0.55);
  box-shadow: 0 0 14px rgba(255, 45, 85, 0.25);
}
.law-badge.lockdown .law-status,
.law-badge.find-out .law-status {
  color: #ff2d55;
}

/* Huddle active */
.huddle-banner:not(:empty) {
  display: block;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(120, 40, 180, 0.25), rgba(0, 40, 80, 0.35));
  border-bottom: 1px solid rgba(168, 85, 247, 0.35);
  color: #e0d0ff;
  font-size: 12px;
  text-align: center;
}

/* Table stage must paint on mobile stack */
@media (max-width: 960px) {
  #tableStage {
    min-height: 42vh;
  }
  #tableStage canvas#roundtable {
    min-height: 42vh;
  }
}

/* Bot stats row wrap */
.bot-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11px;
  color: #8a9bb0;
  margin-top: 4px;
}
.bot-stats b { color: #d8f0ff; }

/* Sub-council lines in dashboard cards */
.agent-card .subs {
  margin-top: 6px;
  border-top: 1px solid rgba(0, 232, 255, 0.1);
  padding-top: 6px;
}


/* === HARD LAYOUT FIXES (2026-08-12) === */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #03060c;
}
#app {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
}
#mainTable {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(200px, 260px) 1fr minmax(200px, 280px) !important;
  grid-template-areas: "table hierarchy" !important;
}
#mainTable.hidden { display: none !important; }
#debatePanel { grid-area: debate !important; }
#tableStage, .table-stage {
  grid-area: table !important;
  position: relative !important;
  min-height: 420px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at center, rgba(8, 14, 24, 0.55) 0%, rgba(2, 4, 10, 0.96) 70%);
}
#hierarchyPanel { grid-area: hierarchy !important; }
#roundtable {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}
#settingsView.hidden,
#seatsView.hidden,
#botsView.hidden,
#ranksView.hidden,
#paperView.hidden,
#chartsView.hidden,
.info-view.hidden,
.charts-view.hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}
.summon-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #05010a !important;
}
body.gate-locked #app {
  filter: blur(3px);
  pointer-events: none !important;
}
body:not(.gate-locked) #app {
  filter: none;
  pointer-events: auto !important;
}
@media (max-width: 960px) {
  #mainTable {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(120px, 20vh) 1fr minmax(140px, 24vh) !important;
    grid-template-areas: "debate" "table" "hierarchy" !important;
  }
  #tableStage, .table-stage { min-height: 40vh !important; }
}

.paper-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(0, 232, 255, 0.25);
  border-radius: 8px;
  background: rgba(4, 10, 20, 0.85);
}
.pe-sides { display: flex; gap: 8px; }
.pe-side {
  min-width: 72px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(20,30,45,0.9);
  color: #c8d8e8;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.pe-side.up.active { background: rgba(20, 120, 60, 0.55); border-color: #39ff14; color: #39ff14; }
.pe-side.down.active { background: rgba(120, 20, 40, 0.55); border-color: #ff2d55; color: #ff2d55; }
.pe-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pe-fields label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: #8aa0b5; letter-spacing: 0.04em;
}
.pe-fields input {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,232,255,0.25);
  border-radius: 4px;
  color: #e8f4ff;
  padding: 8px 10px;
  width: 110px;
  font-size: 14px;
}
.pe-fields .pe-note input { width: 160px; }
.pe-preview { font-size: 14px; color: #9eb0c0; min-width: 120px; }
.pe-preview strong.pos { color: #39ff14; }
.pe-preview strong.neg { color: #ff2d55; }
.paper-call-row .del-trade {
  background: transparent; border: none; color: #886; cursor: pointer; font-size: 12px;
}
.paper-call-row .del-trade:hover { color: #ff2d55; }

/* Council watermark — behind table, non-interactive */
.zt-watermark {
  position: fixed;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(42vw, 420px);
  height: auto;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  filter: drop-shadow(0 0 18px rgba(240, 193, 74, 0.25));
}
body.beast-mode .zt-watermark {
  opacity: 0.16;
}
.zt-logo-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  background: #02040a;
}
.zt-logo-btn {
  padding: 4px !important;
}

/* Immersive FLOOR view — table only, screensaver style.
   Keep the header (tabs + 1H + Bell/music) so the window LED is not clipped. */
body.floor-mode footer,
body.floor-mode #debatePanel,
body.floor-mode #lifetimePanel,
body.floor-mode #hierarchyPanel,
body.floor-mode .color-tally,
body.floor-mode #huddleBanner {
  display: none !important;
}
body.floor-mode #mainTable {
  grid-template-columns: 1fr !important;
  grid-template-areas: "table" !important;
  height: 100vh !important;
  max-height: 100vh !important;
}
body.floor-mode #tableStage,
body.floor-mode .table-stage {
  min-height: 100vh !important;
  height: 100vh !important;
}
body.floor-mode #app {
  background: #02040a;
}
body.floor-mode .zt-watermark {
  opacity: 0.18;
  width: min(52vw, 520px);
}
/* Escape hint */
.floor-hint {
  display: none;
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 50;
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(200, 220, 240, 0.45);
  pointer-events: none;
}
body.floor-mode .floor-hint { display: block; }
body.floor-mode.law-lock .floor-hint { color: rgba(255, 140, 40, 0.75); }

.fade-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #ff8c28;
  border: 1px solid rgba(255, 140, 40, 0.55);
  background: rgba(80, 30, 0, 0.45);
  vertical-align: middle;
}

.anti-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.55);
  background: rgba(40, 10, 60, 0.5);
  vertical-align: middle;
}
.anti-tag.anti-lose {
  color: #f472b6;
  border-color: rgba(244, 114, 182, 0.5);
}

.settings-grid-advanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 14px 0 10px;
}
.settings-card .set-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #b8c0d0;
  margin: 8px 0;
}
.settings-card .set-field input[type="number"] {
  background: #0d111a;
  border: 1px solid #2a3348;
  color: #e8eef8;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
.settings-card .set-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #c5cddc;
  margin: 6px 0;
}
.set-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
#autoBetCard,
#autoBetCard.hidden {
  display: none !important;
}
body.admin-unlocked.mode-settings #autoBetCard {
  display: block !important;
}
#setAutoBetMode {
  background: #0d111a;
  border: 1px solid #2a3348;
  color: #e8eef8;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
}
#autoBetFollowNote {
  margin-top: 8px;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 18px;
}
#settingsView:not(.hidden) {
  overflow: auto !important;
  overscroll-behavior: contain;
  isolation: isolate;
  position: relative !important;
  left: auto !important;
  height: auto !important;
  max-height: none !important;
}


/* ===== FULL UPDATE: logo, password, summon, lightsaber, floor space ===== */
.zt-watermark { display: none !important; }
.zt-header-logo {
  background: none; border: none; padding: 0; cursor: pointer;
  border-radius: 8px; overflow: hidden; line-height: 0;
  box-shadow: 0 0 12px rgba(120, 200, 255, 0.25);
}
.zt-header-logo img { display: block; border-radius: 8px; object-fit: contain; background: #02040a; }
.logo { position: relative; }
.credit-popup {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5000;
  background: rgba(8,12,22,0.95); border: 1px solid #3b82f6;
  border-radius: 10px; padding: 12px 16px; color: #e2e8f0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.credit-popup.hidden { display: none; }

.color-tally-mid {
  /* bottom-right, clear of footer timer and debate log */
  right: 18px !important;
  left: auto !important;
  transform: none !important;
  bottom: 78px !important;   /* above footer market strip */
  z-index: 40;
}
.color-tally {
  right: 18px !important;
  left: auto !important;
  bottom: 78px !important;
}

.password-gate {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1a1040 0%, #050510 70%);
}
.password-gate.hidden { display: none !important; pointer-events: none !important; }
.password-card {
  position: relative;
  overflow: hidden;
  background: rgba(8,12,22,0.94); border: 1px solid #4c1d95;
  border-radius: 16px; padding: 26px 28px; width: min(440px, 92vw);
  text-align: center; box-shadow: 0 0 60px rgba(124,58,237,0.35), 0 0 24px rgba(0,232,255,0.12);
}
.password-card::before {
  content: "";
  pointer-events: none;
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 232, 255, 0.035) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: screen;
}
.password-title { font-family: Orbitron, sans-serif; letter-spacing: 0.12em; font-size: 18px; color: #c4b5fd; text-shadow: 0 0 14px rgba(167,139,250,0.55); }
.password-sub { margin: 8px 0 14px; color: #7dd3fc; font-size: 12px; font-family: "Share Tech Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.password-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 8px;
  border: 1px solid #334155; background: #0b1220; color: #f1f5f9; margin-bottom: 12px;
}
.gate-oath {
  list-style: none;
  margin: 0 0 14px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid rgba(0, 232, 255, 0.28);
  background: rgba(2, 8, 18, 0.72);
  box-shadow: inset 0 0 18px rgba(0, 232, 255, 0.08);
}
.gate-oath li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 14px;
  color: #9ef6ff;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(0, 232, 255, 0.25);
}
.gate-oath li:last-child { margin-bottom: 0; }
.gate-oath li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #ffd56a;
}
.gate-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  color: #e9d5ff;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(240, 193, 74, 0.35);
  background: rgba(20, 12, 32, 0.7);
}
.gate-agree input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #ffd56a;
  flex: 0 0 auto;
}
.gate-btn:disabled,
.gate-btn[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
  filter: grayscale(0.25);
  box-shadow: none !important;
}
.password-error { color: #f87171; font-size: 12px; margin-top: 8px; }
.password-error.hidden { display: none; }

.summon-gate {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: #050510;
}
.summon-gate.hidden { display: none; }
.summon-gate.summoning .gate-inner { opacity: 0; transition: opacity 0.6s; }
.gate-fog { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate-inner { position: relative; z-index: 2; text-align: center; }
.gate-brand { font-family: Orbitron, sans-serif; font-size: 22px; color: #e9d5ff; margin-bottom: 28px; letter-spacing: 0.06em; }
.gate-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.gate-hint { margin-top: 18px; color: #64748b; font-size: 12px; }
.summon-status {
  position: relative;
  z-index: 3;
  margin-top: 24px;
  font-family: Orbitron, sans-serif;
  letter-spacing: 0.12em;
  color: #e9d5ff;
  text-align: center;
}
.summon-status.hidden { display: none; }

html body.tutorial-walk #app {
  visibility: visible !important;
  pointer-events: auto !important;
}
html body.tutorial-walk #passwordGate,
html body.tutorial-walk #summonGate {
  display: none !important;
}
.coach-overlay {
  position: fixed;
  inset: 0;
  z-index: 11040;
  pointer-events: none;
}
.coach-overlay.hidden { display: none !important; }
.coach-hole {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(4, 2, 12, 0.74), 0 0 28px rgba(196, 181, 253, 0.35);
  border: 1px solid rgba(196, 181, 253, 0.7);
  border-radius: 10px;
  pointer-events: none;
}
.coach-card {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
  width: min(420px, calc(100vw - 24px));
  padding: 18px 20px 16px;
  background: rgba(10, 14, 26, 0.96);
  border: 1px solid rgba(167, 139, 250, 0.5);
  color: #e2e8f0;
  box-shadow: 0 0 40px rgba(88, 28, 135, 0.35);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.coach-step {
  font-family: Orbitron, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #a5b4fc;
  margin-bottom: 6px;
}
.coach-card h2 {
  font-family: Orbitron, sans-serif;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: #e9d5ff;
  margin: 0 0 10px;
}
.coach-card p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.45;
  color: #cbd5e1;
}
.coach-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.gate-tutorial { position: relative; z-index: 3; }
.gate-tutorial.hidden { display: none; }
.tut-card {
  background: rgba(10,14,26,0.94); border: 1px solid #6366f1; border-radius: 14px;
  padding: 24px; max-width: 420px; color: #e2e8f0;
}
.tut-step { font-size: 11px; color: #a5b4fc; margin-bottom: 6px; }
.tut-actions { display: flex; justify-content: space-between; margin-top: 18px; gap: 10px; }

.lightsaber-wrap {
  position: fixed; left: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 220px; z-index: 35;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.lightsaber-bar {
  width: 10px; height: 100%; border-radius: 6px;
  background: linear-gradient(to top, #1e293b 0%, #1e293b 50%, #22c55e 50%, #22c55e 100%);
  box-shadow: 0 0 12px rgba(34,197,94,0.45);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.lightsaber-bar.red {
  background: linear-gradient(to bottom, #1e293b 0%, #1e293b 50%, #ef4444 50%, #ef4444 100%);
  box-shadow: 0 0 14px rgba(239,68,68,0.55);
}
.lightsaber-label { font-size: 10px; color: #94a3b8; font-family: Orbitron, sans-serif; }

body.mode-floor #starfield {
  display: block;
}
body.mode-floor #app::after,
body.floor-mode #app::after {
  opacity: 0.48;
}
#starfield {
  display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, #0b1020 0%, #02040a 100%);
}
body.mode-floor main, body.mode-floor .side-panel { position: relative; z-index: 2; }

.sfx-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; opacity: 0; transition: opacity 0.15s;
}
.sfx-flash.show { opacity: 1; }
.sfx-flash.win { color: #4ade80; text-shadow: 0 0 30px #22c55e; }
.sfx-flash.lose { color: #f87171; text-shadow: 0 0 30px #ef4444; }

body.gate-locked #app { visibility: hidden; }


/* Fullscreen summon video */
.summon-video-wrap {
  position: fixed; inset: 0; z-index: 12000;
  background: #000; display: none; align-items: center; justify-content: center;
}
.summon-video-wrap.active { display: flex; }
.summon-video-wrap video {
  width: 100%; height: 100%; object-fit: contain;
}
.summon-fog-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(88,28,135,0.15) 0%, rgba(30,10,50,0.55) 45%, rgba(5,2,15,0.9) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.8;
  mix-blend-mode: screen;
}
.summon-gate.fade-out { opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }

/* ===== SUMMON VIDEO FULLSCREEN + PURPLE MIST ===== */
.summon-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #05010a;
}
.summon-video-wrap.active {
  display: flex !important;
}
.summon-video-wrap video,
#summonVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.summon-fog-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(120, 40, 180, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 40%, rgba(90, 20, 140, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(140, 50, 200, 0.3) 0%, transparent 45%),
    linear-gradient(180deg, rgba(10, 2, 20, 0.2) 0%, rgba(40, 10, 70, 0.45) 60%, rgba(5, 1, 10, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
}
body.gate-revealing #app {
  visibility: hidden;
}
body:not(.gate-locked):not(.gate-revealing) #app {
  visibility: visible;
}
.summon-gate.summoning .gate-inner {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* ===== LIGHTSABER + TALLY LAYOUT FIX + KYLO PARTICLES ===== */
.color-tally,
.color-tally-mid {
  right: 18px !important;
  left: auto !important;
  transform: none !important;
  bottom: 78px !important; /* above footer / timer */
  z-index: 40 !important;
}

/* Thin always-on saber retired — lock ignition is canvas, 1s then OFF */
#tableStage .lightsaber-wrap,
.table-stage .lightsaber-wrap,
.lightsaber-wrap {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Lightsaber: right edge of CENTER table stage — never over debate log */
.lightsaber-wrap {
  position: absolute !important;
  left: auto !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 12 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: none !important;
  width: 28px !important;
}
/* Parent must be relative — table stage is */
#tableStage .lightsaber-wrap,
.table-stage .lightsaber-wrap {
  position: absolute !important;
}

.lightsaber-bar {
  position: relative !important;
  width: 8px !important;
  height: 120px !important;
  border-radius: 4px !important;
  background: linear-gradient(to top, #1e293b, #334155) !important;
  box-shadow: 0 0 8px rgba(0,0,0,0.4) !important;
  transition: height 0.35s ease, background 0.35s ease, box-shadow 0.35s ease !important;
  overflow: visible !important;
}
.lightsaber-bar.up,
.lightsaber-bar:not(.red).lit {
  background: linear-gradient(to top, #064e3b, #22c55e 40%, #86efac 100%) !important;
  box-shadow:
    0 0 12px rgba(34, 197, 94, 0.7),
    0 0 28px rgba(34, 197, 94, 0.35),
    0 0 48px rgba(34, 197, 94, 0.2) !important;
  animation: kyloHumGreen 0.08s steps(2) infinite !important;
}
.lightsaber-bar.red {
  background: linear-gradient(to top, #7f1d1d, #ef4444 45%, #fca5a5 100%) !important;
  box-shadow:
    0 0 14px rgba(239, 68, 68, 0.85),
    0 0 32px rgba(239, 68, 68, 0.45),
    0 0 56px rgba(220, 38, 38, 0.25) !important;
  animation: kyloHumRed 0.07s steps(2) infinite !important;
}
.lightsaber-bar.wait-blade {
  background: linear-gradient(to top, #0e7490, #22d3ee 50%, #a5f3fc 100%) !important;
  box-shadow:
    0 0 12px rgba(34, 211, 238, 0.7),
    0 0 28px rgba(34, 211, 238, 0.35) !important;
  animation: kyloHumCyan 0.09s steps(2) infinite !important;
}

@keyframes kyloHumGreen {
  0% { filter: brightness(1) saturate(1.1); transform: translateX(0); }
  50% { filter: brightness(1.25) saturate(1.3); transform: translateX(0.4px); }
  100% { filter: brightness(0.95) saturate(1); transform: translateX(-0.3px); }
}
@keyframes kyloHumRed {
  0% { filter: brightness(1) saturate(1.2); transform: translateX(0); }
  33% { filter: brightness(1.35) saturate(1.4); transform: translateX(0.6px); }
  66% { filter: brightness(0.9) saturate(1.1); transform: translateX(-0.5px); }
  100% { filter: brightness(1.15) saturate(1.25); transform: translateX(0.2px); }
}
@keyframes kyloHumCyan {
  0% { filter: brightness(1); transform: translateX(0); }
  50% { filter: brightness(1.2); transform: translateX(0.3px); }
  100% { filter: brightness(0.95); transform: translateX(-0.2px); }
}

/* Kylo-style unstable particle sparks */
.lightsaber-sparks {
  position: absolute;
  inset: -8px -14px;
  pointer-events: none;
  overflow: visible;
}
.ls-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
  opacity: 0;
  animation: lsSparkFly 0.55s ease-out forwards;
}
.lightsaber-bar.red .ls-spark { color: #ff6b6b; background: #fecaca; }
.lightsaber-bar.up .ls-spark,
.lightsaber-bar.lit .ls-spark { color: #4ade80; background: #bbf7d0; }
.lightsaber-bar.wait-blade .ls-spark { color: #22d3ee; background: #a5f3fc; }

@keyframes lsSparkFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx, 8px), var(--sy, -12px)) scale(0.2); }
}

.lightsaber-label {
  font-size: 10px !important;
  color: #94a3b8 !important;
  font-family: Orbitron, sans-serif !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
  white-space: nowrap;
}

/* Ensure table stage is positioning context for lightsaber */
#tableStage,
.table-stage {
  position: relative !important;
}

/* Footer timer must stay readable above anything */
footer, #marketStrip, .window-timer {
  z-index: 45 !important;
  position: relative;
}

/* ===== MARKET MIST CANVAS (particle physics) ===== */
.market-mist {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: none;
  opacity: 1;
}
.market-mist.active {
  display: block;
}
.market-mist canvas,
#marketMistCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Subtle hive (easter egg) ===== */
.hive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 4px;
  border: none;
  background: transparent;
  color: rgba(240, 193, 74, 0.28);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.25s ease, transform 0.2s ease, text-shadow 0.25s ease;
  line-height: 0;
}
.hive-btn:hover {
  color: rgba(240, 193, 74, 0.55);
  text-shadow: 0 0 8px rgba(240, 193, 74, 0.25);
  transform: scale(1.08);
}
.hive-btn:active { transform: scale(0.96); }
.hive-svg { display: block; opacity: 0.9; }

.hive-egg {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background:
    radial-gradient(ellipse at center, rgba(8, 20, 40, 0.55) 0%, rgba(2, 4, 10, 0.92) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: hiveEggIn 0.45s ease-out;
}
.hive-egg-img {
  background: transparent !important;
  box-shadow: 0 0 80px rgba(40, 140, 255, 0.22) !important;
}
.hive-egg.hidden { display: none; }
.hive-egg-img {
  max-width: min(920px, 94vw);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(0, 160, 255, 0.25), 0 20px 60px rgba(0,0,0,0.6);
  animation: hiveImgIn 0.55s ease-out;
}
.hive-egg-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  right: max(12px, env(safe-area-inset-right, 12px));
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(0, 232, 255, 0.35);
  background: rgba(6, 12, 22, 0.85);
  color: #e2e8f0;
  font-size: 24px;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  z-index: 1;
}
.hive-egg-close:hover {
  border-color: rgba(240, 193, 74, 0.55);
  color: #f0c14a;
}
@keyframes hiveEggIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hiveImgIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}



/* ===== Bot Choice Count (left panel) ===== */
.bot-choice-count {
  padding: 8px 10px 10px;
  margin: 0 0 6px;
  background: rgba(8, 12, 28, 0.65);
  border: 1px solid rgba(120, 180, 255, 0.12);
  border-radius: 8px;
}
.bcc-row {
  display: grid;
  grid-template-columns: 14px 48px 28px 1fr;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 12px;
  color: #c8d6f0;
}
.bcc-row b { font-variant-numeric: tabular-nums; color: #e8f0ff; }
.bcc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}
.bcc-dot.up { background: #39ff14; color: #39ff14; }
.bcc-dot.down { background: #ff3b5c; color: #ff3b5c; }
.bcc-dot.wait { background: #8b9bb4; color: #8b9bb4; }
.bcc-dot.hold { background: #ffcc33; color: #ffcc33; }
.bcc-dot.swap { background: #c44dff; color: #c44dff; }
.bcc-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.bcc-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.35s ease;
}
.bcc-bar i.up { background: linear-gradient(90deg, #1aff6e, #39ff14); }
.bcc-bar i.down { background: linear-gradient(90deg, #ff1a4a, #ff3b5c); }
.bcc-bar i.wait { background: linear-gradient(90deg, #5a6a80, #8b9bb4); }
.bcc-bar i.hold { background: linear-gradient(90deg, #d4a017, #ffcc33); }

/* ===== Clearer debate entries ===== */
.debate-round {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(140, 180, 255, 0.55);
  margin: 10px 0 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(100, 140, 220, 0.15);
}
.debate-entry {
  padding: 6px 8px;
  margin: 4px 0;
  border-left: 2px solid rgba(120,160,255,0.25);
  background: rgba(10, 14, 30, 0.4);
  border-radius: 0 6px 6px 0;
}
.debate-entry .who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 2px;
}
.debate-entry .who b {
  color: #e8f4ff;
  font-weight: 600;
}
.dir-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid;
  background: rgba(0,0,0,0.25);
}
.debate-entry .said {
  font-size: 12px;
  line-height: 1.35;
  color: #a8b8d0;
}
.feat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.feat-chip {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(80, 120, 200, 0.15);
  color: #8eb4ff;
  border: 1px solid rgba(100, 150, 255, 0.2);
}

/* ===== Admin gate modal ===== */
.admin-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 14, 0.78);
  backdrop-filter: blur(6px);
}
.admin-gate.hidden { display: none; }
.admin-card {
  width: min(360px, 92vw);
  padding: 22px 24px;
  border-radius: 12px;
  background: linear-gradient(160deg, #0e1428, #0a0e1c);
  border: 1px solid rgba(120, 160, 255, 0.25);
  box-shadow: 0 0 40px rgba(80, 120, 255, 0.15);
}
.admin-title {
  font-family: Orbitron, sans-serif;
  letter-spacing: 0.18em;
  font-size: 14px;
  color: #9ec5ff;
  margin-bottom: 4px;
}
.admin-sub {
  font-size: 12px;
  color: #7a8aaa;
  margin-bottom: 12px;
}
.admin-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}
/* ===== MAIN TABLE: LEFT lifetime · CENTER table · RIGHT debate =====
   Hierarchy is ranks-only. Never collapse #tableStage.
*/
#mainTable {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 360px) !important;
  grid-template-areas: "lifetime table debate" !important;
}
#lifetimePanel { grid-area: lifetime !important; }
#debatePanel { grid-area: debate !important; }
#hierarchyPanel.hierarchy-ranks-only {
  display: none !important;
}
body.show-hierarchy #mainTable {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(240px, 300px) !important;
  grid-template-areas: "lifetime table hierarchy" !important;
}
body.show-hierarchy #hierarchyPanel.hierarchy-ranks-only {
  display: flex !important;
  flex-direction: column;
}
body.show-hierarchy #debatePanel { display: none !important; }

#mainTable #tableStage,
#mainTable .table-stage {
  grid-area: table !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  min-height: 420px !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}
#mainTable #roundtable {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

.panel-head-debate .panel-title {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #7ec8ff;
}
.debate-log-main {
  flex: 1 1 auto !important;
  min-height: 280px;
  max-height: none !important;
}

.panel-head-debate .panel-title {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #7ec8ff;
}
.debate-log-main {
  flex: 1 1 auto;
  min-height: 220px;
  max-height: none;
}


/* ===== Large floating 7-segment FLOOR + WINDOW LEDs ===== */
.led-float {
  position: fixed !important;
  z-index: 45 !important;
  pointer-events: none;
  filter: drop-shadow(0 0 22px rgba(0, 255, 255, 0.35));
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* FLOOR — bottom-left, elevated above footer, not inside side panels */
.led-floor {
  left: 20px !important;
  bottom: 78px !important;
  top: auto !important;
}
/* 15M WINDOW — bottom-right, matching twin */
.led-window {
  right: 20px !important;
  bottom: 78px !important;
  top: auto !important;
  opacity: 1 !important;
}

.led-bezel {
  background: linear-gradient(165deg, rgba(4, 10, 22, 0.94), rgba(2, 6, 14, 0.98));
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 14px;
  padding: 14px 18px 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7) inset,
    0 0 28px rgba(0, 255, 255, 0.22),
    0 12px 36px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
}
.led-bezel-lg {
  min-width: 200px;
  padding: 16px 20px 14px;
}
.led-label {
  font-family: Orbitron, Rajdhani, monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(0, 255, 240, 0.75);
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(0, 255, 240, 0.55);
}
.led-row-lg {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 8px;
}
.led-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
}
.led-tag {
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.9;
}
.led-seg.up .led-tag { color: #39ff14; text-shadow: 0 0 8px #39ff14; }
.led-seg.down .led-tag { color: #ff3b5c; text-shadow: 0 0 8px #ff3b5c; }
.led-seg.wait .led-tag { color: #9aa8c0; text-shadow: 0 0 6px #9aa8c0; }
.led-seg.hold .led-tag { color: #ffcc33; text-shadow: 0 0 8px #ffcc33; }

/* 7-segment digital clock look */
.led-digits {
  font-family: "Share Tech Mono", "Courier New", Orbitron, monospace;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #00fff0;
  text-shadow:
    0 0 2px #00fff0,
    0 0 8px rgba(0, 255, 240, 0.9),
    0 0 18px rgba(0, 255, 240, 0.45),
    0 0 32px rgba(0, 255, 240, 0.25);
}
.led-digits-lg {
  font-size: 42px;
  letter-spacing: 0.14em;
}
.led-time {
  font-size: 48px !important;
  text-align: center;
  letter-spacing: 0.16em;
  margin: 2px 0 4px;
}
.led-foot {
  margin-top: 6px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(0, 255, 255, 0.5);
  font-family: Orbitron, monospace;
}

/* Floor / screensaver mode — both LEDs large, mid-height on sides */
body.floor-mode .led-floor {
  left: 3vw !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) scale(1.35);
  opacity: 1;
  z-index: 55;
}
body.floor-mode .led-window {
  right: 3vw !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) scale(1.35);
  opacity: 1;
  z-index: 55;
}

/* Hide LEDs on non-table views */
body.mode-bots .led-float,
body.mode-ranks .led-float,
body.mode-seats .led-float,
body.mode-charts .led-float,
body.mode-settings .led-float,
body.mode-tape .led-float,
body.mode-book .led-float,
body.mode-brain .led-float,
body.mode-news .led-float,
body.mode-wire .led-float,
body.night-mode .led-float,
body.mode-night .led-float {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 900px) {
  #mainTable {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas: "lifetime" "table" "debate" !important;
  }
  .led-digits, .led-digits-lg { font-size: 28px; }
  .led-time { font-size: 36px !important; }
  .led-floor { left: 8px !important; bottom: 70px !important; transform: scale(0.85); transform-origin: bottom left; }
  .led-window { right: 8px !important; bottom: 70px !important; transform: scale(0.85); transform-origin: bottom right; }
}

/* FINAL LAYOUT LOCK — left lifetime, center table, right debate */
#mainTable {
  display: grid !important;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 360px) !important;
  grid-template-areas: "lifetime table debate" !important;
}
#lifetimePanel { grid-area: lifetime !important; display: flex !important; flex-direction: column !important; }
#debatePanel { grid-area: debate !important; display: flex !important; flex-direction: column !important; }
#tableStage, .table-stage { grid-area: table !important; }
#hierarchyPanel.hierarchy-ranks-only { display: none !important; }
body.show-hierarchy #hierarchyPanel.hierarchy-ranks-only { display: flex !important; flex-direction: column !important; }
body.show-hierarchy #debatePanel { display: none !important; }
body.floor-mode #lifetimePanel,
body.floor-mode #debatePanel,
body.floor-mode #hierarchyPanel { display: none !important; }

/* Path average on hit tracker */
.hr-path {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin: 8px 12px 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 255, 240, 0.04);
  border: 1px solid rgba(0, 255, 240, 0.18);
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(180, 210, 230, 0.7);
}
.hr-path b {
  font-size: 14px;
  color: #00fff0;
  text-shadow: 0 0 8px rgba(0, 255, 240, 0.45);
  letter-spacing: 0.04em;
}
.hr-path-lab { opacity: 0.7; }
.hr-path-sub { opacity: 0.55; font-size: 9px; }
.hr-path-sep { opacity: 0.35; }
.call-path {
  display: block;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(0, 255, 240, 0.7);
  margin-top: 2px;
  font-family: "Share Tech Mono", monospace;
}
.call-path.miss { color: rgba(255, 90, 110, 0.75); }


/* ===== Floor mode music control ===== */
.floor-music-btn {
  background: transparent;
  border: 1px solid rgba(0, 232, 255, 0.35);
  color: var(--blade, #00e8ff);
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.68rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: all 0.2s;
}
.floor-music-btn:hover {
  border-color: rgba(240, 193, 74, 0.55);
  color: var(--gold, #f0c14a);
}
.floor-music-btn[aria-pressed="false"] {
  opacity: 0.65;
  color: var(--muted, #6b7c90);
  border-color: rgba(120, 140, 160, 0.35);
}
body:not(.floor-mode) .floor-music-btn {
  /* still visible so user can pre-unmute, but quieter */
  opacity: 0.75;
}


/* ===== Streak celebrate + floor money rain ===== */
.celebrate-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.celebrate-video-wrap.hidden { display: none !important; }
.celebrate-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.celebrate-skip {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(0,232,255,0.45);
  color: #00e8ff;
  padding: 8px 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.floor-money-rain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.floor-money-rain.active {
  opacity: 0.42;
}
.floor-money-rain.hidden { display: none !important; }
.floor-money-rain video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
}
/* Only visible/active in floor mode */
body:not(.floor-mode) .floor-money-rain {
  opacity: 0 !important;
  pointer-events: none;
}


.lock-live-host[hidden],
.lock-live-host.hidden { display: none !important; }
.lock-live-host:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lock-live-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 45, 85, 0.45);
  background: rgba(12, 6, 10, 0.92);
  color: #ff8aa0;
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.lock-live-confirm {
  min-height: 44px;
  width: 72px;
  padding: 6px 8px;
  background: rgba(4, 8, 14, 0.9);
  border: 1px solid rgba(0, 232, 255, 0.35);
  color: #c8e8ff;
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
}
.lock-live-status {
  font-family: Share Tech Mono, monospace;
  font-size: 11px;
  color: #8aa8c0;
}

/* ===== Status strip – big locked call ===== */
#finalDecision.status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 0.65rem 1.1rem;
  background: linear-gradient(180deg, rgba(12, 18, 28, 0.95), rgba(6, 10, 16, 0.98));
  border-top: 1px solid rgba(0, 255, 200, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  font-family: "Segoe UI", system-ui, sans-serif;
}
#finalDecision .label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(140, 180, 200, 0.75);
  font-weight: 600;
}
#decisionPhase {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}
#decisionPhase.phase-entry {
  color: #7ee8ff;
  background: rgba(0, 180, 255, 0.15);
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.25);
}
#decisionPhase.phase-mid {
  color: #ffd56a;
  background: rgba(255, 180, 40, 0.14);
  box-shadow: 0 0 12px rgba(255, 180, 40, 0.2);
}
#decisionPhase.phase-final {
  color: #ff9b7a;
  background: rgba(255, 100, 60, 0.14);
  box-shadow: 0 0 12px rgba(255, 100, 60, 0.22);
}
#decisionPhase.phase-hold {
  color: #9aa7b8;
  background: rgba(120, 140, 160, 0.12);
}
#finalDecision #decisionDir {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 0 18px currentColor;
}
#finalDecision #decisionDir.UP { color: #3dff9a; }
#finalDecision #decisionDir.DOWN { color: #ff5c6a; }
#finalDecision #decisionDir.WAIT,
#finalDecision #decisionDir.LOCKED { color: #c0c8d4; }
#decisionConf {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e8f0ff;
  opacity: 0.92;
}
#decisionLock {
  font-size: 0.78rem;
  font-weight: 600;
  color: #8fd4ff;
  letter-spacing: 0.04em;
}
#decisionLock.is-locked {
  color: #7ee8ff;
  text-shadow: 0 0 10px rgba(0, 220, 255, 0.45);
}
#decisionSummary {
  flex: 1 1 220px;
  font-size: 0.82rem;
  color: rgba(190, 210, 230, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(52vw, 640px);
}

/* Dual BTC/ETH vote strip in footer */
.dual-vote-strip { color: #9ec8e0; font-size: 12px; letter-spacing: 0.03em; }
.dual-vote-strip b { color: #d8f0ff; font-weight: 700; }
.dual-focus-banner { background: rgba(0,20,40,0.6); }


/* TIMER must not sit on the card grid. Centered placement retired. */
.led-window,
body.floor-mode .led-window,
body.mode-art .led-window {
  left: 16px !important;
  right: auto !important;
  bottom: 92px !important;
  top: auto !important;
  transform: none !important;
}

/* Floor bot count LED removed */
#floorLed,
.led-floor {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ETH/BTC decision chips in footer strip */
.eth-decision-strip b,
.btc-decision-strip b {
  font-variant-numeric: tabular-nums;
}
.eth-decision-strip { color: #9dffc0; }
.btc-decision-strip { color: #7fe9ff; }

.dual-window-sub {
  font-size: 10px !important;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-top: 2px;
  color: #9ec8e0 !important;
}





/* ===== BTC / ETH focus — exclusive, never mode-tab ===== */
.focus-tab {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 80 !important;
  position: relative;
  min-width: 3.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(140, 160, 180, 0.35);
  background: rgba(10, 18, 30, 0.85);
  color: #9ab0c8;
  font-family: Orbitron, monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.7;
  transition: all 0.15s ease;
}
.focus-tab:hover { opacity: 1; border-color: rgba(240, 193, 74, 0.55); color: #f0d78a; }
.focus-tab.focus-active {
  opacity: 1 !important;
  color: #ffe7a0 !important;
  border-color: rgba(240, 193, 74, 0.95) !important;
  background: linear-gradient(165deg, rgba(240, 193, 74, 0.32), rgba(90, 55, 5, 0.55)) !important;
  box-shadow: 0 0 16px rgba(240, 193, 74, 0.55) !important;
  text-shadow: 0 0 8px rgba(240, 193, 74, 0.4);
}
/* Only ONE of these can look active — force sibling off via body dataset */
body[data-focus-table="bitcoin"] #focusEth.focus-active,
body[data-focus-table="bitcoin"] #focusFront.focus-active,
body[data-focus-table="bitcoin"] #focusAts.focus-active,
body[data-focus-table="ethereum"] #focusBtc.focus-active,
body[data-focus-table="ethereum"] #focusFront.focus-active,
body[data-focus-table="ethereum"] #focusAts.focus-active,
body[data-focus-table="front"] #focusBtc.focus-active,
body[data-focus-table="front"] #focusEth.focus-active,
body[data-focus-table="front"] #focusAts.focus-active,
body[data-focus-table="ats"] #focusBtc.focus-active,
body[data-focus-table="ats"] #focusEth.focus-active,
body[data-focus-table="ats"] #focusFront.focus-active {
  /* safety: never both */
  opacity: 0.7 !important;
  color: #9ab0c8 !important;
  border-color: rgba(140, 160, 180, 0.35) !important;
  background: rgba(10, 18, 30, 0.85) !important;
  box-shadow: none !important;
}
.focus-table-badge {
  font-family: Share Tech Mono, monospace;
  font-size: 11px;
  color: #f0d78a;
  margin-left: 6px;
  padding: 0.25rem 0.5rem;
  border-left: 1px solid rgba(240, 193, 74, 0.35);
}
body[data-focus-table="front"] #stripBtcPx,
body[data-focus-table="front"] #stripEthPx,
body[data-focus-table="front"] #stripFunding,
body[data-focus-table="front"] #ethDecisionStrip,
body[data-focus-table="front"] #btcDecisionStrip,
body[data-focus-table="front"] #dualVoteStrip,
body[data-focus-table="front"] .odds-live,
body[data-focus-table="ats"] #stripBtcPx,
body[data-focus-table="ats"] #stripEthPx,
body[data-focus-table="ats"] #stripFunding,
body[data-focus-table="ats"] #ethDecisionStrip,
body[data-focus-table="ats"] #btcDecisionStrip,
body[data-focus-table="ats"] #dualVoteStrip,
body[data-focus-table="ats"] .odds-live {
  display: none !important;
}
body[data-focus-table="front"] #wxHighStrip,
body[data-focus-table="front"] #wxSubStrip {
  display: inline !important;
}
body[data-focus-table="ats"] #atsGameStrip {
  display: inline !important;
}
body[data-focus-table="ats"] #atsSportChip {
  display: inline-block !important;
}
body[data-focus-table="ats"] #dualWindowSub,
body[data-focus-table="ats"] #tabNews,
body[data-focus-table="ats"] #tabSchool,
body[data-focus-table="ats"] #tabBook,
body[data-focus-table="front"] #tabNews,
body[data-focus-table="front"] #tabSchool,
body[data-focus-table="front"] #tabBook,
body[data-focus-table="ats"] #bookSatoshi,
body[data-focus-table="ats"] #bookVitalik,
body[data-focus-table="front"] #bookSatoshi,
body[data-focus-table="front"] #bookVitalik,
body[data-focus-table="ats"] .acc-strip,
body[data-focus-table="front"] .acc-strip,
body[data-focus-table="ats"] #paperAutoSummary,
body[data-focus-table="front"] #paperAutoSummary,
body[data-focus-table="ats"] #stripFunding,
body[data-focus-table="ats"] #dualFightCard,
body[data-focus-table="front"] #dualFightCard,
body[data-focus-table="ats"] #stripKalshi,
body[data-focus-table="front"] #stripKalshi,
body[data-focus-table="ats"] .window-timer,
body[data-focus-table="front"] .window-timer {
  display: none !important;
}
body[data-focus-table="ats"] #ledWindowTime {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.wx-high-strip {
  display: none;
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
  color: #f0d78a;
  text-shadow: 0 0 8px rgba(240, 193, 74, 0.4);
}
.wx-sub-strip {
  display: none;
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
  color: #7fe9ff;
  text-shadow: 0 0 8px rgba(0, 232, 255, 0.45);
}
.wx-sub-strip span {
  margin-right: 10px;
}
.wx-sub-strip span[data-tone="kill"],
.wx-sub-strip span[data-tone="cooked"] { color: #ffb000; }
.wx-sub-strip span[data-tone="miss"] { color: #8aa0b4; }
.ats-game-strip {
  display: none;
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
  color: #f0c14a;
  text-shadow: 0 0 8px rgba(240, 193, 74, 0.4);
}
.ats-sport-chip {
  display: none;
  margin-right: 2px;
  padding: 1px 8px;
  border: 1px solid rgba(240, 193, 74, 0.75);
  color: #ffe27a;
  font-family: Orbitron, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-shadow: 0 0 10px rgba(240, 193, 74, 0.75);
  box-shadow: 0 0 12px rgba(240, 193, 74, 0.28), inset 0 0 8px rgba(240, 193, 74, 0.14);
  background: rgba(40, 24, 0, 0.62);
}
.ats-sport-chip[data-live="off"] {
  border-color: rgba(140, 160, 180, 0.35);
  color: #8aa0b4;
  letter-spacing: 0.1em;
  text-shadow: none;
  box-shadow: none;
  background: rgba(10, 16, 24, 0.45);
}
.front-sub-hud {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-width: 920px;
  margin: 8px auto 12px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 232, 255, 0.28);
  background: rgba(2, 8, 16, 0.88);
  box-shadow: inset 0 0 18px rgba(0, 232, 255, 0.08);
  font-family: Orbitron, monospace;
}
.front-sub {
  display: grid;
  grid-template-columns: 14px auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #c8ecff;
}
.front-sub b { color: #7fe9ff; }
.front-sub i { font-style: normal; color: rgba(180, 210, 230, 0.55); font-size: 9px; }
.front-sub-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #7fe9ff, #0a2030 70%);
  box-shadow: 0 0 8px rgba(0, 232, 255, 0.7);
}
.front-sub[data-tone="cooked"] .front-sub-mark,
.front-sub[data-tone="kill"] .front-sub-mark {
  background: radial-gradient(circle, #ffb000, #3a2000 70%);
  box-shadow: 0 0 8px rgba(255, 176, 0, 0.7);
}
.front-sub[data-tone="miss"] .front-sub-mark {
  background: radial-gradient(circle, #6a7a88, #121820 70%);
  box-shadow: none;
}
.front-sub-under {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 232, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.front-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #9ad8ff;
}
.front-sub-row img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.front-sub-row b { color: #7fe9ff; }
.dash-seat-mark,
.rank-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
}
.agent-card .name .dash-seat-mark {
  width: 28px;
  height: 28px;
}
.rank-row .nm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== ALL VIDEOS FIT TO SCREEN (final override) ===== */
.summon-video-wrap,
.celebrate-video-wrap,
#summonVideoWrap,
#celebrateVideoWrap,
#leaderClickWrap,
#deskIntroWrap,
.desk-intro-wrap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10050 !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.summon-video-wrap.hidden,
.celebrate-video-wrap.hidden,
#celebrateVideoWrap.hidden,
#leaderClickWrap.hidden,
#summonVideoWrap:not(.active),
#summonVideoWrap.hidden,
.summon-video-wrap:not(.active) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
#summonVideoWrap:not(.active) video,
#summonVideoWrap.hidden video {
  pointer-events: none !important;
}
.summon-video-wrap.active,
#summonVideoWrap.active {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.summon-video-wrap video,
.celebrate-video-wrap video,
#summonVideo,
#celebrateVideo,
#leaderClickVideo,
#deskIntroVideo,
.desk-intro-wrap video,
.summon-video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  object-fit: contain !important; /* full video visible, fit to screen */
  object-position: center center !important;
  background: #000 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ambient floor rain fills viewport */
.floor-money-rain,
#floorMoneyRain {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.floor-money-rain video,
#floorMoneyRainVideo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Skip buttons stay on-screen */
.summon-video-skip,
.celebrate-skip,
#celebrateVideoSkip,
#summonVideoSkip,
#deskIntroSkip,
.desk-intro-skip {
  position: absolute !important;
  z-index: 10060 !important;
  bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  right: max(16px, env(safe-area-inset-right, 16px)) !important;
  top: auto !important;
}

/* ===== DESK UNLOCK INTRO — contain, never cover, never overflow ===== */
#deskIntroWrap,
.desk-intro-wrap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 150000 !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#deskIntroWrap.hidden,
#deskIntroWrap:not(.active),
.desk-intro-wrap.hidden,
.desk-intro-wrap:not(.active) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
#deskIntroWrap.active,
.desk-intro-wrap.active {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
#deskIntroVideo,
.desk-intro-wrap video {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#deskIntroSkip,
.desk-intro-skip {
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #c8d8e8;
  cursor: pointer;
}

/* Mobile / landscape safety */
@media (orientation: landscape) and (max-height: 500px) {
  .summon-video-wrap video,
  .celebrate-video-wrap video,
  #summonVideo,
  #celebrateVideo,
  #deskIntroVideo,
  .desk-intro-wrap video {
    object-fit: contain !important;
  }
}


/* ===== Hour aurora + focus spotlight + reduced motion ===== */
body.floor-mode::before,
body.mode-floor::before {
  content: none;
  background: none;
}
body.floor-mode #roundtable {
  position: relative;
  z-index: 1;
}
body[data-focus-table="bitcoin"] .floor-eth-dim,
body[data-focus-table="ethereum"] .floor-btc-dim {
  filter: brightness(0.55) saturate(0.7);
}

@media (prefers-reduced-motion: reduce) {
  .summon-video-wrap video,
  .celebrate-video-wrap video,
  .floor-money-rain video { animation: none !important; }
  body.floor-mode::before { transition: none; }
  .hdot { box-shadow: none !important; }
}
body.reduce-motion .floor-money-rain { display: none !important; }
body.reduce-motion #ledWindow::before,
body.reduce-motion #windowLed::before { animation: none !important; opacity: 0.5; }

/* ===== DESK FIT @ 1280 — keep overlay look, stop clip / overlap ===== */
#app > header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 8px 14px 7px !important;
  overflow: visible !important;
  clip-path: none !important;
  position: relative !important;
  z-index: 200 !important;
  pointer-events: auto !important;
}
#app > header .mode-tab,
#app > header .focus-tab,
#app > header .controls button,
#app > header .beast-badge,
#soundToggle {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
}
#app > header .logo {
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px;
}
#app > header .logo .title {
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
#app > header .controls {
  flex: 1 1 auto;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px !important;
  min-width: 0;
}
#app > header .mode-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: none !important;
  overflow: visible;
  padding: 3px 4px;
}
#app > header .mode-tab,
#app > header .focus-tab,
#soundToggle {
  flex: 0 0 auto;
  padding: 5px 8px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap;
}
#app > header .focus-tab {
  min-width: 2.8rem;
}
#app > header .focus-table-badge {
  flex: 0 0 auto;
  margin-left: 2px;
  font-size: 10px;
  white-space: nowrap;
}
#app > header .accuracy-badge {
  min-width: 0;
  padding: 4px 8px;
}
#app > header .huddle-badge {
  min-width: 0;
  padding: 3px 8px;
}
#app > header .law-badge {
  padding: 4px 8px;
}
#app > header .beast-badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-size: 10px;
  overflow: visible !important;
  max-width: none !important;
}
#app > header #lastUpdate {
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

#mainTable {
  padding: 0 12px 8px 0 !important;
  column-gap: 12px !important;
}
#lifetimePanel {
  margin: 8px 0 8px 8px;
}
body.mode-art #lifetimePanel {
  padding-top: 8px;
  padding-bottom: 12px;
}
#hierarchyPanel,
body.show-hierarchy #hierarchyPanel.hierarchy-ranks-only {
  margin: 8px 18px 8px 0 !important;
}

/* Digit timer docks to the table stage corner — never lower-center overlay.
   Hour ring stays gone (no ::before conic). */
#windowLed.led-window,
#tableStage #windowLed.led-window,
#tableStage .led-window,
body.floor-mode #windowLed.led-window,
body.mode-art #windowLed.led-window,
body.floor-mode .led-window,
body.mode-art .led-window {
  position: fixed !important;
  left: 16px !important;
  right: auto !important;
  bottom: 92px !important;
  top: auto !important;
  transform: none !important;
  z-index: 40 !important;
  pointer-events: none;
}
body.floor-mode #windowLed.led-window {
  bottom: 24px !important;
  left: 16px !important;
}
#windowLed::before,
#windowLed::after,
#ledWindow::before,
#ledWindow::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}
#tableStage #windowLed .led-time {
  font-size: 32px !important;
}
#tableStage #windowLed .led-bezel {
  padding: 10px 14px 8px;
}
body.mode-dashboard .led-float,
body.mode-seats .led-float,
body.mode-paper .led-float,
body.mode-bots .led-float,
body.mode-ranks .led-float,
body.mode-charts .led-float,
body.mode-settings .led-float,
body.mode-tape .led-float,
body.mode-book .led-float,
body.mode-brain .led-float,
body.mode-news .led-float,
body.mode-wire .led-float,
body.night-mode .led-float,
body.mode-night .led-float {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body:not(.floor-mode) .floor-music-btn {
  display: none !important;
}
body.floor-mode .floor-music-btn {
  display: inline-flex !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 4;
  opacity: 1;
}

@media (max-width: 1320px) {
  #app > header .logo .title { font-size: 0.72rem; letter-spacing: 0.08em; }
  #app > header .live-clock { display: none; }
  #app > header .accuracy-badge .acc-detail,
  #app > header .accuracy-badge .acc-col-right { display: none; }
  #app > header #lastUpdate { display: none; }
  #app > header .hive-btn { display: none; }
  #app > header .huddle-badge .huddle-status { display: none; }
}

/* ===== QA LOCK @ 1280×800 — cards, ticker, hierarchy rail ===== */
#windowLed,
#windowLed.led-window,
#windowLed.led-float {
  position: fixed !important;
  left: 16px !important;
  right: auto !important;
  bottom: 92px !important;
  top: auto !important;
  transform: none !important;
  z-index: 35 !important;
}
body.floor-mode #windowLed,
body.floor-mode #windowLed.led-window {
  /* In-flow under nav — never fixed top:40 under the tab row. */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 4 !important;
}
body.mode-art #windowLed,
body.mode-art #windowLed.led-window {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Top of the lifetime rail — never the table ring or footer. */
  top: 110px !important;
  bottom: auto !important;
  left: 16px !important;
}
body.mode-dashboard #windowLed,
body.mode-dashboard #windowLed.led-window,
body.mode-dashboard #windowLed.led-float,
body.mode-seats #windowLed,
body.mode-seats #windowLed.led-window,
body.mode-seats #windowLed.led-float,
body.mode-bots #windowLed,
body.mode-bots #windowLed.led-window,
body.mode-ranks #windowLed,
body.mode-paper #windowLed,
body.mode-charts #windowLed,
body.mode-settings #windowLed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#dashboardOverlay {
  align-content: flex-start !important;
  justify-content: flex-start !important;
  overflow: auto !important;
  padding: 12px 12px 20px !important;
  pointer-events: auto;
}
#botsView.info-view:not(.hidden),
#seatsView.info-view:not(.hidden) {
  padding-bottom: 28px;
}
.bot-blurb {
  overflow: visible;
  white-space: normal;
}

footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  padding: 8px 14px 10px !important;
  gap: 6px;
}
#finalDecision.status-strip,
#finalDecision {
  flex-wrap: wrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#decisionSummary,
#finalDecision #decisionSummary,
footer #decisionSummary {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  word-break: normal;
  overflow-wrap: anywhere;
}
#marketStrip {
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 6px 12px !important;
  overflow: visible !important;
}

body.show-hierarchy #mainTable {
  min-height: 0 !important;
}
body.show-hierarchy #hierarchyPanel.hierarchy-ranks-only {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: calc(100vh - 148px) !important;
  height: auto !important;
  overflow: hidden !important;
  margin: 8px 18px 8px 0 !important;
}
#hierarchyPanel .hierarchy-hint {
  flex: 0 0 auto;
}
#hierarchyPanel .hierarchy-list,
#hierarchyList.hierarchy-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 8px !important;
}
#hierarchyPanel .open-charts-btn,
#openChartsBtn.open-charts-btn {
  flex: 0 0 auto !important;
  margin: 8px 10px 10px !important;
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: rgba(4, 8, 16, 0.96);
}

/* Compact digit timer so the left-rail chip does not eat the lifetime card */
#windowLed .led-time { font-size: 28px !important; }
#windowLed .led-bezel { padding: 8px 12px 6px; }
#windowLed .led-label { font-size: 9px; margin-bottom: 4px; }

/* Help tutorial — full-desk veil, card stays in its box */
#helpTutorialOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(2, 4, 10, 0.92) !important;
  overflow: auto !important;
}
#helpTutorialOverlay .gate-tutorial,
#helpTutorialOverlay .tut-card {
  position: relative !important;
  max-width: min(560px, 92vw) !important;
  max-height: min(80vh, 680px) !important;
  overflow: auto !important;
  margin: 0 auto !important;
  background: rgba(8, 12, 22, 0.98) !important;
}
#helpTutorialOverlay .tut-title,
#helpTutorialOverlay h2 {
  font-family: Orbitron, monospace;
  font-size: 18px;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
  color: #e8f4ff;
}
#helpTutorialOverlay .tut-body,
#helpTutorialOverlay #tutBody,
#helpTutorialOverlay [data-tut="body"] {
  white-space: pre-wrap;
  overflow: visible;
  color: #9eb0c0;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.celebrate-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Orbitron, sans-serif;
  font-size: clamp(22px, 4vw, 42px);
  letter-spacing: 0.18em;
  color: #f0c14a;
  text-shadow: 0 0 24px rgba(240, 193, 74, 0.45);
  pointer-events: none;
  z-index: 1;
}
.celebrate-fallback[hidden] { display: none !important; }

/* Cinematic must cover Charts and every other view */
#celebrateVideoWrap,
#celebrateVideoWrap.active {
  z-index: 10080 !important;
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#celebrateVideoWrap.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== LIVE DESK QA — strip / tabs / cinematic (1280) ===== */
#app {
  overflow: hidden !important;
}
#app > footer {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 80 !important;
  isolation: isolate;
  background: #03060c !important;
  border-top: 1px solid rgba(0, 232, 255, 0.16);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.55);
  clip-path: none !important;
  overflow: hidden !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
}
#app > footer #finalDecision,
#app > footer #finalDecision.status-strip {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  order: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px 10px !important;
  padding: 4px 2px 2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#app > footer #decisionDir {
  font-size: 1.15rem !important;
  line-height: 1.1 !important;
}
#app > footer #decisionSummary,
#app > footer #finalDecision #decisionSummary {
  flex: 1 1 12rem !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#app > footer #marketStrip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  flex: 0 0 auto !important;
  order: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px 12px !important;
  padding-top: 6px !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(0, 232, 255, 0.12);
  background: #03060c !important;
  z-index: 1 !important;
}
#mainTable {
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}
#lifetimePanel {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  padding-bottom: 8px !important;
}
#callLog.call-log {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 1 !important;
}
#callLog .call-empty {
  position: relative !important;
  z-index: 1 !important;
  padding-bottom: 18px;
}

/* Tab highlight follows body.mode-* so DASHBOARD cannot stay lit on CHARTS
   (same lock as BOTS→RANKS). Wait until a mode-* class exists so Table
   is not unstyled before setMode("art") on boot. */
body[class*="mode-"]:not(.mode-seats) #tabSeats,
body[class*="mode-"]:not(.mode-seats) #tabSeats.active,
body.beast-mode[class*="mode-"]:not(.mode-seats) #tabSeats,
body.beast-mode[class*="mode-"]:not(.mode-seats) #tabSeats.active,
body[class*="mode-"]:not(.mode-charts) #tabCharts,
body[class*="mode-"]:not(.mode-charts) #tabCharts.active,
body.beast-mode[class*="mode-"]:not(.mode-charts) #tabCharts,
body.beast-mode[class*="mode-"]:not(.mode-charts) #tabCharts.active,
body[class*="mode-"]:not(.mode-paper) #tabPaper,
body[class*="mode-"]:not(.mode-paper) #tabPaper.active,
body.beast-mode[class*="mode-"]:not(.mode-paper) #tabPaper,
body.beast-mode[class*="mode-"]:not(.mode-paper) #tabPaper.active,
body[class*="mode-"]:not(.mode-settings) #tabSettings,
body[class*="mode-"]:not(.mode-settings) #tabSettings.active,
body.beast-mode[class*="mode-"]:not(.mode-settings) #tabSettings,
body.beast-mode[class*="mode-"]:not(.mode-settings) #tabSettings.active,
body[class*="mode-"]:not(.mode-floor) #tabFloor,
body[class*="mode-"]:not(.mode-floor) #tabFloor.active,
body.beast-mode[class*="mode-"]:not(.mode-floor) #tabFloor,
body.beast-mode[class*="mode-"]:not(.mode-floor) #tabFloor.active,
body[class*="mode-"]:not(.mode-night) #tabNight,
body[class*="mode-"]:not(.mode-night) #tabNight.active,
body.beast-mode[class*="mode-"]:not(.mode-night) #tabNight,
body.beast-mode[class*="mode-"]:not(.mode-night) #tabNight.active,
body[class*="mode-"]:not(.mode-tape) #tabTape,
body[class*="mode-"]:not(.mode-tape) #tabTape.active,
body.beast-mode[class*="mode-"]:not(.mode-tape) #tabTape,
body.beast-mode[class*="mode-"]:not(.mode-tape) #tabTape.active,
body[class*="mode-"]:not(.mode-book) #tabBook,
body[class*="mode-"]:not(.mode-book) #tabBook.active,
body.beast-mode[class*="mode-"]:not(.mode-book) #tabBook,
body.beast-mode[class*="mode-"]:not(.mode-book) #tabBook.active,
body[class*="mode-"]:not(.mode-brain) #tabBrain,
body[class*="mode-"]:not(.mode-brain) #tabBrain.active,
body.beast-mode[class*="mode-"]:not(.mode-brain) #tabBrain,
body.beast-mode[class*="mode-"]:not(.mode-brain) #tabBrain.active,
body[class*="mode-"]:not(.mode-news) #tabNews,
body[class*="mode-"]:not(.mode-news) #tabNews.active,
body.beast-mode[class*="mode-"]:not(.mode-news) #tabNews,
body.beast-mode[class*="mode-"]:not(.mode-news) #tabNews.active,
body[class*="mode-"]:not(.mode-wire) #tabWire:not(.wire-hot),
body[class*="mode-"]:not(.mode-wire) #tabWire.active:not(.wire-hot),
body.beast-mode[class*="mode-"]:not(.mode-wire) #tabWire:not(.wire-hot),
body.beast-mode[class*="mode-"]:not(.mode-wire) #tabWire.active:not(.wire-hot),
body[class*="mode-"]:not(.mode-school) #tabSchool,
body[class*="mode-"]:not(.mode-school) #tabSchool.active,
body.beast-mode[class*="mode-"]:not(.mode-school) #tabSchool,
body.beast-mode[class*="mode-"]:not(.mode-school) #tabSchool.active,
body[class*="mode-"]:not(.mode-side) #tabSide,
body[class*="mode-"]:not(.mode-side) #tabSide.active,
body.beast-mode[class*="mode-"]:not(.mode-side) #tabSide,
body.beast-mode[class*="mode-"]:not(.mode-side) #tabSide.active,
body[class*="mode-"]:not(.mode-front) #tabFront,
body[class*="mode-"]:not(.mode-front) #tabFront.active,
body.beast-mode[class*="mode-"]:not(.mode-front) #tabFront,
body.beast-mode[class*="mode-"]:not(.mode-front) #tabFront.active,
body[class*="mode-"]:not(.mode-art) #tabScreensaver,
body[class*="mode-"]:not(.mode-art) #tabScreensaver.active,
body.beast-mode[class*="mode-"]:not(.mode-art) #tabScreensaver,
body.beast-mode[class*="mode-"]:not(.mode-art) #tabScreensaver.active {
  color: var(--muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transition: none !important;
}
body.mode-seats #tabSeats,
body.mode-seats #tabSeats.active,
body.mode-charts #tabCharts,
body.mode-charts #tabCharts.active,
body.mode-paper #tabPaper,
body.mode-paper #tabPaper.active,
body.mode-settings #tabSettings,
body.mode-settings #tabSettings.active,
body.mode-floor #tabFloor,
body.mode-floor #tabFloor.active,
body.mode-night #tabNight,
body.mode-night #tabNight.active,
body.mode-tape #tabTape,
body.mode-tape #tabTape.active,
body.mode-book #tabBook,
body.mode-book #tabBook.active,
body.mode-brain #tabBrain,
body.mode-brain #tabBrain.active,
body.mode-news #tabNews,
body.mode-news #tabNews.active,
body.mode-wire #tabWire,
body.mode-wire #tabWire.active,
body.mode-school #tabSchool,
body.mode-school #tabSchool.active,
body.mode-side #tabSide,
body.mode-side #tabSide.active,
body.mode-front #tabFront,
body.mode-front #tabFront.active,
body.mode-art #tabScreensaver,
body.mode-art #tabScreensaver.active {
  color: var(--blade) !important;
  border-color: rgba(0, 232, 255, 0.5) !important;
  background: rgba(0, 232, 255, 0.08) !important;
  box-shadow: 0 0 14px rgba(0, 232, 255, 0.15) !important;
  transition: none !important;
}
body.beast-mode.mode-seats #tabSeats,
body.beast-mode.mode-seats #tabSeats.active,
body.beast-mode.mode-charts #tabCharts,
body.beast-mode.mode-charts #tabCharts.active,
body.beast-mode.mode-paper #tabPaper,
body.beast-mode.mode-paper #tabPaper.active,
body.beast-mode.mode-settings #tabSettings,
body.beast-mode.mode-settings #tabSettings.active,
body.beast-mode.mode-floor #tabFloor,
body.beast-mode.mode-floor #tabFloor.active,
body.beast-mode.mode-night #tabNight,
body.beast-mode.mode-night #tabNight.active,
body.beast-mode.mode-tape #tabTape,
body.beast-mode.mode-tape #tabTape.active,
body.beast-mode.mode-book #tabBook,
body.beast-mode.mode-book #tabBook.active,
body.beast-mode.mode-brain #tabBrain,
body.beast-mode.mode-brain #tabBrain.active,
body.beast-mode.mode-news #tabNews,
body.beast-mode.mode-news #tabNews.active,
body.beast-mode.mode-wire #tabWire,
body.beast-mode.mode-wire #tabWire.active,
body.beast-mode.mode-school #tabSchool,
body.beast-mode.mode-school #tabSchool.active,
body.beast-mode.mode-side #tabSide,
body.beast-mode.mode-side #tabSide.active,
body.beast-mode.mode-front #tabFront,
body.beast-mode.mode-front #tabFront.active,
body.beast-mode.mode-art #tabScreensaver,
body.beast-mode.mode-art #tabScreensaver.active {
  border-color: rgba(240, 193, 74, 0.7) !important;
  color: #ffe49a !important;
  text-shadow: 0 0 10px rgba(240, 193, 74, 0.4) !important;
}

/* Keep huddle chip text at 1280 — cinematic must not blank it */
#app > header .huddle-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
#app > header .huddle-badge .huddle-label,
#app > header .huddle-badge .huddle-status,
#app > header .huddle-badge .huddle-chip-status {
  display: inline !important;
  visibility: visible !important;
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cinematic is an overlay only — never take over layout / resize the desk */
body.zt-cinematic #celebrateVideoWrap:not(.hidden) {
  z-index: 10080 !important;
}
body.leader-clip-on #leaderClickWrap:not(.hidden),
#leaderClickWrap.active {
  z-index: 10080 !important;
  cursor: pointer;
}
#leaderClickWrap {
  cursor: pointer;
}
#leaderClickFallback {
  display: none !important;
}
body.floor-mode #roundtable,
body.mode-floor #roundtable,
body.floor-mode #tableStage,
body.mode-floor #tableStage {
  pointer-events: auto !important;
}
#roundtable.chair-hot {
  cursor: pointer;
}

/* ===== DESK LIST LOCK — timer / header / tutorial (final) ===== */
#windowLed::before,
#windowLed::after,
#ledWindow::before,
#ledWindow::after,
.led-window::before,
.led-window::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  opacity: 0 !important;
}
#windowLed,
#windowLed.led-window,
#windowLed.led-float,
body.floor-mode .led-window,
body.mode-floor .led-window,
body.mode-art .led-window {
  position: fixed !important;
  left: 16px !important;
  right: auto !important;
  top: 110px !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 35 !important;
}
body.floor-mode #windowLed,
body.floor-mode #windowLed.led-window,
body.mode-floor #windowLed {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 4 !important;
}
body.mode-art #windowLed,
body.mode-art #windowLed.led-window {
  top: 110px !important;
  left: 16px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body:not(.mode-art):not(.floor-mode):not(.mode-floor) #windowLed,
body.mode-dashboard #windowLed,
body.mode-dashboard #windowLed.led-window,
body.mode-dashboard .led-window,
body.mode-bots #windowLed,
body.mode-ranks #windowLed,
body.mode-paper #windowLed,
body.mode-charts #windowLed,
body.mode-settings #windowLed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#app > header,
#app > header.top-bar {
  overflow: visible !important;
  clip-path: none !important;
  flex-wrap: nowrap !important;
  flex-direction: column !important;
}
#app > header .header-row {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
#app > header .controls {
  flex-wrap: wrap !important;
  min-width: 0 !important;
  overflow: visible !important;
}
#beastBadge,
#app > header .beast-badge,
#app > header #beastBadge {
  flex: 0 0 auto !important;
  overflow: visible !important;
  max-width: none !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#helpTutorialOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
}
#helpTutorialOverlay .tut-card {
  display: flex !important;
  flex-direction: column !important;
  max-width: min(560px, 92vw) !important;
  max-height: min(80vh, 680px) !important;
  overflow: auto !important;
  position: relative !important;
}
#helpTutorialOverlay .tut-body,
#helpTutorialOverlay .tut-tip,
#helpTutorialOverlay .tut-bots {
  position: relative !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  white-space: pre-wrap;
  overflow: visible;
}

/* ===== SETTINGS HIT-ZONE + ROOM LOCK =====
   Leftover BOTS/CHARTS/RANKS / hive / logo hit boxes must not sit on
   SOUND & UI. Panel scrolls in the space under the header, not through it. */
#hiveBtn.hive-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 4px !important;
  margin-left: 6px !important;
  overflow: hidden !important;
  flex: 0 0 28px !important;
}
#hiveEgg.hidden,
.hive-egg.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mode-settings #app > header {
  flex: 0 0 auto !important;
  position: relative !important;
  pointer-events: none !important;
}
body.mode-settings #app > header .mode-tab,
body.mode-settings #app > header .focus-tab,
body.mode-settings #app > header .beast-badge,
body.mode-settings #app > header #beastBadge,
body.mode-settings #app > header #soundToggle,
body.mode-settings #app > header #tabSettings {
  pointer-events: auto !important;
}
body.mode-settings #hiveBtn,
body.mode-settings #ztLogoBtn,
body.mode-settings #ztHeaderLogo {
  pointer-events: none !important;
}

body.mode-settings #mainTable,
body.mode-settings #mainTable *,
body.mode-settings #seatsView,
body.mode-settings #botsView,
body.mode-settings #ranksView,
body.mode-settings #chartsView,
body.mode-settings #paperView,
body.mode-settings #tapeView,
body.mode-settings #bookView,
body.mode-settings #brainView,
body.mode-settings #newsView,
body.mode-settings #schoolView,
body.mode-settings #sideView,
body.mode-settings #frontView,
body.mode-settings #dashboardOverlay,
body.mode-settings #openChartsBtn,
body.mode-settings #hierarchyPanel {
  pointer-events: none !important;
}

body.mode-settings #settingsView:not(.hidden),
body.mode-settings #settingsView.info-view:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 90 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  padding: 10px 16px 28px !important;
}
body.mode-settings #settingsView .settings-panel {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  margin: 4px auto 36px !important;
  max-width: min(920px, calc(100% - 12px)) !important;
  padding-bottom: 40px !important;
}
body.mode-settings #settingsView .set-check,
body.mode-settings #settingsView .set-field,
body.mode-settings #settingsView input,
body.mode-settings #settingsView label,
body.mode-settings #settingsView button,
body.mode-settings #settingsView select,
body.mode-settings #settingsView #adminToolsCard {
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

/* ===== PHONE 390 — layer on current desk, do not replace it ===== */
@media (max-width: 480px) {
  html, body {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100vw !important;
  }
  #app {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }

  #app > header {
    order: 1;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
  }
  #app > header .header-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #app > header .mode-tabs {
    order: 2;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    padding: 4px 6px !important;
  }
  #app > header .mode-tab,
  #app > header .focus-tab,
  #app > header #soundToggle,
  #app > header .beast-badge,
  #app > header #beastBadge {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
  }
  #app > header .zt-logo-btn,
  #app > header .zt-header-logo {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #windowLed,
  #windowLed.led-window,
  #windowLed.led-float,
  body.mode-art #windowLed,
  body.mode-art #windowLed.led-window,
  body.floor-mode #windowLed,
  body.floor-mode #windowLed.led-window,
  body.mode-floor #windowLed,
  body.mode-floor #windowLed.led-window {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    order: 2;
    z-index: 6 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 6px auto 0 !important;
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    pointer-events: none !important;
  }
  body.mode-dashboard #windowLed,
  body.mode-seats #windowLed,
  body.mode-bots #windowLed,
  body.mode-ranks #windowLed,
  body.mode-paper #windowLed,
  body.mode-charts #windowLed,
  body.mode-settings #windowLed {
    display: none !important;
  }

  #mainTable,
  #settingsView,
  #seatsView,
  #botsView,
  #ranksView,
  #paperView,
  #chartsView {
    order: 3;
  }
  #app > footer {
    order: 10;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
  #app > footer #finalDecision,
  #app > footer #finalDecision.status-strip {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  #mainTable {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  #tableStage,
  #mainTable #tableStage,
  #mainTable .table-stage {
    order: 1;
    width: 100% !important;
    min-height: min(68dvh, 520px) !important;
    height: min(68dvh, 520px) !important;
    max-height: none !important;
  }
  #lifetimePanel {
    order: 2;
    display: flex !important;
    padding-top: 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.mode-art #lifetimePanel {
    padding-top: 8px !important;
  }
  #debatePanel,
  #hierarchyPanel,
  body.show-hierarchy #hierarchyPanel.hierarchy-ranks-only {
    display: none !important;
  }

  body.floor-mode #app > header,
  body.mode-floor #app > header {
    display: flex !important;
  }
  body.floor-mode #app > header .header-row,
  body.mode-floor #app > header .header-row {
    display: none !important;
  }
  body.floor-mode #app > header .mode-tabs,
  body.mode-floor #app > header .mode-tabs {
    display: flex !important;
  }
  body.floor-mode #app > footer,
  body.mode-floor #app > footer {
    display: flex !important;
  }
  body.floor-mode #mainTable,
  body.floor-mode #tableStage,
  body.floor-mode .table-stage,
  body.mode-floor #mainTable,
  body.mode-floor #tableStage {
    height: auto !important;
    min-height: min(72dvh, 560px) !important;
    max-height: none !important;
  }
  body.floor-mode #lifetimePanel,
  body.mode-floor #lifetimePanel {
    display: none !important;
  }

  body.mode-settings #settingsView:not(.hidden),
  body.mode-settings #settingsView.info-view:not(.hidden) {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 80 !important;
    padding: 8px 12px 32px !important;
  }
  body.mode-settings #app > header {
    pointer-events: none !important;
    z-index: 4 !important;
  }
  body.mode-settings #app > header .mode-tab,
  body.mode-settings #app > header .focus-tab,
  body.mode-settings #app > header #tabSettings {
    pointer-events: auto !important;
  }
  body.mode-settings #settingsView .set-check {
    min-height: 44px !important;
    pointer-events: auto !important;
    z-index: 20 !important;
  }
  body.mode-settings #settingsView .set-check input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    pointer-events: auto !important;
  }

  .password-gate,
  .summon-gate,
  #adminGate.admin-gate {
    align-items: center !important;
    justify-content: center !important;
    padding: max(20px, env(safe-area-inset-top, 20px)) 16px max(20px, env(safe-area-inset-bottom, 20px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
  }
  .password-card,
  .gate-inner,
  .tut-card,
  .admin-card {
    margin: auto !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(360px, 92vw) !important;
    max-width: 92vw !important;
  }
  .password-card {
    width: min(440px, 92vw) !important;
  }

  .lightsaber-wrap {
    top: auto !important;
    bottom: auto !important;
    left: 8px !important;
    transform: none !important;
    width: 10px !important;
    height: 120px !important;
  }

  .info-view:not(.hidden) {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.mode-charts #chartsView.charts-view:not(.hidden),
  .charts-view:not(.hidden) {
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .charts-pairs,
  .charts-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .chart-card {
    min-height: 200px !important;
    width: 100% !important;
  }
  .chart-card.chart-pair,
  .chart-card.chart-wide {
    min-height: 260px !important;
  }
  .chart-card canvas {
    min-height: 160px !important;
    height: 160px !important;
    max-height: 220px !important;
  }
  .chart-card.chart-pair canvas,
  .chart-card.chart-wide canvas {
    min-height: 220px !important;
    height: 220px !important;
    max-height: 220px !important;
  }
}

/* ===== LIVE QA — exclusive tabs, docked 1H WINDOW, ticker, Paper ===== */
#app > header .mode-tab[data-mode] {
  color: var(--muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
body.mode-art #app > header #tabScreensaver,
body.mode-art #app > header #tabScreensaver.active,
body.mode-floor #app > header #tabFloor,
body.mode-floor #app > header #tabFloor.active,
body.mode-night #app > header #tabNight,
body.mode-night #app > header #tabNight.active,
body.mode-tape #app > header #tabTape,
body.mode-tape #app > header #tabTape.active,
body.mode-book #app > header #tabBook,
body.mode-book #app > header #tabBook.active,
body.mode-brain #app > header #tabBrain,
body.mode-brain #app > header #tabBrain.active,
body.mode-news #app > header #tabNews,
body.mode-news #app > header #tabNews.active,
body.mode-wire #app > header #tabWire,
body.mode-wire #app > header #tabWire.active,
body.mode-school #app > header #tabSchool,
body.mode-school #app > header #tabSchool.active,
body.mode-side #app > header #tabSide,
body.mode-side #app > header #tabSide.active,
body.mode-front #app > header #tabFront,
body.mode-front #app > header #tabFront.active,
body.mode-seats #app > header #tabSeats,
body.mode-seats #app > header #tabSeats.active,
body.mode-charts #app > header #tabCharts,
body.mode-charts #app > header #tabCharts.active,
body.mode-paper #app > header #tabPaper,
body.mode-paper #app > header #tabPaper.active,
body.mode-settings #app > header #tabSettings,
body.mode-settings #app > header #tabSettings.active {
  color: var(--blade) !important;
  border-color: rgba(0, 232, 255, 0.5) !important;
  background: rgba(0, 232, 255, 0.08) !important;
  box-shadow: 0 0 14px rgba(0, 232, 255, 0.15) !important;
}
body.beast-mode.mode-art #app > header #tabScreensaver,
body.beast-mode.mode-floor #app > header #tabFloor,
body.beast-mode.mode-night #app > header #tabNight,
body.beast-mode.mode-tape #app > header #tabTape,
body.beast-mode.mode-book #app > header #tabBook,
body.beast-mode.mode-brain #app > header #tabBrain,
body.beast-mode.mode-news #app > header #tabNews,
body.beast-mode.mode-wire #app > header #tabWire,
body.beast-mode.mode-school #app > header #tabSchool,
body.beast-mode.mode-side #app > header #tabSide,
body.beast-mode.mode-front #app > header #tabFront,
body.beast-mode.mode-seats #app > header #tabSeats,
body.beast-mode.mode-charts #app > header #tabCharts,
body.beast-mode.mode-paper #app > header #tabPaper,
body.beast-mode.mode-settings #app > header #tabSettings {
  border-color: rgba(240, 193, 74, 0.7) !important;
  color: #ffe49a !important;
  text-shadow: 0 0 10px rgba(240, 193, 74, 0.4) !important;
}
#app > header #tabPaper {
  display: inline-flex !important;
}

#app > header { order: 1; }
#windowLed,
#windowLed.led-window,
#windowLed.led-float,
body.mode-art #windowLed,
body.mode-art #windowLed.led-window,
body.mode-art #windowLed.led-float,
body.floor-mode #windowLed,
body.floor-mode #windowLed.led-window,
body.mode-floor #windowLed,
body.mode-floor #windowLed.led-window {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
  inset: auto !important;
  order: 2 !important;
  z-index: 4 !important;
  margin: 4px auto 0 !important;
  width: max-content !important;
  max-width: calc(100% - 16px) !important;
  pointer-events: none !important;
}
body.mode-dashboard #windowLed,
body.mode-dashboard #windowLed.led-window,
body.mode-dashboard #windowLed.led-float,
body.mode-seats #windowLed,
body.mode-seats #windowLed.led-window,
body.mode-seats #windowLed.led-float,
body.mode-bots #windowLed,
body.mode-ranks #windowLed,
body.mode-paper #windowLed,
body.mode-charts #windowLed,
body.mode-settings #windowLed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#mainTable,
#settingsView,
#seatsView,
#botsView,
#ranksView,
#paperView,
#chartsView { order: 3; }
#app > footer { order: 10; }
body.mode-art #lifetimePanel {
  padding-top: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (min-width: 481px) {
  #app > footer #marketStrip,
  #marketStrip {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  #app > footer #marketStrip > span,
  #marketStrip > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  #btcPrice, #ethPrice, #windowTimer, #liveUpPct, #liveDownPct {
    display: inline-block;
    min-width: 4.2ch;
  }
}

/* ===== GAME HUD — Floor / Table visual pack ===== */
.gate-mark {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  object-fit: contain;
  background: #02040a;
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(0, 232, 255, 0.22), 0 0 18px rgba(240, 193, 74, 0.18);
}
.password-card .gate-mark { width: 72px; height: 72px; }

body.floor-mode #starfield,
body.mode-floor #starfield {
  display: block !important;
  z-index: 0 !important;
}
body.floor-mode #app,
body.mode-floor #app,
body.floor-mode #mainTable,
body.mode-floor #mainTable,
body.floor-mode #tableStage,
body.mode-floor #tableStage,
body.floor-mode .table-stage,
body.mode-floor .table-stage {
  background: transparent !important;
}
body.floor-mode #roundtable,
body.mode-floor #roundtable {
  background: transparent !important;
}

.rivalry-strip {
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
  align-items: center;
  gap: 10px 14px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(4, 8, 16, 0.78);
  border: 1px solid rgba(240, 193, 74, 0.45);
  box-shadow: 0 0 22px rgba(0, 232, 255, 0.18);
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
  color: #f0d78a;
  white-space: nowrap;
}
body.floor-mode .rivalry-strip:not([hidden]),
body.mode-floor .rivalry-strip:not([hidden]) {
  display: flex !important;
}
.rivalry-strip .rival-tag {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #7fe9ff;
  border: 1px solid rgba(0, 232, 255, 0.35);
  border-radius: 999px;
  padding: 2px 7px;
}
.rivalry-strip .rival-vs {
  color: #00e8ff;
  font-size: 11px;
}
.rivalry-strip .rival-lead {
  color: #f0c14a;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.rivalry-strip.ahead-btc #rivalBtc { color: #f0d78a; }
.rivalry-strip.ahead-eth #rivalEth { color: #9dffc0; }
.rivalry-strip .rival-trash {
  color: #9ec8e0;
  font-family: Rajdhani, sans-serif;
  letter-spacing: 0.04em;
  font-size: 13px;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hour-slam {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(240, 193, 74, 0.28), transparent 55%);
}
body.hour-slam .hour-slam {
  display: block;
  animation: hourSlamFlash 0.9s ease-out forwards;
}
@keyframes hourSlamFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

#debatePanel.signal-feed {
  min-width: 0;
  overflow: hidden;
  min-height: 0;
}
body.mode-art #debatePanel.signal-feed {
  display: flex !important;
}
body.show-hierarchy #debatePanel.signal-feed,
body.floor-mode #debatePanel.signal-feed,
body.mode-floor #debatePanel.signal-feed {
  display: none !important;
}
.signal-chair {
  margin: 6px 10px 10px;
  padding: 10px 12px;
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border: 1px solid rgba(240, 193, 74, 0.35);
  background:
    linear-gradient(180deg, rgba(18, 12, 4, 0.75), rgba(4, 10, 18, 0.82));
  box-shadow: 0 0 16px rgba(240, 193, 74, 0.08);
  flex-shrink: 0;
}
.signal-chair-dir {
  font-family: Orbitron, monospace;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: #7fe9ff;
  text-shadow: 0 0 10px currentColor;
}
.signal-chair-dir.UP { color: #39ff14; }
.signal-chair-dir.DOWN { color: #ff2d55; }
.signal-chair-dir.WAIT { color: #00e8ff; }
.signal-chair-meta {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(180, 210, 230, 0.8);
  font-family: Share Tech Mono, monospace;
}
.signal-chair-last {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(240, 193, 74, 0.85);
  font-family: Orbitron, monospace;
}
.signal-feed-list {
  list-style: none;
  margin: 0;
  padding: 6px 10px 8px;
  overflow-y: auto;
  min-height: 0;
  flex: 0 1 auto;
  max-height: 160px;
}
.signal-feed-list li,
.signal-feed-list .sf-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 10px;
  align-items: center;
  padding: 6px 6px;
  border-bottom: 1px solid rgba(0, 232, 255, 0.12);
  font-size: 12px;
  background: linear-gradient(90deg, rgba(0, 232, 255, 0.04), transparent 70%);
}
.signal-feed-list .sf-empty {
  display: block;
  color: rgba(140, 160, 180, 0.75);
  font-family: Share Tech Mono, monospace;
  font-size: 11px;
}
.signal-feed-list .sf-name {
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #c8e8ff;
}
.signal-feed-list .sf-dir {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-family: Orbitron, monospace;
}
.signal-feed-list .sf-dir.UP { color: #39ff14; text-shadow: 0 0 8px rgba(57, 255, 20, 0.45); }
.signal-feed-list .sf-dir.DOWN { color: #ff2d55; text-shadow: 0 0 8px rgba(255, 45, 85, 0.4); }
.signal-feed-list .sf-dir.WAIT { color: #00e8ff; }
.signal-feed-list .sf-conf {
  font-family: Share Tech Mono, monospace;
  font-size: 11px;
  color: rgba(200, 220, 240, 0.85);
}
.signal-feed-list .sf-in {
  animation: sfPacketIn 0.38s ease-out;
}
@keyframes sfPacketIn {
  0% { opacity: 0; transform: translateX(14px); filter: brightness(2.2); }
  100% { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-feed-list .sf-in { animation: none; }
}

body.majority-up.floor-mode::before,
body.majority-down.floor-mode::before,
body.majority-wait.floor-mode::before,
body.majority-up.mode-floor::before,
body.majority-down.mode-floor::before,
body.majority-wait.mode-floor::before {
  content: none !important;
  background: none !important;
}

/* Floor exit — always tappable, phones have no Esc.
   HUD chip stays in a reserved left rail so it does not sit on
   SATOSHI’S COUNCIL (1280) or ETH/BTC focus (390). See floorChromeFit. */
.floor-exit-btn {
  display: none;
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 10px));
  left: max(10px, env(safe-area-inset-left, 10px));
  z-index: 220;
  min-height: 44px;
  min-width: 72px;
  width: 88px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 232, 255, 0.55);
  background: rgba(4, 12, 22, 0.92);
  color: #7fe9ff;
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  pointer-events: auto;
  cursor: pointer;
}
body.floor-mode .floor-exit-btn:not([hidden]),
body.mode-floor .floor-exit-btn:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
body.floor-mode .floor-hint,
body.mode-floor .floor-hint {
  top: max(12px, env(safe-area-inset-top, 12px));
  right: max(12px, env(safe-area-inset-right, 12px));
  left: auto;
  pointer-events: none;
}

/* Floor Chair CRT/neon toggles — screensaver first. No Table chrome. */
.floor-chair-toggles {
  display: none;
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 10px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 221;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 232, 255, 0.45);
  background: rgba(4, 10, 18, 0.88);
  box-shadow: 0 0 18px rgba(0, 232, 255, 0.12), inset 0 0 12px rgba(0, 232, 255, 0.06);
  pointer-events: auto;
}
body.mode-floor .floor-chair-toggles:not([hidden]),
body.night-mode .floor-chair-toggles:not([hidden]) {
  display: flex !important;
}
body.mode-art .floor-chair-toggles,
body:not(.mode-floor):not(.night-mode) .floor-chair-toggles {
  display: none !important;
}
.floor-chair-tog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  color: #7fe9ff;
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
  user-select: none;
}
.floor-chair-tog input {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 3px;
  border: 1px solid rgba(0, 232, 255, 0.55);
  background: #071018;
  box-shadow: inset 0 0 6px rgba(0, 232, 255, 0.15);
  cursor: pointer;
}
.floor-chair-tog input:checked {
  background: linear-gradient(180deg, #00e8ff, #0a6a78);
  box-shadow: 0 0 10px rgba(0, 232, 255, 0.55);
}
.floor-chair-tog:has(input:not(:checked)) {
  color: rgba(160, 190, 210, 0.45);
}
body.phone-floor .floor-chair-toggles:not([hidden]) {
  display: flex !important;
  top: auto;
  bottom: max(8px, env(safe-area-inset-bottom, 8px));
  left: 8px;
  right: 8px;
  transform: none;
  flex-wrap: wrap;
  justify-content: center;
}

/* 1H WINDOW — 2-ID dock beats leftover position:fixed */
#app #windowLed,
#app #windowLed.led-window,
#app #windowLed.led-float,
#tableStage #windowLed,
#tableStage #windowLed.led-window {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  z-index: 3 !important;
}

@media (max-width: 480px) {
  /* Compress LAW / HIT / HUDDLE so they don't eat the desk */
  #app > header .huddle-badge,
  #app > header .accuracy-badge,
  #app > header .law-badge {
    min-width: 0 !important;
    padding: 2px 6px !important;
    gap: 4px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  #app > header .huddle-label,
  #app > header .accuracy-badge .acc-label,
  #app > header .law-badge .law-label,
  #app > header .accuracy-badge .acc-col-right,
  #app > header .accuracy-badge .acc-detail,
  #app > header .huddle-badge .huddle-status,
  #app > header #lastUpdate,
  #app > header .live-clock,
  #app > header .hive-btn {
    display: none !important;
  }
  #app > header .accuracy-badge .acc-pct,
  #app > header .law-badge .law-status {
    font-size: 11px !important;
    line-height: 1 !important;
  }
  #app > header .controls {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
    max-width: 100% !important;
  }
  #app > header .header-row {
    flex-wrap: wrap !important;
  }

  /* Floor on phone: one table + visible nav / TABLE back */
  body.floor-mode header,
  body.floor-mode #app > header,
  body.mode-floor #app > header,
  body.floor-mode #app > header.top-bar {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 80 !important;
    flex-direction: column !important;
  }
  body.floor-mode #app > header .header-row,
  body.mode-floor #app > header .header-row {
    display: none !important;
  }
  body.floor-mode #app > header .mode-tabs,
  body.mode-floor #app > header .mode-tabs {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 81 !important;
  }
  body.floor-mode #app > footer,
  body.mode-floor #app > footer {
    display: flex !important;
  }
  body.floor-mode .rivalry-strip:not([hidden]),
  body.mode-floor .rivalry-strip:not([hidden]) {
    top: auto !important;
    bottom: max(56px, env(safe-area-inset-bottom, 56px));
    max-width: calc(100vw - 16px);
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
  }

  #app #windowLed,
  #app #windowLed.led-window,
  body.mode-art #app #windowLed {
    position: relative !important;
    order: 2 !important;
    margin: 4px auto 0 !important;
    display: block !important;
    visibility: visible !important;
    z-index: 3 !important;
  }
  body.mode-art #lifetimePanel {
    padding-top: 8px !important;
  }
}

/* ===== DESK-CODE + ADMIN GATES (cold visit) ===== */
body.gate-locked #app,
body.gate-revealing #app,
body:has(#passwordGate:not(.hidden)) #app {
  visibility: hidden !important;
  pointer-events: none !important;
}
.password-gate {
  z-index: 100002 !important;
}
#adminToolsCard,
#brainCard {
  display: none !important;
}
body.admin-unlocked.mode-settings #adminToolsCard,
body.admin-unlocked.mode-settings #brainCard {
  display: block !important;
}

/* ===== MED: 1H WINDOW unclipped on Floor / Table ===== */
#windowLed,
#windowLed.led-window,
#windowLed.led-float {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  max-height: none !important;
}
body.mode-art #windowLed,
body.mode-art #windowLed.led-window,
body.floor-mode #windowLed,
body.floor-mode #windowLed.led-window,
body.mode-floor #windowLed,
body.mode-floor #windowLed.led-window {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 110 !important;
}
body.floor-mode #mainTable,
body.mode-floor #mainTable {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
body.floor-mode #tableStage,
body.mode-floor #tableStage,
body.floor-mode .table-stage,
body.mode-floor .table-stage {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* ===== MED: only the current tab stays lit ===== */
body:not(.mode-art) #app > header #tabScreensaver,
body:not(.mode-art) #app > header #tabScreensaver.active,
body:not(.mode-floor) #app > header #tabFloor,
body:not(.mode-floor) #app > header #tabFloor.active,
body:not(.mode-night) #app > header #tabNight,
body:not(.mode-night) #app > header #tabNight.active,
body:not(.mode-tape) #app > header #tabTape,
body:not(.mode-tape) #app > header #tabTape.active,
body:not(.mode-book) #app > header #tabBook,
body:not(.mode-book) #app > header #tabBook.active,
body:not(.mode-brain) #app > header #tabBrain,
body:not(.mode-brain) #app > header #tabBrain.active,
body:not(.mode-news) #app > header #tabNews,
body:not(.mode-news) #app > header #tabNews.active,
body:not(.mode-wire) #app > header #tabWire:not(.wire-hot),
body:not(.mode-wire) #app > header #tabWire.active:not(.wire-hot),
body:not(.mode-school) #app > header #tabSchool,
body:not(.mode-school) #app > header #tabSchool.active,
body:not(.mode-side) #app > header #tabSide,
body:not(.mode-side) #app > header #tabSide.active,
body:not(.mode-front) #app > header #tabFront,
body:not(.mode-front) #app > header #tabFront.active,
body:not(.mode-seats) #app > header #tabSeats,
body:not(.mode-seats) #app > header #tabSeats.active,
body:not(.mode-paper) #app > header #tabPaper,
body:not(.mode-paper) #app > header #tabPaper.active,
body:not(.mode-charts) #app > header #tabCharts,
body:not(.mode-charts) #app > header #tabCharts.active,
body:not(.mode-settings) #app > header #tabSettings,
body:not(.mode-settings) #app > header #tabSettings.active {
  color: var(--muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ===== PHONE 390 — stack Table/Dashboard, 44px taps, Full Charts ===== */
#openChartsBtn.open-charts-btn {
  grid-area: table;
  align-self: end;
  justify-self: center;
  z-index: 6;
  min-height: 44px;
}
body.floor-mode #openChartsBtn,
body.mode-floor #openChartsBtn,
body.mode-settings #openChartsBtn {
  display: none !important;
}

@media (max-width: 480px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  #app > header .mode-tab,
  #app > header .focus-tab,
  #app > header #soundToggle,
  #app > header .beast-badge,
  #app > header #beastBadge,
  #app > header #btnHelp,
  #app > header .zt-logo-btn,
  #app > header .zt-header-logo,
  #app > header #tabCharts,
  #openChartsBtn,
  #openChartsBtn.open-charts-btn,
  .pe-side,
  .paper-cal-btn,
  #helpTutorialOverlay .tut-actions .gate-btn,
  #settingsView button,
  #settingsView select,
  #settingsView input[type="number"],
  #settingsView input[type="text"],
  #fgGate .password-input,
  #fgGate .gate-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  #app > header .hive-btn,
  #hiveBtn.hive-btn {
    display: inline-flex !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    padding: 8px !important;
    flex: 0 0 44px !important;
  }
  #settingsView .set-check,
  body.mode-settings #settingsView .set-check {
    min-height: 44px !important;
    align-items: center !important;
  }
  #settingsView input[type="checkbox"],
  body.mode-settings #settingsView .set-check input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }

  #tableStage,
  #mainTable #tableStage,
  #mainTable .table-stage {
    min-height: min(46dvh, 380px) !important;
    height: min(46dvh, 380px) !important;
    max-height: min(46dvh, 380px) !important;
    overflow: hidden !important;
  }
  #openChartsBtn,
  #openChartsBtn.open-charts-btn {
    position: relative !important;
    grid-area: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 24px) !important;
    margin: 8px 12px !important;
    min-height: 44px !important;
  }
  #lifetimePanel {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }
  #app > footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #app > footer #finalDecision,
  #finalDecision {
    order: 1 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  #app > footer #marketStrip,
  #marketStrip {
    order: 2 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  body.mode-dashboard #tableStage,
  body.mode-dashboard #mainTable #tableStage {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    align-items: stretch !important;
  }
  body.mode-dashboard #roundtable {
    display: none !important;
  }
  body.mode-dashboard #dashboardOverlay {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 42dvh !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  .rank-row {
    grid-template-columns: 24px minmax(0, 1fr) 48px 32px 32px 40px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    font-size: 10px !important;
    gap: 4px !important;
    padding: 8px 8px !important;
  }
  .rank-row > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .rank-row .hide-sm,
  .rank-row .listen-col,
  .ranks-legend span:nth-child(5),
  .ranks-legend span:nth-child(6) {
    display: none !important;
  }

  #helpTutorialOverlay .tut-body,
  #helpTutorialOverlay .tut-tip,
  #helpTutorialOverlay [data-tut="body"],
  #helpTutorialOverlay [data-tut="tip"] {
    position: static !important;
    display: block !important;
    margin: 0 0 12px !important;
    white-space: pre-wrap !important;
    overflow: visible !important;
  }
  #helpTutorialOverlay .tut-card {
    max-height: min(86dvh, 680px) !important;
    overflow: auto !important;
  }

  #hiveEggClose,
  .hive-egg-close {
    top: max(12px, env(safe-area-inset-top, 12px)) !important;
    right: max(12px, env(safe-area-inset-right, 12px)) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  #creditPopup,
  .credit-popup {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    max-width: min(280px, 86vw) !important;
    z-index: 80 !important;
  }
}

/* ===== FLOOR 1H — in-flow under nav (beats leftover fixed top:40px) ===== */
#app > header {
  order: 1 !important;
  position: relative !important;
  z-index: 4 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
#app > header #windowLed,
#app > header #windowLed.led-window,
#app > header #windowLed.led-float {
  order: 3 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  z-index: 1 !important;
  margin: 6px auto 8px !important;
  width: max-content !important;
  max-width: calc(100% - 16px) !important;
  pointer-events: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
#app > #mainTable,
#app > #settingsView,
#app > #seatsView,
#app > #botsView,
#app > #ranksView,
#app > #paperView,
#app > #chartsView {
  order: 3 !important;
}
#app > footer { order: 10 !important; }

body.floor-mode #app > header #windowLed,
body.floor-mode #app > header #windowLed.led-window,
body.mode-floor #app > header #windowLed,
body.mode-art #app > header #windowLed,
body.mode-art #app > header #windowLed.led-window {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
  margin: 6px auto 8px !important;
  width: max-content !important;
  max-width: calc(100% - 16px) !important;
  pointer-events: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
body.floor-mode #app > header #windowLed .led-foot,
body.mode-floor #app > header #windowLed .led-foot,
body.mode-art #app > header #windowLed .led-foot {
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
body.floor-mode #app > header,
body.mode-floor #app > header {
  position: relative !important;
  z-index: 4 !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  flex-direction: column !important;
}
body:not(.mode-art):not(.floor-mode):not(.mode-floor) #app > header #windowLed {
  display: none !important;
  visibility: hidden !important;
}

/* ===== TABLE HUD — right signal feed + keep Floor full-bleed ===== */
body.mode-art #mainTable {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(240px, 300px) !important;
  grid-template-areas: "lifetime table debate" !important;
}
body.mode-art #debatePanel,
body.mode-art #debatePanel.signal-feed {
  display: flex !important;
  visibility: visible !important;
  flex-direction: column !important;
  min-width: 240px !important;
  max-width: 300px;
}
body.floor-mode #debatePanel,
body.mode-floor #debatePanel,
body.show-hierarchy #debatePanel {
  display: none !important;
}
@media (max-width: 480px) {
  body.mode-art #debatePanel,
  body.mode-art #debatePanel.signal-feed {
    display: flex !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none;
    order: 4;
  }
}

/* ===== SEAT STORM — opt-in lock-wait mini, no auto-start, no orders ===== */
.seat-storm-prompt,
.seat-storm-table-btn {
  position: fixed;
  z-index: 88;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(240, 193, 74, 0.55);
  background: rgba(8, 10, 18, 0.92);
  color: #f0c14a;
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 0 18px rgba(240, 193, 74, 0.18);
}
.seat-storm-prompt { bottom: max(88px, env(safe-area-inset-bottom, 16px)); left: 50%; transform: translateX(-50%); }
.seat-storm-table-btn { top: auto; right: auto; font-size: 10px; padding: 8px 12px; }
.seat-storm-prompt.hidden,
.seat-storm-prompt[hidden],
.seat-storm-table-btn.hidden,
.seat-storm-table-btn[hidden],
.seat-storm-play.hidden,
.seat-storm-play[hidden] { display: none !important; }
body.mode-floor .seat-storm-prompt:not(.hidden):not([hidden]),
body.floor-mode .seat-storm-prompt:not(.hidden):not([hidden]) { display: inline-flex !important; align-items: center; }
body.mode-art .seat-storm-table-btn:not(.hidden):not([hidden]) { display: inline-flex !important; align-items: center; }
.seat-storm-play {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, 0.72);
  pointer-events: auto;
}
.seat-storm-play:not(.hidden):not([hidden]) { display: flex !important; }
.ss-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-family: Orbitron, monospace;
  letter-spacing: 0.12em;
  color: #c8e8ff;
}
.ss-title { color: #f0c14a; font-size: 14px; text-shadow: 0 0 12px rgba(240, 193, 74, 0.45); }
.ss-streak { color: #39ff14; font-size: 22px; }
.ss-best, .ss-clock, .ss-pair { font-size: 12px; color: #7fe9ff; }
.ss-exit {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 232, 255, 0.45);
  background: rgba(4, 12, 22, 0.9);
  color: #7fe9ff;
  font-family: Orbitron, monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.ss-ring {
  position: relative;
  width: min(78vw, 440px);
  height: min(78vw, 440px);
}
.ss-seat {
  position: absolute;
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
  margin: -28px 0 0 -28px;
  border: 1px solid rgba(0, 232, 255, 0.35);
  background: rgba(6, 12, 22, 0.92);
  color: #8aa8c0;
  font-family: Orbitron, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.ss-seat.ss-lit {
  color: #02040a;
  background: #39ff14;
  border-color: #39ff14;
  box-shadow: 0 0 22px rgba(57, 255, 20, 0.65);
}
.ss-seat.ss-miss {
  background: #ff2d55;
  color: #fff;
  border-color: #ff2d55;
}
.ss-status {
  margin-top: 10px;
  font-family: Share Tech Mono, monospace;
  color: rgba(180, 210, 230, 0.8);
  letter-spacing: 0.06em;
}
@media (max-width: 480px) {
  .ss-seat { width: 56px; height: 56px; min-width: 44px; min-height: 44px; margin: -28px 0 0 -28px; font-size: 8px; }
  .ss-ring { width: min(92vw, 360px); height: min(92vw, 360px); }
}

/* ===== CHARTS HUD — real canvas height, both pairs, 390 scroll ===== */
body.mode-charts #app {
  overflow: hidden !important;
}
body.mode-charts #chartsView.charts-view:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  left: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  pointer-events: auto !important;
}
#chartBtc, #chartEth, #chartOdds, #chartTape, #chartAccuracy, #chartWeights,
#chartVolume, #chartDelta, #chartFunding {
  min-width: 160px;
  min-height: 160px;
  max-height: 220px;
}
#chartBtc, #chartEth {
  min-height: 220px;
  max-height: 220px;
}
#chartWeights {
  min-height: 160px;
  max-height: 220px;
}

/* ===== COLD-LOAD GATES — last word, do not ship unlocked ===== */
html.gate-locked #app,
body.gate-locked #app,
body.gate-revealing #app,
body:has(#passwordGate:not(.hidden)) #app {
  visibility: hidden !important;
  pointer-events: none !important;
}
#passwordGate.password-gate:not(.hidden) {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 200000 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Successful desk unlock must beat leftover html.gate-locked / gate-revealing. */
html.desk-unlocked #app,
body.desk-unlocked #app {
  visibility: visible !important;
  pointer-events: auto !important;
}
body:not(.admin-unlocked) #adminToolsCard,
body:not(.admin-unlocked) #brainCard,
body:not(.admin-unlocked) #autoBetCard,
body:not(.admin-unlocked) #adminDeskHost {
  display: none !important;
}
body.admin-unlocked.mode-settings #adminToolsCard,
body.admin-unlocked.mode-settings #brainCard,
body.admin-unlocked.mode-settings #adminDeskHost {
  display: block !important;
}

/* ===== CHARTS 1280 — both pair cards, hide dead Full Charts, fit weights ===== */
@media (min-width: 900px) {
  body.mode-charts .charts-pairs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  body.mode-charts.charts-hero-btc .charts-pairs,
  body.mode-charts.charts-hero-eth .charts-pairs {
    grid-template-columns: 1fr !important;
  }
  body.mode-charts .chart-card.chart-pair-eth:not(.chart-hero-off),
  body.mode-charts .chart-card.chart-pair-btc:not(.chart-hero-off) {
    display: flex !important;
    visibility: visible !important;
  }
}
#openChartsBtn,
#openChartsBtn.open-charts-btn {
  display: none !important;
}
.chart-card:has(#chartWeights),
#chartWeights {
  min-height: 180px;
  overflow: visible;
}

/* ===== FLOOR 1H — last word in-flow dock (beats leftover fixed top) ===== */
html body.floor-mode #app > header #windowLed.led-float.led-window,
html body.mode-floor #app > header #windowLed.led-float.led-window,
html body.mode-art #app > header #windowLed.led-float.led-window {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  margin: 6px auto 8px !important;
}

/* Floor header stays up so 1H docks under the tab row at 1280 and 390 */
html body.floor-mode #app > header,
html body.mode-floor #app > header {
  display: flex !important;
  visibility: visible !important;
  flex-direction: column !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Floor TABLE rail — wordmark / ETH-BTC start after the HUD chip */
html body.floor-mode,
html body.mode-floor {
  --floor-table-rail: 96px;
}
html body.floor-mode .floor-exit-btn:not([hidden]),
html body.mode-floor .floor-exit-btn:not([hidden]) {
  z-index: 220 !important;
}
html body.floor-mode #app > header .header-row,
html body.mode-floor #app > header .header-row,
html body.floor-mode #app > header .mode-tabs,
html body.mode-floor #app > header .mode-tabs {
  padding-left: var(--floor-table-rail, 96px) !important;
}

/* Mid-width (~1040) Floor top bar — PAPER/BOOKS, huddle, hit rate miss the wordmark */
@media (max-width: 1180px) and (min-width: 481px) {
  body.floor-mode .rivalry-strip:not([hidden]),
  body.mode-floor .rivalry-strip:not([hidden]) {
    top: 58px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: min(420px, calc(100vw - 220px));
    padding: 4px 10px;
    gap: 6px 8px;
    z-index: 50;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
  }
  body.floor-mode .rivalry-strip .rival-trash,
  body.mode-floor .rivalry-strip .rival-trash {
    display: none;
  }
  #app > header .logo .title {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
  }
  #app > header .accuracy-badge {
    min-width: 0 !important;
    padding: 3px 7px !important;
  }
  #app > header .accuracy-badge .acc-label {
    display: none;
  }
  #app > header .huddle-badge {
    min-width: 0 !important;
    padding: 3px 7px !important;
  }
}

/* Floor music sits in header controls — never over Bell */
html body.floor-mode #floorMusicBtn.floor-music-btn,
html body.mode-floor #floorMusicBtn.floor-music-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  inset: auto !important;
  display: inline-flex !important;
  margin-left: 8px;
}

/* HUDDLE pill — do not truncate the label */
html body #app > header .huddle-badge {
  flex-shrink: 0 !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
html body #app > header .huddle-badge .huddle-label {
  display: inline !important;
  white-space: nowrap !important;
}

/* Ranks empty line stays one sentence */
.rank-empty {
  grid-column: 1 / -1;
  display: block;
  padding: 16px 12px;
  white-space: normal;
  letter-spacing: 0.04em;
  color: rgba(160, 200, 230, 0.75);
}

/* Settings FADE title does not wrap mid-phrase */
.beast-title.fade-title,
#settingsView .fade-title {
  white-space: nowrap;
}

/* Dashboard focus banner */
.dash-focus-banner {
  grid-column: 1 / -1;
  font-family: Orbitron, monospace;
  letter-spacing: 0.14em;
  color: #f0c14a;
  padding: 8px 4px 4px;
}

/* Council mark — city candle / up-arrow (copy stays Satoshi’s Council) */
.zt-header-logo img,
.zt-logo-btn img,
.gate-mark {
  filter: drop-shadow(0 0 10px rgba(240, 193, 74, 0.45));
}

@media (max-width: 480px) {
  html body.floor-mode #app > header #windowLed.led-float.led-window,
  html body.mode-floor #app > header #windowLed.led-float.led-window,
  html body.mode-art #app > header #windowLed.led-float.led-window {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 6px auto 8px !important;
    order: 3 !important;
  }
}

/* ===== TABLE RIGHT HUD — tape / why-lock / dual / storm fill the ring's right ===== */
html body.mode-art #lifetimePanel #windowLed.led-float.led-window,
body.mode-art #lifetimePanel #windowLed,
body.mode-art #lifetimePanel #windowLed.led-window,
body.mode-art #lifetimePanel #windowLed.led-float {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  margin: 0 0 10px !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 2 !important;
}
#lifetimePanel .lifetime-log-block:not(.idle) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#debatePanel .hud-card {
  flex: 0 0 auto;
  margin: 0 8px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 232, 255, 0.22);
  background: linear-gradient(145deg, rgba(8, 14, 26, 0.95), rgba(3, 6, 14, 0.96));
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
#debatePanel .lock-tape-card {
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#debatePanel .hud-card-head {
  display: flex;
  justify-content: space-between;
  font-family: Orbitron, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 6px;
}
#debatePanel .hud-meta { color: var(--muted); letter-spacing: 0.04em; }
.lock-tape-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 88px;
  max-height: none;
  overflow-y: auto;
  font-family: Share Tech Mono, monospace;
  font-size: 0.68rem;
  color: #c0e8ff;
}
.lock-tape-empty { color: rgba(140, 160, 180, 0.85); padding: 6px 0; }
.lock-tape-row {
  display: grid;
  grid-template-columns: 32px 40px 40px 48px 1fr;
  gap: 6px;
  padding: 3px 0;
}
.lock-tape-row.open { color: var(--gold); }
.lock-tape-row .lt-side.up { color: var(--jade); }
.lock-tape-row .lt-side.down { color: var(--blood); }
.why-lock-line {
  margin: 0;
  font-family: Orbitron, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #f0d78a;
}
.dual-fight-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-family: Orbitron, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #c8e8ff;
}
.dual-fight-strip.agree { color: var(--jade); }
.dual-fight-strip.fight { color: var(--blood); }
.lifetime-log-block.idle { display: none !important; }
#debatePanel #seatStormTableBtn.seat-storm-table-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  width: calc(100% - 16px);
  margin: 0 8px 10px;
  justify-content: center;
}
body.mode-art #debatePanel #seatStormTableBtn.seat-storm-table-btn:not(.hidden):not([hidden]) {
  display: inline-flex !important;
}

/* ===== Desk pack: Tape / Book / Brain / News / Night / Floor crawl ===== */
.tape-calib {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.calib-bucket {
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(4, 14, 28, 0.75);
  border: 1px solid rgba(0, 232, 255, 0.16);
  font-size: 11px;
}
.calib-bucket.miss { border-color: rgba(255, 45, 85, 0.45); }
.calib-bucket.ok { border-color: rgba(57, 255, 20, 0.35); }
.cb-lab { display: block; font-family: Orbitron, monospace; color: rgba(0, 232, 255, 0.8); letter-spacing: 0.08em; }
.cb-pred, .cb-hit, .cb-n { display: block; color: rgba(200, 220, 240, 0.8); }
.calib-empty, .tape-empty, .brain-empty, .news-empty {
  color: rgba(180, 200, 220, 0.65);
  padding: 12px 4px;
}
.tape-table { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow: auto; }
.tape-row {
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 0.5fr 0.7fr 0.6fr 0.5fr 0.6fr 0.7fr;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(4, 14, 28, 0.75);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.tape-row.head {
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(0, 232, 255, 0.7);
  background: transparent;
}
.tape-row.open .tape-res { color: #f0d78a; }
.tape-row.hit .tape-res { color: #39ff14; }
.tape-row.miss .tape-res { color: #ff2d55; }
.side-up { color: #39ff14; }
.side-down { color: #ff2d55; }

.book-dual, .brain-dual, .news-rails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.book-card, .brain-card, .news-rail {
  background: rgba(4, 14, 28, 0.75);
  border: 1px solid rgba(0, 232, 255, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
}
.book-card-head, .brain-card header, .news-rail header {
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(0, 232, 255, 0.85);
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.book-flag.warn { color: #ffb000; }
.book-kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.book-kv b { font-variant-numeric: tabular-nums; color: #e8f0ff; }

.brain-headline { color: #e8f0ff; font-size: 16px; margin: 0 0 14px; }
.brain-list, .brain-notes, .news-list { list-style: none; margin: 0; padding: 0; }
.brain-list li, .brain-notes li, .news-list li { padding: 6px 0; border-bottom: 1px solid rgba(0, 232, 255, 0.08); font-size: 13px; }
.brain-chairs { display: flex; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.brain-chair {
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border: 1px solid rgba(0, 232, 255, 0.2);
  border-radius: 8px;
}

.news-liq { color: #ffb000; font-family: Orbitron, monospace; font-size: 12px; letter-spacing: 0.06em; }
.news-eta { display: block; color: rgba(180, 200, 220, 0.65); font-size: 11px; }
.news-list li.stale { opacity: 0.42; color: rgba(160, 176, 192, 0.8); }
.news-list li.fresh { color: #e8f0ff; }
.news-list li.heat::after {
  content: " · HEAT";
  color: #ffb000;
  font-family: Orbitron, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.wire-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.wire-item {
  padding: 14px 16px 12px;
  margin: 0 0 10px;
  background: rgba(4, 14, 28, 0.78);
  border: 1px solid rgba(0, 232, 255, 0.18);
  border-left: 3px solid rgba(240, 193, 74, 0.65);
  box-shadow: 0 0 18px rgba(0, 232, 255, 0.06);
}
.wire-title {
  margin: 0 0 6px;
  font-family: Orbitron, monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #ffe49a;
  text-shadow: 0 0 10px rgba(240, 193, 74, 0.35);
}
.wire-why {
  margin: 0 0 8px;
  color: rgba(200, 224, 240, 0.9);
  font-size: 13px;
  line-height: 1.45;
}
.wire-date {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(0, 232, 255, 0.72);
}
.wire-empty {
  color: rgba(180, 200, 220, 0.65);
  font-size: 13px;
  padding: 12px 0;
}

.floor-crawl {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4%;
  overflow: hidden;
  pointer-events: none;
  z-index: 8;
  height: 28px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.floor-crawl-track {
  display: inline-block;
  white-space: nowrap;
  font-family: Orbitron, monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: rgba(220, 236, 255, 0.72);
  animation: floor-crawl-marquee 28s linear infinite;
}
@keyframes floor-crawl-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
body.floor-mode #floorCrawl:not([hidden]),
body.night-mode #floorCrawl:not([hidden]) { display: block; }

/* Night: chrome gone. One Night button. Password still gates. */
body.night-mode header .header-row,
body.night-mode #beastBadge,
body.night-mode #btnHelp,
body.night-mode #tabSettings,
body.night-mode #tabSeats,
body.night-mode #tabPaper,
body.night-mode #tabTape,
body.night-mode #tabBook,
body.night-mode #tabBrain,
body.night-mode #tabNews,
body.night-mode #tabWire,
body.night-mode #tabSchool,
body.night-mode #tabSide,
body.night-mode #tabFront,
body.night-mode #tabCharts,
body.night-mode #tabFloor,
body.night-mode #tabScreensaver,
body.night-mode .focus-tab,
body.night-mode .focus-table-badge,
body.night-mode footer,
body.night-mode #debatePanel,
body.night-mode #lifetimePanel,
body.night-mode #hierarchyPanel,
body.night-mode #huddleBanner,
body.night-mode #rivalryStrip,
body.night-mode .floor-hint,
body.night-mode #floorExitBtn,
body.night-mode #openChartsBtn,
body.night-mode #seatSpinBtn {
  display: none !important;
}
body.night-mode #floorChairToggles:not([hidden]) {
  display: flex !important;
}
body.night-mode #modeTabs {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 80;
  background: transparent;
}
body.night-mode #tabNight,
body.night-mode #app > header #tabNight,
body.night-mode #app > header #tabNight.active {
  display: inline-flex !important;
  pointer-events: auto !important;
  color: rgba(200, 220, 240, 0.55) !important;
  border-color: rgba(0, 232, 255, 0.25) !important;
  background: rgba(2, 6, 14, 0.35) !important;
}
body.night-mode #mainTable {
  grid-template-columns: 1fr !important;
  grid-template-areas: "table" !important;
  height: 100vh !important;
}
body.night-mode #tableStage,
body.night-mode .table-stage {
  min-height: 100vh !important;
  height: 100vh !important;
}

@media (max-width: 720px) {
  .book-dual, .brain-dual, .news-rails { grid-template-columns: 1fr; }
  .tape-row { grid-template-columns: 1fr 1fr; }
  .tape-row.head { display: none; }
}

/* Why — one live line under the Chair (Floor + Table). No paragraph. */
.chair-why {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 14%;
  z-index: 9;
  pointer-events: none;
  text-align: center;
  font-family: Orbitron, Rajdhani, monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.25;
  color: #e8f4ff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chair-why[hidden] { display: none !important; }
.ats-why {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: calc(14% - 20px);
  z-index: 9;
  pointer-events: none;
  text-align: center;
}
.ats-why-line {
  font-family: Orbitron, Rajdhani, monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #f0c14a;
  text-shadow: 0 0 10px rgba(240, 193, 74, 0.45), 0 1px 8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ats-why-strip {
  margin-top: 3px;
  font-family: Orbitron, Rajdhani, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #7fe9ff;
  text-shadow: 0 0 8px rgba(0, 232, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ats-why[hidden] { display: none !important; }
body.floor-mode .ats-why,
body.night-mode .ats-why,
body.mode-floor .ats-why { bottom: calc(4% + 34px); }
body:not([data-focus-table="ats"]) .ats-why { display: none !important; }
body[data-focus-table="ats"] .chair-why { display: none !important; }
.ats-watch {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: calc(14% - 48px);
  z-index: 9;
  pointer-events: none;
  text-align: center;
  font-family: Orbitron, Rajdhani, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #7fe9ff;
  text-shadow: 0 0 10px rgba(0, 232, 255, 0.55), 0 1px 8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ats-watch[data-listed="1"] { color: #f0c14a; text-shadow: 0 0 10px rgba(240, 193, 74, 0.55), 0 1px 8px rgba(0, 0, 0, 0.9); }
.ats-watch[hidden] { display: none !important; }
body.floor-mode .ats-watch,
body.night-mode .ats-watch,
body.mode-floor .ats-watch { bottom: calc(4% + 14px); }
body:not([data-focus-table="ats"]) .ats-watch { display: none !important; }
body.floor-mode .chair-why,
body.night-mode .chair-why,
body.mode-floor .chair-why {
  bottom: calc(4% + 36px);
}

/* Close — 8s recap on Floor, then the existing hour slam */
.close-recap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 210;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, 0.72);
  cursor: pointer;
}
body.close-recap-on #closeRecap:not([hidden]),
#closeRecap.close-recap:not(.hidden):not([hidden]) {
  display: flex !important;
}
.close-recap-card {
  text-align: center;
  padding: 28px 32px;
  max-width: min(92vw, 520px);
  color: #e8f4ff;
  font-family: Orbitron, Rajdhani, sans-serif;
}
.close-kicker {
  letter-spacing: 0.22em;
  font-size: 11px;
  color: rgba(200, 220, 240, 0.55);
  margin-bottom: 12px;
}
.close-line {
  font-size: 22px;
  margin: 8px 0;
  letter-spacing: 0.06em;
}
.close-books {
  font-size: 16px;
  color: #f0c14a;
  margin-top: 12px;
  letter-spacing: 0.08em;
}
.close-hint {
  font-size: 12px;
  opacity: 0.55;
  margin-top: 16px;
  letter-spacing: 0.08em;
}

/* Health — tiny strip, not a page. Dim when a feed is down. */
.health-strip {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 8px));
  right: max(10px, env(safe-area-inset-right, 10px));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(200, 220, 240, 0.72);
  pointer-events: none;
  background: rgba(2, 6, 14, 0.35);
}
.health-strip[hidden],
body.gate-locked #healthStrip,
body.gate-locked .health-strip {
  display: none !important;
}
.health-dot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.health-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39ff14;
}
.health-dot.down {
  opacity: 0.38;
}
.health-dot.down::before {
  background: #6b7c90;
}
.health-age {
  font-family: Orbitron, monospace;
  min-width: 2em;
}

.phone-score {
  display: none;
  pointer-events: auto;
}
.phone-score[hidden] { display: none !important; }

/* Phone Floor — one-handed ~390. Table/Pro stay stacked. */
@media (max-width: 480px) {
  body.phone-floor #mainTable,
  body.phone-floor #tableStage,
  body.phone-floor #mainTable #tableStage,
  body.phone-floor .table-stage,
  body.phone-floor.floor-mode #tableStage,
  body.phone-floor.mode-floor #tableStage,
  body.phone-floor.night-mode #tableStage {
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  body.phone-floor #beastBadge,
  body.phone-floor #tabSettings,
  body.phone-floor #btnHelp,
  body.phone-floor #tabCharts,
  body.phone-floor #tabSeats,
  body.phone-floor #tabPaper,
  body.phone-floor #tabTape,
  body.phone-floor #tabBook,
  body.phone-floor #tabBrain,
  body.phone-floor #tabNews,
  body.phone-floor #tabWire,
  body.phone-floor #tabSchool,
  body.phone-floor #tabSide,
  body.phone-floor #tabFront,
  body.phone-floor header .header-row,
  body.phone-floor #app > header .header-row,
  body.phone-floor #rivalryStrip,
  body.phone-floor #lifetimePanel,
  body.phone-floor #debatePanel,
  body.phone-floor #hierarchyPanel,
  body.phone-floor footer,
  body.phone-floor #app > footer,
  body.phone-floor .focus-tab,
  body.phone-floor .focus-table-badge {
    display: none !important;
  }
  body.phone-floor #phoneScore:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: max(56px, calc(env(safe-area-inset-top, 0px) + 48px));
    transform: translateX(-50%);
    z-index: 12;
    min-height: 44px;
    min-width: 120px;
    padding: 10px 18px;
    border: 1px solid rgba(0, 232, 255, 0.45);
    background: rgba(4, 12, 22, 0.88);
    color: #e8f4ff;
    font-family: Orbitron, monospace;
    font-size: 16px;
    letter-spacing: 0.08em;
    cursor: pointer;
  }
  body.phone-floor .chair-why {
    bottom: calc(8% + 28px);
    font-size: 16px;
    white-space: normal;
  }
  body.phone-floor .ats-why {
    bottom: calc(8% + 22px);
  }
  body.phone-floor .ats-why-line { font-size: 11px; white-space: normal; }
  body.phone-floor .ats-why-strip { font-size: 9px; letter-spacing: 0.06em; }
  body.phone-floor .ats-watch {
    bottom: calc(8% + 2px);
    font-size: 11px;
    white-space: normal;
  }
  body.phone-floor.floor-mode #floorExitBtn:not([hidden]),
  body.phone-floor.mode-floor .floor-exit-btn:not([hidden]) {
    display: inline-flex !important;
    min-height: 44px;
    min-width: 72px;
  }
  body.phone-floor .health-strip:not([hidden]) {
    top: max(8px, env(safe-area-inset-top, 8px));
    right: max(10px, env(safe-area-inset-right, 10px));
  }
}

/* School — teach-only. Does not lock. */
.school-continue {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0 0 10px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 232, 255, 0.4);
  background: rgba(0, 232, 255, 0.08);
  color: #e8f4ff;
  font-family: Orbitron, monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.school-streak {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(180, 200, 220, 0.65);
  margin: 0 0 14px;
}
.school-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0 0 16px;
}
.school-list.hidden { display: none; }
.school-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 232, 255, 0.16);
  background: rgba(4, 12, 22, 0.7);
  color: #e8f4ff;
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
}
.school-pick:disabled {
  opacity: 0.4;
  cursor: default;
}
.school-n {
  font-family: Orbitron, monospace;
  color: rgba(0, 232, 255, 0.8);
  min-width: 1.4em;
}
.school-min { margin-left: auto; color: rgba(180, 200, 220, 0.55); font-size: 12px; }
.school-done, .school-lock {
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.school-done { color: #39ff14; }
.school-lock { color: rgba(180, 200, 220, 0.45); }
.school-lesson { margin-top: 8px; }
.school-lesson.hidden { display: none; }
.school-lesson-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.school-back {
  min-height: 44px;
  min-width: 72px;
  border: 1px solid rgba(0, 232, 255, 0.35);
  background: rgba(4, 12, 22, 0.8);
  color: #7fe9ff;
  font-family: Orbitron, monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.school-lesson-head h3 {
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
  font-size: 18px;
}
.school-idea {
  color: #f0c14a;
  font-size: 16px;
  margin: 0 0 12px;
}
.school-body p {
  margin: 0 0 10px;
  color: rgba(220, 232, 244, 0.88);
  line-height: 1.45;
}
.school-board-wrap {
  margin: 12px 0 16px;
}
#schoolBoard {
  width: 100%;
  height: 220px;
  display: block;
  background: rgba(2, 6, 14, 0.9);
  border: 1px solid rgba(0, 232, 255, 0.16);
}
.school-callout {
  margin-top: 6px;
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(200, 220, 240, 0.65);
}
.school-quiz { margin-top: 8px; }
#schoolQ {
  font-size: 16px;
  margin: 0 0 10px;
}
.school-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.school-choice {
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid rgba(0, 232, 255, 0.22);
  background: rgba(4, 14, 28, 0.8);
  color: #e8f4ff;
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  cursor: pointer;
}
.school-choice.right { border-color: rgba(57, 255, 20, 0.7); color: #39ff14; }
.school-choice.wrong { border-color: rgba(255, 45, 85, 0.7); color: #ff2d55; }
.school-grade { margin: 10px 0; font-size: 14px; }
.school-grade.right { color: #39ff14; }
.school-grade.wrong { color: #ffb000; }
.school-next {
  min-height: 44px;
  min-width: 96px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 232, 255, 0.4);
  background: rgba(0, 232, 255, 0.08);
  color: #e8f4ff;
  font-family: Orbitron, monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* Side Table — 15m arcade. Paper default. Manual taps. No Follower. */
.side-hud { max-width: 920px; }
.side-clock {
  font-family: Orbitron, monospace;
  font-size: clamp(42px, 12vw, 72px);
  letter-spacing: 0.08em;
  color: #00e8ff;
  text-shadow: 0 0 18px rgba(0, 232, 255, 0.45);
  line-height: 1;
  margin: 4px 0 10px;
}
.side-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.side-badge {
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  border: 1px solid rgba(57, 255, 20, 0.55);
  color: #39ff14;
  background: rgba(57, 255, 20, 0.08);
}
.side-badge.live {
  border-color: rgba(255, 45, 85, 0.7);
  color: #ff2d55;
  background: rgba(255, 45, 85, 0.1);
}
.side-status {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(180, 200, 220, 0.7);
}
.side-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.side-pill {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 232, 255, 0.28);
  background: rgba(4, 14, 28, 0.8);
  color: #7fe9ff;
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.side-pill.on {
  border-color: rgba(0, 232, 255, 0.7);
  background: rgba(0, 232, 255, 0.12);
  color: #e8f4ff;
}
.side-size-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.side-size-label {
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(180, 200, 220, 0.65);
}
.side-step {
  min-height: 44px;
  min-width: 56px;
  border: 1px solid rgba(0, 232, 255, 0.25);
  background: rgba(4, 12, 22, 0.75);
  color: #e8f4ff;
  font-family: Orbitron, monospace;
  cursor: pointer;
}
.side-step.on {
  border-color: rgba(0, 232, 255, 0.7);
  background: rgba(0, 232, 255, 0.12);
}
.side-arcade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.side-card {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(0, 232, 255, 0.22);
  background: rgba(4, 12, 22, 0.88);
  box-shadow: inset 0 0 24px rgba(0, 232, 255, 0.06);
}
.side-card.dont-play { border-color: rgba(255, 176, 0, 0.55); }
.side-card.side-punch {
  animation: sidePunch 0.42s ease-out;
}
@keyframes sidePunch {
  0% { box-shadow: 0 0 0 0 rgba(0, 232, 255, 0.0); filter: brightness(2.2); }
  40% { box-shadow: 0 0 28px rgba(0, 232, 255, 0.55); filter: brightness(1.4); }
  100% { box-shadow: inset 0 0 24px rgba(0, 232, 255, 0.06); filter: none; }
}
.side-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.side-asset {
  font-family: Orbitron, monospace;
  letter-spacing: 0.1em;
  color: #00e8ff;
  font-size: 18px;
}
.side-strike { color: rgba(200, 220, 240, 0.75); font-size: 13px; }
.side-count {
  font-family: Orbitron, monospace;
  font-size: 28px;
  color: #e8f4ff;
  letter-spacing: 0.06em;
  margin: 4px 0 8px;
}
.side-count.next-arm { color: #39ff14; text-shadow: 0 0 12px rgba(57, 255, 20, 0.35); }
.side-odds {
  display: flex;
  gap: 12px;
  font-family: Orbitron, monospace;
  font-size: 14px;
  margin-bottom: 8px;
}
.side-odds .yes { color: #39ff14; }
.side-odds .no { color: #ff2d55; }
.side-tape {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  min-height: 18px;
}
.side-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(180, 200, 220, 0.25);
}
.side-dot.HIT { background: #39ff14; box-shadow: 0 0 8px rgba(57, 255, 20, 0.5); }
.side-dot.MISS { background: #ff2d55; box-shadow: 0 0 8px rgba(255, 45, 85, 0.45); }
.side-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.side-yes, .side-no {
  min-height: 56px;
  font-family: Orbitron, monospace;
  letter-spacing: 0.12em;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid transparent;
}
.side-yes {
  color: #10210a;
  background: #39ff14;
  border-color: #39ff14;
}
.side-no {
  color: #fff;
  background: #ff2d55;
  border-color: #ff2d55;
}
.side-yes:disabled, .side-no:disabled {
  opacity: 0.35;
  cursor: default;
}
.side-flag {
  margin-top: 8px;
  font-size: 13px;
  color: #ffb000;
}
.side-hot-head {
  margin: 18px 0 8px;
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(180, 200, 220, 0.7);
}
.side-hot { display: flex; flex-direction: column; gap: 8px; }
.side-hot-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(0, 232, 255, 0.14);
  background: rgba(4, 12, 22, 0.7);
}
.side-hot-title { color: #e8f4ff; font-size: 14px; }
.side-hot-meta { color: rgba(180, 200, 220, 0.65); font-size: 12px; }
.side-hot-taps { display: flex; gap: 6px; }
.side-hot-taps button {
  min-height: 44px;
  min-width: 56px;
  font-family: Orbitron, monospace;
  cursor: pointer;
}
.side-hot-taps .yes { color: #10210a; background: #39ff14; border: 0; }
.side-hot-taps .no { color: #fff; background: #ff2d55; border: 0; }
.side-fills {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(200, 220, 240, 0.8);
}
.side-fill { padding: 4px 0; border-bottom: 1px solid rgba(0, 232, 255, 0.08); }
.side-why { min-height: 18px; margin-top: 10px; color: #ffb000; font-size: 13px; }
.side-live-box {
  margin-top: 18px;
  border: 1px solid rgba(255, 45, 85, 0.25);
  padding: 10px 12px;
  background: rgba(20, 4, 8, 0.35);
}
.side-live-box summary {
  cursor: pointer;
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
  color: rgba(255, 160, 180, 0.8);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.side-live-note { font-size: 13px; color: rgba(200, 220, 240, 0.75); }
.side-arm-input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(4, 8, 14, 0.9);
  border: 1px solid rgba(255, 45, 85, 0.35);
  color: #e8f4ff;
  font-family: Orbitron, monospace;
}
.side-arm-btn, .side-kill-btn {
  min-height: 44px;
  min-width: 96px;
  margin-right: 8px;
  font-family: Orbitron, monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.side-arm-btn { border: 1px solid #ff2d55; background: rgba(255, 45, 85, 0.12); color: #ff8aa0; }
.side-kill-btn { border: 1px solid #ffb000; background: rgba(255, 176, 0, 0.1); color: #ffb000; }
.side-arm-status { margin-top: 8px; font-size: 12px; color: rgba(200, 220, 240, 0.7); }
.side-flash {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 232, 255, 0.18);
  z-index: 80;
  animation: sideFlash 0.28s ease-out forwards;
}
@keyframes sideFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 480px) {
  .side-arcade { grid-template-columns: 1fr; }
  .side-yes, .side-no { min-height: 56px !important; }
  .side-hot-row { grid-template-columns: 1fr; }
  .side-hot-taps button { flex: 1; min-height: 56px; }
}

.side-card.parked {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.45;
  border-style: dashed;
}
.side-card.parked .side-card-head { letter-spacing: 0.16em; color: rgba(180, 200, 220, 0.55); }

/* Phone HUD chip for Raijin. Dual Floor paints the smaller third chair on canvas. */
.floor-raijin {
  position: absolute;
  right: 8px;
  bottom: 10px;
  left: auto;
  transform: none;
  z-index: 6;
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(0, 232, 255, 0.35);
  background: rgba(4, 8, 16, 0.72);
  color: #7fe9ff;
  font-family: Orbitron, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.floor-raijin img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(0, 220, 255, 0.45);
}
body.mode-floor .floor-raijin,
body.mode-art .floor-raijin { display: none; }
body.night-mode .floor-raijin { display: none !important; }
body.phone-floor .floor-raijin { display: inline-flex !important; }
body.front-tab-off #tabFront,
body.front-tab-off #tabFront.active { display: none !important; }
body.front-chair-off .floor-raijin,
body.front-chair-off.phone-floor .floor-raijin { display: none !important; }

/* THE FRONT — Dallas weather ring. CRT/neon, not a city list. */
.front-hud { max-width: 980px; }
.front-mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.front-wx-badge {
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  border: 1px solid rgba(0, 232, 255, 0.4);
  color: #7fe9ff;
  background: rgba(0, 232, 255, 0.08);
}
.front-stage-wrap {
  position: relative;
  container-type: size;
  width: min(920px, 100%);
  height: min(620px, 78vw);
  margin: 0 auto 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 232, 255, 0.22);
  background: #02040a;
  box-shadow: inset 0 0 40px rgba(0, 232, 255, 0.06);
}
#frontWx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.front-ring {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
.front-chair,
.front-seat {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: #e8f4ff;
  font-family: Orbitron, monospace;
  pointer-events: auto;
}
.front-chair {
  transform: translate(-50%, calc(-50% - 2px));
  z-index: 3;
  pointer-events: none;
}
#frontStageWrap > #frontChair .front-mark {
  /* Match canvas chair: 2 * min(w,h) * 0.28 * 0.80. Never an empty neon slot. */
  width: min(44.8cqw, 44.8cqh);
  height: min(44.8cqw, 44.8cqh);
  border-color: rgba(0, 220, 255, 0.85);
  background: #02040a;
}
#frontStageWrap > #frontChair .front-name,
#frontStageWrap > #frontChair .front-call {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}
.front-seat {
  --a: 0;
  transform: translate(-50%, -50%) rotate(calc(var(--a) * 1deg)) translateY(-42%) rotate(calc(var(--a) * -1deg)) rotate(var(--front-lean, 0deg));
  min-width: 72px;
  min-height: 56px;
  cursor: default;
}
.front-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(0, 232, 255, 0.45);
  overflow: hidden;
  background: radial-gradient(circle, rgba(0, 20, 36, 0.9), #02040a);
  box-shadow: 0 0 12px rgba(0, 232, 255, 0.18);
  display: block;
}
.front-chair .front-mark {
  width: 112px;
  height: 112px;
  border-color: rgba(0, 220, 255, 0.55);
}
.front-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.front-chair .front-mark { position: relative; }
.front-chair .raijin-eye {
  position: absolute;
  top: 40%;
  width: 11%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--raijin-eye-a, #FFFFFF) 0%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(1px);
  box-shadow: 0 0 10px var(--raijin-eye-a, #FFFFFF);
  pointer-events: none;
  opacity: 0;
}
.front-chair .raijin-eye-l { left: 31%; }
.front-chair .raijin-eye-r { right: 31%; left: auto; }
.front-chair[data-eye="up"] .raijin-eye,
.front-chair[data-eye="down"] .raijin-eye { opacity: 1; }
.front-chair[data-eye="wait"] .raijin-eye { opacity: 0; }
.front-mark.blank {
  background: radial-gradient(circle, rgba(0, 40, 56, 0.35), #02040a 70%);
  box-shadow: inset 0 0 0 2px rgba(0, 232, 255, 0.35), 0 0 10px rgba(0, 232, 255, 0.12);
}
.front-mark.blank img { display: none; }
.front-name {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
.front-call {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(180, 210, 230, 0.8);
  max-width: 110px;
  text-align: center;
}
.front-stage-wrap[data-wx="WIND"] .front-seat { --front-lean: -6deg; }
.front-stage-wrap[data-wx="STORM"].bolt-punch .front-chair .front-mark {
  box-shadow: 0 0 28px rgba(0, 232, 255, 0.85), 0 0 48px rgba(255, 176, 0, 0.35);
}
.front-book {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 920px;
  margin: 0 auto 14px;
}
.front-bet {
  padding: 12px;
  border: 1px solid rgba(0, 232, 255, 0.22);
  background: rgba(4, 12, 22, 0.88);
}
.front-bet.best { border-color: rgba(57, 255, 20, 0.55); box-shadow: 0 0 16px rgba(57, 255, 20, 0.12); }
.front-bet.dont-play { border-color: rgba(255, 176, 0, 0.5); }
.front-bet-head {
  display: flex;
  justify-content: space-between;
  font-family: Orbitron, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.front-bet button {
  min-height: 44px;
  min-width: 72px;
  margin-right: 8px;
  margin-top: 8px;
  border: 1px solid rgba(0, 232, 255, 0.35);
  background: rgba(0, 232, 255, 0.08);
  color: #e8f4ff;
  font-family: Orbitron, monospace;
  cursor: pointer;
}
.front-bet button.yes { border-color: rgba(57, 255, 20, 0.45); color: #39ff14; }
.front-bet button.no { border-color: rgba(255, 45, 85, 0.45); color: #ff2d55; }
.front-bet button:disabled { opacity: 0.35; cursor: not-allowed; }
.front-hit-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 232, 255, 0.22);
  background: rgba(4, 10, 18, 0.88);
}
.front-tape-card {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 232, 255, 0.22);
  background: rgba(4, 10, 18, 0.88);
}
.front-tape-card .lock-tape-list { margin: 8px 0 0; }
.front-guide-head {
  font-family: Orbitron, monospace;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: #7fe9ff;
  margin: 16px 0 8px;
}
.front-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.front-guide-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 232, 255, 0.2);
  background: rgba(4, 10, 18, 0.85);
}
.front-guide-card .front-mark { width: 56px; height: 56px; }
.front-guide-card h3 {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.12em;
  font-family: Orbitron, monospace;
}
.front-guide-card p { margin: 0; font-size: 12px; color: rgba(200, 220, 240, 0.75); }
.front-guide-card .nw { font-family: Share Tech Mono, monospace; font-size: 11px; color: #7fe9ff; margin-top: 4px; }
.front-step {
  min-height: 44px;
  min-width: 56px;
  border: 1px solid rgba(0, 232, 255, 0.25);
  background: rgba(4, 12, 22, 0.75);
  color: #e8f4ff;
  font-family: Orbitron, monospace;
  cursor: pointer;
}
.front-step.on {
  border-color: rgba(0, 232, 255, 0.7);
  background: rgba(0, 232, 255, 0.12);
}
@media (max-width: 480px) {
  .front-stage-wrap { height: 480px; }
  .front-chair .front-mark { width: 88px; height: 88px; }
  #frontStageWrap > #frontChair .front-mark {
    width: min(44.8cqw, 44.8cqh);
    height: min(44.8cqw, 44.8cqh);
  }
  .front-mark { width: 52px; height: 52px; }
  .front-bet button { min-height: 56px; }
  .front-step { min-height: 56px; }
}

/* ===== CHARTS WALL — one hero, tight panes, no empty-sky screensaver ===== */
.chart-ktarget-chip,
.chart-window-chip {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid rgba(0, 232, 255, 0.45);
  color: #7fe9ff;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(0, 232, 255, 0.45);
  white-space: nowrap;
}
.chart-window-chip {
  border-color: rgba(240, 193, 74, 0.55);
  color: #f0c14a;
  text-shadow: 0 0 8px rgba(240, 193, 74, 0.4);
  margin-right: auto;
}
html body.mode-charts #app {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}
html body.mode-charts #mainTable,
html body.mode-charts #tableStage,
html body.mode-charts #roundtable {
  pointer-events: none !important;
}
html body.mode-charts #chartsView.charts-view:not(.hidden),
html body.mode-charts .charts-view:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y;
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch;
  z-index: 30 !important;
}
body.mode-charts .charts-pairs {
  min-height: 0;
  margin-bottom: 8px;
  gap: 8px;
}
body.mode-charts .charts-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(108px, auto);
  gap: 8px;
}
body.mode-charts .chart-card {
  min-height: 0;
  max-height: 280px;
  overflow: hidden;
}
body.mode-charts .chart-card:not(.chart-pair) {
  min-height: 108px;
}
body.mode-charts .chart-card-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
body.mode-charts .chart-card canvas,
body.mode-charts #chartOdds,
body.mode-charts #chartVolume,
body.mode-charts #chartDelta,
body.mode-charts #chartFunding,
body.mode-charts #chartAccuracy,
body.mode-charts #chartWeights,
body.mode-charts #chartTape,
body.mode-charts #chartBtc,
body.mode-charts #chartEth {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 220px !important;
}
body.mode-charts .chart-card:not(.chart-pair) canvas,
body.mode-charts #chartOdds,
body.mode-charts #chartVolume,
body.mode-charts #chartDelta,
body.mode-charts #chartFunding,
body.mode-charts #chartAccuracy,
body.mode-charts #chartWeights {
  min-height: 72px !important;
  height: 88px !important;
  max-height: 110px !important;
}
body.mode-charts .chart-card.chart-pair {
  min-height: 220px;
}
body.mode-charts .chart-card.chart-tape {
  min-height: 0;
  max-height: 200px;
  overflow: hidden;
}
body.mode-charts .chart-card.chart-tape canvas,
body.mode-charts #chartTape {
  min-height: 28px !important;
  height: 32px !important;
  max-height: 36px !important;
  flex: 0 0 auto;
}
body.mode-charts .chart-lock-list {
  max-height: 76px !important;
  overflow-y: auto !important;
  flex: 0 0 auto;
  font-size: 0.58rem;
}
body.mode-charts .chart-card.no-feed {
  min-height: 0;
}
body.mode-charts .chart-card.no-feed canvas {
  min-height: 28px !important;
  height: 32px !important;
  max-height: 36px !important;
  flex: 0 0 auto;
}
html body.mode-charts .chart-card.chart-pair-eth.chart-hero-off,
html body.mode-charts .chart-card.chart-pair-btc.chart-hero-off,
html body.mode-charts.charts-hero-front .chart-card.chart-pair-btc,
html body.mode-charts.charts-hero-front .chart-card.chart-pair-eth,
html body.mode-charts.charts-hero-btc .chart-card.chart-pair-eth,
html body.mode-charts.charts-hero-eth .chart-card.chart-pair-btc {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}
@media (min-width: 900px) {
  body.mode-charts.charts-hero-btc .charts-pairs,
  body.mode-charts.charts-hero-eth .charts-pairs {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 899px) {
  body.mode-charts .charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  body.mode-charts .charts-pairs,
  body.mode-charts .charts-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.mode-charts .chart-card,
  body.mode-charts .chart-card.chart-pair,
  body.mode-charts .chart-card.chart-wide {
    min-height: 0 !important;
    width: 100% !important;
  }
  body.mode-charts .chart-card:not(.chart-pair) canvas {
    min-height: 64px !important;
    height: 72px !important;
    max-height: 96px !important;
  }
  body.mode-charts .chart-card.chart-pair canvas,
  body.mode-charts .chart-card.chart-wide canvas {
    min-height: 180px !important;
    height: 180px !important;
    max-height: 200px !important;
  }
  body.mode-charts .chart-card.chart-tape canvas,
  body.mode-charts .chart-card.no-feed canvas {
    min-height: 28px !important;
    height: 32px !important;
    max-height: 36px !important;
  }
}

/* Charts header at ~1042 — HUDDLE / HIT RATE / wordmark must not overlap */
@media (max-width: 1180px) and (min-width: 481px) {
  body.mode-charts #app > header .header-row {
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
  }
  body.mode-charts #app > header .logo .title {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }
  body.mode-charts #app > header .huddle-badge {
    min-width: 0 !important;
    padding: 3px 7px !important;
  }
  body.mode-charts #app > header .accuracy-badge {
    min-width: 0 !important;
    padding: 3px 7px !important;
  }
  body.mode-charts #app > header .accuracy-badge .acc-label {
    display: none;
  }
}

/* Ares — one portrait, CSS eye / rim recolor from the pick */
.ares-face {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(26vw, 200px);
  height: min(26vw, 200px);
  transform: translate(-50%, -58%);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  --ares-eye-a: #F5B942;
  --ares-eye-b: #F5B942;
}
.ares-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ares-eye {
  position: absolute;
  top: 38%;
  width: 11%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ares-eye-a) 0%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(1px);
  box-shadow: 0 0 10px var(--ares-eye-a);
  pointer-events: none;
}
.ares-eye-l { left: 32%; }
.ares-eye-r { right: 32%; left: auto; }
.ares-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 18px var(--ares-eye-a), 0 0 16px var(--ares-eye-b);
  pointer-events: none;
}
.ares-face[data-eye="wait"] { --ares-eye-a: #F5B942; --ares-eye-b: #F5B942; }
.ares-face[data-eye="over"] { --ares-eye-a: #FF6A1A; --ares-eye-b: #FFC14A; }
.ares-face[data-eye="under"] { --ares-eye-a: #3DE0FF; --ares-eye-b: #00E8FF; }
.ares-face[data-eye="team"] { --ares-eye-a: var(--ares-eye-a); --ares-eye-b: var(--ares-eye-b); }
/* Canvas portrait + eye tint only — never stack the HTML Ares photo on top. */
.ares-face,
body:not([data-focus-table="ats"]) .ares-face,
body.mode-floor .ares-face,
body.mode-night .ares-face,
body.mode-charts .ares-face,
body.mode-settings .ares-face { display: none !important; }
.raijin-face,
body.mode-floor .raijin-face,
body.mode-art .raijin-face,
body.mode-night .raijin-face,
body.mode-charts .raijin-face,
body.mode-settings .raijin-face { display: none !important; }
.ats-sub {
  font-family: Share Tech Mono, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #7fe9ff;
  margin-top: 4px;
  opacity: 0.85;
}
body[data-focus-table="ats"] .chart-card.chart-pair-btc,
body[data-focus-table="ats"] .chart-card.chart-pair-eth,
body.charts-hero-ats .chart-card.chart-pair-btc,
body.charts-hero-ats .chart-card.chart-pair-eth,
body[data-focus-table="ats"] .chart-card.chart-crypto-odds,
body[data-focus-table="ats"] .chart-card.chart-crypto-delta,
body[data-focus-table="ats"] .chart-card.chart-crypto-funding,
body.charts-hero-ats .chart-card.chart-crypto-odds,
body.charts-hero-ats .chart-card.chart-crypto-delta,
body.charts-hero-ats .chart-card.chart-crypto-funding,
body[data-focus-table="front"] .chart-card.chart-crypto-odds,
body[data-focus-table="front"] .chart-card.chart-crypto-delta,
body[data-focus-table="front"] .chart-card.chart-crypto-funding,
body.charts-hero-front .chart-card.chart-crypto-odds,
body.charts-hero-front .chart-card.chart-crypto-delta,
body.charts-hero-front .chart-card.chart-crypto-funding {
  display: none !important;
}
body[data-focus-table="ats"] #atsChartTape,
body.charts-hero-ats #atsChartTape {
  display: block !important;
}
body[data-focus-table="front"] .chart-window-chip,
body[data-focus-table="ats"] .chart-window-chip,
body[data-focus-table="front"] .chart-ktarget-chip,
body[data-focus-table="ats"] .chart-ktarget-chip,
body.charts-hero-front .chart-window-chip,
body.charts-hero-ats .chart-window-chip,
body.charts-hero-front .chart-ktarget-chip,
body.charts-hero-ats .chart-ktarget-chip {
  display: none !important;
}
.ats-chart-line {
  font-family: Orbitron, monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #ffe7a0;
  padding: 18px 16px 22px;
  text-shadow: 0 0 10px rgba(240, 193, 74, 0.45);
}
#focusAts.focus-active {
  opacity: 1 !important;
  color: #ffe7a0 !important;
  border-color: rgba(240, 193, 74, 0.95) !important;
  background: linear-gradient(165deg, rgba(240, 193, 74, 0.32), rgba(90, 55, 5, 0.55)) !important;
  box-shadow: 0 0 16px rgba(240, 193, 74, 0.55) !important;
}

/* Chair rooms — under majority wisps. Floor + Night. No extra chrome. */
body.floor-mode[data-chair-room="satoshi"] #app,
body.night-mode[data-chair-room="satoshi"] #app,
body.floor-mode[data-chair-room="satoshi"] #tableStage,
body.night-mode[data-chair-room="satoshi"] #tableStage,
body.floor-mode[data-chair-room="satoshi"] .table-stage,
body.night-mode[data-chair-room="satoshi"] .table-stage {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(240, 176, 64, 0.18) 0%, transparent 44%),
    radial-gradient(ellipse at 50% 100%, rgba(48, 24, 6, 0.58) 0%, transparent 58%),
    linear-gradient(180deg, #1a1208 0%, #0a0704 48%, #050302 100%) !important;
}
body.floor-mode[data-chair-room="vitalik"] #app,
body.night-mode[data-chair-room="vitalik"] #app,
body.floor-mode[data-chair-room="vitalik"] #tableStage,
body.night-mode[data-chair-room="vitalik"] #tableStage,
body.floor-mode[data-chair-room="vitalik"] .table-stage,
body.night-mode[data-chair-room="vitalik"] .table-stage {
  background:
    radial-gradient(ellipse at 72% 12%, rgba(80, 230, 210, 0.16) 0%, transparent 40%),
    radial-gradient(ellipse at 28% 88%, rgba(10, 48, 52, 0.42) 0%, transparent 55%),
    linear-gradient(180deg, #061418 0%, #031014 50%, #02080c 100%) !important;
}
body.floor-mode[data-chair-room="ares"] #app,
body.night-mode[data-chair-room="ares"] #app,
body.floor-mode[data-chair-room="ares"] #tableStage,
body.night-mode[data-chair-room="ares"] #tableStage,
body.floor-mode[data-chair-room="ares"] .table-stage,
body.night-mode[data-chair-room="ares"] .table-stage {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 230, 160, 0.14) 0%, transparent 36%),
    radial-gradient(ellipse at 88% 0%, rgba(255, 230, 160, 0.14) 0%, transparent 36%),
    linear-gradient(180deg, #071018 0%, #02060e 52%, #010308 100%) !important;
}
body[data-hour-weather="wild"][data-chair-room="satoshi"] #tableStage {
  box-shadow: inset 0 0 80px rgba(255, 170, 40, 0.16);
}
body[data-hour-weather="wild"][data-chair-room="vitalik"] #tableStage {
  box-shadow: inset 0 0 80px rgba(60, 255, 220, 0.14);
}
body[data-hour-weather="wild"][data-chair-room="ares"] #tableStage {
  box-shadow: inset 0 0 80px rgba(255, 220, 120, 0.12);
}
body[data-hour-weather="dead"] #tableStage,
body[data-hour-weather="dead"] .table-stage {
  filter: brightness(0.72);
}
body.phone-floor[data-hour-weather="wild"] #tableStage,
body.phone-floor[data-hour-weather="dead"] #tableStage {
  box-shadow: none;
  filter: none;
}
body.night-mode header .header-row,
body.night-mode footer {
  display: none !important;
}
body.floor-mode[data-chair-room="ares"] #atsSportChip,
body.floor-mode[data-chair-room="ares"] #atsGameStrip {
  border-color: rgba(240, 193, 74, 0.85);
  background: rgba(8, 14, 22, 0.72);
  box-shadow: 0 0 14px rgba(240, 193, 74, 0.28);
  letter-spacing: 0.14em;
}

/* ===== SEATS — field guide + ranks + cards, one scroll, no third door ===== */
#seatsView.seats-view {
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#seatsView.hidden { display: none !important; }
#seatsView .seats-hero h2 {
  color: #00e8ff;
  text-shadow: 0 0 14px rgba(0, 232, 255, 0.4);
}
#seatsView #botsView,
#seatsView #ranksView,
#seatsView .seats-cards-block {
  position: relative;
  inset: auto;
  max-height: none;
  overflow: visible;
  min-height: 0;
  padding: 0;
}
#seatsView #botsView.hidden,
#seatsView #ranksView.hidden { display: none !important; }
.seats-strip,
.seats-board,
.seats-cards-block {
  display: block;
  width: 100%;
}
.seats-cards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.seats-cards-head h2 {
  font-family: Orbitron, monospace;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: #00e8ff;
  margin: 0;
  text-shadow: 0 0 12px rgba(0, 232, 255, 0.35);
}
.seats-cards-toggle {
  font-family: Orbitron, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #7fe9ff;
  background: rgba(0, 232, 255, 0.08);
  border: 1px solid rgba(0, 232, 255, 0.35);
  border-radius: 2px;
  padding: 6px 10px;
  cursor: pointer;
}
.seats-cards-toggle:hover {
  border-color: rgba(0, 232, 255, 0.7);
  box-shadow: 0 0 12px rgba(0, 232, 255, 0.2);
}
body.mode-seats #dashboardOverlay,
#seatsView #dashboardOverlay {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 10px;
  padding: 0 0 16px !important;
  overflow: visible !important;
  pointer-events: auto;
  z-index: 1;
  min-height: 0 !important;
  width: 100%;
}
body.mode-seats #dashboardOverlay.hidden,
body.seats-cards-off #dashboardOverlay,
body.mode-seats.seats-cards-off #dashboardOverlay { display: none !important; }
body.mode-seats #dashboardOverlay .agent-card {
  flex: 1 1 220px;
  max-width: 320px;
  min-width: 0;
}
body.mode-seats #mainTable { display: none !important; }

/* Phone / narrow: Seats stays in normal flow and scrolls. No crushed 3-col. */
@media (max-width: 720px) {
  body.mode-seats #seatsView,
  body.mode-seats #seatsView.info-view:not(.hidden) {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  body.mode-seats #botsView,
  body.mode-seats #ranksView,
  body.mode-seats .seats-cards-block,
  body.mode-seats #dashboardOverlay {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    grid-column: auto !important;
  }
  body.mode-seats #dashboardOverlay {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  body.seats-cards-off #dashboardOverlay,
  body.mode-seats.seats-cards-off #dashboardOverlay {
    display: none !important;
  }
  body.mode-seats #dashboardOverlay .agent-card,
  body.mode-seats #dashboardOverlay .pair-card {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.mode-seats .bots-grid {
    grid-template-columns: 1fr !important;
  }
  body.mode-seats .rank-row {
    grid-template-columns: 28px minmax(0, 1fr) 52px 36px 36px 44px !important;
  }
}

/* ===== LOGIN SPLASH — #passwordGate only. Dark stone + amber/cyan. Type over the table. ===== */
#passwordGate.password-gate:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 16px max(18px, env(safe-area-inset-bottom, 18px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background-color: #08080a !important;
  background-image: url("/login-council.jpg") !important;
  background-size: cover !important;
  background-position: center 18% !important;
  background-repeat: no-repeat !important;
}
#passwordGate.password-gate.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#passwordGate.password-gate::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 6, 8, 0.08) 0%,
    rgba(6, 6, 8, 0) 22%,
    rgba(6, 6, 8, 0) 52%,
    rgba(10, 9, 8, 0.42) 68%,
    rgba(8, 7, 6, 0.78) 100%
  );
}
#passwordGate .password-card {
  position: relative !important;
  z-index: 1;
  margin: 0 auto 2vh !important;
  width: min(440px, 92vw) !important;
  padding: 18px 20px 16px !important;
  text-align: center;
  background: rgba(22, 20, 18, 0.82) !important;
  border: 1px solid rgba(201, 148, 62, 0.28) !important;
  border-radius: 14px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.62),
    0 0 22px rgba(0, 196, 212, 0.08) !important;
  backdrop-filter: blur(3px);
}
#passwordGate .password-card::before {
  background: none !important;
  mix-blend-mode: normal;
}
#passwordGate .gate-mark {
  display: none !important;
}
#passwordGate .password-title {
  color: #e8b86a !important;
  text-shadow: 0 0 12px rgba(201, 148, 62, 0.28) !important;
  letter-spacing: 0.12em;
}
#passwordGate .password-sub {
  color: #9bb8c4 !important;
  text-shadow: none !important;
}
#passwordGate .password-input {
  border: 1px solid rgba(201, 148, 62, 0.32) !important;
  background: rgba(10, 9, 8, 0.88) !important;
  color: #f3efe6 !important;
  margin-bottom: 10px;
}
#passwordGate .password-input:focus {
  outline: none;
  border-color: rgba(0, 196, 212, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(0, 196, 212, 0.22);
}
#passwordGate .gate-oath {
  border: 1px solid rgba(0, 196, 212, 0.18) !important;
  background: rgba(8, 8, 10, 0.62) !important;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35) !important;
  margin-bottom: 10px;
}
#passwordGate .gate-oath li {
  color: #c9d4d8 !important;
  text-shadow: none !important;
}
#passwordGate .gate-oath li::before {
  color: #c9943e !important;
}
#passwordGate .gate-agree {
  color: #e6d3b0 !important;
  border: 1px solid rgba(201, 148, 62, 0.28) !important;
  background: rgba(14, 12, 10, 0.7) !important;
  margin-bottom: 10px;
}
#passwordGate .gate-agree input {
  accent-color: #c9943e;
}
#passwordGate .gate-btn-summon {
  background: linear-gradient(180deg, rgba(36, 30, 24, 0.96), rgba(16, 14, 12, 0.96)) !important;
  border-color: rgba(201, 148, 62, 0.42) !important;
  color: #e8b86a !important;
  text-shadow: 0 0 8px rgba(201, 148, 62, 0.22) !important;
  box-shadow: 0 0 16px rgba(0, 196, 212, 0.08) !important;
}
#passwordGate .gate-btn-summon:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(0, 196, 212, 0.14), 0 0 12px rgba(201, 148, 62, 0.16) !important;
}
#passwordGate .password-error {
  color: #e07070;
}
@media (max-width: 480px) {
  #passwordGate.password-gate:not(.hidden) {
    justify-content: flex-end !important;
    align-items: center !important;
    padding-top: 36vh !important;
  }
  #passwordGate .password-card {
    width: min(420px, 94vw) !important;
    padding: 14px 14px 12px !important;
    margin-bottom: 1vh !important;
  }
  #passwordGate .gate-oath li {
    font-size: 10px;
    margin-bottom: 6px;
  }
}