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

:root {
  --bg: #0c0f14;
  --surface: rgba(18, 22, 30, 0.9);
  --surface-solid: #12161e;
  --surface2: #1a1f2b;
  --surface3: #242b38;

  --accent: #10b981;
  --accent-dark: #059669;
  --accent-glow: rgba(16, 185, 129, 0.28);
  --accent-subtle: rgba(16, 185, 129, 0.09);

  --text: #e2e8f2;
  --text-secondary: #a0aab8;
  --text-muted: #5a6478;

  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.14);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.8);
  --glow-accent: 0 0 24px var(--accent-glow);

  --board-size: max(280px, calc(100dvh - 190px));
  --panel-w: clamp(220px, 18vw, 300px);
  --ctrl-w: 54px;
  --board-ui-h: 3.9rem;

  /* Board square palette — shared with collection mini-boards */
  --sq-light: #f0e4ca;
  --sq-dark: #4a7547;

  --bg-gradient:
    radial-gradient(ellipse at 15% 60%, rgba(16, 185, 129, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(99, 102, 241, 0.06) 0%, transparent 55%),
    linear-gradient(160deg, #0c0f14 0%, #090c12 100%);
  --card-gradient: linear-gradient(145deg, rgba(24, 29, 40, 0.92) 0%, rgba(14, 17, 24, 0.96) 100%);
  --bar-gradient: linear-gradient(180deg, #181d27 0%, #12161e 100%);
  --btn-hover-bg: var(--accent-subtle);
}

[data-theme="light"] {
  --bg: #f0f4f8;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;
  --surface2: #edf0f5;
  --surface3: #e1e6ee;

  --accent: #059669;
  --accent-dark: #047857;
  --accent-glow: rgba(5, 150, 105, 0.22);
  --accent-subtle: rgba(5, 150, 105, 0.07);

  --text: #1a2030;
  --text-secondary: #3d4a5c;
  --text-muted: #7a8799;

  --border: rgba(0, 0, 0, 0.07);
  --border-hover: rgba(0, 0, 0, 0.14);

  --shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.14);

  --bg-gradient:
    radial-gradient(ellipse at 15% 60%, rgba(5, 150, 105, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(99, 102, 241, 0.04) 0%, transparent 55%),
    linear-gradient(160deg, #f0f4f8 0%, #e8edf5 100%);
  --card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.98) 100%);
  --bar-gradient: linear-gradient(180deg, #edf0f5 0%, #e5e9f0 100%);
}

/* ── Missing token aliases (used by train tab components) ────────────────── */
:root {
  --card-bg: var(--surface2);
  --bg-input: var(--surface3);
  --text-primary: var(--text);
  --accent-rgb: 16, 185, 129;
}
[data-theme="light"] {
  --card-bg: #ffffff;
  --bg-input: #edf0f5;
  --accent-rgb: 5, 150, 105;
}

html { height: 100%; }

body {
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Header ── */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.65rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 13, 18, 0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

[data-theme="light"] header {
  background: rgba(240, 244, 248, 0.8);
}

.site-logo-link {
  display: contents;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.king-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  user-select: none;
}

.king-logo-light { display: none; }
[data-theme="light"] .king-logo-dark  { display: none; }
[data-theme="light"] .king-logo-light { display: block; }


header h1,
.site-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 0;
  font-style: normal;
  color: var(--text);
}

.site-title-chess {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}

.site-title-explain {
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--accent);
  line-height: 1.2;
  margin-top: 1px;
}

.header-accent {
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
}

.header-auth {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-auth {
  height: 34px;
  padding: 0 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.btn-login {
  background: transparent;
  color: var(--text-secondary);
}

.btn-login:hover {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--border-hover);
}

.btn-signup {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-signup:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: var(--glow-accent);
}



/* ── Layout ── */
main {
  display: grid;
  grid-template-columns: var(--panel-w) auto var(--panel-w);
  gap: 1.1rem;
  align-items: stretch;
  justify-content: center;
  padding: 1.1rem clamp(0.75rem, 2vw, 1.75rem) 1.6rem;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  overflow: hidden;
}

.card-analysis {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-analysis .analysis-result.visible {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
}

/* ── Cards ── */
.card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,0.035) 0%, transparent 45%);
  pointer-events: none;
}

.card h2 {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.025);
  margin: -1rem -1rem 1rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] .card h2 {
  background: rgba(0,0,0,0.018);
}

/* ── Board section ── */
.board-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.board-and-eval {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

#board-container {
  width: var(--board-size);
  height: var(--board-size);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 60px rgba(0,0,0,0.6);
  position: relative;
  animation: board-breathe 6s ease-in-out infinite;
  background-color: var(--sq-dark, #4a7547);
  cursor: default;
  /* Dragging a piece is a touch gesture — never let it scroll the page.
     Without this, a vertical drag scrolls the (scrollable) page on mobile and
     leaves the board shifted upwards and stuck. */
  touch-action: none;
}

#board-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 10;
}

#board-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ── Piece interaction cursors ── */
#board-container .square-55d63 > div,
#play-board-container .square-55d63 > div,
#puzzle-board-container .square-55d63 > div {
  cursor: grab;
}

#board-container .square-55d63 > div:active,
#play-board-container .square-55d63 > div:active,
#puzzle-board-container .square-55d63 > div:active {
  cursor: grabbing;
}

/* ── Preview board ── */
#preview-board-container {
  position: fixed;
  width: 240px;
  height: 240px;
  z-index: 10000;
  pointer-events: none;
  background: var(--surface-solid);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  display: none;
  overflow: hidden;
  animation: preview-fade-in 0.15s ease;
}

@keyframes preview-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#preview-board {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Custom board square colors ── */
.white-1e1d7 { background-color: var(--sq-light, #f0e4ca); color: var(--sq-light, #f0e4ca); }
.black-3c85d  { background-color: var(--sq-dark, #4a7547);  color: var(--sq-dark, #4a7547); }

/* Remove chessboard.js default harsh border — integration with app style */
.board-b72b1 { border: none !important; }

/* ── Eval column ── */
.eval-column {
  width: var(--ctrl-w);
  flex-shrink: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.eval-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: var(--board-size);
  flex-shrink: 0;
  gap: 6px;
  padding: 2px 0;
}

.eval-bar-wrap.hidden {
  opacity: 0.18;
  filter: saturate(0);
}

.eval-bar {
  width: 16px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(16, 185, 129, 0.22);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(16, 185, 129, 0.06), inset 0 0 0 1px rgba(255,255,255,0.04);
}

[data-theme="light"] .eval-bar {
  border-color: rgba(5, 150, 105, 0.28);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px rgba(5, 150, 105, 0.1);
}

.eval-bar-black {
  background: linear-gradient(180deg, #080b10 0%, #141820 100%);
  transition: flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.eval-bar-white {
  background: linear-gradient(180deg, #e8d8ba 0%, #f2e8d0 100%);
  transition: flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  order: 2;
}

.eval-score {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Inter', monospace;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.03em;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Top engine move chip ── */
.top-move-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.13) 0%, rgba(16, 185, 129, 0.06) 100%);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 7px;
  padding: 5px 4px;
  width: 100%;
  cursor: default;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.top-move-chip.active {
  visibility: visible;
  opacity: 1;
}

[data-theme="light"] .top-move-chip {
  background: linear-gradient(160deg, rgba(5, 150, 105, 0.09) 0%, rgba(5, 150, 105, 0.04) 100%);
  border-color: rgba(5, 150, 105, 0.3);
}

.top-move-icon {
  font-size: 0.5rem;
  color: var(--accent);
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
}

.top-move-san {
  font-size: 0.68rem;
  font-weight: 700;
  font-family: 'Inter', monospace;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 10px var(--accent-glow);
}

/* ── Toggle switch ── */
.eval-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.eval-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.eval-toggle-track {
  position: relative;
  width: 28px;
  height: 16px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.25s ease;
}

.eval-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.eval-toggle input:checked + .eval-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.eval-toggle input:checked + .eval-toggle-track .eval-toggle-thumb {
  transform: translateX(12px);
  background: #fff;
}

.eval-toggle:hover .eval-toggle-track {
  border-color: var(--accent);
}

/* ── Material balance bar ── */
.material-bar {
  width: var(--board-size);
  height: 26px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
}

/* One group per piece type — pieces of the same kind stack with overlap */
.mb-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.mb-piece {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.85;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Overlap consecutive same-type pieces to save space */
.mb-group .mb-piece + .mb-piece {
  margin-left: -7px;
}

/* White outline for dark pieces so they read on dark backgrounds */
[data-theme="dark"] .mb-piece--dark {
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.55)) drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.mb-score {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Inter', monospace;
  color: var(--text-secondary);
  margin-left: 5px;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* ── Board column ── */
.board-column {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

/* ── Button bar ── */
.button-bar {
  width: 100%;
  background: var(--bar-gradient);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.45rem 0.75rem 0.55rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.btn-nav-group {
  display: flex;
  gap: 2px;
  margin: 0 auto;
}

.btn-nav-group .icon-btn {
  border-radius: var(--radius-sm);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.icon-btn:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.icon-btn:active {
  transform: scale(0.87);
  opacity: 0.8;
}

.icon-btn.is-active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.icon-btn:disabled {
  opacity: 0.18;
  cursor: default;
  pointer-events: none;
}

#btn-reset {
  line-height: 1;
}

#btn-reset:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

/* ── Buttons ── */
button { cursor: pointer; font-family: inherit; }

.btn-primary {
  width: 100%;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  margin-bottom: 0.75rem;
  box-shadow: 0 3px 14px var(--accent-glow);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 52%);
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px var(--accent-glow);
  filter: brightness(1.06);
}

.btn-primary:active {
  transform: translateY(1px) scale(0.975);
  box-shadow: 0 1px 6px var(--accent-glow);
  filter: brightness(0.97);
}

.btn-primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
  animation: none;
}

/* Pulse on the analyze button when idle to invite clicks */
#btn-analyze:not(:disabled) {
  animation: pulse-glow 2.8s ease-in-out infinite;
}

#btn-analyze:not(:disabled):hover {
  animation: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px var(--accent-glow);
  filter: brightness(1.1);
}

.btn-secondary {
  padding: 0.4rem 0.85rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-secondary:hover {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.97);
}

/* ── Skill level ── */
.skill-selector {
  display: flex;
  gap: 3px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 3px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.skill-btn {
  flex: 1;
  padding: 0.4rem 0.4rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 500;
  transition: all 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.skill-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

[data-theme="light"] .skill-btn:hover {
  background: rgba(0,0,0,0.04);
}

.skill-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.30);
  letter-spacing: 0.005em;
}

.skill-btn[data-level="intermediate"].active {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.35);
}

.skill-btn[data-level="advanced"].active {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.35);
}

.skill-elo-hint {
  display: flex;
  gap: 3px;
  margin: 3px 0 8px;
}

.skill-elo-hint span {
  flex: 1;
  text-align: center;
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  opacity: 0.65;
}

/* ── Spinner ── */
.spinner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.spinner.visible { display: flex; }

.spinner-ring {
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  box-shadow: 0 0 10px var(--accent-glow);
  flex-shrink: 0;
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 16px var(--accent-glow); }
  50%       { box-shadow: 0 4px 32px rgba(16, 185, 129, 0.5), 0 0 0 4px rgba(16, 185, 129, 0.08); }
}
@keyframes board-breathe {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.05), 0 0 50px rgba(0,0,0,0.55); }
  50%       { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(16,185,129,0.08), 0 0 65px rgba(0,0,0,0.62), 0 0 26px rgba(16,185,129,0.03); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Error message ── */
.error-msg {
  display: none;
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #fca5a5;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
}

.error-msg.visible { display: block; }

/* ── Analysis result ── */
.analysis-result         { display: none; }
.analysis-result.visible {
  display: block;
  animation: fade-in 0.3s ease;
}

.suggested-move {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  font-family: 'Inter', monospace;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 18px var(--accent-glow);
}

.theme-badge {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.explanation-text {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.72;
  margin-bottom: 1rem;
}

.explanation-text p { margin: 0 0 0.6rem; }
.explanation-text p:last-child { margin-bottom: 0; }
.explanation-text strong { font-weight: 600; color: var(--text); }
.explanation-text em { font-style: italic; }
.explanation-text ul, .explanation-text ol {
  margin: 0.4rem 0 0.6rem 1.2rem;
  padding: 0;
}
.explanation-text li { margin-bottom: 0.2rem; }
.explanation-text code {
  font-family: 'Inter', monospace;
  background: var(--surface2);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.84em;
  border: 1px solid var(--border);
}
.explanation-text h1, .explanation-text h2, .explanation-text h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin: 0.5rem 0 0.25rem;
}

.strategic-context {
  color: var(--text-secondary);
  font-size: 0.835rem;
  font-style: italic;
  line-height: 1.68;
  margin: -0.3rem 0 0.9rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
  opacity: 0.88;
}

.variation-move {
  cursor: pointer;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 3px;
  padding: 0.05em 0.25em;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.variation-move:hover {
  background: var(--accent);
  color: #fff;
}

.alternatives-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alternative-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--accent-subtle);
  border: 1px solid rgba(16, 185, 129, 0.12);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  font-size: 0.82rem;
}

.alt-move {
  font-family: 'Inter', monospace;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  min-width: 46px;
}

.alt-reason { color: var(--text-muted); }

/* ── Comment footer ── */
.comment-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

/* ── Question input row ── */
.question-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.question-input {
  flex: 1;
  min-width: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  font-family: inherit;
  padding: 0.38rem 0.6rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.question-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.question-input::placeholder { color: var(--text-muted); }

.question-send-btn {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}

.question-send-btn:hover:not(:disabled) {
  background: var(--accent-dark);
  box-shadow: var(--glow-accent);
}

.question-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.theme-badge--answer {
  color: #818cf8;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Q&A thread ── */
#qa-thread { margin-top: 0.5rem; }

.qa-block {
  margin-bottom: 0.75rem;
}

.qa-question {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 0.35rem;
  padding: 0.45rem 0.65rem;
  border-left: 2px solid var(--accent);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  word-break: break-word;
}

.qa-answer {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.72;
  padding: 0 0 0 0.65rem;
}

.qa-answer p { margin: 0 0 0.5rem; }
.qa-answer p:last-child { margin-bottom: 0; }
.qa-answer strong { font-weight: 600; color: var(--text); }
.qa-answer em { font-style: italic; }
.qa-answer ul, .qa-answer ol { margin: 0.3rem 0 0.5rem 1.1rem; padding: 0; }
.qa-answer li { margin-bottom: 0.15rem; }

.qa-answer--loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.4rem;
}

.qa-loading-msg {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.7;
  font-style: italic;
}

@keyframes qa-loading-msg-fade {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 0.7; transform: translateY(0); }
}

.qa-loading-msg--fade {
  animation: qa-loading-msg-fade 0.35s ease-out forwards;
}

.qa-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.qa-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
  animation: qa-bounce 1.1s infinite ease-in-out;
}

.qa-dots span:nth-child(2) { animation-delay: 0.18s; }
.qa-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes qa-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40%            { transform: translateY(-4px); opacity: 1; }
}

/* ── Streaming answer ────────────────────────────────────────────────────── */

/* Active (last) element fades in on each chunk as DOM children are recreated */
@keyframes qa-stream-in {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

.qa-answer--streaming > :last-child {
  animation: qa-stream-in 0.2s ease-out;
}

/* Blinking cursor via ::after — no extra DOM nodes needed */
@keyframes qa-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.qa-answer--streaming > :last-child::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: qa-blink 1s step-end infinite;
}

/* When the last child is a list, suppress the outer ::after and put the
   cursor inside the last list item instead */
.qa-answer--streaming > ul:last-child::after,
.qa-answer--streaming > ol:last-child::after { content: none; }

.qa-answer--streaming > ul:last-child > li:last-child::after,
.qa-answer--streaming > ol:last-child > li:last-child::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: qa-blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .qa-answer--streaming > :last-child { animation: none; }
  .qa-answer--streaming > :last-child::after,
  .qa-answer--streaming > ul:last-child > li:last-child::after,
  .qa-answer--streaming > ol:last-child > li:last-child::after {
    animation: none;
    opacity: 1;
  }
}

.qa-status {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-left: 0.5rem;
  opacity: 0.65;
}

.qa-answer--error {
  color: var(--error, #f87171);
  font-size: 0.82rem;
  font-style: italic;
}

.comment-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.comment-action-btn {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.15rem;
  padding: 0.25rem 0.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.comment-action-btn svg {
  width: 13px;
  height: 13px;
}

.comment-action-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.comment-action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.comment-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Stockfish lines tool (Comments panel) ── */
.stockfish-lines-tool {
  flex-shrink: 0;
  padding: 0.5rem 1rem 0.75rem;
  border-top: 1px solid var(--border);
}

.stockfish-lines-toggle {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

.stockfish-lines-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.stockfish-lines-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stockfish-lines-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.stockfish-lines-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.stockfish-lines-toggle[aria-expanded="false"] .stockfish-lines-chevron {
  transform: rotate(-90deg);
}

.stockfish-lines-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Fixed height: never jump with 0–3 lines or enabled/disabled */
  --sf-line-h: 1.35rem;
  height: calc((3 * var(--sf-line-h)) + (2 * 0.35rem));
  overflow: hidden;
  transition: height 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
  opacity: 1;
}

.stockfish-lines-body.stockfish-lines-collapsed {
  height: 0;
  opacity: 0;
}

.stockfish-lines-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  padding-left: 0.1rem;
}

.stockfish-line {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.83rem;
  color: var(--text-secondary);
  min-width: 0;
  height: var(--sf-line-h);
  transition: opacity 0.2s ease;
}

.stockfish-line--stale {
  opacity: 0.22;
  pointer-events: none;
}

.stockfish-line-score {
  font-family: 'Inter', monospace;
  font-weight: 700;
  color: var(--accent);
  min-width: 3.4rem;
  flex-shrink: 0;
}

.stockfish-line--placeholder {
  pointer-events: none;
}

.stockfish-line--placeholder .variation-move {
  background: transparent;
  color: var(--text-muted);
  cursor: default;
}

.stockfish-line--placeholder .variation-move:hover {
  background: transparent;
  color: var(--text-muted);
}

@keyframes sf-shimmer {
  0%   { background-position: -250% center; }
  100% { background-position:  250% center; }
}

.stockfish-line--skeleton .stockfish-line-score,
.stockfish-line--skeleton .stockfish-line-moves {
  display: block;
  height: 0.72em;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--surface2) 0%,
    var(--surface3) 50%,
    var(--surface2) 100%
  );
  background-size: 250% 100%;
  animation: sf-shimmer 1.6s ease-in-out infinite;
  color: transparent;
}

.stockfish-line--skeleton .stockfish-line-score {
  width: 2.6rem;
  flex-shrink: 0;
}

.stockfish-line--skeleton .stockfish-line-moves {
  width: min(14rem, 80%);
}

@keyframes sf-content-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stockfish-line--ready {
  animation: sf-content-in 0.18s ease-out;
}

.stockfish-line-moves {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  transform: translateY(1px);
}

.sf-loading-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  animation: sf-bounce 1.05s infinite ease-in-out;
}

.sf-loading-dots span:nth-child(2) { animation-delay: 0.16s; }
.sf-loading-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes sf-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.38; }
  40%            { transform: translateY(-3px); opacity: 0.95; }
}

.stockfish-line--placeholder .sf-loading-dots span {
  background: var(--text-muted);
  opacity: 0.45;
}

.stockfish-lines-tool.is-disabled {
  opacity: 0.45;
  filter: grayscale(0.55);
  pointer-events: none;
}

/* ── Comment edit form ── */
.comment-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.comment-edit-header,
.comment-edit-body {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.45rem 0.65rem;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.comment-edit-header { font-size: 0.9rem; font-weight: 600; }
.comment-edit-body   { font-size: 0.85rem; line-height: 1.55; resize: vertical; }

.comment-edit-header:focus,
.comment-edit-body:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.comment-edit-btns {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.comment-edit-btns .btn-primary {
  width: auto;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
}

.comment-edit-btns .btn-secondary {
  padding: 0.5rem 0.85rem;
}

/* ── Game title bar ── */
.game-title-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.2rem 0.25rem;
}

.game-title-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.game-title-edit-btn,
.game-title-save-btn,
.game-title-share-btn {
  flex-shrink: 0;
  opacity: 1;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  transition: transform 0.15s, color 0.15s;
}

.game-title-save-btn {
  font-size: 1rem;
}

.game-title-save-btn:hover,
.game-title-share-btn:hover {
  color: var(--accent);
}

.game-title-bar:hover .game-title-edit-btn,
.game-title-bar:hover .game-title-save-btn,
.game-title-bar:hover .game-title-share-btn {
  opacity: 1;
}

/* ── Share game modal ──────────────────────────────────────────────────────── */
.share-modal-box {
  width: min(90vw, 460px);
  max-height: unset;
}

.share-modal-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.share-modal-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.share-loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.spinner-ring--sm {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.share-link-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.share-link-display {
  display: block;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--accent);
  font-size: 0.82rem;
  font-family: monospace;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-link-display:hover {
  text-decoration: underline;
  border-color: var(--accent);
}

.share-link-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text);
  font-size: 0.82rem;
  font-family: monospace;
  outline: none;
  cursor: text;
}

.share-link-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}

.share-copy-btn {
  width: 100%;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
}

.share-error {
  font-size: 0.85rem;
  color: var(--red, #ef4444);
}

.share-ply-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

/* ── Share button in game lists ───────────────────────────────────────────── */
.collection-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.collection-share-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.game-title-input {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--bg-input, var(--bg-card));
  color: var(--text-primary);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  outline: none;
}

/* ── Move history card ── */
.card-move-history {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-panel .card:last-child { flex-shrink: 0; }

/* ── Move history ── */
.move-history {
  font-size: 0.83rem;
  color: var(--text-muted);
  flex: 1;
  overflow-y: auto;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  word-wrap: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
}

.move-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.move-table tr:not(.variation-row):nth-child(even) {
  background: rgba(255,255,255,0.025);
}

[data-theme="light"] .move-table tr:not(.variation-row):nth-child(even) {
  background: rgba(0,0,0,0.02);
}

.variation-row {
  background: rgba(0,0,0,0.12) !important;
}

[data-theme="light"] .variation-row {
  background: rgba(0,0,0,0.04) !important;
}

.variation-row .move-san {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.move-num-cell {
  color: var(--text-muted);
  font-size: 0.72rem;
  user-select: none;
  width: 2.4rem;
  padding: 0.15rem 0.4rem;
  vertical-align: top;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  opacity: 0.55;
}

.move-cell {
  padding: 0.12rem 0.2rem;
  vertical-align: middle;
  width: 50%;
}

.move-cell[data-node-id],
.move-cell[data-ply-idx] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.move-cell[data-node-id]:hover .move-san:not(.current),
.move-cell[data-ply-idx]:hover .move-san:not(.current) {
  background: var(--accent-subtle);
  color: var(--accent);
}

.move-cell[data-node-id]:active .move-san,
.move-cell[data-ply-idx]:active .move-san {
  transform: scale(0.94);
}

.var-paren {
  color: var(--text-muted);
  font-size: 0.82rem;
  user-select: none;
}

.move-piece-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  display: inline-block;
  margin-right: 0.5px;
  image-rendering: auto;
  filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.3));
}

.move-san {
  padding: 0.18rem 0.4rem;
  border-radius: 5px;
  transition: all 0.12s ease;
  color: var(--text-secondary);
  font-size: 0.87rem;
  font-weight: 500;
  pointer-events: none;
  letter-spacing: -0.01em;
}

.move-san.current {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 10px rgba(16, 185, 129, 0.38);
  letter-spacing: -0.01em;
}

.move-comment {
  display: block;
  color: var(--accent);
  font-style: italic;
  font-size: 0.74rem;
  word-break: break-word;
  border-left: 2px solid var(--accent);
  padding-left: 0.5rem;
  margin: 0.1rem 0 0.3rem;
  opacity: 0.8;
  line-height: 1.5;
}

.move-empty { color: var(--text-muted); font-size: 0.82rem; }

.move-loading-ring {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.8;
}

/* ── Context menu ── */
.move-context-menu {
  position: fixed;
  z-index: 1000;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0;
  box-shadow: var(--shadow-lg);
  display: none;
  min-width: 190px;
  backdrop-filter: blur(20px);
}

.move-context-menu.visible { display: block; }

.move-context-item {
  display: block;
  width: 100%;
  padding: 0.48rem 1rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.83rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.1s ease;
}

.move-context-item:hover {
  background: var(--accent);
  color: #fff;
}

.move-context-separator {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0;
}

.move-context-annotations {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.75rem;
}

.move-context-ann-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-right: 0.25rem;
  white-space: nowrap;
}

.move-ann-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: bold;
  padding: 0.15rem 0.3rem;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  min-width: 1.6rem;
  text-align: center;
  transition: all 0.12s;
}

.move-ann-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Variation chooser (branch-point picker when stepping forward) ───────── */
/* "Next" button hint when the current position has more than one continuation */
#btn-next.has-variations { position: relative; }
#btn-next.has-variations::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface-solid);
}

.variation-chooser { z-index: 1100; }

.vc-panel {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.vc-header {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.55rem 0.85rem 0.4rem;
}

.vc-list { display: flex; flex-direction: column; }

.vc-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.85rem;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}
.vc-list .vc-option:first-child { border-top: none; }

.vc-option.vc-sel { background: var(--accent); color: #fff; }
.vc-option.vc-sel .vc-label,
.vc-option.vc-sel .vc-key { color: rgba(255, 255, 255, 0.85); }
.vc-option.vc-sel .vc-key { border-color: rgba(255, 255, 255, 0.5); }

.vc-key {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.vc-move {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-weight: 600;
  white-space: nowrap;
}
.vc-move .move-piece-icon { vertical-align: -2px; }

.vc-ann { font-weight: 700; margin-left: 1px; }

.vc-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Desktop: floating popover anchored above the Next button */
.variation-chooser--desktop {
  position: fixed;
  min-width: 230px;
  animation: vcPop 0.12s ease;
}
@keyframes vcPop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: full-screen backdrop with a bottom action-sheet */
.variation-chooser--mobile {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.45);
  animation: vcFade 0.15s ease;
}
.variation-chooser--mobile .vc-panel {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
  padding-bottom: env(safe-area-inset-bottom, 0);
  animation: vcSlideUp 0.2s ease;
}
.variation-chooser--mobile .vc-header {
  font-size: 0.78rem;
  padding: 0.85rem 1rem 0.55rem;
}
.variation-chooser--mobile .vc-option {
  padding: 0.95rem 1rem;
  font-size: 1rem;
}
.variation-chooser--mobile .vc-key { display: none; }
@keyframes vcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vcSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Inline variation strip (overlays above button-bar, no layout shift) ────── */
#variation-strip {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.35rem 0.75rem;
  background: var(--bar-gradient);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  animation: vsSlideIn 0.14s ease;
  z-index: 10;
}
#variation-strip::-webkit-scrollbar { display: none; }
#variation-strip[hidden] { display: none; }

@keyframes vsSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vs-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.vs-chip:hover { background: var(--hover); }
.vs-chip.vs-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.vs-chip-label {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.65;
}
.vs-chip.vs-active .vs-chip-label { opacity: 0.85; }

/* Mobile: slightly larger tap targets */
@media (max-width: 768px) {
  .vs-chip { padding: 0.35rem 0.75rem; font-size: 0.88rem; }
  #variation-strip { gap: 8px; padding: 0.45rem 0.85rem; }
}

.move-comment-bubble {
  line-height: 1;
  margin-left: 2px;
  cursor: default;
  opacity: 0.7;
}

.move-comment-bubble-img {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  display: inline-block;
}

.move-annotation {
  display: inline-block;
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  padding: 0.15em 0.35em;
  border-radius: 4px;
  margin-left: 0.2em;
  vertical-align: middle;
  color: #fff;
}

.pos-annotation {
  display: inline-block;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1;
  padding: 0.15em 0.35em;
  border-radius: 4px;
  margin-left: 0.2em;
  vertical-align: middle;
  color: #fff;
  background: #4b5563;
  transition: opacity 0.15s;
}

.pos-annotation[data-pos="+−"] { background: #166534; }
.pos-annotation[data-pos="±"]  { background: #16a34a; }
.pos-annotation[data-pos="⩲"]  { background: #4d7c0f; }
.pos-annotation[data-pos="="]  { background: #4b5563; }
.pos-annotation[data-pos="∞"]  { background: #7c3aed; }
.pos-annotation[data-pos="⩱"]  { background: #b45309; }
.pos-annotation[data-pos="∓"]  { background: #c2410c; }
.pos-annotation[data-pos="−+"] { background: #991b1b; }

.move-annotation[data-ann="!!"] { background: #059669; }
.move-annotation[data-ann="!"]  { background: #10b981; }
.move-annotation[data-ann="✓"]  { background: #0284c7; }
.move-annotation[data-ann="!?"] { background: #d97706; }
.move-annotation[data-ann="?!"] { background: #ea580c; }
.move-annotation[data-ann="?"]  { background: #dc2626; }
.move-annotation[data-ann="??"] { background: #991b1b; }

[data-theme="light"] .move-annotation { color: #fff; }

/* Pop-in animation for newly assigned annotations during game analysis */
@keyframes ann-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.move-annotation.ann-pop { animation: ann-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; }

.game-result {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  vertical-align: middle;
}

.move-ann-btn[data-ann="!!"]:not(:hover) { color: #fff; background: #059669; border-color: #059669; }
.move-ann-btn[data-ann="!"]:not(:hover)  { color: #fff; background: #10b981; border-color: #10b981; }
.move-ann-btn[data-ann="!?"]:not(:hover) { color: #fff; background: #d97706; border-color: #d97706; }
.move-ann-btn[data-ann="?!"]:not(:hover) { color: #fff; background: #ea580c; border-color: #ea580c; }
.move-ann-btn[data-ann="?"]:not(:hover)  { color: #fff; background: #dc2626; border-color: #dc2626; }
.move-ann-btn[data-ann="??"]:not(:hover) { color: #fff; background: #991b1b; border-color: #991b1b; }
.move-ann-btn[data-ann="✓"]:not(:hover)  { color: #fff; background: #0284c7; border-color: #0284c7; }

/* ── Annotation toolbar ── */
.ann-toolbar {
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

.ann-toolbar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.ann-toolbar-toggle:hover {
  background: var(--surface2);
  color: var(--text);
}

.ann-toolbar-title {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ann-toolbar-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.ann-toolbar-toggle[aria-expanded="false"] .ann-toolbar-chevron {
  transform: rotate(-90deg);
}

.ann-toolbar-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 0.6rem 0.5rem;
  overflow: hidden;
  max-height: 260px;
  transition: max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              padding-bottom 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
  opacity: 1;
}

.ann-toolbar-body.ann-toolbar-collapsed {
  max-height: 0;
  padding-bottom: 0;
  opacity: 0;
}

.ann-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.ann-tb-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 3.2rem;
  flex-shrink: 0;
}

.ann-tb-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.2rem 0.34rem;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  min-width: 1.7rem;
  text-align: center;
  transition: all 0.13s;
}

.ann-tb-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.ann-tb-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.ann-tb-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Active/selected state */
.ann-tb-btn.ann-tb-active { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Move quality colours (same as badge) */
.ann-tb-move[data-ann="!!"]:not(:disabled) { color: #fff; background: #059669; border-color: #059669; }
.ann-tb-move[data-ann="!"]:not(:disabled)  { color: #fff; background: #10b981; border-color: #10b981; }
.ann-tb-move[data-ann="!?"]:not(:disabled) { color: #fff; background: #d97706; border-color: #d97706; }
.ann-tb-move[data-ann="?!"]:not(:disabled) { color: #fff; background: #ea580c; border-color: #ea580c; }
.ann-tb-move[data-ann="?"]:not(:disabled)  { color: #fff; background: #dc2626; border-color: #dc2626; }
.ann-tb-move[data-ann="??"]:not(:disabled) { color: #fff; background: #991b1b; border-color: #991b1b; }

/* Position symbol colours */
.ann-tb-pos[data-pos="+−"]:not(:disabled) { color: #fff; background: #166534; border-color: #166534; }
.ann-tb-pos[data-pos="±"]:not(:disabled)  { color: #fff; background: #16a34a; border-color: #16a34a; }
.ann-tb-pos[data-pos="⩲"]:not(:disabled)  { color: #fff; background: #4d7c0f; border-color: #4d7c0f; }
.ann-tb-pos[data-pos="="]:not(:disabled)  { color: #fff; background: #4b5563; border-color: #4b5563; }
.ann-tb-pos[data-pos="∞"]:not(:disabled)  { color: #fff; background: #7c3aed; border-color: #7c3aed; }
.ann-tb-pos[data-pos="⩱"]:not(:disabled)  { color: #fff; background: #b45309; border-color: #b45309; }
.ann-tb-pos[data-pos="∓"]:not(:disabled)  { color: #fff; background: #c2410c; border-color: #c2410c; }
.ann-tb-pos[data-pos="−+"]:not(:disabled) { color: #fff; background: #991b1b; border-color: #991b1b; }

.ann-tb-pos:hover:not(:disabled) { filter: brightness(1.18); }

/* Drawing color dots */
.draw-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
}
.draw-dot-green  { background: #22c55e; }
.draw-dot-yellow { background: #eab308; }
.draw-dot-red    { background: #dc2626; }

.ann-tb-draw.ann-tb-active { outline: 2px solid var(--accent); outline-offset: 1px; }
.ann-tb-draw-erase { font-size: 0.75rem; }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(6px);
}

.modal-box {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: var(--shadow-lg);
}

.modal-box h2 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.modal-box .pgn-textarea { min-height: 120px; margin-bottom: 0; }

.modal-actions {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.modal-actions .btn-primary,
.modal-actions .btn-danger,
.modal-actions .btn-secondary {
  flex: 1;
  margin-bottom: 0;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* ── PGN import modal (tabbed) ───────────────────────────────────── */
.pgn-modal-expanded {
  max-height: min(640px, 92vh);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1.25rem 1.5rem 1.5rem;
}

.pgn-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pgn-modal-head h2 { margin: 0; }

.pgn-modal-close-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.pgn-modal-close-btn:hover {
  border-color: var(--border-hover);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .pgn-modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.pgn-import-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  gap: 0;
}

.pgn-import-tab {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.pgn-import-tab:hover { color: var(--text); }

.pgn-import-tab--active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.pgn-import-pane { min-height: 190px; }
.pgn-import-pane--hidden { display: none !important; }

.pgn-provider-fields {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}

.pgn-game-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.pgn-game-list-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  position: sticky;
  top: 0;
}

.pgn-game-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 0.1s;
}

.pgn-game-item:last-child { border-bottom: none; }

.pgn-game-item:hover { background: var(--surface2); }

.pgn-game-vs {
  font-size: 0.85rem;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pgn-game-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.mobile-save-modal-hint {
  margin: -0.2rem 0 0.1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.mobile-save-modal-input {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
}

.mobile-save-modal-error {
  font-size: 0.8rem;
  color: #f87171;
  margin-top: -0.2rem;
}

/* ── PGN textarea ── */
.pgn-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', monospace;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  resize: vertical;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pgn-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── PGN / Build Position button row ── */
.analyze-game-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.btn-analyze-game {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.45rem 0.8rem;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-analyze-game:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.btn-analyze-game:disabled {
  opacity: 0.45;
  cursor: default;
}

.analyze-game-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.analyze-game-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.35s ease;
}

/* Live eval chart — shown inside analysis-live-stats while analysis runs */
.live-eval-chart-wrap {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface3);
}

.live-eval-chart {
  display: block;
  width: 100%;
  height: 36px;
}

.pgn-action-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.pgn-action-row .btn-secondary {
  flex: 1;
}

/* ── Position builder modal ── */
.modal-box-builder {
  width: min(520px, 95vw);
}

.builder-board-wrap {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}

/* Palette + trash row */
.builder-palette-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}

.builder-palette {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.builder-palette-row {
  display: flex;
  gap: 3px;
}

.builder-palette-piece {
  width: 44px;
  height: 44px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.builder-palette-piece:hover {
  border-color: var(--border-hover);
}

.builder-palette-piece.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Trash bin */
.builder-trash {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.builder-trash:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

.builder-trash.is-active {
  border-color: #e55;
  color: #e55;
  box-shadow: 0 0 0 3px rgba(238, 85, 85, 0.25);
}

.builder-controls {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.builder-control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.builder-control-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.builder-radio,
.builder-check {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}

.builder-check:has(input:disabled) {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Builder flip button */
.builder-flip-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}

.builder-flip-btn:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

/* Builder FEN bar */
.builder-fen-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}

.builder-fen-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.builder-fen-input {
  flex: 1;
  font-size: 0.72rem;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  color: var(--text-secondary);
  outline: none;
  min-width: 0;
  transition: border-color 0.12s;
}

.builder-fen-input:focus {
  border-color: var(--accent);
  color: var(--text);
}

/* Drag ghost — piece image following the pointer */
.builder-drag-ghost {
  position: fixed;
  width: 52px;
  height: 52px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.88;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
}

/* Highlight the square the ghost is hovering over */
#builder-board .builder-drop-target {
  outline: 3px solid var(--accent) !important;
  outline-offset: -3px;
}

/* Fade out the source piece while dragging from board */
#builder-board .builder-drag-source img,
#builder-board .builder-drag-source [class*="piece"] {
  opacity: 0.18;
}

/* Trash glow when a board piece is dragged over it */
.builder-trash.is-drop-target {
  border-color: #e55;
  color: #e55;
  box-shadow: 0 0 0 3px rgba(238, 85, 85, 0.35);
  background-color: rgba(238, 85, 85, 0.08);
}

/* Grab cursor on board pieces in builder mode */
.modal-box-builder #builder-board img {
  cursor: grab;
}

/* Disabled Apply button */
#btn-builder-apply:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ── Warning modal ── */
.warn-modal-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Login-required modal */
.login-required-box { text-align:center; align-items:center; }
.login-required-icon {
  width:56px; height:56px; border-radius:50%;
  background:var(--accent-subtle);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.login-required-text { font-size:0.9rem; color:var(--text-muted); line-height:1.55; max-width:340px; }
.login-required-box .modal-actions { justify-content:center; flex-wrap:wrap; }

/* ── Square highlights ── */


/* Check: urgent red wash */
.highlight-check {
  background-color: rgba(220, 38, 38, 0.52) !important;
  box-shadow: inset 0 0 0 3px rgba(220, 38, 38, 0.82) !important;
}

/* Selected piece: warm amber wash */
.highlight-selected {
  background-color: rgba(250, 176, 20, 0.50) !important;
  box-shadow: inset 0 0 0 3px rgba(250, 176, 20, 0.80) !important;
}

/* Last move played (AI move highlight in play mode) */
.highlight-last-move {
  background-color: rgba(16, 185, 129, 0.32) !important;
  box-shadow: inset 0 0 0 3px rgba(16, 185, 129, 0.60) !important;
}

/* Legal moves: centered circular dot (empty squares) / ring overlay (captures) */
.highlight-legal { position: relative; }
.highlight-legal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
  z-index: 2;
}

/* Capture square (has a piece child): show a ring instead of a dot */
.highlight-legal:has(> div)::after {
  width: 90%;
  height: 90%;
  background: transparent;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.22);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  :root { --panel-w: clamp(200px, 20vw, 260px); }
}

@media (max-width: 860px) {
  :root { --board-size: min(calc(100vw - 2rem), 520px); }
  body  { height: auto; min-height: 100dvh; overflow: auto; }
  main  { grid-template-columns: 1fr; justify-items: center; flex: none; overflow: visible; }
  /* Board first on tablet portrait — analysis panel scrolls below */
  .board-section { order: -1; }
  .left-panel, .right-panel { height: auto; overflow: visible; width: min(100%, 560px); }
  .card-move-history { min-height: 220px; }
  .move-history      { max-height: 360px; }
}

@media (max-width: 520px) {
  :root { --board-size: calc(100vw - 1rem); }
}

/* ── Navigation tabs ── */
.main-nav {
  display: flex;
  gap: 0.15rem;
  margin-left: 1.25rem;
}

.nav-tab {
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nav-tab:hover {
  color: var(--text);
  background: var(--surface2);
}

.nav-tab:active { transform: scale(0.95); opacity: 0.8; }

.nav-tab.active {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: rgba(16, 185, 129, 0.25);
}

/* ── Page views (collection, about) ── */
.page-view {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 2rem clamp(1rem, 5vw, 4rem);
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
}

.page-content {
  max-width: 900px;
  margin: 0 auto;
}

.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.page-title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

/* ── Collection ── */
.collection-hero {
  margin-bottom: 1rem;
}

.collection-hero-copy {
  max-width: 620px;
}

.collection-results-pill {
  flex-shrink: 0;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.collection-search {
  margin: 0;
  flex: 1;
}

.collection-search-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.collection-search-input {
  flex: 1;
  min-width: 220px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  padding: 0.75rem 0.9rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.collection-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.collection-search-clear {
  white-space: nowrap;
}

.collection-search-hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.collection-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.35rem;
}

.collection-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.collection-import-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.collection-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.collection-import {
  margin-top: 1rem;
}

.collection-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.collection-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}

@media (max-width: 860px) {
  .collection-import-grid {
    grid-template-columns: 1fr;
  }
}

.collection-import-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}

.collection-import-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.collection-import-hint {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.collection-import-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.collection-import-textarea {
  min-height: 140px;
}

.collection-import-input {
  flex: 1;
  min-width: 160px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.5rem 0.65rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.collection-import-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.collection-file-label {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.collection-file-label:hover {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--border-hover);
}

.collection-file-label input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.collection-import-btn {
  width: auto;
  margin-bottom: 0;
  flex: 1;
  min-width: 180px;
}

.collection-import-status {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── Collection game picker (provider import selection) ─────────────────── */
.coll-game-picker {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.coll-game-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.75rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.coll-game-picker-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.coll-picker-toggle-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.coll-picker-toggle-all:hover { text-decoration: underline; }

.coll-game-picker-list {
  max-height: 220px;
  overflow-y: auto;
}

.coll-game-picker-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

.coll-game-picker-item:last-child { border-bottom: none; }

.coll-game-picker-item:hover { background: var(--surface2); }

.coll-game-picker-item input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.coll-game-picker-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.coll-game-picker-vs {
  font-size: 0.84rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coll-game-picker-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.coll-game-picker-footer {
  padding: 0.55rem 0.75rem;
  background: var(--surface2);
  border-top: 1px solid var(--border);
}

.coll-picker-import-btn {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
}

.coll-picker-import-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.collection-import-provider {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 0.6rem;
}

[data-theme="light"] .collection-import-provider {
  background: rgba(0, 0, 0, 0.02);
}

.collection-import-provider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.45rem;
}

.collection-provider-name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.85rem;
}

.collection-provider-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.collection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.collection-item:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  background: rgba(255, 255, 255, 0.035);
}

.collection-item-board {
  width: 88px;
  flex-shrink: 0;
}

.collection-mini-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 88px;
  height: 88px;
  background: var(--surface-solid);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.collection-mini-square {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.collection-mini-square.is-light { background: var(--sq-light, #f0e4ca); }
.collection-mini-square.is-dark { background: var(--sq-dark, #4a7547); }

.collection-mini-piece {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
}

.collection-item-info {
  flex: 1;
  min-width: 0;
}

.collection-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.15rem;
}

.collection-item-pgn {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.collection-item-preview {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.collection-library-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.collection-library-hint {
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.collection-import-panel {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.collection-import-toggle {
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  font-weight: 500;
  font-size: 0.82rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.collection-import-toggle:hover {
  border-color: var(--border-hover);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.collection-import-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.collection-import-inline-hint {
  position: absolute;
  top: calc(100% + 0.22rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.collection-add-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.65rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.collection-add-btn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border-hover);
}
.collection-add-btn svg { flex-shrink: 0; }

.collection-delete-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.collection-delete-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.collection-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 3.5rem 1rem;
  color: var(--text-muted);
}

.collection-empty.visible { display: flex; }

.collection-empty-icon {
  font-size: 2.8rem;
  opacity: 0.4;
  line-height: 1;
}

.collection-empty-hint {
  font-size: 0.84rem;
  max-width: 340px;
  line-height: 1.5;
}

.collection-empty-hint strong { color: var(--text-secondary); }
.hint-icon-label { white-space: nowrap; }
.hint-inline-icon {
  vertical-align: -2px;
  margin-right: 1px;
  color: var(--accent);
}

.collection-import-modal-box {
  width: min(860px, 94vw);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 30%),
    var(--surface-solid);
}

.collection-import-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.collection-import-modal-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.collection-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.collection-modal-close:hover {
  border-color: var(--border-hover);
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .collection-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .collection-toolbar-actions {
    justify-content: space-between;
  }

  .collection-import-cta {
    align-items: flex-end;
  }

  .collection-item {
    align-items: flex-start;
  }

  .collection-item-board {
    width: 72px;
  }

  .collection-mini-board {
    width: 72px;
    height: 72px;
  }

  .collection-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── About ── */
.about-hero {
  text-align: center;
  margin-bottom: 2.25rem;
}

.about-hero-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.7rem;
  filter: drop-shadow(0 0 14px var(--accent-glow));
  line-height: 1;
}
.about-hero-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 0.7rem;
  filter: drop-shadow(0 0 14px var(--accent-glow));
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.about-card {
  padding: 1.2rem 1.35rem;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.about-card h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.7rem;
  letter-spacing: -0.01em;
}

.about-card p,
.about-card li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.about-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.about-card li::before {
  content: '— ';
  color: var(--accent);
}

.about-card strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Auth modal ── */
.auth-modal-box {
  width: min(420px, 94vw);
  gap: 0;
  padding: 2rem;
  position: relative;
}

.auth-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.auth-close-btn:hover { color: var(--text); background: var(--surface2); }

.auth-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-king-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent);
}

.auth-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.auth-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.auth-tabs {
  display: flex;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 1.25rem;
  gap: 3px;
}

.auth-tab {
  flex: 1;
  padding: 0.45rem 0;
  background: none;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active {
  background: var(--surface-solid);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.auth-social {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.btn-social {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-social:hover {
  background: var(--surface3);
  border-color: var(--border-hover);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-github .social-icon { color: var(--text); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-divider span { flex-shrink: 0; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-input-wrap {
  position: relative;
}

.auth-input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.auth-input.input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
.auth-input-wrap .auth-input {
  padding-right: 2.5rem;
}
.auth-input::placeholder { color: var(--text-muted); }

.auth-eye-btn {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.auth-eye-btn:hover { color: var(--text-secondary); }
.eye-icon { width: 16px; height: 16px; }

.auth-password-strength {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.strength-bar {
  flex: 1;
  height: 3px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.3s, background 0.3s;
}
.strength-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 3.5rem;
  text-align: right;
}

.auth-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  color: #f87171;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   ABOUT PAGE — redesign
   ───────────────────────────────────────────────────────────── */

.about-page-content {
  max-width: 960px;
}

/* Hero */
.about-hero {
  position: relative;
  text-align: center;
  padding: 3rem 1rem 2rem;
  margin-bottom: 2.5rem;
  overflow: hidden;
}

.about-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(16, 185, 129, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 100%, rgba(99, 102, 241, 0.1) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.about-hero > * { position: relative; z-index: 1; }

.about-hero-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 1rem;
  filter:
    drop-shadow(0 0 28px rgba(16, 185, 129, 0.55))
    drop-shadow(0 0 8px rgba(16, 185, 129, 0.3));
  line-height: 1;
  animation: about-icon-float 4s ease-in-out infinite;
}
.about-hero-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 1rem;
  filter:
    drop-shadow(0 0 28px rgba(16, 185, 129, 0.55))
    drop-shadow(0 0 8px rgba(16, 185, 129, 0.3));
  animation: about-icon-float 4s ease-in-out infinite;
}

@keyframes about-icon-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.about-title {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 0.6rem;
}

.about-subtitle {
  font-size: 1rem !important;
  color: var(--text-secondary) !important;
  max-width: 480px;
  margin: 0 auto 1.5rem !important;
  line-height: 1.6;
}

/* Pills row under hero */
.about-hero-pills {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.about-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  backdrop-filter: blur(8px);
}

[data-theme="light"] .about-pill {
  background: rgba(0,0,0,0.04);
}

.about-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.about-pill-dot--green  { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.about-pill-dot--blue   { background: #38bdf8; box-shadow: 0 0 6px rgba(56, 189, 248, 0.4); }
.about-pill-dot--purple { background: #a78bfa; box-shadow: 0 0 6px rgba(167, 139, 250, 0.4); }

/* About grid cards */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.about-card {
  padding: 1.5rem 1.4rem;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
}

.about-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: var(--radius) var(--radius) 0 0;
}

.about-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow), 0 0 0 1px rgba(16, 185, 129, 0.1);
}

.about-card:hover::before {
  opacity: 1;
}

/* Accent card */
.about-card--accent {
  border-color: rgba(16, 185, 129, 0.2);
  background: linear-gradient(145deg,
    rgba(16, 185, 129, 0.07) 0%,
    rgba(14, 17, 24, 0.96) 60%);
}

[data-theme="light"] .about-card--accent {
  background: linear-gradient(145deg,
    rgba(5, 150, 105, 0.08) 0%,
    rgba(248, 251, 255, 0.98) 60%);
  border-color: rgba(5, 150, 105, 0.2);
}

.about-card--accent::before {
  opacity: 0.6;
}

.about-card--accent:hover::before {
  opacity: 1;
}

/* Icon per card */
.about-card-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.8rem;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.about-card h3 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.about-card p,
.about-card li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.about-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0;
}

.about-card li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.65;
}

.about-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px var(--accent-glow);
}

.about-card strong {
  color: var(--text);
  font-weight: 600;
}

/* Footer line */
.about-footer {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.84rem;
}

/* ─────────────────────────────────────────────────────────────
   COLLECTION PAGE — improvements
   ───────────────────────────────────────────────────────────── */

/* Stronger hover on collection items */
.collection-item {
  cursor: pointer;
  position: relative;
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.collection-item:hover {
  border-left-color: var(--accent);
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(16, 185, 129, 0.1);
}

[data-theme="light"] .collection-item:hover {
  background: rgba(5, 150, 105, 0.04);
}

@keyframes collection-item-highlight {
  0%   { border-left-color: var(--accent); background: rgba(16, 185, 129, 0.14); }
  55%  { border-left-color: var(--accent); background: rgba(16, 185, 129, 0.06); }
  100% { border-left-color: transparent;   background: rgba(255, 255, 255, 0.02); }
}

.collection-item--highlight {
  animation: collection-item-highlight 1.8s ease-out forwards;
}

/* Better empty state */
.collection-empty-board {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface3) 100%);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow);
}

.collection-empty-piece {
  font-size: 3rem;
  line-height: 1;
  opacity: 0.35;
}

/* Page view entrance animation */
.page-view {
  animation: page-enter 0.3s ease;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Collection search with icon */
.collection-search-wrapper {
  position: relative;
  flex: 1;
}

/* ─────────────────────────────────────────────────────────────
   HEADER — mobile fixes
   ───────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  header h1,
  .site-title {
    display: none;
  }
  .main-nav {
    margin-left: 0.25rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   ABOUT — mobile
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .about-title {
    font-size: 1.7rem !important;
  }
  .about-subtitle {
    font-size: 0.9rem !important;
  }
  .about-hero {
    padding: 2rem 0.5rem 1.5rem;
  }
  .about-hero-icon {
    font-size: 3rem;
  }
  .about-hero-logo {
    width: 80px;
    height: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) and (min-width: 641px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   GENERAL micro-polish
   ───────────────────────────────────────────────────────────── */

/* Subtle card lift on hover for analysis/skill cards */
.left-panel .card:hover,
.right-panel .card:hover {
  border-color: var(--border-hover);
  transition: border-color 0.2s ease;
}

/* Nav tab active underline indicator */
.nav-tab.active {
  font-weight: 600;
}

/* Smoother nav tab transitions */
.nav-tab {
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

/* Collection mini board — accent glow on hover */
.collection-item:hover .collection-mini-board {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 16px rgba(16, 185, 129, 0.25);
  transition: box-shadow 0.2s ease;
}

/* Import button in collection — accent variant */
.collection-import-toggle {
  color: var(--accent);
  border-color: rgba(16, 185, 129, 0.3);
  font-weight: 600;
}

.collection-import-toggle:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.auth-submit {
  width: 100%;
  padding: 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.auth-link {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

.auth-terms {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* ── Arrow drawing animations ── */
@keyframes arrow-preview-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.88; }
}

@keyframes arrow-tip-pulse {
  0%, 100% { opacity: 0.5;  transform: scale(0.75); }
  50%       { opacity: 1.0;  transform: scale(1.35); }
}

.arrow-preview {
  animation: arrow-preview-pulse 0.75s ease-in-out infinite;
}

.arrow-preview-tip {
  transform-box: fill-box;
  transform-origin: center;
  animation: arrow-tip-pulse 0.75s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   PLAY PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Play page uses the same 3-column grid as the Analysis main */
/* ═══════════════════════════════════════════════════════════════
   Play page — main container
   ═══════════════════════════════════════════════════════════════ */

.play-main {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: page-enter 0.3s ease;
}

/* ── Setup screen ── */
.play-setup-screen {
  flex: 1;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1.5rem 2.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
}

.play-setup-inner {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.play-setup-hero {
  text-align: center;
}

.play-setup-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.4rem;
  letter-spacing: -0.02em;
}

.play-setup-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Persona roster (setup) ── */
.persona-roster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.persona-card-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.1rem 0.75rem 1rem;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.persona-card-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.persona-card-v2:hover {
  border-color: var(--border-hover);
  background: var(--surface3);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.persona-card-v2.active {
  transform: translateY(-3px);
}

.persona-card-v2[data-persona="jonas"].active  { border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245,158,11,0.2), 0 8px 28px rgba(245,158,11,0.2); background: rgba(245,158,11,0.06); }
.persona-card-v2[data-persona="clarer"].active { border-color: #10b981; box-shadow: 0 0 0 1px rgba(16,185,129,0.2),  0 8px 28px rgba(16,185,129,0.2);  background: rgba(16,185,129,0.06); }
.persona-card-v2[data-persona="rahim"].active  { border-color: #3b82f6; box-shadow: 0 0 0 1px rgba(59,130,246,0.2),  0 8px 28px rgba(59,130,246,0.2);  background: rgba(59,130,246,0.06); }
.persona-card-v2[data-persona="david"].active  { border-color: #8b5cf6; box-shadow: 0 0 0 1px rgba(139,92,246,0.2),  0 8px 28px rgba(139,92,246,0.2);  background: rgba(139,92,246,0.06); }
.persona-card-v2[data-persona="gert"].active   { border-color: #ef4444; box-shadow: 0 0 0 1px rgba(239,68,68,0.2),   0 8px 28px rgba(239,68,68,0.2);   background: rgba(239,68,68,0.06); }

.persona-avatar-v2 {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.persona-card-v2:hover .persona-avatar-v2,
.persona-card-v2.active .persona-avatar-v2 { transform: scale(1.12); }

.persona-color-jonas  { background: rgba(245,158,11,0.15); border: 2px solid rgba(245,158,11,0.5); color: #f59e0b; }
.persona-color-clarer { background: rgba(16,185,129,0.15); border: 2px solid rgba(16,185,129,0.5); color: #10b981; }
.persona-color-rahim  { background: rgba(59,130,246,0.15); border: 2px solid rgba(59,130,246,0.5); color: #3b82f6; }
.persona-color-david  { background: rgba(139,92,246,0.15); border: 2px solid rgba(139,92,246,0.5); color: #8b5cf6; }
.persona-color-gert   { background: rgba(239,68,68,0.15);  border: 2px solid rgba(239,68,68,0.5);  color: #ef4444; }

.persona-name-v2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.persona-elo-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.persona-badge-jonas  { background: rgba(245,158,11,0.15); color: #f59e0b; }
.persona-badge-clarer { background: rgba(16,185,129,0.15); color: #10b981; }
.persona-badge-rahim  { background: rgba(59,130,246,0.15); color: #3b82f6; }
.persona-badge-david  { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.persona-badge-gert   { background: rgba(239,68,68,0.15);  color: #ef4444; }

.persona-desc-v2 {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.persona-difficulty {
  display: flex;
  gap: 4px;
  margin-top: 0.1rem;
}

.diff-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--border-hover);
}

.diff-dot.diff-filled { background: var(--accent); border-color: var(--accent); }

/* ── Setup bottom row ── */
.play-setup-bottom {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.play-color-picker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.play-color-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.play-color-selector {
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.3rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.play-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.4rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.play-color-btn:hover {
  color: var(--text);
  background: var(--surface3, rgba(255, 255, 255, 0.04));
}

.play-color-btn:active { transform: scale(0.97); }

.play-color-btn.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
  box-shadow: var(--glow-accent);
}

/* Circular color token (swatch) */
.play-color-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.play-color-swatch--white {
  background: linear-gradient(155deg, #ffffff 0%, #e6e6ea 100%);
}

.play-color-swatch--black {
  background: linear-gradient(155deg, #d6d6dc 0%, #b4b4bd 100%);
}

.play-color-swatch--random {
  background: linear-gradient(135deg, #ffffff 0 50%, #1a1b20 50% 100%);
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.55), 0 0 3px rgba(255, 255, 255, 0.55);
}

.play-color-btn.active .play-color-swatch {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 0 0 2px var(--accent);
}

.play-color-piece {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

/* Source PNGs are dark ink. White token = hollow (outline) king reads as a
   white piece; black token = solid king reads as a black piece. Both sit on a
   light swatch so the ink is visible. */

.play-start-btn {
  padding: 0.65rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.play-start-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Game arena (3-column grid) ── */
.play-arena {
  flex: 1;
  display: grid;
  grid-template-columns: var(--panel-w) auto var(--panel-w);
  gap: 1.1rem;
  align-items: stretch;
  justify-content: center;
  padding: 1.1rem clamp(0.75rem, 2vw, 1.75rem) 1.6rem;
  min-height: 0;
  overflow: hidden;
}

/* ── Arena left column ── */
.play-arena-left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  overflow: hidden;
}

/* ── Character card ── */
.play-character-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-shrink: 0;
  transition: border-color 0.3s ease;
}

.play-character-card.char-jonas  { border-color: rgba(245,158,11,0.35); }
.play-character-card.char-clarer { border-color: rgba(16,185,129,0.35); }
.play-character-card.char-rahim  { border-color: rgba(59,130,246,0.35); }
.play-character-card.char-david  { border-color: rgba(139,92,246,0.35); }
.play-character-card.char-gert   { border-color: rgba(239,68,68,0.35); }

.play-character-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.play-character-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.play-character-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.play-character-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.play-character-elo {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  display: inline-block;
}

.play-character-elo.elo-jonas  { background: rgba(245,158,11,0.15); color: #f59e0b; }
.play-character-elo.elo-clarer { background: rgba(16,185,129,0.15); color: #10b981; }
.play-character-elo.elo-rahim  { background: rgba(59,130,246,0.15); color: #3b82f6; }
.play-character-elo.elo-david  { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.play-character-elo.elo-gert   { background: rgba(239,68,68,0.15);  color: #ef4444; }

/* ── Speech bubble ── */
.play-speech-wrap {
  position: relative;
  padding-top: 0.5rem;
}

.play-speech-bubble {
  background: var(--surface3);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  border-top-left-radius: 4px;
  padding: 0.75rem 0.9rem;
  position: relative;
  height: 5.5rem;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
}
.play-speech-bubble::-webkit-scrollbar { width: 4px; }
.play-speech-bubble::-webkit-scrollbar-track { background: transparent; }
.play-speech-bubble::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

.play-speech-bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 18px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--border-hover);
}

.play-speech-bubble::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 18px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--surface3);
}

.play-speech-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  font-style: italic;
}

.play-speech-text.speech-new {
  animation: speech-in 0.35s ease;
}

@keyframes speech-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Thinking dots ── */
.play-speech-thinking {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0.2rem 0;
}

.think-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: think-bounce 1.3s ease-in-out infinite;
}

.think-dot:nth-child(2) { animation-delay: 0.22s; }
.think-dot:nth-child(3) { animation-delay: 0.44s; }

@keyframes think-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.45; }
  35% { transform: translateY(-7px); opacity: 1; }
}

/* ── Chat with opponent ── */
.play-chat-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.play-chat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.play-chat-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.play-chat-input {
  flex: 1;
  min-width: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  font-family: inherit;
  padding: 0.38rem 0.6rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.play-chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.play-chat-input::placeholder { color: var(--text-muted); }

.play-chat-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.play-chat-send-btn {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}

.play-chat-send-btn:hover:not(:disabled) {
  background: var(--accent-dark);
  box-shadow: var(--glow-accent);
}

.play-chat-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Move history ── (mirrors the Analysis tab's .card-move-history panel) */
.play-history-card {
  flex: 1;
  min-height: 0;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s;
}

.play-history-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,0.035) 0%, transparent 45%);
  pointer-events: none;
}

.play-history-title {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.025);
  margin: -1rem -1rem 1rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

[data-theme="light"] .play-history-title {
  background: rgba(0,0,0,0.018);
}

.play-move-history-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
  font-size: 0.83rem;
  color: var(--text-muted);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  word-wrap: break-word;
}

/* ── Game actions ── */
.play-game-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}

.btn-icon-save {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border-hover);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-icon-save:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.btn-icon-save svg {
  flex-shrink: 0;
}

.btn-danger {
  padding: 0.55rem 1rem;
  border: 1.5px solid rgba(239,68,68,0.35);
  border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.08);
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-danger:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.6);
}

/* ── Arena right column: Ask-the-coach panel ── */
.play-arena-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.play-ask-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.play-ask-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem 0.7rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.play-ask-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.play-ask-title svg { color: var(--accent); flex-shrink: 0; }

.play-ask-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.play-ask-close {
  display: none;            /* desktop: card is always docked; close only on mobile sheet */
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.play-ask-close:hover { color: var(--text); background: var(--surface3); }

.play-ask-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.85rem 0.9rem 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
}
.play-ask-body::-webkit-scrollbar { width: 5px; }
.play-ask-body::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }

/* Onboarding / empty state */
.play-ask-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 1.1rem 0.5rem 0.5rem;
}
.play-ask-empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  color: var(--accent);
}
.play-ask-empty-title { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.play-ask-empty-desc { font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); max-width: 24ch; }

.play-ask-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
}
.play-ask-chip {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.42rem 0.8rem;
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: center;
}
.play-ask-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.play-qa-thread { display: flex; flex-direction: column; }

.play-ask-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 0.6rem 0.7rem;
}

#play-ask-error { margin: 0 0.7rem; }
#play-ask-error:empty { display: none; }

.play-ask-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1190;
}

/* ── Ask sheet on tablet / mobile (right column is hidden by default) ── */
@media (max-width: 860px) {
  #play-right-panel.play-ask-open {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    height: auto;
    max-height: 78vh;
    z-index: 1200;
    padding: 0;
    animation: play-ask-slide-up 0.22s ease-out;
  }
  #play-right-panel.play-ask-open .play-ask-card {
    height: auto;
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.35);
  }
  .play-ask-close { display: flex; align-items: center; justify-content: center; }
  .play-ask-backdrop.play-ask-open { display: block; }
}

@keyframes play-ask-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Play page: tablet layout (must be after .play-arena base rule) ── */
@media (max-width: 860px) {
  .play-main  { min-height: 0; overflow: visible; }
  .play-arena {
    grid-template-columns: 1fr;
    justify-items: center;
    overflow: visible;
    height: auto;
    min-height: 0;
    padding-bottom: 2rem;
  }
  .play-arena-left  { height: auto; overflow: visible; width: min(100%, 560px); }
  .play-arena-right { display: none; }
}

/* ── Board section (play page) ── */
#play-board-container {
  width: var(--board-size);
  height: var(--board-size);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 60px rgba(0,0,0,0.6);
  position: relative;
  animation: board-breathe 6s ease-in-out infinite;
  background-color: var(--sq-dark, #4a7547);
  cursor: default;
  /* See #board-container: keep piece drags from scrolling the page on mobile. */
  touch-action: none;
}

#play-board-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 10;
}

#play-board-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.play-game-status {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 0.5rem;
}

.play-game-status.status-win  { color: var(--accent); }
.play-game-status.status-loss { color: #ef4444; }
.play-game-status.status-draw { color: var(--text-secondary); }

.btn-jump-current {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.btn-jump-current:hover {
  background: var(--accent);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   Collection — Analyze button + loading state
   ═══════════════════════════════════════════════════════════════ */

.collection-analyze-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-width: 5.5rem;
  justify-content: center;
}

.collection-analyze-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: translateY(-1px);
}

.collection-analyze-btn:disabled {
  cursor: default;
  opacity: 0.75;
}

.collection-analyze-btn svg {
  flex-shrink: 0;
}

/* Spinning loader inside the analyze button */
@keyframes ca-spin { to { transform: rotate(360deg); } }
.collection-analyze-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ca-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.collection-analyze-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.collection-analyze-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}

.collection-analyze-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease;
}

/* Tiny "analyzed" checkmark badge on collection items */
.collection-analyzed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
  opacity: 0.8;
}

/* ── Play: Game over modal ── */
.play-game-over-box {
  text-align: center;
  gap: 0.9rem;
}

.play-over-result-badge {
  display: inline-block;
  margin: 0 auto;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.play-over-result-badge.result-win {
  background: rgba(16,185,129,0.15);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.35);
}

.play-over-result-badge.result-loss {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
}

.play-over-result-badge.result-draw {
  background: rgba(251,191,36,0.12);
  color: #f59e0b;
  border: 1px solid rgba(251,191,36,0.3);
}

.play-over-heading {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}

.play-over-subtitle {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin: 0;
}

.play-over-elo {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  letter-spacing: 0.01em;
}
.play-over-elo.elo-up   { color: #3dba6e; background: rgba(61,186,110,0.1); }
.play-over-elo.elo-down { color: #e05252; background: rgba(224,82,82,0.1); }
.play-over-elo.elo-same { color: var(--text-secondary); background: var(--surface-alt); }

.play-over-title-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.play-over-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.play-over-input {
  background: var(--surface2);
  border: 1.5px solid var(--border-hover);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.play-over-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.play-over-actions {
  flex-direction: column;
}

.play-over-actions .btn-primary,
.play-over-actions .btn-secondary {
  width: 100%;
}

/* Rematch button */
.btn-rematch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.72rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.btn-rematch:hover {
  background: var(--accent-hover, var(--accent));
  box-shadow: 0 4px 18px var(--accent-glow, rgba(99,102,241,0.35));
  transform: translateY(-1px);
}
.btn-rematch:active {
  transform: translateY(0);
  box-shadow: none;
}
.rematch-icon {
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.4s ease;
}
.btn-rematch:hover .rematch-icon {
  transform: rotate(-180deg);
}

/* Divider with label between rematch and save actions */
.play-over-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: var(--text-muted, var(--text-secondary));
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.play-over-divider::before,
.play-over-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.warn-modal-text {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ── Play: saved toast notification ── */
.play-saved-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--surface-solid);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-glow);
  z-index: 2000;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  pointer-events: none;
}

.play-saved-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.settings-page-content {
  max-width: 760px;
}

.settings-page-header {
  margin-bottom: 2rem;
}

.settings-page-title {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.4rem;
}

.settings-page-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.settings-section {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}

.settings-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}

.color-scheme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}

.color-scheme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.6rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-width: 72px;
}

.color-scheme-swatch:hover {
  border-color: var(--border-hover);
  background: var(--surface3);
}

.color-scheme-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
  background: var(--accent-subtle);
}

.color-scheme-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.csq {
  display: block;
  width: 100%;
  height: 100%;
}

.color-scheme-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.color-scheme-swatch.active .color-scheme-name {
  color: var(--accent);
}

.custom-color-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.custom-color-input {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}

.custom-color-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.custom-color-input input[type="color"] {
  width: 34px;
  height: 28px;
  padding: 2px 3px;
  border: 1.5px solid var(--border-hover);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  cursor: pointer;
  transition: border-color 0.15s;
}

.custom-color-input input[type="color"]:hover,
.custom-color-input input[type="color"]:focus {
  border-color: var(--accent);
  outline: none;
}

.piece-set-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.piece-set-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-width: 96px;
}

.piece-set-card:hover {
  border-color: var(--border-hover);
  background: var(--surface3);
}

.piece-set-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
  background: var(--accent-subtle);
}

.piece-set-preview {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piece-set-preview img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.piece-set-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.piece-set-card.active .piece-set-name {
  color: var(--accent);
}

.piece-set-preview--blind {
  color: var(--text-muted);
  opacity: 0.6;
}

.piece-set-king {
  font-size: 2.6rem;
  line-height: 1;
}

/* Dark mode (default): show white king, hide black king */
.piece-set-king--dark  { display: block; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.piece-set-king--light { display: none; }

/* Light mode: show black king, hide white king */
[data-theme="light"] .piece-set-king--dark  { display: none; }
[data-theme="light"] .piece-set-king--light { display: block; color: #1a1a1a; }

/* Chess-piece icons rendered from the standard board piece set (chess_bold).
   Replaces the former hand-drawn inline SVG glyphs used as avatars, empty-state
   icons, the auth/login header, etc. The source art is dark line-art, so on the
   default dark theme it is inverted to read as light pieces on dark surfaces; in
   light mode it is shown as-is (dark pieces on light surfaces). Sizing follows
   the container's font-size, matching the 1em SVGs these replaced. */
.piece-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.15em;
  filter: invert(1);
}
[data-theme="light"] .piece-icon { filter: none; }

/* Opponent/persona avatars invert the global rule: black pieces on dark surfaces,
   white pieces on light surfaces — the opposite of general piece-icon behaviour. */
.persona-avatar-v2 .piece-icon,
.play-character-avatar .piece-icon,
.play-mobile-opp-avatar .piece-icon { filter: none; }

[data-theme="light"] .persona-avatar-v2 .piece-icon,
[data-theme="light"] .play-character-avatar .piece-icon,
[data-theme="light"] .play-mobile-opp-avatar .piece-icon { filter: invert(1); }

.piece-icon--inline { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.piece-icon--lg     { width: 1.8em; height: 1.8em; }

.board-options-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.board-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.board-option-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.board-option-row:first-child {
  padding-top: 0;
}

.board-option-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.settings-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.settings-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.settings-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.25s ease;
}

.settings-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-toggle input:checked + .settings-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.settings-toggle input:checked + .settings-toggle-track .settings-toggle-thumb {
  transform: translateX(16px);
  background: #fff;
}

.settings-toggle:hover .settings-toggle-track {
  border-color: var(--accent);
}

[data-theme="light"] .settings-section {
  background: var(--card-gradient);
}

@media (max-width: 640px) {
  .settings-page-title {
    font-size: 1.4rem;
  }
  .color-scheme-grid {
    gap: 0.5rem;
  }
  .color-scheme-swatch {
    min-width: 62px;
    padding: 0.45rem 0.5rem 0.4rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Collection — Analysis stats summary row
   ═══════════════════════════════════════════════════════════════ */

.analysis-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.analysis-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.analysis-pill--blunder   { background: rgba(239,68,68,0.15);   color: #f87171; }
.analysis-pill--mistake   { background: rgba(249,115,22,0.15);  color: #fb923c; }
.analysis-pill--inaccuracy { background: rgba(234,179,8,0.15); color: #facc15; }
.analysis-pill--great     { background: rgba(16,185,129,0.15);  color: #34d399; }
.analysis-pill--excellent { background: rgba(16,185,129,0.15);  color: #34d399; }

/* ── Analysis live stats panel (shown during game analysis) ── */
.analysis-live-stats {
  padding: 0.5rem 0.6rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.analysis-live-accuracy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.live-acc-side { display: flex; align-items: center; gap: 0.25rem; }

.live-acc-val {
  font-weight: 700;
  color: var(--text);
  font-size: 0.8rem;
  min-width: 2.4ch;
  text-align: right;
}

.live-acc-sep { color: var(--text-muted); }

.analysis-live-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.live-badge--brilliant  { background: rgba(5,150,105,0.15);   color: #34d399; }
.live-badge--excellent  { background: rgba(16,185,129,0.15);  color: #6ee7b7; }
.live-badge--correct    { background: rgba(2,132,199,0.15);   color: #38bdf8; }
.live-badge--inaccuracy { background: rgba(234,179,8,0.15);   color: #facc15; }
.live-badge--mistake    { background: rgba(249,115,22,0.15);  color: #fb923c; }
.live-badge--blunder    { background: rgba(239,68,68,0.15);   color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   Game Insights Modal
   ═══════════════════════════════════════════════════════════════ */

.game-insights-box {
  width: min(660px, 96vw);
  max-height: min(90dvh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

/* ── Eval chart (insights modal + live analysis panel) ── */
.eval-chart-container {
  position: relative;
  border-radius: var(--radius-sm);
  background: var(--surface3);
  border: 1px solid var(--border);
  height: 80px;
  flex-shrink: 0;
}

.chart-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.chart-dot--blunder    { background: #f87171; box-shadow: 0 0 5px rgba(248,113,113,0.6); }
.chart-dot--mistake    { background: #fb923c; box-shadow: 0 0 5px rgba(251,146,60,0.6); }
.chart-dot--inaccuracy { background: #facc15; box-shadow: 0 0 5px rgba(250,204,21,0.5); }

@media (hover: hover) {
  .chart-dot {
    pointer-events: all;
    cursor: pointer;
    transition: transform 0.12s;
  }
  .chart-dot:hover { transform: translate(-50%, -50%) scale(1.8); }
}

.eval-chart {
  display: block;
  width: 100%;
  height: 80px;
  cursor: crosshair;
  transition: opacity 0.15s;
}

.eval-chart:hover { opacity: 0.88; }

.eval-chart-labels {
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.insights-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
}

.insights-modal-head h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.insights-modal-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.insights-close-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--surface2);
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  margin-top: 0.1rem;
}

.insights-close-btn:hover { background: var(--surface3); color: var(--text); }

.insights-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.insights-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

@media (max-width: 580px) {
  .insights-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

.insights-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  text-align: center;
  gap: 0.25rem;
  transition: border-color 0.15s;
}

.insights-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.insights-stat-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.insights-stat--blunder    { border-color: rgba(239,68,68,0.3); }
.insights-stat--blunder    .insights-stat-num { color: #f87171; }
.insights-stat--mistake    { border-color: rgba(249,115,22,0.25); }
.insights-stat--mistake    .insights-stat-num { color: #fb923c; }
.insights-stat--inaccuracy { border-color: rgba(234,179,8,0.22); }
.insights-stat--inaccuracy .insights-stat-num { color: #facc15; }
.insights-stat--good       { border-color: rgba(16,185,129,0.22); }
.insights-stat--good       .insights-stat-num { color: #34d399; }
.insights-stat--excellent  { border-color: rgba(16,185,129,0.22); }
.insights-stat--excellent  .insights-stat-num { color: #34d399; }
.insights-stat--accuracy   { border-color: rgba(99,102,241,0.2); }
.insights-stat--accuracy   .insights-stat-num { color: #a5b4fc; }

.insights-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: -0.3rem;
}

.insights-moments {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.key-moment-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
}

.key-moment-card:hover {
  border-color: var(--accent);
  transform: translateX(3px);
}

.key-moment-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.key-moment-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
}

.key-moment-ann {
  font-size: 0.9rem;
  font-weight: 800;
  min-width: 1.8rem;
  text-align: center;
  font-family: monospace;
}

.key-moment-ann--blunder    { color: #f87171; }
.key-moment-ann--mistake    { color: #fb923c; }
.key-moment-ann--inaccuracy { color: #facc15; }
.key-moment-ann--brilliant,
.key-moment-ann--excellent,
.key-moment-ann--great      { color: #34d399; }

.key-moment-move {
  font-size: 0.85rem;
  font-weight: 700;
  flex: 1;
  font-family: monospace;
}

.key-moment-type {
  font-size: 0.67rem;
  font-weight: 600;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
}

.key-moment-blunder    .key-moment-type { background: rgba(239,68,68,0.15);   color: #f87171; }
.key-moment-mistake    .key-moment-type { background: rgba(249,115,22,0.15);  color: #fb923c; }
.key-moment-inaccuracy .key-moment-type { background: rgba(234,179,8,0.15);   color: #facc15; }
.key-moment-brilliant  .key-moment-type,
.key-moment-excellent  .key-moment-type,
.key-moment-great      .key-moment-type { background: rgba(16,185,129,0.15);  color: #34d399; }

.key-moment-body {
  display: flex;
  gap: 0.85rem;
  padding: 0.8rem 0.9rem;
  align-items: flex-start;
}

.key-moment-board {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  position: relative;
  cursor: zoom-in;
}

.key-moment-board .collection-mini-board {
  width: 100px;
  height: 100px;
  border-color: var(--border-hover);
  box-shadow: none;
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.key-moment-zoom-overlay {
  position: fixed;
  width: 250px;
  height: 250px;
  z-index: 2000;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--accent);
  overflow: hidden;
}

.key-moment-zoom-overlay .collection-mini-board {
  width: 250px;
  height: 250px;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.key-moment-comment {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
  max-height: 8em;
  overflow: hidden;
}

.key-moment-comment p { margin: 0; }
.key-moment-comment p + p { margin-top: 0.35em; }
.key-moment-comment strong { color: var(--text); }

.key-moment-comment--disabled {
  color: var(--text-muted);
  font-style: italic;
}

.key-moment-cploss {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  font-family: monospace;
  letter-spacing: -0.02em;
  margin-left: auto;
  flex-shrink: 0;
}

.key-moment-goto {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.key-moment-card:hover .key-moment-goto {
  opacity: 1;
  color: var(--accent);
}

/* When cploss badge is present, goto moves to its own spot after it */
.key-moment-cploss + .key-moment-goto {
  margin-left: 0.3rem;
}

.key-moment-loading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
}

.key-moment-loading-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.key-moment-loading-dots {
  display: flex;
  gap: 3px;
}

.key-moment-loading-dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: km-dot-bounce 1.2s ease-in-out infinite;
}

.key-moment-loading-dots span:nth-child(1) { animation-delay: 0s; }
.key-moment-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.key-moment-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes km-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

.insights-footer {
  padding: 0.9rem 1.5rem 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}


/* ── Calls remaining badge ──────────────────────────────────────────────── */
.calls-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 28px;
  padding: 0 0.65rem;
  border-radius: 99px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid rgba(16, 185, 129, 0.2);
  white-space: nowrap;
  cursor: default;
}

.calls-badge--low {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
}

.calls-badge-label {
  opacity: 0.8;
  font-weight: 400;
}

/* ── Header user menu ────────────────────────────────────────────────────── */
#header-auth-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-username {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.header-plan-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 0.45rem;
  border-radius: 99px;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--surface3);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.header-plan-badge--premium {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  border-color: transparent;
}

.beta-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.4rem;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
  vertical-align: middle;
  margin-left: 0.35rem;
}

.btn-logout {
  background: transparent;
  color: var(--text-secondary);
}
.btn-logout:hover {
  color: var(--text);
  background: var(--surface2);
}

/* ── Settings layout ─────────────────────────────────────────────────────── */
.settings-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.settings-sidebar {
  width: 200px;
  flex-shrink: 0;
  padding: 1.5rem 0.75rem;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--surface-solid);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.settings-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-sidebar-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 0.6rem 0.35rem;
}

.settings-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}
.settings-sidebar-item:hover {
  background: var(--surface2);
  color: var(--text);
}
.settings-sidebar-item.active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}

.settings-main {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.settings-panel {
  padding: 2rem 2.5rem;
  max-width: 680px;
}

.settings-panel-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* Keep existing settings-page-content for backwards compat */
.settings-page-content {
  padding: 2rem 2.5rem;
  max-width: 680px;
}

/* ── Account settings panel ──────────────────────────────────────────────── */
.account-signin-prompt {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.account-signin-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.account-signin-prompt h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.account-signin-prompt p {
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.account-signin-btns {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.account-profile-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-profile-row {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.account-profile-row:last-child { border-bottom: none; }

.account-profile-label {
  font-size: 0.83rem;
  color: var(--text-secondary);
  width: 120px;
  flex-shrink: 0;
}

.account-profile-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.account-plan-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.account-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.account-plan-name {
  font-size: 1rem;
  font-weight: 700;
}

.account-plan-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.account-plan-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.55rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface3);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.account-plan-badge--premium {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  border-color: transparent;
}

.account-usage-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.account-usage-bar {
  height: 6px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
}

.account-usage-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.account-usage-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.account-plan-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.account-upgrade-btn {
  font-size: 0.85rem;
}

.account-manage-btn {
  font-size: 0.85rem;
}

.account-premium-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--accent);
}

/* ── Security settings ───────────────────────────────────────────────────── */
.security-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 380px;
}

.security-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.security-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.security-input {
  height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.security-input:focus { border-color: var(--accent); }

.security-error {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  font-size: 0.82rem;
}

.security-success {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--accent);
  font-size: 0.82rem;
}

.security-submit { align-self: flex-start; }

.settings-section--danger {
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: rgba(239, 68, 68, 0.04);
}

.settings-section-title--danger { color: #f87171; }

/* Board option info block (label + description stacked) */
.board-option-info {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.board-option-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Settings section description text */
.settings-section-desc {
  font-size: 0.83rem;
  color: var(--text-secondary);
  margin: -0.25rem 0 0.85rem;
  line-height: 1.5;
}

/* Gameplay panel — default color radio group */
.gameplay-color-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.gameplay-color-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.18s, background 0.18s;
  user-select: none;
}

.gameplay-color-option:hover {
  border-color: var(--accent);
}

.gameplay-color-option input[type="radio"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.gameplay-color-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
}

.gameplay-color-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

/* Pawn promotion picker modal */
.promo-picker-box {
  max-width: 360px;
  text-align: center;
}

.promo-picker-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: -0.25rem 0 1.25rem;
}

.promo-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.promo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
  color: var(--text);
}

.promo-btn:hover {
  border-color: var(--accent);
  background: var(--surface3);
  transform: translateY(-2px);
}

.promo-icon {
  font-size: 1.9rem;
  line-height: 1;
}

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

.promo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.promo-key {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  background: var(--surface3);
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  font-size: 0.68rem;
  font-family: inherit;
  color: var(--text-muted);
  line-height: 1.4;
}

.promo-btn--best {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.promo-btn--best .promo-key {
  color: var(--accent);
  border-color: var(--accent);
}

.promo-picker-hint {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.promo-picker-hint kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  background: var(--surface3);
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--text-secondary);
  margin: 0 1px;
}

.settings-danger-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin: 0.5rem 0 1rem;
  line-height: 1.5;
}

.btn-danger-outline {
  height: 36px;
  padding: 0 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: transparent;
  color: #f87171;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.6);
}

/* ── Upgrade modal ───────────────────────────────────────────────────────── */
.upgrade-modal-box {
  max-width: 560px;
  width: 100%;
  position: relative;
  padding: 0;
}

.upgrade-close-btn {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--surface3);
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 1;
}
.upgrade-close-btn:hover { background: var(--border-hover); color: var(--text); }

.upgrade-header {
  text-align: center;
  padding: 2.5rem 2rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.upgrade-icon {
  display: block;
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 12px var(--accent-glow));
}

.upgrade-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.upgrade-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.verify-email-modal-box {
  max-width: 420px;
  width: 100%;
  position: relative;
  padding: 0;
}

.verify-email-modal-body {
  padding: 1.5rem 2rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.verify-email-modal-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.verify-email-resend-btn {
  width: 100%;
  height: 42px;
  font-size: 0.92rem;
  font-weight: 700;
}

.verify-email-modal-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.upgrade-billing-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 1rem 2rem 0;
}

.upgrade-billing-btn {
  flex: 1;
  max-width: 160px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.upgrade-billing-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.upgrade-billing-btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }

.upgrade-billing-btn--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.upgrade-billing-save {
  display: inline-block;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

.upgrade-billing-btn--active .upgrade-billing-save {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.upgrade-plan-annual-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  margin-top: -0.5rem;
}

.upgrade-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem 2rem;
}

.upgrade-plan {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  position: relative;
}

.upgrade-plan--premium {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.upgrade-plan-best {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.upgrade-plan-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.upgrade-plan-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.upgrade-plan-price span.upgrade-plan-period {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.upgrade-plan--free .upgrade-plan-price { color: var(--text-secondary); font-size: 1.2rem; }

.upgrade-plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.upgrade-plan-features li {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.upgrade-check {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.upgrade-actions {
  padding: 0 2rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.upgrade-cta-btn {
  width: 100%;
  height: 44px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.upgrade-login-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: center;
}
.upgrade-login-hint a { color: var(--accent); text-decoration: none; }
.upgrade-login-hint a:hover { text-decoration: underline; }

.upgrade-disclaimer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.5rem 2rem 1.5rem;
}

/* Social auth disabled state */
.btn-social:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Responsive settings ─────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .settings-layout {
    flex-direction: column;
  }
  .settings-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
    gap: 0.25rem;
  }
  .settings-sidebar-group { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
  .settings-sidebar-group-label { display: none; }
  .settings-sidebar-item { width: auto; }
  .settings-panel { padding: 1.25rem 1rem; }
  .upgrade-plans { grid-template-columns: 1fr; }
}

/* ── Site footer ────────────────────────────────────────────────────────── */
body.page-play .site-footer { display: none; }

.site-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(12, 15, 20, 0.5);
}
[data-theme="light"] .site-footer { background: rgba(240, 244, 248, 0.6); }
.site-footer-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer-link:hover { color: var(--accent); }
.site-footer-sep { user-select: none; }

/* ════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION
   ════════════════════════════════════════════════════════════════ */

/* Prevent iOS auto-zoom on input focus (16px floor) */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: max(16px, 0.9rem) !important;
  }
}

@media (max-width: 380px) {
  .king-logo { width: 26px; height: 26px; }
}

/* ── Header: hamburger layout on mobile/tablet (≤768px) ── */
@media (max-width: 768px) {
  header {
    padding: 0.45rem 0.75rem;
    gap: 0.35rem;
  }

  /* Hide nav — moved to drawer */
  .main-nav { display: none; }

  /* Guest auth hidden on mobile — accessible via drawer */
  #header-auth-guest { display: none; }

  /* On mobile, only show the compact user identity (avatar + name). */
  .header-plan-badge { display: none; }
  .btn-logout        { display: none; }

  /* Clamp username so it doesn't overflow on narrow screens */
  .header-username-btn {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Keep logo + title visible */
  .site-title { display: flex; }

  .king-logo { width: 30px; height: 30px; }
  .site-title-chess   { font-size: 0.97rem; letter-spacing: 0.14em; }
  .site-title-explain { font-size: 0.63rem; }
}

/* ── Touch targets: minimum 44px, no 300ms tap delay ── */
@media (pointer: coarse) {
  .nav-tab, .btn-auth, .btn, .skill-btn, .play-color-btn,
  .collection-import-toggle, .play-start-btn,
  .settings-sidebar-item, .persona-card-v2 {
    min-height: 44px;
  }
  button, [role="button"], a, input[type="submit"], input[type="button"],
  label[for], select, .cursor-pointer {
    touch-action: manipulation;
  }
}

/* ── Board section: remove eval bar on very small phones ── */
@media (max-width: 360px) {
  :root { --ctrl-w: 0px; }
  .eval-column { display: none; }
}

/* ── Persona roster: responsive columns ── */
@media (max-width: 768px) {
  /* 3 columns on tablet (641-768px) — 5 columns is too cramped */
  .persona-roster { grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
  .play-setup-screen { padding: 1.25rem 1rem 2rem; }
  .play-setup-inner { gap: 1.25rem; }
}

@media (max-width: 480px) {
  .persona-roster { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .persona-card-v2 { padding: 0.9rem 0.5rem 0.85rem; gap: 0.35rem; }
  .persona-avatar-v2 { width: 48px; height: 48px; font-size: 1.4rem; }
  .persona-name-v2 { font-size: 0.85rem; }
  .persona-desc-v2 { font-size: 0.65rem; }
}

/* ── Play setup bottom row: stack on phone ── */
@media (max-width: 480px) {
  .play-setup-bottom {
    flex-direction: column;
    gap: 0.85rem;
    align-items: stretch;
  }
  .play-color-picker { justify-content: center; }
  .play-start-btn { width: 100%; justify-content: center; }
}

/* ── Collection: fixes for small screens ── */
@media (max-width: 640px) {
  .collection-search-input { min-width: 0; }
  .collection-toolbar { flex-wrap: wrap; gap: 0.5rem; }
}

@media (max-width: 480px) {
  .collection-search-row { flex-wrap: wrap; gap: 0.4rem; }
  .collection-search-input { width: 100%; }

  /* Stack collection items vertically */
  .collection-item {
    flex-wrap: wrap;
    padding: 0.8rem;
    gap: 0.6rem;
  }
  .collection-item-board { order: -1; }
  .collection-item-info { min-width: calc(100% - 108px); }
  .collection-item-actions {
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
    margin-top: -0.1rem;
    gap: 0.5rem;
  }

  .collection-toolbar-actions { width: 100%; }
  .collection-import-btn { min-width: 0; flex: 1; }
}

/* ── Key moment board: touch zoom via active state ── */
@media (pointer: coarse) {
  .key-moment-board { cursor: default; }
  .key-moment-board:active .collection-mini-board {
    transform: scale(2.2);
    transform-origin: top left;
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
    z-index: 100;
    position: relative;
  }
}

/* ── Game Insights modal: full-width on small phones ── */
@media (max-width: 540px) {
  .game-insights-box {
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 93dvh;
  }
  .insights-content { padding: 0.9rem 1rem; }
  .insights-modal-head { padding: 1rem 1rem 0.75rem; }
  .insights-footer { padding: 0.75rem 1rem; }

  /* Key moment body: stack board above comment */
  .key-moment-body {
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
  }
  .key-moment-board {
    width: 120px;
    height: 120px;
  }
  .key-moment-board .collection-mini-board {
    width: 120px;
    height: 120px;
  }
}

/* ── Modals: scrollable on mobile (body overflow:hidden must not block them) ── */
@media (max-width: 640px) {
  .modal-overlay {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 0;
  }
  /* Re-centre the modal box within the scrollable overlay */
  .modal-overlay > * {
    margin: auto;
  }
}

/* ── Auth modal: full-width on phone ── */
@media (max-width: 480px) {
  .auth-modal-box {
    width: calc(100vw - 1.5rem);
    padding: 1.5rem 1.25rem;
  }
  .modal-box {
    width: calc(100vw - 1.5rem);
  }
  .collection-import-modal-box {
    width: calc(100vw - 1.5rem);
  }
}

/* ── Settings: compact panels on phone ── */
@media (max-width: 480px) {
  .settings-panel { padding: 1rem 0.85rem; }
  .settings-page-content { padding: 1rem 0.85rem; }
  .upgrade-plans { gap: 0.75rem; padding: 1.25rem 1rem; }
  .upgrade-header { padding: 1.75rem 1.25rem 1.25rem; }
  .upgrade-actions { padding: 0 1rem 0.5rem; }
}

/* ── About page: compact ── */
@media (max-width: 480px) {
  .page-view { padding: 1.25rem 0.9rem; }
  .page-title { font-size: 1.25rem; }
  .page-subtitle { font-size: 0.82rem; }
}

/* ── Smooth scrolling & momentum ── */
@media (max-width: 860px) {
  .page-view,
  .move-history,
  .settings-main,
  .insights-content,
  .play-setup-screen {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ── Reduce animations on mobile for performance ── */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .persona-card-v2:hover { transform: none; }
  .collection-import-toggle:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   IMPORT PROGRESS BAR
   ════════════════════════════════════════════════════════════════ */

.import-progress-wrap {
  width: 100%;
  height: 3px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.import-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ════════════════════════════════════════════════════════════════
   HAMBURGER + MOBILE DRAWER
   ════════════════════════════════════════════════════════════════ */

/* Hamburger — hidden on desktop */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hamburger-btn:hover { background: var(--surface2); }
.hamburger-btn:active { background: var(--surface2); transform: scale(0.9); }
.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
}
.hamburger-btn.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Override default display:none for mobile/tablet — must come after the global rule above */
@media (max-width: 768px) {
  .hamburger-btn { display: flex; }
}

/* Drawer backdrop */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mobile-drawer-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

/* Drawer panel */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(82vw, 310px);
  height: 100dvh;
  background: var(--surface-solid);
  border-right: 1px solid var(--border);
  z-index: 950;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 6px 0 40px rgba(0,0,0,0.45);
  overflow: hidden;
}
.mobile-drawer.open { transform: translateX(0); }

/* Drawer header row */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.85rem 0.9rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.drawer-logo .king-logo { width: 26px; height: 26px; }
.drawer-close-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.drawer-close-btn:hover { background: var(--surface2); color: var(--text); }
.drawer-close-btn:active { background: var(--surface2); transform: scale(0.88); }

/* Drawer nav items */
.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0.9rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s, transform 0.1s, opacity 0.1s;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.drawer-nav-btn:hover { background: var(--surface2); color: var(--text); }
.drawer-nav-btn:active { opacity: 0.75; transform: scale(0.97); }
.drawer-nav-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}
.drawer-nav-btn svg { flex-shrink: 0; opacity: 0.75; }
.drawer-nav-btn.active svg { opacity: 1; }

/* Drawer footer */
.drawer-footer {
  flex-shrink: 0;
  padding: 0.6rem 0.6rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.drawer-auth-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.drawer-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem 0.3rem;
}
.drawer-username {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.drawer-plan-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 20px;
  background: var(--surface3);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.drawer-plan-badge--premium {
  background: var(--accent-subtle);
  color: var(--accent);
}
.drawer-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.72rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s, transform 0.1s;
  border: 1px solid var(--border);
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.drawer-btn-login {
  background: transparent;
  color: var(--text-secondary);
}
.drawer-btn-login:hover { background: var(--surface2); color: var(--text); }
.drawer-btn-login:active { background: var(--surface2); transform: scale(0.97); }
.drawer-btn-signup {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.drawer-btn-signup:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.drawer-btn-signup:active { background: var(--accent-dark); transform: scale(0.97); opacity: 0.9; }
.drawer-btn-logout {
  background: transparent;
  color: var(--text-secondary);
}
.drawer-btn-logout:hover { background: var(--surface2); color: var(--text); }
.drawer-btn-logout:active { background: var(--surface2); transform: scale(0.97); }
.drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 0.2rem 0;
}
.drawer-theme-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.drawer-theme-btn:hover { background: var(--surface2); color: var(--text); }
.drawer-theme-btn:active { background: var(--surface2); transform: scale(0.97); }
.drawer-theme-btn svg { flex-shrink: 0; opacity: 0.75; }

/* Analysis tab bar — hidden on desktop */
.analysis-tab-bar { display: none; }

/* ════════════════════════════════════════════════════════════════
   MOBILE CHESS BOARD LAYOUT  (≤ 640px)
   Lock the viewport when a board is active; board fills full width;
   all panels accessible via a bottom tab bar.
   ════════════════════════════════════════════════════════════════ */

/* ── Mobile bottom navigation bar ── */
.mobile-bottom-nav {
  display: none; /* shown only on mobile via media query */
}

.mobile-board-bar {
  display: none;
}

/* ── Play mobile opponent header ── */
.play-mobile-opp-bar {
  display: none;
}

.play-actions-mobile-panel {
  display: none;
}

.play-mobile-chat-bar {
  display: none; /* shown by JS on mobile when chat icon tapped */
}

.play-mobile-chat-toggle {
  display: none; /* shown by JS when a game is active on mobile */
}

/* ── Base: hide mobile-only elements on desktop ── */
.mobile-eval-display { display: none; }
.mobile-options-wrap { display: none; }
.mobile-options-menu { display: none; }
.mobile-ann-overlay  { display: none; }
.mobile-ask-overlay  { display: none; }
.mobile-ask-trigger  { display: none; }
#mobile-comment-hint { display: none; }
.mobile-engine-bar   { display: none; }

/* Mobile comment hint — tappable strip below button bar.
   Uses max-height collapse so no space is reserved when hidden. */
body.mobile-board-active #mobile-comment-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0 0.75rem;
  background: var(--accent-subtle);
  color: var(--accent);
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.15s ease, border-bottom-color 0.15s ease;
}
body.mobile-board-active #mobile-comment-hint.visible {
  max-height: 40px;
  padding: 0.35rem 0.75rem;
  opacity: 1;
  pointer-events: auto;
  border-bottom-color: var(--border);
}
body.mobile-board-active #mobile-comment-hint.visible:active {
  background: rgba(var(--accent-rgb), 0.15);
}

@media (max-width: 640px) {

  /* 1. Lock viewport on board tabs.
        --board-size is set exclusively by JS (applyBoardSize) as an inline style
        on <html> before board.resize() runs. No CSS --board-size rule here so the
        inline value is never overridden by a body-level cascade. */
  body.mobile-board-active {
    /* Pin the whole document to the viewport so the board can NEVER move.
       overflow:hidden alone is not enough on iOS Safari: when an inner
       scroller (e.g. the streaming AI comments) hits its boundary, the
       rubber-band chains up to the document and shifts the board upward.
       position:fixed takes the body out of flow so it physically cannot
       scroll, and overscroll-behavior:none stops scroll-chaining. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    --ctrl-w: 0px;
  }

  /* Hide material bars on mobile — reclaims 52px for board + panel */
  body.mobile-board-active .material-bar {
    display: none !important;
  }

  /* 2. Analysis page: vertical flex column filling viewport below header */
  body.mobile-board-active #page-analysis {
    display: flex;
    flex-direction: column !important;
    height: calc(100dvh - 46px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  /* 3. Board section — first row, fixed height */
  body.mobile-board-active #page-analysis .board-section {
    order: 0;
    flex-shrink: 0 !important;
    width: 100% !important;
    align-items: center !important;
  }

  body.mobile-board-active #page-analysis .board-and-eval {
    gap: 0 !important;
    justify-content: center !important;
  }

  body.mobile-board-active #page-analysis .eval-column {
    display: none !important;
  }

  body.mobile-board-active #board-container {
    width: var(--board-size) !important;
    height: var(--board-size) !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
    animation: none !important;
  }

  /* 4. Button bar: board controls + eval + options */
  body.mobile-board-active #page-analysis .button-bar {
    border-radius: 0 !important;
    padding: 0 0.4rem !important;
    min-height: 44px !important;
    background: var(--surface-solid) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    gap: 0 !important;
    position: relative !important;
  }

  body.mobile-board-active #page-analysis .icon-btn {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }

  /* Hide desktop-only controls; prev/next stay visible */
  body.mobile-board-active #page-analysis #btn-flip,
  body.mobile-board-active #page-analysis #btn-first,
  body.mobile-board-active #page-analysis #btn-last,
  body.mobile-board-active #page-analysis #btn-reset {
    display: none !important;
  }

  /* Absolutely center the nav group (prev/next only) */
  body.mobile-board-active #page-analysis .btn-nav-group {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    margin: 0;
    gap: 0.75rem;
  }

  /* Larger prev/next buttons */
  body.mobile-board-active #page-analysis #btn-prev,
  body.mobile-board-active #page-analysis #btn-next {
    pointer-events: auto;
    width: 56px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
  }

  /* 5. Engine eval — hidden on mobile (shown in Analysis tab instead) */
  body.mobile-board-active #page-analysis .mobile-eval-display {
    display: none;
  }

  /* 6. Options button + dropdown */
  body.mobile-board-active #page-analysis .mobile-options-wrap {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
  }

  body.mobile-board-active #page-analysis .mobile-options-btn {
    display: flex;
    font-size: 1.2rem;
    letter-spacing: 0;
  }

  .mobile-options-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 400;
    min-width: 160px;
    padding: 0.3rem 0;
    overflow: hidden;
  }

  .mobile-options-menu.open {
    display: block;
  }

  .mobile-option-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.75rem 1.1rem;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
  }

  .mobile-option-item svg {
    flex-shrink: 0;
    opacity: 0.7;
  }

  .mobile-option-item:active {
    background: var(--surface2);
  }

  /* Mobile annotation popup overlay */
  .mobile-ann-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 500;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(2px);
  }

  .mobile-ann-overlay.open {
    display: flex;
  }

  .mobile-ann-popup {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    width: 100%;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
  }

  .mobile-ann-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid var(--border);
  }

  .mobile-ann-popup-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .mobile-ann-popup-close {
    font-size: 0.8rem;
    opacity: 0.6;
  }

  .mobile-ann-popup-body {
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .mobile-ann-popup-body .ann-toolbar-row {
    flex-wrap: wrap;
  }

  /* 7. Analysis tab bar — visible only in mobile board view */
  body.mobile-board-active #analysis-tab-bar {
    display: flex;
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    height: calc(44px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border);
    gap: 0;
  }

  body.mobile-board-active #analysis-tab-bar .analysis-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.18s, border-color 0.18s;
    padding: 0;
  }

  body.mobile-board-active #analysis-tab-bar .analysis-tab svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
  }

  body.mobile-board-active #analysis-tab-bar .analysis-tab.analysis-tab-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  body.mobile-board-active #analysis-tab-bar .analysis-tab.analysis-tab-active svg {
    opacity: 1;
  }

  /* 8. Panel visibility — tab-driven */
  body.mobile-board-active #page-analysis .right-panel,
  body.mobile-board-active #page-analysis .left-panel {
    display: none !important;
    order: 2;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.45rem 0.65rem 1.2rem !important;
    gap: 0 !important;
  }

  body.mobile-board-active #page-analysis .right-panel.panel-active,
  body.mobile-board-active #page-analysis .left-panel.panel-active {
    display: flex !important;
  }

  /* Right panel: outer container doesn't scroll — .card-move-history scrolls instead */
  body.mobile-board-active #page-analysis .right-panel {
    overflow-y: hidden !important;
  }

  /* Analysis (left) panel: no outer scroll — inner subpanel-body scrolls */
  body.mobile-board-active #page-analysis .left-panel {
    overflow-y: hidden !important;
    padding: 0 !important;
  }

  /* Card chrome stripping */
  body.mobile-board-active #page-analysis .game-title-bar,
  body.mobile-board-active #page-analysis .pgn-action-row {
    display: none !important;
  }

  /* Analyze game button — pinned at bottom of the flex column, never scrolls away */
  body.mobile-board-active #page-analysis #analyze-game-row {
    flex-shrink: 0;
    padding: 0.5rem 0 0;
    background: transparent;
    border-top: 1px solid var(--border);
    z-index: 10;
  }

  body.mobile-board-active #page-analysis .card-move-history {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-board-active #page-analysis .card-move-history h2 {
    display: none !important;
  }

  body.mobile-board-active #page-analysis .move-history {
    max-height: none !important;
    font-size: 0.85rem;
    overflow: visible !important;
  }

  body.mobile-board-active #page-analysis .ann-toolbar {
    display: none !important;
  }

  body.mobile-board-active #page-analysis .card-analysis {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Panel title is hidden on mobile — tabs already identify the panel */
  body.mobile-board-active #page-analysis .cp-panel-title {
    display: none !important;
  }

  body.mobile-board-active #page-analysis .card-analysis .analysis-result.visible {
    overflow: visible !important;
    flex: none !important;
  }

  body.mobile-board-active #page-analysis .explanation-text {
    font-size: 0.82rem !important;
    line-height: 1.52 !important;
    margin-bottom: 0.45rem !important;
  }

  body.mobile-board-active #page-analysis .strategic-context {
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
  }

  body.mobile-board-active #page-analysis #qa-thread {
    margin-top: 0.3rem !important;
  }

  body.mobile-board-active #page-analysis .comment-footer {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding: 0.55rem 0.7rem calc(env(safe-area-inset-bottom, 0px) + 0.55rem) !important;
    background: transparent !important;
  }

  /* Skill selector hidden in analysis panel on mobile — only shown inside the Ask overlay */
  body.mobile-board-active #page-analysis .skill-selector,
  body.mobile-board-active #page-analysis .skill-elo-hint {
    display: none !important;
  }

  /* Hide desktop question input; show mobile Ask trigger instead */
  body.mobile-board-active #page-analysis .question-row {
    display: none !important;
  }

  /* ── "Ask about this position" redesigned as a primary CTA ── */
  body.mobile-board-active #page-analysis .mobile-ask-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.78rem 1rem !important;
    margin-top: 0 !important;
    background: var(--accent) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    letter-spacing: -0.01em !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 3px 14px rgba(var(--accent-rgb), 0.38) !important;
    transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s !important;
  }

  body.mobile-board-active #page-analysis .mobile-ask-trigger svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #fff !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
  }

  body.mobile-board-active #page-analysis .mobile-ask-trigger:active {
    opacity: 0.85 !important;
    transform: scale(0.975) !important;
    box-shadow: 0 1px 5px rgba(var(--accent-rgb), 0.25) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  /* Hide pen/trash edit buttons in mobile analysis panel */
  body.mobile-board-active #page-analysis .comment-actions {
    display: none !important;
  }

  /* Mobile Ask overlay (bottom sheet) */
  .mobile-ask-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 500;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(2px);
  }

  .mobile-ask-overlay.open {
    display: flex;
  }

  .mobile-ask-popup {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    width: 100%;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
  }

  .mobile-ask-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid var(--border);
  }

  .mobile-ask-popup-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .mobile-ask-popup-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    font-family: inherit;
  }

  .mobile-ask-popup-body {
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .mobile-ask-popup-body .skill-selector {
    gap: 0.3rem;
  }

  .mobile-ask-popup-body .skill-btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    border-radius: 999px;
  }

  .mobile-ask-input-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
  }

  .mobile-ask-input-field {
    font-size: 0.9rem;
    padding: 0.5rem 0.65rem;
  }

  /* Stockfish panel hidden on mobile — no space, content panel fills the gap */
  body.mobile-board-active #page-analysis .stockfish-lines-tool {
    display: none !important;
  }

  body.mobile-board-active #page-analysis .stockfish-move {
    font-size: 0.78rem !important;
  }

  /* ── Play tab mobile layout ── */

  /* Play arena: full-height column */
  body.mobile-board-active .play-arena {
    display: flex;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: calc(100dvh - 46px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-items: unset !important;
  }

  /* Opponent info strip above board */
  .play-mobile-opp-bar {
    display: flex;
    flex-direction: column;
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    order: 1;
  }

  .play-mobile-opp-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.85rem;
    min-height: 48px;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .play-mobile-opp-chevron {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
  }

  .play-mobile-opp-bar.expanded .play-mobile-opp-chevron {
    transform: rotate(180deg);
  }

  /* When expanded, show the full latest line instead of a single truncated row */
  .play-mobile-opp-bar.expanded .play-mobile-opp-speech {
    white-space: normal;
    overflow: visible;
  }

  /* Collapsible chat log */
  .play-mobile-opp-log {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.35rem 0.85rem 0.7rem;
    border-top: 1px solid var(--border);
  }

  .play-mobile-opp-bar.expanded .play-mobile-opp-log {
    display: flex;
  }

  .play-opp-log-msg {
    align-self: flex-start;
    max-width: 88%;
    padding: 0.4rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 3px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text);
    font-style: italic;
  }

  .play-opp-log-msg:last-child {
    background: var(--accent-subtle);
    border-color: transparent;
    color: var(--text);
  }

  .play-opp-log-empty {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.25rem 0;
  }

  .play-mobile-opp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 2px solid var(--border);
  }

  .play-mobile-opp-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  .play-mobile-opp-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
  }

  .play-mobile-opp-speech {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
  }

  /* Play board section */
  body.mobile-board-active .play-arena .board-section {
    order: 2;
    flex-shrink: 0;
    width: 100% !important;
    align-items: center !important;
  }

  body.mobile-board-active .play-arena .board-and-eval {
    justify-content: center !important;
  }

  body.mobile-board-active #play-board-container {
    width: var(--board-size) !important;
    height: var(--board-size) !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
    animation: none !important;
  }

  body.mobile-board-active .play-arena .button-bar {
    border-radius: 0 !important;
    padding: 0.3rem 0.75rem !important;
    min-height: 44px !important;
    background: var(--surface-solid) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Play panels — moves always visible directly below board */
  body.mobile-board-active .play-arena-left {
    order: 3;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.5rem 0.75rem !important;
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Hide desktop-only play elements */
  body.mobile-board-active .play-arena-right { display: none !important; }
  /* …but the ask sheet, once toggled open, overlays the board */
  body.mobile-board-active #play-right-panel.play-ask-open {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    height: auto;
    max-height: 78vh;
    z-index: 1200;
    padding: 0;
    order: 0;
  }
  body.mobile-board-active .play-arena-left .play-character-card { display: none !important; }
  body.mobile-board-active .play-arena-left .play-speech-wrap { display: none !important; }
  body.mobile-board-active .play-arena-left .play-chat-wrap { display: none !important; }
  body.mobile-board-active .play-arena-left .play-game-actions { display: none !important; }

  /* Play history compact */
  body.mobile-board-active .play-history-card { min-height: 0 !important; flex: 1 !important; }
  body.mobile-board-active .play-move-history-list { max-height: none !important; }

  /* Mobile chat toggle and bar shown/hidden by JS only — no CSS override needed */

  /* Mobile chat input bar — layout when JS sets display:flex */
  body.mobile-board-active .play-mobile-chat-bar {
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.35rem 0;
  }
  body.mobile-board-active .play-mobile-chat-bar .play-chat-input {
    flex: 1;
    min-width: 0;
  }

} /* end @media (max-width: 640px) */

/* Remove default chessboard.js border — container handles the framing */
.board-b72b1 { border: none !important; }
/* Black pieces on board squares get a subtle white outline in dark mode */
[data-theme="dark"] .square-55d63 img.piece-417db[src*="black"] {
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.55));
}

/* ── Piece drag halo ── */
/* The chessboard.js floating drag piece is a direct body child */
body > .piece-417db {
  z-index: 9999;
  transform: scale(1.18);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35))
          drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
}

#piece-drag-halo {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  background: rgba(50, 55, 70, 0.65);
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
  display: none;
  transform: translate(-50%, -50%);
}

[data-theme="light"] #piece-drag-halo {
  background: rgba(120, 125, 135, 0.52);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

/* ── Toast notifications ── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  z-index: 99999;
  pointer-events: none;
}

.toast {
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.25s ease;
  pointer-events: auto;
  max-width: 360px;
  text-align: center;
}

.toast--success { background: var(--accent-dark); }
.toast--error   { background: #dc2626; }
.toast--info    { background: var(--surface3); color: var(--text); border: 1px solid var(--border); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Contact page ── */
.contact-page-content {
  max-width: 720px;
}

.contact-hero {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  margin-bottom: 1.5rem;
}

.contact-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.6rem;
}

.contact-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

.contact-form-wrap {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

@media (max-width: 560px) {
  .contact-field-row { grid-template-columns: 1fr; }
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.contact-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
}

.contact-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.contact-input::placeholder {
  color: var(--text-muted);
}

.contact-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0aab8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.2rem;
}

.contact-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.contact-char-count {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.2rem;
}

.contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.contact-error {
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #fca5a5;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
}

[data-theme="light"] .contact-error { color: #dc2626; }

.contact-success {
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-success-icon {
  font-size: 1.1rem;
  font-weight: 700;
}

.contact-submit {
  align-self: flex-start;
  padding: 0.7rem 1.75rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-privacy-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Forgot-password panel ── */
.auth-forgot-intro {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.auth-back-btn {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.auth-sent-notice {
  text-align: center;
  padding: 0.5rem 0;
}

.auth-sent-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent);
  margin: 0 auto 0.75rem;
  display: block;
}

.auth-sent-notice p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

/* ── Email verification banner ── */
.verify-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: rgba(234,179,8,0.12);
  border-bottom: 1px solid rgba(234,179,8,0.3);
  font-size: 0.82rem;
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 90;
  flex-wrap: wrap;
}

.verify-banner-text {
  flex: 1;
  min-width: 180px;
}

.verify-banner-resend {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.verify-banner-resend:hover { background: var(--surface2); }

.verify-banner-dismiss {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 0.2rem;
}

.verify-banner-dismiss:hover { color: var(--text); }

/* ── Panel switcher header ── */
.card-panel-header {
  background: rgba(255,255,255,0.025);
  margin: -1rem -1rem 0;
  padding: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
}

[data-theme="light"] .card-panel-header {
  background: rgba(0,0,0,0.018);
}

.panel-tabs {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.panel-tab {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.62rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  position: relative;
  white-space: nowrap;
}

.panel-tab:first-child {
  border-radius: var(--radius) 0 0 0;
}

.panel-tab + .panel-tab {
  border-left: 1px solid var(--border);
  border-radius: 0;
}

.panel-tab svg {
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.panel-tab--active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.panel-tab--active svg {
  opacity: 1;
}

.panel-tab--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%);
  border-radius: 2px 2px 0 0;
  z-index: 1;
}

.panel-tab:hover:not(.panel-tab--active) {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
}

[data-theme="light"] .panel-tab:hover:not(.panel-tab--active) {
  background: rgba(0,0,0,0.04);
}

/* In-panel title (replaces old <h2 id="analysis-card-title">) */
.cp-panel-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  padding: 0.7rem 0 0.2rem;
  flex-shrink: 0;
  transition: color 0.2s;
}

/* ── Card subpanels ── */
.card-subpanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 0.65rem;
}

/* ── Opening subpanel ── */
.opening-subpanel {
  padding-top: 0;
}

.ob-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex: 1;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.ob-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ob-header {
  padding: 0.85rem 0.85rem 0.7rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ob-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  flex-wrap: nowrap;
  min-width: 0;
  cursor: pointer;
}

.ob-name-row--expanded {
  flex-wrap: wrap;
}

.ob-name-row--expanded .ob-opening-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.ob-eco {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 5px;
  padding: 0.1em 0.5em;
  white-space: nowrap;
  flex-shrink: 0;
}

.ob-opening-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ob-total {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ob-total::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
}

.ob-section-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.7;
  padding: 0.55rem 0.85rem 0.3rem;
}

.ob-moves {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
  padding: 0 0.45rem 0.5rem;
}

.ob-move-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.48rem 0.55rem 0.48rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.13s;
  user-select: none;
  border-left: 2.5px solid transparent;
}

.ob-move-row:hover { background: var(--accent-subtle); }

.ob-move-row--best    { border-left-color: #f59e0b; }
.ob-move-row--good    { border-left-color: var(--accent); }
.ob-move-row--normal  { border-left-color: var(--text-muted); opacity: 0.85; }
.ob-move-row--dubious { border-left-color: #f87171; }

.ob-san {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  font-family: 'Inter', ui-monospace, monospace;
  letter-spacing: 0.01em;
  min-width: 36px;
  flex-shrink: 0;
}

.ob-move-row:hover .ob-san { color: var(--accent); }


.ob-winbar-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ob-winbar-track {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(16, 185, 129, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

[data-theme="light"] .ob-winbar-track {
  border-color: rgba(5, 150, 105, 0.18);
}

.ob-winbar-black {
  background: linear-gradient(90deg, #080b10 0%, #141820 100%);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.ob-winbar-draw {
  background: linear-gradient(90deg, #374151 0%, #4b5563 100%);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

[data-theme="light"] .ob-winbar-draw {
  background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%);
}

.ob-winbar-white {
  background: linear-gradient(90deg, #e8d8ba 0%, #f2e8d0 100%);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
}

.ob-winpcts {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6rem;
  line-height: 1;
}

.ob-winpct-w { color: #c8b89a; font-weight: 500; }
.ob-winpct-d { color: var(--text-muted); opacity: 0.75; }
.ob-winpct-b { color: var(--text-muted); }

.ob-winpct-w::before { content: 'W '; opacity: 0.6; }
.ob-winpct-d::before { content: 'D '; opacity: 0.6; }
.ob-winpct-b::before { content: 'B '; opacity: 0.6; }

.ob-winpct-games {
  margin-left: auto;
  color: var(--text-muted);
  opacity: 0.55;
}

/* ── Master games list ─────────────────────────────────── */

.ob-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.7;
  padding: 0.55rem 0.85rem 0.3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.ob-section-toggle:hover { opacity: 1; }

.ob-toggle-chevron {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.ob-section-toggle[aria-expanded="false"] .ob-toggle-chevron {
  transform: rotate(-90deg);
}

.ob-games {
  padding: 0 0.45rem 0.3rem;
  display: flex;
  flex-direction: column;
}

.ob-games-showmore {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem;
  margin-top: 0.1rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}

.ob-games-showmore:hover {
  opacity: 1;
  color: var(--accent);
}

.ob-games-showmore svg { opacity: 0.7; }

.ob-mobile-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 1.7rem);
  margin: 0.35rem 0.85rem 0.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, border-color 0.15s;
}
.ob-mobile-browse-btn:hover {
  background: rgba(16,185,129,0.18);
  border-color: rgba(16,185,129,0.35);
}

.ob-games-more-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.ob-games-more-wrap--open {
  max-height: 600px;
  opacity: 1;
}

.ob-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.13s;
  cursor: pointer;
}

.ob-game-row:hover { background: var(--accent-subtle); }

.ob-game-row.ob-game-loading {
  opacity: 0.55;
  pointer-events: none;
}

.ob-game-row.ob-game-loading .ob-game-right::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--text-muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.ob-game-players {
  font-size: 0.72rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.ob-game-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.ob-game-cont {
  font-size: 0.68rem;
  font-weight: 700;
  font-family: 'Inter', ui-monospace, monospace;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.ob-game-result {
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ob-res--w { color: #c8b89a; }
.ob-res--b { color: var(--text-muted); }
.ob-res--d { color: var(--text-muted); opacity: 0.7; }

.ob-game-year {
  font-size: 0.62rem;
  color: var(--text-muted);
  opacity: 0.5;
}

.ob-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: auto;
  flex-shrink: 0;
}

.ob-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.ob-empty-icon {
  color: var(--text-muted);
  opacity: 0.35;
  margin-bottom: 0.25rem;
}

.ob-empty-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.ob-empty-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Mobile overrides for panel header */
body.mobile-board-active #page-analysis .card-panel-header {
  margin: 0 !important;
  border-radius: 0 !important;
  border-top: none !important;
}

body.mobile-board-active #page-analysis .cp-panel-title {
  display: none !important;
}

/* card-subpanel: flex column, overflow hidden — subpanel-body handles scrolling.
   No display !important — JS sets inline display:none on inactive panels. */
body.mobile-board-active #page-analysis .card-subpanel {
  flex: 1 1 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Scrollable content area within each subpanel */
body.mobile-board-active #page-analysis .subpanel-body {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
  padding: 0.5rem 0.7rem !important;
}

/* Opening subpanel body: no top padding (ob-header has its own) */
body.mobile-board-active #page-analysis .opening-subpanel .subpanel-body {
  padding: 0 !important;
}

body.mobile-board-active #page-analysis .ob-header {
  padding: 0.5rem 0.5rem 0.4rem !important;
}

body.mobile-board-active #page-analysis .ob-moves {
  padding: 0 0.2rem 0.35rem !important;
}

body.mobile-board-active #page-analysis .ob-section-label {
  padding: 0.35rem 0.5rem 0.2rem !important;
}

body.mobile-board-active #page-analysis .ob-footer {
  padding: 0.4rem 0.5rem !important;
}

/* ── Browse Master Games Modal ──────────────────────────────────────────────── */
.browse-modal-box {
  width: min(720px, 96vw);
  max-height: min(86vh, 760px);
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.browse-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.browse-modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.browse-modal-title-wrap h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.browse-modal-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.browse-modal-close {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.1rem 0.1rem 0.1rem 0.5rem;
  transition: color 0.15s;
  flex-shrink: 0;
}
.browse-modal-close:hover { color: var(--text); }

.browse-modal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.browse-filter-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.65rem;
  flex: 1 1 160px;
  min-width: 130px;
  transition: border-color 0.15s;
}
.browse-filter-search:focus-within { border-color: var(--accent); }
.browse-filter-search svg { color: var(--text-muted); flex-shrink: 0; }

.browse-filter-input-raw {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.82rem;
  color: var(--text);
  width: 100%;
  font-family: inherit;
}
.browse-filter-input-raw::placeholder { color: var(--text-muted); }

.browse-filter-input {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.65rem;
  font-size: 0.82rem;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.browse-filter-input:focus { border-color: var(--accent); }

.browse-filter-num {
  width: 104px;
  -moz-appearance: textfield;
}
.browse-filter-num::-webkit-outer-spin-button,
.browse-filter-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.browse-filter-select {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.65rem;
  font-size: 0.82rem;
  color: var(--text);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.browse-filter-select:focus { border-color: var(--accent); }

.browse-modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.browse-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3.5rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.browse-modal-games {
  padding: 0.35rem 0;
}

.browse-modal-games .ob-game-row {
  padding: 0.45rem 1.5rem;
  border-radius: 0;
  border-bottom: 1px solid transparent;
}
.browse-modal-games .ob-game-row:hover {
  background: var(--accent-subtle);
}
.browse-modal-games .ob-game-players {
  font-size: 0.8rem;
}

.browse-modal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.browse-modal-empty p { margin: 0; }

.browse-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.browse-footer-loading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.75rem 1.5rem;
}

.browse-footer-done {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.5;
  padding: 0.75rem 1.5rem;
}

.spinner-ring-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.browse-continue-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: inherit;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.browse-continue-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.browse-empty-scan {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.3rem 0 0;
  opacity: 0.7;
}

@media (max-width: 600px) {
  .browse-modal-box { max-height: 92vh; }
  .browse-modal-head { padding: 1rem 1rem 0.75rem; }
  .browse-modal-filters { padding: 0.6rem 1rem; gap: 0.4rem; }
  .browse-filter-num { width: 85px; }
  .browse-modal-games .ob-game-row { padding: 0.4rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TRAIN PAGE — mode selector
═══════════════════════════════════════════════════════════════ */
.train-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 56px);
  padding: 0;
}

.train-mode-select {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 2.5rem;
}

.train-mode-header {
  text-align: center;
  margin-bottom: 2rem;
}

.train-hub-emblem {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background: var(--accent-subtle);
  border: 1.5px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.train-mode-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 0.4rem;
}

.train-mode-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.train-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.train-mode-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem 1.4rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s, background 0.18s;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.train-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-subtle) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
}

.train-mode-card:hover:not(.train-mode-card--soon)::before { opacity: 1; }

.train-mode-card:hover:not(.train-mode-card--soon) {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.18);
  transform: translateY(-2px);
}

.train-mode-card--soon {
  opacity: 0.5;
  cursor: default;
}

.train-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  position: relative;
  z-index: 1;
  transition: transform 0.18s;
}
.train-mode-card:hover:not(.train-mode-card--soon) .train-card-icon {
  transform: scale(1.06);
}

.train-mode-card--soon .train-card-icon {
  background: var(--bg-input);
  color: var(--text-muted);
}

.train-card-info { flex: 1; position: relative; z-index: 1; min-width: 0; }
.train-card-name {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.train-card-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.train-card-arrow {
  flex-shrink: 0;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  transition: transform 0.18s, color 0.18s;
}
.train-mode-card:hover:not(.train-mode-card--soon) .train-card-arrow {
  transform: translateX(3px);
  color: var(--accent);
}

.train-soon-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-input);
  color: var(--text-muted);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Per-card train hub styles ── */

/* Hide the separate daily row; stats live inside the card */
.train-daily-row { display: none !important; }

/* Puzzles: full-width top card, green-tinted */
#btn-train-puzzles {
  grid-column: 1 / -1;
  min-height: 110px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.13) 0%, rgba(var(--accent-rgb),0.04) 55%, var(--card-bg) 100%);
  border-color: rgba(var(--accent-rgb), 0.25);
}
#btn-train-puzzles:hover:not(.train-mode-card--soon) {
  border-color: var(--accent);
  box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.22);
}

/* Foundations: amber-tinted */
#btn-train-foundations {
  background: linear-gradient(135deg, rgba(245,158,11,0.11) 0%, rgba(245,158,11,0.03) 55%, var(--card-bg) 100%);
  border-color: rgba(245,158,11,0.22);
}
#btn-train-foundations:hover:not(.train-mode-card--soon) {
  border-color: #f59e0b;
  box-shadow: 0 6px 24px rgba(245,158,11,0.18);
}

/* Openings: indigo-tinted */
#btn-train-openings {
  background: linear-gradient(135deg, rgba(99,102,241,0.11) 0%, rgba(99,102,241,0.03) 55%, var(--card-bg) 100%);
  border-color: rgba(99,102,241,0.22);
}
#btn-train-openings:hover:not(.train-mode-card--soon) {
  border-color: #818cf8;
  box-shadow: 0 6px 24px rgba(99,102,241,0.18);
}

/* Foundations & Openings: column layout so title doesn't wrap in 2-col grid */
#btn-train-foundations,
#btn-train-openings {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.2rem 1.3rem 1.1rem;
}
#btn-train-foundations .train-card-icon,
#btn-train-openings .train-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
#btn-train-foundations .train-card-arrow,
#btn-train-openings .train-card-arrow { display: none; }

/* Foundations hover arrow */
#btn-train-foundations:hover:not(.train-mode-card--soon) .train-card-arrow { color: #f59e0b; }
/* Openings hover arrow */
#btn-train-openings:hover:not(.train-mode-card--soon) .train-card-arrow { color: #818cf8; }

/* Badge micro-labels above card name */
#btn-train-puzzles .train-card-info::before {
  content: 'TACTICAL TRAINING';
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.28rem;
}
#btn-train-foundations .train-card-info::before {
  content: 'CURRICULUM';
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d97706;
  display: block;
  margin-bottom: 0.28rem;
}
[data-theme="dark"] #btn-train-foundations .train-card-info::before { color: #fbbf24; }
#btn-train-openings .train-card-info::before {
  content: 'REPERTOIRE';
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6366f1;
  display: block;
  margin-bottom: 0.28rem;
}
[data-theme="dark"] #btn-train-openings .train-card-info::before { color: #818cf8; }

/* Card stat line (shown by JS) */
.train-card-stat {
  margin-top: 0.45rem;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text-secondary);
}
#train-card-puzzles-stat    { color: var(--accent); }
#train-card-foundations-stat { color: #d97706; }
[data-theme="dark"] #train-card-foundations-stat { color: #fbbf24; }
#train-card-openings-stat   { color: #6366f1; }
[data-theme="dark"] #train-card-openings-stat { color: #818cf8; }

/* ═══════════════════════════════════════════════════════════════
   PUZZLE ARENA
═══════════════════════════════════════════════════════════════ */
#page-train {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.puzzle-arena {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.2rem clamp(0.75rem, 2vw, 1.75rem) 1.5rem;
  justify-content: center;
}

.puzzle-board-wrap {
  flex-shrink: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}

#puzzle-board-container {
  width: var(--board-size);
  height: var(--board-size);
  max-width: calc(100vw - var(--panel-w) - 5rem);
  max-height: calc(100vw - var(--panel-w) - 5rem);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 60px rgba(0,0,0,0.6);
  position: relative;
  flex-shrink: 0;
  animation: board-breathe 6s ease-in-out infinite;
  background-color: var(--sq-dark, #4a7547);
  cursor: default;
  /* See #board-container: keep piece drags from scrolling the page on mobile. */
  touch-action: none;
}

#puzzle-board-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 10;
}

#puzzle-board-container #puzzle-board,
#puzzle-board-container .board-b72b1 {
  width: 100% !important;
  height: 100% !important;
}


.puzzle-panel {
  width: var(--panel-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: var(--board-size);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Stats bar — 2×2 grid on narrow desktop panel; restored to 4×1 on mobile */
.puzzle-stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.puzzle-stat-item {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-top-style: solid;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.puzzle-stat-item:nth-child(1) { border-top-color: #f59e0b; }
.puzzle-stat-item:nth-child(2) { border-top-color: #f97316; }
.puzzle-stat-item:nth-child(3) { border-top-color: var(--accent); }

.puzzle-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-bottom: 0.22rem;
}
.puzzle-stat-item:nth-child(1) .puzzle-stat-label { color: #f59e0b; }
.puzzle-stat-item:nth-child(2) .puzzle-stat-label { color: #f97316; }
.puzzle-stat-item:nth-child(3) .puzzle-stat-label { color: var(--accent); }

.puzzle-stat-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.streak-fire {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: #f97316;
}
.streak-flame-svg {
  display: block;
}

/* Turn indicator */
.puzzle-info-area {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

.puzzle-turn-indicator {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.puzzle-turn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.puzzle-turn-dot.dot-white { background: #f0ede5; border: 2px solid #8a7a6a; animation: none; }
.puzzle-turn-dot.dot-black { background: #2a2420; border: 2px solid #6a5a4a; animation: none; }
.puzzle-turn-dot.dot-correct { background: #22c55e; animation: none; }
.puzzle-turn-dot.dot-wrong  { background: #ef4444; animation: none; }
.puzzle-turn-dot.dot-wait   { background: var(--text-muted); animation: none; }

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

.puzzle-themes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.puzzle-theme-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

/* Loading */
.puzzle-loading,
.puzzle-hint-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.5rem 0;
}

.puzzle-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.puzzle-spinner--small {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

/* Hint box */
.puzzle-hint-box {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  animation: slide-in-up 0.22s ease;
}

@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-hint {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.puzzle-hint-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #f59e0b;
  margin-bottom: 0.6rem;
}

.btn-puzzle-why {
  background: transparent;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius-sm);
  color: #f59e0b;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.38rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-puzzle-why:hover {
  background: #f59e0b;
  color: var(--bg);
}

.puzzle-hint-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 0.75rem;
}
.puzzle-hint-text p { margin: 0 0 0.45rem; }
.puzzle-hint-text p:last-child { margin-bottom: 0; }
.puzzle-hint-text ul { margin: 0.3rem 0 0.45rem 1.2rem; padding: 0; }
.puzzle-hint-text li { margin-bottom: 0.25rem; }
.puzzle-hint-text strong { color: var(--text); font-weight: 700; }
.puzzle-hint-text em { color: var(--text-secondary); font-style: italic; }

.puzzle-retry-btn {
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.38rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.puzzle-retry-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Result panel */
.puzzle-result-panel {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.1rem;
  text-align: center;
  animation: slide-in-up 0.28s ease;
}

.puzzle-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.55rem;
}
.puzzle-result-icon svg { display: block; }
.result-correct .puzzle-result-icon svg { stroke: #22c55e; }
.result-wrong   .puzzle-result-icon svg { stroke: #ef4444; }

.puzzle-result-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}

.puzzle-result-title.result-correct { color: #22c55e; }
.puzzle-result-title.result-wrong   { color: #ef4444; }

.puzzle-elo-change {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 1.1rem;
  min-height: 1.2em;
}

.puzzle-elo-change .elo-gain  { color: #22c55e; font-weight: 700; }
.puzzle-elo-change .elo-loss  { color: #ef4444; font-weight: 700; }

.btn-puzzle-next {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  letter-spacing: 0.01em;
}

.btn-puzzle-next:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
}

/* Puzzle ask row (shown on failure) */
.puzzle-ask-wrap {
  margin-top: 1rem;
  text-align: left;
}

.puzzle-ask-row {
  margin-bottom: 0;
}

.puzzle-ask-response {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: left;
}

.puzzle-ask-response p { margin: 0 0 0.4em; }
.puzzle-ask-response p:last-child { margin-bottom: 0; }

/* Bottom actions */
.puzzle-bottom-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.btn-puzzle-ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.42rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-puzzle-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Board shake animation on wrong move */
@keyframes shake-board {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-6px); }
  80%     { transform: translateX(6px); }
}

.puzzle-board-wrap.shake { animation: shake-board 0.4s ease; }

/* Solve celebration — glow ring shockwave */
@keyframes board-success-glow {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  12%  { box-shadow: 0 0 0 10px rgba(34,197,94,0.7), 0 0 40px rgba(34,197,94,0.25); }
  45%  { box-shadow: 0 0 0 20px rgba(34,197,94,0.22), 0 0 60px rgba(34,197,94,0.1); }
  100% { box-shadow: 0 0 0 32px rgba(34,197,94,0), 0 0 0 rgba(34,197,94,0); }
}

/* Radial green bloom over the board */
@keyframes board-radial-bloom {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Particle burst */
@keyframes puzzle-particle-fly {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.95; }
  65%  { opacity: 0.8; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.05); opacity: 0; }
}

.puzzle-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  animation: puzzle-particle-fly var(--dur, 800ms) var(--delay, 0ms) cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

.puzzle-board-wrap::after {
  content: '';
  position: absolute;
  inset: 4px 0 0;
  pointer-events: none;
  border-radius: var(--radius-sm);
  background: transparent;
}

.puzzle-board-wrap.flash-correct {
  animation: board-success-glow 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.puzzle-board-wrap.flash-correct::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(34,197,94,0.3) 0%, rgba(34,197,94,0.08) 45%, transparent 72%);
  animation: board-radial-bloom 1.1s ease-out forwards;
}

/* Mobile result bottom sheet (see @media max-width:680px) */
@keyframes puzzle-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   ACHIEVEMENT POPUP
═══════════════════════════════════════════════════════════════ */
#achievement-popup-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6rem;
  z-index: 9999;
  pointer-events: none;
}

.achievement-popup {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  pointer-events: auto;
  min-width: 240px;
  max-width: 320px;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}

.achievement-popup.popup-visible {
  transform: translateX(0);
  opacity: 1;
}

.achievement-popup.popup-leaving {
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.3s ease-in, opacity 0.3s;
}

.achievement-popup-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.achievement-popup-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.achievement-popup-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.achievement-popup-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Rarity glow */
.achievement-popup.rarity-uncommon { border-color: #22c55e; }
.achievement-popup.rarity-uncommon .achievement-popup-label { color: #22c55e; }
.achievement-popup.rarity-rare { border-color: #3b82f6; }
.achievement-popup.rarity-rare .achievement-popup-label { color: #3b82f6; }
.achievement-popup.rarity-epic { border-color: #a855f7; }
.achievement-popup.rarity-epic .achievement-popup-label { color: #a855f7; }
.achievement-popup.rarity-legendary {
  border-color: #f59e0b;
  box-shadow: 0 4px 24px rgba(245,158,11,0.3);
}
.achievement-popup.rarity-legendary .achievement-popup-label { color: #f59e0b; }

/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE
═══════════════════════════════════════════════════════════════ */
/* ── PROFILE PAGE ──────────────────────────────────────────────────────────── */
.profile-page { padding: 0; overflow-x: hidden; }

.profile-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 0 4rem;
}

/* Hero banner */
.profile-hero {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.75rem 1.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-solid);
}

.profile-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(16,185,129,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.profile-hero::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(16,185,129,0.04) 0%, transparent 65%);
  pointer-events: none;
}

/* Content wrapper below hero */
.profile-content {
  padding: 1.75rem 1.75rem 0;
}

.profile-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: inherit;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  margin-bottom: 1.1rem;
  transition: border-color 0.15s, color 0.15s;
  position: relative;
  z-index: 1;
}

.profile-back-btn:hover { border-color: var(--accent); color: var(--accent); }

.profile-header-section {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  position: relative;
  z-index: 1;
}

.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--bg);
  font-size: 1.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid rgba(16,185,129,0.5);
  box-shadow: 0 0 0 5px rgba(16,185,129,0.1), 0 8px 24px rgba(0,0,0,0.35);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.profile-avatar:hover {
  box-shadow: 0 0 0 6px rgba(16,185,129,0.2), 0 8px 32px rgba(16,185,129,0.2);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.profile-avatar:has(img),
.header-avatar:has(img) {
  background: transparent;
  border-color: transparent;
}

/* ── Avatar upload widget (Settings > Profile) ─────────────────────────────── */
.account-avatar-section {
  margin-bottom: 1.25rem;
}

.account-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.account-avatar-preview {
  width: 72px;
  height: 72px;
  font-size: 1.8rem;
  cursor: default;
  flex-shrink: 0;
}

.account-avatar-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.account-avatar-btn {
  cursor: pointer;
  display: inline-block;
  padding: 0.4rem 1rem;
  font-size: 0.83rem;
  line-height: 1.4;
  transition: opacity 0.15s;
}

.account-avatar-btn--loading {
  opacity: 0.55;
  pointer-events: none;
}

.account-avatar-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.account-avatar-remove:hover {
  color: #f87171;
}

.account-avatar-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.account-avatar-status {
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.account-avatar-status--ok {
  color: #22c55e;
}

.account-avatar-status--error {
  color: #f87171;
}

.profile-username {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.profile-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.profile-plan-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.profile-plan-badge.badge-premium {
  background: rgba(212,175,55,0.15);
  color: #d4af37;
  border-color: #d4af37;
}

.profile-joined {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.profile-section {
  margin-bottom: 2.5rem;
}

.profile-section-title {
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-achiev-count {
  font-size: 0.7rem;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 20px;
  padding: 0.1rem 0.45rem;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.profile-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 0.9rem 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.profile-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border-color: var(--border-hover);
}

.profile-stat-icon {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  display: block;
  line-height: 1;
}

.profile-stat-card--elo {
  background: linear-gradient(145deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.03) 100%);
  border-color: rgba(16,185,129,0.25);
}
.profile-stat-card--elo:hover {
  border-color: rgba(16,185,129,0.5);
  box-shadow: 0 8px 24px rgba(16,185,129,0.12);
}

.profile-stat-val {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.profile-stat-card--elo .profile-stat-val { color: var(--accent); }

.profile-stat-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Profile hero stats strip ─────────────────────────────────────────────── */
.profile-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1.35rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
  z-index: 1;
}
[data-theme="light"] .profile-hero-stats {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.phs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem;
  position: relative;
  text-align: center;
  cursor: default;
}

.phs-item + .phs-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
[data-theme="light"] .phs-item + .phs-item::before { background: var(--border); }

.phs-val {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.phs-item--primary .phs-val { color: var(--text); }
.phs-item--streak .phs-val  { color: var(--text); }

.phs-lbl {
  font-size: 0.67rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* XP section stripped down when inside hero */
.profile-hero .profile-xp-section {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0;
  padding: 0.9rem 0 0;
  margin-top: 0.9rem;
}
.profile-hero .profile-xp-section::before { display: none; }
[data-theme="light"] .profile-hero .profile-xp-section { border-top-color: var(--border); }

.profile-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  grid-auto-rows: 6rem;
  gap: 0.75rem;
}

.profile-achiev-card.achiev-hidden {
  display: none;
}

.btn-achievements-toggle {
  display: block;
  margin: 0.85rem auto 0;
  padding: 0.35rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-achievements-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-glow);
  background: var(--accent-subtle);
}

.profile-achiev-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.95rem 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  cursor: default;
}

.profile-achiev-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  border-color: var(--border-hover);
}

.profile-achiev-card.earned {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.04);
}
.profile-achiev-card.earned:hover {
  border-color: rgba(16,185,129,0.6);
  box-shadow: 0 4px 20px rgba(16,185,129,0.12);
  background: rgba(16,185,129,0.06);
}
.profile-achiev-card.earned.rarity-uncommon { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.04); }
.profile-achiev-card.earned.rarity-uncommon:hover { border-color: rgba(34,197,94,0.6); box-shadow: 0 4px 20px rgba(34,197,94,0.12); }
.profile-achiev-card.earned.rarity-rare { border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.04); }
.profile-achiev-card.earned.rarity-rare:hover { border-color: rgba(59,130,246,0.6); box-shadow: 0 4px 20px rgba(59,130,246,0.15); }
.profile-achiev-card.earned.rarity-epic { border-color: rgba(168,85,247,0.35); background: rgba(168,85,247,0.04); }
.profile-achiev-card.earned.rarity-epic:hover { border-color: rgba(168,85,247,0.6); box-shadow: 0 4px 20px rgba(168,85,247,0.15); }
.profile-achiev-card.earned.rarity-legendary { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.05); }
.profile-achiev-card.earned.rarity-legendary:hover { border-color: rgba(245,158,11,0.7); box-shadow: 0 4px 20px rgba(245,158,11,0.18); }
.profile-achiev-card.locked { opacity: 0.32; filter: grayscale(0.25); }

.profile-achiev-icon { font-size: 1.55rem; line-height: 1; flex-shrink: 0; }
.profile-achiev-icon .achiev-piece-icon,
.achievement-popup-icon .achiev-piece-icon { width: 1.4em; height: 1.4em; object-fit: contain; display: block; }

/* Inline SVG achievement icons (non-chess) — inherit color from the card */
.achiev-svg-icon { display: inline-flex; color: var(--accent); }
.achiev-svg-icon svg { width: 1.25em; height: 1.25em; display: block; }
.profile-achiev-card.earned.rarity-uncommon  .achiev-svg-icon { color: #22c55e; }
.profile-achiev-card.earned.rarity-rare      .achiev-svg-icon { color: #3b82f6; }
.profile-achiev-card.earned.rarity-epic      .achiev-svg-icon { color: #a855f7; }
.profile-achiev-card.earned.rarity-legendary .achiev-svg-icon { color: #f59e0b; }
.profile-achiev-card.locked .achiev-svg-icon { color: var(--text-muted); }
.achievement-popup-icon .achiev-svg-icon { color: var(--accent); }
.achievement-popup.rarity-uncommon  .achiev-svg-icon { color: #22c55e; }
.achievement-popup.rarity-rare      .achiev-svg-icon { color: #3b82f6; }
.achievement-popup.rarity-epic      .achiev-svg-icon { color: #a855f7; }
.achievement-popup.rarity-legendary .achiev-svg-icon { color: #f59e0b; }

.profile-achiev-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.profile-achiev-desc {
  font-size: 0.69rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.profile-history {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.profile-history-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.profile-history-item:hover {
  border-color: var(--border-hover);
  background: var(--surface3);
}

.profile-history-icon {
  display:flex; align-items:center; justify-content:center;
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0;
}
.profile-history-icon.phi-correct { background:rgba(34,197,94,0.15); color:#22c55e; }
.profile-history-icon.phi-wrong   { background:rgba(239,68,68,0.15);  color:#ef4444; }

.profile-history-rating {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

.profile-history-elo-change {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 44px;
  text-align: right;
  flex-shrink: 0;
}

.profile-history-elo-change.gain { color: #4caf50; }
.profile-history-elo-change.loss { color: #f44336; }

.profile-history-time {
  color: var(--text-muted);
  font-size: 0.72rem;
  flex-shrink: 0;
}

.profile-history-themes {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.profile-history-tag {
  font-size: 0.63rem;
  padding: 0.1rem 0.38rem;
  border-radius: 20px;
  background: var(--accent-subtle);
  color: var(--accent);
  text-transform: capitalize;
}

.profile-history-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0 0.1rem;
}
.profile-history-more-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.phm-dot {
  display: block;
  border-radius: 50%;
  background: var(--text-muted);
}
.phm-dot-1 { width: 5px; height: 5px; opacity: 0.55; }
.phm-dot-2 { width: 4px; height: 4px; opacity: 0.32; }
.phm-dot-3 { width: 3px; height: 3px; opacity: 0.15; }
.profile-history-more-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.profile-guest-msg {
  text-align: center;
  padding: 3rem 1rem;
}

.profile-guest-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.profile-guest-msg h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.profile-guest-msg p {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 320px;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
}

.btn-profile-signup {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.65rem 1.8rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-profile-signup:hover { opacity: 0.85; }

/* Header username clickable */
.header-user-identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid var(--accent);
  user-select: none;
}

.header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.header-username-btn {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 0.2rem;
  border-bottom: 1px dashed var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
  font-size: 0.9rem;
}

.header-username-btn:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — puzzle arena
═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .puzzle-arena {
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    overflow-y: auto;
  }

  .puzzle-panel {
    width: min(92vw, 420px);
    max-height: none;
  }

  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .train-mode-select { padding: 2rem 1rem 1.5rem; }
  .train-mode-cards { grid-template-columns: 1fr; }
  #btn-train-puzzles { grid-column: 1; }
}


/* ════════════════════════════════════════════════════════════
   TRAIN CARD LEFT ACCENT BAR + PUZZLE PANEL POLISH
════════════════════════════════════════════════════════════ */

/* Per-card accent color for the left bar */
#btn-train-puzzles     { --tc-color: var(--accent); }
#btn-train-foundations { --tc-color: #f59e0b; }
#btn-train-openings    { --tc-color: #818cf8; }

/* Left accent bar — subtle at rest, full-height on hover */
.train-mode-card::after {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tc-color, var(--accent));
  opacity: 0.35;
  transition: opacity 0.18s, top 0.18s, bottom 0.18s;
}
.train-mode-card:hover:not(.train-mode-card--soon)::after {
  opacity: 1;
  top: 0; bottom: 0;
  border-radius: 0;
}

/* ── Puzzle panel polish ── */
.puzzle-stat-val        { font-size: 1.55rem; }
.puzzle-info-area       { padding: 1rem 1.1rem; }
.puzzle-turn-indicator  { font-size: 0.95rem; gap: 0.65rem; }
.puzzle-turn-dot        { width: 12px; height: 12px; }

/* Result panel */
.puzzle-result-panel  { padding: 1.6rem 1.1rem; }
.puzzle-result-icon   { margin-bottom: 0.6rem; }
.puzzle-result-title  { font-size: 1.3rem; margin-bottom: 0.35rem; }
.puzzle-elo-change    { font-size: 0.9rem; margin-bottom: 1.25rem; }

/* Full-width prominent Next Puzzle CTA */
.btn-puzzle-next {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  font-size: 1rem;
}
@keyframes nextBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
  50%       { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
}
.puzzle-result-panel .btn-puzzle-next {
  animation: nextBtnPulse 1.8s ease-in-out infinite;
}

/* Bottom action buttons: equal width */
.btn-puzzle-ghost {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  padding: 0.48rem 0.9rem;
}

/* ── Opening Trainer: difficulty left border ── */
.ot-card[data-level="beginner"]     { border-left: 3px solid rgba(34,197,94,0.5); }
.ot-card[data-level="intermediate"] { border-left: 3px solid rgba(234,179,8,0.5); }
.ot-card[data-level="advanced"]     { border-left: 3px solid rgba(239,68,68,0.5); }

/* Slightly larger OT control buttons */
.ot-ctrl-btn { padding: 0.48rem 1rem; font-size: 0.82rem; }

/* ── Light-mode contrast fixes ── */
/* Foundations card */
[data-theme="light"] #btn-train-foundations .train-card-info::before { color: #b45309; }
[data-theme="light"] #btn-train-foundations { border-color: rgba(180,83,9,0.2); }
[data-theme="light"] #btn-train-foundations:hover:not(.train-mode-card--soon) {
  border-color: #d97706;
  box-shadow: 0 6px 24px rgba(180,83,9,0.14);
}
[data-theme="light"] #train-card-foundations-stat { color: #b45309; }

/* Openings card */
[data-theme="light"] #btn-train-openings .train-card-stat { color: #4f46e5; }
[data-theme="light"] #train-card-openings-stat { color: #4f46e5; }
[data-theme="light"] #btn-train-openings .train-card-info::before { color: #4f46e5; }

/* Puzzle stat bar labels: amber-400 and orange-500 both fail on white — darken */
[data-theme="light"] .puzzle-stat-item:nth-child(1) .puzzle-stat-label { color: #b45309; }
[data-theme="light"] .puzzle-stat-item:nth-child(2) .puzzle-stat-label { color: #c2410c; }
[data-theme="light"] .streak-fire { color: #c2410c; }

/* Puzzle hint header: amber-400 fails on white */
[data-theme="light"] .puzzle-hint-header { color: #b45309; }

/* Puzzle result: green-500 and red-500 fail on white */
[data-theme="light"] .puzzle-result-title.result-correct { color: #15803d; }
[data-theme="light"] .puzzle-result-title.result-wrong   { color: #b91c1c; }
[data-theme="light"] .puzzle-elo-change .elo-gain        { color: #15803d; }
[data-theme="light"] .puzzle-elo-change .elo-loss        { color: #b91c1c; }

/* Achievement popup labels on white card bg */
[data-theme="light"] .achievement-popup.rarity-uncommon .achievement-popup-label  { color: #15803d; }
[data-theme="light"] .achievement-popup.rarity-legendary .achievement-popup-label { color: #b45309; }

/* ══════════════════════════════════════════════════════════
   FOUNDATIONS + OPENING TRAINER: LIGHT-MODE THEME HARMONY
══════════════════════════════════════════════════════════ */

/* Chapter cards: swap pastel-bg for white + colored left accent border */
[data-theme="light"] .ch-teal,
[data-theme="light"] .ch-amber,
[data-theme="light"] .ch-purple,
[data-theme="light"] .ch-red,
[data-theme="light"] .ch-green {
  --ch-bg: var(--card-bg);
  --ch-border: var(--border);
}
[data-theme="light"] .foundations-chapter-card {
  border-top: 3px solid var(--ch-color, var(--accent));
}
[data-theme="light"] .foundations-chapter-card:not(.fc-locked):hover {
  border-color: var(--ch-color, var(--accent));
}

/* Challenge + Quiz badges: transparent tint instead of solid pastel */
[data-theme="light"] .foundations-challenge-badge {
  background: rgba(217,119,6,0.09);
  border-color: rgba(217,119,6,0.25);
  color: #92400e;
}
[data-theme="light"] .foundations-quiz-badge {
  background: rgba(124,58,237,0.09);
  border-color: rgba(124,58,237,0.22);
  color: #5b21b6;
}

/* Feedback boxes: transparent tint with border instead of solid pastel fill */
[data-theme="light"] .fh-success {
  background: rgba(16,185,129,0.07);
  border-color: rgba(16,185,129,0.3);
  color: #065f46;
}
[data-theme="light"] .fh-hint {
  background: rgba(234,179,8,0.07);
  border-color: rgba(234,179,8,0.3);
  color: #713f12;
}
[data-theme="light"] .fqf-correct {
  background: rgba(16,185,129,0.07);
  border-color: rgba(16,185,129,0.3);
  color: #065f46;
}
[data-theme="light"] .fqf-wrong {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.3);
  color: #7f1d1d;
}

/* Quiz option answer states */
[data-theme="light"] .fq-option.fqo-correct {
  background: rgba(16,185,129,0.08);
  border-color: #059669;
  color: var(--text);
}
[data-theme="light"] .fq-option.fqo-wrong {
  background: rgba(239,68,68,0.08);
  border-color: #dc2626;
  color: var(--text);
}
[data-theme="light"] .fq-option.fqo-selected-correct {
  background: rgba(16,185,129,0.12);
  border-color: #059669;
  color: var(--text);
  font-weight: 700;
}

/* Ask Coach error bubble */
[data-theme="light"] .fask-error {
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.25);
  color: #7f1d1d;
}

/* Stars: amber-400 is too dim on white — use amber-600 */
[data-theme="light"] .fli-star-svg.fls-lit                         { fill: #d97706; }
[data-theme="light"] .fc-star-svg.fcs-lit                          { fill: #d97706; }
[data-theme="light"] .foundations-challenge-stars-preview { color: #9ca3af; }
[data-theme="light"] .foundations-challenge-stars-preview.fh-gold  { color: #d97706; }

/* OT black-piece pill: dark bg looks wrong in light mode → use indigo tint */
[data-theme="light"] .ot-pill--color-black { background: rgba(99,102,241,0.1); color: #4338ca; }

/* OT color bar (training view): replace dark bars with neutral surface tones */
[data-theme="light"] .ot-bar-white { background: var(--surface2); color: var(--text-secondary); }
[data-theme="light"] .ot-bar-black { background: var(--surface3); color: var(--text-secondary); }
[data-theme="light"] .ot-bar-white.active,
[data-theme="light"] .ot-bar-black.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* OT completion: green-500 icon too dim on white */
[data-theme="light"] .ot-complete-icon { background: rgba(5,150,105,0.1); color: #059669; }

/* OT completion stars: amber-400 too dim on white */
[data-theme="light"] .ot-star-lit { fill: #d97706; }

/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTIONS HUB
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.coll-page {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Hub container ─────────────────────────────────────────────────────── */
.coll-hub {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  min-height: 100%;
}

/* Hub header */
.coll-hub-header {
  padding-top: 2rem;
  margin-bottom: 0;
}
.coll-hub-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.coll-hub-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* Tab bar */
.coll-hub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 2rem;
}
.coll-hub-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.15rem;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.coll-hub-tab:hover { color: var(--text); }
.coll-hub-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ── Collection cards grid ─────────────────────────────────────────────── */
.coll-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
}

/* Mine toolbar */
.coll-mine-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1.4rem;
}

/* New Collection button */
.btn-coll-new {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-coll-new:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-coll-new:active { transform: translateY(0); }

/* ── Individual collection card ────────────────────────────────────────── */
.coll-card {
  position: relative;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
}
.coll-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.coll-card:active { transform: translateY(-1px); }

/* Card cover strip (mini boards mosaic) */
.coll-card-cover {
  height: 110px;
  background: var(--surface2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  overflow: hidden;
}
.coll-card-cover-cell {
  background: var(--surface3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coll-card-cover-cell img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Single large mini board when only 1 game */
.coll-card-cover--single {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.coll-card-cover--empty {
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  opacity: 0.25;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.coll-card-cover--banner {
  display: block;
  padding: 0;
}
.coll-card-cover--banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card body */
.coll-card-body {
  padding: 0.9rem 1rem 0.8rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.coll-card-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coll-card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.coll-card-game-count {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.coll-card-vis {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--surface3);
  color: var(--text-muted);
}
.coll-card-vis--public {
  background: rgba(16,185,129,0.12);
  color: var(--accent);
}
.coll-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 0.1rem;
}

/* Card footer actions */
.coll-card-footer {
  border-top: 1px solid var(--border);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.coll-card-updated {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.coll-card-menu {
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.coll-card:hover .coll-card-menu { opacity: 1; }
.coll-card-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.coll-card-menu-btn:hover { background: var(--surface3); color: var(--text); }
.coll-card-menu-btn--danger:hover { color: #ef4444; }

/* Community card: author byline */
.coll-card-author {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* ── Empty states ──────────────────────────────────────────────────────── */
.coll-cards-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 0.7rem;
}
.coll-cards-empty-icon {
  font-size: 2.8rem;
  opacity: 0.2;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.coll-cards-empty-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.coll-cards-empty-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.5;
}

/* Guest state */
.coll-mine-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5rem 2rem;
  gap: 0.8rem;
}
.coll-guest-icon {
  font-size: 3.5rem;
  opacity: 0.15;
  margin-bottom: 0.5rem;
}
.coll-guest-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.coll-guest-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.55;
}
.coll-guest-btns {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

/* ── Community panel ───────────────────────────────────────────────────── */
.coll-community-inner { max-width: 100%; }
.coll-community-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.coll-community-heading { min-width: 0; }
.coll-community-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.3rem;
}
.coll-community-sub {
  font-size: 0.83rem;
  color: var(--text-muted);
}

/* ── Community sort toggle ─────────────────────────────────────────────── */
.coll-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  flex-shrink: 0;
}
.coll-sort-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 0.4rem 0 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.coll-sort-btn {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.coll-sort-btn:hover { color: var(--text); }
.coll-sort-btn--active {
  background: var(--accent);
  color: #fff;
}

/* ── "Add to my collections" badge + buttons ──────────────────────────── */
.coll-card-adds {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.coll-card-adds svg { opacity: 0.6; }

.coll-card-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid transparent;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.coll-card-add-btn:hover { background: rgba(var(--accent-rgb), 0.18); }
.coll-card-add-btn:disabled { opacity: 0.55; cursor: default; }
.coll-card-add-btn .coll-add-icon-added { display: none; }
.coll-card-add-btn.is-added {
  color: var(--text-secondary);
  background: var(--surface3);
}
.coll-card-add-btn.is-added .coll-add-icon-add { display: none; }
.coll-card-add-btn.is-added .coll-add-icon-added { display: inline; color: var(--accent); }

/* Larger add button in the public collection detail header */
.coll-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.coll-add-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.coll-add-btn:disabled { opacity: 0.6; cursor: default; }
.coll-add-btn .coll-add-icon-added { display: none; }
.coll-add-btn.is-added {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.coll-add-btn.is-added .coll-add-icon-add { display: none; }
.coll-add-btn.is-added .coll-add-icon-added { display: inline; }
.coll-add-count {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}
.coll-add-btn.is-added .coll-add-count { background: rgba(var(--accent-rgb), 0.16); }

/* Saved-from-community section inside My Collections */
.coll-added-section { margin-top: 2.25rem; }
.coll-added-section .collection-library-head { margin-bottom: 1rem; }
.coll-community-loading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 2rem 0;
}
.coll-community-load-more {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ── Detail view ───────────────────────────────────────────────────────── */
.coll-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  min-height: 100%;
}

.coll-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.coll-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.4rem 0;
  transition: color 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.coll-detail-back:hover { color: var(--text); }

.coll-detail-meta { flex: 1; min-width: 0; }
.coll-detail-name-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.coll-detail-name {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.coll-detail-vis-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--surface3);
  color: var(--text-muted);
  flex-shrink: 0;
}
.coll-detail-vis-badge--public {
  background: rgba(16,185,129,0.12);
  color: var(--accent);
}
.coll-detail-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0.1rem 0 0.4rem;
  line-height: 1.5;
}
.coll-detail-stats {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.coll-detail-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-self: flex-start;
}
.coll-detail-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.9rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.coll-detail-action-btn:hover {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--border-hover);
}
.coll-detail-action-btn--publish {
  background: rgba(16,185,129,0.08);
  color: var(--accent);
  border-color: rgba(16,185,129,0.2);
}
.coll-detail-action-btn--publish:hover {
  background: rgba(16,185,129,0.15);
  border-color: var(--accent);
}
.coll-detail-action-btn--publish.is-published {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.coll-detail-action-btn--publish.is-published:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.coll-detail-action-btn--danger:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* Share row */
.coll-detail-share-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.coll-detail-share-label { color: var(--text-muted); white-space: nowrap; }
.coll-detail-share-url {
  color: var(--text-secondary);
  font-family: monospace;
  font-size: 0.8rem;
  word-break: break-all;
  flex: 1;
}
.coll-detail-copy-btn {
  padding: 0.25rem 0.7rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
}
.coll-detail-copy-btn:hover { background: var(--accent-dark); }

/* Public author */
.coll-public-author {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.coll-public-author span { color: var(--accent); font-weight: 600; }

/* Detail games list */
.coll-detail-games {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.coll-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 0.7rem;
}

/* Game card inside detail view */
.coll-game-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
}
.coll-game-card:hover {
  border-color: var(--border-hover);
  background: var(--surface2);
}
.coll-game-card-board {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 5px;
  overflow: hidden;
}
.coll-game-card-info {
  flex: 1;
  min-width: 0;
}
.coll-game-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}
.coll-game-card-meta {
  display: flex;
  gap: 0.7rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.coll-game-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.coll-game-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.coll-game-card-btn:hover { background: var(--surface3); color: var(--text); }
.coll-game-card-btn--danger:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.coll-game-card-btn--primary {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: rgba(16,185,129,0.2);
}
.coll-game-card-btn--primary:hover { background: rgba(16,185,129,0.15); }

/* ── Save-to-collection modal ──────────────────────────────────────────── */
.coll-save-modal-box {
  max-width: 460px;
  width: 100%;
}
.coll-save-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.coll-save-modal-head h2 {
  font-size: 1.1rem;
  font-weight: 700;
}
.coll-save-title-row {
  margin-bottom: 1rem;
}
.coll-save-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.coll-save-label--section { margin-top: 0.3rem; }
.coll-save-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.coll-save-title-input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.92rem;
  transition: border-color 0.15s;
}
.coll-save-title-input:focus { outline: none; border-color: var(--accent); }

.coll-save-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 0.5rem;
  padding-right: 0.25rem;
}
.coll-save-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  user-select: none;
}
.coll-save-item:hover { border-color: var(--border-hover); background: var(--surface3); }
.coll-save-item.is-checked {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.coll-save-item-check {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid var(--border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.coll-save-item.is-checked .coll-save-item-check {
  background: var(--accent);
  border-color: var(--accent);
}
.coll-save-item-check svg { display: none; }
.coll-save-item.is-checked .coll-save-item-check svg { display: block; }
.coll-save-item-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coll-save-item-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.coll-save-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: none;
  border: 1.5px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  width: 100%;
  justify-content: center;
}
.coll-save-new-btn:hover { color: var(--accent); border-color: var(--accent); }

.coll-save-login-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
.coll-save-login-hint a { color: var(--accent); }

/* ── Create/Edit collection modal ──────────────────────────────────────── */
.coll-create-modal-box {
  max-width: 440px;
  width: 100%;
}
.coll-create-desc-input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  resize: vertical;
  transition: border-color 0.15s;
  font-family: inherit;
}
.coll-create-desc-input:focus { outline: none; border-color: var(--accent); }
.coll-create-error {
  color: #ef4444;
  font-size: 0.83rem;
  margin-bottom: 0.5rem;
}

/* ── Collection detail banner ──────────────────────────────────────────── */
.coll-detail-banner {
  margin: -1.5rem -1.5rem 1.5rem;
  height: 180px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.coll-detail-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Collection banner in create/edit modal ────────────────────────────── */
.coll-banner-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.coll-banner-preview {
  width: 100%;
  height: 76px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  overflow: hidden;
}
.coll-banner-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coll-banner-btns {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.coll-banner-upload-label {
  cursor: pointer;
  font-size: 0.83rem;
  padding: 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
}
.coll-banner-remove-btn {
  font-size: 0.83rem;
  padding: 0.4rem 0.85rem;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .coll-hub { padding: 0 1rem 2.5rem; }
  .coll-hub-header { padding-top: 1.2rem; }
  .coll-hub-title { font-size: 1.3rem; }
  .coll-hub-tab { padding: 0.6rem 0.8rem; font-size: 0.82rem; }
  .coll-hub-tab svg { display: none; }
  .coll-cards-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .coll-detail { padding: 1rem 1rem 2.5rem; }
  .coll-detail-header { flex-direction: column; gap: 0.8rem; }
  .coll-detail-actions { width: 100%; }
  .coll-game-card { flex-wrap: wrap; }
  .coll-detail-banner { margin: -1rem -1rem 1rem; height: 120px; }
}
@media (max-width: 400px) {
  .coll-cards-grid { grid-template-columns: 1fr; }
}

[data-theme="light"] .coll-card { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .coll-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
[data-theme="light"] .coll-game-card:hover { background: var(--surface); }
[data-theme="light"] .coll-detail-share-row { background: rgba(5,150,105,0.04); }

/* ═══════════════════════════════════════════════════════════════════════════
   GAMIFICATION — daily streaks, XP, leaderboard, milestones, rating graph
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Drawer gamification row ─────────────────────────────────────────────── */
.drawer-gamification-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.1rem;
}
.drawer-streak-badge,
.drawer-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.drawer-streak-badge {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.25);
}
.drawer-xp-badge {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(16,185,129,0.2);
}

/* ── Profile stat cards — variants ───────────────────────────────────────── */
.profile-stat-card--streak {
  background: linear-gradient(145deg, rgba(245,158,11,0.09) 0%, rgba(245,158,11,0.02) 100%);
  border-color: rgba(245,158,11,0.22);
}
.profile-stat-card--streak:hover {
  border-color: rgba(245,158,11,0.48);
  box-shadow: 0 8px 24px rgba(245,158,11,0.1);
}
.profile-stat-card--streak .profile-stat-val { color: #f59e0b; }

.profile-stat-card--best-streak {
  background: linear-gradient(145deg, rgba(251,191,36,0.07) 0%, rgba(251,191,36,0.02) 100%);
  border-color: rgba(251,191,36,0.18);
}
.profile-stat-card--best-streak:hover { border-color: rgba(251,191,36,0.4); }
.profile-stat-card--best-streak .profile-stat-val { color: #fbbf24; }

.profile-stat-card--xp {
  background: linear-gradient(145deg, rgba(168,85,247,0.09) 0%, rgba(168,85,247,0.02) 100%);
  border-color: rgba(168,85,247,0.22);
}
.profile-stat-card--xp:hover {
  border-color: rgba(168,85,247,0.48);
  box-shadow: 0 8px 24px rgba(168,85,247,0.1);
}
.profile-stat-card--xp .profile-stat-val { color: #a855f7; }

.profile-stat-card--accuracy {
  background: linear-gradient(145deg, rgba(59,130,246,0.07) 0%, rgba(59,130,246,0.02) 100%);
  border-color: rgba(59,130,246,0.18);
}
.profile-stat-card--accuracy:hover { border-color: rgba(59,130,246,0.4); box-shadow: 0 8px 24px rgba(59,130,246,0.1); }
.profile-stat-card--accuracy .profile-stat-val { color: #60a5fa; }

/* ── XP level bar ────────────────────────────────────────────────────────── */
.profile-xp-section {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.profile-xp-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,185,129,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.profile-xp-level-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  position: relative;
}
.profile-xp-icon {
  font-size: 1.35rem;
  line-height: 1;
}
.profile-xp-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.profile-xp-progress-text {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  background: var(--surface3);
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  position: relative;
}
.profile-xp-bar-wrap {
  height: 10px;
  background: var(--surface3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.profile-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #059669, #10b981, #34d399);
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(16,185,129,0.45);
}

/* ── Rating graph ────────────────────────────────────────────────────────── */
.profile-graph-wrap {
  position: relative;
  width: 100%;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1rem 1rem 0.5rem;
}
.rating-graph-canvas {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-sm);
  display: block;
}
.rating-graph-empty {
  padding: 2.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ── Milestones ──────────────────────────────────────────────────────────── */
.profile-milestones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}
.milestone-item {
  padding: 0.75rem 0.9rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.milestone-item:hover { border-color: var(--border-hover); background: var(--surface3); }
.milestone-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.milestone-icon {
  font-size: 0.95rem;
  width: 1.2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.milestone-icon .achiev-svg-icon svg { width: 1.15em; height: 1.15em; }
.milestone-icon .piece-icon { width: 1.15em; height: 1.15em; object-fit: contain; }
.milestone-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.milestone-progress-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.milestone-bar-wrap {
  height: 6px;
  background: var(--surface3);
  border-radius: 999px;
  overflow: hidden;
}
.milestone-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #059669, #10b981);
  border-radius: 999px;
  transition: width 0.6s ease;
}
.milestone-all-done {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  padding: 1rem;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.leaderboard-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}
.lb-tab {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lb-tab:hover {
  border-color: var(--border-hover);
  color: var(--text);
  background: var(--surface2);
}
.lb-tab.active {
  background: var(--accent-subtle);
  border-color: rgba(16,185,129,0.4);
  color: var(--accent);
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.leaderboard-loading,
.leaderboard-error,
.leaderboard-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.leaderboard-entry {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.leaderboard-entry:hover { border-color: var(--border-hover); background: var(--surface3); }
.lb-entry-me {
  border-color: rgba(16,185,129,0.55);
  background: rgba(16,185,129,0.12);
  box-shadow: 0 0 0 1px rgba(16,185,129,0.25);
}
.lb-entry-hint {
  opacity: 0.85;
}
.lb-my-position-divider {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 0;
  user-select: none;
}
.lb-medal {
  font-size: 1.1rem;
  width: 1.6rem;
  text-align: center;
  flex-shrink: 0;
}
.lb-rank-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}
.lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.lb-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface3);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}
.lb-username {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── Puzzle result XP line ───────────────────────────────────────────────── */
.puzzle-xp-earned {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
}

/* ── Train hub XP stat ───────────────────────────────────────────────────── */
.train-daily-xp-val {
  color: var(--accent);
}

/* ── Settings About panel ────────────────────────────────────────────────── */
.settings-about-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.settings-about-list {
  font-size: 0.87rem;
  color: var(--text-secondary);
  padding-left: 1.3rem;
  line-height: 1.9;
}
.settings-about-footer {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.about-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.settings-contact-form {
  max-width: 560px;
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .drawer-streak-badge {
  background: rgba(245,158,11,0.12);
}
[data-theme="light"] .drawer-xp-badge {
  background: rgba(5,150,105,0.08);
}
[data-theme="light"] .milestone-item {
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
[data-theme="light"] .leaderboard-entry {
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
[data-theme="light"] .lb-entry-me {
  background: rgba(5,150,105,0.1);
  border-color: rgba(5,150,105,0.45);
  box-shadow: 0 0 0 1px rgba(5,150,105,0.2);
}
[data-theme="light"] .profile-xp-section {
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── Social: shared animations ───────────────────────────────────────────── */
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Social: header friend badge ─────────────────────────────────────────── */
.header-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.header-friend-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: #ef4444;
  color: #fff;
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  animation: badge-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes badge-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Profile: bio section ─────────────────────────────────────────────────── */
.profile-bio-section {
  max-width: 100%;
  margin: 1.25rem 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.profile-bio-view {
  position: relative;
}

/* ── Bio as an elegant pull-quote (only when there is content) ── */
.profile-bio-quote { display: none; }
.profile-bio-view.has-bio .profile-bio-quote {
  display: block;
  position: relative;
  margin: 0;
  padding: 1.05rem 2.6rem 1.05rem 2.9rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(16,185,129,0.07) 0%, rgba(16,185,129,0.02) 100%);
  border: 1px solid rgba(16,185,129,0.18);
  border-left: 3px solid var(--accent);
}
[data-theme="light"] .profile-bio-view.has-bio .profile-bio-quote {
  background: linear-gradient(135deg, rgba(5,150,105,0.06) 0%, rgba(5,150,105,0.015) 100%);
  border-color: rgba(5,150,105,0.2);
  border-left-color: var(--accent);
}
/* Decorative opening quotation mark */
.profile-bio-view.has-bio .profile-bio-quote::before {
  content: '\201C';
  position: absolute;
  top: -0.15rem;
  left: 0.65rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.1rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.45;
  pointer-events: none;
}
/* Decorative closing quotation mark */
.profile-bio-view.has-bio .profile-bio-quote::after {
  content: '\201D';
  position: absolute;
  bottom: -1.05rem;
  right: 0.7rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.1rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.45;
  pointer-events: none;
}
.profile-bio-text {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.profile-bio-edit-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-family: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.profile-bio-view.has-bio:hover .profile-bio-edit-btn,
.profile-bio-edit-btn:focus-visible { opacity: 1; }
.profile-bio-edit-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}
/* Touch devices have no hover — keep the edit affordance visible */
@media (hover: none) {
  .profile-bio-view.has-bio .profile-bio-edit-btn { opacity: 1; }
}

/* ── Empty state: inviting "add a bio" prompt ── */
.profile-bio-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--accent-glow);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.profile-bio-add-btn:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  border-style: solid;
}
.profile-bio-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.profile-bio-textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 72px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.profile-bio-textarea:focus {
  border-color: var(--accent);
}
.profile-bio-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.profile-bio-charcount {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.profile-bio-charcount--warn {
  color: #f59e0b;
}
.profile-bio-btns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.profile-bio-cancel,
.profile-bio-save {
  font-size: 0.82rem;
  padding: 0.35rem 0.85rem;
  width: auto;
  margin-bottom: 0;
  align-self: center;
}

/* ── Profile: friend action ───────────────────────────────────────────────── */
.profile-friend-action {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}
.btn-friend {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, transform 0.12s;
}
.btn-friend:active { transform: scale(0.97); }
.btn-friend--add {
  background: var(--accent);
  color: #fff;
}
.btn-friend--add:hover { background: var(--accent-dark); }
.btn-friend--pending {
  background: var(--surface3);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-friend--pending:hover {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.btn-friend--accept {
  background: #4ade80;
  color: #0c0f14;
}
.btn-friend--accept:hover { background: #22c55e; }
.btn-friend--friends {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent-glow);
}
.btn-friend--friends:hover {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.btn-friend:disabled { opacity: 0.5; cursor: default; }

/* Profile friend count meta */
.profile-friend-count {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.profile-friend-count::before { content: '·'; margin-right: 0.35rem; }

/* ── Profile: section header with action button ───────────────────────────── */
.profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.profile-section-header .profile-section-title {
  margin-bottom: 0;
}
.btn-find-players {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-find-players:hover {
  color: var(--accent);
  border-color: var(--accent-glow);
  background: var(--accent-subtle);
}

/* ── Friends section ──────────────────────────────────────────────────────── */
.friend-requests-wrap {
  margin-bottom: 1rem;
}
.friend-requests-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.friend-request-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  animation: fade-in-up 0.2s ease both;
}
.friend-request-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.friend-request-avatar img { width: 100%; height: 100%; object-fit: cover; }
.friend-request-info { flex: 1; min-width: 0; }
.friend-request-name {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.friend-request-name:hover { color: var(--accent); }
.friend-request-btns {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.btn-friend-req-accept,
.btn-friend-req-decline {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn-friend-req-accept { background: var(--accent); color: #fff; }
.btn-friend-req-accept:hover { background: var(--accent-dark); }
.btn-friend-req-decline { background: var(--surface3); color: var(--text-secondary); }
.btn-friend-req-decline:hover { background: rgba(239,68,68,0.12); color: #ef4444; }
.btn-friend-req-accept:disabled,
.btn-friend-req-decline:disabled { opacity: 0.5; cursor: default; }

/* Friends list */
.friends-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.friend-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.friend-card:hover {
  background: var(--surface3);
  border-color: var(--border-hover);
}
.friend-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.friend-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.friend-card-info { flex: 1; min-width: 0; }
.friend-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-card-elo {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 0.1rem;
}
.friend-card-bio {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-card-remove {
  background: none;
  border: none;
  padding: 0.35rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  opacity: 0;
}
.friend-card:hover .friend-card-remove { opacity: 1; }
.friend-card-remove:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

.friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}
.friends-empty-icon { font-size: 1.5rem; }

/* ── Public collections on others' profiles ────────────────────────────────── */
.pub-collections-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pub-coll-card {
  padding: 0.7rem 0.9rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pub-coll-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.pub-coll-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ── User search modal ────────────────────────────────────────────────────── */
.modal-box--search {
  width: min(90vw, 480px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modal-enter 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
.modal-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-box-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.modal-close-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.modal-close-btn:hover { color: var(--text); background: var(--surface2); }

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-icon { color: var(--text-muted); flex-shrink: 0; }
.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}
.search-input::placeholder { color: var(--text-muted); }

.user-search-results {
  overflow-y: auto;
  flex: 1;
  padding: 0.5rem;
}
.search-result-loading,
.search-result-empty {
  padding: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.search-result-item:hover { background: var(--surface2); }
.search-result-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.search-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.search-result-elo {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 0.1rem;
}
.search-result-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  flex-shrink: 0;
}
.search-result-badge--friends {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent-glow);
}
.search-result-badge--pending {
  background: rgba(245,158,11,0.1);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.2);
}
.search-result-badge--received {
  background: rgba(139,92,246,0.1);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.2);
}

/* Leaderboard entries are clickable */
.leaderboard-entry[data-lb-username] {
  cursor: pointer;
}
.leaderboard-entry[data-lb-username]:hover {
  background: var(--surface3);
  border-color: var(--accent-glow);
}
.leaderboard-entry[data-lb-username]:hover .lb-username {
  color: var(--accent);
}

/* ── Light mode overrides: social ─────────────────────────────────────────── */
[data-theme="light"] .friend-card { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
[data-theme="light"] .friend-request-card { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
[data-theme="light"] .modal-box--search { background: var(--surface); }
[data-theme="light"] .search-result-item:hover { background: var(--surface2); }
[data-theme="light"] .pub-coll-card { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.05); }

/* ══════════════════════════════════════════════════════════════════════════
   ANALYSIS WELCOME STATE
   Shown in the left panel when no game has been loaded/analyzed yet.
   Hidden by CSS when spinner, error, or analysis result are visible.
   ══════════════════════════════════════════════════════════════════════════ */

.analysis-welcome {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.5rem 0.1rem 0.5rem;
  animation: aw-enter 0.4s ease;
}

@keyframes aw-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide when any active content is showing */
.spinner.visible ~ .analysis-welcome,
.error-msg.visible ~ .analysis-welcome,
.analysis-result.visible ~ .analysis-welcome { display: none !important; }

/* Header block */
.aw-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem 0.5rem;
}

.aw-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-subtle);
  border: 1px solid rgba(16,185,129,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

.aw-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.aw-desc {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Steps */
.aw-steps {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.aw-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  transition: border-color 0.2s, background 0.2s;
}

.aw-step:hover {
  border-color: rgba(16,185,129,0.22);
  background: var(--surface3);
}

.aw-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-subtle);
  border: 1px solid rgba(16,185,129,0.25);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.aw-step strong { color: var(--text); font-weight: 600; }

/* Tip at the bottom */
.aw-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: 9px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.aw-tip svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}

/* ── Mobile welcome panel import buttons ───────────────────────────────── */
.aw-mobile-import {
  display: none; /* hidden on desktop — shown only in mobile-board-active */
}

.aw-import-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 3px 14px rgba(16,185,129,0.28);
}

.aw-import-btn:active { transform: scale(0.97); }

.aw-import-btn--secondary {
  background: var(--surface2);
  color: var(--text);
  box-shadow: none;
  border: 1px solid var(--border-hover);
}

/* Step text: desktop shows .aw-step-desktop, mobile shows .aw-step-mobile */
.aw-step-desktop { display: inline; }
.aw-step-mobile  { display: none; }

@media (max-width: 640px) {
  body.mobile-board-active .aw-mobile-import { display: flex; flex-direction: column; gap: 0.45rem; }
  body.mobile-board-active .aw-step-desktop  { display: none; }
  body.mobile-board-active .aw-step-mobile   { display: inline; }

  /* ── Mobile welcome: ultra-compact to fit in ~100px without scrolling ── */
  body.mobile-board-active .aw-steps  { display: none !important; }
  body.mobile-board-active .aw-tip    { display: none !important; }
  body.mobile-board-active .aw-desc   { display: none !important; }
  body.mobile-board-active .analysis-welcome {
    gap: 0.5rem !important;
    padding: 0.3rem 0 0.2rem !important;
    overflow-y: visible !important;
    flex: none !important;
  }
  /* Horizontal header: icon + title side by side */
  body.mobile-board-active .aw-header {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.45rem !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  body.mobile-board-active .aw-icon {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  body.mobile-board-active .aw-icon svg { width: 14px !important; height: 14px !important; }
  body.mobile-board-active .aw-title { font-size: 0.85rem !important; }
  /* Side-by-side import buttons */
  body.mobile-board-active .aw-mobile-import {
    flex-direction: row !important;
    gap: 0.4rem !important;
  }
  body.mobile-board-active .aw-import-btn {
    flex: 1 !important;
    padding: 0.6rem 0.5rem !important;
    font-size: 0.78rem !important;
    justify-content: center !important;
    gap: 0.3rem !important;
  }
  body.mobile-board-active .aw-import-btn svg { width: 13px !important; height: 13px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COLLECTION EMPTY STATE — IMPROVED
   ══════════════════════════════════════════════════════════════════════════ */

.collection-empty-king {
  font-size: 3rem;
  line-height: 1;
  opacity: 0.18;
  filter: grayscale(0.5);
  margin-bottom: 0.25rem;
}

.collection-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.collection-empty-ctas {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.collection-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.collection-empty-cta svg { color: var(--accent); flex-shrink: 0; }

.collection-empty-cta:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   PLAY PAGE — TIP & BUTTON IMPROVEMENTS
   ══════════════════════════════════════════════════════════════════════════ */

.play-setup-tip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 520px;
  margin: -0.25rem auto 0;
  padding: 0 1rem;
}

.play-setup-tip svg {
  flex-shrink: 0;
  color: rgba(16,185,129,0.5);
  margin-top: 2px;
}

/* Animate the start button when it becomes enabled */
.play-start-btn:not(:disabled) {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 4px 20px rgba(16,185,129,0.3);
  animation: btn-appear 0.25s ease;
}

@keyframes btn-appear {
  from { transform: scale(0.97); opacity: 0.8; }
  to   { transform: scale(1);    opacity: 1; }
}

.play-start-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(16,185,129,0.4);
}

.play-setup-extras {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: -0.85rem;
}

.play-setup-pos-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.38rem 0.85rem;
}

.play-custom-pos-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
}

.play-pos-reset-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}

.play-pos-reset-btn:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL POLISH — PAGE TRANSITIONS, HOVER STATES
   ══════════════════════════════════════════════════════════════════════════ */

/* Smooth tab switching animation */
#page-analysis, #page-play,
#page-train, #page-collection,
#page-settings {
  animation: page-fade-in 0.22s ease;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Improve the "Analyze game" button when active */
.btn-analyze-game:not(:disabled) {
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.08));
  border-color: rgba(16,185,129,0.35);
}

.btn-analyze-game:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(16,185,129,0.28), rgba(16,185,129,0.12));
  border-color: rgba(16,185,129,0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16,185,129,0.18);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* Analysis welcome on mobile — compact */
@media (max-width: 860px) {
  .analysis-welcome {
    padding: 0.5rem 0;
    gap: 0.65rem;
  }

  .aw-header { padding: 0.5rem 0.25rem 0.25rem; }
  .aw-icon { width: 36px; height: 36px; }
  .aw-title { font-size: 0.85rem; }
  .aw-step { font-size: 0.75rem; padding: 0.5rem 0.65rem; }
  .aw-tip { font-size: 0.72rem; padding: 0.5rem 0.65rem; }
}

/* Play page: tighten setup on small tablets */
@media (max-width: 640px) {
  .play-setup-tip { font-size: 0.74rem; }
  .play-setup-hero { margin-bottom: 0; }
  .play-setup-title { font-size: 1.3rem; }
}

/* Collection empty CTAs on very small screens */
@media (max-width: 400px) {
  .collection-empty-ctas { flex-direction: column; align-items: center; }
  .collection-empty-cta { width: 100%; max-width: 220px; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRAIN HUB — Minor polish for the mode description text
   ══════════════════════════════════════════════════════════════════════════ */

.train-mode-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Tighten the train hub on mobile */
@media (max-width: 520px) {
  .train-mode-select { padding: 1.75rem 1rem 2rem; }
  .train-mode-cards { gap: 0.65rem; }
  #btn-train-puzzles { min-height: 90px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — Better section spacing
   ══════════════════════════════════════════════════════════════════════════ */

/* Make settings sections feel airier */
.settings-section-title {
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE WELCOME / EMPTY STATE OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .aw-step { background: var(--surface-solid); border-color: var(--border); }
[data-theme="light"] .aw-step:hover { background: var(--surface2); }
[data-theme="light"] .aw-tip { background: rgba(5,150,105,0.05); border-color: rgba(5,150,105,0.15); }
[data-theme="light"] .collection-empty-cta { background: var(--surface-solid); }
[data-theme="light"] .collection-empty-cta:hover { background: var(--accent-subtle); }

/* ══════════════════════════════════════════════════════════════════════════
   PROFILE PAGE — RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .profile-hero { padding: 1.25rem 1.1rem 1.4rem; }
  .profile-content { padding: 1.25rem 1.1rem 0; }
  .profile-avatar { width: 68px; height: 68px; font-size: 1.5rem; }
  .profile-username { font-size: 1.35rem; }
  .profile-stat-val { font-size: 1.45rem; }
  .profile-achievements-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
  .phs-val { font-size: 1.3rem; }
  .milestone-item { padding: 0.6rem 0.75rem; }

  /* Header must wrap so the friend action button always fits.
     Avatar + identity stay on the first row; the action drops to its
     own full-width row below them on another user's profile. */
  .profile-header-section { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
  .profile-header-info {
    min-width: 0;          /* allow long usernames to shrink, not overflow */
    flex: 1 1 auto;
  }
  .profile-username {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .profile-friend-action {
    margin-left: 0;
    flex: 1 0 100%;        /* own row, full width */
    margin-top: 0.9rem;
  }
  .btn-friend {
    width: 100%;
    padding: 0.7rem 1.1rem;  /* larger touch target on its full-width row */
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .profile-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .phs-item:nth-child(3)::before { display: none; }
  .phs-item:nth-child(3), .phs-item:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  [data-theme="light"] .phs-item:nth-child(3),
  [data-theme="light"] .phs-item:nth-child(4) { border-top-color: var(--border); }
  .profile-milestones { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .profile-achievements-grid { grid-template-columns: 1fr 1fr; }
}

/* Light mode profile overrides */
[data-theme="light"] .profile-hero {
  background: linear-gradient(160deg, #f8fafb 0%, #f0f4f8 100%);
}
[data-theme="light"] .profile-avatar {
  box-shadow: 0 0 0 5px rgba(5,150,105,0.1), 0 8px 24px rgba(0,0,0,0.12);
}
[data-theme="light"] .profile-stat-card--elo {
  background: linear-gradient(145deg, rgba(5,150,105,0.08) 0%, rgba(5,150,105,0.02) 100%);
}
[data-theme="light"] .profile-stat-card--streak {
  background: linear-gradient(145deg, rgba(245,158,11,0.07) 0%, rgba(245,158,11,0.01) 100%);
}
[data-theme="light"] .profile-stat-card--xp {
  background: linear-gradient(145deg, rgba(168,85,247,0.07) 0%, rgba(168,85,247,0.01) 100%);
}

/* ── subpanel-body: flex wrapper inside card-subpanel ── */
/* On desktop it mirrors card-subpanel's inner flex behavior */
.subpanel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Mobile analysis panel: tab bar touch-target improvements ── */
@media (max-width: 640px) {
  body.mobile-board-active #page-analysis .panel-tab {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.72rem !important;
    min-height: 44px !important;
  }

  body.mobile-board-active #page-analysis .panel-tab--active {
    background: var(--accent-subtle) !important;
    color: var(--accent) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE REDESIGN v2.0 — Compact, beautiful, state-of-the-art
   All rules are scoped to ≤640px or body.mobile-board-active so the
   desktop layout is never touched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   1. HEADER — ultra-compact, glassy
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  header {
    padding: 0 0.85rem !important;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    gap: 0.35rem !important;
  }

  .king-logo { width: 26px !important; height: 26px !important; }
  .site-title-chess  { font-size: 0.91rem !important; letter-spacing: 0.14em !important; }
  .site-title-explain { font-size: 0.63rem !important; }

  .hamburger-btn {
    padding: 6px 7px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }
  .hamburger-line { width: 19px !important; height: 1.5px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   2. ANALYSIS PAGE — re-order for true bottom-tab navigation
      Board → Content → [spacer] → Bottom Tab Bar
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Content panels now sit directly below the board */
  body.mobile-board-active #page-analysis .right-panel,
  body.mobile-board-active #page-analysis .left-panel {
    order: 1 !important;
    padding: 0 !important;
  }

  /* Tab bar pinned to the very bottom of the viewport */
  body.mobile-board-active #analysis-tab-bar {
    order: 3 !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: none !important;
    background: rgba(12,15,20,0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.04) !important;
  }

  [data-theme="light"] body.mobile-board-active #analysis-tab-bar {
    background: rgba(240,244,248,0.97) !important;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.06) !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   3. ANALYSIS TAB BAR — iOS-style bottom navigation
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.mobile-board-active #analysis-tab-bar .analysis-tab {
    flex: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 5px 6px calc(env(safe-area-inset-bottom, 0px) * 0 + 6px) !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    border-bottom: none !important;
    border-top: 2px solid transparent !important;
    transition: color 0.18s ease, border-color 0.18s ease !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.mobile-board-active #analysis-tab-bar .analysis-tab svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.45 !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
    flex-shrink: 0 !important;
  }

  body.mobile-board-active #analysis-tab-bar .analysis-tab.analysis-tab-active {
    color: var(--accent) !important;
    border-top-color: var(--accent) !important;
    background: transparent !important;
    border-bottom: none !important;
  }

  body.mobile-board-active #analysis-tab-bar .analysis-tab.analysis-tab-active svg {
    opacity: 1 !important;
    transform: scale(1.1) translateY(-1px) !important;
  }

  body.mobile-board-active #analysis-tab-bar .analysis-tab:active {
    background: var(--accent-subtle) !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   4. BOARD BUTTON BAR — cleaner navigation controls
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.mobile-board-active #page-analysis .button-bar {
    padding: 0 0.55rem !important;
    min-height: 42px !important;
    background: var(--surface-solid) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    gap: 0 !important;
    position: relative !important;
  }

  /* Prev / Next: pill-shaped with subtle depth */
  body.mobile-board-active #page-analysis .btn-nav-group {
    gap: 0.55rem !important;
  }

  body.mobile-board-active #page-analysis #btn-prev,
  body.mobile-board-active #page-analysis #btn-next {
    width: 54px !important;
    height: 34px !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    transition: background 0.12s ease, border-color 0.12s ease,
                color 0.12s ease, transform 0.1s ease !important;
    pointer-events: auto !important;
  }

  body.mobile-board-active #page-analysis #btn-prev:active,
  body.mobile-board-active #page-analysis #btn-next:active {
    background: var(--accent-subtle) !important;
    border-color: rgba(16,185,129,0.45) !important;
    color: var(--accent) !important;
    transform: scale(0.92) !important;
  }

  /* Eval score: show on right side of button bar */
  body.mobile-board-active #page-analysis .mobile-eval-display {
    display: block !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    font-family: 'Inter', monospace !important;
    color: var(--text-secondary) !important;
    margin-left: auto !important;
    letter-spacing: -0.01em !important;
    min-width: 36px !important;
    text-align: center !important;
  }

  /* Options menu button */
  body.mobile-board-active #page-analysis .mobile-options-btn {
    width: 32px !important;
    height: 34px !important;
    font-size: 1.1rem !important;
    letter-spacing: 0 !important;
  }

  /* Options dropdown */
  .mobile-options-menu {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
    min-width: 170px !important;
    padding: 0.25rem 0 !important;
    background: var(--surface-solid) !important;
    border: 1px solid var(--border) !important;
  }

  .mobile-option-item {
    padding: 0.65rem 1rem !important;
    font-size: 0.88rem !important;
    gap: 0.6rem !important;
  }

  .mobile-option-item:active {
    background: var(--accent-subtle) !important;
    color: var(--accent) !important;
  }
  .mobile-option-item:active svg { opacity: 1 !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   5. ANALYSIS (LEFT) PANEL — compact, beautiful
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Card: strip all chrome */
  body.mobile-board-active #page-analysis .card-analysis {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Panel-switcher header (Comments | Opening) */
  body.mobile-board-active #page-analysis .card-panel-header {
    margin: 0 !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface2) !important;
  }

  /* Panel tabs: compact, no huge min-height */
  body.mobile-board-active #page-analysis .panel-tab {
    padding: 0.5rem 0.5rem !important;
    font-size: 0.7rem !important;
    min-height: 40px !important;
    gap: 0.28rem !important;
    letter-spacing: 0.07em !important;
  }

  body.mobile-board-active #page-analysis .panel-tab svg {
    width: 11px !important;
    height: 11px !important;
    opacity: 0.65 !important;
  }

  body.mobile-board-active #page-analysis .panel-tab--active::after {
    height: 2px !important;
  }

  /* Subpanel content area */
  body.mobile-board-active #page-analysis .subpanel-body {
    padding: 0.55rem 0.8rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }

  /* Text sizes: comfortable reading */
  body.mobile-board-active #page-analysis .explanation-text {
    font-size: 0.88rem !important;
    line-height: 1.63 !important;
    margin-bottom: 0.4rem !important;
  }

  body.mobile-board-active #page-analysis .strategic-context {
    font-size: 0.85rem !important;
    margin-top: 0.2rem !important;
  }

  /* Comment footer: tight */
  body.mobile-board-active #page-analysis .comment-footer {
    padding: 0.48rem 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.4rem) !important;
    background: transparent !important;
    border-top: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
    gap: 0.35rem !important;
    margin-top: 0 !important;
  }

  /* "Ask about this position" button: compact, pill-shaped */
  body.mobile-board-active #page-analysis .mobile-ask-trigger {
    padding: 0.55rem 0.9rem !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 2px 12px rgba(var(--accent-rgb),0.3) !important;
    margin-top: 0 !important;
  }

  body.mobile-board-active #page-analysis .mobile-ask-trigger:active {
    opacity: 0.82 !important;
    transform: scale(0.975) !important;
    box-shadow: 0 1px 5px rgba(var(--accent-rgb),0.2) !important;
  }

  /* QA thread */
  body.mobile-board-active #page-analysis #qa-thread {
    margin-top: 0.25rem !important;
  }

  /* Opening subpanel: no extra top padding */
  body.mobile-board-active #page-analysis .opening-subpanel .subpanel-body {
    padding: 0 !important;
  }

  /* Welcome panel on mobile: more compact */
  body.mobile-board-active #page-analysis .analysis-welcome {
    padding: 0.25rem 0 !important;
    gap: 0.5rem !important;
  }

  body.mobile-board-active #page-analysis .aw-header {
    padding: 0.3rem 0.15rem 0.15rem !important;
    gap: 0.4rem !important;
  }

  body.mobile-board-active #page-analysis .aw-icon {
    width: 30px !important;
    height: 30px !important;
  }

  body.mobile-board-active #page-analysis .aw-title {
    font-size: 0.88rem !important;
  }

  body.mobile-board-active #page-analysis .aw-desc {
    font-size: 0.76rem !important;
    margin-top: 0.15rem !important;
  }

  body.mobile-board-active #page-analysis .aw-steps {
    gap: 0.3rem !important;
  }

  body.mobile-board-active #page-analysis .aw-step {
    padding: 0.42rem 0.65rem !important;
    font-size: 0.78rem !important;
    gap: 0.55rem !important;
  }

  body.mobile-board-active #page-analysis .aw-step-num {
    width: 19px !important;
    height: 19px !important;
    font-size: 0.67rem !important;
    flex-shrink: 0 !important;
  }

  body.mobile-board-active #page-analysis .aw-tip {
    padding: 0.42rem 0.65rem !important;
    font-size: 0.74rem !important;
    gap: 0.4rem !important;
  }

  /* Quick-import buttons: compact row */
  body.mobile-board-active #page-analysis .aw-mobile-import {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
  }

  body.mobile-board-active #page-analysis .aw-import-btn {
    flex: 1 !important;
    padding: 0.52rem 0.5rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    gap: 0.35rem !important;
    border-radius: 8px !important;
    justify-content: center !important;
    min-height: 42px !important;
  }

  body.mobile-board-active #page-analysis .aw-import-btn svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  /* ── Mobile engine bar: horizontal eval + top engine line ── */
  body.mobile-board-active #page-analysis .mobile-engine-bar {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.32rem 0.7rem !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg) !important;
  }

  /* Single text row: score pill + best line + depth */
  .mob-engine-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }

  /* Score pill — inline, colored to the leading side */
  .mob-eval-score {
    flex-shrink: 0;
    padding: 0.12rem 0.42rem;
    border-radius: 99px;
    font-family: 'Inter', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .mob-eval-score.lead-white {
    background: #f3ead4;
    color: #1a1410;
    border: 1px solid rgba(0, 0, 0, 0.12);
  }

  .mob-eval-score.lead-black {
    background: #11151c;
    color: #f0f2f5;
    border: 1px solid rgba(255, 255, 255, 0.16);
  }

  .mob-eval-score.lead-even {
    background: var(--surface-solid);
    color: var(--text-secondary);
    border: 1px solid var(--border);
  }

  .mob-engine-label {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Eye toggle — hides / reveals the whole engine evaluation */
  .mob-engine-eye {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.2rem;
    margin: -0.2rem 0;
    cursor: pointer;
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease;
  }

  .mob-engine-eye:active { color: var(--accent); }

  .mob-engine-eye:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .mob-engine-eye svg {
    width: 17px;
    height: 17px;
  }

  /* Default (shown): the open eye is visible, slashed eye hidden */
  .mob-engine-eye .mob-eye-hide { display: none; }
  .mob-engine-eye[aria-pressed="true"] .mob-eye-show { display: none; }
  .mob-engine-eye[aria-pressed="true"] .mob-eye-hide { display: block; }
  .mob-engine-eye[aria-pressed="true"] { color: var(--accent); }

  /* ── Hidden state: bar collapses to a compact "tap to reveal" strip ── */
  body.mobile-board-active #page-analysis .mobile-engine-bar.engine-hidden .mob-eval-score,
  body.mobile-board-active #page-analysis .mobile-engine-bar.engine-hidden .mob-engine-toggle {
    display: none !important;
  }

  body.mobile-board-active #page-analysis .mobile-engine-bar.engine-hidden .mob-engine-body {
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
  }

  /* Whole label becomes a tappable reveal affordance when hidden */
  .mobile-engine-bar.engine-hidden .mob-engine-label {
    color: var(--text-muted);
    font-weight: 600;
    font-style: italic;
  }

  /* Chevron toggle — collapses the engine detail (depth + full line) */
  .mob-engine-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.15rem;
    margin: -0.15rem -0.25rem -0.15rem 0;
    cursor: pointer;
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
  }

  .mob-engine-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .mob-engine-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mob-engine-toggle[aria-expanded="false"] .mob-engine-chevron {
    transform: rotate(-90deg);
  }

  /* Collapsible body — full evaluation (up to 3 lines + depth), revealed on expand */
  .mob-engine-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 9rem;
    margin-top: 0.4rem;
    opacity: 1;
    transition: max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease;
  }

  .mob-engine-body.mob-engine-collapsed {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
  }

  .mob-engine-lines {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
  }

  /* One engine line: eval score + its principal variation */
  .mob-engine-line-row {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
  }

  .mob-engine-line-score {
    flex-shrink: 0;
    min-width: 2.4rem;
    font-family: 'Inter', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
  }

  .mob-engine-line-moves {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
  }

  .mob-engine-line-moves .variation-move {
    font-size: 0.8rem;
    padding: 0 0.08rem;
    border-radius: 3px;
  }

  .mob-engine-depth {
    margin-top: 0.34rem;
    font-family: 'Inter', monospace;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .mob-engine-depth:empty {
    display: none;
  }

  .mob-engine-waiting {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.75rem;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   6. MOVES (RIGHT) PANEL — compact, scroll-friendly
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  body.mobile-board-active #page-analysis .right-panel {
    overflow-y: hidden !important;
    padding: 0.4rem 0.6rem 0.5rem !important;
    flex-direction: column !important;
  }

  /* Move history: compact */
  body.mobile-board-active #page-analysis .move-history {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    padding: 0.15rem 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Analyze game section: pinned at bottom of flex column */
  body.mobile-board-active #page-analysis #analyze-game-row {
    flex-shrink: 0 !important;
    padding: 0.4rem 0 0.2rem !important;
    background: transparent !important;
    border-top: none !important;
    z-index: 5 !important;
  }

  body.mobile-board-active #page-analysis .btn-analyze-game {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    gap: 0.45rem !important;
  }

  body.mobile-board-active #page-analysis .btn-analyze-game svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Analysis accuracy badges */
  body.mobile-board-active #page-analysis .analysis-live-stats {
    margin-top: 0.35rem !important;
  }

  body.mobile-board-active #page-analysis .analysis-live-accuracy {
    font-size: 0.72rem !important;
  }

  body.mobile-board-active #page-analysis .analysis-live-badges {
    gap: 0.2rem !important;
    flex-wrap: wrap !important;
  }

  body.mobile-board-active #page-analysis .live-badge {
    font-size: 0.65rem !important;
    padding: 0.1rem 0.35rem !important;
  }

  /* Progress bar: thin */
  body.mobile-board-active #page-analysis .analyze-game-progress {
    height: 3px !important;
    border-radius: 3px !important;
    margin-top: 0.3rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   7. MOBILE ASK OVERLAY — polished bottom sheet
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mobile-ask-popup {
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5) !important;
  }

  /* Drag handle */
  .mobile-ask-popup-header::before {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 99px;
  }

  .mobile-ask-popup-header {
    position: relative !important;
    padding: 1.1rem 1rem 0.6rem !important;
  }

  .mobile-ask-popup-title {
    font-size: 0.88rem !important;
  }

  .mobile-ask-popup-body {
    padding: 0.55rem 1rem 1rem !important;
    gap: 0.45rem !important;
  }

  /* Skill pills in ask overlay */
  .mobile-ask-popup-body .skill-selector {
    border-radius: 999px !important;
    padding: 2px !important;
    gap: 2px !important;
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    margin-bottom: 0 !important;
  }

  .mobile-ask-popup-body .skill-btn {
    border-radius: 999px !important;
    padding: 0.26rem 0.6rem !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
  }

  .mobile-ask-input-row {
    gap: 0.3rem !important;
  }

  .mobile-ask-input-field {
    border-radius: 9px !important;
    padding: 0.48rem 0.65rem !important;
    font-size: 0.9rem !important;
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   8. ANNOTATION POPUP — polished bottom sheet
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mobile-ann-popup {
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5) !important;
  }

  .mobile-ann-popup-header {
    position: relative !important;
    padding: 1.1rem 1rem 0.6rem !important;
  }

  .mobile-ann-popup-header::before {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 99px;
  }

  .mobile-ann-popup-title { font-size: 0.88rem !important; }

  .mobile-ann-popup-body {
    padding: 0.55rem 1rem 1rem !important;
    gap: 0.4rem !important;
  }

  .mobile-ann-popup-body .ann-toolbar-row {
    gap: 0.3rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .mobile-ann-popup-body .ann-tb-btn {
    min-width: 34px !important;
    height: 34px !important;
    font-size: 0.8rem !important;
    border-radius: 7px !important;
    padding: 0.2rem 0.4rem !important;
  }

  .mobile-ann-popup-body .ann-tb-label {
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    opacity: 0.55 !important;
    width: 100% !important;
    margin: 0 0 0.1rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   9. PLAY SETUP SCREEN — beautiful, compact persona selection
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .play-setup-screen {
    padding: 1.1rem 0.85rem 1.5rem !important;
    overflow-y: auto !important;
  }

  .play-setup-inner {
    gap: 1rem !important;
    max-width: 100% !important;
  }

  .play-setup-hero { margin-bottom: 0 !important; }
  .play-setup-title { font-size: 1.3rem !important; letter-spacing: -0.02em !important; }
  .play-setup-subtitle { font-size: 0.78rem !important; margin-top: 0.25rem !important; }

  /* Persona grid: 2 columns, tighter cards */
  .persona-roster {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  .persona-card-v2 {
    padding: 0.75rem 0.4rem 0.7rem !important;
    gap: 0.28rem !important;
    border-radius: 11px !important;
    border-width: 1.5px !important;
    min-height: auto !important;
  }

  .persona-avatar-v2 {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.3rem !important;
    border-radius: 12px !important;
  }

  .persona-name-v2 {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }

  .persona-elo-badge {
    font-size: 0.63rem !important;
    padding: 0.1rem 0.42rem !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }

  .persona-desc-v2 {
    font-size: 0.66rem !important;
    line-height: 1.4 !important;
    color: var(--text-muted) !important;
  }

  .persona-difficulty {
    gap: 3px !important;
    margin-top: 0.1rem !important;
  }

  .diff-dot {
    width: 5px !important;
    height: 5px !important;
  }

  /* Bottom row: color + start button */
  .play-setup-bottom {
    flex-direction: column !important;
    gap: 0.7rem !important;
    align-items: stretch !important;
  }

  .play-color-picker {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .play-color-label {
    font-size: 0.78rem !important;
  }

  .play-color-selector {
    gap: 0.25rem !important;
    padding: 0.25rem !important;
  }

  .play-color-btn {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem !important;
    min-height: 36px !important;
    gap: 0.4rem !important;
  }

  .play-color-swatch {
    width: 24px !important;
    height: 24px !important;
  }

  .play-start-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 46px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* Extras row: stacked, compact */
  .play-setup-extras {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    justify-content: center !important;
  }

  .play-setup-pos-btn {
    font-size: 0.78rem !important;
    padding: 0.35rem 0.7rem !important;
    min-height: auto !important;
  }

  .play-setup-tip {
    font-size: 0.71rem !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   10. PLAY GAME ARENA — compact, functional
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Opponent info bar: more compact */
  .play-mobile-opp-bar {
    background: var(--surface-solid) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .play-mobile-opp-head {
    padding: 0.32rem 0.8rem !important;
    min-height: 44px !important;
    gap: 0.6rem !important;
  }

  .play-mobile-opp-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 1.05rem !important;
    border-radius: 50% !important;
    border-width: 1.5px !important;
  }

  .play-mobile-opp-name {
    font-size: 0.77rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
  }

  .play-mobile-opp-speech {
    font-size: 0.67rem !important;
    color: var(--text-muted) !important;
  }

  /* Play button bar */
  body.mobile-board-active .play-arena .button-bar {
    padding: 0 0.55rem !important;
    min-height: 42px !important;
    gap: 0.35rem !important;
    background: var(--surface-solid) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Jump-to-current pill — float it above the button bar as an overlay so its
     appearance while browsing history doesn't reflow (and shift) the centered
     nav group and the rest of the bar. The bar is position:relative. */
  body.mobile-board-active .play-arena .btn-jump-current {
    position: absolute !important;
    bottom: calc(100% + 0.4rem) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 60 !important;
    font-size: 0.74rem !important;
    padding: 0.32rem 0.7rem !important;
    border-radius: 999px !important;
    background: var(--surface-solid) !important;
    border: 1px solid rgba(16,185,129,0.45) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
  }

  .play-game-status {
    font-size: 0.72rem !important;
  }

  /* Play bottom nav: iOS-style, matching analysis tab bar */
  .mobile-bottom-nav {
    height: calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(12,15,20,0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.04) !important;
  }

  [data-theme="light"] .mobile-bottom-nav {
    background: rgba(240,244,248,0.97) !important;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.06) !important;
  }

  .mbn-tab {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 5px 6px 5px !important;
    font-size: 0.67rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    min-height: unset !important;
    border-top: 2px solid transparent !important;
    border-bottom: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color 0.18s ease, background 0.15s ease !important;
  }

  .mbn-tab svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.45 !important;
    transition: opacity 0.18s ease !important;
  }

  .mbn-tab.mbn-active {
    color: var(--accent) !important;
    border-top-color: var(--accent) !important;
    background: transparent !important;
  }

  .mbn-tab.mbn-active svg {
    opacity: 1 !important;
  }

  .mbn-tab:active { background: var(--accent-subtle) !important; }

  /* Play panels */
  body.mobile-board-active .play-arena-left {
    padding: 0.5rem 0.65rem !important;
    gap: 0.5rem !important;
  }

  /* Play move history: keep the Analysis-style card + full-bleed header bar here.
     Unlike the Analysis tab (where the panel IS the whole tab and chrome is
     stripped), this list sits inside a scrolling column with chat above and
     actions below, so the card + header stay for visual grouping. Just size it
     to the column and let the inner list scroll, exactly like desktop. */
  body.mobile-board-active .play-history-card {
    min-height: 0 !important;
    flex: 1 1 0 !important;
  }

  body.mobile-board-active .play-move-history-list {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Play game actions */
  .play-game-actions-mobile {
    gap: 0.5rem !important;
    padding: 0.35rem 0 !important;
  }

  .play-game-actions-mobile .btn-secondary,
  .play-game-actions-mobile .btn-danger {
    height: 42px !important;
    font-size: 0.88rem !important;
    flex: 1 !important;
    border-radius: 9px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   11. PUZZLE ARENA — compact stats, clean layout
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* Full-width puzzle arena on mobile */
  .puzzle-arena {
    padding: 0 !important;
    gap: 0 !important;
  }

  .puzzle-board-wrap {
    width: 100% !important;
  }

  #puzzle-board-container {
    width: 100% !important;
    height: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vw !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
    animation: none !important;
  }

  /* Puzzle panel: full-width, no scroll */
  .puzzle-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    gap: 0 !important;
    padding: 0 0.75rem 0.75rem !important;
  }

  /* Stats bar: compact 4-column row */
  .puzzle-stats-bar {
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 0.4rem 0 !important;
    gap: 0.35rem !important;
  }

  .puzzle-stat-item {
    padding: 0.45rem 0.5rem !important;
    border-top-width: 2px !important;
    border-radius: 8px !important;
  }

  .puzzle-stat-label {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-weight: 700 !important;
    margin-bottom: 0.15rem !important;
  }

  .puzzle-stat-val {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }

  /* Turn indicator: compact */
  .puzzle-info-area {
    padding: 0.5rem 0.65rem !important;
    border-radius: 8px !important;
  }

  .puzzle-turn-indicator {
    padding: 0 !important;
    gap: 0.5rem !important;
  }

  .puzzle-turn-dot {
    width: 9px !important;
    height: 9px !important;
    flex-shrink: 0 !important;
  }

  #puzzle-turn-text {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
  }

  .puzzle-themes-row {
    margin-top: 0.35rem !important;
    gap: 0.3rem !important;
    flex-wrap: wrap !important;
  }

  /* Hint box: compact */
  .puzzle-hint-box {
    padding: 0.65rem 0.8rem !important;
    border-radius: 9px !important;
    margin: 0 !important;
  }

  .puzzle-hint-header {
    font-size: 0.75rem !important;
    margin-bottom: 0.35rem !important;
    gap: 0.35rem !important;
  }

  .puzzle-hint-text {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.5rem !important;
  }

  .puzzle-retry-btn {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.65rem !important;
    border-radius: 6px !important;
  }

  /* Result panel: bottom sheet that slides up over the (stationary) board.
     Taken out of flow so solving never reflows the board mid-celebration and
     the "Next Puzzle" button is always visible without scrolling. */
  .puzzle-result-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    margin: 0 !important;
    padding: 1.4rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px)) !important;
    border: none !important;
    border-top: 1.5px solid var(--border) !important;
    border-radius: 18px 18px 0 0 !important;
    /* Second shadow = full-screen dim backdrop. Drawn at the sheet's own
       stacking level so it reliably covers the board (the chessboard sits in
       its own context, which defeats a negative-z-index pseudo backdrop). */
    box-shadow:
      0 -8px 32px rgba(0,0,0,0.45),
      0 0 0 100vh rgba(0,0,0,0.5) !important;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 0.25s ease;
    animation: puzzle-sheet-up 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
    touch-action: pan-y;
  }

  /* Grab-handle affordance at the top of the sheet */
  .puzzle-result-panel::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }

  /* Dismissed state: collapse to a slim bottom bar that keeps only the
     "Next Puzzle" button reachable (swipe-down / tap-outside drops the dim). */
  .puzzle-result-panel.sheet-collapsed {
    padding: 0.7rem 1.1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.4) !important;
    max-height: none !important;
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
  }
  .puzzle-result-panel.sheet-collapsed > *:not(#btn-puzzle-next) {
    display: none !important;
  }
  .puzzle-result-panel.sheet-collapsed::after { display: none; }
  .puzzle-result-panel.sheet-collapsed .btn-puzzle-next { margin: 0 !important; }

  .puzzle-result-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  .puzzle-result-title {
    font-size: 1.05rem !important;
    margin: 0.35rem 0 0.15rem !important;
  }

  .puzzle-elo-change {
    font-size: 0.82rem !important;
    margin-bottom: 0.6rem !important;
  }

  .btn-puzzle-next {
    height: 40px !important;
    font-size: 0.88rem !important;
    padding: 0 1.1rem !important;
    border-radius: 9px !important;
  }

  /* Bottom actions: compact */
  .puzzle-bottom-actions {
    padding: 0 !important;
    gap: 0.5rem !important;
    margin-top: 0.35rem !important;
  }

  .btn-puzzle-ghost {
    font-size: 0.8rem !important;
    padding: 0.38rem 0.75rem !important;
    border-radius: 7px !important;
    height: 36px !important;
  }

  /* Why-box */
  #puzzle-why-wrap { margin: 0 !important; }
  .btn-puzzle-why {
    height: 38px !important;
    font-size: 0.85rem !important;
    border-radius: 9px !important;
    width: 100% !important;
  }

}

/* ────────────────────────────────────────────────────────────────────────
   12. TRAIN HUB — compact mode cards
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .train-mode-select {
    padding: 1.25rem 0.85rem 1.5rem !important;
    gap: 1rem !important;
  }

  .train-hub-emblem {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .train-hub-emblem svg {
    width: 20px !important;
    height: 20px !important;
  }

  .train-mode-title {
    font-size: 1.35rem !important;
    margin: 0 !important;
  }

  .train-mode-subtitle {
    font-size: 0.8rem !important;
  }

  /* Daily stats row: tighter */
  .train-daily-row {
    padding: 0.55rem 0.75rem !important;
    border-radius: 10px !important;
    gap: 0 !important;
  }

  .train-daily-val {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }

  .train-daily-label {
    font-size: 0.58rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 1px !important;
  }

  .train-daily-item {
    padding: 0 0.5rem !important;
    min-width: 0 !important;
  }

  .train-mode-cards { gap: 0.5rem !important; }

  .train-mode-card {
    padding: 0.7rem 0.8rem !important;
    border-radius: 11px !important;
    min-height: auto !important;
    gap: 0.65rem !important;
  }

  .train-card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
  }

  .train-card-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .train-card-name {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }

  .train-card-desc {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    margin-top: 0.12rem !important;
  }

  .train-card-stat {
    font-size: 0.66rem !important;
    margin-top: 0.18rem !important;
  }

  .train-card-arrow {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    opacity: 0.4 !important;
  }

  #btn-train-puzzles { min-height: auto !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   13. FOUNDATIONS — compact lesson view
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hub header: compact */
  .foundations-hub-header {
    gap: 0.65rem !important;
    flex-wrap: wrap !important;
  }

  .foundations-hub-title h2 {
    font-size: 1.2rem !important;
  }

  .foundations-hub-title p {
    font-size: 0.78rem !important;
  }

  .foundations-hub-xp {
    padding: 0.28rem 0.65rem !important;
  }

  .foundations-xp-label { font-size: 0.6rem !important; }
  .foundations-xp-val   { font-size: 1.05rem !important; }

  /* Chapters grid */
  .foundations-chapters-grid {
    gap: 0.5rem !important;
  }

  /* Lesson panel */
  .foundations-panel {
    padding: 0 !important;
  }

  .foundations-panel-top {
    padding: 0.65rem 0.75rem 0.5rem !important;
    gap: 0.5rem !important;
  }

  .btn-foundations-back {
    font-size: 0.78rem !important;
    padding: 0.3rem 0.6rem !important;
    gap: 0.25rem !important;
  }

  .btn-foundations-back svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Panel body */
  .foundations-panel-body {
    padding: 0.5rem 0.75rem !important;
  }

  .foundations-step-title {
    font-size: 0.92rem !important;
    margin-bottom: 0.4rem !important;
  }

  .foundations-step-text {
    font-size: 0.83rem !important;
    line-height: 1.57 !important;
  }

  /* Panel footer */
  .foundations-panel-footer {
    padding: 0.45rem 0.75rem !important;
    gap: 0.4rem !important;
  }

  .btn-foundations-continue {
    height: 42px !important;
    font-size: 0.9rem !important;
    border-radius: 9px !important;
  }

  /* Ask Coach */
  .btn-foundations-ask-toggle {
    font-size: 0.78rem !important;
    padding: 0.3rem 0.65rem !important;
    border-radius: 7px !important;
    gap: 0.35rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   14. OPENING TRAINER — compact on mobile
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Browser header */
  .ot-browser-header {
    gap: 0.65rem !important;
    padding: 0 0 0.75rem !important;
    flex-wrap: wrap !important;
  }

  .ot-browser-title h2 {
    font-size: 1.1rem !important;
  }

  .ot-browser-title p {
    font-size: 0.74rem !important;
  }

  /* Filter tabs: horizontal scroll */
  .ot-filter-tabs {
    gap: 0.25rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  .ot-filter-tabs::-webkit-scrollbar { display: none !important; }

  .ot-filter-tab {
    font-size: 0.72rem !important;
    padding: 0.3rem 0.6rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 999px !important;
  }

  /* Panel top */
  .ot-panel-top {
    padding: 0.6rem 0.75rem 0.45rem !important;
    gap: 0.45rem !important;
  }

  .btn-ot-back {
    font-size: 0.78rem !important;
    padding: 0.28rem 0.55rem !important;
  }

  /* Status area */
  .ot-status-area {
    padding: 0.45rem 0.65rem !important;
    border-radius: 8px !important;
  }

  .ot-status-text {
    font-size: 0.82rem !important;
  }

  /* Wrong-move box */
  .ot-wrong-box {
    padding: 0.6rem 0.75rem !important;
    border-radius: 9px !important;
  }

  .ot-wrong-header {
    font-size: 0.75rem !important;
    gap: 0.35rem !important;
  }

  .ot-wrong-text {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  /* Complete panel */
  .ot-complete-panel {
    padding: 0.75rem !important;
    border-radius: 10px !important;
  }

  .ot-complete-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  .ot-complete-title {
    font-size: 0.95rem !important;
  }

  .ot-complete-actions {
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
  }

  .btn-ot-primary,
  .btn-ot-ghost {
    height: 38px !important;
    font-size: 0.85rem !important;
    padding: 0 0.9rem !important;
    border-radius: 9px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   15. COLLECTION PAGE — compact list items
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .collection-item {
    padding: 0.7rem 0.75rem !important;
    gap: 0.55rem !important;
    border-radius: 10px !important;
  }

  .collection-item-info {
    gap: 0.15rem !important;
  }

  .collection-item-title {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
  }

  .collection-item-meta {
    font-size: 0.68rem !important;
  }

  .collection-item-actions {
    gap: 0.35rem !important;
    flex-wrap: nowrap;
    overflow: visible;
  }

  /* Collapse "Add to…" and "Share" to icon-only — title attr covers a11y */
  .collection-add-btn,
  .collection-share-btn {
    font-size: 0 !important;  /* hides text node; SVG has explicit dimensions */
    padding: 0.45rem 0.6rem !important;
    min-width: 0 !important;
    gap: 0 !important;
  }
  .collection-add-btn svg,
  .collection-share-btn svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
  }

  /* Let Analyze breathe but stop it enforcing a fixed min-width */
  .collection-analyze-btn {
    min-width: 0 !important;
    font-size: 0.78rem !important;
    padding: 0.4rem 0.6rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   16. MODALS — bottom-sheet style on mobile
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .modal-box {
    border-radius: 18px 18px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5) !important;
  }

  /* Modal overlay: align to bottom */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Auth modal */
  .auth-modal-box {
    border-radius: 18px 18px 0 0 !important;
    width: 100% !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 95dvh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5) !important;
    padding: 1.5rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   17. HAMBURGER DRAWER — polished
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mobile-drawer {
    width: min(88vw, 300px) !important;
  }

  .drawer-header {
    padding: 0.85rem 0.85rem 0.8rem !important;
  }

  .drawer-nav-btn {
    padding: 0.7rem 0.85rem !important;
    font-size: 0.88rem !important;
    min-height: 44px !important;
    gap: 0.75rem !important;
    border-radius: 9px !important;
  }

  .drawer-theme-btn {
    padding: 0.7rem 0.85rem !important;
    font-size: 0.85rem !important;
    min-height: 44px !important;
    border-radius: 9px !important;
  }

  .drawer-auth-btn {
    height: 42px !important;
    font-size: 0.86rem !important;
    border-radius: 9px !important;
  }

  .drawer-footer {
    padding: 0.5rem 0.5rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
    gap: 0.4rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   18. UNIVERSAL TAP FEEDBACK — tactile micro-interactions
   ──────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .analysis-tab:active,
  .mbn-tab:active,
  .drawer-nav-btn:active,
  .train-mode-card:active {
    opacity: 0.85 !important;
    transform: scale(0.97) !important;
  }

  .persona-card-v2:active {
    transform: scale(0.96) !important;
    opacity: 0.88 !important;
  }

  .play-color-btn:active,
  .play-start-btn:active {
    transform: scale(0.97) !important;
  }

  /* Remove hover transforms that don't work on touch */
  .persona-card-v2:hover { transform: none !important; }
  .train-mode-card:hover { transform: none !important; }
}


/* ── Modal patch: revert position:fixed on generic modal-box (too aggressive) ── */
@media (max-width: 540px) {
  /* Keep generic modal-box scrollable but DON'T use fixed positioning —
     the overlay already handles placement. Just add rounded top corners. */
  .modal-box {
    position: static !important;
    border-radius: 18px 18px 0 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(100vw - 0px) !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5) !important;
  }

  /* auth-modal-box: same treatment, no fixed */
  .auth-modal-box {
    position: static !important;
    border-radius: 18px 18px 0 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: 95dvh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5) !important;
    padding: 1.25rem 1.1rem calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }

  /* Overlay: flex-end aligns modal to bottom */
  .modal-overlay {
    align-items: flex-end !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    justify-content: flex-end !important;
  }

  /* Remove the old margin: auto trick since we're using flex-end */
  .modal-overlay > * { margin: 0 !important; }
}


/* ── Modal overlay alignment fix: center horizontally, bottom-align ── */
@media (max-width: 540px) {
  .modal-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    flex-direction: row !important;
  }
  .modal-overlay > * { margin: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE COMPACT PANEL NAV
   Replaces the old bottom tab bar (Moves/Analysis) and the sub-tab header
   (Comments/Opening) with a single slim 3-chip row above the content.
   Desktop is completely untouched — all rules are guarded by mobile-board-active
   or the ≤640px media query.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden on desktop by default */
.mobile-panel-nav { display: none; }

@media (max-width: 640px) {

  /* ── Section nav is now inside .button-bar — no standalone row on mobile ── */
  body.mobile-board-active .mobile-panel-nav {
    display: none; /* hidden by default; overridden inside .button-bar below */
  }

  /* ── Completely hide the old bottom tab bar on mobile ── */
  body.mobile-board-active #analysis-tab-bar {
    display: none !important;
  }

  /* ── Hide the Comments / Opening sub-tab header on mobile ── */
  body.mobile-board-active #page-analysis .card-panel-header {
    display: none !important;
  }

  /* ── Hide engine eval score from the button bar on mobile ── */
  body.mobile-board-active #page-analysis .mobile-eval-display {
    display: none !important;
  }

  /* ── Panels sit below the compact nav ── */
  body.mobile-board-active #page-analysis .right-panel,
  body.mobile-board-active #page-analysis .left-panel {
    order: 2 !important;
  }

  /* ── Chip buttons ── */
  .mpn-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    white-space: nowrap;
    min-height: 34px;
  }

  .mpn-btn.mpn-btn--active {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.3);
  }

  .mpn-btn:active {
    opacity: 0.7;
    transform: scale(0.95);
  }

  .mpn-btn svg {
    flex-shrink: 0;
    opacity: 0.55;
  }

  .mpn-btn.mpn-btn--active svg {
    opacity: 1;
  }

  [data-theme="light"] .mpn-btn.mpn-btn--active {
    background: rgba(var(--accent-rgb), 0.11);
  }
}

/* ────────────────────────────────────────────────────────────────────────
   10. ONE-ROW BUTTON BAR — section nav chips share the row with prev/next
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Show the nav inside the button-bar; kill standalone row properties */
  body.mobile-board-active #page-analysis .button-bar .mobile-panel-nav {
    display: flex !important;
    order: 0 !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 3px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  /* Compact chip buttons — inactive: icon only, active: icon + label */
  body.mobile-board-active #page-analysis .button-bar .mpn-btn {
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px 8px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    height: 34px !important;
    min-height: unset !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Inactive chip: icon only, hide label */
  body.mobile-board-active #page-analysis .button-bar .mpn-btn span {
    display: none !important;
  }

  body.mobile-board-active #page-analysis .button-bar .mpn-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    opacity: 0.55 !important;
  }

  /* Active chip: show label + accent style */
  body.mobile-board-active #page-analysis .button-bar .mpn-btn.mpn-btn--active {
    background: var(--accent-subtle) !important;
    color: var(--accent) !important;
    border-color: rgba(var(--accent-rgb), 0.3) !important;
  }

  body.mobile-board-active #page-analysis .button-bar .mpn-btn.mpn-btn--active span {
    display: inline !important;
  }

  body.mobile-board-active #page-analysis .button-bar .mpn-btn.mpn-btn--active svg {
    opacity: 1 !important;
  }

  body.mobile-board-active #page-analysis .button-bar .mpn-btn:active {
    opacity: 0.7 !important;
    transform: scale(0.92) !important;
  }

  [data-theme="light"] body.mobile-board-active #page-analysis .button-bar .mpn-btn.mpn-btn--active {
    background: rgba(var(--accent-rgb), 0.11) !important;
  }

  /* Btn-nav-group: normal flex flow (flex:1) instead of absolute centering */
  body.mobile-board-active #page-analysis .btn-nav-group {
    position: static !important;
    transform: none !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  /* Eval display: no room in the one-row bar — eval is in the Analysis panel */
  body.mobile-board-active #page-analysis .mobile-eval-display {
    display: none !important;
  }

  /* Options wrap: no margin-left auto needed (nav-group is flex:1) */
  body.mobile-board-active #page-analysis .mobile-options-wrap {
    margin-left: 0 !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   11. ASK BUTTON — compact pill, AI sparkle style
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  body.mobile-board-active #page-analysis .mobile-ask-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 0.52rem 1.2rem !important;
    border-radius: 999px !important;
    background: var(--accent) !important;
    border: none !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    letter-spacing: -0.01em !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.35), 0 1px 0 rgba(255,255,255,0.1) inset !important;
    transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s !important;
    margin-top: 0 !important;
  }

  body.mobile-board-active #page-analysis .mobile-ask-trigger svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #fff !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
  }

  body.mobile-board-active #page-analysis .mobile-ask-trigger:active {
    opacity: 0.82 !important;
    transform: scale(0.97) !important;
    box-shadow: 0 1px 6px rgba(var(--accent-rgb), 0.22) !important;
    border-color: transparent !important;
    color: #fff !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   12. OPENING PANEL — compact, dense, overview-optimized
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  body.mobile-board-active #page-analysis .ob-header {
    padding: 0.38rem 0.5rem 0.3rem !important;
  }

  body.mobile-board-active #page-analysis .ob-opening-name {
    font-size: 0.79rem !important;
  }

  body.mobile-board-active #page-analysis .ob-total {
    display: none !important;
  }

  body.mobile-board-active #page-analysis .ob-section-label {
    padding: 0.25rem 0.5rem 0.12rem !important;
    font-size: 0.62rem !important;
  }

  /* Continuation move rows: compact */
  body.mobile-board-active #page-analysis .ob-moves {
    padding: 0 0.12rem 0.2rem !important;
  }

  body.mobile-board-active #page-analysis .ob-move-row {
    padding: 0.25rem 0.4rem 0.25rem 0.48rem !important;
    gap: 0.35rem !important;
  }

  body.mobile-board-active #page-analysis .ob-san {
    font-size: 0.82rem !important;
    min-width: 26px !important;
  }

  body.mobile-board-active #page-analysis .ob-winbar-track {
    height: 5px !important;
    border-radius: 3px !important;
  }

  body.mobile-board-active #page-analysis .ob-winbar-wrap {
    gap: 2px !important;
  }

  body.mobile-board-active #page-analysis .ob-winpcts {
    font-size: 0.58rem !important;
    gap: 0.18rem !important;
  }

  /* Master games toggle */
  body.mobile-board-active #page-analysis .ob-section-toggle {
    padding: 0.25rem 0.5rem 0.12rem !important;
    font-size: 0.62rem !important;
  }

  /* Master game rows */
  body.mobile-board-active #page-analysis .ob-games {
    padding: 0 0.12rem 0.15rem !important;
  }

  body.mobile-board-active #page-analysis .ob-game-row {
    padding: 0.18rem 0.4rem !important;
    gap: 0.3rem !important;
  }

  body.mobile-board-active #page-analysis .ob-game-players {
    font-size: 0.68rem !important;
  }

  body.mobile-board-active #page-analysis .ob-game-cont {
    font-size: 0.63rem !important;
    padding: 0.03em 0.28em !important;
  }

  body.mobile-board-active #page-analysis .ob-game-result {
    font-size: 0.63rem !important;
  }

  /* Hide year — saves space, year is rarely useful on mobile overview */
  body.mobile-board-active #page-analysis .ob-game-year {
    display: none !important;
  }

  body.mobile-board-active #page-analysis .ob-footer {
    padding: 0.28rem 0.5rem !important;
    font-size: 0.64rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE MODAL POLISH  (≤640px → ≤480px → ≤380px → ≤360px)
   Compact padding, constrained max-heights, tighter headings.
   Breakpoints are ordered large→small so each overrides the last.
   ════════════════════════════════════════════════════════════════ */

/* ── ≤640px: Collection import modal — max-height + compact padding ── */
@media (max-width: 640px) {
  .collection-import-modal-box {
    padding: 1rem;
    max-height: min(88dvh, 640px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .collection-import-modal-subtitle { font-size: 0.78rem; }
  .collection-import-card  { padding: 0.8rem 0.85rem; }
  .collection-import-title { font-size: 0.88rem; margin-bottom: 0.15rem; }
  /* Shorter textarea — long PGNs scroll within the field */
  .collection-import-textarea { min-height: 90px; }
}

/* ── ≤480px: All modals — compact 1rem padding + individual overrides ── */
@media (max-width: 480px) {
  /* Default: every .modal-box goes from 1.5rem → 1rem padding on phone */
  .modal-box { padding: 1rem; }

  /* Modals with section-based internal layout must keep padding: 0 */
  .game-insights-box    { padding: 0; }
  .upgrade-modal-box    { padding: 0; width: calc(100vw - 1.5rem); }
  .verify-email-modal-box { padding: 0; }
  .modal-box--search    { padding: 0; }

  /* Auth / reset modals keep slightly taller side-padding for breathing room */
  .auth-modal-box { padding: 1.4rem 1.1rem; }

  /* PGN import has its own layout; constrain height and compress padding */
  .pgn-modal-expanded {
    padding: 0.875rem 1rem 1rem;
    max-height: min(85dvh, 520px);
  }

  /* PGN modal internals */
  .pgn-modal-head  { margin-bottom: 0.4rem; }
  .pgn-import-tabs { margin-bottom: 0.6rem; }
  .pgn-import-tab  { padding: 0.4rem 0.65rem; font-size: 0.8rem; }
  /* Both panes same height so the modal doesn't jump on tab switch */
  .pgn-import-pane { min-height: 160px; }
  /* Shorter game-list so action buttons stay visible */
  .pgn-game-list   { max-height: 150px; }

  /* Auth title & subtitle — 1.35rem is visually large on a 375px phone */
  .auth-title    { font-size: 1.1rem; margin-bottom: 0.2rem; }
  .auth-subtitle { font-size: 0.8rem; }
  .auth-header   { margin-bottom: 0.9rem; }

  /* Upgrade modal heading */
  .upgrade-header h2 { font-size: 1.1rem; margin-bottom: 0.2rem; }
  .upgrade-subtitle  { font-size: 0.8rem; }

  /* Verify-email body — tighter inner padding */
  .verify-email-modal-body { padding: 1.1rem 1.25rem 0.5rem; gap: 0.75rem; }

  /* Share modal body lives inside its own element, not .modal-box */
  .share-modal-body { padding: 1rem; gap: 0.65rem; }

  /* Game-over modal — 1.25rem heading slightly large on small screens */
  .play-over-heading { font-size: 1.05rem !important; }
}

/* ── ≤380px: Position builder — palette pieces scaled down ── */
@media (max-width: 380px) {
  .builder-palette-piece,
  .builder-trash { width: 36px; height: 36px; }
  /* Let board + palette use full available width */
  .builder-board-wrap,
  .builder-palette-wrap { width: 100%; }
}

/* ── ≤360px: Promo picker + modal overlay outer padding ── */
@media (max-width: 360px) {
  .promo-img { width: 44px; height: 44px; }
  .promo-btn { padding: 0.55rem 0.25rem; gap: 0.2rem; }
  /* Reduce the 1.5rem top/bottom gap around modals on very small phones */
  .modal-overlay { padding: 0.5rem 0; }
}

/* ── Mobile: pin "Ask about position" firmly to the viewport bottom ────────────
   position: fixed takes the footer out of flow and anchors it to the screen
   regardless of panel height or content length. The parent's display:none still
   hides it when the analysis panel is not active, so we don't need extra guards.
   The subpanel-body gets bottom padding to keep content clear of the bar.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.mobile-board-active #page-analysis .comment-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    padding: 0.4rem 0.9rem env(safe-area-inset-bottom, 0px) !important;
    background: transparent !important;
    border-top: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-top: 0 !important;
  }

  /* Give the scrollable content area enough bottom clearance so nothing hides
     behind the fixed footer (~56px button area + safe-area inset). */
  body.mobile-board-active #page-analysis #comments-subpanel .subpanel-body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 68px) !important;
  }
}