/* 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 */
  /* 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): 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) */
  --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;
  --bg: #0b1914;
  --bg-art: radial-gradient(1300px 700px at 50% -22%, rgba(228, 180, 69, 0.14), transparent 62%),
    radial-gradient(1200px 900px at 50% 125%, rgba(0, 0, 0, 0.55), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.013) 0 2px, transparent 2px 6px);
  --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);
  --sq-light: #f0ddb9; --sq-dark: #a7764d;
  --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: 10px solid #3a2718; --board-radius: 6px;  /* walnut, 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;
  /* felt and lamplight: slow, deep, a thread of gold */
  --fluid-1: #1c4a35; --fluid-2: #4a3b16; --fluid-3: #10342a; --fluid-ribbon: #e4b445;
  --fluid-strength: 0.7; --fluid-ribbons: 0.1; --fluid-edges: 0.8; --fluid-speed: 0.55;
}

:root[data-look="pop"] {
  color-scheme: light;
  --bg: #fff8f0;
  --bg-art: radial-gradient(620px 420px at 2% 0%, #ffdcc6, transparent 70%),
    radial-gradient(720px 520px at 100% 8%, #e8dbff, transparent 70%),
    radial-gradient(760px 520px at 45% 105%, #d3f4e6, transparent 70%);
  --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);
  --sq-light: #f4f8e4; --sq-dark: #72b86a;
  --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;
  /* sherbet: peach, lavender and mint with a white sheen, no dark edges */
  --fluid-1: #ffcdb5; --fluid-2: #e0cfff; --fluid-3: #c3efd9; --fluid-ribbon: #ffffff;
  --fluid-strength: 0.85; --fluid-ribbons: 0.45; --fluid-edges: 0; --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; }
[data-look="pop"] th, [data-look="pop"] td { border-bottom-width: 2px; }