/* Packet Wars — custom.css (limpo / consolidado)
   - Remove duplicações (HUD label, logos, watermark)
   - Mantém estilos do quiz, overlays, responsivo e tema dos tabuleiros
   - Inclui knobs para: opacidade/tamanho do logo do jogo e posição do cabeçalho do time
*/

/* ===== Toasts (fallback) ===== */
.toast-container{position:fixed;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;z-index:2000}
.toast{background:#0f1b2f;color:#eaf2ff;border:1px solid #284062;border-radius:10px;padding:8px 12px;box-shadow:0 6px 18px #0006;font-weight:700;transition:opacity .3s ease, transform .3s ease}
.toast-blue{border-color:#00E5FF}
.toast-red{border-color:#FF4D4F}

/* ===== Viewer HUD styling (chips) ===== */
.hud-bar{display:flex;gap:10px;align-items:center;margin:12px 0;flex-wrap:wrap}
.badge-side{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-weight:800;border:1px solid #284062;background:#0f1b2f;color:#eaf2ff}
.badge-side.is-blue{border-color:#00E5FF}
.badge-side.is-red{border-color:#FF4D4F}
.banner-mode{background:#1b2b46;color:#eaf2ff;border:1px solid #2b4266;border-radius:8px;padding:6px 10px;font-weight:700}
.chip .icon{margin-right:6px}

/* ===== Preset geral (container / logos em páginas com header) ===== */
.container { width: min(1400px, 96vw) !important; }
.brand img { height: 56px !important; margin-right: 12px; vertical-align: middle; }

/* Fundo padrão (sem gradiente por time no body) */
body{ background: var(--bg); }

/* ==================== UX Viewer — START ====================
   Centralização dos tabuleiros + estilo dos contadores
   Não altera IDs existentes, nem a lógica. Somente visual.
*/
.pwv-center{display:flex;justify-content:center;align-items:flex-start;gap:24px;width:100%;max-width:1600px;margin:0 auto;padding:8px 12px;box-sizing:border-box}
/*#viewer:has(#board-own, #board-opponent),
.game:has(.board-own, .board-opponent),
.boards:has([data-board="own"], [data-board="opponent"]) {display:flex;justify-content:center;align-items:flex-start;gap:24px}*/
.quiz-pre{text-shadow:0 8px 22px rgba(0,0,0,.55);animation:quizPop .25s ease}
@keyframes quizPop{from{transform:scale(.92);opacity:.6}to{transform:scale(1);opacity:1}}

/* --- Contador de 15s (timer da jogada) --- */
#turnTimer,#turn-timer,.turn-timer,[data-role="turn-timer"]{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;height:32px;border-radius:999px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.3px;color:#e6eaf2;background:rgba(126,231,135,.08);border:1px solid rgba(126,231,135,.25);box-shadow:0 2px 10px rgba(0,0,0,.12) inset;--total:15;--remaining:15;--progress:calc((var(--total) - var(--remaining)) / var(--total));--accent:#7ee787}
#turnTimer::before,#turn-timer::before,.turn-timer::before,[data-role="turn-timer"]::before{content:"⏳";font-size:14px;margin-right:4px}
#turnTimer::after,#turn-timer::after,.turn-timer::after,[data-role="turn-timer"]::after{content:"";position:absolute;inset:-3px;border-radius:999px;background:conic-gradient(var(--accent) calc(var(--progress) * 360deg), rgba(255,255,255,.08) 0);-webkit-mask:radial-gradient(circle calc(100% - 6px) at center, transparent 6px, black 6px);mask:radial-gradient(circle calc(100% - 6px) at center, transparent 6px, black 6px);pointer-events:none}
#turnTimer.pwv-last3,#turn-timer.pwv-last3,.turn-timer.pwv-last3,[data-role="turn-timer"].pwv-last3{background:rgba(255,77,79,.10);border-color:rgba(255,77,79,.35);animation:pwv-blink .9s linear infinite}
@keyframes pwv-blink{0%,100%{box-shadow:0 0 0 1px rgba(255,77,79,.35) inset}50%{box-shadow:0 0 0 1px rgba(255,77,79,.10) inset}}

/* --- Indicador de turno (Seu turno / Vez do oponente) --- */
#turn-status,.turn-status,[data-role="turn-status"]{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;height:32px;border-radius:999px;font-weight:800;letter-spacing:.3px;color:#e6eaf2;background:rgba(58,63,75,.35);border:1px solid rgba(255,255,255,.15)}
#turn-status[data-state="your"]::before,.turn-status[data-state="your"]::before,[data-role="turn-status"][data-state="your"]::before{content:"🎮";font-size:14px}
#turn-status[data-state="opp"]::before,.turn-status[data-state="opp"]::before,[data-role="turn-status"][data-state="opp"]::before{content:"🕹️";font-size:14px}
#turn-status[data-state="idle"]::before,.turn-status[data-state="idle"]::before,[data-role="turn-status"][data-state="idle"]::before{content:"⏱️";font-size:14px}
#turn-status[data-state="your"],.turn-status[data-state="your"],[data-role="turn-status"][data-state="your"]{background:rgba(126,231,135,.10);border-color:rgba(126,231,135,.30)}
#turn-status[data-state="opp"],.turn-status[data-state="opp"],[data-role="turn-status"][data-state="opp"]{background:rgba(255,77,79,.10);border-color:rgba(255,77,79,.30)}
#turn-status[data-state="idle"],.turn-status[data-state="idle"],[data-role="turn-status"][data-state="idle"]{background:rgba(58,63,75,.35);border-color:rgba(255,255,255,.15)}

@media (max-width:640px){
  .pwv-center{gap:16px;padding:6px 8px}
  #turn-status,#turnTimer,#turn-timer,.turn-timer,[data-role="turn-timer"]{height:30px;font-size:13px;padding:5px 10px}
}
/* ===================== UX Viewer — END ===================== */

/* ===== Quiz overlay (viewer) ===== */
.quiz-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:3000}
.quiz-card{background:#0f1b2f;color:#eaf2ff;border:1px solid #284062;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.45);width:min(720px,92vw);padding:18px}
.quiz-title{font-weight:800;font-size:18px;margin-bottom:8px;color:#9ad0ff}
.quiz-text{font-weight:700;margin-bottom:12px}
.quiz-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.quiz-options .btn{height:44px}
.quiz-options .btn.sent{background:#1E3352;color:#eaf2ff;border:1px solid #2b4266}
.quiz-footer{display:flex;justify-content:flex-end;margin-top:10px}
.quiz-timer{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:999px;background:#1b2b46;border:1px solid #2b4266;font-weight:800;min-width:52px}

.quiz-result{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.quiz-result-msg{font-weight:800;font-size:16px;line-height:1.25}
.quiz-result-sub{color:#99B5DB;font-weight:700;font-size:13px}

/* Result badges */
.quiz-result-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-weight:900;border:1px solid transparent}
.quiz-result-badge.blue{background:#005BFF;border-color:#00E5FF;color:#EAF2FF}
.quiz-result-badge.red{background:#FF4D4F;border-color:#FF7B7B;color:#0A0F1E}
.quiz-result-badge.neutral{background:#FFCC00;border-color:#FFD966;color:#0A0F1E}

/* End-of-game overlay */
.end-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:3500;padding:16px}
.end-card{background:#0f1b2f;color:#eaf2ff;border:1px solid #284062;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.45);width:min(720px,92vw);padding:18px}
.end-title{font-weight:900;font-size:18px;margin-bottom:10px}
.end-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.end-side{border:1px solid #284062;border-radius:12px;padding:12px;background:#0b1425}
.end-side.blue{border-color:#00E5FF}
.end-side.red{border-color:#FF4D4F}
.end-side.win{box-shadow:0 0 0 2px rgba(0,229,255,.25) inset}
.end-name{font-weight:900;margin-bottom:6px}
.end-points{font-size:28px;font-weight:900;letter-spacing:.3px}
.end-sub{color:#99B5DB;font-weight:700;margin-top:8px}

/* ===== Admin: responsivo extra ===== */
@media (max-width:520px){
  .header-inner{flex-wrap:wrap;gap:10px}
  .nav{display:flex;flex-wrap:wrap;gap:10px}
  .nav a{margin-left:0 !important}
  .panel-header{flex-wrap:wrap;gap:10px}
  .btn{width:100%;margin-right:0}
  .chips{flex-wrap:wrap}
  .boards-grid{grid-template-columns:1fr !important}
  .board{--cell:28px}
}

/* ===== Viewer: topbar com logos ===== */
.viewer-topbar{margin:10px 0 6px;position:relative}
.viewer-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.viewer-brand,.viewer-sponsor{display:flex;align-items:center;gap:10px}

/* ===== Knobs (ajuste rápido) ===== */
:root{
  --pw-game-logo-opacity: 1;                 /* opacidade do logo do jogo */
  --pw-game-logo-height: clamp(34px, 7.4vw, 100px); /* tamanho do logo do jogo (pode passar de 80px) */
  --pw-game-logo-maxw: 260px;               /* limite de largura do logo do jogo */

  --pw-team-header-size: clamp(16px, 3.6vw, 36px); /* tamanho do cabeçalho BLUE/RED TEAM */
  --pw-team-header-top: 10px;                      /* posição vertical do cabeçalho */
}

/* Logos gerais (inclui NTT) */
.viewer-logo{height:clamp(28px,4.6vw,44px);width:auto;max-width:46vw;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}

/* Logo do jogo (quadrado): maior que o padrão */
#logo-game.viewer-logo-game{height:var(--pw-game-logo-height) !important;max-width:var(--pw-game-logo-maxw);opacity:var(--pw-game-logo-opacity)}

/* Cabeçalho do time (fica só aqui; remove duplicações no HUD) */
.viewer-topbar::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:var(--pw-team-header-top);z-index:3;font-weight:1000;letter-spacing:.22em;font-size:var(--pw-team-header-size);line-height:1;text-transform:uppercase;text-align:center;white-space:nowrap;opacity:.96;text-shadow:0 10px 26px rgba(0,0,0,.55);pointer-events:none}
html.pw-side-blue .viewer-topbar::after{content:"BLUE TEAM";color:#9AD0FF}
html.pw-side-red  .viewer-topbar::after{content:"RED TEAM";color:#FFB3B3}

/* FIX definitivo: remove qualquer label antigo que tenha ficado no HUD */
.hud::before{content:none !important;display:none !important}

@media (max-width:420px){
  .viewer-topbar::after{top:2px;letter-spacing:.18em}
  :root{ --pw-game-logo-maxw: 200px; }
}

/* =========================================================
   Viewer — Tabuleiros
   - Oponente neutro
   - Seu tabuleiro destacado por time
   - MISS igual para todos (cinza quase preto)
   ========================================================= */

/* MISS: fica igual no azul e no vermelho */
#board-player,#board-bot{--miss:#0F1218}

/* Tabuleiro do oponente: sempre neutro */
#board-bot{--water:#0F2747;--ship:#1A476E;--grid:#16345A;background:#0B1E39 !important;border-color:var(--border) !important;box-shadow:inset 0 0 0 1px var(--grid), 0 10px 26px rgba(0,0,0,.28)}
#board-bot .axis-top,#board-bot .axis-left{color:rgba(153,181,219,.86) !important}

/* Seu tabuleiro: BLUE elegante */
html.pw-side-blue #board-player{--water:#153A62;--ship:#1F5684;--grid:#1B3F66;background:#081A33 !important;border-color:rgba(154,208,255,.42) !important;box-shadow:inset 0 0 0 1px rgba(154,208,255,.12), 0 10px 26px rgba(0,0,0,.33)}
html.pw-side-blue #board-player .axis-top,html.pw-side-blue #board-player .axis-left{color:rgba(210,235,255,.90) !important}

/* Seu tabuleiro: RED (como você aprovou) */
html.pw-side-red #board-player{--water:#4A0F1A;--ship:#7A1B2A;--grid:#7A2230;background:#16070B !important;border-color:rgba(255,77,79,.70) !important;box-shadow:inset 0 0 0 1px rgba(255,77,79,.22), 0 10px 26px rgba(0,0,0,.35)}
html.pw-side-red #board-player .axis-top,html.pw-side-red #board-player .axis-left{color:rgba(255,225,225,.92) !important}

/* ===== Footer compartilhado (viewer/admin/analytics) ===== */
.pw-footer{margin-top:18px;padding:14px 0;border-top:1px solid #14223A;color:var(--muted);text-align:center;font-weight:600}

/* ===== Analytics: título do topo (vamos usar na Fase 2) ===== */
.pw-analytics-hero{width:100%;text-align:center;font-weight:1000;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(16px,2.7vw,26px);margin:4px 0 10px 0;color:#EAF2FF;text-shadow:0 10px 26px rgba(0,0,0,.55)}

/* Admin: título com logo à direita (maior) */
.hero-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
}

.hero-title > span{
  flex: 1 1 auto;
}

.hero-logo{
  height: clamp(46px, 6.5vw, 86px); /* <-- maior */
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

/* Se a tela ficar estreita, quebra bonitinho */
@media (max-width: 560px){
  .hero-title{ flex-wrap:wrap; }
  .hero-logo{ height: 54px; }
}

/* Pulse também no sunk (amarelo), igual ao hit */
.cell.sunk{
  animation: pulseHit .18s ease-in-out;
}

/* Viewer/Admin: pulse mais perceptível para HIT (vermelho) e SUNK (amarelo) */
@keyframes pwPulseCell{
  0%{ transform: scale(1); }
  50%{ transform: scale(.92); }
  100%{ transform: scale(1); }
}

/* Aplica só nos boards que existem no Viewer/Admin */
#board-player .cell.hit,
#board-bot    .cell.hit,
#board-player .cell.sunk,
#board-bot    .cell.sunk{
  animation: pwPulseCell .42s ease-in-out 2;
}

/* Admin: logo do jogo maior (força acima de outras regras) */
.hero-logo{
  height: clamp(50px, 8vw, 100px) !important; /* <-- aqui cresce mesmo */
  width: auto !important;
  max-width: none !important;                /* remove limite de largura */
}

/* Analytics: topbar com 3 colunas (logo | título | logo) */
.pw-analytics-topbar .viewer-topbar-inner{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

/* garante alinhamento nas bordas */
.pw-analytics-topbar .viewer-brand{ justify-self: start; }
.pw-analytics-topbar .viewer-sponsor{ justify-self: end; }

/* título central */
.pw-analytics-title{
  justify-self: center;
  text-align: center;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #EAF2FF;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
  font-size: clamp(14px, 2.6vw, 26px);
  white-space: nowrap;
}

/* se ficar apertado no celular, deixa quebrar em 2 linhas */
@media (max-width: 520px){
  .pw-analytics-title{
    white-space: normal;
    line-height: 1.1;
    letter-spacing: .14em;
    font-size: 14px;
  }
}

/* =========================================================
   VIEWER: centralização DEFINITIVA (iPad portrait/landscape)
   - Sem flex no body (mais estável no Safari/iPad)
   - Centralização por container (clássico e robusto)
   ========================================================= */
html.pw-viewer, 
html.pw-viewer body{
  width: 100%;
  height: 100%;
}

html.pw-viewer body{
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* O container do Viewer SEMPRE centralizado */
html.pw-viewer .container{
  width: min(1400px, 96vw) !important;
  margin: 0 auto !important;
}

/* Topbar/HUD/boards ocupam a largura do container */
html.pw-viewer .viewer-topbar,
html.pw-viewer .hud,
html.pw-viewer .boards{
  width: 100% !important;
}

/* Footer: ocupa a tela toda, mas sem “puxar” o resto */
html.pw-viewer .pw-footer{
  width: 100% !important;
}