/* ========= Base reset + tokens ========= */
:root {
  /* Brand palette — sampled from the Brix wordmark logo (orange/pink/purple/cyan/yellow/green) */
  --brand-orange:  #F86E2A;
  --brand-magenta: #E63B7E;
  --brand-purple:  #7E3DB0;
  --brand-blue:    #1EB5E5;
  --brand-cyan:    #3FBFCF;
  --brand-yellow:  #F5C12E;
  --brand-green:   #3FBE5C;
  --brand-red:     #E63950;

  --fg: #1a1a2e;
  --bg: #fefefe;
  --accent: var(--brand-purple);
  --muted: #6b7280;
  --correct: var(--brand-green);
  --wrong: var(--brand-red);
  --focus: var(--brand-yellow);
  --card-bg: rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.15);
  --text-on-dark: #f7f4fb;
  --text-accent: var(--brand-cyan);

  /* System font stack — offline friendly, rounded + warm on Apple devices */
  --font: -apple-system, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;

  /* Geometry */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-round: 999px;

  /* Tile accent stripes per kit */
  --tile-stripe: var(--accent);

  /* pack-reveal tokens */
  --stat-wisdom:    #7c3aed;
  --stat-speed:     #0891b2;
  --stat-strength:  #dc2626;
  --stat-agility:   #16a34a;
  --stat-stamina:   #ea580c;
  --stat-dexterity: #ca8a04;
  --stat-charisma:  #db2777;
  --rarity-pebble:     #94a3b8;
  --rarity-stone:      #64748b;
  --rarity-boulder:    #b45309;
  --rarity-mountain:   #1e40af;
  --rarity-brix-hero:  #a855f7;
}

/* Remove the Google Fonts import — system stack is used */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; overflow-x: hidden; }
body {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  transition: background 0.5s ease;
}

/* ========= Theme kits ========= */
/*
  Each kit defines:
    --kit-primary   — headline accent, tile label bg
    --kit-accent    — bright highlight, progress fills
    --kit-tile-bg   — default tile background
    --kit-tile-border — tile border / stripe
*/

/* All kits share the same deep purple-to-magenta backdrop sampled from the
   Brix logo's "i" + "x" gradient. Each kit then leans into one of the brand
   accent colours so subjects stay distinct without straying off-palette. */

body.kit-growth {
  /* Geography / Science — green + cyan from the logo cube + dot palette */
  background: linear-gradient(160deg, #1a0d3b 0%, #2a1855 40%, #142e3b 100%);
  color: var(--text-on-dark);
  --accent: var(--brand-green);
  --text-accent: var(--brand-cyan);
  --kit-primary: var(--brand-green);
  --kit-accent: var(--brand-cyan);
  --kit-tile-bg: rgba(63, 190, 92, 0.18);
  --kit-tile-border: var(--brand-green);
  --tile-stripe: var(--brand-cyan);
}
body.kit-fill {
  /* Maths — blue + purple from the logo "x" gradient */
  background: linear-gradient(160deg, #0c0a3a 0%, #1d1670 45%, #1a3d6e 100%);
  color: var(--text-on-dark);
  --accent: var(--brand-blue);
  --text-accent: var(--brand-cyan);
  --kit-primary: var(--brand-blue);
  --kit-accent: var(--brand-purple);
  --kit-tile-bg: rgba(30, 181, 229, 0.18);
  --kit-tile-border: var(--brand-blue);
  --tile-stripe: var(--brand-purple);
}
body.kit-collect {
  /* History / collection — magenta + yellow accent (trophy + flag vibe) */
  background: linear-gradient(160deg, #2e0a3a 0%, #5b1265 45%, #7a1a4a 100%);
  color: var(--text-on-dark);
  --accent: var(--brand-magenta);
  --text-accent: var(--brand-yellow);
  --kit-primary: var(--brand-magenta);
  --kit-accent: var(--brand-yellow);
  --kit-tile-bg: rgba(230, 59, 126, 0.18);
  --kit-tile-border: var(--brand-magenta);
  --tile-stripe: var(--brand-yellow);
}
body.kit-level {
  /* English / level-up — orange + magenta from the "b" + "r" gradient */
  background: linear-gradient(160deg, #2a0b3d 0%, #51155f 40%, #7a2543 100%);
  color: var(--text-on-dark);
  --accent: var(--brand-orange);
  --text-accent: var(--brand-yellow);
  --kit-primary: var(--brand-orange);
  --kit-accent: var(--brand-magenta);
  --kit-tile-bg: rgba(248, 110, 42, 0.18);
  --kit-tile-border: var(--brand-orange);
  --tile-stripe: var(--brand-magenta);
}

/* ========= A11y fundamentals ========= */
.skip-link {
  position: absolute; top: -60px; left: 0;
  background: var(--accent); color: #000;
  padding: 10px 16px; text-decoration: none; z-index: 200;
  font-weight: 800; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; }

*:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* SPA route changes call main.focus() so screen readers announce the new
   page — keep that behaviour but suppress the visual outline. The container
   isn't an interactive control, so a yellow focus ring around the whole
   middle of the page just looks broken. Interactive children still show
   :focus-visible normally. */
#main:focus,
#main:focus-visible {
  outline: none;
}

/* ========= Floating background particles ========= */
.particles {
  position: fixed; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.particle {
  position: absolute;
  font-size: 1.3rem;
  opacity: 0.12;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.12; }
  92%  { opacity: 0.12; }
  100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
}

/* Celebration leaf layer */
.celebration { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 50; }
.leaf-particle { position: absolute; font-size: 1.6rem; animation: leafFall ease-in forwards; }
@keyframes leafFall {
  0%   { transform: translateY(-50px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ========= Animations ========= */
@keyframes popIn {
  0%   { transform: scale(0.5) rotate(-4deg); opacity: 0; }
  65%  { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.pop-in { animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes fadeUp {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.fade-up { animation: fadeUp 0.35s ease both; }

/* Staggered tile entrance — set --i CSS var per tile for cascade */
@keyframes tileIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.tile-in {
  animation: tileIn 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.pulse { animation: pulse 0.45s ease; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.shake { animation: shake 0.45s ease; }

@keyframes badgeSpin {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.badge-spin { animation: badgeSpin 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes scoreCount {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ========= Header / App shell ========= */
.app-header {
  position: relative;
  z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 1rem;
  background: rgba(0,0,0,0.32);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Brand wordmark — transparent multicolour mark. Sits directly on the
   header gradient (no backplate); the saturated brand colours read fine
   against the dark backdrop at 56-72px. */
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.brand:hover, .brand:focus-visible {
  transform: scale(1.04);
}
.brand-logo {
  display: block;
  width: 56px; height: 56px;
  image-rendering: -webkit-optimize-contrast;
  flex-shrink: 0;
}
@media (min-width: 720px) {
  .brand-logo { width: 72px; height: 72px; }
}
/* ========= Minigame lobby tiles ========= */
/* All tiles in the games lobby need to be the same size regardless of the
   length of the title or description. The grid uses grid-auto-rows: 1fr so
   every row stretches to the tallest cell, and the inner flex layout gives
   each tile a consistent emoji-title-desc-meta vertical rhythm. The desc
   line-clamps to 2 lines so a long description can't push neighbours
   taller. */
.game-tile-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.75rem;
}
.game-tile-li {
  display: flex;
  /* let <a> stretch to fill the grid cell */
}
.game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 1.25rem 0.9rem 1.1rem;
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-lg);
  background: var(--kit-tile-bg, rgba(255,255,255,0.1));
  border: 2px solid var(--kit-tile-border, rgba(255,255,255,0.25));
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 800;
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1),
              box-shadow 0.18s;
}
.game-tile:hover, .game-tile:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.game-tile-emoji {
  font-size: 2.6rem;
  display: block;
  line-height: 1;
  height: 2.6rem;
  margin-bottom: 0.6rem;
}
.game-tile-title {
  font-size: 1rem;
  font-weight: 800;
  display: block;
  line-height: 1.2;
  /* clamp title to 2 lines so a long title doesn't squeeze the desc out */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.game-tile-desc {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.78;
  margin-top: 0.4rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.game-tile-meta {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.62;
  margin-top: auto;
  padding-top: 0.6rem;
}

/* Legacy fallback if any cached copy of HTML still uses the lettermark */
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--brand-orange);
  color: #fff; border-radius: 10px;
  font-size: 1.2rem; font-weight: 900; margin-right: 4px;
  flex-shrink: 0;
}
.brand-word { color: var(--text-on-dark); font-weight: 900; }

/* XP bar + label */
.xp-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.xp-label {
  font-size: 0.72rem; font-weight: 800;
  color: var(--text-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.xp-bar {
  display: block; width: 120px; height: 8px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius-round); overflow: hidden;
}
.xp-bar #xpFill {
  display: block; height: 100%;
  /* XP bar = full Brix brand spectrum — orange → magenta → purple → blue → cyan */
  background: linear-gradient(90deg,
    var(--brand-orange) 0%,
    var(--brand-magenta) 30%,
    var(--brand-purple) 55%,
    var(--brand-blue) 80%,
    var(--brand-cyan) 100%);
  width: 0%;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-round);
}

.pupil-name-chip {
  font-size: 0.88rem; font-weight: 800;
  color: var(--text-on-dark);
  white-space: nowrap;
}

.pupil-info {
  display: flex; gap: 0.85rem; align-items: center;
}

/* Hamburger menu */
.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text-on-dark);
  transition: background 0.15s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: rgba(255,255,255,0.22); }
.menu-panel {
  position: absolute;
  right: 0; top: calc(100% + 0.5rem);
  min-width: 200px;
  background: rgba(14, 14, 28, 0.96);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  padding: 0.4rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 100;
}
.menu-panel a {
  display: block;
  padding: 0.8rem 1rem;
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
.menu-panel a:hover { background: rgba(255,255,255,0.1); }

/* ========= Main + layout ========= */
main {
  position: relative;
  z-index: 5;
  padding: 1.75rem 1rem 3rem;
  max-width: 660px;
  margin: 0 auto;
}
h1 {
  font-size: 2.4rem; font-weight: 900; margin: 0 0 0.4rem;
  color: var(--text-on-dark);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h2 {
  font-size: 1.4rem; font-weight: 800; margin: 0 0 1rem;
  color: var(--text-on-dark);
  letter-spacing: -0.01em;
}

/* ========= Home hero ========= */
.home-hero {
  text-align: center;
  margin-bottom: 1.75rem;
}
.home-hero .emoji-strip {
  font-size: 3.2rem;
  margin-bottom: 0.5rem;
  display: block;
}
.stats-row {
  display: flex; gap: 0.6rem; justify-content: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.stat-chip {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-round);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-on-dark);
}

/* ========= Shared list containers ========= */
#ksList, #subjList, #topicList, #quizList {
  list-style: none; padding: 0; margin: 1.25rem 0;
  display: grid; gap: 0.75rem;
}
#ksList li, #subjList li, #topicList li, #quizList li { margin: 0; }

/* ========= Year picker tiles ========= */
/*
  7 years: Reception (warm yellow), Y1 (coral), Y2 (teal), Y3 (sky),
  Y4 (indigo), Y5 (violet), Y6 (slate-navy).
  Each has a solid opaque base + strong left-edge stripe.
*/
#ksList {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}
#ksList a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.4rem 1rem 1.2rem;
  border-radius: var(--radius-lg);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  /* base fallback — overridden per year below */
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.25);
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s;
  min-height: 44px;
}
#ksList a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--year-stripe, rgba(255,255,255,0.5));
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
#ksList a:hover, #ksList a:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
#ksList a:active { transform: scale(0.97); }

#ksList a .ks-emoji {
  display: block;
  font-size: 2.6rem;
  margin-bottom: 0.35rem;
  line-height: 1;
}
#ksList a .ks-year-num {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
  margin-bottom: 0.15rem;
}
#ksList a .ks-ages {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.8;
}

/* Per-year distinct colours */
/* Year tile palette — 7 brand colours sampled directly from the Brix logo
   (orange/red/yellow/green/cyan/blue/purple). Same hue as the cube stack so
   year progression visually echoes climbing the brick tower. */
#ksList li:nth-child(1) a { background: #5c2a0c; border-color: var(--brand-orange);  --year-stripe: var(--brand-orange);  } /* Reception */
#ksList li:nth-child(2) a { background: #5a1828; border-color: var(--brand-red);     --year-stripe: var(--brand-red);     } /* Y1 */
#ksList li:nth-child(3) a { background: #5a4108; border-color: var(--brand-yellow);  --year-stripe: var(--brand-yellow);  } /* Y2 */
#ksList li:nth-child(4) a { background: #114722; border-color: var(--brand-green);   --year-stripe: var(--brand-green);   } /* Y3 */
#ksList li:nth-child(5) a { background: #0f4750; border-color: var(--brand-cyan);    --year-stripe: var(--brand-cyan);    } /* Y4 */
#ksList li:nth-child(6) a { background: #0a3858; border-color: var(--brand-blue);    --year-stripe: var(--brand-blue);    } /* Y5 */
#ksList li:nth-child(7) a { background: #2a1450; border-color: var(--brand-purple);  --year-stripe: var(--brand-purple);  } /* Y6 */

#ksList li.tile-empty a {
  opacity: 0.5;
  background: rgba(255,255,255,0.05) !important;
  border-style: dashed !important;
  border-color: rgba(255,255,255,0.2) !important;
}
#ksList li.tile-empty a:hover { opacity: 0.75; }

/* ========= Subject tiles ========= */
#subjList {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.7rem;
}
#subjList a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--kit-tile-bg, rgba(255,255,255,0.1));
  border: 2px solid var(--kit-tile-border, rgba(255,255,255,0.25));
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s;
  min-height: 120px;
}
#subjList a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--kit-tile-border, var(--accent));
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
#subjList a:hover, #subjList a:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}
#subjList a:active { transform: scale(0.97); }
#subjList a .subj-emoji {
  display: block;
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}
#subjList a .subj-count {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.78;
  margin-top: 0.3rem;
}

/* ========= Topic + quiz tiles (square grid) ========= */
#topicList, #quizList {
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 0.65rem;
}
#topicList a.tile-square, #quizList a.tile-square {
  aspect-ratio: 1 / 1;
  padding: 0.9rem 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  gap: 0.3rem;
  /* solid base */
  background: var(--kit-tile-bg, rgba(255,255,255,0.1));
  border: 2px solid var(--kit-tile-border, rgba(255,255,255,0.2));
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s;
  min-height: 44px;
}
#topicList a.tile-square:hover, #quizList a.tile-square:hover,
#topicList a.tile-square:focus-visible, #quizList a.tile-square:focus-visible {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
}
#topicList a.tile-square:active, #quizList a.tile-square:active { transform: scale(0.96); }

.tile-label {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  color: var(--text-on-dark);
}
.tile-sub {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.7;
  color: var(--text-on-dark);
}

/* Completion badge (top-right corner of square tiles) */
.tile-badge {
  position: absolute;
  top: 0.4rem; right: 0.4rem;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-round);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
}
.tile-badge-done {
  background: #16a34a;
  color: #fff;
}
.tile-badge-prog {
  background: rgba(251,191,36,0.92);
  color: #422006;
}

/* Mastered tile treatment */
#topicList li.tile-done a, #quizList li.tile-done a {
  opacity: 0.62;
  background: rgba(22,163,74,0.15) !important;
  border-color: rgba(22,163,74,0.4) !important;
}
#topicList li.tile-done a:hover, #quizList li.tile-done a:hover { opacity: 1; }

/* ========= Progress summary row (x/12 mastered) ========= */
.mastery-bar {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.5rem 0 1.25rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-on-dark);
}
.mastery-bar-track {
  flex: 1; height: 8px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius-round); overflow: hidden;
}
.mastery-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #fbbf24);
  border-radius: var(--radius-round);
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========= Breadcrumb back link ========= */
.breadcrumb {
  display: inline-flex;
  align-items: center; gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0.55rem 1.1rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-round);
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.15s, border-color 0.15s;
  min-height: 44px;
}
.breadcrumb:hover { background: rgba(255,255,255,0.18); border-color: var(--accent); }

/* Pill badge */
.pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-round);
  font-size: 0.75rem;
  font-weight: 800;
  margin-left: 0.5rem;
}
.pill-amber { background: rgba(251,191,36,0.25); color: #fde68a; }
.pill-green { background: rgba(34,197,94,0.28); color: #bbf7d0; }

/* ========= Buttons ========= */
button {
  font: inherit; font-weight: 800;
  font-size: 1rem;
  min-height: 52px; min-width: 52px;
  padding: 0.9rem 1.6rem;
  background: var(--accent);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.15s, background 0.15s;
}
button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.22); }
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: rgba(255,255,255,0.14);
  border: 2px solid rgba(255,255,255,0.28);
  color: var(--text-on-dark);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.22);
  box-shadow: none;
}
.btn-primary-lg {
  font-size: 1.15rem;
  padding: 1.05rem 2.2rem;
}

/* ========= Login / PIN picker ========= */
.login-form fieldset {
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.login-form legend { font-weight: 800; padding: 0 0.5rem; color: var(--text-on-dark); }
.login-form label { font-weight: 700; margin-bottom: 0.5rem; display: block; color: var(--text-on-dark); }
.login-form select {
  font: inherit; font-weight: 700;
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.15);
  color: inherit;
  border: 2px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-sm);
  width: 100%;
  margin-bottom: 1rem;
}

/* Identity inputs (student login: first name + last initial + school) */
.login-id-row {
  display: grid;
  grid-template-columns: 1fr 7rem;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 420px) {
  .login-id-row { grid-template-columns: 1fr 5.5rem; }
}
.login-id-field {
  display: block;
  margin-bottom: 1rem;
  color: var(--text-on-dark);
}
.login-id-field > span {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.login-id-field input[type="text"],
.login-id-field input[type="email"],
.login-id-field input[type="password"] {
  font: inherit;
  font-weight: 700;
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.15);
  color: inherit;
  border: 2px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-sm);
  width: 100%;
  box-sizing: border-box;
}
.login-id-field input:focus {
  outline: none;
  border-color: var(--accent, #fcd34d);
  background: rgba(255,255,255,0.22);
}
.login-id-initial input {
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.login-id-hint {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 0.4rem;
}

/* Year-group picker — 7 buttons (Reception + Y1-Y6) laid out as a tidy grid
   instead of the wrapping flex used by the PIN buttons, so kids see the year
   ordering at a glance. */
.year-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 0.5rem 0;
}
@media (min-width: 480px) {
  .year-picker { grid-template-columns: repeat(4, 1fr); }
}
.year-picker button {
  padding: 0.95rem 0.6rem;
  font-weight: 800;
  font-size: 1rem;
}

/* Avatar tiebreaker — shown when two pupils in the same school + year share
   first name + last initial. Server only sends the avatars of pupils whose
   PIN actually verified, so this can never enumerate non-matching kids. */
.login-avatar-picker {
  margin: 1.2rem 0 0;
  padding: 1.1rem 1rem;
  background: rgba(255,255,255,0.07);
  border: 2px solid var(--brand-yellow);
  border-radius: var(--radius-lg);
}
.login-avatar-prompt {
  text-align: center;
  font-weight: 800;
  margin: 0 0 0.85rem;
  font-size: 1.1rem;
}
.login-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.75rem;
  justify-items: center;
}
.login-avatar-btn {
  width: 92px; height: 92px;
  border-radius: var(--radius-round);
  border: 3px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  color: var(--text-on-dark);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s;
}
.login-avatar-btn:hover, .login-avatar-btn:focus-visible {
  transform: scale(1.05);
  border-color: var(--brand-yellow);
}
.login-avatar-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.login-avatar-emoji { font-size: 3rem; line-height: 1; }

.pin-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.pin-picker button {
  padding: 0.85rem 1.1rem;
  position: relative;
  border: 3px solid transparent;
  background: rgba(255,255,255,0.12);
  box-shadow: none;
  color: var(--text-on-dark);
  transition: transform 0.12s, border-color 0.15s;
}
.pin-picker button.selected {
  border-color: var(--accent);
  transform: scale(1.1);
}
.pin-picker button.selected::after {
  content: "✓";
  position: absolute;
  top: -9px; right: -9px;
  background: var(--correct);
  color: white;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px;
  border: 2px solid rgba(255,255,255,0.9);
}

/* ========= Quiz ========= */
.quiz-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.85rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-on-dark);
}
.quiz-header span { opacity: 0.85; }
.quiz-header .quiz-score { opacity: 1; color: var(--text-accent); font-size: 1rem; }
.growth-indicator { font-size: 1.7rem; transition: transform 0.3s; line-height: 1; }

/* Progress dots row */
.progress-dots {
  display: flex; gap: 5px; justify-content: center;
  margin-bottom: 1.25rem;
}
.progress-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.3s, transform 0.3s;
}
.progress-dot.answered { background: var(--accent); transform: scale(1.15); }
.progress-dot.correct  { background: #4ade80; }
.progress-dot.wrong    { background: #f87171; }

/* Fallback progress bar (shown when > 12 questions) */
.progress-track {
  width: 100%; height: 8px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-round);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #fbbf24);
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-round);
}

/* Question card */
.question-card {
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.5rem 1.5rem;
  margin-bottom: 0.85rem;
}
.q-emoji {
  font-size: 2.8rem; text-align: center;
  margin-bottom: 0.5rem;
  display: block;
  line-height: 1;
}
.q-text {
  font-size: 1.4rem; font-weight: 800;
  text-align: center; margin: 0 0 1.5rem;
  line-height: 1.35;
  color: var(--text-on-dark);
}

/* Option buttons — large, clearly labelled */
.options { display: flex; flex-direction: column; gap: 0.6rem; }
.option-btn {
  display: flex; align-items: center; gap: 0.9rem;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.1);
  color: var(--text-on-dark);
  border: 2px solid rgba(255,255,255,0.2);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  min-height: 56px;
  box-shadow: none;
  transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.15s, border-color 0.15s;
}
.option-btn .opt-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  font-size: 0.85rem;
  font-weight: 900;
  flex-shrink: 0;
  letter-spacing: 0;
  color: var(--text-on-dark);
}
.option-btn:hover:not(:disabled) {
  transform: translateX(4px);
  background: rgba(255,255,255,0.18);
  border-color: var(--accent);
  box-shadow: none;
}
.option-btn:active:not(:disabled) { transform: scale(0.98); }
.option-btn.correct {
  background: rgba(22,163,74,0.3);
  border-color: #4ade80;
  color: #fff;
}
.option-btn.correct .opt-letter { background: #16a34a; }
.option-btn.wrong {
  background: rgba(220,38,38,0.3);
  border-color: #f87171;
  color: #fff;
}
.option-btn.wrong .opt-letter { background: #dc2626; }

/* Feedback strip */
.feedback {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  margin: 0.85rem 0 0;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: left;
  line-height: 1.4;
  color: var(--text-on-dark);
}
.feedback.correct { background: rgba(22,163,74,0.22); border: 1px solid rgba(74,222,128,0.4); }
.feedback.wrong   { background: rgba(220,38,38,0.22); border: 1px solid rgba(248,113,113,0.4); }

#nextBtn {
  display: block; width: 100%; margin-top: 0.75rem;
  background: var(--accent);
  color: #0a0a0a;
}

/* ========= Result screen ========= */
.result-screen {
  text-align: center;
  padding: 1.75rem 0.5rem 2rem;
  animation: fadeUp 0.4s ease both;
}

/* Score ring — clean circle, no glow */
.result-badge {
  width: 160px; height: 160px; margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 6px solid var(--accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  animation: badgeSpin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.result-badge .emoji { font-size: 2.8rem; line-height: 1; margin-bottom: 0.1rem; }
.result-badge .label {
  font-size: 0.8rem; font-weight: 800;
  color: var(--text-accent);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0 0.5rem;
  text-align: center;
  overflow: hidden;
}

.result-title {
  font-size: 2rem; font-weight: 900; margin: 0 0 0.3rem;
  color: var(--text-on-dark);
  letter-spacing: -0.02em;
}
.result-subtitle {
  font-size: 1.05rem; margin: 0 0 0.75rem;
  color: var(--text-on-dark);
  opacity: 0.85;
}
.result-score {
  font-size: 3.5rem; font-weight: 900;
  color: var(--accent);
  margin: 0.25rem 0 0.75rem;
  letter-spacing: -0.04em;
  animation: scoreCount 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 0.3s;
}
.result-xp {
  font-size: 1.05rem; font-weight: 700;
  color: var(--text-on-dark); opacity: 0.85;
  margin-bottom: 1.25rem;
}
.rank-up-banner {
  background: var(--accent);
  color: #0a0a0a;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 900;
  margin: 1rem 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.result-actions {
  display: flex; gap: 0.75rem; justify-content: center; align-items: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.result-actions .result-action-icon {
  width: 44px; height: 44px; min-height: 44px; min-width: 44px;
  padding: 0; flex: 0 0 44px;
  border-radius: 50%;
  background: var(--brand-orange, #ff7a1a);
  color: #fff;
  border: none;
  font-size: 1.4rem; line-height: 1; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.result-actions .result-action-icon:hover:not(:disabled) {
  transform: rotate(-90deg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  filter: brightness(1.06);
}
.result-actions .result-action-icon:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.result-actions .result-action-icon:active:not(:disabled) {
  transform: scale(0.94);
}

/* ========= Reduced motion ========= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .particle, .leaf-particle { display: none; }
  .tile-in { animation: none; opacity: 1; transform: none; }
}

/* ========= Small screens ========= */
@media (max-width: 540px) {
  h1 { font-size: 1.9rem; }
  .q-text { font-size: 1.18rem; }
  .result-badge { width: 130px; height: 130px; }
  .result-score { font-size: 2.8rem; }
  .pin-picker button { padding: 0.75rem 0.9rem; font-size: 0.95rem; }
  #ksList { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  #subjList { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  #topicList, #quizList { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  main { padding: 1.25rem 0.85rem 2.5rem; }
  .xp-bar { width: 90px; }
  .xp-label { font-size: 0.68rem; }
  .pupil-name-chip { display: none; }
}

/* ========= pack-reveal component ========= */
.pack-reveal {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.pack-reveal .pack-live {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pack-reveal .pack-stage {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pack-reveal .pack {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #334155, #475569);
  border-radius: 14px;
  z-index: 4;
  transition:
    width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    bottom 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.9s ease,
    border-color 0.4s ease,
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pack-reveal .pack:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pack-reveal .pack-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.pack-reveal .pack-state-entry {
  width: 160px;
  height: 220px;
  animation: pack-rise 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.pack-reveal .pack-state-entry.pack-tell {
  animation:
    pack-rise 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
    pack-tell 1.4s ease-in-out 2s infinite alternate;
}
.pack-reveal .pack-state-idle {
  width: 160px;
  height: 220px;
  background: #f8fafc;
  border: 3px solid var(--symbol-colour, #64748b);
  cursor: pointer;
  animation: none;
}
.pack-reveal .pack-state-zooming,
.pack-reveal .pack-state-ripping {
  width: min(140vw, 1400px);
  height: 300vh;
  top: auto;
  bottom: -200vh;
  transform: translateX(-50%);
  border-radius: 32px 32px 0 0;
  border: 4px solid var(--symbol-colour, #64748b);
  background: linear-gradient(180deg, #1e293b 0%, #334155 40%, #475569 100%);
  animation: none;
}
.pack-reveal .pack-state-ripping {
  cursor: crosshair;
  touch-action: none;
}
.pack-reveal .pack-state-flap-lifting::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  height: 36vh;
  background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
  border-radius: 32px 32px 0 0;
  transform: translateY(-40vh) rotate(-4deg);
  opacity: 0;
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
  animation: flap-lift 0.35s ease-in forwards;
}

.pack-reveal .pack-symbol {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--symbol-colour);
  opacity: 0;
  transition: opacity 1.2s ease-in;
  pointer-events: none;
}
.pack-reveal .pack-symbol.pack-symbol-visible { opacity: 1; }
.pack-reveal .pack-symbol svg { width: 96px; height: 96px; }

.pack-reveal .rip-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pack-reveal .rip-path { opacity: 0.92; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

.pack-reveal .rip-fallback {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}
.pack-reveal .rip-fallback-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
  background: #0284c7;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.pack-reveal .rip-fallback-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.pack-reveal .pack-skip {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  z-index: 5;
}
.pack-reveal .pack-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pack-reveal .rarity-banner {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  animation: banner-flash 0.4s ease-out;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.pack-reveal .card {
  width: 280px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  color: #1a1a2e;
}
.pack-reveal .card.glow { animation: card-glow 1.2s ease-out; }
.pack-reveal .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pack-reveal .card-header h3 { margin: 0; font-size: 1.1rem; }
.pack-reveal .card-art {
  aspect-ratio: 3/4;
  margin: 8px 0;
  border-radius: 8px;
  overflow: hidden;
}
.pack-reveal .card-placeholder { width: 100%; height: 100%; }
.pack-reveal .card-art img { width: 100%; height: 100%; object-fit: cover; }
.pack-reveal .card-stat-icon svg { width: 40px; height: 40px; }
.pack-reveal .card-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
  font-size: 0.85rem;
}
.pack-reveal .card-stats li {
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}
.pack-reveal .card-flavour {
  font-style: italic;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #475569;
}

.pack-reveal .pack-continue {
  margin-top: 24px;
  min-width: 140px;
  min-height: 44px;
  padding: 12px 28px;
  background: #0284c7;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
}
.pack-reveal .pack-continue:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@keyframes pack-rise {
  0%   { transform: translate(-50%, 70vh) rotateY(0deg) scale(0.55); opacity: 0; filter: brightness(0.25); }
  30%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotateY(720deg) scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes pack-tell {
  from { filter: hue-rotate(0deg) brightness(1); }
  to   { filter: hue-rotate(18deg) brightness(1.15); }
}
@keyframes flap-lift {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-80vh) rotate(-8deg); opacity: 0; }
}
@keyframes banner-flash {
  from { opacity: 0; transform: translateX(-50%) scale(0.8); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes card-glow {
  from { filter: brightness(1.5); }
  to   { filter: brightness(1); }
}

/* ========= binder component ========= */
.binder {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.binder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.binder-back {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.binder-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.binder-tabs { display: flex; gap: 4px; }
.binder-tabs button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 16px;
  border: none;
  background: #e2e8f0;
  cursor: pointer;
  border-radius: 6px;
  color: #1a1a2e;
  font: inherit;
}
.binder-tabs button[aria-selected="true"] { background: #0284c7; color: white; }
.binder-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.binder-page-indicator { font-size: 0.85rem; color: inherit; opacity: 0.85; }

.binder-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.binder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 640px;
}
.binder-slot {
  aspect-ratio: 3/4;
  padding: 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: white;
  color: #1a1a2e;
  min-height: 44px;
}
.binder-slot.empty {
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  color: #94a3b8;
  justify-content: center;
}
.binder-slot.filled { cursor: pointer; transition: transform 0.15s; }
.binder-slot.filled:hover,
.binder-slot.filled:focus-visible { transform: scale(1.03); }
.binder-slot.filled:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.binder-slot-name { font-weight: 700; text-align: center; font-size: 0.9rem; }
.binder-slot-icon svg { width: 48px; height: 48px; }
.binder-slot-rarity { font-size: 0.8rem; text-transform: capitalize; font-weight: 600; }
.binder-glow { animation: binder-pulse 2s ease-out; }
@keyframes binder-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(250, 204, 21, 0); }
  50%       { box-shadow: 0 0 24px rgba(250, 204, 21, 0.75); }
}

.binder-nav {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  gap: 12px;
}
.binder-nav button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 18px;
  background: #e2e8f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  color: #1a1a2e;
}
.binder-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.binder-nav button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .pack-reveal *,
  .binder * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pack-reveal .pack-symbol { opacity: 1 !important; }
}

/* ===== Pre-login landing (logged-out) ===== */
.home-hero .landing-sub { font-size: 1.1rem; opacity: 0.9; max-width: 36rem; margin: 0.5rem auto 1.75rem; line-height: 1.5; }
.landing-features { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.landing-features > li {
  background: var(--kit-tile-bg, rgba(255,255,255,0.08));
  border: 2px solid var(--kit-tile-border, rgba(255,255,255,0.22));
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.15rem;
  color: var(--text-on-dark);
  display: grid; gap: 0.35rem; text-align: left;
}
.landing-features .lf-emoji { font-size: 1.85rem; line-height: 1; }
.landing-features strong { font-size: 1.02rem; font-weight: 800; }
.landing-features .lf-sub { font-size: 0.88rem; opacity: 0.78; line-height: 1.4; }
.landing-schools-cta {
  margin: 2rem 0 1rem; padding: 1.4rem 1.25rem;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark); text-align: left;
}
.landing-schools-cta h2 { margin: 0 0 0.85rem; font-size: 1.25rem; text-align: center; }
.ls-points { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: 0.55rem; }
.ls-points li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.96rem; line-height: 1.4; }
.ls-tick { color: var(--brand-green, #4ade80); font-weight: 900; flex-shrink: 0; }
.ls-mail {
  display: block; text-align: center;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-md, 0.75rem);
  color: var(--text-on-dark); text-decoration: none;
  font-weight: 700; word-break: break-word;
}
.ls-mail:hover, .ls-mail:focus-visible { background: rgba(255,255,255,0.2); }
.landing-footer { text-align: center; opacity: 0.65; font-size: 0.82rem; margin: 1.25rem 0 0.5rem; }
@media (min-width: 640px) {
  .landing-features { grid-template-columns: repeat(3, 1fr); }
  .landing-schools-cta { padding: 1.75rem 2rem; }
}

/* ===== Public info pages (transparency, safety) ===== */
.odds-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 0.25rem;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}
.odds-table th, .odds-table td {
  padding: 0.55rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.odds-table th { font-weight: 800; background: rgba(255,255,255,0.08); }
.odds-table tr:last-child td { border-bottom: 0; }
.odds-table td:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ===== Pre-login landing: logo + hero video + role buttons ===== */
.landing-logo-wrap {
  display: block;
  margin: 0 auto 1rem;
  width: 180px;
  max-width: 60vw;
}
.landing-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
}
@media (min-width: 640px) {
  .landing-logo-wrap { width: 240px; }
}

.landing-hero-video {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0.5rem auto 1.25rem;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.05);
}
.landing-hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.landing-hero-fallback {
  width: 60%;
  height: 60%;
  margin: 20% auto;
  display: block;
  opacity: 0.7;
}

.landing-roles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem auto 0.25rem;
  max-width: 28rem;
}
.landing-role-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 56px;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 1.08rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s, background 0.18s;
  flex: 1;
}
.landing-role-btn .lr-emoji { font-size: 1.4rem; line-height: 1; }
.landing-role-btn:hover, .landing-role-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.landing-role-student {
  background: linear-gradient(135deg, var(--brand-magenta), var(--brand-orange));
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.landing-role-student:hover, .landing-role-student:focus-visible {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-magenta));
}
.landing-role-parent,
.landing-role-admin {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, 0.32);
}
.landing-role-parent:hover, .landing-role-parent:focus-visible,
.landing-role-admin:hover, .landing-role-admin:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}
@media (min-width: 640px) {
  .landing-roles { flex-direction: row; max-width: none; }
  .landing-role-btn { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-video video { display: none; }
  .landing-hero-video { aspect-ratio: auto; max-height: none; }
  .landing-hero-fallback { margin: 1rem auto; }
}

/* ===== Cinematic full-screen landing (logged-out '/' only) ===== */
/* The body gets `.landing-fullscreen` while the visitor is on the marketing
   landing. We hide the app header (no nav noise), lift the video to fill the
   viewport, and overlay the logo + role buttons on top. The features +
   schools CTA + footer live below the fold and reveal on scroll. */
body.landing-fullscreen .app-header { display: none; }
body.landing-fullscreen #main { padding: 0; max-width: none; }

.landing-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* mobile address-bar safe */
  min-height: 540px;
  overflow: hidden;
  background: #0d0a26;
}
.landing-stage-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.landing-stage-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.78) 100%),
    linear-gradient(180deg, rgba(46,10,58,0.4) 0%, rgba(13,10,38,0.05) 35%, rgba(13,10,38,0.7) 100%);
  pointer-events: none;
}
.landing-stage-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1.25rem;
  gap: 0.85rem;
}
.landing-stage-logo {
  display: block;
  width: clamp(180px, 36vw, 320px);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
}
.landing-stage-logo img { display: block; width: 100%; height: auto; }
.landing-stage-title {
  margin: 0.5rem 0 0;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,0.5);
  max-width: 24ch;
}
.landing-stage-sub {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  max-width: 36ch;
}
.landing-fullscreen .landing-roles {
  margin-top: 0.5rem;
}
.landing-stage-scroll {
  position: absolute;
  bottom: 1rem;
  left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  text-decoration: none;
  animation: scrollNudge 2.4s ease-in-out infinite;
}
.landing-stage-scroll:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; }
@keyframes scrollNudge {
  0%, 60%, 100% { transform: translate(-50%, 0); opacity: 0.85; }
  30% { transform: translate(-50%, 8px); opacity: 1; }
}

.landing-below {
  padding: 2rem 1rem;
  max-width: 960px;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .landing-stage-video { display: none; }
  .landing-stage { background: linear-gradient(160deg, #2e0a3a 0%, #5b1265 50%, #7a1a4a 100%); }
  .landing-stage-scroll { animation: none; }
}

/* "Learn first" panel on topic pages — collapsible. Lives above the quiz
   list. Renders when /api/learn/topic/:s/:y/:t returns a row, silently
   absent otherwise. */
.learn-panel {
  display: block;
  margin: 1rem 0 1.5rem;
  background: rgba(255,255,255,0.07);
  border: 2px solid var(--brand-yellow);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.learn-panel-summary {
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-weight: 800;
  font-size: 1.05rem;
  background: rgba(255,255,255,0.06);
  list-style: none;
}
.learn-panel-summary::-webkit-details-marker { display: none; }
.learn-panel-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.18s;
}
.learn-panel[open] .learn-panel-summary::before { transform: rotate(90deg); }
.learn-panel-body { padding: 0.5rem 1.1rem 1.2rem; }
.learn-panel-hook {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.5rem 0 1rem;
}
.learn-panel-fig {
  margin: 0.75rem auto 1rem;
  display: block;
  max-width: 100%;
}
.learn-panel-fig svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.learn-panel-prose { line-height: 1.55; font-size: 0.98rem; }
.learn-panel-prose section { margin: 0.85rem 0; }
.learn-panel-prose h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0.85rem 0 0.4rem;
  color: var(--brand-yellow);
}
.learn-panel-prose ol { padding-left: 1.4rem; margin: 0.4rem 0 0.6rem; }
.learn-panel-prose li { margin: 0.2rem 0; }

/* Brief highlight when scrolling to a section deep-link */
.learn-section-flash {
  animation: sectionFlash 2.4s ease;
}
@keyframes sectionFlash {
  0%, 100% { background: transparent; }
  10%, 70% { background: rgba(245, 193, 46, 0.22); }
}

/* XP toast — slides up from the bottom for a couple of seconds when
   the pupil's first-view of a learning resource awards XP. Fade-out
   handled by JS removing .xp-toast-show. */
.xp-toast {
  position: fixed;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-magenta) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-round);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  z-index: 1000;
  opacity: 0;
  transition: bottom 0.32s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.32s ease;
  pointer-events: none;
}
.xp-toast-show {
  bottom: 32px;
  opacity: 1;
}

/* "📖 Learn more →" deep link inside MCQ explanations.
   Renders only when the question's `learn_more` ref points at a topic
   that has a published learning resource — see engine.js. */
.learn-more-link {
  display: inline-block;
  margin-top: 0.4rem;
  margin-left: 0.5rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-round);
  color: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.learn-more-link:hover, .learn-more-link:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.22);
  border-color: var(--brand-yellow);
}

.final-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem; margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--brand-gold, #fbbf24), var(--brand-orange, #f97316));
  color: #1f1f1f; font-weight: 800; font-size: 0.92rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ========= Topic page — Final card + tier pills ========= */
.final-card {
  margin: 1rem 0; padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg, 14px);
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(249,115,22,0.10));
  border: 2px solid rgba(251,191,36,0.4);
  position: relative; overflow: hidden;
}
.final-card.locked { filter: grayscale(0.85) brightness(0.75); border-color: rgba(255,255,255,0.15); }
.final-badge { font-weight: 900; letter-spacing: 0.04em; color: #fbbf24; font-size: 0.85rem; }
.final-title { font-size: 1.4rem; font-weight: 900; margin: 0.25rem 0 0.4rem; color: var(--text-on-dark); }
.final-sub { margin: 0 0 0.85rem; opacity: 0.85; }
.final-cta {
  display: inline-block; padding: 0.65rem 1.1rem;
  background: var(--text-on-dark); color: #1f1f1f;
  border-radius: 999px; font-weight: 800; text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1);
}
.final-cta:hover, .final-cta:focus-visible { transform: translateY(-2px) scale(1.02); }
.final-lock { padding: 0.55rem 0.85rem; background: rgba(0,0,0,0.35); border-radius: 8px; font-size: 0.92rem; }

.tier-tabs { display: flex; gap: 0.5rem; margin: 0.75rem 0; }
.tier-pill {
  flex: 1; padding: 0.55rem 0.9rem; border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  color: var(--text-on-dark); font-weight: 700; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tier-pill[aria-selected="true"], .tier-pill.active {
  background: rgba(255,255,255,0.18); border-color: var(--accent, #4ade80);
}
.tier-count { display: inline-block; margin-left: 0.35rem; opacity: 0.7; font-weight: 600; }

/* End-screen single-mount: XP-counter + saving hint + pack-ceremony variants */
.xp-saving-hint { font-size: 0.75rem; opacity: 0.55; margin-left: 0.35rem; font-weight: 600; }
.xp-saving-hint.xp-saving-err { color: #f87171; opacity: 0.95; }
.pack-ceremony-already { background: rgba(255,255,255,0.08); color: var(--text-on-dark); }