:root {
  color-scheme: dark;
  --bg: #02071d;
  --panel: #071c63;
  --panel-deep: #041447;
  --cell: #0b2c91;
  --cell-hover: #123cad;
  --gold: #f6c84d;
  --gold-soft: #ffe49a;
  --text: #f8f9ff;
  --muted: #aeb9df;
  --line: rgba(255, 255, 255, 0.16);
  --good: #35d07f;
  --bad: #ef5b6b;
  --pending: #6fa8ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, Arial, sans-serif; }
body { min-height: 100vh; min-height: 100dvh; }
button, input { font: inherit; }

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% -10%, rgba(38, 77, 190, .35), transparent 45%),
    linear-gradient(180deg, #061344 0%, var(--bg) 72%);
}

.center-screen { min-height: 75dvh; display: grid; place-content: center; gap: 16px; text-align: center; color: var(--muted); }
.logo-mark { margin: auto; display: grid; place-items: center; width: 90px; height: 90px; border: 2px solid var(--gold); color: var(--gold); font-size: 30px; font-weight: 800; letter-spacing: 3px; transform: rotate(-3deg); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.brand { min-width: 0; }
.brand-title { margin: 0; font-size: clamp(18px, 4vw, 28px); letter-spacing: .04em; text-transform: uppercase; }
.brand-subtitle { margin: 3px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; font-size: 12px; background: rgba(0,0,0,.18); }
.badge.live { color: var(--good); }
.badge.offline { color: var(--bad); }

.stage { display: grid; gap: 10px; }
.panel { border: 1px solid var(--line); background: rgba(4, 20, 71, .78); backdrop-filter: blur(10px); }

.lobby { min-height: 55dvh; display: grid; place-content: center; text-align: center; padding: 28px 18px; }
.lobby h2 { margin: 0 0 10px; color: var(--gold); font-size: clamp(28px, 8vw, 54px); text-transform: uppercase; }
.lobby p { color: var(--muted); }

.board-wrap { overflow-x: auto; padding-bottom: 2px; }
.board {
  display: grid;
  gap: 3px;
  min-width: 600px;
  background: #01061a;
  border: 3px solid #01061a;
}
.board-row { display: grid; grid-template-columns: minmax(170px, 1.55fr) repeat(var(--questions), minmax(72px, 1fr)); gap: 3px; }
.theme-cell, .price-cell { min-height: clamp(58px, 9vw, 88px); display: grid; place-items: center; background: linear-gradient(160deg, var(--cell-hover), var(--panel)); border: 1px solid rgba(255,255,255,.08); }
.theme-cell { justify-items: start; padding: 8px 14px; text-align: left; font-size: clamp(13px, 2vw, 20px); font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.price-cell { color: var(--gold); font-family: Georgia, 'Times New Roman', serif; font-weight: 800; font-size: clamp(20px, 4vw, 38px); text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.price-cell.played { color: transparent; text-shadow: none; background: var(--panel-deep); }
.price-cell.correct { color: var(--good); opacity: .45; }
.price-cell.failed { color: var(--bad); opacity: .45; }
.price-cell.pending { color: var(--pending); opacity: .55; }

.question-stage { min-height: 52dvh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(14px, 3vw, 28px); background: linear-gradient(145deg, #0c3196, #041447 70%); }
.question-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--gold-soft); font-size: 13px; text-transform: uppercase; }
.question-text { align-self: center; text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 5vw, 48px); line-height: 1.22; padding: 24px 2vw; }
.question-options { display: grid; gap: 8px; margin: 0 auto 16px; width: min(720px, 100%); }
.option { border: 1px solid var(--line); padding: 10px 12px; background: rgba(0,0,0,.18); }
.media-host { display: grid; place-items: center; gap: 10px; margin: 0 auto 20px; width: min(900px, 100%); }
.media-host img, .media-host video { display: block; max-width: 100%; max-height: 42dvh; object-fit: contain; border: 1px solid var(--line); }
.media-host audio { width: min(640px, 100%); }

.timer-line { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.timer-value { min-width: 54px; color: var(--gold); font-size: 28px; font-weight: 800; text-align: right; }
.timer-track { height: 9px; background: rgba(255,255,255,.13); overflow: hidden; }
.timer-fill { height: 100%; width: 100%; background: var(--gold); transform-origin: left; transition: width .25s linear; }

.players { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; }
.player { padding: 10px 11px; background: rgba(3, 14, 53, .8); border: 1px solid var(--line); min-width: 0; }
.player.selector { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(246,200,77,.25); }
.player-name { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-score { margin-top: 4px; font-family: Georgia, 'Times New Roman', serif; color: var(--gold); font-size: 25px; font-weight: 800; }
.answer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: 0 0 auto; }

.empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.error { color: var(--bad); }
.final-stage { min-height: 50dvh; padding: 24px; text-align: center; }
.final-stage h2 { color: var(--gold); font-size: clamp(30px, 7vw, 58px); text-transform: uppercase; }
.final-topics { display: grid; gap: 8px; width: min(760px, 100%); margin: 20px auto; }
.final-topic { padding: 13px; border: 1px solid var(--line); background: var(--panel); }
.final-topic.removed { opacity: .2; text-decoration: line-through; }

@media (max-width: 620px) {
  .app-shell { padding-left: 6px; padding-right: 6px; }
  .brand-subtitle { max-width: 190px; }
  .panel { border-left: 0; border-right: 0; }
  .board { min-width: 520px; }
  .board-row { grid-template-columns: minmax(145px, 1.45fr) repeat(var(--questions), minmax(62px, 1fr)); }
}

.question-stage.revealed {
  grid-template-rows: auto 1fr;
}

.answer-reveal {
  width: min(900px, 100%);
  margin: 12px auto 4px;
  padding: clamp(16px, 4vw, 28px);
  border: 2px solid var(--gold);
  background: rgba(1, 7, 29, .72);
  text-align: center;
}

.answer-label {
  color: var(--gold-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.answer-value {
  margin-top: 8px;
  color: var(--gold);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.18;
}

.answer-extra {
  margin-top: 16px;
  color: var(--text);
  font-size: clamp(16px, 3vw, 24px);
  line-height: 1.35;
}

.answer-extra .answer-label {
  margin-bottom: 6px;
}

.answer-result {
  margin-bottom: 14px;
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 700;
}

.answer-result.correct { color: var(--good); }
.answer-result.closed { color: var(--muted); }
.answer-media-host { margin-top: 16px; margin-bottom: 0; }

@media (max-width: 620px) {
  .question-stage.revealed .question-text {
    font-size: clamp(18px, 5vw, 28px);
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .answer-reveal { padding: 14px 10px; }
}

/* Stage 5: role-aware game controls */
.control-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.control-button {
  appearance: none;
  border: 1px solid rgba(246, 200, 77, .65);
  background: rgba(246, 200, 77, .12);
  color: var(--gold-soft);
  padding: 9px 13px;
  cursor: pointer;
  font-weight: 700;
}

.control-button:hover,
.control-button:focus-visible {
  background: rgba(246, 200, 77, .22);
}

.control-button.danger {
  border-color: rgba(239, 91, 107, .7);
  color: #ffb5be;
  background: rgba(239, 91, 107, .12);
}

.action-toast {
  display: none;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid rgba(53, 208, 127, .55);
  background: rgba(53, 208, 127, .10);
  color: #9ff2c6;
}

.action-toast.visible { display: block; }
.action-toast.error {
  border-color: rgba(239, 91, 107, .65);
  background: rgba(239, 91, 107, .11);
  color: #ffb5be;
}

.badge.role-owner { color: var(--gold); }
.badge.role-selector { color: #8dc0ff; }
.badge.role-player { color: var(--good); }
.badge.role-spectator { color: var(--muted); }

button.price-cell {
  width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  padding: 0;
}

.price-cell.selectable {
  cursor: pointer;
  position: relative;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}

.price-cell.selectable:hover,
.price-cell.selectable:focus-visible {
  filter: brightness(1.22);
  background: linear-gradient(160deg, #174dcc, #0a2a8a);
  outline: 2px solid var(--gold);
  outline-offset: -3px;
}

.price-cell.selectable:active { transform: scale(.97); }

.board-hint {
  margin: 8px 2px 0;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.board-hint.active {
  color: var(--gold-soft);
  font-weight: 700;
}

@media (max-width: 620px) {
  .control-bar { display: grid; grid-template-columns: 1fr; }
  .control-button { min-height: 44px; }
  .badges { gap: 4px; }
  .badge { padding: 4px 7px; }
}

/* Stage 5.2: text answers through the original bot game logic */
.answer-composer {
  width: min(900px, 100%);
  margin: 12px auto 0;
  padding: 12px;
  border: 1px solid rgba(141, 192, 255, .45);
  background: rgba(7, 28, 99, .44);
}

.answer-composer.passive {
  text-align: center;
  color: var(--muted);
}

.answer-composer.success {
  border-color: rgba(53, 208, 127, .65);
  background: rgba(53, 208, 127, .10);
}

.answer-composer.error {
  border-color: rgba(239, 91, 107, .65);
  background: rgba(239, 91, 107, .10);
}

.answer-composer-title {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-soft);
  font-size: 14px;
  font-weight: 800;
}

.answer-status {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 14px;
}

.answer-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.answer-input {
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  background: rgba(1, 7, 29, .88);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}

.answer-input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.answer-submit {
  min-height: 44px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #07122f;
  padding: 9px 16px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.answer-submit:disabled,
.answer-input:disabled {
  cursor: wait;
  opacity: .65;
}

@media (max-width: 620px) {
  .answer-composer { padding: 10px 8px; }
  .answer-input-row { grid-template-columns: 1fr; }
  .answer-submit { width: 100%; }
}

/* Stage 5.3a: Main Mini App router and lobby management */
.home-screen {
  min-height: 78dvh;
  display: grid;
  align-content: center;
  gap: 16px;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 22px 10px;
  text-align: center;
}
.home-screen h1 { margin: 0; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.home-muted, .home-hint, .lobby-note { color: var(--muted); }
.home-notice, .home-status {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(7, 28, 99, .44);
}
.home-status:empty { display: none; }
.home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.home-button {
  appearance: none;
  min-height: 44px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.home-button.primary { border-color: #6da8ff; background: rgba(109,168,255,.14); }
.home-button.success { border-color: var(--good); background: rgba(53,208,127,.13); }
.home-button:disabled { opacity: .5; cursor: default; }
.game-list { display: grid; gap: 9px; }
.game-card {
  display: grid;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: rgba(4, 20, 71, .78);
  color: var(--text);
  cursor: pointer;
}
.game-card:hover, .game-card:focus-visible { border-color: var(--gold); }
.game-card-title { font-weight: 800; color: var(--gold-soft); }
.game-card-meta { color: var(--muted); font-size: 13px; }
.lobby-manage { min-height: 50dvh; }
.lobby-players { margin: 14px auto; padding: 0; list-style: none; display: grid; gap: 5px; }
.package-picker { display: grid; gap: 9px; width: min(560px, 100%); margin: 18px auto 0; text-align: left; }
.home-select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  background: #071c63;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
@media (max-width: 620px) {
  .home-actions { display: grid; grid-template-columns: 1fr; }
  .home-button { width: 100%; }
}

/* Stage 5.4: special questions and final controls */
.special-stage {
  min-height: 52dvh;
  display: grid;
  align-content: center;
  gap: 14px;
  text-align: center;
}
.special-stage h2 { margin: 0; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; }
.special-icon { font-size: 44px; line-height: 1; }
.special-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: rgba(6, 26, 91, .66);
  text-align: left;
}
.special-summary strong { color: var(--gold-soft); }
.special-choice-list,
.auction-quick-actions,
.final-bet-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.special-choice-button,
.final-topic.selectable,
.final-bet-steps button {
  appearance: none;
  min-height: 44px;
  border: 1px solid #6da8ff;
  background: rgba(109, 168, 255, .14);
  color: var(--text);
  padding: 10px 15px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.special-choice-button.danger { border-color: var(--bad); background: rgba(255, 103, 126, .12); }
.special-choice-button:disabled,
.final-topic.selectable:disabled,
.final-bet-steps button:disabled { opacity: .52; cursor: wait; }
.special-note { color: var(--muted); margin: 0; }
.auction-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.auction-status-grid > div,
.final-bet-value {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--line);
  background: rgba(4, 20, 71, .74);
}
.auction-status-grid span,
.final-bet-value span { color: var(--muted); font-size: 13px; }
.auction-status-grid strong,
.final-bet-value strong { color: var(--gold-soft); font-size: 20px; }
.final-topic.selectable { width: 100%; text-align: left; }
.final-topic.selectable:hover,
.final-topic.selectable:focus-visible { border-color: var(--gold); }
.final-removed { margin-top: 18px; }
.final-removed h3 { color: var(--muted); font-size: 14px; font-weight: 600; }
.final-bet-controls { display: grid; gap: 12px; margin-top: 14px; }
.final-bet-value { width: min(360px, 100%); margin: 0 auto; }
.final-bet-steps button.success { border-color: var(--good); background: rgba(53, 208, 127, .14); }

@media (max-width: 620px) {
  .auction-status-grid { grid-template-columns: 1fr; }
  .special-summary { display: grid; gap: 5px; text-align: center; }
  .special-choice-list,
  .auction-quick-actions,
  .final-bet-steps { display: grid; grid-template-columns: 1fr; }
  .special-choice-button,
  .final-bet-steps button { width: 100%; }
}