:root {
  --bg: #030a12;
  --bg2: #06111f;
  --panel: rgba(7, 24, 39, .92);
  --panel-soft: rgba(10, 34, 53, .78);
  --line: rgba(78, 202, 245, .24);
  --line-strong: rgba(79, 217, 255, .55);
  --cyan: #55dcff;
  --cyan2: #16bfe9;
  --cyan3: #0a7fa2;
  --text: #f3fbff;
  --muted: #8ca9bb;
  --green: #64ef8a;
  --red: #ff5d3d;
  --orange: #ff8a3d;
  --gold: #ffc85a;
  --radius: 14px;
  --cell-gap: 1px;
  --shadow: 0 20px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(22, 173, 220, .16), transparent 34%),
    linear-gradient(145deg, #02070d, var(--bg2) 48%, #02070e 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(77, 203, 244, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 203, 244, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
button, select, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; }
.topbar {
  height: 98px;
  display: grid;
  grid-template-columns: 120px 1fr 220px;
  align-items: center;
  gap: 18px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(4,17,28,.98), rgba(9,32,49,.94), rgba(4,17,28,.98));
  box-shadow: 0 8px 35px rgba(0,0,0,.32);
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand-mark {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(48,180,225,.16), rgba(3,13,24,.8));
  clip-path: polygon(50% 0, 92% 22%, 92% 78%, 50% 100%, 8% 78%, 8% 22%);
  color: var(--cyan); font-size: 28px;
  filter: drop-shadow(0 0 18px rgba(70,211,255,.22));
}
.title-wrap { text-align: center; line-height: 1; }
.eyebrow { color: var(--cyan); letter-spacing: .25em; font-size: 10px; font-weight: 800; text-transform: uppercase; opacity: .9; }
.title-wrap h1, .admin-top h1 { margin: 7px 0 0; font-size: clamp(28px, 3vw, 48px); letter-spacing: .08em; font-weight: 900; text-shadow: 0 0 28px rgba(87,217,255,.18); }
.turn-card { justify-self: end; text-align: right; padding: 13px 18px; border-left: 1px solid var(--line); }
.turn-label { display: block; color: var(--muted); font-size: 10px; letter-spacing: .15em; }
.turn-card strong { color: var(--cyan); display: block; margin-top: 4px; letter-spacing: .05em; }

.main-layout {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr) 250px;
  gap: 14px;
  padding: 14px;
  min-height: calc(100vh - 98px);
}
.panel {
  background: linear-gradient(180deg, rgba(8,31,49,.94), rgba(4,18,30,.94));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(81,220,255,.5), transparent);
}
.sidebar { display: flex; flex-direction: column; justify-content: space-between; min-height: 690px; }
.side-nav { padding: 12px 0; }
.nav-item {
  width: 100%; min-height: 62px; border: 0; border-left: 2px solid transparent;
  display: flex; align-items: center; gap: 13px; padding: 0 18px;
  background: transparent; color: #b6c9d5; cursor: pointer; font-weight: 800; letter-spacing: .02em;
  transition: .18s ease; text-align: left;
}
.nav-item span { color: #8aa9bc; font-size: 20px; min-width: 24px; text-align: center; }
.nav-item:hover, .nav-item.active { color: var(--cyan); border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(54,198,239,.14), transparent); }
.nav-item.active span { color: var(--cyan); filter: drop-shadow(0 0 8px rgba(83,218,255,.5)); }
.radar { width: 140px; aspect-ratio: 1; margin: 16px auto 20px; border: 1px solid rgba(71,211,251,.28); border-radius: 50%; position: relative; opacity: .9;
  background: repeating-radial-gradient(circle, transparent 0 24px, rgba(67,210,250,.14) 25px 26px), linear-gradient(rgba(58,206,247,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(58,206,247,.09) 1px, transparent 1px); background-size: auto, 20px 20px, 20px 20px; }
.radar::before { content:""; position:absolute; inset: 50% auto auto 50%; width: 4px; height: 4px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); transform:translate(-50%,-50%); }
.radar-line { position:absolute; width:48%; height:2px; background:linear-gradient(90deg,var(--cyan),transparent); top:50%; left:50%; transform-origin:left center; animation:radar 3.5s linear infinite; }
.radar-dot { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.radar-dot.one { top:29%; left:66%; } .radar-dot.two { top:68%; left:34%; }
@keyframes radar { to { transform: rotate(360deg); } }

.content { min-width: 0; }
.tab-view { display: none; }
.tab-view.active { display: block; }
.battle-grid-wrap { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.board-card { padding: 14px 16px 18px; }
.board-heading { height: 42px; display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; }
.board-heading span { height:2px; background:linear-gradient(90deg,transparent,var(--cyan)); opacity:.75; }
.board-heading span:last-child { background:linear-gradient(90deg,var(--cyan),transparent); }
.board-heading h2 { font-size:17px; letter-spacing:.08em; color:#dff9ff; margin:0; }
.board-heading.enemy h2 { color:var(--cyan); }
.coordinate-wrap { display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-rows:24px auto; max-width: 650px; margin:0 auto; }
.letters { grid-column:2; display:grid; grid-template-columns:repeat(10,1fr); align-items:center; text-align:center; color:#a9c3d1; font-weight:800; font-size:13px; }
.numbers { grid-row:2; display:grid; grid-template-rows:repeat(10,1fr); align-items:center; text-align:center; color:#a9c3d1; font-weight:800; font-size:13px; }
.board { grid-column:2; grid-row:2; position:relative; aspect-ratio:1; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(10,1fr); border:1px solid rgba(78,220,255,.52); background: #06253a; overflow:hidden; box-shadow: inset 0 0 42px rgba(3,8,16,.35), 0 0 24px rgba(26,179,220,.06); }
.board::before { content:""; position:absolute; inset:0; background:
  radial-gradient(ellipse at 30% 20%, rgba(45,189,222,.16), transparent 30%),
  radial-gradient(ellipse at 70% 70%, rgba(16,106,148,.19), transparent 32%),
  repeating-radial-gradient(ellipse at 20% 50%, rgba(76,216,244,.035) 0 2px, transparent 3px 12px);
  animation:waterDrift 10s ease-in-out infinite alternate; z-index:0; pointer-events:none; }
@keyframes waterDrift { to { transform:scale(1.04) translate3d(1.5%,-1%,0); opacity:.8; } }
.cell { position:relative; z-index:1; border-right:1px solid rgba(71,205,243,.29); border-bottom:1px solid rgba(71,205,243,.29); cursor:default; transition:.13s ease; background:linear-gradient(135deg,rgba(255,255,255,.012),rgba(0,0,0,.018)); }
.enemy-board.battle-active .cell:not(.shot) { cursor:crosshair; }
.enemy-board.battle-active .cell:not(.shot):hover { background:rgba(74,218,255,.18); box-shadow:inset 0 0 0 1px rgba(88,227,255,.65), inset 0 0 18px rgba(62,211,248,.2); }
.cell.miss::after { content:""; position:absolute; width:22%; aspect-ratio:1; border-radius:50%; background:#dff9ff; left:39%; top:39%; box-shadow:0 0 9px rgba(216,248,255,.75); }
.cell.hit::before, .cell.hit::after { content:""; position:absolute; left:18%; top:48%; width:64%; height:3px; background:var(--red); border-radius:5px; box-shadow:0 0 12px rgba(255,83,48,.9); transform:rotate(45deg); }
.cell.hit::after { transform:rotate(-45deg); }
.cell.hit { background:radial-gradient(circle,rgba(255,93,53,.45),rgba(255,93,53,.08) 45%,transparent 70%); animation:hitPulse .55s ease-out; }
.cell.sunk { background:radial-gradient(circle,rgba(255,76,43,.28),rgba(102,22,17,.16) 60%,transparent); }
@keyframes hitPulse { 0% { transform:scale(.75); filter:brightness(2); } 70% { transform:scale(1.08); } 100% { transform:scale(1); } }
.ship-sprite { position:absolute; z-index:3; display:flex; align-items:center; justify-content:center; pointer-events:none; transform-origin:center center; padding:1.5%; filter:drop-shadow(0 5px 5px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(101,221,251,.2)); }
.ship-sprite img { width:100%; height:100%; object-fit:contain; }
.ship-sprite.damaged { filter:grayscale(.8) brightness(.65) sepia(.3) drop-shadow(0 0 7px rgba(255,76,43,.65)); opacity:.86; }

.lower-grid { margin-top:14px; display:grid; grid-template-columns: 1.05fr 1.25fr .78fr; gap:14px; }
.fleet-panel,.action-panel,.command-panel { padding:17px; min-height:236px; }
.section-title { color:var(--cyan); font-size:12px; letter-spacing:.11em; font-weight:900; margin-bottom:12px; }
.fleet-list { display:grid; gap:5px; margin-bottom:13px; }
.fleet-row { min-height:32px; display:grid; grid-template-columns:80px 1fr auto; gap:8px; align-items:center; border-bottom:1px solid rgba(95,188,218,.12); color:#cfe1ea; font-size:12px; font-weight:800; }
.fleet-row img { width:100%; height:24px; object-fit:contain; object-position:left center; filter:grayscale(.3) brightness(1.2); }
.fleet-row strong { color:var(--green); }
.fleet-row strong.warn { color:var(--gold); }
.btn { border:1px solid rgba(89,211,247,.34); color:#d9f7ff; background:linear-gradient(180deg,rgba(18,63,88,.78),rgba(6,31,49,.84)); border-radius:8px; min-height:45px; padding:0 16px; font-weight:900; letter-spacing:.035em; cursor:pointer; transition:.16s ease; box-shadow:inset 0 1px rgba(255,255,255,.03); }
.btn:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(91,225,255,.8); box-shadow:0 0 20px rgba(61,205,245,.13), inset 0 1px rgba(255,255,255,.06); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:linear-gradient(180deg,rgba(17,132,174,.82),rgba(6,63,91,.95)); border-color:rgba(91,229,255,.65); box-shadow:0 0 24px rgba(37,194,238,.14), inset 0 0 22px rgba(37,185,231,.12); }
.btn.big { min-height:64px; font-size:22px; width:100%; margin-top:auto; }
.btn.full { width:100%; }
.btn.small { min-height:36px; }
.action-panel { display:flex; flex-direction:column; text-align:center; }
.shot-kicker { font-size:10px; letter-spacing:.22em; color:#779aaa; font-weight:800; }
.shot-title { font-size:20px; font-weight:900; margin:6px 0 13px; letter-spacing:.07em; }
.battle-message { display:flex; gap:13px; align-items:center; text-align:left; border:1px solid rgba(92,214,250,.28); background:rgba(7,31,49,.78); border-radius:10px; padding:12px 14px; margin-bottom:13px; }
.battle-message .reticle { width:48px; height:48px; flex:0 0 48px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font-size:30px; }
.battle-message strong { display:block; font-size:18px; letter-spacing:.04em; }
.battle-message small { display:block; margin-top:3px; color:#a8c2cf; }
.battle-message.hit { color:var(--orange); border-color:rgba(255,100,55,.45); background:linear-gradient(90deg,rgba(114,30,18,.52),rgba(40,17,17,.25)); }
.battle-message.miss { color:var(--cyan); }
.battle-message.win { color:var(--gold); border-color:rgba(255,200,90,.45); background:linear-gradient(90deg,rgba(105,75,15,.35),rgba(31,27,14,.2)); }
.command-panel { display:flex; flex-direction:column; gap:11px; }
.difficulty-box { padding:12px; border:1px solid rgba(255,195,77,.2); background:rgba(30,28,18,.25); border-radius:9px; text-align:center; }
.difficulty-box small { color:#7895a3; display:block; font-size:9px; letter-spacing:.1em; }
.difficulty-box strong { color:var(--gold); font-size:18px; display:block; margin:5px 0; }
.stars { color:var(--gold); letter-spacing:3px; }
select { width:100%; min-height:42px; border-radius:8px; color:#d9f7ff; border:1px solid var(--line); background:#071b2a; padding:0 12px; outline:none; }

.rightbar { display:flex; flex-direction:column; gap:14px; min-width:0; }
.stat-panel,.log-panel { padding:17px; }
.stat-row { display:flex; justify-content:space-between; gap:10px; padding:8px 0; color:#b5c9d5; font-size:13px; border-bottom:1px solid rgba(96,183,213,.09); }
.stat-row strong.good { color:var(--green); }.stat-row strong.bad{color:var(--red)}.stat-row strong.cyan{color:var(--cyan)}
.log-panel { flex:1; min-height:310px; }
.battle-log { display:flex; flex-direction:column; gap:10px; font-family:ui-monospace,Consolas,monospace; font-size:12px; }
.log-item { display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px dashed rgba(95,188,218,.11); }
.log-item.hit { color:var(--orange); }.log-item.miss{color:var(--cyan)}.log-item.ai{opacity:.8}.log-empty{color:#678796; font-family:inherit;}

.stats-hero { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; min-height:180px; }
.stats-hero > div { display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(5,24,38,.35); }
.stats-hero span { color:#7899aa; font-size:10px; letter-spacing:.12em; }.stats-hero strong{font-size:34px;color:var(--cyan);margin-top:8px;}
.stats-copy { margin-top:14px; padding:30px; display:flex; align-items:center; gap:24px; }.rank-emblem{width:100px;height:100px;border:1px solid rgba(255,199,85,.35);clip-path:polygon(50% 0,92% 22%,92% 78%,50% 100%,8% 78%,8% 22%);display:grid;place-items:center;font-size:48px;color:var(--gold);background:rgba(83,62,16,.18)}.stats-copy h2{font-size:34px;margin:6px 0;color:var(--gold)}.stats-copy p{color:#93abba;margin:0;}
.rules-card{padding:30px;max-width:900px}.rules-card h2{font-size:28px}.rules-card p{font-size:16px;line-height:1.75;color:#a9bfca;max-width:780px;}
.hidden { display:none !important; }

@media (max-width: 1350px) {
  .main-layout { grid-template-columns: 82px minmax(0,1fr) 220px; }
  .nav-item { justify-content:center; padding:0; font-size:0; }.nav-item span{font-size:22px}.sidebar{min-height:620px}.radar{width:64px}.radar-dot{display:none}
  .lower-grid { grid-template-columns:1fr 1.2fr; }.command-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;min-height:auto;align-items:center}.difficulty-box{height:100%;}
}
@media (max-width: 1050px) {
  .topbar { grid-template-columns:70px 1fr 160px; height:82px; padding:10px 16px; }.brand-mark{width:50px;height:50px}.title-wrap h1{font-size:28px}.main-layout{grid-template-columns:68px 1fr}.rightbar{grid-column:2;display:grid;grid-template-columns:1fr 1fr}.sidebar{grid-row:1 / span 2}.battle-grid-wrap{grid-template-columns:1fr}.board-card{max-width:720px;width:100%;margin:auto}.lower-grid{grid-template-columns:1fr}.command-panel{grid-column:auto;display:flex}.stats-hero{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 700px) {
  .topbar{position:relative;grid-template-columns:46px 1fr;height:72px}.turn-card{display:none}.brand-mark{width:42px;height:42px;font-size:20px}.eyebrow{font-size:8px}.title-wrap{text-align:left}.title-wrap h1{font-size:22px}.main-layout{display:block;padding:8px}.sidebar{min-height:auto;margin-bottom:8px}.side-nav{display:grid;grid-template-columns:repeat(4,1fr);padding:0}.nav-item{min-height:54px;border-left:0;border-bottom:2px solid transparent}.nav-item.active{border-bottom-color:var(--cyan)}.radar{display:none}.rightbar{display:grid;grid-template-columns:1fr;margin-top:8px}.battle-grid-wrap{gap:8px}.board-card{padding:8px}.board-heading h2{font-size:14px}.coordinate-wrap{grid-template-columns:22px minmax(0,1fr);grid-template-rows:20px auto}.letters,.numbers{font-size:10px}.lower-grid{margin-top:8px;gap:8px}.fleet-panel,.action-panel,.command-panel{padding:12px}.stats-hero{grid-template-columns:1fr 1fr}.stats-copy{padding:18px;align-items:flex-start}.rank-emblem{width:70px;height:70px;flex:0 0 70px}.stats-copy h2{font-size:24px}
}