section[hidden] { display:none; }
.map { display:grid; grid-template-columns:1fr .35fr 1fr .35fr 1fr .35fr 1fr; align-items:center; gap:4px 0; max-width:640px; margin:0 auto 6px;
  padding:14px 10px; background:linear-gradient(#bfe9a5,#8fd17d); border:5px solid #6bbf59; border-radius:28px; }
.arrow { font-size:1.4rem; color:#2e7d32; line-height:1; }
.node { position:relative; aspect-ratio:1; width:100%; max-width:88px; margin:0 auto; border-radius:50%; border:4px solid #fff; background:#fff;
  font:inherit; font-size:clamp(1.5rem,7vw,2.6rem); cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.2); touch-action:manipulation; padding:0; line-height:1; }
.node.locked { filter:grayscale(1); opacity:.55; }
.node.current { border-color:var(--c1); animation:throb 1.1s infinite; }
.node.done { border-color:#1b9e5a; background:#e8ffe9; }
.node .tick { position:absolute; right:-4px; bottom:-4px; font-size:1.1rem; }
.node .lock { position:absolute; right:-4px; bottom:-4px; font-size:1rem; }
.node .who { position:absolute; left:50%; top:-22px; transform:translateX(-50%); font-size:1.7rem; animation:hop .9s infinite; }
.nlabel { grid-column:span 1; font-size:.7rem; font-weight:bold; text-align:center; color:#245c1f; }
.maphelp { opacity:.7; margin:8px 0; }
#book { font-size:1.5rem; letter-spacing:2px; max-width:55vw; }

.qhead { display:flex; align-items:center; justify-content:space-between; gap:8px; max-width:720px; margin:0 auto 8px; flex-wrap:wrap; }
.qtitle { font-weight:bold; font-size:1.3rem; }
.qdots { font-size:1.5rem; letter-spacing:3px; }
.boss { font-size:2rem; margin:4px 0; }
.bossface { font-size:3.4rem; display:inline-block; animation:shake .6s infinite; }
.qstory { max-width:640px; margin:6px auto; background:#fff; border:4px solid var(--c3); border-radius:20px; padding:10px 14px; font-size:clamp(1.15rem,4.4vw,1.55rem); font-weight:bold; }
.expr { font-size:clamp(2.2rem,9vw,3.6rem); font-weight:bold; color:var(--c1); margin:8px 0; }
.expr[hidden], #keypad[hidden], .choices[hidden], .cards[hidden], .boss[hidden] { display:none; }
.qbtns { margin:4px 0; }

.choices { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.choice { font:inherit; font-size:clamp(1.6rem,7vw,2.4rem); font-weight:bold; padding:18px 22px; min-width:42%; border-radius:22px; border:4px solid var(--c4);
  background:#fff; color:var(--c4); cursor:pointer; box-shadow:0 5px 0 var(--c4); touch-action:manipulation; }
.choice:active { transform:translateY(3px); box-shadow:0 2px 0 var(--c4); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:420px; margin:10px auto; }
.pcard { font:inherit; font-size:2.2rem; font-weight:bold; padding:18px 4px; border-radius:18px; border:4px solid var(--c2); background:#fff; color:var(--ink);
  cursor:pointer; box-shadow:0 4px 0 var(--c2); touch-action:manipulation; }
.pcard.sel { background:var(--c3); border-color:var(--c1); transform:translateY(-4px); }
.pcard.gone { visibility:hidden; }
.cards .target { grid-column:1 / -1; font-size:1.3rem; }