/*
 * az-letter-wheel :: screen styles
 *
 * RULES THIS FILE IS HELD TO (see CONTRACT.md, enforced by tools/deploy-check.js):
 *   - Every rule is prefixed `body.lw-page`. NO `!important` anywhere. The theme is
 *     beaten on specificity, which stays true when the theme changes; `!important`
 *     stays true only until the theme also uses it.
 *   - Only `transform` and `opacity` are ever animated or transitioned.
 *   - Every size is calc(<literal-this-was-drawn-at> * var(--lw-ui-scale)).
 *     NOT scaled: hairlines, radii, focus rings, and every reserved min-height.
 *     A 1px rule is not proportional to type, a focus ring is a floor, and the
 *     reservations are measurements.
 *   - `stroke` is INHERITED in SVG. It is declared on leaf shapes only -- never on
 *     .lw svg, .lw-wheel or any <g>, which would outline every segment label.
 *   - Exactly one prefers-reduced-motion block, at the end of the file.
 *
 * THE TWO SITES DO NOT SHARE A PALETTE. atozdex is warm terracotta on cream;
 * alfabeticos is navy and red. Both ship here, selected by the lw-lang-* body class,
 * so the deployed plugin tree stays byte-identical on both hosts.
 */

/* ========================================================================
   1. Theme collisions. These come FIRST because everything else assumes them.
   ======================================================================== */

/*
 * main.css:6 is `* { ...; font-family:'Merriweather','Georgia',serif; }` at
 * specificity (0,0,0). Because the universal selector re-applies to EVERY
 * descendant, a font set on .lw alone does NOT inherit -- every child re-inherits the
 * serif from `*`. This pair is the only thing that makes the tool's typography work,
 * and it was the highest-probability silent visual bug in the whole build.
 */
body.lw-page .lw,
body.lw-page .lw * { font-family: inherit; }
body.lw-page .lw { font-family: 'Open Sans', system-ui, -apple-system, sans-serif; }

/* .post-content a is (0,1,1) and outranks .lw a (0,1,0). This is (0,2,1). */
body.lw-page .lw a { color: var(--lw-accent); text-decoration: none; }
body.lw-page .lw a:hover { color: var(--lw-accent-deep); text-decoration: underline; }

/*
 * page.php appends the theme's own 26-letter A-Z nav to every page, and our directory
 * replaces it with something strictly better on this one page. Hiding it is a CONTENT
 * decision, not an ad decision, so it clears the A21 freeze.
 */
body.lw-page .alphabet-container { display: none; }

/* ========================================================================
   2. Tokens
   ======================================================================== */

body.lw-page .lw {
	--lw-ui-scale: 1;
	--lw-ease: cubic-bezier(.2, .7, .2, 1);

	/* atozdex: warm terracotta on cream. Read from the live main.css. */
	--lw-accent: #e06840;
	--lw-accent-deep: #b94e2f;
	--lw-ink: #3c3530;
	--lw-ink-soft: #5a5249;
	--lw-muted: #8a847e;
	--lw-surface: #ffffff;
	--lw-sunk: #f9f7f5;
	--lw-line: #e9e4df;
	--lw-seg-a: #f5f2ef;
	--lw-seg-b: #ffffff;
	--lw-seg-c: #f0ebe6;

	/* Not scaled: see the header. */
	--lw-radius: 14px;
	--lw-radius-sm: 9px;
	--lw-hair: 1px;
}

/*
 * alfabeticos: navy and red.
 *
 * CASINO-ADJACENCY RULE. The AdSense account behind these two sites is shared with
 * two more and is ~75% of company revenue, and a spinning wheel with a pointer is
 * already the visual vocabulary of a roulette wheel. The es palette has a strong red,
 * so the SEGMENT cycle here is navy/steel/cream and red is kept for the pointer and
 * the call to action only. No red/black alternation, no gold rim, no green baize.
 * Enforced by the vocabulary sweep in deploy-check.js.
 */
body.lw-page.lw-lang-es .lw {
	--lw-accent: #c1121f;
	--lw-accent-deep: #780000;
	--lw-ink: #003049;
	--lw-ink-soft: #33566d;
	--lw-muted: #669bbc;
	--lw-surface: #ffffff;
	--lw-sunk: #f2f7fa;
	--lw-line: #d6e3ec;
	--lw-seg-a: #e4ecf2;
	--lw-seg-b: #ffffff;
	--lw-seg-c: #cfe0ea;
}

/* ========================================================================
   3. Shell
   ======================================================================== */

body.lw-page .lw {
	color: var(--lw-ink);
	line-height: 1.55;
	margin: 0 0 calc(36px * var(--lw-ui-scale));
}

body.lw-page .lw .lw-label {
	display: block;
	font-size: calc(12px * var(--lw-ui-scale));
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lw-muted);
	margin-bottom: calc(8px * var(--lw-ui-scale));
}

body.lw-page .lw .lw-dim { color: var(--lw-muted); }

body.lw-page .lw .lw-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

body.lw-page .lw :focus-visible {
	outline: 3px solid var(--lw-accent);
	outline-offset: 2px;
}

/* ========================================================================
   4. Stage and wheel
   ======================================================================== */

body.lw-page .lw-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: calc(28px * var(--lw-ui-scale));
	align-items: center;
	background: var(--lw-sunk);
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius);
	padding: calc(22px * var(--lw-ui-scale));
	/* RESERVATION -- measured, not guessed. Not scaled. */
	min-height: 420px;
}

body.lw-page .lw-wheel-wrap {
	position: relative;
	width: 100%;
	max-width: calc(340px * var(--lw-ui-scale));
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}

body.lw-page .lw-wheel {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* The rotor is the ONLY thing that moves during a spin. */
body.lw-page .lw-wheel-rotor {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}

body.lw-page .lw-seg { stroke: var(--lw-surface); stroke-width: 1.5; }
body.lw-page .lw-seg-0 { fill: var(--lw-seg-a); }
body.lw-page .lw-seg-1 { fill: var(--lw-seg-b); }
body.lw-page .lw-seg-2 { fill: var(--lw-seg-c); }

/* Excluded letters stay DRAWN and are dimmed, never removed. Re-rendering the
 * segments on every pool change would thrash layout, and the wheel would stop
 * reading as "the alphabet", which is the whole idea. */
body.lw-page .lw-seg.is-off { fill: var(--lw-sunk); opacity: .45; }
body.lw-page .lw-seg-label.is-off { opacity: .3; }
/* No-repeat: a letter already drawn is legible on the object, not just in a counter. */
body.lw-page .lw-seg.is-used { opacity: .3; }

body.lw-page .lw-seg-label {
	font-size: calc(15px * var(--lw-ui-scale));
	font-weight: 700;
	fill: var(--lw-ink);
	/* NO stroke here -- it would inherit down and outline the glyphs. */
}

body.lw-page .lw-rim {
	fill: none;
	stroke: var(--lw-line);
	stroke-width: 2;
}

/* Rim glow: opacity is driven from the spin loop's angular velocity. */
body.lw-page .lw-glow {
	fill: none;
	stroke: var(--lw-accent);
	stroke-width: 4;
	opacity: 0;
}

body.lw-page .lw-pointer {
	position: absolute;
	top: calc(-6px * var(--lw-ui-scale));
	left: 50%;
	width: calc(26px * var(--lw-ui-scale));
	height: calc(34px * var(--lw-ui-scale));
	margin-left: calc(-13px * var(--lw-ui-scale));
	background: var(--lw-accent);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	z-index: 3;
	transform-origin: 50% 0;
}

body.lw-page .lw-spin {
	position: absolute;
	top: 50%; left: 50%;
	width: calc(96px * var(--lw-ui-scale));
	height: calc(96px * var(--lw-ui-scale));
	margin: calc(-48px * var(--lw-ui-scale)) 0 0 calc(-48px * var(--lw-ui-scale));
	border: none;
	border-radius: 50%;
	background: var(--lw-accent);
	color: #fff;
	font-size: calc(13px * var(--lw-ui-scale));
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	z-index: 4;
	padding: calc(8px * var(--lw-ui-scale));
	transition: transform 140ms var(--lw-ease), opacity 140ms var(--lw-ease);
}
body.lw-page .lw-spin:hover { transform: scale(1.04); }
body.lw-page .lw-spin:active { transform: scale(.97); }
body.lw-page .lw-spin[disabled] { opacity: .5; cursor: default; }
body.lw-page .lw-spin.is-spinning { opacity: .75; }

body.lw-page .lw-hint {
	text-align: center;
	font-size: calc(13px * var(--lw-ui-scale));
	color: var(--lw-muted);
	margin: calc(10px * var(--lw-ui-scale)) 0 calc(18px * var(--lw-ui-scale));
}

/* ========================================================================
   5. Result
   ======================================================================== */

body.lw-page .lw-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* RESERVATION. */
	min-height: 220px;
}

body.lw-page .lw-result-pre {
	margin: 0 0 calc(10px * var(--lw-ui-scale));
	font-size: calc(13px * var(--lw-ui-scale));
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lw-muted);
}
body.lw-page .lw-result-pre[hidden] { display: none; }

body.lw-page .lw-result-letters {
	display: flex;
	flex-wrap: wrap;
	gap: calc(10px * var(--lw-ui-scale));
	justify-content: center;
}

body.lw-page .lw-glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(104px * var(--lw-ui-scale));
	height: calc(104px * var(--lw-ui-scale));
	border-radius: var(--lw-radius);
	background: var(--lw-surface);
	border: var(--lw-hair) solid var(--lw-line);
	font-size: calc(58px * var(--lw-ui-scale));
	font-weight: 800;
	line-height: 1;
	color: var(--lw-accent);
}

body.lw-page .lw-glyph.is-new { animation: lw-pop 260ms var(--lw-ease) both; }

/* The landing burst. One shot; lw-app removes the node on animationend. */
body.lw-page .lw-burst {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}
body.lw-page .lw-burst i {
	position: absolute;
	top: 50%; left: 50%;
	width: calc(4px * var(--lw-ui-scale));
	height: calc(26px * var(--lw-ui-scale));
	margin: calc(-13px * var(--lw-ui-scale)) 0 0 calc(-2px * var(--lw-ui-scale));
	background: var(--lw-accent);
	border-radius: 2px;
	opacity: 0;
	animation: lw-spoke 480ms var(--lw-ease) both;
}

/* ========================================================================
   6. Controls
   ======================================================================== */

body.lw-page .lw-controls {
	margin: calc(18px * var(--lw-ui-scale)) 0;
	padding: calc(18px * var(--lw-ui-scale));
	background: var(--lw-surface);
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius);
}

body.lw-page .lw-pool-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(12px * var(--lw-ui-scale));
}
body.lw-page .lw-pool-count { font-size: calc(12px * var(--lw-ui-scale)); color: var(--lw-muted); }

body.lw-page .lw-presets,
body.lw-page .lw-deck {
	display: flex;
	flex-wrap: wrap;
	gap: calc(8px * var(--lw-ui-scale));
	margin-bottom: calc(14px * var(--lw-ui-scale));
}

body.lw-page .lw-chip {
	display: inline-flex;
	align-items: center;
	gap: calc(6px * var(--lw-ui-scale));
	padding: calc(7px * var(--lw-ui-scale)) calc(13px * var(--lw-ui-scale));
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: 999px;
	background: var(--lw-sunk);
	color: var(--lw-ink-soft);
	font-size: calc(13px * var(--lw-ui-scale));
	font-weight: 600;
	cursor: pointer;
	transition: transform 140ms var(--lw-ease), opacity 140ms var(--lw-ease);
}
body.lw-page .lw-chip:hover { transform: translateY(-2px); }
body.lw-page .lw-chip:active { transform: scale(.97); }
body.lw-page .lw-chip[aria-pressed="true"],
body.lw-page .lw-chip.is-on {
	background: var(--lw-accent);
	border-color: var(--lw-accent);
	color: #fff;
}
body.lw-page .lw-chip.is-on .lw-dim,
body.lw-page .lw-chip[aria-pressed="true"] .lw-dim { color: rgba(255, 255, 255, .75); }

/* Chips deal in with a stagger; --i is set by lw-app. Capped at 12 chips = 720ms. */
body.lw-page .lw-deck .lw-cat.is-dealt {
	animation: lw-deal 300ms var(--lw-ease) both;
	animation-delay: calc(var(--i, 0) * 60ms);
}

body.lw-page .lw-letters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(38px * var(--lw-ui-scale)), 1fr));
	gap: calc(6px * var(--lw-ui-scale));
	/* RESERVATION -- 26/27 buttons wrap to a predictable number of rows. */
	min-height: 96px;
}

body.lw-page .lw-letter {
	padding: calc(8px * var(--lw-ui-scale)) 0;
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius-sm);
	background: var(--lw-surface);
	color: var(--lw-ink);
	font-size: calc(14px * var(--lw-ui-scale));
	font-weight: 700;
	cursor: pointer;
	transition: transform 120ms var(--lw-ease), opacity 120ms var(--lw-ease);
}
body.lw-page .lw-letter:hover { transform: translateY(-2px); }
body.lw-page .lw-letter.is-off { opacity: .4; }
body.lw-page .lw-letter.is-used { opacity: .35; }

body.lw-page .lw-opts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(16px * var(--lw-ui-scale));
	margin-top: calc(14px * var(--lw-ui-scale));
	font-size: calc(14px * var(--lw-ui-scale));
}
body.lw-page .lw-opt { display: inline-flex; align-items: center; gap: calc(7px * var(--lw-ui-scale)); }
body.lw-page .lw-opt select {
	padding: calc(5px * var(--lw-ui-scale)) calc(8px * var(--lw-ui-scale));
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius-sm);
	background: var(--lw-surface);
	color: var(--lw-ink);
	font-size: calc(14px * var(--lw-ui-scale));
}

body.lw-page .lw-note {
	margin: calc(10px * var(--lw-ui-scale)) 0 0;
	font-size: calc(13px * var(--lw-ui-scale));
	color: var(--lw-accent-deep);
	/* RESERVATION -- the note appears and disappears; the block must not jump. */
	min-height: 20px;
}

/* ========================================================================
   7. History
   ======================================================================== */

body.lw-page .lw-history { margin: calc(16px * var(--lw-ui-scale)) 0; }
body.lw-page .lw-history-strip {
	display: flex;
	flex-wrap: wrap;
	gap: calc(6px * var(--lw-ui-scale));
	/* RESERVATION. */
	min-height: 40px;
}
body.lw-page .lw-hist {
	width: calc(34px * var(--lw-ui-scale));
	height: calc(34px * var(--lw-ui-scale));
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius-sm);
	background: var(--lw-surface);
	color: var(--lw-ink);
	font-weight: 700;
	font-size: calc(14px * var(--lw-ui-scale));
	cursor: pointer;
	animation: lw-slidein 180ms var(--lw-ease) both;
}

/* ========================================================================
   8. Result panel
   ======================================================================== */

body.lw-page .lw-panel {
	margin: calc(24px * var(--lw-ui-scale)) 0;
	padding: calc(20px * var(--lw-ui-scale));
	background: var(--lw-surface);
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius);
	/* RESERVATION -- the panel is JS-filled and is the biggest shift risk on the page. */
	min-height: 260px;
}

body.lw-page .lw-panel-title {
	margin: 0 0 calc(6px * var(--lw-ui-scale));
	font-size: calc(21px * var(--lw-ui-scale));
	color: var(--lw-ink);
}

body.lw-page .lw-panel-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(210px * var(--lw-ui-scale)), 1fr));
	gap: calc(8px * var(--lw-ui-scale));
	list-style: none;
	margin: calc(14px * var(--lw-ui-scale)) 0 0;
	padding: 0;
}
body.lw-page .lw-panel-list li {
	margin: 0;
	animation: lw-rise 260ms var(--lw-ease) both;
	animation-delay: calc(var(--i, 0) * 18ms);
}
body.lw-page .lw-panel-list a {
	display: block;
	padding: calc(9px * var(--lw-ui-scale)) calc(12px * var(--lw-ui-scale));
	background: var(--lw-sunk);
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius-sm);
	font-size: calc(14px * var(--lw-ui-scale));
	transition: transform 140ms var(--lw-ease);
}
body.lw-page .lw-panel-list a:hover { transform: translateX(3px); text-decoration: none; }

/* ========================================================================
   9. Game layer
   ======================================================================== */

body.lw-page .lw-game {
	margin: calc(24px * var(--lw-ui-scale)) 0;
	padding: calc(20px * var(--lw-ui-scale));
	background: var(--lw-sunk);
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius);
}
body.lw-page .lw-game-title { margin: 0 0 calc(4px * var(--lw-ui-scale)); font-size: calc(21px * var(--lw-ui-scale)); }
body.lw-page .lw-game-intro { margin: 0 0 calc(16px * var(--lw-ui-scale)); color: var(--lw-ink-soft); }

body.lw-page .lw-deck-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(12px * var(--lw-ui-scale));
}
/* RESERVATION -- the deck is server-rendered but reflows as chips toggle. */
body.lw-page .lw-deck { min-height: 84px; }

body.lw-page .lw-timerbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(14px * var(--lw-ui-scale));
	margin-top: calc(8px * var(--lw-ui-scale));
	/* RESERVATION -- the timer appears next to the button mid-round. */
	min-height: 56px;
}

body.lw-page .lw-start {
	padding: calc(11px * var(--lw-ui-scale)) calc(22px * var(--lw-ui-scale));
	border: none;
	border-radius: 999px;
	background: var(--lw-accent);
	color: #fff;
	font-size: calc(15px * var(--lw-ui-scale));
	font-weight: 700;
	cursor: pointer;
	transition: transform 140ms var(--lw-ease), opacity 140ms var(--lw-ease);
}
body.lw-page .lw-start:hover { transform: translateY(-2px); }
body.lw-page .lw-start:active { transform: scale(.97); }
body.lw-page .lw-start[disabled] { opacity: .5; cursor: default; }

body.lw-page .lw-timer { display: flex; align-items: center; gap: calc(10px * var(--lw-ui-scale)); }
body.lw-page .lw-timer[hidden] { display: none; }
body.lw-page .lw-timer-ring { width: calc(46px * var(--lw-ui-scale)); height: calc(46px * var(--lw-ui-scale)); }
body.lw-page .lw-timer-track { fill: none; stroke: var(--lw-line); stroke-width: 6; }
/* stroke on a leaf element only -- never on .lw-timer-ring or a <g>. */
body.lw-page .lw-timer-hand {
	stroke: var(--lw-accent);
	stroke-width: 3;
	stroke-linecap: round;
	transform-box: view-box;
	transform-origin: 24px 24px;
}
body.lw-page .lw-timer-label {
	font-size: calc(12px * var(--lw-ui-scale));
	color: var(--lw-muted);
}

body.lw-page .lw-timer-num {
	font-size: calc(19px * var(--lw-ui-scale));
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--lw-ink);
}
/* The one looping animation on the page, and it is bounded twice: the round ends,
 * and lw-app drops the class when the tool scrolls out of view. */
body.lw-page .lw-timer.is-urgent { animation: lw-pulse 1s var(--lw-ease) infinite; }

body.lw-page .lw-round { /* RESERVATION -- round results are the biggest JS fill. */ min-height: 0; }
body.lw-page .lw-round.is-open { min-height: 320px; margin-top: calc(18px * var(--lw-ui-scale)); }

body.lw-page .lw-round-over {
	margin: 0 0 calc(4px * var(--lw-ui-scale));
	font-size: calc(24px * var(--lw-ui-scale));
	font-weight: 800;
	color: var(--lw-accent);
}
body.lw-page .lw-round-title {
	margin: 0 0 calc(12px * var(--lw-ui-scale));
	font-size: calc(17px * var(--lw-ui-scale));
}

body.lw-page .lw-round-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(230px * var(--lw-ui-scale)), 1fr));
	gap: calc(12px * var(--lw-ui-scale));
}
body.lw-page .lw-card {
	padding: calc(14px * var(--lw-ui-scale));
	background: var(--lw-surface);
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius-sm);
	animation: lw-rise 260ms var(--lw-ease) both;
	animation-delay: calc(var(--i, 0) * 45ms);
}
body.lw-page .lw-card h4 {
	margin: 0 0 calc(8px * var(--lw-ui-scale));
	font-size: calc(14px * var(--lw-ui-scale));
	color: var(--lw-ink);
}
body.lw-page .lw-card ul { margin: 0 0 calc(10px * var(--lw-ui-scale)); padding-left: calc(18px * var(--lw-ui-scale)); }
body.lw-page .lw-card li { font-size: calc(13px * var(--lw-ui-scale)); color: var(--lw-ink-soft); }
body.lw-page .lw-card .lw-card-link { font-size: calc(13px * var(--lw-ui-scale)); font-weight: 700; }

/* ========================================================================
   10. Directory -- server-rendered, crawlable. No entry animation.
   ======================================================================== */

body.lw-page .lw-dir { margin: calc(28px * var(--lw-ui-scale)) 0 0; }
body.lw-page .lw-dir-title { margin: 0 0 calc(4px * var(--lw-ui-scale)); font-size: calc(21px * var(--lw-ui-scale)); }
body.lw-page .lw-dir-intro { margin: 0 0 calc(18px * var(--lw-ui-scale)); color: var(--lw-ink-soft); }

body.lw-page .lw-dir-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(230px * var(--lw-ui-scale)), 1fr));
	gap: calc(18px * var(--lw-ui-scale));
}
body.lw-page .lw-dir-block {
	padding: calc(14px * var(--lw-ui-scale));
	background: var(--lw-surface);
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: var(--lw-radius-sm);
	/* RESERVATION -- 10 links plus a heading and a footer link. */
	min-height: 300px;
}
body.lw-page .lw-dir-letter {
	margin: 0 0 calc(10px * var(--lw-ui-scale));
	font-size: calc(26px * var(--lw-ui-scale));
	line-height: 1;
	color: var(--lw-accent);
}
body.lw-page .lw-dir-list { list-style: none; margin: 0 0 calc(10px * var(--lw-ui-scale)); padding: 0; }
body.lw-page .lw-dir-list li { margin: 0 0 calc(5px * var(--lw-ui-scale)); }
body.lw-page .lw-dir-list a { font-size: calc(13px * var(--lw-ui-scale)); }
body.lw-page .lw-dir-all { font-size: calc(13px * var(--lw-ui-scale)); font-weight: 700; }

body.lw-page .lw-dir-cats-title { margin: calc(24px * var(--lw-ui-scale)) 0 calc(10px * var(--lw-ui-scale)); font-size: calc(17px * var(--lw-ui-scale)); }
body.lw-page .lw-dir-cats { display: flex; flex-wrap: wrap; gap: calc(8px * var(--lw-ui-scale)); list-style: none; margin: 0; padding: 0; }
body.lw-page .lw-dir-cats li { margin: 0; }
body.lw-page .lw-dir-cats a {
	display: inline-block;
	padding: calc(6px * var(--lw-ui-scale)) calc(12px * var(--lw-ui-scale));
	background: var(--lw-sunk);
	border: var(--lw-hair) solid var(--lw-line);
	border-radius: 999px;
	font-size: calc(13px * var(--lw-ui-scale));
}

/* ========================================================================
   11. Keyframes -- transform and opacity only
   ======================================================================== */

/* Idle breathing. IntersectionObserver-gated by lw-app, and the class is removed
 * permanently after the first spin: an idle animation that keeps running once the
 * tool is in use is just noise. */
body.lw-page .lw-wheel-rotor.is-idle { animation: lw-breathe 6s var(--lw-ease) infinite alternate; }

@keyframes lw-breathe { from { transform: rotate(0deg); } to { transform: rotate(3deg); } }
@keyframes lw-pop { 0% { opacity: 0; transform: scale(.55); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lw-spoke { 0% { opacity: 1; transform: rotate(var(--a, 0deg)) translateY(calc(-30px * var(--lw-ui-scale))) scale(.3); } 100% { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(calc(-96px * var(--lw-ui-scale))) scale(1.6); } }
@keyframes lw-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lw-slidein { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lw-deal { from { opacity: 0; transform: rotate(-4deg) scale(.92); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes lw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* ========================================================================
   12. Narrow screens
   ======================================================================== */

@media (max-width: 720px) {
	body.lw-page .lw-stage { grid-template-columns: 1fr; min-height: 560px; }
	body.lw-page .lw-result { min-height: 170px; }
	body.lw-page .lw-dir-grid { grid-template-columns: 1fr 1fr; }
	body.lw-page .lw-dir-block { min-height: 280px; }
}

@media (max-width: 420px) {
	body.lw-page .lw { --lw-ui-scale: .92; }
	body.lw-page .lw-dir-grid { grid-template-columns: 1fr; }
	body.lw-page .lw-dir-block { min-height: 0; }
}

/* ========================================================================
   13. Reduced motion -- ONE block, LAST in the file, scoped to the tool.
   The tool stays fully functional: the result arrives instantly instead of
   being spun to. lw-wheel.js reads the same media query and skips its rAF loop.
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.lw-page .lw *,
	body.lw-page .lw *::before,
	body.lw-page .lw *::after {
		animation-duration: 1ms;
		animation-iteration-count: 1;
		transition-duration: 1ms;
	}
	body.lw-page .lw-wheel-rotor.is-idle { animation: none; }
	body.lw-page .lw-timer.is-urgent { animation: none; }
	body.lw-page .lw-burst { display: none; }
}