/* Year 3 Lesson Library — blocky video-game theme */
@font-face { font-family: "Pixelify Sans"; src: url("fonts/pixelify-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* Pixelify's 2 and 5 look like 8 and S at small sizes, so the pixel font borrows Lexend's digits (everywhere it is used, canvas and SVG too) */
@font-face { font-family: "Pixelify Sans"; src: url("fonts/lexend.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "Lexend"; src: url("fonts/lexend.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --pixel: "Pixelify Sans", "Courier New", monospace;
  --read: "Lexend", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --ink: #1b1b1b;
  --muted: #555;
  --sky1: #5fb8f5;
  --sky2: #c4e8ff;
  --stone: #c6c6c6;
  --slot: #8b8b8b;
  --paper: #fbf6e9;
  --good: #4caf2a;
  --good-soft: #b9f29a;
  --bad: #e53935;
  --bad-soft: #ffb3ad;
  --gold: #ffb800;
  --gold-dark: #b37f00;
  --xp: #7cfc3a;
  --brand: #19b3a3;
  --brand-dark: #0b6e64;
  --brand-soft: #c6f6ef;
  --sky1: #5fb8f5; --sky2: #c4e8ff;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' opacity='.85'%3E%3Crect x='40' y='20' width='60' height='10'/%3E%3Crect x='30' y='30' width='90' height='10'/%3E%3Crect x='20' y='40' width='110' height='10'/%3E%3Crect x='250' y='60' width='40' height='10'/%3E%3Crect x='240' y='70' width='70' height='10'/%3E%3Crect x='230' y='80' width='100' height='10'/%3E%3C/g%3E%3C/svg%3E");
  --deco-size: 900px 270px; --deco-repeat: repeat-x;
  --deco2: none; --deco2-pos: right top; --deco2-size: auto; --stripes: none;
  --g1: #5bbf3a; --g2: #3d8a26; --g3: #8a5a32; --g4: #6b4425;
  --bevel: inset 3px 3px 0 rgba(255, 255, 255, .55), inset -3px -3px 0 rgba(0, 0, 0, .3);
  --bevel-in: inset 3px 3px 0 rgba(0, 0, 0, .3), inset -3px -3px 0 rgba(255, 255, 255, .45);
}
body.science { --brand: #19b3a3; --brand-dark: #0b6e64; --brand-soft: #c6f6ef; }
body.maths   { --brand: #e09a00; --brand-dark: #8a5d00; --brand-soft: #ffe9b3; }
body.english { --brand: #d9433b; --brand-dark: #85201b; --brand-soft: #ffd0cc; }
body.future  { --brand: #7c4dff; --brand-dark: #3d1f99; --brand-soft: #e3d9ff; }
body.wonders { --brand: #1e88e5; --brand-dark: #0d47a1; --brand-soft: #d6e9ff; }
body.world   { --brand: #f4511e; --brand-dark: #a3300b; --brand-soft: #ffe0d3; }

* { box-sizing: border-box; }
html { font-size: 18px; }
@media (min-width: 720px) { html { font-size: 20px; } }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--read); color: var(--ink); line-height: 1.5;
  /* the background scene (sky, decorations, ground) comes from these variables – avatar.js swaps them for the chosen scene */
  background:
    var(--deco2) var(--deco2-pos) / var(--deco2-size) no-repeat fixed,
    var(--deco) 0 70px / var(--deco-size) var(--deco-repeat) fixed,
    var(--stripes) fixed,
    linear-gradient(var(--sky1), var(--sky2)) fixed;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
/* grass + dirt strip along the bottom */
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 52px; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--g1) 0 12px, transparent 12px 28px) 0 0 / 100% 6px no-repeat,
    linear-gradient(var(--g1), var(--g1)) 0 6px / 100% 10px no-repeat,
    linear-gradient(var(--g2), var(--g2)) 0 16px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--g4) 0 8px, transparent 8px 24px) 0 28px / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, var(--g4) 14px 22px, transparent 22px 36px) 0 40px / 100% 8px no-repeat,
    linear-gradient(var(--g3), var(--g3)) 0 20px / 100% 100% no-repeat;
}
h1, h2, h3 { font-family: var(--pixel); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; letter-spacing: .02em; }
button { font-family: inherit; }
[hidden] { display: none !important; }
a { color: var(--brand-dark); }

/* ---------- HUD (top bar) ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(20, 20, 20, .88); color: #fff; border-bottom: 4px solid #000; padding: 8px 16px 6px; }
.hud-row { display: flex; align-items: center; gap: 10px; max-width: 1000px; margin: 0 auto; }
.lesson-title { flex: 1; font-family: var(--pixel); font-weight: 700; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 2px 2px 0 #000; }
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 3px solid #000; background: #6f6f6f; box-shadow: var(--bevel);
  color: #fff; font-size: 1.3rem; text-decoration: none; cursor: pointer;
}
.icon-btn:active { box-shadow: var(--bevel-in); }
.starbox {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 12px;
  background: #000; border: 3px solid #3a3a3a; color: #6ff5e8;
  font-family: var(--pixel); font-weight: 700; font-size: 1.3rem; text-shadow: 2px 2px 0 #0b4a44;
}
.starbox.bump { animation: bump .5s; }
.xp-row { display: flex; align-items: center; gap: 10px; max-width: 1000px; margin: 6px auto 0; }
.xp-level { font-family: var(--pixel); font-weight: 700; color: var(--xp); text-shadow: 2px 2px 0 #1f4a00; white-space: nowrap; font-size: .95rem; }
.xp-bar { flex: 1; height: 14px; background: #1a1a1a; border: 2px solid #000; box-shadow: inset 0 0 0 2px #333; position: relative; }
.xp-fill { height: 100%; width: 0; background: linear-gradient(#b6ff7a, var(--xp) 50%, #4cc21a); transition: width .5s steps(10); }
.xp-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #000 calc(10% - 2px) 10%); }

/* ---------- hotbar (stage path) ---------- */
.path { position: relative; z-index: 1; display: flex; gap: 6px; justify-content: center; max-width: 1000px; margin: 14px auto 0; padding: 4px 16px 6px; overflow-x: auto; scrollbar-width: none; }
.step { flex: 0 1 74px; min-width: 50px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; }
.step:disabled { cursor: default; }
.step-ico { position: relative; display: grid; place-items: center; width: min(56px, 100%); aspect-ratio: 1; height: auto; background: var(--slot); border: 3px solid #000; box-shadow: var(--bevel-in); font-size: 1.6rem; }
.step:disabled .step-ico { filter: grayscale(1) brightness(.75); }
.step.now .step-ico { outline: 4px solid #fff; outline-offset: -1px; background: #a9a9a9; transform: scale(1.12); }
.step.done .step-ico::after {
  content: "✔"; position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--good); color: #fff; border: 2px solid #000; font-size: .7rem; font-weight: 900;
}
.step-label { font-family: var(--read); font-weight: 700; font-size: .75rem; color: #fff; text-shadow: 2px 2px 0 #000; text-align: center; line-height: 1.1; margin-top: 4px; }
@media (max-width: 640px) {
  .step { width: 36px; } .step-label { display: none; }
  .step-ico { width: 34px; height: 34px; font-size: 1rem; border-width: 2px; }
  .step.done .step-ico::after { width: 15px; height: 15px; font-size: .5rem; right: -4px; bottom: -4px; }
  .path { gap: 3px; padding: 4px 8px 6px; }
}

/* ---------- stage panel ---------- */
.stage { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 14px 16px 90px; }
.card { background: var(--stone); border: 4px solid #000; box-shadow: var(--bevel), 0 8px 0 rgba(0, 0, 0, .25); padding: 20px; }
@media (min-width: 720px) { .card { padding: 26px 32px; } }
.stage-card { animation: enter .35s steps(6); }
.stage-head { margin: -20px -20px 18px; padding: 14px 20px 12px; background: var(--brand); border-bottom: 4px solid #000; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25); }
@media (min-width: 720px) { .stage-head { margin: -26px -32px 20px; padding: 16px 32px 14px; } }
.stage-head h1 { font-size: 2.1rem; color: #fff; text-shadow: 3px 3px 0 #000; margin: 6px 0 0; }
.chip { display: inline-block; margin-right: 6px; padding: 2px 10px; background: #000; color: #fff; font-family: var(--pixel); font-weight: 700; font-size: .8rem; border: 2px solid #000; }
.chip.soft { background: rgba(255, 255, 255, .85); color: #000; }
.lead { font-size: 1.15rem; }
.instr { font-size: 1.15rem; font-weight: 600; margin: 6px 0 14px; }
.panel-inner { background: var(--paper); border: 3px solid #000; box-shadow: var(--bevel-in); padding: 16px 18px; }

/* ---------- mascot (game chat style) ---------- */
.mascot { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.bot { flex: none; width: 72px; height: 72px; padding: 6px; display: grid; place-items: center; font-size: 2.6rem; background: var(--slot); border: 3px solid #000; box-shadow: var(--bevel-in); animation: bob 1.6s steps(2) infinite; }
.bot svg { width: 100%; height: 100%; }
.bubble { flex: 1; padding: 10px 14px; background: rgba(0, 0, 0, .78); color: #fff; border: 3px solid #000; font-size: 1.08rem; font-weight: 500; }
.bubble .who { font-family: var(--pixel); font-weight: 700; color: var(--gold); margin-right: 6px; }
.bubble.pop { animation: pop .3s steps(3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  padding: .55em 1.2em; border: 3px solid #000; border-radius: 0;
  background: var(--brand); color: #fff;
  font-family: var(--pixel); font-weight: 700; font-size: 1.15rem; letter-spacing: .03em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
  box-shadow: var(--bevel), 0 4px 0 #000;
  transition: transform .05s;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--bevel-in), 0 1px 0 #000; }
.btn:disabled { background: #8b8b8b; color: #d0d0d0; cursor: not-allowed; text-shadow: none; }
.btn.big { font-size: 1.35rem; padding: .6em 1.4em; }
.btn.ghost { background: #6f6f6f; }
.btn.gold { background: var(--gold); }
.btn.green { background: var(--good); }
.btn.ready { animation: nudge 1.4s steps(4) infinite; }
/* moving on by itself: a pixel bar fills along the bottom (engine AUTO_NEXT_MS); a tap skips the wait */
.btn.auto { position: relative; overflow: hidden; }
.btn.auto::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: rgba(255, 255, 255, .75); animation: autofill 1.5s steps(10) forwards; }
@keyframes autofill { to { width: 100%; } }
.navrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.opts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 12px; }
.opt {
  padding: 12px 14px; cursor: pointer; text-align: center; color: var(--ink);
  background: #f4f4f4; border: 3px solid #000; border-radius: 0; box-shadow: inset -3px -3px 0 #a5a5a5, inset 3px 3px 0 #fff;
  font-family: var(--read); font-size: 1.12rem; font-weight: 600;
}
.opt:hover:not(:disabled) { background: #fffbe0; }
.opt.right { background: var(--good-soft); box-shadow: inset -3px -3px 0 #6fbf4a, inset 3px 3px 0 #e2ffd2; }
.opt.wrong { background: var(--bad-soft); opacity: .75; }
.opt:disabled { cursor: default; }

/* ---------- glossary ---------- */
.gloss { font: inherit; font-weight: 700; color: var(--brand-dark); cursor: pointer; background: #fff3a8; border: 0; border-bottom: 3px dotted var(--brand-dark); border-radius: 0; padding: 0 4px; }
.gloss:hover { background: #ffe66b; }
.overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.gloss-card { width: min(440px, 100%); text-align: center; animation: pop .3s steps(3); }
.gloss-emoji { font-size: 4rem; }
.gloss-word { font-family: var(--pixel); font-weight: 700; font-size: 2.2rem; color: var(--brand-dark); }
.gloss-def { font-size: 1.2rem; margin: 6px 0 18px; }

/* ---------- welcome ---------- */
.hero { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: center; margin-bottom: 16px; }
@media (max-width: 620px) { .hero { grid-template-columns: 1fr; text-align: center; } .hero-pic { margin: 0 auto; } }
.hero-pic { width: 170px; animation: float 2.4s steps(4) infinite; }
.hero-pic svg { width: 100%; height: auto; display: block; }
.hero-pic.emoji { font-size: 8rem; text-align: center; }
.big-q { padding: 16px 20px; background: #000; color: #fff; border: 3px solid #000; box-shadow: inset 0 0 0 3px #444; }
.big-q-label { font-family: var(--pixel); font-weight: 700; color: var(--gold); font-size: 1rem; }
.big-q p { font-size: 1.35rem; font-weight: 600; margin: 6px 0 0; }
.name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--pixel); font-weight: 700; font-size: 1.2rem; margin: 18px 0; }
.name-in { flex: 1; min-width: 180px; padding: 10px 14px; outline: none; font-family: var(--pixel); font-size: 1.4rem; color: #fff; background: #000; border: 3px solid #a0a0a0; }
.name-in:focus { border-color: #fff; }
.name-in::placeholder { color: #777; }
.map-box { padding: 14px 18px; }
.map { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.map li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.map-ico { width: 38px; height: 38px; display: grid; place-items: center; flex: none; background: var(--slot); border: 2px solid #000; box-shadow: var(--bevel-in); font-size: 1.2rem; }
.map-min { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; font-family: var(--pixel); }

/* ---------- reading pages ---------- */
.story { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; min-height: 230px; }
@media (max-width: 620px) { .story { grid-template-columns: 1fr; } }
.story .pic { display: grid; place-items: center; min-height: 200px; padding: 14px; background: var(--brand-soft); border: 6px solid #6b4423; box-shadow: inset 0 0 0 3px #a8743f, 0 0 0 3px #000; }
.story .pic.emoji { font-size: 6rem; line-height: 1; }
.story .pic svg { width: 100%; height: auto; max-height: 230px; }
.story-title { font-size: 1.6rem; color: var(--brand-dark); }
.story-text p { font-size: 1.25rem; line-height: 1.7; margin: 0 0 .6em; }
.story-anim { animation: enter .3s steps(5); }
.check { margin-top: 20px; padding: 14px 18px; background: #000; color: #fff; border: 3px solid #000; box-shadow: inset 0 0 0 3px #444; }
.check-q { font-weight: 600; font-size: 1.15rem; }
.check-q b { font-family: var(--pixel); color: var(--gold); }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.dot { width: 16px; height: 16px; background: var(--slot); border: 2px solid #000; }
.dot.on { background: var(--gold); transform: scale(1.2); }
.dot.seen { background: var(--good); }

/* ---------- games ---------- */
.round-tag { display: inline-block; padding: 3px 12px; background: var(--gold); color: #000; border: 3px solid #000; font-family: var(--pixel); font-weight: 700; margin-bottom: 6px; }
.game { animation: enter .3s steps(5); }
.tray-wrap { background: #a9a9a9; border: 3px solid #000; box-shadow: var(--bevel-in); padding: 12px; margin-bottom: 16px; }
.tray-label { font-family: var(--pixel); font-weight: 700; color: #222; margin-bottom: 8px; font-size: .95rem; }
.tray { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; }
.chip-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: #f4f4f4; border: 3px solid #000; box-shadow: inset -3px -3px 0 #a5a5a5, inset 3px 3px 0 #fff, 0 3px 0 #000;
  font-weight: 600; font-size: 1.02rem; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
}
.chip-item:hover { background: #fffbe0; }
.chip-item.selected { background: #fff3a8; outline: 3px solid var(--gold); transform: translateY(-3px); }
.chip-item.dragging { opacity: .3; }
.chip-item.placed { cursor: default; background: var(--good-soft); box-shadow: inset -3px -3px 0 #6fbf4a, inset 3px 3px 0 #e2ffd2; animation: pop .3s steps(3); }
.ci-emoji { font-size: 1.45rem; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; margin: 0; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35); }
.buckets { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 12px; }
.bucket {
  min-height: 170px; padding: 0 0 10px; cursor: pointer; background-color: #9c6b3c; border: 4px solid #000;
  box-shadow: inset 0 0 0 3px #c08a52;
  background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgba(0, 0, 0, .18) 22px 25px);
}
.bucket.over { filter: brightness(1.25); }
.bucket-head { font-family: var(--pixel); font-weight: 700; font-size: 1.2rem; text-align: center; color: #fff; text-shadow: 2px 2px 0 #000; background: #6b4423; border-bottom: 4px solid #000; padding: 8px 6px; margin-bottom: 10px; }
.bucket-emoji { font-size: 1.5rem; margin-right: 6px; text-shadow: none; }
.bucket-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0 8px; }
.bucket-items .chip-item { font-size: .88rem; padding: 4px 10px; box-shadow: none; }
@media (max-width: 560px) {
  .chip-item { padding: 6px 10px; font-size: .9rem; gap: 6px; }
  .ci-emoji { font-size: 1.15rem; }
  .buckets { gap: 6px; }
  .bucket { min-height: 130px; }
  .bucket-head { font-size: .85rem; padding: 6px 4px; }
  .bucket-emoji { font-size: 1.1rem; display: block; margin: 0; }
  .bucket-items .chip-item { font-size: .75rem; padding: 3px 6px; }
}

.tf { text-align: center; }
.tf-count { font-family: var(--pixel); font-weight: 700; color: #333; }
.tf-q { font-size: 1.5rem; font-weight: 600; margin: 10px auto 18px; max-width: 660px; }
.tf-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tf-row .opt { min-width: 170px; font-size: 1.3rem; padding: 16px 22px; }
.why { margin: 16px auto 0; max-width: 660px; padding: 10px 16px; background: var(--paper); border: 3px solid #000; font-size: 1.05rem; font-weight: 500; }
.fixit { text-align: center; }
.fx-label { font-family: var(--pixel); font-weight: 700; font-size: 1.15rem; color: var(--brand-dark); margin-top: 6px; }
.fx-sentence { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px auto 18px; max-width: 720px; }
.fx-word { font: 600 1.35rem var(--read); padding: 8px 12px; background: #fff; border: 3px solid #000; box-shadow: inset -3px -3px 0 #a5a5a5, inset 3px 3px 0 #fff, 0 3px 0 #000; cursor: pointer; color: #000; }
.fx-word:hover { background: #fffbe0; }
.fx-word.found { background: var(--bad-soft); color: var(--bad); text-decoration: wavy underline var(--bad); text-underline-offset: 5px; animation: pop .3s steps(3); }
.fx-word.found.over { outline: 4px dashed var(--gold); }
.fx-word.fixed { background: var(--good-soft); box-shadow: inset -3px -3px 0 #6fbf4a, inset 3px 3px 0 #e2ffd2, 0 3px 0 #000; animation: pop .3s steps(3); cursor: default; }
.fixit .tray { justify-content: center; }

.match-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px 16px; }
.match-col { display: grid; gap: 10px; align-content: start; }
.match-item {
  padding: 10px 12px; cursor: pointer; text-align: left; color: var(--ink);
  background: #f4f4f4; border: 3px solid #000; border-radius: 0; box-shadow: inset -3px -3px 0 #a5a5a5, inset 3px 3px 0 #fff;
  font-family: var(--read); font-size: 1.02rem; font-weight: 600;
}
.match-col.left .match-item { text-align: center; font-size: 1.12rem; }
.match-item.selected { background: #fff3a8; outline: 3px solid var(--gold); transform: translateY(-3px); }
.match-item.matched { cursor: default; box-shadow: none; animation: pop .3s steps(3); }

.order-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; counter-reset: ord; }
.order-list li { counter-increment: ord; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; background: rgba(0, 0, 0, .12); border: 3px dashed #000; font-weight: 600; font-size: 1.05rem; color: #333; }
.order-list li::before { content: counter(ord); flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: #333; color: #fff; border: 2px solid #000; font-family: var(--pixel); font-weight: 700; }
.order-list li.filled { border-style: solid; background: var(--good-soft); color: var(--ink); animation: pop .3s steps(3); }
.order-list li.filled::before { background: var(--good); }
.order-list li { position: relative; }
.order-list .ord-text { flex: 1; }
/* which end is which: FIRST / LAST (or SHORTEST / LONGEST …) */
.order-list .ord-end { flex: none; padding: 2px 8px; font-family: var(--pixel); font-weight: 700; font-size: .8rem; color: #fff; background: #333; border: 2px solid #000; white-space: nowrap; }
.order-list li.filled .ord-end { background: var(--good); }
/* the box to fill next */
.order-list li.next { border-color: #e09a00; background: #fff3a8; box-shadow: 0 0 0 3px #ffd43b; }
.order-list li.next .ord-text::after { content: '◀ next one goes here'; font-size: .9rem; color: #8a5a00; }
.order-list li.next .ord-text { color: transparent; }
.order-list li.next .ord-text::after { color: #8a5a00; }
.order-list li.given { opacity: .85; }
.order-pool { display: grid; gap: 8px; }
.order-pool .opt { text-align: left; }

.label-board { position: relative; max-width: 560px; margin: 0 auto 16px; background: var(--brand-soft); border: 4px solid #000; padding: 8px; }
.label-board svg { display: block; width: 100%; height: auto; }
.spot { position: absolute; transform: translate(-50%, -50%); min-width: 26%; padding: 6px 8px; text-align: center; cursor: pointer; background: #fff; border: 3px dashed #000; font-family: var(--pixel); font-weight: 700; color: #777; }
.spot.over { background: #fff3a8; }
.spot.filled { border-style: solid; background: var(--good-soft); color: var(--ink); animation: pop .3s steps(3); }
@media (max-width: 520px) { .spot { font-size: .72rem; padding: 3px 4px; } }

.data-box { margin: 0 auto 16px; max-width: 620px; overflow-x: auto; }
.data-box table { width: 100%; border-collapse: collapse; background: var(--paper); border: 4px solid #000; font-size: 1.05rem; }
.data-box th, .data-box td { border: 2px solid #000; padding: 8px 10px; text-align: center; }
.data-box th { background: var(--brand); color: #fff; font-family: var(--pixel); text-shadow: 2px 2px 0 #000; }
.data-box caption { font-family: var(--pixel); font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; }

/* ---------- video quest ---------- */
.video-card { display: grid; grid-template-columns: minmax(0, 1.25fr) 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) { .video-card { grid-template-columns: 1fr; } }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; border: 4px solid #000; box-shadow: 0 0 0 3px #fff, 6px 6px 0 3px rgba(0, 0, 0, .3); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; display: grid; place-items: center;
  background: var(--good); border: 4px solid #000; box-shadow: var(--bevel); color: #fff; font-size: 2.4rem; text-shadow: 2px 2px 0 #000;
}
.video-thumb:hover .play { filter: brightness(1.15); }
.video-meta { margin-top: 10px; font-weight: 600; }
.video-meta .vt { font-family: var(--pixel); font-size: 1.2rem; font-weight: 700; }
.video-meta .vc { color: #333; font-size: .95rem; }
.clues h3 { color: var(--brand-dark); font-size: 1.25rem; }
.clues ul { margin: 6px 0 0; padding-left: 1.2em; font-size: 1.08rem; }
.clues li { margin-bottom: 6px; }
.video-steps { margin: 16px 0 0; padding: 10px 14px; background: rgba(0, 0, 0, .1); border: 3px dashed #000; font-size: 1rem; }

/* ---------- brain break ---------- */
.break-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .break-grid { grid-template-columns: 1fr; } }
.panel { background: var(--paper); border: 3px solid #000; box-shadow: var(--bevel-in); padding: 16px 18px; }
.panel h2 { font-size: 1.4rem; color: var(--brand-dark); }
.wiggle { text-align: center; }
.timer { --p: 0; width: 150px; height: 150px; margin: 10px auto; display: grid; place-items: center; border: 4px solid #000; background: linear-gradient(0deg, var(--xp) calc(var(--p) * 1%), #1a1a1a 0); }
.timer span { width: 104px; height: 104px; display: grid; place-items: center; background: #000; color: #fff; border: 3px solid #444; font-family: var(--pixel); font-size: 2.4rem; font-weight: 700; }
.move { font-size: 1.2rem; font-weight: 600; min-height: 3.4em; display: grid; place-items: center; }
.move-emoji { font-size: 3rem; display: block; animation: wiggle .8s steps(2) infinite; }
.steps { padding-left: 1.3em; margin: 8px 0; font-size: 1.08rem; }
.steps li { margin-bottom: 6px; }
.hunt { width: 100%; border-collapse: collapse; margin-top: 8px; }
.hunt th { font-family: var(--pixel); font-size: .9rem; text-align: center; padding: 4px; }
.hunt th:first-child, .hunt td:first-child { text-align: left; }
.hunt td { padding: 4px 6px; font-weight: 600; border-top: 2px dashed #bbb; }
.tog { width: 46px; height: 40px; border: 3px solid #000; background: #f4f4f4; box-shadow: inset -3px -3px 0 #a5a5a5; font-size: 1.25rem; cursor: pointer; display: block; margin: 0 auto; }
/* brain-break mini games */
.brain-games { grid-column: 1 / -1; }
.bg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.bg-tabs.center { justify-content: center; }
.bg-tab { padding: 6px 12px; cursor: pointer; background: #e2e2e2; color: #000; border: 3px solid #000; box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff; font-family: var(--pixel); font-weight: 700; font-size: 1.05rem; }
.bg-tab.small { font-size: .9rem; padding: 4px 10px; }
.bg-tab.on { background: var(--brand); color: #fff; text-shadow: 2px 2px 0 #000; }
.bg-status { font-weight: 600; font-size: 1.08rem; text-align: center; min-height: 1.5em; margin: 10px 0 0; }
.bg-canvas { display: block; width: 100%; max-width: 640px; margin: 0 auto; border: 4px solid #000; touch-action: none; user-select: none; -webkit-user-select: none; }
.maze-canvas { max-width: 440px; }
.ttt-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #1c1010; color: #fff; border: 4px solid #000; box-shadow: inset 0 0 0 3px #4a2020; }
.ttt-boss { width: 72px; flex: none; animation: float 1.8s steps(3) infinite; }
.ttt-boss svg { width: 100%; height: auto; display: block; }
.ttt-boss.emoji { font-size: 3.2rem; text-align: center; }
.ttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 300px); margin: 14px auto 0; }
.ttt-cell { aspect-ratio: 1; font-size: 2.6rem; background: #f4f4f4; color: #000; border: 3px solid #000; box-shadow: inset -3px -3px 0 #a5a5a5, inset 3px 3px 0 #fff; cursor: pointer; padding: 0; }
.ttt-cell:disabled { cursor: default; color: #000; }
.ttt-cell.placed { animation: pop .3s steps(3); }
.ttt-cell.win { background: var(--good-soft); }
.ttt-score { text-align: center; font-family: var(--pixel); font-weight: 700; margin-top: 4px; }
.dpad { display: grid; grid-template-columns: repeat(3, 60px); grid-auto-rows: 60px; gap: 6px; justify-content: center; margin-top: 12px; }
.dpad-btn { font-size: 1.8rem; background: #e2e2e2; border: 3px solid #000; box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff; cursor: pointer; padding: 0; touch-action: manipulation; }
.dpad-btn:active { transform: translateY(2px); }
.hm-balloons { display: flex; justify-content: center; gap: 4px; font-size: 2.2rem; margin-top: 4px; }
.hm-balloon { animation: bob 1.6s steps(3) infinite; }
.hm-balloon:nth-child(even) { animation-delay: .4s; }
.hm-balloon.popped { animation: pop .3s steps(3); opacity: .5; }
.hm-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.hm-slot { width: 40px; height: 48px; display: grid; place-items: center; background: #fff; border: 3px solid #000; border-bottom-width: 6px; font-family: var(--pixel); font-weight: 700; font-size: 1.8rem; }
.hm-slot.missed { color: var(--bad); }
.hm-gap { width: 18px; }
.hm-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; max-width: 560px; margin: 12px auto 0; }
.hm-key { height: 46px; font-family: var(--pixel); font-weight: 700; font-size: 1.3rem; background: #e2e2e2; color: #000; border: 3px solid #000; box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff; cursor: pointer; padding: 0; touch-action: manipulation; }
.hm-key:disabled { cursor: default; color: #000; }
.hm-key.hit { background: var(--good-soft); }
.hm-key.miss { background: #555; color: #aaa; }
.hm-hint { text-align: center; font-size: 1.05rem; margin: 12px auto 0; max-width: 560px; padding: 8px 12px; background: var(--brand-soft); border: 3px dashed #000; }
@media (max-width: 520px) { .hm-slot { width: 30px; height: 40px; font-size: 1.4rem; } }

/* ---------- quiz + boss ---------- */
.qbar { height: 16px; background: #1a1a1a; border: 2px solid #000; margin-bottom: 8px; }
.qbar-fill { height: 100%; background: var(--gold); transition: width .4s steps(6); }
.q-count { font-family: var(--pixel); font-weight: 700; color: #333; }
.q-text { font-size: 1.45rem; font-weight: 600; margin: 8px 0 6px; }
.blank { display: inline-block; min-width: 4em; border-bottom: 4px solid #000; color: var(--brand-dark); text-align: center; font-weight: 700; }
.feedback { margin-top: 14px; padding: 10px 16px; border: 3px solid #000; font-weight: 600; font-size: 1.08rem; animation: pop .3s steps(3); }
.feedback.good { background: var(--good-soft); }
.reread { grid-column: 1 / -1; padding: 12px 16px; background: var(--brand-soft); border: 3px dashed #000; font-weight: 700; font-size: 1.1rem; text-align: center; }
.feedback.try { background: #ffe9a8; }
.boss { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 12px 16px; background: #1c1010; border: 4px solid #000; box-shadow: inset 0 0 0 3px #4a2020; color: #fff; }
.boss-sprite { width: 96px; flex: none; animation: float 1.8s steps(3) infinite; }
.boss-sprite svg { width: 100%; height: auto; display: block; }
.boss-sprite.emoji { font-size: 4.5rem; text-align: center; }
.boss-sprite.hurt { animation: hurt .45s steps(3); }
.boss-info { flex: 1; }
.boss-name { font-family: var(--pixel); font-weight: 700; font-size: 1.5rem; color: #ff6b6b; text-shadow: 2px 2px 0 #000; }
.boss-sub { font-size: .9rem; color: #ddd; }
.hp { height: 22px; background: #000; border: 3px solid #555; margin-top: 6px; position: relative; }
.hp-fill { height: 100%; background: linear-gradient(#ff8a80, #e53935 50%, #a31515); transition: width .5s steps(5); }
.boss { position: relative; }
.boss.flash { animation: bossflash .35s steps(2); }
.boss.enraged { box-shadow: inset 0 0 0 3px #b71c1c; animation: rage 1s steps(2) infinite; }
.boss.enraged .boss-sprite { animation: float .9s steps(3) infinite; filter: drop-shadow(0 0 6px #ff3b3b) saturate(1.4); }
.boss.enraged .boss-sprite.hurt { animation: hurt .45s steps(3); }
.boss-sprite.lunge-boss { animation: lungeboss .4s steps(4); }
.boss.defeated .boss-sprite, .boss-sprite.ko { animation: bossko 1s steps(8) forwards; }
.victory .boss-sprite.ko { animation: none; opacity: .4; filter: grayscale(1); transform: rotate(90deg) scale(.8); }

/* the player's side of a boss battle */
.q-area.locked { pointer-events: none; opacity: .6; }
.hero { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 12px 16px; background: #101a2c; border: 4px solid #000; box-shadow: inset 0 0 0 3px #20406a; color: #fff; }
.hero-sprite { width: 56px; flex: none; image-rendering: pixelated; animation: bob 1.2s steps(2) infinite; }
.hero-sprite.emoji { font-size: 3.4rem; text-align: center; }
.hero-sprite.lunge { animation: lunge .45s steps(4); }
.hero-sprite.hurt { animation: hurt .45s steps(3); }
.hero.fainted .hero-sprite { animation: none; transform: rotate(-90deg); filter: grayscale(1); opacity: .5; transition: transform .4s steps(3); }
.hero-sprite.cheer { animation: cheer .6s steps(3) infinite; }
.hero-info { flex: 1; }
.hero-name { font-family: var(--pixel); font-weight: 700; font-size: 1.3rem; color: #7ec8ff; text-shadow: 2px 2px 0 #000; }
.hearts { display: flex; gap: 6px; font-size: 1.8rem; line-height: 1.1; margin: 4px 0 2px; }
.hearts.big { justify-content: center; font-size: 2.6rem; margin: 6px 0 10px; }
.heart.lost { opacity: .55; }
.heart.break { animation: heartbreak .6s steps(4); }

/* speech bubbles, attacks and banners */
.fight-bubble { position: relative; visibility: hidden; display: inline-block; margin-top: 12px; max-width: 100%; padding: 4px 12px; background: #fff; color: #111; border: 3px solid #000; box-shadow: 3px 3px 0 #000; font-weight: 700; font-size: 1.05rem; line-height: 1.3; pointer-events: none; }
.fight-bubble:empty::after { content: '…'; }
.fight-bubble.show { visibility: visible; }
.fight-bubble::before { content: ''; position: absolute; left: 14px; top: -12px; border: 6px solid transparent; border-bottom-color: #000; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.hero-top .hearts { margin: 0; }
.fight-bubble.pop { animation: pop .25s steps(3); }
.projectile { position: fixed; left: 0; top: 0; z-index: 800; width: 40px; height: 40px; font-size: 2.2rem; line-height: 40px; text-align: center; pointer-events: none; filter: drop-shadow(2px 2px 0 #000); }
.pop-text { position: absolute; z-index: 4; left: 20px; top: 0; font-family: var(--pixel); font-weight: 700; font-size: 1.6rem; text-shadow: 2px 2px 0 #000; pointer-events: none; animation: rise 1s steps(6) forwards; }
.pop-text.dmg { color: #ffd54f; }
.pop-text.ouch { color: #ff6b6b; }
.fight-banner { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-weight: 700; font-size: 2.6rem; color: #ffd54f; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000; pointer-events: none; animation: bannerin 1.5s steps(6) forwards; }
.fight-banner.ko { color: #fff; }
.fight-banner.over { color: #ff6b6b; }
.gloat { position: relative; display: inline-block; margin: 26px 0 6px; }
.gloat .boss-sprite { width: 120px; margin: 0 auto; animation: float .9s steps(3) infinite; }
.gloat .fight-bubble { display: block; max-width: 360px; }
.gloat .fight-bubble::before { left: calc(50% - 6px); }
.victory { display: flex; justify-content: center; align-items: flex-end; gap: 30px; margin: 10px 0 0; }
.victory .hero-sprite { width: 72px; }
.victory .boss-sprite { width: 80px; }
/* Undertale-style dodge round */
.dodge { text-align: center; padding: 10px 0 4px; }
.dodge-title { font-family: var(--pixel); font-weight: 700; font-size: 1.5rem; color: #e53935; text-shadow: 2px 2px 0 #000; animation: nudge .8s steps(3) infinite; }
.dodge-help { font-size: .95rem; font-weight: 600; margin: 2px 0 8px; }
.dodge-box { display: block; width: min(100%, 480px); aspect-ratio: 3 / 2; margin: 0 auto; background: #000; border: 5px solid #fff; outline: 4px solid #000; image-rendering: pixelated; touch-action: none; cursor: grab; }
.dodge-timer { width: min(100%, 480px); height: 12px; margin: 8px auto 0; background: #000; border: 2px solid #000; }
.dodge-timer-fill { height: 100%; width: 100%; background: var(--gold); }
.dodge-status { font-family: var(--pixel); font-weight: 700; font-size: 1.3rem; margin-top: 6px; min-height: 1.6em; }
.boss.attacking .boss-sprite { animation: lungeboss .5s steps(4) infinite; }
@keyframes lunge { 0%, 100% { transform: none; } 40% { transform: translate(14px, -18px) scale(1.15); } 70% { transform: translate(6px, -6px); } }
@keyframes lungeboss { 0%, 100% { transform: none; } 40% { transform: translate(-10px, 14px) scale(1.15); } }
@keyframes cheer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes bossflash { 50% { background: #5a1a1a; } }
@keyframes rage { 50% { box-shadow: inset 0 0 0 3px #ff3b3b; } }
@keyframes bossko { 0% { transform: none; filter: brightness(3); } 30% { transform: rotate(-20deg) scale(1.1); filter: brightness(3); } 100% { transform: rotate(90deg) translateY(10px) scale(.8); opacity: .35; filter: grayscale(1); } }
@keyframes heartbreak { 0% { transform: scale(1); } 40% { transform: scale(1.6) rotate(-15deg); } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-46px); opacity: 0; } }
@keyframes bannerin { 0% { transform: scale(2.4); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* the avatar celebrates right answers with its aura (below), and the panel glows gold once the combo hits 3 */
/* aura: a glow round the avatar's outline that grows with the combo – blue, then gold, then a flickering fire at 5 in a row */
.hero-aura { flex: none; display: flex; }
.hero-aura[data-aura] { animation: aura var(--a-speed) steps(2) infinite; }
.hero-aura[data-aura="1"] { --a-col: #7ec8ff; --a-lo: 3px; --a-hi: 6px; --a-speed: 1.2s; --a-bright: 1.05; }
.hero-aura[data-aura="2"] { --a-col: #7ec8ff; --a-lo: 5px; --a-hi: 10px; --a-speed: .9s; --a-bright: 1.15; }
.hero-aura[data-aura="3"] { --a-col: #ffd54f; --a-lo: 6px; --a-hi: 13px; --a-speed: .65s; --a-bright: 1.25; }
.hero-aura[data-aura="4"] { --a-col: #ffb300; --a-lo: 8px; --a-hi: 17px; --a-speed: .45s; --a-bright: 1.35; }
.hero-aura[data-aura="5"] { --a-col: #ff7a2e; --a-lo: 10px; --a-hi: 22px; --a-speed: .25s; --a-bright: 1.2; --a-ring: #ffd54f; --a-out: #ff2d2d; }
@keyframes aura {
  0%, 100% { filter: drop-shadow(0 0 1px var(--a-ring, #fff)) drop-shadow(0 0 var(--a-lo) var(--a-col)) drop-shadow(0 0 2px var(--a-out, transparent)); }
  50% { filter: brightness(var(--a-bright)) drop-shadow(0 0 1.5px var(--a-ring, #fff)) drop-shadow(0 0 var(--a-hi) var(--a-col)) drop-shadow(0 0 6px var(--a-out, transparent)); }
}
/* each right answer: a quick flash of power, standing still */
.hero-sprite.surge { animation: surge .5s steps(4); }
@keyframes surge { 0%, 100% { transform: none; } 30% { transform: scale(1.1); filter: brightness(2.2); } 60% { transform: scale(1.05); filter: brightness(1.5); } }
.hero.glow { animation: heroglow .5s steps(3); }
.hero.powered { box-shadow: inset 0 0 0 3px #ffd54f; animation: powered 1s steps(2) infinite; }
.spark { position: absolute; z-index: 4; border: 2px solid #000; pointer-events: none; }
.pop-text.combo { left: 0; right: 0; top: -22px; text-align: center; white-space: nowrap; color: #7ec8ff; }
.pop-text.combo.mega { color: #ffd54f; font-size: 2rem; }
.btn.final { animation: nudge .8s steps(3) infinite; }
/* the boss is stunned after the last hit, waiting for the final blow */
.boss.stunned .boss-sprite { position: relative; animation: dizzy 1s steps(4) infinite; filter: brightness(1.2); }
.boss.stunned .boss-sprite::after { content: '💫'; position: absolute; left: 50%; top: -14px; font-size: 1.6rem; animation: orbit 1s steps(6) infinite; }
@keyframes heroglow { 50% { background: #23477a; } }
@keyframes powered { 50% { box-shadow: inset 0 0 0 3px #fff3b0, 0 0 12px #ffd54f; } }
@keyframes dizzy { 0%, 100% { transform: rotate(-10deg); } 25% { transform: rotate(0) translateY(-4px); } 50% { transform: rotate(10deg); } 75% { transform: rotate(0) translateY(-4px); } }
@keyframes orbit { 0% { transform: translate(-30px, 0); } 25% { transform: translate(-10px, -8px); } 50% { transform: translate(10px, 0); } 75% { transform: translate(-10px, 6px); } 100% { transform: translate(-30px, 0); } }

/* the finishing-move cut scene */
.cutscene { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 60%, #2a1840, #0b0b1e 70%); animation: csin .3s steps(3); }
.cs-bar { position: absolute; left: 0; right: 0; height: 12vh; background: #000; z-index: 3; animation: csbar .4s steps(4) both; }
.cs-bar.top { top: 0; transform-origin: top; }
.cs-bar.bottom { bottom: 0; transform-origin: bottom; }
.cs-stage { position: relative; width: min(760px, calc(100% - 32px)); height: clamp(240px, 48vh, 380px); }
.cs-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: repeating-linear-gradient(90deg, #3b2a20 0 24px, #4e3829 24px 48px); border-top: 4px solid #000; box-shadow: inset 0 4px 0 #6b4c37; }
.cs-hero { position: absolute; left: 8%; bottom: 28px; width: clamp(64px, 14vw, 112px); image-rendering: pixelated; }
.cs-hero.emoji { font-size: clamp(3.4rem, 10vw, 5.4rem); line-height: 1; }
.cs-hero.cs-charge { animation: cscharge .25s steps(2) infinite; filter: brightness(1.6) drop-shadow(0 0 10px #ffd54f) drop-shadow(0 0 4px #fff); }
.cs-hero.cs-cheer { animation: cheer .6s steps(3) infinite; filter: drop-shadow(0 0 8px #ffd54f); }
.cs-boss { position: absolute; right: 8%; bottom: 28px; width: clamp(110px, 26vw, 190px); }
.cs-boss svg { width: 100%; height: auto; display: block; }
.cs-boss.emoji { font-size: clamp(5rem, 16vw, 8rem); line-height: 1; text-align: center; }
.cs-boss.cs-dizzy { animation: dizzy 1s steps(4) infinite; }
.cs-boss.cs-hit { animation: hurt .3s steps(3); }
.cs-boss.cs-rumble { animation: csrumble .12s steps(2) infinite; filter: brightness(2.2); }
.cs-power { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); z-index: 4; width: min(520px, calc(100% - 32px)); text-align: center; display: grid; gap: 10px; justify-items: center; }
.cs-meter-label { font-family: var(--pixel); font-weight: 700; color: #ffd54f; text-shadow: 3px 3px 0 #000; font-size: 1.15rem; }
.cs-meter { width: 100%; height: 30px; background: #1b1b1b; border: 4px solid #000; box-shadow: 0 0 0 3px #fff; overflow: hidden; }
.cs-meter-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #ffd54f 0 18px, #ffb800 18px 22px); transition: width .05s steps(2); }
.cs-power.hot .cs-meter-fill { background: repeating-linear-gradient(90deg, #ff7043 0 18px, #e53935 18px 22px); }
.cs-power.full .cs-meter { animation: hurt .3s steps(3) infinite; }
.cs-tap { touch-action: manipulation; user-select: none; -webkit-user-select: none; font-size: 1.3rem; min-width: 240px; }
.cs-bubble { position: absolute; right: 4%; top: 0; max-width: 60%; margin: 0; }
.cs-bubble::before { top: auto; bottom: -12px; left: auto; right: 30px; border-bottom-color: transparent; border-top-color: #000; }
.cs-bubble.ghost { opacity: .85; }
.cs-prop { position: absolute; z-index: 2; font-size: clamp(5rem, 16vw, 8rem); line-height: 1; pointer-events: none; filter: drop-shadow(4px 4px 0 #000); }
.cs-prop.twinkle { font-size: 3rem; }
.projectile.cs-shot { font-size: 3.4rem; }
.projectile.pic-shot svg { width: 100%; height: 100%; display: block; }
.cs-parts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cs-text { position: absolute; z-index: 4; left: 16px; right: 16px; top: calc(12vh + 8px); text-align: center; font-family: var(--pixel); font-weight: 700; font-size: clamp(1.6rem, 6vw, 2.6rem); color: #fff; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000; pointer-events: none; }
.cs-text:empty { display: none; }
.cs-text.show { animation: bannerpop .35s steps(4); }
.cs-text.big { font-size: clamp(2.4rem, 11vw, 4.4rem); color: #ffd54f; }
.cs-text.gold { color: #ffd54f; animation: bannerpop .35s steps(4), nudge .8s steps(3) .35s infinite; }
.cs-skip { position: absolute; z-index: 5; right: 16px; bottom: max(12px, 3vh); max-width: calc(100% - 32px); }
@keyframes csin { from { opacity: 0; } }
@keyframes csbar { from { transform: scaleY(0); } }
@keyframes cscharge { 0% { transform: translate(-2px, 0) scale(1.08); } 100% { transform: translate(2px, -2px) scale(1.12); } }
@keyframes csrumble { 0% { transform: translate(-4px, 2px); } 100% { transform: translate(4px, -2px); } }
@keyframes bannerpop { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .boss.enraged, .boss.enraged .boss-sprite, .hero-sprite, .hero-sprite.cheer, .gloat .boss-sprite, .fight-banner, .pop-text,
  .hero.powered, .boss.stunned .boss-sprite, .boss.stunned .boss-sprite::after, .btn.final,
  .hero-sprite.surge { animation: none; }
  /* a steady glow instead of a flicker */
  .hero-aura[data-aura] { animation: none; filter: drop-shadow(0 0 var(--a-hi) var(--a-col)) drop-shadow(0 0 2px #fff); }
}
.results { text-align: center; }
.trophy { font-size: 6rem; animation: float 2s steps(4) infinite; }
.score { font-family: var(--pixel); font-size: 3.4rem; font-weight: 700; color: #fff; text-shadow: 4px 4px 0 #000; }
.stars-earned { font-size: 1.3rem; font-weight: 600; }
.bonus { margin-top: 20px; text-align: left; }
.bonus h3 { color: var(--brand-dark); }
@media (max-width: 520px) { .boss-sprite { width: 64px; } .boss-name { font-size: 1.15rem; } .fight-bubble { font-size: .95rem; } .hero-sprite { width: 44px; } }

/* ---------- toasts (achievements / level up) ---------- */
.toasts { position: fixed; top: 110px; right: 12px; z-index: 700; display: grid; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 250px; max-width: 320px; padding: 8px 12px; background: #212121; color: #fff; border: 3px solid #000; box-shadow: inset 0 0 0 2px #555, 4px 4px 0 rgba(0, 0, 0, .35); animation: slidein .35s steps(4); }
.toast.out { animation: slideout .4s steps(4) forwards; }
.toast-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--slot); border: 2px solid #000; font-size: 1.5rem; }
.toast-title { font-family: var(--pixel); font-weight: 700; color: var(--gold); font-size: .95rem; }
.toast-sub { font-weight: 600; font-size: 1rem; }
.toast.level .toast-title { color: var(--xp); }
@media (max-width: 560px) { .toasts { top: auto; bottom: 64px; right: 8px; left: 8px; } .toast { max-width: none; } }

/* ---------- certificate ---------- */
.cert { width: min(760px, 100%); padding: 10px; background: #6b4423; border: 4px solid #000; box-shadow: 10px 10px 0 rgba(0, 0, 0, .35); animation: pop .4s steps(4); }
.cert-inner { background: var(--paper); border: 4px solid #000; box-shadow: inset 0 0 0 6px var(--gold), inset 0 0 0 9px #000; padding: 30px 22px; text-align: center; }
.cert-top { font-family: var(--pixel); font-size: 2.1rem; font-weight: 700; color: var(--gold-dark); }
.cert-name { font-family: var(--pixel); font-size: 2.8rem; font-weight: 700; color: var(--brand-dark); border-bottom: 4px solid #000; display: inline-block; padding: 0 20px; margin: 6px 0 10px; }
.cert-lesson { font-family: var(--pixel); font-size: 1.8rem; font-weight: 700; }
.cert-score { font-size: 1.15rem; font-weight: 600; }
.cert-foot { display: flex; justify-content: space-around; margin-top: 22px; gap: 20px; }
.cert-foot .sig { font-family: var(--pixel); font-weight: 700; font-size: 1.15rem; }
.cert-foot .line { border-top: 3px solid #000; padding-top: 4px; color: var(--muted); font-size: .85rem; min-width: 160px; }
.cert-actions { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }

/* ---------- recap ---------- */
.recap h3 { color: var(--brand-dark); font-size: 1.4rem; }
.recap ul { margin: 8px 0; padding-left: 1.3em; font-size: 1.15rem; }
.recap li { margin-bottom: 6px; }
.recap-link { font-family: var(--pixel); font-weight: 700; }

/* ---------- word hunt ---------- */
.ws-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .ws-wrap { grid-template-columns: 1fr; } }
.ws-board { min-width: 0; }
.ws-grid {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 540px; margin: 0 auto;
  background: #000; border: 4px solid #000; touch-action: none; user-select: none; -webkit-user-select: none;
}
.ws-cell {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  background: #f4f4f4; font-family: var(--pixel); font-weight: 700; font-size: clamp(.95rem, 3.6vw, 1.45rem);
}
.ws-cell.sel { box-shadow: inset 0 0 0 3px var(--gold); background: #fff3a8; }
.ws-cell.found { color: #000; }
.ws-list h3 { color: var(--brand-dark); font-size: 1.3rem; }
.ws-list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ws-list li { font-family: var(--pixel); font-weight: 700; font-size: 1.25rem; padding: 4px 8px; background: #fff; border: 2px solid #000; }
.ws-list li.done { text-decoration: line-through; background: var(--good-soft); opacity: .75; }
.ws-list li.done::after { content: " ✔"; }
.ws-tip { font-size: .95rem; color: #444; margin: 10px 0 0; }

/* ---------- crossword ---------- */
.cw-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .cw-wrap { grid-template-columns: 1fr; } }
.cw-board { container-type: inline-size; min-width: 0; }
.cw-grid {
  --cs: min(46px, calc(100cqw / var(--w) - 2px));
  display: grid; grid-template-columns: repeat(var(--w), var(--cs)); grid-auto-rows: var(--cs);
  gap: 2px; justify-content: center; align-content: start;
}
.cw-cell {
  position: relative; display: grid; place-items: center; cursor: pointer;
  background: #fff; border: 2px solid #000; font-family: var(--pixel); font-weight: 700; font-size: clamp(.9rem, 3.4vw, 1.4rem);
}
.cw-cell.blank { background: transparent; border: 0; cursor: default; }
.cw-num { position: absolute; top: 0; left: 2px; font-family: var(--read); font-size: .55rem; font-weight: 700; line-height: 1.2; }
.cw-cell.active { background: #fff3a8; }
.cw-cell.cursor { background: #ffd84a; box-shadow: inset 0 0 0 3px var(--brand-dark); }
.cw-cell.solved { background: var(--good-soft); }
.cw-cell.given .cw-val { color: var(--brand-dark); }
.cw-cell.wrong { background: var(--bad-soft); }
.cw-clues h3 { color: var(--brand-dark); font-size: 1.2rem; margin-top: 4px; }
.cw-clues ol { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.cw-clue { width: 100%; text-align: left; cursor: pointer; padding: 6px 8px; background: transparent; border: 2px solid transparent; font: inherit; font-size: 1rem; color: var(--ink); }
.cw-clue:hover { background: #fffbe0; }
.cw-clue.active { background: #fff3a8; border-color: #000; }
.cw-clue.done { text-decoration: line-through; opacity: .6; }
.cw-banner { margin: 16px 0 10px; padding: 10px 14px; background: #000; color: #fff; border: 3px solid #000; box-shadow: inset 0 0 0 3px #444; font-size: 1.1rem; }
.cw-banner b { color: var(--gold); font-family: var(--pixel); }
.cw-keys { max-width: 640px; margin: 0 auto; }
.cw-row { display: flex; gap: 5px; justify-content: center; margin-bottom: 5px; }
.cw-key {
  flex: 0 1 54px; min-width: 0; height: 54px; cursor: pointer; padding: 0;
  background: #e2e2e2; color: #000; border: 3px solid #000; box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff;
  font-family: var(--pixel); font-weight: 700; font-size: 1.3rem;
}
.cw-key:active { box-shadow: inset 3px 3px 0 #9a9a9a; background: #fff3a8; }
.cw-key.wide { flex-basis: 84px; background: #ffb3ad; }
@media (max-width: 520px) { .cw-key { height: 44px; font-size: 1rem; } .cw-row { gap: 3px; } }

/* ---------- spell test (potion / dragon egg) ---------- */
.sp-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 720px) { .sp-wrap { grid-template-columns: minmax(0, 1fr); } .sp-scene { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; align-items: center; } .sp-scene-pic { width: 96px; grid-row: span 2; } }
.sp-scene { text-align: center; }
.sp-scene-pic { width: 150px; margin: 0 auto; position: relative; }
.sp-scene-pic svg { width: 100%; height: auto; display: block; }
.sp-scene-pic.flash { animation: hurt .5s steps(3); }
.sp-train .sp-scene-pic { width: 100%; max-width: 280px; }
@media (max-width: 720px) { .sp-train .sp-scene { display: block; } .sp-train .sp-scene-pic { width: 100%; } }
.sp-scene-pic.wobble svg { animation: wiggle 1.2s steps(4) infinite; transform-origin: 50% 90%; }
.sp-scene-pic.launch svg { animation: sprocket .9s steps(4) infinite alternate; }
@keyframes sprocket { from { transform: translateY(4px); } to { transform: translateY(-14px); } }
.sp-scene-pic.bubbling::before, .sp-scene-pic.bubbling::after { content: ''; position: absolute; width: 8px; height: 8px; background: #fff; border: 2px solid #000; top: 4%; left: 35%; animation: spbubble 1.6s steps(6) infinite; }
.sp-scene-pic.bubbling::after { left: 62%; animation-delay: .8s; }
@keyframes spbubble { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-40px); opacity: 0; } }
.sp-scene-cap { font-family: var(--pixel); font-weight: 700; margin-top: 8px; color: var(--brand-dark); }
.sp-ingredients { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; font-size: 1.5rem; min-height: 1.5em; }
.sp-ing.pop { animation: pop .4s steps(3); }
.sp-count { display: inline-block; padding: 3px 12px; background: #000; color: var(--xp); border: 3px solid #000; font-family: var(--pixel); font-weight: 700; }
.sp-label { font-family: var(--pixel); font-weight: 700; font-size: 1.2rem; margin: 10px 0 4px; color: var(--brand-dark); }
.sp-sentence { font-size: 1.3rem; margin: 6px 0; }
.sp-gap { display: inline-block; min-width: 4em; border-bottom: 4px dashed var(--brand); color: transparent; }
.sp-wrongword { color: var(--bad); font-weight: 700; text-decoration: wavy underline var(--bad); text-underline-offset: 5px; }
.sp-clue { color: var(--muted); margin: 4px 0; }
.sp-card { position: relative; margin: 10px auto; max-width: 420px; min-height: 92px; display: flex; align-items: center; justify-content: center; background: #fffbe0; border: 3px solid #000; box-shadow: var(--bevel-in); }
.sp-card:empty { display: none; }
.sp-look, .sp-reveal { text-align: center; }
.sp-look small, .sp-reveal small { display: block; font-family: var(--pixel); color: var(--muted); }
.sp-look b, .sp-reveal b { font-size: 2.4rem; letter-spacing: .08em; }
.sp-reveal b { color: var(--good); }
.sp-timer { position: absolute; top: 4px; right: 8px; font-family: var(--pixel); font-weight: 700; font-size: 1.4rem; color: var(--brand-dark); }
.sp-card.covered { background: #6b4425; }
.sp-blocks { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; height: 86px; }
.sp-blocks i { background: #8a5a32; border: 2px solid #000; box-shadow: var(--bevel); animation: spdrop .35s steps(4) both; }
.sp-blocks i:nth-child(odd) { background: #9a9a9a; }
.sp-blocks i:nth-child(3n) { animation-delay: .1s; } .sp-blocks i:nth-child(4n) { animation-delay: .2s; }
@keyframes spdrop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-tiles { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 52px)); gap: 6px; justify-content: center; margin: 14px 0 6px; }
.sp-tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #fff; border: 3px solid #000; box-shadow: var(--bevel-in); font-family: var(--read); font-weight: 700; font-size: 1.7rem; text-transform: lowercase; }
.sp-tile.cur { background: #ffd84a; }
.sp-tile.lock { background: var(--good-soft); }
.sp-tile.bad { background: var(--bad-soft); }
.sp-tile.good { background: var(--good); color: #fff; animation: pop .3s steps(3); }
@media (max-width: 520px) { .sp-tile { font-size: 1.2rem; } .sp-tiles { gap: 3px; } }
.sp-key { text-transform: lowercase; font-family: var(--read); }
.sp-report { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sp-report li { background: #fff; border: 3px solid #000; padding: 4px 10px; font-size: 1.1rem; }
.sp-report li span { margin-right: 6px; }
.sp-report li.r-first { background: var(--good-soft); }
.sp-report li.r-copied { background: var(--bad-soft); }
.sp-key-note { color: var(--muted); font-size: .9rem; }

/* ---------- teach the robot (AI training) ---------- */
.ai-phase { display: inline-block; padding: 3px 12px; margin-bottom: 10px; background: #000; color: var(--xp); border: 3px solid #000; font-family: var(--pixel); font-weight: 700; }
.ai-card { text-align: center; padding: 14px; margin-bottom: 8px; background: var(--paper); border: 4px solid #000; box-shadow: var(--bevel-in); }
.ai-big { font-size: 5rem; line-height: 1.1; }
.ai-name { font-family: var(--pixel); font-weight: 700; font-size: 1.5rem; margin-bottom: 6px; }
.ai-feat { display: inline-block; margin: 2px 4px; padding: 2px 10px; background: var(--brand-soft); border: 2px solid #000; font-weight: 600; font-size: .95rem; }
.ai-mem-panel { margin-top: 16px; }
.ai-mem-panel h3 { color: var(--brand-dark); font-size: 1.2rem; }
.ai-mem-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px 0; border-top: 2px dashed #ccc; }
.ai-mem-row b { font-family: var(--pixel); margin-left: 6px; }
.ai-emoji { font-size: 1.6rem; }
.ai-empty { color: #777; margin: 4px 0; }
.ai-think { margin: 10px 0; padding: 12px 16px; background: #000; color: #fff; border: 3px solid #000; box-shadow: inset 0 0 0 3px #444; font-size: 1.05rem; }
.ai-guess { margin-top: 6px; font-family: var(--pixel); font-weight: 700; font-size: 1.5rem; color: var(--xp); }

/* ---------- pixel art editor ---------- */
.px-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .px-wrap { grid-template-columns: 1fr; } }
.px-target h3, .px-brief h3, .px-gallery-wrap h3 { color: var(--brand-dark); font-size: 1.2rem; }
/* empty squares use a pale blue check, so they never look like painted white */
.px-target-pic { max-width: 260px; margin: 0 auto; }
.px-target-pic svg { display: block; width: 100%; height: auto; }
.px-tips { margin: 10px 0 0; padding-left: 1.2em; font-size: 1rem; }
.px-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.px-tool {
  padding: 6px 10px; cursor: pointer; background: #e2e2e2; color: #000; border: 3px solid #000;
  box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff; font-family: var(--pixel); font-weight: 700; font-size: 1rem;
}
.px-tool.on { background: var(--gold); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .25); }
.px-palette { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.px-swatch { width: 40px; height: 40px; cursor: pointer; border: 3px solid #000; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25); }
.px-swatch.on { outline: 4px solid #fff; outline-offset: -1px; transform: scale(1.15); position: relative; z-index: 1; box-shadow: 0 0 0 7px #000; }
.px-board { position: relative; max-width: 560px; margin: 0 auto; }
.px-grid {
  display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); gap: 1px;
  background: #b5b5b5; border: 4px solid #000; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.px-cell { aspect-ratio: 1; }
.px-cell.empty { background: repeating-conic-gradient(#dbe6f2 0 25%, #c3d4e8 0 50%) 0 0 / 50% 50%; }
.px-cell.px-wrong { animation: pxwrong .4s steps(2) 4; }
@keyframes pxwrong { 50% { box-shadow: inset 0 0 0 4px #e53935; background-color: #ffb3ad; } }
/* letters along the top, numbers down the side (pxAxes); the label tracks line up with the board's squares inside its 4px border */
.px-axes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 4px; max-width: 590px; margin: 0 auto; }
.px-axes .px-board { max-width: none; margin: 0; }
.px-ax-top, .px-ax-left { display: grid; gap: 1px; font-family: Lexend, sans-serif; font-weight: 700; font-size: clamp(.55rem, 1.8vw, .8rem); line-height: 1; color: #4a4a4a; }
.px-ax-top { grid-template-columns: repeat(var(--w), minmax(0, 1fr)); padding: 0 4px; }
.px-ax-left { grid-template-rows: repeat(var(--h), minmax(0, 1fr)); padding: 4px 0; min-width: 1.2em; }
.px-ax-top span, .px-ax-left span { display: grid; place-items: center; }
.px-target .px-ax-top, .px-target .px-ax-left { font-size: .6rem; }
.px-grid.px-static { cursor: default; border-width: 3px; }
.px-target .px-ax-top { padding: 0 3px; }
.px-target .px-ax-left { padding: 3px 0; }
.px-mirror-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 3px dashed #8e5cff; pointer-events: none; }
.px-meter { margin: 10px auto 0; max-width: 560px; font-family: var(--pixel); font-weight: 700; text-align: center; }
.px-meter-bar { height: 14px; background: #1a1a1a; border: 2px solid #000; margin-bottom: 4px; }
.px-meter-bar div { height: 100%; background: var(--xp); transition: width .3s steps(5); }
.px-brief { margin-bottom: 14px; }
.px-brief ol { margin: 4px 0 0; padding-left: 1.3em; font-size: 1.08rem; }
.px-gallery-wrap { margin-top: 16px; }
.px-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.px-thumb { position: relative; }
.px-thumb img { display: block; width: 72px; height: 72px; image-rendering: pixelated; cursor: pointer; border: 3px solid #000; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.px-del { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; padding: 0; cursor: pointer; background: var(--bad); color: #fff; border: 2px solid #000; font-weight: 900; font-size: .75rem; }

/* ---------- poster editor ---------- */
.pe-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .pe-wrap { grid-template-columns: 1fr; } }
.pe-stage { max-width: 440px; width: 100%; margin: 0 auto; }
.poster {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; container-type: inline-size;
  border: 4px solid #000; box-shadow: 8px 8px 0 rgba(0, 0, 0, .3); touch-action: none; user-select: none; -webkit-user-select: none;
}
.pe { position: absolute; transform: translate(-50%, -50%); cursor: grab; line-height: 1.15; white-space: pre; text-align: center; touch-action: none; }
.pe-text { font-weight: 700; }
.pe-sticker { line-height: 1; }
.pe-circle { border-radius: 50%; }
.pe-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pe.sel { outline: 3px dashed #8e5cff; outline-offset: 4px; z-index: 50; }
.pe-warn { position: absolute; top: -.6em; right: -.9em; font-size: max(14px, .35em); }
.pe-tools { display: grid; gap: 8px; margin-bottom: 12px; }
.pe-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pe-row b { font-family: var(--pixel); }
.pe-tray { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: var(--paper); border: 3px solid #000; }
.pe-tray .pe-sticker { width: 46px; height: 46px; font-size: 1.6rem; cursor: pointer; background: #fff; border: 2px solid #000; position: static; transform: none; }
.pe-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.pe-swatches .px-swatch { width: 32px; height: 32px; }
.pe-input { flex: 1; min-width: 160px; padding: 8px 10px; font: inherit; font-size: 1.1rem; border: 3px solid #000; }
.pe-hint { color: #444; margin: 4px 0; }
.pe-warn-text { margin: 0; padding: 6px 10px; background: #ffe9a8; border: 2px solid #000; font-weight: 600; }
.pe-checks h3 { color: var(--brand-dark); font-size: 1.15rem; }
.pe-checks ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.pe-checks li { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.pe-checks li.ok span:not(.pe-box) { text-decoration: line-through; opacity: .7; }
.pe-checks small { color: #777; }
.pe-box { font-size: 1.3rem; background: none; border: 0; padding: 0; cursor: pointer; line-height: 1; }
.pe-thumb img { width: 72px; height: 96px; }
/* mini posters used as picture answers */
.opt-pic { padding: 8px; }
.mini-poster {
  aspect-ratio: 3 / 4; width: 100%; max-width: 200px; margin: 0 auto; container-type: inline-size; position: relative; overflow: hidden;
  border: 3px solid #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; padding: 6cqw; line-height: 1.1;
}
.mini-poster .mp-label { position: absolute; top: 3px; left: 3px; background: #000; color: #fff; font-family: var(--pixel); font-size: 12px; padding: 0 6px; }

/* ---------- arcade games ---------- */
.arc-screen { max-width: 720px; margin: 0 auto; border: 4px solid #000; box-shadow: 0 0 0 3px #555, 8px 8px 0 rgba(0, 0, 0, .3); background: #000; }
.arcade-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; touch-action: none; user-select: none; -webkit-user-select: none; }
.arc-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 720px; margin: 12px auto 0; }
.arc-pad { display: flex; gap: 12px; }
.arc-btn {
  min-width: 84px; height: 72px; padding: 0 16px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  background: #6f6f6f; color: #fff; border: 4px solid #000; box-shadow: var(--bevel), 0 5px 0 #000;
  font-family: var(--pixel); font-weight: 700; font-size: 1.6rem; text-shadow: 2px 2px 0 #000;
}
.arc-btn.down { transform: translateY(4px); box-shadow: var(--bevel-in), 0 1px 0 #000; filter: brightness(1.2); }
.arc-fire, .arc-jump { background: var(--bad); min-width: 150px; }
.invaders .arc-controls { justify-content: center; }
.arc-tip { text-align: center; color: #333; font-size: .95rem; margin: 8px 0 0; }
.bb-board { position: relative; max-width: 720px; margin: 0 auto; border: 4px solid #000; background: var(--deco) 0 0 / var(--deco-size) var(--deco-repeat), linear-gradient(var(--sky1), var(--sky2)); }
.bb-grid { display: grid; grid-template-columns: repeat(var(--c), 1fr); }
.bb-cell { aspect-ratio: 1; background-size: 100% 100%; image-rendering: pixelated; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.bb-cell:hover { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8); }
.bb-cell.placed { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.bb-cell.bb-sink { animation: bbsink .65s steps(4) forwards; }
@keyframes bbsink { to { transform: translateY(100%); opacity: 0; } }
.bb-robot, .bb-flag { position: absolute; pointer-events: none; display: grid; place-items: end center; transition: left .25s steps(3), top .2s steps(3); }
.bb-robot img { height: 96%; width: auto; image-rendering: pixelated; }
.bb-flag { font-size: clamp(1.2rem, 4vw, 2.2rem); transition: none; }
.bb-status { text-align: center; font-weight: 600; margin: 10px 0; }
.bb-inv-wrap h3 { color: var(--brand-dark); font-size: 1.2rem; }
.bb-inv { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-block {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; cursor: pointer;
  background: #e2e2e2; border: 3px solid #000; box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff;
  font-family: var(--pixel); font-weight: 700; font-size: 1.05rem;
}
.bb-block img { width: 36px; height: 36px; image-rendering: pixelated; border: 2px solid #000; }
.bb-block.on { background: var(--gold); }
.bb-block:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 520px) { .arc-btn { min-width: 64px; height: 60px; font-size: 1.2rem; } .arc-fire, .arc-jump { min-width: 110px; } }

/* ---------- avatar + wardrobe ---------- */
.wd-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .wd-wrap { grid-template-columns: 1fr; } }
.wd-left { text-align: center; position: sticky; top: 110px; }
@media (max-width: 760px) { .wd-left { position: static; } }
.wd-stage { padding: 18px 10px 0; border: 4px solid #000; }
.wd-stage img { display: block; margin: 0 auto; width: 100%; max-width: 264px; height: auto; image-rendering: pixelated; }
.wd-stage canvas { display: block; margin: 0 auto; height: min(300px, 70vw); max-width: 100%; image-rendering: pixelated; }
.wd-name { font-family: var(--pixel); font-weight: 700; font-size: 1.4rem; margin: 10px 0 6px; }
.wd-action { display: grid; gap: 10px; justify-items: center; }
.wd-msg { margin: 0; font-weight: 600; }
.wd-earn { font-size: .9rem; color: #555; margin: 12px 0 0; }
.wd-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wd-tab { padding: 6px 12px; cursor: pointer; background: #e2e2e2; color: #000; border: 3px solid #000; box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff; font-family: var(--pixel); font-weight: 700; font-size: 1rem; }
.wd-tab.on { background: var(--brand); color: #fff; text-shadow: 2px 2px 0 #000; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.wd-item {
  display: grid; justify-items: center; gap: 4px; padding: 8px 6px; cursor: pointer;
  background: #f4f4f4; border: 3px solid #000; box-shadow: inset -3px -3px 0 #a5a5a5, inset 3px 3px 0 #fff;
}
.wd-item img { height: 80px; image-rendering: pixelated; }
.wd-item img.wd-scene { width: 96px; height: 80px; object-fit: contain; object-position: center bottom; padding: 4px 0 0; border: 2px solid #000; }
.wd-item.sel { outline: 4px solid var(--gold); outline-offset: -1px; background: #fffbe0; }
.wd-iname { font-weight: 600; font-size: .9rem; text-align: center; line-height: 1.15; }
.wd-badge { font-family: var(--pixel); font-weight: 700; font-size: .85rem; padding: 1px 8px; border: 2px solid #000; background: #fff; }
.wd-item.wearing .wd-badge { background: var(--good); color: #fff; }
.wd-item.owned .wd-badge { background: var(--brand-soft); }
.wd-item.buy .wd-badge { background: var(--gold); }
.wd-item.pricey .wd-badge { background: #ddd; color: #777; }
.wd-item.locked { filter: grayscale(.6); }
.wd-item.locked .wd-badge { background: #333; color: #fff; }
.wd-item.special { background: linear-gradient(#fff6c8, #ffe27a); box-shadow: inset -3px -3px 0 #d9a400, inset 3px 3px 0 #fffbe6; }
.wd-ribbon { font-family: var(--pixel); font-weight: 700; font-size: .75rem; padding: 0 6px; background: #000; color: var(--gold); }
.me-avatar { height: 100px; image-rendering: pixelated; }
.me-row { display: flex; align-items: center; gap: 16px; margin: 18px 0; }
.me-row .name-row { margin: 0 0 10px; }
.me-fields { flex: 1; }
.me-link { flex: none; padding: 6px; border: 3px solid #000; }
.me-link:hover { filter: brightness(1.08); }
.cert-avatar { display: block; height: 110px; margin: 6px auto 0; image-rendering: pixelated; }

/* ---------- effects ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 500; }
.fly-star { position: fixed; z-index: 600; pointer-events: none; font-size: 2rem; margin: -1rem 0 0 -1rem; transition: transform .7s cubic-bezier(.5, -0.3, .7, 1), opacity .7s; }
.shake { animation: shake .4s steps(6); }

@keyframes enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.07); } 90% { transform: scale(.98); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes hurt { 0%, 100% { filter: none; transform: translateX(0); } 33% { filter: brightness(3); transform: translateX(-8px); } 66% { filter: brightness(3); transform: translateX(8px); } }
@keyframes slidein { from { transform: translateX(120%); } to { transform: none; } }
@keyframes slideout { to { transform: translateX(120%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  body { background: #fff; }
  body::after { display: none; }
  body > *:not(.cert-overlay) { display: none !important; }
  .cert-overlay { position: static; background: none; padding: 0; }
  .cert { box-shadow: none; width: 100%; }
  .no-print { display: none !important; }
}

/* ---------- clocks (shared/clock.js + the clock game) ---------- */
.q-pic { display: grid; place-items: center; margin: 6px 0 4px; }
.q-pic svg { width: 210px; max-width: 70vw; height: auto; }
.q-pic.emoji { font-size: 4rem; }
.opt-pic svg { width: 120px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.match-item svg { width: 124px; height: auto; display: block; margin: 0 auto; }
.game.clock { text-align: center; }
.clk-prompt { font-size: 1.35rem; font-weight: 600; margin: 4px 0 12px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.clk-words { font-family: var(--read); font-weight: 800; font-size: 1.6rem; color: var(--brand-dark); background: var(--brand-soft); border: 3px solid #000; padding: 2px 12px; }
.clk-wrap { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.clk-face { position: relative; width: min(330px, 84vw); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.clk-face.live { cursor: grab; }
.clk-face.live:active { cursor: grabbing; }
.clk-face svg { width: 100%; height: 100%; display: block; }
.clk-ghost { position: absolute; inset: 0; opacity: .32; pointer-events: none; animation: blink 1s steps(2) infinite; }
.clk-ghost svg circle { fill: none; stroke: none; }
.clk-controls { display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: 360px; }
.clk-nudge { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; }
.clk-nudge .btn { font-family: var(--read); font-size: .95rem; padding: .45em .6em; }
.clk-lcd { font-family: var(--read); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 2.4rem; letter-spacing: 3px; color: #7cfc3a; background: #12210f; border: 4px solid #000; box-shadow: inset 0 0 0 3px #2c4a24; padding: 4px 18px; min-width: 150px; text-shadow: 0 0 6px rgba(124,252,58,.6); }
.clk-lcd.small { font-size: 1.6rem; min-width: 0; padding: 0 12px; }
.clk-step { font-weight: 700; font-size: .95rem; }
.clk-hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.clk-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.clk-hr, .clk-key { font-family: var(--read); font-size: 1.25rem; font-weight: 700; min-width: 44px; min-height: 44px; background: #f4f4f4; border: 3px solid #000; box-shadow: inset -3px -3px 0 #a5a5a5, inset 3px 3px 0 #fff; cursor: pointer; color: var(--ink); }
.clk-hr.on { background: var(--gold); }
.clk-hr:active, .clk-key:active { transform: translateY(2px); }
@keyframes blink { 50% { opacity: .12; } }
.clk-ghost svg text { display: none; }
.dodge { position: relative; }
.dodge-pot { display: inline-block; margin: 0 auto 8px; padding: 4px 12px; font-weight: 700; font-size: 1rem; background: #12210f; color: #fff; border: 3px solid #000; }
.dodge .pop-text { left: 50%; top: 40%; transform: translateX(-50%); }

/* ---------- simulated experiments (ramp lab, seed garden) ---------- */
.lab-mission { max-width: 720px; margin: 0 auto 12px; padding: 10px 14px; background: #fff3a8; border: 4px solid #000; font-weight: 700; font-size: 1.1rem; }
.lab-mission-tag { font-family: var(--pixel); background: #000; color: #ffd43b; padding: 2px 8px; margin-right: 4px; }
.lab-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 14px auto 0; max-width: 720px; }
.lab-label { font-family: var(--pixel); font-weight: 700; margin-left: 6px; }
.lab-count { font-family: Lexend, sans-serif; font-weight: 700; font-size: 1.2rem; min-width: 2.6em; text-align: center; }
.lab-chip { font: inherit; font-weight: 700; padding: 8px 12px; min-height: 44px; background: #e2e2e2; color: #000; border: 3px solid #000; box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff; cursor: pointer; touch-action: manipulation; }
.lab-chip.on { background: var(--good-soft); box-shadow: inset -3px -3px 0 #6fbf4a, inset 3px 3px 0 #e2ffd2; }
.lab-chip:disabled { opacity: .6; cursor: not-allowed; }
.lab-ask:not(:empty) { margin-top: 16px; }
.lab .data-box { margin-top: 16px; }
.data-box tr.new td { background: #fff3a8; }

/* ---------- Around the World: Map Explorer ---------- */
.worldmap .lab-mission { text-align: left; }
.worldmap .arc-screen { background: #2f7cd6; }
.worldmap .arcade-canvas { cursor: pointer; }
.map-zoom-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px auto 0; }
.map-zoom { min-width: 54px; padding: 6px 12px; font-size: 1.2rem; }
.map-zoom-lbl { font-family: var(--read); font-weight: 700; min-width: 70px; text-align: center; }
.map-zoom-tip { font-size: .85rem; color: #444; width: 100%; text-align: center; }

/* ---------- Around the World: Chef ---------- */
.cook-ticket { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto 12px; padding: 10px 14px; background: #fff3a8; border: 4px solid #000; font-weight: 700; font-size: 1.1rem; }
.cook-cust { font-size: 3rem; line-height: 1; }
.cook-cust.happy { animation: hop .5s steps(4) 2; }
@keyframes hop { 50% { transform: translateY(-12px); } }
.cook-wrap { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 16px; max-width: 760px; margin: 0 auto 14px; align-items: start; }
@media (max-width: 620px) { .cook-wrap { grid-template-columns: 1fr; } }
.cook-side { display: flex; flex-direction: column; gap: 8px; }
.cook-card { background: var(--paper); border: 4px solid #000; box-shadow: var(--bevel); padding: 10px 14px; }
.cook-card h3 { margin: 0 0 6px; font-family: var(--pixel); font-size: 1.1rem; }
.cook-card ol { margin: 0; padding-left: 22px; font-size: .95rem; }
.cook-card li { margin: 3px 0; }
.cook-card li.done { text-decoration: line-through; color: #777; }
.cook-card li.now { font-weight: 700; background: #fff3a8; }
.cook-memory { font-weight: 700; margin: 6px 0; }
.cook-clock { font-family: var(--read); font-weight: 700; font-size: 1.2rem; text-align: center; background: #000; color: #7cfc3a; padding: 4px; border: 3px solid #3a3a3a; }
.cook-main { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cook-tip { font-family: var(--pixel); font-weight: 700; font-size: 1.1rem; background: #000; color: #ffd43b; padding: 4px 12px; animation: pop .3s steps(3); }
.cook-board { position: relative; width: min(100%, 360px); height: 220px; touch-action: none; user-select: none; -webkit-user-select: none;
  background: repeating-linear-gradient(90deg, #d9a35f 0 26px, #c98f4c 26px 30px); border: 4px solid #000; box-shadow: var(--bevel), 0 6px 0 rgba(0,0,0,.3);
  display: grid; place-items: center; overflow: hidden; }
.cook-board.over { outline: 4px solid #7cfc3a; outline-offset: -4px; }
.cook-board.act { cursor: pointer; animation: glow 1s steps(2) infinite; }
@keyframes glow { 50% { box-shadow: var(--bevel), 0 0 0 5px #ffd43b; } }
.cook-board.act-roll { background: repeating-linear-gradient(0deg, #e9d29a 0 10px, #cdb57a 10px 13px); }
.cook-board.act-stir { background: radial-gradient(circle, #3a3a3a 0 55%, #1b1b1b 56% 62%, #8b8b8b 63%); }
.cook-board.ready { background: radial-gradient(circle, #fff 0 45%, #e8e8e8 46% 55%, #c98f4c 56%); }
.cook-layer { grid-area: 1 / 1; font-size: 4.5rem; line-height: 1; transform: translate(var(--dx, 0), calc(var(--k, 0) * -6px)); transition: transform .15s; pointer-events: none; }
.cook-layer.made { font-size: 6rem; animation: pop .3s steps(3); }
.cook-layer svg { width: 110px; height: auto; display: block; }
.cook-layer.made svg { width: 150px; }
.cook-board.act-roll .cook-layer { transform: translate(var(--dx, 0), calc(var(--k, 0) * -6px)) scaleY(calc(1 - var(--roll, 0) * .6)); }
.cook-board.act-stir .cook-layer { transform: rotate(var(--spin, 0deg)); }
.cook-cut { position: absolute; top: 8%; bottom: 8%; width: 5px; background: #fff; box-shadow: 0 0 0 2px #000; animation: pop .25s steps(3); pointer-events: none; }
.cook-meter { width: min(100%, 360px); height: 18px; background: #333; border: 3px solid #000; }
.cook-meter > div { height: 100%; width: 0; background: #7cfc3a; transition: width .1s; }
.cook-item .ci-emoji { font-size: 1.6rem; }
.cook-item .ci-emoji svg { width: 30px; height: auto; display: block; }

/* ---------- Around the World: Say it! ---------- */
.phrase-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 12px; }
.phrase-card { background: var(--paper); border: 4px solid #000; box-shadow: var(--bevel); padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.phrase-emoji { font-size: 2.4rem; line-height: 1.1; }
.phrase-native { font-size: 1.7rem; font-weight: 700; font-family: "Hiragino Sans", "Noto Sans JP", "Thonburi", "Noto Sans Thai", var(--read); }
.phrase-roman { font-family: var(--pixel); font-size: 1.4rem; font-weight: 700; color: var(--brand-dark); }
.phrase-means { font-weight: 700; }
.phrase-sound { font-size: .9rem; color: #444; }
.phrase-note { font-size: .85rem; color: #444; }
.phrase-card .btn-row { margin-top: 8px; gap: 6px; }
.phrase-card .btn { padding: 8px 12px; font-size: 1rem; }
.phrase-stage { position: relative; max-width: 420px; height: 280px; margin: 10px auto; touch-action: none; user-select: none; -webkit-user-select: none;
  background: var(--brand-soft); border: 4px solid #000; box-shadow: var(--bevel-in); display: grid; place-items: center; }
.phrase-hero { height: 200px; image-rendering: pixelated; transform-origin: 50% 90%; transition: transform .08s; pointer-events: none; }
.phrase-hero.emoji { font-size: 7rem; height: auto; }
.phrase-hero.bowed { animation: bow 1s steps(6); }
@keyframes bow { 40%, 60% { transform: rotate(35deg); } }
.phrase-arrow { position: absolute; right: 20px; top: 40%; font-size: 2.6rem; animation: hop .8s steps(4) infinite; pointer-events: none; }
.wai-hand { position: absolute; top: 46%; font-size: 3.2rem; line-height: 1; touch-action: none; }
.wai-hand.left { left: 22%; pointer-events: none; }
.wai-hand.right { right: 8%; cursor: grab; animation: hop .8s steps(4) infinite; }
.wai-join { position: absolute; top: 40%; font-size: 4rem; }
.wai-join.pop { animation: pop .4s steps(3); }

/* ---------- read to me (read-along highlighting) ---------- */
.read-row { margin-top: 4px; }
.read-aloud { font-size: 1rem; padding: 8px 14px; }
.rd-line { background: rgba(255, 212, 59, .18); }
.rd-w.rd-now { background: #ffd43b; color: #000; box-shadow: 0 0 0 2px #ffd43b; border-radius: 2px; }

/* ---------- pixel icons (shared/pixel-icons.js swaps emoji for these) ---------- */
.pxi { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; line-height: 0; }
.pxi svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* ---------- pixel copy: pick a picture + score card ---------- */
.px-pick-title { text-align: center; color: var(--brand-dark); font-size: 1.3rem; margin: 0 0 12px; }
.px-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.px-choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; cursor: pointer;
  background: #fff8e6; border: 3px solid #000; box-shadow: var(--bevel), 0 4px 0 #000; font: inherit; }
.px-choice:hover, .px-choice:focus-visible { background: #fff1c4; transform: translateY(-2px); }
.px-choice-pic { width: 100%; max-width: 120px; padding: 6px; background: #cddcec; border: 2px solid #000; }
.px-choice-pic svg { display: block; width: 100%; height: auto; }
.px-choice-name { font-family: var(--pixel); font-weight: 700; font-size: 1.1rem; text-align: center; }
.px-choice-level { font-family: var(--pixel); font-size: .95rem; color: #b36b00; }
.px-choice-done { position: absolute; top: 6px; right: 8px; font-size: 1.3rem; }
.px-back { justify-content: flex-start; margin-bottom: 6px; }
.px-result { margin: 12px auto 0; max-width: 560px; padding: 12px; text-align: center; background: #fff8e6; border: 3px solid #000; box-shadow: var(--bevel); }
.px-result.stale { opacity: .6; }
.px-result.stale::after { content: "You changed it – tap I'm finished! again for a new score."; display: block; font-size: .9rem; margin-top: 4px; }
.px-score { font-family: var(--pixel); font-weight: 700; font-size: 2.6rem; color: var(--brand-dark); line-height: 1; }
.px-stars { font-size: 1.8rem; color: #e0a800; letter-spacing: 4px; }
.px-result p { margin: 6px 0 0; }
.px-result-tip { font-size: .95rem; color: #555; }
.wd-level { margin: 0 0 8px; }

/* ---------- Day Dial (24-hour clock) ---------- */
.daydial .arcade-canvas { cursor: ew-resize; touch-action: none; }
.dd-reads { display: flex; gap: 12px; justify-content: center; align-items: stretch; flex-wrap: wrap; margin: 14px auto 0; max-width: 720px; }
.dd-read { background: var(--paper); border: 4px solid #000; padding: 6px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; }
.dd-title { font-family: var(--pixel); font-weight: 700; font-size: 1rem; }
.dd-face { width: 104px; height: 104px; }
.dd-face svg { width: 100%; height: 100%; display: block; }
.dd-lcd { font-size: 1.9rem; min-width: 0; padding: 4px 12px; margin: auto 0; white-space: nowrap; }
.dd-lcd.locked { color: #ffd43b; text-shadow: none; }
.dd-lcd.locked::before { content: '🔒 '; font-size: 1.1rem; vertical-align: middle; }

/* ---------- Time Hops (durations) ---------- */
.th-list { text-align: center; font-size: 1.1rem; margin: 10px auto 0; max-width: 720px; font-variant-numeric: tabular-nums; }
.th-list b { font-family: var(--read); color: var(--brand-dark); }
.th-hop { font-family: var(--read); }

/* ---------- Knuckle months ---------- */
.kn-hands { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.kn-hand { display: flex; flex-direction: column; align-items: center; }
.kn-label { font-family: var(--pixel); font-weight: 700; margin-bottom: 6px; }
.kn-row { display: flex; align-items: flex-end; }
.kn-slot { width: 46px; border: 3px solid #000; border-bottom: 0; background: #f2c39b; box-shadow: inset -4px 0 0 #cf9466, inset 4px 4px 0 #ffe0c4; cursor: pointer; padding: 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; color: #1b1b1b; touch-action: manipulation; }
.kn-slot.knuckle { height: 82px; border-radius: 14px 14px 0 0; }
.kn-slot.dip { height: 58px; background: #e6b085; margin: 0 -3px; position: relative; z-index: 1; }
.kn-slot.spare { opacity: .55; cursor: default; }
.kn-slot.glow { outline: 4px solid #ffd43b; outline-offset: -8px; animation: blink 1s steps(2) infinite; }
.kn-slot.done.knuckle { background: #9be15d; box-shadow: inset -4px 0 0 #4caf2a, inset 4px 4px 0 #d8ffb8; }
.kn-slot.done.dip { background: #8fdcff; box-shadow: inset -4px 0 0 #2f80ed, inset 4px 4px 0 #e6f7ff; }
.kn-month { font-family: var(--pixel); font-weight: 700; font-size: .8rem; }
.kn-days { font-family: var(--read); font-weight: 800; font-size: 1.15rem; }
.kn-fist { width: 100%; height: 64px; background: #f2c39b; border: 3px solid #000; box-shadow: inset -4px -4px 0 #cf9466; display: flex; justify-content: space-evenly; align-items: flex-start; }
.kn-fist i { display: block; width: 3px; height: 26px; background: #cf9466; }
@media (max-width: 420px) { .kn-slot { width: 38px; } .kn-month { font-size: .7rem; } }

/* ---------- Lane Runner ---------- */
.runner .arcade-canvas { touch-action: none; cursor: pointer; }
.runner .arc-controls { justify-content: center; gap: 18px; }
.runner .arc-controls { flex-wrap: wrap; }
.runner .runner-btn { min-width: 130px; font-size: 1.1rem; padding: 12px 16px; }
.runner .runner-jump { min-width: 110px; }
.runner .runner-dash { background: #ffd43b; color: #1b1b1b; min-width: 120px; }
@media (max-width: 520px) { .runner .runner-btn { min-width: 84px; font-size: .95rem; padding: 8px; } .runner .runner-jump, .runner .runner-dash { min-width: 84px; font-size: .95rem; } }

/* ---------- starter picker: "Boy or girl?", then four looks (Avatar.showPicker) ---------- */
.pick-card { width: min(560px, 100%); text-align: center; animation: pop .3s steps(3); }
.pick-card h2 { margin: 0 0 4px; font-size: 1.8rem; }
.pick-sub { margin: 0 0 14px; font-weight: 600; }
.pick-kind { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.btn.pink { background: #e0479e; }
.btn.blue { background: #1e6fd9; }
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 480px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }
.pick-look { padding: 12px 0 0; cursor: pointer; border: 4px solid #000; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.pick-look:hover, .pick-look:focus-visible { outline: 4px solid var(--gold); outline-offset: -1px; transform: translateY(-3px); }
.pick-look img { display: block; margin: 0 auto; width: 72px; height: auto; image-rendering: pixelated; }
.pick-back { margin-top: 14px; }
.wd-restart { margin-top: 12px; font-size: .9rem; }

/* ---------- more question types (QTYPES in engine.js) ---------- */
.q-tag { margin: 6px 0 10px; font-family: var(--pixel); font-weight: 700; font-size: .95rem; color: var(--brand-dark); }
.check .q-tag { color: var(--gold); }
.q-check { margin-top: 4px; }
/* evidence: sentences you can tap */
.ev-passage { padding: 12px 16px; background: var(--paper); color: var(--ink); border: 3px solid #000; box-shadow: var(--bevel-in); font-size: 1.15rem; }
.ev-passage p { margin: 0 0 8px; }
.ev-sent.tap { cursor: pointer; border-bottom: 2px dashed rgba(0, 0, 0, .3); }
.ev-sent.tap:hover, .ev-sent.tap:focus-visible { background: #fff3a8; outline: none; }
.ev-sent.right { background: var(--good-soft); box-shadow: 0 0 0 2px #4caf2a; }
.ev-sent.wrong { background: var(--bad-soft); }
/* hotspot: invisible tap zones over a picture */
.hs-pic { position: relative; max-width: 440px; margin: 0 auto; background: var(--paper); border: 3px solid #000; }
.hs-img svg, .hs-img img { display: block; width: 100%; height: auto; }
.hs-img.emoji { font-size: 9rem; text-align: center; line-height: 1.2; }
.hs-spot { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; cursor: pointer; background: transparent; border: 3px dashed transparent; border-radius: 50%; }
.hs-spot:hover, .hs-spot:focus-visible { border-color: rgba(0, 0, 0, .45); outline: none; }
.hs-spot.right { border: 4px solid #4caf2a; background: rgba(124, 252, 58, .25); }
.hs-spot.wrong { border: 4px solid var(--bad); background: rgba(229, 57, 53, .18); }
.pop-text.hs-name { left: 50%; top: -26px; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; background: #000; color: #fff; font-size: .9rem; }
/* slider: a number line with a draggable marker */
.sl-track { position: relative; height: 74px; margin: 34px 22px 6px; touch-action: none; cursor: pointer; }
.sl-line { position: absolute; left: 0; right: 0; top: 18px; height: 8px; background: #000; }
.sl-tick { position: absolute; top: 12px; width: 4px; height: 20px; margin-left: -2px; background: #000; }
.sl-tick span { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: Lexend, sans-serif; font-weight: 700; font-size: clamp(.65rem, 2vw, .9rem); }
.check .sl-line, .check .sl-tick { background: #fff; }
.sl-knob { position: absolute; top: 4px; width: 28px; height: 36px; margin-left: -14px; background: var(--gold); border: 3px solid #000; box-shadow: var(--bevel); cursor: grab; }
.sl-knob:focus-visible { outline: 4px solid #fff; }
.sl-knob.right { background: var(--good); }
.sl-val { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; background: #000; color: #fff; font-family: Lexend, sans-serif; font-weight: 700; }
.sl-val:empty { display: none; }
.sl-note { min-height: 1.4em; text-align: center; font-weight: 700; }
/* oddone: the "why?" step */
.odd-why { margin-top: 14px; padding-top: 6px; border-top: 3px dashed rgba(0, 0, 0, .25); }
/* build: tiles into a row */
.bld-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 62px; padding: 8px; background: var(--paper); border: 3px dashed #000; }
.bld-row.right { border-style: solid; background: var(--good-soft); }
.bld-empty { color: #777; font-weight: 600; }
.bld-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0; }
.bld-tile { min-width: 44px; padding: 8px 12px; cursor: pointer; font-family: Lexend, sans-serif; font-weight: 700; font-size: 1.3rem; color: #000; background: #fff; border: 3px solid #000; box-shadow: inset -3px -3px 0 #a5a5a5, 0 3px 0 #000; }
.bld-row .bld-tile { background: #fff3a8; }
/* type: a short written answer */
.q-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: 1.2rem; font-weight: 600; }
.q-reveal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; background: #fff3a8; border: 3px solid #000; font-size: 1.1rem; }
.q-reveal b { font-size: 1.2rem; }
.q-type { flex: 1 1 180px; min-width: 0; padding: 10px 12px; font: 600 1.3rem Lexend, sans-serif; background: #fff; color: #000; border: 3px solid #000; box-shadow: inset 3px 3px 0 #ccc; }
.q-type.right { background: var(--good-soft); }
.q-type.wrong { background: var(--bad-soft); }
/* predict: a guess, then the reveal and a "why?" */
.opt.picked { outline: 4px solid var(--gold); outline-offset: -1px; }
.pred-after { margin-top: 14px; }
.pred-reveal { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #fff8e6; color: var(--ink); border: 3px solid #000; animation: pop .3s steps(3); }
.pred-reveal p { margin: 0; font-weight: 600; font-size: 1.1rem; }
.pred-pic.emoji { font-size: 3rem; }
.pred-pic svg { width: 90px; height: auto; display: block; }

/* ---------- comic reading pages (read card with `comic`) ---------- */
.comic .story-title { margin: 0 0 12px; }
.comic-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; gap: 12px; }
.comic-panel { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--brand-soft); border: 4px solid #000; box-shadow: 4px 4px 0 #000; }
.comic-panel.me { background: #fff3c4; }
.comic-scene { display: grid; place-items: center; min-height: 90px; background: rgba(255, 255, 255, .55); border: 3px solid #000; }
.comic-scene.emoji { font-size: 4rem; line-height: 1.2; }
.comic-scene svg { width: 100%; max-height: 150px; height: auto; display: block; }
.comic-who { display: flex; align-items: center; gap: 8px; }
.comic-panel.me .comic-who { flex-direction: row-reverse; }
.comic-face { width: 52px; height: 52px; display: grid; place-items: center; flex: none; background: #fff; border: 3px solid #000; image-rendering: pixelated; object-fit: contain; }
.comic-face.emoji { font-size: 2rem; }
.comic-face svg { width: 100%; height: 100%; }
.comic-name { font-family: var(--pixel); font-weight: 700; font-size: .95rem; }
.comic-bubble { position: relative; padding: 10px 12px; background: #fff; border: 3px solid #000; border-radius: 0; }
.comic-bubble::before { content: ""; position: absolute; top: -12px; left: 18px; border: 6px solid transparent; border-bottom: 6px solid #000; border-left-width: 0; }
.comic-panel.me .comic-bubble::before { left: auto; right: 18px; border-left-width: 6px; border-right-width: 0; }
.comic-bubble p { margin: 0; font-size: 1.15rem; line-height: 1.55; }

/* ---------- mystery word game ---------- */
.my-card { max-width: 620px; margin: 0 auto 14px; padding: 14px 18px; background: #1b1430; color: #fff; border: 4px solid #000; box-shadow: inset 0 0 0 3px #4a3a7a; }
.my-head { font-family: var(--pixel); font-weight: 700; font-size: 1.2rem; color: var(--gold); text-align: center; }
.my-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 12px 0; }
.my-letters span { width: 30px; height: 38px; display: grid; place-items: center; background: #fff; color: #000; border: 3px solid #000; box-shadow: inset 0 -4px 0 #bbb; font: 800 1.3rem Lexend, sans-serif; }
.my-letters span.gap { background: none; border: 0; box-shadow: none; width: 12px; }
.my-clues { margin: 0; padding-left: 1.4em; font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
.my-clues li.new { color: #ffe27a; animation: pop .3s steps(3); }
.my-worth { margin-top: 6px; text-align: center; font-family: var(--pixel); font-size: .95rem; color: #9fe8ff; }
.my-answer { max-width: 620px; margin: 0 auto; }
.comic .read-row { margin-top: 12px; }

/* ---------- teach the robot: the robot "teaches", the child fixes its mistakes ---------- */
.tb-robot { display: flex; gap: 14px; align-items: flex-start; max-width: 760px; margin: 0 auto 14px; }
.tb-face { flex: none; display: grid; place-items: center; width: 76px; height: 76px; font-size: 3rem; background: #2b3a4a; border: 4px solid #000; box-shadow: var(--bevel); }
.tb-bubble { position: relative; flex: 1; padding: 12px 16px; background: #fff; border: 4px solid #000; font-size: 1.1rem; }
.tb-bubble::before { content: ""; position: absolute; left: -16px; top: 22px; border: 8px solid transparent; border-right-color: #000; }
.tb-lesson { max-width: 760px; margin: 0 auto; padding: 12px; background: #dff3ff; border: 4px dashed #2b3a4a; }
.tb-lesson .fx-sentence { padding: 12px; background: #fff; border: 3px solid #000; }
.tb-notes { max-width: 760px; margin: 0 auto; }
.tb-notes h3 { margin: 0 0 8px; font-family: var(--pixel); }
.tb-notes li { margin: 6px 0; font-size: 1.1rem; }
.tb-notes strong { background: var(--good-soft); padding: 0 3px; }

/* ---------- detective case: case file, evidence board with clue cards, stamp ---------- */
.cs-file { position: relative; max-width: 760px; margin: 0 auto 14px; padding: 26px 18px 10px; background: #f3e2b8; border: 4px solid #000; box-shadow: var(--bevel); font-size: 1.1rem; }
.cs-tag { position: absolute; top: -14px; left: 14px; padding: 2px 10px; background: #000; color: #ffd43b; font-family: var(--pixel); font-weight: 700; font-size: .85rem; }
.cs-pic { display: block; max-width: 180px; margin: 0 auto 8px; }
.cs-board { position: relative; max-width: 760px; margin: 0 auto 16px; padding: 24px 12px 12px; background: #b5835a; border: 4px solid #000; box-shadow: inset 0 0 0 4px #8a5a32; }
.cs-clues { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cs-clue { position: relative; min-height: 92px; border: 3px solid #000; background: #fff8e1; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.cs-clue:nth-child(odd) { transform: rotate(-1.5deg); }
.cs-clue:nth-child(even) { transform: rotate(1.2deg); }
.cs-back { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; font-size: 1.8rem; background: #5a6b7a; color: #fff; }
.cs-back small { font-family: var(--pixel); font-size: .8rem; }
.cs-front { display: flex; gap: 8px; align-items: flex-start; padding: 10px; font-size: .95rem; visibility: hidden; }
.cs-clue.open .cs-back { display: none; }
.cs-clue.open .cs-front { visibility: visible; animation: cs-pop .4s steps(4); }
@keyframes cs-pop { from { transform: scale(.6); } to { transform: none; } }
.cs-icon { font-size: 1.6rem; line-height: 1; }
.cs-found { display: flex; gap: 12px; align-items: center; max-width: 620px; margin: 6px auto 12px; padding: 12px 16px; background: #fff8e1; border: 4px solid #000; font-size: 1.15rem; font-weight: 600; }
.cs-closed { max-width: 640px; margin: 0 auto; text-align: center; font-size: 1.1rem; }
.cs-stamp { display: inline-block; margin: 6px 0 12px; padding: 6px 18px; color: #c62828; border: 5px solid #c62828; font-family: var(--pixel); font-weight: 700; font-size: 2rem; letter-spacing: 2px; transform: rotate(-6deg); animation: cs-stamp .35s steps(3); }
@keyframes cs-stamp { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } to { transform: rotate(-6deg); opacity: 1; } }

/* ---------- investigation: predict → test → explain ---------- */
.iv-head { max-width: 760px; margin: 0 auto 14px; }
.iv-question { margin-bottom: 10px; padding: 10px 14px; background: #fff3a8; border: 4px solid #000; font-weight: 700; font-size: 1.2rem; text-align: center; }
.iv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.iv-step { padding: 6px 4px; text-align: center; font-family: var(--pixel); font-weight: 700; background: #d9d9d9; color: #666; border: 3px solid #000; }
.iv-step.now { background: var(--brand); color: #fff; box-shadow: var(--bevel); }
.iv-step.done { background: var(--good-soft); color: #000; }
.iv-step.done::after { content: " ✔"; }
.iv-recall { max-width: 720px; margin: 0 auto 12px; padding: 8px 12px; background: #efe6ff; border: 3px solid #000; text-align: center; }
.iv-result { max-width: 720px; margin: 0 auto; font-size: 1.1rem; }
.iv-result h3 { margin: 0 0 8px; font-family: var(--pixel); }
.iv-verdict { padding: 8px 10px; background: #fff3a8; border: 3px solid #000; font-weight: 700; }
.iv-verdict.right { background: var(--good-soft); }
@media (max-width: 560px) {
  .tb-face { width: 56px; height: 56px; font-size: 2.2rem; }
  .tb-bubble { font-size: 1rem; }
  .iv-step { font-size: .8rem; }
}

/* ---------- Speech Marks (tap the gaps) ---------- */
.speechmarks { text-align: center; }
.sm-comic { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 6px auto 4px; }
.sm-who { width: 64px; height: 64px; font-size: 48px; line-height: 64px; flex: none; image-rendering: pixelated; }
.sm-who svg { width: 100%; height: 100%; }
.sm-bubble { position: relative; font: 600 1.2rem var(--read); background: #fff; color: #000; border: 3px solid #000; padding: 10px 14px; margin-bottom: 30px; box-shadow: 0 3px 0 #000; max-width: 420px; }
.sm-bubble::after { content: ''; position: absolute; left: -14px; bottom: 6px; border: 8px solid transparent; border-right: 10px solid #000; }
.sm-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 10px; margin: 14px auto 18px; max-width: 760px; padding: 12px 8px; background: #fff; border: 3px solid #000; box-shadow: 0 3px 0 #000; color: #000; }
.sm-unit { display: inline-flex; align-items: center; white-space: nowrap; }
.sm-piece { font: 600 1.35rem var(--read); padding: 0 1px; }
.sm-piece.punct { padding: 0; }
.sm-gap { width: 22px; min-height: 44px; margin: 0 1px; padding: 0; border: 0; border-bottom: 3px dotted #b7b7b7; background: transparent; font: 800 1.9rem/1 var(--read); color: var(--bad, #e53935); cursor: pointer; }
.sm-gap:hover { background: #fffbe0; }
.sm-gap.tight { width: 12px; margin: 0 -3px; }
.sm-gap.on { border-bottom-color: transparent; color: #2b6fd6; animation: pop .25s steps(3); }
.sm-line.done .sm-gap:not(.on) { visibility: hidden; width: 6px; }
.sm-line.done .sm-gap.on { color: #2e9e3e; }
@media (max-width: 720px) { .sm-piece { font-size: 1.15rem; } .sm-gap { width: 18px; } .sm-gap.tight { width: 12px; } }

/* ---------- Place Value Blocks ---------- */
.pvblocks { text-align: center; }
.pv-mat { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0; max-width: 760px; margin: 0 auto; border: 4px solid #000; background: #fff; box-shadow: 0 4px 0 #000; }
.pv-col { display: flex; flex-direction: column; min-height: 210px; border-left: 3px solid #000; }
.pv-col:first-child { border-left: 0; }
.pv-col.over { background: #fffbe0; }
.pv-col.full { background: #ffe9e6; }
.pv-head { font-family: var(--pixel); font-size: 1.05rem; padding: 6px 4px; color: #fff; border-bottom: 3px solid #000; }
.pv-col-h .pv-head { background: #2b6fd6; } .pv-col-t .pv-head { background: #2e9e3e; } .pv-col-o .pv-head { background: #e8590c; }
.pv-pile { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 5px; padding: 10px 6px; cursor: pointer; }
.pv-digit { font: 700 2.2rem/1 Lexend, sans-serif; padding: 6px 0 8px; border-top: 3px dashed #c9ced6; color: #000; }
.pv-col.full .pv-digit { color: var(--bad, #e53935); }
.pv-sum { margin: 10px auto 4px; }
.pv-total { display: inline-block; font: 700 2rem/1 Lexend, sans-serif; background: #000; color: #ffd43b; padding: 8px 18px; border: 3px solid #000; box-shadow: inset 0 0 0 3px #444; }
.pv-block { display: block; flex: none; border: 2px solid #000; }
.pv-block.pop { animation: pop .25s steps(3); }
.pv-h { width: 62px; height: 62px; background-color: #6ea8ff; background-image: linear-gradient(#1b1b1b55 1px, transparent 1px), linear-gradient(90deg, #1b1b1b55 1px, transparent 1px); background-size: 6px 6px; }
.pv-t { width: 14px; height: 62px; background-color: #6fd36a; background-image: linear-gradient(#1b1b1b55 1px, transparent 1px); background-size: 14px 6px; }
.pv-o { width: 16px; height: 16px; background: #ffa94d; }
.pv-pile.many .pv-o { width: 13px; height: 13px; }
.pv-supply { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 14px auto 0; max-width: 760px; }
.pv-take { display: inline-flex; align-items: center; gap: 8px; font: 700 1rem Lexend, sans-serif; padding: 8px 12px; min-height: 56px; background: #e2e2e2; color: #000; border: 3px solid #000; box-shadow: inset -3px -3px 0 #9a9a9a, inset 3px 3px 0 #fff, 0 3px 0 #000; cursor: grab; touch-action: none; }
.pv-take .pv-h { width: 40px; height: 40px; background-size: 4px 4px; } .pv-take .pv-t { width: 10px; height: 40px; background-size: 10px 4px; }
.pv-swaps:not(:empty) { margin-top: 12px; }
.pv-read { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 12px; }
.pv-read:empty { display: none; }
.pv-read-q { font-weight: 700; font-size: 1.1rem; }
.pv-input { font: 700 1.6rem Lexend, sans-serif; width: 4.2em; text-align: center; padding: 6px; border: 3px solid #000; }
@media (max-width: 720px) {
  .pv-head { font-size: .8rem; } .pv-col { min-height: 170px; }
  .pv-h { width: 44px; height: 44px; background-size: 4.4px 4.4px; } .pv-t { width: 11px; height: 44px; background-size: 11px 4.4px; } .pv-o { width: 13px; height: 13px; }
  .pv-take span { font-size: .85rem; }
}

/* ---------- Column Sums (the written method, with exchanging) ---------- */
.colsum { text-align: center; }
.cs-grid { display: inline-grid; grid-template-columns: 40px repeat(calc(var(--n) - 1), 64px); gap: 4px 6px; align-items: center; margin: 10px auto 14px; padding: 12px 18px; background: #fff; border: 3px solid #000; box-shadow: 0 3px 0 #000; color: #000; font-family: Lexend, sans-serif; }
.cs-head { font-family: var(--pixel); font-size: .8rem; color: #555; }
.cs-op { font: 700 2.2rem/1 Lexend, sans-serif; }
.cs-digit { font: 700 2.4rem/1 Lexend, sans-serif; min-height: 52px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: #000; }
.cs-digit.top:not(:disabled) { cursor: pointer; border-bottom: 3px dotted #b7b7b7; }
.cs-digit.top:not(:disabled):hover { background: #fffbe0; }
.cs-digit s { color: #999; text-decoration-thickness: 3px; text-decoration-color: var(--bad, #e53935); }
.cs-digit sup { font-size: .5em; color: #2b6fd6; margin: 0 1px; }
.cs-carry { width: 28px; height: 26px; margin: 0 auto; padding: 0; font: 700 1.1rem Lexend, sans-serif; color: #2b6fd6; background: #f3f6fb; border: 2px dashed #9aa3ad; }
.cs-carry:disabled { visibility: hidden; }
.cs-carry.want { border: 3px solid #ff8c1a; background: #fff3a8; animation: pop .4s steps(3) infinite alternate; }
.cs-line { grid-column: 1 / -1; height: 4px; background: #000; }
.cs-ans { font: 700 2.4rem/1 Lexend, sans-serif; min-height: 56px; display: grid; place-items: center; border: 3px solid transparent; color: #2e9e3e; }
.cs-ans.now { border-color: #ff8c1a; background: #fff8d6; }
.cs-keys { display: grid; grid-template-columns: repeat(5, 54px); gap: 6px; justify-content: center; margin: 0 auto 10px; }
.cs-keys .cw-key { height: 50px; font: 700 1.4rem Lexend, sans-serif; }
@media (max-width: 480px) { .cs-grid { grid-template-columns: 30px repeat(calc(var(--n) - 1), 50px); padding: 10px; } .cs-digit, .cs-ans { font-size: 2rem; } }

/* ---------- Syllable Drum ---------- */
.syllables { text-align: center; }
.sy-word { display: inline-flex; align-items: center; gap: 10px; margin: 6px auto 8px; padding: 8px 16px; font: 700 2rem Lexend, sans-serif; background: #fff; color: #000; border: 3px solid #000; box-shadow: 0 3px 0 #000; }
.sy-emoji { font-size: 2.2rem; }
.sy-drum { display: block; width: 130px; height: 130px; margin: 12px auto 6px; font-size: 80px; line-height: 1; background: #ffd43b; border: 4px solid #000; border-radius: 50%; box-shadow: inset -6px -6px 0 rgba(0,0,0,.2), 0 6px 0 #000; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sy-drum.hit { animation: syhit .18s steps(2); }
@keyframes syhit { 50% { transform: translateY(5px) scale(.94); box-shadow: inset -6px -6px 0 rgba(0,0,0,.2), 0 1px 0 #000; } }
.sy-dots { display: flex; justify-content: center; gap: 10px; min-height: 26px; margin: 8px auto 12px; }
.sy-dots i { width: 22px; height: 22px; border: 3px solid #000; background: #fff; }
.sy-dots i.on { background: #2e9e3e; }
/* Labyrinth: a dark stone maze, lit around the hero, with Ariadne's red thread */
.lb-board { position: relative; max-width: 620px; margin: 0 auto; border: 4px solid #000; background: #0b0b10; touch-action: none; user-select: none; -webkit-user-select: none; }
.lb-grid { display: grid; grid-template-columns: repeat(var(--c), 1fr); }
.lb-cell { position: relative; aspect-ratio: 1; background: #000; }
.lb-cell.seen { background: #3a3326; }
.lb-cell.seen.wall { background: #2b2b33; box-shadow: inset 0 -4px 0 #1c1c22; }
.lb-cell.lit { background: #a88c5f; }
.lb-cell.lit.wall { background: #7d7d8c; box-shadow: inset 0 -5px 0 #55555f, inset 4px 0 0 #9a9aab; }
.lb-cell.gate b { display: none; }
.lb-cell.gate.seen b { position: absolute; inset: 8%; display: grid; place-items: center; font: 700 clamp(.8rem, 2.6vw, 1.2rem) Lexend, sans-serif; color: #fff; background: repeating-linear-gradient(90deg, #6b4423 0 22%, #c08a52 22% 34%); border: 2px solid #000; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.lb-cell.gate.opened b { display: none; }
.lb-thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lb-thread polyline { fill: none; stroke: #ff3b3b; stroke-width: .12; stroke-linejoin: round; stroke-linecap: round; }
.lb-board.glow .lb-thread polyline { stroke-width: .18; filter: drop-shadow(0 0 .15px #ffd43b); }
.lb-hero, .lb-door, .lb-beast { position: absolute; display: grid; place-items: center; pointer-events: none; }
.lb-hero { transition: left .12s steps(2), top .12s steps(2); }
.lb-hero img { height: 92%; width: auto; image-rendering: pixelated; }
.lb-hero.bump { animation: lbbump .2s steps(2); }
@keyframes lbbump { 50% { transform: translateX(8%); } }
.lb-door { font-size: clamp(1rem, 3.6vw, 1.8rem); }
.lb-beast .lb-beast-pic { width: 100%; height: 100%; display: grid; place-items: center; font-size: clamp(1rem, 3.6vw, 1.8rem); }
.lb-beast .lb-beast-pic svg { width: 90%; height: auto; }
.lb-beast.beaten { opacity: .45; filter: grayscale(1); }
.lb-pad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-areas: ". u ." "l . r" ". d ."; gap: 4px; justify-content: center; margin: 6px auto 10px; }
.lb-arrow { width: 56px; height: 48px; padding: 0; font-size: 1.4rem; touch-action: manipulation; }
.lb-arrow:nth-child(1) { grid-area: u; } .lb-arrow:nth-child(2) { grid-area: l; } .lb-arrow:nth-child(3) { grid-area: r; } .lb-arrow:nth-child(4) { grid-area: d; }
.lb-ask:not(:empty) { max-width: 620px; margin: 10px auto 0; }
/* Shop Till: UK coins and notes, a customer with their shopping, and the counter */
.shop-customer { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 10px auto; }
.shop-who { font-size: 3rem; }
.shop-order { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shop-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; color: #000; border: 3px solid #000; box-shadow: 0 3px 0 #000; font-weight: 700; }
.shop-item-pic { font-size: 1.6rem; }
.shop-price { padding: 2px 8px; font-family: Lexend, sans-serif; background: #ffd43b; border: 2px solid #000; }
.shop-given { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.shop-desk { max-width: 620px; margin: 10px auto; padding: 10px; background: #8a5a32; border: 4px solid #000; box-shadow: inset 0 4px 0 #b0703c; }
.shop-counter-head { color: #fff; font-weight: 700; margin-bottom: 6px; text-shadow: 1px 1px 0 #000; }
.shop-counter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 8px; background: #6b4425; border: 3px dashed #ecd3a4; }
.shop-counter.over { background: #7d5130; border-color: #ffd43b; }
.shop-empty { color: #ecd3a4; font-weight: 700; }
.shop-total { min-height: 1.5em; margin-top: 6px; color: #fff; font: 700 1.1rem Lexend, sans-serif; text-align: center; text-shadow: 1px 1px 0 #000; }
.shop-till { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; margin: 6px auto 10px; }
.coin { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #000; box-shadow: inset -3px -4px 0 rgba(0,0,0,.25), inset 3px 3px 0 rgba(255,255,255,.45); cursor: pointer; font-style: normal; user-select: none; -webkit-user-select: none; touch-action: none; }
.coin b { font: 700 .95rem Lexend, sans-serif; color: #1b1b1b; }
.coin-1, .coin-2 { background: #c86b3c; }
.coin-1 { width: 48px; height: 48px; }
.coin-5 { width: 44px; height: 44px; }
.coin-5, .coin-10, .coin-20, .coin-50 { background: #d9dde3; }
.coin-20, .coin-50 { border-radius: 0; clip-path: polygon(50% 0, 89% 19%, 98% 61%, 72% 95%, 28% 95%, 2% 61%, 11% 19%); border: 0; box-shadow: inset 0 0 0 3px #1b1b1b, inset -3px -4px 0 rgba(0,0,0,.25); }
.coin-20 { width: 52px; height: 52px; }
.coin-50 { width: 64px; height: 64px; }
.coin-100 { background: radial-gradient(circle, #ffd43b 52%, #d9dde3 54%); width: 60px; height: 60px; }
.coin-200 { background: radial-gradient(circle, #d9dde3 52%, #ffd43b 54%); width: 66px; height: 66px; }
.coin.note { width: 92px; height: 52px; border-radius: 4px; }
.coin-500 { background: #2ec4b6; } .coin-1000 { background: #ff8c1a; } .coin-2000 { background: #8e5cff; }
.coin.drag-ghost { position: fixed; z-index: 90; pointer-events: none; }
.shop-counter .coin { cursor: pointer; }
.shop-given .coin { width: 44px; height: 44px; cursor: default; } .shop-given .coin.note { width: 70px; height: 40px; }
.shop-given .coin b { font-size: .8rem; }