:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #47382a; background: #916a48; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { overscroll-behavior: none; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #5c3b1e; outline-offset: 5px; box-shadow: 0 0 0 7px #f5e8cbba; }
[hidden] { display: none !important; }
#room { position: relative; width: 100%; height: 100%; height: 100dvh; isolation: isolate; overflow: hidden; }
#plates, .plate, .plate img, canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#plates { z-index: -2; }
.plate { object-fit: cover; object-position: left 30%; pointer-events: none; }
.plate img { object-fit: cover; object-position: left 30%; }
canvas { pointer-events: none; }
#rain { z-index: -1; }
#bell { position: absolute; pointer-events: none; overflow: visible; }
#chime-hanger, #chime-paper { transform-box: view-box; }
#chime-hanger { transform-origin: 50px 0; }
#chime-paper { transform-origin: 50px 148px; }
.incense-target { position: absolute; width: 64px; min-height: 64px; background: transparent; border-radius: 25px; transform: translate(-50%, -50%); touch-action: manipulation; }
.incense-target:focus-visible { outline-color: #f3dfb6; box-shadow: 0 0 0 4px #64421f; }
/* Keep interactive panels above transformed scene layers and their hit areas. */
#settings, #welcome { z-index: 10; }
#settings-toggle { z-index: 11; }
body.settings-open .incense-target { pointer-events: none; }
body.settings-open .match-target { pointer-events: none; }
.match-target, .match-target:disabled { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .65s ease-out 1s; touch-action: manipulation; }
.match-target.is-available { opacity: 1; pointer-events: auto; transition: none; }
.match-target:disabled { pointer-events: none; }
.match-target:focus-visible { outline: 2px solid #ead9bd; outline-offset: -3px; box-shadow: none; }
#match-wood { display: block; height: auto; pointer-events: none; }
#invitation { position: absolute; margin: 0; transform: translate(-50%, 0); color: #fff5e4; text-shadow: 0 1px 9px #4a3019, 0 1px 3px #4a3019; font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 17px; letter-spacing: .2em; white-space: nowrap; pointer-events: none; opacity: 1; transition: opacity 1.8s; }
#invitation.leaving { opacity: 0; }
.welcome { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 20px); right: calc(env(safe-area-inset-right, 0px) + 20px); width: 224px; max-width: calc(100% - 40px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); padding: 4px 12px 8px; background: #f4ebdccc; border-radius: 4px; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; }
.welcome h1 { font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 14px; font-weight: 400; letter-spacing: .08em; margin: 0; }
#close-welcome { width: 44px; height: 44px; margin-right: -8px; background: transparent; font-size: 21px; color: #73624e; }
.welcome .companions { gap: 8px; }
.welcome .companions button { min-height: 44px; padding: 0; border: 0; }
.welcome .companions span { margin: 0; font-size: 13px; }
.companions { display: flex; gap: 12px; }
.companions button { flex: 1; min-width: 0; padding: 0 0 9px; background: transparent; border: 1px solid #8a755444; border-radius: 3px; overflow: hidden; transition: background .3s, border-color .3s; }
.companions button:hover, .companions button[aria-pressed="true"] { border-color: #7d5830; background: #dcc9a94d; }
.companions img { display: block; width: 100%; height: 91px; object-fit: cover; object-position: 15% 50%; }
.companions span { display: block; margin-top: 10px; font-size: 13px; letter-spacing: .04em; }
.quiet-button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; min-width: 48px; background: #f7eddbd9; border: 1px solid #faf0dc63; border-radius: 50%; box-shadow: 0 2px 15px #56351713; backdrop-filter: blur(8px); }
.settings-toggle { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); background: #f7eddb99; border: 0; border-radius: 50%; box-shadow: none; touch-action: manipulation; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.settings-gear { width: 22px; height: 22px; fill: none; stroke: #47382ab3; stroke-width: 1.5; stroke-linejoin: round; pointer-events: none; }
.settings-toggle:focus-visible { outline: 2px solid #ead9bd; outline-offset: -5px; box-shadow: none; }
.settings-toggle:focus-visible .settings-gear { stroke: #47382ab3; }
@media (hover: hover) {
  .settings-toggle:hover .settings-gear { stroke: #47382a99; }
}
.settings { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); width: 300px; max-height: calc(100% - 108px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 16px; background: #f7efdfF5; border: 1px solid #fff8e6a8; box-shadow: 0 8px 45px #321b1929; border-radius: 7px; backdrop-filter: blur(16px); }
.panel-top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; letter-spacing: .1em; margin: -6px -10px 4px 0; }
.panel-top button { width: 44px; height: 44px; font-size: 25px; font-weight: 300; background: transparent; }
.compact { gap: 12px; }
.compact img { height: 62px; }
.compact span { font-size: 12px; margin-top: 7px; }
.controls { border-top: 1px solid #9d815629; margin-top: 17px; padding-top: 10px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-size: 13px; gap: 15px; }
input[type="range"] { width: 124px; height: 32px; margin: 0; accent-color: #816342; cursor: pointer; }
input[role="switch"] { appearance: none; position: relative; width: 35px; height: 21px; margin: 10px 0; border-radius: 15px; border: 1px solid #a38c71; background: #c5b5a0; cursor: pointer; }
input[role="switch"]::after { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; top: 2px; left: 2px; background: #fff7e9; box-shadow: 0 1px 2px #604e3a44; }
input[role="switch"]:checked { background: #816342; border-color: #816342; }
input[role="switch"]:checked::after { left: 16px; }
.panel-actions { display: flex; gap: 10px; margin-top: 12px; border-top: 1px solid #9d815629; padding-top: 15px; }
.panel-actions button { flex: 1; min-height: 44px; background: #e8dcc6; border-radius: 3px; font-size: 13px; }
.panel-actions button:hover { background: #decdb0; }
footer { display: flex; justify-content: space-between; margin-top: 17px; font-size: 11px; color: #73624e; }
footer a { color: inherit; text-underline-offset: 3px; padding: 5px 0; margin-top: -5px; }
#retry-scene { position: absolute; top: 18px; right: 18px; font-size: 23px; }
.noscript { position: fixed; bottom: 24px; left: 24px; }
@media (orientation: portrait) {
  .compact img { height: 62px; }
  .settings { width: min(300px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
  #invitation { font-size: 15px; letter-spacing: .12em; }
}
body.reduced *, body.paused * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { body:not(.motion-override) * { transition: none !important; } }

/* Pointer access returns when the scene is touched; keyboard focus reveals it too. */
.settings-toggle.is-visible, .settings-toggle:focus-visible, body.settings-open .settings-toggle { opacity: 1; pointer-events: auto; }