:root {
  --bg: #06111f;
  --panel: #ffffff;
  --ink: #101827;
  --muted: #5f6b7a;
  --border: #172033;
  --gold: #f6c945;
  --blue: #0d5cc7;
  --green: #168a2e;
  --red: #cf2f2f;
  --purple: #6d39b7;
  --orange: #e46d1b;
  --economy: #c99100;
  --square-size: 60px;
  --gap: 2px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(246,201,69,0.18), transparent 28%),
    linear-gradient(135deg, #051022 0%, #081a2f 48%, #101323 100%);
}

.top-banner {
  max-width: 1760px;
  margin: 14px auto 10px;
  padding: 18px 22px;
  color: white;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(13,92,199,0.92), rgba(109,57,183,0.86), rgba(228,109,27,0.88));
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; }

h1 {
  font-size: 34px;
  letter-spacing: 0.04em;
}

.subtitle {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.88);
}

#appLayout {
  max-width: 1760px;
  margin: 0 auto 24px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}

.board-column, .hub-column { min-width: 0; }

.board-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 10px 14px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #101827, #22304a);
  border: 2px solid rgba(255,255,255,0.15);
  border-bottom: 0;
}

.board-toolbar span {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.76);
  margin-top: 2px;
}

.board-size-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.board-size-controls button {
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.board-size-controls button:hover {
  background: rgba(255,255,255,0.22);
}

#board {
  display: grid;
  grid-template-columns: repeat(20, var(--square-size));
  grid-template-rows: repeat(20, var(--square-size));
  gap: var(--gap);
  justify-content: center;
  padding: 12px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 0 0 14px 14px;
  background: #111827;
  box-shadow: 0 18px 35px rgba(0,0,0,0.36);
  overflow: auto;
}

.square {
  position: relative;
  width: var(--square-size);
  height: var(--square-size);
  border: 1px solid rgba(0,0,0,0.45);
  border-radius: 6px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  text-align: center;
  color: #111;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
}

.square-number {
  width: 100%;
  padding: 1px 0;
  font-weight: 900;
  font-size: 9px;
  background: rgba(255,255,255,0.55);
}

.square-label {
  line-height: 8px;
  padding: 2px 1px;
  max-height: 18px;
  overflow: hidden;
}

.token-area {
  position: absolute;
  bottom: 1px;
  left: 1px;
  right: 1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  max-height: 19px;
  overflow: hidden;
}

.token-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  max-width: 24px;
}

.player {
  width: 19px;
  height: 19px;
  background: #ff4fb2;
  border: 2px solid #111827;
  color: #ffffff;
  border-radius: 50%;
  font-weight: 900;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px #ffffff, 0 3px 7px rgba(0,0,0,0.55);
}

.player-token-1 { background: #ef4444; }
.player-token-2 { background: #2563eb; }
.player-token-3 { background: #16a34a; }
.player-token-4 { background: #f97316; }
.player-token-5 { background: #9333ea; }
.player-token-6 { background: #0891b2; }
.player-token-7 { background: #db2777; }
.player-token-8 { background: #ca8a04; }
.player-token-9 { background: #0f766e; }
.player-token-10 { background: #7c2d12; }
.player-token-11 { background: #4b5563; }
.player-token-12 { background: #111827; }

.token-status-icons {
  font-size: 7px;
  min-height: 7px;
  max-width: 30px;
  overflow: hidden;
  white-space: nowrap;
  margin-top: -1px;
  text-shadow: 0 1px 1px white;
}

.hub-column {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 20px);
  overflow: auto;
}

.game-panel {
  background: rgba(255,255,255,0.96);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.38);
}

.setup-card, .hub-header-card, .panel-section, .player-card {
  border: 1px solid rgba(16,24,39,0.12);
  border-radius: 14px;
  background: white;
  padding: 8px;
  margin-bottom: 7px;
}

.hub-header-card {
  color: white;
  background: linear-gradient(135deg, #0d5cc7, #18233c);
  border: 0;
}

#currentTurn {
  font-weight: 900;
  font-size: 14px;
  margin: 8px 0 4px;
}

#turnStatus {
  margin: 0;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  line-height: 1.35;
}

button {
  appearance: none;
  border: 1px solid rgba(16,24,39,0.2);
  border-radius: 10px;
  background: #f5f7fb;
  color: #111827;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 9px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.08s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.primary-button {
  background: linear-gradient(135deg, #16a34a, #0d7b37);
  color: white;
}

.roll-button {
  grid-column: 1 / -1;
  font-size: 16px;
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #1d1300;
}

.main-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

input {
  width: 100%;
  border: 2px solid #d7dce5;
  border-radius: 10px;
  font-size: 18px;
  padding: 9px;
  text-align: center;
  margin: 8px 0 10px;
}

.small-note {
  font-size: 13px;
  color: var(--muted);
}

.name-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

.name-row label { font-weight: 900; }

.button-row {
  display: flex;
  gap: 6px;
}

.quick-stats p {
  margin: 4px 0;
  padding: 6px;
  border-radius: 9px;
  background: #f5f7fb;
  font-size: 11px;
  line-height: 1.22;
  white-space: pre-line;
}

#inventoryItems {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.inventory-item {
  border: 1px solid #dde3ed;
  border-radius: 12px;
  padding: 9px;
  background: linear-gradient(180deg, #fff, #f7f9fd);
  text-align: left;
}

.inventory-item button {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.player-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.player-card {
  text-align: left;
  margin: 0;
  border-left: 6px solid #94a3b8;
  font-size: 12px;
}

.active-player-card {
  border-left-color: #ff4fb2;
  box-shadow: 0 0 0 3px rgba(255,79,178,0.16);
}

.shop-announced-card { background: #fff8da; border-left-color: #f6c945; }
.shop-ready-card { background: #e9fff0; border-left-color: #16a34a; }

.card-top-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.hub-icons {
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.status-line {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.effect-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.effect-pill {
  display: block;
  border: 1px solid #d7dce5;
  border-radius: 9px;
  padding: 4px;
  background: #ffffff;
  font-size: 11px;
  line-height: 1.25;
}

.effect-pill em {
  display: inline-block;
  color: #b45309;
  font-weight: 900;
  font-style: normal;
}

.hidden { display: none !important; }

.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3,7,18,0.78);
  padding: 18px;
  overflow: auto;
}

.shop-window {
  max-width: 980px;
  margin: 0 auto;
  background: #fffdf6;
  border: 3px solid var(--gold);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.48);
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: white;
  padding: 10px 14px;
  background: linear-gradient(90deg, #0f172a, #1d4ed8, #7c3aed);
}

#shopPlayerInfo { margin: 6px 0 0; color: rgba(255,255,255,0.87); }

.close-shop-button {
  background: #fff;
  color: #111827;
}

#shopItems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  max-height: 72vh;
  overflow: auto;
}

.shop-category-header {
  grid-column: 1 / -1;
  color: white;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 12px;
  padding: 9px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}

.shop-category-header.category-movement-dice { background: linear-gradient(90deg, var(--blue), #4f8ce8); }
.shop-category-header.category-boost-items { background: linear-gradient(90deg, var(--green), #53c36b); }
.shop-category-header.category-attack-debuff { background: linear-gradient(90deg, var(--red), #ef7777); }
.shop-category-header.category-defense-counter { background: linear-gradient(90deg, var(--purple), #a275e5); }
.shop-category-header.category-wheel-gamble { background: linear-gradient(90deg, var(--orange), #f4a261); }
.shop-category-header.category-economy-utility { background: linear-gradient(90deg, var(--economy), #f6c945); color: #241800; }

.shop-item {
  position: relative;
  overflow: hidden;
  border: 1px solid #d4d8df;
  border-radius: 15px;
  padding: 8px 8px 42px;
  background: #fff;
  min-height: 116px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

.shop-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: #94a3b8;
}

.shop-item.category-movement-dice::before { background: var(--blue); }
.shop-item.category-boost-items::before { background: var(--green); }
.shop-item.category-attack-debuff::before { background: var(--red); }
.shop-item.category-defense-counter::before { background: var(--purple); }
.shop-item.category-wheel-gamble::before { background: var(--orange); }
.shop-item.category-economy-utility::before { background: var(--economy); }

.shop-item strong {
  display: block;
  font-size: 14px;
  margin-left: 6px;
}

.shop-item .price-line {
  display: inline-block;
  margin: 6px 0 6px 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff4bf;
  border: 1px solid #f2cf57;
  font-weight: 900;
  font-size: 12px;
}

.shop-item .description-line {
  display: block;
  margin-left: 6px;
  color: #374151;
  font-size: 11px;
  line-height: 1.22;
}

.shop-item button {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  width: calc(100% - 24px);
  background: #eef2ff;
}

.Start { background: linear-gradient(135deg, #b8ffbf, #63d471); }
.Finish { background: linear-gradient(135deg, #ffef8a, #f6c945); }
.Normal { background: #f8fafc; }
.Question { background: #ffeaa7; }
.Boost { background: #a7ffb5; }
.Setback { background: #ffb3b3; }
.CoinGain { background: #fff59d; }
.CoinLoss { background: #d7bde2; }
.Tax { background: #fadbd8; }
.Steal { background: #d2b4de; }
.Swap { background: #aed6f1; }
.Head2Head { background: #f9e79f; }
.GroupVote { background: #d6eaf8; }
.SuperPower { background: #abebc6; }
.SuperCurse { background: #d7dbdd; }
.Bounty { background: #f8c471; }
.SafeZone { background: #d5f5e3; }
.Revenge { background: #f5b7b1; }
.Boss { background: linear-gradient(135deg, #ff7675, #c0392b); color: white; }
.Gamble { background: #e8daef; }
.Jail { background: #aeb6bf; }

@media (max-width: 900px) {
  #appLayout {
    grid-template-columns: 1fr;
  }
  .hub-column {
    position: relative;
    top: auto;
    max-height: none;
    order: -1;
  }
  #board {
    justify-content: start;
  }
}

@media (max-width: 760px) {
  :root { --square-size: 38px; }
  h1 { font-size: 26px; }
  #shopItems { grid-template-columns: 1fr; }
  .main-actions { grid-template-columns: 1fr; }
}


.owned-count {
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #111827;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid #cbd5e1;
}

.owned-count.has-owned {
  background: #dcfce7;
  border-color: #22c55e;
  color: #14532d;
}

#squareResult {
  white-space: pre-line;
  text-align: left;
}

@media (max-width: 1100px) {
  #shopItems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.legend-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.legend-actions button {
  font-weight: 900;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
}

.legend-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3,7,18,0.78);
  padding: 18px;
  overflow: auto;
}

.legend-window {
  max-width: 1040px;
  margin: 0 auto;
  background: #fffdf6;
  border: 3px solid var(--gold);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.48);
}

.legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: white;
  padding: 12px 16px;
  background: linear-gradient(90deg, #0f172a, #1d4ed8, #7c3aed);
}

.legend-content {
  padding: 12px;
  max-height: 78vh;
  overflow: auto;
}

.legend-intro {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-weight: 800;
  color: #172554;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.legend-card {
  border: 1px solid #d4d8df;
  border-radius: 14px;
  padding: 10px;
  background: white;
  min-height: 86px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

.legend-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.legend-card p {
  margin: 6px 0 0;
  color: #374151;
  font-size: 12px;
  line-height: 1.25;
}

.shop-legend-section {
  margin-bottom: 14px;
}

.shop-legend-section .shop-category-header {
  margin-bottom: 8px;
}

.shop-legend-card {
  position: relative;
  overflow: hidden;
  padding-left: 16px;
}

.shop-legend-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: #94a3b8;
}

.shop-legend-card.category-movement-dice::before { background: var(--blue); }
.shop-legend-card.category-boost-items::before { background: var(--green); }
.shop-legend-card.category-attack-debuff::before { background: var(--red); }
.shop-legend-card.category-defense-counter::before { background: var(--purple); }
.shop-legend-card.category-wheel-gamble::before { background: var(--orange); }
.shop-legend-card.category-economy-utility::before { background: var(--economy); }

.square-legend-card {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 8px 20px rgba(15,23,42,0.08);
}

@media (max-width: 900px) {
  .legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .legend-grid { grid-template-columns: 1fr; }
  .legend-actions { grid-template-columns: 1fr; }
}

.action-log-panel {
  border: 2px solid #0f172a;
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
}

.action-log {
  white-space: pre-line;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
  color: #111827;
  background: #ffffff;
  border: 2px dashed #f97316;
  border-radius: 12px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
}

.quick-stats h3, .action-log-panel h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
}

/* v42 Mini-game popup shell */
.minigame-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 28, 0.72);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.minigame-window {
  width: min(720px, 95vw);
  max-height: 88vh;
  overflow: auto;
  background: linear-gradient(145deg, #ffffff, #f3f7ff);
  border: 4px solid #10162f;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  padding: 18px;
}

.minigame-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, #2b2dff, #8e44ad);
  color: white;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
}

.minigame-header h2,
.minigame-header p {
  margin: 3px 0;
}

.minigame-body {
  background: #ffffff;
  border: 2px solid #d6def5;
  border-radius: 18px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.minigame-result-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fff8df;
  border: 2px solid #f1c40f;
}

.minigame-result-box h3,
.minigame-result-box p {
  margin: 4px 0;
}

.minigame-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.minigame-actions button {
  min-height: 42px;
  font-weight: 800;
}

.minigame-pending-note {
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: #eef6ff;
  border: 2px dashed #3498db;
  font-weight: 700;
}


/* v43 Typing Race */
.typing-race-card {
  background: linear-gradient(135deg, #fff7d6, #eef7ff);
  border: 2px solid #222;
  border-radius: 18px;
  padding: 16px;
}
.typing-race-card select {
  width: 100%;
  padding: 10px;
  border: 2px solid #222;
  border-radius: 10px;
  margin: 8px 0 12px;
  font-weight: 800;
}
.typing-sentence {
  font-size: 24px;
  font-weight: 900;
  background: #111827;
  color: white;
  border-radius: 14px;
  padding: 16px;
  margin: 12px 0;
  letter-spacing: .3px;
}
.typing-race-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.typing-player-box {
  background: white;
  border: 2px solid #222;
  border-radius: 14px;
  padding: 12px;
}
.typing-player-box textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border: 2px solid #222;
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
}
.typing-status {
  min-height: 24px;
  font-weight: 800;
  color: #166534;
}
.typing-wrong {
  color: #b91c1c;
}
.hidden.manual-minigame-result { display: none; }
@media (max-width: 900px) {
  .typing-race-grid { grid-template-columns: 1fr; }
}

/* v44 question challenge */
.question-card {
  background: linear-gradient(135deg, #fff7d6, #ffffff);
  border: 3px solid #f7b731;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.question-prompt {
  font-size: 1.25rem;
  font-weight: 900;
  color: #2d3436;
  background: white;
  border: 2px solid #f7d774;
  border-radius: 14px;
  padding: 16px;
  margin: 12px 0 16px;
}

.answer-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.answer-choice-button {
  font-size: 1rem;
  font-weight: 800;
  border: 2px solid #2d3436;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.answer-choice-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

.answer-choice-button:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.correct-answer {
  background: #55efc4 !important;
  border-color: #00b894 !important;
}

.wrong-answer {
  background: #fab1a0 !important;
  border-color: #d63031 !important;
}

/* v45 H2H choice styling */
.h2h-choice-card,
.h2h-question-duel {
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 14px;
}

.h2h-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.h2h-duel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.h2h-duel-player {
  background: #f8fbff;
  border: 2px solid #d7e6ff;
  border-radius: 12px;
  padding: 10px;
}

.h2h-duel-player select {
  font-size: 18px;
  padding: 8px;
  border-radius: 10px;
}

/* v47 animated dice display for H2H Guess the Dice */
.dice-roll-animation {
  width: 92px;
  height: 92px;
  margin: 16px auto 12px;
  border-radius: 20px;
  border: 4px solid #111827;
  background: radial-gradient(circle at 30% 25%, #ffffff, #f4f7ff 55%, #dbe7ff);
  color: #111827;
  font-size: 52px;
  font-weight: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 0 0 3px rgba(255,255,255,0.8);
}

.dice-pop {
  animation: dicePop 0.09s ease-in-out;
}

@keyframes dicePop {
  0% { transform: rotate(-8deg) scale(0.92); }
  50% { transform: rotate(8deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

/* v49 wheel system */
.wheel-card {
  display: grid;
  gap: 14px;
}
.big-wheel-display {
  margin: 0 auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 900;
  border: 6px solid rgba(0,0,0,0.25);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22), inset 0 0 30px rgba(255,255,255,0.5);
  background: radial-gradient(circle, #ffffff 0%, #ffe08a 45%, #ff9f43 100%);
}
.wheel-good .big-wheel-display { background: radial-gradient(circle, #ffffff 0%, #b8ffd0 45%, #28c76f 100%); }
.wheel-bad .big-wheel-display { background: radial-gradient(circle, #ffffff 0%, #ffc0c0 45%, #ea5455 100%); }
.wheel-random .big-wheel-display { background: radial-gradient(circle, #ffffff 0%, #d5c7ff 45%, #7367f0 100%); }
.wheel-option-list {
  max-height: 240px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.wheel-option {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
}

/* v51 automatic wheel animations */
.auto-wheel-stack {
  display: grid;
  gap: 12px;
}
.auto-wheel-card {
  border: 2px solid rgba(15, 23, 42, 0.18);
  border-radius: 16px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}
.auto-wheel-topline {
  font-weight: 900;
  font-size: 1rem;
  color: #111827;
}
.auto-wheel-reason {
  font-size: 0.8rem;
  color: #4b5563;
  margin: 2px 0 8px;
}
.auto-wheel-spinner {
  margin: 8px auto;
  width: min(220px, 85%);
  min-height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.65rem;
  font-weight: 900;
  background: linear-gradient(135deg, #fef3c7, #fde68a, #facc15);
  border: 3px solid #92400e;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.5), 0 10px 20px rgba(146,64,14,.25);
  transition: transform .08s ease;
}
.auto-wheel-spinner.wheel-pop {
  transform: scale(1.08) rotate(2deg);
}
.auto-wheel-final {
  padding: 9px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed rgba(15, 23, 42, .25);
  line-height: 1.35;
}
.auto-wheel-summary {
  padding: 10px 12px;
  border-radius: 14px;
  background: #ecfeff;
  border: 2px solid #06b6d4;
  text-align: left;
  line-height: 1.35;
}
.wheel-good .auto-wheel-spinner { background: linear-gradient(135deg, #dcfce7, #86efac, #22c55e); border-color: #166534; }
.wheel-bad .auto-wheel-spinner { background: linear-gradient(135deg, #fee2e2, #fca5a5, #ef4444); border-color: #991b1b; }
.wheel-random .auto-wheel-spinner { background: linear-gradient(135deg, #ede9fe, #c4b5fd, #8b5cf6); border-color: #5b21b6; }


/* v52 normal dice roll animation */
.dice-roll-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 20, 0.58);
  backdrop-filter: blur(3px);
}

.dice-roll-window {
  width: min(420px, 92vw);
  padding: 22px;
  text-align: center;
  color: white;
  border: 3px solid rgba(255,255,255,0.22);
  border-radius: 22px;
  background: linear-gradient(135deg, #0d5cc7, #6d39b7 55%, #e46d1b);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}

.dice-roll-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}

.dice-roll-player {
  margin-top: 3px;
  font-size: 20px;
  font-weight: 900;
}

.dice-roll-dice {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 10px;
  min-height: 86px;
}

.animated-die {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: white;
  color: #111827;
  font-size: 52px;
  box-shadow: inset 0 0 0 3px rgba(17,24,39,0.18), 0 10px 20px rgba(0,0,0,0.28);
  animation: diceWobble 0.18s infinite alternate;
}

.dice-roll-total {
  font-size: 18px;
  font-weight: 900;
}

.dice-roll-note {
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.9;
}

@keyframes diceWobble {
  from { transform: rotate(-8deg) translateY(-2px) scale(0.96); }
  to { transform: rotate(8deg) translateY(3px) scale(1.04); }
}

/* v53 confuse wheel rolls with normal dice */
.dice-roll-window {
  width: min(680px, 94vw);
}

.dice-animation-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  margin-top: 14px;
}

.dice-animation-panel {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  background: rgba(255,255,255,0.13);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.dice-panel-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.95;
}

.confuse-wheel-panel {
  background: linear-gradient(135deg, rgba(88,28,135,0.85), rgba(126,34,206,0.74));
}

.confuse-wheel-spinner {
  width: 82px;
  height: 82px;
  margin: 18px auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fef3c7;
  color: #581c87;
  border: 4px solid #fde68a;
  font-size: 42px;
  font-weight: 1000;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
  animation: confuseSpin 0.28s infinite linear;
}

.confuse-wheel-result {
  min-height: 22px;
  font-size: 16px;
  font-weight: 900;
}

.confuse-forward .confuse-wheel-spinner {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
  animation: none;
}

.confuse-backward .confuse-wheel-spinner {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
  animation: none;
}

@keyframes confuseSpin {
  from { transform: rotate(0deg) scale(0.98); }
  to { transform: rotate(360deg) scale(1.04); }
}

@media (max-width: 720px) {
  .dice-animation-row {
    flex-direction: column;
  }
}

/* v55 Gamble Casino Games */
.gamble-casino-card,
.gamble-play-card {
  background: linear-gradient(135deg, rgba(22, 33, 62, 0.96), rgba(82, 45, 128, 0.92));
  color: #fff;
  border: 2px solid rgba(255, 215, 0, 0.75);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.35);
}
.gamble-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.gamble-game-button {
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 14px;
  min-height: 120px;
  background: linear-gradient(160deg, #272b78, #0f9b8e);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  transition: transform 0.16s ease, filter 0.16s ease;
}
.gamble-game-button:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.12); }
.gamble-game-button strong,
.gamble-game-button small,
.gamble-game-button span { display: block; }
.gamble-icon { font-size: 34px; margin-bottom: 8px; }
.gamble-wager-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  padding: 8px 12px;
  border-radius: 999px;
  margin: 8px 0;
}
.gamble-wager-label input,
.gamble-play-card select {
  border: 0;
  border-radius: 10px;
  padding: 7px 9px;
  font-weight: 800;
}
.number-choice-row,
.gamble-choice-row,
.vault-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
}
.number-pick-button,
.vault-card {
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  color: #1b1b1b;
  background: linear-gradient(135deg, #ffd166, #f77f00);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
.number-pick-button:hover,
.vault-card:hover { transform: translateY(-2px); }
.gamble-dice-animation {
  min-height: 118px;
  margin: 14px auto 4px;
  padding: 12px;
  max-width: 330px;
  border-radius: 18px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gamble-dice-title { font-weight: 900; letter-spacing: 0.5px; }
.gamble-die {
  font-size: 66px;
  line-height: 1;
  margin: 6px 0;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.45));
}
.gamble-die.gambling { animation: gambleDiceShake 0.12s infinite alternate; }
.gamble-die.final { animation: gambleDicePop 0.45s ease-out; }
.gamble-dice-sub { font-weight: 800; color: #ffd166; }
@keyframes gambleDiceShake {
  from { transform: rotate(-10deg) scale(0.96); }
  to { transform: rotate(10deg) scale(1.04); }
}
@keyframes gambleDicePop {
  0% { transform: scale(0.6) rotate(-20deg); }
  70% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.ladder-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.ladder-step {
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  font-weight: 800;
}
.ladder-step.cleared { background: linear-gradient(135deg, #06d6a0, #118ab2); }
.ladder-step.current { outline: 3px solid #ffd166; }
.vault-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 145px;
}
.small-vault { background: linear-gradient(135deg, #9ef01a, #38b000); }
.medium-vault { background: linear-gradient(135deg, #ffd166, #f77f00); }
.big-vault { background: linear-gradient(135deg, #ff6b6b, #9d0208); color: #fff; }
@media (max-width: 760px) {
  .gamble-game-grid { grid-template-columns: 1fr; }
  .ladder-visual { grid-template-columns: repeat(2, 1fr); }
}


/* v64 Debug / Test Panel */
.debug-panel {
  display: grid;
  gap: 14px;
}
.debug-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.debug-controls label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}
.debug-controls input, .debug-controls select {
  padding: 9px;
  border: 2px solid rgba(0,0,0,.2);
  border-radius: 10px;
}
.debug-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.65);
}
.debug-button-grid button {
  font-size: 12px;
  padding: 8px 6px;
}
.debug-note {
  background: #fff8d8;
  border: 2px solid #f2d36b;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
}


/* v65 settings/save polish */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.settings-grid label { background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 10px; font-weight: 700; }
.settings-grid input[type="number"] { width: 100%; margin-top: 6px; padding: 8px; border-radius: 8px; border: 1px solid #999; }
.setting-check { display: flex; align-items: center; gap: 8px; }
.setting-check input { width: auto; }

/* v66 save/load visibility fixes */
.setup-save-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}
.save-status {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 0.85rem;
}
.save-status.good { background: #e9fbe9; border-color: #8bd58b; }
.save-status.bad { background: #ffecec; border-color: #ff9a9a; }
.save-status.warn { background: #fff7d6; border-color: #ffd66b; }


/* ===== v67 Polish Layer ===== */
.hub-column { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; }
.game-panel { border: 2px solid rgba(246,201,69,0.45); }
.hub-header-card, .panel-section { box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
.quick-stats p { margin: 4px 0; font-size: 12px; }
.panel-section h3 { font-size: 15px; }
.inventory-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.inventory-item span { grid-column: 1 / -1; }
.inventory-item button { grid-column: 2; grid-row: 1; padding: 5px 9px; }
.compact-effects-panel { background: linear-gradient(180deg, #ffffff, #f8fbff); }
#activeEffectsList { display: flex; flex-direction: column; gap: 6px; }
.empty-note { color: var(--muted); font-size: 12px; }
.effect-detail-card { border: 1px solid #d7dce5; border-left: 5px solid #0d5cc7; border-radius: 10px; background: white; padding: 7px; font-size: 12px; line-height: 1.25; }
.effect-detail-card strong { display: block; margin-bottom: 2px; }
.effect-detail-card span { display: block; color: #334155; }
.effect-detail-card small { display: block; margin-top: 3px; color: #8a4b00; font-weight: 800; }
.hostile-effect { border-left-color: #cf2f2f; background: #fff7f7; }
.quick-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.quick-guide-card { border: 1px solid #d7dce5; border-left: 6px solid var(--gold); border-radius: 12px; padding: 12px; background: #fff; }
.quick-guide-card strong { display: block; margin-bottom: 5px; }
.quick-guide-card span { color: #475569; line-height: 1.35; }
.save-status.good { color: #0f7a2e; font-weight: 900; }
.save-status.bad { color: #b91c1c; font-weight: 900; }
.save-status.warn { color: #9a5b00; font-weight: 900; }
@media (max-width: 1180px) { .hub-column { position: static; max-height: none; overflow: visible; } }

/* ===== v68 Winner / End Game Screen ===== */
.winner-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at top, rgba(255, 215, 0, 0.30), rgba(0, 0, 0, 0.78));
  backdrop-filter: blur(5px);
}

.winner-window {
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 28px;
  padding: 28px;
  background: linear-gradient(135deg, #fff7c2, #ffffff 40%, #e8f0ff);
  border: 5px solid #111827;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  text-align: center;
}

.winner-burst {
  font-size: 72px;
  animation: winnerPulse 1.2s infinite alternate;
}

@keyframes winnerPulse {
  from { transform: scale(1) rotate(-4deg); }
  to { transform: scale(1.12) rotate(4deg); }
}

#winnerTitle {
  margin: 4px 0 8px;
  font-size: clamp(34px, 6vw, 68px);
  color: #111827;
  text-shadow: 3px 3px 0 #ffd54f;
}

.winner-subtitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

.winner-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.winner-stat-card {
  background: rgba(255,255,255,0.82);
  border: 2px solid #111827;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 5px 0 #111827;
}

.winner-stat-card strong {
  display: block;
  font-size: 22px;
  margin-top: 4px;
}

.winner-section {
  margin-top: 20px;
  text-align: left;
  background: rgba(255,255,255,0.65);
  border: 2px solid #111827;
  border-radius: 18px;
  padding: 14px;
}

.final-standings-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 8px 0;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(17,24,39,0.25);
  font-weight: 700;
}

.final-standings-row:first-child {
  background: linear-gradient(90deg, #fff176, #fffde7);
  border: 2px solid #111827;
}

.winner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

/* ===== v69 Sound + Extra Animation Polish ===== */
.screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: chaosFlash 0.65s ease-out forwards;
}
.flash-good { background: radial-gradient(circle, rgba(44, 255, 146, 0.28), transparent 55%); }
.flash-bad { background: radial-gradient(circle, rgba(255, 75, 75, 0.28), transparent 55%); }
.flash-win { background: radial-gradient(circle, rgba(255, 215, 0, 0.40), transparent 60%); }
.flash-neutral { background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 55%); }
@keyframes chaosFlash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
.animated-die, .big-wheel-display, .auto-wheel-spinner, #diceRollAnimation {
  will-change: transform, filter;
}
.dice-roll-window, .shop-window, .mini-game-window, .winner-window {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255,255,255,0.15);
}


.manual-section, .tutorial-step {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 14px;
  margin: 10px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.manual-section h3 { margin: 0 0 6px; }
.manual-section p, .manual-section li, .tutorial-step p { line-height: 1.45; }
.tutorial-steps { display: grid; gap: 10px; }

/* v73 Playtest / Bug Report Helper */
.playtest-card ul {
  margin: 10px 0 0 20px;
  padding: 0;
}
.playtest-card li {
  margin: 8px 0;
  line-height: 1.35;
}
.bug-report-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 14px;
}
.bug-label {
  display: block;
  margin: 12px 0 6px;
  font-weight: 900;
}
.bug-input,
.bug-textarea,
.bug-preview {
  width: 100%;
  border: 2px solid #172033;
  border-radius: 12px;
  padding: 10px;
  font: inherit;
  background: #fff;
  color: #101827;
}
.bug-textarea {
  min-height: 130px;
  resize: vertical;
}
.bug-preview {
  min-height: 420px;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.bug-buttons {
  margin-top: 12px;
}
@media (max-width: 900px) {
  .bug-report-panel {
    grid-template-columns: 1fr;
  }
}


/* v74 friend/host build polish */
.host-note {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 10px;
  line-height: 1.35;
}
.setup-save-actions button {
  white-space: normal;
}


/* ===== v75 Online Room UI ===== */
.online-setup-box {
  margin-top: 14px;
  padding: 12px;
  border: 2px solid rgba(37, 99, 235, 0.35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(240, 249, 255, 0.95));
}
.online-setup-box h3 { margin: 0 0 6px; }
.online-setup-box input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #93c5fd;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.online-room-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 14px;
  color: #ecfeff;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.20);
  font-weight: 900;
}
.online-room-banner.offline {
  background: linear-gradient(135deg, #64748b, #334155);
}

/* v76 online player control panel */
.online-identity-panel {
  border: 2px solid rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(99, 102, 241, 0.09));
}
.online-identity-panel h3 { margin-top: 0; }
.online-identity-row { align-items: center; gap: 8px; }
.online-identity-row select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.25);
  font-weight: 800;
  max-width: 100%;
}
.online-host-row button { flex: 1; }

/* v82 compact hub tools */
.compact-tools-launcher {
  display: block !important;
  padding: 10px !important;
}
.compact-tools-launcher .tools-menu-button {
  width: 100%;
  font-size: 0.95rem;
  padding: 10px 12px;
}
.compact-tools-note {
  margin: 8px 0 0;
  line-height: 1.25;
}
.tool-menu-grid-v82 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.tool-menu-grid-v82 button {
  padding: 12px 10px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  font-weight: 800;
}
.tool-menu-grid-v82 button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* v83 purchase / activity announcement toast */
.game-announcement-toast-v83 {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(-18px) scale(0.96);
  opacity: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(520px, calc(100vw - 30px));
  max-width: 720px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.45);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  background: linear-gradient(135deg, #1c2b5a, #673ab7, #d84315);
  color: white;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.game-announcement-toast-v83.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.game-announcement-toast-v83.hidden { display: none; }
.game-announcement-toast-v83.success { background: linear-gradient(135deg, #0f7b3f, #15a85f, #ffd54f); color: #061d10; }
.game-announcement-toast-v83.warn { background: linear-gradient(135deg, #ffb300, #ef6c00, #6d2500); color: white; }
.game-announcement-toast-v83.shop { background: linear-gradient(135deg, #0d47a1, #1565c0, #00acc1); color: white; }
.announcement-icon-v83 { font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.25)); }
.announcement-text-v83 { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.announcement-text-v83 strong { font-size: 18px; letter-spacing: .3px; }

/* v84 online player locking and in-game naming */
.online-name-row-v84 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
}
.online-name-row-v84 input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.65);
}
.player-lock-list-v84 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}
.player-lock-pill-v84 {
  font-size: 0.72rem;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(255,255,255,0.75);
}
.player-lock-pill-v84.available { background: #ecfdf5; border-color: #86efac; color: #166534; }
.player-lock-pill-v84.mine { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; font-weight: 800; }
.player-lock-pill-v84.locked { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* ===== v86 Online Lobby + Compact Hub ===== */
.lobby-card-v86 {
  background: linear-gradient(135deg, #eef7ff, #fff7db);
  border: 2px solid #2f80ed;
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.lobby-code-v86 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  background: #0b2d57;
  color: white;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  margin: 8px 0 12px;
}
.lobby-list-v86 {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.lobby-client-v86 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #cfe0ff;
  background: white;
  border-radius: 10px;
  font-size: 13px;
}
.lobby-client-v86 strong { color: #0b2d57; }
.lobby-client-v86 .tag { font-size: 11px; background: #e8f2ff; padding: 3px 7px; border-radius: 999px; }
.online-assignment-card-v86 {
  border: 2px solid #1c7c54;
  background: linear-gradient(135deg, #eafff2, #f7fff9);
  border-radius: 14px;
  padding: 10px;
}
.online-assignment-card-v86 h3 { margin: 0 0 6px; }
.online-assignment-badge-v86 {
  display: inline-block;
  font-weight: 900;
  color: white;
  background: #1c7c54;
  border-radius: 999px;
  padding: 6px 10px;
  margin: 4px 0 8px;
}
.online-name-row-v86 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.online-name-row-v86 input { min-width: 0; }
.hub-collapse-row-v86 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
body.hub-compact-v86 .action-log-panel,
body.hub-compact-v86 #inventoryPanel,
body.hub-compact-v86 #activeEffectsPanel,
body.hub-compact-v86 #playerList {
  display: none !important;
}
body.hub-compact-v86 .hub-column { max-width: 310px; }
body.hub-compact-v86 .game-panel { padding: 12px; }
body.hub-compact-v86 .hub-header-card { margin-bottom: 8px; }
body.hub-compact-v86 .quick-stats { font-size: 12px; }
.compact-tools-note-v86 { font-size: 12px; opacity: .8; margin-top: 6px; }
@media (max-width: 1200px) {
  .hub-column { max-width: 340px; }
}


/* =========================
   v87 compact hub cleanup
   ========================= */
.compact-tools-launcher {
  background: linear-gradient(135deg, #0f172a, #1e3a8a) !important;
  color: #ffffff !important;
  border: 2px solid rgba(96, 165, 250, 0.55) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}
.compact-tools-launcher .tools-menu-button {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
  border: none !important;
}
.compact-tools-note {
  color: #dbeafe !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 10px;
  padding: 8px 10px;
}
.hub-view-controls-v87 {
  background: linear-gradient(135deg, #f8fafc, #e0f2fe);
  border: 2px solid rgba(14, 165, 233, 0.28);
}
.hub-view-title-v87 {
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
}
.hub-view-grid-v87 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.hub-view-grid-v87 button {
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .16);
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
}
.hub-view-grid-v87 button:hover { transform: translateY(-1px); }
body.hide-online-seat-v87 #onlineIdentityPanelV76 { display: none !important; }
body.hide-action-log-v87 .action-log-panel { display: none !important; }
body.hide-inventory-v87 #inventoryPanel { display: none !important; }
body.hide-effects-v87 #activeEffectsPanel { display: none !important; }
body.hide-player-list-v87 #playerList { display: none !important; }

/* v87: older Focus button should not make the right column skinny anymore. */
body.hub-compact-v86 .hub-column { max-width: var(--hub-width, 420px) !important; }
body.hub-compact-v86 .game-panel { padding: inherit; }

/* v88 lobby naming cleanup */
.lobby-name-box-v88 {
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(236,244,255,0.92));
  border: 2px solid rgba(59,130,246,0.35);
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
  color: #0f172a;
}
.lobby-name-row-v88 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.lobby-name-row-v88 input {
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid rgba(15,23,42,0.18);
  border-radius: 10px;
  font-weight: 800;
}
.compact-seat-v88 h3 { margin-bottom: 6px; }
.compact-seat-v88 .small-note { margin: 6px 0; }
.compact-seat-v88 .online-assignment-badge-v86 { margin: 6px 0 8px; }

/* v89: allow Tools / Legends / Settings block to be minimized from Hub View */
body.hide-tools-v89 .legend-actions,
body.hide-tools-v89 .compact-tools-launcher {
  display: none !important;
}
.hub-view-grid-v87 .tools-toggle-v89 {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: rgba(249, 115, 22, .35);
}

/* v93 stacked announcements */
.game-announcement-stack-v93 {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(680px, calc(100vw - 24px));
  pointer-events: none;
}
.game-announcement-stack-v93 .game-announcement-toast-v83 {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: translateY(-8px);
  width: 100%;
  margin: 0 auto;
}
.game-announcement-stack-v93 .game-announcement-toast-v83.show {
  transform: translateY(0);
}

/* v96 Coin Flip and Hub Cleanup */
.coin-flip-stage-v96 {
  display: grid;
  place-items: center;
  gap: 8px;
  margin: 14px auto;
}
.coin-flip-coin-v96 {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 46px;
  background: radial-gradient(circle at 30% 30%, #fff8c5, #facc15 55%, #b45309 100%);
  border: 4px solid rgba(120, 53, 15, .55);
  box-shadow: 0 12px 30px rgba(120, 53, 15, .25);
}
.coin-flip-coin-v96.spinning {
  animation: coinFlipSpinV96 .16s linear infinite;
}
@keyframes coinFlipSpinV96 {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(180deg) scale(1.08); }
  100% { transform: rotateY(360deg) scale(1); }
}
.coin-flip-label-v96 {
  font-weight: 900;
  color: #7c2d12;
  background: #fff7ed;
  border: 2px solid rgba(249, 115, 22, .35);
  border-radius: 999px;
  padding: 6px 12px;
}
#hubToolsToggleV96 {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #111827, #374151) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.2) !important;
}
#playerList {
  margin-top: 8px;
}
#inventoryPanel {
  margin-top: 8px;
}

/* v98: full hub hide for extra board space */
body.hub-hidden-v98 #appLayout {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 1960px;
}
body.hub-hidden-v98 .hub-column {
  display: none !important;
}
body.hub-hidden-v98 .board-column {
  width: 100%;
}
body.hub-hidden-v98 #board {
  margin-left: auto;
  margin-right: auto;
}
.hub-main-toggle-v98,
.show-hub-floating-v98 {
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: 7px 10px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #facc15, #fb923c);
  color: #111827;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.hub-main-toggle-v98:hover,
.show-hub-floating-v98:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.show-hub-floating-v98 {
  position: fixed;
  right: 16px;
  top: 86px;
  z-index: 99998;
  display: none;
}
body.hub-hidden-v98 .show-hub-floating-v98 {
  display: block;
}
body.hub-hidden-v98 .hub-main-toggle-v98 {
  display: none;
}
@media (max-width: 1180px) {
  .show-hub-floating-v98 { top: 72px; right: 10px; }
}

/* v99: hide the Hub View controls panel itself */
#hubViewControlsV87.hub-view-panel-hidden-v99 {
  display: none !important;
}

.hub-view-close-row-v99 {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.hub-view-close-row-v99 button,
.show-hub-view-panel-v99 {
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.hub-view-close-row-v99 button {
  width: 100%;
  background: #172554;
  color: white;
}

.show-hub-view-panel-v99 {
  margin-top: 12px;
  width: 100%;
  background: rgba(255,255,255,0.95);
  color: #111827;
}

.show-hub-view-panel-v99.hidden {
  display: none !important;
}

/* v108 Test Lab */
.v108-testlab { border-left: 5px solid #7c3aed; }
.debug-output-v108 {
  white-space: pre-wrap;
  background: #101827;
  color: #e5f2ff;
  padding: 12px;
  border-radius: 12px;
  max-height: 260px;
  overflow: auto;
  font-size: 0.92rem;
  line-height: 1.45;
}
#testLabButtonV108, #testLabLaunchButtonV108 {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: white;
  border: none;
}


/* v114: Manual mini-game result controls are permanently disabled. */
.manual-minigame-result,
#miniGamePanel .manual-minigame-result {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}