@font-face { font-family: "Baloo Chettan 2"; font-weight: 500; font-display: swap; src: url(../fonts/bc2-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo Chettan 2"; font-weight: 700; font-display: swap; src: url(../fonts/bc2-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo Chettan 2"; font-weight: 800; font-display: swap; src: url(../fonts/bc2-latin-800.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo Chettan 2"; font-weight: 500; font-display: swap; src: url(../fonts/bc2-malayalam-500.woff2) format("woff2"); unicode-range: U+0307,U+0323,U+0951-0952,U+0964-0965,U+0D00-0D7F,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC,U+A830-A832; }
@font-face { font-family: "Baloo Chettan 2"; font-weight: 700; font-display: swap; src: url(../fonts/bc2-malayalam-700.woff2) format("woff2"); unicode-range: U+0307,U+0323,U+0951-0952,U+0964-0965,U+0D00-0D7F,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC,U+A830-A832; }
@font-face { font-family: "Baloo Chettan 2"; font-weight: 800; font-display: swap; src: url(../fonts/bc2-malayalam-800.woff2) format("woff2"); unicode-range: U+0307,U+0323,U+0951-0952,U+0964-0965,U+0D00-0D7F,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC,U+A830-A832; }

:root {
  --leaf: #2F6B3A; --leaf-d: #1F4A28; --leaf-l: #5E9A4E; --leaf-wash: #E2EDD8;
  --ink: #123B3F; --ink-soft: #3E5F62;
  --gold: #C9961A; --gold-l: #E8C766;
  --lat: #A6492E; --chilli: #B8322A;
  --page: #EAF1E1; --panel: #FFFDF6; --line: #CFDCC4;
  --fs: 18px;
  --radius-s: 10px; --radius-l: 22px;
  color-scheme: light;
}
html[data-size="l"] { --fs: 21px; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Baloo Chettan 2", "Noto Sans Malayalam", system-ui, sans-serif;
  font-weight: 500; font-size: var(--fs); line-height: 1.5;
  color: var(--ink); background: var(--page);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--page); }

/* top bar */
.top { position: sticky; top: 0; z-index: 5; }
.bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; background: var(--leaf-d); color: #fff; }
.bar .mark { font-weight: 800; font-size: 1rem; min-width: 0; letter-spacing: .01em; margin-right: auto; background: none; border: 0; color: #fff; padding: 4px 2px; cursor: pointer; }
.bar .mark span { color: var(--gold-l); }
.tool { min-width: 40px; height: 40px; border-radius: 20px; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-weight: 700; padding: 0 8px; flex: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.tool[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.tool svg { width: 20px; height: 20px; }

/* kasavu: the gold double stripe of a Kerala saree border */
.kasavu { height: 9px; background:
  linear-gradient(to bottom, var(--gold) 0 3px, var(--panel) 3px 5px, var(--gold-l) 5px 7px, var(--gold) 7px 9px); }

/* scene */
.stage { position: relative; aspect-ratio: 400 / 220; overflow: hidden; background: #DCEEE6; }
.stage .scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .chapter-tag { position: absolute; top: 10px; left: 12px; background: rgba(255,253,246,.92); color: var(--ink); border-radius: 14px; padding: 2px 12px; font-size: .78rem; font-weight: 700; }
.who-pic { position: absolute; bottom: -2px; left: 10px; width: 30%; max-width: 150px; filter: drop-shadow(0 2px 0 rgba(18,59,63,.25)); }
.who-pic svg { width: 100%; height: auto; display: block; }

.panel { flex: 1; background: var(--panel); padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.speaker { font-weight: 800; color: var(--leaf); font-size: 1.05rem; line-height: 1.2; }
.speaker small { display: block; font-weight: 500; color: var(--ink-soft); font-size: .78rem; }
.say { margin: 0; font-size: 1.18rem; line-height: 1.55; max-width: 34em; }
.say.narr { font-style: normal; color: var(--ink-soft); }
.prompt { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.btn { border: 0; border-radius: 26px; min-height: 50px; padding: 0 24px; font-weight: 800; font-size: 1.02rem; cursor: pointer; background: var(--leaf); color: #fff; box-shadow: 0 3px 0 var(--leaf-d); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--leaf-d); }
.btn[disabled] { background: #A9B9A2; box-shadow: none; cursor: default; }
.btn.ghost { background: transparent; color: var(--leaf); box-shadow: inset 0 0 0 2px var(--leaf); }
.btn.gold { background: var(--gold); color: var(--ink); box-shadow: 0 3px 0 #8F6A10; }
.btn.wide { width: 100%; }

.feedback { border-radius: var(--radius-s); padding: 10px 14px; background: var(--leaf-wash); border-left: 5px solid var(--leaf); }
.feedback.no { background: #FBEDE6; border-left-color: var(--lat); }
.feedback p { margin: 0; }

/* notebook (riddles) */
.notebook { background: #FBF6E6; border-radius: var(--radius-s); padding: 10px 14px; border: 1px solid #E7DCC0;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, #E1D5B8 31px 32px); }
.notebook ol { margin: 0; padding-left: 1.3em; }
.notebook li { min-height: 32px; line-height: 32px; }
.notebook .blot { display: inline-block; width: 7em; height: 14px; vertical-align: middle; border-radius: 8px; background: radial-gradient(ellipse at 40% 50%, rgba(61,95,134,.55), rgba(92,127,168,.18) 70%, transparent 72%); }
.notebook .got { font-weight: 800; color: var(--leaf-d); }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 6px 4px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .78rem; font-weight: 700; line-height: 1.2; min-height: 92px; text-align: center; }
.tile .icon { width: 44px; height: 44px; }
.tile.used { border-color: var(--leaf); background: var(--leaf-wash); opacity: .7; }
.tile.nope { animation: nudge .35s; border-color: var(--lat); }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* investigate hub */
.hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chip { position: relative; border: 2px solid var(--line); background: #fff; border-radius: 16px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .8rem; font-weight: 700; line-height: 1.2; text-align: center; }
.chip svg.portrait { width: 64px; height: 74px; }
.chip svg.icon { width: 52px; height: 52px; margin: 11px 0; }
.chip.done { border-color: var(--leaf); }
.chip.done::after { content: "✓"; position: absolute; top: 4px; right: 8px; color: var(--leaf); font-weight: 800; }
.hub-label { font-weight: 800; font-size: .85rem; color: var(--ink-soft); margin: 2px 0 -4px; }
.clue-count { font-size: .9rem; color: var(--ink-soft); }

.sheet { border: 2px solid var(--leaf); border-radius: var(--radius-l); padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.sheet .row { display: flex; gap: 12px; align-items: flex-start; }
.sheet .row svg { width: 64px; height: 64px; flex: none; }
.sheet .row svg.portrait { height: 74px; }

/* options */
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 16px; padding: 12px 14px; cursor: pointer; font-weight: 700; line-height: 1.35; }
.opt.sel { border-color: var(--leaf); background: var(--leaf-wash); }
.opt.wrong { border-color: var(--lat); background: #FBEDE6; }
.opt.right { border-color: var(--leaf); background: var(--leaf-wash); }
.opt[disabled] { cursor: default; }

/* sequence */
.slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.slot { display: flex; gap: 10px; align-items: center; min-height: 50px; border-radius: 14px; border: 2px dashed var(--line); padding: 6px 10px; background: #fff; }
.slot .n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--leaf-wash); color: var(--leaf-d); font-weight: 800; display: grid; place-items: center; }
.slot button { all: unset; cursor: pointer; flex: 1; line-height: 1.35; font-weight: 700; }
.slot.filled { border-style: solid; }
.slot.bad { border-color: var(--lat); background: #FBEDE6; }
.slot.good { border-color: var(--leaf); }
.pool { display: flex; flex-direction: column; gap: 8px; }

/* chat result */
.result { display: flex; flex-direction: column; gap: 8px; }
.result p { margin: 0; }
.result b { color: var(--leaf); }
details.others { border-top: 1px solid var(--line); padding-top: 8px; }
details.others summary { cursor: pointer; font-weight: 700; color: var(--leaf); }
details.others ul { padding-left: 1.1em; margin: 6px 0 0; }
details.others li { margin-bottom: 6px; }

/* rewards */
.blessing { border-radius: var(--radius-l); padding: 16px; background: var(--leaf-d); color: #fff; }
.blessing h3 { margin: 0 0 4px; font-size: 1.15rem; color: var(--gold-l); }
.blessing p { margin: 0; }
.blessing .meaning { margin-top: 8px; font-size: .82rem; opacity: .85; }
.wcard-wrap { perspective: 900px; display: flex; justify-content: center; }
.wcard { width: min(260px, 80%); aspect-ratio: 5 / 7; position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.wcard.flip { transform: rotateY(180deg); }
.wface { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.wback { background: var(--leaf); border: 10px solid var(--gold); display: grid; place-items: center; color: var(--gold-l); font-weight: 800; font-size: 1.4rem; text-align: center; padding: 10px; }
.wfront { transform: rotateY(180deg); background: var(--panel); border: 3px solid var(--gold); }
.wfront .kasavu { height: 14px; }
.wfront .art { flex: 1; display: grid; place-items: center; background: var(--leaf-wash); }
.wfront .art svg { width: 70%; height: auto; }
.wfront .txt { display: block; padding: 10px 14px 14px; }
.wfront .theme { display: block; font-size: .72rem; color: var(--ink-soft); font-weight: 700; }
.wfront .h4 { display: block; font-weight: 800; margin: 0; font-size: 1.2rem; color: var(--leaf-d); line-height: 1.2; }
.wfront .p { display: block; margin: 4px 0 0; font-size: .82rem; line-height: 1.4; }

/* title */
.title-hero { position: relative; }
.title-hero .stage { aspect-ratio: 400 / 260; }
.title-block { padding: 18px 20px 6px; }
.title-block h1 { margin: 0; font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--leaf-d); letter-spacing: -.01em; }
.title-block h1 span { color: var(--gold); }
.title-block .tag { margin: 6px 0 0; color: var(--ink-soft); }
.lang-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lang-pick button { min-height: 64px; border-radius: 18px; border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: 1.15rem; cursor: pointer; }
.lang-pick button[aria-pressed="true"] { border-color: var(--leaf); background: var(--leaf-wash); }
.notice { border-radius: var(--radius-s); padding: 12px 14px; background: #EEF0FA; border-left: 5px solid #4B5BA6; }
.notice p { margin: 0; }
.foot { font-size: .78rem; color: var(--ink-soft); padding: 4px 20px 22px; }

/* passport */
.pp h2 { margin: 0; font-size: 1.5rem; color: var(--leaf-d); }
.pp h3 { margin: 6px 0 0; font-size: 1.05rem; }
.pp .ledger { border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; background: #fff; }
.pp .ledger ul { margin: 6px 0 0; padding: 0; list-style: none; }
.pp .ledger li { padding: 4px 0; border-top: 1px solid #EEF2E8; }
.pp .ledger li:first-child { border-top: 0; }
.pp .empty { color: var(--ink-soft); font-size: .9rem; }
.pp .private { font-size: .82rem; color: var(--ink-soft); }
.mini-card { display: flex; gap: 10px; align-items: center; }
.mini-card i { flex: none; width: 34px; height: 46px; border-radius: 6px; border: 3px solid var(--gold); background: var(--leaf); }

.break { text-align: center; }
.break .cup { font-size: 3rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- engine 0.2: Life Shelf ---------- */
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shelf h1, .life-h { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--leaf-d); line-height: 1.15; }
.coin-pill { display: inline-flex; align-items: center; gap: 6px; background: #FFF6DA; border: 2px solid var(--gold); border-radius: 20px; padding: 2px 12px 2px 6px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coin-pill i, .coin-note i, .coin-big i { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-l), var(--gold) 70%); box-shadow: inset 0 0 0 2px #8F6A10; flex: none; }
.coin-note { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-weight: 700; color: #6B4E0A; }
.coin-big { display: flex; align-items: center; gap: 10px; font-size: 2rem; font-weight: 800; margin: 4px 0; font-variant-numeric: tabular-nums; }
.coin-big i { width: 30px; height: 30px; }
.lives { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.life { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 40% 1fr; width: 100%; border: 2px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: #fff; }
.life:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.life.is-soon { background: #F4F6EF; }
.life.is-soon .life-cover { filter: saturate(.35) opacity(.85); }
.life-cover { position: relative; min-height: 128px; overflow: hidden; background: #DCEEE6; }
.life-cover .scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.life-pic { position: absolute; left: 6px; bottom: -4px; width: 58%; }
.life-pic svg { width: 100%; height: auto; display: block; }
.life-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.life-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: .72rem; font-weight: 800; border-radius: 10px; padding: 1px 9px; background: var(--leaf-wash); color: var(--leaf-d); }
.badge.len-saga { background: #E4EEF2; color: #1F4E63; }
.badge.len-lifetime { background: #FFF1CC; color: #6B4E0A; }
.life-title { font-weight: 800; font-size: 1.12rem; line-height: 1.2; color: var(--ink); margin-top: 2px; }
.life-you { font-size: .82rem; color: var(--ink-soft); line-height: 1.3; margin: 0; }
.life-status { font-size: .8rem; font-weight: 700; color: var(--leaf); margin-top: auto; padding-top: 6px; }
.life-status.soon { color: var(--ink-soft); }
.life-status.done { color: var(--gold); }
.continue { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-l); background: var(--leaf-wash); border: 2px solid var(--leaf); }
.continue:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.continue .btn { flex: none; display: inline-flex; align-items: center; }
.chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chapters li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; background: #fff; }
.chapters li.is-soon { background: #F4F6EF; border-style: dashed; }
.cname { font-weight: 700; }
.cstat { font-size: .82rem; color: var(--ink-soft); }
.cstat.ok { color: var(--leaf); font-weight: 700; }

/* quiz, opinion, mission */
.board { background: #24392F; color: #F1F6EA; border: 6px solid var(--wood, #7A4E2D); border-radius: 10px; padding: 10px 14px; font-weight: 700; line-height: 1.5; }
.hint-box { border-radius: var(--radius-s); padding: 8px 12px; background: #FFF6DA; border-left: 5px solid var(--gold); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: .9rem; box-shadow: none; }
.voices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.voices li { display: flex; gap: 10px; align-items: flex-start; }
.voices svg { width: 52px; height: 60px; flex: none; }
.voices p { margin: 0; }
.mission { position: relative; border-radius: var(--radius-l); padding: 14px 16px; background: #fff; border: 3px solid var(--gold); display: flex; flex-direction: column; gap: 6px; }
.mission h3 { margin: 2px 0 0; font-size: 1.2rem; color: var(--leaf-d); line-height: 1.2; }
.mission p { margin: 0; }
.mission .eyebrow { font-size: .78rem; font-weight: 800; color: #6B4E0A; }
.mission .safety { font-size: .86rem; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 6px; }
.tier-badge { align-self: flex-start; font-size: .76rem; font-weight: 800; border-radius: 10px; padding: 2px 10px; background: var(--leaf-wash); color: var(--leaf-d); }
.tier-badge.t2, .tier-badge.t3 { background: #FBEDE6; color: var(--lat); }
.tile.glow { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,150,26,.35); }

/* Wisdom card button reset (was inline in 0.1) */
button.wcard { border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; display: block; }