/* ============================================================
   BATALHA NAVAL PREMIADA — Folha de estilos
   Paleta: azul marinho, azul oceano, branco, dourado,
           verde esmeralda e tons de madeira.
   ============================================================ */

/* ---------- Variáveis de tema (edite as cores aqui) ---------- */
:root {
  --navy-900: #05132b;
  --navy-800: #0a1e3d;
  --navy-700: #10305c;
  --ocean-600: #0e4c92;
  --ocean-500: #1565c0;
  --ocean-400: #2e8fd8;
  --white: #f6fbff;
  --gold: #ffd700;
  --gold-soft: #f5c542;
  --gold-deep: #c9950c;
  --emerald: #10b981;
  --emerald-deep: #0a8a61;
  --wood: #8b5a2b;
  --wood-dark: #5e3a17;
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.18);
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.45);
  --radius: 20px;

  /* Dimensões do tabuleiro em modo TV — recalculadas pelo JS
     (fitTvLayout) para caber exatamente no espaço disponível */
  --cell: 56px;        /* lado de cada casa (sempre quadrada) */
  --cell-gap: 8px;     /* espaçamento entre casas */
  --bnp-label: 22px;   /* faixa dos rótulos A-H / 1-8 */
  --wrap-pad: 14px;    /* respiro do cartão de vidro */
  --frame-pad: 10px;   /* respiro da moldura de madeira */
  --tv-scale: 1;       /* fator de escala global (fontes/ícones) */
}

/* ---------- Reset básico ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* TV: nada de rolagem — tudo precisa caber em uma única tela */
html, body { height: 100%; overflow: hidden; }

body {
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  color: var(--white);
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 35%, var(--ocean-600) 100%);
  height: 100vh;
  width: 100vw;
}

/* Utilitário: esconder elementos */
.hidden { display: none !important; }

/* ============================================================
   FUNDO OCEANO ANIMADO
   ============================================================ */
.ocean-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Ondas em SVG na base da tela */
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 140px;
}
.wave path { fill: currentColor; }
.wave-1 { color: rgba(21, 101, 192, 0.55); animation: waveMove 14s linear infinite; }
.wave-2 { color: rgba(14, 76, 146, 0.65);  animation: waveMove 10s linear infinite reverse; bottom: -12px; }
.wave-3 { color: rgba(5, 19, 43, 0.85);    animation: waveMove 18s linear infinite; bottom: -26px; }

@keyframes waveMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Decorações flutuantes (navio, ilha, bússola, âncora, moeda) */
.decor {
  position: absolute;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
  opacity: 0.9;
  animation: floatY 5s ease-in-out infinite;
}
.decor-ship    { font-size: 3.2rem; bottom: 90px; animation: sailAcross 45s linear infinite, floatY 4s ease-in-out infinite; }
.decor-island  { font-size: 3.4rem; right: 4%; bottom: 105px; animation-delay: 1.2s; }
.decor-compass { font-size: 2.2rem; left: 3%; top: 12%; animation: spinSlow 24s linear infinite; }
.decor-anchor  { font-size: 2rem; right: 5%; top: 18%; animation-delay: 0.6s; }
.decor-chest   { font-size: 1.8rem; left: 6%; bottom: 160px; animation-delay: 2s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes sailAcross {
  0%   { left: -8%; }
  100% { left: 105%; }
}
@keyframes spinSlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Partículas brilhantes (criadas via JS) */
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--gold) 60%, transparent 100%);
  animation: sparkleTwinkle ease-in-out infinite;
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 0.9; transform: scale(1.2); }
}

/* ============================================================
   GLASSMORPHISM (cartões de vidro)
   ============================================================ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}

/* ============================================================
   TELAS (containers de tela cheia)
   ============================================================ */
.screen {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: screenFadeIn 0.6s ease both;
}
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TELA DE CARREGAMENTO
   ============================================================ */
.loading-box { text-align: center; }

.loading-anchor {
  font-size: 4.5rem;
  animation: anchorRock 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes anchorRock {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50%      { transform: rotate(12deg) translateY(-8px); }
}

.loading-title {
  margin: 14px 0 22px;
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.45);
}

.loading-bar {
  width: min(320px, 78vw);
  height: 14px;
  margin: 0 auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.loading-fill {
  width: 0%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), #fff3b0);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.7);
  transition: width 0.25s ease;
}
.loading-text {
  margin-top: 14px;
  opacity: 0.85;
  font-style: italic;
}

/* ============================================================
   TELA INICIAL
   ============================================================ */
.start-box {
  text-align: center;
  padding: clamp(28px, 5vw, 56px) clamp(22px, 6vw, 72px);
  max-width: 680px;
  animation: startPop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes startPop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

.start-badge {
  display: inline-block;
  padding: 6px 18px;
  margin-bottom: 18px;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  background: linear-gradient(90deg, var(--wood-dark), var(--wood), var(--wood-dark));
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.start-title {
  font-size: clamp(1.7rem, 5.2vw, 3rem);
  line-height: 1.25;
  letter-spacing: 3px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

.gold-text {
  background: linear-gradient(180deg, #fff3b0, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.35));
}

.anchor-glow {
  display: inline-block;
  animation: floatY 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
}

.start-subtitle {
  margin: 18px 0 8px;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  opacity: 0.92;
}

.start-treasure {
  font-size: 2rem;
  margin: 10px 0 26px;
  letter-spacing: 10px;
  animation: floatY 4s ease-in-out infinite;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  cursor: pointer;
  border: none;
  border-radius: 14px;
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--navy-900);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.btn:hover  { transform: translateY(-3px) scale(1.03); filter: brightness(1.1); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn-big { font-size: 1.25rem; padding: 18px 44px; border-radius: 18px; }
.btn-icon { margin-right: 6px; }

.btn-gold {
  background: linear-gradient(180deg, #ffe98a, var(--gold), var(--gold-deep));
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: goldPulse 2.4s ease-in-out infinite;
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(255, 215, 0, 0.3); }
  50%      { box-shadow: 0 6px 34px rgba(255, 215, 0, 0.65); }
}

.btn-emerald { background: linear-gradient(180deg, #3ddfa5, var(--emerald), var(--emerald-deep)); color: #04281c; }
.btn-blue    { background: linear-gradient(180deg, #64b2ee, var(--ocean-400), var(--ocean-600)); color: #04182e; }
.btn-wood    { background: linear-gradient(180deg, #b97f43, var(--wood), var(--wood-dark)); color: #fff2df; }

/* ============================================================
   TELA DO JOGO EM MODO TV
   ------------------------------------------------------------
   Grade fixa de 3 faixas: cabeçalho (10%), área principal (80%)
   e rodapé (10%). Apenas uma visão fica visível por vez na faixa
   central, então a grade sempre tem exatamente 3 linhas.
   ============================================================ */
#game-screen {
  display: grid;
  grid-template-rows: minmax(0, 10fr) minmax(0, 80fr) minmax(0, 10fr);
  gap: clamp(4px, 0.8vh, 10px);
  padding: clamp(4px, 0.8vh, 10px);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  /* Anula o align/justify herdado de .screen: cada faixa
     deve preencher totalmente sua linha do grid */
  align-items: stretch;
  justify-items: stretch;
}

/* ---------- Cabeçalho da TV ---------- */
.tv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
  padding: 0 clamp(10px, 1.6vw, 24px);
  min-height: 0;
  overflow: hidden;
}
.tv-brand { display: flex; align-items: center; gap: 12px; }
.tv-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 6vh, 54px);
  height: clamp(30px, 6vh, 54px);
  border-radius: 50%;
  font-size: clamp(1rem, 3.4vh, 1.8rem);
  background: radial-gradient(circle at 32% 28%, #ffe98a, var(--gold) 55%, var(--gold-deep));
  color: var(--navy-900);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
  animation: floatY 3.5s ease-in-out infinite;
}
.tv-titles { display: flex; flex-direction: column; line-height: 1.15; }
.tv-title {
  font-size: clamp(0.9rem, 2.8vh, 1.6rem);
  letter-spacing: 2px;
  white-space: nowrap;
}
.tv-tagline {
  font-size: clamp(0.55rem, 1.4vh, 0.8rem);
  opacity: 0.75;
  letter-spacing: 1px;
}
.tv-header .player-badge { font-size: clamp(0.7rem, 1.9vh, 1rem); white-space: nowrap; }
.tv-header .view-nav { flex-wrap: nowrap; }
.tv-header .nav-btn { font-size: clamp(0.6rem, 1.7vh, 0.85rem); padding: clamp(4px, 1vh, 8px) clamp(6px, 1.2vw, 14px); white-space: nowrap; }
.tv-header .mini-btn { font-size: clamp(0.6rem, 1.7vh, 0.85rem); }

/* ---------- Área principal: palco do tabuleiro ---------- */
.board-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  height: 100%;
  width: 100%;
}

/* ---------- Tabuleiro (dimensões vindas das variáveis --cell etc.) ---------- */
.board-wrap { padding: var(--wrap-pad); width: fit-content; }

.board-frame {
  border: 3px solid var(--wood);
  border-radius: 16px;
  padding: var(--frame-pad);
  background:
    linear-gradient(160deg, rgba(139, 90, 43, 0.22), rgba(94, 58, 23, 0.30)),
    rgba(5, 19, 43, 0.35);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.5);
}

.board-body { display: flex; gap: var(--cell-gap); }

/* Rótulos de colunas e linhas */
.col-labels {
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  margin-left: calc(var(--bnp-label) + var(--cell-gap));
  margin-bottom: var(--cell-gap);
  gap: var(--cell-gap);
}
.col-labels .board-label { height: var(--bnp-label); }
.row-labels {
  display: grid;
  grid-template-rows: repeat(8, var(--cell));
  width: var(--bnp-label);
  gap: var(--cell-gap);
}
.board-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--gold-soft);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  font-size: clamp(10px, calc(var(--cell) * 0.3), 22px);
}

/* Grade 8x8 — casas perfeitamente quadradas (lado = var(--cell)) */
.board {
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
  gap: var(--cell-gap);
}

/* ---------- Célula (carta) com flip 3D ---------- */
.cell {
  position: relative;
  aspect-ratio: 1 / 1; /* redundante com a grade, mas garante o quadrado */
  perspective: 600px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Tooltip com a coordenada */
.cell::after {
  content: attr(data-coord);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--navy-900);
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
  white-space: nowrap;
}
.cell:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

.cell-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.1, 0.2, 1.2);
}
.cell.revealed .cell-inner { transform: rotateY(180deg); }

/* Faces da carta */
.cell-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(6px, calc(var(--cell) * 0.18), 14px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: calc(var(--cell) * 0.4); /* ícone acompanha o tamanho da casa */
}

/* Frente (fechada): azul oceano com brilho */
.cell-front {
  background: linear-gradient(155deg, var(--ocean-400), var(--ocean-500) 45%, var(--ocean-600));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
/* Reflexo de brilho que atravessa a carta */
.cell-front::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 55%;
  height: 220%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: cardShine 5.5s ease-in-out infinite;
  animation-delay: var(--shine-delay, 0s);
}
@keyframes cardShine {
  0%, 55%   { left: -80%; }
  75%, 100% { left: 160%; }
}

/* Hover: flutuação, brilho e sombra */
.cell:not(.revealed):hover .cell-inner {
  transform: translateY(-5px) scale(1.07);
}
.cell:not(.revealed):hover .cell-front {
  box-shadow:
    0 0 18px rgba(255, 215, 0, 0.55),
    0 10px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-color: var(--gold);
}

/* Verso (revelada): dourado/esmeralda conforme prêmio */
.cell-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border: 1px solid var(--glass-border);
  flex-direction: column;
  gap: 2px;
}
.cell-back .cell-prize-emoji { font-size: calc(var(--cell) * 0.5); line-height: 1; }

/* Estado usado: escurece e desativa */
.cell.revealed {
  cursor: default;
  pointer-events: none;
}
.cell.revealed .cell-back {
  filter: saturate(0.85);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45);
}

/* Animação de recompensa ao revelar */
.cell.just-revealed .cell-back {
  animation: prizeGlow 1.2s ease;
}
@keyframes prizeGlow {
  0%   { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  35%  { box-shadow: 0 0 30px rgba(255, 215, 0, 0.95); }
  100% { box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45); }
}

/* ============================================================
   RODAPÉ DA TV (resumo ao vivo da campanha)
   ============================================================ */
.tv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.2vw, 20px);
  padding: 0 clamp(10px, 1.6vw, 24px);
  min-height: 0;
  overflow: hidden;
  font-size: clamp(0.65rem, 1.9vh, 1rem);
}
.foot-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foot-item strong { color: var(--gold-soft); font-size: 1.15em; }
.foot-rank { flex: 1; justify-content: center; min-width: 0; }
.foot-rank .foot-medal { margin: 0 2px; }
.foot-rank .foot-pts { color: var(--gold); font-weight: 800; margin-right: 8px; }
#foot-last .foot-prize-name { color: var(--emerald); font-weight: 800; }

/* Tiles de estatística (usados no admin e na tela final) */
.stat {
  text-align: center;
  padding: 10px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-value { display: block; font-size: 1.5rem; font-weight: 800; }
.stat-label { font-size: 0.68rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; }

@keyframes historyIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- Legenda de raridade ---------- */
.rarity-legend { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rarity-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.rarity-stars { color: var(--gold); letter-spacing: 1px; font-size: 0.75rem; min-width: 64px; }

/* ============================================================
   MODAL DO PRÊMIO
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 10, 24, 0.75);
  backdrop-filter: blur(6px);
  animation: overlayFade 0.3s ease both;
}
@keyframes overlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  position: relative;
  text-align: center;
  padding: 36px 30px 30px;
  width: min(440px, 94vw);
  overflow: hidden;
  animation: modalPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  border-color: var(--prize-color, var(--gold));
  box-shadow: 0 0 50px color-mix(in srgb, var(--prize-color, var(--gold)) 45%, transparent),
              var(--shadow-soft);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.6) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Raios dourados girando atrás do prêmio */
.modal-rays {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg 18deg,  rgba(255, 215, 0, 0.16) 18deg 36deg,
    transparent 36deg 54deg, rgba(255, 215, 0, 0.16) 54deg 72deg,
    transparent 72deg 90deg, rgba(255, 215, 0, 0.16) 90deg 108deg,
    transparent 108deg 126deg, rgba(255, 215, 0, 0.16) 126deg 144deg,
    transparent 144deg 162deg, rgba(255, 215, 0, 0.16) 162deg 180deg,
    transparent 180deg 198deg, rgba(255, 215, 0, 0.16) 198deg 216deg,
    transparent 216deg 234deg, rgba(255, 215, 0, 0.16) 234deg 252deg,
    transparent 252deg 270deg, rgba(255, 215, 0, 0.16) 270deg 288deg,
    transparent 288deg 306deg, rgba(255, 215, 0, 0.16) 306deg 324deg,
    transparent 324deg 342deg, rgba(255, 215, 0, 0.16) 342deg 360deg
  );
  border-radius: 50%;
  animation: spinSlow 12s linear infinite;
  pointer-events: none;
}

.modal-congrats {
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
  position: relative;
}
.modal-found { margin-top: 8px; opacity: 0.85; position: relative; }

/* Imagem/emoji do prêmio com zoom */
.prize-image {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 18px auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 28%,
              rgba(255, 255, 255, 0.35),
              color-mix(in srgb, var(--prize-color, var(--gold)) 55%, #ffffff22) 45%,
              color-mix(in srgb, var(--prize-color, var(--gold)) 80%, #000) 100%);
  border: 3px solid var(--prize-color, var(--gold));
  box-shadow: 0 0 34px color-mix(in srgb, var(--prize-color, var(--gold)) 60%, transparent);
  animation: prizeZoom 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) 0.15s both;
}
@keyframes prizeZoom {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.prize-emoji { font-size: 4rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)); }
.prize-img   { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.prize-name {
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--prize-color, var(--gold));
  text-shadow: 0 0 14px color-mix(in srgb, var(--prize-color, var(--gold)) 60%, transparent);
  position: relative;
}
.prize-rarity {
  margin: 6px 0 4px;
  color: var(--gold);
  letter-spacing: 3px;
  font-size: 1.05rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  position: relative;
}
.modal-msg   { opacity: 0.9; margin-bottom: 2px; position: relative; }
.modal-coord { font-size: 0.82rem; opacity: 0.65; margin-bottom: 18px; position: relative; }

#btn-close-modal { position: relative; min-width: 160px; }

/* ============================================================
   TOAST (aviso rápido — ex.: casa aberta em outra máquina)
   ============================================================ */
.toast {
  position: fixed;
  bottom: 13vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  padding: 12px 24px;
  border-radius: 12px;
  background: rgba(5, 19, 43, 0.94);
  border: 1px solid var(--gold);
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 215, 0, 0.25);
  animation: toastIn 0.3s ease both;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
   CONFETES
   ============================================================ */
#confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

/* ============================================================
   NOVAS FUNCIONALIDADES — identificação, navegação, ranking,
   histórico geral, administração, tela final
   ============================================================ */

/* ---------- Campo de texto padrão (nome, senha, filtros) ---------- */
.text-input {
  width: 100%;
  padding: 13px 16px;
  margin-top: 16px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 1.05rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.text-input::placeholder { color: rgba(246, 251, 255, 0.55); }
.text-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}
/* Opções de <select> abrem sobre fundo claro do sistema */
select.text-input option { color: var(--navy-900); }

/* ---------- Aviso de nome obrigatório (modal de identificação) ---------- */
.identify-error {
  margin-top: 10px;
  color: #ffb3b3;
  font-size: 0.9rem;
  animation: shakeX 0.4s ease;
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ---------- Identificação do jogador no cabeçalho ---------- */
.player-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.player-badge strong { color: var(--gold-soft); letter-spacing: 0.5px; }

.mini-btn {
  cursor: pointer;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, transform 0.15s ease;
}
.mini-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-2px); }

.view-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-btn {
  cursor: pointer;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.nav-btn.active {
  background: linear-gradient(180deg, #ffe98a, var(--gold), var(--gold-deep));
  color: var(--navy-900);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
}
.nav-admin { border-color: rgba(255, 215, 0, 0.45); }

/* ---------- Cartões de visão (ranking / histórico / admin) ----------
   Ocupam a faixa central da TV; se o conteúdo passar da altura,
   rolam internamente sem criar barra de rolagem na página. */
.view-card {
  width: min(1180px, 100%);
  height: 100%;
  min-height: 0;
  justify-self: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(14px, 2.4vh, 28px) clamp(18px, 3vw, 32px);
  animation: screenFadeIn 0.45s ease both;
}
.view-card::-webkit-scrollbar { width: 6px; }
.view-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; }
.view-title {
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  letter-spacing: 2px;
  color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}
.view-sub { margin: 6px 0 18px; opacity: 0.8; font-size: 0.92rem; }
.view-empty { text-align: center; padding: 24px; opacity: 0.7; font-style: italic; }

/* ---------- Tabela de ranking ---------- */
.table-scroll { overflow-x: auto; }
.rank-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.rank-table th, .rank-table td {
  padding: 12px 14px;
  text-align: left;
  font-size: 0.92rem;
}
.rank-table th {
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
  border-bottom: 2px solid rgba(255, 215, 0, 0.35);
}
.rank-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
  animation: historyIn 0.4s ease both;
}
.rank-table tbody tr:hover { background: rgba(255, 255, 255, 0.07); }
.rank-table .rank-pos { font-weight: 800; font-size: 1.05rem; }
.rank-table .rank-points { color: var(--gold); font-weight: 800; }
/* Destaque para o pódio */
.rank-table tr.top-1 { background: rgba(255, 215, 0, 0.12); }
.rank-table tr.top-2 { background: rgba(220, 225, 235, 0.09); }
.rank-table tr.top-3 { background: rgba(185, 127, 67, 0.12); }

/* ---------- Filtros do histórico ---------- */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.filter-input { margin-top: 0; flex: 1 1 180px; font-size: 0.9rem; padding: 10px 14px; }
.filters .mini-btn { flex: 0 0 auto; padding: 10px 14px; }

/* ---------- Lista do histórico geral ---------- */
.log-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.log-list::-webkit-scrollbar { width: 6px; }
.log-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; }

.log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.88rem;
  animation: historyIn 0.35s ease both;
}
.log-item .log-name  { font-weight: 800; min-width: 120px; }
.log-item .log-coord { color: var(--gold-soft); font-weight: 800; }
.log-item .log-prize { flex: 1; }
.log-item .log-when  { opacity: 0.65; font-size: 0.78rem; }
.log-item .log-points { color: var(--gold); font-weight: 700; font-size: 0.8rem; }

/* ---------- Painel administrativo ---------- */
.admin-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.admin-subtitle {
  margin: 22px 0 12px;
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--gold-soft);
}

/* Gráfico de barras (prêmios distribuídos) — barras finas, matiz único,
   rótulo direto com o valor no fim de cada barra */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row {
  display: grid;
  grid-template-columns: 170px 1fr 110px;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}
.bar-label { text-align: right; opacity: 0.9; }
.bar-track {
  height: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
  transition: width 0.6s ease;
}
.bar-value { font-weight: 800; color: var(--white); white-space: nowrap; }
.bar-value small { font-weight: 400; opacity: 0.7; }

/* Barra de progresso da campanha */
.progress-chart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.progress-track {
  flex: 1 1 260px;
  height: 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--emerald-deep), var(--emerald));
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
  transition: width 0.6s ease;
}
.progress-label { font-size: 0.85rem; opacity: 0.85; }

.admin-log { max-height: 300px; }

.admin-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ---------- Modais de senha e confirmação ---------- */
.admin-login { width: min(400px, 94vw); }
.modal-btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* ---------- Selo "casa utilizada" ---------- */
.cell.revealed .cell-back::after {
  content: "✔";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: clamp(0.5rem, 1.2vw, 0.72rem);
  font-weight: 900;
  color: var(--emerald);
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
}

/* ---------- Modal do prêmio: pontos ---------- */
.prize-points {
  margin: 2px 0 6px;
  font-weight: 800;
  color: var(--emerald);
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  position: relative;
}

/* Pontuação na legenda de raridade */
.rarity-points { margin-left: auto; color: var(--emerald); font-weight: 700; font-size: 0.75rem; }

/* ---------- Tela final (fim da campanha) ---------- */
.final-modal { width: min(520px, 94vw); }
.final-title {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.6);
  position: relative;
}
.podium {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
  position: relative;
}
.podium-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  font-size: 0.95rem;
  animation: historyIn 0.5s ease both;
}
.podium-row.p1 { border-color: var(--gold);   background: rgba(255, 215, 0, 0.14); animation-delay: 0.1s; }
.podium-row.p2 { border-color: #cfd8e6;       background: rgba(220, 225, 235, 0.1); animation-delay: 0.25s; }
.podium-row.p3 { border-color: var(--wood);   background: rgba(185, 127, 67, 0.14); animation-delay: 0.4s; }
.podium-medal { font-size: 1.5rem; }
.podium-name  { flex: 1; font-weight: 800; text-align: left; }
.podium-points { color: var(--gold); font-weight: 800; }

.final-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
  position: relative;
}

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */
@media (max-width: 980px) {
  .admin-tiles { grid-template-columns: repeat(2, 1fr); }
  .tv-tagline { display: none; }
  .foot-rank { display: none; } /* rodapé prioriza os números essenciais */
}

@media (max-width: 560px) {
  .screen { padding: 14px 8px; }
  .decor-compass, .decor-chest { display: none; }
  .stat-value { font-size: 1.2rem; }
  .modal { padding: 28px 18px 22px; }
  .prize-image { width: 104px; height: 104px; }
  .prize-emoji { font-size: 3.1rem; }
  /* Tooltip atrapalha no toque — esconde no celular */
  .cell::after { display: none; }
  .bar-row { grid-template-columns: 104px 1fr 80px; font-size: 0.75rem; }
  .log-item .log-name { min-width: 100%; }
  .tv-header { flex-wrap: wrap; justify-content: center; }
  #game-screen { grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); }
}

/* Acessibilidade: menos animação para quem preferir */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
}