/* Inkfolk: paper and ink. The type is self-hosted (fonts/, see its README):
   Fira Sans Extra Condensed for names and numbers, Commissioner (flared at
   its blackest) for headings, Commissioner for text and buttons, Noto Sans
   Mono for small labels, matching the card. */

:root {
  --paper: #fff8f3;
  --ink: #141414;
  --muted: #5d5650;
  --line: #141414;
  --focus: #1e5aa8;
  --scripts: "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Thai", "Noto Sans Devanagari";
  --display: "Commissioner Flared", "Commissioner", var(--scripts), system-ui, sans-serif;
  --name: "Fira Sans Extra Condensed", "Commissioner", var(--scripts), system-ui, sans-serif;
  --body: "Commissioner", var(--scripts), system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Noto Sans Mono", var(--scripts), ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* The hub's navbar height (it sets this on <html>), else the home indicator. */
  --sab: var(--random-nav-h, env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; margin: 0; }

html, body { background: var(--paper); color: var(--ink); }

body {
  font: 16px/1.5 var(--body);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
}

.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 6px;
}
.top .mark { display: block; }
.top .word { font: 900 22px/1 var(--display); letter-spacing: 0.01em; }

main {
  flex: 1;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  /* nav.js adds its own spacer below the page; --sab is for fixed bottom UI. */
  padding: 12vh 0 24px;
}
.screen[hidden] { display: none; }
/* A link with a card in it: say so at once, before the app has loaded to take over. */
#arriving { display: none; }
html.has-card #arriving { display: flex; }
html.has-card #start { display: none; }
#begin:disabled { opacity: 0.5; cursor: progress; }

h1 { font: 900 clamp(32px, 9vw, 44px)/1.05 var(--display); }
.lede { font-size: 17px; color: var(--muted); max-width: 26rem; }

button { font: inherit; color: inherit; }
.primary {
  align-self: flex-start;
  min-height: 48px;
  padding: 12px 22px;
  border: 3px solid var(--line);
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font: 800 18px/1 var(--body);
  cursor: pointer;
  box-shadow: 0 4px 0 #00000033;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #00000033; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* --- step header ---------------------------------------------------------- */
.stephead {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px auto;
  align-items: center;
  gap: 8px;
}
/* The draw step's title, with the cue under it: what would finish the card, one quiet line, kept inside the header's 44px. */
.title-cue { min-width: 0; display: grid; justify-items: center; }
.cue { max-width: 100%; margin: 0; font: 600 12px/1.2 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cue.off { display: none; }
.stephead h2 { font: 900 clamp(17px, 5vw, 22px)/1.1 var(--display); text-align: center; outline: none; overflow-wrap: anywhere; }
.icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.icon svg { width: 24px; height: 24px; }
.next {
  min-height: 44px;
  padding: 8px 12px;
  border: 3px solid var(--line);
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 800 16px/1 var(--body);
  cursor: pointer;
}
.next:disabled { opacity: 0.35; cursor: default; }

/* --- steps ------------------------------------------------------------------ */
.screen.step { justify-content: flex-start; gap: 14px; padding: 8px 0 24px; }
.lede.small { font-size: 15px; }
.start-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.secondary {
  min-height: 44px;
  padding: 10px 18px;
  border: 3px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: 800 16px/1 var(--body);
  cursor: pointer;
}
.secondary[hidden] { display: none; }

.dots {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 6px;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dots li {
  flex: 1;
  padding-top: 7px;
  border-top: 4px solid #1414141f;
  color: var(--muted);
}
.dots li.done { border-top-color: #14141488; }
.dots li.here { border-top-color: var(--ink); color: var(--ink); }

.colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.color-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px 14px;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
}
.color-pick[aria-checked="true"] { background: var(--c); box-shadow: 0 5px 0 var(--line); transform: translateY(-3px); }
.color-pick[aria-checked="true"] .color-name { color: var(--on, #fff); }
.color-name { font: 900 24px/1 var(--display); }
.color-pick .strip { display: flex; width: 100%; height: 16px; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; }
.color-pick .strip i { flex: 1; }

.offers { display: flex; flex-direction: column; gap: 8px; }
.offer {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 10px;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.offer[aria-checked="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 4px 0 #00000044; }
.ink-dots { display: inline-flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.offer-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offer-name { font: 800 18px/1.15 var(--body); }
.offer-text { font-size: 14px; line-height: 1.3; }
.hp { white-space: nowrap; }
.hp svg { width: 1.06em; height: 1.06em; vertical-align: -0.18em; margin: 0 0.16em 0 0.1em; }
.offer-health { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.offer-health svg { display: block; }
.offer-health small { font: 600 10px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.rare {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  border: 2px solid currentColor;
  border-radius: 6px;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.redeal { align-self: center; }

.details-form { display: flex; flex-direction: column; gap: 16px; }
.details-form label { display: flex; flex-direction: column; gap: 6px; font: 800 16px/1.2 var(--body); }
.details-form input, .details-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 3px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: 17px/1.3 var(--body);
  color: var(--ink);
}
.details-form textarea { resize: vertical; }
.details-form [aria-invalid="true"] { border-color: #b3261e; }
.at { display: flex; align-items: center; gap: 4px; font: 700 20px/1 var(--mono); }
.note { font: 13px/1.35 var(--body); color: var(--muted); }

/* Words for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The card to look at: the 3D stage, or the flat card. */
.done-card { position: relative; width: 100%; height: max(320px, calc(100dvh - 340px - var(--sab))); }
.viewer-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.viewer-stage canvas.stage3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; outline: none; }
.viewer-stage canvas.stage3d:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 18px; }
.viewer-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; min-height: 44px; }
.viewer-controls .hint { font-size: 14px; color: var(--muted); }
.card-link a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px;
  border: 3px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink);
  font: 700 15px/1 var(--mono); text-decoration: none;
}
.card-link[hidden], .tilt[hidden] { display: none; }
.tilt[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* The flat card: the two faces back to back, flipped with a CSS turn. */
.flat-card { height: 100%; aspect-ratio: 5 / 7; max-width: 100%; perspective: 1400px; cursor: pointer; outline: none; }
.flat-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 20px; }
.flat-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.6,0,.3,1); }
.flat-card.flipped .flat-inner { transform: rotateY(180deg); }
.flat-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 4%; filter: drop-shadow(0 8px 10px #0003); }
.flat-back { transform: rotateY(180deg); }
/* The flat pack: a foil-ish wrapper with a strip across the top. */
.flat-pack {
  position: relative;
  height: 100%; aspect-ratio: 5.7 / 8.1; max-width: 100%;
  border-radius: 6% / 4%;
  background: linear-gradient(160deg, var(--a), var(--b) 45%, var(--c));
  border: 3px solid var(--line);
  box-shadow: 0 10px 16px #0003;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 420ms ease, transform 520ms ease;
}
.flat-pack-strip {
  position: absolute; left: 0; right: 0; top: 0; height: 11%;
  background: inherit;
  border-bottom: 3px dashed var(--line);
  transition: transform 420ms cubic-bezier(.5,0,.7,.4), opacity 420ms ease;
}
.flat-pack-body { position: absolute; inset: 11% 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.flat-pack-name { font: 800 44px/1 var(--name); color: var(--ink); }
.flat-pack-from { font: 700 13px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--ink); }
.flat-pack.opening .flat-pack-strip { transform: translate(60%, -140%) rotate(-18deg); opacity: 0; }
.flat-pack.opening { opacity: 0; transform: translateY(18%); transition-delay: 160ms; }
.tear[hidden], .open-actions[hidden] { display: none; }
.open-actions .drew { flex-basis: 100%; font: 800 18px/1.2 var(--body); }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- draw ------------------------------------------------------------------ */
/* One column: the header, the card (it takes all the height the rest leaves), the hint line, and the dock of
   tools, which keeps the same height whichever tab is open, so the card never moves under a finger. */
.screen.draw { justify-content: flex-start; gap: 4px; padding: 4px 0 6px; }
/* The steps keep the whole height for the work: the brand bar is the start screen's. */
body.stepping .top { display: none; }
/* Narrow phones: the seven ink swatches need all of 308px, so the draw step's side margins give way. */
@media (max-width: 340px) { body:has(#draw:not([hidden])) { padding-inline: 6px; } }
.stage-wrap {
  flex: 1 1 0;
  min-height: 150px; /* (zoomed far in, the page scrolls rather than the card vanishing) */
  container-type: size;
  display: grid;
  place-items: center;
}
.stage {
  position: relative;
  /* As big as fits: the full width, or the height the dock leaves. The picture inside the border is exactly 5 : 7. */
  box-sizing: content-box;
  width: calc(min(100cqw, calc(100cqh * 5 / 7)) - 6px);
  aspect-ratio: 5 / 7;
  border: 3px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 0 #00000022;
  container-type: size; /* (the preview and its label size to the card) */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.stage > canvas, .stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* (a pinch moves the canvases with a transform from their top-left corner: see draw.js showDelta) */
.stage > canvas { transform-origin: 0 0; }
.stage .guide, .stage .ghost, .stage .scrim, .stage .kcur { pointer-events: none; }
.stage .live { cursor: crosshair; touch-action: none; }
.stage .live:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* The keyboard cursor (draw.js): a crosshair, a ring the size of the brush and a mark at each anchor, outlined in white so it shows on ink.
   It does not blink or move on its own. Under forced colors it takes the system's colors. */
.kcur[hidden] { display: none; }
.kcur path, .kcur circle { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.kcur .halo * { stroke: #fff; stroke-width: 6px; }
.kcur .main * { stroke: var(--ink); stroke-width: 2.5px; }
@media (forced-colors: active) { .kcur { forced-color-adjust: none; } .kcur .halo * { stroke: Canvas; } .kcur .main * { stroke: CanvasText; } }
.stage.pan-ready .live { cursor: grab; }
.stage.panning .live { cursor: grabbing; }
/* What the finished card will cover: a scrim over the art (under the live stroke), dashed round each zone. */
.scrim[hidden] { display: none; }
.scrim rect, .scrim circle { fill: #14141426; stroke: #14141499; stroke-width: 1.5px; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.scrim text { font: 600 var(--label, 11px) var(--mono); fill: #141414b3; dominant-baseline: middle; letter-spacing: 0.04em; text-transform: uppercase; }
.ghost .mirror-line { stroke: #14141440; stroke-width: 2px; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; transition: stroke 200ms, stroke-width 200ms; }
/* When Mirror comes on by itself, the line shows bold for a moment so the person sees what it is. */
.ghost.flash .mirror-line { stroke: var(--pen, #111); stroke-width: 4px; }
.stage.snapped { animation: snap-pulse 260ms ease-out; }
@keyframes snap-pulse {
  0% { box-shadow: 0 6px 0 #00000022, 0 0 0 0 var(--pen, #111); }
  40% { box-shadow: 0 6px 0 #00000022, 0 0 0 5px var(--pen, #111); }
  100% { box-shadow: 0 6px 0 #00000022, 0 0 0 0 transparent; }
}
.splash {
  position: absolute; inset: -20%;
  pointer-events: none;
  background: var(--splash, #fff);
  clip-path: circle(0% at 70% 30%);
  opacity: 0;
}
.stage.splashing .splash { animation: splash 520ms cubic-bezier(.3,.7,.3,1); }
@keyframes splash {
  0% { clip-path: circle(0% at 70% 30%); opacity: 1; }
  55% { clip-path: circle(85% at 50% 50%); opacity: 1; }
  100% { clip-path: circle(85% at 50% 50%); opacity: 0; }
}
/* The corner tools sit in the part of the card the ability bar covers, and fade (and stop taking touches)
   while a finger or pencil is down, so they never hide drawable art. Zoomed in, only Undo stays. */
.guide-tools, .tile-peek { transition: opacity 120ms; }
.guide-tools {
  position: absolute; left: 6px; bottom: 6px;
  display: flex; gap: 2px;
  background: #ffffffcc;
  border-radius: 12px;
}
.guide-tools .icon { width: 44px; height: 44px; color: #141414; }
.guide-tools .seed-hide[aria-pressed="true"] { color: var(--muted); }
.stage.zoomed .seed-new, .stage.zoomed .seed-hide { display: none; }
.stage.inking .guide-tools, .stage.inking .say { opacity: 0.15; pointer-events: none; }
/* Undo, on the card itself: a round 44px button beside the seed's two. */
.guide-tools .stage-undo { border-radius: 50%; }
.guide-tools .stage-undo:disabled { opacity: 0.3; }
.guide-tools .stage-undo.rewinding { background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
/* Select (format 2): the button beside Undo, the outline round the thing selected, its resize handle and the bar of edits. The bar sits at
   the card's top or bottom edge, whichever the selection is farther from, over the corner tools there; none of it is ever in the art. */
.stage-select[hidden], .sel-bar[hidden], .sel-handle[hidden], .stage > svg.sel[hidden], .tool[hidden] { display: none; }
/* (on a small card the four corner tools would run into the tile preview: Select is then in More, under Page) */
@container (max-width: 280px) { .guide-tools .stage-select { display: none; } }
.guide-tools .stage-select:disabled { opacity: 0.3; }
.guide-tools .stage-select[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.stage.selecting .live { cursor: default; }
.stage > svg.sel { pointer-events: none; }
.sel-under { fill: none; stroke: #fff; stroke-width: 4px; vector-effect: non-scaling-stroke; }
.sel-box { fill: #ffffff10; stroke: #141414; stroke-width: 2px; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) { .sel-box { animation: sel-march 700ms linear infinite; } }
@keyframes sel-march { to { stroke-dashoffset: -12; } }
@media (forced-colors: active) { .sel-box { stroke: Highlight; } .sel-under { stroke: Canvas; } }
.sel-handle {
  position: absolute; z-index: 4; width: 44px; height: 44px; padding: 0; margin: -22px 0 0 -22px;
  display: grid; place-items: center; border: 0; background: transparent; cursor: nwse-resize; touch-action: none;
}
.sel-handle span { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #141414; box-shadow: 0 2px 0 #00000040; }
.sel-handle:focus-visible span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (forced-colors: active) { .sel-handle span { forced-color-adjust: none; border-color: CanvasText; background: Canvas; } }
.sel-bar {
  position: absolute; left: 0; right: 0; z-index: 7; margin-inline: auto; width: fit-content; max-width: calc(100% - 8px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  padding: 2px; border: 2px solid var(--line); border-radius: 14px; background: #fffffff0;
}
.sel-bar.at-top { top: 4px; }
.sel-bar.at-bottom { bottom: 4px; }
.sel-bar .tool { flex: none; width: 44px; }
.sel-bar .tool[data-cap]::after { color: var(--ink); }
.sel-bar .tool svg { width: 22px; height: 22px; }
@container (max-width: 300px) { .sel-bar [data-sel=move] { display: none; } } /* (a small card has no room for a ninth button: the pad is then Cursor pad in More) */
.sel-bar [data-sel=delete] { margin-left: 8px; } /* (a gap before the one that cannot be undone by tapping it twice) */
.guide-tools .stage-select { border-radius: 12px; align-content: center; gap: 1px; }
.guide-tools .stage-select[data-cap]::after { content: attr(data-cap); font: 700 10px/1 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; }
.guide-tools .stage-select svg { width: 22px; height: 22px; }
.dock.selecting .tabs { opacity: 0.5; } /* (Select is on: the tool sets wait, the swatches recolor) */
/* (the bar covers the corner tools at its edge) */
.stage.bar-top .zoom-pill, .stage.bar-top .ink-left, .stage.bar-bottom .guide-tools { visibility: hidden; }
/* (the tile preview and the zoom buttons would sit over what is selected: they wait while Select is on) */
.stage.selecting .tile-peek, .stage.selecting .zoom-pill { visibility: hidden; }
.stage.inking .sel-bar { opacity: 0.35; }
/* The card at battle-tile size (68px wide, less on a small card: never over a quarter of it), bottom right over the ability bar's zone,
   never taking a touch, so the stroke being drawn shows in it; "thin" when most of the ink is under a pixel there; a frame when zoomed. */
.tile-peek {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  width: min(68px, 22cqw); height: calc(min(68px, 22cqw) * 1.4); margin: 0;
  border: 1.5px solid var(--line); border-radius: 5px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 0 #00000033; pointer-events: none;
}
.tile-peek[hidden] { display: none; }
.tile-peek canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile-peek .thin, .tile-peek .name { position: absolute; left: 0; right: 0; background: var(--ink); color: #fff; font: 700 12px/15px var(--mono); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
.tile-peek .thin { bottom: 0; }
.tile-peek .name { top: 0; font-size: 10px; line-height: 12px; display: none; }
.tile-peek.named .name { display: block; }
.tile-peek .thin[hidden] { display: none; }
/* Zoom out, the level, zoom in, and back to fit, top right (over the health badge's zone). */
.zoom-pill {
  position: absolute; right: 6px; top: 6px; z-index: 3;
  display: flex; align-items: center;
  background: #ffffffe6; border: 2px solid var(--line); border-radius: 14px;
}
.zoom-pill[hidden] { display: none; }
.zoom-level { padding: 0 2px; min-width: 2.4em; text-align: center; font: 700 14px/1 var(--mono); }
.zoom-pill .icon { color: var(--ink); }
.zoom-pill .icon:disabled { opacity: 0.3; }
/* Where a pencil hovers: a ring as big as the brush, in the ink's color. It never takes a touch. */
.hover-ring {
  position: absolute; left: 0; top: 0; z-index: 1;
  border: 2px solid var(--pen, #111); border-radius: 50%;
  box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #fff;
  pointer-events: none;
}
.hover-ring[hidden] { display: none; }

/* Ink left: how much of the card's tightest budget is still free, from half used. A quiet pill over the name tag's zone; amber
   from 85%. It never takes a touch. */
.ink-left {
  position: absolute; left: 6px; top: 6px; z-index: 3;
  display: grid; gap: 3px; min-width: 7.2em; margin: 0; padding: 3px 8px 5px;
  background: #ffffffe6; border: 2px solid var(--line); border-radius: 10px;
  font: 700 12px/1.2 var(--mono); color: var(--ink); pointer-events: none;
  transition: opacity 120ms;
}
.ink-left[hidden] { display: none; }
.stage.inking .ink-left { opacity: 0.15; }
.ink-bar { display: block; height: 4px; border-radius: 2px; background: #14141426; overflow: hidden; }
.ink-bar i { display: block; height: 100%; width: var(--left, 100%); background: var(--ink); border-radius: 2px; }
.ink-left.low { background: #fff3d6; }
.ink-left.low .ink-bar i { background: #c46a00; }
.ink-left.low .ink-text { color: #7a3f00; }
.ink-n { font-weight: 700; }
@container (max-width: 290px) { .ink-left { top: 56px; } } /* (a small card: under the zoom pill, not behind it) */

/* What the app says (hints, "3 undone", "Square"): a small note over the card's lower part, so the card never
   gives up a line of height to it, and it never takes a touch. */
.stage .say {
  position: absolute; left: 50%; bottom: 56px; z-index: 5; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 16px); margin: 0; padding: 6px 12px; border-radius: 12px;
  background: #141414e6; color: #fff; font: 600 13px/1.3 var(--body); text-align: center; text-wrap: balance; pointer-events: none;
}
.stage .say:empty { display: none; }
/* A heavy card's first drawing: the shell shows, with this note, while its fills are worked out (draw.js open, viewer.js). */
.drawing-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 700 14px/1 var(--mono); color: var(--ink); pointer-events: none; }
.drawing-note:empty { display: none; }
.stage.waking .live { pointer-events: none; }
.viewer-note { margin: 0; min-height: 12rem; display: grid; place-items: center; font: 700 14px/1 var(--mono); color: var(--muted); }

/* --- the dock: ink, tool sets, the tool row and Undo, and (behind More on a short screen) the rest ---- */
.dock { position: relative; display: flex; flex-direction: column; gap: 4px; }
.swatches { display: grid; grid-template-columns: repeat(7, minmax(44px, 52px)); justify-content: space-between; }
/* The button is the 44px target; the chip is drawn inside it, so neighbours can touch and still look apart. */
.swatch {
  min-width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
}
.swatch::before {
  content: ""; box-sizing: border-box;
  width: calc(100% - 6px); height: 38px;
  border: 3px solid var(--line); border-radius: 12px;
  background: var(--c);
}
.swatch[aria-checked="true"]::before {
  transform: translateY(-3px);
  box-shadow: 0 3px 0 var(--line), inset 0 0 0 3px #fff, inset 0 0 0 5px var(--line);
}
/* Tool sets: a tab per set; the row under them is the open set's tools, always the same height. */
.dock-tabs { display: flex; gap: 3px; }
.tabs { display: flex; gap: 3px; flex: 1; min-width: 0; }
@media (max-width: 380px) { .dock-tabs, .tabs { gap: 0; } }
.tab {
  flex: 1; min-width: 44px; min-height: 44px; padding: 0 2px;
  border: 2px solid transparent; border-radius: 10px; background: transparent;
  font: 700 12px/1 var(--mono); letter-spacing: 0; text-transform: uppercase; color: var(--muted); cursor: pointer;
}
.tab[aria-selected="true"], .more-toggle[aria-expanded="true"] { border-color: var(--line); background: #fff; color: var(--ink); }
.more-toggle { flex: none; min-width: 44px; }
.dock-main { display: flex; align-items: center; gap: 4px; height: 52px; }
.dock-main > .gap { width: 1px; height: 28px; background: #14141433; flex: none; }
.dock-main > .tool { flex: none; width: 44px; max-width: none; }
/* A narrow phone: size, pen, eraser, fill, pick, Undo and Redo are seven 44px buttons in 308px, with nothing between. */
@media (max-width: 440px) { .dock-main { gap: 0; } .dock-main > .gap, #panel-draw .gap { display: none; } #panel-draw { gap: 0; } }
/* Pick is a second button on the Draw row where there is room (390px and up: eight 44px buttons); at 320 it stays on the Fill tab. */
#panel-draw .pick-draw { display: none; }
@media (min-width: 390px) { #panel-draw .pick-draw { display: grid; } }
/* A narrow phone's Brush and Fill rows scroll: the last chip fades at the edge so a half chip reads as "more", and Face steps aside there. */
@media (max-width: 380px) {
  .panel .chips { padding-right: 14px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
  .dock[data-tab="brush"] [data-tool="face"], .dock[data-tab="fill"] [data-tool="face"] { display: none; }
}
.tool-slot { flex: 1; min-width: 0; height: 52px; display: flex; align-items: center; }
.panel { flex: 1; min-width: 0; height: 52px; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.panel::-webkit-scrollbar { display: none; }
.panel[hidden] { display: none; }
/* The options popover (draw.js): the options of the tool that was held (or the Width button), over the card's lower edge. It is one element
   whose contents are built for that tool. */
.tool-pop {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 6;
  display: grid; gap: 6px; padding: 8px; border: 3px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 6px 0 #00000033;
  max-height: min(24rem, max(10rem, calc(100dvh - 22rem))); overflow-y: auto; overscroll-behavior: contain;
}
.tool-pop[hidden] { display: none; }
.pop-h, .more-h { margin: 0; font: 700 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.tool-pop .chips, .more .chips { flex-wrap: wrap; overflow: visible; flex: none; }
.hatch-opts, .clip-opts, .taper-opts, .ramp-opts { display: grid; gap: 4px; }
.hatch-opts[hidden], .clip-opts[hidden], .taper-opts[hidden], .ramp-opts[hidden] { display: none; }
.chip.segb.dir { min-width: 44px; flex: 0 1 auto; padding: 0; justify-content: center; }
.chip.segb.dir svg { display: block; }
/* A row of words to choose from (the hatch angle, the scale, the gap) */
.seg { display: flex; flex-wrap: wrap; gap: 6px 4px; padding: 5px 4px 6px; }
.chip.segb { grid-auto-flow: column; gap: 6px; width: auto; min-width: 44px; flex: 1 1 auto; padding: 0 10px; font: 700 12px/1 var(--mono); color: var(--ink); }
.opt.wide { flex: 1 1 100%; }
.chip.segb .thumb { width: 20px; height: 20px; border-radius: 4px; }
/* Done: the last thing in the options popover and in More, always in reach (it stays at the bottom of the sheet as the rest scrolls). */
.tool-pop .done, .more .done, .keys-sheet .done { flex: none; position: sticky; bottom: -2px; background: var(--paper); min-height: 44px; border-color: var(--line); }
.tool-pop .wp-top { padding-top: 6px; }
.wp-top { display: flex; align-items: center; gap: 10px; }
.wp-slider { flex: 1; min-width: 0; display: grid; gap: 0; }
.width-name, .gap-name { font: 700 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.width-value { color: var(--ink); font-size: 13px; letter-spacing: 0; text-transform: none; }
.width-range { width: 100%; height: 44px; margin: 0; accent-color: var(--ink); }
.width-preview { flex: none; width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 10px; background: #fff; }
.width-btn[hidden], .gap-btn[hidden] { display: none; }
.wnum { font: 700 14px/1 var(--mono); color: var(--ink); }
.gap-btn { font: 700 12px/1 var(--mono); color: var(--ink); border: 2px solid #14141466; background: #fff; }
.chips { display: flex; gap: 5px; flex: 1; min-width: 0; padding: 4px 3px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 2px solid #14141433; border-radius: 12px; background: #fff; color: var(--pen, #111); cursor: pointer;
}
.chip[aria-checked="true"] { border-color: var(--line); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line); }
.chip .thumb { width: 36px; height: 36px; border-radius: 7px; display: block; }
.chip.bg .thumb { width: 26px; height: 36px; }
.chip svg { width: 24px; height: 24px; }
/* A brush's chip: a real stroke of it over its one-word name, so it can be told apart and found without the caption line (hidden on a short screen). */
.chip.brush { width: 58px; height: 46px; padding: 2px 0 0; grid-template-rows: 22px auto; gap: 0; align-content: center; }
.chip.brush .thumb { width: 46px; height: 20px; border-radius: 5px; }
.chip.brush .cn { font: 700 12px/1.2 var(--mono); letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
/* A tool that can be held for its options wears a small notch in its corner. */
.tool[data-hold] { position: relative; }
.tool[data-hold]::before { content: ""; position: absolute; top: 3px; right: 3px; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent var(--ink) transparent transparent; opacity: 0.45; }
.tool[data-hold][aria-pressed="true"]::before { opacity: 0.8; }
.tool, .chip, .tab, .opt { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sizes, .brushes { flex: none; }
.tool-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
/* Groups: size · pen, eraser, fill, pick · undo. */
.tool-row .gap { width: 1px; height: 28px; background: #14141433; flex: none; }
.tool {
  flex: 1;
  min-width: 44px;
  max-width: 52px;
  height: 44px;
  display: grid; place-items: center; align-content: center; gap: 1px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.tool[aria-pressed="true"] { border-color: var(--line); background: #fff; }
/* Every tool wears a one-word caption under its icon (inside its 44px: the dock keeps its height). */
.tool[data-cap]::after { content: attr(data-cap); font: 700 11px/1 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
/* The size button is a control, not a placeholder: a solid frame round the dot, which is the pen's size and colour. */
.tool[data-tool="size"] { color: var(--pen, #111); border: 2px solid #14141466; background: #fff; }
/* Clear, once tapped, asks to be tapped again. */
.tool[data-armed] { border-color: #b3261e; background: #fff; }
.tool[data-armed]::after { color: #b3261e; }
/* The pick tool sits beside the fill patterns, not among them. */
.panel > .tool { flex: none; width: 44px; }
.tool:disabled { opacity: 0.3; cursor: default; }
.tool.rewinding { background: #fff; border-color: var(--line); }
/* The rest: Steady, Snap and Tidy (and Finger draws, once a pencil has been seen), Mirror, Redo, Clear, Surprise me, and the three guides. */
/* More: the pro tools, grouped under plain headings in a sheet that opens over the card's lower edge from the More tab (at every
   height: a beginner sees the basic row, and this when they reach for it). Inline in the dock on a phone on its side, which has no room above it. */
.more {
  display: none; flex-direction: column; gap: 8px;
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 6;
  padding: 8px; border: 3px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 6px 0 #00000033;
  max-height: min(36rem, max(10rem, calc(100dvh - 22rem))); overflow-y: auto; overscroll-behavior: contain;
}
.dock.more-open .more { display: flex; }
/* The keys sheet (?): every key, in a sheet like More's, over the card's lower edge. */
.keys-sheet {
  display: none; flex-direction: column; gap: 8px;
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 6;
  padding: 8px; border: 3px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 6px 0 #00000033;
  max-height: min(36rem, max(10rem, calc(100dvh - 22rem))); overflow-y: auto; overscroll-behavior: contain;
}
.keys-sheet:not([hidden]) { display: flex; }
.keys-sheet:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.keys-title { margin: 0; font: 800 16px/1.2 var(--mono); text-transform: uppercase; }
.keys-intro { margin: 0; font: 400 13px/1.4 var(--body); color: var(--ink); }
.keys-sec { display: grid; gap: 2px; }
.keys-list { margin: 0; }
.keys-list dt { margin-top: 6px; }
.keys-list dd { margin: 2px 0 0; font: 400 13px/1.35 var(--body); color: var(--ink); }
.keys-list kbd { display: inline-block; padding: 1px 6px; border: 2px solid #14141466; border-radius: 6px; background: #fff; font: 700 12px/1.3 var(--mono); }
/* The cursor pad (draw.js): arrows, Place, Start/End, Cancel and Pan over the card's top or bottom edge, 44px each, for a switch or a finger that cannot
   drag. The corner tools it would cover wait (as they do for the bar of edits). Nothing here is in the dock, so the dock keeps its height. */
.kpad {
  position: absolute; left: 0; right: 0; bottom: 56px; z-index: 6; margin-inline: auto; width: fit-content; /* (clear of the corner tools: Undo and Select stay in reach) */
  display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; padding: 5px;
  border: 3px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 4px 0 #00000033;
}
/* (draw.js picks the first of four places that is clear of the cursor: 56px up from the bottom, 56px down from the top, then the edges) */
.kpad.t56 { bottom: auto; top: 56px; }
.kpad.b6 { bottom: 6px; }
.kpad.t6 { bottom: auto; top: 6px; }
.kpad[hidden] { display: none; }
.kp {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; align-content: center; gap: 1px;
  border: 2px solid #14141466; border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer;
}
.kp svg { width: 22px; height: 22px; }
.kp[data-cap] svg { width: 20px; height: 20px; }
.kp[data-cap]::after { content: attr(data-cap); font: 700 11px/1 var(--mono); letter-spacing: 0; text-transform: uppercase; }
.kp[aria-pressed="true"] { border-color: var(--line); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line); }
.kp[aria-disabled="true"] { opacity: 0.4; }
.kp[hidden], .kpad:not(.compact) .kp[data-kp=more] { display: none; }
/* A small card (under 320px high): the arrows and Place in three columns, Start, Cancel and Pan behind the dots button. */
.kpad.compact { grid-template-columns: repeat(3, 44px); }
.kpad.compact [data-kp=place] { grid-area: 1 / 1; }
.kpad.compact [data-kp=up] { grid-area: 1 / 2; }
.kpad.compact [data-kp=more] { grid-area: 1 / 3; }
.kpad.compact [data-kp=left] { grid-area: 2 / 1; }
.kpad.compact [data-kp=down] { grid-area: 2 / 2; }
.kpad.compact [data-kp=right] { grid-area: 2 / 3; }
.kpad.compact [data-kp=line], .kpad.compact [data-kp=cancel], .kpad.compact [data-kp=pan] { display: none; }
.kpad.compact.open [data-kp=line], .kpad.compact.open [data-kp=cancel], .kpad.compact.open [data-kp=pan] { display: grid; grid-row: 3; }
.kpad.compact.open [data-kp=line][hidden] { display: none; }
.stage.pad-b56 .tile-peek, .stage.pad-t56 .ink-left, .stage.pad-b6 .tile-peek, .stage.pad-b6 .guide-tools, .stage.pad-t6 .ink-left, .stage.pad-t6 .zoom-pill { visibility: hidden; }
.stage.pad-b56 .say, .stage.pad-b6 .say { bottom: 176px; }
@media (forced-colors: active) { .kp[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; } }
.more-sec { display: grid; gap: 4px; flex: none; }
.more-sec[hidden] { display: none; }
.opts, .more .tool-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; flex: none; max-width: 100%; }
.more .tool-row .tool { flex: none; width: 52px; height: 48px; align-content: center; gap: 0; }
.opt {
  flex: 1 1 56px; min-width: 56px; min-height: 48px; padding: 0 8px; /* (as tall as the captioned tools, so a row is one height whichever it holds) */
  display: grid; place-content: center; gap: 1px; text-align: center;
  border: 2px solid #14141433; border-radius: 12px; background: transparent; color: var(--ink);
  font: 700 12px/1.1 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer;
}
.opt > span { white-space: nowrap; }
.opt .v:empty { display: none; }
.opt .v { font-size: 12px; letter-spacing: 0; text-transform: none; }
.opt[aria-pressed="true"] { border-color: var(--line); background: #fff; }
.opt[aria-disabled="true"] { opacity: 0.45; }
.opt[hidden] { display: none; }
/* A short screen (a small phone, a landscape laptop window) has no room for the one-line caption under the tools. */
@media (max-height: 799px) { .caption { display: none; } }
/* The step dots stay for screen readers, and are not drawn on a short screen. */
@media (max-height: 640px) { .screen.draw > .dots { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } }

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

/* What the chosen tool is, and how it's used, in words. */
.caption { font: 600 12px/1.3 var(--mono); color: var(--muted); min-height: 1.3em; text-align: center; }
/* The page can scroll when the card has been given its smallest size. */
.screen.draw { overflow: visible; }
/* Very narrow, or text and zoom pushed to 200%+: the header's Next drops to its own row. */
@media (max-width: 300px) {
  .stephead { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .stephead .next { grid-column: 1 / -1; }
}
/* A short phone (320 x 568): the keys list is a sheet over the whole screen's lower part, tall enough to read, its intro dropped. */
@media (max-height: 640px) {
  .keys-sheet { position: fixed; left: 4px; right: 4px; bottom: calc(var(--sab, 0px) + 4px); max-height: calc(100dvh - 5rem); z-index: 20; }
  .keys-intro { display: none; }
}
/* A phone on its side: the card down the left at full height, the header and dock on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  .screen.draw {
    --stage-w: max(160px, calc((100dvh - var(--sab) - 16px) * 5 / 7));
    display: grid; grid-template-columns: var(--stage-w) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "stage head" "stage dots" "stage tools";
    column-gap: 16px; row-gap: 4px; align-items: start; padding: 4px 0;
    flex: none; height: calc(100dvh - var(--sab) - env(safe-area-inset-top, 0px)); min-height: 240px;
  }
  .screen.draw > .stephead { grid-area: head; }
  .screen.draw > .dots { grid-area: dots; }
  .screen.draw > .stage-wrap { grid-area: stage; align-self: stretch; min-height: 0; }
  .screen.draw > .tools { grid-area: tools; min-height: 0; max-height: 100%; overflow-y: auto; }
  main:has(> #draw:not([hidden])) { max-width: 52rem; }
  .tab { font-size: 11px; letter-spacing: 0; }
  /* the dock has the width but not the height: More and the options open inline in it, and the dock scrolls */
  .more, .keys-sheet { position: static; flex: none; max-height: none; overflow: visible; box-shadow: none; }
  .tool-pop { position: static; flex: none; max-height: none; box-shadow: none; }
  .caption { display: block; }
}
@media (orientation: landscape) and (max-height: 400px) { .caption { display: none; } }
/* Forced colors (high contrast) keep the ink swatches: their color is the whole point. */
@media (forced-colors: active) {
  .swatch::before, .chip .thumb { forced-color-adjust: none; border-color: CanvasText; }
  .hover-ring { forced-color-adjust: none; border-color: CanvasText; box-shadow: 0 0 0 1px Canvas; }
  .swatch[aria-checked="true"]::before, .chip[aria-checked="true"], .tab[aria-selected="true"], .tool[aria-pressed="true"], .opt[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
}
/* At 200% zoom on a phone (about 195px wide) everything gives way: wrapped tabs and swatches, a smaller card. */
@media (max-width: 300px) {
  .tile-peek { display: none; } /* (no room: the card is a thumbnail already) */
  /* (the dock is half off the screen and the page scrolls: the options and More open as a sheet at the bottom of the screen instead, leaving the card's top to tap on) */
  .tool-pop, .more, .keys-sheet { position: fixed; left: 4px; right: 4px; bottom: calc(var(--sab, 0px) + 4px); max-height: 66dvh; z-index: 20; }
  .kpad, .kpad.t56, .kpad.b6, .kpad.t6 { position: fixed; top: auto; bottom: calc(var(--sab, 0px) + 4px); z-index: 20; }
  .zoom-level, .zoom-out { display: none; } /* (+ and reset only) */
  /* (the card is a thumbnail: the bar of edits is a sheet at the bottom of the screen, like More, and cannot cover the selection) */
  .sel-bar, .sel-bar.at-top, .sel-bar.at-bottom { position: fixed; left: 4px; right: 4px; top: auto; bottom: calc(var(--sab, 0px) + 4px); width: auto; max-width: none; z-index: 20; background: var(--paper); }
  .stage .say { position: fixed; bottom: calc(var(--sab) + 8px); }
  .dock-tabs, .tabs { flex-wrap: wrap; }
  .tabs { flex: 1 1 100%; }
  .guide-tools .seed-new, .guide-tools .seed-hide { display: none; } /* (the card is ~100px wide: Undo only) */
  .swatches { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
  .tab { flex: 1 1 30%; }
  .flat-card { height: auto; width: 100%; }
}

.start-card { width: min(46vw, 170px); aspect-ratio: 5 / 7; border: 3px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 0 #00000022; transform: rotate(-3deg); margin: 0 0 4px 8px; }
.start-card[hidden] { display: none; }
.start-card { position: relative; }
.start-card[data-drawing]::after { content: "Drawing…"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--mono); color: var(--ink); }
.start-card canvas { width: 100%; height: 100%; display: block; }

/* --- the menus: big slanted slabs, in the game's inks --------------------------- */
/* A bento: the slabs share their slanted seams (a left slab reaches one slant under its neighbour) so they fit together like a puzzle. */
.menu, .modes { --slant: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 0; width: 100%; margin-top: 4px; }
.modes { margin-top: 6px; }
.slab.left { margin-right: calc(var(--slant) * -1); }
.slab.wide { grid-column: 1 / -1; }
.slab {
  --face: #e0463d;
  --shape: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  min-height: 108px; padding: 14px 22px 14px 26px;
  border: 0; background: none; color: #fff; text-align: left; cursor: pointer;
  filter: drop-shadow(0 5px 0 var(--ink));
  transition: transform 140ms cubic-bezier(.3, 1.6, .5, 1);
  animation: slab-in 380ms cubic-bezier(.2, .9, .3, 1.2) both;
}
.slab::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ink); clip-path: var(--shape); }
.slab::after {
  content: ""; position: absolute; inset: 4px 5px; z-index: -1; clip-path: var(--shape);
  background: radial-gradient(circle at 88% 0%, #ffffff55, transparent 55%), repeating-linear-gradient(115deg, #ffffff17 0 14px, #0000 14px 30px), var(--face);
  transition: box-shadow 120ms;
}
.slab.red { --face: #e0463d; }
.slab.blue { --face: #2a6fd6; }
.slab.yellow { --face: #f2b01e; }
.slab.ink { --face: #2b2b2b; }
.slab:nth-child(even) { animation-delay: 70ms; }
.slab:nth-child(3) { animation-delay: 120ms; }
.slab:nth-child(4) { animation-delay: 170ms; }
.slab.main { grid-column: 1 / -1; min-height: 140px; margin-right: 0; }
.slab[hidden] { display: none; }
.slab:disabled { filter: grayscale(0.7) drop-shadow(0 5px 0 var(--ink)); cursor: default; }
.slab .label {
  font: 900 clamp(26px, 8vw, 34px)/1 var(--display); letter-spacing: 0.01em;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; transform: rotate(-2deg); transform-origin: left bottom;
}
.slab.main .label { font-size: clamp(34px, 10.5vw, 46px); }
.slab small { font: 700 13px/1.3 var(--body); max-width: 20rem; text-shadow: 0 1px 0 #0006; }
.slab .glyph {
  position: absolute; right: 22px; top: 12px; width: 58px; height: 58px; color: #fff; transform: rotate(8deg);
  filter: drop-shadow(2.5px 0 0 var(--ink)) drop-shadow(-2.5px 0 0 var(--ink)) drop-shadow(0 2.5px 0 var(--ink)) drop-shadow(0 -2.5px 0 var(--ink));
}
.slab.main .glyph { width: 80px; height: 80px; top: 14px; }
.modes .slab { min-height: 300px; }
.modes .slab small { max-width: 11rem; }
.slab:focus-visible { outline: none; }
.slab:focus-visible::after { box-shadow: inset 0 0 0 5px #ffd23f; }
@media (hover: hover) { .slab:not(:disabled):hover { transform: translateY(-3px) rotate(-0.6deg) scale(1.02); } .slab:not(:disabled):hover::after { box-shadow: inset 0 0 0 5px #ffd23f; } }
.slab:not(:disabled):active { transform: translateY(3px) scale(0.98); }
.slab[data-armed]::after { box-shadow: inset 0 0 0 5px #ffd23f; }
@keyframes slab-in { from { opacity: 0; transform: translateX(-34px) skewX(-8deg); } }
.menu-bar {
  grid-column: 1 / -1; background: var(--ink); color: #fff; font: 700 14px/1.35 var(--body);
  padding: 11px 16px 11px 24px; min-height: 46px; clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%);
}
@media (prefers-reduced-motion: reduce) { .slab { animation: none; transition: none; } }
@media (forced-colors: active) { .slab::before, .slab::after { forced-color-adjust: none; } .slab:focus-visible { outline: 3px solid Highlight; } }
.slab small { color: #fff; display: block; }
.slab:not(.main) .glyph { width: 44px; height: 44px; right: 18px; top: 10px; }
.modes .slab .glyph { width: 64px; height: 64px; }
.slab:not(.main):not([data-mode]) .label { font-size: clamp(22px, 6.6vw, 28px); padding-top: 38px; }
#start .lede { font-size: 15px; }
.slab.main { order: -1; }
.menu-bar { order: 9; }
#start[hidden] { display: none; }
#start[hidden], #start[hidden]:has(.start-card:not([hidden])) { display: none; }

/* A screen that is hidden stays hidden whatever layout it has on its own (the landscape drawing grid did not). */
.screen[hidden] { display: none !important; }

body.settling [data-go="next"] { pointer-events: none; }