*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-x: #4ecdc4;
  --color-o: #ff6b6b;
  --color-bg: #1a1a2e;
  --color-surface: #16213e;
  --color-border: #e2e2e2;
  --color-text: #eee;
  --color-muted: #888;
  --color-accent: #4ecdc4;
  --color-stop: #ff6b6b;
  --board-size: min(70vh, 55vw);
}

html, body {
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

#app {
  height: 100vh;
  width: 100%;
  position: relative;
}

/* === SCREENS === */
.screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  overflow: hidden;
}

.screen.active {
  display: flex;
}

/* === LOBBY === */
.lobby-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 3vh 5vw;
  gap: 2vh;
}

.lobby-header {
  text-align: center;
}

.lobby-title-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

.lobby-title {
  font-size: 4vw;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-x), var(--color-o));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lobby-subtitle {
  font-size: 1.5vw;
  color: var(--color-muted);
  margin-top: 0.3vh;
}

.lobby-center {
  display: flex;
  flex: 1;
  gap: 4vw;
  align-items: center;
}

.lobby-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  align-items: center;
}

.lobby-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.room-code-section {
  text-align: center;
}

.room-code-label {
  font-size: 1.3vw;
  color: var(--color-muted);
  margin-bottom: 0.5vh;
}

.room-code {
  font-size: 5vw;
  font-weight: 900;
  letter-spacing: 0.8vw;
  color: var(--color-accent);
}

.section-label {
  font-size: 1.5vw;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 1vh;
  text-align: center;
}

/* Lobby status */
.lobby-status-section {
  text-align: center;
}

.lobby-consensus {
  margin-top: 1vh;
}

.consensus-game {
  font-size: 3vw;
  font-weight: 900;
  color: var(--color-accent);
  animation: pop-in 0.4s ease-out;
}

/* Games showcase */
.tv-games-showcase {
  margin-top: 2vh;
  width: 100%;
}

.tv-game-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6vw;
  justify-items: center;
}

.tv-game-card[hidden] {
  display: none !important;
}

.tv-game-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 1vh 0.6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4vh;
  border: 2px solid transparent;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.tv-game-card.active-game {
  border-color: rgba(78, 205, 196, 0.3);
}

.tv-game-card.soon {
  opacity: 0.4;
}

.tv-game-icon {
  font-size: 2vw;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.tv-game-name {
  font-size: 0.85vw;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}

.tv-soon-badge {
  position: absolute;
  top: 0.4vh;
  right: -1.2vw;
  background: #e6a817;
  color: #1a1a2e;
  font-size: 0.55vw;
  font-weight: 800;
  padding: 0.15vh 1.5vw;
  transform: rotate(35deg);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.btn-start {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: 16px;
  padding: 1.5vh 4vw;
  font-size: 1.5vw;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-start:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-start:not(:disabled):hover {
  transform: scale(1.05);
}

.lobby-error {
  color: var(--color-stop);
  font-size: 1.2vw;
  min-height: 2vh;
  text-align: center;
}

/* QR in lobby */
.qr-section-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
}

.qr-section-lobby img {
  width: 35vw;
  height: 35vw;
  max-width: 45vh;
  max-height: 45vh;
  border-radius: 16px;
}

.qr-hint {
  font-size: 1.2vw;
  color: var(--color-muted);
}

.qr-url {
  font-size: 0.9vw;
  color: var(--color-muted);
  opacity: 0.6;
  word-break: break-all;
  text-align: center;
  max-width: 18vw;
}

/* Player list */
.lobby-players {
  text-align: center;
}

.player-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8vw;
  justify-content: center;
}

.player-tag {
  background: var(--color-surface);
  border: 2px solid rgba(78, 205, 196, 0.2);
  border-radius: 12px;
  padding: 0.8vh 1.5vw;
  font-size: 1.3vw;
  font-weight: 600;
  animation: pop-in 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 0.6vw;
}

.player-tag.has-vote {
  border-color: rgba(78, 205, 196, 0.5);
}

.player-tag-name {
  /* name text */
}

.player-tag-badges {
  display: flex;
  gap: 0.4vw;
  align-items: center;
}

.player-tag-vote {
  font-size: 0.9vw;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(78, 205, 196, 0.15);
  padding: 0.3vh 0.6vw;
  border-radius: 6px;
}

.player-tag-ready {
  font-size: 0.8vw;
  font-weight: 700;
  color: #4caf50;
  background: rgba(76, 175, 80, 0.15);
  padding: 0.3vh 0.6vw;
  border-radius: 6px;
}

.player-tag.is-ready {
  border-color: rgba(76, 175, 80, 0.5);
}

/* === JOGO DA VELHA (TV) === */
.velha-layout {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 5%;
  gap: 2vw;
  align-items: center;
}

.sidebar {
  flex: 0 0 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#scoreboard {
  display: flex;
  flex-direction: column;
  gap: 3vh;
  align-items: center;
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.score-name {
  font-size: 2vw;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  max-width: 10vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-symbol {
  font-size: 5vw;
  font-weight: 900;
  line-height: 1;
}

.score-value {
  font-size: 4vw;
  font-weight: 300;
  opacity: 0.9;
}

.x-score .score-name { color: var(--color-x); }
.o-score .score-name { color: var(--color-o); }
.draw-score .score-symbol { color: var(--color-muted); }

.score-item.active {
  transform: scale(1.15);
}

.score-item.inactive {
  opacity: 0.4;
}

#center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
}

#board-container {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
}

#board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
}

.cell {
  background: var(--color-surface);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cell svg {
  width: 60%;
  height: 60%;
}

.cell .mark-x line {
  stroke: var(--color-x);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-line 0.4s ease-out forwards;
}

.cell .mark-o circle {
  stroke: var(--color-o);
  stroke-width: 10;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: draw-circle 0.5s ease-out forwards;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes draw-circle {
  to { stroke-dashoffset: 0; }
}

#win-line-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
}

#win-line-svg line {
  stroke: #ffd700;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-win 0.6s 0.2s ease-out forwards;
}

@keyframes draw-win {
  to { stroke-dashoffset: 0; }
}

#status {
  font-size: 3.5vw;
  font-weight: 600;
  text-align: center;
  min-height: 5vh;
  transition: opacity 0.3s;
}

#status.turn-x { color: var(--color-x); }
#status.turn-o { color: var(--color-o); }
#status.draw { color: var(--color-muted); }

/* QR mini (in-game) */
#qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
}

.qr-mini {
  width: 8vw;
  height: 8vw;
  min-width: 80px;
  min-height: 80px;
  border-radius: 8px;
}

.room-code-mini {
  font-size: 1.5vw;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.3vw;
}

.cell.just-played {
  animation: pop-in 0.3s ease-out;
}

@keyframes pop-in {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-win {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.cell.winner-cell {
  animation: pulse-win 0.8s ease-in-out infinite;
}

/* === ADEDANHA (TV) === */
.adedanha-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 3vh 4vw;
  gap: 2vh;
}

.adedanha-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vh 2vw;
}

.adedanha-round {
  font-size: 2vw;
  font-weight: 700;
  color: var(--color-muted);
}

.adedanha-letter {
  font-size: 8vw;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  text-shadow: 0 0 30px rgba(78, 205, 196, 0.3);
}

.adedanha-timer {
  font-size: 3vw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  transition: color 0.3s;
}

.adedanha-timer.timer-urgent {
  color: var(--color-stop);
  animation: pulse-timer 0.5s ease-in-out infinite;
}

.adedanha-timer.timer-grace {
  color: #ffd700;
}

@keyframes pulse-timer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.adedanha-categories {
  text-align: center;
  font-size: 1.5vw;
  color: var(--color-muted);
  padding: 1vh 0;
}

.cat-label {
  font-weight: 600;
}

.adedanha-players {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2vh;
  padding: 1vh 2vw;
}

.race-lane {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.race-name {
  font-size: 1.4vw;
  font-weight: 700;
  min-width: 8vw;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.race-track {
  flex: 1;
  height: 2.8vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border-right: 3px solid rgba(255, 255, 255, 0.25);
}

.race-bar {
  height: 100%;
  background: var(--color-accent);
  border-radius: 6px 0 0 6px;
  transition: width 0.5s ease;
  min-width: 0;
}

.race-bar.complete {
  background: #4caf50;
  border-radius: 6px;
}

.race-count {
  font-size: 1.1vw;
  color: var(--color-muted);
  min-width: 3.5vw;
}

.adedanha-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1vw;
  padding: 0 2vw;
}

/* Validation styles */
.validate-subtitle {
  font-size: 1.3vw;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: 1vh;
}

.results-table td.eliminated {
  opacity: 0.3;
  text-decoration: line-through;
  color: var(--color-stop);
}

/* === RESULTS (TV) === */
.results-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 2vh 3vw;
  gap: 1vh;
  align-items: center;
}

.results-title {
  font-size: 2vw;
  font-weight: 700;
  text-align: center;
  margin: 0;
}

.results-table-wrapper {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3vw;
  table-layout: fixed;
}

.results-table th,
.results-table td {
  padding: 0.8vh 0.6vw;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-table th {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 1.5vw;
}

/* Densidade adaptativa — aplicada via JS (renderResults). Mantem todos
   os resultados visiveis sem scroll, mesmo com 12 jogadores e 12 categorias. */
.results-table.players-5 { font-size: 1.05vw; }
.results-table.players-5 th { font-size: 1.2vw; }
.results-table.players-5 th, .results-table.players-5 td { padding: 0.55vh 0.4vw; }

.results-table.players-7 { font-size: 0.9vw; }
.results-table.players-7 th { font-size: 1.05vw; }
.results-table.players-7 th, .results-table.players-7 td { padding: 0.45vh 0.3vw; }
.results-table.players-7 td sup { font-size: 0.6vw; }

.results-table.players-9 { font-size: 0.78vw; }
.results-table.players-9 th { font-size: 0.9vw; }
.results-table.players-9 th, .results-table.players-9 td { padding: 0.35vh 0.25vw; }
.results-table.players-9 td sup { font-size: 0.55vw; }

.results-table.players-12 { font-size: 0.65vw; }
.results-table.players-12 th { font-size: 0.75vw; }
.results-table.players-12 th, .results-table.players-12 td { padding: 0.3vh 0.2vw; }
.results-table.players-12 td sup { font-size: 0.5vw; }

/* Round-scores (ranking abaixo da tabela) — fica menor com mais players */
.results-table.players-7 ~ .results-round-scores .round-rank-item,
.results-round-scores.players-7 .round-rank-item {
  padding: 0.5vh 0.9vw; font-size: 0.95vw;
}
.results-table.players-9 ~ .results-round-scores .round-rank-item,
.results-round-scores.players-9 .round-rank-item {
  padding: 0.4vh 0.8vw; font-size: 0.85vw;
}
.results-table.players-12 ~ .results-round-scores .round-rank-item,
.results-round-scores.players-12 .round-rank-item {
  padding: 0.3vh 0.7vw; font-size: 0.75vw;
}

.cat-cell {
  text-align: left !important;
  font-weight: 600;
  color: var(--color-muted);
}

.results-table td sup {
  font-size: 0.8vw;
  margin-left: 0.2vw;
  opacity: 0.7;
}

.pts-10 { color: var(--color-accent); }
.pts-5 { color: #ffd700; }
.pts-0 { color: var(--color-muted); opacity: 0.6; }

/* Totals rows in results table */
.totals-row td {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  padding-top: 1.2vh;
}

.totals-row .cat-cell {
  color: var(--color-text);
}

.round-total {
  color: var(--color-text) !important;
  opacity: 1 !important;
  font-size: 1.4vw;
}

.cumulative-row td {
  border-top: none;
}

.cumulative-total {
  color: var(--color-accent) !important;
  opacity: 1 !important;
  font-size: 1.5vw;
}

/* Round ranking below table */
.results-round-scores {
  padding: 1vh 0;
  width: 100%;
}

.round-ranking {
  display: flex;
  gap: 1vw;
  justify-content: center;
  flex-wrap: wrap;
}

.round-rank-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  background: var(--color-surface);
  border-radius: 10px;
  padding: 0.8vh 1.2vw;
  font-size: 1.2vw;
}

.round-rank-item.rank-first {
  border: 2px solid var(--color-accent);
}

.round-rank-pos {
  font-weight: 900;
  color: var(--color-muted);
  min-width: 2vw;
}

.rank-first .round-rank-pos {
  color: var(--color-accent);
}

.round-rank-name {
  font-weight: 700;
}

.round-rank-pts {
  color: var(--color-accent);
  font-weight: 600;
}

/* === FINAL (TV) === */
.final-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 5vh 10vw;
  gap: 3vh;
  align-items: center;
  justify-content: center;
}

.final-title {
  font-size: 4vw;
  font-weight: 900;
  background: linear-gradient(135deg, #ffd700, var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.final-ranking {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  width: 100%;
  max-width: 60vw;
  max-height: 80vh;
}

.final-rank-item {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  background: var(--color-surface);
  border-radius: 12px;
  padding: 1.2vh 2vw;
  animation: pop-in 0.4s ease-out;
  font-size: 1.1vw;
  min-width: 0; /* permite truncamento dentro do flex */
}

.final-rank-item .rank-name {
  flex: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.final-rank-item.rank-0 {
  border: 2px solid #ffd700;
  font-size: 1.6vw;
  padding: 1.5vh 2vw;
}

.final-rank-item.rank-1 {
  border: 2px solid #c0c0c0;
  font-size: 1.4vw;
}

.final-rank-item.rank-2 {
  border: 2px solid #cd7f32;
  font-size: 1.25vw;
}

/* 5-7 jogadores: 1 coluna, items menores */
.final-ranking.players-7 { gap: 0.7vh; max-width: 50vw; }
.final-ranking.players-7 .final-rank-item { padding: 0.7vh 1.4vw; font-size: 0.95vw; }
.final-ranking.players-7 .final-rank-item.rank-0 { font-size: 1.3vw; padding: 1.1vh 1.4vw; }
.final-ranking.players-7 .final-rank-item.rank-1 { font-size: 1.1vw; }
.final-ranking.players-7 .final-rank-item.rank-2 { font-size: 1.05vw; }

/* 8+ jogadores: GRID 2 colunas (top 2 ocupam linha inteira). Tudo cabe. */
.final-ranking.players-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6vh 1vw;
  max-width: 75vw;
}
.final-ranking.players-grid .final-rank-item { padding: 0.6vh 1.2vw; font-size: 0.95vw; }
.final-ranking.players-grid .final-rank-item.rank-0,
.final-ranking.players-grid .final-rank-item.rank-1 {
  grid-column: 1 / -1;  /* top 2 ocupam linha inteira pra destacar pódio */
}
.final-ranking.players-grid .final-rank-item.rank-0 { font-size: 1.4vw; padding: 1vh 1.4vw; }
.final-ranking.players-grid .final-rank-item.rank-1 { font-size: 1.15vw; padding: 0.85vh 1.4vw; }
.final-ranking.players-grid .final-rank-item.rank-2 { font-size: 1.0vw; }

.rank-pos {
  font-weight: 900;
  min-width: 3vw;
  text-align: center;
}

.rank-0 .rank-pos { color: #ffd700; }
.rank-1 .rank-pos { color: #c0c0c0; }
.rank-2 .rank-pos { color: #cd7f32; }

.rank-name {
  flex: 1;
  font-weight: 700;
}

.rank-pts {
  font-weight: 600;
  color: var(--color-accent);
}

/* ============================================================================
   MONOPOLY FNAF — TV STYLES
   ============================================================================ */

/* --- FNAF Color Palette --- */
:root {
  --fnaf-purple: #7b4789;
  --fnaf-neon-green: #39ff14;
  --fnaf-gold: #ffd700;
  --group-brown: #8B4513;
  --group-lightblue: #87CEEB;
  --group-pink: #FF69B4;
  --group-orange: #FF8C00;
  --group-red: #DC143C;
  --group-yellow: #FFD700;
  --group-green: #228B22;
  --group-darkblue: #0000CD;
  --monopoly-board-size: min(82vh, 56vw);
}

/* --- Main Layout --- */
.monopoly-layout {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 15vw 1fr 15vw;
  padding: 1vh;
  gap: 0.8vw;
}

/* --- Sidebar Left: Scoreboard --- */
.monopoly-sidebar-left {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
  overflow-y: auto;
  padding: 0.5vh 0;
}

.m-player-card {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 0.6vh 0.5vw;
  border-left: 4px solid #888;
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
  transition: background 0.3s;
}

.m-player-card.active-turn {
  background: #1e2d50;
  box-shadow: 0 0 8px rgba(78, 205, 196, 0.3);
}

.m-player-card.bankrupt {
  opacity: 0.3;
  text-decoration: line-through;
}

.m-player-name {
  font-size: 0.9vw;
  font-weight: 700;
}

.m-player-cash {
  font-size: 0.85vw;
  color: var(--fnaf-gold);
  font-weight: 600;
}

.m-player-props {
  font-size: 0.7vw;
  color: var(--color-muted);
}

.m-player-jail {
  font-size: 0.7vw;
  color: var(--color-stop);
}

/* --- Center: Board --- */
.monopoly-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.monopoly-board-wrapper {
  width: var(--monopoly-board-size);
  height: var(--monopoly-board-size);
  overflow: hidden;
  position: relative;
}

.monopoly-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1.4fr repeat(9, 1fr) 1.4fr;
  grid-template-rows: 1.4fr repeat(9, 1fr) 1.4fr;
  gap: 1px;
  background: #0d1117;
  border: 2px solid #333;
  border-radius: 4px;
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform-origin: center center;
}

.monopoly-board.zoomed {
  transform: scale(var(--zoom-scale, 2.2)) translate(var(--zoom-x, 0), var(--zoom-y, 0));
}

/* --- Board Spaces --- */
.board-space {
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
  padding: 1px;
  font-size: 0.45vw;
  line-height: 1.2;
}

.board-space-go,
.board-space-jail,
.board-space-free-parking,
.board-space-go-to-jail {
  background: #1a2035;
  font-weight: 700;
  justify-content: center;
  font-size: 0.5vw;
}

.board-space-go { color: var(--fnaf-neon-green); }
.board-space-jail { color: #ff8c00; }
.board-space-free-parking { color: var(--fnaf-gold); }
.board-space-go-to-jail { color: var(--color-stop); }

.board-space-card {
  background: #1a1a30;
}

.board-space-tax {
  background: #1a1a30;
  color: var(--color-stop);
}

.board-space-railroad {
  background: #1e1e1e;
}

.board-space-utility {
  background: #1a2520;
}

/* --- Space Color Bar (property group) --- */
.space-color-bar {
  width: 100%;
  height: 4px;
  min-height: 4px;
  flex-shrink: 0;
}

/* --- Space Name & Price --- */
.space-name {
  text-align: center;
  font-size: 0.42vw;
  padding: 0 1px;
  word-break: break-word;
  flex: 1;
  display: flex;
  align-items: center;
}

.space-name.mortgaged {
  opacity: 0.4;
  text-decoration: line-through;
}

.space-price {
  font-size: 0.35vw;
  color: var(--color-muted);
}

/* --- Buildings (houses/hotels) --- */
.space-buildings {
  display: flex;
  gap: 1px;
  font-size: 0.35vw;
}

.house-icon {
  color: var(--fnaf-neon-green);
  font-size: 0.4vw;
}

.hotel-icon {
  color: var(--color-stop);
  font-weight: 900;
  font-size: 0.45vw;
}

/* --- Owner Dot --- */
.space-owner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  right: 2px;
}

/* --- Player Tokens on Board --- */
.space-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.player-token {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* --- Board Center Area --- */
.board-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0d1117;
  gap: 1vh;
}

.center-logo {
  font-size: 1.8vw;
  font-weight: 900;
  text-align: center;
  color: var(--color-text);
  text-shadow: 0 0 10px var(--fnaf-purple), 0 0 20px var(--fnaf-purple);
  letter-spacing: 0.3vw;
}

.center-fnaf {
  font-size: 2.5vw;
  color: var(--fnaf-purple);
  display: block;
  text-shadow: 0 0 15px var(--fnaf-purple), 0 0 30px rgba(123, 71, 137, 0.5);
}

.center-info {
  font-size: 0.9vw;
  text-align: center;
}

/* --- Dice Display --- */
.dice-result {
  display: flex;
  gap: 0.8vw;
  align-items: center;
  justify-content: center;
}

.die {
  width: 3vw;
  height: 3vw;
  background: #fff;
  color: #1a1a2e;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vw;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.doubles-badge {
  color: var(--fnaf-neon-green);
  font-weight: 900;
  font-size: 1vw;
  text-shadow: 0 0 8px var(--fnaf-neon-green);
  animation: pulse-win 1s infinite;
}

/* --- Sidebar Right: Turn Info + Event Log --- */
.monopoly-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 0.5vh 0;
}

.monopoly-turn-info {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 1vh 0.5vw;
  text-align: center;
}

.turn-current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4vw;
}

.turn-token {
  font-size: 1.5vw;
}

.turn-name {
  font-size: 1vw;
  font-weight: 700;
}

.turn-phase {
  font-size: 0.7vw;
  color: var(--color-muted);
  margin-top: 0.3vh;
}

/* --- Event Log --- */
.monopoly-event-log {
  flex: 1;
  background: var(--color-surface);
  border-radius: 8px;
  padding: 0.5vh 0.4vw;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
}

.event-entry {
  font-size: 0.65vw;
  padding: 0.2vh 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--color-muted);
}

.event-entry:first-child {
  color: var(--color-text);
  font-weight: 600;
}

/* --- QR Mini (sidebar right) --- */
.monopoly-qr-mini {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  justify-content: center;
}

/* --- Overlay (cards, trade, etc.) --- */
.monopoly-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.monopoly-card-overlay {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 3vh 3vw;
  text-align: center;
  max-width: 40vw;
  border: 3px solid var(--fnaf-purple);
  box-shadow: 0 0 30px rgba(123, 71, 137, 0.4);
}

.monopoly-card-overlay.minigame {
  border-color: var(--fnaf-neon-green);
  box-shadow: 0 0 30px rgba(57, 255, 20, 0.3);
}

.monopoly-card-overlay.hallucination {
  border-color: var(--fnaf-purple);
  box-shadow: 0 0 30px rgba(123, 71, 137, 0.4);
}

.monopoly-card-overlay h3 {
  font-size: 1.5vw;
  margin-bottom: 1vh;
}

.monopoly-card-overlay.minigame h3 {
  color: var(--fnaf-neon-green);
}

.monopoly-card-overlay.hallucination h3 {
  color: var(--fnaf-purple);
}

.card-text-en {
  font-size: 0.8vw;
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: 0.5vh;
}

.card-text-pt {
  font-size: 1.1vw;
  color: var(--color-text);
  font-weight: 600;
}

/* --- Game Over (Monopoly) --- */
.monopoly-final-ranking .ranking-item {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 0.8vh 1vw;
  background: var(--color-surface);
  border-radius: 8px;
  margin-bottom: 0.5vh;
}

.monopoly-final-ranking .ranking-item.winner {
  background: linear-gradient(135deg, #2d1b4e, #1a2035);
  border: 2px solid var(--fnaf-gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.ranking-pos {
  font-size: 1.5vw;
  font-weight: 900;
  min-width: 3vw;
}

.ranking-token {
  font-size: 1.5vw;
}

.ranking-name {
  flex: 1;
  font-size: 1.2vw;
  font-weight: 600;
}

.ranking-assets {
  font-size: 1.1vw;
  color: var(--fnaf-gold);
  font-weight: 700;
}

/* ============================================================================
   MONOPOLY FNAF — ANIMATIONS (Fase 9)
   ============================================================================ */

/* --- Token Movement Animation --- */
.token-moving {
  animation: token-bounce 0.2s ease-out;
}

@keyframes token-bounce {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-6px) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}

/* --- Dice Rolling Animation --- */
.dice-rolling .die {
  animation: dice-spin 0.6s ease-out;
}

@keyframes dice-spin {
  0% { transform: rotateX(0deg) scale(0.5); opacity: 0.3; }
  50% { transform: rotateX(360deg) scale(1.2); opacity: 0.7; }
  100% { transform: rotateX(720deg) scale(1); opacity: 1; }
}

.dice-landed .die {
  animation: dice-land 0.3s ease-out;
}

@keyframes dice-land {
  0% { transform: scale(1.3); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* --- Property Flash (bought) --- */
.flash-bought {
  animation: flash-bought 1.5s ease-out;
}

@keyframes flash-bought {
  0% { box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.8); }
  30% { box-shadow: 0 0 15px 5px rgba(78, 205, 196, 0.6); }
  100% { box-shadow: none; }
}

/* --- Building Pop-in --- */
.house-icon, .hotel-icon {
  animation: pop-in 0.3s ease-out;
}

/* --- Zoom transition refined --- */
.monopoly-board {
  will-change: transform;
}

.monopoly-board.zoomed {
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.monopoly-board:not(.zoomed) {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* =============================================
   SHOW DO MILHÃO — TV
   ============================================= */

.milhao-tv-layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 3vh 4vw;
  gap: 2vh;
}

.milhao-tv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.milhao-tv-round {
  font-size: 1.8vw;
  color: var(--color-muted);
}

.milhao-tv-prize {
  font-size: 2.5vw;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.milhao-tv-timer {
  font-size: 2.5vw;
  font-weight: 700;
  color: var(--color-accent);
  transition: color 0.3s;
}

.milhao-tv-timer.timer-urgent {
  color: #ff6b6b;
}

.milhao-tv-question {
  font-size: 2.2vw;
  line-height: 1.4;
  text-align: center;
  padding: 2vh 2vw;
  background: var(--color-surface);
  border-radius: 16px;
  border: 2px solid rgba(255, 215, 0, 0.2);
}

.milhao-tv-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5vh 2vw;
}

.milhao-tv-option {
  background: var(--color-surface);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5vh 1.5vw;
  font-size: 1.6vw;
  display: flex;
  align-items: center;
  gap: 1vw;
  transition: all 0.3s;
}

.milhao-tv-option .tv-option-label {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 2vw;
}

.milhao-tv-option.correct {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.2);
}

.milhao-tv-option.wrong {
  opacity: 0.4;
}

.milhao-tv-players {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
  justify-content: center;
}

.milhao-tv-player {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 0.6vh 1vw;
  font-size: 1.2vw;
  display: flex;
  gap: 0.8vw;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.milhao-tv-player.answered { border-color: var(--color-accent); }
.milhao-tv-player.stopped { opacity: 0.5; border-color: #ffd700; }
.milhao-tv-player.eliminated { opacity: 0.3; text-decoration: line-through; }

.milhao-tv-player .player-score {
  color: #ffd700;
  font-weight: 600;
}

.milhao-tv-answer-status {
  text-align: center;
  font-size: 1.4vw;
  color: var(--color-muted);
}

/* Reveal */
.milhao-tv-reveal-title {
  font-size: 2.5vw;
  text-align: center;
  color: #4caf50;
  margin-bottom: 1vh;
}

.milhao-tv-results {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.milhao-tv-result-row {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1vh 1.5vw;
  background: var(--color-surface);
  border-radius: 10px;
  font-size: 1.4vw;
}

.milhao-tv-result-row .result-icon { font-size: 1.8vw; }
.milhao-tv-result-row .result-name { font-weight: 700; min-width: 8vw; }
.milhao-tv-result-row .result-status { color: var(--color-muted); }
.milhao-tv-result-row.correct .result-status { color: #4caf50; }

.milhao-tv-next-status {
  text-align: center;
  font-size: 1.3vw;
  color: var(--color-muted);
  margin-top: 1vh;
}

/* Final */
.milhao-tv-final-title {
  font-size: 3vw;
  text-align: center;
  color: #ffd700;
  margin-bottom: 2vh;
}

.milhao-tv-ranking {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  max-width: 60vw;
  max-height: 80vh;
  margin: 0 auto;
}

.milhao-tv-rank-item {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding: 1.5vh 2vw;
  background: var(--color-surface);
  border-radius: 12px;
  font-size: 1.8vw;
  min-width: 0;
}

.milhao-tv-rank-item .rank-name {
  flex: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 5-7 jogadores: 1 coluna mais compacta */
.milhao-tv-ranking.players-7 { gap: 0.7vh; max-width: 55vw; }
.milhao-tv-ranking.players-7 .milhao-tv-rank-item { padding: 0.8vh 1.5vw; font-size: 1.25vw; }
.milhao-tv-ranking.players-7 .milhao-tv-rank-item .rank-pos { font-size: 1.5vw; }

/* 8+ jogadores: grid 2 colunas — pódio em linha cheia */
.milhao-tv-ranking.players-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6vh 1vw;
  max-width: 75vw;
}
.milhao-tv-ranking.players-grid .milhao-tv-rank-item { padding: 0.6vh 1.2vw; font-size: 1.0vw; }
.milhao-tv-ranking.players-grid .milhao-tv-rank-item.winner,
.milhao-tv-ranking.players-grid .milhao-tv-rank-item:nth-child(2) {
  grid-column: 1 / -1;
}
.milhao-tv-ranking.players-grid .milhao-tv-rank-item.winner { font-size: 1.5vw; padding: 1vh 1.4vw; }
.milhao-tv-ranking.players-grid .milhao-tv-rank-item:nth-child(2) { font-size: 1.2vw; padding: 0.85vh 1.4vw; }
.milhao-tv-ranking.players-grid .milhao-tv-rank-item .rank-pos { font-size: 1.2vw; }

.milhao-tv-rank-item.winner {
  border: 2px solid #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.milhao-tv-rank-item .rank-pos { font-size: 2.2vw; min-width: 3vw; }
.milhao-tv-rank-item .rank-name { flex: 1; font-weight: 700; }
.milhao-tv-rank-item .rank-score { color: #ffd700; font-weight: 700; }
.milhao-tv-rank-item .rank-status { color: var(--color-muted); font-size: 1.2vw; }

/* =============================================
   PONTINHOS — TV
   ============================================= */

.pont-tv-layout {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 2vw;
  padding: 2vh 2vw;
}

.pont-tv-sidebar {
  width: 15vw;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
}

.pont-tv-title {
  font-size: 2.5vw;
  color: var(--color-accent);
}

.pont-tv-turn {
  font-size: 1.4vw;
  color: var(--color-muted);
}

.pont-tv-scores {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.pont-score-item {
  display: flex;
  justify-content: space-between;
  padding: 0.8vh 1vw;
  background: var(--color-surface);
  border-radius: 8px;
  font-size: 1.3vw;
  border-left: 3px solid transparent;
}

.pont-score-item.current {
  background: rgba(78, 205, 196, 0.1);
}

.pont-tv-board {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pont-tv-board canvas {
  max-width: 100%;
  max-height: 100%;
}

.pont-rank-item {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding: 1.5vh 2vw;
  background: var(--color-surface);
  border-radius: 12px;
  font-size: 1.8vw;
}

/* =============================================
   DICIONÁRIO — TV
   ============================================= */

.dic-tv-layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 6vw;
  gap: 2vh;
}

.dic-tv-round {
  font-size: 1.5vw;
  color: var(--color-muted);
}

.dic-tv-word {
  font-size: 5vw;
  font-weight: 700;
  color: #e67e22;
  text-shadow: 0 0 30px rgba(230, 126, 34, 0.3);
}

.dic-tv-hint {
  font-size: 1.8vw;
  color: var(--color-muted);
}

.dic-tv-timer {
  font-size: 3vw;
  font-weight: 700;
  color: var(--color-accent);
}

.dic-tv-timer.timer-urgent { color: #ff6b6b; }

.dic-tv-status {
  font-size: 1.5vw;
  color: var(--color-muted);
}

.dic-tv-defs {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  width: 100%;
  max-width: 60vw;
}

.dic-tv-def {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 1.5vh 2vw;
  display: flex;
  gap: 1vw;
  font-size: 1.5vw;
}

.dic-tv-def-num {
  color: #e67e22;
  font-weight: 700;
  min-width: 2vw;
}

.dic-tv-real-def {
  font-size: 2vw;
  color: #4caf50;
  font-style: italic;
  font-weight: 600;
}

.dic-tv-results {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  width: 100%;
  max-width: 50vw;
}

.dic-tv-result-row {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding: 1vh 1.5vw;
  background: var(--color-surface);
  border-radius: 10px;
  font-size: 1.4vw;
}

.dic-tv-result-name { font-weight: 700; flex: 1; }
.dic-tv-result-pts { color: #ffd700; font-weight: 700; }
.dic-tv-result-total { color: var(--color-muted); }

/* ===== Estado offline (reconectando) — sincronizado com servidor TTL 5min ===== */
.player-tag.offline {
  opacity: 0.45;
  filter: grayscale(0.7);
}

.player-tag-offline {
  background: rgba(231, 76, 60, 0.25);
  color: #ff8a80;
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}