/* PIXEL SKIN (preview) — "Skyline Blocks" (design/06 §2-3, samples style A). Opt-in only: html[data-skin="pixel"].
   Set by ?skin=pixel (persisted, ?skin=glass resets) or Settings → Look. Default (glass) look is untouched.
   Files: pixel.css (tokens, page, sky, resets) · pixel-ui.css (components) · pixel-screens.css (per screen).
   Pixel unit = 3 CSS px: frames 3px, stair-step corners 3px, hard drop 6px (3 visible), press 2px. No blur, no glow. */

/* ---------- tokens: light (also read by tools/contrast.mjs) ---------- */
:root[data-skin="pixel"] {
  --bp-bg: #A8D9FF;
  --bp-bg-wash: none;
  --bp-aura-1: #6EC0FF;
  --bp-aura-2: #B3DEFF;
  --bp-aura-3: #DCF0FF;
  --bp-paper: #FFFFFF;
  --bp-paper-2: #EEF6FF;
  --bp-line: rgba(22,54,95,.16);
  --bp-line-strong: #5A7298;
  --bp-on-primary: #FFFFFF;
  --bp-lite: #FFFFFF;
  --bp-lite-line: #16365F;
  --bp-glass2: #FFFFFF;
  --bp-glass3: #FFFFFF;
  --bp-glass-menu: #FFFFFF;
  --bp-glass-line: #16365F;
  --bp-spec: 0 0 0 0 transparent;
  --bp-gloss: none;
  --bp-glass-solid: #FFFFFF;
  --bp-track: #D6E6F8;
  --bp-field: #FFFFFF;
  --bp-ink: #10233F;
  --bp-ink-2: #33425F;
  --bp-ink-3: #3E4E70;
  --bp-tint: #13519F;
  --bp-tint-ink: #0F3F86;
  --bp-tint-soft: #DDEBFF;
  --bp-primary: #1A66D9;
  --bp-focus: #0B1626;
  --bp-field-line: #5A7298;
  --bp-pos: #155C38;
  --bp-pos-soft: #DDF4E5;
  --bp-neg: #A01F15;
  --bp-neg-soft: #FDE6E3;
  --bp-warn: #7A4500;
  --bp-warn-soft: #FFF0CC;
  --bp-info: #0F3F86;
  --bp-info-soft: #DDEBFF;
  --bp-neu: #33425F;
  --bp-neu-soft: #EEF6FF;
  --bp-shadow-1: 0 4px 0 0 rgba(22,54,95,.22);
  --bp-shadow-2: 0 6px 0 0 rgba(22,54,95,.25);
  --bp-glow: 0 0 0 0 transparent;
  --lg-separator: rgba(22,54,95,.16);
  --lg-tint-fill: #1A66D9;
  --bp-r-card: 0px; --bp-r-tile: 0px; --bp-r-inner: 0px; --bp-r-badge: 0px;
  --lg-radius-xs: 0px; --lg-radius-sm: 0px; --lg-radius-md: 0px; --lg-radius-lg: 0px; --lg-radius-xl: 0px; --lg-radius-pill: 0px;
  --gm-chip: #FFFFFF; --gm-chip-ink: #10233F; --gm-chip-line: #16365F; --gm-seg: rgba(22,54,95,.16);
  --comp-edge: #16365F;
  /* pixel-only tokens */
  --px-display: "Pixelify Sans", ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* big titles only */
  --px-font: var(--lg-font);   /* everything else, numbers included: readable */
  --px-line: #16365F;      /* chunky frame */
  --px-line-2: #6B84AD;    /* study-layer frame (quieter) */
  --px-drop: rgba(11,22,38,.24);
  --px-hi: #FFFFFF;
  --px-lo: #D6E6F8;        /* bottom bevel */
  --px-pri-edge: #0B3A80; --px-pri-lo: #0F4AA8; --px-pri-hi: #4C8EEB;
  --px-bar: #1A66D9; --px-bar-edge: #0B3A80; --px-bar-ink: #FFFFFF;
  --px-sky: linear-gradient(180deg,#A8D9FF 0 14%,#B3DEFF 14% 30%,#C2E5FF 30% 48%,#D2ECFF 48% 68%,#E2F3FF 68% 86%,#EEF8FF 86%);
  --px-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' width='480' height='360' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='14' y='12' width='8' height='2'/%3E%3Crect x='11' y='14' width='16' height='2'/%3E%3Crect x='8' y='16' width='26' height='3'/%3E%3Crect x='76' y='40' width='6' height='2'/%3E%3Crect x='72' y='42' width='14' height='2'/%3E%3Crect x='70' y='44' width='20' height='2'/%3E%3Crect x='46' y='70' width='10' height='2'/%3E%3Crect x='42' y='72' width='20' height='2'/%3E%3C/g%3E%3Cg fill='%23D2E9FF'%3E%3Crect x='8' y='19' width='26' height='1'/%3E%3Crect x='70' y='46' width='20' height='1'/%3E%3Crect x='42' y='74' width='20' height='1'/%3E%3C/g%3E%3C/svg%3E");
  --px-grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' width='48' height='24' shape-rendering='crispEdges'%3E%3Crect y='4' width='16' height='4' fill='%23B5532E'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%237A2E2A'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%237A2E2A'/%3E%3Crect y='1' width='16' height='3' fill='%2340A85A'/%3E%3Crect y='1' width='16' height='1' fill='%23B7F34A'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%23B7F34A'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%23B7F34A'/%3E%3Crect x='12' y='0' width='1' height='1' fill='%23B7F34A'/%3E%3Crect x='5' y='3' width='2' height='1' fill='%232F6B3A'/%3E%3Crect x='13' y='3' width='1' height='2' fill='%232F6B3A'/%3E%3C/svg%3E");
  --px-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='7' y='0' width='2' height='1' fill='%2316365F'/%3E%3Crect x='5' y='1' width='2' height='1' fill='%2316365F'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%23EAF4FF'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23A9D6FF'/%3E%3Crect x='9' y='1' width='2' height='1' fill='%2316365F'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%2316365F'/%3E%3Crect x='5' y='2' width='2' height='1' fill='%23EAF4FF'/%3E%3Crect x='7' y='2' width='4' height='1' fill='%23A9D6FF'/%3E%3Crect x='11' y='2' width='2' height='1' fill='%2316365F'/%3E%3Crect x='1' y='3' width='2' height='1' fill='%2316365F'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%23EAF4FF'/%3E%3Crect x='5' y='3' width='8' height='1' fill='%23A9D6FF'/%3E%3Crect x='13' y='3' width='2' height='1' fill='%2316365F'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='4' width='2' height='1' fill='%23EAF4FF'/%3E%3Crect x='3' y='4' width='12' height='1' fill='%23A9D6FF'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%2316365F'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%236AB6FF'/%3E%3Crect x='3' y='5' width='10' height='1' fill='%23A9D6FF'/%3E%3Crect x='13' y='5' width='2' height='1' fill='%236AB6FF'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%2316365F'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='6' width='2' height='1' fill='%232272E6'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%236AB6FF'/%3E%3Crect x='5' y='6' width='6' height='1' fill='%23A9D6FF'/%3E%3Crect x='11' y='6' width='2' height='1' fill='%236AB6FF'/%3E%3Crect x='13' y='6' width='2' height='1' fill='%231749A8'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%2316365F'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='7' width='4' height='1' fill='%232272E6'/%3E%3Crect x='5' y='7' width='2' height='1' fill='%236AB6FF'/%3E%3Crect x='7' y='7' width='2' height='1' fill='%23A9D6FF'/%3E%3Crect x='9' y='7' width='2' height='1' fill='%236AB6FF'/%3E%3Crect x='11' y='7' width='4' height='1' fill='%231749A8'/%3E%3Crect x='15' y='7' width='1' height='1' fill='%2316365F'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='8' width='6' height='1' fill='%232272E6'/%3E%3Crect x='7' y='8' width='2' height='1' fill='%236AB6FF'/%3E%3Crect x='9' y='8' width='6' height='1' fill='%231749A8'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%2316365F'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='9' width='7' height='1' fill='%232272E6'/%3E%3Crect x='8' y='9' width='7' height='1' fill='%231749A8'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%2316365F'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='10' width='7' height='1' fill='%232272E6'/%3E%3Crect x='8' y='10' width='7' height='1' fill='%231749A8'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%2316365F'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='11' width='7' height='1' fill='%232272E6'/%3E%3Crect x='8' y='11' width='7' height='1' fill='%231749A8'/%3E%3Crect x='15' y='11' width='1' height='1' fill='%2316365F'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%2316365F'/%3E%3Crect x='3' y='12' width='5' height='1' fill='%232272E6'/%3E%3Crect x='8' y='12' width='5' height='1' fill='%231749A8'/%3E%3Crect x='13' y='12' width='2' height='1' fill='%2316365F'/%3E%3Crect x='3' y='13' width='2' height='1' fill='%2316365F'/%3E%3Crect x='5' y='13' width='3' height='1' fill='%232272E6'/%3E%3Crect x='8' y='13' width='3' height='1' fill='%231749A8'/%3E%3Crect x='11' y='13' width='2' height='1' fill='%2316365F'/%3E%3Crect x='5' y='14' width='2' height='1' fill='%2316365F'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%232272E6'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%231749A8'/%3E%3Crect x='9' y='14' width='2' height='1' fill='%2316365F'/%3E%3Crect x='7' y='15' width='2' height='1' fill='%2316365F'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------- glass skin (22/10 old-UI sweep: the app default, index.html sets data-skin="glass"). Game / page css still reads a few --px-* tokens:
   here they resolve to the smooth glass look (UI font for titles, soft sky lines, no hard drop, no stair-step notch). ---------- */
:root:not([data-skin="pixel"]) {
  --px-display: var(--lg-font, system-ui); --px-font: var(--lg-font, system-ui); --px-body: var(--lg-font, system-ui);
  --px-line: rgba(22, 54, 95, .22); --px-line-2: rgba(22, 54, 95, .14); --px-drop: rgba(11, 22, 38, .10); --px-hi: rgba(255, 255, 255, .9); --px-lo: rgba(214, 230, 248, .55);
  --px-pri-edge: #0F4AA8; --px-pri-lo: #1A66D9; --px-pri-hi: #6FB6FF; --px-bar: #1A66D9; --px-bar-edge: rgba(11, 58, 128, .35); --px-bar-ink: #FFFFFF;
  --px-sky: linear-gradient(180deg, #CFE9FF, #EEF7FF); --px-ground: none; --px-grass: none; --px-cloud: none; --px-block: none; --px-notch: none; --px-notch-2: none;
}

/* ---------- tokens: dark (night sky). Duplicated for system-dark and forced dark, like theme.css ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-skin="pixel"]:not([data-theme="light"]) {
    --bp-bg: #142B4B; --bp-paper: #10233F; --bp-paper-2: #16304F; --bp-line: rgba(150,200,255,.16); --bp-line-strong: #6A85A8;
    --bp-on-primary: #0B1626; --bp-lite: #10233F; --bp-lite-line: #3D6FB0; --bp-glass2: #10233F; --bp-glass3: #10233F; --bp-glass-menu: #10233F;
    --bp-glass-line: #3D6FB0; --bp-glass-solid: #10233F; --bp-track: #1E3A60; --bp-field: #0B1A30;
    --bp-ink: #E8F1FF; --bp-ink-2: #BCCDE6; --bp-ink-3: #A4B7D3; --bp-tint: #8CC8FF; --bp-tint-ink: #B5DBFF; --bp-tint-soft: #1A3A63;
    --bp-primary: #6AB6FF; --bp-focus: #FFC94A; --bp-field-line: #6A85A8;
    --bp-pos: #6FD39C; --bp-pos-soft: #173326; --bp-neg: #FF8F86; --bp-neg-soft: #3A2028; --bp-warn: #F4BD6A; --bp-warn-soft: #372C1A;
    --bp-info: #B5DBFF; --bp-info-soft: #1A3A63; --bp-neu: #BCCDE6; --bp-neu-soft: #16304F;
    --bp-shadow-1: 0 4px 0 0 rgba(0,0,0,.45); --bp-shadow-2: 0 6px 0 0 rgba(0,0,0,.5); --lg-separator: rgba(150,200,255,.16); --lg-tint-fill: #6AB6FF;
    --bp-aura-1: #16365F; --bp-aura-2: #1749A8;
    --gm-chip: #10233F; --gm-chip-ink: #E8F1FF; --gm-chip-line: #3D6FB0; --gm-seg: rgba(150,200,255,.18); --comp-edge: #6AB6FF;
    --px-line: #3D6FB0; --px-line-2: #4F6A8F; --px-drop: rgba(0,0,0,.5); --px-hi: #1E3E66; --px-lo: #0B1A30;
    --px-pri-edge: #0B1626; --px-pri-lo: #2272E6; --px-pri-hi: #A9D6FF; --px-bar: #143E8C; --px-bar-edge: #0B1626; --px-bar-ink: #FFFFFF;
    --px-sky: linear-gradient(180deg,#070F1C 0 16%,#0A1424 16% 34%,#0B1626 34% 54%,#0E1D33 54% 74%,#11243F 74% 90%,#142B4B 90%);
    --px-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='240' height='240' shape-rendering='crispEdges'%3E%3Cg fill='%23A9D6FF' fill-opacity='.7'%3E%3Crect x='5' y='7' width='1' height='1'/%3E%3Crect x='33' y='15' width='1' height='1'/%3E%3Crect x='61' y='9' width='1' height='1'/%3E%3Crect x='18' y='40' width='1' height='1'/%3E%3Crect x='50' y='52' width='1' height='1'/%3E%3Crect x='72' y='66' width='1' height='1'/%3E%3Crect x='10' y='70' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23FFC94A'%3E%3Crect x='44' y='30' width='1' height='1'/%3E%3Crect x='26' y='60' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-skin="pixel"][data-theme="dark"] {
  --bp-bg: #142B4B; --bp-paper: #10233F; --bp-paper-2: #16304F; --bp-line: rgba(150,200,255,.16); --bp-line-strong: #6A85A8;
  --bp-on-primary: #0B1626; --bp-lite: #10233F; --bp-lite-line: #3D6FB0; --bp-glass2: #10233F; --bp-glass3: #10233F; --bp-glass-menu: #10233F;
  --bp-glass-line: #3D6FB0; --bp-glass-solid: #10233F; --bp-track: #1E3A60; --bp-field: #0B1A30;
  --bp-ink: #E8F1FF; --bp-ink-2: #BCCDE6; --bp-ink-3: #A4B7D3; --bp-tint: #8CC8FF; --bp-tint-ink: #B5DBFF; --bp-tint-soft: #1A3A63;
  --bp-primary: #6AB6FF; --bp-focus: #FFC94A; --bp-field-line: #6A85A8;
  --bp-pos: #6FD39C; --bp-pos-soft: #173326; --bp-neg: #FF8F86; --bp-neg-soft: #3A2028; --bp-warn: #F4BD6A; --bp-warn-soft: #372C1A;
  --bp-info: #B5DBFF; --bp-info-soft: #1A3A63; --bp-neu: #BCCDE6; --bp-neu-soft: #16304F;
  --bp-shadow-1: 0 4px 0 0 rgba(0,0,0,.45); --bp-shadow-2: 0 6px 0 0 rgba(0,0,0,.5); --lg-separator: rgba(150,200,255,.16); --lg-tint-fill: #6AB6FF;
  --bp-aura-1: #16365F; --bp-aura-2: #1749A8;
  --gm-chip: #10233F; --gm-chip-ink: #E8F1FF; --gm-chip-line: #3D6FB0; --gm-seg: rgba(150,200,255,.18); --comp-edge: #6AB6FF;
  --px-line: #3D6FB0; --px-line-2: #4F6A8F; --px-drop: rgba(0,0,0,.5); --px-hi: #1E3E66; --px-lo: #0B1A30;
  --px-pri-edge: #0B1626; --px-pri-lo: #2272E6; --px-pri-hi: #A9D6FF; --px-bar: #143E8C; --px-bar-edge: #0B1626; --px-bar-ink: #FFFFFF;
  --px-sky: linear-gradient(180deg,#070F1C 0 16%,#0A1424 16% 34%,#0B1626 34% 54%,#0E1D33 54% 74%,#11243F 74% 90%,#142B4B 90%);
  --px-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='240' height='240' shape-rendering='crispEdges'%3E%3Cg fill='%23A9D6FF' fill-opacity='.7'%3E%3Crect x='5' y='7' width='1' height='1'/%3E%3Crect x='33' y='15' width='1' height='1'/%3E%3Crect x='61' y='9' width='1' height='1'/%3E%3Crect x='18' y='40' width='1' height='1'/%3E%3Crect x='50' y='52' width='1' height='1'/%3E%3Crect x='72' y='66' width='1' height='1'/%3E%3Crect x='10' y='70' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23FFC94A'%3E%3Crect x='44' y='30' width='1' height='1'/%3E%3Crect x='26' y='60' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- page: stepped sky bands + pixel clouds/stars + grass ground ---------- */
html[data-skin=pixel], html[data-skin=pixel] body { background: var(--bp-bg); }
html[data-skin=pixel] body { background: var(--px-sky) fixed; }
html[data-skin=pixel] .aura i { display: none; }
html[data-skin=pixel] .aura::after { background: var(--px-cloud) 0 64px / auto repeat; -webkit-mask-image: none; mask-image: none; image-rendering: pixelated; opacity: .95; }

/* ---------- global resets: hard corners, no blur, no gloss ---------- */
html[data-skin=pixel] body :not(.cz-device):not(.cz-device *):not(.comp-btn) { border-radius: 0 !important; }
html[data-skin=pixel] body * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-skin=pixel] :is(.glass2, .glass3)::before, html[data-skin=pixel] :is(.glass2, .glass3)::after,
html[data-skin=pixel] .btn::after, html[data-skin=pixel] .btn.pri::before, html[data-skin=pixel] .tile::after,
html[data-skin=pixel] .prog i::after { display: none; }
html[data-skin=pixel] :is(.glass2, .glass3) { overflow: visible; }
html[data-skin=pixel] ::selection { background: #FFC94A; color: #0B1626; }

/* ---------- type: pixel font for shell headings, labels, numbers (never inside study-layer content) ---------- */
html[data-skin=pixel] h1,
html[data-skin=pixel] h2:not(:is(.q-card, .cheat, .notes, .ex, .sol, .tool-host, .lines, dialog, .cy-sheet, .cy-quest, .ar-card) *) {
  font-family: var(--px-display); font-weight: 600; letter-spacing: .01em; -webkit-font-smoothing: none; font-variant-numeric: tabular-nums; }
html[data-skin=pixel] h1 { font-size: 40px; line-height: 1.1; letter-spacing: .01em; }
html[data-skin=pixel] h2:not(:is(.q-card, .cheat, .notes, .ex, .tool-host, dialog, .cy-sheet, .cy-quest, .ar-card) *) { font-size: 24px; line-height: 1.25; }
html[data-skin=pixel] h3:not(:is(.q-card, .cheat, .notes, .ex, .tool-host, dialog, .cy-sheet, .cy-quest, .ar-card) *) { font-size: 20px; line-height: 1.3; }
/* maths always in a maths font, never the pixel face (design 27 §1.1) */
html[data-skin=pixel] :is(.mx, .katex, .obq-eq, .obq-choice) { font-family: KaTeX_Main, "Latin Modern Math", "STIX Two Math", "Cambria Math", "Times New Roman", serif !important; letter-spacing: 0; -webkit-font-smoothing: auto; }
@media (max-width: 560px) { html[data-skin=pixel] h1 { font-size: 32px; } }
/* QA 22/10: Pixelify Sans draws "(" as "{" and breaks the Vietnamese horn letters (ơ ư): headings that contain them use the body face (class set by bodyFontHeadings() in util.js) */
html[data-skin=pixel] :is(h1,h2,h3).body-font { font-family: var(--px-font, system-ui); -webkit-font-smoothing: auto; letter-spacing: 0; }
html[data-skin=pixel] :is(.eyebrow, .me-gl, th, .tile .eyebrow, .stat b, .stat3 b, .stat-strip b, .score-big, .ring-wrap .rt) {
  font-family: var(--px-font); -webkit-font-smoothing: none; letter-spacing: .04em; }
html[data-skin=pixel] :is(.eyebrow, .me-gl, th) { font-size: 14px; font-weight: 600; }
html[data-skin=pixel] :is(.stat b, .stat3 b, .stat-strip b) { font-size: 32px; font-weight: 600; letter-spacing: .02em; }
html[data-skin=pixel] .score-big { font-size: 48px; }

/* ---------- motion: stepped, transform-only, off under reduced motion ---------- */
html[data-skin=pixel] main > * { animation-timing-function: steps(4, end); }
@media (prefers-reduced-motion: reduce) { html[data-skin=pixel] main > * { animation: none; } }