/* ═══════════════════════════════════════════════════════════════════════════
   Battle AIrena — Cyber Theme (shared)
   Neon cyberpunk aesthetic. Scoped under body.theme-cyber.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&display=swap');

@layer theme {

/* ── Variable Overrides ── */
body.theme-cyber {
  --bg:       #030810;
  --panel:    #060f1e;
  --border:   #0d2a4a;
  --accent1:  #00d4ff;
  --accent2:  #ff6b35;
  --success:    #00ff9f;
  --error:      #ff3366;
  --damage:   #ff3a3a;
  --warning:   #ffd700;
  --text:     #c8dff0;
  --dim:      #5a7a9a;
  --glow:     0 0 20px rgba(0,212,255,0.3);
  --glow2:    0 0 20px rgba(255,107,53,0.3);
  --mode-practice:   #00cc66;
  --mode-ranked:     #ff9f1a;
  --mode-tournament: #ffd700;

  font-family: 'Share Tech Mono', monospace;
  background: var(--bg);
  color: var(--text);
}

/* ── Animated Grid Background ── */
body.theme-cyber::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── Header ── */
body.theme-cyber header {
  background: linear-gradient(180deg, rgba(0,212,255,0.05) 0%, transparent 100%);
}

body.theme-cyber .logo {
  font-family: 'Orbitron', sans-serif;
  text-shadow: var(--glow);
}

/* ── Connection Badge ── */
body.theme-cyber .connection-badge.connected .conn-dot {
  box-shadow: 0 0 10px var(--success);
}

body.theme-cyber .connection-badge.error .conn-dot {
  box-shadow: 0 0 10px var(--error);
}

/* ── Buttons ── */
body.theme-cyber .btn { font-family: 'Orbitron', sans-serif; }
body.theme-cyber .btn-accent:hover { background: rgba(0,212,255,0.15); box-shadow: var(--glow); }
body.theme-cyber .btn-green:hover  { background: rgba(0,255,159,0.15); }
body.theme-cyber .btn-red:hover    { background: rgba(255,51,102,0.15); }
body.theme-cyber .btn-orange:hover { background: rgba(255,107,53,0.15); box-shadow: var(--glow2); }

/* ── Panels ── */
body.theme-cyber .panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent1), transparent);
  opacity: 0.6;
}

body.theme-cyber .panel-title { font-family: 'Orbitron', sans-serif; }

body.theme-cyber .panel-title::before {
  content: '\25B6';
  font-size: 8px;
  color: var(--accent2);
}

/* ── Board ── */
body.theme-cyber .board-label { font-family: 'Orbitron', sans-serif; }

body.theme-cyber .board-label.active {
  text-shadow: 0 0 20px currentColor;
}

/* Cell cyber neon overrides */
body.theme-cyber .cell {
  background: rgba(0,212,255,0.03);
  border-color: rgba(0,212,255,0.06);
}

body.theme-cyber .cell[data-occupant="ship"][data-state="untouched"] {
  background: rgba(0,212,255,0.12);
  border-color: rgba(0,212,255,0.25);
}
body.theme-cyber .cell[data-occupant="ship"][data-state="shot"] { background: rgba(255,107,53,0.3); }
body.theme-cyber .cell[data-occupant="ship"][data-state="shot"]::after { text-shadow: var(--glow2); }
body.theme-cyber .cell[data-state="sunk"] { background: rgba(255,51,102,0.3); }

body.theme-cyber .cell.flash { animation: cellflash 0.6s ease; }

@keyframes cellflash {
  0%   { background: rgba(0,212,255,0.6); box-shadow: 0 0 20px var(--accent1); }
  100% { background: rgba(0,212,255,0.03); }
}

/* ── Fleet — cyber neon ── */
body.theme-cyber .ship-seg.intact { background: rgba(0,212,255,0.15); border-color: rgba(0,212,255,0.3); }
body.theme-cyber .ship-seg.hit    { background: rgba(255,107,53,0.5); }

/* ── Score ── */
body.theme-cyber .score-num { font-family: 'Orbitron', sans-serif; }
body.theme-cyber .score-num[data-play-order="first"]  { text-shadow: var(--glow); }
body.theme-cyber .score-num[data-play-order="second"] { text-shadow: var(--glow2); }

body.theme-cyber .vs-text {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  color: var(--accent2);
  text-shadow: var(--glow2);
}

/* ── Log ── */
body.theme-cyber .log-result.sunk { text-shadow: 0 0 10px var(--error); }

/* ── Mode Badges ── */
body.theme-cyber .badge-mode { font-family: 'Orbitron', sans-serif; }
body.theme-cyber .badge-mode-practice   { color: var(--mode-practice);   background: rgba(0,204,102,0.15);  border: 1px solid rgba(0,204,102,0.3); }
body.theme-cyber .badge-mode-ranked     { color: var(--mode-ranked);     background: rgba(255,159,26,0.15); border: 1px solid rgba(255,159,26,0.3); }
body.theme-cyber .badge-mode-tournament { color: var(--mode-tournament); background: rgba(255,215,0,0.15);  border: 1px solid rgba(255,215,0,0.3); }

}