/*
 * Off the Curve: the game's own look (the scene's is styles/scene.css). OnePrep's palette, chunky
 * candy buttons with a darker bottom edge that press down, white jelly cards with the strand's
 * color as their clock band, and the game's own fonts everywhere: Fredoka (the title, the 3 2 1,
 * points and scores), DM Sans (prompts, buttons, the answer box) and Inter (small text, facts,
 * stats). Every font stack is game fonts only.
 *
 * The scene is the page; the HUD sits over it at the top, and the stage holds one panel at a
 * time (the intro, a round's card, the section break, the score report): 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: "Fredoka";
  src: url("../fonts/Fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: block;
}

:root {
  --white: #ffffff;
  --ink: #0a0a0a;
  --btn: #171717;
  --grey: #737373;
  --deep: #135073;
  --blue: #1cb0f6;
  --teal: #46d5d3;
  --mint: #57e9e6;
  --wash: #cefbff;
  --yellow: #fedb00;
  --hl: rgba(254, 219, 0, 0.55);
  --hl-gold: rgba(255, 194, 26, 0.62);
  --hl-blue: #90cdfa;
  --ok: #00c750;
  --bad: #fb2d38;
  --gold: #ffc21a;
  --round: "Fredoka", "DM Sans", "Inter";
  --ui: "DM Sans", "Inter";
  --body: "Inter", "DM Sans";
  --c: #1cb0f6;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #fdfeff;
  color: var(--ink);
  font-family: var(--body);
  -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;
  /* pinch zoom stays; double-tap zoom, the page's bounce and pull-to-refresh don't */
  touch-action: manipulation;
  overscroll-behavior: none;
}
html.is-loading .app { visibility: hidden; }
button, input, textarea { font: 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; }
.dg { display: inline-block; width: 0.61em; text-align: center; }
::selection { background: rgba(28, 176, 246, 0.22); }

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

.app {
  --hud-h: 78px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--vvh, 100%);
  transform: translateY(var(--vvt, 0px));
  /* clip, not hidden: a box with overflow hidden can still be scrolled by focus (Safari 16+) */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.shake, .scene { position: absolute; inset: 0; }
.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; }
.fx-flash {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  --bg-hi: #343434;
  --bg: var(--btn);
  --edge: #000000;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg-hi) 0%, var(--bg) 58%);
  color: #ffffff;
  font: 800 18px/1 var(--ui);
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--edge), 0 10px 18px rgba(10, 10, 10, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.15s;
}
.btn::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 3px;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover:not(:disabled) { filter: brightness(1.28); }
  .btn:hover:not(:disabled):not(:active) { animation: btn-jelly 0.5s ease-out; }
  .btn-icon:hover { color: var(--blue); }
  .row:hover { background: #eaf4f8; background: color-mix(in srgb, var(--c) 10%, #f4f9fb); }
}
.btn:focus-visible { outline: 3px solid var(--hl-blue); outline-offset: 3px; filter: brightness(1.22); }
.btn:active:not(:disabled) {
  transform: translateY(3px) scale(1.02, 0.97);
  box-shadow: 0 1px 0 var(--edge), 0 4px 8px rgba(10, 10, 10, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn:disabled { cursor: default; opacity: 0.5; }
/* a press that waits its turn (Next while Preppy is still landing) stays pressed until it goes */
.btn.is-pressed {
  transform: translateY(3px) scale(1.02, 0.97);
  box-shadow: 0 1px 0 var(--edge), 0 4px 8px rgba(10, 10, 10, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  filter: brightness(1.22);
}
.btn--big { height: 60px; padding: 0 30px; border-radius: 18px; font-size: 21px; }
.btn--light {
  --bg-hi: #ffffff;
  --bg: #ffffff;
  --edge: #c9e2ea;
  color: var(--deep);
  box-shadow: 0 4px 0 var(--edge), 0 8px 16px rgba(19, 80, 115, 0.1), inset 0 0 0 2px #e1f1f5;
}
.btn.is-lit { --bg-hi: #2fe07a; --bg: var(--ok); --edge: #00923a; }
@keyframes btn-jelly {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.05, 0.95); }
  52% { transform: scale(0.98, 1.03); }
  74% { transform: scale(1.015, 0.99); }
  100% { transform: scale(1, 1); }
}

.btn-icon {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--deep);
  box-shadow: 0 3px 0 #cfe5eb, 0 10px 24px rgba(19, 80, 115, 0.1);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, color 0.15s;
}
.btn-icon:active { transform: translateY(2px); box-shadow: 0 1px 0 #cfe5eb, 0 4px 10px rgba(19, 80, 115, 0.1); }
.btn-icon:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* the sound button: a 46 px target round its 38 to 46 px circle */
.hud__sound { position: relative; }
.hud__sound::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border-radius: 50%; }
.btn-icon.is-off { color: #8ea3ad; }

/* ------------------------------------------------------------------ chips and tags */

.chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--c);
  color: #ffffff;
  font: 800 14px/1 var(--ui);
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.13), inset 0 2px 0 rgba(255, 255, 255, 0.22);
}
.chip--small { height: 24px; padding: 0 10px; font-size: 12.5px; }

.beta {
  display: inline-block;
  padding: 4px 7px 3px;
  border-radius: 8px;
  background: var(--yellow);
  color: var(--ink);
  font: 700 12.5px/1 var(--round);
  letter-spacing: 0.02em;
  vertical-align: middle;
  transform: rotate(-5deg);
  box-shadow: 0 2px 0 #d4b200;
}
.beta--small { padding: 3px 6px 2px; border-radius: 7px; font-size: 10.5px; }

/* ------------------------------------------------------------------ the HUD */

.hud {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  pointer-events: none;
}
.hud__bar {
  pointer-events: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 0 #cfe5eb, 0 10px 24px rgba(19, 80, 115, 0.1);
}
.hud__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font: 800 15px/1 var(--ui);
  color: var(--deep);
  white-space: nowrap;
}
.hud__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hud__no, .hud__title .beta { flex: none; }
.hud__slots { flex: none; }
.hud__no { font-weight: 700; color: #3f7894; }
.hud__slots { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.hud__gap { width: 7px; }
.slot {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #edf5f8;
  box-shadow: inset 0 2px 3px rgba(19, 80, 115, 0.13);
}
.slot__pts { font: 600 11.5px/1 var(--round); color: #ffffff; letter-spacing: -0.02em; }
.slot.is-filled {
  background: var(--c);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 52%, #ffffff), var(--c) 56%, color-mix(in srgb, var(--c) 82%, #000000));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 2px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 2px 0 color-mix(in srgb, var(--c) 62%, #000000);
}
.slot.is-miss { background: #e2eaee; box-shadow: inset 0 2px 3px rgba(19, 80, 115, 0.12); }
.slot.is-miss .slot__pts { color: #8ea3ad; }
.slot.is-top { box-shadow: 0 0 0 2.5px var(--gold), 0 0 12px rgba(255, 194, 26, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.slot.is-current { box-shadow: inset 0 0 0 2.5px var(--c), inset 0 2px 3px rgba(19, 80, 115, 0.1); animation: hud-current 1.6s ease-in-out infinite; }
.slot.is-pop { animation: hud-slot-pop 0.44s cubic-bezier(0.3, 0.7, 0.3, 1); }
@keyframes hud-current { 50% { transform: scale(1.1); } }
@keyframes hud-slot-pop {
  0% { transform: scale(0.5); }
  45% { transform: scale(1.4); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.hud__score {
  flex: none;
  margin: 0;
  min-width: 3.1ch;
  font: 700 25px/1 var(--round);
  color: var(--deep);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hud__score.is-pop { animation: hud-score-pop 0.36s cubic-bezier(0.3, 0.7, 0.3, 1); }
@keyframes hud-score-pop { 40% { transform: scale(1.22); color: var(--blue); } }
.app[data-screen="intro"] .hud__bar,
.app[data-screen="results"] .hud__bar { visibility: hidden; }
/* at the section break the break's own score is the one on the screen */
.app[data-screen="section"] .hud__score { visibility: hidden; }

/* ------------------------------------------------------------------ the stage and its panels */

.stage {
  position: absolute;
  z-index: 10;
  top: var(--hud-h);
  bottom: 0;
  left: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px calc(32px + env(safe-area-inset-right)) 22px 14px;
  pointer-events: none;
}
.panel {
  --edge: #d3e8ef;
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  pointer-events: auto;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 6px 0 var(--edge), 0 24px 52px rgba(19, 80, 115, 0.17);
}

/* ------------------------------------------------------------------ the intro */

.intro { display: flex; flex-direction: column; padding: 26px 28px 24px; }
.intro > * { flex: none; }
.intro__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title brand" "curve curve" "meta meta";
  align-items: center;
  column-gap: 12px;
}
.intro__title {
  grid-area: title;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  font: 700 46px/1.02 var(--round);
  color: var(--deep);
  letter-spacing: -0.01em;
}
.intro__title .beta { font-size: 15px; padding: 5px 9px 4px; margin-top: 4px; }
.intro__brand { grid-area: brand; align-self: start; padding-top: 8px; }
.intro__wordmark { display: block; width: auto; height: 22px; }
.intro__curve { grid-area: curve; display: block; margin: 8px 0 0 2px; height: 30px; }
.intro__curve svg { display: block; }
.intro__meta { grid-area: meta; display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 600 16px/1.2 var(--ui); color: var(--grey); white-space: nowrap; }
.intro__date-short { display: none; }
.intro__no { font: 700 18px/1 var(--round); color: var(--deep); }
.intro__dot { color: #b4c3ca; }
.intro__rules { display: grid; align-content: start; gap: 14px; margin: 22px 0 24px; padding: 0; list-style: none; }
/* the rules give way first when the screen is short; the extra right padding keeps the rules'
   slide-in (18 px) from being clipped by the scroll box */
.intro > .intro__rules { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
.intro__rules.is-scrolly { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), rgba(0, 0, 0, 0.25) 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 18px), rgba(0, 0, 0, 0.25) 100%); }
.intro__rules li { display: flex; align-items: center; gap: 14px; }
.intro__icon { flex: none; display: block; width: 40px; height: 40px; }
.intro__icon svg { display: block; }
.intro__rule { font: 600 17px/1.35 var(--ui); color: var(--ink); text-wrap: pretty; }
.intro__foot { display: flex; }
.intro__go { width: 100%; }
/* waiting for the day's questions: Start keeps the focus, and a press is kept for when they're in */
.intro__go.is-waiting { opacity: 0.72; cursor: progress; }

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

.card {
  --edge: #c9dce6;
  --edge: color-mix(in srgb, var(--c) 34%, #d3e8ef);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 16px 22px 20px;
  box-shadow: 0 6px 0 var(--edge), 0 24px 52px rgba(19, 80, 115, 0.17);
  box-shadow: 0 6px 0 var(--edge), 0 24px 52px color-mix(in srgb, var(--c) 20%, rgba(19, 80, 115, 0.16));
}
.card > * { flex: none; }
.card--ghost { z-index: 1; pointer-events: none; }
/* when a screen is too short for the whole reveal, its info scrolls and Next stays in view */
.card > .card__reveal { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.reveal__hit, .reveal__foot { flex: none; }
/* a box that scrolls (main.js marks it) fades out at its foot, so a cut line reads as "more below";
   the extra padding lets its last line clear the fade at the end */
.report.is-scrolly, .reveal__info.is-scrolly {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 24px), rgba(0, 0, 0, 0.2) 100%);
}
.report.is-scrolly { padding-bottom: 30px; }
.reveal__info.is-scrolly { padding-bottom: 20px; }
.reveal__info { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d3e8ef transparent; }
.card__flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}
.card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card__time {
  flex: none;
  min-width: 46px;
  font: 600 21px/1 var(--round);
  color: var(--deep);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}
.card__time.is-danger { color: var(--bad); }
.card.is-revealed .card__time { display: none; }

/* the jelly clock */
.jelly { position: relative; flex: 1; height: 20px; }
.jelly__track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px;
  background: #eef5f8;
  background: color-mix(in srgb, var(--c) 13%, #eef5f8);
  box-shadow: inset 0 2px 3px rgba(10, 40, 60, 0.08);
}
.jelly__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #ffffff) 0%, var(--c) 52%, color-mix(in srgb, var(--c) 84%, #000000) 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  will-change: transform;
}
.jelly__shine {
  position: absolute;
  left: 9px;
  right: 16px;
  top: 4px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}
.jelly__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -6px;
  width: 17px;
  border-radius: 50%;
  background: var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #ffffff) 0%, var(--c) 52%, color-mix(in srgb, var(--c) 84%, #000000) 100%);
  animation: jelly-wobble 1.15s ease-in-out infinite alternate;
  transform-origin: 30% 50%;
}
@keyframes jelly-wobble {
  0% { border-radius: 42% 58% 52% 48% / 48% 44% 56% 52%; transform: scaleX(0.92); }
  50% { border-radius: 56% 44% 44% 56% / 44% 56% 48% 52%; transform: scaleX(1.22); }
  100% { border-radius: 48% 52% 58% 42% / 56% 48% 44% 52%; transform: scaleX(1); }
}
.card:not([data-phase="round"]) .jelly__edge,
.card.is-locked .jelly__edge { animation: none; }
.jelly.is-danger .jelly__fill,
.jelly.is-danger .jelly__edge { background: linear-gradient(180deg, #ff9fbd 0%, #ff3f6e 52%, #e3163f 100%); }
.jelly.is-danger .jelly__track { background: #ffe9ee; }
.jelly__drips { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.jelly__drop {
  position: absolute;
  top: 13px;
  width: 9px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: #ff3f6e;
}

.card__head { display: flex; align-items: center; gap: 10px; min-height: 28px; margin-bottom: 12px; }
.card__where { font: 600 14.5px/1.2 var(--ui); color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the short "R&W · 1 of 3" (card.js fitHead), a size smaller where even that won't fit */
.app .card__head .card__where.is-small { font-size: 11.5px; letter-spacing: -0.01em; }
.card__prompt {
  margin: 0 0 18px;
  font: 750 30px/1.16 var(--ui);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.card.is-revealed .card__prompt { margin-bottom: 14px; font-size: 18px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: #2d4652; }

/* the answer box */
.answer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 68px;
  padding: 7px 7px 7px 4px;
  border-radius: 21px;
  background: #f2f8fa;
  box-shadow: inset 0 0 0 2px #d9eaf0;
  transition: box-shadow 0.15s, background 0.15s;
}
.answer:focus-within {
  background: #ffffff;
  box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 5px rgba(28, 176, 246, 0.15);
  box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 5px color-mix(in srgb, var(--c) 17%, transparent);
}
.answer__field { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }
.answer__input {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  font: 600 23px/1.2 var(--ui);
  color: var(--ink);
  caret-color: var(--c);
}
.answer__input::placeholder { color: #94aab4; font-weight: 500; opacity: 1; }
.answer__input::selection { background: rgba(251, 45, 56, 0.16); }
.answer__input[readonly] { cursor: default; }
.answer__mirror {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  white-space: pre;
  font: 600 23px/1.2 var(--ui);
  pointer-events: none;
}
.answer__strike { position: absolute; top: 50%; height: 0; pointer-events: none; }
.answer__strike-line {
  display: block;
  height: 2.5px;
  margin-top: 0;
  border-radius: 2px;
  background: var(--bad);
  opacity: 0.85;
  transform-origin: left center;
}
.answer__marks { position: absolute; inset: 0; pointer-events: none; }
.xstamp { position: absolute; z-index: 3; filter: drop-shadow(0 4px 6px rgba(120, 0, 20, 0.25)); }
.xstamp svg { display: block; width: 100%; height: 100%; }
.btn--go { flex: none; height: 54px; padding: 0 24px; border-radius: 15px; font-size: 19px; }
.card.is-locked .answer { box-shadow: inset 0 0 0 2px #d9eaf0; background: #f2f8fa; }

/* the line under the box */
.card__below { display: flex; align-items: center; min-height: 36px; margin-top: 12px; }
.miss { display: flex; align-items: center; gap: 9px; margin: 0; font: 600 16px/1.3 var(--body); color: var(--ink); }
.miss__x { flex: none; display: block; width: 22px; height: 22px; }
.miss__x svg { display: block; }
.miss__x.is-waiting { visibility: hidden; }
.miss.is-fresh { opacity: 0; transform: translateY(4px); }
.miss.is-fresh.is-in { opacity: 1; transform: none; transition: opacity 0.14s, transform 0.2s cubic-bezier(0.3, 0.7, 0.3, 1); }
.timesup .miss__why { font: 700 18px/1.2 var(--round); color: var(--bad); letter-spacing: 0.01em; }
.dym { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font: 600 17px/1.3 var(--ui); }
.dym__hl {
  padding: 3px 7px;
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(254, 219, 0, 0) 0%, var(--hl) 3%, var(--hl) 97%, rgba(254, 219, 0, 0) 100%) no-repeat 0 0 / 100% 100%;
  color: var(--ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.dym:not(.is-quiet) .dym__hl { animation: hl-swipe 0.28s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
.dym:not(.is-quiet) .dym__yes { animation: pop-in 0.32s 0.08s cubic-bezier(0.3, 0.7, 0.3, 1.4) both; }
.dym__hl b { font-weight: 800; }
.btn--yes { height: 40px; padding: 0 18px; border-radius: 13px; font-size: 16px; }
@keyframes hl-swipe { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes pop-in { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* the big 3, 2, 1 over the card's lower half, under the prompt (typing still works under it);
   card.js sizes it to the room there */
.card__count {
  position: absolute;
  z-index: 4;
  left: var(--count-left, -170px);
  top: var(--count-top, 40%);
  width: var(--count-w, 150px);
  height: var(--count-h, 168px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.count__n { display: block; width: var(--count-w, 150px); height: var(--count-h, 168px); }
.count__n svg { display: block; width: 100%; height: 100%; overflow: visible; }
.count__n text { font-family: "Fredoka", "DM Sans", "Inter"; font-weight: 700; font-size: 200px; }
.count__text { fill: var(--c); stroke: #ffffff; stroke-width: 16px; stroke-linejoin: round; paint-order: stroke; }
.count__shadow { fill: #0a2a3a; stroke: #0a2a3a; fill: color-mix(in srgb, var(--c) 50%, #0a2a3a); stroke: color-mix(in srgb, var(--c) 50%, #0a2a3a); stroke-width: 16px; stroke-linejoin: round; opacity: 0.32; }

/* gold star stickers on the card's corner */
.card__stars { position: absolute; z-index: 7; right: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.sticker { position: absolute; width: calc(var(--s) * var(--sk, 1)); height: calc(var(--s) * var(--sk, 1)); filter: drop-shadow(0 4px 5px rgba(120, 70, 0, 0.25)); }
.sticker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sticker--0 { right: calc(var(--s) * -0.32); top: calc(var(--s) * -0.4); transform: rotate(12deg); }
.sticker--1 { right: calc(var(--s) * 1.15); top: calc(var(--s) * -0.62); transform: rotate(-14deg); }
.sticker--2 { right: calc(var(--s) * -0.7); top: calc(var(--s) * 0.95); transform: rotate(20deg); }
.app.is-phone .sticker--0 { right: -2px; top: calc(var(--s) * -0.42); }
.app.is-phone .sticker--1 { right: calc(var(--s) * 1.1); top: calc(var(--s) * -0.55); }
.app.is-phone .sticker--2 { right: calc(var(--s) * 0.2); top: calc(var(--s) * 0.62); }

/* gold from 9 */
.card.is-gold {
  --edge: #f0b400;
  box-shadow: 0 6px 0 var(--edge), 0 0 0 3px #ffd95a, 0 0 46px rgba(255, 194, 26, 0.55), 0 24px 52px rgba(19, 80, 115, 0.16);
}
/* the gold glow breathes on its own layer (opacity only, so it never repaints the card) */
.card.is-gold::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -10px;
  border-radius: 36px;
  box-shadow: 0 0 40px 10px rgba(255, 200, 40, 0.6);
  opacity: 0.4;
  pointer-events: none;
  animation: gold-glow 2.4s ease-in-out infinite;
  will-change: opacity;
}
@keyframes gold-glow { 50% { opacity: 1; } }

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

/* --badge: the grade's badge px; --cur: the badge's size while the count climbs the ladder;
   --bk: how big badges are drawn on this screen (phones and short screens draw them smaller);
   --bs: the badge's final size, which the layout keeps from the first tick, so nothing moves */
.reveal { --badge: 60px; --bk: 1; --bs: calc(var(--badge) * var(--bk)); --pts-k: 1; }
/* room round the badge for its rings (they reach 0.2 of its size out), so they never touch text */
.reveal__hit {
  display: flex;
  align-items: center;
  gap: calc(14px + var(--bs) * 0.06);
  min-height: var(--bs);
  margin: calc(var(--bs) * 0.08) 0 calc(10px + var(--bs) * 0.1) calc(var(--bs) * 0.12);
  transition: translate 0.34s cubic-bezier(0.3, 0.7, 0.3, 1), scale 0.34s cubic-bezier(0.3, 0.7, 0.3, 1);
}
/* while the points count, the badge and the points stand big in the middle (card.js centers
   them); they glide a little as the badge grows, and settle back into place on the landing */
.reveal.is-climbing .reveal__hit { transition-duration: 0.16s; }
.reveal.is-fast .reveal__hit, .reveal.is-static .reveal__hit { transition: none; }
.reveal--g0 .reveal__hit, .reveal--g1 .reveal__hit, .reveal--g2 .reveal__hit { margin-left: 0; }
.reveal__badge {
  --b: calc(var(--cur, var(--badge)) * var(--bk));
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--b);
  height: var(--b);
  transition: width 0.14s cubic-bezier(0.3, 0.7, 0.3, 1.4), height 0.14s cubic-bezier(0.3, 0.7, 0.3, 1.4);
}
.reveal.is-fast .reveal__badge, .reveal.is-static .reveal__badge { transition: none; }
.reveal__badge > .badge { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
.reveal__sunburst { position: absolute; z-index: -1; inset: -36%; animation: spin 9s linear infinite; transition: opacity 0.3s, scale 0.42s cubic-bezier(0.3, 0.7, 0.3, 1.3); }
.reveal__sunburst svg { display: block; width: 100%; height: 100%; }
/* the rings: one, two, three green ones, then the gold ring from 7 */
.reveal__rings { position: absolute; z-index: -1; inset: -9%; border-radius: 50%; border: 3px solid rgba(0, 199, 80, 0.4); transition: opacity 0.15s; }
.reveal[data-ring="0"] .reveal__rings { opacity: 0; }
.reveal[data-ring="2"] .reveal__rings { box-shadow: 0 0 0 calc(var(--b) * 0.07) #ffffff, 0 0 0 calc(var(--b) * 0.07 + 2.5px) rgba(0, 199, 80, 0.32); }
.reveal[data-ring="3"] .reveal__rings { box-shadow: 0 0 0 calc(var(--b) * 0.07) #ffffff, 0 0 0 calc(var(--b) * 0.07 + 2.5px) rgba(0, 199, 80, 0.32), 0 0 0 calc(var(--b) * 0.15) #ffffff, 0 0 0 calc(var(--b) * 0.15 + 2.5px) rgba(0, 199, 80, 0.2); }
.reveal[data-ring="4"] .reveal__rings { border-color: rgba(255, 194, 26, 0.75); box-shadow: 0 0 0 7px rgba(255, 194, 26, 0.16), 0 0 18px rgba(255, 194, 26, 0.45); }
.reveal[data-ring="4"] .reveal__rings::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 3px dashed rgba(255, 194, 26, 0.7);
  animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* the 10's ring of stars round its badge (and its sunburst) come in with the jackpot stamp */
.reveal__starring { position: absolute; inset: 0; z-index: 3; pointer-events: none; animation: spin 14s linear infinite; }
.ringstar { position: absolute; width: calc(var(--b) * 0.2); height: calc(var(--b) * 0.2); margin: calc(var(--b) * -0.1) 0 0 calc(var(--b) * -0.1); }
.ringstar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.reveal:not(.is-arrived) .reveal__starring, .reveal:not(.is-arrived) .reveal__sunburst { opacity: 0; scale: 0.4; }
.reveal.is-arrived:not(.is-static) .ringstar { animation: pop-in 0.36s var(--rd, 0s) cubic-bezier(0.3, 0.7, 0.3, 1.5) both; }
.reveal__head { min-width: 0; }
/* the glints that stay round a landed badge, one more each grade from 3 */
.reveal__glints { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.glint { position: absolute; width: var(--gs); height: var(--gs); margin: calc(var(--gs) / -2) 0 0 calc(var(--gs) / -2); }
.glint svg { display: block; width: 100%; height: 100%; animation: glint 2.4s var(--gd, 0s) ease-in-out infinite; }
@keyframes glint { 0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.75; } 50% { transform: scale(1.12) rotate(20deg); opacity: 1; } }
.reveal.is-climbing .reveal__glints { opacity: 0; }
.reveal.is-landed:not(.is-static):not(.is-fast) .reveal__glints { animation: pop-in 0.34s 0.1s cubic-bezier(0.3, 0.7, 0.3, 1.4) both; }
.reveal__pts {
  position: relative;
  isolation: isolate;
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0;
  font: 700 calc(46px * var(--pts-k)) / 1 var(--round);
  color: var(--deep);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transform-origin: 0 60%;
  transition: font-size 0.14s cubic-bezier(0.3, 0.7, 0.3, 1.4), color 0.2s;
}
.reveal.is-fast .reveal__pts, .reveal.is-static .reveal__pts { transition: none; }
.reveal__plus { color: var(--ok); margin-right: 0.02em; transition: color 0.2s; }
.reveal__pts.is-waiting { visibility: hidden; }
/* the count's own highlighter, from +140 (grade 5): yellow, then a blue stroke under it, then
   gold; on the landing it hands over to the rarity line's */
.reveal__pts::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.08em;
  right: -0.1em;
  top: 50%;
  bottom: 2%;
  border-radius: 0.08em;
  background: var(--hl);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.reveal.is-climbing[data-hl="1"] .reveal__pts::before,
.reveal.is-climbing[data-hl="2"] .reveal__pts::before,
.reveal.is-climbing[data-hl="3"] .reveal__pts::before { transform: scaleX(1); }
.reveal.is-climbing[data-hl="2"] .reveal__pts::before { background: linear-gradient(0deg, var(--hl-blue) 0 0.09em, var(--hl) 0.09em 100%); }
.reveal.is-climbing[data-hl="3"] .reveal__pts::before { background: linear-gradient(0deg, #f5a800 0 0.09em, var(--hl-gold) 0.09em 100%); }
/* the digits' color climbs the ladder with the count */
.reveal[data-lvl="3"] .reveal__pts, .reveal[data-lvl="4"] .reveal__pts { color: #0c7f86; }
.reveal[data-lvl="5"] .reveal__pts, .reveal[data-lvl="6"] .reveal__pts { color: #0e7fc0; }
.reveal[data-lvl="7"] .reveal__pts, .reveal[data-lvl="8"] .reveal__pts { color: #0b6eb0; text-shadow: 0 3px 0 rgba(14, 127, 192, 0.16); }
.reveal[data-lvl="9"] .reveal__pts, .reveal[data-lvl="10"] .reveal__pts { color: #f29d00; text-shadow: 0 3px 0 #c97800, 0 0 22px rgba(255, 194, 26, 0.55); }
.reveal[data-lvl="9"] .reveal__plus, .reveal[data-lvl="10"] .reveal__plus { color: #f29d00; }
.reveal--g3 .reveal__line, .reveal--g4 .reveal__line { font-weight: 800; }
.reveal--g0 .reveal__pts { color: #9aacb5; }
.reveal--g0 .reveal__plus { color: #9aacb5; }
.reveal__line { margin: 7px 0 0; font: 700 18px/1.2 var(--ui); color: var(--deep); white-space: nowrap; }
.reveal__line-in { position: relative; display: inline-block; padding: 1px 5px; border-radius: 5px; }
.reveal__line-text { position: relative; z-index: 1; }
.reveal__swipe { position: absolute; inset: 0; z-index: 0; border-radius: 5px; transform-origin: left center; }
/* the rarity line's highlighter: 5 yellow; 6 to 8 yellow with a blue stroke under it; 9 gold
   with a deeper stroke; 10 the big swipe under "Almost nobody said this" */
.reveal__line--hl1 .reveal__swipe { background: var(--hl); }
.reveal__line--hl2 .reveal__swipe { background: linear-gradient(0deg, var(--hl-blue) 0 4px, var(--hl) 4px 100%); }
.reveal__line--hl3 .reveal__swipe { background: linear-gradient(0deg, #f5a800 0 4px, var(--hl-gold) 4px 100%); }
.reveal__line--hl4 { font-size: 21px; font-weight: 800; }
.reveal__line--hl4 .reveal__swipe { background: linear-gradient(100deg, rgba(254, 219, 0, 0.8), rgba(255, 194, 26, 0.85)); inset: 52% 0 -3px 0; border-radius: 3px; }
.reveal.is-landed.is-arrived:not(.is-static):not(.is-fast) .reveal__swipe { animation: swipe-in 0.36s 0.14s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
/* the 10's swipe waits for its stamp to reach the card, where it can be seen */
.reveal--g10:not(.is-arrived) .reveal__swipe { transform: scaleX(0); }
@keyframes swipe-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reveal--g0 .reveal__line { font: 700 20px/1.2 var(--round); color: var(--bad); letter-spacing: 0.01em; }

.reveal__info { display: grid; gap: 7px; }
.reveal__you { margin: 0; font: 600 17px/1.3 var(--ui); color: #2d4652; overflow-wrap: anywhere; }
.reveal__you b { font-weight: 800; color: var(--ink); }
.reveal__as { display: block; margin-top: 1px; font: 500 14px/1.35 var(--body); color: #4a5f69; }
.reveal__as b { font-weight: 700; color: #2d4652; }
.reveal__note { margin: -3px 0 0; font: 500 14px/1.35 var(--body); color: #4a5f69; }
.reveal__more { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 0; font: 500 15px/1.35 var(--body); color: #3c5560; }
.reveal__more b { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.reveal__fact {
  margin: 3px 0 0;
  padding: 10px 13px;
  border-radius: 15px;
  background: #f4fbfd;
  background: color-mix(in srgb, var(--c) 7%, #f4fbfd);
  font: 500 14.5px/1.42 var(--body);
  color: #22343d;
}
.reveal__foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.btn--next { min-width: 132px; }
.reveal.is-climbing .reveal__line,
.reveal.is-climbing .reveal__info,
.reveal.is-climbing .reveal__foot { opacity: 0; visibility: hidden; }
.reveal.is-landed .reveal__info,
.reveal.is-landed .reveal__foot { opacity: 1; visibility: visible; transition: opacity 0.22s 0.05s ease-out; }
.reveal.is-landed:not(.is-static):not(.is-fast) .reveal__info { animation: rise-in 0.3s 0.06s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
.reveal.is-landed:not(.is-static):not(.is-fast) .reveal__foot { animation: rise-in 0.3s 0.12s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ the section break */

.brk { padding: 28px 28px 24px; text-align: center; }
.brk__name { margin: 0; font: 800 21px/1.2 var(--ui); color: var(--deep); }
.brk__score { margin: 6px 0 14px; font: 700 96px/1 var(--round); color: var(--deep); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.brk__bar { margin: 0 6px; }
.brk__foot { display: flex; margin-top: 24px; }
.brk__go { width: 100%; }

.bar {
  position: relative;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9f2f5;
  box-shadow: inset 0 2px 3px rgba(19, 80, 115, 0.1);
}
.bar__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(180deg, #ffa8de 0%, #d665bd 55%, #a8419a 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}
.bar__fill::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 12px;
  top: 3px;
  height: 30%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}
.sec--math .bar__fill { background: linear-gradient(180deg, #8fe2ff 0%, #16a6e5 55%, #0c79b8 100%); }

/* ------------------------------------------------------------------ the score report */

.results { display: flex; flex-direction: column; overflow: hidden; }
.report {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 26px 20px;
  scrollbar-width: thin;
  scrollbar-color: #cfe5eb transparent;
}
.report__title { display: flex; align-items: center; gap: 9px; margin: 0; font: 800 18px/1.2 var(--ui); color: var(--deep); }
.report__total { margin: 4px 0 0; font: 700 88px/1 var(--round); color: var(--deep); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; transform-origin: 0 70%; }
.report__perfect { margin: 2px 0 0; font: 700 22px/1.2 var(--round); color: #e89b00; }
.report__secs { display: grid; gap: 10px; margin: 14px 0 16px; }
.sec__line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; font: 700 16px/1.2 var(--ui); color: var(--ink); }
.sec__n { font: 700 24px/1 var(--round); color: var(--deep); font-variant-numeric: tabular-nums; }
.sec__bar { height: 14px; }
.report__actions { display: flex; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
/* the countdown takes what's left beside Share (two short lines on a narrow phone) */
.report__actions > .report__next { flex: 1 1 0; min-width: 0; }
.report__share { min-width: 160px; }
.report__next { margin: 0; font: 600 15px/1.3 var(--body); color: var(--grey); font-variant-numeric: tabular-nums; }
.report__rows { display: grid; gap: 5px; margin: 0 0 12px; padding: 0; list-style: none; }
.report__rows li.is-gap { margin-top: 7px; }
.row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px 7px 8px;
  border: 0;
  border-radius: 14px;
  background: #f4f9fb;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.row.is-open { background: #eaf4f8; background: color-mix(in srgb, var(--c) 10%, #f4f9fb); }
.row:active { transform: translateY(1px); }
.row:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.row__chip { justify-self: start; }
.row__ans { min-width: 0; overflow: hidden; font: 650 15.5px/1.25 var(--ui); white-space: nowrap; text-overflow: ellipsis; }
.row__ans--miss { color: #8aa0ab; font-weight: 500; }
.row__pts { font: 600 18px/1 var(--round); color: var(--deep); font-variant-numeric: tabular-nums; }
.row.is-top .row__pts { color: #e89b00; }
.report__stats, .report__super { margin: 0; font: 500 14.5px/1.45 var(--body); color: #43606c; }
/* where you landed, under the total: on phones only (desktops say it beside Preppy) */
.report__landed { margin: 4px 0 0; font: 500 14.5px/1.38 var(--body); color: #33505c; }
.app:not(.is-phone) .report__landed { display: none; }
.report__predict {
  display: flex;
  width: 100%;
  min-height: 50px;
  height: auto;
  margin: 0 0 14px;
  padding: 9px 18px;
  font-size: 17px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  color: #0a7cbf;
}
.report__total { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.report__best {
  display: inline-block;
  padding: 6px 11px 5px;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--ink);
  font: 700 17px/1 var(--round);
  letter-spacing: 0.01em;
  transform: rotate(-6deg);
  box-shadow: 0 3px 0 #d4b200, 0 6px 14px rgba(160, 120, 0, 0.18);
  white-space: nowrap;
}

.peek { position: absolute; z-index: 6; left: 12px; right: 12px; bottom: 12px; }
.peek__card {
  position: relative;
  padding: 14px 48px 16px 16px;
  border-radius: 22px;
  background: #ffffff;
  border: 2px solid #e3eef3;
  border: 2px solid color-mix(in srgb, var(--c) 22%, #ffffff);
  box-shadow: 0 4px 0 #d3e8ef, 0 18px 40px rgba(19, 80, 115, 0.24);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 30%, #d3e8ef), 0 18px 40px rgba(19, 80, 115, 0.24);
}
.peek__prompt { margin: 9px 0 6px; font: 700 17px/1.25 var(--ui); color: var(--ink); }
.peek__line { margin: 0 0 3px; font: 500 14.5px/1.4 var(--body); color: #33505c; }
.peek__line b { font-weight: 700; color: var(--ink); }
.peek__fact { margin: 7px 0 0; font: 500 14px/1.42 var(--body); color: #33505c; }
.peek__close {
  position: absolute;
  right: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eef6f9;
  color: var(--deep);
  cursor: pointer;
}
.peek__close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ------------------------------------------------------------------ screen-wide moments */

.jackpot {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.jackpot__in { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.jackpot svg { display: block; overflow: visible; }
.jackpot text { font-family: "Fredoka", "DM Sans", "Inter"; font-weight: 700; font-size: 200px; }
.jackpot__text { fill: #ffc21a; stroke: #ffffff; stroke-width: 18px; stroke-linejoin: round; paint-order: stroke; }
.jackpot__edge { fill: #c97800; stroke: #c97800; stroke-width: 18px; stroke-linejoin: round; }
.jackpot__shine { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 6px; }

.fly-pts {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  font: 700 28px/1 var(--round);
  color: var(--c);
  white-space: nowrap;
  text-shadow: 0 2px 0 #ffffff, 2px 0 0 #ffffff, -2px 0 0 #ffffff, 0 -2px 0 #ffffff, 1.5px 1.5px 0 #ffffff, -1.5px -1.5px 0 #ffffff, 1.5px -1.5px 0 #ffffff, -1.5px 1.5px 0 #ffffff, 0 5px 8px rgba(10, 40, 60, 0.2);
  will-change: transform, opacity;
}

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

.app.is-phone { --hud-h: 60px; }
.app.is-phone .hud { padding: calc(9px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) 0 calc(9px + env(safe-area-inset-left)); }
.app.is-phone .hud__bar { gap: 9px; min-height: 40px; padding: 6px 12px; border-radius: 16px; }
.app.is-phone .hud__title { gap: 4px; font-size: 13px; }
.app.is-phone .hud__slots { gap: 3px; }
.app.is-phone .hud__gap { width: 5px; }
.app.is-phone .slot { width: 14px; height: 14px; }
.app.is-phone .slot__pts { display: none; }
.app.is-phone .slot.is-top { box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(255, 194, 26, 0.7); }
.app.is-phone .slot.is-current { box-shadow: inset 0 0 0 2px var(--c); }
.app.is-phone .hud__score { font-size: 19px; }
.app.is-phone .btn-icon { width: 40px; height: 40px; }
.app.is-phone .btn-icon svg { width: 21px; height: 24px; }
.app.is-phone .stage {
  left: 0;
  right: 0;
  align-items: flex-end;
  padding: 6px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
}
.app.is-phone .panel { border-radius: 26px; max-height: calc(100% - 128px); }
.app.is-phone.is-tiny .panel { max-height: calc(100% - 84px); }
/* on short phones the intro and the report keep only a strip of the scene (the desk), so Start,
   Share and the predictor stay on the screen */
.app.is-phone.is-short .intro, .app.is-phone.is-short .results { max-height: calc(100% - 64px); }
/* the keyboard up (under 400 px left): the card takes the room, the scene keeps a strip */
.app.is-phone.is-kb .panel { max-height: calc(100% - 32px); }
.app.is-phone .card.is-revealed .card__prompt { overflow-wrap: anywhere; }
.app.is-phone .intro { padding: 20px 20px 18px; }
.app.is-phone .intro__title { font-size: 36px; gap: 2px 10px; }
.app.is-phone .intro__title .beta { font-size: 13px; }
.app.is-phone .intro__head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "curve curve" "meta brand"; }
.app.is-phone .intro__brand { align-self: center; padding-top: 10px; }
.app.is-phone .intro__wordmark { height: 17px; }
.app.is-phone .intro__rules { gap: 11px; margin: 16px 0 18px; }
.app.is-phone .intro__rule { font-size: 15.5px; }
.app.is-phone .intro__icon,
.app.is-phone .intro__icon svg { width: 34px; height: 34px; }
.app.is-phone .card { padding: 14px 16px 14px; }
.app.is-phone .card__top { margin-bottom: 10px; }
.app.is-phone .jelly { height: 17px; }
.app.is-phone .card__time { font-size: 19px; min-width: 40px; }
.app.is-phone .card__head { margin-bottom: 9px; }
.app.is-phone .card__prompt { margin-bottom: 14px; font-size: 24px; }
.app.is-phone .card.is-revealed .card__prompt { font-size: 16px; margin-bottom: 10px; }
.app.is-phone .answer { height: 60px; padding: 6px 6px 6px 2px; border-radius: 19px; }
.app.is-phone .answer__input, .app.is-phone .answer__mirror { font-size: 21px; }
.app.is-phone .answer__input { padding: 0 12px; }
.app.is-phone .btn--go { height: 48px; padding: 0 20px; font-size: 18px; border-radius: 14px; }
.app.is-phone .card__below { min-height: 30px; margin-top: 10px; }
.app.is-phone .miss { font-size: 15px; }
.app.is-phone .dym { font-size: 15.5px; }
.app.is-phone .reveal { --bk: 0.8; }
.app.is-phone .reveal__pts { font-size: calc(36px * var(--pts-k)); }
.app.is-phone .reveal__line { font-size: 16px; margin-top: 5px; }
.app.is-phone .reveal__line--hl4 { font-size: 18px; }
.app.is-phone .reveal--g0 .reveal__line { font-size: 18px; }
.app.is-phone .reveal__info { gap: 5px; }
.app.is-phone .reveal__you { font-size: 15.5px; }
.app.is-phone .reveal__more { font-size: 14px; gap: 2px 12px; }
.app.is-phone .reveal__note { font-size: 13px; }
.app.is-phone .reveal__fact { padding: 8px 11px; font-size: 13.5px; border-radius: 13px; }
.app.is-phone .reveal__foot { margin-top: 11px; }
.app.is-phone .btn--next { height: 50px; }
.app.is-phone .brk { padding: 22px 20px 18px; }
.app.is-phone .brk__score { font-size: 80px; }
.app.is-phone .report { padding: 18px 18px 16px; }
.app.is-phone .report__total { font-size: 66px; }
.app.is-phone .report__secs { margin: 10px 0 13px; gap: 8px; }
.app.is-phone .report__actions { margin-bottom: 12px; gap: 8px 14px; }
.app.is-phone .report__share { min-width: 138px; height: 54px; font-size: 19px; }
.app.is-phone .row { grid-template-columns: 84px minmax(0, 1fr) auto; padding: 6px 10px 6px 6px; gap: 8px; }
.app.is-phone .row__ans { font-size: 14.5px; }
.app.is-phone .row__pts { font-size: 16px; }
.app.is-phone .report__stats, .app.is-phone .report__super { font-size: 13.5px; }
.app.is-phone .report__predict { min-height: 46px; margin-bottom: 12px; font-size: 16px; }
.app.is-phone .report__best { font-size: 15px; }
.app.is-phone .report__landed { font-size: 13.5px; }

/* short phones: a compact reveal, so Preppy keeps his room above it */
.app.is-phone.is-short .card.is-revealed { padding-top: 12px; padding-bottom: 12px; }
.app.is-phone.is-short .card.is-revealed .card__top { display: none; }
.app.is-phone.is-short .card.is-revealed .card__head { margin-bottom: 6px; }
.app.is-phone.is-short .card.is-revealed .card__prompt { font-size: 15px; margin-bottom: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.app.is-phone.is-short .reveal { --bk: 0.6; }
.app.is-phone.is-short .reveal__hit { margin: 2px 0 8px calc(var(--bs) * 0.12); }
.app.is-phone.is-short .reveal__pts { font-size: calc(29px * var(--pts-k)); }
.app.is-phone.is-short .reveal__line { font-size: 15px; margin-top: 4px; }
.app.is-phone.is-short .reveal__line--hl4, .app.is-phone.is-short .reveal--g0 .reveal__line { font-size: 16px; }
.app.is-phone.is-short .reveal__info { gap: 3px; }
.app.is-phone.is-short .reveal__you { font-size: 14.5px; }
.app.is-phone.is-short .reveal__note { font-size: 12.5px; }
.app.is-phone.is-short .reveal__more { font-size: 13px; gap: 1px 10px; }
.app.is-phone.is-short .reveal__fact { padding: 7px 10px; font-size: 12.5px; line-height: 1.36; }
.app.is-phone.is-short .reveal__foot { margin-top: 8px; }
.app.is-phone.is-short .btn--next { height: 44px; font-size: 17px; }
.app.is-phone.is-short .card { --sk: 0.72; }

/* narrow phones */
.app.is-narrow .hud__bar { gap: 7px; padding: 6px 10px; }
.app.is-narrow .hud__title { font-size: 12px; }
.app.is-narrow .slot { width: 12px; height: 12px; }
.app.is-narrow .hud__score { font-size: 16.5px; min-width: 0; }
.app.is-narrow .hud__slots { gap: 2.5px; }
.app.is-narrow .hud__gap { width: 4px; }
.app.is-narrow .hud { gap: 5px; padding-left: calc(7px + env(safe-area-inset-left)); padding-right: calc(7px + env(safe-area-inset-right)); }
.app.is-narrow .intro__title { font-size: 32px; }
.app.is-narrow .card__prompt { font-size: 22px; }
.app.is-narrow .card__where { font-size: 13px; }
.app.is-narrow .row { grid-template-columns: 78px minmax(0, 1fr) auto; }
/* the HUD on phones held upright (under 420 px, 390 and 393 included): its narrow spacing, so
   "Off the Curve" stays whole beside a 4-digit score; a notch tighter under 380 (under 350 the
   name goes, below) */
@media (max-width: 419.98px) {
  .app.is-phone .hud { gap: 5px; padding-left: calc(7px + env(safe-area-inset-left)); padding-right: calc(7px + env(safe-area-inset-right)); }
  .app.is-phone .hud__bar { gap: 7px; padding-left: 10px; padding-right: 10px; }
  .app.is-phone .hud__title { font-size: 12px; }
  .app.is-phone .hud__slots { gap: 2.5px; }
  .app.is-phone .hud__gap { width: 4px; }
  .app.is-phone .slot { width: 12px; height: 12px; }
  .app.is-phone .hud__score { font-size: 16.5px; min-width: 0; }
}
@media (max-width: 379.98px) {
  .app.is-phone .hud__bar { gap: 6px; padding-left: 9px; padding-right: 9px; }
  .app.is-phone .hud__slots { gap: 2px; }
  .app.is-phone .hud__gap { width: 3px; }
  .app.is-phone .slot { width: 11px; height: 11px; }
}

/* short screens (desktop) */
.app.is-short:not(.is-phone):not(.is-tiny) { --hud-h: 72px; }
.app.is-short:not(.is-phone):not(.is-tiny) .stage { padding-bottom: 14px; }
.app.is-short .report { padding-top: 18px; padding-bottom: 14px; }
.app.is-short .report__total { font-size: 66px; }
.app.is-short .report__secs { margin: 8px 0 12px; gap: 6px; }
.app.is-short .sec__line { margin-bottom: 4px; }
.app.is-short .sec__bar { height: 11px; }
.app.is-short .report__actions { margin-bottom: 10px; }
.app.is-short .report__share { height: 52px; }
.app.is-short .report__rows { gap: 3px; margin-bottom: 8px; }
.app.is-short .row { padding-top: 5px; padding-bottom: 5px; }
.app.is-short .report__predict { min-height: 44px; margin-bottom: 10px; }
.app.is-short .brk__score { font-size: 84px; }
/* a report too tall for its screen (a 1600's line or where you landed on a small phone): its top
   goes compact, then tight, until Share and the predictor are on the screen (results.js fit) */
.report.is-compact { padding-top: 13px; }
.report.is-compact .report__total { font-size: 54px; }
.report.is-compact .report__perfect { margin-top: 0; font-size: 19px; }
.report.is-compact .report__landed { margin-top: 2px; font-size: 13px; line-height: 1.3; }
.report.is-compact .report__secs { margin: 7px 0 10px; gap: 5px; }
.report.is-compact .sec__line { margin-bottom: 2px; font-size: 15px; }
.report.is-compact .sec__n { font-size: 21px; }
.report.is-compact .sec__bar { height: 9px; }
.report.is-tight { padding-top: 10px; }
.report.is-tight .report__title { font-size: 16px; }
.report.is-tight .report__total { font-size: 46px; }
.report.is-tight .report__actions { margin-bottom: 8px; }
.report.is-tight .report__share { height: 46px; }
.report.is-tight .report__predict { min-height: 40px; margin-bottom: 8px; }

/* tiny heights: a phone on its side, a phone with its keyboard up */
.app.is-tiny { --hud-h: 54px; }
.app.is-tiny .hud { padding-top: calc(7px + env(safe-area-inset-top)); }
.app.is-tiny .hud__bar { min-height: 38px; padding: 5px 12px; }
.app.is-tiny .btn-icon { width: 38px; height: 38px; }
.app.is-tiny .stage { padding-top: 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.app.is-tiny .panel { border-radius: 22px; }
.app.is-tiny .card { padding: 10px 14px 10px; }
.app.is-tiny .card__top { margin-bottom: 7px; }
.app.is-tiny .jelly { height: 14px; }
.app.is-tiny .jelly__shine { top: 3px; height: 4px; }
.app.is-tiny .card__time { font-size: 17px; }
.app.is-tiny .card__head { min-height: 24px; margin-bottom: 6px; }
.app.is-tiny .card__chip { height: 24px; font-size: 12.5px; padding: 0 10px; }
.app.is-tiny .card__where { font-size: 13px; }
.app.is-tiny .card__prompt { margin-bottom: 9px; font-size: 20px; }
.app.is-tiny .card.is-revealed .card__prompt { font-size: 14.5px; margin-bottom: 6px; }
.app.is-tiny .answer { height: 52px; padding: 5px 5px 5px 2px; border-radius: 16px; }
.app.is-tiny .answer__input, .app.is-tiny .answer__mirror { font-size: 19px; }
.app.is-tiny .btn--go { height: 42px; padding: 0 18px; font-size: 17px; border-radius: 12px; }
.app.is-tiny .card__below { min-height: 26px; margin-top: 7px; }
.app.is-tiny .miss, .app.is-tiny .dym { font-size: 14.5px; }
.app.is-tiny .btn--yes { height: 34px; padding: 0 14px; font-size: 15px; }
.app.is-tiny .reveal { --bk: 0.52; }
.app.is-tiny .card.is-revealed .card__prompt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.app.is-tiny .card.is-revealed .card__top { display: none; }
.app.is-tiny .card.is-revealed { padding-top: 12px; }
.app.is-tiny .card { --sk: 0.62; }
.app.is-tiny .sticker--0 { right: 2px; top: -10px; }
.app.is-tiny .sticker--1 { right: calc(var(--s) * 0.62 + 4px); top: -16px; }
.app.is-tiny .sticker--2 { right: calc(var(--s) * 0.15); top: calc(var(--s) * 0.42); }
.app.is-tiny:not(.is-phone) .slot { width: 26px; height: 26px; }
.app.is-tiny:not(.is-phone) .slot__pts { font-size: 10px; }
.app.is-tiny:not(.is-phone) .hud__score { font-size: 21px; }
.app.is-tiny:not(.is-phone) .hud__title { font-size: 13.5px; }
.app.is-tiny .reveal__hit { margin: 2px 0 6px calc(var(--bs) * 0.12); }
.app.is-tiny .reveal__pts { font-size: calc(23px * var(--pts-k)); }
.app.is-tiny .reveal__line { font-size: 14.5px; margin-top: 3px; }
.app.is-tiny .reveal__line--hl4, .app.is-tiny .reveal--g0 .reveal__line { font-size: 16px; }
.app.is-tiny .reveal__info { gap: 3px; }
.app.is-tiny .reveal__you { font-size: 14px; }
.app.is-tiny .reveal__note { font-size: 12.5px; }
.app.is-tiny .reveal__more { font-size: 13px; }
.app.is-tiny .reveal__fact { margin-top: 1px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; border-radius: 11px; }
.app.is-tiny .reveal__foot { margin-top: 5px; }
.app.is-tiny .btn--next { height: 40px; font-size: 17px; border-radius: 13px; }
.app.is-tiny .reveal__more { gap: 1px 10px; }
.app.is-tiny .intro { padding: 14px 18px 14px; }
.app.is-tiny .intro__title { font-size: 28px; }
.app.is-tiny .intro__head { grid-template-areas: "title title" "curve curve" "meta brand"; }
.app.is-tiny .intro__brand { align-self: center; padding-top: 4px; }
.app.is-tiny .intro__wordmark { height: 16px; }
.app.is-tiny .intro__title .beta { font-size: 12px; }
.app.is-tiny .intro__curve { display: none; }
.app.is-tiny .intro__meta { margin-top: 4px; font-size: 14px; }
.app.is-tiny .intro__rules { gap: 6px; margin: 10px 0 12px; }
.app.is-tiny .intro__rule { font-size: 14px; }
.app.is-tiny .intro__icon, .app.is-tiny .intro__icon svg { width: 28px; height: 28px; }
.app.is-tiny .btn--big { height: 48px; font-size: 18px; border-radius: 15px; }
.app.is-tiny .brk { padding: 14px 18px 14px; }
.app.is-tiny .brk__score { font-size: 60px; margin: 2px 0 8px; }
.app.is-tiny .brk__foot { margin-top: 14px; }
.app.is-tiny .report { padding: 12px 16px 12px; }
.app.is-tiny .report__title { font-size: 15px; }
.app.is-tiny .report__total { font-size: 46px; }
.app.is-tiny .report__secs { margin: 6px 0 8px; gap: 5px; }
.app.is-tiny .sec__line { margin-bottom: 3px; font-size: 14px; }
.app.is-tiny .sec__n { font-size: 19px; }
.app.is-tiny .sec__bar { height: 10px; }
.app.is-tiny .report__actions { margin-bottom: 8px; }
.app.is-tiny .report__share { height: 44px; min-width: 120px; }
.app.is-tiny .report__predict { min-height: 44px; margin-bottom: 8px; padding: 7px 14px; font-size: 15.5px; }
.app.is-tiny .report__best { font-size: 13px; padding: 5px 9px 4px; }

/* ------------------------------------------------------------------ fitting every screen */

/* the intro, compact: on short phones, or whenever its rules would have to scroll */
.intro.is-compact { padding: 14px 18px 14px; }
.app.is-phone .intro.is-compact { padding: 16px 18px 14px; }
.intro.is-compact .intro__title { font-size: 28px; }
.intro.is-compact .intro__title .beta { font-size: 12px; }
.intro.is-compact .intro__head { grid-template-areas: "title title" "curve curve" "meta brand"; }
.intro.is-compact .intro__brand { align-self: center; padding-top: 4px; }
.intro.is-compact .intro__wordmark { height: 16px; }
.intro.is-compact .intro__curve { display: none; }
.intro.is-compact .intro__meta { margin-top: 4px; font-size: 14px; }
.intro.is-compact .intro__no { font-size: 16px; }
.intro.is-compact .intro__rules { gap: 6px; margin: 10px 0 12px; }
.intro.is-compact .intro__rule { font-size: 14px; line-height: 1.3; }
.intro.is-compact .intro__icon, .intro.is-compact .intro__icon svg { width: 28px; height: 28px; }
.intro.is-compact .intro__rules li { gap: 10px; }
.intro.is-compact .btn--big { height: 48px; font-size: 18px; border-radius: 15px; }

/* a short desktop window (a laptop at 125 to 150% scaling): a compact reveal, so the fact shows */
.app.is-low .card.is-revealed { padding-top: 14px; padding-bottom: 14px; }
.app.is-low .card.is-revealed .card__top { display: none; }
.app.is-low .card.is-revealed .card__head { margin-bottom: 8px; }
.app.is-low .card.is-revealed .card__prompt { margin-bottom: 8px; font-size: 16.5px; }
.app.is-low .reveal { --bk: 0.72; }
.app.is-low .reveal__hit { margin: 2px 0 8px calc(var(--bs) * 0.12); }
.app.is-low .reveal__pts { font-size: calc(36px * var(--pts-k)); }
.app.is-low .reveal__line { font-size: 16px; margin-top: 4px; }
.app.is-low .reveal__line--hl4, .app.is-low .reveal--g0 .reveal__line { font-size: 18px; }
.app.is-low .reveal__info { gap: 4px; }
.app.is-low .reveal__you { font-size: 15.5px; }
.app.is-low .reveal__more { font-size: 14px; gap: 2px 14px; }
.app.is-low .reveal__fact { padding: 8px 12px; font-size: 13.5px; line-height: 1.38; }
.app.is-low .reveal__foot { margin-top: 10px; }
.app.is-low .card { --sk: 0.8; }

/* the keyboard up on a phone (under 400 px left): the clock thins to a bar along the card's
   top edge with its time in the chip row, the prompt gets a little smaller, and the line for a
   miss or a "Did you mean" sits between the prompt and the box, so the box stays nearest the
   keyboard and the line never falls off the screen */
/* the HUD gives up a few px too */
.app.is-kb { --hud-h: 50px; }
.app.is-kb .hud { padding-top: calc(6px + env(safe-area-inset-top)); }
.app.is-kb .hud__bar { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.app.is-kb .stage { padding-top: 2px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
.app.is-kb .card:not(.is-revealed) { padding-top: 21px; padding-bottom: 9px; }
.app.is-kb .card:not(.is-revealed) .card__top { position: absolute; left: 16px; right: 16px; top: 9px; margin: 0; }
.app.is-kb .card:not(.is-revealed) .jelly { height: 7px; }
.app.is-kb .card:not(.is-revealed) .jelly__shine { top: 1.5px; height: 2px; }
.app.is-kb .card:not(.is-revealed) .jelly__edge { width: 9px; right: -3px; }
.app.is-kb .card:not(.is-revealed) .card__time { position: absolute; right: 0; top: 19px; font-size: 17px; min-width: 0; }
.app.is-kb .card:not(.is-revealed) .card__head { padding-right: 46px; }
.app.is-kb .card__prompt { margin-bottom: 7px; font-size: 18px; line-height: 1.16; }
.app.is-kb .card__head { margin-bottom: 5px; }
.app.is-kb .card__play { display: flex; flex-direction: column; }
.app.is-kb .card__below { order: -1; min-height: 0; margin: 0 0 6px; }
.app.is-kb .card__below:empty { margin: 0; }
.app.is-kb .answer { height: 54px; padding: 5px 5px 5px 2px; }
.app.is-kb .btn--go { height: 44px; }
.app.is-kb .btn--yes { height: 44px; padding: 0 16px; }
.app.is-kb .dym { gap: 6px 10px; }
.app.is-kb.is-xnarrow .card__prompt { font-size: 17px; }
/* a phone on its side with the keyboard up (under 260 px left): the HUD steps aside and the card
   keeps the prompt, the line and the box, with the clock's bar and time along its top edge */
.app.is-squat { --hud-h: 0px; }
.app.is-squat .hud { visibility: hidden; }
.app.is-squat .stage { padding-top: 4px; }
.app.is-phone.is-kb.is-squat .panel { max-height: 100%; }
.app.is-squat .card:not(.is-revealed) { padding-top: 17px; padding-bottom: 5px; }
.app.is-squat .card:not(.is-revealed) .card__head { display: none; }
.app.is-squat .card:not(.is-revealed) .card__top { right: 64px; top: 7px; }
.app.is-squat .card:not(.is-revealed) .card__time { top: -5px; right: -50px; font-size: 15px; }
.app.is-squat .card__prompt { margin-bottom: 5px; }
.app.is-squat .card__below { margin-bottom: 4px; }
/* the tiny layout's buttons stay at least 44 px tall */
.app.is-tiny .btn--go { height: 44px; }
.app.is-tiny .answer { height: 54px; }
.app.is-tiny .btn--yes { height: 44px; }

/* under 350 px wide (iPhones with Display Zoom, small Androids): the HUD keeps "#1 Beta" and
   the score whole, the intro's date goes short, and the 9 and 10 lines fit the card */
.app.is-xnarrow .hud__name { display: none; }
.app.is-xnarrow .hud__bar { gap: 6px; padding: 6px 9px; }
.app.is-xnarrow .hud__slots { gap: 2px; }
.app.is-xnarrow .slot { width: 11px; height: 11px; }
.app.is-xnarrow .intro__date-long { display: none; }
.app.is-xnarrow .intro__date-short { display: inline; }
/* any width: a long date that won't fit beside the wordmark goes short (fitIntro in main.js) */
.intro.is-short-date .intro__date-long { display: none; }
.intro.is-short-date .intro__date-short { display: inline; }
.app.is-xnarrow .answer__input, .app.is-xnarrow .answer__mirror { font-size: 19px; }
.app.is-xnarrow .answer__input { padding: 0 10px; }
.app.is-xnarrow .reveal { --bk: 0.6; }
.app.is-xnarrow.is-short .reveal { --bk: 0.54; }
.app.is-xnarrow .reveal__line.reveal__line--hl4 { font-size: 14.5px; }
/* there's no room above the card for both the callout and the gold stickers: the stickers sit
   inside the card's corner, and the header's words stop short of them */
.app.is-xnarrow .sticker--0 { right: 2px; top: calc(var(--s) * -0.1); }
.app.is-xnarrow .sticker--1 { right: calc(var(--s) * 1.02); top: calc(var(--s) * -0.08); }
.app.is-xnarrow .sticker--2 { right: calc(var(--s) * 0.12); top: calc(var(--s) * 0.72); }
.app.is-xnarrow .card.is-revealed:is(.is-g7, .is-g8, .is-g9, .is-g10) .card__head { padding-right: 92px; }

/* a tablet held upright: the HUD has the room for each slot's points */
.app.is-phone.is-wide .hud__bar { gap: 12px; padding: 8px 14px; }
.app.is-phone.is-wide .slot { width: 28px; height: 28px; }
.app.is-phone.is-wide .slot__pts { display: block; font-size: 11px; }
.app.is-phone.is-wide .hud__score { font-size: 22px; }
.app.is-phone.is-wide .hud__title { font-size: 14px; }

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

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