/* The 8 category styles (Luke signed off the style lab, 8 Oct 2026).
   Set on <html data-style="...">. Everything else stays the Reading Dojo
   shell: dark dojo, Lexend for every word a boy reads, belt colour leading.
   A style changes only: heading font, corners, one texture, one signature
   detail. Source of truth: blackbelt-design skill, references/category-styles.md */

/* 1 · Reading — book page */
[data-style="reading"] { --font-display: "Fraunces", Georgia, serif; --r-card: 14px; --r-ctl: 10px; }
[data-style="reading"] .title h1 { font-weight: 700; letter-spacing: -.01em; }
[data-style="reading"] .stage { background: color-mix(in srgb, var(--surface-2) 88%, #e9dcc0 12%); }
[data-style="reading"] .clue { background: color-mix(in srgb, var(--belt) 28%, transparent); border-radius: var(--r-sm); padding: 0 2px; }

/* 2 · Spelling — letter tiles */
[data-style="spelling"] { --font-display: "Rubik", system-ui, sans-serif; --r-card: 12px; --r-ctl: 12px; }
[data-style="spelling"] .title h1 { font-weight: 800; }
[data-style="spelling"] .tile { min-width: 46px; height: 52px; display: inline-grid; place-items: center; font: 800 1.5rem var(--font-display); border-radius: 8px; background: var(--surface); border: 1px solid var(--rule-2); box-shadow: 0 4px 0 var(--rule-2); }

/* 3 · Writing — notebook */
[data-style="writing"] { --font-display: "Kalam", "Comic Sans MS", cursive; --r-card: 6px; --r-ctl: 6px; }
[data-style="writing"] .title h1 { font-weight: 700; letter-spacing: 0; }
[data-style="writing"] .stage { background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--belt-ink) 22%, transparent) 31px 32px); padding-left: 44px; }
[data-style="writing"] .stage::before { content: ""; position: absolute; top: 0; bottom: 0; left: 30px; width: 1px; background: color-mix(in srgb, var(--crit) 55%, transparent); }

/* 4 · Typing — keycaps */
[data-style="typing"] { --font-display: "Chakra Petch", system-ui, sans-serif; --r-card: 8px; --r-ctl: 8px; }
[data-style="typing"] .title h1 { font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-size: var(--t-lg); }
[data-style="typing"] .btn { text-transform: uppercase; letter-spacing: .06em; }
[data-style="typing"] .key { display: inline-grid; place-items: center; min-width: 36px; aspect-ratio: 1; font: 700 var(--t-sm) var(--font-display); border-radius: 6px; background: var(--surface); border: 1px solid var(--rule-2); border-bottom-width: 4px; }

/* 5 · Number — scoreboard */
[data-style="number"] { --font-display: "Oswald", "Arial Narrow", sans-serif; --r-card: 2px; --r-ctl: 2px; }
[data-style="number"] .title h1 { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
[data-style="number"] .btn, [data-style="number"] .qf-pad button.go { text-transform: uppercase; letter-spacing: .08em; }
[data-style="number"] .qf-sum { font-size: clamp(2.4rem, 11vw, 3.4rem); letter-spacing: .02em; }
[data-style="number"] .streak { display: flex; gap: 3px; }
[data-style="number"] .streak i { flex: 1; height: 4px; background: var(--rule-2); }
[data-style="number"] .streak i.on { background: var(--belt); }

/* 6 · Algebra — graph paper */
[data-style="algebra"] { --font-display: "Crimson Pro", Georgia, serif; --r-card: 4px; --r-ctl: 4px; }
[data-style="algebra"] .title h1 { font-weight: 600; font-size: 2rem; }
[data-style="algebra"] .stage { background-image: linear-gradient(color-mix(in srgb, var(--belt-ink) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--belt-ink) 10%, transparent) 1px, transparent 1px); background-size: 20px 20px; }
[data-style="algebra"] .v { font-family: var(--font-display); font-style: italic; color: var(--belt-ink); }

/* 7 · Measure & shape — blueprint */
[data-style="measure"] { --font-display: "Josefin Sans", system-ui, sans-serif; --r-card: 0px; --r-ctl: 0px; }
[data-style="measure"] .title h1 { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--t-lg); }
[data-style="measure"] .btn { text-transform: uppercase; letter-spacing: .1em; }
[data-style="measure"] .screen::before { background: linear-gradient(var(--belt-ink), var(--belt-ink)) top left / 14px 2px no-repeat, linear-gradient(var(--belt-ink), var(--belt-ink)) top left / 2px 14px no-repeat, linear-gradient(var(--belt-ink), var(--belt-ink)) bottom right / 14px 2px no-repeat, linear-gradient(var(--belt-ink), var(--belt-ink)) bottom right / 2px 14px no-repeat; }
[data-style="measure"] .ruler { height: 18px; background-image: repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 6px); background-size: 100% 18px, 100% 8px; background-repeat: no-repeat; border-top: 1px solid var(--ink-2); }

/* 8 · Stats & chance — game table */
[data-style="stats"] { --font-display: "Baloo 2", system-ui, sans-serif; --r-card: 20px; --r-ctl: var(--r-full); }
[data-style="stats"] .title h1 { font-weight: 800; letter-spacing: -.01em; }
[data-style="stats"] .stage { background-image: radial-gradient(color-mix(in srgb, var(--belt-ink) 14%, transparent) 1.5px, transparent 1.5px); background-size: 16px 16px; }