:root{
  --night:#0E1A14; --night-2:#16271D; --paper:#FBF6EC; --paper-2:#F3EBDA;
  --ink:#2B2219; --ink-soft:#6B5E4E; --leaf:#3F7A4A; --leaf-dark:#2E5C37;
  --gold:#E9A93B; --gold-soft:#F7E2B5; --berry:#C2553D; --line:#E2D6C0;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{background:radial-gradient(120% 80% at 30% 0%, #1E3526 0%, var(--night) 60%); color:var(--ink);
  font:500 17px/1.55 Nunito, system-ui, sans-serif; -webkit-font-smoothing:antialiased}
button{font:inherit; cursor:pointer}

.book{min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:1120px; margin:0 auto;
  padding:clamp(16px,4vh,40px) 24px; gap:0; align-items:stretch}
.picture{margin:0; border-radius:var(--radius) 0 0 var(--radius); overflow:hidden; background:var(--night-2);
  box-shadow:0 30px 60px rgba(0,0,0,.35); max-height:calc(100dvh - 2*clamp(16px,4vh,40px))}
.picture img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .45s ease}
.picture img.fading{opacity:0}
.page{background:var(--paper); border-radius:0 var(--radius) var(--radius) 0; padding:clamp(24px,4vw,48px);
  box-shadow:0 30px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:auto;
  max-height:calc(100dvh - 2*clamp(16px,4vh,40px))}
.page > *{animation:rise .5s ease both}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.page > *{animation:none}.picture img{transition:none}}

.kicker{font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--leaf); margin:0 0 6px}
h1,h2{font-family:Fraunces, Georgia, serif; font-weight:600; line-height:1.1; margin:0 0 16px; color:var(--ink)}
h1{font-size:clamp(2.2rem,4.4vw,3.2rem)}
h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.story p{font-family:Fraunces, Georgia, serif; font-weight:400; font-size:1.12rem; line-height:1.6; margin:0 0 14px}
.story em{font-style:italic}
.lede{color:var(--ink-soft); margin:0 0 22px}

.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:18px}
.btn{border:0; border-radius:99px; padding:14px 24px; font-weight:800; font-size:1.02rem; background:var(--leaf); color:#fff;
  box-shadow:0 3px 0 var(--leaf-dark); transition:transform .1s ease, background .2s}
.btn:hover{background:#468654}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--leaf-dark)}
.btn.ghost{background:transparent; color:var(--leaf-dark); box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{background:var(--paper-2)}
.btn:disabled{opacity:.45; cursor:default}
.choice{display:block; width:100%; text-align:left; border:2px solid var(--line); background:#fff; border-radius:16px;
  padding:14px 18px; font-weight:700; color:var(--ink); margin:0 0 10px; transition:border-color .2s, background .2s}
.choice:hover{border-color:var(--leaf); background:#F6FBF5}
.choice span{display:block; font-weight:500; color:var(--ink-soft); font-size:.92rem}

/* puzzle */
.puzzle{background:#fff; border:2px solid var(--line); border-radius:18px; padding:18px; margin:6px 0 4px}
.puzzle .q{font-weight:800; font-size:1.08rem; margin:0 0 12px}
.visual{display:block; width:100%; height:auto; margin:0 0 14px}
.answer-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.answer{width:120px; font:800 1.9rem/1 Nunito, sans-serif; text-align:center; padding:10px; border-radius:14px;
  border:2px solid var(--line); background:var(--paper); color:var(--ink)}
.answer:focus{outline:none; border-color:var(--leaf)}
.answer.wrong{animation:shake .35s; border-color:var(--berry)}
.answer.right{border-color:var(--leaf); background:#EAF5EA}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pad{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px}
.pad button{border:0; border-radius:12px; padding:10px 0; font-weight:800; font-size:1.2rem; background:var(--paper-2); color:var(--ink)}
.pad button:active{background:var(--line)}
.feedback{min-height:1.5em; margin:12px 0 0; font-weight:700}
.feedback.hint{color:var(--berry)}
.feedback.good{color:var(--leaf)}
.worked{display:block; margin:0; padding:12px 14px; background:var(--gold-soft); border-radius:12px; font-weight:700}

/* pocket and lock */
.pocket{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px}
.token{border:2px dashed var(--gold); background:var(--gold-soft); color:var(--ink); border-radius:14px; padding:10px 14px;
  font-weight:800; display:flex; align-items:center; gap:8px}
.token b{font-size:1.4rem}
.token.used{opacity:.35; border-style:solid}
.lock{display:flex; gap:14px; justify-content:center; padding:18px; background:#5A3E26; border-radius:18px; margin:0 0 6px}
.dial{width:84px; height:104px; border-radius:16px; background:#3E2A19; color:var(--gold-soft); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; box-shadow:inset 0 3px 8px rgba(0,0,0,.5)}
.dial .carving{font-size:1.5rem; line-height:1; filter:sepia(.6) saturate(.8)}
.dial b{font-size:2.2rem; line-height:1; min-height:2.2rem}
.lock{align-items:center}
.op{color:var(--gold-soft); font-weight:800; font-size:1.8rem}
.dial.big{background:#2E1F12}
.dial.set{box-shadow:inset 0 3px 8px rgba(0,0,0,.5), 0 0 0 3px var(--gold)}
.pocket-label{font-weight:800; font-size:.85rem; color:var(--ink-soft); margin:12px 0 8px}

.end-note{color:var(--ink-soft); font-size:.95rem; margin:6px 0 0}
.noscript{color:#fff; text-align:center; padding:40px}

@media (max-width:820px){
  .book{grid-template-columns:1fr; padding:0; min-height:100dvh}
  .picture{border-radius:0; max-height:none; height:46dvh}
  .picture img{object-position:var(--focus,center 40%)}
  .page{border-radius:var(--radius) var(--radius) 0 0; margin-top:-24px; position:relative; max-height:none;
    padding:26px 20px calc(28px + env(safe-area-inset-bottom))}
  .story p{font-size:1.05rem}
  .answer{width:100px; font-size:1.6rem}
}