:root{ --bg:#0A0F1E; --panel:#0F1B2F; --border:#284062; --accent:#00E5FF; --text:#EAF2FF; --muted:#99B5DB;
  --water:#0F2747; --ship:#1A476E; --hit:#FF3B3B; --miss:#345A82; --sunk:#FFC400; --grid:#16345A;
  --btn-primary-bg:#00E5FF; --btn-primary-fg:#00121A; --btn-secondary-bg:#1E3352; --btn-secondary-fg:#EAF2FF; --btn-warning-bg:#FF9F1A; --btn-warning-fg:#0A0F1E; --btn-danger-bg:#FF4D4F; --btn-danger-fg:#0A0F1E;
  --cell:34px; --axis-size:24px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{width:min(1400px,92vw);margin:0 auto}
.site-header{position:sticky;top:0;background:rgba(10,15,30,.85);backdrop-filter:blur(6px);border-bottom:1px solid #14223A;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:800;letter-spacing:1px}.brand span{color:var(--accent)}
.nav a{color:var(--muted);text-decoration:none;margin-left:16px;font-weight:600}.nav a:hover{color:var(--text)}
.hero{padding:28px 0 12px;border-bottom:1px solid #14223A}
.hero h1{margin:0;font-size:clamp(28px,6vw,44px);font-weight:800}
.hero .sub{color:var(--muted);margin-top:6px;font-weight:600}
.panel{margin:18px 0;background:var(--panel);border:1px solid var(--border);border-radius:12px}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.panel-body{padding:14px 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* Grid dos dois tabuleiros — colunas do tamanho do conteúdo e centralizadas */
.boards-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content); /* cada coluna no tamanho do board */
  justify-content: center;   /* centraliza o conjunto de colunas dentro do container */
  align-items: start;
  column-gap: 24px;          /* sem “espaço fantasma” à direita */
  row-gap: 0;
  width: max-content;        /* largura exata dos boards */
  margin: 0 auto;            /* centraliza a própria grid no painel */
}

/* Garante que qualquer filho fique centralizado na célula da grid */
.boards-grid > * { justify-self: center; }

.board-title{font-weight:800;margin-bottom:8px}
.chips{display:flex;gap:10px;align-items:center}
/* Grid com eixos */
.board{display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(10,var(--cell));gap:2px;padding:12px;background:#0B1E39;border:1px solid var(--border);border-radius:12px;box-shadow:inset 0 0 0 1px var(--grid)}

/* Board com eixos: linhas explícitas (eixo topo + 10 linhas de células) */
.board.board-axis {
  grid-template-columns: var(--axis-size) repeat(10, var(--cell));
  grid-template-rows:    var(--axis-size) repeat(10, var(--cell));
}

/* Tabuleiro deve encolher ao conteúdo (não “preencher” a coluna inteira) */
.board { display: inline-grid; width: auto; }

.axis-top{width: var(--cell); height: var(--axis-size); line-height: var(--axis-size); text-align:center; color: var(--muted); font-size: 12px; user-select:none;}
.axis-left{width: var(--axis-size); height: var(--cell); line-height: var(--cell); text-align:center; color: var(--muted); font-size: 12px; user-select:none;}

.cell{width:var(--cell);height:var(--cell);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#ffffffb0;user-select:none;position:relative}
.cell::after{content:'';position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1px #0b1e39}
.cell.water{background:var(--water)}
.cell.ship{background:var(--ship)}
.cell.miss{background:var(--miss);color:#BFD0E6}
.cell.hit{background:var(--hit)!important;color:#000;font-weight:800;}
.cell.sunk{background:var(--sunk);color:#000;font-weight:800}
.cell.ship.hit{background:var(--hit)!important}
.cell.ship.sunk{background:var(--sunk)!important}
.cell.hit::after, .cell.sunk::after{box-shadow:none}
@keyframes pulseHit{ 0%{transform:scale(1)} 50%{transform:scale(0.94)} 100%{transform:scale(1)} }
.cell.hit{ animation: pulseHit .18s ease-in-out }
.cell.target:hover{outline:2px solid var(--accent);cursor:pointer}
/* Viewer: estados de clique / desabilitado (padronizado) */
.cell.clickable { cursor: pointer; }
.board.disabled .cell { cursor: not-allowed; opacity: 0.6; }

/* Chips (sem marcador antes do texto) */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.chip::before{content:none}
.chip-turn{background:#0b2142;color:#9ad0ff;border:1px solid #1c3d62}
.chip-turn.player{background:#0a2430;color:#00ffc8;border-color:#176c64}
.chip-timer{background:#1b2b46;color:#e8f2ff;border:1px solid #2b4266}

.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:10px;border:none;font-weight:800;letter-spacing:.2px;margin-right:10px;transition:filter .15s ease, transform .02s}
.btn:active{transform:translateY(1px)} .btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg)} .btn-primary:hover{filter:brightness(0.95)} .btn-warning{background:var(--btn-warning-bg);color:var(--btn-warning-fg)} .btn-warning:hover{filter:brightness(1.05)} .btn-danger{background:var(--btn-danger-bg);color:var(--btn-danger-fg)} .btn-danger:hover{filter:brightness(0.95)}

.empty{text-align:center;padding:18px;border:1px dashed var(--border);border-radius:12px;background:#0d2242}
.events{list-style:none;padding:0;margin:0;max-height:300px;overflow:auto}
.event{display:grid;grid-template-columns:120px 1fr 100px;gap:12px;padding:8px 10px;border-bottom:1px solid var(--border)}
.event:last-child{border-bottom:0}
.when{color:var(--muted)} .desc{font-weight:600} .severity{text-align:right;font-weight:800}
.sev-low{color:#8fb1d9} .sev-med{color:#ffc065} .sev-high{color:#ff7b7b}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:#0008}
.modal-card{position:relative;background:#0f1b2f;border:1px solid #284062;border-radius:12px;padding:16px 18px;min-width:280px;max-width:420px;color:#eaf2ff;box-shadow:0 10px 30px #0006}
.modal-card h3{margin:0 0 10px 0}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.modal-footer{display:flex;justify-content:flex-end}

.site-footer{margin-top:20px;padding:16px 0;border-top:1px solid #14223A;color:var(--muted)}

@media (max-width:960px){.boards-grid{grid-template-columns:1fr}.board{--cell:30px}}
@media (prefers-color-scheme:light){ body{background:#F6F8FC;color:#0b1220} .site-header{background:#ffffffd0;border-bottom:1px solid #e0e8f2} .panel{background:#fff;border-color:#e0e8f2} .panel-header{border-bottom-color:#e0e8f2} .board{background:#0B1E39} .cell.water{background:var(--water)} .cell.miss{background:var(--miss);color:#BFD0E6} }