/* Sketch Relay: a carbon-copy order pad. Every turn is the next coloured copy,
   the table is carbon paper, and all ink is carbon blue or rubber-stamp red. */

:root {
  --carbon: #232c8e;
  --carbon-deep: #171e6b;
  --ink: #18206e;
  --stamp: #c81e2a;
  --sheet-0: #fdfeff;
  --sheet-1: #fff1a6;
  --sheet-2: #ffc7d4;
  --sheet-3: #bfebd3;
  --focus: #ffd400;
  --display: Rockwell, "Roboto Slab", "DejaVu Serif", Georgia, serif;
  --typed: "American Typewriter", "Courier New", Georgia, serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--carbon);
  color: var(--ink);
  font: 400 1rem/1.45 var(--typed);
  overflow-wrap: anywhere; /* A 14-letter name must never widen the page. */
}

#app { min-height: 100dvh; transition: filter .15s; }
.is-paused #app { filter: blur(22px); }

h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.12; }
h2:focus, h3:focus { outline: none; }
p { margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); }

/* Buttons feel like printed tabs on the form, not app chips. */
.btn {
  appearance: none;
  border: 2px solid var(--ink);
  border-radius: 3px;
  min-height: 46px;
  padding: .55rem 1rem;
  font: 700 1rem/1.15 var(--display);
  color: var(--ink);
  background: var(--sheet-0);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--stamp); border-color: var(--carbon-deep); color: #fff; box-shadow: 3px 3px 0 var(--carbon-deep); }
.btn-primary:disabled { background: transparent; color: var(--ink); border: 2px dashed var(--ink); opacity: .75; }
.btn-paper { background: var(--sheet-1); }
.btn-quiet { background: transparent; border-color: #fff; color: #fff; box-shadow: none; }
.btn-big { font-size: 1.2rem; padding: .8rem 1.3rem; min-height: 56px; }
.btn-bar { background: var(--sheet-0); padding: .3rem .8rem; min-height: 44px; box-shadow: none; }

.button-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* The pad. Coloured copies peek out behind the sheet you are on. */
.sheet {
  position: relative;
  padding: 1.5rem 1rem 1rem;
  border-radius: 2px;
  background-image: radial-gradient(circle at 9px 9px, var(--carbon) 3.2px, transparent 3.6px);
  background-size: 19px 19px;
  background-repeat: repeat-x;
}
.sheet-0 { background-color: var(--sheet-0); box-shadow: 5px 5px 0 var(--sheet-1), 10px 10px 0 var(--sheet-2), 15px 15px 0 var(--sheet-3); }
.sheet-1 { background-color: var(--sheet-1); box-shadow: 5px 5px 0 var(--sheet-2), 10px 10px 0 var(--sheet-3); }
.sheet-2 { background-color: var(--sheet-2); box-shadow: 5px 5px 0 var(--sheet-3); }
.sheet-3 { background-color: var(--sheet-3); }

/* Title: the name degrades down the copies, which is the whole game. */
.title-screen {
  min-height: 100dvh;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
  display: grid;
  gap: 2rem;
  align-content: center;
}
.title-stack { display: grid; container-type: inline-size; }
.title-sheet {
  padding: 1.35rem 1rem .75rem 1.1rem;
  transform-origin: 0 100%;
  background-image: radial-gradient(circle at 9px 7px, var(--carbon) 2.4px, transparent 2.8px);
  background-size: 19px 14px;
  background-repeat: repeat-x;
}
.title-copy {
  font: 700 12.4cqw/1.08 var(--display);
  letter-spacing: -.02em;
  margin: 0;
  white-space: nowrap;
  color: var(--ink);
}
.title-sheet-0 { background-color: var(--sheet-0); z-index: 4; }
.title-sheet-1 { background-color: var(--sheet-1); z-index: 3; margin-left: 1.4%; margin-right: -1%; transform: rotate(-.7deg); }
.title-sheet-2 { background-color: var(--sheet-2); z-index: 2; margin-left: 2.8%; margin-right: -1.6%; transform: rotate(.6deg); }
.title-sheet-3 { background-color: var(--sheet-3); z-index: 1; margin-left: 4.2%; margin-right: -2.2%; transform: rotate(-.9deg); }
.title-sheet-1 .title-copy { opacity: .84; text-shadow: 1px 1px 0 rgba(27, 42, 138, .4); }
.title-sheet-2 .title-copy { opacity: .66; filter: blur(.5px); text-shadow: 2px 1px 0 rgba(27, 42, 138, .36), -1px 1px 0 rgba(27, 42, 138, .2); }
.title-sheet-3 .title-copy { opacity: .5; filter: blur(1px); text-shadow: 3px 2px 1px rgba(27, 42, 138, .4), -2px 1px 1px rgba(27, 42, 138, .24); }

.title-side { color: #fff; display: grid; gap: .9rem; max-width: 34rem; }
.title-pitch { font-size: 1.15rem; line-height: 1.5; }
.title-meta { opacity: .86; }
.title-side .btn-paper { background: var(--sheet-1); }

@media (prefers-reduced-motion: no-preference) {
  .title-sheet { animation: deal .42s cubic-bezier(.2, .9, .3, 1) both; }
  .title-sheet-0 { animation-delay: .32s; }
  .title-sheet-1 { animation-delay: .22s; }
  .title-sheet-2 { animation-delay: .12s; }
  .title-sheet-3 { animation-delay: 0s; }
  @keyframes deal { from { opacity: 0; translate: 0 -46px; } }
}

/* Setup */
.setup-screen { max-width: 640px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.setup { display: grid; gap: 1.1rem; }
.setup h2 { font-size: 1.9rem; }

.field { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; min-width: 0; }
.field legend, .ruling legend { font: 700 1.02rem/1.2 var(--display); padding: 0; margin-bottom: .4rem; }
.field-note { font-size: .92rem; }

.segments { display: flex; flex-wrap: wrap; gap: 0; }
.segment { position: relative; flex: 1 1 auto; min-width: 58px; }
.segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.segment span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .3rem .7rem; text-align: center;
  border: 2px solid var(--ink); margin-left: -2px; background: transparent;
  font: 700 1rem/1.15 var(--display);
}
.segment:first-child span { margin-left: 0; }
.segment input:checked + span { background: var(--ink); color: #fff; }
.segment input:disabled + span { opacity: .4; text-decoration: line-through; }
.segment input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; position: relative; z-index: 1; }

.names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.name-field input {
  width: 100%; min-height: 46px; padding: .4rem .6rem;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: #eef0fb; color: var(--ink);
  font: 400 1.05rem var(--typed);
}
.name-field input::placeholder { color: #555d9e; }

/* Privacy screen: nothing from the last turn is in the page while this shows. */
.pass-screen {
  min-height: 100dvh;
  padding: 1.5rem 1rem 2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .85rem; text-align: center; color: #fff;
}
.pass-pad { position: relative; width: 150px; height: 112px; margin-bottom: 1rem; }
.pass-pad-sheet {
  position: absolute; inset: 0;
  translate: calc(var(--i) * 7px) calc(var(--i) * 7px);
  z-index: calc(6 - var(--i));
  border-radius: 2px;
  background-image: radial-gradient(circle at 7px 7px, var(--carbon) 2.2px, transparent 2.6px);
  background-size: 14px 14px; background-repeat: repeat-x;
}
.pass-pad-spread .pass-pad-sheet { translate: calc((var(--i) - 1.5) * 34px) 0; rotate: calc((var(--i) - 1.5) * 7deg); }
.pass-relay { opacity: .86; }
.pass-name { font-size: clamp(2.1rem, 9vw, 3.6rem); max-width: 20ch; overflow-wrap: anywhere; }
.pass-note { font-size: 1.1rem; max-width: 34ch; }
.pass-warning { background: var(--sheet-1); color: var(--ink); padding: .6rem .8rem; max-width: 40ch; }
.pass-screen .btn-big { margin-top: .6rem; max-width: 100%; overflow-wrap: anywhere; }

/* Top bar */
.turn-screen { max-width: 1180px; margin: 0 auto; padding: .6rem .75rem 1.5rem; }
.bar { display: flex; align-items: center; gap: .6rem; color: #fff; margin-bottom: .7rem; }
.tabs { list-style: none; display: flex; gap: 3px; padding: 0; margin: 0; flex: none; }
.tab { width: clamp(12px, 5vw, 22px); height: 28px; opacity: .3; }
.tab-done { opacity: .55; }
.tab-now { opacity: 1; height: 34px; }
.bar-relay { font-size: .95rem; line-height: 1.1; flex: 1; min-width: 0; }
.clock {
  font: 700 1.5rem/1 var(--display);
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); outline: 2px solid #fff;
  padding: .32rem .55rem; min-width: 4.1rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.clock-low { background: var(--stamp); color: #fff; }

/* Drawing */
.draw-sheet { display: grid; gap: .9rem; }
.brief { display: grid; gap: .25rem; margin-bottom: .55rem; }
.brief-lead { font-size: 1.02rem; font-weight: 400; }
.brief-caption { font: 400 1.22rem/1.3 var(--display); }
.detail { font-weight: 700; }
.detail-changed {
  color: var(--stamp);
  text-decoration: underline wavy 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.sketch-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 2px dashed rgba(24, 32, 110, .55);
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
}
.sketch-frame-live { border-style: solid; }
.sketch-canvas { display: block; width: 100%; height: 100%; }
.sketch-live { touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.sketch-live:focus-visible { outline-offset: -4px; box-shadow: none; }

.pad-cursor {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 2px solid var(--stamp); border-radius: 50%;
  pointer-events: none;
}
.pad-cursor::after { content: ""; position: absolute; left: 8px; top: 8px; width: 4px; height: 4px; background: var(--stamp); }
.pad-cursor.is-down { background: rgba(200, 30, 42, .3); }
.pad-ghost {
  position: absolute; transform: translate(-50%, -50%);
  color: var(--ink); opacity: .55; pointer-events: none;
}
.stamp-art { display: block; width: 100%; height: auto; }

.draw-notice { margin-top: .4rem; padding: .35rem .6rem; background: var(--ink); color: #fff; font-size: .95rem; }
.key-help { margin-top: .4rem; font-size: .84rem; }
@media (hover: none) { .key-help { display: none; } }

.draw-tools { display: grid; gap: .6rem; align-content: start; }
.tool-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.inks { display: flex; }
.ink { position: relative; display: block; width: 40px; height: 44px; cursor: pointer; }
.ink input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.ink-dot { display: block; width: 26px; height: 26px; margin: 9px 7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px transparent; }
.ink input:checked + .ink-dot { box-shadow: 0 0 0 3px var(--ink); }
.ink input:focus-visible + .ink-dot { outline: 3px solid var(--focus); outline-offset: 4px; }

.pen-tools { display: flex; flex: 1 1 150px; }
.tool {
  overflow-wrap: normal;
  appearance: none; min-height: 44px; padding: .25rem .8rem;
  border: 2px solid var(--ink); border-radius: 2px;
  background: transparent; color: var(--ink);
  font: 700 .95rem/1.1 var(--display); cursor: pointer;
}
.tool:disabled { opacity: .4; cursor: not-allowed; }
.tool-row > .tool { flex: 1 1 0; }
.tool-radio { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; margin-left: -2px; padding: 0; border-radius: 0; }
.tool-radio:first-child { margin-left: 0; }
.tool-radio span { padding: 0 .35rem; }
.tool-radio input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.tool-radio:has(input:checked) { background: var(--ink); color: #fff; }
.tool-radio:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }

.tray { display: grid; gap: .4rem; }
.tray-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.tray-head h3 { font-size: 1.05rem; }
.stamp-count { font-size: .95rem; }
.tray-tabs { display: grid; grid-template-columns: repeat(4, auto); }
.tray-tab {
  overflow-wrap: normal;
  appearance: none; min-height: 40px; padding: .2rem;
  border: 2px solid var(--ink); margin-left: -2px; background: transparent; color: var(--ink);
  font: 700 .86rem/1.05 var(--display); cursor: pointer;
}
.tray-tab:first-child { margin-left: 0; }
.tray-tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tray-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.stamp-btn {
  appearance: none; aspect-ratio: 1; padding: 4px; min-width: 0; min-height: 44px;
  border: 2px solid transparent; border-radius: 3px;
  background: rgba(255, 255, 255, .55); color: var(--ink); cursor: pointer;
}
.stamp-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.stamp-btn:disabled { opacity: .3; cursor: not-allowed; }
.btn-finish { width: 100%; min-height: 54px; font-size: 1.1rem; }

/* Choosing */
.choose-sheet { display: grid; gap: .9rem; }
.choose-sketch { display: grid; gap: .55rem; align-content: start; }
.choose-sketch .brief-lead { font-size: 1.3rem; font-weight: 700; }
.choose-list { display: grid; gap: .55rem; align-content: start; }
.options { display: grid; gap: .35rem; }
.option {
  position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: .45rem; align-items: start;
  min-height: 46px; padding: .4rem .55rem .4rem .35rem;
  background: rgba(255, 255, 255, .5); border: 2px solid transparent; cursor: pointer;
}
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option-key { font: 700 1rem/1.5rem var(--display); text-align: center; border: 2px solid currentColor; border-radius: 50%; width: 1.75rem; height: 1.75rem; }
.option-text { font-size: .96rem; line-height: 1.3; }
.option-text .detail { font-weight: 400; }
.option:has(input:checked) { background: var(--ink); color: #fff; }
.option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Reveal */
.reveal-screen { max-width: 1180px; margin: 0 auto; padding: 1rem .75rem 2.5rem; display: grid; gap: 1rem; color: #fff; }
.reveal-place { font-size: 1rem; opacity: .9; }
.reveal-origin { font-size: clamp(1.5rem, 4.4vw, 2.5rem); margin-top: .25rem; }
.reveal-cards { display: grid; gap: 1.2rem; color: var(--ink); }
.reveal-card { display: grid; gap: .5rem; align-content: start; }
.reveal-card h3 { font-size: 1.02rem; }
.reveal-caption { font: 400 1.25rem/1.35 var(--display); padding: .3rem 0 .6rem; }
.reveal-caption .detail { font-weight: 400; }
.reveal-caption .detail-changed { font-weight: 700; }
.reveal-action { display: flex; justify-content: center; }
.reveal-check { color: var(--ink); display: grid; gap: 1rem; }
.reveal-menu { justify-self: start; }

@media (prefers-reduced-motion: no-preference) {
  .slap { animation: slap .26s cubic-bezier(.2, 1.3, .4, 1) both; }
  @keyframes slap { from { opacity: 0; scale: 1.07; rotate: -1.6deg; } }
}

.check-sheet, .relay-tally { display: grid; gap: .8rem; max-width: 780px; width: 100%; justify-self: center; }
.check-sheet h3, .relay-tally h3 { font-size: 1.5rem; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.check-row { display: grid; gap: .3rem; padding-bottom: .75rem; border-bottom: 2px dotted rgba(24, 32, 110, .5); }
.check-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.check-top h4 { font-size: 1.1rem; }
.rubber {
  font: 700 1rem/1 var(--display); padding: .25rem .5rem;
  border: 2.5px solid currentColor; border-radius: 4px; rotate: -3deg;
  white-space: nowrap;
}
.rubber-kept { color: var(--ink); }
.rubber-returned { color: #0e6b45; }
.rubber-lost { color: var(--stamp); rotate: 3deg; }
.chain { display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: baseline; }
.chain-step + .chain-step::before { content: "then "; font-weight: 400; color: var(--ink); text-decoration: none; display: inline-block; margin-right: .3em; }
.chain-step { font-weight: 700; }
.chain-wrong { color: var(--stamp); }
.check-note { font-size: .95rem; }
.check-message { background: var(--stamp); color: #fff; padding: .4rem .6rem; }
.ruling { border: 0; padding: 0; margin: .15rem 0 0; min-width: 0; }

/* Tallies read like the bottom of a till receipt */
.tally { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.tally-line { display: flex; align-items: baseline; gap: .4rem; }
.tally-leader { flex: 1; border-bottom: 2px dotted rgba(24, 32, 110, .6); min-width: 1rem; }
.tally-points { font: 700 1.05rem var(--display); font-variant-numeric: tabular-nums; }
.tally-total { margin-top: .3rem; padding-top: .4rem; border-top: 2px solid var(--ink); font: 700 1.2rem var(--display); }
.tally-total .tally-points { font-size: 1.35rem; }

/* Results */
.results-screen { max-width: 980px; margin: 0 auto; padding: 1.25rem .85rem 3rem; display: grid; gap: 1.5rem; color: #fff; }
.receipt { color: var(--ink); display: grid; gap: .7rem; overflow: clip; }
.receipt h2 { font-size: 2rem; }
.verdict-stamp {
  justify-self: start;
  font: 700 clamp(2rem, 9vw, 3.4rem)/1 var(--display);
  color: var(--stamp);
  border: 5px solid var(--stamp); border-radius: 8px;
  padding: .35rem .7rem; rotate: -3.5deg; margin: .6rem .2rem .3rem;
}
@media (prefers-reduced-motion: no-preference) {
  .verdict-stamp { animation: thump .34s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
  @keyframes thump { from { opacity: 0; scale: 1.7; } }
}
.receipt-line { font-size: 1.1rem; }
.receipt-local { font-size: .92rem; }
.awards { display: grid; gap: 1.2rem; }
.award { border-left: 5px solid var(--sheet-1); padding-left: .75rem; }
.award h4 { font-size: 1rem; font-weight: 400; color: var(--sheet-1); }
.award-who { font: 700 1.6rem/1.15 var(--display); overflow-wrap: anywhere; }
.keepsakes { display: grid; gap: 1.4rem; }
.keepsake { background: var(--sheet-1); color: var(--ink); padding: .9rem; display: grid; gap: .55rem; }
.keepsake:nth-child(2) { background: var(--sheet-2); }
.keepsake:nth-child(3) { background: var(--sheet-3); }
.keepsake h4 { font-size: 1.2rem; }
.keepsake-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.keepsake .btn { justify-self: start; background: var(--sheet-0); }
.keepsake-to .detail { font-weight: 400; }
.keepsake-to .detail-changed { font-weight: 700; }

/* Dialogs */
dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 0; border-radius: 2px; padding: 1.5rem 1.1rem 1.2rem;
  background: var(--sheet-1) radial-gradient(circle at 9px 9px, var(--carbon) 3.2px, transparent 3.6px) 0 0 / 19px 19px repeat-x;
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--carbon-deep);
}
dialog::backdrop { background: rgba(23, 30, 107, .75); }
dialog h2 { font-size: 1.7rem; margin-bottom: .6rem; }
dialog h3 { font-size: 1.08rem; margin: .9rem 0 .3rem; }
dialog p { margin-bottom: .45rem; }
.rules-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
#rules form { margin-top: .9rem; }
.menu-actions { display: grid; gap: .6rem; }
.menu-reason { font-weight: 700; }
.switch { display: flex; align-items: center; gap: .6rem; min-height: 44px; font: 700 1rem var(--display); cursor: pointer; }
.switch input { width: 24px; height: 24px; accent-color: var(--ink); }
.noscript { color: #fff; padding: 2rem; }

/* Laptop and up: sheet and tools sit side by side so the sketch stays in view. */
@media (min-width: 880px) {
  .title-screen { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: center; gap: 3rem; }
  .draw-sheet { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; padding: 1.7rem 1.2rem 1.2rem; }
  .draw-main .sketch-frame { width: min(100%, calc((100dvh - 260px) * 4 / 3)); }
  .choose-sheet { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); gap: 1.2rem; padding: 1.7rem 1.2rem 1.2rem; }
  .choose-sketch .sketch-frame { width: min(100%, calc((100dvh - 210px) * 4 / 3)); }
  .tray-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .reveal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awards { grid-template-columns: 1fr 1fr; }
  .keepsakes { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
}

/* A phone on its side: the sketch and the tools must both fit in very little height. */
@media (orientation: landscape) and (max-height: 520px) {
  .turn-screen { padding-top: .3rem; }
  .bar { margin-bottom: .3rem; }
  .draw-sheet, .choose-sheet { grid-template-columns: minmax(0, auto) minmax(260px, 1fr); gap: .8rem; padding: 1.3rem .7rem .7rem; }
  .brief { margin-bottom: .3rem; }
  .brief-lead { font-size: .85rem; }
  .brief-caption { font-size: .92rem; }
  .key-help { display: none; }
  .draw-main .sketch-frame { width: calc((100dvh - 148px) * 4 / 3); min-width: 240px; }
  .choose-sketch .sketch-frame { width: calc((100dvh - 120px) * 4 / 3); min-width: 240px; }
  .choose-sketch .brief-lead { font-size: 1rem; }
  .tray-row { grid-template-columns: repeat(6, 1fr); }
  .pass-screen { padding: .6rem 1rem; gap: .4rem; }
  .pass-pad { display: none; }
  .pass-name { font-size: 1.7rem; }
  .pass-screen .btn-big { margin-top: .2rem; }
}

@media (min-width: 1240px) {
  .reveal-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .segment input:checked + span, .option:has(input:checked), .tool-radio:has(input:checked) { outline: 3px solid Highlight; }
}