:root{
  /* Base */
  --bg:#0b0e14; 
  --panel:#151a22; 
  --muted:#9aa4b2; 
  --text:#e7ecf3;
  --accent:#3b82f6; 
  --warn:#f59e0b; 
  --ok:#22c55e;
  --line:#2b3340;

  /* Tabuleiro & estados (alto contraste) */
  --sea:#081525;                /* mar mais escuro */
  --cell-border:#0e223a;        /* grade mais marcada */
  --ship:#3b4f6a;               /* navio contrastante no mar */
  --ship-outline:#9fb7d1;       /* contorno sutil do navio */
  --hit:#ff4747;                /* vermelho vivo pra acerto */
  --miss:#b9ddff;               /* azul claro pra erro */
  --fog:#0f1826;                /* neblina */

  /* Terreno (ilhas/terra) */
  --land:#2c3320;
  --land-stroke:#5c7a3a;

  /* Cores por jogador (HUD/abas) */
  --A:#3b82f6; 
  --B:#ef4444; 
  --C:#22c55e; 
  --D:#eab308;
}

/* ===== layout geral ===== */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial}
.app{max-width:1250px;margin:24px auto;padding:0 16px}
.topbar{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:16px}
h1{margin:0;font-size:22px}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lbl{opacity:.9}
.input{background:#0f1117;border:1px solid var(--line);color:#fff;padding:8px 10px;border-radius:8px}
.btn{background:var(--accent);color:#fff;border:0;padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.ok{background:var(--ok)}
.btn.warn{background:var(--warn);color:#111}
.btn:hover{filter:brightness(1.08)}
.repo{color:#c7d2fe;text-decoration:none;border:1px solid var(--line);padding:8px 10px;border-radius:8px}
.score{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.pill{background:var(--panel);border:1px solid var(--line);padding:8px 12px;border-radius:999px}
.muted{color:var(--muted)}
.small{font-size:12px}

.wrap{display:grid;grid-template-columns:1fr 1fr 320px;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.panel h3{margin:0 0 8px}
.actions{display:flex;gap:10px;align-items:center;margin-bottom:8px}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tab{padding:6px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:#0f1117;color:#cbd5e1}
.tab.active{outline:2px solid var(--accent)}
.tab.dead{opacity:.45; pointer-events:none}
.tab.A{border-color:var(--A)} .tab.B{border-color:var(--B)} .tab.C{border-color:var(--C)} .tab.D{border-color:var(--D)}

/* ===== tabuleiro ===== */
.grid{
  --n:10; /* substituído via style */
  width:100%; aspect-ratio:1/1; background:var(--sea);
  border:1px solid var(--line); border-radius:10px;
  display:grid; grid-template-columns:repeat(var(--n), 1fr); grid-template-rows:repeat(var(--n), 1fr);
  overflow:hidden; position:relative;
}
.cell{
  border:1px solid var(--cell-border);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; user-select:none; cursor:pointer; position:relative;
}
.cell:hover{ outline:2px solid #65a3ffcc; outline-offset:-2px }

/* ===== terreno (ilhas) ===== */
.terrain-land{
  background:
    linear-gradient(0deg, #00000020, #00000020),
    repeating-linear-gradient(45deg, #323c26 0 10px, #2c3320 10px 20px);
  box-shadow: inset 0 0 0 2px var(--land-stroke);
  cursor:not-allowed;
}

/* ===== seu tabuleiro ===== */
.own-ship{
  background: var(--ship);
  box-shadow: inset 0 0 0 1px var(--ship-outline);
}
.own-hit{
  background: var(--hit); color:#fff;
  box-shadow: inset 0 0 0 2px #ffffff22;
}
.own-miss{
  background:
    repeating-linear-gradient(45deg, #1b2740 0 6px, #213055 6px 12px);
  color:#c9d7ea;
}

/* ===== tabuleiro do oponente (máscara) ===== */
.opp-fog{ background: var(--fog); }
.opp-hit{ 
  background: var(--hit); color:#fff;
  box-shadow: inset 0 0 0 2px #ffffff22;
}
.opp-miss{
  background:
    repeating-linear-gradient(45deg, #d7e9ff 0 6px, #b9ddff 6px 12px);
  color:#0b1220;
}

/* ===== explosão (acerto) ===== */
.explosion{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.explosion::before{
  content:"";
  width:10%; height:10%; border-radius:50%;
  background: radial-gradient(circle, #fff, #ffd166, #ef4444 60%, transparent 65%);
  animation: boom .6s ease-out forwards;
  filter: drop-shadow(0 0 6px #ffb347);
}
@keyframes boom{
  0%   { transform: scale(0.5); opacity:1; filter:brightness(1.4); }
  70%  { transform: scale(3.0); opacity:.95; filter:brightness(1.1); }
  100% { transform: scale(5.0); opacity:0; }
}

/* ===== chat ===== */
.chat .chat-log{height:240px;overflow:auto;background:#0f1117;border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px}
.chat .chat-input{display:flex;gap:8px}
.chat .chat-input input{flex:1;background:#0f1117;border:1px solid var(--line);border-radius:8px;padding:8px;color:#e7ecf3}

.side .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px}
.log{max-height:240px;overflow:auto;color:var(--muted);font-size:12px}

@media (max-width:1200px){ .wrap{grid-template-columns:1fr} }