/* Retro Terminal Theme — Cyber Ship Battle */

/* ===== Theme Variables ===== */
:root {
  --bg: #0d0d0d;
  --fg: #00ff80;
  --fg-dim: #00ff8088;
  --fg-faint: #00ff8044;
  --fg-ghost: #00ff8022;
  --fg-subtle: #00ff8033;
  --accent-hit: #ff4444;
  --accent-warn: #ffaa00;
}

/* --- Matrix (default) --- */
[data-theme="matrix"] { --bg: #0d0d0d; --fg: #00ff80; --fg-dim: #00ff8088; --fg-faint: #00ff8044; --fg-ghost: #00ff8022; --fg-subtle: #00ff8033; }
/* --- Dracula --- */
[data-theme="dracula"] { --bg: #282A36; --fg: #BD93F9; --fg-dim: #BD93F988; --fg-faint: #BD93F944; --fg-ghost: #BD93F922; --fg-subtle: #BD93F933; }
/* --- Solarized --- */
[data-theme="solarized"] { --bg: #002B36; --fg: #93A1A1; --fg-dim: #93A1A188; --fg-faint: #93A1A144; --fg-ghost: #93A1A122; --fg-subtle: #93A1A133; }
/* --- Monokai --- */
[data-theme="monokai"] { --bg: #272822; --fg: #FF6188; --fg-dim: #FF618888; --fg-faint: #FF618844; --fg-ghost: #FF618822; --fg-subtle: #FF618833; }
/* --- Nord --- */
[data-theme="nord"] { --bg: #2E3440; --fg: #88C0D0; --fg-dim: #88C0D088; --fg-faint: #88C0D044; --fg-ghost: #88C0D022; --fg-subtle: #88C0D033; }
/* --- Catppuccin --- */
[data-theme="catppuccin"] { --bg: #1E1E2E; --fg: #89B4FA; --fg-dim: #89B4FA88; --fg-faint: #89B4FA44; --fg-ghost: #89B4FA22; --fg-subtle: #89B4FA33; }
/* --- Gruvbox --- */
[data-theme="gruvbox"] { --bg: #282828; --fg: #FABD2F; --fg-dim: #FABD2F88; --fg-faint: #FABD2F44; --fg-ghost: #FABD2F22; --fg-subtle: #FABD2F33; }
/* --- Tokyo Night --- */
[data-theme="tokyo-night"] { --bg: #1A1B26; --fg: #7AA2F7; --fg-dim: #7AA2F788; --fg-faint: #7AA2F744; --fg-ghost: #7AA2F722; --fg-subtle: #7AA2F733; }

/* ===== Reset + Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  -webkit-user-select: none;
  user-select: none;
}

.seo-content, .changelog-container, input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Courier New', monospace;
  cursor: crosshair;
  overflow-x: hidden;
}

/* CRT scanline overlay (#94) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,128,0.025) 2px,
    rgba(0,255,128,0.025) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* CRT screen curvature + vignette (#95) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0,0,0,0.25) 85%,
    rgba(0,0,0,0.45) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* VHS tracking distortion on screen transitions (#97) */
.screen.vhs-glitch {
  animation: vhsTracking 0.3s linear;
}

@keyframes vhsTracking {
  0% { transform: translate(0); filter: none; }
  10% { transform: translate(-3px, 1px); filter: hue-rotate(10deg); }
  20% { transform: translate(2px, -1px) skewX(2deg); }
  30% { transform: translate(-1px, 2px) skewX(-1deg); filter: hue-rotate(-5deg); }
  40% { transform: translate(3px, 0); clip-path: inset(20% 0 30% 0); }
  50% { transform: translate(-2px, -1px); clip-path: inset(40% 0 10% 0); filter: none; }
  60% { transform: translate(1px, 1px) skewX(1deg); clip-path: none; }
  70% { transform: translate(-1px, 0); }
  80% { transform: translate(0, 1px); filter: hue-rotate(3deg); }
  90% { transform: translate(1px, -1px); filter: none; }
  100% { transform: translate(0); filter: none; clip-path: none; }
}

/* ===== Top Nav ===== */
#top-nav {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #00ff8022;
}

.nav-brand {
  font-size: 14px;
  letter-spacing: 3px;
  text-shadow: 0 0 8px var(--fg);
  cursor: crosshair;
  transition: text-shadow 0.2s;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  padding: 0;
}

.nav-brand:hover {
  text-shadow: 0 0 12px var(--fg), 0 0 24px #00ff8044;
}

.modal-body {
  font-size: 12px;
  color: var(--fg-dim);
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.nav-btn {
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--fg);
  padding: 4px 12px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  cursor: crosshair;
  letter-spacing: 1px;
  transition: all 0.2s;
}

.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--fg-faint);
  color: var(--fg);
  font-size: 20px;
  padding: 2px 8px;
  cursor: crosshair;
  font-family: 'Courier New', monospace;
  line-height: 1;
}

.nav-btn:hover {
  border-color: var(--fg);
  text-shadow: 0 0 8px var(--fg);
}

/* ===== Ad Slot ===== */
.ad-slot {
  min-height: 0;
  overflow: hidden;
}

.ad-slot:empty {
  display: none;
}

main {
  position: relative;
  z-index: 1;
}

/* ===== Main Title ===== */
#main-title {
  text-align: center;
  font-size: 20px;
  letter-spacing: 4px;
  margin: 20px 0;
  text-shadow: 0 0 8px var(--fg);
  position: relative;
  animation: glitchText 8s infinite;
}

@keyframes glitchText {
  0%, 92%, 94%, 96%, 100% {
    text-shadow: 0 0 8px var(--fg);
    transform: translate(0);
  }
  92.5% {
    text-shadow: -2px 0 #ff0040, 2px 0 #00ffff, 0 0 8px #00ff80;
    transform: translate(2px, 0);
  }
  93% {
    text-shadow: 2px 0 #ff0040, -2px 0 #00ffff, 0 0 8px #00ff80;
    transform: translate(-1px, 1px);
  }
  93.5% {
    text-shadow: 0 0 8px var(--fg);
    transform: translate(0);
  }
  95% {
    text-shadow: -1px 0 #ff0040, 1px 0 #00ffff, 0 0 8px #00ff80;
    transform: translate(-1px, 0);
  }
  95.5% {
    text-shadow: 1px 0 #ff0040, -1px 0 #00ffff, 0 0 8px #00ff80;
    transform: translate(1px, -1px);
  }
}

.heading-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
  filter: drop-shadow(0 0 8px var(--fg));
  animation: crosshairPulse 4s ease-in-out infinite;
}

@keyframes crosshairPulse {
  0%, 100% { filter: drop-shadow(0 0 6px #00ff8055); }
  50% { filter: drop-shadow(0 0 10px #00ff80cc); }
}

/* ===== Screens ===== */
.screen {
  display: none;
}

.screen.active {
  display: block;
}

/*
 * STYLE GUIDE — Shared patterns for visual consistency
 *
 * Centered screen:    .screen-centered — flex column, centered, padded
 * Screen heading:     .screen-heading  — uppercase, spaced, dimmed green
 * Screen subtitle:    .screen-subtitle — small, dimmed, spaced
 * Button groups:      .gameover-buttons, .placement-controls — flex row, gap
 * Max-width screens:  max-width 500-700px, margin: 0 auto, padding: 20px
 * Colors:             var(--fg) (primary), var(--fg-dim) (dimmed), var(--accent-hit) (danger)
 */

.screen-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
  gap: 12px;
}

.screen-heading {
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: 0 0 8px var(--fg);
  margin-bottom: 4px;
  animation: glitchText 12s 2s infinite;
}

.screen-subtitle {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg-dim);
}

/* ===== Menu ===== */
.menu-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.menu-section {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mode-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--fg-subtle);
}

.mode-tab {
  flex: 1;
  padding: 10px 0;
  font-family: 'Fira Mono', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: transparent;
  color: #00ff8044;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: crosshair;
  transition: color 0.2s, border-color 0.2s;
}

.mode-tab:hover {
  color: var(--fg-dim);
}

.mode-tab.active {
  color: var(--fg);
  border-bottom-color: var(--fg);
  text-shadow: 0 0 6px #00ff8044;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
}

/* Difficulty buttons */
.difficulty-group {
  display: flex;
  justify-content: space-around;
  width: 100%;
  gap: 10px;
}

.btn-difficulty {
  flex: 1;
  padding: 12px 8px;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}


.menu-section h2, .menu-section h3 {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 10px;
}

.menu-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== Terminal Button ===== */
.btn-terminal {
  background: transparent;
  border: 1px solid var(--fg-dim);
  color: var(--fg);
  padding: 8px 16px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  cursor: crosshair;
  letter-spacing: 1px;
  transition: all 0.2s;
}

.btn-terminal:hover {
  border-color: var(--fg);
  text-shadow: 0 0 8px var(--fg);
  background: #00ff8011;
}

/* Difficulty color overrides */
.btn-terminal.btn-easy {
  border-color: var(--fg-dim);
  color: var(--fg);
}

.btn-terminal.btn-easy:hover {
  background: #00ff8015;
  border-color: var(--fg);
  text-shadow: 0 0 8px var(--fg);
}

.btn-terminal.btn-medium {
  border-color: #ffaa0066;
  color: var(--accent-warn);
}

.btn-terminal.btn-medium:hover {
  background: #ffaa0012;
  border-color: var(--accent-warn);
  text-shadow: 0 0 8px var(--accent-warn);
}

.btn-terminal.btn-hard {
  border-color: #ff444466;
  color: var(--accent-hit);
}

.btn-terminal.btn-hard:hover {
  background: #ff444412;
  border-color: var(--accent-hit);
  text-shadow: 0 0 8px var(--accent-hit);
}

/* Secondary button (leaderboard, etc.) */
.btn-terminal.btn-secondary {
  border-color: #00ff8022;
  color: #00ff8055;
  font-size: 12px;
  letter-spacing: 2px;
}

.btn-terminal.btn-secondary:hover {
  border-color: #00ff8055;
  color: #00ff8099;
  background: transparent;
  text-shadow: none;
}

/* ===== Terminal Input ===== */
.input-terminal {
  background: var(--bg);
  border: 1px solid var(--fg-faint);
  color: var(--fg);
  padding: 8px 12px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  text-transform: uppercase;
  outline: none;
}

.input-terminal:focus {
  border-color: var(--fg-dim);
}

.join-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.join-row .input-terminal {
  flex: 1;
}

/* ===== Blink ===== */
.blink {
  animation: blink 1s infinite alternate;
}

/* ===== Radar Sweep ===== */
#board-enemy {
  position: relative;
}

#board-enemy {
  overflow: hidden;
}

#board-enemy::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 340deg,
    rgba(0, 255, 128, 0.06) 350deg,
    rgba(0, 255, 128, 0.12) 360deg
  );
  animation: radarSweep 3s linear infinite;
  z-index: 1;
}

#board-enemy.radar-active::after {
  opacity: 1;
}

@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.reduce-motion #board-enemy::after {
  animation: none;
  opacity: 0;
}

/* ===== Boards ===== */
.board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  perspective: 600px;
  transform-style: preserve-3d;
}

.board.board-labeled {
  grid-template-columns: 16px repeat(10, 1fr);
  grid-template-rows: 16px repeat(10, 1fr);
}

.grid-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--fg-faint);
  letter-spacing: 0;
  user-select: none;
}

.grid-corner {
  /* empty top-left cell */
}

.grid-col-label {
  font-size: 7px;
}

.grid-row-label {
  font-size: 7px;
}

.board-large {
  width: min(400px, 100%);
  margin: 0 auto;
}

.board-small {
  width: min(280px, 100%);
  margin: 0 auto;
}

/* ===== Cells ===== */
.cell {
  aspect-ratio: 1;
  background: transparent;
  border: 1px solid var(--fg-ghost);
  border-radius: 2px;
  cursor: crosshair;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.8s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Phosphor afterglow — slow fade out after hover (#96) */
.cell:hover {
  border-color: var(--fg-dim);
  background: #00ff8018;
  box-shadow: 0 0 6px var(--fg-subtle), inset 0 0 4px var(--fg-subtle);
  transition: background 0.05s, border-color 0.05s, box-shadow 0.05s;
}

/* Targeting highlight on enemy board */
#board-enemy .cell:not(.hit):not(.miss):not(.sunk):hover {
  border-color: var(--fg);
  background: #00ff8022;
  box-shadow: 0 0 8px var(--fg-subtle), inset 0 0 6px #00ff8022;
}

.cell.keyboard-cursor {
  border-color: var(--fg);
  box-shadow: 0 0 6px var(--fg-subtle), inset 0 0 4px var(--fg-subtle);
}

.cell.queued {
  border-color: var(--accent-warn);
  background: #ffaa0018;
  box-shadow: 0 0 6px #ffaa0033;
  animation: queuedPulse 1s ease-in-out infinite alternate;
}

@keyframes queuedPulse {
  from { box-shadow: 0 0 4px #ffaa0022; }
  to { box-shadow: 0 0 10px #ffaa0044; }
}

.cell.wave {
  animation: wave3d var(--wave-duration, 0.6s) ease-out forwards;
  animation-delay: var(--wave-delay, 0s);
  transform-style: preserve-3d;
}

@keyframes wave3d {
  0% {
    transform: perspective(600px) translateZ(0) rotateX(0) scaleY(1);
    box-shadow: none;
  }
  15% {
    transform: perspective(600px) translateZ(calc(14px * var(--wave-amplitude, 1)))
               rotateX(calc(-5deg * var(--wave-amplitude, 1)))
               scaleY(calc(1 + 0.08 * var(--wave-amplitude, 1)));
    box-shadow: 0 4px 8px rgba(0, 255, 128, calc(0.2 * var(--wave-amplitude, 1)));
    border-color: var(--fg-dim);
  }
  35% {
    transform: perspective(600px) translateZ(calc(-8px * var(--wave-amplitude, 1)))
               rotateX(calc(3deg * var(--wave-amplitude, 1)))
               scaleY(calc(1 - 0.04 * var(--wave-amplitude, 1)));
    box-shadow: 0 -2px 4px rgba(0, 255, 128, calc(0.1 * var(--wave-amplitude, 1)));
  }
  55% {
    transform: perspective(600px) translateZ(calc(4px * var(--wave-amplitude, 1)))
               rotateX(calc(-1.5deg * var(--wave-amplitude, 1)));
  }
  75% {
    transform: perspective(600px) translateZ(calc(-1.5px * var(--wave-amplitude, 1)))
               rotateX(calc(0.5deg * var(--wave-amplitude, 1)));
  }
  100% {
    transform: perspective(600px) translateZ(0) rotateX(0) scaleY(1);
    box-shadow: none;
  }
}

.cell.hit {
  background: #ff003322;
  border-color: #ff003366;
  color: #ff0033;
  text-shadow: 0 0 4px #ff0033;
}

.cell.miss {
  background: #ffffff18;
  border-color: #ffffff44;
}

.cell.ship {
  background: #00ff8015;
  border-color: #00ff8044;
}

.cell.ship-flash {
  animation: shipFlash 0.8s ease-out;
}

@keyframes shipFlash {
  0% {
    background: #00ff8066;
    border-color: var(--fg);
    box-shadow: 0 0 8px #00ff8044;
  }
  50% {
    background: var(--fg-subtle);
    border-color: #00ff80aa;
  }
  100% {
    background: #00ff8015;
    border-color: #00ff8044;
    box-shadow: none;
  }
}

.cell.preview-valid {
  background: #00ff8025;
  border-color: var(--fg-dim);
  box-shadow: inset 0 0 4px var(--fg-subtle);
}

.cell.preview-invalid {
  background: #ff003325;
  border-color: #ff003388;
  box-shadow: inset 0 0 4px #ff003333;
}

.cell.sunk {
  background: #ff003344;
  border-color: #ff003388;
}

/* ===== Game Container ===== */
#status-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 10px 12px;
  margin-bottom: 12px;
  min-height: 52px;
  border: 1px solid var(--fg-ghost);
  transition: border-color 0.3s;
  position: relative;
  overflow: hidden;
}

#status-message {
  font-size: 11px;
  letter-spacing: 2px;
  color: #00ff8055;
  transition: transform 0.15s, opacity 0.15s;
}

#status-turn {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  transition: transform 0.15s, opacity 0.15s;
}

#status-bar.collapsing #status-message,
#status-bar.collapsing #status-turn {
  transform: scaleY(0);
  opacity: 0;
}

#status-bar .status-line {
  position: absolute;
}

#status-bar.pulse {
  animation: statusPulse 0.6s ease-out;
}

@keyframes statusPulse {
  0% {
    border-color: var(--fg);
    box-shadow: 0 0 12px #00ff8044;
  }
  100% {
    border-color: #00ff8022;
    box-shadow: none;
  }
}

.game-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 20px 60px;
}

.game-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.board-column {
  display: flex;
  flex-direction: column;
}

.board-column-primary {
  flex: 1 1 400px;
  min-width: 0;
}

.board-column-secondary {
  flex: 0 1 280px;
  min-width: 0;
}

.board-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 8px;
  text-align: center;
}

.board-column-primary .board-label {
  color: #00ff80aa;
  text-shadow: 0 0 4px #00ff8022;
}

.game-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 16px;
}

/* ===== Placement ===== */
#screen-placement {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

#screen-placement h2 {
  text-align: center;
  margin-bottom: 4px;
}

.placement-hint {
  text-align: center;
  text-wrap: balance;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--fg-subtle);
  margin-bottom: 24px;
}

.placement-container,
.placement-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.placement-board-column {
  display: flex;
  flex-direction: column;
}

.placement-controls {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-drop-mobile {
  display: none;
}

.btn-ready-active {
  border-color: var(--fg) !important;
  color: var(--fg) !important;
  text-shadow: 0 0 8px var(--fg);
  box-shadow: 0 0 12px var(--fg-subtle), inset 0 0 8px #00ff8011;
  animation: readyPulse 1.5s ease-in-out infinite;
}

@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 8px #00ff8022, inset 0 0 6px #00ff8011; }
  50% { box-shadow: 0 0 16px var(--fg-faint), inset 0 0 10px #00ff8022; }
}

.ship-list {
  margin-bottom: 12px;
}

.ship-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--fg-subtle);
  cursor: crosshair;
  font-size: 12px;
  letter-spacing: 1px;
  transition: all 0.15s;
}

.ship-item:hover {
  border-color: var(--fg-dim);
}

.ship-item.selected {
  border-color: var(--fg);
  text-shadow: 0 0 8px var(--fg);
}

.ship-item.selected .ship-block {
  background: var(--fg);
  box-shadow: 0 0 4px var(--fg);
}

.ship-item.placed {
  opacity: 0.5;
}


.ship-item.placed .ship-block {
  background: #00ff8044;
  border-color: #00ff8022;
  box-shadow: none;
}

.ship-blocks {
  display: flex;
  gap: 2px;
}

.ship-block {
  width: 14px;
  height: 14px;
  background: #00ff8066;
  border: 1px solid var(--fg-faint);
  border-radius: 1px;
  transition: all 0.15s;
}

/* ===== Game Over ===== */
.gameover-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  min-height: 60vh;
}

#gameover-title {
  font-size: 20px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

#gameover-title.victory {
  font-size: 48px;
  letter-spacing: 8px;
  text-shadow: 0 0 20px var(--fg), 0 0 40px #00ff8066, 0 0 80px var(--fg-subtle);
  animation: victorySlam 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes victorySlam {
  0% {
    transform: scale(3);
    opacity: 0;
    filter: blur(12px);
  }
  60% {
    transform: scale(0.95);
    opacity: 1;
    filter: blur(0);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

#gameover-title.defeat {
  color: var(--accent-hit);
  font-size: 36px;
  letter-spacing: 6px;
  text-shadow: 0 0 15px #ff444488, 0 0 30px #ff444433;
  filter: url(#defeat-wave);
  animation: defeatFadeIn 2.5s ease-out forwards;
}

@keyframes defeatFadeIn {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.gameover-stats {
  margin: 20px auto;
  max-width: 300px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-dim);
}

.gameover-cta {
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--fg-ghost);
  text-align: center;
}

.gameover-cta .cta-text {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.gameover-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* ===== Leaderboard ===== */
#screen-leaderboard {
  max-width: 650px;
  margin: 0 auto;
  padding: 20px;
}

.leaderboard-table,
#leaderboard-table {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 12px;
}

.leaderboard-table th,
#leaderboard-table th {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  color: var(--fg-dim);
  font-weight: normal;
  padding: 6px 8px;
  border-bottom: 1px solid #00ff8044;
  text-align: left;
}

.leaderboard-table td,
#leaderboard-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #00ff8022;
}

.leaderboard-table tr:last-child td,
#leaderboard-table tr:last-child td {
  border-bottom: none;
}

#leaderboard-table td:first-child,
#leaderboard-table th:first-child {
  text-align: center;
  width: 50px;
}

#leaderboard-table td:nth-child(3),
#leaderboard-table td:nth-child(4),
#leaderboard-table td:nth-child(5),
#leaderboard-table th:nth-child(3),
#leaderboard-table th:nth-child(4),
#leaderboard-table th:nth-child(5) {
  text-align: right;
  width: 80px;
}

/* ===== Room Code ===== */
.room-code {
  font-size: 36px;
  letter-spacing: 8px;
  color: var(--fg);
  text-shadow: 0 0 8px var(--fg);
  margin: 16px 0;
  cursor: crosshair;
  user-select: all;
}

.room-code-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: crosshair;
  transition: opacity 0.2s;
}

.room-code-wrapper:hover {
  opacity: 0.8;
}

.copy-icon {
  width: 20px;
  height: 20px;
  color: #00ff8055;
  transition: color 0.2s;
}

.room-code-wrapper:hover .copy-icon {
  color: var(--fg);
}

.copy-confirm {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--fg-dim);
  margin-top: -8px;
  transition: opacity 0.3s;
}

.room-container,
.waiting-container {
  text-align: center;
  padding: 40px;
}

/* ===== Modal ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: #111;
  border: 1px solid var(--fg-faint);
  padding: 24px;
  max-width: 400px;
  width: 90%;
}

.modal-close {
  float: right;
  background: none;
  border: none;
  color: var(--fg);
  cursor: crosshair;
  font-family: 'Courier New', monospace;
  font-size: 16px;
}

/* ===== Auth Form ===== */
.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--fg-dim);
  margin-bottom: 4px;
}

.form-group .input-terminal {
  width: 100%;
  box-sizing: border-box;
}

.auth-error {
  font-size: 11px;
  letter-spacing: 1px;
}

.nav-username {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg-dim);
  margin: 0 8px;
}

.nav-user-icon {
  width: 14px;
  height: 14px;
}

/* ===== Settings Modal ===== */
.modal-title {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 16px;
}

.settings-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #00ff8015;
}

.settings-group:last-child {
  border-bottom: none;
}

.settings-label {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: #00ff80cc;
}

.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px;
  font-size: 12px;
  min-width: 70px;
  border-color: var(--fg-dim);
  color: var(--fg);
  transition: all 0.2s;
}

.settings-toggle.toggle-off {
  border-color: #ff444466;
  color: var(--accent-hit);
}

.toggle-icon {
  width: 16px;
  height: 16px;
}

.toggle-text {
  letter-spacing: 1px;
}

.settings-hint {
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 1px;
  font-style: italic;
}

.settings-group-theme {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.theme-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.theme-swatch {
  width: 28px;
  height: 28px;
  border: 2px solid transparent;
  background: none;
  padding: 3px;
  cursor: crosshair;
  transition: border-color 0.2s, transform 0.2s;
}

.theme-swatch:hover {
  transform: scale(1.15);
}

.theme-swatch.active {
  border-color: var(--fg);
}

.swatch-color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.theme-credit {
  font-size: 9px;
  color: var(--fg-faint);
  letter-spacing: 1px;
}

.theme-credit a {
  color: var(--fg-faint);
  text-decoration: underline;
}

.theme-credit a:hover {
  color: var(--fg-dim);
}

.settings-group-feedback {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.feedback-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.feedback-links .btn-terminal {
  text-decoration: none;
  font-size: 11px;
  padding: 5px 10px;
}

/* ===== Misc Text ===== */
.seo-content {
  max-width: 600px;
  margin: 40px auto;
  padding: 24px;
  color: #00ff8055;
  font-size: 14px;
  line-height: 1.8;
  border: 1px solid #00ff8011;
}

.seo-content h2 {
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #00ff8077;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #00ff8018;
}

.seo-content h3 {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 20px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #00ff8011;
}

.seo-content p {
  margin-bottom: 12px;
}

.seo-content section {
  margin-bottom: 8px;
}

.seo-content ol {
  list-style: none;
  counter-reset: rules;
  padding-left: 0;
}

.seo-content ol li {
  counter-increment: rules;
  padding: 3px 0 3px 24px;
  position: relative;
}

.seo-content ol li::before {
  content: counter(rules, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--fg-subtle);
  font-size: 10px;
  letter-spacing: 1px;
}

.seo-content ul {
  list-style: none;
  padding-left: 0;
}

.seo-content ul li {
  padding: 2px 0 2px 16px;
  position: relative;
}

.seo-content ul li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--fg-subtle);
}

.seo-content strong {
  color: #00ff8077;
  font-weight: normal;
  letter-spacing: 1px;
}

.difficulty-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.difficulty-card {
  border: 1px solid;
  border-radius: 2px;
  padding: 10px 14px;
  margin: 0;
}

.difficulty-card legend {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 6px;
}

.difficulty-card p {
  margin: 0;
}

.difficulty-card-easy {
  border-color: var(--fg-subtle);
}

.difficulty-card-easy legend {
  color: var(--fg);
}

.difficulty-card-medium {
  border-color: #ffaa0033;
}

.difficulty-card-medium legend {
  color: var(--accent-warn);
}

.difficulty-card-hard {
  border-color: #ff444433;
}

.difficulty-card-hard legend {
  color: var(--accent-hit);
}

.fleet-list {
  list-style: none;
  padding-left: 0;
}

.fleet-list li {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.fleet-list li strong {
  display: inline-block;
  width: 120px;
}

.fleet-list li::before {
  display: none;
}

.seo-blocks {
  display: inline-flex;
  gap: 2px;
}

.seo-block {
  width: 12px;
  height: 12px;
  background: #00ff8044;
  border: 1px solid var(--fg-subtle);
  border-radius: 1px;
}

/* ===== Stats Dashboard ===== */
.stats-dashboard {
  width: 100%;
  max-width: 400px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  border: 1px solid var(--fg-ghost);
  padding: 12px 8px;
  text-align: center;
}

.stat-value {
  font-size: 22px;
  color: var(--fg);
  text-shadow: 0 0 6px var(--fg-subtle);
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: #00ff8044;
  text-transform: uppercase;
}

.stats-section-heading {
  font-size: 10px;
  letter-spacing: 2px;
  color: #00ff8055;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #00ff8011;
}

.stats-modes {
  margin-bottom: 20px;
}

.stats-mode-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid #00ff800a;
}

.stats-mode-label {
  color: var(--fg-dim);
  letter-spacing: 1px;
}

.stats-mode-value {
  color: var(--fg-dim);
}

.stats-history {
  margin-bottom: 20px;
}

.stats-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid #00ff800a;
  gap: 8px;
}

.history-result {
  font-weight: bold;
  width: 20px;
  text-align: center;
}

.history-win {
  color: var(--fg);
}

.history-loss {
  color: var(--accent-hit);
}

.history-mode {
  color: var(--fg-dim);
  letter-spacing: 1px;
  flex: 1;
}

.history-detail {
  color: var(--fg-dim);
  font-size: 11px;
}

.stats-achievements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.achievement {
  border: 1px solid var(--fg-ghost);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.achievement-unlocked {
  border-color: var(--fg-faint);
}

.achievement-unlocked .achievement-name {
  color: var(--fg);
}

.achievement-locked {
  opacity: 0.4;
}

.achievement-name {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fg-dim);
}

.achievement-desc {
  font-size: 9px;
  color: var(--fg-faint);
}

.menu-secondary-buttons {
  display: flex;
  gap: 10px;
}

/* ===== Footer ===== */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

.site-footer a {
  color: var(--fg-subtle);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-decoration: underline;
  transition: color 0.2s;
}

.site-footer a:hover {
  color: var(--fg-dim);
}

/* ===== Notification ===== */
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  border: 1px solid var(--fg);
  padding: 8px 16px;
  z-index: 50;
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
  animation: fadeOut 2s forwards;
}

.notification::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--fg);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

/* ===== Ship Status ===== */
.ship-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  margin-top: 12px;
  color: var(--fg-dim);
}

.ship-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ship-status-name {
  width: 52px;
  color: #00ff8088;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.ship-status-name.sunk {
  color: #ff003366;
  text-decoration: line-through;
}

.ship-status-blocks {
  display: flex;
  gap: 2px;
}

.ship-block {
  width: 8px;
  height: 8px;
  background: var(--fg-subtle);
  border: 1px solid #00ff8055;
}

.ship-block.hit {
  background: #ff003344;
  border-color: #ff003366;
}

.ship-sunk-label {
  color: #ff003366;
  font-size: 8px;
  letter-spacing: 1px;
}

/* Sunk tracker under enemy board */
.sunk-tracker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  min-height: 20px;
}

.sunk-ship-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.sunk-ship-blocks {
  display: flex;
  gap: 2px;
}

.sunk-block {
  width: 12px;
  height: 12px;
  background: #ff444466;
  border: 1px solid #ff444444;
  border-radius: 1px;
}

.sunk-ship-name {
  font-size: 8px;
  letter-spacing: 1px;
  color: #ff444488;
}

/* Difficulty badge in status bar */
.difficulty-badge {
  font-size: 9px;
  letter-spacing: 2px;
  padding: 1px 8px;
  border: 1px solid;
  margin-top: 2px;
}

.badge-easy {
  color: var(--fg);
  border-color: #00ff8044;
}

.badge-medium {
  color: var(--accent-warn);
  border-color: #ffaa0044;
}

.badge-hard {
  color: var(--accent-hit);
  border-color: #ff444444;
}

/* ===== Animations ===== */
@keyframes blink {
  from { opacity: 1; }
  to   { opacity: 0.3; }
}


@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes fadeOut {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Colorblind Patterns ===== */
.colorblind .cell.hit {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    #ff003344 3px,
    #ff003344 5px
  );
}

.colorblind .cell.miss {
  background-image: radial-gradient(
    circle,
    #ffffff33 1px,
    transparent 1px
  );
  background-size: 6px 6px;
}

.colorblind .cell.sunk {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      #ff003355 3px,
      #ff003355 5px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      #ff003355 3px,
      #ff003355 5px
    );
}

.colorblind .cell.ship {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    #00ff8022 3px,
    #00ff8022 5px
  );
}

/* ===== Reduce Motion ===== */
.reduce-motion *:not(body):not(.heading-icon):not(.notification),
.reduce-motion *:not(body):not(.heading-icon)::before,
.reduce-motion *:not(body):not(.heading-icon):not(.notification)::after {
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  transition-duration: 0.001s !important;
}

.reduce-motion #gameover-title.defeat {
  filter: none;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  #main-title {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .nav-brand {
    font-size: 12px;
    letter-spacing: 2px;
  }

  #top-nav {
    z-index: 9999;
  }

  .notification {
    z-index: 10000;
  }

  .nav-hamburger {
    display: block;
  }

  .nav-controls {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--fg-faint);
    box-shadow: 0 4px 12px rgba(0,0,0,0.8);
    padding: 12px 20px;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
  }

  .nav-controls.open {
    display: flex;
  }

  .nav-controls .nav-btn {
    width: 100%;
    text-align: center;
    padding: 8px 12px;
  }

  .nav-controls .nav-username {
    text-align: center;
    justify-content: center;
  }

  .room-code {
    font-size: 28px;
    letter-spacing: 6px;
  }

  .game-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-bottom: calc(25vw + 50px + env(safe-area-inset-bottom, 0px));
  }

  .board-column-primary {
    width: 100%;
  }

  .board-large {
    width: 100%;
  }

  #screen-placement.active {
    height: calc(100dvh - 50px);
    display: flex;
    flex-direction: column;
    padding: 6px 10px 16px;
    box-sizing: border-box;
    overflow: hidden;
  }

  #screen-placement h2 {
    font-size: 12px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .placement-hint {
    font-size: 9px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .placement-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    min-height: 0;
  }

  .placement-board-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 1;
    min-height: 0;
  }

  #board-placement {
    width: min(100%, calc(100dvh - 300px));
    max-width: 100%;
  }

  .placement-controls {
    gap: 4px;
    margin-top: 0;
    flex-shrink: 0;
  }

  .placement-controls .btn-terminal {
    font-size: 10px;
    padding: 5px 8px;
  }

  .ship-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .ship-item {
    gap: 3px;
    padding: 4px 8px;
    margin-bottom: 0;
    font-size: 10px;
  }

  .ship-block {
    width: 10px;
    height: 10px;
  }

  .key-hint {
    display: none;
  }

  .btn-drop-mobile {
    display: inline-block;
  }

  .game-container,
  .menu-container {
    padding: 12px;
  }

  .btn-terminal {
    font-size: 12px;
    padding: 7px 12px;
  }

  .board-column-secondary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg);
    border-top: 1px solid var(--fg-subtle);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
  }

  .board-column-secondary .board-label {
    display: none;
  }

  .board-column-secondary .board-small {
    width: 25vw;
    min-width: 80px;
    max-width: 110px;
    flex-shrink: 0;
    pointer-events: none;
    margin: 0;
    perspective: none;
    transform-style: flat;
    overflow: hidden;
  }

  .board-column-secondary .board-small .cell {
    font-size: 0;
    text-shadow: none;
    overflow: hidden;
    transition: none;
  }

  .board-column-secondary .board-small .cell.wave {
    animation: none;
    transform: none;
  }

  .board-column-secondary .ship-status {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
    margin-top: 0;
  }

}