/* Ghost Grid — game styles, fully scoped under .gg so they never touch the site.
   (The original used :root + generic .card/.modal which would have overridden the site.) */
.gg {
  --gg-text:#e9f1ff; --gg-muted:#9caeca; --gg-accent:#7dd3fc; --gg-good:#86efac;
  --gg-bad:#fb7185; --gg-warn:#fde68a; --gg-cell:#263552; --gg-line:rgba(255,255,255,.12);
  --gg-panel2:#1f2b44;
  color:var(--gg-text);
}
.gg .gg-head { text-align:center; padding:2px 0 14px; }
.gg .gg-head h1 { margin:0; font-size:clamp(28px,5vw,48px); letter-spacing:-0.06em; line-height:1; }
.gg .gg-head p { max-width:780px; margin:12px auto 0; color:var(--gg-muted); font-size:15px; }

.gg .wrap { display:grid; grid-template-columns:1fr; gap:14px; }
.gg .topbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }

.gg .gg-card {
  background:rgba(23,32,51,.86); border:1px solid var(--gg-line); border-radius:18px;
  box-shadow:0 20px 55px rgba(0,0,0,.24); overflow:hidden;
}
.gg .stat { padding:14px; min-height:78px; }
.gg .stat .label { color:var(--gg-muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.gg .stat .value { margin-top:6px; font-size:24px; font-weight:800; }

.gg .game { display:grid; grid-template-columns:minmax(280px,1fr) 310px; gap:14px; }
.gg .arena { padding:16px; }
.gg .board-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.gg .board-title h2 { margin:0; font-size:19px; }
.gg .board-title span { color:var(--gg-muted); font-size:13px; }

.gg .grid { display:grid; grid-template-columns:repeat(9,minmax(24px,1fr)); gap:6px; aspect-ratio:1/1; width:100%; max-width:650px; margin:0 auto; }
.gg .cell {
  appearance:none; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),transparent),var(--gg-cell);
  color:var(--gg-text); font-weight:900; font-size:clamp(14px,2.7vw,24px); cursor:pointer;
  transition:transform .08s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.gg .cell:hover:not(:disabled) { border-color:rgba(125,211,252,.72); }
.gg .cell:focus-visible { outline:none; box-shadow:inset 0 0 0 2px rgba(125,211,252,.65); border-radius:12px; }
.gg .cell:disabled { cursor:default; }
.gg .cell.ship { background:linear-gradient(145deg,rgba(125,211,252,.22),transparent),var(--gg-cell); border-color:rgba(125,211,252,.45); color:rgba(233,241,255,.85); }
.gg .cell.preview-ok { outline:2px solid var(--gg-good); outline-offset:-3px; }
.gg .cell.preview-bad { outline:2px solid var(--gg-bad); outline-offset:-3px; }
.gg .grid.small { max-width:300px; gap:5px; }
.gg .grid.small .cell { cursor:default; font-size:clamp(10px,2vw,15px); }
.gg .cell.miss { background:rgba(148,163,184,.16); color:rgba(226,232,240,.7); }
.gg .cell.hit { background:radial-gradient(circle,rgba(251,113,133,.55),rgba(251,113,133,.14) 60%),var(--gg-cell); border-color:rgba(251,113,133,.75); color:#fff; }
.gg .cell.sunk { background:radial-gradient(circle,rgba(134,239,172,.45),rgba(134,239,172,.12) 60%),var(--gg-cell); border-color:rgba(134,239,172,.8); color:#fff; }
.gg .cell.scan { outline:3px solid rgba(253,230,138,.35); outline-offset:-4px; }
.gg .cell.revealed::after { content:attr(data-mark); position:absolute; right:5px; bottom:3px; color:rgba(255,255,255,.6); font-size:11px; font-weight:800; }

.gg aside { display:flex; flex-direction:column; gap:14px; }
.gg .panel { padding:16px; }
.gg .panel h3 { margin:0 0 10px; font-size:16px; }
.gg .tools { display:grid; gap:8px; }
.gg button.action {
  width:100%; border:1px solid rgba(255,255,255,.12); background:linear-gradient(145deg,var(--gg-panel2),#172033);
  color:var(--gg-text); border-radius:13px; padding:12px; font-weight:800; cursor:pointer; text-align:left; font:inherit; font-weight:800;
}
.gg button.action small { font-weight:600; color:var(--gg-muted); }
.gg button.action:hover:not(:disabled) { border-color:rgba(125,211,252,.75); }
.gg button.action:disabled { opacity:.45; cursor:not-allowed; }
.gg .primary { background:linear-gradient(145deg,#075985,#164e63) !important; }
.gg .danger { background:linear-gradient(145deg,#881337,#4c0519) !important; }

.gg .fleet-list { display:grid; gap:8px; margin-top:8px; }
.gg .fleet-item { display:flex; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(255,255,255,.035); color:var(--gg-muted); font-size:13px; }
.gg .fleet-item.done { color:var(--gg-good); border-color:rgba(134,239,172,.35); }

.gg .log { height:190px; overflow:auto; padding-right:4px; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--gg-muted); }
.gg .log div { border-bottom:1px solid rgba(255,255,255,.07); padding-bottom:8px; }
.gg .help { color:var(--gg-muted); font-size:13px; line-height:1.45; }
.gg .badge { display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:999px; padding:4px 8px; color:var(--gg-muted); font-size:12px; font-weight:700; }

.gg .modal { position:fixed; inset:0; background:rgba(2,6,23,.78); display:none; place-items:center; padding:20px; z-index:60; }
.gg .modal.show { display:grid; }
.gg .countdown { position:fixed; inset:0; z-index:55; display:none; place-items:center; background:rgba(2,6,23,.7); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); font-weight:900; font-size:clamp(60px,18vw,140px); color:var(--gg-accent); }
.gg .net-banner { padding:10px 14px; border-radius:12px; margin-bottom:12px; font-weight:800; text-align:center; border:1px solid var(--gg-line); }
.gg .net-banner.you { background:rgba(134,239,172,.16); border-color:rgba(134,239,172,.5); color:var(--gg-good); }
.gg .net-banner.wait { background:rgba(255,255,255,.04); color:var(--gg-muted); }
.gg .net-banner.warn { background:rgba(253,230,138,.14); border-color:rgba(253,230,138,.5); color:var(--gg-warn); }
.gg .modal-box { width:min(540px,100%); background:#111827; border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:22px; box-shadow:0 30px 100px rgba(0,0,0,.45); }
.gg .modal-box h2 { margin:0 0 8px; font-size:28px; }
.gg .modal-box p { color:var(--gg-muted); line-height:1.5; }

@media (max-width:900px) {
  .gg .game { grid-template-columns:1fr; }
  .gg aside { grid-template-columns:1fr; }
  .gg .topbar { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px) {
  .gg .topbar { grid-template-columns:1fr; }
  .gg .cell { border-radius:8px; }
  .gg .grid { gap:4px; }
}