/* Custom CSS Custom Properties for Pointworks Malachite Theme */
:root {
  /* The control column's width, in ONE place. .sidebar-panel consumes it directly and
     .board-wrapper subtracts it, so the two numbers that used to encode this one fact
     (384 and 420) can no longer drift apart. Widened 384 -> 440 on 8/29 to give row 19
     room for the training-seed field. ⚠️ MEASURED, not estimated: the row needs 401px of
     USABLE width, and usable is the variable minus ~24px — 6px of padding-right plus the
     ~15-18px vertical scrollbar that .sidebar-panel's overflow-y:auto always shows here.
     Overflow only clears at 425px; 440 leaves ~15px of real slack, enough to survive a
     wider scrollbar on another platform. (This is the same scrollbar that once tipped the
     dice station past 384px — see the CLAUDE.md note.) */
  --sidebar-w: 440px;
  --bg-app: #060908;             /* Dark forest green-black canvas background */
  --bg-board-frame: #7d492a;     /* Saddle brown leather case frame */
  --bg-board-felt: #006c4b;      /* Deep rich forest green board field */
  --point-light: #2a4d7c;        /* Premium dark slate blue points */
  --point-dark: #003730;         /* Deep malachite-teal dark points */
  --point-highlight: rgba(229, 193, 88, 0.35); /* Glowing gold move highlight */
  
  /* Pearlized Ivory Checker Gradient */
  --checker-p1-bg: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(248, 245, 238, 0.85) 30%, rgba(230, 224, 210, 0.8) 60%, rgba(185, 178, 160, 0.95) 100%),
                   repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 8px),
                   repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 3px, transparent 3px, transparent 12px);
  --checker-p1-border: rgba(255, 255, 255, 0.8);
  --checker-p1-shadow: 0 4px 8px rgba(0, 0, 0, 0.45), inset 0 -2px 5px rgba(0, 0, 0, 0.15), inset 0 3px 6px rgba(255, 255, 255, 0.8), 0 0 1px rgba(0, 0, 0, 0.5);
  
  /* Marbled Ruby Red Checker Gradient */
  --checker-p2-bg: radial-gradient(circle at 25% 25%, #ff4d4d 0%, #b30000 35%, #590000 70%, #2a0000 100%),
                   repeating-radial-gradient(circle at 70% 30%, rgba(255, 77, 77, 0.3) 0px, rgba(179, 0, 0, 0.4) 10px, rgba(89, 0, 0, 0.2) 20px, rgba(42, 0, 0, 0.8) 30px);
  --checker-p2-border: rgba(255, 77, 77, 0.55);
  --checker-p2-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.3), inset 0 3px 6px rgba(255, 255, 255, 0.25), 0 0 1px rgba(0, 0, 0, 0.8);

  --glass-bg: rgba(14, 21, 18, 0.75);
  --glass-border: rgba(255, 255, 255, 0.04);
  --glass-glow: rgba(0, 0, 0, 0.4);
  
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --accent-gold: #e5c158;
  --accent-red: #ef4444;          /* Vibrant red for player 2 */
  --accent-green: #10b981;
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-app);
  color: var(--text-primary);
  height: 100vh;
  height: 100dvh;          /* dynamic viewport: excludes iOS Safari's toolbars, so content isn't pushed under them */
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  padding: 0.5rem;
}

#app-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  box-sizing: border-box;
}

/* Header */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.logo-container h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge {
  font-size: 0.8rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  vertical-align: middle;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  background: rgba(229, 193, 88, 0.15);
  color: var(--accent-gold);
  border: 1px solid rgba(229, 193, 88, 0.3);
  margin-left: 0.5rem;
}

.player-turn-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.player1-turn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.player2-turn {
  background: rgba(16, 185, 129, 0.08);
  color: var(--accent-green);
  border: 1px solid rgba(16, 185, 129, 0.15);
}

/* Layout */
.game-layout {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.board-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 auto; /* Don't grow beyond the board's size */
  min-height: 0;
  min-width: 0;
}

/* Board Wrapper and Board */
.board-wrapper {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%), var(--bg-board-frame);
  border-radius: 14px;
  padding: 1.5vh;
  border: 4px solid rgba(0, 0, 0, 0.25);
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.85), 
     inset 0 0 15px rgba(0, 0, 0, 0.65), 
    inset 0 2px 4px rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* PERFECT SQUARE — set width only, let aspect-ratio derive height.
     The subtractions leave a small safety margin so the square is always a few px
     SMALLER than the space it sits in — otherwise sub-pixel/DPI rounding can make it
     ~1px too big and .game-layout's overflow:hidden shaves a border on some systems.
     Height budget: body has 0.5rem padding top+bottom (=1rem); we subtract 1.5rem to
     leave ~8px slack. Width chrome is the sidebar + gap 16 + body pad 16, so we subtract
     var(--sidebar-w) + 36px: 32px of real chrome plus a few px of buffer. Deriving it from
     the variable is the point — the old form hard-coded 420 against a 384px sidebar, and
     widening one without the other lets .game-layout's overflow:hidden shave the border. */
  aspect-ratio: 1;
  width: min(calc(100vh - 1.5rem), calc(100vw - var(--sidebar-w) - 36px)); /* Largest square that safely fits */
  width: min(calc(100dvh - 1.5rem), calc(100vw - var(--sidebar-w) - 36px)); /* dvh override (iOS Safari toolbar) */
  max-width: 100%;
  max-height: calc(100vh - 1.5rem); /* Explicit viewport calc — percentage is unreliable in flex */
  max-height: calc(100dvh - 1.5rem);
  
  box-sizing: border-box;
  flex-shrink: 1;
}

.sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 6px;
  min-height: 0;
}

.board {
  background-color: var(--bg-board-felt);
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 6fr 1fr 6fr; /* Left quadrant, Bar, Right quadrant */
  grid-template-rows: 1fr 1fr;       /* Top points row, Bottom points row */
  position: relative;
  box-shadow: 
    inset 0 15px 40px rgba(0, 0, 0, 0.8),
    inset 0 -15px 40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

/* Quadrants */
.quadrant {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 100%;
}

.quadrant-top-left {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.quadrant-top-right {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.quadrant-bottom-left {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.quadrant-bottom-right {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

/* Points (Triangles) */
.point {
  position: relative;
  height: 95%;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Background triangle drawing via pseudo-element to avoid clipping checkers */
.point::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

.point-top {
  align-self: start;
}

.point-bottom {
  align-self: end;
}

.point-top::before {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.point-bottom::before {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.point-light.point-top::before {
  background: linear-gradient(to bottom, var(--point-light) 0%, #172a45 100%);
}

.point-light.point-bottom::before {
  background: linear-gradient(to top, var(--point-light) 0%, #172a45 100%);
}

.point-dark.point-top::before {
  background: linear-gradient(to bottom, var(--point-dark) 0%, #00231e 100%);
}

.point-dark.point-bottom::before {
  background: linear-gradient(to top, var(--point-dark) 0%, #00231e 100%);
}

/* Highlight for moves applied to triangle background */
.point.highlight-source, .point.highlight-destination {
  cursor: pointer;
}

@keyframes pulse-highlight {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}

.point.highlight-destination::before {
  animation: pulse-highlight 1.5s infinite ease-in-out;
}

/* Source Point Highlight (White Glow) */
.point-top.highlight-source::before {
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.35) 100%) !important;
}
.point-bottom.highlight-source::before {
  background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.35) 100%) !important;
}

/* Destination Point Highlight (Gold Glow) */
.point-top.highlight-destination::before {
  background: linear-gradient(to bottom, var(--accent-gold) 0%, rgba(229, 193, 88, 0.35) 100%) !important;
}
.point-bottom.highlight-destination::before {
  background: linear-gradient(to top, var(--accent-gold) 0%, rgba(229, 193, 88, 0.35) 100%) !important;
}

/* Checkers Stacking Containers */
/* We will place absolute overlays inside each point for positioning checkers */
.checker-container {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto; /* Let parent point capture clicks/drags */
  z-index: 2;
  touch-action: none;
}

.point-top .checker-container {
  flex-direction: column;
  padding-top: 10px;
}

.point-bottom .checker-container {
  flex-direction: column-reverse;
  padding-bottom: 10px;
}

/* Central Bar */
.bar-divider {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.25) 100%), var(--bg-board-frame);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.85);
}

.bar-groove {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 6px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 1px 0 2px rgba(255,255,255,0.05), inset -1px 0 2px rgba(0,0,0,0.5);
}

.bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;        /* each player's bar area fills ~half the bar column */
  min-height: 60px;
  width: 100%;
  justify-content: center;
}

.bar-container.highlight-source {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) inset;
  cursor: pointer;
  pointer-events: auto;
}

/* Checkers Design */
.checker {
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid;
  position: relative;
  cursor: grab;
  pointer-events: auto; /* Enable interaction on checkers */
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
  user-select: none;
}

.checker::before {
  content: '';
  position: absolute;
  top: 15%; left: 15%; width: 70%; height: 70%;
  border-radius: 50%;
  border: 1px rgba(255, 255, 255, 0.25) dashed;
}

.checker::after {
  content: '';
  position: absolute;
  top: 35%; left: 35%; width: 30%; height: 30%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

/* Player 1 Checkers (White) */
.checker.player-1 {
  background: var(--checker-p1-bg);
  border-color: var(--checker-p1-border);
  box-shadow: var(--checker-p1-shadow);
}

.checker.player-1:hover {
  filter: brightness(1.1);
  box-shadow: var(--checker-p1-shadow), 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Player 2 Checkers (Red) */
.checker.player-2 {
  background: var(--checker-p2-bg);
  border-color: var(--checker-p2-border);
  box-shadow: var(--checker-p2-shadow);
}

.checker.player-2:hover {
  filter: brightness(1.1);
  box-shadow: var(--checker-p2-shadow), 0 0 10px var(--accent-green);
}

/* Checker Overlapping Stack Layout styling */
/* JS will apply absolute offsets if stack is very high. Here is base layout: */
.checker-stacked {
  margin-top: -15px; /* Default overlap */
  z-index: 5;
}

.checker.dragging {
  cursor: grabbing;
  opacity: 0.8;
  transform: scale(1.15);
  z-index: 1000 !important;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6) !important;
  pointer-events: none; /* Ensure drops work on elements underneath */
}


.sidebar-panel > .glass-card {
  flex-shrink: 0;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.8rem;
  box-shadow: var(--glass-glow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-card h2, .glass-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.25rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.player-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 0.2rem;
}

.p1-dot { background-color: #ffffff; box-shadow: 0 0 6px #ffffff; }
.p2-dot { background-color: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }

.player-name {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.score-box {
  font-size: 1.4rem;
  font-weight: 800;
  margin-top: 0.2rem;
}

.game-message {
  background: #14532d;                 /* dark green */
  color: #ff44dd;                      /* magenta */
  border-left: 3px solid #ff44dd;
  padding: 0.6rem 0.8rem;
  font-size: 1.02rem;                  /* ~20% larger */
  font-weight: 700;                    /* bold */
  line-height: 1.4;
  border-radius: 0 6px 6px 0;
  min-height: 50px;
  display: flex;
  align-items: center;
}

/* Dice Station */
.dice-station {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dice-container {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
  perspective: 600px;
}

/* Styling P2's red dice */
.player2-turn-active .die {
  background: radial-gradient(circle at 30% 30%, #ef4444 0%, #991b1b 60%, #450a0a 100%);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ffffff; /* White pips */
  box-shadow: 
    0 8px 16px rgba(239, 68, 68, 0.3), 
    inset 0 3px 5px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.4);
}

.die.rolling {
  animation: roll 0.6s ease-out;
}

.die-face {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 4px;
}

.die-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.die-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.4);
}

@keyframes roll {
  0% { transform: rotate(0deg) scale(1) translateY(0); }
  30% { transform: rotate(120deg) scale(1.15) translateY(-15px); }
  60% { transform: rotate(240deg) scale(0.9) translateY(5px); }
  100% { transform: rotate(360deg) scale(1) translateY(0); }
}

.dice-moves-list {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.move-token {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.move-token.used {
  opacity: 0.35;
  text-decoration: line-through;
  background: rgba(0, 0, 0, 0.2);
  border-color: transparent;
}

/* Doubling Cube Station */
.doubling-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0.8rem 0;
}

/* Custom Red-on-White Undo Button */
#btn-undo {
  background: #ffffff !important;
  color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

#btn-undo:disabled {
  background: rgba(255, 255, 255, 0.4) !important;
  color: rgba(239, 68, 68, 0.4) !important;
  box-shadow: none;
  cursor: not-allowed;
}

/* White Owns Cube */
.doubling-cube.owned-p1 {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d1d5db 60%, #9ca3af 100%);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Red Owns Cube */
.doubling-cube.owned-p2 {
  background: radial-gradient(circle at 30% 30%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%);
  border-color: rgba(239, 68, 68, 0.8);
}

/* A double has been offered and is awaiting accept/decline — pulsing gold glow.
   Ownership hasn't transferred yet, so the cube keeps its current owner colour
   (or neutral grey when centred); this glow is what signals the pending offer. */
.doubling-cube.double-pending {
  border-color: var(--accent-gold);
  animation: cube-pending-pulse 1s ease-in-out infinite;
}

@keyframes cube-pending-pulse {
  0%, 100% { box-shadow: 0 8px 16px rgba(0,0,0,0.6), 0 0 6px rgba(229,193,88,0.5); }
  50%      { box-shadow: 0 8px 16px rgba(0,0,0,0.6), 0 0 16px rgba(229,193,88,0.95); }
}

.doubling-cube:hover {
  transform: scale(1.05);
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.7), 
    inset 0 3px 6px rgba(255, 255, 255, 0.5), 
    inset 0 -3px 6px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(0, 180, 140, 0.6);
}

.doubling-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.stake-multiplier {
  font-weight: 700;
  color: var(--text-primary);
}

.stake-multiplier span {
  color: var(--accent-gold);
}

.cube-owner {
  color: var(--text-secondary);
}

.cube-owner span {
  font-weight: 600;
  color: var(--text-primary);
}

/* Bearing Off Stations */
.bear-off-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.bear-off-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.05);
}

.bear-off-zone.highlight-destination {
  border-color: var(--accent-gold);
  background: rgba(229, 193, 88, 0.05);
  cursor: pointer;
}

.bear-off-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.bear-off-tray {
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column-reverse; /* Stack upward */
  align-items: center;
  gap: 3px;
  padding: 5px;
}

/* Borne-off checkers are flattened slabs */
.borne-checker {
  width: 90%;
  height: 6.666%; /* Exactly 1/15th of the container */
  border-radius: 2px;
  border: 2px solid; /* Thicker standard border */
  border-bottom: 3px solid rgba(0, 0, 0, 0.7); /* Thicker dark line to show separation */
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin: 0 auto; /* Keep them centered */
  pointer-events: none; /* Prevents the slabs from interfering with drag-and-drop */
}

.borne-checker.player-1 {
  background: linear-gradient(to right, #ffffff, #dcdcdc);
  border-color: #c0c0c0;
}

.borne-checker.player-2 {
  background: linear-gradient(to right, #ef4444, #b91c1c);
  border-color: #991b1b;
}

/* Buttons */
.btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-buttons {
  display: flex;
  gap: 0.8rem;
  width: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #b89531 100%);
  color: #111;
  box-shadow: 0 4px 12px rgba(229, 193, 88, 0.25);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(229, 193, 88, 0.4);
}

.btn-primary:disabled {
  background: #2b3039;
  color: var(--text-secondary);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.btn-secondary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-danger {
  background: transparent;
  color: rgba(239, 68, 68, 0.7);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.game-footer {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--glass-border);
}

/* Dragging active helper */
.dragging-active .checker {
  opacity: 0.7;
}

/* Interactive Dice Container */
.dice-container.rollable {
  cursor: pointer;
}
.dice-container.rollable:hover .die {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(229, 193, 88, 0.3);
}

/* Drag-and-drop import (an AI personality OR a recorded game): the control column lights up
   ONLY while a file is dragged over it
   (class toggled in ui.js). Invisible the rest of the time, so it costs no sidebar space. The
   outline is drawn inset because the panel scrolls; `position: relative` anchors the label. */
.sidebar-panel.brain-drop-active {
  position: relative;
  outline: 3px dashed #e5c158;
  outline-offset: -6px;
  background: rgba(229, 193, 88, 0.10);
  border-radius: 8px;
}
.sidebar-panel.brain-drop-active::after {
  content: "Drop an AI or Game File!";
  position: sticky;
  top: 40%;
  display: block;
  margin: 0 auto;
  width: fit-content;
  padding: 0.5rem 0.9rem;
  background: rgba(20, 83, 45, 0.95);
  color: #e5c158;
  border: 2px solid #e5c158;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  pointer-events: none;   /* never swallow the drop itself */
  z-index: 50;
}

/* Waiting side of a network game: the dice on screen are the opponent's roll and this
   machine can't roll them, so drain the colour and fade them. One rule covers both the
   white and the red die styling, and it pairs with the "<X> is thinking" status line. */
.dice-container.waiting-opponent .die {
  filter: grayscale(1);
  opacity: 0.45;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Initial start of game roll-off dice styles (One white, one red) */
.initial-roll-off #die-1 {
  background-color: #fcfbf7 !important;
  color: #2b303c !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
.initial-roll-off #die-2 {
  background: radial-gradient(circle at 30% 30%, #ef4444 0%, #991b1b 60%, #450a0a 100%) !important;
  color: #ffffff !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  box-shadow: 
    0 8px 16px rgba(239, 68, 68, 0.3), 
    inset 0 3px 5px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Version Tag styling */
.version-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.2rem;
  opacity: 0.8;
}

/* Game History Station UI styling */
.history-station {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.history-list {
  min-height: 60px;
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}
.history-item {
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-item:hover {
  background: rgba(229, 193, 88, 0.1);
  border-color: rgba(229, 193, 88, 0.3);
  color: var(--accent-gold);
  transform: translateX(2px);
}
.history-empty {
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  padding: 0.5rem 0;
  font-size: 0.8rem;
}

/* Disable pointer events on other checkers during drag to make drop targets work cleanly */
.dragging-active .checker:not(.dragging) {
  pointer-events: none !important;
}
/* Dice Station */
.die {
  width: 60px; /* Increased from 50px */
  height: 60px; /* Increased from 50px */
  background-color: #fcfbf7; 
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.45), 
    inset 0 3px 5px rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem; /* Scaled up from 2rem */
  color: #2b303c; 
  font-weight: bold;
  user-select: none;
  transition: transform 0.6s ease;
}

/* Base Doubling Cube */
.doubling-cube {
  width: 66px; /* Increased from 55px */
  height: 66px; /* Increased from 55px */
  background: radial-gradient(circle at 30% 30%, #9ca3af 0%, #4b5563 60%, #1f2937 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.6), 
    inset 0 3px 6px rgba(255, 255, 255, 0.35), 
    inset 0 -3px 6px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.9rem; /* Increased from 1.6rem */
  font-weight: 800;
  color: var(--accent-gold); 
  text-shadow: 
    1px 1px 1px rgba(0,0,0,0.8),
    0 0 3px rgba(229, 193, 88, 0.5);
  user-select: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}

/* Sidebar Compact Overrides */
.sidebar-panel .die {
  width: 50px !important; /* Increased from 42px */
  height: 50px !important; /* Increased from 42px */
}

.sidebar-panel .doubling-cube {
  width: 50px !important; /* Increased from 42px */
  height: 50px !important; /* Increased from 42px */
  font-size: 1.44rem !important; /* Increased from 1.2rem */
}


/* Sidebar Compact Overrides */
.sidebar-panel {
  gap: 0.2rem !important;
}
.sidebar-panel .glass-card {
  padding: 0.2rem 0.5rem !important;
}
.sidebar-panel .score-display {
  margin-bottom: 0.3rem !important;
}
.sidebar-panel .player-score {
  padding: 0.3rem !important;
}
.sidebar-panel .score-box {
  font-size: 1.2rem !important;
}
.sidebar-panel .game-message {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.96rem !important;       /* ~20% larger than the previous 0.8rem */
  font-weight: 700 !important;         /* bold */
  margin-top: 0.2rem !important;
  /* Fixed at exactly three lines (line-height 1.4 => 4.2em) plus vertical padding,
     so the box never resizes as the message changes. The height is in em, so it
     grows automatically with the larger font. Was two lines, but the longer
     instruction lines (e.g. the host's pre-start Start/roll-off line) wrap to
     three and had their last row clipped by the overflow:hidden. */
  box-sizing: border-box;
  height: calc(4.2em + 0.6rem) !important;
  min-height: 0 !important;
  overflow: hidden;
  align-items: center;
}
.sidebar-panel .dice-container {
  margin: 0.3rem 0 !important;
  gap: 1rem !important;
}

.sidebar-panel .dice-moves-list {
  margin-bottom: 0.3rem !important;
}
.sidebar-panel .doubling-container {
  margin: 0.2rem 0 !important;
  gap: 1rem !important;
}

.sidebar-panel .bear-off-tracks {
  gap: 0.5rem !important;
}
.sidebar-panel .bear-off-zone {
  padding: 0.3rem !important;
}
.sidebar-panel .bear-off-tray {
  min-height: 80px !important;
}
.sidebar-panel .btn {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.8rem !important;
}

/* Margin Labels (Yellow in Brown Frame Padding) */
.board-labels-outer {
  display: grid;
  grid-template-columns: 6fr 1fr 6fr; /* Align with Left Q, Bar, Right Q */
  width: 100%;
  user-select: none;
  pointer-events: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-gold); /* Yellow (Gold) */
  box-sizing: border-box;
}

.quadrant-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
}

.bar-spacer {
  /* empty spacer */
}

.labels-top {
  margin-bottom: 8px;
}

.labels-bottom {
  margin-top: 8px;
}

/* --- Board View Rotations --- */
.board-wrapper {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.board-wrapper.view-red { transform: rotate(180deg); }
.board-wrapper.view-home { transform: rotate(90deg); }
.board-wrapper.view-outer { transform: rotate(-90deg); }
/* Magriel: white orientation mirrored left-right so the 24-point sits top-LEFT. */
.board-wrapper.view-magriel { transform: scaleX(-1); }

/* Counter-rotate margin labels to stay upright */
.board-labels-outer span {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.board-wrapper.view-red .board-labels-outer span { transform: rotate(-180deg); }
.board-wrapper.view-home .board-labels-outer span { transform: rotate(-90deg); }
.board-wrapper.view-outer .board-labels-outer span { transform: rotate(90deg); }
.board-wrapper.view-magriel .board-labels-outer span { transform: scaleX(-1); }

/* Counter-rotate checkers to preserve highlight/shadow lighting */
.board-wrapper.view-red .checker { transform: rotate(-180deg); }
.board-wrapper.view-red .checker.dragging { transform: rotate(-180deg) scale(1.15); }

.board-wrapper.view-home .checker { transform: rotate(-90deg); }
.board-wrapper.view-home .checker.dragging { transform: rotate(-90deg) scale(1.15); }

.board-wrapper.view-outer .checker { transform: rotate(90deg); }
.board-wrapper.view-outer .checker.dragging { transform: rotate(90deg) scale(1.15); }

.board-wrapper.view-magriel .checker { transform: scaleX(-1); }
.board-wrapper.view-magriel .checker.dragging { transform: scaleX(-1) scale(1.15); }

/* iPad/Mobile Touch Device Fix */
@media screen and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .board-wrapper {
    /* Simply add padding to account for Safari/Chrome UI bars */
    padding: 1vh !important;
  }

  /* Reduce label font size slightly so they don't get clipped */
  .board-labels-outer {
    font-size: 0.65rem !important;
  }
}

/* =========================================================
   RESPONSIVE LAYOUT LOGIC
   
   Tier 1 (default / wide): Board + sidebar side-by-side.
          Board = largest possible square. Sidebar scrolls internally.
   
   Tier 2 (max-aspect-ratio: 4/3, i.e. height < 150% of width):
          Sidebar goes below board. Whole page scrolls.
   
   Tier 3 (max-aspect-ratio: 2/3, i.e. height >= 150% of width):
          Sidebar goes below board. Page is locked; only sidebar scrolls.
          Board is always fully visible.
========================================================= */

/* 
   TIER 2: Window is square-ish or narrow — sidebar below board,
   whole window scrollable.
*/
@media (max-aspect-ratio: 4/3) {
  body {
    height: auto;
    max-height: none;
    overflow: auto; /* Full-page scrolling */
  }

  #app-container {
    height: auto;
  }

  .game-layout {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .board-area {
    height: auto;
    overflow: visible;
    flex: 0 0 auto;
    margin-bottom: 1rem;
  }

  .board-wrapper {
    aspect-ratio: 1;
    width: min(100vw - 1rem, 100vh - 1rem); /* Square = smaller of width/height */
    width: min(100dvw - 1rem, 100dvh - 1rem); /* dvh/dvw override (iOS Safari toolbar) */
    height: auto;
    max-width: 100%;
    max-height: none;
    margin: 0 auto; /* Center horizontally */
  }

  .sidebar-panel {
    width: 100%;
    height: auto;
    overflow-y: visible; /* Relies on full-page scroll */
    padding-right: 0;
  }
}

/* 
   TIER 3: Tall / portrait — sidebar below board,
   page locked, ONLY sidebar scrolls. Board always fully visible.
   (This overrides Tier 2 since it's more specific.)
*/
@media (max-aspect-ratio: 2/3) {
  body {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden; /* Lock page */
  }

  #app-container {
    height: 100%;
  }

  .game-layout {
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .board-area {
    flex: 0 0 auto;
    height: auto;
    overflow: hidden;
    margin-bottom: 0.5rem;
  }

  .board-wrapper {
    aspect-ratio: 1;
    width: min(100vw - 1rem, 65vh); /* Leave room for the sidebar below */
    height: auto;
    max-width: 100%;
    max-height: none;
    margin: 0 auto;
  }

  .sidebar-panel {
    flex: 1;        /* Fill remaining vertical space */
    min-height: 0;  /* Allow flex shrink */
    width: 100%;
    height: auto;
    overflow-y: auto; /* Internal scroll only */
    padding-right: 6px;
  }
}

/* ─── Settings Menu ──────────────────────────────────────────── */
.settings-station {
  padding: 0 !important;
  overflow: hidden;
  margin-top: 0.3rem;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  transition: background 0.2s ease;
}

.settings-header:hover {
  background: rgba(255, 255, 255, 0.09);
}

.settings-icon {
  font-size: 1rem;
  color: var(--accent-gold);
  line-height: 1;
}

.settings-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-gold);
  flex: 1;
}

.settings-chevron {
  font-size: 0.65rem;
  color: var(--text-secondary);
  transition: transform 0.25s ease;
}

.settings-chevron.open {
  transform: rotate(180deg);
}

/* Collapsed by default — JS toggles .open */
/* The station is the positioning anchor so its panel can float over the column.
   overflow must be visible here (an earlier rule set it hidden) or the absolutely
   positioned panel gets clipped away. */
.settings-station { position: relative; overflow: visible !important; }

.settings-panel {
  position: absolute;          /* float over the controls instead of pushing them */
  bottom: 100%;                /* open upward — the Settings/Export row sits low in the column */
  left: 0;
  right: 0;
  z-index: 500;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 0.5rem;
  background: rgba(10, 15, 13, 0.98);   /* near-opaque so it covers what's underneath */
  border: 1px solid var(--glass-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -12px 26px rgba(0, 0, 0, 0.55);
}

.settings-panel.open {
  max-height: 70vh;            /* tall enough for all items; scrolls on short screens */
  overflow-y: auto;
  padding: 0.35rem 0.5rem 0.5rem;
}

/* ── Tournament controls ─────────────────────────────── */
.tourney-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.tourney-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
}
.tourney-toggles { display: flex; gap: 3px; flex-wrap: wrap; flex: 1 1 auto; justify-content: space-between; }
.tourney-toggle {
  width: 22px; height: 22px; padding: 0;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.3);
  color: #9ca3af;
  font-size: 0.72rem; font-weight: 800;
  cursor: pointer;
}
.tourney-toggle.sel {
  background: var(--accent-gold, #e5c158);
  color: #1a1a1a;
  border-color: var(--accent-gold, #e5c158);
}
.tourney-mini {
  font-size: 0.62rem; font-weight: 700;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
  cursor: pointer;
  text-transform: uppercase;
}
.tourney-run {
  padding: 0.4rem 0.6rem;
  font-weight: 800; font-size: 0.85rem;
  text-transform: uppercase;
  background: #14532d; color: #facc15;
  border: none; border-radius: 6px;
  cursor: pointer;
}
.tourney-run:disabled { opacity: 0.5; cursor: default; }
#tourney-games {
  width: 46px;
  background: #fff; color: #000;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0.2rem;
  text-align: center; font-weight: 700;
}
.tourney-results {
  font-size: 0.72rem;
  color: #e5e7eb;
  white-space: pre-wrap;
  line-height: 1.35;
  margin-top: 0.2rem;
  max-height: 130px;
  overflow-y: auto;
}

/* ── AI parameter editor ─────────────────────────────── */
.brain-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.brain-select {
  min-width: 92px;
  background: #1d4ed8; color: #fff;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0.25rem 0.3rem;
  font-size: 0.75rem; font-weight: 700;
  cursor: pointer;
}
/* Row 18's menu now holds only a NAME, so it is pinned narrow and the space it used to
   take goes to the parameter field beside it. */
.tourney-row #nn-brain { flex: 0 0 92px; width: 92px; }

/* Row 18's read-only parameter line. flex 1 1 0 with min-width 0 so it takes whatever the
   row has left and SHRINKS rather than wrapping — .tourney-row wraps, and a wrap here would
   add a line to the control column and move every hotspot in the manual's figure. */
.nn-params {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0.2rem 0.3rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: -0.01em;
  cursor: text;
}
.brain-file {
  flex: 1 1 64px;
  min-width: 56px;
  background: #fff; color: #000;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0.2rem 0.3rem;
  font-size: 0.72rem; font-weight: 700;
}
.evo-field {
  width: 52px;
  background: #fff; color: #000;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0.2rem;
  text-align: center;
  font-size: 0.72rem; font-weight: 700;
}
.match-len {
  background: #fff; color: #000;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0.15rem 0.2rem;
  text-align: center;
  font-size: 0.72rem; font-weight: 700;
}
.brain-params { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px 3px; }
.brain-param { display: flex; flex-direction: column; align-items: center; }
.brain-param label {
  font-size: 0.54rem; font-weight: 800;
  color: var(--text-secondary);
  line-height: 1.1;
}
.brain-param input {
  width: 37px;
  background: #fff; color: #000;
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  padding: 0.1rem 0.05rem;
  text-align: center;
  font-size: 0.62rem; font-weight: 700;
}

/* Remove the up/down spinner buttons from every number field so the digits
   get the full width of the box. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.38rem 0.5rem;
  margin-bottom: 0.25rem;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.15s ease;
}

.settings-item:last-child {
  margin-bottom: 0;
}

.settings-item:hover {
  background: rgba(255, 255, 255, 0.09);
}

.settings-item-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-item-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  min-width: 34px;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.settings-item-badge.on {
  background: #15803d;   /* green-700 */
  color: #dcfce7;
  box-shadow: 0 0 8px rgba(21, 128, 61, 0.45);
}

.settings-item-badge.off {
  background: #b91c1c;   /* red-700 */
  color: #fee2e2;
  box-shadow: 0 0 8px rgba(185, 28, 28, 0.45);
}

/* ─── History Navigation Buttons ─────────────────────────── */
.history-nav-bar {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.history-nav-btn {
  flex: 1;
  background: rgb(0, 200, 0);
  color: #ffffff;
  font-family: 'Outfit', monospace;
  font-size: 0.8rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  padding: 0.32rem 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.03em;
}

/* The move-list IMPORT button: loads a recorded game back into the list. Deliberately
   red-on-yellow against the green nav buttons — it is the one control in that row that
   does something other than navigate, so it should not blend in. */
.nav-import-btn {
  background: #facc15;
  color: #dc2626;
}

.nav-import-btn:hover:not(:disabled) {
  background: #eab308;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.7);
}

.history-nav-btn:hover:not(:disabled) {
  background: rgb(0, 170, 0);
  box-shadow: 0 0 10px rgba(0, 200, 0, 0.6);
}



/* RS button gets a slightly deeper green to hint it's a reset action */
.history-nav-rs {
  background: rgb(0, 170, 0);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: 800;
}
.history-nav-rs:hover:not(:disabled) {
  background: rgb(0, 140, 0);
  box-shadow: 0 0 10px rgba(0, 200, 0, 0.7);
}

/* Setup/Analysis row: stretch controls to fill the column width */
.setup-station .setup-btn, .setup-station .setup-die { flex: 1 1 0; min-width: 0; }


/* Row 17 — the net-brain participant toggles. Lower-cased in CSS rather than by the
   names, so an imported net (N80-...) still reads as lower case in this row while the
   linear row above stays upper case. */
/* Target the BUTTON, not the row: the UA stylesheet sets text-transform:none on form
   controls, so a button does not inherit it from its container. */
.nn-toggles .tourney-toggle { text-transform: lowercase; }

/* A brain listed in NNs/manifest.json whose file is not there yet: shown, so the roster
   looks complete on a fresh copy, but plainly not usable. */
.nn-missing { opacity: 0.45; }

/* A little air above the net block, so rows 17-19 read as their own group inside the
   tournament card rather than as more tournament controls. */
.nn-row { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 0.3rem; }

/* Row 19 packs EIGHT controls into the column — two more than the Evolve row above, and
   the current record. The seed field (8th, 8/29) is what the column was widened from 384
   to 414px for; see --sidebar-w. Everything is still sized down to keep the row on ONE
   line, because a second line would move every tick mark in ControlColumnFig.png. If a
   control is ever added here, something has to give again. */
.learn-row { gap: 0.2rem; flex-wrap: nowrap; justify-content: space-between; }
.learn-row .tourney-run { padding: 0.3rem 0.35rem; font-size: 0.72rem; flex: 0 0 auto; }
.learn-row .evo-field { width: 40px; flex: 0 0 auto; }
.learn-row #learn-games { width: 52px; }
.learn-row .match-len { font-size: 0.62rem; padding: 0.15rem 0.1rem; flex: 0 0 auto; }
.learn-row #learn-layers { width: 34px; }
.learn-row #learn-from { width: 48px; }
.learn-row #learn-phi { width: 58px; }
.learn-row #learn-seed { width: 56px; }   /* wide enough for a 10-digit seed */

/* The tournament row carries SEVEN controls since the Doubling and ply menus joined it,
   and at the inherited sizes they need ~485px against ~463 available — it wrapped to two
   lines, which makes the control column taller and moves every tick mark in
   ControlColumnFig.png. Same treatment as .learn-row: size the children down and forbid
   wrapping outright, so the failure would be a visible overflow rather than a silent
   re-layout of the manual's figure. MEASURE against the row's clientWidth after any
   further addition — never against --sidebar-w, because of the scrollbar. */
.batch-row { gap: 0.2rem; flex-wrap: nowrap; justify-content: space-between; }
.batch-row .tourney-run { padding: 0.3rem 0.35rem; font-size: 0.72rem; flex: 0 0 auto; }
.batch-row .match-len   { font-size: 0.62rem; padding: 0.15rem 0.1rem; flex: 0 0 auto; }
.batch-row #tourney-games { width: 40px; flex: 0 0 auto; }

/* Row 18: the net selector need not eat the whole row. */
#nn-brain { flex: 1 1 auto; min-width: 0; }