/* Idiom Investigator — a cosy British village mystery on a light board.
   The cosy feel comes from the details: Bake-Off bunting, cream story pages,
   round character portraits, a teapot and a notebook. The story text is big
   and warm (a book serif), and everything a learner reads passes 4.5:1. */
[data-game="investigator"] { --iv-cream: #FFFBF2; --iv-cream-2: #F4EAD6; --iv-berry: #A3214F; --iv-berry-soft: #FCEAF1; --iv-teal: #0F6E6E; --iv-teal-soft: #E3F4F2; --iv-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif; scroll-margin-top: calc(var(--bar-h, 64px) + 16px); }

/* village-fête bunting along the top */
.iv-bunting { height: 22px; margin: calc(-1 * clamp(18px, 3vw, 36px)) calc(-1 * clamp(18px, 3vw, 36px)) -6px; background:
  linear-gradient(135deg, transparent 50%, var(--cyc) 50%) 0 0 / 36px 22px repeat-x,
  linear-gradient(225deg, transparent 50%, var(--cyc) 50%) 0 0 / 36px 22px repeat-x,
  linear-gradient(90deg, #E8352B 0 36px, #FFD21E 36px 72px, #2457F5 72px 108px, #1F9D55 108px 144px) 0 0 / 144px 22px repeat-x; }
.iv-bunting::before { content: none; }

/* round character portraits */
.iv-face { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; background: var(--cyc-2); box-shadow: inset 0 0 0 2px rgba(14, 17, 24, .08); }
.iv-face.big { width: 72px; height: 72px; font-size: 2.4rem; }
.iv-face.f-finch { background: var(--sound-soft); } .iv-face.f-dev { background: var(--wb-soft); } .iv-face.f-harris { background: var(--iv-berry-soft); }
.iv-face.f-colin { background: #FFF1DA; } .iv-face.f-tom { background: var(--lab-soft); } .iv-face.f-priya { background: var(--pen-soft); }

/* ── the case file (start) ───────────────────────────────────────────── */
.iv-poster { display: flex; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 20px; background: var(--iv-cream); border: 2px dashed #E3CFA6; }
.iv-poster-ico { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; background: var(--cyc); box-shadow: 0 0 0 4px var(--iv-cream-2); transform: rotate(-8deg); }
.iv-poster-body { display: grid; gap: 4px; }
.iv-poster-lab { font-family: var(--f-display); font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--iv-berry); font-variation-settings: 'wght' 800; }
.iv-poster-t { font-family: var(--iv-serif); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.4; color: var(--ink); }
.iv-poster-p { font-size: 1rem; color: var(--ink-2); }
@media (max-width: 520px) { .iv-poster { flex-direction: column; text-align: center; } }

.iv-start { display: flex; gap: 10px; flex-wrap: wrap; }
.iv-voice { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; color: var(--ink-2); cursor: pointer; }
.iv-voice input { width: 22px; height: 22px; flex: none; accent-color: var(--iv-teal); }

.iv-chs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.iv-ch { display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--cyc); }
.iv-ch.now { border-color: var(--iv-teal); box-shadow: 0 0 0 4px var(--iv-teal-soft); }
.iv-ch.done { background: #F3FBF6; border-color: #CBEBD8; }
.iv-ch-ico { font-size: 1.6rem; }
.iv-ch-n { font-family: var(--f-display); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-variation-settings: 'wght' 720; }
.iv-ch b { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.15; font-variation-settings: 'opsz' 24, 'wght' 750; }
.iv-ch-bar { height: 6px; border-radius: 3px; background: var(--cyc-3); overflow: hidden; margin-top: 4px; }
.iv-ch-bar i { display: block; height: 100%; border-radius: 3px; background: var(--iv-teal); }
.iv-ch.done .iv-ch-bar i { background: #1F9D55; }
.iv-ch-meta { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 640px) { .iv-chs { grid-template-columns: minmax(0, 1fr); } }

.iv-cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.iv-cast li { display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 999px 18px 18px 999px; background: var(--iv-cream); border: 1.5px solid var(--iv-cream-2); }
.iv-cast li > span { display: grid; gap: 1px; min-width: 0; }
.iv-cast b { font-family: var(--f-display); font-size: 1.08rem; font-variation-settings: 'wght' 720; }
.iv-cast li > span > span { font-size: .95rem; line-height: 1.35; color: var(--ink-2); }

/* ── in the story ─────────────────────────────────────────────────────── */
.iv-top { gap: 12px; }
.iv-prog { flex: 1; display: grid; gap: 4px; min-width: 160px; }
.iv-prog-lab { font-family: var(--f-display); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: center; font-variation-settings: 'wght' 700; }
.iv-prog-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.iv-prog-seg { height: 10px; border-radius: 5px; background: var(--cyc-3); overflow: hidden; }
.iv-prog-seg i { display: block; height: 100%; border-radius: 5px; background: var(--iv-teal); transition: width .5s var(--ease-out); }
.iv-prog-seg.now { box-shadow: 0 0 0 2px var(--iv-teal-soft); }
.iv-book-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid #E3CFA6; background: var(--iv-cream); color: var(--ink); font-family: var(--f-display); font-size: 1rem; font-variation-settings: 'wght' 650; cursor: pointer; }
.iv-book-btn b { font-variation-settings: 'wght' 800; }
.iv-book-btn span { color: var(--ink-2); }
.iv-book-btn:hover { border-color: var(--ink-3); }
.iv-book-btn.pop { animation: iv-pop .6s var(--ease-out); }
@keyframes iv-pop { 30% { transform: scale(1.18) rotate(-4deg); background: var(--pen); } }
@media (max-width: 560px) { .iv-prog { order: 3; flex-basis: 100%; } .iv-book-btn { margin-left: auto; } }

.iv-scene, .iv-chapter { display: grid; gap: 14px; padding: clamp(18px, 3vw, 30px); border-radius: 22px; background: var(--iv-cream); border: 1.5px solid var(--iv-cream-2); box-shadow: 0 14px 30px -22px rgba(80, 50, 0, .45); animation: gm-in .35s var(--ease-out); }
.iv-who { display: flex; align-items: center; gap: 12px; }
.iv-who > span:nth-child(2) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.iv-who b { font-family: var(--f-display); font-size: 1.2rem; font-variation-settings: 'opsz' 24, 'wght' 750; }
.iv-who > span:nth-child(2) > span { font-size: .95rem; color: var(--ink-2); }
.iv-story { font-family: var(--iv-serif); font-size: clamp(1.25rem, 1.08rem + .75vw, 1.6rem); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.iv-hl { background: linear-gradient(transparent 10%, var(--pen) 10%, var(--pen) 90%, transparent 90%); color: var(--ink); padding: 0 .12em; border-radius: 3px; font-weight: 700; }

.iv-chapter { justify-items: center; text-align: center; padding-block: clamp(26px, 5vw, 48px); background: radial-gradient(120% 90% at 50% 0%, #FFF6DD, var(--iv-cream) 60%); }
.iv-chapter-ico { font-size: 3.4rem; line-height: 1; }
.iv-chapter-n { font-family: var(--f-display); font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; color: var(--iv-berry); font-variation-settings: 'wght' 800; }
.iv-chapter-t { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); letter-spacing: -.03em; line-height: 1; }
.iv-chapter .iv-story { max-width: 40ch; }
.iv-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; }
.iv-row .push { margin-left: auto; }
.iv-chapter .iv-row .push { margin-left: 0; }

/* James's play button: a ring that fills as he talks */
.iv-hear { --p: 0; position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px 10px 16px; border-radius: 999px; border: 0; background: var(--iv-teal); color: #fff; font-family: var(--f-display); font-size: 1rem; font-variation-settings: 'wght' 700; cursor: pointer; transition: transform .2s var(--ease-out), background .2s; }
.iv-hear:hover { background: #0B5858; transform: translateY(-1px); }
.iv-hear:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.iv-hear.small { flex: none; width: 52px; height: 52px; padding: 0; justify-content: center; font-size: 1.05rem; }
.iv-hear-ring { position: absolute; inset: -4px; border-radius: 999px; background: conic-gradient(var(--pen) calc(var(--p) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); pointer-events: none; }
.iv-hear:not(.small) .iv-hear-ring { display: none; }
.iv-hear.on { background: #0B5858; }
.iv-hear.on > span:last-child, .iv-hear.on:not(.small) { animation: lu-pulse 1.2s ease-in-out infinite; }

.iv-clue { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; background: var(--cyc); border: 2px solid #E3CFA6; font-size: 1.05rem; line-height: 1.5; animation: gm-in .4s var(--ease-out); }
.iv-clue > span:first-child { font-size: 1.5rem; line-height: 1.2; }
.iv-clue b { font-family: var(--f-display); color: var(--iv-berry); font-variation-settings: 'wght' 750; margin-right: 4px; }
.iv-clue em { display: block; font-style: normal; font-size: .92rem; color: var(--ink-2); }

/* ── the idiom question ─────────────────────────────────────────────── */
.iv-q { display: grid; gap: 12px; }
.iv-q-t { font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); line-height: 1.3; letter-spacing: -.01em; font-variation-settings: 'opsz' 36, 'wght' 650; text-wrap: balance; }
.iv-q-t b { font-variation-settings: 'wght' 800; background: var(--pen-soft); padding: 0 .15em; border-radius: 4px; }
.iv-opts { display: grid; gap: 10px; }
.iv-opt { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px 10px 10px; border-radius: 18px; border: 2px solid var(--line-2); background: var(--cyc); color: var(--ink); text-align: left; font-size: 1.15rem; line-height: 1.35; cursor: pointer; transition: transform .2s var(--ease-out), border-color .2s, background .2s, opacity .3s; }
.iv-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ink); }
.iv-opt:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.iv-opt:disabled { cursor: default; }
.iv-let { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--iv-teal-soft); color: var(--iv-teal); font-family: var(--f-display); font-size: 1.05rem; font-variation-settings: 'wght' 800; }
.iv-opt.wrong { border-color: var(--live); background: var(--live-soft); color: #8F1D16; }
.iv-opt.wrong .iv-let { background: var(--live); color: #fff; font-size: 0; } .iv-opt.wrong .iv-let::after { content: "✗"; font-size: 1.2rem; }
.iv-opt.right { border-color: #1F9D55; background: #E5F6EC; color: #0F5A2F; }
.iv-opt.right .iv-let { background: #1F9D55; color: #fff; font-size: 0; } .iv-opt.right .iv-let::after { content: "✓"; font-size: 1.2rem; }
.iv-opt.dim { opacity: .45; }

.iv-fb { display: grid; gap: 6px; padding: 14px 18px; border-radius: 16px; border: 2px solid #F3B7B2; background: #FFF8F7; animation: gm-in .3s var(--ease-out); }
.iv-fb-h b { font-family: var(--f-display); font-size: 1.2rem; color: #B3241C; font-variation-settings: 'wght' 750; }
.iv-fb p { font-size: 1.08rem; line-height: 1.55; }
.iv-fb .iv-fb-try { font-size: 1rem; color: var(--ink-2); }

.iv-learn { display: grid; gap: 14px; padding: clamp(16px, 2.6vw, 24px); border-radius: 20px; border: 2px solid #A7DDBE; background: #F3FBF6; animation: gm-in .35s var(--ease-out); }
.iv-learn-h { display: flex; gap: 12px; align-items: flex-start; font-family: var(--f-display); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); line-height: 1.3; font-variation-settings: 'opsz' 36, 'wght' 600; }
.iv-learn-h b { font-variation-settings: 'wght' 800; color: #0F5A2F; }
.iv-learn-tick { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1F9D55; color: #fff; font-size: 1.1rem; }
.iv-lr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.iv-lit, .iv-real { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 16px; background: var(--cyc); }
.iv-lit { border: 2px dashed var(--line-2); }
.iv-real { border: 2px solid #1F9D55; }
.iv-lr .lab, .iv-ex .lab { font-family: var(--f-display); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-variation-settings: 'wght' 720; }
.iv-lit p:last-child { font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.iv-real p:last-child { font-size: 1.1rem; line-height: 1.45; color: var(--ink); font-weight: 700; }
@media (max-width: 560px) { .iv-lr { grid-template-columns: minmax(0, 1fr); } }
.iv-why { font-size: 1.08rem; line-height: 1.55; }
.iv-why b { font-family: var(--f-display); color: var(--iv-teal); font-variation-settings: 'wght' 750; }
.iv-ex { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--cyc); box-shadow: inset 0 0 0 1.5px var(--line); }
.iv-ex p { display: grid; gap: 2px; font-family: var(--iv-serif); font-size: 1.15rem; line-height: 1.45; }
.iv-note { display: flex; gap: 8px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.iv-learn-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.iv-added { font-family: var(--f-display); font-size: .98rem; color: #0F5A2F; font-variation-settings: 'wght' 650; }
@media (max-width: 560px) { .iv-learn-foot .btn { width: 100%; justify-content: center; } }

/* ── naming the thief ─────────────────────────────────────────────────── */
.iv-accuse { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(18px, 3vw, 30px); border-radius: 22px; background: var(--iv-berry-soft); border: 2px solid #F0BFD2; }
.iv-accuse-lab { font-family: var(--f-display); font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--iv-berry); font-variation-settings: 'wght' 800; }
.iv-accuse-t { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; max-width: 26ch; }
.iv-suspects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.iv-suspect { display: grid; gap: 6px; justify-items: center; padding: 16px 10px; border-radius: 18px; border: 2px solid var(--line); background: var(--cyc); color: var(--ink); cursor: pointer; transition: transform .25s var(--ease-out), border-color .2s, opacity .3s; }
.iv-suspect:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--iv-berry); }
.iv-suspect:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.iv-suspect b { font-family: var(--f-display); font-size: 1.1rem; font-variation-settings: 'wght' 750; }
.iv-suspect > span:last-child { font-size: .9rem; line-height: 1.35; color: var(--ink-2); }
.iv-suspect.wrong { opacity: .5; border-color: var(--live); background: var(--live-soft); }
.iv-suspect.right { border-color: #1F9D55; box-shadow: 0 0 0 4px #CBEBD8; }
.iv-suspect:disabled { cursor: default; }
@media (max-width: 640px) { .iv-suspects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iv-accuse [data-fb] { width: 100%; text-align: left; }
.iv-reveal { position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 22px 18px; border-radius: 20px; background: var(--cyc); border: 2px solid #1F9D55; animation: gm-in .4s var(--ease-out); }
.iv-reveal-stamp, .iv-closed-stamp { padding: 4px 14px; border: 3px solid var(--iv-berry); border-radius: 8px; color: var(--iv-berry); font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: 'wght' 800; transform: rotate(-6deg); animation: iv-stamp .55s cubic-bezier(.2, 1.4, .4, 1) both .1s; }
@keyframes iv-stamp { from { opacity: 0; transform: rotate(-18deg) scale(2.2); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.iv-reveal-t { font-family: var(--f-display); font-size: 1.5rem; font-variation-settings: 'wght' 800; color: #0F5A2F; }
.iv-reveal p { font-size: 1.08rem; line-height: 1.5; max-width: 52ch; }
.iv-reveal-p { color: var(--ink-2); }

/* ── notebook ─────────────────────────────────────────────────────────── */
.iv-notebook { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: 22px; background:
  var(--iv-cream); border: 1.5px solid var(--iv-cream-2); }
.iv-nb-t { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -.02em; }
.iv-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--cyc); box-shadow: inset 0 0 0 1.5px var(--line); justify-self: start; }
.iv-tabs button { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 0; background: none; color: var(--ink-2); font-family: var(--f-display); font-size: 1rem; font-variation-settings: 'wght' 650; cursor: pointer; }
.iv-tabs button[aria-selected="true"] { background: var(--ink); color: var(--cyc); }
.iv-nb { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iv-nb li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--cyc); border: 1.5px solid var(--line); }
.iv-nb li.miss { border-color: #F3C9C5; background: #FFF8F7; }
.iv-nb li > span { display: grid; gap: 2px; min-width: 0; }
.iv-nb b { font-family: var(--f-display); font-size: 1.2rem; font-variation-settings: 'opsz' 24, 'wght' 750; }
.iv-nb-m { font-size: 1.05rem; color: var(--ink); }
.iv-nb-ex { font-family: var(--iv-serif); font-size: 1rem; color: var(--ink-2); font-style: italic; }
.iv-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iv-ev li { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--cyc); border: 2px solid #E3CFA6; font-size: 1.08rem; line-height: 1.5; }
.iv-empty, .iv-left { font-size: 1.05rem; color: var(--ink-2); }

/* ── case closed ──────────────────────────────────────────────────────── */
.iv-closed { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 10px 0; animation: gm-in .5s var(--ease-out); }
.iv-closed-stamp { font-size: 1.5rem; padding: 6px 18px; }
.iv-closed-pot { font-size: 3.6rem; line-height: 1.1; }
.iv-big-stars { font-size: 2.8rem; gap: 8px; }
.iv-closed-t { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
.iv-closed-big { font-size: 1.2rem; color: var(--ink-2); }
.iv-closed-big b { font-family: var(--f-display); font-size: 2rem; color: var(--iv-teal); font-variation-settings: 'wght' 800; }
.iv-closed-p { font-family: var(--iv-serif); font-size: 1.2rem; line-height: 1.55; max-width: 44ch; }
.iv-whodunnit { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 20px; background: var(--iv-cream); border: 2px solid var(--iv-cream-2); }
.iv-whodunnit .lab { font-family: var(--f-display); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--iv-berry); font-variation-settings: 'wght' 800; }
.iv-whodunnit p:last-child { font-size: 1.08rem; line-height: 1.55; }
@media (max-width: 520px) { .iv-whodunnit { flex-direction: column; text-align: center; } }

@media (prefers-reduced-motion: reduce) {
  .iv-hear.on, .iv-hear.on > span:last-child, .iv-book-btn.pop, .iv-reveal-stamp, .iv-closed-stamp { animation: none; }
}