/* Spectate — "salon" look for the live list and the in-game view (ink navy, ivory, champagne-gold hairlines; gold only for the one action). */
:root { --sp-hair: rgba(226,200,132,.16); --sp-hair2: rgba(226,200,132,.42); --sp-gold: #e6c466; --sp-grad: linear-gradient(180deg,#f6df94,#e2bd5a 52%,#c89c3c); --sp-panel: linear-gradient(180deg,rgba(18,31,62,.78),rgba(8,15,34,.9)); --sp-serif: 'Bodoni Moda','Playfair Display',Georgia,serif; --sp-dim: #9aa6bf; }
html body { background: radial-gradient(1000px 560px at 50% -10%, rgba(54,92,164,.24), transparent 62%), #050a18 !important; }

/* header */
html #liveListPage { max-width: 760px !important; padding: 8px 16px 96px !important; }
html #liveListPage .ap-top { padding: 22px 0 12px !important; margin: 0 !important; background: none !important; }
html #liveListPage .ap-back { background: rgba(255,255,255,.05) !important; border: 1px solid var(--sp-hair) !important; color: #e8e2d2 !important; }
html #liveListPage .ap-title { font-family: var(--sp-serif) !important; font-size: 32px !important; font-weight: 700 !important; letter-spacing: -.01em; color: #f4efe4 !important; }
html #liveListPage .ap-sub { font-size: 13px !important; color: var(--sp-dim) !important; }
html #liveListPage .ap-live { border-radius: 999px !important; }

/* filters */
html #llFilters { padding: 4px 2px 12px !important; }
html #llFilters .ap-chip { border-radius: 999px !important; background: rgba(255,255,255,.05) !important; border: 1px solid var(--sp-hair) !important; color: #d6dcea !important; font-weight: 600 !important; }
html #llFilters .ap-chip:hover { border-color: var(--sp-hair2) !important; }
html #llFilters .ap-chip.on { background: var(--sp-grad) !important; color: #1c1405 !important; border-color: transparent !important; box-shadow: 0 8px 18px -10px rgba(230,196,102,.85) !important; }
html .ll-bar b { font-family: var(--sp-serif); font-size: 19px !important; color: #f4efe4 !important; }
html .ll-bar .ll-cnt { color: var(--sp-gold) !important; }

/* game cards */
html .gm-card { background: var(--sp-panel) !important; border: 1px solid var(--sp-hair) !important; border-radius: 22px !important; padding: 16px !important; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 26px 50px -30px #000 !important; }
html .gm-card.league { border-color: var(--sp-hair2) !important; background: linear-gradient(135deg, rgba(230,196,102,.12), rgba(14,24,48,.9)) !important; }
html .gm-board { border: 1px solid var(--sp-hair2) !important; border-radius: 12px !important; box-shadow: 0 0 0 5px rgba(8,14,32,.9), 0 0 0 6px var(--sp-hair), 0 16px 30px -16px #000 !important; }
html .gm-pl { font-size: 14px !important; color: #f1ece0 !important; }
html .gm-lg { color: var(--sp-gold) !important; background: rgba(230,196,102,.12) !important; border-color: var(--sp-hair2) !important; }
html .gm-meta { color: var(--sp-dim) !important; }
html .gm-foot .ap-btn { width: 100%; border: 0 !important; border-radius: 14px !important; background: var(--sp-grad) !important; color: #1c1405 !important; font-weight: 800 !important; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 26px -14px rgba(230,196,102,.8) !important; }

/* empty state */
html .gm-empty { padding: 52px 20px 40px !important; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px dashed var(--sp-hair2); border-radius: 26px; background: var(--sp-panel); }
.gm-empty-board { width: 76px; height: 76px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden; border: 1px solid var(--sp-hair2); box-shadow: 0 0 0 6px rgba(8,14,32,.9), 0 0 0 7px var(--sp-hair), 0 18px 30px -16px #000; margin-bottom: 22px; }
.gm-empty-board i { background: #b58863; } .gm-empty-board i:nth-child(1), .gm-empty-board i:nth-child(4) { background: #f0d9b5; }
.gm-empty-t { font-family: var(--sp-serif); font-size: 22px; font-weight: 700; color: #f4efe4; margin-bottom: 6px; }
.gm-empty-s { font-size: 13.5px; color: var(--sp-dim); max-width: 340px; }
.gm-empty-perks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 20px 0 22px; }
.gm-empty-perks span { padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #d6dcea; background: rgba(255,255,255,.05); border: 1px solid var(--sp-hair); }
.gm-empty-cta { padding: 13px 30px; border-radius: 14px; background: var(--sp-grad); color: #1c1405; font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 30px -14px rgba(230,196,102,.8); }

/* in-game view */
html .player-strip, html .spec-poll { background: var(--sp-panel) !important; border: 1px solid var(--sp-hair) !important; border-radius: 18px !important; }
html .react-btn { border-radius: 999px !important; background: rgba(255,255,255,.05) !important; border: 1px solid var(--sp-hair) !important; }
html .react-btn:hover { border-color: var(--sp-hair2) !important; }
html .poll-btn.active, html .poll-btn.voted-white, html .poll-btn.voted-black { box-shadow: 0 0 0 2px var(--sp-gold) !important; }
html .spec-banner { background: rgba(5,10,24,.85) !important; border-bottom: 1px solid var(--sp-hair) !important; }
html .side-tab.active { color: var(--sp-gold) !important; border-bottom-color: var(--sp-gold) !important; }
@media (max-width: 520px) { html #liveListPage .ap-title { font-size: 28px !important; } }

/* the list page has no game: the moves/chat panel that belongs to the game view must not show under it */
body.spec-list #mobilePanel, body.spec-list #mobTabs { display: none !important; }

/* title never runs under the LIVE badge on narrow screens */
html #liveListPage .ap-top-main { overflow: hidden; }
html #liveListPage .ap-live { flex: none; }
html #liveListPage .ap-title { text-wrap: balance; }
@media (max-width: 520px) { html #liveListPage .ap-title { font-size: 24px !important; } }

/* ═══ Redesign D — watching a live game on a desktop ═══
 * The old layout let the flex column squash the board into a rectangle (500x340 at 800px height) because the poll and reactions shared its height.
 * Now: reactions as a slim rail on the left, [player bar / board / player bar] in the middle, moves+chat and the poll on the right. Phones keep their own layout (≤700px). */
@media (min-width: 701px) {
  html .spec-wrap { --sb: clamp(300px, min(calc(100vh - 330px), calc(100vw - 520px)), 640px); display: grid !important; height: auto !important; max-width: none !important; grid-template-columns: 64px var(--sb) minmax(280px, 340px); grid-template-rows: auto auto auto 1fr; column-gap: 22px; justify-content: center; align-content: start; padding: 14px 20px 30px; }
  html .spec-wrap > .gcenter { display: contents; }
  html .spec-wrap .player-strip { grid-column: 2; width: var(--sb) !important; box-sizing: border-box; margin: 0 !important; min-height: 52px; }
  html .spec-wrap #topStrip { grid-row: 1; margin-bottom: 8px !important; }
  html .spec-wrap #board { grid-column: 2; grid-row: 2; width: var(--sb) !important; height: var(--sb) !important; flex: none; border: 1px solid var(--sp-hair2) !important; border-radius: 12px !important; box-shadow: 0 0 0 7px rgba(8,14,32,.92), 0 0 0 8px var(--sp-hair), 0 40px 80px -30px #000 !important; }
  html .spec-wrap #botStrip { grid-row: 3; margin-top: 14px !important; }
  html .spec-wrap .reaction-bar { grid-column: 1; grid-row: 2; width: auto !important; flex-direction: column; align-self: center; justify-content: center; gap: 8px; padding: 0; margin: 0; }
  html .spec-wrap .react-btn { width: 50px; height: 50px; padding: 0 !important; display: flex; align-items: center; justify-content: center; font-size: 20px !important; }
  html .spec-wrap .spec-poll { grid-column: 3; grid-row: 3 / span 2; width: auto !important; margin: 14px 0 0 !important; align-self: start; box-sizing: border-box; }
  html .spec-wrap .chat-side { grid-column: 3; grid-row: 1 / span 2; width: auto; height: 0; min-height: 100%; overflow: hidden; border: 1px solid var(--sp-hair); border-radius: 22px; background: var(--sp-panel); }
  html .side-tabs { border-bottom: 1px solid var(--sp-hair) !important; }
  html .side-tab { padding: 14px 0 !important; letter-spacing: .12em !important; font-size: 11px !important; }
  html .mv-san.current { background: rgba(230,196,102,.16) !important; color: var(--sp-gold) !important; }
  html .mv-san, html .mv-num { font-variant-numeric: tabular-nums; }
}
html .player-strip { background: var(--sp-panel) !important; }
html .player-strip .ps-name { font-family: var(--sp-serif); font-size: 17px !important; font-weight: 700 !important; color: #f4efe4 !important; }
html .player-strip .ps-rating { font-variant-numeric: tabular-nums; color: var(--sp-dim) !important; }
html .player-strip .timer { font-family: 'Inter', system-ui, sans-serif !important; font-variant-numeric: tabular-nums; font-size: 20px !important; font-weight: 800 !important; border-radius: 12px !important; border: 1px solid var(--sp-hair) !important; }
html .player-strip .timer.active-turn { background: var(--sp-grad) !important; color: #1c1405 !important; border-color: transparent !important; }
html .end-box { background: linear-gradient(180deg, rgba(20,33,66,.98), rgba(8,14,32,.99)) !important; border: 1px solid var(--sp-hair2) !important; border-radius: 26px !important; box-shadow: 0 60px 120px -30px #000 !important; }
html .end-box h2, html .end-box h3 { font-family: var(--sp-serif); color: #f4efe4; }