/* Chapter screen + every activity: hidden objects, receipt, shelf, cipher, UV, padlock, talk, board, interrogation */

/* ----- Chapter frame ----- */
.chapter-screen { justify-content: flex-start; gap: 10px; }
.ch-head { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ch-kicker { font-family: var(--hand); font-size: 1.2rem; color: var(--accent); margin: 0; }
.ch-head h2 { font-family: var(--display); font-size: 1.5rem; margin: 0; line-height: 1.1; }
.ch-tools { display: flex; align-items: center; gap: 8px; }
.cookies { font-size: 1.15rem; white-space: nowrap; }
.cookies i { font-style: normal; transition: filter .3s, opacity .3s; }
.cookies i.gone { filter: grayscale(1); opacity: .25; }
.shake { animation: shake .45s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ch-text { width: 100%; margin: 0; color: var(--ink-soft); line-height: 1.4; }
.hint {
  width: 100%; margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff7dc;
  box-shadow: inset 0 0 0 1px rgba(227, 180, 92, .6); font-size: .95rem; animation: in .3s ease both;
}
.hint b { color: var(--accent-2); }
.ch-body { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.page.intro { text-align: center; }
.page.intro p { font-family: var(--display); font-size: 1.25rem; line-height: 1.5; margin: 0 0 20px; }
.chapter-card { box-shadow: var(--shadow), inset 0 0 0 2px var(--glow); }

.after { position: fixed; inset: 0; z-index: 9; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(40, 25, 15, .35); animation: in .3s ease both; }
.after .page { width: min(528px, 100%); text-align: center; animation: rise .4s cubic-bezier(.2, .9, .3, 1.2) both; margin-bottom: env(safe-area-inset-bottom); }
.after p { font-size: 1.1rem; line-height: 1.5; margin: 0 0 12px; }
.after-clues { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.after-clues span { padding: 8px 12px; border-radius: 12px; background: var(--wash-3); font-weight: 700; color: var(--accent-2); }
.after .btn { width: 100%; }

/* ----- Hidden objects ----- */
.act-scene { position: relative; }
.ho-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ho-want {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.3rem; transition: opacity .3s;
}
.ho-want small { font-size: .62rem; color: var(--ink-soft); text-align: center; line-height: 1.1; }
.ho-want.key { box-shadow: inset 0 0 0 2px var(--glow); }
.ho-want.got { opacity: .4; }
.ho-want.got small { text-decoration: line-through; }
.ho-view { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 auto; }
.ho-scene { position: relative; width: 100%; aspect-ratio: 3 / 4; touch-action: manipulation; }
.ho-scene.big { width: 200%; }
.ho-art, .ho-paint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.has-art .ho-paint, .has-art .ho-decoy, .has-art .ho-item:not(.got) { opacity: 0; }
.ho-decoy, .ho-item { position: absolute; transform: translate(-50%, -50%); font-size: clamp(16px, 4.8vw, 24px); line-height: 1; pointer-events: none; user-select: none; }
.ho-scene.big .ho-decoy, .ho-scene.big .ho-item { font-size: clamp(26px, 8vw, 40px); }
.ho-decoy { opacity: .9; }
.ho-item { opacity: .92; filter: saturate(.85); }
.ho-item.got { animation: got .6s ease both; }
@keyframes got { 40% { transform: translate(-50%, -50%) scale(1.8); } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px var(--glow)); } }
.has-art .ho-item.got::after { content: '✓'; position: absolute; inset: 0; color: #fff; }
i.ring { display: inline-block; width: 1em; height: .6em; border-radius: 50%; border: .14em solid rgba(122, 75, 42, .75); vertical-align: middle; }
.ho-miss { position: absolute; transform: translate(-50%, -50%); color: var(--accent-2); font-weight: 700; pointer-events: none; animation: miss .6s ease both; }
@keyframes miss { to { opacity: 0; transform: translate(-50%, -110%); } }
.ho-glow { position: absolute; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 4px var(--glow), 0 0 30px 10px var(--glow); animation: glow 1s ease infinite alternate; }
@keyframes glow { from { opacity: .3; } to { opacity: .9; } }
.ho-frame { position: relative; width: min(100%, 48vh); margin: 0 auto; } /* whole painting fits on screen */
.ho-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; }

/* ----- Torn receipt ----- */
.receipt { width: min(320px, 100%); margin: 8px auto; display: flex; flex-direction: column; gap: 8px; }
.strip {
  border: 0; padding: 16px 12px; background: #fffdf6; font-family: 'Courier New', monospace; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  box-shadow: 0 3px 8px rgba(70, 45, 20, .15); transform: rotate(var(--tilt));
  clip-path: polygon(0 6%, 4% 0, 9% 7%, 15% 0, 22% 6%, 30% 0, 38% 7%, 46% 0, 54% 6%, 62% 0, 70% 7%, 78% 0, 86% 6%, 93% 0, 100% 7%, 100% 94%, 95% 100%, 88% 93%, 80% 100%, 72% 94%, 64% 100%, 56% 93%, 48% 100%, 40% 94%, 32% 100%, 24% 93%, 16% 100%, 8% 94%, 0 100%);
  transition: transform .2s, background .2s;
}
.strip.sel { background: #fff1c9; transform: rotate(0) scale(1.04); }
.solved .strip { transform: none; background: #f4ffef; }

/* ----- Rainbow shelf ----- */
.shelf { position: relative; width: min(340px, 100%); margin: 20px auto 0; }
.books { height: 220px; display: flex; align-items: flex-end; gap: 6px; padding: 0 12px; }
.book { flex: 1; border: 0; border-radius: 4px 4px 2px 2px; box-shadow: inset -6px 0 0 rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s; position: relative; }
.book i { position: absolute; left: 20%; right: 20%; top: 18%; height: 6px; background: rgba(255, 240, 200, .6); border-radius: 2px; }
.book.sel { transform: translateY(-18px); box-shadow: 0 0 0 3px var(--glow); }
.plank { height: 16px; border-radius: 4px; background: #8a5a2b; box-shadow: 0 6px 12px rgba(70, 45, 20, .25); }
.drawer { margin: 6px auto 0; width: 50%; height: 34px; border-radius: 4px; background: #7a4b2a; color: transparent; display: grid; place-items: center; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), color .4s; }
.solved .drawer { transform: translateY(26px) scale(1.06); color: #b8ff6a; text-shadow: 0 0 10px #7c4dff; font-weight: 700; }

/* ----- Cipher wheel ----- */
.note { position: relative; padding: 18px 16px; background: #fffaf0; border-radius: 6px; box-shadow: var(--shadow); transform: rotate(-1deg); text-align: center; }
.note small { position: absolute; right: 10px; top: 4px; font-family: var(--hand); font-size: 1.1rem; color: var(--ink-soft); }
.coded { font-family: var(--hand); font-size: 1.5rem; margin: 6px 0; color: var(--ink-soft); letter-spacing: .05em; }
.decoded { font-family: 'Courier New', monospace; font-weight: 700; margin: 0; color: var(--accent-2); min-height: 1.4em; }
.solved .decoded { color: var(--leaf); }
.wheel-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.wheel { position: relative; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, var(--paper) 46%, #e8d5b5 47%, #e8d5b5 64%, var(--paper) 65%); box-shadow: var(--shadow); }
.ring-out span, .ring-in span { position: absolute; left: 50%; top: 50%; font-weight: 700; font-size: .78rem; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a))); }
.ring-in span { color: var(--accent); transform: translate(-50%, -50%) rotate(var(--a)) translateY(-64px) rotate(calc(-1 * var(--a))); }
.shift { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-size: 1.6rem; color: var(--accent-2); }

/* ----- UV lamp ----- */
.uv { position: relative; width: min(100%, 60vh); aspect-ratio: 1; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #b07a46; touch-action: none; --x: 50%; --y: 50%; }
.uv-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.uv.has-art .uv-art { display: block; }
.has-art .lock-art { display: none; }
.lock-art .plate { position: absolute; left: 30%; top: 25%; width: 40%; height: 55%; border-radius: 18px; background: linear-gradient(145deg, #e6c068, #a8792f); box-shadow: inset 0 0 0 4px #8a5f22; }
.lock-art .hole { position: absolute; left: 46%; top: 42%; width: 8%; height: 18%; background: #2b1d14; border-radius: 50% 50% 20% 20%; }
.uv-dark { position: absolute; inset: 0; background: rgba(15, 8, 30, .82); transition: background .3s; }
.uv-glow { position: absolute; inset: 0; opacity: 0; -webkit-mask: radial-gradient(circle 70px at var(--x) var(--y), #000 60%, transparent 100%); mask: radial-gradient(circle 70px at var(--x) var(--y), #000 60%, transparent 100%); }
.uv.on .uv-glow, .uv.peek .uv-glow { opacity: 1; }
.uv.on .uv-dark, .uv.peek .uv-dark { background: radial-gradient(circle 80px at var(--x) var(--y), rgba(124, 77, 255, .35), rgba(15, 8, 30, .85) 100%); }
.fibers { position: absolute; left: 62%; top: 64%; width: 18%; height: 10%; transform: translate(-50%, -50%) rotate(-12deg);
  background: repeating-linear-gradient(80deg, transparent 0 5px, #b8ff6a 5px 7px), repeating-linear-gradient(-10deg, transparent 0 9px, #d4ff9a 9px 10px); filter: drop-shadow(0 0 4px #b8ff6a); border-radius: 40%; }
.print { position: absolute; left: 36%; top: 36%; width: 12%; aspect-ratio: .8; border-radius: 50%; border: 2px dotted rgba(184, 255, 106, .5); }
.lamp { position: absolute; left: var(--x); top: var(--y); width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 3px rgba(184, 255, 106, .7); opacity: 0; }
.uv.on .lamp { opacity: 1; }
.uv.solved .uv-dark { background: rgba(15, 8, 30, .3); }
.uv.solved .uv-glow { opacity: 1; -webkit-mask: none; mask: none; }

/* ----- Padlock ----- */
.padlock { width: 230px; margin: 30px auto 0; }
.shackle { width: 120px; height: 90px; margin: 0 auto -16px; border: 18px solid #9a9a9a; border-bottom: 0; border-radius: 70px 70px 0 0; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.padlock.open .shackle { transform: translateY(-28px) rotate(-12deg); transform-origin: left bottom; }
.padlock .body { background: linear-gradient(160deg, #e6c068, #a8792f); border-radius: 26px; padding: 26px 18px; box-shadow: var(--shadow), inset 0 0 0 4px #8a5f22; }
.dials { display: flex; justify-content: center; gap: 10px; }
.dial { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dial b { width: 52px; height: 60px; display: grid; place-items: center; background: #2b1d14; color: #f7eedc; font-family: var(--display); font-size: 2rem; border-radius: 10px; }
.dial button { width: 52px; height: 36px; border: 0; border-radius: 10px; background: var(--paper); box-shadow: 0 2px 0 #8a5f22; }

/* ----- Talk ----- */
.cast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.who { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.who.on { box-shadow: var(--shadow), inset 0 0 0 3px var(--accent); }
.who.pulse { animation: glow 0.8s ease infinite alternate; }
.who b { display: block; font-family: var(--display); }
.who small { display: block; font-size: .68rem; color: var(--ink-soft); line-height: 1.15; }
.face { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; overflow: hidden; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--line); }
.face img { width: 100%; height: 100%; object-fit: cover; }
.convo { flex: 1; min-height: 180px; display: flex; flex-direction: column; gap: 8px; }
.log { flex: 1; max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; line-height: 1.4; animation: in .3s ease both; font-size: .95rem; }
.bubble b { display: block; font-size: .78rem; color: var(--accent); }
.bubble.them { align-self: flex-start; background: var(--paper); box-shadow: 0 2px 6px rgba(70, 45, 20, .1); border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--accent); color: #fffaf0; border-bottom-right-radius: 4px; }
.bubble.narr { align-self: center; background: transparent; font-style: italic; color: var(--ink-soft); text-align: center; }
.bubble.fact { box-shadow: 0 0 0 3px var(--glow), 0 2px 6px rgba(70, 45, 20, .1); }
.asks { display: flex; flex-direction: column; gap: 6px; }
.ask { border: 0; padding: 11px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); text-align: left; font-size: .95rem; color: var(--accent-2); }
.ask.asked { opacity: .55; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); }
.facts { display: flex; gap: 6px; justify-content: center; }
.facts span { padding: 6px 12px; border-radius: 999px; background: var(--paper); font-size: .85rem; box-shadow: inset 0 0 0 1px var(--line); }
.facts span.got { background: var(--leaf); color: #fff; }

/* ----- Evidence board ----- */
.cork { position: relative; padding: 14px 10px; border-radius: var(--radius); background-color: #c79a63; background-size: cover; background-position: center;
  background-image: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .06) 1px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .06) 1px, transparent 2px);
  box-shadow: var(--shadow), inset 0 0 0 8px #8a5a2b; display: flex; flex-direction: column; gap: 16px; }
.cork:not(.has-art) { background-size: 14px 14px, 22px 22px; }
.yarn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.thread { opacity: .85; }
.thread { fill: none; stroke: #b0232f; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw .7s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.qs, .ev { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.pin { position: relative; border: 0; border-radius: 4px; padding: 14px 8px 10px; background: #fffaf0; box-shadow: 0 4px 8px rgba(40, 20, 5, .3); transform: rotate(var(--tilt)); font-size: .85rem; line-height: 1.25; transition: transform .2s, box-shadow .2s; }
.pin::before { content: ''; position: absolute; left: 50%; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 2px rgba(0, 0, 0, .35); }
.pin.q { background: #fff3c4; font-family: var(--display); font-weight: 700; }
.pin.q.done { background: #e2f3d8; }
.pin.e span { font-size: 1.5rem; display: block; }
.pin.e small { display: block; }
.pin.e.sel { transform: rotate(0) scale(1.08); box-shadow: 0 0 0 3px var(--glow), 0 8px 16px rgba(40, 20, 5, .35); z-index: 2; }
.pin.e.used { opacity: .7; }
.ev.nudge .pin.e:not(.used) { animation: shake .45s ease; }

/* ----- Interrogation ----- */
.lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.suspect { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); text-align: center; transition: opacity .4s; }
.suspect canvas { width: 76px; height: 76px; border-radius: 50%; background: var(--paper-2); }
.suspect b { font-family: var(--display); font-size: .95rem; }
.suspect .ask { width: 100%; padding: 8px 6px; font-size: .78rem; text-align: center; }
.suspect.clear { opacity: .55; }
.suspect.caught { box-shadow: var(--shadow), 0 0 0 3px var(--accent); }

/* ----- Finale medal ----- */
.medal { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px auto 10px; padding: 12px 18px; border-radius: 18px; background: var(--wash-3); width: fit-content; animation: rise .5s ease both; }
.medal span { font-size: 2.2rem; }
.medal b { font-family: var(--display); font-size: 1.15rem; }
.medal small { color: var(--ink-soft); }

/* ----- Painted art ----- */
.intro-art { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.suspect img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.finale-face { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--glow); }
.finale-art { display: block; width: 100%; border-radius: 16px; margin: 6px 0 4px; box-shadow: var(--shadow); }