:root {
  --obsidian: #0b0710;
  --obsidian-2: #14101d;
  --bone: #ecdcc6;
  --blood: #b0223a;
  --ember: #ff5a48;
  --umbra: #2fc6d6;
  --umbra-glow: #8ff2f5;
  --gold: #e8c657;
  --gold-deep: #b8912f;
  --fury: #5be07a;
  --panel-bg: rgba(22, 11, 20, 0.94);
  --panel-border: rgba(232, 198, 87, 0.4);
  /* Board fits the window height when it can (the HUD needs ~330px), never below 460px except on phones. */
  --board-size: min(560px, 96vw, max(460px, calc(100vh - 330px)));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: radial-gradient(ellipse at 50% -8%, #3a1420 0%, #180810 55%, #050206 100%);
  background-attachment: fixed;
  color: var(--bone);
  font-family: "Georgia", "Iowan Old Style", "Songti SC", "Noto Serif SC", "Noto Naskh Arabic", "Geeza Pro", serif;
  overflow-x: hidden;          /* the page scrolls vertically when the HUD is taller than the window */
}

#app {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Overlays ---------- */

.overlay {
  position: fixed;             /* stays over the viewport even when the page is scrolled */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 3, 8, 0.72);
  z-index: 10;
}
.overlay.hidden { display: none; }

.overlay-inner {
  max-width: 720px;
  width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 32px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 30px rgba(216,179,76,0.08) inset;
  text-align: center;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(216,179,76,0.5), 0 0 36px rgba(176,34,58,0.15); }
  50% { text-shadow: 0 0 28px rgba(216,179,76,0.75), 0 0 50px rgba(176,34,58,0.3); }
}

.title {
  font-size: 2.4em;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(216,179,76,0.5);
  animation: titleGlow 3.2s ease-in-out infinite;
}
.subtitle {
  margin: 0 0 18px;
  color: #b9aec2;
  font-style: italic;
}

.fate-seeds {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(47, 198, 214, 0.04);
}
.fate-seeds h2 { margin: 0 0 6px; color: var(--gold); font-size: 1.2em; }
.fate-seeds p { margin: 0 0 12px; font-size: 0.85em; color: #b9aec2; }
.fate-seeds label { display: block; margin-bottom: 6px; font-size: 0.85em; }
#fateCode {
  width: min(100%, 280px);
  padding: 10px;
  color: var(--bone);
  background: var(--obsidian);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  font: 1em monospace;
  letter-spacing: 0.08em;
  text-align: center;
}
#fateCode:focus-visible { outline: 2px solid var(--umbra); outline-offset: 3px; }
#fateCode[aria-invalid="true"] { border-color: var(--ember); }
.fate-status { color: #ffa69b; font-size: 0.85em; }

.legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  text-align: start;
  margin: 0 0 16px;
  font-size: 0.86em;
  line-height: 1.35;
}
.legend-item { display: flex; gap: 10px; align-items: center; min-width: 0; }
.icon-caption {
  display: flex;
  flex: 0 0 62px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.role-name-label {
  display: block;
  width: 100%;
  font-size: 0.68em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
}
.legend-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
}
.legend-glyph {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 2px;
  box-shadow: 0 0 6px currentColor;
}
.glyph-sovereign { background: var(--gold); }
.glyph-reaper { background: #3fd8e0; }
.glyph-juggernaut { background: #e8434f; }
.glyph-trickster { background: #b9f6fb; }
.glyph-wildrider { background: #ff9a7a; }
.glyph-skirmisher { background: #cdb79a; }
.glyph-harrower { background: #4fd6c4; }
.glyph-fury { background: var(--fury); }

.rules-note {
  font-size: 0.8em;
  color: #a89bb8;
  margin: 0 0 18px;
}

.help-link { margin-top: 14px; font-size: 0.82em; }
.help-inner { max-width: 760px; text-align: start; }
.help-inner .title, .help-inner .subtitle { text-align: center; }
.help-body { text-align: start; font-size: 0.9em; line-height: 1.5; color: #d6cadf; }
.help-body h2 {
  color: var(--gold);
  font-size: 1.02em;
  letter-spacing: 0.04em;
  margin: 16px 0 4px;
  border-bottom: 1px solid rgba(232,198,87,0.22);
  padding-bottom: 3px;
}
.help-body p { margin: 4px 0 8px; }
.help-body b { color: #f0e6d2; }
.help-roles { margin: 4px 0 8px; padding-inline-start: 18px; }
.help-roles li { margin-bottom: 4px; }
.help-roles.with-icons { list-style: none; padding-inline-start: 0; }
.help-roles.with-icons li { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-width: 0; }
.role-icon { flex: 0 0 46px; width: 46px; height: 46px; }
.role-text { flex: 1; min-width: 0; }
.hall-record { margin-top: 14px; font-size: 0.76em; color: #b6a9c6; }
.hall-record b { color: var(--gold); }

.ledger { margin: 6px 0 18px; font-size: 0.85em; }
.ledger-head, .ledger-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding: 3px 6px;
}
.ledger-head { color: var(--gold); font-weight: bold; border-bottom: 1px solid rgba(232,198,87,0.28); margin-bottom: 3px; }
.ledger-head span:first-child { color: var(--umbra-glow); text-align: start; }
.ledger-head span:last-child { color: var(--ember); text-align: end; }
.ledger-row span:first-child { text-align: start; color: var(--umbra-glow); }
.ledger-row span:nth-child(2) { text-align: center; color: #c7bcd4; }
.ledger-row span:last-child { text-align: end; color: var(--ember); }
.ledger-row.score { font-size: 1.05em; font-weight: bold; border-bottom: 1px dashed rgba(232,198,87,0.2); padding-bottom: 5px; margin-bottom: 3px; }
.ledger-row.score span:nth-child(2) { color: var(--gold); }
.ledger-best { margin-top: 8px; text-align: center; font-size: 0.9em; color: #c7bcd4; }
.ledger-best b { color: var(--gold); }

.mode-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }

.bot-options { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; font-size: 0.82em; color: #b9aec2; }
.bot-options label { display: flex; align-items: center; gap: 6px; }
.bot-options select {
  font-family: inherit; font-size: 0.95em;
  background: #241a30; color: var(--bone);
  border: 1px solid var(--panel-border); border-radius: 5px; padding: 4px 6px; cursor: pointer;
}

.trials-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; text-align: start; }
.trial-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 12px; width: 100%; }
.trial-card.cleared { border-color: var(--fury); }
.trial-name { font-size: 0.98em; color: var(--gold); }
.trial-card.cleared .trial-name { color: var(--fury); }
.trial-name em { color: #b9aec2; font-style: italic; font-size: 0.85em; }
.trial-blurb { font-size: 0.8em; color: #b9aec2; line-height: 1.3; }

.options-body { text-align: start; margin: 10px 0 16px; font-size: 0.9em; color: #d6cadf; }
.opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.opt-row span { flex: 1; }
.opt-row input[type="range"] { flex: 0 0 160px; accent-color: var(--gold); }
.opt-row input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
.opt-row b { color: var(--gold); min-width: 34px; text-align: end; }
.hazard-option b { color: #ff8a5c; }

.online-status { margin: 8px 0 14px; font-size: 0.92em; color: #d6cadf; min-height: 1.2em; }
.room-code { font-size: 2em; letter-spacing: 0.28em; color: var(--gold); font-weight: bold; text-shadow: 0 0 16px rgba(232,198,87,0.5); }
#onlineSetup { display: flex; gap: 18px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.online-block { flex: 1 1 240px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border: 1px solid var(--panel-border); border-radius: 8px; background: rgba(20,10,20,0.5); }
.online-block .rules-note { margin: 0; }
.online-or { align-self: center; color: #8a7f9a; font-style: italic; }
.online-block-title { margin: 0; font-size: 1em; color: var(--gold); letter-spacing: 0.06em; }
/* Read-only room settings: label / value pairs in two columns (logical properties keep RTL right). */
.online-summary {
  display: grid; grid-template-columns: auto auto; gap: 3px 12px; margin: 0; width: 100%;
  font-size: 0.86em; color: #d6cadf; text-align: start;
}
.online-summary dt { color: #b9aec2; }
.online-summary dd { margin: 0; color: #f0e6f5; font-weight: bold; }
.online-room { max-width: 460px; margin: 0 auto 10px; }
.online-room .mode-row { margin-top: 4px; }
#onlineScreen .hidden, #gameOverScreen .hidden { display: none; }
.online-code-input {
  font-family: inherit; font-size: 1.4em; letter-spacing: 0.2em; text-align: center; text-transform: uppercase;
  width: 160px; padding: 8px; border-radius: 6px; border: 1px solid var(--panel-border);
  background: #241a30; color: var(--gold);
}

.fury-option {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 0.82em;
  color: var(--fury);
  margin: 0 0 14px;
  cursor: pointer;
}
.fury-option input { accent-color: var(--fury); width: 15px; height: 15px; cursor: pointer; }
.fury-option b { color: var(--fury); }
.harrower-option { color: #4fd6c4; }
.harrower-option input { accent-color: #4fd6c4; }
.harrower-option b { color: #4fd6c4; }

.btn {
  font-family: inherit;
  font-size: 0.95em;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  cursor: pointer;
  background: #241a30;
  color: var(--bone);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 12px rgba(216,179,76,0.25); }
.btn:disabled { opacity: 0.35; cursor: default; }

.btn-primary {
  background: linear-gradient(180deg, #3a2748, #241a30);
  border-color: var(--gold);
  color: var(--gold);
}
.btn-ghost { background: transparent; }
.btn-boon {
  font-size: 0.72em;
  padding: 6px 8px;
  display: block;
  width: 100%;
  margin-bottom: 4px;
}
@keyframes boonReadyPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(216,179,76,0.35); border-color: var(--gold); }
  50% { box-shadow: 0 0 14px rgba(216,179,76,0.85); border-color: #ffe9a8; }
}
.btn-boon.ready:not(:disabled) {
  color: var(--gold);
  animation: boonReadyPulse 1.6s ease-in-out infinite;
}

/* ---------- HUD / board ---------- */

#hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}
#hud.hidden { display: none; }

.turn-banner {
  width: var(--board-size);
  flex: 0 0 auto;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.turn-banner.side-light { color: var(--umbra-glow); border-color: rgba(111,184,255,0.5); }
.turn-banner.side-dark { color: var(--ember); border-color: rgba(232,98,44,0.5); }
.turn-banner.note { color: var(--gold); border-color: rgba(232,198,87,0.7); box-shadow: 0 0 12px rgba(232,198,87,0.18); }

/* Banner row: the turn banner plus the planning countdown (shown only while a human's clock runs). */
.banner-row {
  width: var(--board-size);
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.banner-row .turn-banner { width: auto; flex: 1 1 auto; min-width: 0; }
.turn-timer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bone);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.turn-timer.hidden { display: none; }
.turn-timer.side-light { border-color: rgba(111,184,255,0.5); }
.turn-timer.side-dark { border-color: rgba(232,98,44,0.5); }
.turn-timer.warn {
  color: #ff6a5c;
  border-color: rgba(255,106,92,0.85);
  box-shadow: 0 0 12px rgba(255,106,92,0.35);
  animation: timerWarnPulse 1s ease-in-out infinite;
}
@keyframes timerWarnPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .turn-timer.warn { animation: none; } }
.turn-timer.warn.calm { animation: none; }   /* in-game Reduce Motion option */
.timer-note { margin-top: -6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@keyframes boardGlow {
  0%, 100% { box-shadow: 0 0 50px rgba(0,0,0,0.7), 0 0 0 1px var(--panel-border), 0 0 22px rgba(216,179,76,0.08); }
  50% { box-shadow: 0 0 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(216,179,76,0.5), 0 0 34px rgba(216,179,76,0.18); }
}
.board-wrap {
  border-radius: 6px;
  box-shadow: 0 0 50px rgba(0,0,0,0.7), 0 0 0 1px var(--panel-border);
  animation: boardGlow 5s ease-in-out infinite;
  flex: 0 0 auto;
}

.board-area {
  position: relative;
  width: var(--board-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  direction: ltr;
}

.board-actions {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 140px;
}
.board-actions .btn {
  width: 100%;
  min-height: 40px;
  padding: 8px;
  font-size: 0.82em;
  white-space: normal;
}
.board-actions.hidden { display: none; }
[dir="rtl"] .board-actions { direction: rtl; }

#board {
  display: block;
  width: var(--board-size);
  height: var(--board-size);
  border-radius: 6px;
  cursor: pointer;
}

.plan-bar {
  width: var(--board-size);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8em;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.plan-bar.hidden { display: none; }
.crystal { color: #8fd0ff; font-weight: bold; text-shadow: 0 0 8px rgba(143,208,255,0.4); }
.plan-bar .plan-spacer { flex: 1; }
.plan-bar .btn { font-size: 0.76em; padding: 5px 9px; }
.board-actions .btn.ward-on,
.plan-bar .btn.ward-on {
  background: linear-gradient(180deg,#3a2748,#241a30);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 10px rgba(232,198,87,0.4);
}
#planLabel { color: var(--gold); font-weight: bold; }

.stat-row { font-size: 0.78em; color: #c7bcd4; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.side-panel.dark .stat-row { flex-direction: row-reverse; text-align: end; }
.stat-row.muted { color: #8a7f9a; font-size: 0.72em; }
.aegis { color: var(--gold); letter-spacing: 2px; font-size: 1.05em; }
.aegis .spent { color: #4a3f52; }
.aegis .pip.bonus { color: #ffe9a8; text-shadow: 0 0 6px rgba(255,233,168,0.8); }  /* charge from a bonus */
.aegis .spent.bonus { color: #5a4a3a; }
.aegis .aegis-count { font-size: 0.72em; letter-spacing: 0; color: #c7bcd4; margin-inline-start: 2px; }
.royal { font-size: 0.82em; letter-spacing: 1px; }
.royal .king { color: var(--gold); }
.royal .queen { color: #c98bd1; }
.royal .pip-lost { opacity: 0.28; }

.hud-bar {
  display: flex;
  gap: 14px;
  width: var(--board-size);
  align-items: stretch;
  flex: 0 0 auto;
  height: 168px;               /* panels + log keep their room instead of being squeezed to nothing */
}
[dir="rtl"] .hud-bar { direction: ltr; }
[dir="rtl"] .hud-bar > * { direction: rtl; }

.side-panel {
  flex: 0 0 150px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow-y: auto;
}
.side-panel h3 { margin: 0 0 6px; font-size: 0.95em; flex: 0 0 auto; }
.side-panel.light h3 { color: var(--umbra-glow); }
.side-panel.dark h3 { color: var(--ember); text-align: end; }

.ichor-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.side-panel.dark .ichor-row { flex-direction: row-reverse; }
.ichor-bar {
  flex: 1;
  height: 8px;
  background: #1c1420;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
@keyframes ichorShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.ichor-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1c8a98, var(--gold), #1c8a98);
  background-size: 200% 100%;
  animation: ichorShimmer 2.4s linear infinite;
  transition: width 0.15s ease;
  box-shadow: 0 0 8px rgba(232,198,87,0.55);
}
.ichor-num { font-size: 0.75em; color: #b9aec2; min-width: 22px; text-align: center; }

.mid-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.event-log {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.74em;
  line-height: 1.4;
  overflow-y: auto;
  color: #c7bcd4;
}
.event-log div:last-child { color: var(--bone); }
@keyframes logEnter {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
.log-enter { animation: logEnter 0.25s ease-out; }
.mid-buttons { display: flex; gap: 8px; justify-content: center; flex: 0 0 auto; flex-wrap: wrap; }
.mid-buttons .btn { font-size: 0.75em; padding: 5px 10px; }

@media (max-width: 640px) {
  .hud-bar { width: 96vw; flex-wrap: wrap; height: auto; }
  .legend { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .board-actions {
    position: static;
    transform: none;
    width: var(--board-size);
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .board-actions .btn { width: auto; flex: 1 1 calc(50% - 5px); }
}

/* ---------- Choice pop-up (summon, Reaper strike, fresh summon) ---------- */
.choice-overlay { background: rgba(5, 3, 8, 0.5); z-index: 20; }
.choice-inner { max-width: 470px; padding: 18px 20px; text-align: start; display: flex; flex-direction: column; max-height: 88vh; overflow: hidden; }
.choice-title { margin: 0 0 4px; color: var(--gold); font-size: 1.25em; letter-spacing: 0.06em; text-align: center; }
.choice-sub { margin: 0 0 14px; font-size: 0.84em; color: #c7bcd4; line-height: 1.45; text-align: center; }
.choice-sub b { color: #f0e6d2; }
.choice-options { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; overflow-y: auto; min-height: 0; flex: 1 1 auto; padding: 2px; }
.choice-inner .mode-row { flex: 0 0 auto; margin-bottom: 0; }
.choice-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 12px; text-align: start; flex: 0 0 auto; }
.choice-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice-card:disabled .choice-icon { opacity: 0.4; }
.choice-icon { flex: 0 0 44px; width: 44px; height: 44px; }
.choice-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-label { color: var(--gold); font-size: 1em; }
.choice-desc { color: #b9aec2; font-size: 0.8em; line-height: 1.35; }
.choice-badge { flex: 0 0 auto; color: #8fd0ff; font-weight: bold; text-shadow: 0 0 8px rgba(143,208,255,0.4); }

/* ---------- Language support ---------- */
.lang-row { display: flex; justify-content: flex-end; margin: -10px 0 4px; font-size: 0.78em; color: #b9aec2; }
.lang-row label { display: flex; align-items: center; gap: 6px; }
.lang-select {
  font-family: inherit; font-size: 1em;
  background: #241a30; color: var(--bone);
  border: 1px solid var(--panel-border); border-radius: 5px; padding: 3px 6px; cursor: pointer;
}
.opt-row .lang-select { flex: 0 0 auto; }

/* ---------- Piece theme picker ---------- */
.theme-select,
.bot-options select.theme-select {
  font-family: inherit; font-size: 0.95em;
  background: linear-gradient(180deg, #2a1f38, #1a1324); color: var(--bone);
  border: 1px solid var(--panel-border); border-radius: 5px; padding: 4px 8px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(47,198,214,0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.theme-select:hover { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(47,198,214,0.25), 0 0 8px rgba(232,198,87,0.25); }
.theme-select:focus-visible { outline: none; border-color: var(--umbra); box-shadow: 0 0 0 2px rgba(47,198,214,0.45), 0 0 10px rgba(47,198,214,0.3); }
.theme-select option { background: #1a1324; color: var(--bone); }
.opt-row .theme-select { flex: 0 0 auto; min-width: 11em; }
/* Arabic letters must join: tracking breaks the script, so drop all letter-spacing. */
html[lang="ar"] *, html[lang="ar"] *::before { letter-spacing: 0 !important; }
html[lang="ar"] body { line-height: 1.6; }
/* Chinese reads better without the wide Latin tracking on titles. */
html[lang^="zh"] .title, html[lang^="zh"] .help-body h2, html[lang^="zh"] .choice-title { letter-spacing: 0.04em; }
/* Codes and numbers stay left-to-right inside an RTL page. */
[dir="rtl"] .room-code, [dir="rtl"] .online-code-input { direction: ltr; unicode-bidi: isolate; }

/* ---------- Initiative auction (sealed bids before planning) ---------- */
.auction-overlay { z-index: 20; }
.auction-inner { max-width: 470px; }
.auction-inner .hidden { display: none; }
.auction-overlay.side-light .auction-inner { border-color: rgba(111,184,255,0.55); }
.auction-overlay.side-dark .auction-inner { border-color: rgba(232,98,44,0.55); }
.auction-timer { align-self: center; justify-content: center; margin: 0 0 12px; }
.auction-controls { display: flex; flex-direction: column; gap: 10px; }
.auction-options { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.auction-option { width: auto; min-width: 64px; padding: 6px 12px; flex: 0 0 auto; }
.auction-option[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(232,198,87,0.3); }
.auction-option:focus-visible, .auction-custom input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.auction-custom { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9em; color: #c7bcd4; flex-wrap: wrap; }
.auction-custom input {
  width: 7em; padding: 5px 8px; border-radius: 6px; font: inherit; font-variant-numeric: tabular-nums;
  color: #f0e6d2; background: rgba(0,0,0,0.35); border: 1px solid var(--panel-border);
}
.auction-error { min-height: 1.2em; margin: 0; font-size: 0.82em; color: #ff8a7c; text-align: center; }
.auction-error:empty { min-height: 0; }
.auction-reveal { margin: 0 0 12px; text-align: center; }
.auction-reveal p { margin: 4px 0; color: #f0e6d2; }
.auction-reveal p:last-child { color: var(--gold); margin-top: 10px; }
#btnBid:disabled { opacity: 0.8; }   /* read-only: shows the bid sealed in this round's auction */