/* Outlier · styles/game.css · the game's layout on top of paper.css (the art layer)
 *
 * The scene is the whole viewport: the exercise-book page (#world, one tall layer moved by a
 * transform) with the number line up it. The header line (.hud) sits on top, and the card
 * (.stage) sits on the right half on desktop, docked at the bottom on phones, where it rises
 * with the on-screen keyboard (.app follows the visual viewport: --vvh, --vvt).
 */

@font-face {
  font-family: "Shantell Sans";
  src: url("../fonts/ShantellSans-Outlier.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "MathsGenie Hand";
  src: url("../fonts/MathsGenieHand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: light;
  --hud-h: 66px;
  --hl-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4.0 5.4L25.1 6.9L46.2 6.0L67.3 7.8L88.4 7.1L109.6 5.0L130.7 5.3L151.8 5.9L172.9 4.9L194.0 6.3L197.0 15.0L195.0 29.0L194.0 36.3L172.9 37.5L151.8 36.4L130.7 35.4L109.6 36.2L88.4 35.3L67.3 35.1L46.2 33.5L25.1 36.7L4.0 34.7L2.0 28.0L5.0 14.0Z' fill='%23ffe45c' opacity='.85'/%3E%3C/svg%3E");
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
}
body {
  font-family: var(--font-ui);
  font-variation-settings: var(--ui-axes);
  font-weight: 500;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
html.is-loading .app { visibility: hidden; }
button, input { font: inherit; font-variation-settings: inherit; color: inherit; letter-spacing: inherit; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
sup { font-size: 0.62em; line-height: 0; vertical-align: 0.52em; margin-left: 0.04em; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: -0.42em; margin: 0 0.06em; line-height: 1; font-size: 0.74em; }
.frac__n { padding: 0 0.12em 0.06em; }
.frac__d { padding: 0.08em 0.12em 0; background: linear-gradient(currentColor, currentColor) top center / 100% 1.6px no-repeat; }
/* an answer written as a fraction is the answer itself: keep it big enough to read */
.reveal__ans .frac, .reveal__item .frac, .slip__answer .frac, .peek__line .frac { font-size: 0.9em; }
::selection { background: rgba(255, 228, 92, 0.85); color: var(--biro); }

/* ------------------------------------------------------------------ the frame */

.app {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--vvh, 100%);
  transform: translateY(var(--vvt, 0px));
  overflow: hidden;
  isolation: isolate;
}
.shake, .scene { position: absolute; inset: 0; }
.scene { overflow: hidden; }
.world {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
}
.confetti { position: absolute; left: 0; top: 0; z-index: 25; pointer-events: none; }
.fx { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }

/* ------------------------------------------------------------------ the number line */

.nl { position: absolute; top: 0; overflow: visible; pointer-events: none; }
.nl path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nl__ink { stroke: var(--biro); stroke-width: 2.6; }
.nl__major { stroke: var(--biro); stroke-width: 2.3; }
.nl__minor { stroke: var(--pencil); stroke-width: 1.5; opacity: 0.5; }

.lm {
  --row-h: 60px;
  position: absolute;
  top: calc(var(--top) + (63 - var(--p)) * var(--unit) - var(--row-h) / 2);
  right: calc(100% - var(--line-x) + 22px);
  width: var(--lm-w);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}
.lm__row { height: var(--row-h); display: flex; align-items: center; gap: 10px; }
.lm__doodle { display: block; opacity: 0.5; transition: opacity 0.5s; }
.lm__doodle svg { display: block; width: 56px; height: 56px; }
.lm.is-lit .lm__doodle { opacity: 1; }
.lm__label {
  position: relative;
  isolation: isolate;
  padding: 3px 5px 1px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--pencil);
  white-space: nowrap;
  transition: color 0.4s;
}
.lm.is-lit .lm__label { color: var(--biro); }
.lm--long .lm__label { font-size: 22px; }
.lm__hl {
  position: absolute;
  z-index: -1;
  inset: 8% -5px 2% -5px;
  background: var(--hl-svg) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.3, 0.6, 0.3, 1);
}
.lm.is-lit .lm__hl { transform: none; }
.lm__note {
  position: relative;
  margin: -6px 2px 0 0;
  max-width: var(--lm-w);
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.32;
  color: var(--pencil);
  text-align: right;
  opacity: 0;
  transform: translateY(6px) rotate(-1deg);
  transition: opacity 0.45s 0.15s, transform 0.55s 0.15s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
.lm.is-lit .lm__note { opacity: 0.95; transform: none; }
.lm.is-instant, .lm.is-instant * { transition: none !important; }
/* the best landmark passed this round: its fact written up in biro in a pencil box, till Next */
.lm.is-callout .lm__note, .world.is-measuring .lm__note { font-size: 17px; }
.lm.is-callout .lm__note { color: var(--biro); opacity: 1; }
.lm.is-callout .lm__note::before {
  content: "";
  position: absolute;
  inset: -6px -11px -5px -11px;
  border: 8px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cpath d='M6.3 6.8C10.2 7 14.1 7.3 17.9 7.3S24.9 7.1 28.4 7.1S35.4 6.9 39 7S46 7 49.5 7.2S56.5 7.8 60 7.9S67 7.9 70.5 7.8S77.6 7.7 81.1 7.5S88.1 6.9 91.6 6.9S98.5 7.1 102.2 7.1C106.2 7.2 110.7 7.3 114.9 7.3M112.4 5.9C112.6 9.6 112.9 13.3 113 16.9C113.1 20.3 113.1 23.5 113.1 26.8S113.3 33.4 113.3 36.7S113 43.2 112.9 46.7C112.8 50.4 112.8 54.6 112.8 58.5M113.8 57C110 56.9 106.1 56.9 102.4 56.7S95.3 56.1 91.8 55.9S84.8 55.5 81.2 55.5S74.2 55.6 70.7 55.6S63.6 55.7 60.1 55.9S53.1 56.4 49.5 56.5S42.5 56.3 39 56.2S31.9 56.3 28.4 56.3S21.5 55.8 17.8 55.8C13.9 55.8 9.8 56.1 5.8 56.3M7.5 58.9C7.5 54.8 7.5 50.5 7.4 46.6C7.4 43.1 7.1 39.9 7.1 36.6S7.2 29.9 7.3 26.6S7.6 20.1 7.7 16.6C7.7 12.9 7.5 8.9 7.4 5.1' fill='none' stroke='%235d6470' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E") 12 / 8px / 0 stretch;
  pointer-events: none;
}
.world.is-phone .lm.is-callout .lm__note { font-size: 14px; }
.app.is-short .lm.is-callout .lm__note { font-size: 15.5px; }
/* a perfect day: the slip's stamp says "Straight 9s.", so the page note doesn't say it again */
.app[data-screen="results"] .lm[data-p="63"] .lm__note { visibility: hidden; }

.world.is-phone .lm {
  --row-h: 44px;
  right: auto;
  left: calc(var(--line-x) + var(--g-half) + 8px);
  align-items: flex-start;
}
.world.is-phone .lm__row { gap: 8px; }
.world.is-phone .lm__label { order: -1; font-size: 21px; padding: 2px 4px 0; }
.world.is-phone .lm__doodle svg { width: 38px; height: 38px; }
.world.is-phone .lm__note { text-align: left; font-size: 13.5px; margin: -7px 0 0 4px; max-width: min(var(--lm-w), 300px); }
.world.is-phone .lm.is-callout .lm__note::before { inset: -5px -9px -4px -9px; }

.nl-caption {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-variation-settings: var(--ui-axes);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--pencil);
  white-space: nowrap;
  pointer-events: none;
}
.decor { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0.9; transform-origin: 50% 50%; }
.decor svg { display: block; }
.decor--clip, .decor--rubber, .decor--ruler { opacity: 1; }
.decor--fill { opacity: 0.8; }

/* the flight: a dotted pencil line from where the Genie was to where he lands */
.flight-trail { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; overflow: visible; transition: opacity 3.6s cubic-bezier(0.4, 0, 0.7, 1); }
.flight-trail path { fill: none; stroke: var(--pencil); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 0 9; opacity: 0.6; }
.world.is-phone .flight-trail path { stroke-width: 2.4; stroke-dasharray: 0 7.5; }
.flight-trail.is-fading { opacity: 0; }

.genie-wrap { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
.genie-loop, .genie-tilt { width: 100%; height: 100%; }
.genie-tilt { transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1.3); }
.genie-wrap.is-flying .genie-tilt { transform: rotate(-7deg) translateY(-2%); }
.trail { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; overflow: visible; }
.trail path { fill: none; stroke: var(--pencil); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0.85; }

/* ------------------------------------------------------------------ the header line */

.hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  height: var(--hud-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 14px 0 calc(var(--margin-x) + 18px);
  background:
    linear-gradient(90deg, transparent calc(var(--margin-x) - 0.75px), var(--margin) calc(var(--margin-x) - 0.75px), var(--margin) calc(var(--margin-x) + 0.75px), transparent calc(var(--margin-x) + 0.75px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .22 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    var(--paper);
}
.hud::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 3px;
  border-top: 1.6px solid rgba(224, 53, 43, 0.62);
  border-bottom: 1px solid rgba(224, 53, 43, 0.45);
  pointer-events: none;
}
.hud__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 2.15rem;
  line-height: 1;
  color: var(--biro);
  white-space: nowrap;
  transform: rotate(-1.2deg);
}
.hud__no { font-size: 0.92em; }
.hud__boxes { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hud__boxes .grade-box { width: 40px; height: 40px; font-size: 2rem; }
.grade-box.is-u { color: var(--red-pen); font-size: 1.5rem; }
/* the running total: a number after the boxes, double-underlined like the answer to a sum */
.hud__total {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 40px;
  margin: 0 0 0 -6px;
  padding: 0 3px 5px;
  box-sizing: border-box;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 2.05rem;
  line-height: 1;
  color: var(--red-pen);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hud__total-n { display: block; font-weight: inherit; transform-origin: 50% 70%; }
.hud__total-rule { position: absolute; left: 3px; right: 3px; bottom: 0; height: 9px; line-height: 0; pointer-events: none; }
.hud__total-rule svg { display: block; width: 100%; height: 100%; }
.hud__total.is-empty .hud__total-rule { opacity: 0.45; }
.hud__date {
  position: relative;
  flex: none;
  margin: 0 4px 0 auto;
  padding: 0 6px 9px 3px;
  transform: rotate(-0.8deg);
}
.hud__date-text { font-family: var(--font-title); font-weight: 700; font-size: 1.78rem; line-height: 1; color: var(--biro); white-space: nowrap; }
.hud__date-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; line-height: 0; pointer-events: none; }
.hud__date-rule svg { display: block; width: 100%; height: 100%; }
.app.is-phone .hud__date { display: none; }
.hud__sound {
  margin-left: auto;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.hud__sound svg { width: 30px; height: 30px; }
.hud__date + .hud__sound { margin-left: 6px; }
.hud__sound:focus-visible { outline: 2px dashed var(--biro); outline-offset: 2px; }
.app[data-screen="cover"] .hud__title,
.app[data-screen="cover"] .hud__boxes,
.app[data-screen="cover"] .hud__total,
.app[data-screen="results"] .hud__title,
.app[data-screen="results"] .hud__boxes,
.app[data-screen="results"] .hud__total { visibility: hidden; }

/* ------------------------------------------------------------------ the stage (card slot) */

.stage {
  position: absolute;
  z-index: 10;
  top: var(--hud-h);
  bottom: 0;
  left: 50%;
  right: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 34px 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.stage::-webkit-scrollbar { display: none; }
.stage.is-opening { overflow: visible; }
.stage > * { width: min(560px, 100%); box-sizing: border-box; }

/* ------------------------------------------------------------------ the card */

.card {
  container-type: inline-size;
  padding: 26px 28px 24px;
}
.card__washi { top: -14px; z-index: 3; left: calc(30% + var(--washi-x, 0.5) * 18%); }
.card__tab { z-index: 2; }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  margin: -6px 0 8px;
}
.card__pencil .pencil { --pencil-len: clamp(140px, 100cqw - 190px, 320px); --pencil-h: 18px; }
.pencil.is-snapped .pencil__tip::after { opacity: 0; transition: opacity 0.1s; }
/* the read-it countdown: a big pencil numeral drawn on the page beside the card (card.js
   placeCount: left of it on desktops, above it on phones), slapped on each second; it never
   covers the question and never takes a click, so typing carries on */
.card__count {
  position: fixed;
  z-index: 40;
  left: var(--count-x, -999px);
  top: var(--count-y, -999px);
  line-height: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.card__count svg { display: block; overflow: visible; opacity: 0.8; }
.card__count.is-in svg { animation: og-count-slap 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.card__count.is-in .sk-ink { stroke-dasharray: 1 1; stroke-dashoffset: 1.02; animation: og-draw 0.26s cubic-bezier(0.35, 0.6, 0.35, 1) 0.03s forwards; }
.card__count.is-out svg { animation: og-count-out 0.22s ease-in forwards; }
/* the last five seconds: red pen, and it comes down harder */
.card__count.is-red svg { opacity: 0.94; }
.card__count.is-red.is-in svg { animation: og-count-hard 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.card__count.is-red.is-in .sk-ink { animation-duration: 0.18s; }
@keyframes og-count-hard {
  0% { transform: scale(1.9) rotate(-16deg); opacity: 0; }
  50% { transform: scale(0.9) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1) rotate(-5deg); opacity: 1; }
}
/* a landmark the countdown numeral sits on fades back while it's up (phones) */
.lm { transition: opacity 0.16s; }
.lm.is-under-count { opacity: 0.12; }
@keyframes og-count-slap {
  0% { transform: scale(1.45) rotate(-12deg); opacity: 0; }
  55% { transform: scale(0.95) rotate(-2deg); opacity: 1; }
  100% { transform: scale(1) rotate(-4deg); opacity: 1; }
}
@keyframes og-count-out { to { transform: scale(0.9) rotate(-4deg); opacity: 0; } }
.card__prompt {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-variation-settings: var(--ui-axes);
  font-weight: 700;
  font-size: 1.95rem;
  line-height: 1.16;
  color: var(--navy);
  text-wrap: balance;
}
.card__answer { display: flex; gap: 10px; align-items: stretch; margin: 0; }
.card__field { position: relative; flex: 1; min-width: 0; }
.card__input { width: 100%; height: 100%; }
.card__input:read-only { caret-color: transparent; }
.card__go { flex: none; min-width: 78px; }
.card__strike { position: absolute; top: 50%; transform: translateY(-46%); pointer-events: none; line-height: 0; }
.card__mirror {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  white-space: pre;
  font-family: var(--font-ui);
  font-variation-settings: var(--ui-axes);
  font-weight: 500;
  font-size: 1.4rem;
  pointer-events: none;
}
.card__below { min-height: 30px; margin-top: 12px; }
.card__miss {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.32;
  color: var(--navy);
}
.card__cross { flex: none; line-height: 0; margin-top: 3px; transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.08s; }
.card__cross.is-waiting { opacity: 0; transform: scale(0.3); }
/* the reason pops in on a red-pen line (a near miss: on an amber highlighter) */
.card__why { min-width: 0; }
.card__why-in {
  padding: 0 0.12em 0.06em;
  margin: 0 -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.1C34 5.2 68 6.6 101 5.6S166 4.4 198 5.1' fill='none' stroke='%23e0352b' stroke-width='2.4' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") 0 100% / 100% 0.32em no-repeat;
}
.card__miss.is-near .card__why-in {
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4.0 5.4L25.1 6.9L46.2 6.0L67.3 7.8L88.4 7.1L109.6 5.0L130.7 5.3L151.8 5.9L172.9 4.9L194.0 6.3L197.0 15.0L195.0 29.0L194.0 36.3L172.9 37.5L151.8 36.4L130.7 35.4L109.6 36.2L88.4 35.3L67.3 35.1L46.2 33.5L25.1 36.7L4.0 34.7L2.0 28.0L5.0 14.0Z' fill='%23ffa21f' opacity='.62'/%3E%3C/svg%3E") 0 60% / 100% 84% no-repeat;
}
.card__miss.is-fresh { opacity: 0; }
.card__miss.is-fresh.is-in { opacity: 1; animation: og-miss-in 0.26s cubic-bezier(0.25, 0.9, 0.3, 1.3) both; transform-origin: 0 50%; }
.card__miss.is-fresh.is-in .card__why-in { animation: og-under-swipe 0.24s 0.04s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
.card__miss.is-near.is-fresh.is-in .card__why-in { animation-name: og-hl-in; }
@keyframes og-miss-in { from { opacity: 0; transform: translateY(-4px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes og-under-swipe { from { background-size: 0% 0.32em; } to { background-size: 100% 0.32em; } }
@keyframes og-hl-in { from { background-size: 0% 84%; } to { background-size: 100% 84%; } }
.card__chip { display: flex; align-items: center; gap: 6px 12px; margin: 0; }
.card__chip-q { flex: 0 1 auto; min-width: 0; font-weight: 600; font-size: 1.28rem; line-height: 1.5; color: var(--biro); }
.card__chip-hl {
  padding: 0.04em 0.28em 0.1em;
  margin: 0 -0.1em;
  background: var(--hl-svg) 0 60% / 100% 86% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
  animation: og-chip-hl 0.3s 0.06s cubic-bezier(0.3, 0.6, 0.3, 1) both;
}
.card__chip b { font-weight: 750; }
/* Yes: a full-size tap target, already coloured in with highlighter */
.card__yes { flex: none; min-height: 44px; min-width: 66px; padding: 2px 14px 4px; font-size: 1.15rem; }
/* "Did you mean": it bounces in, and the highlighter swipes across it */
.card__chip:not(.is-quiet) { animation: og-chip-in 0.38s cubic-bezier(0.25, 0.9, 0.35, 1.35) both; transform-origin: 20% 60%; }
.card__chip.is-quiet .card__chip-hl { animation: none; }
@keyframes og-chip-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.7); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.06); }
  78% { transform: translateY(1px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes og-chip-hl { from { background-size: 0% 86%; } to { background-size: 100% 86%; } }
/* Pens down: a red rubber stamp under the box, a little crooked; it sits in the line's own
   space and spills into the note's margin rather than pushing the card about */
.card__pens { position: relative; margin: 0; height: 30px; }
.card__pens-stamp { position: absolute; left: 0; top: -7px; font-size: 1.85rem; line-height: 0.95; padding: 0 0.2em 0.02em; border-width: 10px; border-image-width: 10px; --stamp-tilt: -4deg; white-space: nowrap; }
.card.is-revealed .card__head { display: none; }
.card.is-revealed .card__prompt { font-size: 1.28rem; margin-bottom: 14px; color: rgba(0, 46, 95, 0.78); }
.card--ghost { z-index: 2; pointer-events: none; }
.card__go:disabled { transition: opacity 0.2s; }
.card.is-slap.is-late { animation-delay: 0.15s; }

/* ------------------------------------------------------------------ the reveal */

.reveal__top {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: "mark ." "mark said" "mark line" "mark note" "mark .";
  column-gap: 20px;
}
.reveal__top > .reveal__mark { grid-area: mark; align-self: center; }
.reveal__said { grid-area: said; min-width: 0; }
.reveal__top > .reveal__line { grid-area: line; }
.reveal__top > .reveal__note { grid-area: note; }
.nowrap { white-space: nowrap; }
.reveal__mark {
  position: relative;
  width: var(--mark);
  height: var(--mark);
  display: grid;
  place-items: center;
}
.reveal__ring { position: absolute; inset: 0; line-height: 0; }
.reveal__ring svg { width: 100%; height: 100%; }
.reveal__digit {
  position: relative;
  font-size: calc(var(--mark) * 0.64);
  margin-top: calc(var(--mark) * -0.02);
}
/* the count-up: the ring and digit, scaled down to each step's size as the grade climbs */
.reveal__climb { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 50%; will-change: transform; }
.reveal__climb > .reveal__ring { position: absolute; inset: 0; }
.reveal__mark--stamp > .reveal__climb { inset: 8% 10%; }
.reveal__climb.is-held { animation: og-swell var(--hold, 400ms) cubic-bezier(0.3, 0, 0.6, 0.9) both; }
.reveal__climb.is-held.is-tremble { animation: og-swell var(--hold, 400ms) cubic-bezier(0.3, 0, 0.6, 0.9) both, og-tremble 0.09s linear infinite; }
@keyframes og-swell { from { scale: 1; } to { scale: var(--swell, 1.22); } }
@keyframes og-tremble {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: -1.6px 0.8px; rotate: -1.2deg; }
  50% { translate: 1.4px -0.6px; rotate: 0.8deg; }
  75% { translate: 1.8px 0.8px; rotate: 1.2deg; }
}
.reveal__mark--u { width: var(--mark); height: var(--mark); }
.reveal__stamp--u { font-size: calc(var(--mark) * 0.62); padding: 0 0.16em 0.02em; --stamp-tilt: -11deg; color: #e32619; }
.reveal--g0 .reveal__digit { font-size: calc(var(--mark) * 0.56); }
.reveal__mark--stamp { width: calc(var(--mark) * 1.18); height: calc(var(--mark) * 1.16); isolation: isolate; }
.reveal__stamp { position: relative; z-index: 1; font-size: calc(var(--mark) * 0.64); padding: 0 0.2em 0.04em; opacity: 1; color: #e32619; }
.reveal__burst { position: absolute; inset: 0; z-index: 0; pointer-events: none; line-height: 0; }
/* a 9's stamp and burst are only on the card once the giant stamp has come down onto it */
.reveal__mark--stamp:not(.is-arrived) > .reveal__burst,
.reveal__mark--stamp:not(.is-arrived) > .reveal__stamp { visibility: hidden; }
.reveal:not(.is-static) .reveal__mark--stamp.is-arrived > .reveal__burst { animation: og-burst-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.reveal:not(.is-static) .reveal__mark--stamp.is-arrived > .reveal__stamp { animation: og-stamp-arrive 0.26s cubic-bezier(0.3, 0.8, 0.3, 1.2) both; }
@keyframes og-stamp-arrive {
  0% { transform: scale(1.12) rotate(var(--stamp-tilt)); }
  45% { transform: scale(0.94) rotate(var(--stamp-tilt)); }
  100% { transform: scale(1) rotate(var(--stamp-tilt)); }
}
@keyframes og-burst-in {
  0% { transform: scale(0.1) rotate(-50deg); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.reveal.is-static .reveal__burst { animation: none; }
.reveal__said { min-width: 0; }
.reveal__you { margin: 0; font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.reveal__said-label { margin-right: 4px; }
.reveal__ans { font-family: var(--font-hand); font-weight: 400; font-size: 1.85rem; line-height: 1.1; color: var(--biro); overflow-wrap: anywhere; }
.reveal__ticks { display: inline-block; margin-left: 8px; vertical-align: -0.08em; line-height: 0; white-space: nowrap; }
.reveal__tick { display: inline-block; line-height: 0; }
.reveal__tick + .reveal__tick { margin-left: -5px; }
/* a U: the guess left in the box at the buzzer, crossed out in red pen */
.reveal__u-guess { margin: 0; font-family: var(--font-hand); font-weight: 400; font-size: 1.85rem; line-height: 1.15; color: var(--biro); overflow-wrap: anywhere; }
.reveal__u-struck { text-decoration: line-through; text-decoration-color: rgba(224, 53, 43, 0.9); text-decoration-thickness: 3px; text-decoration-skip-ink: none; }
.reveal__u-guess--blank { line-height: 0; padding-top: 18px; }
.reveal__u-guess--blank svg { width: 120px; }
/* the rarity line grows with the grade (--line-k), so even the wording lands bigger */
.reveal { --line-k: 1; }
.reveal--g2 { --line-k: 1.04; }
.reveal--g3 { --line-k: 1.08; }
.reveal--g4 { --line-k: 1.12; }
.reveal--g5 { --line-k: 1.16; }
.reveal--g6 { --line-k: 1.2; }
.reveal--g7 { --line-k: 1.25; }
.reveal--g8 { --line-k: 1.3; }
.reveal--g9 { --line-k: 1.32; }
/* (its highlighter and underline reach 6-9 px past the words, so the line's box takes that
   room in its padding, and the words stay where they were) */
.reveal__line {
  margin: 6px -10px 0;
  padding: 0 10px;
  font-weight: 700;
  font-size: calc(1.08rem * var(--line-k));
  line-height: 1.25;
  color: var(--navy);
}
.reveal__line-in { position: relative; isolation: isolate; display: inline-block; }
.reveal__hl {
  position: absolute;
  z-index: -1;
  left: -6px;
  right: -6px;
  bottom: -3px;
  height: 0.7em;
  background: var(--hl-svg) center / 100% 100% no-repeat;
  transform-origin: 0 50%;
}
/* the rarity line's highlighter gets stronger with the grade: pale for 1 and 2, gold for a 9 */
.reveal__hl--soft { opacity: 0.42; height: 0.55em; }
.reveal__hl--mid { opacity: 0.75; height: 0.62em; }
.reveal__hl--gold { filter: saturate(1.25) hue-rotate(-8deg); }
@keyframes og-hl-swipe { from { transform: scaleX(0); } to { transform: none; } }
.reveal__under { position: absolute; left: -2px; right: -2px; bottom: -12px; line-height: 0; }
.reveal__under svg { width: 100%; }
.reveal--g9 .reveal__hl { height: 0.95em; bottom: -5px; left: -9px; right: -9px; }
.reveal__stuckset { position: absolute; inset: 0; pointer-events: none; }
.reveal__stuck {
  position: absolute;
  translate: -50% -50%;
  rotate: var(--rot, 0deg);
  will-change: auto;
}
@keyframes og-stick { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
.reveal.is-static .reveal__stuck { animation: none; }
.reveal--g7 .reveal__top > .reveal__line, .reveal--g8 .reveal__top > .reveal__line, .reveal--g9 .reveal__top > .reveal__line { margin-bottom: 12px; }
.reveal__note { margin: 4px 0 0; font-family: var(--font-hand); font-weight: 400; font-size: 1.12rem; line-height: 1.3; color: var(--pencil); }
.reveal__more {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 18px 0 0;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.45;
}
.reveal__item b { font-family: var(--font-hand); font-weight: 400; font-size: 1.24rem; color: var(--biro); }
.reveal__fact { margin: 10px 0 0; font-weight: 500; font-size: 1.04rem; line-height: 1.42; color: var(--navy); }
.reveal__foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.reveal.is-static .sk-draw .sk-ink { animation: none; stroke-dashoffset: 0; }
/* built ahead (card.js prepareReveal): laid over the card, out of sight, until it turns over */
.card__reveal.is-pre { position: absolute; left: var(--pre-l, 28px); right: var(--pre-r, 28px); top: 0; visibility: hidden; pointer-events: none; }
.reveal.is-pre .sk-ink, .reveal.is-pre * { animation: none !important; }
.reveal.is-static .reveal__digit, .reveal.is-static .reveal__hl { animation: none; transform: none; }

/* while the grade counts up only the mark and "You said" are there; the rest lands with it */
.reveal.is-climbing .reveal__line,
.reveal.is-climbing .reveal__foot,
.reveal.is-climbing .reveal__ticks,
.reveal.is-climbing .reveal__stuckset { visibility: hidden; }
.reveal.is-climbing .reveal__ticks .sk-ink, .reveal.is-climbing .reveal__under .sk-ink { animation: none; }
.reveal.is-landed:not(.is-static) .reveal__hl { animation: og-hl-swipe 0.36s 0.03s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
.reveal.is-landed:not(.is-static) .reveal__line-text { display: inline-block; animation: og-line-in 0.32s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
@keyframes og-line-in { from { clip-path: inset(-30% 100% -30% -6%); } to { clip-path: inset(-30% -6% -30% -6%); } }
.reveal.is-landed:not(.is-static) .reveal__stuck { animation: og-stick 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4) var(--delay, 0.1s) both; }
/* the answer's note, the round's other answers and the fact would give the grade away, so
   they wait until it has landed, then come in one after another */
.reveal.is-climbing .reveal__note,
.reveal.is-climbing .reveal__more,
.reveal.is-climbing .reveal__fact { visibility: hidden; }
.reveal.is-landed:not(.is-static) .reveal__note { animation: og-fade-up 0.3s 0.25s both; }
.reveal.is-landed:not(.is-static) .reveal__more { animation: og-fade-up 0.3s 0.35s both; }
.reveal.is-landed:not(.is-static) .reveal__fact { animation: og-fade-up 0.3s 0.45s both; }
.reveal.is-landed.is-fast:not(.is-static) .reveal__note { animation-delay: 0.08s; }
.reveal.is-landed.is-fast:not(.is-static) .reveal__more { animation-delay: 0.14s; }
.reveal.is-landed.is-fast:not(.is-static) .reveal__fact { animation-delay: 0.2s; }
.reveal.is-landed:not(.is-static) .reveal__foot { animation: og-next-in 0.34s 0.05s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes og-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes og-next-in { from { opacity: 0; transform: scale(0.82) rotate(-4deg); } to { opacity: 1; transform: none; } }
.card__star { position: absolute; z-index: 4; left: calc(var(--star) * -0.62); top: calc(var(--star) * -0.74); --star-tilt: -14deg; }
.card__star--small { left: calc(var(--star) * 1.16); top: calc(var(--star) * -0.9); --star-tilt: 12deg; }
.card.is-revealed { padding-top: 32px; }

/* ------------------------------------------------------------------ the cover (intro) */

.cover { position: relative; padding: 32px 30px 26px; }
.cover__washi { top: -14px; left: 40%; --washi: #9ed2f6; --washi-angle: -3deg; z-index: 2; }
.cover__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 6px 12px;
  border-bottom: 1.5px solid rgba(0, 46, 95, 0.5);
}
.cover__title { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 4.2rem; line-height: 0.88; color: var(--navy); }
.cover__no { font-size: 0.58em; color: var(--red-pen); }
.cover__brand { flex: none; padding-top: 6px; }
.cover__brand .wordmark { display: block; width: 132px; height: auto; }
.cover__rules { padding: 16px 6px 2px; }
.cover__rules p { margin: 0 0 10px; font-weight: 600; font-size: 1.16rem; line-height: 1.36; color: var(--navy); text-wrap: balance; }
.cover__foot { display: flex; justify-content: flex-end; padding: 8px 6px 0; }

/* ------------------------------------------------------------------ results day */

.results { --env-w: min(520px, 100%); position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.results__env { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.results__open { position: absolute; right: 7%; bottom: 13%; z-index: 5; }
.results[data-state="opening"] .results__open { opacity: 0; transition: opacity 0.15s; }
.results__ghost { pointer-events: none; }
.results[data-state="envelope"] .envelope__inside { visibility: hidden; }
.results__envelope { --envelope-w: var(--env-w); }
.results__envelope .envelope__inside { inset: calc(var(--tear) + 8px) 3% 4% 3%; clip-path: inset(-4000px -40px 0 -40px); }
.results__envelope .envelope__inside > * { transition: none; }
.results__envelope .envelope__label { font-size: 1.9rem; }
.results__final { width: calc(var(--env-w) * 0.94); }
.results__final:empty { display: none; }
.results__slip { width: 100%; box-sizing: border-box; }
.results__slip .slip__rows { margin-top: 6px; }
.results__slip .slip__rows li { list-style: none; }
.results__slip .slip__row {
  width: 100%;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 1px dashed rgba(0, 46, 95, 0.22);
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: 42px;
}
.results__slip .slip__row.is-open { background: rgba(255, 228, 92, 0.35); }
.results__slip .slip__strand { font-weight: 650; }
.results__slip .slip__answer { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.12; }
.slip__answer--u { color: var(--pencil); line-height: 0; }
.slip__answer--u s { font-family: var(--font-hand); font-size: 1.12rem; line-height: 1.12; text-decoration-color: rgba(35, 64, 122, 0.85); text-decoration-thickness: 1.6px; }
.results__slip .slip__grade { position: relative; display: grid; place-items: center; }
.slip__grade > span:last-child { position: relative; }
.slip__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); line-height: 0; }
.slip__line { margin: 0; }
.slip__lm { font-family: var(--font-hand); font-weight: 400; font-size: 1.18em; color: var(--biro); }
.slip__fact { display: block; margin-top: 3px; font-family: var(--font-hand); font-weight: 400; font-size: 1.04rem; line-height: 1.3; color: var(--pencil); }
.slip__perfect { display: inline-grid; margin: 6px 0 0 10px; font-size: 1.7rem; --stamp-tilt: -7deg; }
.results__slip .slip__foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.slip__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.slip__next { font-variant-numeric: tabular-nums; }
.slip__stats { margin: 0; }
.slip__link { color: var(--biro); text-underline-offset: 3px; }
.results__peek {
  position: absolute;
  z-index: 6;
  top: 56px;
  left: 50%;
  width: min(380px, 88%);
  margin-left: calc(min(380px, 88%) / -2);
  box-sizing: border-box;
  padding: 26px 24px 22px;
  --tilt: 1.2deg;
}
.results__close {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.peek__prompt { margin: 0 26px 12px 0; font-weight: 700; font-size: 1.24rem; line-height: 1.2; color: var(--navy); }
.peek__line { margin: 0 0 4px; font-weight: 500; font-size: 1.02rem; line-height: 1.4; }
.peek__line b { font-family: var(--font-hand); font-weight: 400; font-size: 1.22rem; color: var(--biro); }
.peek__fact { margin: 10px 0 0; font-weight: 500; font-size: 1rem; line-height: 1.4; }

/* ------------------------------------------------------------------ phones */

.app.is-phone { --hud-h: 52px; }
/* a phone's header line holds the title, the seven boxes, the total and the speaker: the
   boxes take what's left (up to 27 px each), so the speaker never falls off the edge */
.app.is-phone .hud { gap: 5px; padding: 2px 2px 0 10px; }
.app.is-phone .hud__title { flex: none; font-size: 1.32rem; }
.app.is-phone .hud__boxes { flex: 1 1 0; min-width: 0; max-width: calc(7 * 27px + 6 * 2px); }
.app.is-phone .hud__boxes .grade-box { flex: 1 1 0; min-width: 0; width: auto; height: auto; max-width: 27px; aspect-ratio: 1; border-width: 5px; border-image-width: 5px; font-size: 1.2rem; }
.app.is-phone .grade-box.is-u { font-size: 1rem; }
.app.is-phone .hud__total { min-width: 27px; height: 30px; margin-left: -2px; padding: 0 1px 4px; font-size: 1.32rem; }
.app.is-phone .hud__total-rule { height: 7px; left: 1px; right: 1px; }
.app.is-phone .hud__sound { flex: none; width: 34px; height: 44px; }
.app.is-phone .hud__sound svg { width: 25px; height: 25px; }
.app.is-phone .stage {
  left: 0;
  top: auto;
  bottom: 0;
  max-height: calc(100% - var(--hud-h) - 8px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 10px calc(4px + env(safe-area-inset-bottom));
}
/* under the docked card, the page fades out so no half-cut words peep below it */
.app.is-phone .shake::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(rgba(251, 248, 241, 0), var(--paper) 62%);
}
.app.is-phone .stage { justify-content: flex-start; }
.app.is-phone .stage > * { width: min(560px, 100%); flex: none; }
.app.is-phone .stage > :not([hidden]):not(.results__ghost) { margin-top: auto; }
.app.is-phone .card { padding: 22px 18px 16px; }
.app.is-phone .card__head { margin: -4px 0 6px; min-height: 38px; }
.app.is-phone .card__pencil .pencil { --pencil-h: 15px; --pencil-len: clamp(120px, 100cqw - 150px, 260px); }
.app.is-phone .card__prompt { font-size: 1.5rem; margin-bottom: 14px; }
.app.is-phone .card__input { font-size: 1.25rem; }
.app.is-phone .card__mirror { font-size: 1.25rem; }
.app.is-phone .card__below { margin-top: 10px; min-height: 26px; }
.app.is-phone .card__chip-q { font-size: 1.16rem; }
.app.is-phone .card__washi { left: calc(8% + var(--washi-x, 0.5) * 16%); }
.app.is-phone .card.is-revealed { padding-top: 26px; padding-bottom: 12px; }
.app.is-phone .card.is-revealed .card__prompt { font-size: 1.02rem; margin-bottom: 8px; line-height: 1.2; }
.app.is-phone .reveal__top { grid-template-rows: auto auto auto; grid-template-areas: "mark said" "line line" "note note"; column-gap: 14px; }
.app.is-phone .reveal__said { align-self: center; }
.app.is-phone .reveal__said-label { display: block; font-size: 0.86rem; margin: 0 0 1px; }
.app.is-phone .reveal__top > .reveal__line { margin-top: 8px; }
.app.is-phone .reveal__top > .reveal__note { margin-top: 6px; font-size: 1rem; }
.app.is-phone .reveal__mark { width: calc(var(--mark) * 0.74); height: calc(var(--mark) * 0.74); }
.app.is-phone .reveal__digit { font-size: calc(var(--mark) * 0.74 * 0.64); }
.app.is-phone .reveal__mark--stamp { width: calc(var(--mark) * 0.92); height: calc(var(--mark) * 0.9); }
.app.is-phone .reveal__stamp { font-size: calc(var(--mark) * 0.49); }
.app.is-phone .reveal__you { font-size: 0.95rem; }
.app.is-phone .reveal__ans { font-size: 1.42rem; }
.app.is-phone .reveal__u-guess { font-size: 1.42rem; }
.app.is-phone .reveal__u-struck { text-decoration-thickness: 2.4px; }
.app.is-phone .reveal__line { font-size: calc(0.96rem * var(--line-k)); margin-top: 3px; }
.app.is-phone .reveal__more { margin-top: 10px; font-size: 0.92rem; gap: 0 14px; line-height: 1.38; }
.app.is-phone .reveal__item b { font-size: 1.08rem; }
.app.is-phone .reveal__fact { font-size: 0.92rem; line-height: 1.34; margin-top: 6px; }
.app.is-phone .reveal__foot { margin-top: 8px; }
.app.is-phone .reveal__next { min-height: 46px; font-size: 1.25rem; padding: 2px 18px 4px; }
.app.is-phone .card__star { scale: 0.66; left: calc(-6px - var(--star) * 0.17); top: calc(var(--star) * -0.5); }
.app.is-phone .card__star--small { left: calc(var(--star) * 1.12); top: calc(var(--star) * -0.4); }
/* the 9's big star would touch the top of the question's first letter on a phone: lift it clear */
.app.is-phone .card__star:not(.card__star--small) { top: calc(var(--star) * -0.62); }
.app.is-phone .cover { padding: 26px 20px 20px; }
.app.is-phone .cover__title { font-size: 3.2rem; }
.app.is-phone .cover__brand .wordmark { width: 104px; }
.app.is-phone .cover__rules { padding-top: 12px; }
.app.is-phone .cover__rules p { font-size: 1.02rem; margin-bottom: 7px; }
.app.is-phone .results { --env-w: min(430px, 100%); }
.app.is-phone .results__slip { padding: 16px 14px 14px; }
.app.is-phone .results__slip .slip__title { font-size: 1.7rem; }
.app.is-phone .results__slip .slip__row { min-height: 36px; padding: 3px 6px; gap: 8px; grid-template-columns: minmax(5.4em, auto) 1fr auto; }
.app.is-phone .results__slip .slip__strand { font-size: 0.68rem; }
.app.is-phone .results__slip .slip__answer { font-size: 1.08rem; }
.app.is-phone .results__slip .slip__grade { font-size: 1.55rem; }
.app.is-phone .results__slip .slip__total { padding-top: 8px; }
.app.is-phone .results__slip .slip__total b { font-size: 1.9rem; }
.app.is-phone .results__slip .slip__line { font-size: 0.9rem; padding-bottom: 6px; }
.app.is-phone .slip__fact { font-size: 0.92rem; }
.app.is-phone .results__slip .slip__foot { font-size: 0.85rem; gap: 6px; }
.app.is-phone .results__envelope .envelope__label { font-size: 1.5rem; bottom: 30%; }
.app.is-phone .results__open { right: 6%; bottom: 9%; }
.app.is-low .results__slip { padding: 12px 12px 10px; }
.app.is-low .results__slip::before { inset: 6px; }
.app.is-low .results__slip .slip__head { padding-bottom: 4px; }
.app.is-low .results__slip .slip__title { font-size: 1.45rem; }
.app.is-low .results__slip .slip__rows { margin-top: 2px; }
.app.is-low .results__slip .slip__row { min-height: 30px; padding: 1px 6px; }
.app.is-low .results__slip .slip__answer { font-size: 1rem; }
.app.is-low .results__slip .slip__grade { font-size: 1.35rem; }
.app.is-low .slip__ring svg { width: 32px; height: 32px; }
.app.is-low .results__slip .slip__total { padding: 4px 6px 2px; }
.app.is-low .results__slip .slip__total b { font-size: 1.6rem; }
.app.is-low .results__slip .slip__line { font-size: 0.84rem; padding: 2px 6px 4px; }
.app.is-low .slip__fact { font-size: 0.84rem; line-height: 1.22; }
.app.is-low .results__slip .slip__foot { padding-top: 6px; gap: 4px; font-size: 0.8rem; }
.app.is-low .results__share { min-height: 36px; font-size: 1rem; padding: 0 10px 2px; border-width: 10px; border-image-width: 10px; }

.app.is-narrow .hud { gap: 4px; padding-left: 8px; }
.app.is-narrow .hud__title { font-size: 1.22rem; }
.app.is-narrow .hud__boxes .grade-box { font-size: 1.12rem; }

/* short screens: a phone with the keyboard up, or a small laptop window */
.app.is-short { --hud-h: 46px; }
.app.is-short .hud__title { font-size: 1.4rem; }
.app.is-short .hud__boxes .grade-box { width: 28px; height: 28px; border-width: 6px; border-image-width: 6px; font-size: 1.25rem; }
.app.is-short .hud__total { height: 30px; min-width: 30px; font-size: 1.4rem; padding-bottom: 4px; }
.app.is-short .hud__total-rule { height: 7px; }
.app.is-phone.is-short .hud__title { font-size: 1.22rem; }
.app.is-phone.is-short .hud__boxes .grade-box { width: auto; height: auto; max-width: 26px; border-width: 5px; border-image-width: 5px; font-size: 1.12rem; }
.app.is-phone.is-short .hud__total { height: 28px; min-width: 26px; font-size: 1.25rem; }
.app.is-short .card { padding: 15px 14px 10px; }
.app.is-short .card__head { margin: -2px 0 4px; min-height: 26px; }
.app.is-short .card__pencil .pencil { --pencil-h: 12px; }
.app.is-short .card__prompt { font-size: 1.16rem; line-height: 1.14; margin-bottom: 8px; }
.app.is-short .card__input { min-height: 42px; font-size: 1.15rem; padding-top: 0; padding-bottom: 2px; }
.app.is-short .card__mirror { font-size: 1.15rem; }
.app.is-short .card__go { min-height: 42px; min-width: 64px; }
.app.is-short .card__below { min-height: 20px; margin-top: 6px; }
.app.is-short .card__miss { font-size: 0.92rem; line-height: 1.25; }
.app.is-short .card__tab { font-size: 0.7rem; padding: 2px 10px 7px; top: -13px; }
.app.is-short .card__chip-q { font-size: 1.04rem; line-height: 1.35; }
.app.is-short .card__yes { min-height: 44px; font-size: 1.02rem; padding: 0 10px 2px; border-width: 10px; border-image-width: 10px; }
.app.is-short .card__pens { height: 22px; }
.app.is-short .card__pens-stamp { font-size: 1.5rem; top: -6px; border-width: 8px; border-image-width: 8px; }
.app.is-short .stage { padding-top: 16px; padding-bottom: 6px; }
.app.is-short .card__washi { --washi-h: 22px; top: -11px; }

/* short split screens (a landscape phone, a small laptop window): a compact cover, reveal
   and slip, so Next and Share stay on the screen */
.app.is-low:not(.is-phone) .stage { padding-top: 18px; padding-bottom: 12px; }
.app.is-low:not(.is-phone) .card.is-revealed { padding-top: 26px; padding-bottom: 16px; }
.app.is-low:not(.is-phone) .card.is-revealed .card__prompt { font-size: 1.12rem; margin-bottom: 10px; }
.app.is-low:not(.is-phone) .reveal__mark { width: calc(var(--mark) * 0.86); height: calc(var(--mark) * 0.86); }
.app.is-low:not(.is-phone) .reveal__digit { font-size: calc(var(--mark) * 0.86 * 0.64); }
.app.is-low:not(.is-phone) .reveal__mark--stamp { width: calc(var(--mark) * 1.04); height: calc(var(--mark) * 1); }
.app.is-low:not(.is-phone) .reveal__stamp { font-size: calc(var(--mark) * 0.53); }
.app.is-low:not(.is-phone) .reveal__more { margin-top: 12px; }
.app.is-low:not(.is-phone) .reveal__fact { font-size: 0.98rem; }
.app.is-low:not(.is-phone) .reveal__foot { margin-top: 8px; }
.app.is-low:not(.is-phone) .card__star { scale: 0.85; }
.app.is-short:not(.is-phone) .stage { padding: 18px 14px 6px; align-items: safe center; }
.app.is-short .cover { padding: 20px 22px 16px; }
.app.is-short .cover__title { font-size: 2.9rem; }
.app.is-short .cover__brand .wordmark { width: 100px; }
.app.is-short .cover__rules { padding-top: 10px; }
.app.is-short .cover__rules p { font-size: 1rem; margin-bottom: 6px; }
.app.is-short .cover__foot { padding-top: 2px; }
.app.is-short:not(.is-phone) .card.is-revealed { padding: 17px 18px 9px; }
.app.is-short:not(.is-phone) .card.is-revealed .card__prompt { font-size: 0.98rem; margin-bottom: 6px; line-height: 1.2; }
.app.is-short:not(.is-phone) .reveal__mark { width: calc(var(--mark) * 0.62); height: calc(var(--mark) * 0.62); }
.app.is-short:not(.is-phone) .reveal__digit { font-size: calc(var(--mark) * 0.62 * 0.64); }
.app.is-short:not(.is-phone) .reveal__mark--stamp { width: calc(var(--mark) * 0.68); height: calc(var(--mark) * 0.66); }
.app.is-short:not(.is-phone) .reveal__stamp { font-size: calc(var(--mark) * 0.37); }
.app.is-short:not(.is-phone) .reveal--g7 .reveal__top > .reveal__line, .app.is-short:not(.is-phone) .reveal--g8 .reveal__top > .reveal__line, .app.is-short:not(.is-phone) .reveal--g9 .reveal__top > .reveal__line { margin-bottom: 9px; }
.app.is-short:not(.is-phone) .reveal__ticks { scale: 0.7; transform-origin: 0 60%; margin-left: 3px; margin-right: -12px; }
.app.is-short:not(.is-phone) .reveal__you { font-size: 0.9rem; }
.app.is-short:not(.is-phone) .reveal__ans { font-size: 1.3rem; }
.app.is-short:not(.is-phone) .reveal__u-guess { font-size: 1.3rem; }
.app.is-short:not(.is-phone) .reveal__line { font-size: calc(0.9rem * var(--line-k)); margin-top: 2px; }
.app.is-short:not(.is-phone) .reveal__note { font-size: 0.95rem; }
.app.is-short:not(.is-phone) .reveal__more { margin-top: 8px; font-size: 0.88rem; gap: 0 12px; line-height: 1.32; }
.app.is-short:not(.is-phone) .reveal__item b { font-size: 1.02rem; }
.app.is-short:not(.is-phone) .reveal__fact { font-size: 0.86rem; line-height: 1.28; margin-top: 5px; }
.app.is-short:not(.is-phone) .reveal__foot { margin-top: 6px; }
.app.is-short:not(.is-phone) .reveal__next { min-height: 42px; font-size: 1.15rem; padding: 1px 16px 3px; }
.app.is-short:not(.is-phone) .card__star { scale: 0.62; }
.app.is-short .hud__date-text { font-size: 1.32rem; }
.app.is-short:not(.is-phone) .lm__label { font-size: 22px; }
.app.is-short:not(.is-phone) .lm--long .lm__label { font-size: 18px; }
.app.is-short:not(.is-phone) .lm__doodle svg { width: 44px; height: 44px; }
.app.is-short:not(.is-phone) .lm__note { font-size: 14px; }
/* very short split screens (a phone on its side): a smaller reveal still */
.app.is-tiny:not(.is-phone) .card.is-revealed { padding: 15px 16px 7px; }
.app.is-tiny:not(.is-phone) .card.is-revealed .card__prompt { font-size: 0.92rem; margin-bottom: 4px; }
.app.is-tiny:not(.is-phone) .reveal__mark { width: calc(var(--mark) * 0.5); height: calc(var(--mark) * 0.5); }
.app.is-tiny:not(.is-phone) .reveal__digit { font-size: calc(var(--mark) * 0.5 * 0.64); }
.app.is-tiny:not(.is-phone) .reveal__mark--stamp { width: calc(var(--mark) * 0.56); height: calc(var(--mark) * 0.54); }
.app.is-tiny:not(.is-phone) .reveal__stamp { font-size: calc(var(--mark) * 0.31); }
.app.is-tiny:not(.is-phone) .reveal__ans { font-size: 1.18rem; }
.app.is-tiny:not(.is-phone) .reveal__top { column-gap: 12px; }
.app.is-tiny:not(.is-phone) .reveal__note { font-size: 0.9rem; line-height: 1.22; }
.app.is-tiny:not(.is-phone) .reveal__line { font-size: calc(0.86rem * var(--line-k)); }
.app.is-tiny:not(.is-phone) .reveal--g7 .reveal__top > .reveal__line, .app.is-tiny:not(.is-phone) .reveal--g8 .reveal__top > .reveal__line, .app.is-tiny:not(.is-phone) .reveal--g9 .reveal__top > .reveal__line { margin-bottom: 6px; }
.app.is-tiny:not(.is-phone) .reveal__more { margin-top: 5px; font-size: 0.84rem; }
.app.is-tiny:not(.is-phone) .reveal__fact { font-size: 0.82rem; margin-top: 4px; }
.app.is-tiny:not(.is-phone) .reveal__next { min-height: 38px; font-size: 1.05rem; }
/* very short screens (a phone on its side): the rows in two columns, so the slip fits */
.app.is-tiny .results__slip .slip__rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.app.is-tiny .results__slip { padding-top: 9px; padding-bottom: 8px; }
.app.is-tiny .results__slip .slip__row { grid-template-columns: 1fr auto; min-height: 26px; }
.app.is-tiny .results__slip .slip__strand { display: none; }
.app.is-tiny .results__slip .slip__answer { font-size: 0.92rem; overflow-wrap: break-word; hyphens: auto; }
.app.is-tiny .results__slip .slip__answer--long { font-size: 0.76rem; }
.app.is-tiny .results__slip .slip__title { font-size: 1.3rem; }
.app.is-tiny .results__slip .slip__total { padding-top: 2px; }

/* ------------------------------------------------------------------ the feedback: marks on the card */

/* the hitstop: the card and the Genie hold still for a beat */
.is-hold, .is-hold * { animation-play-state: paused !important; }

.card__field { transform-origin: 30% 50%; }
.card__input { position: relative; z-index: 1; }
.card__strike { z-index: 2; }
.card__marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.card__marks > * { position: absolute; line-height: 0; pointer-events: none; }
.card__marks svg { display: block; overflow: visible; }
/* the right answer, under a highlighter, with a big red-pen tick drawn across the box */
.card__hithl {
  position: absolute;
  z-index: 0;
  top: 22%;
  height: 58%;
  left: 0;
  width: 0;
  background: var(--hl-svg) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.card__hithl.is-on { transform: none; transition: transform 0.13s cubic-bezier(0.3, 0.6, 0.3, 1); }
.card.is-hit .card__go:disabled { opacity: 1; }
.card__hit { transform-origin: 30% 80%; }
.card__boxflash { left: -4px; top: -4px; }
/* a right answer's highlighter wash over the note round the box: yellow, multiplied, so it
   adds colour and never whitens the card */
.card__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(ellipse 62% 48% at var(--wx, 50%) var(--wy, 60%), rgba(255, 216, 60, 0.95) 0, rgba(255, 222, 80, 0.55) 38%, rgba(255, 228, 92, 0) 72%);
  will-change: opacity;
}
.card__xbig, .card__splat { transform-origin: 50% 50%; }
.card__splat { opacity: 0.85; }

/* a 6 up's gold stars wait on the card, painted but all but invisible (so showing them costs
   nothing), until their flying twins land */
.star-sticker.is-waiting { opacity: 0.001; will-change: opacity; }
.star-sticker.is-slapped.is-hit { animation: og-star-hit 0.26s cubic-bezier(0.3, 0.8, 0.3, 1.3) both; }
@keyframes og-star-hit {
  0% { transform: scale(1.12) rotate(var(--star-tilt, -10deg)); }
  40% { transform: scale(0.86, 0.92) rotate(var(--star-tilt, -10deg)); }
  100% { transform: scale(1) rotate(var(--star-tilt, -10deg)); }
}

/* the last five seconds: the pencil shakes harder (and faster) every second */
.card__pencil .pencil.is-danger { animation-duration: calc(0.38s - var(--shake, 1) * 0.04s); }
.pencil.is-gone { visibility: hidden; }

/* ------------------------------------------------------------------ the feedback: over the page */

.fx-flash { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
/* the stamps' worn-rubber texture, baked once into a bitmap (fx.js), so it's never filtered again */
:root.has-stamp-mask .stamp { -webkit-mask-image: var(--stamp-mask); mask-image: var(--stamp-mask); }
.fx-edges { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; overflow: visible; will-change: opacity; }
/* a 4 up's landing: highlighter glowing in from all four edges of the page (multiplied, like ink) */
.fx-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 clamp(84px, 14vmin, 150px) clamp(22px, 4vmin, 40px) var(--glow, #ffd23a);
  will-change: opacity;
}
.fx-ghost {
  position: absolute;
  display: block;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 20% 60%;
  will-change: transform, opacity;
}
.fx-ball, .fx-bin, .fx-plus, .fx-star, .fx-stamp { position: absolute; pointer-events: none; line-height: 0; will-change: transform, opacity; }
.fx-ball { z-index: 2; }
.fx-ball svg, .fx-bin svg { display: block; overflow: visible; }
.fx-ball svg { filter: drop-shadow(0 3px 2px rgba(60, 45, 10, 0.32)); }
.fx-bin { transform-origin: 50% 100%; }
.fx-bin--back { z-index: 1; }
.fx-bin--front { z-index: 3; }
.fx-plus {
  z-index: 4;
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1;
  color: var(--red-pen);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 253, 247, 0.9);
}
.fx-star { z-index: 5; }
/* made ahead and painted, waiting to fly */
.fx-star.is-prepped { opacity: 0.001; }
.fx-star svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 1.5px rgba(80, 55, 0, 0.35)); }
/* the 9: a giant red stamp on a gold burst, in the middle of the screen */
.fx-stamp { z-index: 6; display: grid; place-items: center; width: calc(var(--h) * 1.5); height: calc(var(--h) * 1.4); transform: translate(-50%, -50%) rotate(-9deg); }
/* made during the drumroll and painted, but not to be seen until it comes down */
.fx-stamp.is-prepped { opacity: 0.001; }
.fx-stamp__burst { position: absolute; inset: 0; line-height: 0; }
.fx-stamp__burst svg { width: 100%; height: 100%; }
.fx-stamp__inner {
  position: relative;
  font-size: calc(var(--h) * 0.72);
  border-width: calc(var(--h) * 0.07);
  border-image-width: calc(var(--h) * 0.07);
  padding: 0 0.2em 0.04em;
  color: #e32619;
  opacity: 1;
  mix-blend-mode: normal;
}
.fx-pencil-half { position: absolute !important; margin: 0; z-index: 4; pointer-events: none; animation: none !important; will-change: transform, opacity; }

/* a 9's box in the header is coloured in gold for the rest of the day, and shines as it fills */
.grade-box { position: relative; }
.grade-box.is-nine { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4.0 5.4L25.1 6.9L46.2 6.0L67.3 7.8L88.4 7.1L109.6 5.0L130.7 5.3L151.8 5.9L172.9 4.9L194.0 6.3L197.0 15.0L195.0 29.0L194.0 36.3L172.9 37.5L151.8 36.4L130.7 35.4L109.6 36.2L88.4 35.3L67.3 35.1L46.2 33.5L25.1 36.7L4.0 34.7L2.0 28.0L5.0 14.0Z' fill='%23ffd23a' opacity='.95'/%3E%3C/svg%3E") 50% 55% / 104% 80% no-repeat; background-origin: border-box; }
.grade-box.is-glow::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 74, 0.9) 0, rgba(255, 216, 74, 0.45) 40%, rgba(255, 216, 74, 0) 70%);
  pointer-events: none;
  animation: og-box-glow 1.3s ease-out both;
}
@keyframes og-box-glow {
  0% { opacity: 0; transform: scale(0.4); }
  20% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* the Genie: leaning into the climb, his head on one side at a "Did you mean", stars round him */
.genie-wrap.is-climbing .genie-tilt { transform: rotate(-5deg) translateY(-2%); }
.genie-wrap.is-curious .genie-tilt { transform: rotate(13deg) translateX(4%); }
.app.is-phone .genie-wrap.is-curious .genie-tilt { transform: rotate(10deg) translate(3%, 3%); }
.genie-orbit { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; transition: opacity 0.35s; }
.genie-orbit.is-out { opacity: 0; }
.genie-orbit__star { position: absolute; left: 0; top: 0; line-height: 0; animation: og-orbit 1.4s linear infinite; will-change: transform, opacity; }
.genie-orbit__star svg { display: block; translate: -50% -50%; }
@keyframes og-orbit {
  0% { transform: translate(var(--rx), 0) scale(1); opacity: 1; z-index: 1; }
  12.5% { transform: translate(calc(var(--rx) * 0.707), calc(var(--ry) * 0.707)) scale(1.1); }
  25% { transform: translate(0, var(--ry)) scale(1.18); }
  37.5% { transform: translate(calc(var(--rx) * -0.707), calc(var(--ry) * 0.707)) scale(1.1); }
  50% { transform: translate(calc(var(--rx) * -1), 0) scale(1); opacity: 1; }
  62.5% { transform: translate(calc(var(--rx) * -0.707), calc(var(--ry) * -0.707)) scale(0.82); opacity: 0.7; }
  75% { transform: translate(0, calc(var(--ry) * -1)) scale(0.72); opacity: 0.55; }
  87.5% { transform: translate(calc(var(--rx) * 0.707), calc(var(--ry) * -0.707)) scale(0.82); opacity: 0.7; }
  100% { transform: translate(var(--rx), 0) scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lm, .lm__hl, .lm__note, .lm__doodle, .lm__label, .genie-tilt { transition: none !important; }
  .card__wash, .hud__total-n { animation: none !important; }
  .card__wash { display: none !important; }
  /* a 9's box shines as it fills; without the animation that shine would never go */
  .grade-box.is-glow::after { display: none; }
  .reveal__hl, .reveal__digit, .reveal__burst, .card__chip-hl { animation: none !important; transform: none !important; }
  .reveal *, .card__chip, .card__miss, .card__miss *, .card__cross, .card__hithl, .star-sticker, .grade-box::after, .reveal__climb { animation: none !important; transition: none !important; }
  .card__miss.is-fresh { opacity: 1; }
  .card__cross.is-waiting { opacity: 1; transform: none; }
  .card__why-in { background-size: 100% 0.32em; }
  .card__miss.is-near .card__why-in { background-size: 100% 84%; }
  .genie-orbit, .fx-flash, .fx-edges, .fx-glow, .fx-ball, .fx-ghost, .fx-plus, .fx-stamp, .fx-pencil-half, .fx-star { display: none !important; }
  .genie-wrap.is-climbing .genie-tilt, .genie-wrap.is-curious .genie-tilt { transform: none; }
  .card--ghost, .trail { display: none !important; }
  .card__count svg, .card__count .sk-ink, .reveal__stuck, .card.is-slap.is-late { animation: none !important; }
  .card__count .sk-ink, .card__count.is-in .sk-ink, .card__count.is-red.is-in .sk-ink { stroke-dasharray: none; stroke-dashoffset: 0; }
  .flight-trail { transition: none; }
}

/* ------------------------------------------------------------------ Beta */
/* A small red-pen stamp beside the title while Outlier is in testing (game.js BETA). */
.beta-tag {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.06em 0.38em 0.02em;
  font-family: var(--font-ui);
  font-variation-settings: var(--ui-axes);
  font-weight: 700;
  font-size: 0.42em;
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red-pen);
  border: 2px solid currentColor;
  border-radius: 5px 7px 4px 8px;
  transform: rotate(-6deg) translateY(-0.3em);
  vertical-align: middle;
  white-space: nowrap;
  opacity: 0.92;
}
.beta-tag--big { font-size: 0.34em; transform: rotate(-7deg) translateY(-0.55em); }
.app.is-narrow .hud__title .beta-tag { font-size: 0.36em; margin-left: 0.2em; }