html { scroll-padding-top: 96px; }
/* ==========================================================
   The Trojan Horse – adventure screen (playful, game-like)
   ========================================================== */
body.adventure { min-height: 100vh; background: #F7EEDA var(--paper-tex); }
body.adventure.night { background-color: #EDE6D3; }
.screen[hidden] { display: none !important; }
#game { padding: 0; }

/* Chunky game buttons */
.gbtn {
  --bg: #F2B53A; --bg2: #E3A72F; --fg: #3B2A08; --edge: #A86C0F;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em;
  min-height: 58px; padding: .7em 1.6em; border: 0; border-radius: 18px; cursor: pointer;
  color: var(--fg); background: linear-gradient(180deg, var(--bg), var(--bg2));
  box-shadow: 0 6px 0 var(--edge), 0 12px 22px rgba(60, 40, 10, .22), inset 0 2px 0 rgba(255,255,255,.45);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; text-decoration: none;
}
.gbtn:hover { filter: brightness(1.05) saturate(1.05); }
.gbtn:active, .gbtn.pressed { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge), 0 4px 8px rgba(60,40,10,.2), inset 0 2px 0 rgba(255,255,255,.35); }
.gbtn.green { --bg: #3E7A52; --bg2: #2C6040; --fg: #fff; --edge: #183829; }
.gbtn.cream { --bg: #FFFDF7; --bg2: #F4E8CC; --fg: var(--forest); --edge: #CDB78A; }
.gbtn.big { font-size: 1.45rem; min-height: 68px; padding: .7em 2em; border-radius: 22px; }
.gbtn.small { font-size: 1rem; min-height: 46px; padding: .5em 1.1em; border-radius: 14px; box-shadow: 0 4px 0 var(--edge), 0 8px 14px rgba(60,40,10,.18), inset 0 2px 0 rgba(255,255,255,.45); }
.gbtn.small:active { transform: translateY(3px); }
.gbtn .icon { width: 1.3em; height: 1.3em; }
.gbtn[disabled] { filter: grayscale(.5); opacity: .6; cursor: not-allowed; }

/* ---------- SETUP SCREEN ---------- */
#setup { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 28px 16px 40px; overflow: hidden; }
.setup-bg { position: absolute; inset: 0; }
.setup-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
.setup-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,56,41,.35), rgba(24,56,41,.65)); }
.setup-card { position: relative; width: min(860px, 100%); background: var(--paper); border-radius: 32px; box-shadow: var(--shadow-lg); padding: clamp(22px, 4vw, 44px); border: 6px solid #FBE7B6; animation: pop .5s cubic-bezier(.2,.9,.3,1.2) both; }
.setup-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.setup-top .brand img { height: 46px; }
.top-actions { display: inline-flex; align-items: center; gap: 8px; }
.step-sub { margin: -4px 0 10px; font-size: .95rem; color: var(--muted); }
.read-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.read-pick .level .icon { width: 28px; height: 28px; color: var(--forest); margin: 0 auto 4px; display: block; }
@media (max-width: 560px) { .read-pick { grid-template-columns: 1fr; } }
.who-reading { margin-bottom: 14px; }
.who-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.who-chip { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--forest); background: var(--paper); color: var(--forest); font: 800 1rem var(--font-body); cursor: pointer; }
.who-chip[aria-pressed="true"] { background: var(--forest); color: var(--paper); }
.report-supports { margin: 0 0 12px; padding-left: 1.2em; }
.ua-dark .chapter-ribbon { background: #000; color: #FFE76A; }
.ua-dark h1.chapter-ribbon { color: #FFE76A; }
.setup-title { text-align: center; margin: 6px 0 22px; }
.setup-title .kicker { font-family: var(--font-display); color: var(--amber-deep); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; }
.setup-title h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--forest-deep); margin: 4px 0 2px; font-weight: 700; }
.setup-title p { margin: 0; color: var(--muted); font-size: 1.15rem; }
.setup-step { margin-top: 22px; }
.setup-step > label, .setup-step > .label { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--forest); margin-bottom: 10px; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--forest); color: #fff; display: grid; place-items: center; font-size: 1rem; flex: none; }
.name-input { width: 100%; font: 700 1.5rem var(--font-body); padding: 14px 20px; border-radius: 18px; border: 3px solid #E6D3A6; background: #FFFCF3; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.name-input:focus { outline: 3px solid var(--forest); outline-offset: 2px; border-color: var(--forest); box-shadow: 0 0 0 6px #FBE7B6; }
.guide-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pick { position: relative; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; text-align: left; padding: 12px 16px 12px 8px; border-radius: 22px; cursor: pointer; background: #FFFCF3; border: 3px solid #E6D3A6; box-shadow: 0 5px 0 #E6D3A6; transition: transform .1s, box-shadow .1s, border-color .15s, background .15s; font: inherit; color: inherit; }
.pick img { width: 120px; height: 120px; object-fit: contain; }
.pick strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--forest); line-height: 1.1; }
.pick span { color: var(--muted); font-weight: 700; }
.pick:hover { transform: translateY(-2px); }
.pick[aria-checked="true"] { border-color: var(--gold); background: #FFF4D6; box-shadow: 0 5px 0 var(--amber); }
.pick[aria-checked="true"] img { animation: bounce .7s ease; }
.pick .tick { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; opacity: 0; transform: scale(.4); transition: .2s; }
.pick[aria-checked="true"] .tick { opacity: 1; transform: none; }
.level-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.level { padding: 12px 10px; border-radius: 18px; border: 3px solid #E6D3A6; background: #FFFCF3; cursor: pointer; text-align: center; font: inherit; color: var(--forest); box-shadow: 0 4px 0 #E6D3A6; transition: transform .1s, box-shadow .1s; }
.level strong { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.level span { font-size: .9rem; color: var(--muted); font-weight: 700; }
.level .stars { display: flex; justify-content: center; gap: 2px; margin-bottom: 4px; }
.level .stars .icon { width: 20px; height: 20px; }
.level .stars .icon.off { filter: grayscale(1) opacity(.3); }
.level[aria-checked="true"] { border-color: var(--forest); background: #E8F0E1; box-shadow: 0 4px 0 var(--forest); }
.setup-go { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- GAME SCREEN ---------- */
.hud { position: sticky; top: 0; z-index: 40; background: rgba(255,253,247,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(201,130,27,.25); box-shadow: 0 4px 16px rgba(43,42,34,.06); }
.hud-inner { width: min(1320px, 100% - 28px); margin: 0 auto; display: flex; align-items: center; gap: 14px; min-height: 72px; }
.hud .brand img { height: 42px; }
.hud-title { font-family: var(--font-display); font-weight: 600; color: var(--forest); font-size: 1.15rem; white-space: nowrap; }
.hud-spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; padding: 6px 14px 6px 8px; border-radius: 999px; background: #FFF4D6; color: #6A4709; border: 2px solid #F0D493; min-height: 46px; }
.pill .icon { width: 30px; height: 30px; }
.pill.streak { background: #F2EDE3; color: #8A8270; border-color: #E2DACB; }
.pill.streak .icon { filter: grayscale(1) opacity(.5); }
.pill.streak.on { background: #FFE7D2; color: #9A3F0A; border-color: #F6B98A; }
.pill.streak.on .icon { filter: none; animation: flicker 1.2s ease-in-out infinite; }
.pill.streak.hot { background: linear-gradient(90deg, #FFD9B0, #FFE9A8); box-shadow: 0 0 0 4px rgba(232,138,30,.18); }
@keyframes flicker { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(3deg); } }
.pill.bump { animation: pillBump .5s ease; }
@keyframes pillBump { 40% { transform: scale(1.18); } }
.level-chip { font-weight: 800; font-size: .9rem; color: var(--forest); background: #E8F0E1; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.icon-btn { width: 46px; height: 46px; border-radius: 14px; border: 2px solid #E6D3A6; background: var(--paper); color: var(--forest); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 #E6D3A6; text-decoration: none; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #E6D3A6; }
.icon-btn .icon { width: 24px; height: 24px; }

/* Quest map */
.quest { width: min(1320px, 100% - 28px); margin: 14px auto 0; background: var(--paper); border-radius: 22px; padding: 12px 18px; box-shadow: var(--shadow-sm); border: 1px solid rgba(201,130,27,.18); }
.quest-head { display: flex; justify-content: space-between; font-weight: 800; color: var(--forest); font-size: .95rem; margin-bottom: 6px; }
.quest-head span:last-child { color: var(--amber-deep); }
.quest-track { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; }
.quest-line, .quest-fill { position: absolute; left: 24px; right: 24px; top: 50%; height: 8px; margin-top: -4px; border-radius: 8px; }
.quest-line { background: repeating-linear-gradient(90deg, #E9DCBC 0 12px, transparent 12px 20px); }
.quest-fill { right: auto; width: 0; background: linear-gradient(90deg, var(--forest-soft), var(--gold)); transition: width .8s cubic-bezier(.3,.8,.3,1); max-width: calc(100% - 48px); }
.qstop { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: #F4ECD8; border: 3px solid #E2D2AC; display: grid; place-items: center; transition: transform .3s, background .3s, border-color .3s; }
.qstop .icon { width: 24px; height: 24px; color: #A99B79; filter: grayscale(1) opacity(.5); }
.qstop.done { background: #E8F0E1; border-color: var(--forest-soft); }
.qstop.done .icon { filter: none; color: var(--forest); }
.qstop.current { background: #FFF4D6; border-color: var(--gold); transform: scale(1.18); box-shadow: 0 0 0 6px rgba(227,167,47,.2); }
.qstop.current .icon { filter: none; color: var(--forest); }

/* Layout */
.stage-wrap { width: min(1320px, 100% - 28px); margin: 18px auto 40px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.story-card { background: var(--paper); border-radius: 30px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid rgba(201,130,27,.16); }
.scene { position: relative; aspect-ratio: 16 / 7.2; background: var(--parchment); overflow: hidden; }
.scene img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform 8s ease-out; }
.scene img.fade { opacity: 0; }
.scene.kenburns img { transform: scale(1.06); }
.chapter-ribbon { position: absolute; left: 22px; bottom: 18px; background: var(--forest); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; padding: 8px 18px 8px 14px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: flex; align-items: center; gap: 8px; }
h1.chapter-ribbon { margin: 0; line-height: 1.2; color: #fff; }
h1.chapter-ribbon:focus { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--forest-deep); }
.chapter-ribbon small { opacity: .8; font-weight: 500; margin-right: 4px; }
.story-body { padding: clamp(22px, 3vw, 40px); }
.lookagain { display: flex; gap: 12px; align-items: flex-start; background: #FFF4D6; border: 2px dashed #E9C26B; border-radius: 18px; padding: 14px 16px; margin-bottom: 18px; color: #5A4520; font-weight: 700; }
.lookagain .icon { width: 28px; height: 28px; margin-top: 2px; }
.lookagain p { margin: 0 0 .4em; } .lookagain p:last-child { margin: 0; }
.passage { font-size: clamp(1.15rem, 1.25vw + .55rem, 1.45rem); line-height: 1.75; color: #2E2C24; max-width: 68ch; }
.passage p { margin: 0 0 .9em; animation: rise .5s ease both; }
.passage p:nth-child(2) { animation-delay: .06s; } .passage p:nth-child(3) { animation-delay: .12s; } .passage p:nth-child(4) { animation-delay: .18s; } .passage p:nth-child(5) { animation-delay: .24s; }
.passage p.branch-line { font-style: italic; color: var(--forest); border-left: 4px solid var(--gold); padding-left: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.qpanel { margin-top: 10px; background: linear-gradient(180deg, #F2F7EE, #E8F0E1); border-radius: 24px; padding: clamp(18px, 2.4vw, 28px); border: 2px solid #CFE0C4; }
.skill-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--forest-soft); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }
/* Reading-skill colours (white text, all at least 4.5:1 contrast). Classes come from skillClass() in js/adventure.js. */
.skill-tag.skill-retrieval { background: var(--forest-soft); }
.skill-tag.skill-inference { background: #8A5A9E; }
.skill-tag.skill-vocabulary { background: #B4533A; }
.skill-tag.skill-prediction { background: #2F7C8C; }
.skill-tag.skill-summarising { background: #8F5A0E; }
.skill-tag.skill-authors-choice { background: #3F5E8C; }
.skill-tag.skill-choice { background: #6B4C3B; }
.skill-tag.skill-the-end { background: #8F5A0E; }
.question { font-family: var(--font-display); font-weight: 600; color: var(--forest-deep); font-size: clamp(1.3rem, 1.2vw + .8rem, 1.75rem); margin: 0 0 14px; line-height: 1.3; }
.answer-row { display: flex; gap: 12px; align-items: stretch; }
.answer { flex: 1; font: 700 clamp(1.15rem, 1vw + .7rem, 1.4rem) var(--font-body); padding: 14px 18px; border-radius: 18px; border: 3px solid #C9DABE; background: #fff; color: var(--ink); min-width: 0; }
.answer:focus { outline: 3px solid var(--forest); outline-offset: 2px; border-color: var(--forest); box-shadow: 0 0 0 6px #FBE7B6; }
.answer.shake { animation: shake .45s ease; }
@keyframes shake { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
.q-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.hint { display: flex; gap: 10px; align-items: flex-start; background: #FFFCF3; border-radius: 14px; padding: 10px 14px; margin: 14px 0 0; border: 2px solid #F0D493; font-weight: 700; color: #6A4709; }
.hint .icon { width: 24px; height: 24px; }
.feedback { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; display: flex; gap: 10px; align-items: center; min-height: 1.5em; }
.feedback .icon { width: 30px; height: 30px; }
.feedback.correct { color: #2C6040; animation: pop .4s ease; }
.feedback.wrong { color: #9A4A1C; }
.feedback .gain { display: inline-flex; align-items: center; gap: 4px; background: #FFF4D6; border-radius: 999px; padding: 2px 10px 2px 4px; color: #6A4709; font-size: 1.05rem; }
.feedback .gain .icon { width: 24px; height: 24px; }

/* Choice cards */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.choice { text-align: left; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: 22px; cursor: pointer; font: inherit; color: inherit; background: #FFFCF3; border: 3px solid #E6D3A6; box-shadow: 0 6px 0 #E6D3A6; transition: transform .1s, box-shadow .1s, border-color .15s; }
.choice:hover { border-color: var(--gold); transform: translateY(-2px); }
.choice:active { transform: translateY(5px); box-shadow: 0 1px 0 #E6D3A6; }
.choice .ico { width: 64px; height: 64px; border-radius: 18px; background: #FFF4D6; display: grid; place-items: center; }
.choice .ico .icon { width: 40px; height: 40px; color: var(--forest); }
.choice strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--forest); }
.choice span { color: var(--muted); font-weight: 700; }

/* Guide panel */
.guide { position: sticky; top: 92px; background: var(--paper); border-radius: 30px; box-shadow: var(--shadow); padding: 18px 18px 20px; text-align: center; border: 1px solid rgba(201,130,27,.16); }
.bubble { position: relative; background: #FFF4D6; border: 2px solid #F0D493; border-radius: 22px; padding: 14px 16px; font-weight: 800; color: #4A3A12; font-size: 1.1rem; line-height: 1.45; min-height: 84px; display: grid; place-items: center; margin-bottom: 10px; }
.bubble::after { content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -11px; width: 22px; height: 22px; background: #FFF4D6; border-right: 2px solid #F0D493; border-bottom: 2px solid #F0D493; transform: rotate(45deg); }
.bubble.say { animation: pop .35s ease; }
.guide-stage { position: relative; height: 250px; display: grid; place-items: end center; }
.guide-stage::before { content: ""; position: absolute; bottom: 4px; left: 50%; width: 170px; height: 22px; margin-left: -85px; border-radius: 50%; background: radial-gradient(rgba(36,80,58,.22), transparent 70%); }
.guide-img { position: relative; width: 240px; height: 240px; object-fit: contain; transform-origin: 50% 100%; filter: drop-shadow(0 8px 10px rgba(43,42,34,.15)); }
.guide-img.idle { animation: breathe 3.4s ease-in-out infinite, sway 6s ease-in-out infinite; }
.guide-img.thinking { animation: wiggle 1.4s ease-in-out infinite; animation-duration: 2.4s; }
.guide-img.happy { animation: bounce .8s ease; }
.guide-img.celebrating { animation: bounce .7s ease 2; }
.guide-img.blink { animation: blinkSquash .22s ease; }
@keyframes blinkSquash { 50% { transform: scaleY(.97) translateY(2px); } }
.guide-name { font-family: var(--font-display); font-weight: 600; color: var(--forest); font-size: 1.3rem; margin: 6px 0 12px; }
.guide .gbtn { width: 100%; }
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: #B08A3A; animation: twinkle 1s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }

/* Reward toast + level up */
.toast { position: fixed; left: 50%; top: 42%; z-index: 90; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; background: var(--paper); border-radius: 30px; padding: 26px 40px; text-align: center; box-shadow: 0 30px 80px rgba(24,56,41,.35); border: 6px solid #FBE7B6; transition: transform .35s cubic-bezier(.2,.9,.3,1.4), opacity .25s; min-width: 280px; }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast .burst { width: 110px; height: 110px; margin: -70px auto 8px; border-radius: 50%; background: radial-gradient(circle, #FFF4D6 0 55%, transparent 56%), conic-gradient(from 0deg, #F8D46A 0 10deg, transparent 10deg 30deg, #F8D46A 30deg 40deg, transparent 40deg 60deg, #F8D46A 60deg 70deg, transparent 70deg 90deg, #F8D46A 90deg 100deg, transparent 100deg 120deg, #F8D46A 120deg 130deg, transparent 130deg 150deg, #F8D46A 150deg 160deg, transparent 160deg 180deg, #F8D46A 180deg 190deg, transparent 190deg 210deg, #F8D46A 210deg 220deg, transparent 220deg 240deg, #F8D46A 240deg 250deg, transparent 250deg 270deg, #F8D46A 270deg 280deg, transparent 280deg 300deg, #F8D46A 300deg 310deg, transparent 310deg 330deg, #F8D46A 330deg 340deg, transparent 340deg); display: grid; place-items: center; animation: spin 8s linear infinite; }
.toast .burst .icon { width: 60px; height: 60px; animation: spin 8s linear infinite reverse; color: var(--forest); }
@keyframes spin { to { transform: rotate(360deg); } }
.toast h3, .toast .reward-title { font-family: var(--font-display); font-weight: 600; line-height: 1.15; font-size: 1.9rem; margin: 0; color: var(--forest-deep); }
.toast p { margin: 4px 0 0; font-weight: 800; color: var(--amber-deep); font-size: 1.15rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.levelup { position: fixed; left: 0; right: 0; top: 96px; z-index: 85; display: flex; justify-content: center; pointer-events: none; }
.levelup div { background: linear-gradient(90deg, #E88A1E, #F2B53A); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); padding: 10px 28px; border-radius: 999px; box-shadow: 0 10px 30px rgba(168,108,15,.4); display: flex; align-items: center; gap: 10px; text-shadow: 0 2px 0 rgba(0,0,0,.15); transform: translateY(-140%); transition: transform .45s cubic-bezier(.2,.9,.3,1.3); }
.levelup.show div { transform: none; }
.levelup .icon { width: 38px; height: 38px; }
.fly-star { position: fixed; z-index: 95; width: 34px; height: 34px; pointer-events: none; transition: transform .8s cubic-bezier(.5,-0.3,.6,1), opacity .8s; }
.confetti { position: fixed; top: -20px; z-index: 80; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- CERTIFICATE ---------- */
#certificate { padding: 28px 16px 60px; }
.cert-wrap { width: min(980px, 100%); margin: 0 auto; }
.cert { position: relative; background: #FFFBF0 var(--paper-tex); border-radius: 26px; padding: clamp(26px, 5vw, 60px); box-shadow: var(--shadow-lg); text-align: center; border: 2px solid #E9C26B; outline: 10px solid #FFF4D6; outline-offset: -26px; overflow: hidden; animation: pop .6s cubic-bezier(.2,.9,.3,1.2) both; }
.cert::before { content: ""; position: absolute; inset: 18px; border: 2px dashed rgba(201,130,27,.45); border-radius: 16px; pointer-events: none; }
.cert .brand { justify-content: center; margin-bottom: 8px; }
.cert .brand img { height: 54px; }
.cert .kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; color: var(--amber-deep); font-weight: 600; }
.cert h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--forest-deep); margin: 6px 0 6px; }
.cert .awarded { color: var(--muted); font-size: 1.15rem; margin: 0; }
.cert .who { font-family: var(--font-display); font-weight: 700; color: var(--amber); font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.1; margin: 6px 0; }
.cert .who::after { content: ""; display: block; width: min(420px, 80%); height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 6px auto 0; }
.cert .for { font-size: 1.15rem; max-width: 52ch; margin: 10px auto 18px; }
.cert-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--forest); color: #fff; padding: 10px 22px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; box-shadow: var(--shadow); }
.cert-badge .icon { width: 30px; height: 30px; }
.cert-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 20px; }
.cert-stat { background: var(--paper); border-radius: 18px; padding: 14px 8px; border: 2px solid #F0E0B8; }
.cert-stat .icon { width: 36px; height: 36px; }
.cert-stat dt { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cert-stat dd { margin: 4px 0 0; }
.cert-stat b, .cert-stat dd { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--forest-deep); line-height: 1.1; }
.cert-stat span { font-size: .9rem; font-weight: 700; color: var(--muted); }
.cert-skills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.cert-foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; margin-top: 18px; }
.cert-foot .sig { border-top: 2px solid #D9C8A0; padding-top: 6px; font-weight: 700; color: var(--muted); font-size: .95rem; }
.cert-foot .sig b { display: block; font-family: var(--font-display); color: var(--forest); font-size: 1.3rem; font-weight: 500; }
.cert-guide { width: 170px; height: 170px; object-fit: contain; }
.cert-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .stage-wrap { grid-template-columns: 1fr; }
  .guide { position: relative; top: 0; order: -1; display: grid; grid-template-columns: 120px 1fr; grid-template-areas: "img bubble" "img actions"; gap: 8px 16px; text-align: left; padding: 12px 16px; align-items: center; }
  .guide-stage { grid-area: img; height: 130px; }
  .guide-stage::before { width: 100px; margin-left: -50px; }
  .guide-img { width: 128px; height: 128px; }
  .bubble { grid-area: bubble; min-height: 0; margin: 0; place-items: center start; font-size: 1.02rem; }
  .bubble::after { left: -12px; top: 50%; bottom: auto; margin: -11px 0 0; transform: rotate(135deg); }
  .guide-name { display: none; }
  .guide-actions { grid-area: actions; }
  .guide .gbtn { width: auto; }
  .hud-title { display: none; }
}
@media (max-width: 720px) {
  .guide-pick, .choices { grid-template-columns: 1fr; }
  .pick { grid-template-columns: 90px 1fr; }
  .pick img { width: 90px; height: 90px; }
  .answer-row { flex-direction: column; }
  .scene { aspect-ratio: 16 / 9; }
  .qstop { width: 34px; height: 34px; }
  .qstop .icon { width: 18px; height: 18px; }
  .cert-stats { grid-template-columns: 1fr 1fr; }
  .cert-foot { grid-template-columns: 1fr; }
  .cert-foot .sig:last-child { display: none; }
  .level-chip { display: none; }
  .hud .brand img { height: 34px; }
  .pill { font-size: 1.05rem; min-height: 40px; padding: 4px 10px 4px 6px; }
  .pill .icon { width: 24px; height: 24px; }
  .hud-inner { gap: 8px; }
  .guide { grid-template-columns: 92px 1fr; }
  .guide-stage { height: 100px; } .guide-img { width: 100px; height: 100px; }
  .chapter-ribbon { left: 12px; bottom: 12px; font-size: 1rem; }
}
@media (max-width: 420px) {
  .level-pick { grid-template-columns: 1fr; }
  .hud .brand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti, .fly-star { display: none; }
}
@media print {
  body * { visibility: hidden; }
  #certificate, #certificate * { visibility: visible; }
  #certificate { position: absolute; inset: 0; padding: 0; }
  .cert-actions, .hud, .quest, #report-print { display: none !important; }
  .cert { box-shadow: none; animation: none; }
  .cert-row { display: block; }
  /* Print certificate: certificate only. Print reading report: report only, plain and ink-friendly. */
  body:not(.print-report) .report { display: none !important; }
  body.print-report .cert { display: none !important; }
  body.print-report .report { box-shadow: none; border: 1.5px solid #999; max-width: 680px; margin: 0 auto; background: #fff; color: #000; }
  body.print-report .report h2, body.print-report .report h3, body.print-report .report .report-nums b { color: #000; }
  body.print-report .report-nums div, body.print-report .rp-bar { background: #fff; border: 1px solid #aaa; }
  body.print-report .rp-bar i { background: #555 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-report .skill-tag { background: #fff !important; color: #000 !important; border: 1px solid #777; }
}

/* Hint dismiss */
.hint-close { margin-left: 8px; font: 800 .95rem var(--font-body); color: var(--forest); background: #fff; border: 2px solid #E6D3A6; border-radius: 999px; min-height: 44px; padding: 8px 16px; border-color: var(--amber-deep); cursor: pointer; vertical-align: middle; }
.hint-close:hover { border-color: var(--gold); }
.hint-close:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
/* Level-up banner fully hidden until shown */
.levelup div { opacity: 0; visibility: hidden; transform: translateY(-260%); transition: transform .45s cubic-bezier(.2,.9,.3,1.3), opacity .3s, visibility 0s .45s; }
.levelup.show div { opacity: 1; visibility: visible; transform: none; transition: transform .45s cubic-bezier(.2,.9,.3,1.3), opacity .2s, visibility 0s; }

/* Clue button: a gentle glow after a wrong or partial answer, so the child knows help is there if they want it. */
.gbtn.pulse { animation: cluePulse 1.8s ease-in-out infinite; }
@keyframes cluePulse {
  0%, 100% { box-shadow: 0 4px 0 var(--edge), 0 8px 14px rgba(60,40,10,.18), 0 0 0 2px rgba(233,194,107,.7); }
  50% { box-shadow: 0 4px 0 var(--edge), 0 8px 14px rgba(60,40,10,.18), 0 0 0 7px rgba(233,194,107,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .gbtn.pulse { animation: none; outline: 3px solid var(--forest); outline-offset: 2px; }
}
.feedback span { font-weight: 600; }

/* ===== Reading report (beside the certificate) ===== */
.cert-wrap { width: min(1360px, 100%); }
.cert-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
@media (min-width: 1180px) { .cert-row { grid-template-columns: minmax(0, 1fr) 360px; max-width: none; align-items: start; } }
.report { background: #FFFDF7; border: 2px solid #E9DDBF; border-radius: 22px; padding: 22px 22px 20px; box-shadow: var(--shadow); text-align: left; }
.report-kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; font-weight: 600; color: var(--amber-deep); }
.report h2 { font-size: 1.55rem; margin: 2px 0 4px; color: var(--forest-deep); }
.report-meta { margin: 0 0 14px; color: var(--muted); font-weight: 700; line-height: 1.45; }
.report-meta strong { color: var(--forest); }
.report-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.report-nums div { background: var(--paper); border: 2px solid #F0E0B8; border-radius: 14px; padding: 10px 8px; text-align: center; }
.report-nums b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--forest-deep); line-height: 1.1; }
.report-nums span { font-size: .8rem; font-weight: 700; color: var(--muted); line-height: 1.25; display: block; }
.report h3 { font-size: 1.1rem; margin: 0 0 8px; }
.report-skills { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.report-skills li { display: grid; grid-template-columns: 130px 1fr; grid-template-areas: "tag bar" "tag val"; column-gap: 10px; align-items: center; }
.report-skills .skill-tag { grid-area: tag; justify-self: start; font-size: .78rem; }
/* Skills not met in this adventure: shown as an outline, still full contrast (no fading). */
.report-skills li.none .skill-tag { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 2px #8A8573; }
.report-skills li.none .rp-bar { background: #F6F1E4; }
.rp-bar { grid-area: bar; height: 9px; background: #F1E8D2; border-radius: 99px; overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #3E7A52); border-radius: 99px; }
.rp-val { grid-area: val; font-size: .85rem; font-weight: 700; color: var(--muted); }
.report-note { font-size: .85rem; color: var(--muted); margin: 6px 0 12px; }
@media (max-width: 420px) { .report-skills li { grid-template-columns: 112px 1fr; } }

/* Class device mode note on the setup screen */
.class-note { display: flex; gap: 10px; align-items: flex-start; background: #EEF5EE; border: 2px solid #CFE2D2; border-radius: 16px; padding: 10px 14px; margin: 4px 0 14px; color: var(--forest-deep); font-size: .95rem; }
.class-note[hidden] { display: none; }
.class-note .icon { width: 24px; height: 24px; flex: none; margin-top: 2px; }

/* ===== Year + challenge picker (Year 3–6 × Easy / Medium / Hard) ===== */
.year-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.diff-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.setup-step > .sub-label { margin-top: 18px; font-size: 1.15rem; }
.year-tile, .diff-tile { position: relative; min-height: 88px; padding: 14px 10px 12px; border-width: 4px; border-radius: 22px; box-shadow: 0 6px 0 #D9C08A; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.year-tile strong { font-size: 1.55rem; line-height: 1.05; }
.diff-tile strong { font-size: 1.5rem; line-height: 1.05; }
.diff-tile .icon { width: 34px; height: 34px; margin-bottom: 2px; color: var(--forest); }
.year-tile:hover, .diff-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #D9C08A; }
.year-tile:active, .diff-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 #D9C08A; }
/* Each tile has its own colour band, and the picked tile also gets a tick badge and a thicker frame, so colour is never the only cue. */
.year-tile[data-year="3"] { border-top-color: #2F7C8C; } .year-tile[data-year="4"] { border-top-color: #8A5A9E; }
.year-tile[data-year="5"] { border-top-color: #B4533A; } .year-tile[data-year="6"] { border-top-color: #3F5E8C; }
.diff-easy { background: #F1F8EC; } .diff-medium { background: #FFF6DE; } .diff-hard { background: #FDEDE6; }
.year-tile[aria-checked="true"], .diff-tile[aria-checked="true"] { border-color: var(--forest); background: #E2EFD9; box-shadow: 0 6px 0 var(--forest); transform: translateY(-2px) scale(1.03); }
.year-tile[aria-checked="true"]::after, .diff-tile[aria-checked="true"]::after {
  content: "✓" / ""; position: absolute; top: -12px; right: -10px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--forest); color: #fff; font: 800 1.1rem/32px var(--font-body); text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.diff-hard[aria-checked="true"] .icon { animation: flicker 1.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-4deg); } }
.level-summary { margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: #FFFCF3; border: 2px dashed #D9C08A; color: var(--ink); font-weight: 700; font-size: 1rem; }
@media (max-width: 640px) { .year-pick { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .diff-pick { grid-template-columns: 1fr; } .diff-tile { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 64px; text-align: left; flex-wrap: wrap; } .diff-tile span { flex-basis: 100%; padding-left: 44px; margin-top: -6px; } }
@media (prefers-reduced-motion: reduce) { .year-tile, .diff-tile { transition: none; } .year-tile[aria-checked="true"], .diff-tile[aria-checked="true"] { transform: none; } .diff-hard[aria-checked="true"] .icon { animation: none; } }
.ua-calm .diff-hard[aria-checked="true"] .icon { animation: none; }
.ua-dark .level-summary { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--forest) !important; }
.ua-dark .year-tile[aria-checked="true"]::after, .ua-dark .diff-tile[aria-checked="true"]::after { background: #FFE76A; color: #000; }
/* Easy sentence starter under the question */
.q-starter { margin: -4px 0 10px; padding: 8px 12px; border-left: 5px solid #E3A72F; background: #FFF6DE; border-radius: 10px; font-weight: 700; color: var(--ink); }
.q-starter .starter-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 2px solid #8A5A00; border-radius: 999px; background: #fff; color: #5C3B00; font: inherit; font-weight: 800; cursor: pointer; }
.q-starter .starter-btn:hover { background: #FFF0C2; }
.q-starter .starter-btn .icon { width: 1.1em; height: 1.1em; }
.ua-dark .q-starter .starter-btn { background: #000 !important; color: #FFE76A !important; border-color: #FFE76A !important; }
.ua-dark .q-starter { background: var(--paper) !important; color: var(--ink) !important; border-left-color: #FFE76A; }
/* New skill colours for the structure (2f) and comparing (2h) questions; white text at 4.5:1 or more. */
.skill-tag.skill-structure { background: #2E6B4F; }
.skill-tag.skill-comparing { background: #9C3D6B; }

/* ===== Guest characters: Professor Harlen and Brog (stories/cameos.js) =====
   The slot is empty (no height) until a guest visits, and the card sits below the feedback, so nothing above it moves.
   Fixed cream colours (like .hint) keep the contrast the same on every tint and in dark mode; high contrast overrides below. */
.guest-slot:empty { display: none; }
.guest-slot { margin-top: 14px; display: grid; gap: 10px; }
.guest-card { display: flex; gap: 14px; align-items: flex-start; background: #FFFCF3; color: #3B2E12; border: 2px solid #E6D3A6; border-radius: 18px; padding: 12px 16px; }
.guest-harlen { border-color: #B9C9DE; background: #F7FAFF; color: #22324A; }
.guest-img { width: 88px; height: 88px; flex: 0 0 88px; object-fit: contain; border-radius: 14px; background: #FFF; }
.guest-words { min-width: 0; }
.guest-words p { margin: 0 0 .35em; } .guest-words p:last-of-type { margin-bottom: 0; }
.guest-name { font-family: var(--font-display); font-size: 1.1rem; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.guest-kind { font: 800 .8rem var(--font-body); text-transform: uppercase; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px; background: #EAF0F8; color: #22324A; border: 1px solid #8DA2C0; }
.guest-kind-legend, .guest-kind-uncertain { background: #F6EBDD; color: #5A3410; border-color: #B98A55; }
.guest-kind-invented { background: #F0E9F7; color: #44275E; border-color: #9F86B9; }
.guest-hello { font-style: italic; }
.guest-line { font-weight: 700; }
.guest-listen:empty { display: none; }
.guest-listen { display: block; margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) { html:not(.ua-calm) .guest-card { animation: guestIn .35s ease-out; } }
@keyframes guestIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) { .guest-img { width: 64px; height: 64px; flex-basis: 64px; } }
/* Dark themes: follow the other dark cards (paper background, light ink). */
.ua-dark .guest-card { background: var(--paper); color: var(--ink); border-color: var(--amber-deep); }
.ua-dark .guest-card p, .ua-dark .guest-card strong { color: var(--ink); }
.ua-dark .guest-kind { background: transparent; color: var(--ink); border-color: var(--ink); }
.ua-contrast-high .guest-card { background: #FFF; color: #000; border: 3px solid #000; }
.ua-contrast-high .guest-kind { background: #FFF; color: #000; border-color: #000; }
.ua-contrast-high-dark .guest-card { background: #000; color: #FFE76A; border: 3px solid #FFE76A; }
.ua-contrast-high-dark .guest-kind { background: #000; color: #FFE76A; border-color: #FFE76A; }
@media print { .guest-slot { display: none; } }