/* ═══════════════════════════════════════════════════════════════
   Chess Master Academy — "The Master's Study"
   A refined, editorial chess experience
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Core palette — deep ink & warm paper */
  --ink-950: #07080c;
  --ink-900: #0a0b12;
  --ink-850: #0e1018;
  --ink-800: #141724;
  --ink-750: #1a1e2e;
  --ink-700: #242938;

  /* Parchment/paper tones */
  --paper-50:  #f5ecd7;
  --paper-100: #ebe0c5;
  --paper-200: #d9cba5;
  --paper-300: #bfa87f;

  /* Antique gold — the signature accent */
  --gold-400: #e8c877;
  --gold-500: #d4af5c;
  --gold-600: #c9a961;
  --gold-700: #a8863d;
  --gold-900: #6b5423;
  --gold-soft: rgba(201, 169, 97, 0.18);
  --gold-glow: rgba(232, 200, 119, 0.35);

  /* Supporting accents */
  --oxblood: #a8413a;
  --oxblood-soft: rgba(168, 65, 58, 0.15);
  --sage: #89a888;
  --sage-soft: rgba(137, 168, 136, 0.15);
  --lapis: #6b8cbe;
  --lapis-soft: rgba(107, 140, 190, 0.18);

  /* Text */
  --text: #ece3d0;
  --text-dim: rgba(236, 227, 208, 0.72);
  --text-mute: rgba(236, 227, 208, 0.48);
  --text-whisper: rgba(236, 227, 208, 0.28);

  /* Strokes & surfaces */
  --rule: rgba(236, 227, 208, 0.08);
  --rule-bright: rgba(236, 227, 208, 0.14);
  --rule-gold: rgba(201, 169, 97, 0.22);
  --panel: rgba(14, 16, 24, 0.85);
  --panel-raised: rgba(20, 23, 36, 0.92);

  /* Type */
  --font-display: "Fraunces", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-serif:   "Fraunces", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─────────── Reset & base ─────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--ink-900);
  color: var(--text);
}

body {
  overflow-x: hidden;
  font-family: var(--font-body);
  font-feature-settings: "liga", "kern", "onum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
}

/* Ambient textures: film grain + vignette */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.89 0 0 0 0 0.82 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(201, 169, 97, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(107, 140, 190, 0.04), transparent 55%),
    radial-gradient(ellipse 50% 50% at 0% 80%, rgba(168, 65, 58, 0.035), transparent 60%);
}

#root {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ─────────── Loading state ─────────── */
#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--ink-900);
  color: var(--text-whisper);
  font-family: var(--font-display);
  flex-direction: column;
  gap: 28px;
  position: relative;
}

#loading > div:nth-child(2) {
  font-size: 72px !important;
  opacity: 1 !important;
  color: var(--gold-500);
  text-shadow:
    0 0 20px var(--gold-glow),
    0 0 40px rgba(232, 200, 119, 0.2),
    0 2px 0 rgba(0, 0, 0, 0.5);
  animation: kingBreathe 3s ease-in-out infinite;
}

#loading > div:nth-child(3) {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 6px !important;
  color: var(--gold-500) !important;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.8;
}

#loading .spinner {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(201, 169, 97, 0.1);
  border-top-color: var(--gold-500);
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.68, -0.2, 0.32, 1.2) infinite;
  box-shadow: 0 0 24px rgba(201, 169, 97, 0.12);
}

@keyframes kingBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px var(--gold-glow)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 20px var(--gold-glow)); }
}

/* ─────────── Animations ─────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bounceIn { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes piecePlace { 0% { transform: scale(1.4); opacity: 0.3; } 50% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } }
@keyframes glowPulse { 0% { filter: drop-shadow(0 0 4px rgba(232,200,119,0.4)); } 50% { filter: drop-shadow(0 0 14px rgba(232,200,119,0.75)); } 100% { filter: drop-shadow(0 0 4px rgba(232,200,119,0.4)); } }
@keyframes correctFlash { 0% { background: rgba(137,168,136,0); } 30% { background: rgba(137,168,136,0.22); } 100% { background: rgba(137,168,136,0); } }
@keyframes shakeWrong { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes levelTransition { 0% { opacity: 0; transform: scale(0.98) translateY(6px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes musicPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes slideDown { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }

@keyframes goldShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

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

/* ─────────── Scrollbar ─────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201,169,97,0.18), rgba(201,169,97,0.08));
  border-radius: 4px;
  border: 1px solid rgba(201,169,97,0.06);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(201,169,97,0.32), rgba(201,169,97,0.14));
}

/* ─────────── Selection ─────────── */
::selection {
  background: var(--gold-soft);
  color: var(--gold-400);
}

/* ─────────── Focus ring ─────────── */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 1px solid var(--gold-500);
  outline-offset: 2px;
}

/* ─────────── Input refinements (apply globally — inputs all use rgba(255,255,255,0.04)) ─────────── */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select {
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
  background: rgba(236, 227, 208, 0.03) !important;
  border-color: var(--rule) !important;
  color: var(--text) !important;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
  border-color: var(--gold-500) !important;
  background: rgba(236, 227, 208, 0.06) !important;
  box-shadow: 0 0 0 3px var(--gold-soft) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-whisper) !important;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile responsive layout (≤768px)
   ═══════════════════════════════════════════════════════════════
   Desktop is a two-column flex row. On mobile we switch to CSS Grid
   with a single column — this is the most bulletproof way to kill any
   residual horizontal layout from the inline flex: row default.
   (We tried flex-direction: column !important but the inline style
   `display: "flex"` combined with browser subtleties was still leaving
   horizontal drift; grid has no such ambiguity.)
*/
@media (max-width: 768px) {
  main.chess-main,
  main.chess-main--mobile-play {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    padding: 0 8px 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Left column (tabs + coach + lessons) */
  .chess-main > div:first-child,
  .chess-left-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: unset !important;
  }

  /* Right column (board wrapper) — unstick, make it a centered flex box */
  .chess-main > div:last-child,
  .chess-board-col {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Inner board column: center horizontally inside the board-col grid cell */
  .chess-board-col > div {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  /* Reorder during play: board (last child) first, tabs/coach (first) second */
  .chess-main--mobile-play > div:first-child,
  .chess-main--mobile-play .chess-left-col  { order: 2 !important; }
  .chess-main--mobile-play > div:last-child,
  .chess-main--mobile-play .chess-board-col { order: 1 !important; }

  /* Header: tighten padding, allow wrap */
  header {
    padding: 10px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  ::-webkit-scrollbar { display: none; }
  body::before { opacity: 0.2; }

  /* Kill horizontal overflow globally on mobile */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* The difficulty-level nav has padding: 0 32px which wastes space.
     Scale it down on mobile. */
  nav {
    padding: 0 8px !important;
  }
}

/* ─────────── Narrow phones (≤420px) ─────────── */
@media (max-width: 420px) {
  main.chess-main,
  main.chess-main--mobile-play {
    padding: 0 4px 12px !important;
  }
  header {
    padding: 8px 10px !important;
  }
}