/* ============================================================================
   课堂答题 · PLAY — student iPad view ("Chalk & Neon", light/paper)
   ----------------------------------------------------------------------------
   Mobile-first, full-screen, thumb-friendly. Big chunky tactile answer
   buttons (Kahoot four-color + shape glyph so color is never the only cue).
   Rewarding submit / result states.
   ========================================================================== */

html, body { height: 100%; }

body {
  min-height: 100dvh;
  color: var(--fg);
  background:
    radial-gradient(120% 80% at 50% -10%, #fffdf8 0%, var(--paper) 55%, #efe7d7 100%);
  overflow-x: hidden;
}

/* Subtle paper grain over everything */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------------------
   App shell — each [data-view] becomes a full-height centered stage.
   JS toggles [hidden] on non-active views; we only lay out the visible one.
   ------------------------------------------------------------------------- */
#app {
  min-height: 100dvh;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: max(env(safe-area-inset-top), 20px)
           clamp(18px, 5vw, 36px)
           max(env(safe-area-inset-bottom), 24px);
}

[data-view] {
  min-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-5);
  animation: viewIn .42s var(--ease-out) both;
}
[data-view][hidden] { display: none; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===========================================================================
   1 · NAME — join screen
   ========================================================================= */
[data-view="name"] { justify-content: center; }

[data-view="name"] h1 {
  font-size: clamp(2.6rem, 11vw, 4rem);
  letter-spacing: -.03em;
  line-height: .98;
  text-align: center;
  color: var(--fg);
  position: relative;
}
/* Riso double-print echo on the title */
[data-view="name"] h1::after {
  content: "课堂答题";
  position: absolute; inset: 0;
  color: var(--coral);
  transform: translate(4px, 4px);
  z-index: -1;
  opacity: .9;
}
[data-view="name"] h1::before {
  content: "现在加入";
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--aqua-deep);
  margin-bottom: var(--s-3);
}

#name-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

#name-input {
  width: 100%;
  padding: 20px 22px;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  color: var(--fg);
  background: var(--paper-2);
  border: 2.5px solid var(--fg);
  border-radius: var(--r-md);
  box-shadow: 6px 6px 0 var(--coral);
  transition: box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
}
#name-input::placeholder { color: var(--fg-faint); font-weight: 500; }
#name-input:focus {
  outline: none;
  box-shadow: 6px 6px 0 var(--aqua);
}

#name-form button[type="submit"] {
  padding: 20px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  background: var(--coral);
  border-radius: var(--r-md);
  box-shadow: 0 6px 0 var(--coral-deep);
  transition: transform .08s var(--ease-out), box-shadow .08s var(--ease-out), filter .15s;
}
#name-form button[type="submit"]:hover { filter: brightness(1.05); }
#name-form button[type="submit"]:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--coral-deep);
}

#name-error {
  min-height: 1.4em;
  text-align: center;
  font-weight: 600;
  color: var(--wrong);
}
#name-error:not(:empty) { animation: shake .4s var(--ease-soft); }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  50%      { transform: translateX(-4px); }
}

/* ===========================================================================
   2 · WAIT — look at the big screen
   ========================================================================= */
[data-view="wait"] { justify-content: center; text-align: center; }

#wait-msg {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg);
  max-width: 18ch;
  margin-inline: auto;
}
/* Calm "breathing" pulse behind the wait emoji line */
[data-view="wait"]::before {
  content: "";
  width: clamp(120px, 40vw, 200px);
  height: clamp(120px, 40vw, 200px);
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: radial-gradient(circle, var(--aqua) 0%, transparent 70%);
  opacity: .28;
  animation: breathe 2.6s var(--ease-soft) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(.85); opacity: .18; }
  50%      { transform: scale(1.05); opacity: .34; }
}

/* ===========================================================================
   3 · QUESTION — countdown, image, text, four-color options
   ========================================================================= */
[data-view="question"] {
  justify-content: flex-start;
  padding-top: var(--s-4);
}

/* ---- Countdown ---- */
#countdown {
  align-self: center;
  display: grid;
  place-items: center;
  width: clamp(86px, 26vw, 120px);
  height: clamp(86px, 26vw, 120px);
  font-family: var(--font-num);
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: #fff;
  background: var(--fg);
  border-radius: 50%;
  box-shadow: 0 8px 0 rgba(0,0,0,.18), inset 0 0 0 4px var(--gold);
  animation: tick 1s steps(1) infinite;
}
#countdown[hidden] { display: none; }
@keyframes tick {
  0%   { transform: scale(1.06); }
  12%  { transform: scale(1); }
  100% { transform: scale(1); }
}

#q-image {
  align-self: center;
  max-height: 30vh;
  width: auto;
  border-radius: var(--r-md);
  border: 3px solid var(--fg);
  box-shadow: var(--lift);
}
#q-image[hidden] { display: none; }

#q-text {
  font-size: clamp(1.45rem, 6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--fg);
  text-align: center;
  padding: 0 var(--s-2);
}

/* ---- Options grid ----
   2-up on roomy screens, single column when narrow for fat thumb targets. */
#options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2.6vw, 16px);
  margin-top: auto;
  padding-top: var(--s-4);
}
@media (max-width: 380px) {
  #options { grid-template-columns: 1fr; }
}

/* The chunky tactile answer button */
.opt {
  --c: var(--ink-2);
  --c-deep: rgba(0,0,0,.4);
  --glyph: "";
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: clamp(76px, 16vw, 104px);
  padding: var(--s-4) var(--s-4) var(--s-4) clamp(58px, 16vw, 72px);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  font-weight: 800;
  line-height: 1.18;
  text-align: left;
  color: #fff;
  background: var(--c);
  border-radius: var(--r-md);
  box-shadow: 0 7px 0 var(--c-deep), var(--float);
  transition: transform .09s var(--ease-out), box-shadow .09s var(--ease-out), filter .15s;
  animation: optPop .4s var(--ease-back) both;
  overflow: hidden;
}
.opt:hover { filter: brightness(1.05); }
.opt:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--c-deep), var(--float);
}
.opt:disabled { opacity: .55; }

/* Shape glyph badge — the non-color cue. Lives in ::before so it never
   collides with the JS-injected "A. text" content. */
.opt::before {
  content: var(--glyph);
  position: absolute;
  left: clamp(12px, 4vw, 18px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: clamp(34px, 9vw, 42px);
  height: clamp(34px, 9vw, 42px);
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.22);
  border-radius: 12px;
}
/* Glossy top sheen for a "molded plastic" sticker feel */
.opt::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent);
  pointer-events: none;
}

/* Staggered entrance */
.opt-0 { animation-delay: .02s; }
.opt-1 { animation-delay: .08s; }
.opt-2 { animation-delay: .14s; }
.opt-3 { animation-delay: .20s; }
@keyframes optPop {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Four-color system + shape glyphs (red ▲ / blue ◆ / gold ● / green ■) */
.opt-0 { --c: var(--o0); --c-deep: var(--o0-deep); --glyph: "\25B2"; } /* ▲ */
.opt-1 { --c: var(--o1); --c-deep: var(--o1-deep); --glyph: "\25C6"; } /* ◆ */
.opt-2 { --c: var(--o2); --c-deep: var(--o2-deep); --glyph: "\25CF"; } /* ● */
.opt-3 { --c: var(--o3); --c-deep: var(--o3-deep); --glyph: "\25A0"; } /* ■ */
.opt-4 { --c: var(--o4); --c-deep: var(--o4-deep); --glyph: "\2726"; } /* ✦ */
.opt-5 { --c: var(--o5); --c-deep: var(--o5-deep); --glyph: "\271A"; } /* ✚ */

/* gold button needs dark ink text for contrast */
.opt-2 { color: #3a2a00; }
.opt-2::before { color: #3a2a00; background: rgba(0,0,0,.14); }

/* ---- True / False pair ----
   JS emits "opt opt-0 tf" (对) and "opt opt-1 tf" (错). Override color + glyph
   and span both columns into big stacked bars. */
.opt.tf {
  grid-column: 1 / -1;
  min-height: clamp(96px, 22vw, 132px);
  justify-content: center;
  padding-left: clamp(64px, 18vw, 84px);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  letter-spacing: .1em;
}
.opt.tf.opt-0 {            /* 对 → green ✓ */
  --c: var(--yes); --c-deep: var(--yes-deep); --glyph: "\2713";
  color: #fff;
}
.opt.tf.opt-0::before { color: #fff; background: rgba(0,0,0,.18); }
.opt.tf.opt-1 {            /* 错 → red ✗ */
  --c: var(--no); --c-deep: var(--no-deep); --glyph: "\2715";
  color: #fff;
}
.opt.tf.opt-1::before { color: #fff; background: rgba(0,0,0,.18); }

/* ===========================================================================
   4 · SUBMITTED — rewarding "got it in" confirmation
   ========================================================================= */
[data-view="submitted"] {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}
/* Big satisfying check seal that pops + settles */
[data-view="submitted"]::before {
  content: "\2713";
  display: grid;
  place-items: center;
  width: clamp(120px, 38vw, 168px);
  height: clamp(120px, 38vw, 168px);
  font-size: clamp(4rem, 16vw, 6rem);
  font-weight: 900;
  color: #fff;
  background: var(--aqua);
  border-radius: 50%;
  box-shadow: 0 12px 0 var(--aqua-deep), var(--float);
  animation: sealPop .55s var(--ease-back) both;
}
@keyframes sealPop {
  0%   { transform: scale(.2) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
[data-view="submitted"] p:first-of-type {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 800;
  color: var(--fg);
}
[data-view="submitted"] p:last-of-type {
  font-size: clamp(1rem, 4.5vw, 1.2rem);
  color: var(--fg-soft);
  animation: pulseWait 1.8s var(--ease-soft) infinite;
}
@keyframes pulseWait { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* ===========================================================================
   5 · RESULT — celebratory (correct) / calm + clear (wrong / not-answered)
   ========================================================================= */
[data-view="result"] {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}

#result-headline {
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.02;
  padding: 0 var(--s-3);
  animation: headlinePop .5s var(--ease-back) both;
}
@keyframes headlinePop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

#result-headline { color: var(--fg); }

/* Points / answer line.
   NOTE on the design constraint: the JS distinguishes correct vs. wrong only
   by *text* ("+850 分" vs. "正确答案:B"), with no class or data hook — and CSS
   cannot branch on text content. So rather than fake a distinction we can't
   reliably read, we ship ONE confident, legible card and let the celebration
   come from (a) the 🎉 emoji JS injects into the headline on a correct answer,
   (b) the warm gold treatment, and (c) the bouncy reveal motion. It reads as a
   reward when right and stays calm + perfectly clear when wrong or skipped. */
#result-points {
  font-family: var(--font-num);
  font-size: clamp(2.2rem, 11vw, 3.6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--fg);
  padding: var(--s-4) var(--s-6);
  background: var(--paper-2);
  border: 3px solid var(--fg);
  border-radius: var(--r-lg);
  box-shadow: 8px 8px 0 var(--gold), var(--float);
  animation: pointsPop .55s var(--ease-back) .08s both;
}
@keyframes pointsPop {
  from { opacity: 0; transform: translateY(18px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#result-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 5vw, 1.3rem);
  color: var(--fg-soft);
  padding: var(--s-2) var(--s-4);
  background: var(--paper-2);
  border: 2px solid var(--paper-edge);
  border-radius: var(--r-pill);
}
#result-rank:empty { display: none; }

/* Warm celebratory glow behind the result stage. Subtle enough to feel
   triumphant when right without looking "wrong" when wrong. */
[data-view="result"] {
  position: relative;
  background:
    radial-gradient(85% 55% at 50% 32%, rgba(255,178,62,.16), transparent 72%);
}

/* A spray of confetti dots, anchored to the result stage corners. Pure CSS,
   gentle — celebratory texture, not chaos. Only shown on roomy screens. */
@media (min-height: 560px) {
  [data-view="result"]::before,
  [data-view="result"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    animation: confettiDrift 6s var(--ease-soft) infinite alternate;
  }
  [data-view="result"]::before {
    background-image:
      radial-gradient(8px 8px at 14% 20%, var(--o0) 50%, transparent 52%),
      radial-gradient(7px 7px at 86% 26%, var(--o1) 50%, transparent 52%),
      radial-gradient(6px 6px at 22% 78%, var(--o3) 50%, transparent 52%),
      radial-gradient(9px 9px at 78% 82%, var(--o2) 50%, transparent 52%);
    opacity: .7;
  }
  [data-view="result"]::after {
    background-image:
      radial-gradient(5px 5px at 8% 50%, var(--aqua) 50%, transparent 52%),
      radial-gradient(6px 6px at 92% 56%, var(--coral) 50%, transparent 52%),
      radial-gradient(5px 5px at 50% 10%, var(--gold) 50%, transparent 52%);
    opacity: .6;
    animation-delay: -2s;
  }
}
@keyframes confettiDrift {
  from { transform: translateY(-6px) rotate(-1deg); }
  to   { transform: translateY(6px) rotate(1deg); }
}