/* Quizrush · Direction B "Arcade". Values come from DESIGN.md; don't add new ones here. */

/* ---------- Tokens ---------- */

@property --b {
  syntax: "<color>";
  inherits: true;
  initial-value: #e9e3d6;
}

:root {
  --qr-entertainment: #ff5fa2;
  --qr-science: #3dd6c6;
  --qr-world: #5fa8ff;
  --qr-sports: #a3e635;
  --qr-art: #b794ff;
  --qr-animals: #ff9142;
  --qr-vehicles: #ffd23f;
  --qr-general: #e9e3d6;
  --qr-random: conic-gradient(from 45deg, #ff5fa2, #ff9142, #ffd23f, #a3e635, #3dd6c6, #5fa8ff, #b794ff, #ff5fa2);
  --qr-on-fill: #16140f;
  --qr-radius-card: 24px;
  --qr-radius-btn: 16px;
  --qr-tint: 16%;
  --qr-shadow: color-mix(in srgb, var(--b) 55%, #000);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --qr-tint: 10%; }
}
:root[data-theme="dark"] { --qr-tint: 10%; }

[data-bucket="entertainment"] { --b: var(--qr-entertainment); }
[data-bucket="science"] { --b: var(--qr-science); }
[data-bucket="world"] { --b: var(--qr-world); }
[data-bucket="sports"] { --b: var(--qr-sports); }
[data-bucket="art"] { --b: var(--qr-art); }
[data-bucket="animals"] { --b: var(--qr-animals); }
[data-bucket="vehicles"] { --b: var(--qr-vehicles); }
[data-bucket="general"], [data-bucket="random"] { --b: var(--qr-general); }

/* ---------- Page ---------- */

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: max(16px, var(--el-step-0));
  background-color: color-mix(in srgb, var(--b) var(--qr-tint), var(--el-paper));
  transition: --b 300ms var(--el-ease);
}
/* The paper grid is the Labs signature; keep it on setup/notice, drop it behind the card. */
body[data-screen="feed"], body[data-screen="loading"] { background-image: none; }

button { font: inherit; color: inherit; }
.link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--el-signal);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
.label {
  display: block;
  margin-bottom: var(--el-space-2);
  font: 500 var(--el-step--1) var(--el-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--el-ink-soft);
}

/* ---------- Top bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--el-space-4);
  padding: max(var(--el-space-3), env(safe-area-inset-top)) var(--el-gutter) var(--el-space-3);
  font-family: var(--el-font-mono);
  font-size: var(--el-step--1);
  background: color-mix(in srgb, var(--b) var(--qr-tint), var(--el-paper));
  transition: --b 300ms var(--el-ease);
}
.bar b { font-weight: 500; }
.bar-streak { display: inline-flex; align-items: center; gap: var(--el-space-1); }
.bar-streak b { font-size: var(--el-step-1); display: inline-block; }
.bar-score b { font-size: var(--el-step-0); }
.bar-score span { color: var(--el-ink-soft); }
.chip {
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--el-space-2);
  padding: 0 var(--el-space-4);
  border: 0;
  border-radius: 999px;
  background: var(--b);
  color: var(--qr-on-fill);
  font-family: var(--el-font-mono);
  font-weight: 500;
  cursor: pointer;
}
/* Setup has no mode to change; its bar slot shows the leaderboards instead. */
.boards-chip { display: none; }
body[data-screen="setup"] #mode-chip { display: none; }
body[data-screen="setup"] .boards-chip { display: inline-flex; }

/* ---------- Main column ---------- */

#app {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: var(--el-space-2) var(--el-gutter) var(--el-space-4);
  display: grid;
}
.screen[hidden] { display: none !important; }

/* ---------- Setup ---------- */

.setup { display: grid; align-content: end; gap: var(--el-space-5); }
.wordmark {
  font-size: var(--el-step-4);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.tagline { margin-top: var(--el-space-2); color: var(--el-ink-soft); }
fieldset { border: 0; margin: 0 0 var(--el-space-5); padding: 0; min-width: 0; }

.seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--el-space-1);
  padding: var(--el-space-1);
  border-radius: 999px;
  background: var(--el-paper-sunk);
}
.seg input, .tiles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label {
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.seg input:checked + label { background: var(--el-ink); color: var(--el-paper); }
.seg input:focus-visible + label,
.tiles input:focus-visible + label { outline: 2px solid var(--el-signal); outline-offset: 3px; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--el-space-3); }
.tiles label {
  --b: var(--tile);
  min-height: 5.5rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--el-space-1);
  padding: var(--el-space-2) var(--el-space-3) var(--el-space-3);
  border-radius: var(--qr-radius-btn);
  background: var(--b);
  color: var(--qr-on-fill);
  box-shadow: 0 4px 0 var(--qr-shadow);
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  transition: transform 120ms var(--el-ease), box-shadow 120ms var(--el-ease);
}
.tiles label[data-bucket="random"] { background: var(--qr-random); --qr-shadow: color-mix(in srgb, var(--qr-art) 55%, #000); }
.tiles .emo { font-size: var(--el-step-1); line-height: 1; }
.tiles .name { align-self: end; font-size: 0.95rem; hyphens: auto; }
.tiles .count { font: 400 0.7rem var(--el-font-mono); }
.tiles input:checked + label { outline: 3px solid var(--el-ink); outline-offset: 3px; }
.tiles label:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qr-shadow); }

.play {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--el-signal);
  color: var(--el-signal-ink);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--el-signal) 55%, #000);
  font: 800 var(--el-step-1) var(--el-font-body); /* ≥ 20px bold: WCAG large text */
  font-variation-settings: "SOFT" 100, "WONK" 1;
  cursor: pointer;
  transition: transform 120ms var(--el-ease), box-shadow 120ms var(--el-ease);
}
.play:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--el-signal) 55%, #000); }

.setup-foot { display: grid; gap: var(--el-space-2); }
.you { color: var(--el-ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--el-space-3); }
.you b { color: var(--el-ink); }
.theme { display: inline-flex; gap: var(--el-space-1); padding: var(--el-space-1); border-radius: 999px; background: var(--el-paper-sunk); justify-self: start; }
.theme button { min-height: 44px; padding: 0 var(--el-space-4); border: 0; border-radius: 999px; background: none; cursor: pointer; font: 400 var(--el-step--1) var(--el-font-mono); }
.theme button[aria-pressed="true"] { background: var(--el-ink); color: var(--el-paper); }

/* ---------- Feed ---------- */

.stage {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--el-space-4);
  min-height: 0;
}
.qcard {
  grid-row: 2;
  display: grid;
  align-content: space-between;
  gap: var(--el-space-5);
  min-height: 12rem;
  padding: var(--el-space-5);
  border-radius: var(--qr-radius-card);
  background: var(--b);
  color: var(--qr-on-fill);
  box-shadow: 0 6px 0 var(--qr-shadow);
}
.qmeta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--el-space-2) var(--el-space-3); }
.cat {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--el-space-3);
  border-radius: 999px;
  background: var(--qr-on-fill);
  color: var(--b);
  font: 500 0.75rem var(--el-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.diff { font: 500 0.75rem var(--el-font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.qtext {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  outline: none;
}
.qtext.long { font-size: 1.625rem; }

.answers { grid-row: 3; display: grid; gap: var(--el-space-3); }
.ans {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--el-space-3);
  padding: var(--el-space-3) var(--el-space-4);
  border: 2px solid color-mix(in srgb, var(--b) 70%, var(--el-ink));
  border-radius: var(--qr-radius-btn);
  background: var(--el-paper-raised);
  box-shadow: 0 4px 0 var(--qr-shadow);
  color: var(--el-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: transform 100ms var(--el-ease), box-shadow 100ms var(--el-ease), opacity 150ms;
}
.ans:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--qr-shadow); }
.ans .key {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--b);
  color: var(--qr-on-fill);
  font: 500 0.75rem var(--el-font-mono);
}
.ans .mark { margin-left: auto; font-size: 1.125rem; font-weight: 800; }
/* Answered: taps fall through to the stage (skip the wait). */
.ans:disabled { cursor: default; pointer-events: none; }
.ans.dim { opacity: 0.55; }
.ans.right { background: var(--el-live); border-color: var(--el-live); color: var(--el-paper); box-shadow: none; transform: translateY(3px); }
.ans.right .key { background: transparent; color: inherit; outline: 1px solid currentColor; }
.ans.wrong { background: var(--el-signal-soft); border: 3px solid var(--el-signal); box-shadow: none; transform: translateY(3px); }
.ans.wrong .mark { color: var(--el-signal); }
.ans.picked { outline: 3px solid var(--el-ink); outline-offset: 2px; }

.stage > .status { grid-row: 4; }
.status { min-height: 1.5em; text-align: center; font: 400 var(--el-step--1) var(--el-font-mono); color: var(--el-ink-soft); }

.stage-top { grid-row: 1; display: grid; justify-items: center; gap: var(--el-space-2); }
.offline {
  justify-self: center;
  padding: var(--el-space-1) var(--el-space-4);
  border-radius: 999px;
  background: var(--el-ink);
  color: var(--el-paper);
  font: 400 var(--el-step--1) var(--el-font-mono);
}
.offline[hidden] { display: none; }

/* ---------- Daily Challenge ---------- */

.bar-daily { display: none; align-items: center; gap: var(--el-space-3); }
.bar-daily b { font-size: var(--el-step-0); }
#daily-clock { font-variant-numeric: tabular-nums; color: var(--el-ink-soft); }
body[data-mode="daily"] .bar-daily { display: inline-flex; }
body[data-mode="daily"] .bar-streak,
body[data-mode="daily"] .bar-score { display: none; }

.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--el-space-1); width: 100%; margin: 0; padding: 0; list-style: none; }
.dots li { height: 8px; border-radius: 999px; background: var(--el-rule); }
.dots li.now { background: var(--el-ink); }
.dots li.hit { background: var(--el-live); }
.dots li.miss { background: var(--el-signal); }
.dots li.wait { background: none; outline: 2px solid var(--el-ink-soft); outline-offset: -2px; }
body:not([data-screen="feed"]) .stage .dots { display: none; }
.rd-dots { max-width: 20rem; }
.rd-dots li { height: 12px; }
.rd-flag { font-weight: 800; font-size: var(--el-step-1); font-variation-settings: "SOFT" 100, "WONK" 1; }

.daily-card {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--el-space-3);
  padding: var(--el-space-3) var(--el-space-4);
  border: 0;
  border-radius: var(--qr-radius-btn);
  background: var(--el-ink);
  color: var(--el-paper);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--el-ink) 55%, var(--el-paper));
  text-align: left;
  cursor: pointer;
  transition: transform 120ms var(--el-ease), box-shadow 120ms var(--el-ease);
}
.daily-card[hidden] { display: none; }
.daily-card:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--el-ink) 55%, var(--el-paper)); }
.daily-icon { font-size: var(--el-step-2); line-height: 1; }
.daily-body { display: grid; gap: 2px; }
.daily-body b { font-size: var(--el-step-1); font-weight: 800; line-height: 1.1; font-variation-settings: "SOFT" 100, "WONK" 1; }
.daily-body span { font: 400 var(--el-step--1) var(--el-font-mono); }
.daily-go {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 var(--el-space-4);
  border-radius: 999px;
  background: var(--el-paper);
  color: var(--el-ink);
  font-weight: 800;
}

.daily-done { display: grid; align-content: center; justify-items: center; gap: var(--el-space-4); text-align: center; padding-block: var(--el-space-6); }
.dd-score { line-height: 0.9; }
.dd-score b { font-size: var(--el-step-4); font-weight: 900; letter-spacing: -0.04em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.dd-score span { font-size: var(--el-step-2); font-weight: 700; color: var(--el-ink-soft); }
.dd-grid { font-size: var(--el-step-1); letter-spacing: 0.08em; line-height: 1.2; }
.dd-meta { font: 400 var(--el-step--1) var(--el-font-mono); color: var(--el-ink-soft); text-wrap: balance; }
.daily-done .play, .daily-done .ghost { width: 100%; }

/* ---------- Leaderboards ---------- */

.boards { display: grid; align-content: start; gap: var(--el-space-4); padding-block: var(--el-space-4); }
.boards h2 { font-size: var(--el-step-3); font-weight: 900; font-variation-settings: "SOFT" 100, "WONK" 1; }
.boards-sub { color: var(--el-ink-soft); margin-top: var(--el-space-1); }
.seg-3 { grid-template-columns: repeat(3, 1fr); }
.period { justify-self: start; }
.board { display: grid; gap: var(--el-space-2); margin: 0; padding: 0; list-style: none; min-height: 3rem; }
.board li {
  min-height: 52px;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: var(--el-space-3);
  padding: var(--el-space-2) var(--el-space-4);
  border-radius: 12px;
  background: var(--el-paper-raised);
  border: var(--el-border);
}
.board .rank { font: 500 var(--el-step-0) var(--el-font-mono); text-align: center; }
.board .rank.medal { font-size: var(--el-step-1); line-height: 1; }
.board .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .streak { font: 500 var(--el-step-0) var(--el-font-mono); }
.board li.you { background: var(--el-ink); color: var(--el-paper); border-color: var(--el-ink); }
.board li.gap { min-height: auto; background: none; border: 0; display: block; text-align: center; color: var(--el-ink-soft); }
.board li.skel { border: 0; }
.board-note { color: var(--el-ink-soft); }
.boards .play, .boards .ghost { width: 100%; }

/* ---------- Profile + badges ---------- */

.rd-badges { font-weight: 700; }
.profile { display: grid; align-content: start; gap: var(--el-space-4); padding-block: var(--el-space-4); }
.pf-head h2 { font-size: var(--el-step-3); font-weight: 900; line-height: 1; font-variation-settings: "SOFT" 100, "WONK" 1; }
.profile h3.label { margin: var(--el-space-3) 0 0; }
.pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--el-space-2); }
.pf-stat { padding: var(--el-space-3) var(--el-space-4); border-radius: 12px; background: var(--el-paper-raised); border: var(--el-border); }
.pf-stat b { display: block; font-size: var(--el-step-2); font-weight: 800; line-height: 1.1; }
.pf-stat span { font: 400 var(--el-step--1) var(--el-font-mono); color: var(--el-ink-soft); }
.pf-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--el-space-2); }
.pf-mode { padding: var(--el-space-2); border-radius: 12px; background: var(--el-paper-sunk); text-align: center; }
.pf-mode b { display: block; font: 500 var(--el-step-1) var(--el-font-mono); }
.pf-mode span { font: 400 0.75rem var(--el-font-mono); color: var(--el-ink-soft); }
.pf-cats, .pf-tiers, .pf-badges { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--el-space-2); }
.pf-cats li { display: grid; grid-template-columns: 1fr auto; gap: var(--el-space-1) var(--el-space-3); align-items: center; }
.pf-bar { display: block; grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--el-paper-sunk); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--b); border-radius: inherit; }
.pf-cats .meta { font: 400 var(--el-step--1) var(--el-font-mono); color: var(--el-ink-soft); }
.pf-tiers li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--el-space-3);
  padding: var(--el-space-2) var(--el-space-3);
  border-radius: 12px;
  background: var(--el-paper-raised);
  border: var(--el-border);
}
.pf-tiers .emo, .pf-badges .emo { font-size: var(--el-step-2); line-height: 1; }
.pf-tiers .medals { font-size: var(--el-step-1); letter-spacing: 2px; }
.pf-tiers .medals .off, .pf-badges li.locked .emo { filter: grayscale(1); opacity: 0.35; }
.pf-tiers small, .pf-badges small { display: block; font: 400 0.75rem var(--el-font-mono); color: var(--el-ink-soft); }
.pf-badges { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.pf-badges li { display: grid; gap: var(--el-space-1); padding: var(--el-space-3); border-radius: 12px; background: var(--el-paper-raised); border: var(--el-border); }
.pf-badges li.locked { background: var(--el-paper-sunk); border-style: dashed; }
.pf-badges b { line-height: 1.15; }
.profile .ghost { width: 100%; margin-top: var(--el-space-3); }

/* ---------- Save progress ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pf-save { display: grid; gap: var(--el-space-3); padding: var(--el-space-4); border-radius: var(--qr-radius-card); background: var(--el-paper-raised); border: var(--el-border); }
.pf-save h3.label { margin: 0; }
#save-form { display: grid; gap: var(--el-space-2); }
#save-form input {
  min-height: 52px;
  padding: 0 var(--el-space-4);
  border: 2px solid var(--el-rule);
  border-radius: 12px;
  background: var(--el-paper);
  color: var(--el-ink);
  font: inherit;
}
#save-form input:focus-visible { outline: 2px solid var(--el-signal); outline-offset: 2px; }
.pf-save[data-saved="true"] #save-form,
.pf-save[data-saved="true"] #save-msg { display: none; }
.pf-save .ghost { width: 100%; }
.nudge { display: grid; gap: var(--el-space-3); width: 100%; padding: var(--el-space-4); border-radius: var(--qr-radius-btn); background: var(--el-paper-raised); border: 2px solid var(--el-ink); text-align: left; }
.nudge-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--el-space-4); }
/* Secondary to "Next round": ink pill, not the orange primary. */
.nudge-actions .play { width: auto; min-height: 48px; padding: 0 var(--el-space-5); font-size: var(--el-step-1); background: var(--el-ink); color: var(--el-paper); box-shadow: none; }
.nudge[hidden] { display: none; }

/* ---------- Loading ---------- */

.skel-card { --b: var(--el-paper-raised); box-shadow: none; border: var(--el-border); }
.skel-lines { display: grid; gap: var(--el-space-3); }
.skel-lines .skel { height: 1.75rem; }
.skel-lines .short { width: 55%; }
.skel { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--el-paper-sunk) 25%, var(--el-rule) 50%, var(--el-paper-sunk) 75%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.key-skel { height: 56px; border-radius: var(--qr-radius-btn); }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- Notice (cleared / error) ---------- */

.notice { display: grid; align-content: center; justify-items: center; gap: var(--el-space-4); text-align: center; padding-block: var(--el-space-6); }
.notice-icon { font-size: 3.5rem; line-height: 1; }
.notice h2 { font-size: var(--el-step-2); font-weight: 900; font-variation-settings: "SOFT" 100, "WONK" 1; }
.notice p { color: var(--el-ink-soft); max-width: 26rem; }
.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--el-space-2); }
.suggest button {
  min-height: 44px;
  padding: 0 var(--el-space-4);
  border: 0;
  border-radius: 999px;
  background: var(--b);
  color: var(--qr-on-fill);
  box-shadow: 0 3px 0 var(--qr-shadow);
  font-weight: 600;
  cursor: pointer;
}
.suggest button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--qr-shadow); }

/* ---------- Toasts ---------- */

.toasts {
  position: fixed;
  z-index: 5;
  top: var(--toast-top, var(--el-space-3)); /* set from JS to just below the top bar */
  left: 50%;
  translate: -50% 0;
  width: min(30rem, calc(100% - 2 * var(--el-gutter)));
  display: grid;
  gap: var(--el-space-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--el-space-3);
  padding: var(--el-space-3) var(--el-space-4);
  border-radius: var(--qr-radius-btn);
  background: var(--el-ink);
  color: var(--el-paper);
  font-weight: 700;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
  animation: toast-in 280ms var(--el-ease) both;
}
.toast.fire { border-left: 6px solid var(--b); }
.toast .icon { font-size: 1.75rem; line-height: 1; }
.toast small { display: block; font: 400 0.75rem var(--el-font-mono); opacity: 0.85; }
.toast.out { animation: toast-out 200ms var(--el-ease) both; }

/* ---------- Footer + feedback ---------- */

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--el-space-4);
  padding: 0 var(--el-gutter) max(var(--el-space-2), env(safe-area-inset-bottom));
  font: 400 0.7rem var(--el-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--el-ink-soft);
}
.labs { display: inline-flex; align-items: center; gap: var(--el-space-2); }
.labs::before { content: ""; width: 0.55em; height: 0.55em; background: var(--el-signal); }
.foot .link { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }

dialog {
  width: min(30rem, calc(100% - 2 * var(--el-gutter)));
  padding: var(--el-space-5);
  border: var(--el-border);
  border-radius: var(--qr-radius-card);
  background: var(--el-paper-raised);
  color: var(--el-ink);
}
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
dialog form { display: grid; gap: var(--el-space-3); }
dialog h2 { font-size: var(--el-step-2); font-weight: 800; font-variation-settings: "SOFT" 100, "WONK" 1; }
dialog p { color: var(--el-ink-soft); }
textarea {
  width: 100%;
  padding: var(--el-space-3);
  border: 2px solid var(--el-rule);
  border-radius: 12px;
  background: var(--el-paper);
  color: var(--el-ink);
  font: inherit;
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--el-signal); outline-offset: 2px; }
.feedback-status { min-height: 1.4em; font: 400 var(--el-step--1) var(--el-font-mono); }
.feedback-actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--el-space-3); }
.ghost { min-height: 56px; border: 2px solid var(--el-rule); border-radius: 999px; background: none; cursor: pointer; font-weight: 600; }

/* ---------- Motion ---------- */

.enter { animation: card-in 280ms var(--el-ease) both; }
.pop { animation: pop 220ms var(--el-ease); }
.shake { animation: shake 320ms var(--el-ease); }
.burn { animation: burn 600ms var(--el-ease); }

@keyframes card-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes pop { 50% { transform: translateY(3px) scale(1.04); } }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
@keyframes burn { 30% { transform: scale(1.6) rotate(-8deg); } 60% { transform: scale(1.3) rotate(6deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  body, .bar { transition: none; }
  .skel { animation: none; }
  .enter, .toast { animation: fade-in 150ms linear both; }
  .toast.out { animation: fade-out 150ms linear both; }
  .pop, .shake, .burn { animation: none; }
  .ans, .tiles label, .play, .daily-card { transition: none; }
  .daily-card:active { transform: none; }
  .ans.right, .ans.wrong, .ans:active:not(:disabled), .tiles label:active, .play:active { transform: none; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- Larger screens ---------- */

@media (min-width: 48rem) {
  #app { align-content: center; max-width: 36rem; padding-block: var(--el-space-6); }
  .qcard { min-height: 20rem; padding: var(--el-space-6); }
  .answers { grid-template-columns: 1fr 1fr; } /* 2×2 keys: shorter travel for the eye */
  .qtext { font-size: var(--el-step-2); }
  .qtext.long { font-size: 1.75rem; }
}