/* ═══════════════════════════════════════════════════════════════════════════
   Battle AIrena — Notebook Theme (shared)
   Paper-and-pen aesthetic. Scoped under body.theme-retro.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

@layer theme {

/* ── Variable Overrides ── */
body.theme-retro {
  --bg:         #f5f0e1;
  --panel:      #faf6eb;
  --border:     #c8bfa0;
  --text:       #2a2a2a;
  --dim:        #7a7060;
  --accent1:    #1a4b8c;
  --accent2:    #b83214;
  --success:      #2d6a2d;
  --error:        #c41e3a;
  --damage:   #c0392b;
  --warning:     #9e7c16;
  --glow:       1px 1px 0px rgba(26,75,140,0.15);
  --glow2:      1px 1px 0px rgba(184,50,20,0.15);
  --mode-practice:   #2d6a2d;
  --mode-ranked:     #b8860b;
  --mode-tournament: #9e7c16;

  font-family: 'Patrick Hand', cursive, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ── Paper Background ── */
body.theme-retro::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(180,170,145,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(160,150,125,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(170,160,135,0.08) 0%, transparent 50%);
  background-size: 100% 100%;
  opacity: 1;
}

/* ── Header ── */
body.theme-retro header {
  background: linear-gradient(180deg, rgba(26,75,140,0.06) 0%, transparent 100%);
  border-bottom: 2px solid var(--border);
}

body.theme-retro .logo {
  font-family: 'Patrick Hand', cursive;
  letter-spacing: 2px;
  text-shadow: var(--glow);
  font-size: 24px;
  font-weight: 400;
}

/* ── Panels ── */
body.theme-retro .panel {
  background: var(--panel);
  border: none;
  border-radius: 0;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
}

body.theme-retro .panel-title {
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--accent1);
  border-bottom: 1px solid var(--border);
}

body.theme-retro .panel-title::before {
  content: '\2022';
  color: var(--accent2);
  font-size: 12px;
}

body.theme-retro .panel-placeholder {
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
}

/* ── Buttons ── */
body.theme-retro .btn {
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 3px;
}

body.theme-retro .btn-accent:hover { box-shadow: none; background: rgba(26,75,140,0.1); }
body.theme-retro .btn-green:hover  { background: rgba(45,106,45,0.1); }
body.theme-retro .btn-red:hover    { background: rgba(196,30,58,0.1); }
body.theme-retro .btn-orange:hover { box-shadow: none; background: rgba(184,50,20,0.1); }
body.theme-retro .btn-sm { font-size: 12px; }

/* ── Connection Badge ── */
body.theme-retro .connection-badge {
  font-family: 'Patrick Hand', cursive;
  font-size: 13px;
  letter-spacing: 1px;
}

body.theme-retro .conn-dot { box-shadow: none; }
body.theme-retro .connection-badge.connected .conn-dot { box-shadow: none; background: var(--success); }
body.theme-retro .connection-badge.error .conn-dot     { box-shadow: none; background: var(--error); }

/* ── Game Board — graph paper ── */
body.theme-retro .board {
  border: 2px solid var(--accent1);
  padding: 0;
  background: var(--panel);
  border-radius: 2px;
  background-image:
    linear-gradient(var(--accent1) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent1) 1px, transparent 1px);
  background-size: calc(var(--cell-size) + 1px) calc(var(--cell-size) + 1px);
  background-position: -1px -1px;
  background-color: var(--panel);
}

body.theme-retro .cell { background: transparent; border: none; }
body.theme-retro .cell[data-occupant="ship"][data-state="untouched"] {
  background: rgba(26,75,140,0.08);
  border: none;
}
/* Own-board ghost cells: override the team-color muted fill with a
   pencil-grey wash so white placeholder teams stay visible on paper. */
body.theme-retro .board[data-board-owner="self"] .cell[data-occupant="ship"][data-state="untouched"] {
  background: rgba(80,70,55,0.18);
  border-color: rgba(80,70,55,0.3);
}

/* Bolder sunk perimeter on the paper theme — reads as a thick marker
   stroke against the pencil-grey ghost cells. */
body.theme-retro .board-svg-overlay .ship-perim-sunk {
  stroke-width: 3;
}

body.theme-retro .cell[data-occupant="ship"][data-state="shot"] {
  background: rgba(184,50,20,0.08);
  border: none;
}
body.theme-retro .cell[data-state="shot"]::after {
  content: '\2715';
  color: var(--status-hit-color);
  font-size: 15px;
  font-weight: bold;
  text-shadow: none;
  font-family: 'Patrick Hand', cursive;
}

body.theme-retro .cell[data-occupant="empty"][data-state="shot"] {
  background: transparent;
}
body.theme-retro .cell[data-occupant="empty"][data-state="shot"]::after {
  content: '';
  width: 4px;
  height: 3px;
  background: var(--accent1);
  opacity: 0.4;
  border-radius: 60% 40% 50% 30%;
  transform: rotate(-15deg);
  box-shadow: 0.5px 0.5px 0.5px rgba(26,75,140,0.2);
}

body.theme-retro .cell[data-state="sunk"] {
  background: rgba(196,30,58,0.1);
  border: none;
}
body.theme-retro .cell[data-state="sunk"]::after {
  content: '\2715';
  color: var(--status-sunk-color);
  font-size: 15px;
  font-weight: bold;
  font-family: 'Patrick Hand', cursive;
}

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

@keyframes retro-cellflash {
  0%   { background: rgba(26,75,140,0.25); }
  100% { background: transparent; }
}

/* ── Board Labels ── */
body.theme-retro .board-label {
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  position: relative;
}

body.theme-retro .board-label.active { text-shadow: none; }

body.theme-retro .board-label.active::after {
  content: '\25CF';
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  color: currentColor;
}

/* ── Fleet Status ── */
/* K=2 is now the base default — no retro override needed here. */
body.theme-retro .ship-seg { border: 1px solid var(--border); border-radius: 1px; }
body.theme-retro .ship-seg.intact { background: rgba(26,75,140,0.12); border-color: rgba(26,75,140,0.3); }
body.theme-retro .ship-seg.hit    { background: rgba(184,50,20,0.3);  border-color: var(--status-hit-color); }
body.theme-retro .ship-seg.sunk   { background: rgba(196,30,58,0.25); border-color: var(--status-sunk-color); }

body.theme-retro .ship-label {
  font-family: 'Patrick Hand', cursive;
  /* Font-size inherits from base (calc(--half-cell * 0.9)) so labels
     shrink with --cell-size on small screens. Patrick Hand was 13px
     under the old 14×8px segment era — that overflowed the half-cell
     row once autofit dropped cell-size below ~24px. */
}

/* ── Board Legend ── */
body.theme-retro .board-legend {
  font-family: 'Patrick Hand', cursive;
  font-size: 13px;
  color: var(--dim);
}

body.theme-retro .legend-sep { color: var(--dim); }

/* ── Score ── */
body.theme-retro .match-score-header { font-family: 'Patrick Hand', cursive; }

body.theme-retro .score-num {
  font-family: 'Patrick Hand', cursive;
  font-weight: 400;
}

body.theme-retro .vs-text {
  font-family: 'Patrick Hand', cursive;
  font-weight: 400;
  text-shadow: none;
}

body.theme-retro .info-item {
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
}

/* ── Move Log ── */
body.theme-retro .log-entry {
  border-bottom: 1px solid rgba(200,191,160,0.3);
  font-family: 'Patrick Hand', cursive;
}

body.theme-retro .log-turn   { font-family: 'Patrick Hand', cursive; font-size: 14px; }
body.theme-retro .log-team   { font-size: 15px; }
body.theme-retro .log-move   { font-family: 'Patrick Hand', cursive; font-size: 14px; }
body.theme-retro .log-result { font-family: 'Patrick Hand', cursive; font-size: 14px; }
body.theme-retro .log-result.sunk { text-shadow: none; font-weight: normal; }
body.theme-retro .log-inner::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Mode Badges ── */
body.theme-retro .badge-mode {
  font-family: 'Patrick Hand', cursive;
  font-size: 12px;
  font-weight: 400;
  border-radius: 3px;
}

body.theme-retro .badge-mode-practice   { background: rgba(45,106,45,0.1);  border-color: rgba(45,106,45,0.3); }
body.theme-retro .badge-mode-ranked     { background: rgba(184,134,11,0.1); border-color: rgba(184,134,11,0.3); }
body.theme-retro .badge-mode-tournament { background: rgba(158,124,22,0.1); border-color: rgba(158,124,22,0.3); }

/* ── Version Label ── */
body.theme-retro .version-label {
  font-family: 'Patrick Hand', cursive;
  font-size: 13px;
}

/* ── Scrollbars ── */
body.theme-retro ::-webkit-scrollbar { width: 6px; }
body.theme-retro ::-webkit-scrollbar-track { background: rgba(200,191,160,0.15); }
body.theme-retro ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

}