:root {
  --duration-stagger:40ms;
  --duration-quick:150ms;
  --duration-fast:250ms;
  --duration-slow:400ms;
  --duration-very-slow:500ms;
  --duration-choice-confirm:var(--duration-quick);
  --duration-panel-exit:var(--duration-quick);
  --duration-panel-enter:var(--duration-fast);
  --duration-stat-count:var(--duration-very-slow);
}

/* This is the stable visual anchor while a choice turns into its consequences. */
.game-header {
  position:sticky;
  top:0;
  z-index:5;
  padding-top:16px;
  background:var(--paper);
}
.game-shell{padding-top:0}
.chapter-caption{display:flex;justify-content:space-between;gap:16px;padding-top:14px;font-size:8px;font-weight:700;letter-spacing:1px;color:var(--muted)}
.chapter-caption>span:last-child{color:var(--accent)}
.chapter-caption i{font-style:normal;padding:0 5px}
.chapter-progress{padding-top:10px;padding-bottom:18px}
.chapter-progress>span{transition:background var(--duration-fast) ease,color var(--duration-fast) ease,border-color var(--duration-fast) ease}
.stat{position:relative}
.stat-label>b{display:inline-flex;align-items:baseline;min-width:43px;justify-content:flex-end}
.stat-value{font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.stat-track>span{transition-duration:var(--duration-stat-count)}
.stat-delta{position:absolute;right:0;top:24px;font-weight:700;font-size:12px;line-height:1;border-radius:5px;background:var(--ink);color:var(--paper);padding:5px 7px;opacity:0;pointer-events:none;z-index:1;font-variant-numeric:tabular-nums}
.stat-delta.is-shown{animation:stat-delta 1800ms var(--ease-smooth-out) both}
@keyframes stat-delta {
  0%{opacity:0;transform:translateY(6px) scale(.96)}
  16%,78%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-4px) scale(1)}
}
.choice-made .choice-button:not(.is-selected){opacity:.4}
.choice-made .choice-button.is-selected{border-color:var(--accent);background:var(--soft-accent);box-shadow:inset 3px 0 0 var(--accent)}
.choice-made .choice-button.is-selected .choice-key{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.choice-made .choice-button.is-selected .choice-arrow{font-size:0}
.choice-made .choice-button.is-selected .choice-arrow:after{content:'✓';font-size:19px}
main[aria-busy="true"] [data-action]{pointer-events:none}
.decision-recap{border-left:2px solid var(--accent);padding:0 0 0 12px;margin:0 0 19px}
.decision-recap>span{display:block;font-size:7px;letter-spacing:1px;font-weight:700;color:var(--muted);margin-bottom:4px}
.decision-recap>strong{display:block;font-size:11px;line-height:1.6;font-weight:700}
.scene-content{min-width:0}
.scene-art img{object-position:center 28%}
.approved-stamp{animation:stamp-arrives var(--duration-very-slow) var(--ease-smooth-out) both}
@keyframes stamp-arrives{from{opacity:0;transform:rotate(-14deg) scale(1.12)}to{opacity:1;transform:rotate(-14deg) scale(1)}}

@media(max-width:767px){
  .game-header{padding-top:12px}
  .chapter-caption{padding-top:12px;font-size:7px;letter-spacing:.8px}
  .chapter-progress{padding-top:10px;padding-bottom:16px}
  .stat-label>b{min-width:0;justify-content:flex-start}
  .stat-value{text-align:left}
  .stat-delta{top:31px;right:0;font-size:10px;padding:4px 5px}
  .result-art img,.result-art.landscape-art img{height:230px}
  .scene-art img[src$="french-teacher.webp"]{object-position:center top}
  .decision-recap{margin-bottom:18px}
  .decision-recap>strong{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .stat-delta.is-shown{opacity:1;transform:none}
}