#wolong-intro { color-scheme: light; --ink: #35332c; --gold: #aa8752; font-family: "STKaiti", "KaiTi", serif; }
#wolong-intro * { box-sizing: border-box; }
#titlebg[hidden], #wolong-intro [hidden] { display: none; }
#titlebg { display: contents; pointer-events: none; }
#wolong-intro::before { content: ""; position: fixed; inset: 0; background: #fff; z-index: 49; }
#wolong-intro #scene-footer, #wolong-intro #load-status { position: fixed; }
#wolong-intro #load-status { z-index: 55; }
#wolong-intro #sound-toggle, #wolong-intro #replay-button, #wolong-intro #skip-button { position: fixed; }
#wolong-intro #scene { z-index: 50; }
#wolong-intro #scene-footer { z-index: 55; }
#wolong-intro #sound-toggle, #wolong-intro #replay-button, #wolong-intro #skip-button { z-index: 80; pointer-events: auto; }
#wolong-intro { display: contents; }
#scene { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform: scale(var(--scene-scale, 1)); overflow: hidden; opacity: 0; transform-origin: left top; user-select: none; }
#scene.is-loaded { opacity: 1; }
.art { display: block; position: absolute; max-width: none; pointer-events: none; }
#landscape { left: 409px; top: 0; width: 1510px; height: auto; will-change: transform, opacity; }
#foreground { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
#cliff { left: -25px; top: 0; width: 1362px; height: auto; }
#character { left: 324px; top: -90px; width: 320px; height: auto; }
#game-title { left: 32px; top: 22px; width: 304px; height: auto; opacity: 0; }
#subtitle { position: absolute; margin: 0; writing-mode: vertical-rl; text-orientation: upright; line-height: 1.1; white-space: nowrap; opacity: 0; }
#menu-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; transition: opacity 600ms ease; }
#menu-layer.is-ready { opacity: 1; }
#menu-layer.is-ready > * { pointer-events: auto; }
.wolong-menu { position: absolute; left: 60%; top: 43%; display: grid; gap: 22px; }
.wolong-menu button, .wolong-menu a { appearance: none; display: block; border: none; border-bottom: 1px solid transparent; padding: 12px 24px; color: var(--ink); font: inherit; font-size: 28px; letter-spacing: .22em; background: rgba(255,255,255,.65); text-decoration: none; cursor: pointer; }
.wolong-menu button:hover, .wolong-menu a:hover { border-bottom-color: var(--gold); }
#wolong-intro :focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
#scene-footer { position: absolute; left: 50%; bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); transform: translateX(-50%); z-index: 15; width: 80%; padding: 6px 11px; border-radius: 5px; background: rgba(255,255,255,.72); color: #000; text-align: center; font: 12px/1.4 "Microsoft YaHei", "PingFang SC", sans-serif; opacity: 0; pointer-events: none; }
#scene-footer.is-visible { pointer-events: auto; }
#scene-footer p { margin: 0; overflow-wrap: anywhere; }
#footer-text { white-space: pre-wrap; }
@media (max-width: 600px) { #scene-footer { padding: 5px 7px; font-size: 12px; line-height: 1.35; } }
#load-status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: min(320px, calc(100vw - 48px)); color: #807969; font: 14px/1.6 "Microsoft YaHei", sans-serif; text-align: center; }
#load-label { margin: 0 0 12px; }
#load-progress { display: block; width: 100%; height: 16px; accent-color: #4a7828; }
#start-opening { margin-top: 18px; padding: 8px 20px; border: 1px solid #aa8752; border-radius: 4px; background: #fff; color: #35332c; font: inherit; cursor: pointer; pointer-events: auto; }
#sound-toggle { position: absolute; right: max(20px, env(safe-area-inset-right)); top: max(20px, env(safe-area-inset-top)); z-index: 20; width: 40px; height: 40px; padding: 10px; border: 1px solid #a59a8038; border-radius: 50%; background: #ffffffb8; color: #76684e; cursor: pointer; opacity: .6; transition: opacity 180ms; }
#sound-toggle:hover, #sound-toggle:focus-visible { opacity: 1; }
#sound-toggle svg, #replay-button svg, #skip-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#sound-toggle[data-enabled="true"] .sound-slash { display: none; }
#sound-toggle[data-waiting="true"] { opacity: 1; border-style: dashed; }
#sound-hint { position: absolute; right: 49px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 13px "STKaiti", "KaiTi", serif; color: #76684e; padding: 6px 9px; background: #ffffffd9; border-radius: 4px; }
#replay-button, #skip-button { position: absolute; right: max(20px, env(safe-area-inset-right)); top: calc(max(20px, env(safe-area-inset-top)) + 50px); z-index: 20; width: 40px; height: 40px; padding: 10px; border: 1px solid #a59a8038; border-radius: 50%; background: #ffffffb8; color: #76684e; cursor: pointer; opacity: .6; transition: opacity 180ms; }
#skip-button { top: calc(max(20px, env(safe-area-inset-top)) + 100px); }
#replay-button:hover, #replay-button:focus-visible, #skip-button:hover, #skip-button:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #menu-layer, #sound-toggle, #replay-button, #skip-button { transition: none; } }