:root {
  --bg: #17130f;
  --map-bg: #201b15;
  --panel: #2a231b;
  --panel-2: #332a20;
  --line: #4a3c2a;
  --ink: #eadfc8;
  --muted: #a8977a;
  --gold: #d9b54a;
  --gold-2: #f1d27a;
  --red: #d9443a;
  --good: #7cc46a;
  --warn: #e3b33a;
  --bad: #ef6a5a;
  --font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 13px/1.4 var(--font); }
button { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 5px 10px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-2); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: #6b4a16; border-color: var(--gold); color: #fff3cf; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #85601f; color: #fff; }
button.big { padding: 9px 22px; font-size: 15px; }
input, select { font: inherit; color: var(--ink); background: #1d1813; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; }
input[type=number] { width: 64px; }
code { background: #1d1813; padding: 1px 5px; border-radius: 3px; color: var(--gold-2); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.good { color: var(--good); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }

#app { display: grid; grid-template-rows: auto 1fr; height: 100vh; }

/* ---------- top bar ---------- */
#topbar { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: linear-gradient(#2f261b, #231c14); border-bottom: 2px solid #5a4526; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; line-height: 1.05; }
.brand-title { font: bold 20px var(--serif); letter-spacing: 3px; color: var(--gold-2); }
.brand-sub { font-size: 11px; color: var(--muted); letter-spacing: 1px; }
#turnbox { display: flex; align-items: center; gap: 8px; }
#turnInfo { font: bold 14px var(--serif); color: var(--gold-2); white-space: nowrap; }
#sideBanner { padding: 3px 10px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
#phaseChips { display: flex; gap: 2px; }
#phaseChips span { padding: 3px 9px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
#phaseChips span:first-child { border-radius: 4px 0 0 4px; }
#phaseChips span:last-child { border-radius: 0 4px 4px 0; }
#phaseChips span.on { background: var(--gold); color: #2a1d08; border-color: var(--gold); font-weight: 700; }
.actions { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* ---------- main layout ---------- */
main { display: grid; grid-template-columns: 230px 1fr 340px; min-height: 0; }
#left, #right { overflow-y: auto; background: var(--panel); min-height: 0; }
#left { border-right: 1px solid var(--line); padding: 8px; }
#right { border-left: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
#mapwrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#map { width: 100%; height: 100%; display: block; cursor: pointer; touch-action: none; }
#map.grabbing { cursor: grabbing; }

.panel { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.panel h3, .oob-side h3 { margin: 0 0 6px; font: bold 13px var(--serif); color: var(--gold-2); letter-spacing: 0.5px; }

/* order of battle */
.oob-side { margin-bottom: 12px; }
.oob-side h3 { border-left: 6px solid; padding-left: 6px; }
.oob-row { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 3px; cursor: pointer; }
.oob-row:hover { background: #3a3024; }
.oob-row.sel { background: #4a3a1e; outline: 1px solid var(--gold); }
.oob-row.spent { opacity: 0.55; }
.oob-row.dead { opacity: 0.4; text-decoration: line-through; cursor: default; }
.oname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.ostat { font-size: 11px; color: var(--muted); }
.ostat.routing, .ostat.lost, .ostat.fled { color: var(--bad); }
.ostat.shaken { color: var(--warn); }
.mini-counter { display: inline-block; min-width: 34px; text-align: center; font: bold 10px var(--font); padding: 2px 3px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.5); }

/* unit card */
.bars { margin: 6px 0; }
.barline { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 6px; font-size: 12px; margin: 3px 0; }
.bar { height: 8px; background: #1a1510; border-radius: 4px; overflow: hidden; border: 1px solid #3c3122; }
.bar i { display: block; height: 100%; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0; }
.stats div { background: #241e17; border-radius: 4px; padding: 3px 6px; display: flex; justify-content: space-between; align-items: baseline; }
.stats span { color: var(--muted); font-size: 11px; }
.stats b { font-size: 14px; }
.traits { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.trait { display: inline-block; background: #3c2f1c; border: 1px solid #6b5430; color: var(--gold-2); border-radius: 10px; padding: 1px 8px; font-size: 11px; cursor: help; }
.status { color: #c7d7a0; margin-top: 4px; }
.desc { margin: 6px 0 2px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; }
.kv span { color: var(--muted); }

/* previews */
#previewPanel { border-color: var(--gold); }
.odds-head { margin-bottom: 4px; }
.odds { background: var(--gold); color: #2a1d08; font-weight: 800; padding: 1px 8px; border-radius: 4px; margin-left: 6px; }
.crt { width: 100%; border-collapse: collapse; margin: 4px 0; table-layout: fixed; }
.crt td { text-align: center; font-size: 10px; font-weight: 700; padding: 2px 0; border: 1px solid #1a1510; }
.crt td small { display: block; font-weight: 400; color: rgba(255,255,255,0.6); }
.crt td.win { background: #2f5a28; } .crt td.lose { background: #6a2620; } .crt td.even { background: #4a4030; }
.odds.win { background: #4f8f3a; color: #fff; } .odds.lose { background: #a8392e; color: #fff; }
div.win { color: var(--good); }
table.exch, table.hits { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 4px 0; }
table.exch td, table.exch th, table.hits td, table.hits th { padding: 1px 4px; border-bottom: 1px solid #2a2218; text-align: left; vertical-align: top; }
table.exch th, table.hits th { color: var(--gold-2); font-weight: 700; }
table.exch td:first-child { color: var(--muted); white-space: nowrap; }
table.hits td small, table.exch td small { color: var(--muted); }
details { margin: 2px 0; } details summary { cursor: pointer; color: var(--gold-2); }
.gear { margin: 4px 0; line-height: 1.45; color: #d8ccb0; }
.ammo-switch { display: flex; gap: 4px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.ammo-switch .chip.on { background: var(--gold); color: #2a1d08; }
.swap { margin-top: 6px; padding: 3px 6px; border: 1px dashed var(--gold); border-radius: 4px; color: var(--gold-2); }
.barline b small { font-weight: 400; color: var(--muted); }
.probs { display: flex; justify-content: space-between; font-size: 12px; margin: 2px 0 4px; }
.probs .win { color: var(--good); } .probs .lose { color: var(--bad); }
.factors { margin-top: 6px; font-size: 11.5px; }
.fh { color: var(--gold-2); font-weight: 700; margin-top: 4px; }
.f { display: flex; justify-content: space-between; padding: 0 2px; }
.f.up b { color: var(--good); } .f.down b { color: var(--bad); }
.f.total { border-top: 1px solid var(--line); font-weight: 700; }

/* armies */
.army { margin-bottom: 8px; }
.army-name { font-weight: 700; }

/* log */
#logPanel { flex: 1; min-height: 160px; display: flex; flex-direction: column; }
#log { overflow-y: auto; font-size: 12px; flex: 1; max-height: 340px; }
#log div { border-left: 3px solid #555; padding: 2px 6px; margin-bottom: 2px; background: #241e17; }
#log .log-turn { color: var(--gold-2); font-weight: 600; }
#log .log-rout, #log .log-loss { color: #f4a090; }
#log .log-rally { color: #a6e08a; }
#log .log-objective { color: #ffe08a; }

/* map overlays */
#tooltip { position: absolute; pointer-events: none; background: rgba(20,16,12,0.94); border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px; font-size: 12px; max-width: 260px; z-index: 5; }
.tt-odds { margin-top: 3px; color: var(--gold-2); }
#hint { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 12px; background: rgba(20,16,12,0.82); font-size: 12px; color: #d8cbb0; pointer-events: none; }
#zoomCtl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
#zoomCtl button { width: 32px; height: 32px; padding: 0; font-size: 18px; font-weight: 700; background: rgba(40,32,24,0.9); }
#toast { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); background: rgba(20,16,12,0.92); border: 2px solid var(--gold); border-radius: 8px; padding: 8px 22px; font: bold 18px var(--serif); color: var(--gold-2); pointer-events: none; z-index: 6; }
#toast.show { animation: toastIn 1.8s ease forwards; }
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%, -10px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- modals ---------- */
#modalBack { position: fixed; inset: 0; background: rgba(8,6,4,0.75); display: flex; align-items: flex-start; justify-content: center; z-index: 50; overflow-y: auto; padding: 24px 12px; }
#modal { position: relative; background: #2b241b; border: 2px solid #6b5430; border-radius: 10px; padding: 16px 20px; width: min(640px, 100%); box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
#modal.wide { width: min(1180px, 100%); }
/* replay playback bar */
#replayBar { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 20; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: rgba(30,24,17,0.94); border: 1px solid #6b5430; border-radius: 8px; padding: 6px 10px; max-width: calc(100% - 24px); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
#replayBar button { padding: 3px 9px; }
#replayBar .rb-title { font: bold 13px var(--serif); color: var(--gold-2); margin-right: 4px; }
#replayBar .rb-pos { font-size: 12px; min-width: 120px; text-align: center; }
#replayBar input[type=range] { width: 160px; }
.filepick { cursor: pointer; }
/* hotseat handoff: the board is fully covered until the next player presses Ready */
#modalBack.handoff { background: #120e0a; align-items: center; }
.handoff-card { text-align: center; padding: 6px 4px 10px; }
.handoff-card .handoff-banner { display: inline-block; padding: 4px 14px; border-radius: 4px; font: bold 13px var(--serif); letter-spacing: 1px; margin-bottom: 8px; }
.handoff-card button { font-size: 16px; padding: 8px 28px; margin-top: 6px; }
.hotseat-note { background: #2f3a24; border: 1px solid #6f8a46; border-radius: 6px; padding: 5px 9px; margin: 6px 0; font-size: 12px; }
#modal h2 { margin: 0 0 8px; font: bold 22px var(--serif); color: var(--gold-2); letter-spacing: 1px; }
#modal h3 { margin: 8px 0 6px; font: bold 16px var(--serif); }
#modal h4 { margin: 12px 0 4px; color: var(--gold-2); font: bold 14px var(--serif); }
#modal .x { position: absolute; right: 10px; top: 10px; padding: 2px 8px; }
pre.err { background: #1a1410; color: #ff9a8a; padding: 8px; white-space: pre-wrap; }
.warnbox { background: #3d2a16; border: 1px solid #a07030; border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; font-size: 12px; }
.warnbox ul { margin: 4px 0 0; padding-left: 18px; }

.setup-grid { display: grid; grid-template-columns: 1fr 1fr 300px; gap: 12px; align-items: start; }
table.builder td.lvl select { width: 42px; padding: 1px 2px; }
.unit-info { position: sticky; top: 0; font-size: 12px; max-height: 80vh; overflow-y: auto; }
.unit-info h3 { margin: 0 0 4px; display: flex; gap: 6px; align-items: center; }
.unit-info .stats { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .setup-grid { grid-template-columns: 1fr 1fr; } .unit-info { grid-column: 1 / -1; position: static; max-height: none; } }
.side-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.side-head { display: flex; gap: 8px; align-items: center; border-left: 8px solid; padding-left: 8px; flex-wrap: wrap; }
.side-label { font: bold 15px var(--serif); color: var(--gold-2); margin-right: auto; }
.fdesc { font-size: 12px; color: var(--muted); margin: 6px 0; min-height: 34px; }
.builder { width: 100%; border-collapse: collapse; }
.builder th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line); padding: 2px 4px; }
.builder td { padding: 3px 4px; border-bottom: 1px solid #3a3024; vertical-align: middle; }
.builder tr.has { background: #352b1d; }
.builder .uname small { display: block; color: var(--muted); font-size: 11px; }
.builder .cost { color: var(--gold-2); text-align: right; }
.builder .cnt { white-space: nowrap; text-align: center; }
.builder .cnt b { display: inline-block; min-width: 22px; text-align: center; }
.pm { padding: 0 8px; font-weight: 700; }
.budget { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 12px; }
.budget .bar { flex: 1; }
.budget .bar i { background: var(--gold); }
.budget.over { color: var(--bad); }
.budget.over .bar i { background: var(--red); }
.row-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 2px 9px; border-radius: 12px; font-size: 12px; }
.chip.on { background: var(--gold); color: #2a1d08; border-color: var(--gold); }
.field-box { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.field-box h3 { margin-top: 0 !important; color: var(--gold-2); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 16px; }
.opts label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.opts label.check { justify-content: flex-start; }
.inline { display: inline-flex; align-items: center; gap: 4px; }
.presets { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.setup-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.grow { flex: 1; }
.err-line { color: var(--bad); font-weight: 600; margin-top: 6px; min-height: 18px; text-align: right; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.codex-body { max-height: 70vh; overflow: auto; }
table.codex { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
table.codex th { text-align: left; color: var(--gold-2); font-weight: 600; border-bottom: 1px solid var(--line); padding: 4px; }
table.codex td { border-bottom: 1px solid #3a3024; padding: 4px; vertical-align: top; }
table.codex td.good { color: var(--good); font-weight: 700; } table.codex td.bad { color: var(--bad); font-weight: 700; }
table.matrix td, table.matrix th { text-align: center; }
table.crt-full td { text-align: center; font-weight: 700; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; border: 1px solid #000; }
.sw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; }
.sw ul { margin: 0 0 8px; padding-left: 18px; }
table.report { width: 100%; border-collapse: collapse; margin: 10px 0; }
table.report th, table.report td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.help p { margin: 4px 0; }
table.keys td:first-child { font-weight: 700; color: var(--gold-2); width: 160px; }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  main { grid-template-columns: 1fr 300px; }
  #left { display: none; }
}
@media (max-width: 760px) {
  #app { height: auto; min-height: 100vh; }
  main { grid-template-columns: 1fr; grid-template-rows: 62vh auto; }
  #right { border-left: 0; border-top: 1px solid var(--line); }
  .setup-grid { grid-template-columns: 1fr; }
  .actions { margin-left: 0; }
}

/* ================= online (hexempires.com): account bar, lobby, rooms, chat ================= */
#acctBar { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-right: 10px; white-space: nowrap; }
#acctBar a { color: var(--gold-2); text-decoration: none; }
#acctBar .crowns-pill { display: inline-flex; gap: 4px; align-items: center; padding: 2px 9px; border: 1px solid #8a6d2f; border-radius: 999px; background: #3a2f1c; color: var(--gold-2); font-weight: 700; }
#acctBar .acct-name { color: var(--ink); }
.tag { display: inline-block; padding: 0 6px; border-radius: 4px; background: #3b3226; color: var(--muted); font-size: 11px; }
.tag.ok { background: #2f4a24; color: #bfe8a8; }
#turnClock { font-size: 12px; padding: 1px 8px; border-radius: 4px; background: #2f3a24; color: #cfe9b8; }
#turnClock.low { background: #5a2420; color: #ffd0c8; }

.lobby { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; min-height: 520px; }
.lobby-main { display: flex; flex-direction: column; min-width: 0; }
.lobby-head h2 { margin-bottom: 2px; }
.ltabs { display: flex; gap: 4px; margin: 10px 0 8px; padding: 4px; background: #241d16; border-radius: 8px; }
.ltabs button { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 8px; border-radius: 6px; font-weight: 600; }
.ltabs button.on { background: #6b5430; color: #fff3d6; }
.rooms-wrap { flex: 1; min-height: 300px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #221c15; }
table.rooms { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rooms th { position: sticky; top: 0; background: #3a2e20; text-align: left; padding: 9px 10px; font-weight: 700; color: var(--gold-2); }
table.rooms td { padding: 9px 10px; border-top: 1px solid #3a2f22; vertical-align: middle; }
table.rooms tr[data-room] { cursor: pointer; }
table.rooms tr[data-room]:hover, table.rooms tr[data-room]:focus { background: #3a2f22; outline: none; }
.seats-cell { white-space: nowrap; text-align: right; }
.seat { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; border-radius: 50%; border: 2px dashed #6b5a44; font: bold 11px var(--serif); vertical-align: middle; }
.seat.on { border: 2px solid #f1e3c0; }
.lobby-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.lobby-btns button { padding: 14px; font-size: 17px; font-weight: 700; border: 0; border-radius: 8px; color: #fff; cursor: pointer; }
.btn-create { background: #2f8a2a; } .btn-create:hover { background: #38a032; }
.btn-join { background: #d9741a; } .btn-join:hover { background: #ec8424; }

.chat-box { display: flex; flex-direction: column; min-height: 0; background: #221c15; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.chat-title { font: bold 13px var(--serif); color: var(--gold-2); margin-bottom: 6px; }
.chat-log { flex: 1; min-height: 140px; max-height: 420px; overflow-y: auto; font-size: 13px; line-height: 1.35; }
.chat-line { padding: 2px 0; word-wrap: break-word; }
.chat-line b { color: var(--gold-2); }
.chat-report { border: 0; background: transparent; color: #8a7a62; font-size: 11px; padding: 0 2px; cursor: pointer; opacity: 0; }
.chat-line:hover .chat-report { opacity: 1; }
.chat-form { display: flex; gap: 6px; margin-top: 6px; }
.chat-form input { flex: 1; min-width: 0; }
#chatPanel .chat-log { max-height: 180px; min-height: 80px; }

.room-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.room-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.9fr) minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.room-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.room-side .chat-box { flex: 1; }
.room-seat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #2a231b; }
.room-seat .seat { width: 30px; height: 30px; font-size: 14px; margin: 0; }
.room-seat.empty { color: var(--muted); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #776a55; vertical-align: middle; }
.dot.on { background: #7cc46a; }

#promptBack { position: fixed; inset: 0; z-index: 70; background: rgba(8,6,4,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
#prompt { background: #2b241b; border: 2px solid #6b5430; border-radius: 10px; padding: 16px 20px; width: min(480px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
#prompt h2 { margin: 0 0 8px; font: bold 20px var(--serif); color: var(--gold-2); }
#prompt label { display: block; margin: 6px 0; }
#prompt input, #prompt select, #prompt textarea { width: 100%; box-sizing: border-box; }
#prompt .room-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
#prompt .room-opts label.check { display: flex; gap: 6px; align-items: center; }
#prompt .room-opts label.check input { width: auto; }
a.btn { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; background: var(--panel-2); }
@media (max-width: 900px) { .lobby { grid-template-columns: 1fr; } .room-grid { grid-template-columns: 1fr; } .room-grid .unit-info { display: none; } }

/* push-to-talk voice */
.voice-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ptt { padding: 6px 12px; font-weight: 700; border-radius: 6px; user-select: none; touch-action: none; }
.ptt.rec { background: #8e2a22; border-color: #e0685c; color: #fff; }
.ptt:disabled { opacity: .55; }
.mic-state.ok { color: var(--good); }
.vmute { margin-left: auto; display: flex; gap: 4px; align-items: center; color: var(--muted); }
.chat-play { border: 0; background: transparent; color: var(--gold-2); cursor: pointer; padding: 0 3px; }