/* Hallmark · redesign v2 "super soaker 2000s" · see tokens.css stamp for the record */

/* base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.6;
  padding-inline: max(0px, env(safe-area-inset-left));
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--color-accent); text-decoration-thickness: 2.5px; text-underline-offset: 3px; }
a:hover { color: var(--color-splash-deep); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
strong { font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* nav — floating bubble bar ---------------------------------------------- */
.nav-slab {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md);
  margin: var(--space-sm) var(--page-gutter) 0;
  padding: var(--space-xs) var(--space-lg);
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-pop-sm);
  position: relative; z-index: var(--z-raised);
}
.slab-nav ul { flex-wrap: wrap; }
.slab-mark {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-md);
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.slab-mark .mark-drop { color: var(--color-accent); }
.slab-nav ul { display: flex; gap: var(--space-md); list-style: none; padding: 0; margin: 0 0 0 auto; }
.slab-nav a {
  font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill);
  transition: background-color var(--dur-short) var(--ease-out);
}
.slab-nav a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.slab-nav a[aria-current="page"] { background: var(--color-splash); color: var(--color-ink); }

/* wave band + bubbles ------------------------------------------------------ */
.wave-band { background: var(--color-paper-2); position: relative; }
.wave-band .nav-slab { margin-top: var(--space-md); }
.wave { display: block; width: 100%; height: auto; }
.bubbles { position: absolute; pointer-events: none; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.bob { animation: bob 5s var(--ease-in-out) infinite alternate; }
.bob--late { animation-delay: 2.2s; }

/* footer — the deep end ---------------------------------------------------- */
.foot-marquee {
  overflow: hidden; margin-top: var(--space-3xl);
  background: var(--color-pool);
  border-radius: 32px 32px 0 0;
}
.foot-marquee__track { display: flex; gap: var(--space-2xl); white-space: nowrap; padding-block: var(--space-lg); animation: foot-marquee 36s linear infinite; }
.foot-marquee__track span {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em;
  font-size: clamp(1rem, 2.5vw, 1.4rem); color: var(--color-splash);
}
@keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.foot-links {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); align-items: center;
  background: var(--color-pool);
  padding: 0 var(--page-gutter) max(var(--space-lg), env(safe-area-inset-bottom));
  font-size: var(--text-sm); font-weight: 600; color: var(--color-paper);
}
.foot-links a { white-space: nowrap; color: var(--color-paper); text-decoration-color: var(--color-splash); }
.foot-links a:hover { color: var(--color-splash); }
.foot-links span { color: var(--color-splash); }

/* sticker — the brand mark. ≤1 per page ------------------------------------ */
.stamp {
  display: inline-block;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-md); line-height: 1;
  color: var(--color-ink);
  background: var(--color-lime);
  border: 3px solid var(--color-ink); border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  transform: rotate(-5deg);
  box-shadow: var(--shadow-pop-sm);
}

/* landing ----------------------------------------------------------------- */
.hero {
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  max-width: 62rem;
}
/* poster headline — white inflated letters, thick navy outline, hard offset shadow */
.hero h1, .doc-head h1, .bench-head h1 {
  color: var(--color-card);
  -webkit-text-stroke: 2.5px var(--color-ink);
  paint-order: stroke fill;
  text-shadow: 0.085em 0.085em 0 var(--color-ink);
  letter-spacing: 0.01em;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-display); line-height: 1.12;
  margin: 0 0 var(--space-md);
  transform: rotate(-1.5deg);
}
.hero h1 .accent-word { color: var(--color-accent); }
.hero .lede { font-size: var(--text-md); font-weight: 600; max-width: 46ch; margin: 0 0 var(--space-lg); color: var(--color-ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.hero-stamp { margin-top: var(--space-lg); }
.hero--split {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-lg); align-items: center;
  padding-block: var(--space-lg) var(--space-xl);
}
.hero--split h1 { font-size: var(--text-display-s); }
.hero-art { justify-self: end; position: relative; }
.hero-art svg { width: clamp(230px, 30vw, 360px); height: auto; display: block; }
.stamp--on-art { position: absolute; right: 2%; bottom: 5%; font-size: var(--text-base); }

/* sticker badges — the flyer chips ------------------------------------------ */
.badge-row {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  list-style: none; margin: var(--space-lg) 0 0; padding: 0;
}
.badge {
  display: grid; place-items: center; text-align: center;
  width: 6.6rem; height: 6.6rem; border-radius: var(--radius-pill);
  border: 3px solid var(--color-ink);
  font-family: var(--font-display); font-weight: 400;
  font-size: 0.82rem; line-height: 1.08; color: var(--color-ink);
  box-shadow: var(--shadow-pop-sm);
  padding: var(--space-xs);
}
.badge--sun { background: var(--color-sun); transform: rotate(-7deg); }
.badge--splash { background: var(--color-splash); transform: rotate(4deg); }
.badge--lime { background: var(--color-lime); transform: rotate(-3deg); }

/* role split — the first decision ------------------------------------------ */
.role-split {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  padding-inline: var(--page-gutter); max-width: 62rem;
  margin-top: calc(-1 * var(--space-xl)); /* panels float up over the wave edge */
}
.role-panel {
  position: relative;
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  background: var(--color-card);
  padding: var(--space-lg);
}
.role-panel--teacher { box-shadow: 0 6px 0 0 var(--color-accent); }
.role-panel--student { box-shadow: 0 6px 0 0 var(--color-splash); }
.role-kicker {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-lg); line-height: 1.1; margin: 0 0 var(--space-xs);
}
.role-panel p { color: var(--color-ink-2); margin: 0 0 var(--space-md); }
.steps { list-style: none; margin: 0 0 var(--space-lg); padding: 0; }
.steps li { display: flex; gap: var(--space-sm); align-items: baseline; margin-block: var(--space-xs); }
.steps .step-no {
  flex: none; font-family: var(--font-outlier); font-weight: 700;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.splash-mark { position: absolute; right: -12px; top: -20px; width: 72px; height: auto; pointer-events: none; }

/* buttons — squishy pool-toy pills ----------------------------------------- */
.btn {
  display: inline-block; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  padding: var(--space-sm) var(--space-lg);
  border: 3px solid var(--color-ink); border-radius: var(--radius-pill);
  background: var(--color-card); color: var(--color-ink);
  text-decoration: none;
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary { transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-spring), background-color var(--dur-short) var(--ease-out); }
.btn:hover, .btn.is-hover { transform: translateY(-2px); box-shadow: 0 7px 0 0 var(--color-ink); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-accent-hover); }
.btn:active, .btn.is-active { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--color-ink); }
.btn:disabled, .btn.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--shadow-pop-sm); }
.btn[data-state="loading"] { opacity: 0.7; cursor: progress; }
.btn[data-state="error"] { border-color: var(--color-error); color: var(--color-error); background: var(--color-card); }
.btn[data-state="success"] { border-color: var(--color-ok); color: var(--color-ok); background: var(--color-card); }

/* tool cards ----------------------------------------------------------------- */
.tool-cards {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-lg);
  padding-inline: var(--page-gutter); max-width: 62rem;
}
.tool-card {
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--color-card); text-decoration: none; display: block;
  box-shadow: var(--shadow-pop-sm);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 6px 0 0 var(--color-ink); }
.tool-card h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); margin: 0 0 var(--space-xs); }
.tool-card p { margin: 0; color: var(--color-ink-2); }
.trust-line {
  padding: var(--space-xl) var(--page-gutter) 0; max-width: 62rem;
  color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); max-width: 60ch;
}

/* prose — the rulebook ------------------------------------------------------- */
.doc {
  max-width: 65ch; padding: var(--space-xl) var(--page-gutter) 0;
  margin-inline: 0;
}
.doc-head h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-display-s); line-height: 1.08; margin: 0 0 var(--space-xs);
}
.doc-head .doc-sub { color: var(--color-muted); font-weight: 600; margin: 0 0 var(--space-md); }
.doc .lede { font-size: var(--text-md); font-weight: 600; color: var(--color-ink-2); }
.doc h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-lg); line-height: 1.15; margin: var(--space-2xl) 0 var(--space-sm);
}
.doc h2 .rule-no {
  display: inline-grid; place-items: center;
  min-width: 1.9em; height: 1.9em; margin-right: var(--space-sm);
  background: var(--color-splash); border: 3px solid var(--color-ink); border-radius: var(--radius-pill);
  font-size: 0.62em; color: var(--color-ink);
}
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li { margin-block: var(--space-2xs); }

/* editable slots */
.slot {
  display: inline-block; min-width: 3ch;
  background: var(--color-paper-2);
  border: 2px dashed var(--color-splash-deep); border-radius: var(--radius-md);
  padding: 0 var(--space-xs);
  font-weight: 700;
}
.slot:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; background: var(--color-card); }
.slot:empty::before { content: "________"; color: var(--color-muted); font-weight: 400; }

/* action bar on /rules */
.doc-actions {
  position: sticky; top: var(--space-xs); z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center;
  background: var(--color-card);
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop-sm);
  margin: var(--space-md) var(--page-gutter) 0;
  padding: var(--space-sm) var(--space-md);
}
.doc-actions .hint { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); }

/* workbench (/generator) --------------------------------------------------- */
.bench {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-xl); padding: var(--space-xl) var(--page-gutter) 0;
  max-width: 72rem;
}
.bench-head { padding: var(--space-xl) var(--page-gutter) 0; max-width: 72rem; }
.bench-head h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-display-s); line-height: 1.08; margin: 0 0 var(--space-xs);
}
.bench-head p { max-width: 55ch; color: var(--color-ink-2); font-weight: 600; margin: 0; }
.bench label { display: block; font-weight: 700; margin-bottom: var(--space-2xs); }
.bench .field-hint { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); margin: var(--space-2xs) 0 var(--space-sm); }
.bench textarea {
  width: 100%; min-height: 16rem; resize: vertical;
  font-family: var(--font-outlier); font-size: var(--text-sm); line-height: 1.7;
  color: var(--color-ink); background: var(--color-card);
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.bench textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.bench-controls { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-md); }
.field-error { color: var(--color-error); font-weight: 700; margin: var(--space-sm) 0 0; min-height: 1.5em; }

.chain {
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: 0 6px 0 0 var(--color-splash);
  padding: var(--space-lg); min-height: 16rem;
}
.chain[data-empty="true"] { display: grid; place-items: center; color: var(--color-muted); font-weight: 600; }
.chain ol {
  list-style: none; counter-reset: mark; margin: 0; padding: 0;
  font-family: var(--font-outlier); font-size: var(--text-sm); line-height: 1.9;
  font-variant-numeric: tabular-nums;
}
.chain li { counter-increment: mark; display: flex; gap: var(--space-sm); align-items: baseline; }
.chain li::before {
  content: counter(mark, decimal-leading-zero);
  color: var(--color-accent); font-weight: 700; flex: none;
}
.chain .arrow { color: var(--color-splash-deep); }
.chain-meta { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); margin-top: var(--space-sm); }
.chain-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* inline join form (homepage + /join) -------------------------------------- */
.join-inline { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.code-input {
  font-family: var(--font-outlier); font-size: var(--text-md); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  width: 9ch; min-height: 52px;
  border: 3px solid var(--color-ink); border-radius: var(--radius-pill);
  background: var(--color-card); color: var(--color-ink);
  padding: var(--space-xs) var(--space-md);
}
.code-input::placeholder { color: var(--color-muted); letter-spacing: 0.08em; }
.code-input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* published code display ---------------------------------------------------- */
.code-display {
  display: inline-block;
  font-family: var(--font-outlier); font-weight: 700; font-size: var(--text-2xl);
  letter-spacing: 0.22em; text-transform: uppercase;
  border: 3px dashed var(--color-splash-deep); border-radius: var(--radius-lg);
  color: var(--color-splash-deep);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-paper-2);
}
.publish-panel {
  margin-top: var(--space-xl);
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  box-shadow: 0 6px 0 0 var(--color-lime);
  padding: var(--space-lg); background: var(--color-card);
}
.publish-panel[hidden] { display: none; }
.publish-panel h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); margin: 0 0 var(--space-sm); }
.publish-panel .share-line { color: var(--color-ink-2); }

/* join page ------------------------------------------------------------------ */
.gamedoc-school {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-xl); line-height: 1.1; margin: var(--space-xl) 0 var(--space-2xs);
}
.gamedoc-meta { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); margin: 0 0 var(--space-lg); }
.droplet-divider { display: flex; gap: var(--space-sm); padding: var(--space-2xl) var(--page-gutter) 0; }
.droplet-divider svg { width: 18px; height: auto; }

/* season kit — tabs, board, target card, console -------------------------- */
.tab-row { display: flex; gap: var(--space-xs); margin: var(--space-lg) 0; }
.tab-btn {
  cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-md);
  border: 3px solid var(--color-ink); border-radius: var(--radius-pill);
  background: var(--color-card); color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out);
}
.tab-btn:hover { background: var(--color-paper-2); }
.tab-btn[aria-selected="true"] { background: var(--color-splash); }
.tab-btn:active { transform: translateY(1px); }

.board-note {
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  background: var(--color-sun);
  padding: var(--space-sm) var(--space-md);
  font-weight: 700; margin: 0 0 var(--space-md);
}
.countdown {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
}
.countdown-label { font-family: var(--font-display); font-size: var(--text-md); }
.countdown-clock {
  font-family: var(--font-outlier); font-weight: 700; font-size: var(--text-xl);
  font-variant-numeric: tabular-nums; color: var(--color-splash-deep); white-space: nowrap;
}

.target-card {
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  box-shadow: 0 6px 0 0 var(--color-accent);
  background: var(--color-card);
  padding: var(--space-lg); margin: 0 0 var(--space-xl);
}
.target-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); margin: 0 0 var(--space-sm); }
.target-name {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl);
  line-height: 1.05; margin: 0 0 var(--space-sm); color: var(--color-accent);
  overflow-wrap: anywhere; min-width: 0;
}
.code-input--sm { font-size: var(--text-base); width: 8ch; min-height: 48px; }

.board-heading { font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); margin: 0 0 var(--space-sm); }
.board-grid {
  list-style: none; margin: 0 0 var(--space-md); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
.board-chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  border: 2.5px solid var(--color-ink); border-radius: var(--radius-pill);
  background: var(--color-card); font-weight: 700; font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-sm);
}
.board-chip--out { background: var(--color-paper-2); color: var(--color-muted); }
.kill-count { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-splash-deep); white-space: nowrap; }
.soaked-chip {
  font-family: var(--font-display); font-size: var(--text-xs);
  color: var(--color-card); background: var(--color-splash-deep);
  border-radius: var(--radius-pill); padding: 1px var(--space-xs);
  transform: rotate(-4deg); white-space: nowrap;
}

.console-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg); padding: var(--space-lg) var(--page-gutter) 0; max-width: 72rem;
}
.console-card {
  border: 3px solid var(--color-ink); border-radius: var(--radius-lg);
  background: var(--color-card); box-shadow: var(--shadow-pop-sm);
  padding: var(--space-lg);
}
.console-card h2, .console-roster h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); margin: 0 0 var(--space-sm); }
.console-card label { display: block; font-weight: 700; margin-bottom: var(--space-2xs); }
.console-input {
  width: 100%; font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
  color: var(--color-ink); background: var(--color-paper);
  border: 3px solid var(--color-ink); border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm); min-height: 48px;
}
.console-input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
textarea.console-input { resize: vertical; min-height: 4.5rem; }
#addName { width: auto; flex: 1 1 12rem; }
.console-roster { padding: var(--space-2xl) var(--page-gutter) 0; max-width: 72rem; }
.alive-note { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); margin-left: var(--space-sm); }
.table-scroll { overflow-x: auto; margin-top: var(--space-md); }
.console-table {
  border-collapse: collapse; width: 100%; min-width: 40rem;
  background: var(--color-card); border: 3px solid var(--color-ink); border-radius: var(--radius-md);
}
.console-table th, .console-table td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 2px solid var(--color-rule); }
.console-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.console-table tr:last-child td { border-bottom: none; }
.mono-cell { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.btn--table { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); box-shadow: var(--shadow-pop-sm); min-height: 0; }

/* seo body copy under the tools */
.underdoc { max-width: 65ch; padding: var(--space-2xl) var(--page-gutter) 0; }
.underdoc h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.15; margin: var(--space-xl) 0 var(--space-sm); }

/* responsive --------------------------------------------------------------- */
@media (max-width: 40rem) {
  .slab-nav ul { gap: var(--space-2xs); }
  .nav-slab { padding-inline: var(--space-md); }
  .slab-mark { font-size: var(--text-base); }
  .slab-nav a { padding-inline: var(--space-xs); }
  .tool-cards { grid-template-columns: minmax(0, 1fr); }
  .bench { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .hero { padding-top: var(--space-lg); }
  .hero--split { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-sm) var(--space-xl); gap: var(--space-md); }
  .hero-art { justify-self: start; order: -1; }
  .hero-art svg { width: clamp(160px, 46vw, 230px); }
  .stamp--on-art { font-size: var(--text-sm); right: 0; bottom: 0; }
  .role-split { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-lg); }
  .badge { width: 5.6rem; height: 5.6rem; font-size: 0.72rem; }
  .code-display { font-size: var(--text-xl); letter-spacing: 0.14em; }
  .splash-mark { width: 56px; top: -14px; }
  .console-grid { grid-template-columns: minmax(0, 1fr); }
  .countdown-clock { font-size: var(--text-lg); }
  .target-name { font-size: var(--text-xl); }
}
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .slab-nav a { padding-block: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .foot-marquee__track { animation: none; }
  .bob { animation: none; }
  * { transition-duration: 0ms !important; }
}

/* print — /rules becomes the handout --------------------------------------- */
@media print {
  .nav-slab, .doc-actions, .foot-marquee, .foot-links, .underdoc, .publish-panel { display: none; }
  body { background: var(--color-print-paper); color: var(--color-print-ink); }
  .doc-head h1 { color: var(--color-print-ink); -webkit-text-stroke: 0; text-shadow: none; }
  .doc { max-width: none; padding: 0; }
  .slot { border: none; border-bottom: 1px solid var(--color-print-ink); background: none; }
  .doc h2 .rule-no { border: 1px solid var(--color-print-ink); background: none; }
  a { text-decoration: none; color: var(--color-print-ink); }
}