/* bone.css */
/* bone.css — DOM pieces that only "The Priest's Helper" (Shang·1) needs (plus the shared hold ring).
   The frame (title card, Hint, Later, coach bubble, chips, stamp, note, Continue) reuses .pz-* from ui.css. */
.bn-chips { position: absolute; inset: 0; }
.bn .pz-head.pop { animation: pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }
.bn .pz-head { width: min(400px, 40vw); }
.bn.hand-busy .pz-head { opacity: 0.12 !important; transition: opacity 0.4s; }

/* the four textbook steps, a row inside the title card */
.bn-steps { margin: 9px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; counter-reset: step; }
.bn-steps li { counter-increment: step; display: flex; align-items: center; gap: 5px; padding: 2px 9px 3px 4px; font-size: clamp(11px, calc(var(--u) * 1.6), 12.5px); font-weight: 700; color: #fff1d6;
  background: rgba(48, 28, 14, 0.78); border: 1.5px solid rgba(255, 226, 170, 0.3); border-radius: 999px; transition: background 0.3s, opacity 0.3s; opacity: 0.6; }
.bn-steps li::before { content: counter(step); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 240, 210, 0.22); font-size: 11px; }
.bn-steps li.now { opacity: 1; background: #a8321f; border-color: #ffd27a; }
.bn-steps li.now::before { background: #fff1d2; color: #a8321f; }
.bn-steps li.done { opacity: 0.95; background: #2f7d4f; }
.bn-steps li.done::before { content: "\2713"; background: #fff; color: #2f7d4f; }
.bn.won .bn-steps { display: none; }

/* names under the bones */
.bn .pz-chip.bn-name { transform: translate(-50%, 0); padding: 2px 10px 3px; opacity: 0; transition: opacity 0.3s; }
.bn .pz-chip.bn-name.show { opacity: 0.92; }
.bn .pz-chip.bn-name.active { opacity: 1; }
.bn.won .pz-chip { opacity: 0 !important; }

/* the priest speaks: his face (cropped from the priest art) in the round frame */
.bn-coach p { padding-top: 14px; }
.bn-face { flex: none; width: clamp(64px, calc(var(--u) * 12), 104px); height: clamp(64px, calc(var(--u) * 12), 104px); border-radius: 50%; border: 3px solid var(--line); box-shadow: 0 5px 12px rgba(40, 20, 6, 0.45);
  background: #e9d2a6 url("../assets/shang/chars/priest-stern.webp?v=8e275a54d8dfd5fc") no-repeat; background-size: 160% auto; background-position: 54% 1%; pointer-events: auto; cursor: pointer; transition: transform 0.2s; }
.bn-face[data-face="nod"] { background-image: url("../assets/shang/chars/priest-nod.webp?v=8e275a54d8dfd5fc"); }
.bn-coach.pop .bn-face { animation: bnNod 0.45s ease-out; }
@keyframes bnNod { 0% { transform: translateY(0); } 35% { transform: translateY(4px) rotate(-2deg); } 100% { transform: none; } }
.bn-who { position: absolute; left: 12px; top: -0.85em; padding: 1px 10px 2px; font-size: 0.7em; letter-spacing: 0.03em; color: #fff1d2; background: #5b3a1e; border-radius: 6px; white-space: nowrap; }

/* press & hold, on the rod's grip */
.bn-press, .bn-turn { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.bn-press.on, .bn-turn.on { opacity: 1; }
.bn-press i { position: relative; width: 74px; height: 74px; border-radius: 50%; border: 3px solid #ffd27a; background: radial-gradient(circle, rgba(255, 190, 90, 0.45), rgba(255, 140, 40, 0.05) 70%); box-shadow: 0 0 18px rgba(255, 150, 50, 0.7); animation: bnPress 1.3s ease-in-out infinite; }
.bn-press i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff3d8; box-shadow: 0 2px 6px rgba(40, 20, 6, 0.5); animation: bnPressDot 1.3s ease-in-out infinite; }
@keyframes bnPress { 0%, 100% { transform: scale(1); } 45% { transform: scale(0.82); } }
@keyframes bnPressDot { 0%, 100% { transform: scale(1); } 45% { transform: scale(0.7); background: #ffd27a; } }
.bn-press span, .bn-turn span { padding: 3px 12px 4px; border-radius: 999px; background: rgba(48, 28, 14, 0.88); color: #fff1d6; font-weight: 700; font-size: clamp(13px, calc(var(--u) * 2.1), 17px); white-space: nowrap; border: 1.5px solid rgba(255, 226, 170, 0.45); }
.bn-turn i { width: 120px; height: 34px; position: relative; }
.bn-turn i::before { content: ""; position: absolute; inset: 4px 10px; border: 3px solid #ffd27a; border-color: #ffd27a transparent transparent transparent; border-radius: 50%; }
.bn-turn i::after { content: ""; position: absolute; left: 50%; top: 2px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff3d8; box-shadow: 0 2px 6px rgba(40, 20, 6, 0.5); animation: bnSwipe 1.6s ease-in-out infinite; }
@keyframes bnSwipe { 0% { transform: translateX(-46px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(46px); opacity: 0; } }

/* the rod heating in the fire: a little glowing gauge */
.bn-heat { position: absolute; left: 0; top: 0; width: 120px; height: 12px; margin: -6px 0 0 -60px; border-radius: 999px; background: rgba(40, 20, 8, 0.75); border: 2px solid rgba(255, 220, 160, 0.5); overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.bn-heat.on { opacity: 1; }
.bn-heat i { position: absolute; inset: 0; width: calc(var(--p, 0) * 1%); background: linear-gradient(90deg, #5a1606, #c2320c 40%, #ff8a22 75%, #ffd88a); box-shadow: 0 0 10px #ff7a22; }

/* Turn over */
.bn-flip { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 10px 24px 12px 46px; font-size: clamp(16px, calc(var(--u) * 2.6), 21px); font-weight: 700; color: #5a3618;
  background: linear-gradient(#fff6de, #f1dfb4); border: 2.5px solid #6b4727; border-radius: 999px; box-shadow: 0 4px 0 #6b4727, 0 8px 14px rgba(20, 8, 2, 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.3s; white-space: nowrap; }
.bn-flip::before { content: ""; position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; margin-top: -9px; border: 2.5px solid #8f2416; border-right-color: transparent; border-radius: 50%; }
.bn-flip::after { content: ""; position: absolute; left: 25px; top: 50%; margin-top: -11px; border: 5px solid transparent; border-bottom-color: #8f2416; transform: rotate(40deg); }
.bn-flip.on { opacity: 1; pointer-events: auto; animation: popS 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
.bn-flip:active { translate: 0 3px; box-shadow: 0 1px 0 #6b4727; }

/* the hold ring (src/feel-hold.js) — shared look for every press-and-hold puzzle */
.hold-ring { position: absolute; left: 0; top: 0; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#ffd27a calc(var(--p, 0) * 1%), rgba(60, 34, 14, 0.55) 0);
  -webkit-mask: radial-gradient(circle, transparent 29px, #000 30px, #000 40px, transparent 41px); mask: radial-gradient(circle, transparent 29px, #000 30px, #000 40px, transparent 41px);
  filter: drop-shadow(0 1px 3px rgba(30, 12, 2, 0.7)); transition: transform 0.15s; }
.hold-ring.hot { background: conic-gradient(#ff9a3a calc(var(--p, 0) * 1%), rgba(60, 34, 14, 0.55) 0); filter: drop-shadow(0 0 8px rgba(255, 120, 30, 0.9)); }
.hold-ring.pop { animation: ringPop 0.4s ease-out forwards; }
@keyframes ringPop { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

/* solved: the note with the four step pictures */
.bn-note { width: min(760px, 92vw); }
.bn-note-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bn-note p { font-style: italic; font-size: clamp(14px, calc(var(--u) * 2.2), 18px); }
.bn-strip { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: pic; }
.bn-strip li { counter-increment: pic; display: flex; flex-direction: column; gap: 3px; font-size: clamp(10.5px, calc(var(--u) * 1.5), 12.5px); line-height: 1.2; color: var(--ink2); }
.bn-strip img { width: 100%; aspect-ratio: 11 / 8; border-radius: 6px; border: 2px solid var(--line); background: #f3e3bf; transform: rotate(-1deg); box-shadow: 0 3px 6px rgba(40, 20, 6, 0.3); }
.bn-strip li:nth-child(even) img { transform: rotate(1.2deg); }
.bn-strip span::before { content: counter(pic) ". "; font-weight: 700; color: var(--red); }
.bn .pz-stamp { top: 26%; left: 68%; font-size: clamp(40px, calc(var(--u) * 10), 90px); }

/* small landscape phones */
@media (max-height: 480px) {
  .bn-coach p { transition: opacity 0.4s; padding-top: 10px; }
  .bn-coach.quiet p { opacity: 0; }
  .bn .pz-head { flex-wrap: wrap; row-gap: 1px; width: min(330px, 40vw); padding: 7px 11px 8px; }
  .bn .pz-head h2 { font-size: 17px; margin: 2px 0 1px; }
  .bn .pz-num { font-size: 10px; }
  .bn .pz-brief { display: block; flex-basis: 100%; font-size: 12px; line-height: 1.25; }
  .bn-steps { margin: 3px 0 0; gap: 3px; flex-basis: 100%; }
  .bn-steps li { padding: 1px 6px 2px 3px; font-size: 10px; gap: 3px; }
  .bn-steps li::before { width: 14px; height: 14px; font-size: 9px; }
  .bn-flip { padding: 6px 14px 7px 36px; font-size: 14px; }
  .bn-flip::before { left: 11px; width: 14px; height: 14px; margin-top: -7px; }
  .bn-flip::after { left: 20px; }
  .bn-press i { width: 58px; height: 58px; }
  .bn-note { padding: 7px 12px 8px; gap: 10px; }
  .bn-strip { gap: 5px; }
  .bn-strip li { font-size: 9.5px; }
  .bn .pz-stamp { top: 20%; left: 74%; font-size: 40px; }
  .bn-note p { display: none; }
  .hold-ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px, #000 32px, transparent 33px); mask: radial-gradient(circle, transparent 23px, #000 24px, #000 32px, transparent 33px); }
}
@media (prefers-reduced-motion: reduce) {
  .bn-flip.on, .bn .pz-head.pop, .bn-coach.pop .bn-face, .bn-press i, .bn-press i::after, .bn-turn i::after { animation: none; }
  .hold-ring.pop { animation: none; opacity: 0; }
}

/* bronze.css */
/* Painting and gestures remain on the shared canvas; this layer only draws the workshop. */
.bw {position:absolute;inset:0;pointer-events:none;background:#1c1510;color:#fff0d0;overflow:hidden}
.bw[hidden]{display:none}.bw-scene{position:absolute;inset:0;pointer-events:none}
.bw-head{position:absolute;left:18px;top:14px;max-width:min(650px,75vw);padding:10px 18px;background:#302319e8;border:1px solid #d9ab71;border-radius:12px;box-shadow:0 3px 10px #160e0b80}
.bw-head h2{font:700 clamp(19px,2.2vw,30px)/1.1 Georgia;margin:0 0 5px}.bw-goal{margin:0;font:600 clamp(14px,1.6vw,20px)/1.25 Georgia;color:#ffda8e}
.bw-speech{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(860px,90vw);padding:10px 20px;background:#fff0d4ef;color:#4a2b18;border:3px solid #805735;border-radius:14px;box-shadow:0 4px 15px #180b0780;display:flex;align-items:center;gap:16px}
.bw-who{font-weight:700;white-space:nowrap;font-size:14px}.bw-speech p{flex:1;margin:0;font:clamp(14px,1.65vw,21px)/1.3 Georgia}.bw-actions{display:flex;gap:8px;pointer-events:auto;align-items:center}.bw-later{font-size:13px;padding:5px 10px}.bw-next{font-size:16px;padding:10px 16px}.bw-next[hidden]{display:none}
@media(max-height:500px){.bw-head{top:7px;left:10px;padding:6px 12px;max-width:70vw}.bw-head h2{font-size:18px;margin-bottom:3px}.bw-speech{bottom:5px;padding:7px 12px;width:94vw;gap:9px}.bw-who{font-size:12px}.bw-speech p{font-size:14px}.bw-next{font-size:14px;padding:7px 12px}.bw-later{font-size:11px}}

/* cards.css */
.card-puzzle{position:absolute;inset:0;color:#503822;pointer-events:none}.card-puzzle[hidden]{display:none}.cpf-head{position:absolute;left:4%;top:3%;max-width:72%;text-shadow:0 1px 10px #f9ebd2}.cpf-head>span{font:12px system-ui;letter-spacing:.14em;text-transform:uppercase}.cpf-head h2{margin:6px 0;font:600 clamp(20px,2.8vw,32px) Georgia,serif}.cpf-head p{margin:0;font-size:clamp(13px,1.6vw,18px);max-width:620px}.cpf-controls{position:absolute;left:4%;right:4%;bottom:4%;display:flex;gap:12px;justify-content:space-between;pointer-events:auto}.cpf-labels{position:absolute;inset:0}.cpf-card,.cpf-slot{position:absolute;translate:-50% -50%;color:#392a1c;border:0;border-radius:7px;font:600 clamp(13px,1.4vw,18px) Georgia,serif;text-align:center;padding:6px;overflow-wrap:anywhere;width:clamp(75px,11vw,155px);max-height:90px;background:transparent;pointer-events:auto;touch-action:none;user-select:none;cursor:grab}.cpf-card{min-height:48px;text-shadow:0 1px 2px #f9eacc}.cpf-card:focus-visible,.cpf-slot:focus-visible{outline:2px solid #8a4f31}.cpf-card.selected{outline:2px solid #ba8c4b}.cpf-card svg{width:34px;height:32px;display:block;margin:auto}.cpf-slot{font-size:clamp(12px,1.2vw,16px);color:#ead9bc;cursor:pointer}.cpf-coach{position:absolute;left:5%;bottom:15%;max-width:340px;padding:12px 18px;background:#f5e6c8f0;box-shadow:0 5px 18px #2716063b;border-radius:14px;display:flex;gap:12px;align-items:center}.cpf-coach[hidden],.cpf-solved[hidden]{display:none}.cpf-coach img{width:52px;height:60px;object-fit:contain}.cpf-coach p{margin:0}.cpf-solved{position:absolute;inset:22% 25%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;background:#f6e7cdeF;box-shadow:0 10px 55px #23180d77;border-radius:15px;text-align:center;pointer-events:auto}.cpf-solved strong{font:italic 34px Georgia;color:#934831}.cpf-solved p{font:18px Georgia;margin:0}.cpf-confirm{margin-left:auto}@media(max-height:450px){.cpf-head{top:2%}.cpf-head h2{margin:2px 0;font-size:21px}.cpf-head p{font-size:13px;max-width:520px}.cpf-controls{bottom:3%}.cpf-coach{bottom:20%;font-size:13px;padding:8px;max-width:260px}.cpf-solved{inset:13% 23%;gap:10px}.cpf-solved strong{font-size:26px}}
.cpf-guide .cpf-head{background:#edf3f4;color:#253e49;border-color:#9db2ba}
.cpf-guide-tag{display:block;font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#526f7c}
.cpf-guide .cpf-card{background:rgba(246,249,248,.94);color:#253e49;border-color:#a7bdc6}
.cpf-guide .cpf-slot{color:#294b59;background:rgba(218,231,236,.92)}

.cpf-guide .cpf-slot:empty{min-height:44px;border:1px dashed #6d8996;z-index:2}
/* Projected controls must not scroll the fixed UI away from the 3D camera. */
#ui:has(.cpf-guide:not([hidden])){overflow:clip}
.cpf-guide .cpf-head{left:25%;max-width:66%;border-radius:8px;padding:4px 10px;text-shadow:none}
.cpf-guide .cpf-slot{z-index:2}
@media(max-height:450px){.cpf-guide .cpf-head h2{font-size:18px}.cpf-guide .cpf-head p{font-size:12px}.cpf-guide .cpf-guide-tag{font-size:9px}.cpf-guide .cpf-card{min-height:44px;font-size:11px}.cpf-guide .cpf-slot{font-size:10px}}

/* coin.css */
/* coin.css — DOM pieces that only the "One Coin" puzzle needs.
   The shared frame (title card, Hint button, coach bubble, name chips, stamp, fact card, Continue)
   reuses the .pz-* rules in ui.css, so load this file after ui.css. */
.pc-chips { position: absolute; inset: 0; transition: opacity 0.25s; }
.pc .pz-head.pop { animation: pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }

/* the small caption that sits under each piece on the tray (the active one grows and rides above it) */
.pc .pz-chip.pc-under { transform: translate(-50%, 0); padding: 1px 8px 2px; font-size: clamp(10px, calc(var(--u) * 1.6), 13px); background: rgba(38, 22, 12, 0.7); }
.pc .pz-chip.pc-under.show { opacity: 0.88; }

/* the two places to drop things */
.pc-target { max-width: min(210px, 30vw); white-space: normal; text-align: center; line-height: 1.15; padding: 4px 12px 5px; border-radius: 12px;
  box-shadow: 0 3px 10px rgba(20, 8, 2, 0.35); transition: opacity 0.35s; }
.pc-target.dim { opacity: 0.2; }
.pc.sorted .pc-target { opacity: 0; }

/* "Look" button under a piece you tapped */
.pc-lookbtn { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); transform-origin: 0 0; padding: 5px 16px 6px 34px; font-size: clamp(14px, calc(var(--u) * 2.3), 18px); font-weight: 700; color: #5a3618;
  background: linear-gradient(#fff6de, #f1dfb4); border: 2.5px solid #6b4727; border-radius: 999px; box-shadow: 0 4px 0 #6b4727, 0 8px 14px rgba(20, 8, 2, 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.15s; will-change: transform; }
.pc-lookbtn::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border: 2.5px solid #8f2416; border-radius: 50%; }
.pc-lookbtn::after { content: ""; position: absolute; left: 22px; top: 50%; width: 7px; height: 2.5px; margin-top: 4px; background: #8f2416; border-radius: 2px; transform: rotate(45deg); transform-origin: 0 50%; }
.pc-lookbtn.on { opacity: 1; pointer-events: auto; }
.pc-lookbtn:active { translate: 0 3px; box-shadow: 0 1px 0 #6b4727; }

/* who is talking */
.pc-coach p { padding-top: 14px; }
.pc-coach img { pointer-events: auto; cursor: pointer; }
.pc-who { position: absolute; left: 12px; top: -0.85em; padding: 1px 10px 2px; font-size: 0.7em; letter-spacing: 0.03em; color: #fff1d2; background: #5b3a1e; border-radius: 6px; white-space: nowrap; }
.pc-coach[data-who="official"] .pc-who { background: #3f3d3b; }
.pc-coach[data-who="cartgirl"] .pc-who { background: #8f2416; }
.pc-coach[data-who="hero"] .pc-who { background: #b5651d; }
.pc.strung .pz-coach { max-width: min(430px, 44vw); }

/* threaded-coin counter that rides on the knot */
.pc-count { font-weight: 700; background: rgba(47, 107, 74, 0.92); border-color: rgba(255, 240, 200, 0.6); }
.pc-count.show { opacity: 1; }
.pc-count.pop { animation: popS 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
.pc.strung .pc-count { opacity: 0; }

/* close-up */
.pc-insp { position: absolute; inset: 0; color: #fff3d8; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.pc.looking .pc-insp { opacity: 1; }
.pc.looking .pz-head, .pc.looking .pz-hint, .pc.looking .pc-chips, .pc.looking .pz-coach { opacity: 0; pointer-events: none; }
.pc.looking .pz-coach img { pointer-events: none; }
.pc-insp h3 { position: absolute; left: 50%; top: calc(var(--u) * 4.5); transform: translateX(-50%); margin: 0; font-size: clamp(22px, calc(var(--u) * 5), 40px); white-space: nowrap; text-shadow: 0 2px 12px rgba(20, 8, 2, 0.85); }
.pc-insp h3 .zh { color: #ffd98a; }
.pc-insp-fact { position: absolute; left: 50%; top: calc(var(--u) * 4.5 + clamp(30px, calc(var(--u) * 7), 56px)); transform: translateX(-50%); margin: 0; font-style: italic; font-size: clamp(15px, calc(var(--u) * 2.9), 23px); white-space: nowrap; text-shadow: 0 1px 8px rgba(20, 8, 2, 0.9); }
.pc-insp-tip { position: absolute; left: 50%; bottom: calc(var(--u) * 5 + clamp(44px, calc(var(--u) * 8), 62px)); transform: translateX(-50%); margin: 0; font-size: clamp(13px, calc(var(--u) * 2.2), 17px); opacity: 0.8; white-space: nowrap; text-shadow: 0 1px 8px rgba(20, 8, 2, 0.9); }
.pc-insp-back { position: absolute; left: 50%; bottom: calc(var(--u) * 5); transform: translateX(-50%); padding: 9px 26px 11px; font-size: clamp(16px, calc(var(--u) * 2.7), 21px); font-weight: 700; color: #fff3d8; background: linear-gradient(#b3392a, #8f2416);
  border: 2.5px solid #5a140a; border-radius: 999px; box-shadow: 0 5px 0 #5a140a, 0 10px 18px rgba(20, 8, 2, 0.4); }
.pc.looking .pc-insp-back { pointer-events: auto; }
.pc-insp-back:active { translate: 0 4px; box-shadow: 0 1px 0 #5a140a; }

/* "They match!" */
.pc-match { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); transform-origin: 0 0; padding: 4px 16px 6px; font-weight: 800; font-size: clamp(16px, calc(var(--u) * 3.2), 26px); color: #fff; background: #2f7d4f;
  border: 3px solid #fff3d6; border-radius: 999px; box-shadow: 0 4px 12px rgba(20, 8, 2, 0.5); white-space: nowrap; opacity: 0; will-change: transform; }
.pc-match.on { opacity: 1; animation: popS 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
.pc.won .pc-match { opacity: 0; transition: opacity 0.2s; }

/* the notebook's neat handwriting */
.pc-note p { font-style: italic; }

/* small landscape phones: the bubble steps aside after a moment so it never covers the tray (tap the face to hear it again) */
@media (max-height: 480px) {
  .pc-coach p { transition: opacity 0.4s; padding-top: 10px; }
  .pc-coach.quiet p { opacity: 0; }
  .pc .pz-head { flex-wrap: wrap; row-gap: 1px; max-width: 56vw; }
  .pc .pz-brief { display: block; flex-basis: 100%; font-size: 12.5px; line-height: 1.25; }
  .pc-target { font-size: 11px; max-width: 150px; padding: 2px 8px 3px; }
  .pc-insp h3 { top: 8px; }
  .pc-insp-fact { top: 38px; }
  .pc-insp-tip { display: none; }
  .pc-insp-back { bottom: 8px; padding: 6px 20px 8px; }
}

/* gate.css */
/* gate.css — "The Standard Gate" puzzle. Uses the shared .pz-* cards from ui.css; everything here is scoped to .pz-gate. */
.pz-gate .gt-pips { float: right; display: flex; gap: 6px; margin-top: 3px; }
.pz-gate .gt-pips i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #8a6238; background: rgba(255, 255, 255, 0.35); transition: background 0.3s, border-color 0.3s, scale 0.3s cubic-bezier(0.2, 1.8, 0.4, 1); }
.pz-gate .gt-pips i.done { background: #2f7d4f; border-color: #1f5a37; scale: 1.15; }

/* name tag riding above the waiting cart */
.pz-gate .gt-tag { font-size: clamp(13px, calc(var(--u) * 2.2), 18px); padding: 4px 13px 5px; font-weight: 700; letter-spacing: 0.01em; }

/* "drag me" arrows either side of the loose wheel */
.pz-gate .zh { white-space: nowrap; }
.pz-gate .pz-head { width: min(490px, 46vw); }
.pz-gate .gt-handle { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 0.25s; pointer-events: none; --r: 60px; }
.pz-gate .gt-handle.on { opacity: 1; }
.pz-gate .gt-handle.used.on { opacity: 0.55; }
.pz-gate .gt-handle b { position: absolute; top: 0; translate: -50% -50%; font-size: clamp(17px, calc(var(--u) * 3), 26px); color: #fff3d2; text-shadow: 0 0 3px #4a2a10, 0 2px 8px rgba(30, 12, 2, 0.9), 0 0 2px #4a2a10; }
.pz-gate .gt-handle b:first-child { left: calc(var(--r) * -0.62 - 14px); animation: gtNudgeL 1.1s ease-in-out infinite; }
.pz-gate .gt-handle b:last-child { left: calc(var(--r) * 0.62 + 14px); animation: gtNudgeR 1.1s ease-in-out infinite; }
@keyframes gtNudgeL { 50% { transform: translateX(-7px); } }
@keyframes gtNudgeR { 50% { transform: translateX(7px); } }

/* the official's words: a bubble beside his head in the scene */
.pz-gate .gt-say { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.pz-gate .gt-say.on { opacity: 1; }
.pz-gate .gt-say p { position: absolute; left: 26px; bottom: -6px; width: max-content; max-width: min(300px, 27vw); margin: 0; padding: 10px 15px 11px; background: #fff8e6; border: 2.5px solid #5b3a1e; border-radius: 16px;
  font-size: clamp(13px, calc(var(--u) * 2.4), 19px); line-height: 1.27; box-shadow: 0 6px 14px rgba(20, 8, 2, 0.4); transform-origin: 0 100%; text-wrap: pretty; }
.pz-gate .gt-say p::before { content: ""; position: absolute; left: -9px; bottom: 14px; width: 14px; height: 14px; background: inherit; border-left: 2.5px solid #5b3a1e; border-bottom: 2.5px solid #5b3a1e; transform: rotate(45deg); border-color: inherit; }
.pz-gate .gt-say.flip p { left: auto; right: 30px; transform-origin: 100% 100%; }
.pz-gate .gt-say.flip p::before { left: auto; right: -9px; transform: rotate(-135deg); }
.pz-gate .gt-say.pop p { animation: pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }
.pz-gate .gt-say[data-kind="bad"] p { border-color: #a3281b; background: #ffeede; }
.pz-gate .gt-say[data-kind="ok"] p { border-color: #2f6b4a; }

/* narrower / wider */
.pz-gate .gt-nudge { position: absolute; left: 50%; bottom: calc(var(--u) * 3); translate: -50% 0; display: flex; gap: clamp(10px, 2vw, 22px); opacity: 0; transform: translateY(14px); transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 1.3, 0.4, 1); }
.pz-gate .gt-nudge.on { opacity: 1; transform: none; }
.pz-gate .gt-btn { pointer-events: none; display: flex; align-items: center; gap: 9px; padding: 9px 20px 11px; min-width: clamp(118px, 13vw, 168px); justify-content: center; font-size: clamp(15px, calc(var(--u) * 2.5), 20px); font-weight: 700; color: #4a2c14;
  background: linear-gradient(#fbf1d9, #ecd7a8); border: 2.5px solid #6b4727; border-radius: 999px; box-shadow: 0 5px 0 #6b4727, 0 9px 16px rgba(20, 8, 2, 0.4); transition: transform 0.08s, box-shadow 0.08s; }
.pz-gate .gt-nudge.on .gt-btn { pointer-events: auto; }
.pz-gate .gt-btn b { color: #a3281b; font-size: 0.9em; }
.pz-gate .gt-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #6b4727; }
.pz-gate .gt-btn:focus-visible, .pz-gate .pz-hint:focus-visible, .pz-gate .pz-continue:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }

/* warm paper flash for the cut to the closing shot */
.pz-gate .gt-fade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #f8ecd0, #e0c48a); opacity: 0; pointer-events: none; }

.pz-gate.finale .gt-nudge, .pz-gate.finale .gt-handle, .pz-gate.finale .gt-tag, .pz-gate.finale .gt-say, .pz-gate.finale .pz-hint, .pz-gate.finale .pz-leave { opacity: 0; pointer-events: none; }
.pz-gate .gt-note img { height: clamp(64px, calc(var(--u) * 13), 112px); width: auto; margin: -10px -6px -16px -10px; align-self: flex-end; flex: none; filter: drop-shadow(0 3px 6px rgba(20, 8, 2, 0.35)); object-fit: cover; object-position: top; }

@media (max-height: 480px) {
  .pz-gate .gt-pips { float: none; order: 3; margin: 0; }
  .pz-gate .gt-pips i { width: 12px; height: 12px; }
  .pz-gate .gt-nudge { bottom: 8px; left: 12px; right: 12px; translate: none; justify-content: space-between; pointer-events: none; }   /* ◀ bottom-left, ▶ bottom-right: the cart keeps the middle */
  .pz-gate .gt-btn { padding: 5px 14px 7px; min-width: 104px; font-size: 14px; box-shadow: 0 3px 0 #6b4727, 0 6px 10px rgba(20, 8, 2, 0.4); }
  .pz-gate .gt-say p { padding: 6px 10px 7px; font-size: 13px; max-width: 30vw; }
  .pz-gate .gt-note img { height: 54px; margin: -6px -4px -10px -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-gate .gt-handle b { animation: none; }
}

/* glyph-eye.css */
/* glyph-eye.css — DOM pieces for "The Owl's Eyes" (Shang·1 puzzle 2): the notebook row, the owl's eye panel
   (lens + time bar + three choices), the owl's speech bubble and the end note.
   The frame (title card, Hint, Later, coach bubble, stamp, note, Continue) reuses .pz-* from ui.css. */
.gy .pz-head { width: min(400px, 40vw); }
.gy .pz-head.pop { animation: pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }

/* the notebook: three slots that fill as each mark is deciphered */
.gy-book { margin: 9px 0 0; padding: 5px 7px; list-style: none; display: flex; gap: 6px; border-radius: 10px; background: rgba(140, 96, 50, 0.1); border: 1.5px dashed rgba(107, 71, 39, 0.4); }
.gy-book li { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: clamp(10.5px, calc(var(--u) * 1.5), 12.5px); font-weight: 700; line-height: 1.12; color: var(--ink2); opacity: 0.55; transition: opacity 0.3s, color 0.3s; }
.gy-book li.now { opacity: 1; color: var(--red); }
.gy-book li.filled { opacity: 1; color: #2f6b4a; }
.gy-slot { flex: none; display: grid; place-items: center; width: clamp(30px, calc(var(--u) * 5), 42px); aspect-ratio: 1; border-radius: 8px; border: 2px dashed rgba(107, 71, 39, 0.55); background: #fbf3df center / cover no-repeat;
  font-size: 13px; color: rgba(107, 71, 39, 0.85); }
.gy-book li.now .gy-slot { border-color: var(--red); box-shadow: 0 0 0 3px rgba(168, 50, 31, 0.15); }
.gy-book li.filled .gy-slot { border: 2px solid #2f6b4a; box-shadow: 0 2px 5px rgba(40, 20, 6, 0.3); animation: popS 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* the fixed toolbar: Undo · Redo this puzzle · Later · Hint (the house buttons, lined up in one row) */
.gy-tools { position: absolute; right: calc(var(--u) * 2.5); top: calc(var(--u) * 2.5); display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.gy-tools .pz-hint, .gy-tools .pz-leave { position: relative; top: auto; right: auto; }
.gy-tool { position: relative; padding: 8px 16px 9px 36px; font-size: clamp(14px, calc(var(--u) * 2.2), 18px); font-weight: 700; color: #5a3618; white-space: nowrap; cursor: pointer;
  background: linear-gradient(#fff6de, #f1dfb4); border: 2.5px solid #6b4727; border-radius: 999px; box-shadow: 0 4px 0 #6b4727, 0 8px 14px rgba(20, 8, 2, 0.35); transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s; }
.gy-tool:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b4727; }
.gy-tool:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: 0 4px 0 #6b4727; }
.gy-tool::before { content: ""; position: absolute; left: 12px; top: 50%; width: 13px; height: 13px; margin-top: -8px; border: 2.5px solid #8f2416; border-radius: 50%; }
.gy-undo::before { border-left-color: transparent; }
.gy-undo::after { content: ""; position: absolute; left: 10px; top: 50%; margin-top: -9px; border: 4.5px solid transparent; border-top-color: #8f2416; transform: rotate(-25deg); }
.gy-redo::before { border-right-color: transparent; }
.gy-redo::after { content: ""; position: absolute; left: 22px; top: 50%; margin-top: -9px; border: 4.5px solid transparent; border-top-color: #8f2416; transform: rotate(25deg); }
.gy.won .gy-tools { opacity: 0; pointer-events: none; }

/* the owl speaks from the table: the bubble is placed by its head (left/bottom set every frame) */
.gy-coach { bottom: calc(var(--u) * 2.2); transition: opacity 0.3s; }
.gy-coach p::before { bottom: auto; top: 18px; }
.gy-coach p { padding-top: 14px; pointer-events: auto; cursor: pointer; }
.gy-who { position: absolute; left: 12px; top: -0.85em; padding: 1px 10px 2px; font-size: 0.7em; letter-spacing: 0.03em; color: #fff1d2; background: #3f6b5a; border-radius: 6px; white-space: nowrap; }

/* the owl's eye: a panel on the right with the lens and the time bar */
.gy-panel { position: absolute; right: calc(var(--u) * 2.5); top: calc(var(--u) * 2.5 + 60px); max-height: calc(100% - var(--u) * 5 - 60px); width: clamp(270px, 31vw, 390px); display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 8px;
  background: var(--card); border: 3px solid var(--line); border-radius: 18px; box-shadow: var(--card-shadow); opacity: 0; transform: translateX(calc(100% + 40px)); pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.2, 1.15, 0.35, 1), opacity 0.3s; }
.gy-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.gy-ph { min-height: 1.25em; text-align: center; font-size: clamp(12px, calc(var(--u) * 1.8), 15px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); }
.gy-panel[data-mode="seek"] .gy-ph { color: var(--red); }
.gy-lens-wrap { flex: 0 1 auto; aspect-ratio: 1; min-height: 0; display: grid; place-items: center; padding: 10px; }
.gy-lens { position: relative; border-radius: 50%; overflow: hidden; background: #eee0c0;
  box-shadow: 0 0 0 4px #f2b54a, 0 0 0 7px #7a4a1c, 0 0 26px 8px rgba(255, 176, 70, 0.55); transition: box-shadow 0.4s; }
.gy-lens canvas { display: block; width: 100%; height: 100%; }
.gy-lens-rim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 60%, rgba(255, 196, 100, 0.18) 74%, rgba(110, 56, 12, 0.42) 100%); }
.gy-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 22%; text-align: center; font-style: italic; font-size: clamp(13px, calc(var(--u) * 2), 17px); color: var(--ink2); opacity: 0; transition: opacity 0.3s; }
.gy-lens.empty .gy-empty { opacity: 0.85; }
.gy-lens.win { animation: gyWin 1.4s ease-out; }
@keyframes gyWin {
  0% { box-shadow: 0 0 0 4px #fff3c8, 0 0 0 7px #7a4a1c, 0 0 70px 34px rgba(255, 214, 120, 0.95); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 4px #f2b54a, 0 0 0 7px #7a4a1c, 0 0 26px 8px rgba(255, 176, 70, 0.55); transform: none; }
}

/* time bar: Picture · Shang · Today */
.gy-timebox { position: relative; flex: none; height: 82px; }
.gy-time { position: absolute; inset: 0; touch-action: none; cursor: grab; outline: none; transition: opacity 0.3s; }
.gy-time.drag { cursor: grabbing; }
.gy-time.off { opacity: 0.35; pointer-events: none; }
.gy-time:focus-visible .gy-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--red); }
.gy-track { position: absolute; left: 30px; right: 30px; top: 22px; height: 12px; border-radius: 99px; border: 2px solid var(--line);
  background: linear-gradient(90deg, #d3a865, #ecdcbc 50%, #fbf8ef); box-shadow: inset 0 2px 3px rgba(60, 30, 10, 0.35); }
.gy-notch { position: absolute; left: calc(var(--at) * 100%); top: 50%; width: 4px; height: 24px; margin: -12px 0 0 -2px; border-radius: 2px; background: var(--line); }
.gy-notch b { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(12px, calc(var(--u) * 1.8), 15px); color: var(--ink2); transition: color 0.2s, transform 0.2s; }
.gy-notch.now b { color: var(--red); transform: translateX(-50%) scale(1.14); }
.gy-thumb { position: absolute; left: calc(var(--p, 0.5) * 100%); top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #2a1406 0 17%, #ff9a26 18% 33%, #ffd27a 34% 41%, #c9963e 42% 68%, #7a4a1c 69%);
  box-shadow: 0 3px 0 #4a2c14, 0 7px 12px rgba(40, 20, 6, 0.45); transition: transform 0.15s; }
.gy-time.drag .gy-thumb { transform: scale(1.12); }
.gy-time.call .gy-thumb { animation: gyCall 1.6s ease-in-out infinite; }
@keyframes gyCall { 0%, 100% { box-shadow: 0 3px 0 #4a2c14, 0 7px 12px rgba(40, 20, 6, 0.45), 0 0 0 0 rgba(255, 190, 80, 0.7); } 50% { box-shadow: 0 3px 0 #4a2c14, 0 7px 12px rgba(40, 20, 6, 0.45), 0 0 0 10px rgba(255, 190, 80, 0); } }
.gy-panel.choosing .gy-choice:not(.no) { animation: gyCallBtn 1.6s ease-in-out infinite; }
@keyframes gyCallBtn { 50% { box-shadow: 0 4px 0 var(--line), 0 0 14px 3px rgba(255, 190, 80, 0.75); } }
.gy-thumb.bump { animation: gyBump 0.35s ease-out; }
@keyframes gyBump { 0%, 100% { translate: 0 0; } 30% { translate: -7px 0; } 60% { translate: 3px 0; } }
.gy-lock { position: absolute; left: calc(var(--at, 1) * 100%); right: -4px; top: -7px; bottom: -7px; display: none; border-left: 3px solid #8f2416; border-radius: 0 99px 99px 0;
  background: repeating-linear-gradient(-45deg, rgba(107, 71, 39, 0.55) 0 4px, rgba(251, 248, 239, 0.7) 4px 8px); }
.gy-lock.on { display: block; }
.gy-nudge { position: absolute; top: -9px; left: calc(var(--p, 0.5) * 100%); margin-left: -20px; width: 40px; text-align: center; font-size: 22px; font-weight: 800; line-height: 1; color: var(--red); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.gy-nudge.on { opacity: 1; }
.gy-nudge[data-dir="-1"] { margin-left: -76px; }
.gy-nudge[data-dir="1"] { margin-left: 36px; }
.gy-nudge[data-dir="-1"]::before { content: "\2039\2039\2039"; display: inline-block; animation: gyLeft 1.1s ease-in-out infinite; }
.gy-nudge[data-dir="1"]::before { content: "\203A\203A\203A"; display: inline-block; animation: gyRight 1.1s ease-in-out infinite; }
@keyframes gyLeft { 0%, 100% { transform: translateX(-4px); opacity: 1; } 50% { transform: translateX(-18px); opacity: 0.55; } }
@keyframes gyRight { 0%, 100% { transform: translateX(4px); opacity: 1; } 50% { transform: translateX(18px); opacity: 0.55; } }

/* char 2: three look-alike characters take the bar's place */
.gy-choose-label { position: absolute; left: 0; right: 0; top: -4px; margin: 0; text-align: center; font-weight: 700; font-size: clamp(12px, calc(var(--u) * 1.8), 15px); color: var(--red); opacity: 0; transition: opacity 0.3s; }
.gy-choices { position: absolute; left: 0; right: 0; top: 18px; bottom: 2px; display: flex; justify-content: center; gap: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); }
.gy-panel.choosing .gy-choices, .gy-panel.choosing .gy-choose-label { opacity: 1; transform: none; pointer-events: auto; }
.gy-panel.choosing .gy-time { opacity: 0; pointer-events: none; }
.gy-choice { flex: 1; max-width: 88px; padding: 0; font-family: "Kaiti SC", "STKaiti", KaiTi, "BiauKai", "PingFang SC", "Noto Serif CJK SC", "Noto Sans CJK SC", serif; font-size: 40px; line-height: 1; color: #1d1a17;
  background: linear-gradient(#fffdf6, #f3e8cf); border: 2.5px solid var(--line); border-radius: 12px; box-shadow: 0 4px 0 var(--line), 0 7px 12px rgba(40, 20, 6, 0.3); cursor: pointer; transition: transform 0.08s, box-shadow 0.08s, background 0.3s, opacity 0.3s; }
.gy-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.gy-choice.no { animation: gyNo 0.45s ease-out; opacity: 0.55; }
@keyframes gyNo { 0%, 100% { transform: none; } 25% { transform: translateX(-6px) rotate(-3deg); } 60% { transform: translateX(4px) rotate(2deg); } }
.gy-choice.right { background: linear-gradient(#f2fbf0, #d9eed9); border-color: #2f6b4a; box-shadow: 0 4px 0 #2f6b4a, 0 0 18px rgba(80, 200, 120, 0.55); opacity: 1; }

/* a deciphered mark flying into the notebook */
.gy-fly { position: absolute; z-index: 30; border-radius: 50%; transform-origin: 0 0; pointer-events: none; box-shadow: 0 0 24px 6px rgba(255, 196, 90, 0.75); }

/* solved: the three Picture -> Shang -> Today pictures */
.gy-note { width: min(780px, 92vw); }
.gy-note-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gy-note p { font-style: italic; font-size: clamp(14px, calc(var(--u) * 2.1), 18px); }
.gy-strip { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gy-strip li { display: flex; flex-direction: column; gap: 4px; font-size: clamp(10.5px, calc(var(--u) * 1.5), 13px); line-height: 1.2; color: var(--ink2); }
.gy-strip img { width: 100%; border-radius: 8px; border: 2px solid var(--line); background: #f3e3bf; box-shadow: 0 3px 6px rgba(40, 20, 6, 0.3); }
.gy .pz-stamp { top: 22%; left: 64%; font-size: clamp(40px, calc(var(--u) * 10), 90px); }

/* small landscape phones */
@media (max-height: 480px) {
  .gy .pz-head { flex-wrap: wrap; row-gap: 1px; width: min(330px, 40vw); padding: 6px 10px 7px; }
  .gy .pz-head h2 { font-size: 17px; margin: 2px 0 1px; }
  .gy .pz-num { font-size: 10px; }
  .gy .pz-brief { display: block; flex-basis: 100%; font-size: 11.5px; line-height: 1.25; }
  .gy-book { flex-basis: 100%; margin: 4px 0 0; padding: 3px 5px; gap: 4px; }
  .gy-book li span { display: none; }
  .gy-book li { flex: none; }
  .gy-slot { width: 28px; font-size: 11px; border-radius: 6px; }
  .gy-coach p { padding-top: 10px; transition: opacity 0.4s; }
  .gy-coach.quiet p { opacity: 0; }
  .gy-tools { gap: 5px; }
  .gy-tool, .gy-tools .pz-hint, .gy-tools .pz-leave { padding-top: 5px; padding-bottom: 6px; font-size: 13px; }
  .gy-tool { padding-left: 30px; padding-right: 10px; }
  .gy-tools .pz-leave { padding-left: 12px; padding-right: 12px; }
  .gy-tools .pz-hint { padding-left: 36px; padding-right: 12px; }
  .gy-tool::before { left: 9px; } .gy-undo::after { left: 7px; } .gy-redo::after { left: 19px; }
  .gy-panel { top: calc(var(--u) * 2.5 + 44px); max-height: calc(100% - var(--u) * 5 - 44px); width: clamp(240px, 33vw, 300px); padding: 4px 10px 4px; gap: 2px; border-radius: 14px; }
  .gy-ph { font-size: 10.5px; }
  .gy-lens-wrap { padding: 6px; }
  .gy-timebox { height: 62px; }
  .gy-track { top: 16px; left: 24px; right: 24px; height: 10px; }
  .gy-notch { height: 18px; margin-top: -9px; }
  .gy-notch b { top: 24px; font-size: 11.5px; }
  .gy-thumb { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .gy-nudge { top: -6px; font-size: 18px; }
  .gy-nudge[data-dir="-1"] { margin-left: -66px; }
  .gy-nudge[data-dir="1"] { margin-left: 28px; }
  .gy-choose-label { font-size: 11px; top: -6px; }
  .gy-choices { top: 12px; gap: 8px; }
  .gy-choice { font-size: 30px; max-width: 70px; }
  .gy-note { padding: 7px 12px 8px; gap: 10px; }
  .gy-note p { display: none; }
  .gy-strip { gap: 6px; }
  .gy-strip li { font-size: 9.5px; }
  .gy .pz-stamp { top: 18%; left: 70%; font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .gy .pz-head.pop, .gy-lens.win, .gy-thumb.bump, .gy-choice.no, .gy-book li.filled .gy-slot, .gy-nudge::before, .gy-time.call .gy-thumb, .gy-panel.choosing .gy-choice { animation: none !important; }
  .gy-panel { transition: opacity 0.3s; }
}

/* Compact notebook slots retain accessible full labels without clipped text. */
.gy-book li span{display:none}.gy-book li{flex:0 0 auto}.gy-book{width:max-content;max-width:100%}
.gy-coach{bottom:12px}.gy-note{bottom:12px}.gy .pz-stamp{top:20px;left:65%;font-size:30px}

/* hero-picker.css */
.hero-picker{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#302419a6;pointer-events:auto;backdrop-filter:blur(7px)}
.hero-picker[hidden]{display:none}.hero-card{width:min(520px,92vw);max-height:94dvh;overflow:auto;padding:24px;background:#f5e8cd;border:1px solid #ac8b60;border-radius:18px;box-shadow:0 18px 60px #21170977;color:#493521;text-align:center}.hero-card h2{font:600 24px Georgia,serif;margin:0 0 12px}.hero-choices{display:flex;justify-content:center;gap:18px}.hero-choice{background:#e8d9bb;border:2px solid transparent;border-radius:12px;padding:6px 24px;font:inherit;color:inherit;cursor:pointer}.hero-choice[aria-pressed=true]{border-color:#8d5436;background:#fbefd4}.hero-choice img{display:block;height:min(25vh,165px);width:100px;object-fit:contain}.hero-card label{display:block;margin:14px auto;font-size:16px}.hero-card input{display:block;margin:7px auto;padding:9px;width:min(290px,80%);font:20px system-ui;border:1px solid #ac8b60;border-radius:6px}.hero-error{color:#8f301f;font:14px system-ui;min-height:1em}.hero-settings{position:absolute;right:16px;top:76px;z-index:70;pointer-events:auto;border:0;background:#eee0c7d9;border-radius:12px;padding:7px 12px;color:#684a31;cursor:pointer}.dlg-name{overflow-wrap:anywhere}@media(max-height:450px){.hero-card{padding:12px}.hero-card h2{font-size:19px}.hero-choice img{height:65px}.hero-card label{margin:5px}.hero-error{margin:4px}}

/* horse.css */
/* horse.css — DOM pieces that only the "Five Horses, One Horse" puzzle needs.
   The shared frame (title card, Hint button, coach bubble, chips, stamp, note, Continue)
   reuses the .pz-* rules in ui.css, so load this file after ui.css. */
.hz-chips { position: absolute; inset: 0; }
.hz .pz-head.pop { animation: pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }

/* state names: small caption under each tag; the one in your hand grows and rides above it */
.hz .pz-chip.hz-under { transform: translate(-50%, 0); padding: 1px 9px 2px; font-size: clamp(11px, calc(var(--u) * 1.75), 14px); background: rgba(38, 22, 12, 0.74); }
.hz .pz-chip.hz-under.show { opacity: 0.9; }
.hz .pz-chip.spent.show { opacity: 0.45; }
.hz .pz-chip.active.show { opacity: 1; }

/* where everything goes, and what it becomes */
.hz-target { transform: translate(-50%, 0); font-size: clamp(12px, calc(var(--u) * 1.9), 15px); padding: 3px 12px 4px; opacity: 0 !important; transition: opacity 0.35s; }
.hz-target.on { opacity: 0.95 !important; }
.hz-target.dim { opacity: 0.25 !important; }
.hz-result { transform: translate(-50%, -100%); padding: 5px 16px 6px; font-weight: 800; font-size: clamp(15px, calc(var(--u) * 2.6), 21px); color: #fff; background: #2f7d4f; border: 2.5px solid #fff3d6;
  box-shadow: 0 4px 12px rgba(20, 8, 2, 0.5); opacity: 0; transition: opacity 0.3s; }
.hz-result .zh { color: #fff3c4; }
.hz-result.on { opacity: 1; animation: popS 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* Clear: start the writing again */
.hz-clear { position: absolute; left: 0; top: 0; transform: translate(0, -100%); padding: 8px 20px 10px 40px; font-size: clamp(15px, calc(var(--u) * 2.4), 19px); font-weight: 700; color: #5a3618;
  background: linear-gradient(#fff6de, #f1dfb4); border: 2.5px solid #6b4727; border-radius: 999px; box-shadow: 0 4px 0 #6b4727, 0 8px 14px rgba(20, 8, 2, 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.3s; will-change: transform; }
.hz-clear::before { content: ""; position: absolute; left: 13px; top: 50%; width: 15px; height: 15px; margin-top: -8px; border: 2.5px solid #8f2416; border-left-color: transparent; border-radius: 50%; }
.hz-clear::after { content: ""; position: absolute; left: 11px; top: 50%; margin-top: -9px; border: 5px solid transparent; border-top-color: #8f2416; transform: rotate(-28deg); }
.hz.writing .hz-clear { opacity: 1; pointer-events: auto; }
.hz-clear:active { translate: 0 3px; box-shadow: 0 1px 0 #6b4727; }

/* who is talking */
.hz-coach p { padding-top: 14px; }
.hz-coach img { pointer-events: auto; cursor: pointer; }
.hz-who { position: absolute; left: 12px; top: -0.85em; padding: 1px 10px 2px; font-size: 0.7em; letter-spacing: 0.03em; color: #fff1d2; background: #5b3a1e; border-radius: 6px; white-space: nowrap; }
.hz-coach[data-who="scribe"] .hz-who { background: #3f3d3b; }
.hz-coach[data-who="cartgirl"] .hz-who { background: #8f2416; }
.hz-coach[data-who="hero"] .hz-who { background: #b5651d; }
.hz.asking .pz-coach { opacity: 0; pointer-events: none; }
.hz.asking .pz-coach img { pointer-events: none; }

/* the scribe's question: a Layton-style talk box with answers as dialogue choices */
.hz-ask { position: absolute; left: 50%; bottom: calc(var(--u) * 3); width: min(860px, 94vw); display: flex; align-items: flex-end; gap: 6px; transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 1.3, 0.4, 1); }
.hz.asking .hz-ask { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hz.won .hz-ask { opacity: 0; pointer-events: none; transition-delay: 0.1s; }
.hz-ask > img { height: clamp(90px, calc(var(--u) * 22), 190px); width: auto; flex: none; filter: drop-shadow(0 6px 12px rgba(20, 8, 2, 0.5)); }
.hz-ask-bubble { position: relative; flex: 1; margin-bottom: calc(var(--u) * 1); padding: 16px 18px 14px; background: linear-gradient(175deg, #fff8e6, #f5e6c2); border: 3px solid #5b3a1e; border-radius: 18px;
  box-shadow: 0 10px 24px rgba(20, 8, 2, 0.45); }
.hz-ask-bubble::before { content: ""; position: absolute; left: -10px; bottom: 34px; width: 16px; height: 16px; background: #fbf0d6; border-left: 3px solid #5b3a1e; border-bottom: 3px solid #5b3a1e; transform: rotate(45deg); }
.hz-ask-bubble .hz-who { background: #3f3d3b; }
.hz-ask-bubble.pop > p { animation: pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); transform-origin: 0 50%; }
.hz-ask-bubble > p { margin: 0 0 10px; font-size: clamp(16px, calc(var(--u) * 2.9), 23px); line-height: 1.28; font-weight: 700; color: var(--ink); }
.hz-ask[data-kind="bad"] .hz-ask-bubble > p { color: #8f2416; }
.hz-ask[data-kind="ok"] .hz-ask-bubble > p { color: #2a6644; }
.hz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.hz-opt { position: relative; text-align: left; padding: 8px 12px 9px 34px; font: inherit; font-size: clamp(14px, calc(var(--u) * 2.2), 18px); line-height: 1.22; color: #4a2c14; cursor: pointer;
  background: #fffaf0; border: 2px solid #8a6136; border-radius: 12px; box-shadow: 0 3px 0 #8a6136; transition: background 0.15s, opacity 0.3s, transform 0.1s; }
.hz-opt::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #b3392a; box-shadow: 0 0 0 3px #f3d9a8; }
.hz-opt:hover { background: #fff1d2; }
.hz-opt:active { transform: translateY(3px); box-shadow: 0 0 0 #8a6136; }
.hz-opt.wrong { opacity: 0.45; text-decoration: line-through; text-decoration-color: rgba(143, 36, 22, 0.6); cursor: default; animation: shakeX 0.4s; }
.hz-opt.wrong::before { background: #9b8a74; }
.hz-opt.right { background: #e3f3e6; border-color: #2f7d4f; box-shadow: 0 3px 0 #2f7d4f; color: #1f4f33; font-weight: 700; animation: popS 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
.hz-opt.right::before { background: #2f7d4f; }
.hz.answered .hz-opt:not(.right) { opacity: 0.25; pointer-events: none; }
@keyframes shakeX { 20% { translate: -6px 0; } 45% { translate: 5px 0; } 70% { translate: -3px 0; } 100% { translate: 0 0; } }

.hz-note p { font-style: italic; }

/* small landscape phones */
@media (max-height: 480px) {
  .hz-coach p { transition: opacity 0.4s; padding-top: 10px; }
  .hz-coach.quiet p { opacity: 0; }
  .hz .pz-head { flex-wrap: wrap; row-gap: 1px; max-width: 54vw; }
  .hz .pz-brief { display: block; flex-basis: 100%; font-size: 12.5px; line-height: 1.25; }
  .hz-ask { bottom: 6px; }
  .hz-ask > img { height: 84px; }
  .hz-ask-bubble { padding: 10px 12px 9px; }
  .hz-ask-bubble > p { font-size: 15px; margin-bottom: 6px; }
  .hz-opts { gap: 5px 7px; }
  .hz-opt { font-size: 12.5px; padding: 5px 9px 6px 26px; }
  .hz-opt::before { left: 9px; width: 8px; height: 8px; margin-top: -4px; }
  .hz-clear { padding: 5px 14px 6px 32px; font-size: 14px; }
  .hz-clear::before { left: 10px; width: 12px; height: 12px; margin-top: -7px; }
  .hz-clear::after { left: 8px; }
}

/* The exam stays in the street's talk box; only Ethan's modern notebook is paper. */
.dlg:focus { outline: none; }
.dlg.exam-question .dlg-box { max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; }
.dlg.exam-question .dlg-name { position: relative; display: table; top: auto; left: auto; right: auto; transform: none; margin: -4px 0 12px; }
.dlg.exam-question .dlg-text { font-size: clamp(18px, 2.2vw, 26px); }
.dlg.exam-question .dlg-choice { font-size: clamp(15px, 1.7vw, 20px); text-align: left; cursor: pointer; }
.dlg-choice.selected { background: #e0e7c6; border-color: #52613b; box-shadow: 0 4px 0 #52613b, inset 0 0 0 2px #fff9e8; }
.dlg-choice.ruled-out { text-decoration: line-through; color: #7f7468; opacity: .62; box-shadow: none; cursor: default; }
.dlg-confirm { margin-left: auto; font-size: clamp(15px, 1.7vw, 19px); }
.dlg-confirm:disabled { opacity: .5; cursor: default; transform: none; box-shadow: 0 3px 0 #5a140a; }
.dlg-choice:focus-visible, .dlg-confirm:focus-visible, .exam-action:focus-visible { outline: 3px solid #eab345; outline-offset: 5px; }
.dlg-box[data-who="notebook"] .dlg-name { background: #7a603c; border-color: #4c371d; }
.exam-overlay { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; padding: 28px; pointer-events: auto; background: rgba(35,25,17,.28); }
.exam-overlay[hidden] { display: none; }
.exam-card { position: relative; width: min(610px, 88vw); max-height: calc(100dvh - 58px); overflow-y: auto; box-sizing: border-box; padding: 28px 36px; color: #483626; border-radius: 14px 10px 17px 9px; border: 2px solid #a38458; box-shadow: 0 16px 48px #24180a66, inset 0 0 32px #c7ac6d44; background: #f3e4bb; text-align: center; }
.exam-heading { margin: 0 0 18px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; }
.exam-notebook .exam-card { transform: rotate(-.8deg); background-image: repeating-linear-gradient(0deg, transparent 0 30px, #b69c6a28 31px, transparent 32px); }
.exam-notebook-text { font-size: clamp(19px, 2.3vw, 26px); line-height: 1.48; text-align: left; font-style: italic; }
.exam-action { margin: 12px auto 5px; }
.exam-handoff .exam-card { background: #56432bef; color: #fff2d5; border-color: #8b714b; }
.exam-bamboo { position: relative; margin: 12px auto 28px; width: 210px; height: 90px; border-radius: 8px; border: 2px solid #5d3d20; background: repeating-linear-gradient(90deg,#ba9459 0 24px,#7c5d32 25px,#ceb477 28px); box-shadow: 0 12px 12px #1d120d55; transform: translate(-38px,0) rotate(-8deg); }
.exam-bamboo::before,.exam-bamboo::after { content: ''; position: absolute; left: -2px; right: -2px; height: 3px; background: #68452f; top: 10px; }
.exam-bamboo::after { top: auto; bottom: 10px; }
.exam-scratch { position: absolute; top: calc(25px + var(--i) * 3px); left: calc(22px + var(--i) * 19px); width: 11px; height: 2px; background: #3c2c18; transform: rotate(calc(21deg + var(--i) * 18deg)); box-shadow: 3px 5px 0 #3c2c18; opacity: 0; animation: examWrite .15s calc(.1s + var(--i) * .1s) forwards; }
.exam-seal { position: absolute; left: 50%; top: 98px; width: 105px; height: 105px; display: grid; place-items: center; padding: 8px; box-sizing: border-box; font-size: 22px; font-weight: 700; line-height: 1.1; color: #ba4637; border: 5px double #ba4637; border-radius: 10px; background: #f2dfbbeb; opacity: 0; transform: translate(-50%,-80px) rotate(-14deg) scale(1.6); }
.received .exam-bamboo { transform: translate(32px,15px) rotate(5deg); transition: transform .7s ease-in-out; }
.received .exam-seal { animation: examStamp .45s .4s cubic-bezier(.2,1.5,.5,1) forwards; }
@keyframes examWrite { to { opacity: .8; } }
@keyframes examStamp { to { opacity: 1; transform: translate(-50%,0) rotate(-14deg) scale(1); } }
@media (max-height: 480px) {
  .dlg.exam-question .dlg-box { max-height: calc(100dvh - 78px); padding: 14px 20px 12px; bottom: 8px; }
  .dlg.exam-question .dlg-text { font-size: 18px; line-height: 1.2; }
  .dlg.exam-question .dlg-choices { gap: 7px; margin-top: 7px; }
  .dlg.exam-question .dlg-choice { font-size: 15px; padding: 6px 12px; }
  .dlg.exam-question .dlg-confirm { padding: 6px 16px; font-size: 15px; }
  .exam-card { padding: 17px 26px; max-height: calc(100dvh - 30px); }
  .exam-heading { margin-bottom: 10px; font-size: 22px; }
  .exam-notebook-text { margin: 8px 0; font-size: 19px; line-height: 1.35; }
  .exam-bamboo { height: 65px; margin-bottom: 18px; }
  .exam-seal { top: 70px; width: 90px; height: 90px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .exam-scratch { opacity: .8; animation: none; }
  .received .exam-bamboo { transition: none; }
  .received .exam-seal { animation: none; opacity: 1; transform: translate(-50%,0) rotate(-14deg); }
}

.exam-item-seal{width:110px;height:86px;margin:12px auto 28px;background:linear-gradient(120deg,#a87d4d,#704a30);border:8px solid #4d3525;border-radius:16px 16px 8px 8px;box-shadow:0 10px 15px #21160d66;transform:rotate(-6deg)}.exam-item-none{display:none}.exam-seal{pointer-events:none}

/* Shang replies are the explorer's silent thoughts, not spoken NPC lines. */
.dlg.thought-choices .dlg-choices { position:relative; padding-top:22px; }
.dlg.thought-choices .dlg-choices::before { content:"Your thoughts"; position:absolute; top:0; left:8px; font-size:12px; letter-spacing:.08em; opacity:.75; }
.dlg.thought-choices .dlg-choice { border-radius:38px; min-height:44px; flex:1 1 190px; position:relative; background:#fffdf4; }
.dlg.thought-choices .dlg-choice::after { content:""; position:absolute; bottom:-7px; left:25%; width:9px; height:6px; border:1px solid currentColor; border-radius:50%; background:#fffdf4; }
@media(max-height:450px){.dlg.thought-choices .dlg-choices{padding-top:18px}.dlg.thought-choices .dlg-choice{flex-basis:180px;font-size:14px}}

/* sound.css — the HUD sound switch (a round chip next to the counters). */
.hud-sound { pointer-events: auto; padding: 6px; color: var(--ink); line-height: 0; }
.hud-sound svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hud-sound .spk { fill: currentColor; }
.hud-sound .off, .hud-sound.off .on { display: none; }
.hud-sound.off .off { display: inline; }
.hud-sound.off { color: var(--ink2); opacity: 0.8; }
.hud-sound:hover { filter: brightness(1.05); }
.hud-sound:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Move the whole plate, keeping authored image zoom and focus intact. */
.ms-comic-camera {position:absolute;inset:0;transform-origin:center;animation:ms-camera-push var(--camera-duration,18s) linear forwards;will-change:transform}
.ms-comic-camera > .ms-comic-art {display:block}
.ms-comic-light,.ms-comic-particles {position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ms-comic-light {background:radial-gradient(ellipse at 70% 15%,#ffdc8e25,transparent 65%),linear-gradient(110deg,transparent 20%,#f3d29b0a 50%,transparent 72%);mix-blend-mode:screen;animation:ms-comic-light 9s ease-in-out infinite alternate}
.ms-comic-mote {position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe6ae;box-shadow:0 0 7px #ffcb7370;opacity:.25;animation:ms-comic-dust var(--mote-duration,10s) var(--mote-delay,0s) ease-in-out infinite}
.ms-comic-mote:nth-child(3n) {width:2px;height:2px;opacity:.4;background:#dcb77a}
.ms-comic .ms-comic-controls {flex-wrap:wrap;gap:12px}
.ms-comic .ms-comic-controls button {min-height:48px;min-width:48px;padding:12px 24px;font-size:17px;cursor:pointer}
.ms-comic .ms-comic-controls .ms-skip {min-width:76px;color:#f4e5bf;border-color:#b69762}
.ms-comic.reduce .ms-comic-camera,.ms-comic.reduce .ms-comic-light,.ms-comic.reduce .ms-comic-mote {animation:none;will-change:auto}
.ms-comic.reduce .ms-comic-art {animation:none!important}
@keyframes ms-camera-push {from{transform:scale(1)}to{transform:scale(1.055)}}
@keyframes ms-comic-dust {0%,100%{transform:translate3d(0,12px,0);opacity:.08}50%{transform:translate3d(20px,-24px,0);opacity:.45}}
@keyframes ms-comic-light {from{opacity:.5}to{opacity:1}}
@media(prefers-reduced-motion:reduce) {.ms-comic-camera,.ms-comic-light,.ms-comic-mote{animation:none!important;will-change:auto}.ms-comic-art{animation:none!important}.ms-comic-next{transition:none!important}}
@media(max-width:480px) {.ms-comic .ms-comic-controls{gap:8px}.ms-comic .ms-comic-controls button{padding:12px 15px;font-size:16px}}

.museum-shell .ms-fire-next{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);background:#17253399;border:1px solid #e4bd7288;border-radius:50%;width:100px;height:100px;padding:12px;z-index:5;box-shadow:0 0 40px #e6aa4b77}.ms-fire-next img{width:65px;height:65px;object-fit:contain;filter:drop-shadow(0 0 12px #ffd274)}.ms-fire-next span{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;color:#ffe1a3;text-shadow:0 2px 5px #000}.ms-fire-next:hover img{transform:scale(1.12)}
.museum-shell .ms-fire-hotspot{bottom:auto;transform:none;border:2px dashed #ffe3a499;background:#ffda720c;box-shadow:0 0 25px #e6aa4b66;padding:0;animation:ms-fire-halo 2s ease-in-out infinite}
.ms-fire-hotspot span{top:auto;bottom:4%;background:#14212be0;padding:3px 9px;border-radius:16px;font-size:12px}
@keyframes ms-fire-halo{50%{box-shadow:0 0 40px #e6aa4b99}}

.museum-shell .ms-fire-hotspot,.museum-shell .ms-fire-hotspot:hover,.museum-shell .ms-fire-hotspot:active{padding:0;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;transform:translate(-50%,-50%);animation:none;transition:none}
.museum-shell .ms-fire-hotspot .ms-fire-flames{display:block;width:58px;height:62px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 0 8px #ffbd4a);animation:ms-small-flame 1.2s ease-in-out infinite alternate}
.museum-shell .ms-fire-hotspot:hover .ms-fire-flames{filter:drop-shadow(0 0 12px #ffce62);transform:scale(1.06)}.museum-shell .ms-fire-hotspot:active .ms-fire-flames{transform:scale(1.2) translateY(-4px)}
.ms-fire-hotspot span{top:100%;bottom:auto;left:50%;padding:2px 7px;font-size:11px;background:#14212be0}
.ms-fire-scene .ms-comic-picture::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 70%,#ffc66d66,transparent 65%);animation:ms-fire-reveal .65s ease-out both}
@keyframes ms-small-flame{to{filter:drop-shadow(0 0 12px #ffcc60);opacity:.85}}@keyframes ms-fire-reveal{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.museum-shell .ms-fire-hotspot .ms-fire-flames,.ms-fire-scene .ms-comic-picture::after{animation:none}}

.museum-shell .ms-fire-hotspot.lit .ms-fire-flames{animation:ms-fire-jump .18s ease-out both}@keyframes ms-fire-jump{to{transform:translateY(-12px) scale(1.4);filter:drop-shadow(0 0 20px #ffe6a1)}}

.museum-guide {pointer-events:auto;color:#46321e;font:17px Georgia,serif}
.guide-toggle {position:fixed;top:18px;left:18px;z-index:25;min-height:46px;border:2px solid #8e7046;border-radius:9px;background:#f2e2bc;color:#46321e;padding:10px 16px;font:inherit;cursor:pointer}
.guide-panel {position:fixed;z-index:60;inset:5dvh max(4vw,calc((100vw - 900px)/2));width:auto;height:auto;max-width:none;max-height:none;margin:0;box-sizing:border-box;border:5px solid #785833;border-radius:12px;background:#f6e7c7;color:#46321e;padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;overflow:hidden;font:17px Georgia,serif;box-shadow:0 16px 70px #0008}
.guide-panel::backdrop {background:#06111bd9}
.guide-panel[hidden] {display:none!important}
.guide-panel h2 {margin:4px 160px 8px 0;font-size:28px}
.guide-close {position:absolute;right:16px;top:16px;min-height:44px;padding:8px 14px;background:#fff8e7;border:1px solid #957547;border-radius:7px;color:inherit;font:inherit;cursor:pointer}
.guide-intro {margin:0 0 10px;line-height:1.5}
.guide-summary {margin:0;border-bottom:1px solid #bda581;padding:0 0 14px;color:#70583a;font-size:14px}
.guide-body {min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 4px;line-height:1.6;scrollbar-color:#a78959 #f6e7c7}
.guide-body img {display:block;max-width:100%;max-height:46vh;object-fit:contain;margin:12px auto}
.guide-level {padding:10px 0 18px}
.guide-level+.guide-level {border-top:1px dashed #bda581}
.guide-level-label {margin:0;font-size:13px;letter-spacing:.06em;color:#765d3b}
.guide-level-title {font-size:22px;margin:2px 0 14px}
.guide-fact {border-left:3px solid #ac4430;background:#fff8e7;padding:10px 18px;margin:12px 0}
.guide-fact h4 {font-size:19px;margin:5px 0}.guide-fact p {margin:8px 0}
.guide-empty {max-width:40ch;margin:28px auto;line-height:1.7;text-align:center}
.guide-bone-drawings {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none;padding:10px 0 2px;margin:0}
.guide-bone-drawings figure {margin:0;text-align:center}
.guide-bone-drawings svg {display:block;width:100%;max-height:100px;fill:#f2dfb3;stroke:#705138;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.guide-bone-drawings figcaption {font-size:13px;line-height:1.4}
.guide-bone-drawings .guide-hot-rod {stroke:#aa4432;stroke-width:4}
.guide-flight {position:fixed;z-index:100;left:50%;top:45%;width:210px;background:#fff1cb;border:2px solid #b58a47;padding:20px;text-align:center;pointer-events:none;animation:guide-flight .8s ease-in forwards}
.museum-guide :focus-visible {outline:3px solid #3d8c95;outline-offset:3px}
@keyframes guide-flight {0%{transform:translate(-50%,-50%) rotate(-5deg);opacity:1}40%{transform:translate(-50%,-65%) scale(1.06);opacity:1}100%{left:70px;top:38px;transform:translate(-50%,-50%) scale(.12);opacity:0}}
@media(max-width:600px){.guide-panel{inset:3dvh 3vw;padding:16px}.guide-panel h2{font-size:23px;margin-top:52px;margin-right:0}.guide-close{right:12px;top:12px}.guide-level-title{font-size:20px}.guide-fact{padding:10px 12px}.guide-bone-drawings{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(prefers-reduced-motion:reduce){.guide-flight{animation:none;display:none}}

.guide-present {min-height:44px;margin-top:10px;padding:10px 18px;border-radius:24px;background:#bce1cb;color:#18362d;border:1px solid #3e6a58;font:inherit;cursor:pointer}.guide-fact.presented{transform:translateY(-10px) rotate(-1deg);transition:transform .2s}
.guide-glyph-drawings{list-style:none;padding:0;margin:12px 0;display:grid;gap:12px}.guide-glyph-drawings figure{margin:0}.guide-glyph-drawings img{display:block;width:100%;max-width:520px;border-radius:8px}.guide-glyph-drawings figcaption{font-size:14px;margin:5px 0}

.guide-bronze-drawings{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.guide-bronze-drawings figure{margin:0}.guide-bronze-drawings img{display:block;width:100%;max-height:180px;object-fit:contain;border-radius:8px}.guide-bronze-drawings figcaption{font-size:14px;margin:5px 0}

.ms-home-screen-hint{display:flex;align-items:center;gap:8px;max-width:540px;margin:14px auto 0;padding:6px 8px 6px 14px;border:1px solid #b6955755;border-radius:8px;background:#101b29b8;color:#d6c9ad;text-align:left}
.museum-shell .ms-home-screen-hint p{margin:0;font:14px/1.4 Georgia,serif}
.museum-shell .ms-home-screen-hint button{flex:none;min-width:44px;min-height:44px;margin:0;padding:0;font-size:24px;background:transparent;color:#e4d1a8;border:0}

.museum-identity { box-sizing:border-box; width:min(880px,94vw); max-height:94dvh; overflow:auto; margin:auto; padding:clamp(20px,4vw,48px); color:#f9efd5; text-align:center; font-family:Georgia,serif; pointer-events:auto; }
.museum-identity h1 { font-size:clamp(26px,4vw,44px); margin:8px 0 20px; }
.museum-eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:#cfb980; }
.museum-hero-choices { display:flex; justify-content:center; gap:clamp(12px,5vw,64px); }
.museum-hero { color:inherit; border:2px solid transparent; border-radius:18px; background:transparent; padding:12px; min-width:120px; font:inherit; cursor:pointer; }
.museum-hero img { display:block; width:clamp(100px,19vw,210px); height:clamp(150px,27vh,280px); object-fit:contain; filter:brightness(0); transition:filter .6s,transform .6s; }
.museum-hero[aria-pressed=true] { background:radial-gradient(ellipse,#c39b4f33,transparent 70%); border-color:#e0c68c; }
.museum-hero[aria-pressed=true] img { filter:none; animation:museum-hero-cheer .6s ease-out; }
.museum-hero span { display:block; margin-top:8px; }
.museum-primary { min-height:48px; padding:12px 26px; border:2px solid #987541; border-radius:9px; background:#f4e4b9; color:#352512; font:bold 18px Georgia,serif; cursor:pointer; }
.museum-primary:disabled { opacity:.5; cursor:default; }
.museum-identity :focus-visible { outline:3px solid #f2bf57; outline-offset:4px; }
.museum-owl { font-size:clamp(15px,2vw,19px); line-height:1.5; }
.museum-status { color:#ffc9a7; min-height:1.3em; }
.museum-guestbook { color:#46311d; background:#f5e7c5; border:5px solid #664828; box-shadow:0 12px 50px #0008; padding:clamp(20px,4vw,40px); border-radius:12px; }
.museum-guestbook label { display:block; font-size:20px; }
.museum-guestbook input { box-sizing:border-box; width:min(300px,100%); min-height:48px; border:0; border-bottom:2px solid #93744d; background:#fff8e6; color:#382514; font:22px Georgia,serif; margin:12px; padding:8px; }
.museum-guestbook .museum-status { color:#9b3023; }
.museum-scribbles { display:flex; justify-content:center; gap:20px; opacity:.2; }
.museum-scribbles i { display:block; width:60px; height:15px; border-bottom:2px solid currentColor; border-radius:80%; transform:skew(-30deg) rotate(-7deg); }
.museum-signature { font:italic 36px 'Bradley Hand','Segoe Print',cursive; overflow-wrap:anywhere; min-height:44px; margin:16px 0 0; }
.museum-signature.signed { animation:museum-signature 1s ease-out; }
@keyframes museum-hero-cheer { 45% {transform:translateY(-12px) rotate(-3deg)} }
@keyframes museum-signature { from {clip-path:inset(0 100% 0 0)} to {clip-path:inset(0)} }
@media(max-height:500px) { .museum-identity {padding:12px} .museum-hero img {height:120px} .museum-identity h1 {margin:0 0 10px;font-size:24px} .museum-owl {margin:8px 0} .museum-status {margin:4px 0} }
@media(prefers-reduced-motion:reduce) { .museum-identity * {animation:none!important;transition:none!important} }

.museum-label { box-sizing:border-box; width:min(1000px,96vw); max-height:94dvh; overflow:auto; margin:auto; padding:clamp(18px,3vw,32px); background:#f6e7c6; border:4px solid #73512e; border-radius:14px; color:#402d19; font:17px Georgia,serif; pointer-events:auto; }
.museum-label h1 {font-size:clamp(26px,3vw,36px);margin:8px 0 16px}
.museum-label fieldset {border:0;border-top:1px solid #b9a17c;margin:16px 0;padding:12px 0 0}
.museum-label legend {font-weight:bold;padding-right:12px}
.label-option,.label-secondary {min-height:44px;border:1px solid #ad9167;border-radius:7px;background:#fff6df;color:#47341d;padding:10px 14px;margin:5px;font:inherit;cursor:pointer}
.label-option[aria-pressed=true],.label-fact[aria-pressed=true] {background:#e3edd4;border-color:#517451;box-shadow:0 0 0 2px #78976b}
.label-hint {min-height:1.5em;color:#65523a}.label-hint.is-wrong {color:#9c3127}
.label-option.is-wrong {color:#82796c;background:#e1d8c7}
.label-slots {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.label-slot {min-height:72px;padding:12px;border:2px dashed #9e7a45;border-radius:9px;background:#fff9e9;color:#513b23;font:inherit;cursor:pointer}
.label-pool {display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.label-fact {flex:1 1 160px;min-height:86px;border:1px solid #b79b76;border-radius:7px;background:#fff8e9;color:#49351e;padding:12px;text-align:left;font:inherit;cursor:grab;touch-action:none}
.label-fact span {display:block;font-size:14px;margin-top:8px;line-height:1.4}
.label-drag-ghost {position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,-70%);background:#fff2cb;padding:15px;border:2px solid #987345;border-radius:8px;box-shadow:0 6px 18px #0004;max-width:240px}
.label-preview {line-height:1.7;border-left:3px solid #a53c2b;padding:14px 20px;background:#fff6e1}
.label-actions {display:flex;justify-content:space-between;gap:12px;margin-top:20px}.label-actions .museum-primary {font-size:17px}
.museum-label :focus-visible {outline:3px solid #317984;outline-offset:3px}
.museum-label [hidden] {display:none!important}
.bounce {animation:label-bounce .3s ease-out}
@keyframes label-bounce {25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@media(max-width:600px) {.label-slots{grid-template-columns:1fr}.label-option{display:block;width:calc(100% - 10px)}.label-fact{flex-basis:40%}}
@media(prefers-reduced-motion:reduce){.museum-label *{animation:none!important}}

.ms-loading-status{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:12px;background:#151a22;color:#f5e6cc;font:500 16px/1.5 Georgia,serif;z-index:4;padding:24px;text-align:center}.ms-loading-status button{min-width:44px;min-height:44px;padding:8px 16px}.ms-level-loading{visibility:hidden}.puzzle-loading-status{position:fixed;inset:35% 15%;z-index:32;display:grid;place-items:center;background:#211c18ee;color:#f5e6cc;border-radius:12px;pointer-events:auto}

.ms-voice-note{display:inline-block;padding:4px 8px;color:#fff1d2;background:#182330e8;border-radius:4px;font:13px/1.4 Georgia,serif}.ms-voice-note[hidden]{display:none}

.scroll-hall{position:absolute;inset:0;overflow:hidden;background:#112735;color:#f7e8c8;--paper:#f0dba5;user-select:none}
.scroll-viewport{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:none;cursor:grab;overscroll-behavior-x:contain;outline-offset:-5px}
.scroll-viewport::-webkit-scrollbar{display:none}.scroll-viewport.dragging{cursor:grabbing}
.scroll-world{position:relative;height:100%;min-width:100%}.scroll-segment{position:absolute;top:0;height:100%;overflow:hidden;background:linear-gradient(#183044,#536465 65%,#374644)}
.scroll-scene{position:absolute;inset:0;isolation:isolate;filter:brightness(.62) saturate(.65);transition:filter 1s ease}
.scroll-segment.awake .scroll-scene{filter:brightness(1) saturate(.95)}
.scroll-layer{position:absolute;will-change:transform;pointer-events:none}.scroll-layer img,.scroll-animation img{width:100%;height:100%;object-fit:fill;pointer-events:none}
.scroll-layer:has(img[src*="placeholder"]){filter:sepia(.18) brightness(.7) saturate(.65);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);opacity:.9}
.scroll-transition{position:absolute;top:0;right:0;height:100%;pointer-events:none;opacity:.65;z-index:3}
.scroll-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(#071b2d38,transparent 40%,#071b2d33),radial-gradient(ellipse at 50% 90%,#d6ad5120,transparent 60%);pointer-events:none}
.scroll-title{position:absolute;left:max(30px,env(safe-area-inset-left));top:max(24px,env(safe-area-inset-top));pointer-events:none;text-shadow:0 2px 18px #000b;display:flex;flex-direction:column;letter-spacing:.25em;font-size:14px;line-height:1.6}
.scroll-title small{font-style:italic;letter-spacing:.08em;font-size:13px;color:#cfbd93}
.museum-shell .scroll-menu{position:absolute;right:max(24px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));z-index:8;color:#eee0bd;background:#142b36cc;backdrop-filter:blur(8px);border-color:#e4d2a466;border-radius:24px;min-width:110px}
.scroll-era{position:absolute;left:50%;top:15%;transform:translateX(-50%) translateY(8px);z-index:4;pointer-events:none;text-align:center;opacity:.15;transition:opacity 1s,transform 1s;text-shadow:0 3px 30px #000e;white-space:nowrap}
.scroll-era h1{font-size:clamp(30px,5.3vh,65px);font-weight:400;letter-spacing:.08em;line-height:1.1;margin:0 0 10px}.scroll-era p{margin:0;color:#ddca9f;letter-spacing:.12em;font-size:clamp(12px,1.8vh,17px)}
.scroll-segment.awake .scroll-era{opacity:1;transform:translateX(-50%) translateY(0)}
.scroll-controls{position:absolute;bottom:max(35px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:8}
.museum-shell .scroll-continue{min-width:190px;border-radius:28px;padding:15px 30px;background:linear-gradient(#efdbac,#d1b478);border-color:#eed7a1;box-shadow:0 5px 35px #0007;font-size:17px;letter-spacing:.04em}
.scroll-hint{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);color:#b9b99f;font:12px/1.4 Georgia,serif;letter-spacing:.04em;pointer-events:none;white-space:nowrap;margin:0}
.museum-shell .scroll-exhibit{position:absolute;z-index:5;border:0;background:transparent;padding:0;min-width:44px;min-height:44px;touch-action:none;transition:filter .7s;filter:brightness(.65) saturate(.15);cursor:pointer;border-radius:30%;}
.museum-shell .scroll-exhibit:hover{background:#eacb8520}.scroll-exhibit img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.museum-shell .scroll-exhibit[data-available=true]{filter:drop-shadow(0 0 10px #f4ce6c99);animation:scroll-treasure 3.8s ease-in-out infinite;animation-play-state:paused}
.scroll-segment.awake .scroll-exhibit[data-available=true]{animation-play-state:running}
.scroll-exhibit-title{position:absolute;left:50%;top:105%;transform:translateX(-50%);color:#f1dfb5;font-size:clamp(12px,1.7vh,17px);font-weight:400;width:220px;text-shadow:0 2px 6px #07151a;background:#142b3680;border-radius:10px;padding:4px 8px;opacity:0;transition:opacity .4s}
.scroll-exhibit:hover .scroll-exhibit-title,.scroll-exhibit:focus-visible .scroll-exhibit-title,.scroll-highlight .scroll-exhibit-title{opacity:1}
.museum-shell .scroll-highlight{outline:2px solid #ffe7ac;outline-offset:10px;box-shadow:0 0 55px #ffdb7388}
.scroll-animation{position:absolute;pointer-events:none;transform-origin:50% 100%;animation-duration:var(--duration,4s);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-play-state:paused;opacity:.25;transition:opacity 1s}
.scroll-segment.awake .scroll-animation{animation-play-state:running;opacity:1}
.scroll-animation[data-motion=sway]{animation-name:scroll-sway}.scroll-animation[data-motion=drift]{animation-name:scroll-drift}.scroll-animation[data-motion=spin]{animation-name:scroll-spin;animation-timing-function:linear;transform-origin:center}.scroll-animation[data-motion=glow]{animation-name:scroll-glow;filter:drop-shadow(0 0 24px #ffc56d)}
.scroll-animation[data-motion=particles] i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;opacity:0;animation:scroll-dust 7s linear var(--delay) infinite;animation-play-state:paused;box-shadow:0 0 7px #e9cf91}
.scroll-segment.awake .scroll-animation[data-motion=particles] i{animation-play-state:running}
.scroll-fog{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 1.3s;background:radial-gradient(ellipse at 20% 35%,#f3e3c340,transparent 65%),radial-gradient(ellipse at 70% 65%,#f0e0bc34,transparent 70%),linear-gradient(100deg,#f2dfb318,transparent 45%,#e9d9b52a);background-size:145% 115%;animation:scroll-mist 22s ease-in-out infinite alternate;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.scroll-fog.covered{opacity:.38}
@keyframes scroll-mist{from{background-position:0% 25%}to{background-position:100% 70%}}
.scroll-continuation{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#dccda4;font-size:clamp(22px,4vh,40px);font-style:italic;letter-spacing:.05em}
.scroll-continuation span{font-size:60px;color:#b9af88}.scroll-owl-note{position:absolute;left:28px;bottom:34px;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 18px;background:#152b37ee;border:1px solid #b7a473;border-radius:14px;box-shadow:0 10px 30px #0006;font-size:17px}.scroll-owl-note[hidden]{display:none}.scroll-owl-note p{margin:0}.scroll-owl-icon{color:#b89e5c;font-size:32px}
@keyframes scroll-treasure{50%{filter:drop-shadow(0 0 24px #ffe296);transform:translateY(-5px)}}
@keyframes scroll-sway{50%{transform:rotate(1.2deg)}}@keyframes scroll-drift{50%{transform:translate(25px,-10px)}}@keyframes scroll-spin{to{transform:rotate(360deg)}}@keyframes scroll-glow{50%{filter:drop-shadow(0 0 50px #ffd784);transform:rotate(-2deg)}}@keyframes scroll-dust{0%{transform:translate(0,12px);opacity:0}20%{opacity:.65}80%{opacity:.4}100%{transform:translate(65px,-70px);opacity:0}}
@media(max-height:500px){.scroll-title{left:18px;top:14px;font-size:11px}.scroll-title small{font-size:10px}.museum-shell .scroll-menu{top:12px;right:14px;padding:9px 18px;min-width:100px}.scroll-controls{bottom:26px}.museum-shell .scroll-continue{padding:12px 22px;min-width:160px;font-size:15px}.scroll-hint{font-size:10px;bottom:6px}.scroll-era{top:13%}.scroll-era h1{font-size:29px;margin-bottom:5px}.scroll-era p{font-size:10px}.scroll-exhibit-title{font-size:11px;width:160px}.scroll-owl-note{left:12px;bottom:26px;padding:7px 10px;font-size:14px}}
.museum-shell.reduce .scroll-hall *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){.scroll-hall *{animation:none!important;transition:none!important}}

.scroll-menu-panel{margin:auto;color:#f4e9ce;font:18px/1.5 Georgia,serif}.scroll-menu-panel::backdrop{background:#07101bb0;backdrop-filter:blur(5px)}

.scroll-layer img{opacity:0;transition:opacity .25s}.scroll-layer img.decoded{opacity:1}

/* GA visual acceptance corrections: keep the instructions clear of the primary button. */
.scroll-controls{bottom:max(48px,env(safe-area-inset-bottom))}.scroll-hint{bottom:14px}
.scroll-era p:not(:empty){display:inline-block;padding:5px 12px;background:#112735ce;border-radius:20px;text-shadow:0 1px 3px #000;box-shadow:0 2px 8px #0004;color:#f7e7bc}
.scroll-continuation p{display:none}
.museum-shell .scroll-exhibit[data-available=false]{filter:none}
.scroll-exhibit[data-available=false] img{opacity:.42;filter:grayscale(.75) brightness(.9)}
.scroll-exhibit[data-available=false]::after{content:'🔒';position:absolute;right:4%;bottom:2%;font-size:clamp(12px,1.8vh,18px);opacity:.7;filter:grayscale(1);text-shadow:0 1px 3px #000}
@media(max-height:500px){.scroll-controls{bottom:43px}.scroll-hint{bottom:11px}.scroll-era p:not(:empty){padding:4px 10px}}

.scroll-rig{position:absolute;inset:0;z-index:2;pointer-events:none;animation:scroll-carriage var(--rig-seconds,12s) ease-in-out infinite alternate;animation-play-state:paused}.scroll-segment.awake .scroll-rig{animation-play-state:running}.scroll-rig [data-motion=spin]{animation-direction:alternate}.scroll-scene::after{z-index:4}.scroll-viewport{transition:transform 1.2s ease,filter 1.2s ease}.scroll-viewport.zoomed{transform:scale(1.6);filter:blur(1px)}
@keyframes scroll-carriage{to{transform:translateX(var(--rig-distance,1%))}}

.scroll-animation{opacity:calc(var(--effect-opacity,1)*.25)}.scroll-segment.awake .scroll-animation{opacity:var(--effect-opacity,1)}

.ms-memory-door{position:absolute;inset:0;z-index:10;background:#101d2eb8;display:flex;flex-direction:column;align-items:center;text-align:center;padding:5vh 20px;color:#f7e4bb;animation:ms-door-in 1s ease}
.ms-memory-door h1{font-size:clamp(22px,3.5vw,38px);font-weight:400;margin:10px}.ms-memory-door p{font-size:16px;margin:8px}.ms-door-bone{position:relative;height:min(65vh,620px);width:min(70vw,760px)}.ms-door-bone>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 30px #e8c15a88)}.ms-door-bone svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline-offset:-6px}.ms-crack-guide,.ms-crack-drawn,.ms-crack-branches{fill:none;stroke-linecap:round;stroke-linejoin:round}.ms-crack-guide{stroke:#ffd890;stroke-width:8;opacity:.45}.ms-crack-branches{stroke:#f1d196;stroke-width:5;opacity:.25}.ms-crack-drawn{stroke:#fff3b9;stroke-width:12;filter:drop-shadow(0 0 12px #ffdd76)}.ms-crack-tip{fill:#fff0a8;filter:drop-shadow(0 0 18px #ffcf50);animation:scroll-treasure 1.5s infinite}.ms-door-half{display:none;position:absolute;inset:0;pointer-events:none}.ms-door-half img{width:100%;height:100%;object-fit:contain}.ms-memory-door.opening .ms-door-bone>img,.ms-memory-door.opening svg{opacity:0}.ms-memory-door.opening .ms-door-half{display:block;animation:ms-crack-left 1s ease-in forwards}.ms-memory-door.opening .ms-door-half.right{animation-name:ms-crack-right}@keyframes ms-crack-left{to{transform:translate(-35vw,8vh) rotate(-16deg);opacity:0}}@keyframes ms-crack-right{to{transform:translate(35vw,-8vh) rotate(16deg);opacity:0}}
.ms-ritual-tray{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:9;width:min(680px,86vw);text-align:center;background:#142636ed;border:1px solid #bca06688;border-radius:14px;padding:15px 25px;box-shadow:0 6px 30px #0008}.ms-ritual-line{font-size:18px;line-height:1.4;margin:8px 0}.ms-ritual-bones{display:flex;justify-content:center;gap:25px}.ms-ritual-bones[hidden]{display:none}.museum-shell .ms-ritual-bone{width:80px;height:75px;padding:2px;background:#1c3542;border-color:#d5b974;touch-action:none;position:relative;z-index:1;box-shadow:0 0 24px #e3c96777}.ms-ritual-bone img{width:100%;height:100%;object-fit:contain;pointer-events:none}.ms-ritual-bone[aria-pressed=true]{outline:3px solid #ffe2a1}.ms-ritual-bone:disabled{opacity:.18}.ms-explorer-name{font-size:clamp(30px,5vw,58px)!important;line-height:1.1;color:#f5d68b;overflow-wrap:anywhere;margin:14px auto!important}.museum-shell .ms-seal-button{--stamp:0;width:150px;height:150px;border-radius:28%;color:#ffe9c3;background:conic-gradient(#a23c31 calc(var(--stamp)*1turn),#4a2725 0);border:7px double #d48667;transform:rotate(-7deg);box-shadow:0 6px 20px #0006}.ms-shang-stamp.sealed .ms-seal-button{background:#a23c31;box-shadow:0 0 25px #eab06e66}.ms-score-panel{border:6px double #b2955e;background:linear-gradient(145deg,#203240,#111e2c);box-shadow:0 20px 90px #0007;max-width:760px}.ms-score-discoveries{list-style:none;padding:0;color:#e4cf9b}.ms-score-discoveries li{margin:8px 0}.ms-score-discoveries li::before{content:'✓ ';color:#d6ae58}.ms-score-date{font-size:13px;color:#a7adab}
@keyframes ms-door-in{from{opacity:0}to{opacity:1}}
@media(max-height:500px){.ms-memory-door{padding:8px}.ms-memory-door h1{font-size:22px;margin:5px}.ms-memory-door p{font-size:13px;margin:3px}.ms-door-bone{height:70vh;width:65vw}.ms-ritual-tray{bottom:5px;padding:6px 16px}.ms-ritual-line{font-size:14px;margin:5px}.museum-shell .ms-ritual-bone{height:48px;width:58px}.ms-ritual-tray .ms-kicker{margin:2px}.museum-shell .ms-seal-button{width:100px;height:100px;font-size:13px}.ms-score-panel{max-height:96vh;padding:14px}.ms-score-panel h1{font-size:24px}.ms-score-panel p{font-size:14px;margin:7px auto}.ms-score-panel .ms-explorer-name{font-size:31px!important}.ms-score-discoveries{font-size:13px;margin:8px}.ms-score-discoveries li{margin:3px}.ms-score-panel button{font-size:13px;padding:8px 13px}}
.museum-shell .ms-pause{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));width:auto;min-width:88px;z-index:70;padding:12px!important}
.museum-mode #ui .hud-counters{right:118px}.museum-mode #ui .pz-hint,.museum-mode #ui .insp-close{right:118px}.museum-mode #ui .pz-leave{right:calc(118px + clamp(104px,9.5vw,132px))}
.ms-pause-panel{margin:auto;color:#f4e9ce;font:18px/1.5 Georgia,serif}.ms-pause-panel::backdrop{background:#07101bc9;backdrop-filter:blur(3px)}
.guide-toggle[hidden]{display:none!important}.ms-score-panel{position:relative;z-index:15}
@media(max-height:500px){.museum-shell .ms-pause{right:10px;top:8px;min-width:76px;padding:10px!important}.museum-mode #ui .hud-counters{right:100px}.museum-mode #ui .pz-hint,.museum-mode #ui .insp-close{right:100px}.museum-mode #ui .pz-leave{right:calc(100px + clamp(104px,9.5vw,132px))}}
.museum-shell[data-page=door] .scroll-menu,.museum-shell[data-page=door] .scroll-controls,.museum-shell[data-page=door] .scroll-hint,.museum-shell[data-page=door] .scroll-title,.museum-shell[data-page=stamp] .scroll-controls,.museum-shell[data-page=stamp] .scroll-menu,.museum-shell[data-page=score] .scroll-controls,.museum-shell[data-page=score] .scroll-menu{display:none}
.museum-shell:has(.ms-ritual-tray) .scroll-controls,.museum-shell:has(.ms-ritual-tray) .scroll-hint{display:none}
@media(max-height:500px){
 .museum-shell .ms-score-panel{padding:10px 20px;max-height:96dvh;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-items:center}
 .museum-shell .ms-score-panel h1{grid-column:1/-1;font-size:21px;margin:0 0 3px}
 .museum-shell .ms-score-panel .ms-kicker{grid-column:1/-1;font-size:10px;margin:2px auto}
 .museum-shell .ms-score-panel .ms-explorer-name{grid-column:1/-1;font-size:30px!important;margin:4px auto!important}
 .museum-shell .ms-score-panel h2{grid-column:1/-1;font-size:22px;margin:2px 0 4px}
 .museum-shell .ms-score-panel p{font-size:13px;line-height:1.25;margin:4px auto}
 .museum-shell .ms-score-panel .ms-score-date{grid-column:1/-1;font-size:10px;margin:0}
 .museum-shell .ms-score-panel ul{font-size:12px;text-align:left;margin:2px}
 .museum-shell .ms-score-panel button{font-size:12px;padding:7px 12px;margin:3px}
 .museum-shell .ms-score-panel button:last-of-type{grid-column:1/-1;justify-self:center}
 .museum-shell .ms-score-panel [role=status]{grid-column:1/-1;min-height:0;font-size:11px;margin:0}
 .museum-shell .ms-shang-stamp{padding:14px 22px;max-height:96dvh}
 .museum-shell .ms-shang-stamp h1{font-size:24px;margin:0 0 6px}.museum-shell .ms-shang-stamp h2{font-size:22px;margin:4px}
 .museum-shell .ms-shang-stamp p{font-size:13px;line-height:1.3;margin:5px auto}.museum-shell .ms-shang-stamp .ms-explorer-name{font-size:30px!important;margin:5px auto!important}
}
/* The accepted exhibit sheet contains front and back; the entrance traces the front. */
.ms-door-bone{width:auto;aspect-ratio:.65}
.ms-door-bone>img,.ms-door-half img{position:absolute;left:7%;width:auto;height:100%;max-width:none;object-fit:fill;clip-path:inset(0 52% 0 0)}
.museum-shell .ms-seal-button{position:relative;padding:10px;background:#efdcb5;border:2px solid #b78054;border-radius:8px}
.ms-seal-button img{width:100%;height:100%;object-fit:contain}.ms-seal-button span{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#ffe7b1;font-size:14px}
.ms-shang-stamp .ms-quiet{margin-top:40px}.ms-card-seal{position:absolute;right:24px;top:20px;width:76px;height:76px;object-fit:contain;transform:rotate(8deg);opacity:.8;pointer-events:none}
@media(max-height:500px){.ms-card-seal{right:12px;top:12px;width:45px;height:45px}.museum-shell .ms-shang-stamp .ms-quiet{margin-top:30px}}
.museum-shell[data-page=stamp] .scroll-hint,.museum-shell[data-page=score] .scroll-hint{display:none}.ms-door-bone>img{filter:none}
/* glyph-eye owns a flex toolbar: reserve the museum Menu beside the whole row. */
.museum-mode #ui .gy-tools{right:118px}.museum-mode #ui .gy-tools .pz-hint,.museum-mode #ui .gy-tools .pz-leave{right:auto;top:auto}.museum-mode #ui .gy-tools>button{min-height:44px}
@media(max-height:500px){.museum-mode #ui .gy-tools{right:100px;top:4px}}

/* Entrance artwork and tracing now share the native front-sheet coordinates. */
.ms-door-bone{width:auto;aspect-ratio:1416/2398;flex-shrink:0}
.ms-door-bone svg{overflow:hidden;outline:none}.ms-crack-surface:focus-visible{filter:drop-shadow(0 0 12px #ffdc88)}
.ms-crack-outline,.ms-crack-guide,.ms-crack-drawn{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ms-crack-outline{stroke:#422510;stroke-width:9;opacity:1}.ms-crack-guide{stroke:#fff2a8;stroke-width:4;opacity:1;filter:drop-shadow(0 0 7px #ffe278);animation:ms-guide-pulse 1.5s ease-in-out infinite}
.ms-crack-drawn{stroke:#fff;stroke-width:5}.ms-crack-tip{fill:#fff2a8;stroke:#633816;stroke-width:10;animation:none;filter:drop-shadow(0 0 16px #ffc64b)}
.ms-crack-start{position:absolute;left:48.7%;top:93.8%;transform:translate(-50%,12px);padding:4px 9px;border:1px solid #ffe59c;border-radius:6px;background:#422510;color:#fff5c8;font:bold 13px/1.2 Georgia,serif;pointer-events:none}
.ms-crack-start[hidden],.ms-crack-hand[hidden],.ms-crack-continue[hidden]{display:none}.ms-crack-hand{position:absolute;left:48.7%;top:93.8%;font-size:34px;transform:translate(-40%,-20%);pointer-events:none;filter:drop-shadow(0 2px 3px #000)}
.museum-shell .ms-crack-continue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;min-height:44px;background:#f6e4ab;color:#3e2a16}
.ms-memory-door.opening .ms-crack-surface,.ms-memory-door.opening .ms-crack-start{opacity:0}.ms-memory-door.opening .ms-door-half svg{opacity:1}
@keyframes ms-guide-pulse{50%{filter:drop-shadow(0 0 12px #ffcf48);stroke:#fff}}
@media(prefers-reduced-motion:reduce){.ms-crack-guide{animation:none}}

/* Only the returned, draggable bone remains during the restoration. */
.ms-ritual-active .scroll-exhibit,.ms-ritual-active .scroll-menu{display:none}
.ms-ritual-active .scroll-fog.covered{opacity:.88;background:radial-gradient(ellipse at 30% 40%,#bec6d7e8,#667d9be8 65%,#ccd3dfed);transition:opacity 1.3s}
.ms-ritual-active [data-segment=shang] .scroll-era p{opacity:0;transition:opacity 1s}
.ms-ritual-active.ms-ritual-revealing [data-segment=shang] .scroll-era p,.ms-ritual-active.ms-ritual-revealed [data-segment=shang] .scroll-era p{opacity:1}
.ms-returned-bone{position:relative;margin:12px auto 0;width:65px;height:110px;touch-action:none;cursor:grab;filter:drop-shadow(0 0 16px #ffda77)}
.ms-returned-bone:active{cursor:grabbing}.ms-returned-bone:focus-visible{outline:2px solid #ffda77;border-radius:30%}.ms-returned-bone svg{width:100%;height:100%;overflow:hidden;pointer-events:none}
.ms-returned-bone[hidden]{display:none}
@media(max-height:500px){.ms-returned-bone{height:65px;width:44px;margin:6px auto 0}}

.ms-ritual-speech{display:flex;align-items:center;gap:14px;text-align:left}.ms-ritual-owl{width:54px;height:54px;object-fit:contain;flex:none}.ms-ritual-speech .ms-ritual-line{flex:1}@media(max-height:500px){.ms-ritual-owl{width:36px;height:36px}.ms-ritual-speech{gap:8px}}

/* A hold must retain the finger instead of starting a browser gesture. */
.museum-shell .ms-seal-button{touch-action:none;-webkit-touch-callout:none}
.ms-door-bone,.ms-returned-bone{-webkit-touch-callout:none;-webkit-user-select:none}

/* The shell is DOM only. Its stage coordinates match the supplied museum collage. */
.museum-shell { position:fixed; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#f4e9ce; background:#101b29; font:18px/1.5 Georgia,serif; isolation:isolate; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.museum-shell button { min-height:44px; border:1px solid #b69457; border-radius:8px; padding:10px 22px; background:#f0dfb4; color:#30271c; font:600 16px/1.25 Georgia,serif; touch-action:manipulation; }
.museum-shell button:hover { background:#fff1cb; }
.museum-shell button:focus-visible { outline:3px solid #f2c66d; outline-offset:4px; }
.museum-shell button:disabled { opacity:.4; cursor:default; }
.museum-shell .ms-alt { color:#efdfb7; border-color:#987c53; background:#192331d9; }
.ms-backdrop { position:absolute; inset:0; z-index:-1; opacity:.4; pointer-events:none; }
.ms-backdrop img { position:absolute; width:100%; height:100%; object-fit:cover; }
.ms-panel { width:min(780px,92vw); max-height:94dvh; overflow:auto; padding:clamp(20px,4vw,44px); text-align:center; border:1px solid #b6955766; border-radius:12px; background:linear-gradient(145deg,#1d2a3bf5,#101c2bf7); box-shadow:0 18px 80px #0008; }
.ms-panel h1 { font-weight:400; font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 20px; }
.ms-panel p { max-width:54ch; margin:20px auto; }
.ms-panel button { margin:6px; }
.ms-title { background:#101b29b8; border:0; padding:48px; box-shadow:none; }
.ms-title h1 { font-size:clamp(44px,7vw,84px); margin:0; letter-spacing:.025em; }
.ms-subtitle { text-transform:uppercase; letter-spacing:.28em; font-size:15px; color:#d4b97c; }
.ms-kicker { text-transform:uppercase; font-size:12px; letter-spacing:.16em; color:#d6b97b; }
.ms-quiet,.ms-entry-note { font-size:14px; color:#b7b6ad; }
.ms-dialog,.museum-label { position:absolute; z-index:15; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 100vmax #07101bc9,0 15px 50px #0007; }
.ms-gallery-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 0; border-top:1px solid #ffffff24; text-align:left; }
.ms-gallery-row strong { flex:1; min-width:180px; font-weight:400; }
.ms-gallery-row small { color:#d3c4a3; font-size:13px; }
.ms-hall { width:100%; height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; background:#101820; }
.ms-hall-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; gap:12px; z-index:1; box-shadow:0 2px 12px #0005; }
.ms-hall-title { letter-spacing:.12em; text-transform:uppercase; font-size:13px; color:#d0b67c; }
.ms-hall-pan { min-height:0; overflow:auto hidden; scrollbar-width:thin; scrollbar-color:#8c774e #15202b; touch-action:pan-x; cursor:grab; }
.ms-hall-world { position:relative; height:100%; min-width:1400px; width:max(100%,calc((100dvh - 170px) * 1.78)); }
.ms-hall-stage { position:absolute; inset:0; }
.ms-hall-piece { position:absolute; pointer-events:none; }
.ms-gallery-strip { position:absolute; inset:0; pointer-events:none; }
.museum-shell .ms-gallery-button { position:absolute; top:31%; width:132px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f2e0b2e8; border-radius:3px; font-size:18px; min-height:52px; padding:5px; pointer-events:auto; box-shadow:0 2px 8px #0008; }
.ms-gallery-button small { font:11px/1.2 Georgia,serif; }
.ms-first { animation:ms-glow 2s ease-in-out infinite; }
.ms-xin { position:absolute; top:51%; transform:translateX(-50%); font:11px Georgia,serif; color:#ded0ae; padding:3px 6px; background:#172432cc; }
.ms-case-row { position:absolute; inset:0; pointer-events:none; }
.museum-shell .ms-case { position:absolute; min-width:44px; min-height:52px; padding:0; background:none; border:0; pointer-events:auto; border-radius:0; }
.ms-case > img:first-child { position:absolute; width:100%; height:100%; left:0; top:0; object-fit:fill; }
.ms-case.locked { filter:brightness(.48) saturate(.35); }
.ms-case.playable { filter:brightness(.88) saturate(.35); }
.ms-case.found { filter:brightness(1.2) saturate(.35); }
.ms-case.complete { filter:brightness(1.25); box-shadow:0 0 38px #f9db6470; }
.ms-case-number { position:absolute; bottom:0; left:50%; transform:translate(-50%,90%); color:#ead5a1; font:11px Georgia,serif; }
.ms-case-label { position:absolute; bottom:11%; left:30%; width:40%; height:12%; color:#983b30; font:bold 15px/1 Georgia,serif; background:#efe4c7; box-shadow:0 1px 2px #0006; }
.ms-case-object { position:absolute; top:13%; left:18%; width:64%; height:40%; object-fit:contain; }
.ms-case-silhouette { position:absolute; top:10%; left:20%; width:60%; color:#191a19; font-size:30px; }
.ms-hall-hero { position:absolute; height:22%; bottom:3%; object-fit:contain; pointer-events:none; }
.ms-hall-owl { position:absolute; height:8%; bottom:19%; pointer-events:none; }
.ms-hall-controls { display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px 4px; }
.ms-hall-controls button { font-size:14px; }
.ms-hall-note { font-size:12px; text-align:center; color:#b4ad99; margin:4px 0 8px; }
.ms-comic { width:100%; height:100%; display:grid; grid-template-rows:minmax(0,1fr) auto; background:#101b29; }
.ms-comic-picture { min-height:0; position:relative; overflow:hidden; background:#1a2634; }
.ms-comic-art { width:100%; height:100%; object-fit:cover; animation:ms-frame-in .5s ease-out; }
.ms-comic-hero { position:absolute; transform:translate(-50%,-100%); object-fit:contain; }
.ms-comic-caption { padding:18px 5vw; border-top:1px solid #b795573d; background:#101b29; text-align:center; }
.ms-comic-caption p { font-size:clamp(16px,2.2vw,23px); line-height:1.45; max-width:75ch; margin:8px auto 16px; }
.ms-comic-controls { display:flex; justify-content:center; gap:10px; }
.ms-comic[data-transition=square] .ms-comic-art { animation:ms-square .6s ease-out; }
.ms-comic[data-transition=ripple] .ms-comic-art { animation:ms-ripple .8s ease-out; }
.ms-hold { --hold:0; width:160px; height:160px; border-radius:50%!important; background:conic-gradient(#e7c77f calc(var(--hold)*1turn),#233348 0)!important; color:#fff0c4!important; box-shadow:inset 0 0 0 7px #6a573c; touch-action:none!important; }
.ms-ripple,.ms-return { position:fixed; inset:0; margin:0; display:grid; place-items:center; background:#101b29; z-index:60; font-size:25px; }
.ms-ripple::after { content:''; position:absolute; width:180px; height:180px; border:2px solid #c6a56766; border-radius:50%; animation:ms-loading 1.5s infinite; }
.ms-return { animation:ms-curtain 1.5s ease-in; }
.ms-pause { position:absolute; right:16px; top:16px; z-index:15; width:44px; padding:8px!important; }
.museum-shell.ms-in-level { pointer-events:none; background:transparent; }
.museum-shell.ms-in-level button,.museum-shell.ms-in-level .ms-panel,.museum-shell.ms-in-level .guide-panel { pointer-events:auto; }
.ms-stamp-panel .ms-red-seal { display:grid; place-items:center; width:110px; height:110px; margin:auto; border:5px double #b34a3c; color:#c85e4d; font:21px Georgia,serif; transform:rotate(-8deg); animation:ms-seal .5s ease-out; }
.ms-setting { display:flex; align-items:center; gap:12px; justify-content:center; margin:20px; }
.ms-setting input { width:24px; height:24px; }
.ms-notice { text-align:center; }
.ms-notice:not(.ms-ripple):not(.ms-return) { position:absolute; bottom:0; background:#131b2aee; padding:10px 24px; border-radius:8px; z-index:20; }
.museum-shell.reduce *, .museum-shell.reduce *::after { animation:none!important; transition:none!important; }
@keyframes ms-frame-in { from {opacity:0} to {opacity:1} }
@keyframes ms-ripple { from {filter:blur(10px);transform:scale(1.12)} }
@keyframes ms-square { from {clip-path:inset(49%)} to {clip-path:inset(0)} }
@keyframes ms-loading { from {transform:scale(.5);opacity:.8} to {transform:scale(2);opacity:0} }
@keyframes ms-glow { 50% { box-shadow:0 0 20px #e4bf6a8c; } }
@keyframes ms-curtain { from { clip-path:circle(0 at 50% 50%); } to { clip-path:circle(150% at 50% 50%); } }
@keyframes ms-seal { from {opacity:0;transform:scale(2) rotate(-8deg)} to {opacity:1;transform:scale(1) rotate(-8deg)} }
@media(max-height:500px) { .ms-hall-bar {padding:4px 12px} .ms-hall-bar button {padding:6px 14px;font-size:13px} .ms-hall-title {font-size:11px} .ms-hall-controls {padding:4px 10px;gap:6px} .ms-hall-controls button {font-size:12px;padding:6px 12px} .ms-hall-note {margin:0 0 4px;font-size:10px} .ms-panel {padding:18px;max-height:94dvh} .ms-panel h1 {font-size:25px;margin-bottom:8px} .ms-panel p {font-size:15px;margin:12px auto} .ms-hold {width:112px;height:112px} .ms-comic-caption {padding:8px 4vw} .ms-comic-caption p {font-size:16px;margin:4px auto 8px} .ms-comic-picture {min-height:70px} .ms-gallery-button small {font-size:10px} .ms-xin {top:52%} }
@media(prefers-reduced-motion:reduce) { .museum-shell *, .museum-shell *::after {animation:none!important;transition:none!important} }

.museum-shell .label-fact,.museum-shell .label-option {font-weight:400} .ms-gallery-button.restored {box-shadow:0 0 20px #eadb7b}

.museum-shell:has(> .ms-dialog)::before,.museum-shell:has(> .museum-label)::before {content:'';position:absolute;inset:0;z-index:14;pointer-events:auto} .museum-shell:has(.guide-panel:not([hidden]))::before {content:'';position:absolute;inset:0;z-index:55;pointer-events:auto}

/* Short landscape screens crop decorative artwork; interactive exhibits retain their proportions. */
@media(max-height:500px) {
 .ms-hall-piece {object-fit:cover}
 .ms-hall-scroll {top:5%!important;height:53%!important;object-position:center}
 .museum-shell .ms-gallery-button {top:14%;font-size:16px}
 .museum-shell .ms-case {top:auto!important;bottom:10%;height:92px!important}
 .ms-case > img:first-child {object-fit:contain}
 .ms-hall-hero {height:110px;bottom:0}
 .ms-hall-owl {height:42px;bottom:65px}
 .ms-case-number {bottom:4px}
 .ms-xin {top:47%}
}

.ms-hall-owl {aspect-ratio:600/650} .ms-comic-owl {position:absolute;height:45%;aspect-ratio:600/650;left:44%;bottom:8%}

.ms-save-warning {position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:100;margin:0;padding:8px 16px;text-align:center;background:#f4e5bf;color:#6e3220;font:14px/1.4 Georgia,serif;box-shadow:0 2px 8px #0006;pointer-events:none}

/* Two plates share one caption/voice frame; art changes never advance the story. */
.ms-comic-next {position:absolute;inset:0;opacity:0;transition:opacity .5s ease;animation:none!important}
.ms-comic-next.shown {opacity:1}
.ms-comic.reduce .ms-comic-next {transition:none}
.ms-exhibit-silhouette {filter:brightness(0)}

.ms-save-confirm {pointer-events:auto;z-index:1000;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.ms-save-confirm button {font-size:14px;padding:8px 14px}

/* A top-layer dialog keeps cancellation focused and the game behind it inert. */
.ms-reset-dialog {margin:auto;color:inherit;font:inherit;box-sizing:border-box;max-height:90dvh}
.ms-reset-dialog::backdrop {background:#07101bd9}
.museum-shell .ms-danger {background:#76362f;color:#fff0d7;border-color:#c27c65}
.museum-shell .ms-danger:hover {background:#95483d}
.ms-reset-error {color:#ffbb9f}

/* Keep phone-only compact layouts out of tablet and desktop presentation. */
@media(max-width:1000px) and (max-height:450px) and (orientation:landscape){
 .ms-comic{position:relative;display:block}
 .ms-comic-picture{height:100%;min-height:0}
 .ms-comic-caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));background:none;border:0;pointer-events:none;text-align:left}
 .ms-comic-caption .ms-kicker{padding:2px 8px;background:#101b29d9;border-radius:5px;font-size:10px}
 .ms-comic-caption p{max-width:74ch;margin:2px 0 0;padding:4px 8px;font-size:15px;line-height:1.3;background:#101b29df;border-radius:5px;text-shadow:0 1px 2px #000}
 .ms-comic .ms-comic-controls{align-self:flex-end;margin-top:auto;gap:8px;flex-wrap:nowrap;pointer-events:auto}
 .ms-comic .ms-comic-controls button{min-width:44px;min-height:44px;padding:7px 12px;font-size:14px}
 .ms-comic .ms-comic-controls .ms-skip{min-width:54px}
 .museum-shell .ms-fire-hotspot span{top:auto;bottom:100%}
 .ms-memory-door{padding:0}
 .ms-memory-door h1{position:absolute;left:calc(12px + env(safe-area-inset-left));top:12px;max-width:27vw;margin:0;font-size:22px;line-height:1.15;text-align:left}
 .ms-memory-door .ms-crack-instruction{position:absolute;left:calc(12px + env(safe-area-inset-left));top:78px;max-width:26vw;margin:0;font-size:14px;line-height:1.35;text-align:left}
 .ms-memory-door .ms-door-bone{position:absolute;left:50%;top:calc(10px + env(safe-area-inset-top));bottom:auto;transform:translateX(-50%);width:auto;height:calc(100% - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 .ms-memory-door .ms-crack-start{top:auto;bottom:0;transform:translate(-50%,0)}
 .museum-shell .ms-crack-continue{left:calc(12px + env(safe-area-inset-left));bottom:12px;transform:none;padding:7px 12px;font-size:14px}
 .museum-shell .ms-pause{right:calc(10px + env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top))}
 .museum-shell .ms-score-panel{padding:6px 20px}
 .museum-shell .ms-score-discoveries{line-height:1.3}
 .museum-shell .ms-score-panel h1,.museum-shell .ms-score-panel h2,.museum-shell .ms-score-panel .ms-explorer-name{line-height:1.1}
 .gy-strip img{height:56px;object-fit:contain}
 .gy-strip li{font-size:11px}
 .ms-title{padding:18px;max-height:94dvh}
 .ms-title h1{font-size:clamp(36px,6vw,52px)}
 .ms-title .ms-home-screen-hint{margin-top:8px}
}