/* Final shared layer: warm school-day colors, clear cards and touch targets. */
:root{--page:#f7faf5;--surface:#eef5ed;--muted:#526b5e;--line:#d2e1d5;--gold:#b48724}
body{background:radial-gradient(ellipse at top,#e9f3e7 0,transparent 65%),var(--page)}
.site-header{border-bottom:1px solid var(--line)}
.selection-heading h1{color:var(--green)}
.completion-progress{padding:14px 18px;border:1px solid var(--line);border-radius:18px;background:#ffffffdd;box-shadow:0 3px 12px #174c3c06}
.completion-progress .progress-message{color:var(--ink)}
.completion-progress .button{min-height:48px}
.progress-marks i{width:12px;height:12px;border:2px solid #b8cdbb;background:white}
.progress-marks i.done{border-color:var(--gold);background:var(--gold)}
.story-card,.story-card[aria-pressed=true],.story-card.is-complete,.story-card.is-complete[aria-pressed=true]{border-radius:20px;background:linear-gradient(#fff,#eef5ea);box-shadow:0 5px 0 #dce8db}
.story-card[aria-pressed=true]{background:linear-gradient(#f8fff6,#dfeedd);box-shadow:0 5px 0 #94b391}
.story-card strong{color:var(--green)}
.story-card[aria-pressed=true] .card-status{background:#174c3c;color:#fff}
.story-card[aria-pressed=true] .selection-check{color:inherit}
.story-detail{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 8px 24px #174c3c08}
.story-detail blockquote{color:var(--ink)}
.story-detail .primary,.result-screen .primary{background:linear-gradient(#257251,#185a40);border-color:#185a40;box-shadow:0 3px 0 #103e2b}
.button{min-height:52px;border-radius:14px}
.text-button,.inline-button,.speed-picker label,.staff-receipt summary{min-height:44px}
.speed-picker label{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:#f6faf4;cursor:pointer}
.speed-picker label:has(input:checked){border-color:var(--green);background:#e8f3e5;color:var(--green);font-weight:700}
.selection-instructions{border:1px solid var(--line);border-radius:16px;background:#ffffffa6}
.support-result{padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;margin:12px 0;box-shadow:0 3px 10px #174c3c05}
.support-list{border:0}.support-result details{margin-top:12px}
.support-result summary{min-height:44px;display:flex;align-items:center}
.learning-summary{border:1px solid var(--line);border-radius:18px}
.reward-ticket{background:linear-gradient(135deg,#fff5d7,#f5e9ba);border-radius:18px}
.certificate{box-shadow:0 8px 30px #60490e0d;background:#fffef9}
.certificate-seal{box-shadow:0 0 0 7px #f3ecd3}
.certificate-actions .button{min-height:52px}
.staff-receipt summary{display:list-item;line-height:1.5;padding:10px 0}
dialog{border-radius:24px;border:1px solid #c4d8c8;box-shadow:0 18px 60px #15382933;padding:26px;background:#fffef9;overscroll-behavior:contain;scroll-padding:20px}
dialog h2{line-height:1.4}dialog .button{min-height:52px}
dialog .button.primary{background:#1c6247}
.is-playing .light-counter{background:#fff8df;border-color:#c7ac60}
.is-playing .inventory-hud{border-color:#82a68b}
.is-playing .choice-panel.is-choice,.is-playing .choice-panel.is-feedback{border:2px solid #a4c4a4;background:#fffef9;scrollbar-width:thin;scrollbar-color:#b3c8b5 transparent}
.is-playing .choice-button{background:#eff7eb;border-color:#b5ceb2}
.is-playing .feedback .effect{padding:8px 10px;background:#e9f4e4;border-radius:12px;color:#245d37}
.button:focus-visible,.story-card:focus-visible,.text-button:focus-visible,.inline-button:focus-visible,summary:focus-visible{outline:3px solid #9c711b;outline-offset:4px}
@media(max-width:650px){
  .site-header,.is-selecting .site-header{padding-inline:14px;flex-wrap:wrap}
  .header-tools{gap:8px}.header-tools .text-button{font-size:12px;padding:8px 6px;min-height:44px}
  .header-tools .text-button+button{padding-left:10px}
  .story-cards{height:215px}.story-detail{padding:20px}
  .student-needs,.card-status,.completion-badge,.selection-check{font-size:12px}
  .story-detail .speed-picker{gap:10px;flex-wrap:wrap}.story-detail .button{min-height:54px}
  .completion-progress{gap:8px;padding:14px;margin-bottom:20px}
  .completion-progress .progress-message{padding-left:0;border:0;font-size:13px}
  .selection-definition,.selection-definition>strong,.selection-definition .inline-button{font-size:13px}
  .result-actions{grid-template-columns:1fr}.result-actions .button{font-size:16px}
  .support-result{padding:16px}.certificate-lead,.reward-ticket p{font-size:14px}
  .certificate-note,.certificate-details,.certificate-kicker{font-size:12px}
  .certificate-actions .button{font-size:15px}.staff-receipt{padding:12px}
  dialog{padding:22px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
}
@media(prefers-reduced-motion:reduce){.button,.story-card{transition:none}}