:root { color-scheme: light; font-family: "KaiTi", "STKaiti", "Songti SC", serif; color: #394758; background: #9692a6; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.stage { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #9692a6; }
.scene, .scene-ui, #weather, #petals, #rain, #foreground { position: absolute; inset: 0; pointer-events: none; }
.scene { overflow: hidden; }
.world { position: absolute; transform-origin: 50% 34%; }
.art { position: absolute; display: block; width: 100%; height: auto; top: 0; left: 0; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.background { transform-origin: 49% 36%; }
#scene-two { opacity: 0; }
.transition-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#scene-two .background { transform-origin: 53% 37%; }
#local-haze { opacity: 0; z-index: 2; }
#local-haze .art { transform: translate(-23%, 14%) scale(.86); }
#weather { z-index: 3; opacity: 0; visibility: hidden; transition: opacity .65s ease; }
#weather[data-active="true"] { opacity: 1; visibility: visible; }
.weather-layer { will-change: transform, opacity; }
#foreground { z-index: 4; }
.branch { transform-origin: 0 0; }
.crown-left { mask-image: linear-gradient(to right, #000 44%, transparent 57%); -webkit-mask-image: linear-gradient(to right, #000 44%, transparent 57%); }
.crown-right { mask-image: linear-gradient(to right, transparent 43%, #000 56%); -webkit-mask-image: linear-gradient(to right, transparent 43%, #000 56%); }
.stage[data-state="transition"] .branch, .stage[data-state="transition"] .background { will-change: transform; }
.scene-ui { z-index: 5; }
#ui-two { opacity: 0; }
#road-scene { z-index: 4; opacity: 0; visibility: hidden; background: #6c7480; transition: opacity .65s ease, visibility .65s; }
#road-scene.visible { opacity: 1; visibility: visible; }
.road-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.road-canvas[hidden] { display: none; }
#ui-three { pointer-events: none; }
#ui-three .observe { border-radius: 35%; }
#water-moon-scene { z-index: 4; visibility: hidden; background: #7e94a4; }
#water-moon-scene.visible { visibility: visible; }
#ui-four .observe { border-radius: 40%; }
#ui-four .ink { filter: none; text-shadow: none; background: none; }
#sky-tree-scene { z-index: 4; visibility: hidden; background: #7a91ad; }
#sky-tree-scene.visible { visibility: visible; }
#ui-five .ink { filter: none; text-shadow: none; background: none; }
#ui-five .observe { border-radius: 35%; }
.stage[data-state^="act5-"] #scene-hint, .stage[data-state^="act5-"] #restart,
.stage[data-state^="sky-"] #scene-hint, .stage[data-state^="sky-"] #restart { text-shadow: none; }
.sprite { position: absolute; overflow: hidden; pointer-events: none; }
.sprite img { position: absolute; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }
.ink { opacity: 0; transition: opacity .5s ease; }
.ink.visible { opacity: 1; }
.stage[data-state="act2-choose"] #question-two, .stage[data-state="act2-choose"] #choices-two { transition-duration: .18s; }
.opening { width: min(56vw, 720px); left: 50%; top: 48%; transform: translate(-50%, -50%); }
.guide { width: clamp(180px, 27vw, 340px); left: 4%; top: max(5%, env(safe-area-inset-top)); }
.observation { width: clamp(250px, 31vw, 430px); }
.rain-note { left: 7%; top: 29%; }
.petal-note { right: 7%; bottom: 15%; }
.choices-first { width: clamp(285px, 40vw, 570px); left: 50%; top: 48%; transform: translate(-50%, -50%); }
.first-feedback { width: clamp(255px, 37vw, 510px); left: 50%; top: 72%; transform: translate(-50%, -50%); }
.path-detail { width: clamp(285px, 36vw, 485px); }
.frost-note { left: 7%; top: 13%; }
.mist-note { right: 5%; bottom: 17%; }
.question-second { width: clamp(280px, 43vw, 610px); left: 50%; top: 37%; transform: translate(-50%, -50%); }
.choices-second { width: clamp(295px, 62vw, 810px); left: 50%; top: 52%; transform: translate(-50%, -50%); }
.path-feedback { width: clamp(290px, 55vw, 720px); left: 50%; top: 48%; transform: translate(-50%, -50%); }
.hotspot { position: absolute; padding: 0; border: 0; background: transparent; color: transparent; cursor: pointer; pointer-events: auto; min-width: 44px; min-height: 44px; }
.hotspot:disabled { visibility: hidden; pointer-events: none; }
.hotspot:focus-visible { outline: 2px solid #eee6f2; outline-offset: -3px; }
.hotspot.choice { border-radius: 12%; }
.hotspot.choice:hover { box-shadow: inset 0 0 0 1px #e8dfe960; }
.enter-region, .continue-region { inset: 0; width: 100%; height: 100%; }
.enter-region span { position: absolute; bottom: 11%; left: 0; width: 100%; text-align: center; color: #354052; font-size: 17px; letter-spacing: .18em; text-shadow: 0 1px 12px #e3dce3; }
#scene-hint { z-index: 6; pointer-events: none; position: absolute; margin: 0; right: max(5%, env(safe-area-inset-right)); bottom: max(5%, env(safe-area-inset-bottom)); font-size: 17px; letter-spacing: .09em; color: #29374b; text-shadow: 0 1px 7px #eee3ee, 0 0 15px #ddd4e2; opacity: 0; transition: opacity .4s; }
#scene-hint.visible { opacity: 1; }
.stage[data-state^="act3-"] #scene-hint, .stage[data-state^="act3-"] #restart { text-shadow: none; }
.stage[data-state^="act4-"] #scene-hint, .stage[data-state^="act4-"] #restart { text-shadow: none; }
.stage[data-state^="act4-"] #scene-hint { color: #354e61; }
#restart { position: absolute; z-index: 7; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; background: transparent; color: #36435b; text-shadow: 0 1px 8px #e9dfed; font-size: 29px; cursor: pointer; }
#loading { position: absolute; inset: 0; z-index: 8; background: #e9e6eb; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; letter-spacing: .2em; transition: opacity .6s; }
#loading.finished { opacity: 0; pointer-events: none; }
#loading small { font-size: 12px; letter-spacing: .08em; }
#retry { padding: 10px 20px; background: transparent; color: inherit; border: 1px solid #8a8698; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-aspect-ratio: 3/4) {
  .opening { width: 90%; top: 45%; }
  .guide { width: 215px; left: 5%; top: 8%; }
  .observation { width: 81%; }
  .rain-note { left: 6%; top: 30%; }
  .petal-note { right: 6%; bottom: 17%; }
  .choices-first { width: 86%; top: 47%; }
  .first-feedback { width: 86%; top: 68%; }
  .path-detail { width: 84%; }
  .frost-note { left: 6%; top: 9%; }
  .mist-note { right: 5%; bottom: 19%; }
  .question-second { width: 88%; top: 39%; }
  .choices-second { width: 91%; top: 51%; }
  .path-feedback { width: 92%; }
  #scene-hint { font-size: 16px; right: 6%; bottom: 6%; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .guide { width: 200px; }
  .observation { width: 250px; }
  .path-detail { width: 280px; }
  .choices-first { width: 300px; }
  .first-feedback { width: 300px; }
  .question-second { width: 340px; }
  .choices-second { width: 490px; }
  #scene-hint { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ink, #loading, #scene-hint { transition-duration: .15s; } }

/* The new bookends are independent overlays; existing scene styling is unchanged. */
[hidden] { display: none !important; }
#cover-scene { position: absolute; inset: 0; z-index: 7; background: #8d899b; }
.cover-entry { inset: 0; width: 100%; height: 100%; }
.cover-entry img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#cover-mobile-art, .cover-mobile-title { display: none; }
.cover-mobile-title { position: absolute; width: 84%; max-width: 420px; left: 50%; top: 62%; transform: translate(-50%, -50%); pointer-events: none; }
#cover-title { position: relative; width: 100%; }
.cover-entry .sprite img { height: auto; object-fit: initial; }
#orientation-hint { display: block; margin-top: 16px; color: #344151; font-size: 12px; line-height: 1.6; letter-spacing: .08em; text-align: center; }
.well-feedback { pointer-events: none; }
.cover-entry span { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 0; width: 100%; color: #f0e8ef; font-size: 16px; letter-spacing: .2em; text-shadow: 0 1px 8px #364151; pointer-events: none; }
#personality-result { position: absolute; inset: 0; z-index: 7; overflow: hidden; background: #6c7480; outline: none; animation: result-appear .7s ease both; }
.result-content { position: absolute; inset: 0; text-align: center; }
.card-frame { position: absolute; inset: 0; }
#result-card { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
#result-card.card-visible { opacity: 1; }
#result-status { position: absolute; left: 16px; right: 16px; bottom: max(68px, calc(env(safe-area-inset-bottom) + 56px)); margin: 0; font-size: 13px; color: #f4edf5; text-shadow: 0 1px 4px #263044; }
#result-status:empty { display: none; }
.result-actions { position: absolute; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 4px; }
.result-actions button { min-width: 44px; min-height: 44px; padding: 6px 10px; border: 8px solid transparent; border-radius: 10px; background: #30344d40; background-clip: padding-box; color: #f5eef4; opacity: .65; font-size: 12px; line-height: 16px; cursor: pointer; letter-spacing: .06em; text-shadow: 0 1px 3px #26304480; transition: opacity .2s ease; }
.result-actions button:hover, .result-actions button:focus-visible { opacity: 1; }
.result-actions button:focus-visible { outline: 1px solid #eee6f2; outline-offset: -4px; }
.result-actions button:disabled { opacity: .35; cursor: wait; }
@keyframes result-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #personality-result { animation-duration: .15s; } #result-card { transition-duration: .15s; } }

/* The supplied title is independent of the background's portrait crop. */
@media (max-width: 900px) and (orientation: portrait) {
  #cover-art { display: none; }
  #cover-mobile-art, .cover-mobile-title { display: block; }
  #cover-mobile-art { position: absolute; inset: 0; }
  .cover-entry span { font-size: 13px; }
}
/* Touch devices keep every edge of the card and reserve space for controls. */
@media (max-width: 600px), (pointer: coarse) {
  #personality-result { background: linear-gradient(to bottom, var(--card-top, #8d899b) 0%, var(--card-top, #8d899b) 50%, var(--card-bottom, #8d899b) 50%, var(--card-bottom, #8d899b) 100%); }
  .card-frame { inset: env(safe-area-inset-top) env(safe-area-inset-right) calc(64px + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
  #result-card { object-fit: contain; }
}