/* Demo screens. Phone first; wider screens get a centred column. */

.screen { min-height: 100vh; min-height: 100dvh; }
.screen[hidden] { display: none; }

/* ---------- Start ---------- */
.start {
  max-width: 520px; margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 28px;
}
.wordmark { font: 400 30px/.92 var(--display); text-decoration: none; --misreg: #FFB81C; --mx: 2px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { margin-bottom: 10px; padding: 0; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modes legend { grid-column: 1 / -1; }
.mode { position: relative; cursor: pointer; }
.mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode-face {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 132px; padding: 18px;
  border: 2px solid var(--outline); border-radius: 22px;
  background: var(--card); box-shadow: var(--off-sm) var(--off-sm) 0 var(--ink);
}
.mode-name { font-size: 34px; }
.mode-rule { font: 900 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.mode input:checked + .mode-face { background: var(--ink); color: var(--paper); }
.mode input:focus-visible + .mode-face { outline: 3px solid var(--text); outline-offset: 4px; }
@media (prefers-color-scheme: dark) {
  .mode input:checked + .mode-face { background: var(--paper); color: var(--ink); border-color: var(--paper); }
}

.deck-row { padding-top: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.deck-pick { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.deck-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.deck-pick .back {
  width: 100%; aspect-ratio: 63.5 / 88.9; border-radius: 10px;
  border: 2px solid var(--outline);
  display: grid; place-items: center;
  font: 400 11px/1 var(--display); text-align: center;
  transition: transform .15s ease;
}
.deck-pick .back.mixed {
  background: conic-gradient(#FFB81C 0 72deg, #1F4FB4 0 144deg, #F28C28 0 216deg, #14A15A 0 288deg, #00A9C6 0);
}
.deck-pick .name { font: 900 10px/1.1 var(--body); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.deck-pick input:checked ~ .back { transform: translateY(-6px); box-shadow: var(--off-sm) var(--off-sm) 0 var(--ink); outline: 3px solid var(--text); outline-offset: 2px; }
.deck-pick input:focus-visible ~ .back { outline: 3px dashed var(--text); outline-offset: 3px; }

.play-btn { width: 100%; min-height: 64px; font-size: 22px; margin-top: auto; }

/* ---------- Play ---------- */
.play {
  --flood: #FFB81C; --flood-text: var(--ink); --accent: #B83A18; --accent-text: #fff; --answer-word: #FFB81C;
  background: var(--flood); color: var(--flood-text);
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
  transition: background-color .35s ease, color .35s ease;
}
.play > * { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.play-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.circle {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid currentColor;
  background: transparent; display: grid; place-items: center; cursor: pointer; flex: none;
}
.play-progress { text-align: center; flex: 1; }
.chip {
  margin: 0; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center;
  font: 900 13px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}

.blitz-clock { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.blitz-clock[hidden] { display: none; }
.clock-time { font-size: 56px; font-variant-numeric: tabular-nums; }
.clock-delta { font: 900 18px/1 var(--body); min-width: 3ch; opacity: 0; }
.clock-delta.show { animation: delta .9s ease-out; }
@keyframes delta { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-18px); } }
.play.final { --flood: var(--ink) !important; --flood-text: var(--final-text, var(--paper)) !important; }

/* The card and its flip */
.card-stage { perspective: 1400px; }
.playcard { position: relative; display: grid; transition: transform .55s cubic-bezier(.3, 1.45, .55, 1); transform-style: preserve-3d; }
.playcard.flipped { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1;
  min-height: 300px;
  border: 2px solid var(--outline); border-radius: 22px;
  box-shadow: var(--off) var(--off) 0 var(--ink);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.front { background: var(--card); color: var(--text); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.back { background: var(--ink); color: var(--paper); transform: rotateY(180deg); display: flex; flex-direction: column; }
@media (prefers-color-scheme: dark) { .back { background: #24201B; } }

.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-id { color: var(--muted); white-space: nowrap; }
.card-cat { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.category { font-size: clamp(24px, 8vw, 32px); --mx: 2px; white-space: nowrap; overflow: visible; }
.difficulty { margin: 0; display: inline-flex; align-items: flex-end; gap: 5px; font: 900 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { display: block; width: 4px; border: 1.2px solid currentColor; border-radius: 1px; }
.bars i.on { background: currentColor; }
.question { font: 800 clamp(23px, 6.6vw, 29px)/1.18 var(--body); margin: 0; outline: none; }
.hint { border-top: 2px dashed currentColor; padding-top: 10px; }
.hint p { margin: 0; }
.hint p + p { margin-top: 4px; }

.band { height: 24px; flex: none; }
.back-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 22px 18px; text-align: center; }
.answer { font-size: clamp(34px, 12vw, 56px); color: var(--answer-word); --misreg: var(--accent); }
.also { margin: 0; font-size: 14px; opacity: .85; }
.back-id { text-align: center; padding-bottom: 16px; opacity: .8; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .playcard { transition: none; transform: none !important; }
  .face { backface-visibility: visible; transition: opacity .2s ease !important; }
  .back { transform: none; opacity: 0; pointer-events: none; }
  .playcard.flipped .front { opacity: 0; }
  .playcard.flipped .back { opacity: 1; }
}

/* Choices */
.choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.choice {
  width: 100%; min-height: 60px; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 16px;
  box-shadow: var(--off-sm) var(--off-sm) 0 var(--ink);
  font: 600 16px/1.25 var(--body); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.choice:active:not(:disabled) { transform: translate(var(--off-sm), var(--off-sm)); box-shadow: none; }
.choice .letter { font: 400 16px/1 var(--display); min-width: 20px; }
.choice .label { flex: 1; }
.choice .tag { font: 900 11px/1 var(--body); letter-spacing: .06em; white-space: nowrap; }
.choice:disabled { cursor: default; }
.choice.right { background: var(--ink); color: var(--paper); transform: scale(1.03); }
.choice.wrong { background: var(--accent); color: var(--accent-text); animation: shake .36s linear; }
.choice.dim { opacity: .55; box-shadow: none; }
@keyframes shake { 0%, 100% { translate: 0; } 20%, 60% { translate: -6px; } 40%, 80% { translate: 6px; } }
@media (prefers-color-scheme: dark) {
  .choice { background: #24201B; color: var(--paper); border-color: var(--outline); }
  .choice.right { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .choice.wrong { border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .choice.right { transform: none; } .choice.wrong { animation: none; } }

.play-actions { display: flex; gap: 12px; }
.play-actions .btn { flex: 1; }
.play-actions .btn[hidden] { display: none; }
.play .btn-ghost { font-size: 16px; text-transform: none; }

/* ---------- Results ---------- */
.results { --flood: #FFB81C; --flood-text: var(--ink); --accent: #B83A18; --accent-text: #fff; }
.results-hero {
  background: var(--flood); color: var(--flood-text);
  padding: max(40px, env(safe-area-inset-top)) 16px 52px;
  --t: 14px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--t) + 1px) no-repeat,
    conic-gradient(from 135deg at top, #0000 90deg, #000 0) bottom / calc(var(--t) * 2) var(--t) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--t) + 1px) no-repeat,
    conic-gradient(from 135deg at top, #0000 90deg, #000 0) bottom / calc(var(--t) * 2) var(--t) repeat-x;
  display: flex; flex-direction: column; gap: 10px;
}
.results-hero > * { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.result-title { font-size: clamp(44px, 15vw, 72px); --misreg: var(--accent); outline: none; }
.result-line { margin: 0; font-weight: 800; }
.result-grid { margin: 4px auto 0; display: flex; gap: 6px; flex-wrap: wrap; }
.result-grid i { width: 18px; height: 18px; border-radius: 4px; border: 2px solid currentColor; }
.result-grid i.ok { background: currentColor; }
.results-body { max-width: 520px; margin: 0 auto; padding: 20px 16px max(40px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; }

.standout .eyebrow { margin-bottom: 10px; }
.mini {
  border: 2px solid var(--outline); border-radius: 22px; background: var(--card);
  box-shadow: var(--off) var(--off) 0 var(--ink);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.mini-q { margin: 0; font: 800 21px/1.2 var(--body); }
.mini-a { font-size: 30px; line-height: 1; color: var(--text); }

.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-accent { background: var(--accent); color: var(--accent-text); }
.share-note { margin: -8px 0 0; min-height: 1.2em; text-align: center; font-size: 15px; }

.get-app {
  border-radius: 22px; background: var(--ink); color: var(--paper);
  padding: 22px 18px; display: flex; flex-direction: column; gap: 18px;
}
@media (prefers-color-scheme: dark) { .get-app { background: #24201B; border: 2px solid var(--outline); } }
.get-app .btn-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none; align-self: flex-start; }
.get-title { font-size: 30px; line-height: 1; }
.get-fan { display: flex; height: 92px; padding-left: 20px; }
.get-fan span {
  width: 60px; aspect-ratio: 63.5 / 88.9; border-radius: 8px; border: 2px solid var(--paper);
  margin-left: -14px; transform-origin: 50% 120%;
}
.get-fan span:nth-child(1) { transform: rotate(-14deg); }
.get-fan span:nth-child(2) { transform: rotate(-7deg) translateY(-4px); }
.get-fan span:nth-child(3) { transform: translateY(-6px); }
.get-fan span:nth-child(4) { transform: rotate(7deg) translateY(-4px); }
.get-fan span:nth-child(5) { transform: rotate(14deg); }

.review summary { cursor: pointer; padding: 8px 0; }
.review-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.review-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
.review-list .mark { font: 900 16px/1.3 var(--body); }
.review-list .q { margin: 0; font-size: 15px; }
.review-list .a { margin: 2px 0 0; font-weight: 800; }

@media (min-width: 720px) {
  .start { padding-top: 56px; }
  .face { min-height: 340px; }
}