:root {
  color-scheme: dark;
  --night: #080d16;
  --gold: #e8d7b5;
  --muted: #b6b4b1;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  color: var(--gold);
  background: var(--night);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { display: flex; justify-content: center; background: #04070c; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { opacity: .42; cursor: default; }
button:focus-visible, .scene:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
button, p, h1, h2, ol { margin: 0; }
[hidden] { display: none !important; }
h1, h2 { font-family: "Songti SC", "STSong", "Noto Serif CJK SC", SimSun, serif; font-weight: 400; }
#app {
  position: relative;
  isolation: isolate;
  width: 100%; max-width: 600px;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--night);
  --beam-radius: 70px;
  --beam-x: 50%; --beam-y: 50%;
}
.ambient { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #111d2c, #080d16 70%); }
.topbar {
  position: absolute; z-index: 8; inset: 0 0 auto;
  height: calc(76px + var(--safe-top));
  padding: var(--safe-top) 18px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  background: linear-gradient(#080d1bef, #080d1680, transparent);
}
.edition { min-width: 0; padding-top: 15px; font-size: 9px; letter-spacing: .1em; line-height: 1.6; }
.top-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.top-controls .quiet-button { padding-inline: 6px; font-size: 11px; white-space: nowrap; }
.volume-control { position: absolute; top: calc(44px + var(--safe-top)); right: 24px; display: flex; align-items: center; gap: 9px; height: 30px; font-size: 9px; color: var(--muted); }
#volume-control { width: 84px; height: 30px; margin: 0; padding: 0; accent-color: var(--gold); cursor: pointer; touch-action: pan-x; }
#volume-control:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.quiet-button { min-width: 44px; min-height: 44px; padding: 8px 10px; border: 0; background: transparent; font-size: 12px; }
.primary-button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 50px; padding: 12px 20px;
  border: 1px solid #e8d7b580; border-radius: 2px;
  background: #e8d7b5; color: #101824; letter-spacing: .05em; line-height: 1.5; text-align: left;
  transition: opacity 160ms ease;
}
.primary-button span { flex: 0 0 auto; font-size: 20px; }
.primary-button:active, .quiet-button:active { opacity: .65; }
.scene-area { position: absolute; inset: calc(76px + var(--safe-top)) 0 calc(78px + var(--safe-bottom)); }
.scene { position: absolute; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Failed or pending assets must not expose partial images beneath the loading cover. */
#app:not(.assets-ready) .scene { visibility: hidden; pointer-events: none; }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* The ceremony uses one transparent product image, never a second room composite. */
.reveal-image { display: none; }
.darkness { position: absolute; z-index: 2; inset: 0; display: none; pointer-events: none; background: rgb(0 0 0 / .82); }
#app[data-state="explore"] .darkness { display: block; }
#app[data-state="explore"].beam-on .darkness,
#app[data-state="explore"] .scene.beam-on .darkness,
#app[data-state="explore"] .darkness.beam-on {
  background: radial-gradient(circle at var(--beam-x) var(--beam-y), transparent 0, rgb(0 0 0 / .06) calc(var(--beam-radius) * .55), rgb(0 0 0 / .82) var(--beam-radius));
}
.targets { position: absolute; z-index: 3; inset: 0; display: none; pointer-events: none; }
#app[data-state="explore"] .targets { display: block; }
.target { position: absolute; border: 1px solid transparent; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.target.near { opacity: .52; background: radial-gradient(ellipse, #e8d7b52b, transparent 65%); }
.target.found { opacity: .85; border-color: #e8d7b580; background: transparent; }
.target.found::after { content: ""; position: absolute; left: 50%; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--gold); }
.target::before { content: ""; position: absolute; inset: -4px; border: 1px solid #e8d7b5a6; border-radius: inherit; opacity: 0; }
.target[data-order="2"]::before { border-width: 2px; }
.target[data-order="3"]::before { border-width: 2px; border-color: var(--gold); }
#app[data-state="explore"] .target.celebrate::before { animation: clue-response 800ms ease-out 1; }
.opening-glint { position: absolute; z-index: 4; left: 79%; top: 47%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #e8d7b5ba, #e8d7b52e 24%, transparent 70%); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
#app[data-state="explore"] .opening-glint.active,
#app[data-state="explore"] .opening-glint.is-active { animation: opening-response 1100ms ease-out 1; }
#scene-response { position: absolute; z-index: 4; left: var(--response-x, 50%); top: var(--response-y, 50%); width: var(--response-size, 110px); height: var(--response-size, 110px); border: 1px solid #e8d7b570; border-radius: 50%; background: radial-gradient(circle, transparent 55%, #e8d7b514 68%, transparent 72%); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
#scene-response[data-level="1"] { --response-size: 100px; }
#scene-response[data-level="2"] { --response-size: 140px; border-color: #e8d7b596; }
#scene-response[data-level="3"] { --response-size: 180px; border-color: #e8d7b5b8; }
#app[data-state="explore"] #scene-response.active,
#app[data-state="explore"] #scene-response.responding,
#app[data-state="explore"] #scene-response.is-active { animation: scene-response 900ms ease-out 1; }
@keyframes clue-response { 0% { opacity: 0; transform: scale(.85); } 20% { opacity: .9; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes opening-response { 0%, 100% { opacity: 0; } 28% { opacity: .75; } }
@keyframes scene-response { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); } 18% { opacity: .7; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
.beam-ring { position: absolute; z-index: 4; left: var(--beam-x); top: var(--beam-y); width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 1px solid #e8d7b56b; border-radius: 50%; pointer-events: none; opacity: 0; }
#app[data-state="explore"].beam-on .beam-ring,
#app[data-state="explore"] .scene.beam-on .beam-ring,
#app[data-state="explore"] .beam-ring.beam-on { opacity: 1; }
.screen { position: absolute; z-index: 5; inset: 0; }
.cover-panel {
  display: flex; flex-direction: column; justify-content: space-between; text-align: center;
  padding: calc(80px + var(--safe-top)) 28px calc(22px + var(--safe-bottom));
  background: linear-gradient(180deg, #080d16c4, #080d1640 48%, #080d16e8 80%, #080d16);
}
.cover-copy { margin-top: clamp(10px, 4vh, 40px); }
.eyebrow { font-size: 9px; letter-spacing: .2em; line-height: 1.8; }
h1 { margin-top: 20px; font-size: clamp(38px, 11vw, 60px); letter-spacing: .13em; text-indent: .13em; line-height: 1.3; }
.english-title { margin-top: 13px; font-size: 8px; letter-spacing: .12em; }
.fine-rule { width: 28px; height: 1px; margin: 24px auto; background: #e8d7b573; }
.cover-subtitle { font-size: 14px; line-height: 1.9; letter-spacing: .1em; }
.cover-bottom { width: 100%; max-width: 340px; margin-inline: auto; }
.load-status { min-height: 32px; padding: 5px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.small-note { margin-top: 12px; font-size: 10px; line-height: 1.7; color: var(--muted); }
.hint-panel { display: flex; align-items: center; justify-content: center; padding: calc(74px + var(--safe-top)) 20px calc(18px + var(--safe-bottom)); background: #050a13b8; }
.panel-card {
  width: 100%; max-width: 390px; max-height: 100%; overflow-y: auto;
  padding: 28px 24px 20px; border: 1px solid #e8d7b530; border-radius: 4px;
  background: #111c2be8; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
h2 { font-size: 26px; line-height: 1.4; }
.panel-card h2 { margin: 14px 0 16px; }
.intro-text { font-size: 13px; line-height: 1.9; color: #dfdacf; }
.clue-list { list-style: none; padding: 18px 0; }
.clue-list li { padding: 10px 0; border-bottom: 1px solid #e8d7b51c; font-size: 13px; }
.clue-list span { margin-right: 16px; font-size: 10px; color: #a6b2c1; }
.hint-detail { margin-bottom: 20px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.panel-card .small-note { text-align: center; }
.explore-panel { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.explore-panel button { pointer-events: auto; }
.progress-card { position: absolute; top: calc(82px + var(--safe-top)); left: 22px; right: 22px; }
.progress-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; letter-spacing: .08em; }
.progress-heading strong { font-size: 22px; font-weight: 400; }
.progress-heading strong span { font-size: 11px; opacity: .6; }
.progress-dots { display: flex; gap: 7px; margin-top: 9px; }
.progress-dots i { display: block; width: 18px; height: 2px; background: #e8d7b530; transition: opacity 160ms ease; }
.progress-dots i.found, .progress-dots i.active { background: var(--gold); }
.explore-bottom { position: absolute; left: 14px; right: 14px; bottom: calc(8px + var(--safe-bottom)); text-align: center; }
#explore-message { min-height: 20px; font-size: 12px; line-height: 1.6; }
.bottom-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.silent-note { font-size: 10px; color: #a8adb4; }
#ceremony-stage { position: absolute; z-index: 5; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; }
#app[data-state="reveal"] #ceremony-stage { visibility: visible; opacity: 1; }
#reveal-veil { position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, #080d1659, #0b1420a6 48%, #080d16d1); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); opacity: 0; transition: opacity 400ms ease; }
#reveal-aura { position: absolute; z-index: 1; inset: calc(128px + var(--safe-top)) 10% calc(240px + var(--safe-bottom)); background: radial-gradient(ellipse, #e8d7b525, #e8d7b50a 42%, transparent 70%); opacity: 0; transition: opacity 400ms ease; }
#reveal-aura::before, #reveal-aura::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #e8d7b573, #e8d7b520 38%, transparent 72%); opacity: 0; transition: opacity 160ms ease; }
#reveal-aura::before { left: 0; top: 35%; transform: translate(-50%, -50%); }
#reveal-aura::after { right: 0; top: 62%; transform: translate(50%, -50%); }
#app[data-state="reveal"][data-reveal-stage="travel"] #reveal-aura.soft-glow-on::before,
#app[data-state="reveal"][data-reveal-stage="travel"] #reveal-aura.soft-glow-on::after { opacity: .65; }
#product-display-zone { position: absolute; z-index: 2; top: calc(128px + var(--safe-top)); bottom: calc(240px + var(--safe-bottom)); left: 20px; right: 20px; pointer-events: none; }
#app[data-reveal-stage="travel"] #product-display-zone,
#app[data-reveal-stage="exit"] #product-display-zone { bottom: calc(150px + var(--safe-bottom)); }
#app[data-reveal-stage="view"] #product-display-zone,
#app[data-reveal-stage="travel"] #reveal-aura,
#app[data-reveal-stage="exit"] #reveal-aura,
#app[data-reveal-stage="view"] #reveal-aura { bottom: calc(90px + var(--safe-bottom)); }
#product-display-zone::after { content: ""; position: absolute; left: 50%; bottom: 5%; width: 120px; max-width: 60%; height: 18px; transform: translateX(-50%); background: radial-gradient(ellipse, #0007, transparent 70%); opacity: 0; }
/* JS owns all product geometry and travel transforms. No image filter or duplicate. */
#product-image { position: absolute; z-index: 3; display: block; max-width: none; object-fit: contain; opacity: 0; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
#reveal-line { position: absolute; z-index: 4; top: calc(86px + var(--safe-top)); left: 24px; right: 24px; text-align: center; font-family: "Songti SC", "STSong", SimSun, serif; font-size: 16px; line-height: 1.7; opacity: 1; transition: opacity 250ms ease; }
#app[data-reveal-stage="gather"] #reveal-veil,
#app[data-reveal-stage="ready"] #reveal-veil { opacity: .3; }
#app[data-reveal-stage="travel"] #reveal-veil,
#app[data-reveal-stage="exit"] #reveal-veil,
#app[data-reveal-stage="result"] #reveal-veil,
#app[data-reveal-stage="view"] #reveal-veil { opacity: 1; }
#app[data-reveal-stage="travel"] #reveal-aura { opacity: .6; }
#app[data-reveal-stage="view"] #reveal-aura,
#app[data-reveal-stage="view"] #product-display-zone::after { opacity: 1; }
#app[data-state="reveal"][data-reveal-stage="ready"] #product-image,
#app[data-state="reveal"][data-reveal-stage="travel"] #product-image,
#app[data-state="reveal"][data-reveal-stage="view"] #product-image { opacity: 1; }
#app[data-reveal-stage="exit"] #product-image,
#app[data-reveal-stage="result"] #product-image { opacity: 0; }
#app[data-reveal-stage="result"] #product-image { visibility: hidden; }
#app[data-reveal-stage="result"] #reveal-line,
#app[data-reveal-stage="view"] #reveal-line { opacity: 0; }
.reveal-panel { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.reveal-heading { position: absolute; top: calc(82px + var(--safe-top)); left: 16px; right: 16px; text-align: center; opacity: 0; transition: opacity 250ms ease; }
#app[data-reveal-stage="result"] .reveal-heading,
#app[data-reveal-stage="view"] .reveal-heading { opacity: 1; }
.reveal-caption { margin-top: 8px; font-size: 12px; line-height: 1.7; }
.result-card {
  position: absolute; bottom: calc(16px + var(--safe-bottom)); left: 20px; right: 20px;
  max-height: 39%; overflow-y: auto; padding: 18px 20px; text-align: center;
  border: 1px solid #e8d7b52b; border-radius: 4px; background: #101b2bea;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  visibility: hidden; opacity: 0; pointer-events: none; touch-action: pan-y; overscroll-behavior: contain; transition: opacity 250ms ease;
}
#app[data-state="reveal"][data-reveal-stage="result"] .result-card { visibility: visible; opacity: 1; pointer-events: auto; }
.holiday-screen { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom)); background:#091320f2; text-align:center; pointer-events:auto; }
.holiday-screen[hidden] { display:none; }
.holiday-screen h2 { color:#eee4cf; font:clamp(29px,8vw,46px)/1.4 "Songti SC","STSong",SimSun,serif; letter-spacing:.12em; }
.holiday-screen button { width:min(100%,300px); }
#brooch-trigger { position: absolute; min-width: 64px; min-height: 64px; padding: 0; border: 1px solid #e8d7b56b; border-radius: 50%; background: transparent; visibility: hidden; pointer-events: none; }
#app[data-state="reveal"][data-reveal-stage="ready"] #brooch-trigger { visibility: visible; pointer-events: auto; }
#brooch-trigger:active { border-color: var(--gold); }
#ceremony-reset { position: absolute; right: 18px; bottom: calc(64px + var(--safe-bottom)); pointer-events: auto; }
#app[data-reveal-stage="result"] #ceremony-reset,
#app[data-reveal-stage="view"] #ceremony-reset { visibility: hidden; pointer-events: none; }
#view-product-button { display: block; width: 100%; margin: 0 0 8px; text-align: center; border-top: 1px solid #e8d7b51c; }
#close-product-button { position: absolute; bottom: calc(32px + var(--safe-bottom)); left: 24px; right: 24px; width: calc(100% - 48px); max-width: 340px; margin-inline: auto; border: 1px solid #e8d7b54d; border-radius: 2px; background: #101b2bf0; visibility: hidden; pointer-events: none; }
#app[data-state="reveal"][data-reveal-stage="view"] #close-product-button { visibility: visible; pointer-events: auto; }
.result-label { color: var(--muted); font-size: 10px; letter-spacing: .15em; }
#result-title { margin-top: 6px; font-size: 28px; letter-spacing: .08em; }
#result-copy { margin-top: 7px; font-size: 12px; line-height: 1.7; }
.product-caption { margin: 9px 0 14px; color: #a7adb6; font-size: 9px; line-height: 1.6; }
.result-card .primary-button { min-height: 44px; padding-block: 9px; font-size: 13px; }
.orientation-panel, .noscript { position: absolute; z-index: 30; inset: 0; padding: 24px; background: #080d16f7; text-align: center; touch-action: none; }
.orientation-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; }
.orientation-panel > span { font-size: 38px; }
.orientation-panel p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.noscript { display: grid; place-items: center; line-height: 1.8; }
#app.low-power .panel-card, #app.low-power .result-card { background: #111c2bf5; }
#app.low-power *, #app.low-power *::before, #app.low-power *::after, #app[data-motion="reduce"] * { animation: none !important; }
#app.low-power * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
#app.low-power #reveal-aura { background: radial-gradient(ellipse, #e8d7b514, transparent 68%); }
#app.low-power[data-state="explore"].beam-on .darkness,
#app.low-power[data-state="explore"] .scene.beam-on .darkness,
#app.low-power[data-state="explore"] .darkness.beam-on {
  background: radial-gradient(circle at var(--beam-x) var(--beam-y), transparent 0, transparent calc(var(--beam-radius) * .72), rgb(0 0 0 / .82) var(--beam-radius));
}
#app[data-motion="reduce"] *, #app[data-motion="reduce"] *::before, #app[data-motion="reduce"] *::after { transition: none !important; animation: none !important; }
#app[data-motion="reduce"] .target.celebrate::before,
#app.low-power .target.celebrate::before { opacity: .45; }
#app[data-motion="reduce"] .opening-glint.active,
#app[data-motion="reduce"] .opening-glint.is-active,
#app.low-power .opening-glint.active,
#app.low-power .opening-glint.is-active { opacity: .5; }
#app[data-motion="reduce"] #scene-response.active,
#app[data-motion="reduce"] #scene-response.responding,
#app[data-motion="reduce"] #scene-response.is-active,
#app.low-power #scene-response.active,
#app.low-power #scene-response.responding,
#app.low-power #scene-response.is-active { opacity: .45; transform: translate(-50%, -50%); }
#app[data-motion="reduce"] #reveal-aura::before,
#app[data-motion="reduce"] #reveal-aura::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  #app .target.celebrate::before { opacity: .45; }
  #app .opening-glint.active, #app .opening-glint.is-active { opacity: .5; }
  #app #scene-response.active, #app #scene-response.responding, #app #scene-response.is-active { opacity: .45; transform: translate(-50%, -50%); }
  #app #reveal-aura::before, #app #reveal-aura::after { display: none; }
}
@media (max-width: 359px), (max-height: 649px) {
  :root { font-size: 14px; }
  .topbar { padding-inline: 12px; }
  .edition { font-size: 8px; letter-spacing: .09em; }
  .quiet-button { font-size: 11px; padding-inline: 8px; }
  .top-controls { gap: 0; }
  .top-controls .quiet-button { font-size: 10px; padding-inline: 5px; }
  .volume-control { right: 17px; gap: 7px; }
  .cover-panel { padding: calc(72px + var(--safe-top)) 22px calc(14px + var(--safe-bottom)); }
  .cover-copy { margin-top: 4px; }
  h1 { margin-top: 10px; font-size: 37px; }
  .english-title { font-size: 7px; margin-top: 8px; }
  .fine-rule { margin: 14px auto; }
  .cover-subtitle { font-size: 12px; }
  .small-note { margin-top: 8px; font-size: 9px; }
  .hint-panel { padding-inline: 14px; }
  .panel-card { padding: 19px 18px 14px; }
  .panel-card h2 { font-size: 23px; margin: 10px 0; }
  .clue-list { padding-block: 10px; }
  .clue-list li { padding-block: 7px; }
  .hint-detail { margin-bottom: 12px; }
  .result-card { left: 14px; right: 14px; padding: 12px 16px; bottom: calc(10px + var(--safe-bottom)); max-height: 40%; }
  #result-title { font-size: 24px; }
  #result-copy { font-size: 11px; margin-top: 5px; }
  .product-caption { margin: 6px 0 9px; }
  .result-card .primary-button { font-size: 12px; padding-inline: 12px; letter-spacing: .02em; }
  #product-display-zone, #reveal-aura { top: calc(110px + var(--safe-top)); bottom: calc(220px + var(--safe-bottom)); }
  #reveal-line { top: calc(80px + var(--safe-top)); font-size: 14px; line-height: 1.7; }
  .reveal-heading { top: calc(78px + var(--safe-top)); }
  .reveal-caption { margin-top: 3px; font-size: 11px; }
}
@media (orientation: landscape) {
  .orientation-panel { padding: calc(12px + var(--safe-top)) 24px calc(12px + var(--safe-bottom)); gap: 8px; }
  .orientation-panel > span { font-size: 28px; }
  .orientation-panel h2 { font-size: 24px; }
}

/* v0.2.1: the entry blocks interaction until scene coordinates settle. */
#app[data-entering="true"] #hint-panel { opacity: 0; pointer-events: none; }
#app[data-reveal-stage="gathering"] .targets { display: block; }
.voice-subtitle { position: absolute; z-index: 18; bottom: calc(82px + var(--safe-bottom)); left: 18px; right: 18px; width: fit-content; max-width: calc(100% - 36px); margin-inline: auto; padding: 8px 12px; color: #f1f4fa; background: #080d16e8; border: 1px solid #d8e3f32b; border-radius: 5px; font-size: 13px; line-height: 1.6; text-align: center; pointer-events: none; }
.voice-note { position: absolute; z-index: 12; bottom: calc(2px + var(--safe-bottom)); left: 0; right: 0; margin: 0; font-size: 8px; text-align: center; color: #acb8c4; pointer-events: none; }
#app[data-state="cover"] .voice-note { bottom: calc(4px + var(--safe-bottom)); }
#app[data-reveal-stage="result"] .voice-subtitle { bottom: auto; top: calc(142px + var(--safe-top)); }
#app[data-state="hint"] .voice-subtitle { bottom: calc(20px + var(--safe-bottom)); }
#app[data-entering="true"] .voice-subtitle { bottom: calc(82px + var(--safe-bottom)); }
#app[data-reveal-stage="travel"] #reveal-aura { background: radial-gradient(ellipse, #dce9ff25, #dce9ff0a 42%, transparent 70%); }
@media (max-width: 359px) { .voice-subtitle { font-size: 12px; left: 12px; right: 12px; max-width: calc(100% - 24px); } }

/* Controller's film-title signature: separate editable type, never a generated logo. */
.brand-signature { position: absolute; top: calc(20px + var(--safe-top)); left: 50%; transform: translateX(-50%); white-space: nowrap; color: #e5ebf2; font: 20px/1.25 "Songti SC", "STSong", SimSun, serif; letter-spacing: .2em; text-indent: .2em; opacity: 0; transition: opacity .5s ease; }
.assets-ready .brand-signature { opacity: 1; }
#app[data-reveal-stage="travel"] .brand-signature, #app[data-reveal-stage="exit"] .brand-signature { opacity: .85; }
.topbar { height: calc(88px + var(--safe-top)); }
.top-controls { position: absolute; top: calc(44px + var(--safe-top)); right: 12px; }
.volume-control { left: 18px; right: auto; top: calc(50px + var(--safe-top)); }
.scene-area { top: calc(88px + var(--safe-top)); }
.progress-card { top: calc(94px + var(--safe-top)); }
@media (max-width: 359px) { .brand-signature { font-size: 18px; } .volume-control { left: 12px; } }

#app[data-state="cover"] .brand-signature, #app[data-closing="true"][data-reveal-stage="result"] .brand-signature { opacity: 0; }
#cover-title { font-size: clamp(34px, 10vw, 48px); letter-spacing: .09em; text-indent: .09em; }
.english-title { font-size: 12px; letter-spacing: .12em; }
.brand-ending { margin: 10px 0 13px; color: #e5ebf2; font: 14px/1.7 "Songti SC", "STSong", SimSun, serif; }
#app[data-closing="true"] .result-card { max-height: 47%; }
@media (max-width: 359px), (max-height: 649px) { .brand-ending { font-size: 12px; line-height: 1.6; margin: 8px 0; } #app[data-closing="true"] .result-card { max-height: 52%; } }

#start-label { font-size: inherit; flex: 1 1 auto; }
#app[data-voice-key^="find"] #explore-message { visibility: hidden; }
.credits-link { position:absolute; bottom:calc(2px + var(--safe-bottom)); left:12px; z-index:24; font-size:9px; color:#afbed1; line-height:16px; padding:2px 0; }
.voice-toggle { display:block; margin:3px auto 0; min-height:32px; font-size:11px; color:#b7c5d6; }

/* v0.2.2: show.js owns discovery/cover choreography; prevent duplicate old rings. */
#scene-response, .opening-glint { display: none; }

/* v0.2.3 hold collection: readable progress, no spinning or flashing requirement. */
.beam-ring { z-index:6; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-color: #f2e6cbe6; background: #08111c80; box-shadow: 0 0 0 1px #06101bcc; }
.beam-ring::before, .beam-ring::after { content: ""; position:absolute; left:50%; top:50%; background:#f7ecd6; transform:translate(-50%,-50%); }
.beam-ring::before { width:9px; height:1px; }
.beam-ring::after { width:1px; height:9px; }
.charge-ring { position:absolute; z-index:5; pointer-events:none; left:var(--beam-x); top:var(--beam-y); width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; background:#07101cbd; }
.charge-ring svg { width:60px; height:60px; transform:rotate(-90deg); overflow:visible; }
.charge-ring circle { fill:none; stroke-width:3px; }
.charge-track { stroke:#e9e1c43b; }
#charge-progress { stroke:#f4e3ac; stroke-dasharray:100; stroke-dashoffset:100; stroke-linecap:round; }
#charge-percent { position:absolute; left:50%; top:100%; transform:translateX(-50%); padding:1px 5px; border-radius:6px; background:#07101ce8; font-size:11px; line-height:15px; font-variant-numeric:tabular-nums; color:#fff2cb; }
.charge-grace #charge-progress { stroke:#b9cadb; }
.charge-label { display:inline-block; padding:6px 12px; margin:0 auto 5px; background:#07101ce8; color:#f5e9c7; border:1px solid #c9d9e34d; border-radius:20px; font-size:13px; line-height:1.35; }
.collection-confirmation { display:none; }
.target.collected-flash .collection-confirmation { display:grid; place-items:center; position:absolute; width:28px; height:28px; left:100%; top:0; margin:-14px 0 0 0; border:1px solid #eaf3ff; border-radius:50%; color:#fff2ca; background:#14283eea; font-size:20px; opacity:1; }
#app[data-state="reveal"][data-reveal-stage="gathering"] .targets { display:block; }
@media (max-height:650px) { .charge-label { font-size:11px; padding:4px 9px; margin-bottom:2px; } }

/* v0.2.4: three scene-bound, noninteractive visual cues. The scene owns input. */
#app[data-state="explore"] .target[data-target] {
  opacity: .42;
  border: 0;
  background: transparent;
}
#app[data-state="explore"] .target[data-target].near { opacity: .95; }
#app[data-state="explore"] .target[data-target].found { opacity: 1; border: 0; background: transparent; }
.target[data-target]::after { display: none; }
.mechanism-art, .mechanism-art::before, .mechanism-art::after { position: absolute; display: block; pointer-events: none; content: ""; }
.mechanism-art { left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 280ms ease, opacity 200ms ease, filter 280ms ease; }
/* A narrow aged-metal catch sits along the photographed window mullion. */
.target[data-target="H1"] .mechanism-art {
  width: 9px; height: 25px; border-radius: 45% 45% 38% 38%; transform: translate(-50%, -50%) rotate(-4deg);
  background: linear-gradient(90deg,#15191c 0%,#8b806b 28%,#c0b8a2 44%,#514c43 70%,#1c2023 100%);
  border: 1px solid #665f52; box-shadow: 1px 2px 2px #030507d9, inset 0 1px 2px #c6c0ab70;
}
.target[data-target="H1"] .mechanism-art::before { left: 2px; top: 9px; width: 13px; height: 3px; border-radius: 3px 7px 7px 3px; transform: rotate(-17deg); transform-origin: 2px 50%; background: linear-gradient(#c1b9a4,#554d3f 55%,#181a1c); box-shadow: 0 1px 2px #000b; }
.target[data-target="H1"] .mechanism-art::after { left: 2px; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: #1a1d1d; box-shadow: 0 16px 0 #1a1d1d, 1px 0 0 #d2c7a0a0; }
.target[data-target="H1"].found .mechanism-art { transform: translate(-50%, -50%) rotate(19deg); filter: drop-shadow(0 0 4px #c7d9e580); }
.target[data-target="H1"].found { background: radial-gradient(ellipse, #c9e4ff42, transparent 72%); }
/* The paw is a moonlit mark on the floor, not a moving replacement for the cat. */
.target[data-target="H2"] .mechanism-art {
  width: 27px; height: 23px; transform: translate(-50%, -50%) rotate(-12deg);
  background: radial-gradient(ellipse 25% 22% at 50% 68%, #d9e6f2df 92%, transparent 100%),
    radial-gradient(ellipse 11% 16% at 18% 37%, #d9e6f2df 92%, transparent 100%),
    radial-gradient(ellipse 11% 17% at 39% 20%, #d9e6f2df 92%, transparent 100%),
    radial-gradient(ellipse 11% 17% at 65% 22%, #d9e6f2df 92%, transparent 100%),
    radial-gradient(ellipse 10% 15% at 84% 41%, #d9e6f2df 92%, transparent 100%);
  filter: drop-shadow(0 0 4px #cde6ffb8);
}
.target[data-target="H2"].found .mechanism-art { transform: translate(-50%, -50%) rotate(-12deg) scale(.8); filter: drop-shadow(0 0 7px #d9edff); }
.target[data-target="H2"].found { background: radial-gradient(ellipse, #c9e4ff38, transparent 70%); }
/* A movable-looking shadow over velvet; no pretend fabric fold or altered image. */
.target[data-target="H3"] .mechanism-art {
  width: 34px; height: 17px; border-radius: 50%; transform: translate(-50%, -50%) rotate(-16deg);
  background: radial-gradient(ellipse at 56% 48%, #a8c2df80 0, #263649a8 30%, #060c19d4 62%, transparent 76%);
  box-shadow: 0 0 8px #b6d3ee36;
}
.target[data-target="H3"].found .mechanism-art {
  transform: translate(-37%, -52%) rotate(-16deg);
  background: radial-gradient(ellipse at 43% 48%, #edf5ffe8 0, #adc5dd9a 16%, #1d2a3d80 50%, transparent 75%);
  box-shadow: 0 0 11px #d9edff80;
}
@media (prefers-reduced-motion: reduce) { .mechanism-art { transition: none; } }
#app[data-motion="reduce"] .mechanism-art, #app.low-power .mechanism-art { transition: none; }

/* v0.3 local candidate: door and prince are independent, replaceable visual layers. */
.door-visual { position:absolute; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(ellipse at 50% 43%,#5b526c 0%,#171922 45%,#080b11 90%); }
#door-art { position:absolute; width:100%; height:100%; object-fit:cover; opacity:0; }
#door-art[src] { opacity:1; }
.door-fallback { position:absolute; inset:5% 8% 0; display:flex; filter:drop-shadow(0 0 25px #e4d0a926); }
.door-fallback::before { content:""; position:absolute; inset:0; border:6px solid #6b5949; border-radius:48% 48% 0 0 / 15% 15% 0 0; box-shadow:inset 0 0 0 5px #1d1b21,0 0 0 3px #201b20; }
.door-fallback i { width:50%; background:linear-gradient(90deg,#14171e,#36343b 48%,#14151c); border:2px solid #55483e; border-radius:46% 0 0 0 / 14% 0 0 0; box-shadow:inset 0 0 35px #08090edb; }
.door-fallback i:last-child { transform:scaleX(-1); }
.door-fallback i::after { content:""; display:block; width:52%; height:68%; margin:20% auto; border:2px solid #75665770; border-radius:42% 42% 2% 2% / 10% 10% 2% 2%; box-shadow:inset 0 0 0 3px #191a20; }
.prince-stage { position:absolute; z-index:6; inset:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; background:radial-gradient(ellipse at 50% 55%,#9bb2d33d,transparent 55%),linear-gradient(#0a10155e,#080c15cb); }
#app[data-state="reveal"][data-reveal-stage="prince"] .prince-stage { visibility:visible; opacity:1; }
#prince-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
#prince-art[src] { opacity:1; }
.prince-cat-shadow { position:absolute; width:30%; height:12%; left:35%; top:60%; border-radius:50%; background:#10111be8; filter:blur(2px); animation:cat-to-shadow 2.8s ease-out both; }
.prince-cat-shadow::before,.prince-cat-shadow::after { content:""; position:absolute; top:-14%; width:28%; height:40%; background:#10111b; clip-path:polygon(0 100%,45% 0,100% 100%); }
.prince-cat-shadow::before { left:10%; } .prince-cat-shadow::after { right:10%; }
.prince-silhouette { position:absolute; width:34%; height:56%; top:18%; left:33%; opacity:0; filter:drop-shadow(0 0 12px #c2d5ef45); transform-origin:50% 100%; animation:prince-appear 2.8s ease both; }
.prince-silhouette span { position:absolute; display:block; background:linear-gradient(115deg,#111824,#313c4a 60%,#0c111a); }
.prince-head { width:22%; height:17%; left:38%; top:0; border-radius:45% 55% 43% 42%; }
.prince-body { width:38%; height:43%; left:31%; top:14%; border-radius:28% 30% 12% 12%; transform:rotate(4deg); }
.prince-coat { width:57%; height:50%; left:19%; top:50%; clip-path:polygon(32% 0,69% 0,100% 100%,0 100%); }
.prince-arm { width:62%; height:8%; left:52%; top:34%; border-radius:25px; transform:rotate(17deg); transform-origin:left; }
.skip-prince { position:absolute; z-index:9; right:18px; bottom:calc(110px + var(--safe-bottom)); pointer-events:auto; }
@keyframes cat-to-shadow { 0%{opacity:.9;transform:translate(-50%,-50%) scale(1)} 35%{opacity:.7;transform:translate(-50%,-50%) scaleX(.65) scaleY(2)} 60%,100%{opacity:0;transform:translate(-50%,-50%) scaleX(.45) scaleY(3)} }
@keyframes prince-appear { 0%,25%{opacity:0;transform:translateY(3%) scale(.94)} 48%,76%{opacity:.95;transform:translateY(0) scale(1)} 85%{opacity:.95;transform:rotate(3deg)} 100%{opacity:0;transform:rotate(3deg)} }
#app[data-motion="reduce"] .prince-cat-shadow { animation:none; opacity:0; }
#app[data-motion="reduce"] .prince-silhouette { animation:none; opacity:.85; }
#app.low-power .prince-cat-shadow,#app.low-power .prince-silhouette { filter:none; }
.door-visual { z-index:0; }
.door-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#080d1666,#080d1622 50%,#080d16cf 87%,#080d16); }
.cover-copy, .cover-bottom { position:relative; z-index:1; }
.door-fallback { display:none; }
/* The authored RGBA prince is an independent non-product overlay. */
#app[data-state="reveal"][data-reveal-stage="ready"] .prince-stage { visibility:visible; opacity:1; background:transparent; }
.prince-stage::before { content:""; position:absolute; z-index:0; left:var(--cat-x,82%); top:var(--cat-y,55%); width:clamp(60px,22vw,110px); height:clamp(80px,26vw,135px); transform:translate(-50%,-50%); background:radial-gradient(ellipse,#0b111a 24%,#0b111add 48%,transparent 76%); }
.prince-cat-shadow { z-index:1; left:var(--cat-x,82%); top:var(--cat-y,55%); width:15%; height:8%; transform:translate(-50%,-50%); animation:cat-to-shadow 2.2s ease-out both; }
.prince-silhouette { display:none; }
#prince-art { z-index:2; inset:auto; width:min(84%, 460px); height:68%; left:50%; top:14%; object-fit:contain; transform:translateX(-50%); opacity:0; animation:prince-image-show 2.2s ease both; }
#app[data-reveal-stage="ready"] #prince-art { animation:none; opacity:0; }
@keyframes prince-image-show { 0%,20%{opacity:0;transform:translateX(-46%) scale(.94)} 43%,72%{opacity:1;transform:translateX(-50%) scale(1)} 100%{opacity:0;transform:translateX(-52%) scale(1)} }
#app[data-motion="reduce"] #prince-art { animation:none; opacity:1; }
#app[data-motion="reduce"][data-reveal-stage="ready"] #prince-art { opacity:0; }
/* Explicit inset avoids a replaced element's static-position offset inside flex cover. */
#door-art { inset:0; object-position:center center; }
/* Fade the existing cat under the shadow rather than removing it instantly. */
#app[data-reveal-stage="prince"] .prince-stage::before { animation:cat-conceal 2.2s ease both; }
#app[data-reveal-stage="ready"] .prince-stage::before { animation:none; opacity:1; }
@keyframes cat-conceal { 0%,12% { opacity:0; } 40%,100% { opacity:1; } }
#app[data-motion="reduce"][data-reveal-stage="prince"] .prince-stage::before { animation:none; opacity:1; }
/* Position the portrait in the room coordinate system; feet meet the cat's floor. */
.prince-stage::before { width:var(--cat-w,100px); height:var(--cat-h,120px); }
.prince-cat-shadow { width:calc(var(--cat-w,100px) * .6); height:calc(var(--cat-h,120px) * .35); }
#prince-art { left:var(--prince-x,76%); top:var(--prince-top,17%); height:var(--prince-h,40%); width:auto; aspect-ratio:1024 / 1536; }
.prince-stage::after { content:""; position:absolute; z-index:1; left:var(--foot-x,84%); top:var(--foot-y,57%); width:var(--foot-w,70px); height:14px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(ellipse,#02050bb0,transparent 72%); opacity:0; animation:prince-ground 2.2s ease both; }
#app[data-reveal-stage="ready"] .prince-stage::after { animation:none; opacity:0; }
@keyframes prince-ground { 0%,20%{opacity:0} 43%,72%{opacity:1} 100%{opacity:0} }
#app[data-motion="reduce"][data-reveal-stage="prince"] .prince-stage::after { animation:none; opacity:1; }

/* The aligned no-cat patch persists from the transformation until replay. */
.clean-room-image { opacity:0; clip-path:inset(40.67% 0 39.05% 71.19%); transition:opacity 350ms ease; }
#app[data-clean-room="true"] .clean-room-image { opacity:1; }
#app[data-motion="reduce"] .clean-room-image { transition:none; }
/* The real clean plate replaces the former opaque radial cat cover. */
.prince-stage::before { display:none; }

/* Ambient light remains behind the real product; it never filters its pixels. */
#app[data-reveal-stage="travel"] #reveal-aura, #app[data-reveal-stage="view"] #reveal-aura {
  background: radial-gradient(ellipse at center, transparent 35%, #d6e8fb65 46%, #a6c7e83a 52%, transparent 65%),
    radial-gradient(ellipse at center, #f4f7ff16 0%, #b8d1f120 30%, #829fc51a 48%, transparent 72%);
}
#app[data-reveal-stage="travel"] #reveal-aura { opacity:.82; animation:ambient-ring-drift 8s ease-in-out infinite; }
@keyframes ambient-ring-drift { 0%,100% { opacity:.70; transform:scale(.985); } 50% { opacity:.88; transform:scale(1.015); } }
#app[data-motion="reduce"][data-reveal-stage="travel"] #reveal-aura,
#app[data-motion="reduce"][data-reveal-stage="view"] #reveal-aura,
#app.low-power[data-reveal-stage="travel"] #reveal-aura,
#app.low-power[data-reveal-stage="view"] #reveal-aura { animation:none !important; opacity:.72; }
#app[data-reveal-stage="travel"] #reveal-aura.soft-glow-on::before,
#app[data-reveal-stage="travel"] #reveal-aura.soft-glow-on::after {
  width:24px; height:24px; background:radial-gradient(circle,#f5f7ff90 0%,#d7e7ff3a 22%,transparent 68%);
  animation:gentle-reveal-glimmer 4.8s ease-in-out infinite; opacity:.48;
}
#app[data-reveal-stage="travel"] #reveal-aura.soft-glow-on::after { animation-delay:-2.2s; }
@keyframes gentle-reveal-glimmer { 0%,100% { opacity:.28; transform:translate(0,0) scale(.9); } 50% { opacity:.58; transform:translate(0,-7px) scale(1.1); } }
#app[data-motion="reduce"] #reveal-aura::before, #app[data-motion="reduce"] #reveal-aura::after,
#app.low-power #reveal-aura::before, #app.low-power #reveal-aura::after { display:none; animation:none; }

/* v0.3.3 optional door vignette; intrinsic plane matches door-art object-fit:cover. */
.door-hook-plane { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; overflow:hidden; opacity:0; }
.door-hook-run, .door-hook-still { opacity:1; }
.door-hook-light { position:absolute; left:45.7%; top:35%; width:10%; height:41%; opacity:0; background:radial-gradient(ellipse at center,#cce8ff69,transparent 72%); filter:blur(8px); }
.door-hook-run .door-hook-light { animation:door-moonlight 1.6s ease-out both; }
.door-hook-mask { position:absolute; inset:0; clip-path:inset(0 0 0 46.75%); }
.door-hook-cat { position:absolute; width:20%; aspect-ratio:543 / 724; left:47.5%; bottom:25.5%; filter:drop-shadow(1px 4px 3px #030610b0); }
.door-hook-sprite { position:absolute; inset:0; background-image:url('assets/cinema/cat-door-sprite.png'); background-repeat:no-repeat; background-size:400% 100%; background-position:0 0; transform:scaleX(-1); }
.door-hook-run .door-hook-cat { animation:door-cat-walk 1.3s .3s ease-in both; }
.door-hook-run .door-hook-sprite { animation:door-cat-poses 1.3s .3s steps(1,end) both; }
.door-hook-still .door-hook-light { opacity:.35; }
.door-hook-still .door-hook-cat { left:43%; }
.door-hook-still .door-hook-sprite { background-position:100% 0; }
@keyframes door-moonlight { 0% { opacity:.15; } 19% { opacity:.75; } 100% { opacity:.35; } }
/* Begin already at the jamb. Hold briefly, then let the stationary jamb hide
   the front and the tail in turn: half the former screen-space translation. */
@keyframes door-cat-walk { 0%,25% { transform:translateX(0); opacity:1; } 76% { opacity:1; } 100% { transform:translateX(-104%); opacity:0; } }
@keyframes door-cat-poses { 0%,24% { background-position:33.333% 0; clip-path:polygon(0 0,100% 0,100% 70%,94% 70%,94% 100%,0 100%); } 25%,54% { background-position:0 0; clip-path:polygon(0 0,100% 0,100% 70%,94% 70%,94% 100%,0 100%); } 55%,79% { background-position:33.333% 0; clip-path:polygon(0 0,100% 0,100% 70%,94% 70%,94% 100%,0 100%); } 80%,100% { background-position:100% 0; clip-path:none; } }
/* The cover has a real cat now. Keep paw-shaped effects in exploration only. */
#app[data-state="cover"] .game-show .show-paw { display:none; }
/* Once loaded, retain the status for assistive technology without covering the cat.
   Pending and error messages remain visible because assets-ready is removed on load. */
#app.assets-ready[data-state="cover"] #load-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }