@font-face { font-family: Nunito; font-weight: 500; font-display: block; src: url(fonts/nunito-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 600; font-display: block; src: url(fonts/nunito-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 700; font-display: block; src: url(fonts/nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: block; src: url(fonts/nunito-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 900; font-display: block; src: url(fonts/nunito-latin-900-normal.woff2) format('woff2'); }

/* Respect real device safe areas, without reserving a second status bar when
   Safari already places the page below its browser chrome. */
:root {
  --sat: max(env(safe-area-inset-top, 0px), 16px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* Safari 26 colors its bars from body (then html). The screen color is written to both,
   plus theme-color for older iOS and Android (see app.js paintViewport). Never transparent. */
html, body {
  margin: 0;
  background-color: #f6f5ef;
  transition: background-color 200ms ease;
}
body {
  color: #262626;
  font-family: Nunito, -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
button { -webkit-appearance: none; appearance: none; }
button:focus-visible, input:focus-visible { outline: 3px solid #262626; outline-offset: 3px; }
input::placeholder { color: rgba(38, 38, 38, 0.32); }

#app { min-height: 100dvh; }

/* Screens: the prototype's absolutely positioned 390x844 screens become full-height
   flex columns that can scroll on short phones. */
.screen {
  box-sizing: border-box;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Toasts slide down from the top as they appear. */
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.toast-in { animation: toast-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .toast-in { animation: none; } }

/* Next-turn result: badge pops on a correct answer, wobbles on a miss. */
@keyframes result-pop { 0% { transform: scale(0.4); } 55% { transform: scale(1.18); } 75% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes result-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 45% { transform: rotate(7deg); } 70% { transform: rotate(-4deg); } }
.result-pop { animation: result-pop 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.result-wobble { animation: result-wobble 620ms ease-in-out; }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
@keyframes result-count { from { --n: 0; } to { --n: var(--to); } }
.result-count { position: relative; color: transparent; }
.result-count::after { content: '+' counter(n); counter-reset: n var(--n); position: absolute; left: 0; top: 0; color: #262626; animation: result-count 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

/* Cheeky line under the scores: tilted like a sticker, words pop in one by one after the
   badge lands (only when the result is celebrated live; see celebrate.js). */
.quip { transform: rotate(-2deg); text-wrap: balance; }
.quip-wrong { transform: rotate(2deg); }
.quip-word { display: inline-block; }
@keyframes quip-word { 0% { opacity: 0; transform: translateY(14px) scale(0.6); } 70% { opacity: 1; transform: translateY(-3px) scale(1.08); } 100% { opacity: 1; transform: none; } }
.quip-live .quip-word { opacity: 0; animation: quip-word 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards; animation-delay: calc(450ms + var(--k) * 90ms); }
@media (prefers-reduced-motion: reduce) { .quip-live .quip-word { opacity: 1; animation: none; } }

/* Setup settings rows: no card-wide focus ring (it read as "selected"); keyboard focus
   shows on the switch itself. */
.setting-row:focus-visible { outline: none; }
.setting-row:focus-visible > span:last-child { outline: 3px solid #262626; outline-offset: 2px; }