/*
 * Circle of Joy — one stylesheet for all three surfaces: the player's phone, the big screen and the host's
 * control view.
 *
 * SHERBET. Daylight, not candlelight. The ground is the palest pink of a sugared almond; everything
 * that matters sits on it as a soft, rounded plate in lemon, mint, bubblegum or periwinkle. There
 * are no borders anywhere and no hard edges: a plate is separated from the ground by the small
 * shadow it drops, and the shadow sits directly underneath it so the plate looks like something you
 * could press with your thumb.
 *
 * Two ideas carry it, and everything else stays quiet behind them:
 *   1. PRESSABLE. Anything you may touch rests on a solid 4px shadow of its own colour, and sinks
 *      onto it when pressed. Anything you may not touch has no shadow at all. You can tell what is
 *      alive with the sound off and the screen at arm's length.
 *   2. CELEBRATION IS EARNED. The room bursts into confetti when somebody gets it right, when the
 *      last person joins, when the podium rises. Never on a loop, never for nothing.
 *
 * Type: Baloo Bhaijaan 2 for the display — round, heavy and cheerful, one weight, used only where
 * something is shouted (the room code, the countdown, a score, a verdict, the wordmark). Rubik for
 * everything else. Both carry Arabic natively, so an Arabic room speaks in the same voice as an
 * English one instead of falling through to whatever the phone has. The files ship with the app and
 * are served off the phone: no network request, ever.
 *
 * Direction: the page sets dir="rtl" from the room's locale. Every rule below uses logical
 * properties so nothing needs mirroring by hand. Contrast: plum on sugar is 11.8:1, and plum on
 * every one of the four answer plates clears 6.5:1 — which is why a plate carries dark text.
 */

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Rubik-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Baloo Bhaijaan 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/BalooBhaijaan2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo Bhaijaan 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/BalooBhaijaan2-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root {
  color-scheme: light;

  /* ---- the ground ---- */
  --sugar:    #fdf4fa;   /* the ground: the palest pink there is, never plain white */
  --icing:    #ffffff;   /* a plate resting on it */
  --icing-2:  #fbf0f7;   /* a plate resting on a plate */
  --groove:   #f0e3ee;   /* a track, a groove, an empty bar */

  /* ---- the ink ---- */
  --plum:     #3a2749;   /* everything readable: 11.8:1 on sugar */
  --plum-2:   rgba(58,39,73,.74);
  --plum-3:   rgba(58,39,73,.70);   /* the faintest text allowed: still 5.0:1 on sugar */
  --shade:    rgba(58,39,73,.13);   /* the shadow a plate drops */
  --shade-2:  rgba(58,39,73,.07);

  /* ---- the sherbet set: the six sweets ----
     Each sweet has three jobs and therefore three values, and mixing them up is how a light theme
     ends up unreadable:
       plain  the plate fill. Plum sits on it — every one of these clears 5.6:1 with plum on top.
       -lip   the solid shadow the plate drops. Never carries text, so it only has to look right.
       -ink   the sweet concentrated until it can BE text. Every one clears 4.5:1 on sugar and on
              white, which is why no accent anywhere below is set in a plain or -lip value. */
  --lemon:   #ffd166;  --lemon-lip:  #d99b12;  --lemon-ink:  #8f6000;
  --mint:    #8de0c8;  --mint-lip:   #4cc9a7;  --mint-ink:   #177259;
  --bubble:  #ff9cc0;  --bubble-lip: #f56fa1;  --bubble-ink: #c03469;
  --peri:    #a8b4ff;  --peri-lip:   #7b8cf0;  --peri-ink:   #4f5cc4;
  --berry:   #ff8095;  --berry-lip:  #f2546e;  --berry-ink:  #a82138;   /* wrong, urgent */
  --pear:    #b8e986;  --pear-lip:   #8fcc57;  --pear-ink:   #417021;

  --good: var(--mint);   --good-ink: var(--mint-ink);   --good-soft: rgba(141,224,200,.34);
  --bad:  var(--berry);  --bad-ink:  var(--berry-ink);  --bad-soft:  rgba(255,128,149,.28);

  /* Answer identities: a sweet each, in the order the glyphs run — sun, moon, star, blossom. */
  --opt-0: #ffd166;  --opt-0-tint: rgba(255,209,102,.34);   /* lemon       */
  --opt-1: #8de0c8;  --opt-1-tint: rgba(141,224,200,.34);   /* mint        */
  --opt-2: #ff9cc0;  --opt-2-tint: rgba(255,156,192,.34);   /* bubblegum   */
  --opt-3: #a8b4ff;  --opt-3-tint: rgba(168,180,255,.34);   /* periwinkle  */

  /* The sweet set: the hues that mark people. Never carry text. */
  --joy-1: #ffd166;   /* lemon      */
  --joy-2: #ff9cc0;   /* bubblegum  */
  --joy-3: #8de0c8;   /* mint       */
  --joy-4: #a8b4ff;   /* periwinkle */
  --joy-5: #b8e986;   /* pear       */
  --joy-6: #ffb1a0;   /* peach      */

  --medal-ink: #3a2749;
  --medal-1:   #ffd166;
  --medal-2:   #d9dbf0;
  --medal-3:   #ffb1a0;

  /* ---- names the rest of the app still uses ----
     Every mode ships a scoped sheet, and the shared markup is older than this palette. Those names
     are kept alive here and pointed at the sherbet set, so nothing below this block — and nothing in
     any mode — had to learn a new vocabulary. A name on the left is history; the value is the truth. */
  --night:       var(--sugar);
  --night-2:     var(--icing);
  --night-3:     var(--groove);
  --glass:       rgba(58,39,73,.045);
  --glass-2:     rgba(58,39,73,.085);
  --glass-line:  rgba(58,39,73,.09);
  --glass-soft:  rgba(58,39,73,.05);
  --paper:       var(--plum);
  --paper-2:     var(--plum-2);
  --paper-3:     var(--plum-3);
  --ink:         var(--plum);
  --saffron:     var(--lemon);      /* a fill */
  --saffron-2:   var(--lemon-ink);  /* the same accent where it has to be read */
  --saffron-deep: var(--lemon-lip);
  --rose:        var(--bubble);
  --turquoise:   var(--mint);
  --lilac:       var(--peri);
  --ember:       var(--berry);
  --leaf:        var(--pear);
  --ground:      var(--sugar);
  --ground-deep: var(--groove);
  --card:        var(--icing);
  --ink-soft:    var(--plum-2);
  --muted:       var(--plum-3);
  --line:        var(--glass-line);
  --line-soft:   var(--glass-soft);
  --brass:       var(--lemon);
  --brass-lit:   #ffe1a0;
  --brass-deep:  var(--lemon-ink);
  --brass-soft:  rgba(255,209,102,.3);
  --sunk:        rgba(58,39,73,.10);
  --star9: circle(50%);
  --ray9-light: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
  --ray9-brass: radial-gradient(90% 70% at 82% 0%, rgba(255,209,102,.22), rgba(255,209,102,0) 72%);

  /* ---- shape ----
     Rounder than anything the app has been. Nothing is squarer than 12px, and the big plates are
     nearly pills. */
  --radius: 24px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --edge-h: 0px;
  --edge-line: transparent;

  /* A plate sits on a solid lip of its own shadow, then a soft one further out. Pressing squashes
     the lip, which is the whole trick: it is the shadow that makes a button feel like an object. */
  --lip: 4px;
  --shadow-1: 0 3px 0 var(--shade-2), 0 8px 20px -12px var(--shade);
  --shadow-2: 0 4px 0 var(--shade), 0 18px 34px -18px rgba(58,39,73,.35);
  --glow-saffron: 0 4px 0 var(--lemon-lip),  0 12px 26px -12px rgba(217,155,18,.5);
  --glow-good:    0 4px 0 var(--mint-lip),   0 12px 26px -12px rgba(76,201,167,.5);
  --glow-bad:     0 4px 0 var(--berry-lip),  0 12px 26px -12px rgba(242,84,110,.5);

  --ease: cubic-bezier(.2, .9, .26, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  --font: "Rubik", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Baloo Bhaijaan 2", "Rubik", ui-rounded, system-ui, sans-serif;
  --font-ar: "Rubik", "Noto Naskh Arabic", "SF Arabic", "Geeza Pro", "Segoe UI", sans-serif;

  --tap: 3.2rem;   /* the smallest thing a thumb is asked to hit */
}
}

/* Arabic: Rubik carries it, so the body face stays; only the leading loosens, and nothing is ever
   letter-spaced or upper-cased — both break the joins. */
html[lang="ar"],
html[lang="ar"] body {
  font-family: var(--font-ar);
  font-size: 106%;
  line-height: 1.7;
}
html[lang="ar"] :where(h1, h2, h3, .prompt, .verdict, .gain, .eyebrow, .pill, .opt, .joinurl,
                       .code, .secs, .rank, .score, .wordmark) {
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ar"] .prompt { line-height: 1.5; }
html[lang="ar"] .opt { line-height: 1.55; }
html:lang(ar), html:lang(ar) * { letter-spacing: 0 !important; word-spacing: normal; }

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

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--night);
  color: var(--paper);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}

/* The room. Three lanterns hang in the corners and breathe very slowly; the middle stays dark
   enough for type. Painted, not inherited, so a projector never goes light on a system setting. */
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  background-color: var(--night);
  overflow-x: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
}
/* Four sweets bleeding in from the corners. Kept faint: this is the ground, not the picture. */
body::before {
  background:
    radial-gradient(60% 45% at 12% -8%,  rgba(255,209,102,.55), rgba(255,209,102,0) 62%),
    radial-gradient(55% 40% at 96% 4%,   rgba(255,156,192,.45), rgba(255,156,192,0) 60%),
    radial-gradient(70% 50% at 50% 112%, rgba(141,224,200,.42), rgba(141,224,200,0) 62%),
    radial-gradient(45% 35% at 85% 92%,  rgba(168,180,255,.42), rgba(168,180,255,0) 60%);
  animation: lanterns 18s ease-in-out infinite alternate;
}
/* A scatter of sprinkles across the ground. Small and pale enough to read as paper texture from
   arm's length, and to stay out of the way of anything set on top of it. */
body::after {
  opacity: .5;
  background:
    radial-gradient(circle at 12% 34%, var(--joy-1) 0 2.5px, transparent 3px),
    radial-gradient(circle at 31% 68%, var(--joy-2) 0 2px,   transparent 2.5px),
    radial-gradient(circle at 57% 22%, var(--joy-4) 0 2.5px, transparent 3px),
    radial-gradient(circle at 73% 58%, var(--joy-3) 0 2px,   transparent 2.5px),
    radial-gradient(circle at 88% 30%, var(--joy-2) 0 2.5px, transparent 3px),
    radial-gradient(circle at 44% 88%, var(--joy-5) 0 2px,   transparent 2.5px),
    radial-gradient(circle at 20% 10%, var(--joy-4) 0 2px,   transparent 2.5px),
    radial-gradient(circle at 66% 82%, var(--joy-1) 0 2.5px, transparent 3px);
  background-size: 100% 100%;
}

main {
  flex: 1;
  width: min(96vw, 46rem);
  margin-inline: auto;
  padding: 1rem 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The celebration layer: one canvas over everything, never in the way. */
#fx {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* ---------- type ---------- */

h1 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 0; letter-spacing: .01em; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; margin: 0; line-height: 1.1; letter-spacing: .01em; }
p  { margin: 0; }

.muted { color: var(--paper-2); font-size: .95rem; }
.tiny  { color: var(--paper-3); font-size: .8rem; }
.center { text-align: center; }

/* Meta label: small, spaced, saffron. The Arabic override above turns it back into plain text. */
.eyebrow {
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--saffron-2);
}

/* The question. A glass plate with a lantern behind one corner: the one calm, well-lit thing on
   a screen where everything else is a light or a button. */
.prompt {
  position: relative;
  font-family: var(--font);
  font-size: clamp(1.3rem, 5.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0;
  padding: 1.25rem 1.25rem 1.35rem;
  color: var(--paper);
  background: var(--icing);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  isolation: isolate;
}
.prompt::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -6rem;
  inset-inline-end: -4rem;
  inline-size: 13rem;
  block-size: 13rem;
  background: radial-gradient(circle, rgba(255,209,102,.4), rgba(255,209,102,0) 68%);
  pointer-events: none;
}
.card .prompt { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; backdrop-filter: none; }
.card .prompt::before { content: none; }

/* ---------- chrome ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: calc(.55rem + env(safe-area-inset-top, 0px)) clamp(.85rem, 4vw, 1.15rem) .55rem;
  background: var(--sugar);
  border-block-end: 1px solid var(--glass-line);
}
.bar h1 {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--paper);
}
.brandmark { inline-size: 1.9rem; block-size: 1.9rem; flex: none; }

/* The wordmark, with the Arabic beside it in an English room and vice versa. */
.wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--saffron-2);
  line-height: 1;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
}
.wordmark small { font-size: .7em; color: var(--paper-3); font-family: var(--font-display); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .8rem;
  border-radius: 999px;
  background: var(--brass-soft);
  color: var(--saffron-2);
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.pill.away { background: transparent; color: var(--paper-3); border-color: var(--glass-line); }
/* A long name gives way before the wordmark does. */
.bar #seat { max-inline-size: 36vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

/* An icon control in the bar: the sound toggle. */
.iconbtn {
  flex: none;
  /* 44 points: the smallest target Apple asks for, and these are pressed in a hurry. */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--paper);
  cursor: pointer;
}
.iconbtn[aria-pressed="true"] { color: var(--saffron-2); border-color: var(--lemon-lip); box-shadow: var(--glow-saffron); }
.iconbtn svg { inline-size: 1.25rem; block-size: 1.25rem; }

.card {
  position: relative;
  background: var(--icing);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  padding: 1.1rem;
  box-shadow: var(--shadow-1);
}

/* ---------- controls ---------- */

button, .btn {
  font: inherit;
  font-family: var(--font);
  font-weight: 700;
  color: var(--paper);
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-md);
  padding: .85rem 1.1rem;
  min-block-size: var(--tap);
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
button:not(:disabled):hover { background: var(--icing-2); }
button:not(:disabled):active { transform: scale(.97); }
button:disabled { opacity: .38; cursor: default; transform: none; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 3px;
}

/* The one loud thing on the page: a lantern you press. */
button.primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--lemon);
  color: var(--ink);
  border-color: transparent;
  inline-size: 100%;
  padding-block: 1.05rem;
  font-size: 1.12rem;
  font-weight: 800;
  border-radius: var(--r-lg);
  box-shadow: var(--glow-saffron);
}
button.primary::after {
  /* a sweep of light across the button, once, when it arrives */
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
#app.enter button.primary::after { animation: sweep 1.1s var(--ease-out) .35s both; }
button.primary:not(:disabled):hover { background: #ffdc86; }
/* Pressing squashes the lip rather than shrinking the plate: it reads as weight, not as a zoom. */
button.primary:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lemon-deep); }
button.primary:disabled { background: var(--groove); color: var(--plum-3); box-shadow: none; opacity: 1; }

input {
  font: inherit;
  inline-size: 100%;
  padding: .95rem 1rem;
  min-block-size: var(--tap);
  border: 1.5px solid var(--glass-line);
  border-radius: var(--r-md);
  background: var(--icing);
  color: var(--plum);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:focus { border-color: var(--saffron); box-shadow: var(--glow-saffron); outline: none; }
input::placeholder { color: var(--paper-3); }

/* ---------- answers: four lanterns ----------
 * A glass plate with a coloured lamp at its start. Pick one and the whole plate lights in that
 * colour, with dark ink so it stays readable. Shape is doubled with colour (the glyph in the lamp),
 * so a colour-blind player still has four distinct answers and a room can shout "the triangle". */

.options { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 34rem) { .options { grid-template-columns: 1fr 1fr; gap: .9rem; } }

.opt {
  --c: var(--paper-2);
  --c-tint: var(--glass-2);
  /* The plate at rest: its own sweet, watered down. Picked, it goes to the full colour — so the
     four answers are four colours from across the room, and choosing one still visibly lights it. */
  --c-wash: var(--icing);
  --c-lip: var(--shade-2);
  --tab: min(3.6rem, 21vw);
  --disc: min(1.2rem, 6.6vw);
  --seal: min(1.8rem, 11vw);
  --seal-gap: min(.8rem, 3.4vw);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-inline-size: 0;
  min-block-size: 4.5rem;
  padding-block: .85rem;
  padding-inline: calc(var(--tab) + min(1rem, 4vw)) min(1.05rem, 5vw);
  margin: 0;
  color: var(--plum);
  background: var(--c-wash);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 0 var(--c-lip);
  text-align: start;
  font-family: var(--font);
  font-size: clamp(1.02rem, 4.2vw, 1.12rem);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
  overflow: hidden;
  transition: transform .14s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), opacity .22s var(--ease), filter .22s var(--ease), color .22s var(--ease);
}
.opt[data-i="0"] { --c: var(--opt-0); --c-tint: var(--opt-0-tint); --c-wash: color-mix(in srgb, var(--opt-0) 45%, #fff); --c-lip: color-mix(in srgb, var(--opt-0) 62%, var(--plum)); }
.opt[data-i="1"] { --c: var(--opt-1); --c-tint: var(--opt-1-tint); --c-wash: color-mix(in srgb, var(--opt-1) 45%, #fff); --c-lip: color-mix(in srgb, var(--opt-1) 62%, var(--plum)); }
.opt[data-i="2"] { --c: var(--opt-2); --c-tint: var(--opt-2-tint); --c-wash: color-mix(in srgb, var(--opt-2) 45%, #fff); --c-lip: color-mix(in srgb, var(--opt-2) 62%, var(--plum)); }
.opt[data-i="3"] { --c: var(--opt-3); --c-tint: var(--opt-3-tint); --c-wash: color-mix(in srgb, var(--opt-3) 45%, #fff); --c-lip: color-mix(in srgb, var(--opt-3) 62%, var(--plum)); }

/* The lamp: a coloured pool of light at the start of the plate. */
.opt::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--tab);
  background: linear-gradient(to var(--tab-dir, right), rgba(255,255,255,.55), rgba(255,255,255,0));
}
/* Break between words, and inside one only if a single word cannot fit at all: "anywhere" split
   "Muḥammad" in two on a half-width plate while there was room to move it whole to the next line. */
.opt > span:not(.glyph) { min-inline-size: 0; overflow-wrap: break-word; hyphens: manual; }

/* The glyph, on a disc of its own colour with ink struck into it. */
.opt > .glyph {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--tab);
  block-size: auto;
  display: grid;
  place-items: center;
  font-size: min(1.25rem, 7vw);
  line-height: 1;
  color: var(--plum);
  text-align: center;
  font-size: min(1.35rem, 7.5vw);
  background: radial-gradient(circle at 50% 50%, var(--c) 0 var(--disc), transparent calc(var(--disc) + .5px));
}
.opt:not(:has(.glyph)) { padding-inline-start: 1.4rem; }
.opt:not(:has(.glyph))::before { inline-size: .55rem; background: var(--c); border: 0; opacity: .85; }
body.screen .opt:not(:has(.glyph)) { padding-inline-start: 2rem; }
body.screen .opt:not(:has(.glyph))::before { inline-size: .8rem; }

@media (hover: hover) {
  button.opt:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--c-lip), 0 16px 26px -18px var(--shade); }
}
button.opt:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-lip); }

/* Not yours and not right: it dims and steps back into the dark. */
.opt.dim { opacity: .45; filter: saturate(.35); box-shadow: none; transform: scale(.985); }

/* Picked: the plate lights in its own colour, and the type goes to ink. */
.opt.picked {
  background: var(--c);
  color: var(--plum);
  border-color: transparent;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 55%, var(--plum));
  opacity: 1; filter: none;
}
.opt.picked > .glyph { background: radial-gradient(circle at 50% 50%, var(--ink) 0 var(--disc), transparent calc(var(--disc) + .5px)); color: var(--c); filter: none; }
.opt.right {
  background: var(--mint);
  color: var(--plum);
  border-color: transparent;
  box-shadow: var(--glow-good);
  opacity: 1; filter: none;
}
.opt.right > .glyph { background: radial-gradient(circle at 50% 50%, var(--plum) 0 var(--disc), transparent calc(var(--disc) + .5px)); color: var(--mint); filter: none; }
.opt.wrong {
  background: var(--berry);
  color: var(--plum);
  border-color: transparent;
  box-shadow: var(--glow-bad);
  opacity: 1; filter: none;
}
.opt.wrong > .glyph { background: radial-gradient(circle at 50% 50%, var(--plum) 0 var(--disc), transparent calc(var(--disc) + .5px)); color: var(--berry); }

.opt.picked::after, .opt.right::after, .opt.wrong::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--seal-gap);
  inset-block-start: 50%;
  inline-size: var(--seal);
  block-size: var(--seal);
  margin-block-start: calc(var(--seal) / -2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-size: min(1.05rem, 6vw);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.opt.picked::after { background: var(--plum); box-shadow: 0 0 0 3px rgba(58,39,73,.22); }
.opt.right::after  { content: "✓"; background: var(--plum); color: var(--mint); }
.opt.wrong::after  { content: "×"; background: var(--plum); color: var(--berry); font-size: min(1.25rem, 7vw); }
.opt.picked, .opt.right, .opt.wrong { padding-inline-end: calc(var(--seal) + var(--seal-gap) + min(.6rem, 2.5vw)); }

/* The number on an answer. Set in the display face and hard against the baseline, because it is
   read at a glance and called out loud, not scanned as body text. */
.glyph {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
}

/* ---------- countdown: a glowing fuse ---------- */

.timerwrap { display: flex; align-items: center; gap: .75rem; }
.timerwrap > .timer { flex: 1; min-inline-size: 0; }
.timerwrap .secs {
  flex: none;
  min-inline-size: 2.7rem;
  block-size: 2.7rem;
  display: inline-grid;
  place-items: center;
  padding-inline: .4rem;
  border-radius: 999px;
  background: var(--brass-soft);
  border: 1px solid transparent;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  color: var(--saffron-2);
  line-height: 1;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.timer {
  position: relative;
  block-size: .8rem;
  background: var(--night-3);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 3px var(--shade-2);
}
.timer > span {
  display: block;
  block-size: 100%;
  background: linear-gradient(90deg, var(--mint) 0%, var(--lemon) 55%, var(--bubble) 100%);
  border-radius: 999px;
  box-shadow: none;
  transition: inline-size .25s linear;
}
.timer.urgent > span { background: var(--berry); box-shadow: none; }
.timer.urgent { animation: pulse 1s ease-in-out infinite; }
.timerwrap.urgent .secs { color: var(--ink); background: var(--ember); border-color: transparent; animation: tickbeat 1s ease-in-out infinite; }

/* ---------- question progress: a string of lights ---------- */

.steps { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.steps .step {
  inline-size: .5rem; block-size: .5rem; border-radius: 50%; flex: none;
  background: var(--groove);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.steps .step.done { background: var(--lemon-lip); opacity: .55; }
.steps .step.now { inline-size: .66rem; block-size: .66rem; background: var(--lemon); opacity: 1; box-shadow: 0 0 0 4px var(--brass-soft); }
.meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-block-size: 1.2rem; }

/* ---------- lists and the podium ---------- */

ul.rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
ul.rows > li {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .66rem .35rem;
  border-block-end: 1px solid var(--glass-soft);
  min-inline-size: 0;
}
ul.rows > li:last-child { border-block-end: 0; }
ul.rows .rank {
  color: var(--paper-3);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  inline-size: 2rem; block-size: 2rem; flex: none;
  display: inline-grid; place-items: center;
  font-size: .95rem; border-radius: 50%;
  background: var(--glass);
}
ul.rows .score { font-family: var(--font-display); font-size: 1.15em; font-variant-numeric: tabular-nums; color: var(--saffron-2); }
ul.rows > li.you {
  background: var(--brass-soft);
  border-radius: var(--r-md);
  padding-inline: .65rem;
  box-shadow: inset 0 0 0 2px var(--lemon-lip);
  border-block-end-color: transparent;
}
ul.rows > li[data-rank="1"] .rank, ul.rows > li[data-rank="2"] .rank, ul.rows > li[data-rank="3"] .rank { color: var(--medal-ink); }
ul.rows > li[data-rank="1"] .rank { background: var(--medal-1); box-shadow: 0 2px 0 var(--lemon-lip); }
ul.rows > li[data-rank="2"] .rank { background: var(--medal-2); }
ul.rows > li[data-rank="3"] .rank { background: var(--medal-3); }
ul.rows > li[data-rank="1"] { font-size: 1.1em; font-weight: 700; }

/* The podium: three lanterns on three steps, the tallest in the middle. */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: .6rem;
  align-items: end;
  padding-block-start: 1.2rem;
}
/* A podium is as wide as the number of people on it — one winner stands in the middle of the page,
   not off to the left in the slot the silver medal would have used. */
.podium[data-places="2"] { grid-template-columns: 1fr 1.15fr; }
.podium[data-places="1"] { grid-template-columns: minmax(0, 14rem); justify-content: center; }
.podium .place {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  min-inline-size: 0;
  text-align: center;
}
.podium .place .face { inline-size: 3rem; block-size: 3rem; box-shadow: 0 0 0 3px var(--sugar), 0 0 0 5px var(--m); }
.podium .name { font-weight: 700; font-size: .95rem; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .pts { font-family: var(--font-display); font-size: 1.4rem; color: var(--lemon-deep); line-height: 1; }
.podium .step {
  inline-size: 100%;
  border-radius: 14px 14px 6px 6px;
  background: var(--m);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--m) 60%, var(--plum));
  display: grid; place-items: start center;
  padding-block-start: .5rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--medal-ink);
  line-height: 1;
}
.podium .place[data-rank="1"] { --m: var(--medal-1); }
.podium .place[data-rank="2"] { --m: var(--medal-2); }
.podium .place[data-rank="3"] { --m: var(--medal-3); }
.podium .place[data-rank="1"] .step { block-size: 5.6rem; }
.podium .place[data-rank="2"] .step { block-size: 4rem; }
.podium .place[data-rank="3"] .step { block-size: 3rem; }
.podium .place[data-rank="1"] .name { font-size: 1.1rem; }
.podium .place[data-rank="1"] .face { inline-size: 3.8rem; block-size: 3.8rem; }
.podium .lantern { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: var(--m); box-shadow: 0 3px 0 color-mix(in srgb, var(--m) 55%, var(--plum)); }
.podium .place[data-rank="1"] .lantern { inline-size: 3.4rem; block-size: 3.4rem; }

/* The lobby is a crowd of lights: one chip per person, each lit in their own colour. */
ul.rows.seats { flex-direction: row; flex-wrap: wrap; gap: .5rem; justify-content: center; }
ul.rows.seats > li {
  --dot: var(--joy-1);
  border-block-end: 0;
  padding: .4rem .85rem .4rem .7rem;
  gap: .5rem;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  justify-content: flex-start;
  max-inline-size: 100%;
  box-shadow: 0 0 18px -8px var(--dot);
}
ul.rows.seats > li:nth-child(6n+1) { --dot: var(--joy-1); }
ul.rows.seats > li:nth-child(6n+2) { --dot: var(--joy-3); }
ul.rows.seats > li:nth-child(6n+3) { --dot: var(--joy-4); }
ul.rows.seats > li:nth-child(6n+4) { --dot: var(--joy-2); }
ul.rows.seats > li:nth-child(6n+5) { --dot: var(--joy-5); }
ul.rows.seats > li:nth-child(6n+6) { --dot: var(--joy-6); }
ul.rows.seats > li > span:first-of-type { flex: 0 1 auto !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.rows.seats .pill { font-size: .66rem; padding: .16rem .5rem; }
ul.rows.seats > li::before {
  content: ""; flex: none; inline-size: .62rem; block-size: .62rem; border-radius: 50%;
  background: var(--dot); box-shadow: 0 0 8px var(--dot);
}
ul.rows.seats > li.off { opacity: .55; box-shadow: none; padding-inline-end: .42rem; }
ul.rows.seats > li.off::before { background: transparent; box-shadow: inset 0 0 0 2px var(--dot); opacity: .7; }

.empty { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.4rem .5rem; text-align: center; color: var(--paper-3); }
.empty .rosette { inline-size: 3.6rem; block-size: 3.6rem; opacity: .7; animation: breathe 6s var(--ease) infinite; }

/* ---------- tally bars on the reveal ---------- */

.tally { display: flex; flex-direction: column; gap: .55rem; }
.tally .row { display: flex; align-items: center; gap: .6rem; }
.tally .track { flex: 1; min-inline-size: 3.5rem; block-size: 1.4rem; background: var(--groove); border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 3px var(--shade-2); }
.tally .fill { display: block; block-size: 100%; border-radius: 999px; background: var(--paper-2); transition: inline-size .6s var(--ease-out); }
.tally .fill[data-i="0"] { background: var(--opt-0); }
.tally .fill[data-i="1"] { background: var(--opt-1); }
.tally .fill[data-i="2"] { background: var(--opt-2); }
.tally .fill[data-i="3"] { background: var(--opt-3); }
.tally .n { inline-size: 2ch; text-align: end; font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--paper-2); flex: none; }
.tally .glyph { --c: var(--plum-3); background: var(--c); border-radius: 50%; inline-size: 2rem; block-size: 2rem; color: var(--plum); font-size: 1rem; box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 55%, var(--plum)); }
.tally .glyph[data-i="0"] { --c: var(--opt-0); }
.tally .glyph[data-i="1"] { --c: var(--opt-1); }
.tally .glyph[data-i="2"] { --c: var(--opt-2); }
.tally .glyph[data-i="3"] { --c: var(--opt-3); }

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

.verdict { font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.05; letter-spacing: .01em; }
.verdict.good { color: var(--good-ink); }
.verdict.bad  { color: var(--bad-ink); }

.gain {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 15vw, 4.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-block-start: .3rem;
  color: var(--saffron-2);
}
/* The cheer: one short line, in the room's voice. */
.cheer { margin-block-start: .5rem; color: var(--paper-2); font-weight: 600; font-size: 1rem; }

.beat { overflow: hidden; isolation: isolate; padding-block: 1.4rem 1.5rem; display: flex; flex-direction: column; align-items: center; }
.beat::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.beat.good { background: var(--good-soft); border-color: transparent; box-shadow: var(--glow-good); }
.beat.bad  { background: var(--bad-soft); border-color: transparent; box-shadow: var(--glow-bad); }
.beat .pill { margin-block-start: .65rem; }
.card:has(> .verdict) { overflow: hidden; isolation: isolate; text-align: center; padding-block: 1.4rem 1.5rem; }
.card:has(> .verdict.good) { background: var(--good-soft); border-color: transparent; box-shadow: var(--glow-good); }
.card:has(> .verdict.bad)  { background: var(--bad-soft); border-color: transparent; box-shadow: var(--glow-bad); }

.citation {
  border-inline-start: 3px solid var(--saffron);
  padding-inline-start: .9rem;
  margin-block-start: .75rem;
  color: var(--paper-2);
  font-size: .88rem;
  line-height: 1.55;
}

button.pill { cursor: pointer; }
button.pill:not(:disabled):active { transform: scale(.96); }

/* ---------- join, room code, QR ---------- */

.code {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(.3rem, 1.6vw, .6rem);
  font-family: var(--font-display);
  font-size: clamp(2rem, 13vw, 4.6rem);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  margin: 0;
  direction: ltr;
}
/* Each character is a lit tile — the loudest object in the room and the most legible: ink on light. */
.code > span {
  --tile: var(--joy-1);
  display: grid; place-items: center;
  min-inline-size: .96em;
  padding: .12em .14em .14em;
  background: var(--tile);
  color: var(--ink);
  border-radius: .2em;
  box-shadow: 0 0 22px -2px var(--tile), inset 0 1px 0 rgba(255,255,255,.4);
  line-height: 1;
}
.code > span:nth-child(5n+2) { --tile: var(--joy-3); }
.code > span:nth-child(5n+3) { --tile: var(--joy-2); }
.code > span:nth-child(5n+4) { --tile: var(--joy-4); }
.code > span:nth-child(5n+5) { --tile: var(--joy-5); }

.qrframe {
  position: relative; display: block; inline-size: fit-content; margin-inline: auto;
  padding: .7rem;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.qr { display: block; margin-inline: auto; inline-size: min(56vw, 13.5rem); block-size: auto; aspect-ratio: 1; background: #fff; border-radius: 6px; }
body.screen .qr { inline-size: min(26vw, 18rem); }

.joinurl {
  font-family: var(--font);
  font-size: clamp(.95rem, 3.2vw, 1.25rem);
  font-weight: 700;
  color: var(--saffron-2);
  word-break: break-all;
  direction: ltr;
  unicode-bidi: embed;
}

.welcome { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-block: 1.6rem .3rem; text-align: center; }
.welcome .rosette { inline-size: 7rem; block-size: 7rem; animation: breathe 6s var(--ease) infinite; }
.welcome h2 { font-size: clamp(2.6rem, 12vw, 3.4rem); color: var(--plum); margin-block-start: .3rem; }
.welcome .tag { color: var(--paper-2); font-size: 1rem; }

.rosette { display: block; flex: none; inline-size: 3rem; block-size: 3rem; }
.crest { display: block; }
.crest .rosette { inline-size: clamp(3.6rem, 12vw, 4.6rem); block-size: clamp(3.6rem, 12vw, 4.6rem); margin-inline: auto; }
body.screen .crest .rosette { inline-size: 7rem; block-size: 7rem; }

/* The lantern ring: the room, as lights. A seat is a lantern; joining lights it. */
.ring { display: block; inline-size: min(70vw, 16rem); block-size: auto; margin-inline: auto; }
.ring .lamp { fill: rgba(58,39,73,.13); transition: fill .4s var(--ease), filter .4s var(--ease); }
.ring .lamp.lit { fill: var(--lc); filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--lc) 55%, var(--plum))); }
#app.enter-view .ring .lamp.lit { animation: lamp-on .6s var(--ease-pop) both; animation-delay: calc(var(--k, 0) * 60ms); }
.ring .core { fill: url(#coreglow); }
.ringwrap { position: relative; display: grid; place-items: center; }
.ringwrap > .inner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

.form { display: flex; flex-direction: column; gap: .85rem; }

/* A short line of encouragement that drops in from the top and leaves on its own. */
#toast {
  position: fixed;
  inset-inline: 0;
  top: calc(4.2rem + env(safe-area-inset-top, 0px));
  z-index: 40;
  display: flex; justify-content: center;
  pointer-events: none;
}
#toast > span {
  display: inline-block;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--saffron);
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: var(--glow-saffron);
  animation: toast-in 2.8s var(--ease-out) both;
}
#toast > span.cool { background: var(--mint); box-shadow: var(--glow-good); }
/* On a phone the cheer rises from the foot of the screen. From the top it landed on exactly what it
   was cheering — "Correct! +886" — and on the round's timer, for three seconds each time. */
body:not(.screen) #toast { top: auto; bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
body:not(.screen) #toast > span { animation-name: toast-up; }
@keyframes toast-up { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
#toast > span.soft { background: var(--icing); color: var(--plum); border: 1px solid var(--glass-line); box-shadow: var(--shadow-1); }

/* ---------- the big screen: the far wall of the room ----------
 * A television is read from three metres by people who are talking to each other. Everything is
 * bigger, the lanterns are brighter, and the room code is the loudest object in the house. */

body.screen { justify-content: center; }
body.screen::before {
  background:
    radial-gradient(55% 45% at 8% -6%,  rgba(255,209,102,.7), rgba(255,209,102,0) 62%),
    radial-gradient(50% 40% at 94% 2%,  rgba(255,156,192,.6), rgba(255,156,192,0) 60%),
    radial-gradient(70% 50% at 50% 112%, rgba(141,224,200,.55), rgba(141,224,200,0) 62%),
    radial-gradient(40% 35% at 86% 92%, rgba(168,180,255,.55), rgba(168,180,255,0) 60%);
}
body.screen main {
  width: min(94vw, 80rem);
  gap: clamp(1rem, 3vh, 2.4rem);
  padding: clamp(1rem, 3.5vh, 2.6rem) 1.4rem;
  justify-content: center;
  justify-content: safe center;
}
body.screen .card, body.screen .prompt { border-radius: 28px; }
body.screen .joinurl { font-size: clamp(1.1rem, 2.4vw, 1.9rem); }
body.screen .prompt { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.18; padding: clamp(1.2rem, 2.6vw, 2.3rem) clamp(1.4rem, 3vw, 2.6rem); }
body.screen .options { grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 1.6vw, 1.3rem); }
body.screen .opt {
  --tab: clamp(4.4rem, 6.4vw, 6.2rem);
  --disc: clamp(1.5rem, 2.2vw, 2.1rem);
  --seal: clamp(2.2rem, 3vw, 2.9rem);
  --seal-gap: clamp(.9rem, 1.4vw, 1.4rem);
  font-size: clamp(1.15rem, 2.15vw, 2.05rem);
  min-block-size: clamp(5.4rem, 13vh, 8rem);
  padding-inline: calc(var(--tab) + clamp(1.2rem, 1.9vw, 1.8rem)) clamp(1.3rem, 2.2vw, 2.2rem);
  border-radius: 26px;
}
body.screen .opt > .glyph { font-size: clamp(1.4rem, 2.2vw, 2.2rem); }
body.screen .opt.picked, body.screen .opt.right, body.screen .opt.wrong { padding-inline-end: calc(var(--seal) + var(--seal-gap) + clamp(.6rem, 1vw, 1rem)); }
body.screen .opt.right::after, body.screen .opt.wrong::after, body.screen .opt.picked::after { font-size: clamp(1.2rem, 1.9vw, 1.7rem); }
body.screen h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
body.screen ul.rows { font-size: clamp(1.05rem, 1.9vw, 1.5rem); }
body.screen ul.rows > li { padding-block: .7rem; }
body.screen ul.rows .rank { inline-size: 2.6rem; block-size: 2.6rem; font-size: 1em; }
body.screen ul.rows.seats { gap: .7rem; }
body.screen ul.rows.seats > li { font-size: clamp(1.05rem, 1.9vw, 1.6rem); padding-block: .5rem; padding-inline: 1.1rem 1.2rem; }
body.screen ul.rows.seats > li::before { inline-size: .9rem; block-size: .9rem; }
body.screen .timer { block-size: 1.4rem; }
body.screen .timerwrap { gap: 1.1rem; }
body.screen .timerwrap .secs { font-size: clamp(2.2rem, 4vw, 3.4rem); min-inline-size: clamp(3.6rem, 6vw, 5rem); block-size: clamp(3.6rem, 6vw, 5rem); }
body.screen .steps { gap: .55rem; }
body.screen .steps .step { inline-size: .8rem; block-size: .8rem; }
body.screen .steps .step.now { inline-size: 1rem; block-size: 1rem; box-shadow: 0 0 0 7px var(--brass-soft); }
body.screen .eyebrow { font-size: clamp(.95rem, 1.15vw, 1.2rem); }
body.screen .tally .track { block-size: 2.2rem; }
body.screen .tally .n { inline-size: 3ch; font-size: 1.5rem; }
body.screen .tally .glyph { inline-size: 3rem; block-size: 3rem; font-size: 1.2rem; }
body.screen .citation { font-size: clamp(1.05rem, 1.35vw, 1.35rem); }
body.screen .muted { font-size: clamp(1.05rem, 1.5vw, 1.5rem); }
body.screen .verdict { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
body.screen .gain { font-size: clamp(3.4rem, 6.8vw, 6rem); }
body.screen .card { padding: clamp(1rem, 2vw, 1.6rem); }
body.screen .code { font-size: clamp(3.4rem, 11vw, 7.5rem); gap: clamp(.4rem, 1.1vw, .8rem); }
body.screen .ring { inline-size: min(34vw, 26rem); }
body.screen .podium { grid-template-columns: 1fr 1.2fr 1fr; gap: 1.2rem; max-inline-size: 60rem; margin-inline: auto; inline-size: 100%; }
/* The same count rule as on a phone. It has to be repeated at this specificity or the line above
   silently puts a lone winner back in the left-hand slot. */
body.screen .podium[data-places="2"] { grid-template-columns: 1fr 1.2fr; }
body.screen .podium[data-places="1"] { grid-template-columns: minmax(0, 22rem); justify-content: center; }
body.screen .podium .place[data-rank="1"] .step { block-size: 11rem; }
body.screen .podium .place[data-rank="2"] .step { block-size: 8rem; }
body.screen .podium .place[data-rank="3"] .step { block-size: 6rem; }
body.screen .podium .step { font-size: 3rem; }
body.screen .podium .name { font-size: clamp(1.3rem, 2.2vw, 2rem); }
body.screen .podium .place[data-rank="1"] .name { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
body.screen .podium .pts { font-size: clamp(1.8rem, 3vw, 2.8rem); }
body.screen .podium .lantern { inline-size: 4rem; block-size: 4rem; }
body.screen .podium .place[data-rank="1"] .lantern { inline-size: 5.4rem; block-size: 5.4rem; }
body.screen .podium .face { inline-size: 4.4rem; block-size: 4.4rem; }
body.screen .podium .place[data-rank="1"] .face { inline-size: 5.6rem; block-size: 5.6rem; }

.revealgrid { display: grid; gap: 1rem; }
.revealgrid > * { min-inline-size: 0; }
.revealgrid .aside { display: flex; flex-direction: column; gap: .8rem; }
@media (min-width: 56rem) {
  body.screen .revealgrid { grid-template-columns: 1.1fr .9fr; gap: clamp(1rem, 2.2vw, 2.2rem); align-items: start; }
  body.screen .revealgrid .options { grid-template-columns: 1fr; }
  body.screen .revealgrid .opt { min-block-size: clamp(3.9rem, 8.5vh, 5.4rem); }
  body.screen .revealgrid .aside .card { padding: 1rem 1.2rem; }
  body.screen .revealgrid .muted { font-size: clamp(1rem, 1.15vw, 1.2rem); }
  body.screen .revealgrid .citation { font-size: clamp(.95rem, 1.05vw, 1.15rem); }
  body.screen .revealgrid .tally .track { block-size: 1.8rem; }
  body.screen .revealgrid .tally .n { font-size: 1.2rem; }
  body.screen .revealgrid .tally .glyph { inline-size: 2.5rem; block-size: 2.5rem; font-size: 1.05rem; }
}
body.screen .prompt.tight { font-size: clamp(1.5rem, 3.1vw, 2.5rem); padding: clamp(.9rem, 1.9vw, 1.5rem) clamp(1.1rem, 2.4vw, 2rem); }
body.screen .empty { padding-block: 2.6rem; gap: 1.2rem; }
body.screen .empty .rosette { inline-size: 6rem; block-size: 6rem; }

/* The big-screen lobby: the lantern ring in the middle with the code inside it, the QR beside it. */
.lobbygrid { display: grid; gap: 1.4rem; }
@media (min-width: 56rem) {
  body.screen .lobbygrid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
}
.lobbygrid .side { display: flex; flex-direction: column; gap: .9rem; align-items: center; text-align: center; }
.lobbygrid .wordmark { font-size: clamp(2.4rem, 5vw, 4rem); }

/* The floating sound control on a page with no bar. */
.corner { position: fixed; inset-inline-end: 1rem; inset-block-start: 1rem; z-index: 30; display: flex; gap: .5rem; align-items: center; }
.corner .hint { font-size: .8rem; color: var(--paper-3); }

/* ---------- connection ---------- */
.connlost { background: var(--ember); color: var(--ink); text-align: center; padding: .58rem; font-weight: 800; font-size: .9rem; letter-spacing: .03em; animation: pulse 1.6s ease-in-out infinite; }

/* ---------- motion ----------
   Entrances fire only when the phase actually changed — ui.js puts `.enter` on #app for exactly
   that one render — so a re-render caused by another player answering never replays them. */

@keyframes plate-in   { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes plate-stamp { 0% { transform: scale(1); } 40% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes plate-recede { from { opacity: 1; filter: saturate(1); transform: scale(1); } to { opacity: .42; filter: saturate(.5); transform: scale(.985); } }
@keyframes plate-bloom {
  0%   { transform: scale(1);    box-shadow: var(--glow-good), 0 0 0 0 rgba(76,201,167,.6); }
  45%  { transform: scale(1.04); box-shadow: var(--glow-good), 0 0 0 24px rgba(76,201,167,0); }
  100% { transform: scale(1);    box-shadow: var(--glow-good); }
}
@keyframes plate-wrong { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-2px); } }
@keyframes seal-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes gain-pop { 0% { opacity: 0; transform: scale(.4) translateY(12px); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes chip-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes lamp-on { 0% { opacity: .2; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes lanterns { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); } }
@keyframes pulse { 50% { opacity: .7; } }
@keyframes tickbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes toast-in { 0% { opacity: 0; transform: translateY(-14px) scale(.9); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes step-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

#app.enter .opt { animation: plate-in .38s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 55ms); }
#app.enter .opt[data-i="1"] { --d: 1; }
#app.enter .opt[data-i="2"] { --d: 2; }
#app.enter .opt[data-i="3"] { --d: 3; }
#app.enter .opt.picked { animation: plate-stamp .4s var(--ease-pop) both; animation-delay: 0s; }
#app.enter .opt.dim    { animation: plate-recede .3s var(--ease) both; animation-delay: 0s; }
#app.enter .opt.right  { animation: plate-bloom .8s var(--ease-out) both; animation-delay: .08s; }
#app.enter .opt.wrong  { animation: plate-wrong .45s ease-in-out both; animation-delay: .08s; }
#app.enter .opt.picked::after, #app.enter .opt.right::after, #app.enter .opt.wrong::after { animation: seal-in .4s var(--ease-pop) both; animation-delay: .24s; }

#app.enter-view .beat { animation: rise .4s var(--ease-out) both; }
#app.enter-view .card:has(> .verdict) { animation: rise .4s var(--ease-out) both; }
#app.enter-view .gain { animation: gain-pop .6s var(--ease-pop) both; animation-delay: .16s; }
#app.enter-view .prompt { animation: rise .38s var(--ease-out) both; }
#app.enter-view .tally .row { animation: rise .4s var(--ease-out) both; animation-delay: .22s; }
#app.enter-view ul.rows > li { animation: rise .42s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
#app.enter-view ul.rows.seats > li { animation: chip-in .4s var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 40ms); }
#app.enter-view .podium .step { transform-origin: bottom; animation: step-rise .7s var(--ease-out) both; }
#app.enter-view .podium .place[data-rank="2"] .step { animation-delay: .1s; }
#app.enter-view .podium .place[data-rank="3"] .step { animation-delay: .2s; }
#app.enter-view .podium .place[data-rank="1"] .step { animation-delay: .45s; }
#app.enter-view .podium .place > :not(.step) { animation: rise .5s var(--ease-out) both; animation-delay: .7s; }
#app.enter-view .welcome > * { animation: rise .5s var(--ease-out) both; }
#app.enter-view .welcome > :nth-child(2) { animation-delay: .1s; }
#app.enter-view .welcome > :nth-child(3) { animation-delay: .2s; }
#app.enter-view .card.form { animation: rise .5s var(--ease-out) .25s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  body::before { animation: none; }
}

/* ---------- player faces, and the host's crib ---------- */
.face { inline-size: 2rem; block-size: 2rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--sunk); color: transparent; }
.crib { margin-block-start: 1.25rem; border: 1px dashed var(--glass-line); border-radius: .9rem; padding: .6rem .8rem; font-size: .95rem; background: var(--glass); }
.crib > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; font-weight: 600; list-style: revert; }
.crib .pill { margin-inline-start: auto; }
.cribq { margin: .6rem 0 .2rem; opacity: .85; }
.criba { margin: .4rem 0; font-weight: 700; font-size: 1.05rem; color: var(--saffron-2); }
.cribd { margin: .4rem 0 0; padding-inline-start: 1.1rem; opacity: .85; }
.cribd > li { margin-block: .15rem; }

/* The big screen on something that is not big — a phone opening screen.html by mistake, or a
   narrow projector window. One column, and the sound hint gets out of the way. */
@media (max-width: 40rem) {
  body.screen .options { grid-template-columns: 1fr; }
  body.screen .revealgrid { grid-template-columns: 1fr; }
  .corner .hint { display: none; }
}

/* The four lights as answer marks: one em square, centred, in whatever colour the box gives them. */

/* ------------------------------------------------------------------------------------------------
 * Reporting a mistake
 *
 * The sheet is built when it opens and removed when it closes, so none of this is on the page
 * during a round. It is deliberately quiet: reporting a bad question is a kindness, not an alarm.
 * ---------------------------------------------------------------------------------------------- */
.sheetwrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  background: rgba(58, 39, 73, .45);
  padding: 1rem;
  padding-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  animation: sheet-in .18s ease both;
}
@media (min-width: 34rem) { .sheetwrap { place-items: center; } }
@media (prefers-reduced-motion: reduce) { .sheetwrap { animation: none; } }
@keyframes sheet-in { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  inline-size: min(28rem, 100%);
  max-block-size: min(84vh, 40rem);
  overflow-y: auto;
  background: var(--icing);
  color: var(--plum);
  border-radius: var(--r-lg, 24px);
  padding: 1.4rem;
  box-shadow: 0 -2px 40px -8px rgba(58, 39, 73, .5);
  display: grid;
  gap: .9rem;
}
.sheet h2 { font-size: 1.25rem; margin: 0; }

.reasons { display: grid; gap: .45rem; }
.reason {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .9rem;
  border-radius: 14px;
  background: var(--sugar);
  cursor: pointer;
  /* A tap target you can hit with a thumb, in a room, in the dark. */
  min-block-size: 3rem;
}
.reason:has(input:checked) { background: var(--lemon-soft, #fff3d0); box-shadow: inset 0 0 0 2px var(--lemon-lip, #d99b12); }
.reason input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--lemon-lip, #d99b12); flex: none; }

.notelabel { font-size: .9rem; color: var(--paper-2, rgba(58, 39, 73, .74)); }
.sheet textarea {
  inline-size: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .75rem .9rem;
  border-radius: 14px;
  border: 1.5px solid var(--groove, #f0e3ee);
  background: var(--sugar);
  color: inherit;
  resize: vertical;
}
.sheetrow { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* The host's pile. */
.replist { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .8rem; }
.replist li { border-inline-start: 3px solid var(--lemon-lip, #d99b12); padding-inline-start: .8rem; }
.replist b { display: inline-block; margin-inline-end: .5rem; }
.replist p { margin: .2rem 0 0; font-size: .95rem; }

/* ------------------------------------------------------------------------------------------------
 * The action, kept within reach
 *
 * The host's page is long by nature — a QR big enough to scan across a room, then everyone who has
 * joined, then the seat card and the teams. The one button the screen exists for was at the end of
 * all that, which on a small phone is several screens down, and the same was true of Skip while a
 * question was up. Both now ride at the bottom of the viewport until the page ends under them.
 *
 * Sticky rather than fixed: fixed would float over the last card and cover it, and would need the
 * page to reserve a gap it cannot know the height of.
 * ---------------------------------------------------------------------------------------------- */
.stickybar {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  /* Sits at the end of <main>'s column even when the content above is short. */
  margin-block-start: auto;
  /* Spans <main>'s own inline padding, so the ground behind it reaches both edges. */
  margin-inline: -1rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--night);
  border-block-start: 1px solid var(--groove);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
/* The big screen has no controls and no thumbs; nothing there should be pinned. */
body.screen .stickybar { position: static; margin: 0; padding: 0; background: none; border: 0; }

/* ------------------------------------------------------------------------------------------------
 * Phones: the whole moment on one screen
 *
 * Everything above is sized for comfort; this is sized for a phone in a hand, which is where every
 * player is and where the host is too. Measured, not guessed: a player's Safari leaves about 715
 * points on an iPhone 11 and 560 on the smallest iPhone, and the host's page sits under the app's
 * own bar. At the old sizes a long question pushed its own answers off the screen, and on the reveal
 * the right answer itself sat below the fold.
 *
 * The rules: the round's label and the fuse share one row; the question sizes itself by length, so
 * a short one stays big and a long one stays on the screen; short answers sit two to a row; and
 * the thing to press is never somewhere you have to scroll to. The big screen is left alone —
 * `body.screen` has a wall's worth of room.
 * ---------------------------------------------------------------------------------------------- */
.strip { display: flex; align-items: center; gap: .75rem; min-inline-size: 0; }
.strip .lead { flex: none; }
.strip .timerwrap { flex: 1 1 auto; min-inline-size: 0; }

body:not(.screen) main { gap: .75rem; padding-block: .75rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
/* A page with a bar pinned at its foot needs no pad beneath it: the bar is the breathing room. */
body:not(.screen) main:has(> .stickybar),
body:not(.screen) main:has(> * > .stickybar) { padding-block-end: 0; }

body:not(.screen) .prompt { font-size: clamp(1.2rem, 5vw, 1.6rem); padding: 1rem 1.1rem 1.05rem; }
body:not(.screen) .prompt.mid { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
body:not(.screen) .prompt.long { font-size: clamp(1.02rem, 4.1vw, 1.2rem); line-height: 1.36; }
/* The question again, on the reveal: there to remind, not to be read afresh. */
body:not(.screen) .prompt.tight { font-size: clamp(.98rem, 3.9vw, 1.08rem); font-weight: 600; line-height: 1.4; padding: .75rem .95rem; }
body:not(.screen) .card .prompt { padding: 0; }

body:not(.screen) .options { gap: .5rem; }
body:not(.screen) .opt {
  min-block-size: 3.4rem;
  padding-block: .6rem;
  font-size: clamp(.98rem, 4vw, 1.06rem);
}
body:not(.screen) .opt > .glyph { font-size: min(1.15rem, 6.4vw); }

/* Four short answers are two rows, not four: half the height, and a bigger target for a thumb. The
   seal moves to the corner so it does not eat a half-width plate's text. */
body:not(.screen) .options.grid2 { grid-template-columns: 1fr 1fr; }
body:not(.screen) .options.grid2 .opt {
  --tab: min(2.6rem, 11vw);
  --disc: min(1rem, 5vw);
  min-block-size: 4.1rem;
  padding-inline: calc(var(--tab) + .45rem) .6rem;
  font-size: clamp(.94rem, 3.9vw, 1.02rem);
  line-height: 1.25;
}
body:not(.screen) .options.grid2 .opt.picked::after,
body:not(.screen) .options.grid2 .opt.right::after,
body:not(.screen) .options.grid2 .opt.wrong::after {
  --seal: 1.35rem;
  inset-block-start: .35rem;
  inset-inline-end: .35rem;
  margin-block-start: 0;
  font-size: .78rem;
}

/* How the room voted, on the plates themselves: a small count in the corner of each answer. It is
   the same information the tally bars carried, without the tally's own quarter of the screen. */
.opt .votes {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-inline-start: auto;
  padding: .12rem .45rem .12rem .38rem;
  border-radius: 999px;
  background: rgba(58, 39, 73, .1);
  color: var(--plum);
  font-family: var(--font-display);
  font-size: .82rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.opt .votes svg { inline-size: .72rem; block-size: .72rem; fill: currentColor; opacity: .75; }
.opt.right .votes, .opt.wrong .votes { background: rgba(58, 39, 73, .16); }
.opt .votes:empty { display: none; }
/* Leave the text some air before the count. */
.opt > span:not(.glyph):not(.votes) { padding-inline-end: .4rem; }
body.screen .opt .votes { font-size: 1.05rem; }
/* On a half-width plate the count sits in the bottom corner, as the seal sits in the top one, so the
   answer keeps the whole width of its plate. */
body:not(.screen) .options.grid2 .opt .votes {
  position: absolute;
  inset-block-end: .3rem;
  inset-inline-end: .35rem;
  margin: 0;
  padding: .04rem .34rem .04rem .3rem;
  font-size: .72rem;
}
body:not(.screen) .options.grid2 .opt .votes svg { inline-size: .62rem; block-size: .62rem; }
body:not(.screen) .options.grid2 .opt > span:not(.glyph):not(.votes) { padding-inline-end: .2rem; }

/* The verdict, as a banner rather than a card: how it went and what it was worth, on one line. */
.verdictbar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .25rem .8rem;
  padding: .7rem 1rem;
  border-radius: var(--r-lg);
  text-align: center;
}
.verdictbar .verdict { font-size: clamp(1.55rem, 7vw, 2rem); }
.verdictbar .gain { font-size: clamp(1.55rem, 7vw, 2rem); margin: 0; }
.verdictbar .pill { margin: 0; }
.verdictbar.good { background: var(--good-soft); box-shadow: var(--glow-good); }
.verdictbar.bad  { background: var(--bad-soft); box-shadow: var(--glow-bad); }
#app.enter-view .verdictbar { animation: rise .4s var(--ease-out) both; }
#app.enter-view .verdictbar .gain { animation: gain-pop .6s var(--ease-pop) both; animation-delay: .16s; }

/* Why, and where it is written: read after the verdict, so set a size down from it. */
body:not(.screen) .card.why { padding: .8rem .95rem; }
body:not(.screen) .card.why .muted { font-size: .9rem; line-height: 1.45; }
body:not(.screen) .card.why .citation { font-size: .8rem; line-height: 1.5; margin-block-start: .5rem; }

/* A line that says where the room is, without a row of its own. */
body:not(.screen) .status { font-size: .88rem; }
body:not(.screen) .status .pill { margin-inline-end: .35rem; }

/* Several actions in the pinned bar sit side by side: one row, not a stack of them. */
.stickybar > .row { display: flex; gap: .5rem; align-items: stretch; }
.stickybar > .row > * { flex: 1 1 0; min-inline-size: 0; }
/* Beside the game's own action, the host's Skip takes only what it needs. */
.stickybar > .row:has(> .primary) > :not(.primary) { flex: 0 0 auto; }
.stickybar > .row > button.primary { inline-size: auto; }

/* A short screen — the smallest iPhone, or Safari with its bars showing — gives a little more from
   everything, which is cheaper than any one thing giving a lot. */
@media (max-height: 740px) {
  body:not(.screen) main { gap: .55rem; padding-block-start: .55rem; }
  body:not(.screen) .options { gap: .4rem; }
  body:not(.screen) .opt { min-block-size: 2.95rem; padding-block: .45rem; font-size: clamp(.94rem, 3.8vw, 1rem); }
  body:not(.screen) .options.grid2 .opt { min-block-size: 3.5rem; }
  body:not(.screen) .prompt { font-size: clamp(1.1rem, 4.7vw, 1.4rem); padding: .85rem .95rem .9rem; }
  body:not(.screen) .prompt.mid { font-size: clamp(1.04rem, 4.3vw, 1.25rem); }
  body:not(.screen) .prompt.long { font-size: clamp(.98rem, 3.95vw, 1.1rem); }
  body:not(.screen) .timerwrap .secs { min-inline-size: 2.1rem; block-size: 2.1rem; font-size: 1.2rem; }
  body:not(.screen) .stickybar { padding-block: .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  body:not(.screen) .bar { padding-block: calc(.4rem + env(safe-area-inset-top, 0px)) .4rem; }
  /* The welcome comes down a size, so Join is on the screen before anyone scrolls — it was not, on
     the smallest iPhone, until the name had been typed and the keyboard dismissed. */
  body:not(.screen) .welcome { padding-block: .5rem 0; gap: .3rem; }
  body:not(.screen) .welcome .rosette { inline-size: 4.2rem; block-size: 4.2rem; }
  body:not(.screen) .welcome h2 { font-size: clamp(2rem, 9.5vw, 2.5rem); margin-block-start: .1rem; }
  body:not(.screen) .welcome .ring { inline-size: min(40vw, 9rem); }
  body:not(.screen) .form { gap: .65rem; }
}