/* Tokens (edit here to rebrand) + shared component styles; each activity adds only its own CSS. */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'); /* Font Awesome Free */

:root {
  /* ======================= TOKENS (rebrand here) ======================== */
  /* Color primitives */
  --color-blue-100: #E2EEFF; --color-blue-200: #9DC6FF; --color-blue-300: #4592FF; --color-blue-400: #00409B; --color-blue-500: #00204D;
  --color-yellow-100: #FFF5D9; --color-yellow-200: #FFECB9; --color-yellow-300: #FFD768; --color-yellow-400: #B08200; --color-yellow-500: #4C3800;
  --color-green-100: #D8F0E0; --color-green-200: #8FD5A6; --color-green-300: #41AA64; --color-green-400: #22723C; --color-green-500: #044F1D;
  --color-neutral-000: #FFFFFF; --color-neutral-50: #E5E7EB; --color-neutral-100: #A3ACB7; --color-neutral-200: #6C747F; --color-neutral-300: #485260; --color-neutral-400: #283445; --color-neutral-500: #011633;
  --color-red-100: #FEC4C1; --color-red-200: #E8706A; --color-red-300: #B3261E;
  /* Grade palettes (Main used now; accents reserved) */
  --grade-lower-main: #F2EDB1; --grade-lower-accent-1: #A4C5FF; --grade-lower-accent-2: #F96B94; --grade-lower-accent-3: #A0BA5D;
  --grade-upper-main: #BDDBFF; --grade-upper-accent-1: #4592FF; --grade-upper-accent-2: #8D8AFF; --grade-upper-accent-3: #FFB889;
  --grade-mh-main:    #F5F2ED; --grade-mh-accent-1: #00409B; --grade-mh-accent-2: #A675CB; --grade-mh-accent-3: #E1EEFF;
  /* Semantic status */
  --color-correct: var(--color-green-300); --color-incorrect: var(--color-red-300); --color-selected: var(--color-yellow-300);
  /* Typography (Lexend) */
  --font-family: "Lexend", system-ui, -apple-system, sans-serif;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --text-xs: 0.75rem; --text-s: 0.875rem; --text-m: 1rem; --text-l: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.25rem;
  /* Spacing (px; DS scale) */
  --spacing-0: 0px; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px;
  --spacing-8: 32px; --spacing-9: 36px; --spacing-10: 40px; --spacing-11: 44px; --spacing-12: 48px; --spacing-14: 56px; --spacing-16: 64px; --spacing-20: 72px;
  --spacing-24: 80px; --spacing-28: 112px; --spacing-32: 128px; --spacing-36: 144px; --spacing-40: 160px; --spacing-44: 176px; --spacing-48: 192px; --spacing-52: 208px;
  --spacing-56: 224px; --spacing-60: 240px; --spacing-64: 256px; --spacing-72: 288px; --spacing-80: 320px; --spacing-96: 384px;
  /* Radius */
  --radius-sm: 2px; --radius-default: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 9999px;
  /* Borders */
  --border-width: 1px; --border-color-default: var(--color-neutral-100); --border-color-hover: var(--color-neutral-200);
  /* Shadows (Figma) */
  --shadow-500: 0 10px 32px -4px #18274B1A, 0 6px 14px -6px #18274B1F;
  --shadow-chip: 0 12px 42px -4px #18274B1F, 0 8px 18px -6px #18274B1F;
  /* Icons */
  --icon-color: var(--color-neutral-500); --icon-color-inverse: #FFFFFF; --icon-size: 1.25rem;

  /* =================== SEMANTIC ALIASES (design refs these) ============= */
  --bg:           var(--color-blue-100);   /* page background (was #E8F1FB) */
  --bg-hover:     #CFE1F7;                  /* literal — no token between Blue 100/200 */
  --surface:      var(--color-neutral-000);/* white */
  --navy:         var(--color-blue-500);   /* was #1A3561 → closest Blue 500 */
  --navy-mid:     var(--color-blue-300);   /* was #2F5FCC → closest Blue 300 */
  --text:         var(--color-neutral-500);/* was #1A3561 → Neutral 500 */
  --muted:        var(--color-neutral-200);/* was #6B7A99 → Neutral 200 */
  --card-border:  rgba(26,53,97,0.09);      /* literal — navy tint */
  --slot-bg:      rgba(26,53,97,0.04);      /* literal — navy tint */
  --slot-border:  rgba(26,53,97,0.22);      /* literal — navy tint */
  --correct:      var(--color-correct);
  --incorrect:    var(--color-incorrect);
  --selected:     var(--color-selected);
  /* --topbar-bg / --topbar-title are set by the grade classes (lower/upper/mh),
     which every activity carries on <body>. There is no ungraded "base" state. */
  --btn-yellow:       var(--color-yellow-200);
  --btn-yellow-hover: var(--color-yellow-300);
  --btn-blue:         var(--color-blue-400);
  --btn-blue-hover:   var(--color-blue-500);
  --radius:       var(--radius-2xl);        /* was 14px → 16px (closest) */
  --gap:          var(--spacing-3);         /* 12px */
  --font:         var(--font-family);

  /* sizing (mobile-first; desktop bumps below) */
  --nub-size: 26px; --nub-center: 50%;
  --content-max-width: 860px;
  --content-pad:       var(--spacing-5);    /* 20px */
  --fs-title:           var(--text-xl);     /* 1.5rem */
  --fs-instructions:    var(--text-s);
  --fs-card:            var(--text-s);
  --fs-section-label:   var(--text-xs);
  --fs-btn:             var(--text-s);
  --card-min-h: 60px; --card-pad-y: 14px; --card-pad-x: var(--spacing-4);
  --rack-width: 300px; --btn-pad-y: 10px; --btn-pad-x: 22px;
}

/* Responsive type — mirrors typography.js (Tailwind sm=640px, lg=1024px) */
@media (max-width: 1023.98px) { :root { --text-l: 1rem; --text-2xl: 1.75rem; --text-3xl: 2rem; } }
@media (max-width: 639.98px)  { :root { --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.75rem; } }

/* Desktop size-up (all bumps in one place) */
@media (min-width: 721px) {
  :root {
    --content-max-width: 1120px;
    --fs-title: 1.785rem; /* 2.1rem * 0.85 — trimmed from Figma's original 2.1rem, header ran too tall */
    --fs-instructions: 1.1rem; --fs-card: 1.1rem;
    --fs-section-label: 0.82rem; --fs-btn: 1rem;
    --card-min-h: 82px; --card-pad-y: 18px; --card-pad-x: 24px;
    --rack-width: 380px; --btn-pad-y: 13px; --btn-pad-x: 28px; --gap: 16px;
  }
}

/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Also on html: an off-screen fixed element can still widen the document's scrollable width. */
html { overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(26,53,97,0.09) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  min-height: 100vh;
  /* No page-level horizontal scroll; off-edge fixed decorations (e.g. Flashcards' side art) widen scrollWidth. */
  overflow-x: hidden;
}
/* Fixed-pixel tile size (not cover) so the pattern keeps its size at every width. */
body.grade-mh {
  background-image: url("assets/shared/pattern tile_blue line.png");
  background-size: 80px 80px;
  background-repeat: repeat;
}
/* On mobile, Middle & High drops the tiled pattern for a flat page-color
   background (#E2EEFF). Applies to every interactive activity. */
@media (max-width: 720px) {
  body.grade-mh { background-image: none; background-color: var(--bg); }
}
main { padding: 0; }

/* Grade switch changes only these: top bar background, title color and illustration. */
body.grade-lower { --topbar-bg: var(--color-yellow-100); --topbar-title: var(--text); }              /* #FFF5D9 / #011633 */
body.grade-upper { --topbar-bg: var(--color-blue-200);   --topbar-title: var(--text); }              /* #9DC6FF / #011633 */
body.grade-mh    { --topbar-bg: var(--color-blue-400);   --topbar-title: var(--color-neutral-000); } /* #00409B / white  */

/* url() lives in a rule so it resolves relative to global.css for every activity; hidden under 480px. */
body.grade-lower .top-bar { background-image: url("assets/shared/topbar-LE.svg"); }
body.grade-upper .top-bar { background-image: url("assets/shared/topbar-UE.svg"); }
body.grade-mh    .top-bar { background-image: url("assets/shared/topbar-MH.svg"); }

/* State / loader */
.state { text-align: center; padding: 100px 20px; color: var(--muted); font-size: 0.95rem; }
.state.error { color: var(--incorrect); }
.loader { width: 44px; height: 44px; border: 3px solid rgba(26,53,97,0.15); border-top-color: var(--navy-mid); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Top bar */
.top-bar {
  background-color: var(--topbar-bg);
  background-repeat: no-repeat;                 /* grade illustration set per grade below */
  background-position: left top;
  background-size: auto 100%;                   /* fills bar height, bleeds to edges */
  padding: 14px var(--content-pad);             /* was 18px — header ran too tall at every width */
  border-radius: 0 0 30px 30px;                 /* rounded bottom corners (Figma) */
  overflow: hidden;                             /* clip illustration at corners */
}
.top-bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 46px; }   /* was 56px */
.top-bar-text { grid-column: 2; text-align: center; }
/* Right-hand action buttons (sound settings + Review Instructions). */
.top-bar-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.top-bar-action { }
.activity-title { font-size: var(--fs-title); font-weight: var(--weight-bold); color: var(--topbar-title); margin-bottom: 6px; line-height: 1.2; }

/* Instructions pill; Lower Elementary uses the default surface, so only Upper and MH override. */
.activity-instructions {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--spacing-6);
  padding: var(--spacing-5);
  background: var(--surface);
  color: var(--color-neutral-300);
  font-size: var(--text-l);
  font-weight: var(--weight-semibold);
  text-align: center;
  line-height: 1.3;
  border-radius: 20px;
}
body.grade-upper .activity-instructions { background: var(--color-yellow-100); }
/* Darker text on the MH instructions background (Blue/200) for contrast. */
body.grade-mh    .activity-instructions { background: var(--color-blue-200); color: var(--color-neutral-500); }
/* Read-aloud button at the end of the instruction sentence */
.instr-tts {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font-size: var(--text-s);
  line-height: 1;
  padding: 4px;
  margin-left: 8px;
  border-radius: 6px;
  opacity: 1;
  vertical-align: middle;
  transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.instr-tts:hover { opacity: 1; background: rgba(26,53,97,0.08); }
.instr-tts:focus-visible { opacity: 1; outline: 2px solid var(--navy-mid); outline-offset: 2px; }

/* Shared read-aloud icon button; each activity adds its own positioning. */
.tts {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-neutral-300);
  font-size: var(--text-s);
  opacity: 1;
  line-height: 1;
  padding: 5px;
  border-radius: 6px;
  transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.tts:hover { background: rgba(26,53,97,0.06); }
.tts:focus-visible { outline: 2px solid var(--navy-mid); outline-offset: 2px; }

/* Hiding from view until TTS service is implemented. Markup/handlers are kept (JS still looks these up); delete this rule to bring the buttons back. */
.tts, .instr-tts, .fc-tts, button[aria-label*="aloud"] { display: none !important; }

/* Filled circle number badge — shared across activities with numbered
   items (Q&A, Fill in the Blanks): Blue/200 circle, medium-weight number. */
.num-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-blue-200); color: var(--text); font-weight: var(--weight-medium); font-size: 0.9em;
}

/* Icon-only settings button beside Review Instructions; opens the sound toggle modal. */
.settings-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.settings-btn:active { transform: scale(0.94); }
.settings-btn:focus-visible { outline: 2px solid var(--navy-mid); outline-offset: 2px; }

/* Grade button treatments (Figma): LE/UE dark-blue button, MH light-blue button */
body.grade-lower .top-bar-action, body.grade-lower .settings-btn,
body.grade-upper .top-bar-action, body.grade-upper .settings-btn {
  background: var(--btn-blue); color: var(--color-neutral-000); border: none;
}
body.grade-lower .top-bar-action:hover, body.grade-lower .settings-btn:hover,
body.grade-upper .top-bar-action:hover, body.grade-upper .settings-btn:hover { background: var(--btn-blue-hover); }
body.grade-mh .top-bar-action, body.grade-mh .settings-btn {
  background: var(--color-blue-200); color: var(--navy); border: none;
}
body.grade-mh .top-bar-action:hover, body.grade-mh .settings-btn:hover { background: var(--color-blue-100); }

/* Settings modal toggle row (Sound on/off). */
.settings-body { text-align: left; margin: 20px 0; background: var(--color-yellow-100); border-radius: 16px; padding: 16px 18px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-row + .settings-row { margin-top: 12px; }
.settings-label { font-weight: var(--weight-semibold); color: var(--navy); font-size: 0.95rem; }
.switch { position: relative; flex-shrink: 0; width: 48px; height: 28px; border-radius: 999px; border: none; background: var(--color-neutral-100); cursor: pointer; transition: background .2s; padding: 0; }
.switch[aria-checked="true"] { background: var(--btn-blue); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--navy-mid); outline-offset: 2px; }

/* Toolbar row (Submit / Restart) */
.toolbar-row { display: flex; justify-content: center; gap: 10px; margin: 24px 0 28px; flex-wrap: wrap; }

/* Content shell + section labels */
.app-shell { max-width: var(--content-max-width); margin: 0 auto; padding: 24px var(--content-pad) 80px; }
.section-label { font-size: var(--fs-section-label); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 10px; }

/* Buttons */
.btn { border: none; border-radius: 999px; padding: var(--btn-pad-y) var(--btn-pad-x); font-weight: var(--weight-semibold); font-size: var(--fs-btn); cursor: pointer; font-family: inherit; transition: transform 0.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1); white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--btn-blue); color: white; }
.btn-primary:hover { background: var(--btn-blue-hover); }
.btn-primary:active { background: var(--btn-blue-hover); }
.btn-ghost { background: var(--btn-yellow); color: var(--navy); border: 1.5px solid var(--color-yellow-400); }
.btn-ghost:hover { background: var(--btn-yellow-hover); border-color: var(--color-yellow-400); }
/* pointer-events:none makes disabled buttons inert even where :hover/:active still fire. */
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Idle wiggle for the Roll/Spin buttons before first use. */
@keyframes wiggleBounce {
  0%, 55%, 100% { transform: scale(1) rotate(0deg); }
  16% { transform: scale(1.08) rotate(-2deg); }
  33% { transform: scale(0.98) rotate(2deg); }
  44% { transform: scale(1.02) rotate(-1deg); }
}
.play-bounce { animation: wiggleBounce 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }

/* Modal / overlay */
/* safe center + overflow-y:auto on the overlay keeps a too-tall modal scrollable from anywhere on screen. */
.overlay { position: fixed; inset: 0; background: rgba(26,53,97,0.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: safe center; justify-content: center; overflow-y: auto; padding: 20px; z-index: 20; }
.overlay[hidden] { display: none; }
.modal { position: relative; background: white; color: var(--navy); border-radius: 28px; max-width: 520px; width: 100%; padding: 40px 36px; text-align: center; box-shadow: 0 28px 72px rgba(26,53,97,0.22); animation: modal-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg); color: var(--navy); cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.modal-close:hover { background: var(--bg-hover); }
@keyframes modal-in { from { transform: scale(0.88) translateY(16px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
/* Close is quicker and calmer than open; closeModal() waits for animationend. */
@keyframes modal-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.96); opacity: 0; } }
.modal--closing { animation: modal-out 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; }
.modal h1 { font-size: var(--fs-title); font-weight: var(--weight-bold); margin-bottom: 10px; line-height: 1.2; }
.modal p { font-size: var(--text-s); color: var(--muted); line-height: 1.7; margin-bottom: 28px; font-weight: var(--weight-regular); }
.modal .cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-row--single-line { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.cta-row--single-line .btn { padding: 10px 16px; font-size: 0.8rem; flex-shrink: 0; }
/* Hero media in content modals: 16:9, 30px radius. */
.modal-media { display: block; width: 100%; aspect-ratio: 4096 / 2304; object-fit: cover; border-radius: 30px; }
.modal-image-placeholder { width: 100%; aspect-ratio: 4096 / 2304; background: var(--bg); border: 2px dashed var(--slot-border); border-radius: 30px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 34px; }
.completed-art {
  width: 360px; max-width: 100%; height: 200px; margin: 0 auto;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
body.grade-lower .completed-art { background-image: url("assets/shared/completed-LE.png"); }
body.grade-upper .completed-art { background-image: url("assets/shared/completed-UE.png"); }
body.grade-mh    .completed-art { background-image: url("assets/shared/completed-MH.png"); }

/* Big modal layout for opening/review/completed/exit-warning; :has() keeps small text modals on the base style. */
.modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder, .exit-warning-art)) { max-width: 560px; border-radius: 60px; padding: 40px; box-shadow: 0 28px 36px rgba(26,53,97,0.22); }
.modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder, .exit-warning-art)) h1 { font-size: 1.875rem; margin: 32px 0 0; }   /* 30px, navy (inherited) */
.modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder, .exit-warning-art)) p  { color: var(--color-neutral-400); font-size: var(--text-m); line-height: 1.7; margin: 14px 0 0; }
.modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder, .exit-warning-art)) .cta-row { gap: 8px; margin-top: 24px; }
.modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder, .exit-warning-art)) .cta-row .btn { padding: 14px 20px; font-size: var(--text-m); }
/* Opening / review show a single fixed-width primary CTA (180px, Figma) */
.modal:has(:is(.modal-media, .modal-image-placeholder)) .cta-row .btn { min-width: 180px; }
/* Shared error-state icon, grade-swapped like .completed-art. */
.warning-art {
  width: 200px; height: 200px; max-width: 100%; margin: 0 auto;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
body.grade-lower .warning-art { background-image: url("assets/shared/warning_LE.png"); }
/* UE art sits off-center in its canvas; nudge right to look centered. */
body.grade-upper .warning-art { background-image: url("assets/shared/warning_UE.png"); background-position: 60% center; }
body.grade-mh    .warning-art { background-image: url("assets/shared/warning_MH.png"); }

/* "Are you sure?" art for progress-loss confirmations; shares the big-modal spacing. */
.exit-warning-art {
  width: 200px; height: 200px; max-width: 100%; margin: 0 auto;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
body.grade-lower .exit-warning-art { background-image: url("assets/shared/exit-warning_LE.svg"); }
body.grade-upper .exit-warning-art { background-image: url("assets/shared/exit-warning_UE.svg"); }
body.grade-mh    .exit-warning-art { background-image: url("assets/shared/exit-warning_MH.svg"); }

/* Shared error/fallback card for a bad id or failed fetch. */
.error-card {
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 460px; margin: 0 auto;
  background: var(--surface); border-radius: 60px; box-shadow: var(--shadow-500);
  padding: 28px 32px 48px; color: var(--color-neutral-400); text-align: center;
}
.error-card p { margin: 0; font-size: var(--fs-card); line-height: 1.5; }
.error-card-code { font-size: 0.85em; opacity: 0.8; }
/* Plain tiled background for errors; the html prefix beats activities' own body.grade-X rules. */
html body:has(.error-card) { background: var(--color-yellow-100) url("assets/shared/pattern tile_yellow grid.png") repeat; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--incorrect); color: white; padding: 10px 20px; border-radius: 999px; font-weight: var(--weight-semibold); font-size: var(--text-s); z-index: 30; box-shadow: 0 4px 16px rgba(224,64,42,0.3); }
.toast[hidden] { display: none; }

/* Shared animations */
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.shake { animation: shake 0.35s; }

/* Shared responsive (chrome only) */
@media (min-width: 721px) {
  .app-shell { padding-top: 32px; padding-bottom: 40px; }
}
@media (max-width: 720px) {
  .modal { padding: 32px 24px; }
  /* Drop the illustration at the MD breakpoint (selectors repeated to match the
     per-grade specificity so they win). The bar stays horizontal until 480px. */
  body.grade-lower .top-bar,
  body.grade-upper .top-bar,
  body.grade-mh .top-bar { background-image: none; }
}
/* Mobile top bar (Figma): at 480px switch to the stacked, centered layout —
   title above the button (illustration already removed at the MD breakpoint). */
@media (max-width: 480px) {
  .top-bar { padding: 14px 20px; }   /* was 18px, matching the trim above */
  .top-bar-inner { grid-template-columns: 1fr; gap: 12px; }
  .top-bar-text   { grid-column: 1; }
  .top-bar-actions { grid-column: 1; justify-self: center; }
  .activity-title { font-size: 1.5rem; }   /* 24px per Figma mobile */
}
/* 481-830px: drop the illustration and left-align the title; <=480px keeps its stacked layout. */
@media (min-width: 481px) and (max-width: 830px) {
  body.grade-lower .top-bar,
  body.grade-upper .top-bar,
  body.grade-mh    .top-bar { background-image: none; }
  /* Two-item flex row (title left, button right); text-align alone would leave the title centered-ish. */
  .top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
  .top-bar-text { text-align: left; }
}
/* Let "Review Instructions" wrap once the header is tight; scoped so other .btn stay nowrap. */
@media (max-width: 600px) {
  .top-bar-action { white-space: normal; }
}

/* Shared buttons (first built for the Social Skills Quiz Show). Hover styles only apply on devices that can hover. */
/* Text link button, for small secondary actions such as "Reset avatars". */
.link-btn { display: inline-flex; align-items: center; gap: var(--spacing-2); border: none; background: none; font-family: inherit; font-size: var(--text-s); font-weight: var(--weight-semibold); color: var(--btn-blue); padding: var(--spacing-2); border-radius: var(--radius-lg); cursor: pointer; }
@media (hover: hover) { .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; } }
.link-btn[hidden] { display: none; }
.link-btn:focus-visible { outline: 2px solid var(--focus-ring, var(--color-blue-500)); outline-offset: 2px; }
/* Small tool chip next to a question, such as Skip or Hint; pair with .btn .btn-ghost. */
.q-tool { min-width: 0; min-height: 44px; padding: var(--spacing-2) var(--spacing-4); font-size: var(--text-s); }
.q-tool i { margin-right: var(--spacing-2); }
/* Moderator marking buttons (Correct / Incorrect); the icon slides in on hover or focus. Pair with .btn. */
.mark-btn { display: inline-flex; align-items: center; justify-content: center; }
.mark-btn i { display: inline-block; width: 0; opacity: 0; margin-right: 0; overflow: hidden; transition: width .18s cubic-bezier(0.22, 1, 0.36, 1), opacity .18s ease, margin .18s cubic-bezier(0.22, 1, 0.36, 1); }
.mark-btn:focus-visible i { width: 1em; opacity: 1; margin-right: var(--spacing-2); }
@media (hover: hover) { .mark-btn:hover i { width: 1em; opacity: 1; margin-right: var(--spacing-2); } }
.mark-correct { background: var(--color-green-100); color: var(--color-green-500); border: 2px solid var(--color-green-400); }
@media (hover: hover) { .mark-correct:hover { background: var(--color-green-200); color: var(--color-neutral-500); } }
.mark-incorrect { background: var(--color-red-100); color: var(--color-red-300); border: 2px solid var(--color-red-300); }
@media (hover: hover) { .mark-incorrect:hover { background: var(--color-red-200); color: var(--color-neutral-500); } }
/* Reveal box: a cover that slides up to show a hidden answer, and a tab to hide it again. */
.reveal-box { position: relative; overflow: hidden; border-radius: var(--radius-2xl); margin-top: var(--spacing-6); }
.reveal-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-2); border: none; border-radius: inherit; background: var(--color-blue-100); color: var(--navy); font-family: inherit; font-size: var(--text-l); font-weight: var(--weight-bold); cursor: pointer; transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), background-color .15s ease; }
@media (hover: hover) { .reveal-cover:hover { background: var(--color-blue-200); } }
.reveal-cover i { transition: transform .2s ease; }
@media (hover: hover) { .reveal-cover:hover i { transform: translateY(-3px); } }
.reveal-box.is-open .reveal-cover { transform: translateY(-100%); }
.reveal-tab { position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; gap: var(--spacing-1); border: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--btn-blue); color: var(--color-neutral-000); font-family: inherit; font-size: var(--text-s); font-weight: var(--weight-semibold); min-height: 44px; padding: var(--spacing-2) var(--spacing-5); cursor: pointer; transform: translate(-50%, -100%); transition: transform .24s .16s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-box.is-open .reveal-tab { transform: translate(-50%, 0); }
.reveal-tab[hidden] { display: none; }
@media (hover: hover) { .reveal-tab:hover { background: var(--btn-blue-hover); } }
.reveal-cover:focus-visible, .reveal-tab:focus-visible { outline: 3px solid var(--focus-ring, var(--color-blue-500)); outline-offset: -3px; }
/* Arrow button for scrolling a row of content (rounded rectangle, Blue 200). */
.board-arrow { display: flex; align-items: center; justify-content: center; width: 56px; height: 44px; border: none; border-radius: var(--radius-xl); background: var(--color-blue-200); color: var(--navy); font-size: var(--text-l); cursor: pointer; transition: opacity .2s ease, background-color .15s ease; }
@media (hover: hover) { .board-arrow:hover { background: var(--color-blue-100); } }
.board-arrow:disabled { opacity: .35; cursor: default; }
.board-arrow:focus-visible { outline: 3px solid var(--focus-ring, var(--color-blue-500)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .reveal-cover, .reveal-tab, .mark-btn i { transition: none; } }

/* Reduced motion (decorative motion only). .modal keeps a near-zero duration, not none,
   so animationend still fires for closeModal(). */
@media (prefers-reduced-motion: reduce) {
  .modal, .modal--closing { animation-duration: 0.01s; }
  .play-bounce { animation: none; }
}