/* The looks: Night Arcade (the default), Grandmaster's Club and Sunny Pop, picked with the Look setting (settings.js) and
   put on <html> as data-look by look.js before the page draws. Every page loads this first, then its own styles,
   which use only the tokens below. To add a look: a token block like these, its flourishes, and an entry in LOOKS
   in settings.js and look.js.

   The fonts are self-hosted (the Content Security Policy loads nothing from other sites), all under the SIL Open
   Font License (static/fonts/*-OFL.txt): Latin and Latin Extended, variable weights. A page downloads only those
   its look uses. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/inter-latin-ext.1ad231aac0a8.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/inter-latin.260c81a4759b.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/space-grotesk-latin-ext.0bb2ef2eda4e.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/space-grotesk-latin.87c506d88b9f.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/fraunces-latin-ext.a04d353989ad.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/fraunces-latin.069cb90e11a3.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/source-sans-3-latin-ext.c6ba61588d7d.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/source-sans-3-latin.9ef356ea553a.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500 700; font-stretch: 100%; font-display: swap; src: url("fonts/fredoka-latin-ext.d3c5911bfd9a.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500 700; font-stretch: 100%; font-display: swap; src: url("fonts/fredoka-latin.9591efe1be62.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/nunito-latin-ext.ffdc8b0c86fb.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/nunito-latin.166202cc391c.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- text size ----------
   Every page sizes its text in rem, and 1rem is 16px at the normal Text size (so 0.875rem is 14px). The Text size
   setting (settings.js) scales them all, through data-text on <html> (look.js); a big screen adds a little more, so the
   text keeps pace with a big board. 100% keeps the browser's own font size setting. */
:root { --text-scale: 1; --screen-scale: 1; font-size: calc(100% * var(--text-scale) * var(--screen-scale)); }
:root[data-text="small"] { --text-scale: 0.9; }
:root[data-text="large"] { --text-scale: 1.125; }
:root[data-text="larger"] { --text-scale: 1.25; }
@media (min-width: 1600px) and (min-height: 940px) { :root { --screen-scale: 1.0625; } }

/* ---------- the tokens every page draws with ----------
   Night Arcade is the default (no data-look, or data-look="arcade"). Each look sets every token: colours for
   chess (win, loss, the stages, the board), surfaces (cards, controls, the main button), the header and type.
   style.css and the other pages use only these, so a new page looks right in every look. A look's own
   flourishes, the few things only it has, follow its tokens. */
:root, :root[data-look="arcade"] {
  color-scheme: dark;
  /* colour */
  --bg: #090c1b;
  --bg-art: radial-gradient(1100px 620px at 8% -12%, rgba(168, 85, 247, 0.30), transparent 62%),
    radial-gradient(900px 600px at 98% -4%, rgba(34, 211, 238, 0.20), transparent 60%),
    radial-gradient(900px 520px at 50% 115%, rgba(52, 211, 153, 0.10), transparent 60%);
  --panel: #11162e; --panel-2: #161c3a;
  --text: #eef1ff; --muted: #8f98c6; --line: #262d58;
  --accent: #22d3ee; --accent-2: #a855f7; --on-accent: #07091a;
  --win: #34d399; --loss: #fb7185; --c1: #fbbf24; --c2: #fb923c; --c3: #f43f5e; --info: #60a5fa;
  --last: rgba(34, 211, 238, 0.42); --sel: rgba(168, 85, 247, 0.6); --good: rgba(52, 211, 153, 0.6); --bad: rgba(251, 113, 133, 0.6);
  --sq-light: #dfe4fb; --sq-dark: #6b76bd;  /* the look's own board; the Board setting may choose another */
  /* a look may draw its board as art instead (Grandmaster's Club's inlaid wood, Sunny Pop's tiles): --board-art is
     drawn under the squares, which --sq-light-fill and --sq-dark-fill then leave clear or draw themselves (when unset,
     the squares are --sq-light and --sq-dark), and --board-frame-art under a see-through frame. --sq-mark-inset and
     --sq-mark-radius shape a marked square (the last move, the one picked up) to fit a tile. The Board setting's
     colours (settings.js) set the art aside. --land-bounce: 1 squashes a piece as it lands, like a toy's (board.js). */
  --board-art: none; --board-frame-art: none; --land-bounce: 0;
  /* arrows and circles on the board (style.css .tone-*): best move, the move played, your answer, your own (and with
     shift), and a lesson's warn and guard; how solid they are, and the shadow lifting them off any board colour */
  --arrow-best: #19d38f; --arrow-played: #ff4f7b; --arrow-answer: #4aa8ff; --arrow-mine: #ffa928; --arrow-alt: #b77cff;
  --arrow-warn: #fbbf24; --arrow-guard: #22d3ee; --arrow-alpha: 0.85; --arrow-shade: 0.4;
  --glow: 1;  /* how much things glow: 0 for none */
  /* type */
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  --text-size: 1rem; --text-weight: 400; --display-weight: 700;
  /* surfaces */
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --card-solid: #11162e;
  --card-line: rgba(124, 140, 255, 0.18);
  --card-radius: 16px;
  --card-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --card-blur: blur(8px);
  --ctl-bg: rgba(255, 255, 255, 0.05); --ctl-line: rgba(124, 140, 255, 0.24); --ctl-radius: 10px; --ctl-depth: 1px; --ctl-weight: 600;
  --ctl-hover: 0 0 0 3px rgba(34, 211, 238, 0.14), 0 0 18px rgba(34, 211, 238, 0.18);
  --primary-bg: linear-gradient(135deg, #22d3ee, #8b5cf6 70%, #a855f7); --primary-fg: #07091a; --primary-line: transparent;
  --primary-shadow: 0 8px 24px rgba(139, 92, 246, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.35); --primary-depth: 1px;
  --header-bg: rgba(9, 12, 27, 0.62); --header-line: rgba(124, 140, 255, 0.16); --header-shadow: none; --header-blur: blur(16px);
  --nav-radius: 999px; --nav-active-bg: linear-gradient(90deg, rgba(34, 211, 238, 0.22), rgba(168, 85, 247, 0.30));
  --nav-active-fg: #fff; --nav-active-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.5), 0 0 22px rgba(168, 85, 247, 0.28); --nav-active-line: transparent;
  --board-frame: 0 solid transparent; --board-radius: 14px;
  --board-shadow: 0 0 0 1px rgba(160, 170, 255, 0.35), 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 80px rgba(124, 58, 237, 0.28);
  --bar-track: rgba(255, 255, 255, 0.07); --bar-height: 10px;
  /* charts: a colour per time control (stats.js) */
  --s-rapid: #0b9fbd; --s-blitz: #c98200; --s-classical: #8a6cf2; --s-daily: #db4f97; --s-bullet: #3d7ff2;
  /* the moving background (backdrop.js): its scene (fluid or library), three colours the fluid gathers into over --bg,
     its ribbons' colour, and how strong the colours, the ribbons and the darkened edges are (0-1), and how fast it
     flows (1 = the norm). The library reads them its own way (backdrop.js says how). */
  --backdrop-scene: fluid;
  --fluid-1: #5b21b6; --fluid-2: #0e7490; --fluid-3: #065f46; --fluid-ribbon: #67e8f9;
  --fluid-strength: 0.62; --fluid-ribbons: 0.3; --fluid-edges: 0.7; --fluid-speed: 1;
}

:root[data-look="club"] {
  color-scheme: dark;
  /* the library's ground, and the library standing still (the moving one is backdrop.js's): the lamp's light from
     above, the fire's from the lower right, dark corners, mahogany planks and the books on them */
  --bg: #110c09;
  --bg-art: radial-gradient(1000px 560px at 50% -10%, rgba(255, 207, 143, 0.13), transparent 70%),
    radial-gradient(700px 520px at 104% 112%, rgba(255, 122, 48, 0.12), transparent 70%),
    radial-gradient(1500px 1000px at 50% 58%, transparent 40%, rgba(0, 0, 0, 0.65)),
    repeating-linear-gradient(180deg, rgba(64, 34, 17, 0.75) 0, rgba(30, 16, 8, 0.85) 2.6vh, rgba(8, 5, 3, 0.9) 2.6vh,
      rgba(8, 5, 3, 0.6) 7vh, transparent 11vh 31vh),
    repeating-linear-gradient(90deg, rgba(92, 22, 18, 0.13) 0 30px, rgba(0, 0, 0, 0.25) 30px 32px, rgba(22, 54, 35, 0.13) 32px 52px,
      rgba(0, 0, 0, 0.25) 52px 54px, rgba(112, 74, 38, 0.11) 54px 92px, rgba(0, 0, 0, 0.25) 92px 94px, rgba(24, 30, 62, 0.15) 94px 120px,
      rgba(0, 0, 0, 0.25) 120px 122px, rgba(66, 33, 16, 0.12) 122px 166px, rgba(0, 0, 0, 0.25) 166px 168px,
      rgba(92, 22, 18, 0.11) 168px 192px, rgba(0, 0, 0, 0.3) 192px 212px, rgba(22, 54, 35, 0.11) 212px 248px, rgba(0, 0, 0, 0.25) 248px 250px);
  --panel: #12271e; --panel-2: #173326;
  --text: #f5edd8; --muted: #a7b6a2; --line: #2b4637;
  --accent: #e4b445; --accent-2: #8ec6ef; --on-accent: #231904;
  --win: #82e09b; --loss: #f2856d; --c1: #ebc35e; --c2: #f09a5c; --c3: #ef6b5b; --info: #8ec6ef;
  --last: rgba(228, 180, 69, 0.48); --sel: rgba(120, 170, 255, 0.5); --good: rgba(80, 190, 110, 0.62); --bad: rgba(220, 90, 70, 0.6);
  /* an inlaid board, maple and walnut (looks/club-board.webp, drawn by tools/woodboard.py), lacquered: the banker's
     lamp catches it at the top and its corners fall into shadow. Flat, the woods' own colours (the coordinates, the
     eval bar, a board resting under a card) */
  --sq-light: #eddab3; --sq-dark: #97613a;
  --board-art: radial-gradient(85% 55% at 50% -8%, rgba(255, 230, 175, 0.24), transparent 70%) padding-box,
    radial-gradient(140% 120% at 50% 35%, transparent 58%, rgba(36, 18, 6, 0.32)) padding-box,
    url("looks/club-board.74a520a08966.webp") center / 100% 100% no-repeat padding-box;
  --sq-light-fill: transparent; --sq-dark-fill: transparent;
  --board-frame-art: url("looks/club-frame.4301e1e6d3e5.webp") center / 512px 256px border-box #3a2718;
  --arrow-best: #2c8f52; --arrow-played: #b3262f; --arrow-answer: #3577b8; --arrow-mine: #f0b43a; --arrow-alt: #8a5cc0;
  --arrow-warn: #d9762b; --arrow-guard: #23847d; --arrow-alpha: 0.85; --arrow-shade: 0.4;
  --glow: 0;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --text-size: 1.0625rem; --text-weight: 400; --display-weight: 700;
  --card-bg: linear-gradient(180deg, #16301f 0%, #112419 100%);
  --card-solid: #112419;
  --card-line: rgba(228, 180, 69, 0.24);
  --card-radius: 12px;
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 32px rgba(0, 0, 0, 0.38);
  --card-blur: none;
  --ctl-bg: rgba(0, 0, 0, 0.22); --ctl-line: rgba(228, 180, 69, 0.30); --ctl-radius: 8px; --ctl-depth: 1px; --ctl-weight: 600;
  --ctl-hover: 0 0 0 3px rgba(228, 180, 69, 0.16);
  --primary-bg: linear-gradient(180deg, #f6d677, #d4a136 55%, #b8841f); --primary-fg: #231904; --primary-line: #f7df95;
  --primary-shadow: 0 6px 18px rgba(228, 180, 69, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5); --primary-depth: 1px;
  --header-bg: linear-gradient(180deg, #102a20, #0c1d16); --header-line: rgba(228, 180, 69, 0.35);
  --header-shadow: 0 1px 0 rgba(228, 180, 69, 0.12), 0 12px 30px rgba(0, 0, 0, 0.35); --header-blur: none;
  --nav-radius: 0; --nav-active-bg: none; --nav-active-fg: #e4b445; --nav-active-shadow: none; --nav-active-line: #e4b445;
  --board-frame: 11px solid transparent; --board-radius: 5px;  /* walnut (--board-frame-art), with a gold inlay */
  --board-shadow: 0 0 0 1px rgba(228, 180, 69, 0.55), inset 0 0 0 1px rgba(228, 180, 69, 0.45), 0 28px 70px rgba(0, 0, 0, 0.65);
  --bar-track: rgba(0, 0, 0, 0.3); --bar-height: 9px;
  --s-rapid: #b8891f; --s-blitz: #3797c4; --s-classical: #d0623f; --s-daily: #9278d4; --s-bullet: #26a08f;
  /* the library: books in the dark under a banker's lamp (its warm light, the green of its shade), the glow of a
     fire, and gold dust in the air */
  --backdrop-scene: library;
  --fluid-1: #ffcf8f; --fluid-2: #2f9c5e; --fluid-3: #ff7a30; --fluid-ribbon: #ffd27a;
  --fluid-strength: 0.7; --fluid-ribbons: 0.8; --fluid-edges: 0.85; --fluid-speed: 0.6;
}

:root[data-look="pop"] {
  color-scheme: light;
  /* a sunny day: the ground, and the sky standing still (the moving one is backdrop.js's): the sun in the top left
     corner with its rays, and the sky deepening upwards */
  --bg: #fff8f0;
  --bg-art: radial-gradient(circle at 10% 0%, #fff3c4 0 70px, rgba(255, 211, 107, 0.55) 72px, transparent 340px),
    repeating-conic-gradient(from 0deg at 10% 0%, rgba(255, 255, 255, 0.35) 0 9deg, transparent 9deg 32.7deg),
    linear-gradient(0deg, #fff8f0 5%, #e3efff 100%);
  --panel: #ffffff; --panel-2: #fffdfa;
  --text: #2c2346; --muted: #776d93; --line: #efe2d4;
  --accent: #7c3aed; --accent-2: #0284c7; --on-accent: #ffffff;
  --win: #16a34a; --loss: #e11d48; --c1: #d18f00; --c2: #f97316; --c3: #e11d48; --info: #0284c7;
  --last: rgba(250, 204, 21, 0.6); --sel: rgba(124, 58, 237, 0.45); --good: rgba(34, 197, 94, 0.6); --bad: rgba(244, 63, 94, 0.55);
  /* chunky game tiles (looks/pop-tile-*.svg), each with a lip under it and a shine on top, set in a cream tray, and
     a piece lands with a squash */
  --sq-light: #f4f8e4; --sq-dark: #72b86a;
  --board-art: linear-gradient(180deg, #efe6d6, #e2d5c0);
  --sq-light-fill: url("looks/pop-tile-light.46b52e68724b.svg") center / 100% 100% no-repeat;
  --sq-dark-fill: url("looks/pop-tile-dark.0ae5dc2e8d14.svg") center / 100% 100% no-repeat;
  --sq-mark-inset: 2.5% 2.5% 9% 2.5%; --sq-mark-radius: 14%;
  --land-bounce: 1;
  --arrow-best: #0a8a4a; --arrow-played: #ec2f5b; --arrow-answer: #1a8fe0; --arrow-mine: #ff7a1a; --arrow-alt: #8b45f0;
  --arrow-warn: #e0a100; --arrow-guard: #0fa5b5; --arrow-alpha: 0.85; --arrow-shade: 0.25;
  --glow: 0;
  --font-body: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Fredoka, Nunito, system-ui, sans-serif;
  --text-size: 1rem; --text-weight: 600; --display-weight: 700;
  --card-bg: #ffffff;
  --card-solid: #ffffff;
  --card-line: #f0e4d7;
  --card-radius: 22px;
  --card-shadow: 0 6px 0 #f0e4d7, 0 18px 36px rgba(124, 58, 237, 0.07);
  --card-blur: none;
  --ctl-bg: #ffffff; --ctl-line: #eadfd2; --ctl-radius: 14px; --ctl-depth: 4px; --ctl-weight: 700;
  --ctl-hover: none;
  --primary-bg: #22c55e; --primary-fg: #ffffff; --primary-line: #16a34a; --primary-shadow: none; --primary-depth: 5px;
  --header-bg: rgba(255, 255, 255, 0.85); --header-line: transparent; --header-shadow: 0 4px 0 #f0e4d7; --header-blur: blur(10px);
  --nav-radius: 999px; --nav-active-bg: #7c3aed; --nav-active-fg: #ffffff; --nav-active-shadow: 0 3px 0 #5b21b6; --nav-active-line: transparent;
  --board-frame: 0 solid transparent; --board-radius: 20px;
  --board-shadow: 0 9px 0 #d6c6b5, 0 26px 50px rgba(124, 58, 237, 0.16);
  --bar-track: #f1e7dc; --bar-height: 14px;
  --s-rapid: #7c3aed; --s-blitz: #ea6a0c; --s-classical: #0284c7; --s-daily: #d6286f; --s-bullet: #c99400;
  /* a sunny sky: the sun's yellow, the sky's blue, pink pop-art dots, and soap bubbles that burst at every move */
  --backdrop-scene: sunny;
  --fluid-1: #ffd36b; --fluid-2: #cfe6ff; --fluid-3: #ffcde0; --fluid-ribbon: #ffe7f3;
  --fluid-strength: 0.85; --fluid-ribbons: 0.4; --fluid-edges: 0.45; --fluid-speed: 0.8;
}

/* ---------- Night Arcade's own: a gradient name, and a glow on whatever just happened ---------- */
[data-look="arcade"] h1 {
  background: linear-gradient(90deg, #67e8f9, #a855f7 55%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-look="arcade"] h1 .mark { box-shadow: 0 0 16px rgba(168, 85, 247, 0.6); }
[data-look="arcade"] .pbar .mastered { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 14px rgba(52, 211, 153, 0.7); }
[data-look="arcade"] .pbar .novice { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 12px rgba(251, 191, 36, 0.55); }
[data-look="arcade"] .pbar .blunder { background: linear-gradient(90deg, #f43f5e, #fb7185); box-shadow: 0 0 12px rgba(251, 113, 133, 0.6); }
[data-look="arcade"] .ring .fill { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.8)); }
[data-look="arcade"] .level-text .drill-num { color: var(--accent); text-shadow: 0 0 14px rgba(34, 211, 238, 0.6); }
[data-look="arcade"] .dgame-moves .lm.you { text-shadow: 0 0 10px rgba(34, 211, 238, 0.7); }
[data-look="arcade"] .dgame-moves .lm.last, [data-look="arcade"] .dgame-moves .lm.now { background: rgba(34, 211, 238, 0.22); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.5); }
[data-look="arcade"] .streak.run.t2, [data-look="arcade"] .streak.run.t3, [data-look="arcade"] .streak.run.t4 { box-shadow: 0 0 16px rgba(251, 146, 60, 0.35); }

/* ---------- Grandmaster's Club's own: a gilded name, serif column heads, a gold medallion ---------- */
[data-look="club"] h1 { color: var(--accent); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 24px rgba(228, 180, 69, 0.25); }
[data-look="club"] nav a { letter-spacing: 0.02em; }
[data-look="club"] th { color: var(--accent); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
[data-look="club"] .pbar { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
[data-look="club"] .pbar .mastered { background: linear-gradient(180deg, #a3f0b6, #5cc27a); }
[data-look="club"] .pbar .novice { background: linear-gradient(180deg, #f7da8a, #d4a136); }
[data-look="club"] .pbar .blunder { background: linear-gradient(180deg, #f7a08c, #d9604a); }
[data-look="club"] .level-text b { color: var(--accent); }
[data-look="club"] .level-text .drill-num { color: var(--info); }
[data-look="club"] .ruler .mark.you span { background: var(--accent); color: var(--on-accent); }
[data-look="club"] .ruler .mark.you::after { border-top-color: var(--accent); }
[data-look="club"] .dgame-moves .lm.last, [data-look="club"] .dgame-moves .lm.now { background: rgba(228, 180, 69, 0.28); }
[data-look="club"] .badge-big { background: radial-gradient(circle at 35% 30%, #f7e2a0, #c99327 70%); box-shadow: 0 6px 18px rgba(228, 180, 69, 0.35); }
[data-look="club"] .badge-big .cup { fill: #3a2718; }
[data-look="club"] #d-next, [data-look="club"] .primary, [data-look="club"] .button-link { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

/* the verdict and its mark glow in Night Arcade */
[data-look="arcade"] .verdict { text-shadow: 0 0 22px color-mix(in srgb, var(--verdict) 70%, transparent); }
[data-look="arcade"] .verdict .vmark { box-shadow: 0 0 24px color-mix(in srgb, var(--verdict) 75%, transparent); }
[data-look="arcade"] .note[class*="v-"] { box-shadow: var(--card-shadow), -8px 0 30px -12px var(--verdict); }
[data-look="arcade"] .plan-note { border-left-color: var(--accent-2); }
[data-look="pop"] button:active, [data-look="pop"] .button-link:active { transform: translateY(2px); border-bottom-width: 2px; }
[data-look="pop"] button:disabled:active { transform: none; border-bottom-width: var(--ctl-depth); }
[data-look="pop"] .ldot, [data-look="pop"] .ldot:active { border-width: 2px; transform: none; }
[data-look="arcade"] .pill.W { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.5), 0 0 12px rgba(52, 211, 153, 0.22); }

/* ---------- Sunny Pop's own: chunky, pressable, and round ---------- */
[data-look="pop"] h1 { color: var(--accent); }
[data-look="pop"] .note[class*="v-"] { border: 2px solid color-mix(in srgb, var(--verdict) 45%, #f0e4d7); box-shadow: 0 6px 0 color-mix(in srgb, var(--verdict) 35%, #f0e4d7); }
[data-look="pop"] .plan-note { background: #f5efff; border-color: #e4d6ff; box-shadow: 0 5px 0 #e4d6ff; color: #5b4b84; }
[data-look="pop"] .pbar { padding: 3px; box-sizing: content-box; }
[data-look="pop"] .pbar .mastered { background: #22c55e; }
[data-look="pop"] .pbar .junior, [data-look="pop"] .legend .junior { background: #86efac; opacity: 1; }
[data-look="pop"] .pbar .novice { background: #facc15; }
[data-look="pop"] .pbar .blunder { background: #fb7185; }
[data-look="pop"] .verdict .vmark { min-width: 44px; height: 44px; border-radius: 16px; box-shadow: 0 4px 0 color-mix(in srgb, var(--verdict) 70%, #000); }
[data-look="pop"] .level-text .drill-num { color: var(--info); }
[data-look="pop"] .ruler .track { height: 10px; top: 26px; opacity: 1; background: linear-gradient(90deg, #22c55e, #facc15 50%, #fb7185); }
[data-look="pop"] .ruler .mark.you span { background: var(--accent); }
[data-look="pop"] .ruler .mark.you::after { border-top-color: var(--accent); }
[data-look="pop"] .dgame-moves .lm.last, [data-look="pop"] .dgame-moves .lm.now { background: #fde68a; }
[data-look="pop"] .ring circle { stroke-width: 12; }
[data-look="pop"] .waitcard .tip { background: #f5efff; }
[data-look="pop"] th { font-weight: 800; }
/* the coordinates sit on the tiles, clear of their rounded corners and their lips */
[data-look="pop"] .sq .coord.rank { left: 9%; top: 7%; }
[data-look="pop"] .sq .coord.file { right: 9%; bottom: 12%; }
[data-look="pop"] th, [data-look="pop"] td { border-bottom-width: 2px; }