/* =========================================================
   CHESS MASTERCLASS — SINGLE SOURCE OF TRUTH FOR THEMES
   Every palette for the whole site lives here. Pages must NOT
   redefine theme variables inline; link this file instead.
   Two variable families are provided per theme so both layouts
   are themed from the same palette:
     • app-shell  (--app-bg, --card-hero, ...)   index/menu/courses
     • player     (--bg, --panel-*, ...)         champion-track
   'classic' is the chess.com grey/brown look (site default).
   Board colours (--light-square/--dark-square) are NOT themed
   here; they are handled independently by the board theme.
   ========================================================= */

/* Cross-document page transitions (Chromium/Edge; ignored elsewhere).
   This cross-fades between pages so a navigation no longer snaps — it was
   what originally hid the Chrome-Android fixed-element jump. Important: do
   NOT put a view-transition-name on the bar (that produced the sharp-corner
   ripple + shake); let it cross-fade as part of the page. */
@view-transition { navigation: auto; }

/* Faster cross-fade: default is 250ms; 100ms was too short to hide the
   Chrome-Android fixed-bar jump, so 120ms is the sweet spot. */
::view-transition-group(root) { animation-duration: 0.13s; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.13s; }

:root, [data-theme="classic"] {
  /* --- app-shell --- */
  --app-bg: #312e2b;
  --app-gradient: linear-gradient(180deg, #3a3632 0%, #272522 100%);
  --card-hero: linear-gradient(135deg, #495360 0%, #3d3d3d 55%, #2f2c29 100%);
  --card-1: linear-gradient(135deg, #3d3d3d 0%, #2b2927 100%);
  --card-2: linear-gradient(135deg, #35322e 0%, #272522 100%);
  --surface-circle: linear-gradient(180deg, #3d3d3d 0%, #292725 100%);
  --nav-bg: rgba(39, 37, 34, 0.85);
  --accent-glow: rgba(129, 182, 76, 0.35);
  --btn-action-bg: linear-gradient(180deg, #8fbf56 0%, #81b64c 60%, #6f9c3f 100%);
  --btn-action-color: #ffffff;
  --btn-action-shadow: 0 8px 22px rgba(129, 182, 76, 0.45);
  --icon-glow: #9ccf63;
  --illu-opacity: 0.22;
  /* --- player --- */
  --bg: #272522; --bg2: #2f2c29; --card: #3d3d3d; --card2: #495360; --sec: #2f2c29;
  --accent2: #81B64C; --ok: #2ECC71; --err: #D32F2F; --teal: #3DB88F;
  --muted: #8F9CAE; --ice: #CBDCE6; --danger: #D32F2F;
  --page-bg: #312e2b; --header-bg: #272522; --panel: #3d3d3d; --panel-2: #495360;
  --panel-2-hi: #566271; --panel-3: #53869d; --panel-4: #3a4a63; --panel-5: #2f2c29;
  --sec-bg: #2f2c29; --row-border: #5a524a; --sec-border: #5a524a;
  --sheet-bg: #2a2928; --sheet-note: #aaa9a8;
  --hover: hsla(0,0%,100%,.06); --hover-strong: hsla(0,0%,100%,.11);
  --divider: rgba(255,255,255,.06); --divider-strong: rgba(255,255,255,.12);
  --ok-text: #a8f0c8; --err-text: #ffb3b3; --chk-stroke: #cdcdcd; --flbl: #f7f8f9; --filter-hover: #D7E2EE;
  --crumb: hsla(0,0%,100%,.87); --crumb-dim: hsla(0,0%,100%,.54); --knob: #fff; --chk-checked: #53869d;
  /* --- shared --- */
  --border: rgba(255,255,255,0.1); --border-bright: rgba(255,255,255,0.18);
  --text: #ffffff; --text-muted: #b5b0aa; --accent: #81B64C;
}

[data-theme="midnight-navy"] {
  /* --- app-shell --- */
  --app-bg: #0d131f;
  --app-gradient: linear-gradient(180deg, #131c2d 0%, #0a0e17 100%);
  --card-hero: linear-gradient(135deg, #1e3a5f 0%, #0f243e 50%, #162f4d 100%);
  --card-1: linear-gradient(135deg, #311c47 0%, #1f1430 100%);
  --card-2: linear-gradient(135deg, #143347 0%, #0e202e 100%);
  --surface-circle: linear-gradient(180deg, #25334d 0%, #172133 100%);
  --nav-bg: rgba(16, 24, 38, 0.85);
  --accent-glow: rgba(56, 189, 248, 0.35);
  --btn-action-bg:
    radial-gradient(155% 155% at 115% -65%, rgba(39, 165, 206, 0) 0%, rgba(39, 165, 206, 0.95) 45%, rgba(39, 165, 206, 0.65) 68%, rgba(39, 165, 206, 0.30) 86%, rgba(39, 165, 206, 0.15) 100%),
    radial-gradient(110% 110% at 40% 62%, rgba(23, 115, 178, 0.95) 0%, rgba(29, 141, 212, 0.85) 35%, rgba(25, 123, 184, 0.40) 70%, rgba(25, 123, 184, 0) 100%),
    #197BB8;
  --btn-action-color: #ffffff;
  --btn-action-shadow: 0 8px 22px rgba(25, 123, 184, 0.45);
  --icon-glow: #60a5fa;
  --illu-opacity: 0.22;
  /* --- player --- */
  --bg: #0B131F; --bg2: #111a28; --card: #162a3c; --card2: #1d3247; --sec: #131c2d;
  --accent2: #F57C00; --ok: #34d399; --err: #f87171; --teal: #22d3ee;
  --muted: #8F9CAE; --ice: #CBDCE6; --danger: #f87171;
  --page-bg: #0a0e17; --header-bg: #131c2d; --panel: #1c2a3f; --panel-2: #24364f;
  --panel-2-hi: #2c4160; --panel-3: #38bdf8; --panel-4: #1f3350; --panel-5: #242b33;
  --sec-bg: #0f161f; --row-border: #4a4f55; --sec-border: #393d42;
  --sheet-bg: #162232; --sheet-note: #8c9cb3;
  --hover: hsla(0,0%,100%,.06); --hover-strong: hsla(0,0%,100%,.11);
  --divider: rgba(255,255,255,.06); --divider-strong: rgba(255,255,255,.12);
  --ok-text: #a7f3d0; --err-text: #fecaca; --chk-stroke: #cdcdcd; --flbl: #f7f8f9; --filter-hover: #D7E2EE;
  --crumb: rgba(240,244,252,.9); --crumb-dim: hsla(0,0%,100%,.54); --knob: #fff; --chk-checked: #53869D;
  /* --- shared --- */
  --border: rgba(255,255,255,0.1); --border-bright: rgba(255,255,255,0.18);
  --text: #f0f4fc; --text-muted: #8c9cb3; --accent: #38bdf8;
}

[data-theme="dark"] {
  /* --- app-shell --- */
  --app-bg: #11100f;
  --app-gradient: linear-gradient(180deg, #1c1a17 0%, #0d0c0b 100%);
  --card-hero: linear-gradient(135deg, #422d1d 0%, #24170d 100%);
  --card-1: linear-gradient(135deg, #362319 0%, #1e130c 100%);
  --card-2: linear-gradient(135deg, #2b251f 0%, #171310 100%);
  --surface-circle: linear-gradient(180deg, #2b2722 0%, #1a1714 100%);
  --nav-bg: rgba(23, 21, 19, 0.85);
  --accent-glow: rgba(216, 164, 127, 0.3);
  --btn-action-bg: #d8a47f;
  --btn-action-color: #ffffff;
  --btn-action-shadow: 0 6px 16px rgba(216, 164, 127, 0.3);
  --icon-glow: #e0ab85;
  --illu-opacity: 0.18;
  /* --- player --- */
  --bg: #11100f; --bg2: #1a1715; --card: #241c14; --card2: #2e241a; --sec: #1c1a17;
  --accent2: #e0b08a; --ok: #6fbf73; --err: #d06a5a; --teal: #7fc9a6;
  --muted: #9c9284; --ice: rgba(255,255,255,.12); --danger: #d06a5a;
  --page-bg: #0d0c0b; --header-bg: #1c1a17; --panel: #2b2420; --panel-2: #3a2f28;
  --panel-2-hi: #463a30; --panel-3: #d8a47f; --panel-4: #36281f; --panel-5: #211c18;
  --sec-bg: #161412; --row-border: rgba(255,255,255,.08); --sec-border: rgba(255,255,255,.08);
  --sheet-bg: #201c18; --sheet-note: #9c9284;
  --hover: rgba(255,255,255,.06); --hover-strong: rgba(255,255,255,.11);
  --divider: rgba(255,255,255,.07); --divider-strong: rgba(255,255,255,.13);
  --ok-text: #bdeec4; --err-text: #f2c4ba; --chk-stroke: #cbb6a2; --flbl: #faf6ef; --filter-hover: #e8d8c4;
  --crumb: rgba(245,240,232,.9); --crumb-dim: rgba(245,240,232,.5); --knob: #fff; --chk-checked: #d8a47f;
  /* --- shared --- */
  --border: rgba(255,255,255,0.08); --border-bright: rgba(255,255,255,0.15);
  --text: #f5f0e8; --text-muted: #9c9284; --accent: #d8a47f;
}

[data-theme="graphite"] {
  /* --- app-shell --- */
  --app-bg: #1c1e22;
  --app-gradient: linear-gradient(180deg, #272a30 0%, #16171a 100%);
  --card-hero: linear-gradient(135deg, #373c46 0%, #22262d 100%);
  --card-1: linear-gradient(135deg, #30343c 0%, #1e2025 100%);
  --card-2: linear-gradient(135deg, #2a2d34 0%, #191a1e 100%);
  --surface-circle: linear-gradient(180deg, #373a42 0%, #23252a 100%);
  --nav-bg: rgba(28, 30, 34, 0.85);
  --accent-glow: rgba(226, 232, 240, 0.25);
  --btn-action-bg: #e2e8f0;
  --btn-action-color: #1c1e22;
  --btn-action-shadow: 0 6px 16px rgba(226, 232, 240, 0.25);
  --icon-glow: #ffffff;
  --illu-opacity: 0.15;
  /* --- player --- */
  --bg: #1c1e22; --bg2: #24262b; --card: #2a2d33; --card2: #33363d; --sec: #202329;
  --accent2: #eef2f7; --ok: #7fbf8a; --err: #d97a6c; --teal: #8fd0c0;
  --muted: #9ba1ad; --ice: rgba(255,255,255,.12); --danger: #d97a6c;
  --page-bg: #16171a; --header-bg: #24262b; --panel: #30333a; --panel-2: #3a3e46;
  --panel-2-hi: #464b54; --panel-3: #e2e8f0; --panel-4: #33373f; --panel-5: #26292f;
  --sec-bg: #1b1d21; --row-border: rgba(255,255,255,.08); --sec-border: rgba(255,255,255,.08);
  --sheet-bg: #26292f; --sheet-note: #9ba1ad;
  --hover: rgba(255,255,255,.06); --hover-strong: rgba(255,255,255,.11);
  --divider: rgba(255,255,255,.07); --divider-strong: rgba(255,255,255,.14);
  --ok-text: #c3eccd; --err-text: #f0c6bc; --chk-stroke: #b6bcc8; --flbl: #f4f5f7; --filter-hover: #e3e7ee;
  --crumb: rgba(243,244,246,.9); --crumb-dim: rgba(243,244,246,.5); --knob: #fff; --chk-checked: #e2e8f0;
  /* --- shared --- */
  --border: rgba(255,255,255,0.09); --border-bright: rgba(255,255,255,0.16);
  --text: #f3f4f6; --text-muted: #9ba1ad; --accent: #e2e8f0;
}

[data-theme="light"] {
  /* --- app-shell --- */
  --app-bg: #ede9e1;
  --app-gradient: linear-gradient(180deg, #f7f5f0 0%, #e5e0d5 100%);
  --card-hero: linear-gradient(135deg, #dfd4c4 0%, #cbbea9 100%);
  --card-1: linear-gradient(135deg, #dbcfc4 0%, #c4b6a9 100%);
  --card-2: linear-gradient(135deg, #d8d4cb 0%, #c0bcaf 100%);
  --surface-circle: linear-gradient(180deg, #ffffff 0%, #e2ded4 100%);
  --nav-bg: rgba(237, 233, 225, 0.9);
  --accent-glow: rgba(139, 84, 44, 0.2);
  --btn-action-bg: #8b542c;
  --btn-action-color: #ffffff;
  --btn-action-shadow: 0 6px 16px rgba(139, 84, 44, 0.2);
  --icon-glow: #8b542c;
  --illu-opacity: 0.14;
  /* --- player --- */
  --bg: #e8e3d9; --bg2: #efeae1; --card: #f2eee5; --card2: #ddd5c6; --sec: #e0dad0;
  --accent2: #7a4a26; --ok: #3f8f5a; --err: #c0392b; --teal: #2e8a83;
  --muted: #787063; --ice: rgba(0,0,0,.16); --danger: #c0392b;
  --page-bg: #e5e0d5; --header-bg: #efeae1; --panel: #ffffff; --panel-2: #e5ded1;
  --panel-2-hi: #d9d0c0; --panel-3: #8b542c; --panel-4: #e0d7c6; --panel-5: #f5f1e8;
  --sec-bg: #e0dacd; --row-border: rgba(0,0,0,.1); --sec-border: rgba(0,0,0,.1);
  --sheet-bg: #f5f1e8; --sheet-note: #787063;
  --hover: rgba(0,0,0,.05); --hover-strong: rgba(0,0,0,.09);
  --divider: rgba(0,0,0,.07); --divider-strong: rgba(0,0,0,.13);
  --ok-text: #1e7a44; --err-text: #a02a1d; --chk-stroke: #6b5f52; --flbl: #332e27; --filter-hover: #554a3d;
  --crumb: rgba(38,34,28,.85); --crumb-dim: rgba(38,34,28,.5); --knob: #fff; --chk-checked: #8b542c;
  /* --- shared --- */
  --border: rgba(0,0,0,0.08); --border-bright: rgba(0,0,0,0.14);
  --text: #26221c; --text-muted: #787063; --accent: #8b542c;
}

[data-theme="clean-linen"] {
  /* --- app-shell --- */
  --app-bg: #e6e4df;
  --app-gradient: linear-gradient(180deg, #f7f6f4 0%, #dedbd4 100%);
  --card-hero: linear-gradient(135deg, #d8d5ce 0%, #bfbcb4 100%);
  --card-1: linear-gradient(135deg, #d4d2cc 0%, #bbb8b0 100%);
  --card-2: linear-gradient(135deg, #d1cfc9 0%, #b8b5ad 100%);
  --surface-circle: linear-gradient(180deg, #ffffff 0%, #dad8d1 100%);
  --nav-bg: rgba(230, 228, 223, 0.9);
  --accent-glow: rgba(24, 24, 27, 0.2);
  --btn-action-bg: #18181b;
  --btn-action-color: #ffffff;
  --btn-action-shadow: 0 6px 16px rgba(24, 24, 27, 0.2);
  --icon-glow: #18181b;
  --illu-opacity: 0.12;
  /* --- player --- */
  --bg: #e2e0da; --bg2: #ebe9e4; --card: #f0eeea; --card2: #d8d5ce; --sec: #dcdad3;
  --accent2: #2c2c31; --ok: #3d8f5c; --err: #b5372c; --teal: #2f8a86;
  --muted: #52525b; --ice: rgba(0,0,0,.16); --danger: #b5372c;
  --page-bg: #dedbd4; --header-bg: #ebe9e4; --panel: #ffffff; --panel-2: #e0ddd6;
  --panel-2-hi: #d3d0c8; --panel-3: #18181b; --panel-4: #dcd9d2; --panel-5: #f2f0ec;
  --sec-bg: #dcd9d2; --row-border: rgba(0,0,0,.1); --sec-border: rgba(0,0,0,.1);
  --sheet-bg: #f2f0ec; --sheet-note: #52525b;
  --hover: rgba(0,0,0,.05); --hover-strong: rgba(0,0,0,.09);
  --divider: rgba(0,0,0,.07); --divider-strong: rgba(0,0,0,.13);
  --ok-text: #1e6f41; --err-text: #942b21; --chk-stroke: #5a5a63; --flbl: #1f1f23; --filter-hover: #3a3a41;
  --crumb: rgba(24,24,27,.85); --crumb-dim: rgba(24,24,27,.5); --knob: #fff; --chk-checked: #18181b;
  /* --- shared --- */
  --border: rgba(0,0,0,0.09); --border-bright: rgba(0,0,0,0.15);
  --text: #18181b; --text-muted: #52525b; --accent: #18181b;
}

/* =========================================================
   SHARED FLOATING BOTTOM NAV (single source for every page).
   Auto-hides after 6s on content pages and slides back on
   scroll-up; homepage + menu opt out with data-no-autohide
   so they stay pinned. Default tap highlight is suppressed.
   ========================================================= */
.floating-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  width: max-content;
  margin: 0 auto;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: 32px;
  padding: 0.4rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  /* Chrome-Android workaround: a fixed element that has a 3D transform is
     composited and does NOT jump when the address bar hides/shows on a fresh
     page load (chromium bug 41395555). Without this, the bar shifts by the
     address-bar height for a frame or two on every navigation. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.floating-nav.nav-hidden {
  transform: translate3d(0, calc(100% + 2rem), 0);
  opacity: 0;
  pointer-events: none;
}

.nav-btn {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 50%;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nav-btn.active {
  background: var(--surface-circle);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.nav-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* No square focus/ripple ring on tap; round ring only for keyboard users. */
.nav-btn:focus { outline: none; }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }