/* ═══════════════════════════════════════════════════════════════════
   TEEKO — THE LAB
   style.css  (same theme as connect4, adapted for 5×5 board + two visualizations)
═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════
   1. RESET & BASE
   ═══════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: #fafafa;
  font-family: 'Courier New', monospace;
  height: 100%;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════
   2. LAB BACKGROUND
   ═══════════════════════════════════════════════ */

.grid-bg {
  min-height: 100vh;
  background-color: #fafafa;
  background-image:
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.12) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  animation: grid-drift 120s linear infinite;
  position: relative;
}

@keyframes grid-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 8px 8px, 12px 12px, 30px 30px, 45px 45px; }
}

.grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.18;
  mix-blend-mode: multiply;
}

.grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 100% 3px;
  opacity: 0.03;
  animation: scanline-flicker 10s steps(1, end) infinite;
}

@keyframes scanline-flicker {
  0%   { opacity: 0.02; }
  4%   { opacity: 0.04; }
  6%   { opacity: 0.01; }
  100% { opacity: 0.02; }
}


/* ═══════════════════════════════════════════════
   3. LAB STRUCTURAL UI
   ═══════════════════════════════════════════════ */

.lab-page {
  height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.5rem 1rem;
  overflow: hidden;
}

.lab-panel {
  background: #fff;
  border: 1px solid #1a1a1a;
  max-width: 1120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.lab-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
}

.lab-header-center { text-align: center; }

.lab-eyebrow {
  font-family: 'Courier New', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.2rem;
}

.lab-title {
  font-family: 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  line-height: 1;
}

.lab-rule {
  width: 100%;
  height: 1px;
  background: #1a1a1a;
}

.lab-btn {
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-decoration: none;
  border: 1px solid #1a1a1a;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  display: inline-block;
}

.lab-btn:hover { background: #1a1a1a; color: #fff; }

.lab-btn--active { background: #1a1a1a; color: #fff; }

.lab-help-btn {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a1a1a;
  background: transparent;
  border: 1px solid #1a1a1a;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}

.lab-help-btn:hover { background: #1a1a1a; color: #fff; }


/* ═══════════════════════════════════════════════
   4. STATUS BAR
   ═══════════════════════════════════════════════ */

.lab-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1rem;
  background: #fafafa;
}

.lab-label {
  font-family: 'Courier New', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #999;
}

.lab-status-text {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1a1a1a;
  font-weight: 700;
}


/* ═══════════════════════════════════════════════
   5. MAIN TWO-COLUMN LAYOUT
   ═══════════════════════════════════════════════ */

.lab-main {
  display: grid;
  grid-template-columns: 1fr 400px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════
   6. GAME SECTION
   ═══════════════════════════════════════════════ */

.game-section {
  padding: 0.75rem 1rem;
  border-right: 1px solid #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
}

/* Settings row: mode + first-color toggles */
.game-settings {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}

.game-settings-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Board ── */
.board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  border: 1px solid #1a1a1a;
  /* Stay square and never taller than the viewport minus all chrome */
  width: min(100%, calc(100vh - 230px));
  aspect-ratio: 1;
  background: #e8e8e8;
  gap: 1px;
}

.board-cell {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8%;
  cursor: pointer;
  position: relative;
  transition: background 80ms ease;
}

.board-cell:hover { background: #f4f4f4; }

/* Valid move destination indicator */
.board-cell--valid-dst::after {
  content: '';
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: rgba(26,26,26,0.25);
  border: 1px solid rgba(26,26,26,0.4);
  pointer-events: none;
  animation: dst-pulse 800ms ease-in-out infinite;
}

@keyframes dst-pulse {
  0%, 100% { transform: scale(0.75); opacity: 0.5; }
  50%       { transform: scale(1.25); opacity: 1; }
}

.board-cell--valid-dst:hover { background: #eee; }

/* ── Pieces ── */
.piece {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: transparent;
  transition: background 100ms ease, border-color 100ms ease;
  position: relative;
}

.piece--player {
  background: #1a1a1a;
  border-color: #1a1a1a;
}

.piece--ai {
  background: #b91c1c;
  border-color: #b91c1c;
}

.piece--win {
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.75);
}

/* Selected piece ring */
.piece--selected {
  box-shadow: 0 0 0 3px #1a1a1a, inset 0 0 0 2px rgba(255,255,255,0.5);
  animation: selection-pulse 900ms ease-in-out infinite;
}

@keyframes selection-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(26,26,26,0.5), inset 0 0 0 2px rgba(255,255,255,0.3); }
  50%       { box-shadow: 0 0 0 3px rgba(26,26,26,1),   inset 0 0 0 2px rgba(255,255,255,0.7); }
}

/* Drop animation */
@keyframes piece-drop {
  0%   { transform: scale(0.45); opacity: 0.5; }
  65%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

.piece--drop { animation: piece-drop 180ms ease-out forwards; }

/* Phase transition shimmer */
@keyframes phase-shimmer {
  0%   { opacity: 1; }
  30%  { opacity: 0.4; }
  60%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { opacity: 1; }
}

.piece--phase-shimmer { animation: phase-shimmer 500ms ease-out forwards; }


/* ── Controls row ── */
.game-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.lab-legend {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Courier New', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #666;
}

.legend-piece {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-piece.player-piece { background: #1a1a1a; }
.legend-piece.ai-piece     { background: #b91c1c; }


/* ═══════════════════════════════════════════════
   7. VISUALIZER SECTION
   ═══════════════════════════════════════════════ */

.visualizer-section {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  overflow-y: auto;
  position: relative;
}

.vis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 1rem;
}

.vis-badge {
  font-family: 'Courier New', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #aaa;
  border: 1px solid #ccc;
  padding: 0.15rem 0.45rem;
}

/* ── Difficulty controls ── */
.vis-difficulty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 1rem;
}

.vis-difficulty-btns {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.vis-advanced-toggle {
  margin-left: 0.6rem;
  font-size: 0.52rem;
  color: #999;
  border-color: #bbb;
  padding: 0.2rem 0.45rem;
  letter-spacing: 0.1em;
}

.vis-advanced-toggle:hover { background: #555; border-color: #555; color: #fff; }

.vis-difficulty-advanced {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1rem;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
}

.vis-difficulty-advanced.open { display: flex; }

#depth-slider { flex: 1; accent-color: #1a1a1a; cursor: pointer; height: 2px; }

/* ── Stats grid ── */
.vis-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #e8e8e8;
  gap: 1px;
  border-bottom: 1px solid #1a1a1a;
}

.vis-stat { padding: 0.35rem 0.75rem; background: #fff; }

.vis-stat-label {
  font-family: 'Courier New', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.15rem;
}

.vis-stat-value {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.04em;
}

/* ── Heatmap subsystem ── */
.vis-heatmap-section {
  border-bottom: 1px solid #1a1a1a;
}

.vis-heatmap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 1rem;
  border-bottom: 1px solid #e8e8e8;
}

.vis-heatmap-body {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0.75rem;
  align-items: flex-start;
}

.vis-heatmap-body canvas {
  display: block;
  flex-shrink: 0;
  border: 1px solid #e8e8e8;
}

.vis-heatmap-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.vis-heatmap-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Courier New', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
}

.vis-heatmap-legend-swatch {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px solid #ddd;
}

/* ── Pathfinder subsystem ── */
.vis-pathfinder-section {
  border-bottom: 1px solid #1a1a1a;
}

.vis-pathfinder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 1rem;
  border-bottom: 1px solid #e8e8e8;
}

.vis-pathfinder-body {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0.75rem;
  align-items: flex-start;
}

.vis-pathfinder-body canvas {
  display: block;
  flex-shrink: 0;
  border: 1px solid #e8e8e8;
}

.vis-pathfinder-desc {
  font-family: 'Courier New', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  line-height: 1.65;
  color: #999;
  padding-top: 0.15rem;
}

/* ── Phase tracker ── */
.vis-phase-tracker {
  padding: 0.25rem 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #555;
  border-bottom: 1px solid #e8e8e8;
}

/* ── Log ── */
.vis-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 1rem;
  border-bottom: 1px solid #1a1a1a;
}

.vis-log {
  flex: 1;
  overflow-y: auto;
  max-height: 90px;
  padding: 0.25rem 0;
}

.log-entry {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.5rem;
  padding: 0.28rem 1rem;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.5;
}

.log-entry:last-child { border-bottom: none; }

.log-timestamp {
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  color: #bbb;
  white-space: nowrap;
  letter-spacing: 0.05em;
  padding-top: 0.05rem;
}

.log-message {
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #444;
}

.log-entry--player  .log-message { color: #1a1a1a; font-weight: 700; }
.log-entry--ai      .log-message { color: #b91c1c; font-weight: 700; }
.log-entry--system  .log-message { color: #888; font-style: italic; }
.log-entry--analysis .log-message { color: #555; letter-spacing: 0.06em; }
.log-entry--win     .log-message { color: #1a1a1a; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }


/* ═══════════════════════════════════════════════
   8. FOOTER
   ═══════════════════════════════════════════════ */

.lab-footer {
  padding: 0.45rem 1rem;
  text-align: center;
}


/* ═══════════════════════════════════════════════
   9. HELP OVERLAY
   ═══════════════════════════════════════════════ */

.lab-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem 1rem;
  cursor: pointer;
}

.lab-overlay.hidden { display: none; }

.lab-overlay .lab-panel {
  max-width: 520px;
  padding: 1.75rem 2rem 1.5rem;
  cursor: default;
}

.lab-help-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: #444;
}

.lab-help-metrics {
  border: 1px solid #e8e8e8;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: #fafafa;
}

.lab-help-metric-title {
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: #999;
  margin-bottom: 0.1rem;
}

.lab-help-metric-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.63rem;
  line-height: 1.5;
}

.lab-help-metric-icon { font-weight: 700; color: #1a1a1a; }

.lab-help-tip { font-size: 0.6rem; color: #999; font-style: italic; }

.lab-actions { display: flex; justify-content: flex-end; }

.lab-action-btn {
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  padding: 0.5rem 1.75rem;
  cursor: pointer;
  transition: background 140ms ease;
}

.lab-action-btn:hover { background: #333; }


/* ═══════════════════════════════════════════════
   10. DESIGN POLISH & INTERACTIVITY
   ═══════════════════════════════════════════════ */

/* Blinking cursor on status text */
.lab-status-text::after {
  content: '_';
  animation: cursor-blink 1.1s step-end infinite;
  margin-left: 2px;
  opacity: 0.7;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0; }
}

/* Piece interactivity */
.piece--player { cursor: grab; }
.piece--player:active { cursor: grabbing; }
.piece--player:hover  { filter: brightness(0.78); }
.piece--ai:hover      { filter: brightness(0.82); }

/* Dragging ghost */
.piece--dragging { opacity: 0.35; }

/* Cell drop-target highlight during drag */
.board-cell--drag-over { background: #f0f0f0 !important; }

/* Win piece golden pulse */
.piece--win {
  animation: win-pulse 700ms ease-in-out infinite alternate;
}

@keyframes win-pulse {
  from { box-shadow: inset 0 0 0 3px rgba(255,255,255,0.75),  0 0 0 0 rgba(255,210,0,0); }
  to   { box-shadow: inset 0 0 0 3px rgba(255,255,255,1),     0 0 12px 3px rgba(255,210,0,0.35); }
}

/* Log entry slide-in */
.log-entry {
  animation: log-slide 180ms ease-out both;
}

@keyframes log-slide {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Turn counter pop */
#turn-count { display: inline-block; }

.count-pop {
  animation: count-pop 280ms ease-out forwards;
}

@keyframes count-pop {
  0%   { transform: scale(1.7); opacity: 0.6; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Subtle scan line sweep over the visualizer */
.visualizer-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 25%;
  background: linear-gradient(transparent, rgba(255,255,255,0.04) 50%, transparent);
  animation: vis-scan 9s linear infinite;
  pointer-events: none;
  z-index: 0;
  top: -25%;
}

@keyframes vis-scan {
  0%   { top: -25%; }
  100% { top: 110%; }
}


/* ═══════════════════════════════════════════════
   11. MOBILE RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Page / scroll ── */
  html, body {
    overflow: auto;
    height: auto;
    min-height: 100%;
  }

  .lab-page {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 0.35rem;
    align-items: flex-start;
  }

  .lab-panel {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  /* ── Header ── */
  .lab-header {
    padding: 0.5rem 0.65rem;
    gap: 0.4rem;
  }

  .lab-eyebrow {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  /* Hide long eyebrow text in the header on very small screens */
  .lab-header-center .lab-eyebrow {
    display: none;
  }

  /* ── Status bar ── */
  .lab-status-bar {
    padding: 0.35rem 0.65rem;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .lab-status-text {
    font-size: 0.65rem;
  }

  /* ── Main layout: single column ── */
  .lab-main {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  /* ── Game section ── */
  .game-section {
    border-right: none;
    border-bottom: 1px solid #1a1a1a;
    padding: 0.65rem;
    overflow: visible;
    justify-content: flex-start;
    gap: 0.6rem;
  }

  /* Board: square, fills available width */
  .board {
    width: min(100%, calc(100vw - 1.7rem));
  }

  /* Settings row */
  .game-settings {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Game controls row */
  .game-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* ── Touch-friendly buttons ── */
  .lab-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.65rem;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .lab-help-btn {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }

  /* ── Visualizer section ── */
  .visualizer-section {
    overflow: visible;
    background: #fff;
  }

  /* Heatmap and pathfinder: let canvas sit on its own line, legend wraps below */
  .vis-heatmap-body,
  .vis-pathfinder-body {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .vis-heatmap-body canvas,
  .vis-pathfinder-body canvas {
    flex-shrink: 0;
  }

  .vis-heatmap-legend,
  .vis-pathfinder-desc {
    flex: 1 1 100%;
    padding-top: 0;
  }

  /* Difficulty row */
  .vis-difficulty {
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
  }

  .vis-difficulty-btns {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  /* Stats grid: 2×2 stays, just tighter padding */
  .vis-stat {
    padding: 0.3rem 0.5rem;
  }

  /* Game log */
  .vis-log {
    max-height: 160px;
  }

  /* Phase tracker */
  .vis-phase-tracker {
    padding: 0.25rem 0.65rem;
  }

  /* Log header */
  .vis-log-header {
    padding: 0.25rem 0.65rem;
  }

  /* ── Help overlay ── */
  .lab-overlay {
    padding: 0.75rem;
    align-items: flex-start;
    overflow-y: auto;
  }

  .lab-overlay .lab-panel {
    padding: 1.1rem 1rem 0.9rem;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }

  .lab-help-metric-row {
    grid-template-columns: 2.75rem 1fr;
    font-size: 0.62rem;
  }

  .lab-action-btn {
    width: 100%;
    text-align: center;
    padding: 0.65rem 1rem;
  }

  .lab-actions {
    justify-content: stretch;
  }

  /* ── Footer ── */
  .lab-footer {
    padding: 0.35rem 0.65rem;
  }
}