/* 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=412a2c3e75235e9b") 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=412a2c3e75235e9b"); }
.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}}

.card-puzzle[data-narrating="true"] .cpf-card,.card-puzzle[data-narrating="true"] .cpf-slot{pointer-events:none}.card-puzzle[data-narrating="true"] .cpf-controls .btn:not(:first-child){visibility:hidden}

.cpf-paper-scene{background:#e8dcc3}.cpf-scene-background{position:absolute;left:42%;top:17%;width:54%;height:65%;object-fit:contain;pointer-events:none}.cpf-paper-scene .cpf-card{width:clamp(74px,12vw,150px);height:clamp(60px,20vh,120px);max-height:none;z-index:4;transition:none}.cpf-paper-scene .cpf-card img{width:100%;height:100%;object-fit:contain;pointer-events:none}.cpf-paper-scene .cpf-slot{width:100px;min-height:48px;border:2px dashed #9a7544aa;background:#f2ddae55;border-radius:50%;z-index:3}.cpf-paper-scene .cpf-head{color:#4b3422;text-shadow:none}.cpf-paper-scene .cpf-head h2{margin-top:0}.cpf-paper-scene .cpf-labels{pointer-events:none}

.cpf-paper-scene .cpf-solved{z-index:10}

/* The completion card owns the paper scene; loose stage art stays behind it. */
.cpf-paper-scene:has(.cpf-solved:not([hidden])) .cpf-scene-background,
.cpf-paper-scene:has(.cpf-solved:not([hidden])) .cpf-labels{visibility:hidden}
.cpf-paper-scene .cpf-solved{inset:auto;left:50%;top:calc(50% + 30px);transform:translate(-50%,-50%);width:min(660px,84%);max-height:calc(100% - 170px);padding:18px;gap:12px;box-sizing:border-box}
@media(max-height:450px){.cpf-paper-scene .cpf-solved{padding:14px;gap:8px}.cpf-paper-scene .cpf-solved strong{font-size:26px}.cpf-paper-scene .cpf-solved p{font-size:16px;line-height:1.25}}

/* chariot.css */
.chariot-puzzle{position:absolute;inset:0;pointer-events:auto;background:#e5dccb;color:#392e26;font-family:Georgia,serif;touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden}.chariot-puzzle[hidden],.chariot-puzzle [hidden]{display:none!important}.chariot-head{position:absolute;top:15px;left:24px;right:380px}.chariot-head h2{margin:0;font-size:clamp(19px,2.5vw,30px)}.chariot-goal{margin:5px 0;font:16px/1.3 Georgia,serif}.chariot-tools{position:absolute;right:18px;top:14px;display:flex;gap:7px;z-index:5}.chariot-tools .btn{min-height:44px;padding:8px 14px;font-size:15px}.chariot-board{position:absolute;inset:90px 20px 62px;border-bottom:6px solid #8d7353;background:linear-gradient(#c6cbbb 0%,#dad7b7 43%,#c3a572 44%,#d5b784 100%);border-radius:8px;overflow:hidden}.chariot-road{position:absolute;inset:65% 0 0;background:repeating-linear-gradient(90deg,transparent 0 100px,#b39769 102px 106px,transparent 108px 140px);opacity:.6}.chariot-cart{position:absolute;left:52%;top:48%;width:26%;height:64px;transform:translateY(-50%)}.chariot-body{position:absolute;inset:8px 0 4px 35%;border:7px solid #704d2d;border-top-width:14px;background:#b68c55}.chariot-pole{position:absolute;top:41px;left:-55%;right:10%;height:7px;background:#704d2d}.chariot-cart i{position:absolute;bottom:-22px;width:54px;height:54px;border:5px solid #65492d;border-radius:50%;background:conic-gradient(from var(--wheel,0deg),#74532f 0 8deg,transparent 8deg 80deg,#74532f 80deg 88deg,transparent 88deg 170deg,#74532f 170deg 178deg,transparent 178deg 260deg,#74532f 260deg 268deg,transparent 268deg)}.chariot-cart i:first-of-type{left:37%}.chariot-cart i:last-of-type{right:0}.chariot-piece,.chariot-slot{position:absolute;transform:translate(-50%,-50%);min-width:76px;min-height:52px;border:2px solid #766240;border-radius:12px;padding:8px;background:#f6edda;color:#392e26;font:bold 16px Georgia;touch-action:none;cursor:grab}.chariot-piece{left:10%;box-shadow:0 4px 1px #69523955;z-index:3}.chariot-piece[data-piece="horse-a"]{top:17%}.chariot-piece[data-piece="horse-b"]{top:50%}.chariot-piece[data-piece="ox"]{top:83%}.chariot-piece[data-piece="driver"]{top:25%}.chariot-piece[data-piece="warrior"]{top:75%}.chariot-piece.held,.chariot-piece.selected{z-index:10;outline:4px solid #d8a33a;box-shadow:0 12px 15px #49381b88}.chariot-piece.placed{opacity:.45}.chariot-slot{left:33%;background:#f4d680b0;border:3px dashed #8b6a24;cursor:pointer;min-width:112px;z-index:2}.chariot-slot[data-slot="horse-left"]{top:24%}.chariot-slot[data-slot="horse-right"]{top:76%}.chariot-slot[data-slot="front"]{left:60%;top:29%}.chariot-slot[data-slot="rear"]{left:79%;top:29%}.chariot-slot.filled{background:#d6dbae;border-style:solid}.chariot-target{position:absolute;transform:translate(-50%,-50%);width:68px;height:68px;border:5px solid #9d793d;border-radius:50%;background:#e2ca88;color:#6d442c;font:bold 42px Georgia;line-height:48px;touch-action:none;z-index:4}.chariot-target[data-weapon="spear"]{background:#dfbb6b}.chariot-target.hit{border-color:#34664b;opacity:.6}.chariot-shoot{position:absolute;bottom:8px;right:24px;min-width:106px;min-height:46px;z-index:7}.chariot-tally{position:absolute;bottom:17px;left:25px;font:bold 25px Georgia}.chariot-speech{position:absolute;left:22px;right:22px;bottom:10px;background:#f9f1de;border:1px solid #a58b65;border-radius:12px;padding:11px 150px 11px 18px;min-height:74px;z-index:8;box-shadow:0 4px 20px #3f2d1855}.chariot-speech strong{font:12px sans-serif;text-transform:uppercase;color:#74592f}.chariot-speech p{font:18px/1.3 Georgia;margin:3px 0}.chariot-speech .btn{position:absolute;right:12px;bottom:12px;min-height:44px}.chariot-puzzle[data-phase="run"] .chariot-cart,.chariot-puzzle[data-phase="solo"] .chariot-cart{left:14%;width:28%}.chariot-puzzle[data-phase="celebration"] .chariot-cart,.chariot-puzzle[data-phase="solved"] .chariot-cart{left:35%;width:36%}.chariot-board[data-horses="2"] .chariot-pole:before{content:'HORSES';position:absolute;top:-30px;left:5%;font:bold 13px sans-serif;color:#59452f}.chariot-board[data-crew="solo"] .chariot-body:before{content:'ARCHER · hands on reins';position:absolute;width:180px;top:-40px;left:-20px;font:14px sans-serif}.chariot-board[data-crew="pair"] .chariot-body:before{content:'DRIVER ← WARRIOR';position:absolute;top:-35px;left:-20px;white-space:nowrap;font:bold 14px sans-serif}@media(max-height:420px){.chariot-head{top:10px}.chariot-head h2{font-size:20px}.chariot-goal{font-size:14px}.chariot-tools{top:9px;right:14px;gap:5px}.chariot-tools .btn{padding:6px 11px}.chariot-board{inset:77px 18px 57px}.chariot-speech{min-height:64px;padding-top:7px;padding-bottom:7px}.chariot-speech p{font-size:16px}.chariot-speech strong{font-size:11px}.chariot-cart{height:50px}.chariot-piece{min-height:46px;min-width:74px}.chariot-target{width:64px;height:64px}}@media(max-width:650px){.chariot-head{left:12px;right:12px}.chariot-tools{top:70px;left:12px;right:auto}.chariot-board{top:130px}.chariot-speech{padding-right:15px;padding-bottom:62px}.chariot-speech .btn{right:12px}.chariot-slot{min-width:74px;font-size:12px}.chariot-piece{min-width:62px;font-size:13px}}

/* Deliberate geometry placeholders: the approved paper art is not integrated yet. */
.chariot-team{position:absolute;left:-62%;top:12px;width:90px;height:65px;display:none}.chariot-board[data-horses="2"] .chariot-team{display:block}.chariot-team b{position:absolute;left:0;top:0;width:67px;height:30px;background:#b38d62;border:3px solid #765234;border-radius:22px 12px 10px 10px;transform:rotate(-3deg)}.chariot-team b:before{content:'';position:absolute;left:-12px;top:-16px;width:21px;height:32px;border:3px solid #765234;border-radius:12px 4px 5px 5px;background:#b38d62;transform:rotate(20deg)}.chariot-team b:after{content:'';position:absolute;left:12px;top:23px;width:38px;height:21px;border-left:5px solid #765234;border-right:5px solid #765234}.chariot-team b:last-child{left:9px;top:27px;background:#cfb084}.chariot-cart.moving .chariot-team b{transform:translateY(2px) rotate(-3deg)}.chariot-crew{position:absolute;left:40%;right:4px;bottom:30px;height:70px;display:none;z-index:2}.chariot-crew b{position:absolute;width:19px;height:49px;background:#876a49;border:2px solid #5e4931;border-radius:9px 9px 2px 2px;bottom:0}.chariot-crew b:before{content:'';position:absolute;left:0;top:-19px;width:15px;height:19px;border:2px solid #5e4931;border-radius:50%;background:#d3b78e}.chariot-crew b:after{content:'';position:absolute;left:-12px;top:8px;width:36px;height:5px;background:#5e4931;transform:rotate(-12deg)}.chariot-crew .driver{left:4px}.chariot-crew .warrior{right:4px;background:#768088}.chariot-board[data-crew="solo"] .chariot-crew,.chariot-board[data-crew="pair"] .chariot-crew{display:block}.chariot-board[data-crew="solo"] .driver{display:none}.chariot-board[data-crew="solo"] .warrior{left:4px;right:auto}.chariot-board[data-horses="2"] .chariot-pole:before,.chariot-board[data-crew] .chariot-body:before{content:none}
/* A hit is a non-blocking aside, leaving the fixed Shoot control and targets free. */
.chariot-puzzle[data-speaking="false"][data-phase="run"] .chariot-speech{right:150px;bottom:7px;min-height:49px;padding:6px 14px;pointer-events:none}.chariot-puzzle[data-speaking="false"][data-phase="run"] .chariot-speech p{font-size:16px;margin:1px 0}.chariot-puzzle[data-phase="run"] .chariot-cart,.chariot-puzzle[data-phase="solo"] .chariot-cart{left:32%;width:25%}

/* Running uses the engine clock, so both the road and the flying arrow freeze on Pause. */
.chariot-road:after{content:'';position:absolute;left:0;right:0;top:-80%;height:100%;background:repeating-linear-gradient(90deg,transparent 0 175px,#80603e 175px 182px,transparent 182px 260px);background-position-x:var(--travel,0px);opacity:.7;pointer-events:none}.chariot-projectile{position:absolute;display:block;width:48px;height:3px;background:#644525;transform-origin:left center;z-index:6;pointer-events:none}.chariot-projectile:after{content:'';position:absolute;right:-6px;top:-4px;border-left:10px solid #5e746c;border-top:5px solid transparent;border-bottom:5px solid transparent}.chariot-projectile[data-weapon="spear"]{width:70px;height:5px}.chariot-slot:before{content:'';display:block;width:32px;height:40px;margin:auto;background:#685b4555;border-radius:45% 45% 15% 15%;clip-path:polygon(30% 0,70% 0,78% 20%,70% 33%,95% 48%,88% 60%,70% 50%,72% 100%,28% 100%,30% 50%,12% 60%,5% 48%,30% 33%,22% 20%)}.chariot-slot[data-shape="horse"]:before{width:65px;height:43px;border-radius:0;clip-path:polygon(0 10%,14% 0,27% 25%,85% 25%,100% 45%,88% 48%,84% 100%,74% 100%,70% 58%,33% 58%,28% 100%,17% 100%,17% 40%,0 38%)}.chariot-slot[data-shape="driver"]:after{content:'';position:absolute;left:5px;top:25px;width:33px;border-top:3px solid #685b4588;transform:rotate(12deg)}.chariot-slot[data-shape="warrior"]:after{content:'';position:absolute;right:10px;top:8px;height:34px;width:15px;border:3px solid #685b4588;border-left:none;border-radius:0 100% 100% 0}.chariot-slot.filled:before{background:#526744}.chariot-slot.filled{outline:2px solid #52674455}
.chariot-with-art .chariot-board{background:#d7c697;border:0}.chariot-with-art .chariot-piece{width:100px;height:88px;background:transparent;border:0;box-shadow:none}.chariot-with-art .chariot-piece img{width:100%;height:100%;object-fit:contain;pointer-events:none}.chariot-with-art .chariot-cart{height:100px;width:34%;z-index:2;left:50%;top:50%}.chariot-with-art .chariot-cart>span,.chariot-with-art .chariot-cart>i{display:none}.chariot-with-art .chariot-cart img{position:absolute;object-fit:contain;pointer-events:none}.chariot-with-art .chariot-art-body{inset:0;width:100%;height:100%;z-index:2}.chariot-with-art .chariot-art-rail{inset:0;width:100%;height:100%;z-index:5;clip-path:polygon(50% 45%,98% 18%,98% 50%,69% 76%,50% 54%)}.chariot-with-art .chariot-art-near{width:64px;height:64px;left:92.3%;top:72.8%;translate:-50% -50%;rotate:var(--wheel);z-index:6}.chariot-with-art .chariot-art-far{width:49px;height:49px;left:36.4%;top:30%;translate:-50% -50%;rotate:var(--wheel);z-index:1}.chariot-with-art .chariot-art-horseA,.chariot-with-art .chariot-art-horseB{width:58%;height:95px;left:-28%;top:7px;z-index:3;display:none}.chariot-with-art .chariot-art-horseB{left:-41%;top:23px;z-index:4}.chariot-with-art .chariot-art-yoke{width:35%;height:40px;left:-26%;top:45px;z-index:5;display:none}.chariot-with-art .chariot-board[data-horses="2"] .chariot-art-horseA,.chariot-with-art .chariot-board[data-horses="2"] .chariot-art-horseB,.chariot-with-art .chariot-board[data-horses="2"] .chariot-art-yoke{display:block}.chariot-with-art .chariot-art-driver,.chariot-with-art .chariot-art-warrior{width:22%;height:100px;left:48%;top:-52px;display:none;z-index:4}.chariot-with-art .chariot-art-warrior{left:70%}.chariot-with-art .chariot-board[data-crew="solo"] .chariot-art-warrior{display:block;left:48%}.chariot-with-art .chariot-board[data-crew="pair"] .chariot-art-driver,.chariot-with-art .chariot-board[data-crew="pair"] .chariot-art-warrior{display:block}.chariot-with-art .chariot-cart[data-running="true"]{left:9%;width:31%;transform:translateY(-50%) scaleX(-1)}.chariot-with-art .chariot-target{border:0;border-radius:0;background-color:transparent!important;background-size:contain;background-repeat:no-repeat;background-position:center;color:transparent}.chariot-with-art [class^="chariot-field-"]{position:absolute;inset:0;width:130%;height:100%;object-fit:cover;pointer-events:none}.chariot-with-art .chariot-field-back{z-index:0}.chariot-with-art .chariot-field-mid{z-index:0}.chariot-with-art .chariot-field-front{z-index:1}.chariot-with-art .chariot-road{z-index:1}.chariot-with-art .chariot-slot{z-index:4}.chariot-with-art .chariot-piece{z-index:5}.chariot-with-art .chariot-slot[data-slot="front"]{left:65%;top:28%}.chariot-with-art .chariot-slot[data-slot="rear"]{left:84%;top:28%}@media(max-height:420px){.chariot-with-art .chariot-cart{height:84px}.chariot-with-art .chariot-piece{width:85px;height:65px}.chariot-with-art .chariot-art-driver,.chariot-with-art .chariot-art-warrior{height:77px;top:-36px}.chariot-with-art .chariot-art-horseA,.chariot-with-art .chariot-art-horseB{height:77px}.chariot-with-art .chariot-art-near{width:54px;height:54px}.chariot-with-art .chariot-art-far{width:42px;height:42px}}

/* Paper art replaces every greybox member of the cart. */
.chariot-with-art .chariot-cart>span,.chariot-with-art .chariot-cart>i{display:none!important}.chariot-with-art .chariot-piece[data-piece^="horse"]{width:125px;height:92px}

.chariot-tools{right:130px}@media(max-height:420px){.chariot-tools{right:130px}}

.chariot-cart[data-running="true"] .chariot-art-warrior{transform:scaleX(-1)}

/* Formal field art replaces the greybox road markers. Fade out the hard horizon ink. */
.chariot-with-art .chariot-road{display:none}
.chariot-with-art .chariot-board{background:linear-gradient(#ece2cb 0 43%,#e6c79d 55%,#e1bc8b 100%)}
.chariot-with-art .chariot-field-back{mask-image:linear-gradient(to bottom,#000 0 43%,transparent 49%)}

/* The whole rig scales as one unit; phases move it without changing its facing. */
.chariot-side-rig .chariot-cart,.chariot-side-rig .chariot-cart[data-running="true"]{transform:none}
.chariot-side-rig .chariot-cart img{inset:auto;translate:none;clip-path:none;display:block}
.chariot-side-rig .chariot-cart .chariot-art-driver,.chariot-side-rig .chariot-cart .chariot-art-warrior,
.chariot-side-rig .chariot-cart .chariot-art-horseA,.chariot-side-rig .chariot-cart .chariot-art-horseB,
.chariot-side-rig .chariot-cart .chariot-art-yoke{display:none}
.chariot-side-rig .chariot-cart[data-driver="true"] .chariot-art-driver,
.chariot-side-rig .chariot-cart[data-warrior="true"] .chariot-art-warrior,
.chariot-side-rig .chariot-cart[data-horse-a="true"] .chariot-art-horseA,
.chariot-side-rig .chariot-cart[data-horse-b="true"] .chariot-art-horseB,
.chariot-side-rig .chariot-board[data-horses="2"] .chariot-art-yoke{display:block}
.chariot-side-rig .chariot-art-far{filter:brightness(.82)}
.chariot-reins{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;overflow:visible}
.chariot-reins path{fill:none;stroke:#795039;stroke-width:5;stroke-linecap:round}

/* 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; }
}

/* puzzle-narration.css */
.puzzle-narration{position:absolute;left:4%;right:4%;bottom:72px;padding:10px 145px 10px 16px;background:#fbf2dcf5;border:1px solid #ad9570;border-radius:12px;z-index:12;pointer-events:auto;color:#443322;box-shadow:0 4px 18px #49321e44}.puzzle-narration[hidden]{display:none}.puzzle-narration strong{font:12px sans-serif;text-transform:uppercase}.puzzle-narration p{margin:4px 0;font:18px/1.3 Georgia}.puzzle-narration .btn{position:absolute;right:12px;bottom:10px;min-height:44px}@media(max-height:420px){.puzzle-narration{bottom:62px;padding-top:7px;padding-bottom:7px}.puzzle-narration p{font-size:16px}}

/* qin-puzzles.css */
.qin-puzzle .scene-puzzle-board{inset:66px 3% 60px;background:#cbb487}.qin-puzzle .scene-puzzle-board img{object-fit:contain;pointer-events:none;-webkit-user-drag:none}.qin-puzzle[data-speaking="true"] .scene-puzzle-board{right:48%}.qin-puzzle .puzzle-narration{left:54%;right:3%;top:66px;bottom:60px;padding:12px 14px 62px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.qin-puzzle .puzzle-narration[hidden]{display:none}.qin-puzzle .puzzle-narration p{font-size:clamp(16px,1.7vw,20px)}.qin-puzzle .puzzle-narration .btn{right:14px;bottom:8px}.qin-puzzle header p{max-width:100%}.qin-puzzle .scene-puzzle-tools{bottom:8px;gap:8px}.qin-puzzle .scene-puzzle-tools .btn{min-height:44px}.qin-ram-closeup,.qin-ram-wall{position:absolute;inset:0;overflow:hidden}.qin-ram-closeup-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover!important}.qin-ram-zone{position:absolute;left:30%;right:27%;top:0;bottom:8%;border:2px dashed #fff0a488;border-radius:22px}.qin-ram-tool{position:absolute;left:48%;top:35%;width:70px;height:90px;background:none;border:0;touch-action:none;filter:drop-shadow(3px 7px 3px #33221177)}.qin-ram-tool img{width:100%;height:100%}.qin-ram-crew{position:absolute;right:1%;bottom:0;height:80%;width:27%;object-fit:contain}.qin-ram-tray{position:absolute;left:0;bottom:0;width:28%;top:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(44px,1fr)) 44px;gap:5px;background:#e7d4addd;padding:5px}.qin-ram-piece{min-width:44px;min-height:44px;border:1px solid #8e7346;border-radius:8px;background:#f2e5cbbf;position:relative;padding:2px;touch-action:none;z-index:2}.qin-ram-piece img{width:100%;height:100%;position:absolute;inset:0}.qin-ram-piece.selected{outline:3px solid #9f652c}.qin-ram-piece.placed{opacity:.35}.qin-ram-piece.held{z-index:10;filter:drop-shadow(4px 8px 3px #30201066)}.qin-ram-tray>[data-action="use-material"]{grid-column:1/-1;min-height:44px}.qin-ram-wall{width:min(100%,calc((100vh - 126px)*1.79));margin:auto}.qin-registered-frame,.qin-registered-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.qin-ram-wall{transform:translateY(calc((1 - var(--wall-rise,1))*10%))}.qin-ram-postcard{position:absolute;right:3%;top:8%;width:28%;height:50%;border:3px solid #fff7df;border-radius:14px;background:#eee0c2;padding:3px 3px 32px;font:14px Georgia;color:#3b2c1a;touch-action:none}.qin-ram-postcard img{position:absolute;inset:3px 3px 32px;width:calc(100% - 6px);height:calc(100% - 35px)}.qin-ram-meter{position:absolute;left:35%;bottom:2%;width:25%;height:13px;accent-color:#80532d}.qin-ram-beat{position:absolute;right:2%;top:4%;font:15px Georgia;color:#f9eccb;background:#46301dbb;padding:5px 9px;border-radius:8px}@media(max-height:420px){.qin-puzzle .scene-puzzle-board{top:57px;bottom:56px}.qin-puzzle header h2{font-size:19px}.qin-puzzle header p{font-size:14px}.qin-puzzle .puzzle-narration{top:57px;bottom:56px;padding:5px 10px 52px}.qin-puzzle .puzzle-narration p{font-size:16px;line-height:1.2;margin:3px 0}.qin-ram-tray{gap:3px;padding:3px}.qin-ram-tool{width:55px;height:70px}.qin-ram-wall{width:min(100%,calc((100vh - 113px)*1.79))}}

.qin-map-canvas{position:absolute;inset:0;margin:auto;width:min(100%,calc((100vh - 126px)*1.7916667));height:100%;aspect-ratio:1.7916667;overflow:visible;touch-action:none}.qin-map-base,.qin-map-oldwalls,.qin-map-newwall{position:absolute;inset:0;width:100%;height:100%;object-fit:fill!important}.qin-map-base{z-index:0}.qin-map-oldwalls,.qin-map-newwall{z-index:1}.qin-map-head,.qin-map-banner,.qin-map-observation{position:absolute;transform:translate(-50%,-50%);width:50px;height:50px;min-width:44px;min-height:44px;border:0;touch-action:none;z-index:7;cursor:grab}.qin-map-head{border:3px solid #ffe2a1;border-radius:50%;background:radial-gradient(#ffc66a88,#b5691433);box-shadow:0 0 8px #fff1b8}.qin-map-head.selected{outline:3px solid #633e16}.qin-map-banner,.qin-map-observation{background:transparent;font-size:0}.qin-map-banner img,.qin-map-observation img{width:100%;height:100%}.qin-map-banner.selected{outline:3px solid #c68d3f;border-radius:8px}.qin-map-observation{width:65px;height:55px}.qin-map-observation.found{filter:sepia(.8);opacity:.5}.qin-map-ring{position:absolute;border:3px solid #fff0b1;border-radius:50%;width:100px;height:100px;transform:translate(-50%,-50%);box-shadow:0 0 0 1500px #1b211b88;z-index:5;pointer-events:none}.qin-map-leaders{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}.qin-map-leaders line{stroke:#f7d88b;stroke-width:3;stroke-dasharray:4 4}.qin-map-preview{position:absolute;transform-origin:left center;height:7px;background:#d6b27d88;border:1px solid #fce8b5;z-index:6;pointer-events:none}.qin-map-rider,.qin-map-soldiers{position:absolute;transform:translate(-50%,-80%);height:35px;width:40px;object-fit:contain;z-index:3}.qin-map-soldiers{height:45px;width:55px;z-index:4}.qin-map-count{position:absolute;right:2%;bottom:2%;padding:5px 8px;color:#342919;background:#fff0c9de;font:15px Georgia;border-radius:8px;z-index:9}.qin-map-march,.qin-map-go{position:absolute;left:2%;bottom:2%;min-height:44px;z-index:10}.qin-map-closeup{position:absolute;left:4%;right:50%;top:66px;bottom:60px;z-index:10;background:#d9c49b;pointer-events:none}.qin-map-closeup img{width:100%;height:100%;object-fit:contain}@media(max-height:420px){.qin-map-canvas{width:min(100%,calc((100vh - 113px)*1.7916667))}.qin-map-closeup{top:57px;bottom:56px}.qin-map-head{width:44px;height:44px}.qin-map-count{font-size:14px}.qin-map-observation{width:56px;height:48px}.qin-map-rider{width:34px;height:30px}}

/* The near shot keeps the original image frame. Soil, tool and crew share it. */
.qin-ram-closeup{inset:0;margin:auto;overflow:hidden}.qin-ram-closeup-art{object-fit:fill!important}.qin-ram-soil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.qin-ram-zone{left:32%;right:32%;top:40%;bottom:4%;z-index:4}.qin-ram-tool{left:42.55%;width:14.9%;height:40%;min-width:44px;min-height:44px;padding:0;z-index:6}.qin-ram-crew{left:29.1%;width:41.8%;height:52%;right:auto;bottom:auto;object-fit:fill!important;z-index:3}.qin-ram-tray{z-index:8}.qin-ram-meter,.qin-ram-beat{z-index:9}

.qin-map-farm{position:absolute;width:42px;height:32px;transform:translate(-50%,-50%);z-index:2;transition:opacity .7s}

/* Separate the foreground tool from the rear crew. */
.qin-ram-closeup{overflow:visible}.qin-ram-tool{left:60.55%}.qin-ram-zone{left:58%;right:20%}.qin-ram-crew{width:36.1%;height:45%}

/* Full-width near shot: crop decorative top/bottom, keep every moving object inside. */
.qin-ram-closeup{right:auto;bottom:auto;margin:0}.qin-ram-tool{left:63.16%;width:9.68%;height:26%}.qin-ram-crew{width:25.7%;height:32%}.qin-ram-zone{top:34%;bottom:15%}

/* Extra space is parchment, never a mirrored or invented geographic feature. */
.qin-wallmap .scene-puzzle-board{background:repeating-linear-gradient(7deg,#7567460a 0 1px,transparent 1px 7px),radial-gradient(ellipse at 30% 30%,#e6dcc2,#c6b68f)}

/* Three registered face bands use the same source canvas as the accepted statue. */
.qin-faces .scene-puzzle-board{background:#d9c7a5;overflow:hidden}.qin-faces-editing,.qin-faces-workshop,.qin-faces-pit{position:absolute;inset:0}.qin-faces [hidden]{display:none!important}.qin-faces-editing{display:grid;grid-template-columns:36% 64%;background:radial-gradient(ellipse at 55% 50%,#f1dfbc,#bda37d)}.qin-faces-shelf{display:flex;align-items:center;gap:4%;padding:8%;border-right:2px solid #8e785b}.qin-faces-reference{flex:1;min-width:0;border-bottom:10px solid #816348}.qin-faces-reference svg{display:block;width:100%;filter:drop-shadow(2px 4px 2px #432f1b44)}.qin-faces-work{position:relative;min-width:0}.qin-faces-head{position:absolute;top:0;bottom:48px;left:22%;right:22%;display:flex;align-items:center}.qin-faces-head>svg{width:100%;max-height:100%;filter:drop-shadow(3px 5px 2px #432f1b44)}.qin-faces-bands{position:absolute;left:3%;right:3%;top:8%;bottom:55px;display:flex;flex-direction:column;justify-content:space-around}.qin-face-band{position:relative;height:29%;min-height:44px;display:flex;align-items:center;justify-content:space-between;touch-action:none;outline:none;transform:translateX(var(--swipe,0px));border:1px solid #ffffff22;border-radius:8px;cursor:ew-resize}.qin-face-band.selected{border-color:#9d6f3d88;background:#fff8de11}.qin-face-band>span{position:absolute;left:50px;top:0;font:12px Georgia;color:#59432a;pointer-events:none}.qin-face-band>.btn{height:44px;width:44px;min-width:44px;padding:0;font-size:30px;line-height:1;background:#f6e6c7cc;color:#4d351c;pointer-events:auto}.qin-faces-show{position:absolute;bottom:2px;left:20%;right:20%;min-height:44px}.qin-faces .twin{filter:drop-shadow(0 0 8px #ffbd29);outline:2px solid #ffcf63}.qin-faces-compare{position:absolute;left:6%;top:14%;width:25%;height:75%;background:#f0dbae;box-shadow:0 0 16px #ffdc7c;border-radius:16px;z-index:2}.qin-faces-compare svg{width:100%;height:100%;filter:drop-shadow(0 0 6px #ffbd29)}.qin-faces-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover!important}.qin-faces-figure{position:absolute;height:95%;width:48%;left:18%;bottom:2%;filter:drop-shadow(1px 4px 2px #342b1e55)}.qin-faces-hero{position:absolute;height:56%;width:18%;left:4%;bottom:4%;object-fit:contain}.qin-faces-attach,.qin-faces-carry{position:absolute;right:3%;bottom:5%;min-height:44px;z-index:3}.qin-faces-weapon{position:absolute;right:13%;top:10%;height:65%;width:50px;min-width:44px;min-height:44px;background:#eadcbb66;border:2px solid #a2783e;border-radius:14px;pointer-events:auto}.qin-faces-weapon img{position:absolute;width:calc((100vh - 126px)*.65);height:30px;max-width:none;left:25px;top:50%;transform:translate(-50%,-50%) rotate(90deg)}.qin-faces-pit>.qin-soldier-composition{position:absolute;inset:0;background:#cdb38f}.qin-faces-numbers{position:absolute;left:3%;right:3%;top:2%;text-align:center;pointer-events:none;z-index:2}.qin-faces-numbers p{display:table;max-width:95%;margin:3px auto;padding:5px 9px;background:#1d180de6;border-radius:7px;color:#fff3d2;font:clamp(14px,1.5vw,21px) Georgia;line-height:1.3}.qin-faces[data-speaking="true"] .qin-faces-editing{grid-template-columns:36% 64%}.qin-faces[data-speaking="true"] .qin-faces-show{left:3%;right:3%}.qin-faces[data-speaking="true"] .qin-faces-bands{display:none}.qin-faces[data-speaking="true"] .qin-faces-head{left:8%;right:8%}.qin-faces[data-speaking="true"] .qin-faces-figure{width:70%;left:13%}.qin-faces[data-speaking="true"] .qin-faces-hero{left:0;width:25%}.qin-faces[data-speaking="true"] .qin-faces-attach,.qin-faces[data-speaking="true"] .qin-faces-carry{display:none}@media(max-height:420px){.qin-faces-head{bottom:46px}.qin-faces-bands{top:0;bottom:46px}.qin-face-band>span{font-size:11px}.qin-faces-weapon img{width:calc((100vh - 113px)*.65)}.qin-faces-numbers p{font-size:14px;padding:3px 5px}.qin-faces-shelf{padding:3%}.qin-faces-show{font-size:14px}}

/* Keep the approved assembled statue above the interior image in every shot. */
.qin-faces-background{z-index:0}.qin-faces-figure{z-index:1}.qin-faces-hero{z-index:2}

.qin-faces-new{border-color:#b77b34;background:#ffdd9b66;box-shadow:0 0 8px #f6dc9b}

.qin-timeline .scene-puzzle-board{background:linear-gradient(#303b53 0%,#aa8163 45%,#c5ad86 46%)}.qin-timeline-fire{position:absolute;left:44%;bottom:10%;width:12%;height:40%;opacity:.6;pointer-events:none}.qin-timeline-road{position:absolute;left:2%;right:2%;top:10%;height:35%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;border-bottom:5px solid #756044}.qin-timeline-start,.qin-timeline-end{position:absolute;top:-25px;font:14px Georgia;background:#f0dfbddd;color:#402f19;padding:2px 6px;border-radius:4px}.qin-timeline-start{left:0}.qin-timeline-end{right:0}.qin-timeline-slot{position:relative;min-width:44px;min-height:44px;padding:0;border:2px dashed #efddad;border-radius:8px;background:#e7ce9b55;color:#fff2cc;font:18px Georgia;pointer-events:auto}.qin-timeline-flag{position:absolute;width:30px;height:45px;left:5%;top:-20px;transform-origin:25% 95%;transition:rotate .18s;z-index:1}.qin-timeline-flag.fallen{rotate:75deg}.qin-timeline-tray{position:absolute;left:2%;right:2%;top:52%;bottom:52px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.qin-timeline-card{position:relative;min-width:44px;min-height:44px;padding:6px 5px 6px 34%;font:16px Georgia;line-height:1.15;color:#382b1b;background:#f2dfb5;border:2px solid #8c6a43;border-radius:8px;touch-action:none;pointer-events:auto;box-shadow:1px 3px 2px #49331d66}.qin-timeline-card img{position:absolute;left:1%;top:3%;height:94%;width:31%;object-fit:contain}.qin-timeline-card.held{z-index:15;filter:drop-shadow(2px 4px 3px #24190c)}.qin-timeline-card.selected{outline:3px solid #ffc64b}.qin-timeline-card.placed{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);z-index:2}.qin-timeline-caption{position:absolute;bottom:0;left:2%;right:2%;min-height:40px;margin:0;padding:4px 8px;color:#3a291b;background:#fff1d3ed;border-radius:6px;font:16px Georgia;line-height:1.2}.qin-timeline[data-speaking=true] .qin-timeline-road{top:35%;height:40%}.qin-timeline[data-speaking=true] .qin-timeline-card{font-size:0;padding:0}.qin-timeline[data-speaking=true] .qin-timeline-card img{width:100%;left:0}.qin-timeline[data-phase=closing] .scene-puzzle-board,.qin-timeline[data-phase=solved] .scene-puzzle-board{background:linear-gradient(#eee5c5 0%,#dec092 45%,#c5ad86 46%)}@media(max-height:420px){.qin-timeline-card{font-size:14px;padding:3px 3px 3px 28%}.qin-timeline-card img{width:25%}.qin-timeline-tray{gap:5px;top:50%;bottom:48px}.qin-timeline-caption{font-size:16px;min-height:40px}.qin-timeline-road{gap:5px;height:34%;top:12%}}
/* The player is either whole or absent while the narration narrows this shot. */
.qin-faces[data-speaking=true] .qin-faces-hero{display:none}.qin-faces-numbers{display:flex;justify-content:space-between;align-items:flex-start;gap:5%}.qin-faces-numbers p{max-width:42%;margin:0;font-size:clamp(14px,1.5vw,21px)}

.qin-timeline-destination{width:100%;height:100%;min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;font:inherit;pointer-events:auto}

/* Text cards stay legible in the half-width shot; the accepted fire and potter form the backdrop. */
.qin-timeline .scene-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover!important;filter:brightness(.55)}.qin-timeline-road,.qin-timeline-tray,.qin-timeline-caption{z-index:3}.qin-timeline-road{top:23%;height:29%}.qin-timeline-start,.qin-timeline-end{top:-52px}.qin-timeline-flag{left:calc(50% - 15px);top:-29px;height:28px}.qin-timeline-tray{top:57%;bottom:44px}.qin-timeline-card{padding:6px;font-size:16px;background:#f8e9c9f5}.qin-timeline[data-speaking=true] .qin-timeline-card{font-size:16px;padding:3px}.qin-timeline[data-speaking=true] .qin-timeline-road{top:40%;height:48%}.qin-timeline-potter{position:absolute;bottom:-1%;left:25%;height:60%;width:23%;object-fit:contain;z-index:1}.qin-timeline-fire{left:48%;bottom:-5%;width:35%;height:55%;z-index:2;opacity:1}.qin-timeline[data-speaking=true] .qin-timeline-potter{left:0%;height:80%;width:50%}.qin-timeline[data-speaking=true] .qin-timeline-fire{left:45%;width:50%;height:50%}@media(max-height:420px){.qin-timeline-road{top:24%;height:29%}.qin-timeline-tray{top:57%;bottom:40px}.qin-timeline-card{font-size:14px;padding:4px}.qin-timeline[data-speaking=true] .qin-timeline-card{font-size:14px;padding:2px}.qin-timeline-caption{font-size:16px;min-height:36px}}

.qin-return{position:absolute;inset:0;z-index:4;background:#ad9676;overflow:hidden;pointer-events:none}.qin-return-dust{position:absolute;left:49%;top:18%;width:24px;height:24px;border-radius:50%;background:#a58b5aaa;box-shadow:6px -12px 0 3px #ad926355,-8px -19px 0 #b3956466;animation:qinShoulderDust 1.8s both}.qin-return.wind::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#d7ba7a88,transparent,#b5945766);animation:qinWind 2s infinite alternate}@keyframes qinShoulderDust{from{transform:translateY(-80px);opacity:0}to{transform:translateY(35px);opacity:1}}@keyframes qinWind{to{transform:translateX(8%);opacity:.45}}@media(prefers-reduced-motion:reduce){.qin-return-dust,.qin-return.wind::after{animation:none}}
/* Feather only the artwork; wall ends and every hit target retain their exact geometry. */
.qin-map-base,.qin-map-oldwalls,.qin-map-newwall{mask-image:linear-gradient(to right,transparent,#000 35px,#000 calc(100% - 35px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 35px,#000 calc(100% - 35px),transparent)}

.qin-timeline-potter{height:40%}.qin-timeline-potter[hidden]{display:none}.qin-timeline[data-camp=true] .qin-timeline-road{display:none}.qin-timeline[data-camp=true] .qin-timeline-potter{height:85%;width:38%;left:8%}.qin-timeline[data-camp=true] .qin-timeline-fire{height:60%;width:50%;left:48%}

/* Keep the full heading above the fixed board without changing puzzle geometry. */
.scene-puzzle.qin-puzzle header{top:8px}.scene-puzzle.qin-puzzle header h2{line-height:1.1}.scene-puzzle.qin-puzzle header p{margin:3px 0 0;line-height:1.1}

/* route-gate.css */
.route-gate-roads{position:absolute;inset:0;background:linear-gradient(35deg,transparent 43%,#9a7b4f 44% 49%,transparent 50%),linear-gradient(-35deg,transparent 43%,#a58554 44% 49%,transparent 50%)}.route-gate-lever{position:absolute;left:calc(50% - 38px);top:45%;width:76px;height:60px;border:0;border-radius:50%;background:#8d6035;color:#e5cf9f;font:bold 65px Georgia;line-height:50px;touch-action:none;z-index:3}.route-gate-yard{position:absolute;bottom:6%;left:5%;width:35%;min-height:62px;border:3px solid #886846;border-radius:12px;background:#e5ca90;color:#453221;font:600 16px Georgia}.route-gate-yard[data-yard="tributes"]{left:auto;right:5%}.route-gate-yard:after{content:attr(data-count);display:block;font:22px Georgia}.route-gate-group{position:absolute;left:50%;top:18%;width:150px;margin-left:-75px;text-align:center;transform:translate(calc(var(--cross,0) * -140px),calc(var(--cross,0) * 100px));transition:none;z-index:2}.route-gate-group[data-yard="tributes"]{transform:translate(calc(var(--cross,0) * 140px),calc(var(--cross,0) * 100px))}.route-gate-group[data-returning="true"]{transform:translate(calc(sin(var(--cross,0) * 3.14159) * 45px),0)}.route-gate-group strong{display:block;font:600 16px Georgia}.route-gate-group span{display:block;font:15px Georgia;padding:8px;border-radius:10px;background:#c9aa70}.route-gate-wall{position:absolute;right:0;top:20%;width:100px;height:9px;background:#ae8050}.route-gate-wall[data-built="true"]{height:50px}.route-gate-soldiers{position:absolute;left:5%;top:12%;color:#7e6450;font:bold 22px Georgia}@media(max-height:420px){.route-gate-yard{min-height:55px;font-size:14px;bottom:2%}.route-gate-group{top:4%}.route-gate-lever{top:37%}.route-gate-group strong{font-size:14px}.route-gate-group span{padding:4px}}

.scene-with-art .scene-puzzle-board[data-approach="left"] .route-gate-group{left:38%}.scene-with-art .scene-puzzle-board[data-approach="right"] .route-gate-group{left:62%}

/* scene-puzzle-frame.css */
.scene-puzzle{position:absolute;inset:0;background:#e9ddc4;color:#443322;pointer-events:auto;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.scene-puzzle[hidden],.scene-puzzle [hidden]{display:none!important}.scene-puzzle header{position:absolute;left:4%;top:12px;right:4%;z-index:2;pointer-events:none}.scene-puzzle h2{font:600 clamp(19px,2.7vw,30px) Georgia;margin:0}.scene-puzzle header p{font:16px Georgia;margin:6px 0}.scene-puzzle-board{position:absolute;inset:86px 3% 70px;border-radius:12px;background:linear-gradient(#d1d5bd 0 30%,#d0b381 30% 100%);overflow:hidden}.scene-puzzle-tools{position:absolute;left:4%;right:4%;bottom:12px;display:flex;gap:10px;justify-content:flex-end}.scene-puzzle-tools .btn{min-width:70px;min-height:44px}.scene-puzzle-tools [data-action="later"]{margin-right:auto}.scene-puzzle button{touch-action:none}.scene-puzzle .scene-person{position:absolute;min-width:70px;min-height:90px;border:0;background:transparent;font:14px Georgia;transform:translate(-50%,-50%);color:#382a20}.scene-person:before{content:'';display:block;margin:0 auto 4px;height:50px;width:26px;border-radius:45% 45% 4px 4px;background:var(--robe,#b99157);border:2px solid #705738}.scene-person:after{content:'';position:absolute;left:calc(50% - 10px);top:0;width:20px;height:22px;background:#c2a078;border-radius:50%;border:2px solid #705738}.scene-person:focus-visible{outline:3px solid #bf8732}.scene-person.asked{filter:brightness(.8)}@media(max-height:420px){.scene-puzzle header{top:8px}.scene-puzzle header p{font-size:14px;margin:4px 0}.scene-puzzle-board{inset:65px 3% 63px}.scene-puzzle-tools{bottom:8px}.scene-puzzle-tools .btn{padding:6px 12px}.scene-puzzle .scene-person{min-height:77px}.scene-person:before{height:42px}}
.scene-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.scene-with-art .scene-puzzle-board{background:#dec899}.person-with-art:before,.person-with-art:after{display:none}.person-with-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.scene-with-art .scene-person{height:100px;width:100px;font-size:0}.scene-with-art [data-person="official"],.scene-with-art [data-person="warlord"]{width:120px}.scene-with-art .seek-priest-drum{background:none;border:0}.scene-with-art .seek-priest-drum img{width:100%;height:80px;object-fit:contain;pointer-events:none}.scene-with-art .route-gate-roads{display:none}.scene-with-art .route-gate-lever{background:transparent;color:transparent}.scene-with-art .route-gate-lever img{position:absolute;width:130px;height:30px;object-fit:contain;left:-25px;top:14px;pointer-events:none}.scene-with-art .route-group-art{display:block;width:140px;height:95px;object-fit:contain;margin:auto}.scene-with-art .route-gate-group{top:0;display:flex;flex-direction:column}.scene-with-art .route-gate-group strong{font-size:13px;order:2;background:#f2e3c9e8}.scene-with-art .route-gate-group span{display:none}.scene-with-art .route-gate-wall{background:none;border:none;top:5%;height:65px;width:110px}.route-gate-wall img,.route-gate-soldiers img{width:100%;height:100%;object-fit:contain;pointer-events:none}.scene-with-art .route-gate-soldiers{width:95px;height:60px}.scene-with-art .seek-priest-altar{background:none;border:none;bottom:1%}.scene-with-art .seek-priest-messenger{font-size:0}@media(max-height:420px){.scene-with-art .scene-person{height:77px;width:77px}.scene-with-art [data-person="official"],.scene-with-art [data-person="warlord"]{width:100px}.scene-with-art .route-group-art{height:65px}.scene-with-art .route-gate-group{top:0}.scene-with-art .seek-priest-drum img{height:65px}}

.scene-with-art .scene-person{font-size:0!important}

/* seek-priest.css */
.seek-priest-steps{position:absolute;left:34%;right:34%;top:4%;height:32%;background:linear-gradient(#a68659 0 33%,#b49261 34% 66%,#bf9e6c 67%);clip-path:polygon(30% 0,70% 0,70% 30%,85% 30%,85% 65%,100% 65%,100% 100%,0 100%,0 65%,15% 65%,15% 30%,30% 30%)}.seek-priest-puzzle [data-person="king"]{min-width:72px;min-height:78px;z-index:3}.seek-priest-puzzle [data-person="king"].at-altar{left:56%!important;top:55%!important}.seek-priest-puzzle [data-person="king"].hinted{filter:drop-shadow(0 0 12px #ffe27a);outline:2px solid #d8b141}.seek-priest-altar{position:absolute;left:43%;bottom:8%;width:18%;height:35px;background:#957347;border:5px solid #7c5c3b}.seek-priest-fire{position:absolute;left:25%;top:-28px;width:30px;height:35px;background:#c47932;clip-path:polygon(50% 0,70% 35%,85% 15%,100% 100%,0 100%,10% 40%,25% 65%)}.seek-priest-puzzle .scene-puzzle-board[data-ritual="true"] .seek-priest-fire{height:50px}.seek-priest-smoke{position:absolute;left:20%;bottom:25px;width:45px;height:85px;background:linear-gradient(transparent,#e7dfc4bb);border-radius:50%;display:none}.seek-priest-puzzle .scene-puzzle-board[data-ritual="true"] .seek-priest-smoke{display:block}.seek-priest-drum{position:absolute;left:72%;top:50%;min-width:80px;min-height:72px;border:6px solid #765734;border-radius:50%;background:#d5bd89;color:#53391f;font:bold 17px Georgia;z-index:4}.seek-priest-drum.struck{transform:scale(.94);background:#f3d798}.seek-priest-count{position:absolute;left:75%;bottom:4%;font:22px Georgia}.seek-priest-messenger{left:90%;top:54%;display:none;--robe:#ac8351}.scene-puzzle-board[data-messenger="true"] .seek-priest-messenger{display:block}@media(max-height:420px){.seek-priest-puzzle .scene-person{font-size:12px}.seek-priest-drum{top:45%;min-height:64px}}

.seek-priest-puzzle [data-person="king"]{transition:left .65s ease,top .65s ease}

/* 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}}

.exam-source-text{font:18px/1.45 Georgia;max-width:760px;text-align:left}.exam-source-text p{margin:12px 0}.exam-item-tassel img{height:150px;max-width:150px;object-fit:contain}@media(max-height:420px){.exam-source-text{font-size:15px;line-height:1.3}.exam-source-text p{margin:7px 0}.exam-item-tassel img{height:95px}}

/* Qin2 reward is an image, not a full-size background. Keep both actions in view. */
.exam-item-clay img{display:block;width:140px;height:120px;object-fit:contain;margin:12px auto}.exam-item-clay{max-height:140px}@media(max-height:420px){.exam-item-clay img{width:110px;height:85px;margin:6px auto}.exam-item-clay{max-height:100px}}

/* 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}}

.label-role{margin:12px 0}.label-role-caption:empty{display:none}.label-role-caption{font:16px/1.5 Georgia,serif;margin:0 0 8px}.label-voice-retry{min-height:44px}

@media(max-height:500px){
 .museum-label{padding:12px 18px}
 .museum-label .museum-eyebrow{margin:0;font-size:11px}
 .museum-label h1{font-size:24px;line-height:1.15;margin:4px 0 8px}
 .museum-label .label-exhibit{width:100px;height:54px;margin:2px auto 6px}
 .museum-label .label-role{margin:6px 0}
 .museum-label .label-role-caption{font-size:15px;line-height:1.3}
 .museum-label .label-hint{font-size:14px;margin:6px 0}
 .museum-label fieldset{margin:8px 0;padding-top:6px}
}

.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}

.station-loading{position:absolute;inset:25% 15%;z-index:40;pointer-events:auto;background:#f5e6c9f5;border-radius:14px;padding:30px;font:18px Georgia;color:#4d3b29;text-align:center;box-shadow:0 8px 35px #23180d66}.station-loading button{display:inline-block;margin:18px 6px 0;min-height:44px}

.ms-pull-door{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,#b29a6d,#3c3329 72%);display:flex;flex-direction:column;align-items:center;color:#f4e6c4;z-index:30;overflow:hidden;touch-action:none;user-select:none}.ms-pull-door h1{margin:18px 0 4px;font:600 clamp(23px,4vw,38px) Georgia}.ms-pull-hint{margin:3px 0;font:16px Georgia}.ms-pull-door svg{width:90%;height:calc(100% - 165px);min-height:90px;overflow:visible;touch-action:none;transform:translateX(calc(var(--pull,0) * 12px))}.ms-pull-door .ms-pull-dust{pointer-events:none}.ms-pull-door path{fill:none;stroke-linecap:round;pointer-events:none}.ms-pull-outline{stroke:#4d351e;stroke-width:20px}.ms-pull-glow{stroke:#ffc753aa;stroke-width:15px;filter:drop-shadow(0 0 10px #ffb522)}.ms-pull-core{stroke:#fff1ac;stroke-width:5px}.ms-pull-speech{font:16px/1.3 Georgia;text-align:center;max-width:700px;margin:3px 12px}.ms-pull-status{font:14px Georgia;min-height:18px;margin:0}.ms-pull-door>button{min-height:44px}.ms-pull-door>.ms-alt{position:absolute;top:12px;left:12px}.ms-pull-fallback{position:absolute;bottom:10px;right:16px}.ms-pull-hand{position:absolute;font:44px Georgia;pointer-events:none;z-index:4}.ms-pull-door.departing{background:#d9ba79}.ms-pull-door.departing svg{transform:translateX(110vw);transition:transform .8s ease-in}.ms-pull-door.departing:after{content:'';position:absolute;inset:0;background:#dcc38a;opacity:.88;pointer-events:none}.ms-pull-door [hidden]{display:none!important}@media(max-height:420px){.ms-pull-door h1{margin-top:8px;font-size:23px}.ms-pull-hint{font-size:13px}.ms-pull-door svg{height:calc(100% - 126px)}.ms-pull-speech{font-size:14px}.ms-pull-door>.ms-alt{top:6px;left:6px;font-size:13px;padding:8px}.ms-pull-fallback{bottom:2px}}@media(orientation:portrait){.ms-pull-door h1{margin-top:75px}.ms-pull-door svg{width:96%;height:50%}.ms-pull-speech{margin-top:10px}}

.qin-gate{position:fixed;inset:0;z-index:75;background:#b69c6b;color:#302717;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;justify-items:center;align-content:center;gap:8px;padding:clamp(12px,3vh,30px);text-align:center;pointer-events:auto;font:18px/1.35 Georgia,serif}.qin-gate h1{font-size:clamp(20px,3vw,32px);margin:0}.qin-gate p{margin:0;max-width:700px}.qin-gate-target{min-height:44px;min-width:44px;touch-action:none}.qin-gate-dust .qin-gate-target{position:relative;width:min(32vw,220px);height:100%;max-height:440px;min-height:120px;padding:0;border:0;background:none;box-shadow:none}.qin-gate-target img,.qin-gate-target canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.qin-gate-target canvas{opacity:calc(1 - var(--dust-progress,0)*.7);pointer-events:none}.qin-gate-fire .qin-gate-target{align-self:center;border:0;border-radius:50%;width:140px;height:140px;max-height:30vh;background:radial-gradient(ellipse,#fff3a8 5%,#f4a345 35%,#a7522240 65%,transparent 73%);color:#382614;text-shadow:0 1px #fff1bf;box-shadow:0 0 60px #ffb54a88}.qin-gate-continue .qin-gate-target,.qin-gate-incompatible .qin-gate-target{align-self:center}.qin-gate-opening{opacity:0;transition:opacity .5s}.qin-gate-hand{position:absolute;top:48%;left:55%;font:42px Georgia;pointer-events:none;animation:qin-gate-hand 1.4s ease-in-out infinite}.qin-gate-status{font-size:15px}.qin-gate[hidden],.qin-gate [hidden]{display:none!important}@keyframes qin-gate-hand{50%{transform:translate(-20px,20px)}}@media(max-height:450px){.qin-gate{font-size:15px;gap:4px;padding:10px}.qin-gate h1{font-size:20px}.qin-gate-dust .qin-gate-target{width:110px;max-height:230px}.qin-gate-note{font-size:14px}.qin-gate .ms-btn{padding:8px 12px;min-height:44px}}
.qin-switch-wind{position:fixed;inset:0;z-index:100;background:#b69c6b;display:grid;place-items:center;color:#382614;animation:qin-wind-in .8s ease-in both}@keyframes qin-wind-in{from{opacity:0}to{opacity:1}}

.qin-gate-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.qin-gate-speech:empty,.qin-gate-status:empty{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)}

.scroll-rig[data-oneshot]{animation:none!important}.scroll-rig[data-oneshot] [data-motion]{animation:none!important}.ms-ritual-bone.selected{outline:4px solid #e8b852;filter:drop-shadow(0 0 16px #eab84a)}

/* Focused treasures sit near the centre on short landscape screens. */
@media(max-height:500px){.scroll-controls{left:max(14px,env(safe-area-inset-left));transform:none}}

.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}
.registered-stamp-exhibit{width:190px;max-height:125px;object-fit:contain}.ms-stamp-panel .ms-red-seal img{width:100%;height:100%;object-fit:contain}@media(max-height:420px){.registered-stamp-exhibit{width:125px;max-height:70px}.ms-shang-stamp .ms-seal-button{width:90px;height:90px}.ms-shang-stamp .ms-seal-button img{width:65px;height:65px}}

.ms-registered-stamp .ms-seal-button img{width:90px;height:90px;object-fit:contain;display:block;margin:auto}.ms-registered-stamp .ms-seal-button span{position:static;bottom:auto;left:auto;transform:none;white-space:normal;display:block;color:#4b2f20;font-size:14px;line-height:1.2}
@media(max-height:500px){.museum-shell .ms-registered-stamp{display:grid;grid-template-columns:1fr 130px;grid-template-areas:"title title" "name seal" "level seal" "picture seal";gap:4px;padding:12px 20px;overflow:visible;max-height:calc(100dvh - 24px)}.museum-shell .ms-registered-stamp h1{grid-area:title;font-size:22px;margin:0 0 4px}.museum-shell .ms-registered-stamp .ms-explorer-name{grid-area:name;font-size:26px!important;margin:0!important}.museum-shell .ms-registered-stamp h2{grid-area:level;font-size:18px;line-height:1.1;margin:2px}.ms-registered-stamp .registered-stamp-exhibit{grid-area:picture;justify-self:center;height:70px;width:150px}.museum-shell .ms-registered-stamp .ms-seal-button{grid-area:seal;width:115px;height:115px;align-self:center;margin:0}.ms-registered-stamp .ms-seal-button img{width:65px;height:65px}}

@media(max-height:420px){.ms-registered-stamp[data-level=qin-s2] .registered-stamp-exhibit{height:100px;max-height:100px}.museum-label[data-level=qin-s2] .label-exhibit{height:78px;width:60px}}

/* 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 {min-height:44px;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}

/* Ritual dialogs hide background status text without changing hall loading. */
.museum-shell:has(> .museum-label) :is(.ms-loading-status,.scroll-controls,.scroll-hint),
.museum-shell:has(> .ms-registered-stamp) :is(.ms-loading-status,.scroll-controls,.scroll-hint),
.museum-shell:has(> .ms-level-preview) :is(.ms-loading-status,.scroll-controls,.scroll-hint){visibility:hidden}

/* Return gestures wait for the hall; status is centred in the visible viewport, not the wide segment. */
.museum-shell[data-page=reveal] .scroll-ritual-target>.ms-loading-status{position:fixed;inset:0}

/* 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}
}