/* Play screen: calm, the question and the answer area are the only loud things. */
.play { gap: var(--s-3); max-width: 44rem; width: 100%; margin: 0 auto; }
.play-bar { display: flex; align-items: center; gap: var(--s-2); }
/* The full height less the app wrapper's top and bottom padding (base.css), so the round sits in the middle of the
   screen (equal space above the question and below the answers) without scrolling. Short screens just stack. */
.play { min-height: calc(100dvh - var(--s-3) - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.play > .stage { margin-top: auto; }
.play > .answer-area { margin-bottom: auto; }
/* Phones: the pencil alone, so the progress bar keeps its room. */
@media (max-width: 479px) { .scratch-label { display: none; } }
.depth { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.depth-block { height: 18px; background: var(--stone-light); border: 2px solid var(--line); border-radius: 5px; }
.depth-block.current { background: var(--white); box-shadow: 0 0 0 2px var(--gold); }
.depth-block.gem { background: var(--gem); animation: mined 320ms var(--ease); }
.depth-block.ok { background: var(--gold); animation: mined 320ms var(--ease); }
.depth-block.miss { background: var(--stone-dark); }
@keyframes mined { 0% { transform: scale(0.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

.question {
  background: var(--paper); border: var(--edge); border-radius: var(--radius); box-shadow: var(--drop);
  padding: var(--s-4); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center;
}
.question-text { font-size: var(--text-question); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.question-sub { font-size: var(--text-sm); color: var(--ink-soft); }
.question-expr { font-size: var(--text-expr); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.visual { display: grid; place-items: center; width: 100%; margin-top: var(--s-1); }
.vis { width: min(100%, 190px); height: auto; }
.vis-wide { width: min(100%, 420px); }
.vis-grid { width: min(100%, 280px); }
.vis-clock { width: min(100%, 180px); }
.vis-objects { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); font-size: 1.6rem; line-height: 1.1; }
.vis-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 12em; }
.vis-group.boxed { border: 2px dashed var(--stone-dark); border-radius: var(--radius); padding: var(--s-1) var(--s-2); max-width: 6.5em; }
.vis-column { display: inline-grid; justify-items: end; font-family: var(--font-display); font-weight: 800; font-size: var(--text-expr); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.vis-column b { margin-right: 0.5em; }
.vis-column-line { width: 100%; height: 4px; background: var(--ink); margin-top: var(--s-1); }
.vis-division { display: inline-flex; align-items: stretch; gap: 0.3em; font-family: var(--font-display); font-weight: 800; font-size: var(--text-expr); font-variant-numeric: tabular-nums; }
.vis-division-box { border-top: 4px solid var(--ink); border-left: 4px solid var(--ink); border-top-left-radius: 10px 60%; padding: 0 0.3em; letter-spacing: 0.1em; }
.vis-table { border-collapse: collapse; background: var(--white); font-variant-numeric: tabular-nums; }
.vis-table th, .vis-table td { border: 2px solid var(--ink); padding: var(--s-1) var(--s-3); text-align: center; }
.vis-table thead th { background: var(--paper-2); }
.vis-picto-row { text-align: left !important; font-size: 1.25rem; letter-spacing: 2px; }
.vis-key { margin-top: var(--s-2); font-weight: 700; }
.vis-pie { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; }
.vis-pie .vis { width: 150px; }
.vis-legend { display: flex; flex-direction: column; gap: var(--s-1); text-align: left; font-weight: 700; }
.vis-legend li { display: flex; align-items: center; gap: var(--s-2); }
.vis-dot { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 3px; flex: none; }

/* AI Studio diagrams */
.visual-ai { text-align: left; }
.ai-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: var(--s-2) 3px; }
.ai-link { display: flex; align-items: stretch; gap: 3px; }
.ai-step { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 4.2rem; min-height: 4.6rem; padding: 3px; background: var(--white); border: 2px solid var(--ink); border-radius: 12px; text-align: center; }
.ai-step-icon { font-size: 1.5rem; line-height: 1.1; }
.ai-step-label { font-size: 0.72rem; font-weight: 700; line-height: 1.2; }
.ai-step.ask { border-style: dashed; border-color: var(--gold); background: var(--hint-bg); }
.ai-step.ask .ai-step-icon { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--ink-soft); }
.ai-step.bad { border-color: #d9413f; background: #fdeceb; }
.ai-step-cross { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d9413f; color: #fff; font-size: 0.8rem; font-weight: 800; }
.ai-arrow { align-self: center; font-size: 0.8rem; font-weight: 800; color: var(--ink-soft); }
.ai-tree, .ai-code, .ai-url-text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.ai-tree { display: inline-flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); background: var(--white); border: 2px solid var(--ink); border-radius: 12px; font-size: 0.88rem; line-height: 1.25; font-weight: 600; }
.ai-tree-row { display: flex; align-items: center; gap: 6px; }
.ai-tree-row.depth-1 { padding-left: 1.2rem; }
.ai-tree-row.depth-2 { padding-left: 2.4rem; }
.ai-tree-folder { font-weight: 800; }
.ai-url { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; padding: var(--s-2) var(--s-3); background: var(--white); border: 2px solid var(--ink); border-radius: 14px; font-size: 0.85rem; font-weight: 600; }
.ai-url-text { display: flex; flex-wrap: wrap; }
.ai-url-text span { white-space: nowrap; }
.ai-url-mark { background: var(--gold); border-radius: 4px; padding: 1px 2px; box-shadow: 0 0 0 2px var(--gold); }
.ai-commits { display: inline-flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) var(--s-3); background: var(--white); border: 2px solid var(--ink); border-radius: 12px; max-width: 100%; }
.ai-commit { display: flex; align-items: center; gap: var(--s-2); font-size: 0.9rem; font-weight: 700; }
.ai-commit-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--good); border: 2px solid var(--ink); }
.ai-commit.broken .ai-commit-dot { background: #d9413f; }
.ai-commit-text { flex: 1; min-width: 0; }
.ai-commit-tags { display: flex; gap: 6px; flex: none; font-size: 0.8rem; white-space: nowrap; }
.ai-page { width: min(100%, 17rem); background: var(--white); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.ai-page-bar { display: flex; gap: 5px; padding: 6px 8px; background: var(--paper-2); border-bottom: 2px solid var(--ink); }
.ai-page-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--stone-dark); }
.ai-page-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--s-2) var(--s-3); }
.ai-page-h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
.ai-page-h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.ai-page-p, .ai-page-li { font-size: 0.9rem; }
.ai-page-button { padding: 4px 14px; background: var(--good); color: #fff; font-weight: 800; font-size: 0.9rem; border: 2px solid var(--ink); border-radius: 8px; }
.ai-page-link { color: #2459a8; font-weight: 700; font-size: 0.9rem; text-decoration: underline; }
.ai-page-img { display: grid; place-items: center; width: 4.5rem; height: 3.2rem; background: var(--paper-2); border: 2px dashed var(--stone-dark); border-radius: 8px; font-size: 1.4rem; }
.ai-page-input { width: 9rem; height: 1.8rem; background: var(--white); border: 2px solid var(--ink); border-radius: 6px; }
.ai-code { display: inline-flex; flex-direction: column; gap: 2px; max-width: 100%; padding: var(--s-2) var(--s-3) var(--s-2) 2.4rem; background: #1f2430; color: #f4f1e8; border-radius: 12px; font-size: 0.85rem; list-style: decimal; }
.ai-code li::marker { color: #9aa3b5; }
.ai-code code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Teaching cards */
.lesson-topic { flex: 1; min-width: 0; text-align: center; font-weight: 800; }
.lesson-body { display: flex; flex-direction: column; gap: var(--s-3); }
.lesson-card { gap: var(--s-3); }
.lesson-kicker { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); font-weight: 700; color: var(--ink-soft); }
.lesson-kicker .mascot { width: 44px; height: 44px; }
.lesson-emoji { font-size: 4.5rem; line-height: 1.1; }
.lesson-title { font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
.lesson-text { font-size: var(--text-lg); line-height: 1.45; text-wrap: pretty; }
.lesson-dots { display: flex; justify-content: center; gap: 8px; }
.lesson-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--stone-light); border: 2px solid var(--line); }
.lesson-dots span.on { background: var(--gold); border-color: var(--gold-dark); }
.lesson-nav { display: flex; gap: var(--s-3); }
.lesson-next { flex: 1; }
.lesson-skip { align-self: center; padding: var(--s-2) var(--s-4); background: none; border: 0; color: var(--ink-soft); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Feedback */
.feedback-slot { display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; }
.feedback { border: var(--edge); border-radius: var(--radius); padding: var(--s-3) var(--s-4); animation: screen-in var(--normal) var(--ease); }
.feedback.good { background: var(--good-bg); border-color: var(--good); text-align: center; }
.feedback.hint { background: var(--hint-bg); border-color: var(--hint); }
.feedback.explain { background: var(--paper); }
.feedback strong { font-family: var(--font-display); }
.feedback-answer { font-size: var(--text-xl); color: var(--good); }

/* Keypad */
.pad { display: flex; flex-direction: column; gap: var(--s-2); max-width: 22rem; width: 100%; margin: 0 auto; }
.pad-display { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 60px; background: var(--white); border: var(--edge); border-radius: var(--radius); box-shadow: inset 0 4px 0 rgb(0 0 0 / 0.08); padding: 0 var(--s-3); }
/* Always one line at a fixed line height, so the box keeps its size from '?' to the last digit and the keys never move. */
.pad-value { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 1ch; }
.pad-value.is-empty::after { content: "?"; color: var(--stone); }
.pad-unit { font-weight: 800; font-size: var(--text-lg); color: var(--ink-soft); }
.pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.pad-key { min-height: 56px; font-size: 1.5rem; padding: 0; background: var(--white); }
.pad.locked .pad-key { opacity: 0.5; pointer-events: none; }

/* Choices */
.choices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.choices.wide { grid-template-columns: minmax(0, 1fr); }
.choices.wide .choice { min-height: 56px; font-size: var(--text-base, 1rem); }
.choice span { max-width: 100%; overflow-wrap: anywhere; }
.choice { min-height: 68px; flex-direction: column; gap: 0; font-size: var(--text-lg); background: var(--white); padding: var(--s-2) var(--s-3); }
.choice.right { background: var(--good-bg); border-color: var(--good); }
.choice.wrong { background: var(--bad-bg); opacity: 0.7; }
.choices.locked .choice { pointer-events: none; }

@media (min-width: 900px) and (min-height: 600px) {
  .play { max-width: 62rem; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-areas: "bar bar" "stage answer" "feedback answer"; align-items: start; column-gap: var(--s-5); }
  .play-bar { grid-area: bar; }
  .stage { grid-area: stage; }
  .feedback-slot { grid-area: feedback; }
  .answer-area { grid-area: answer; }
  .play > .result, .play > .boot, .play > .panel { grid-column: 1 / -1; }
}

/* Tablets (iPad either way round): children hold these most, so the question and the answers grow to fill the screen
   instead of floating at the top in phone sizes. Keys reach at least 76px, the sum and pictures grow, and the round sits
   in the middle of the height. */
@media (min-width: 700px) and (min-height: 700px) {
  .play {
    --text-question: clamp(1.6rem, 1rem + 1.5vw, 2.3rem);
    --text-expr: clamp(2.8rem, 1.6rem + 3.2vw, 4.25rem);
  }
  .question { padding: var(--s-5); gap: var(--s-3); }
  .vis { width: min(100%, 260px); }
  .vis-wide { width: min(100%, 560px); }
  .vis-grid { width: min(100%, 380px); }
  .vis-clock { width: min(100%, 250px); }
  .vis-objects { font-size: 2.3rem; }
  .pad { max-width: 30rem; gap: var(--s-3); }
  .pad-keys { gap: var(--s-3); }
  .pad-key { min-height: 76px; font-size: 2rem; }
  .pad-display { min-height: 84px; }
  .pad-value { font-size: 2.75rem; }
  .pad-ok { min-height: 76px; font-size: 1.4rem; }
  .choice { min-height: 88px; font-size: 1.4rem; }
  .choices.wide .choice { min-height: 72px; font-size: 1.2rem; }
  .choices.big .choice { font-size: 2.8rem; min-height: 104px; }
}
/* Two columns (iPad on its side): the bar on top, question and answers centred in the height left. */
@media (min-width: 900px) and (min-height: 600px) {
  .play { grid-template-rows: auto 1fr auto; align-items: center; }
  .play > .stage, .play > .answer-area { margin-block: 0; }
  .play-bar { align-self: start; }
}
@media (min-width: 900px) and (min-height: 700px) { .play { max-width: 68rem; } }

/* Scratch paper */
.scratch { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #fffdf3; }
.scratch-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: max(var(--s-2), env(safe-area-inset-top)) var(--s-3) var(--s-2); background: var(--paper-2); border-bottom: var(--edge); }
.scratch-bar .spacer { flex: 1; }
.scratch-title { margin-right: var(--s-2); }
.scratch-tool[aria-pressed="true"] { background: var(--gold); }
.scratch-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink); }
.scratch-question { padding: var(--s-2) var(--s-4); font-weight: 700; border-bottom: 2px dashed var(--stone-light); }
.scratch-question:empty { display: none; }
.scratch-canvas { flex: 1; width: 100%; min-height: 0; touch-action: none; cursor: crosshair; }
@media (max-width: 480px) { .scratch-title { display: none; } }
/* Dual-screen or unfolded phone: the paper stays open on the right-hand screen and the round uses the left one.
   Where the browser reports the two screens, the paper starts exactly at the second one; otherwise at half width. */
.scratch.docked { left: 50vw; left: env(viewport-segment-left 1 0, 50vw); z-index: 5; border-left: var(--edge); }
.scratch.docked .scratch-done { display: none; }
body.scratch-docked .app { padding-right: calc(50vw + var(--s-4)); }
body.scratch-docked .scratch-open { display: none; }
@media (horizontal-viewport-segments: 2) {
  body.scratch-docked .app { padding-right: calc(100vw - env(viewport-segment-right 0 0, 50vw) + var(--s-4)); }
}

/* Result */
.result { display: flex; flex-direction: column; gap: var(--s-4); }
.result-main h1 { font-size: var(--text-xl); }
.result-stars .stars svg { width: 56px; height: 56px; }
.result-stars { margin: var(--s-3) 0; }
.result-score { font-size: var(--text-lg); }
.result-gems h2 { display: flex; align-items: center; gap: var(--s-2); }
.result-gems h2 svg { width: 28px; height: 28px; }
.gem-lines li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0; border-bottom: 2px dotted var(--paper-2); }
.result-pick { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.result-pick svg { width: 32px; height: 32px; }
.review-list { display: flex; flex-direction: column; gap: var(--s-3); padding-left: var(--s-5); list-style: decimal; }
.review-list li { padding-left: var(--s-1); }
.review-q { font-weight: 700; }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* The second language stays readable where it carries meaning. */
.feedback .sub { font-size: 0.9em; opacity: 0.8; margin-top: 2px; }
.choice .sub { font-size: 0.72em; }
.question-sub { font-size: var(--text-base); }

/* English: listen button, big letter and picture choices, letter tiles, pictures */
.listen { align-self: center; }
.choices.big .choice { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; min-height: 84px; line-height: 1.1; }
.spell { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.spell-slots, .spell-rack { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.spell-slot, .spell-tile { width: 46px; height: 54px; padding: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; background: var(--white); }
.spell-slot.is-empty { border: 3px dashed var(--stone); border-radius: 4px; background: transparent; }
.spell-tile:disabled { opacity: 0.25; }
.spell.locked { pointer-events: none; }
.spell .pad-ok { width: 100%; }

.vis-pic { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); font-size: 4.5rem; line-height: 1.15; }
.vis-pic.many { font-size: 2.4rem; }
.vis-emoji.small { font-size: 0.5em; }
.vis-emoji.ring { outline: 4px solid var(--gold); outline-offset: 2px; border-radius: 50%; padding: 6px; }
.vis-swatch { width: 132px; height: 96px; border: var(--edge); border-radius: var(--radius); }
.vis-shape2d { width: 170px; height: auto; fill: var(--gem); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.vis-place { position: relative; width: 170px; height: 150px; }
.vis-place-box { position: absolute; left: 25px; top: 62px; width: 120px; height: 80px; background: #c98f4e; border: var(--edge); border-radius: 4px; }
.vis-place.box .vis-place-box { border-top-style: dashed; }
.vis-place.desk .vis-place-box { height: 22px; }
.vis-place.desk .vis-place-box::before, .vis-place.desk .vis-place-box::after { content: ""; position: absolute; top: 100%; width: 8px; height: 60px; background: var(--ink); }
.vis-place.desk .vis-place-box::before { left: 6px; }
.vis-place.desk .vis-place-box::after { right: 6px; }
.vis-place-pet { position: absolute; left: 0; right: 0; text-align: center; font-size: 2.7rem; line-height: 1; z-index: 1; }
.vis-place.on .vis-place-pet { top: 18px; }
.vis-place.in .vis-place-pet { top: 78px; }
.vis-place.under .vis-place-pet { top: 98px; }

/* Reading passages */
.question-passage { align-self: stretch; text-align: left; white-space: pre-line; font-size: var(--text-lg); line-height: 1.7; background: var(--white); border: 2px solid var(--stone-light); border-radius: var(--radius); padding: var(--s-3); }
.vis-rows { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.vis-rows .vis-pic { justify-content: flex-start; border-bottom: 2px dashed var(--stone-light); padding-bottom: var(--s-1); }
.vis-rows .vis-pic:last-child { border-bottom: 0; }

/* Sains drawings */
.vis-sci { width: 220px; max-width: 100%; height: auto; border: var(--edge); border-radius: var(--radius); background: #fffdf3; }

/* 听写: the writing box with its guide lines. */
.write { display: grid; justify-items: center; gap: var(--s-3); }
.write-slots { display: flex; gap: var(--s-2); min-height: 44px; }
.write-slot { width: 44px; height: 44px; display: grid; place-items: center; border: 2px dashed var(--line); border-radius: 10px; background: var(--white); font-size: 1.6rem; font-weight: 700; }
.write-slot.now { border-color: #e97c12; border-style: solid; }
.write-slot.done { border-style: solid; border-color: var(--go); }
.write-box {
  width: 260px; height: 260px; border: 3px solid #e2726b; border-radius: 16px; background-color: var(--white); touch-action: none; user-select: none; -webkit-user-select: none;
  background-image:
    linear-gradient(to right, transparent calc(50% - 1px), #f6c9c5 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), #f6c9c5 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.write-box svg { display: block; touch-action: none; }
.write.locked .write-box { opacity: 0.85; }
.write-note { margin: 0; }
.write-actions { justify-content: center; }

/* The mascot beside a hint or a worked answer, and on the result card. */
.feedback.with-art { display: flex; align-items: center; gap: var(--s-3); }
.feedback.with-art .mascot { width: 84px; flex: none; margin: -8px -4px -8px -10px; }
.feedback-text { flex: 1; min-width: 0; }
.result-main .mascot { width: 132px; margin: -8px auto 0; }
.result-main .mascot-cheer { animation: mascot-hop 700ms var(--ease) both; }
@keyframes mascot-hop { 0% { transform: translateY(14px) scale(0.9); opacity: 0; } 60% { transform: translateY(-6px) scale(1.03); opacity: 1; } 100% { transform: none; } }

/* Feedback and celebrations. Short, and built from transform and opacity only so they stay smooth. */
.feedback.good { display: flex; align-items: center; justify-content: center; gap: var(--s-2); flex-wrap: wrap; animation: good-pop 360ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes good-pop { 0% { transform: scale(0.88); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: none; } }
.tick { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--go); display: inline-grid; place-items: center; animation: tick-in 420ms cubic-bezier(0.2, 1.7, 0.4, 1) 60ms both; }
.tick::after { content: ""; width: 8px; height: 15px; border: solid var(--white); border-width: 0 4px 4px 0; transform: translateY(-2px) rotate(45deg); }
@keyframes tick-in { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.combo { flex-basis: 100%; font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); color: var(--accent-dark); animation: combo-in 380ms var(--ease) 160ms both; }
@keyframes combo-in { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.nudge { animation: nudge 320ms ease-in-out; }
@keyframes nudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

/* Result: earned stars wait out of sight and land one by one. */
.result-stars.landing svg:not(.off):not(.landed) { opacity: 0; transform: scale(0.2); }
.result-stars.landing svg.landed { animation: star-land 560ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes star-land { 0% { transform: scale(0.2) rotate(-40deg); opacity: 0; } 55% { transform: scale(1.3) rotate(8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 60; }
.confetti i { position: absolute; top: 0; width: 10px; height: 14px; border-radius: 3px; will-change: transform; }