:root {
  color-scheme: dark;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  color: #fff7e9;
  background: #211710;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #f4d095; outline-offset: 4px; }
button:disabled { cursor: default; opacity: .48; }
[hidden] { display: none !important; }
.temple { position: relative; isolation: isolate; width: 100%; height: 100dvh; min-height: 400px; overflow: hidden; }
.scene, .hall, .scene-shade, .people { position: absolute; inset: 0; }
.scene { z-index: 0; }
.hall-art { --hall-width: max(100%, 150dvh, 600px); position: absolute; left: 50%; top: 50%; width: calc(var(--hall-width) * var(--hall-zoom, 1)); aspect-ratio: 3 / 2; transform: translate(-50%, -50%) translateY(var(--hall-shift, 0px)); }
.hall img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.scene-shade {
  background: linear-gradient(to bottom, rgba(21, 13, 9, .54), transparent 22%, transparent 64%, rgba(19, 12, 8, .72) 100%);
  pointer-events: none;
}
.masthead { position: absolute; z-index: 20; top: max(20px, env(safe-area-inset-top)); left: clamp(22px, 4vw, 60px); right: clamp(22px, 4vw, 60px); display: flex; justify-content: space-between; align-items: start; gap: 24px; text-shadow: 0 1px 8px #100b08; }
.identity { display: flex; flex: none; align-items: baseline; gap: 16px; }
.site-brand { display: inline-flex; align-items: center; min-height: 44px; color: #f1e4d0; font-family: Georgia, serif; font-size: 14px; opacity: .8; }
.identity h1 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .12em; }
.header-controls { display: flex; flex-direction: column; align-items: flex-end; }
.mode-switch { display: flex; align-items: center; gap: 11px; color: #e7ddce; }
.mode-switch button, .shared-actions button, .sit { border: 0; background: transparent; padding: 8px 2px; }
.mode-switch button { min-width: 44px; min-height: 44px; font-size: 15px; opacity: .73; }
.mode-switch button[aria-pressed="true"] { color: #fff6e8; opacity: 1; }
.mode-switch button[aria-pressed="true"]::after { content: ""; display: block; height: 1px; background: #e7b278; margin-top: 6px; }
.mode-switch > span { opacity: .55; }
.controls { position: absolute; z-index: 20; left: 50%; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)); width: min(92%, 400px); transform: translateX(-50%); text-align: center; text-shadow: 0 1px 9px #1b100b, 0 2px 12px #1b100b; pointer-events: none; }
.temple[data-mode="shared"] .controls { display: flex; flex-direction: column; }
.temple[data-mode="shared"] .actions { order: 1; }
.controls button { pointer-events: auto; }
.presence { min-height: 1.4em; margin: 0 0 13px; font-size: 14px; letter-spacing: .1em; color: #f1e2cd; }
.presence:empty { display: none; }
.actions { display: flex; align-items: center; justify-content: center; gap: 18px; }
.temple[data-awaiting-seat="true"] .actions { display: none; }
.offer { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; color: #fff7e8; background: rgba(49, 29, 19, .8); border: 1px solid rgba(234, 197, 145, .72); border-radius: 999px; box-shadow: 0 5px 24px rgba(10, 6, 4, .24); letter-spacing: .1em; }
.offer:hover:not(:disabled) { background: rgba(88, 49, 29, .9); border-color: #f6d9a7; }
.offer svg { width: 20px; height: 20px; stroke: #f3d6a8; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.sit { min-width: 48px; min-height: 48px; font-size: 15px; color: #fff5e5; letter-spacing: .08em; }
.sit:hover:not(:disabled), .shared-actions button:hover { color: #f9d39c; }
.shared-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0 8px; color: #ead8c1; font-size: 13px; }
.shared-actions button { min-height: 44px; }
.shared-actions span { opacity: .6; }
.incense-guidance { position: absolute; left: 50%; bottom: calc(100% + 18px); width: min(94vw, 44rem); margin: 0; transform: translateX(-50%); color: rgba(255, 249, 238, .86); font-family: "STFangsong", "FangSong", "Songti SC", "Noto Serif CJK SC", serif; font-size: clamp(20px, 2vw, 28px); font-weight: 300; letter-spacing: .05em; line-height: 1.8; text-align: center; text-shadow: 0 2px 3px rgba(23, 13, 8, .8), 0 0 10px rgba(23, 13, 8, .75), 0 0 22px rgba(23, 13, 8, .7); pointer-events: none; animation: guidance-appear .6s ease-out; transition: opacity .6s ease; }
.incense-guidance span { display: inline-block; white-space: nowrap; }
.incense-guidance.is-leaving { opacity: 0; }
@keyframes guidance-appear { from { opacity: 0; } to { opacity: 1; } }
.notice { margin: 5px 0 0; color: #ffddb3; font-size: 13px; }
.notice:empty { display: none; }
#retry-shared { align-self: center; padding-inline: 12px; }
.seat-hint { margin: 3px 0 0; color: #f7e5c9; font-size: 14px; line-height: 1.5; }
.people { pointer-events: none; }
.visitor-motion { position: absolute; inset: 0; pointer-events: none; }
.visitor-motion img { position: absolute; }
.seat { --seat-size: clamp(150px, 14vw, 210px); --seat-scale: var(--scale); --cushion-width: 82%; --step-side: var(--wide-step-side); position: absolute; left: var(--x); top: var(--y); width: calc(var(--seat-size) * var(--seat-scale) * var(--seat-fit, 1)); aspect-ratio: 1.2; transform: translate(-50%, -100%); }
.temple[data-mode="shared"] .seat { --cushion-width: 50%; }
.cushion-choice { position: absolute; left: 50%; bottom: calc(var(--cushion-width) * .4 - 5%); width: max(44px, var(--cushion-width)); height: max(44px, calc(var(--cushion-width) * .66)); transform: translate(-50%, 50%); padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: auto; }
.cushion-choice:hover { box-shadow: 0 0 8px rgba(246, 224, 187, .55); }
.cushion-choice:focus-visible { outline: 2px solid #f4d095; outline-offset: 0; }
.seat::before { content: ""; position: absolute; left: 50%; bottom: 0; width: calc(var(--cushion-width) * .88); height: 13%; transform: translateX(-50%); border-radius: 50%; background: rgba(27, 18, 13, .5); filter: blur(6px); }
.cushion { position: absolute; width: var(--cushion-width); left: 50%; bottom: -5%; transform: translateX(-50%); filter: brightness(.78) saturate(.85) drop-shadow(0 3px 3px rgba(19, 12, 8, .4)); }
.visitor { position: absolute; width: 96%; left: 2%; bottom: 8%; filter: drop-shadow(0 4px 5px rgba(19, 12, 8, .3)); }
.seat[data-self="true"] .visitor { filter: drop-shadow(0 0 3px rgba(255, 255, 248, .8)) drop-shadow(0 0 10px rgba(255, 255, 244, .55)) drop-shadow(0 4px 5px rgba(19, 12, 8, .3)); }
.seat:not(.standing) .visitor[data-appearance="5"] { transform: scale(1.15); transform-origin: center bottom; }
.seat.standing .visitor { height: 210%; width: auto; left: 50%; bottom: 4%; transform: translateX(-50%); }
/* Match the cushion's visible depth and allow for transparent pixels under the shoes. */
.seat.standing:not(.waiting) { --standing-bottom: calc(var(--cushion-width) * .66 - 7% + 5px); }
.seat.standing:not(.waiting) .visitor { bottom: var(--standing-bottom); }
.seat.standing:not(.waiting)::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(var(--standing-bottom) + 4%); width: 29%; height: 5.5%; transform: translate(-50%, 50%); border-radius: 50%; background: rgba(25, 16, 10, .66); filter: blur(3px); }
.seat[data-posture="praying"] .visitor { transform: translateX(-50%) scaleX(calc(-1 * var(--step-side))); }
.incense { position: absolute; left: 50%; bottom: var(--incense-bottom-wide, 43.55%); width: clamp(3px, .3%, 5px); height: 6.25%; transform: translateX(-50%); opacity: 0; transition: opacity 1s ease; }
.incense[data-incense="burning"] { opacity: 1; }
.incense-stick { position: absolute; bottom: 0; left: 0; height: var(--remaining, 100%); width: 100%; border-radius: 2px; background: linear-gradient(90deg, #743b20, #d89a61 40%, #9b5731 75%, #65321d); box-shadow: 0 0 2px rgba(255, 190, 120, .25); }
.incense-ember { position: absolute; left: 50%; bottom: calc(var(--remaining, 100%) - 3px); width: calc(100% + 3px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #ffc18a; box-shadow: 0 0 5px 2px #df602b; animation: ember 3.8s ease-in-out infinite; }
.smoke { position: absolute; width: 76px; height: 150px; left: 50%; bottom: var(--remaining, 100%); object-fit: fill; transform: translateX(-50%); transform-origin: center bottom; opacity: .5; mask-image: linear-gradient(transparent, #000 28%); animation: drift 7.5s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(calc(-50% - 3px)) skewX(-5deg); opacity: .4; } to { transform: translateX(calc(-50% + 4px)) skewX(5deg); opacity: .6; } }
@keyframes ember { 0%, 100% { opacity: .8; box-shadow: 0 0 4px 1px #d95824; } 28%, 72% { opacity: 1; box-shadow: 0 0 8px 3px #ed6c2c; } 48% { opacity: .7; box-shadow: 0 0 3px 1px #c84d20; } }
dialog { width: min(88vw, 360px); max-height: 90dvh; overflow-y: auto; padding: 25px 28px 23px; color: #f5e8d6; background: #302118; border: 1px solid rgba(225, 189, 144, .45); border-radius: 8px; box-shadow: 0 18px 70px rgba(0, 0, 0, .5); }
dialog::backdrop { background: rgba(22, 14, 9, .55); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; }
.dialog-top h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: .1em; }
.dialog-top button { border: 0; background: none; font-size: 26px; line-height: 1; padding: 4px; }
#about-dialog .dialog-top button { min-width: 44px; min-height: 44px; }
dialog p { margin: 15px 0; color: #d9c5ae; font-size: 14px; line-height: 1.6; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.dialog-actions button[value="confirm"] { color: #fff6e8; border-color: rgba(234, 197, 145, .55); background: #503421; }
.dialog-actions button:hover { color: #ffdfb6; background: #5b3d29; }
.room-list { display: grid; max-height: min(60dvh, 480px); margin-top: 15px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid rgba(225, 189, 144, .25); }
.room-list button { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 6px 5px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid rgba(225, 189, 144, .25); letter-spacing: .08em; }
.room-list button[aria-current="true"]::after { content: "当前"; color: #d2ad84; font-size: 13px; }
.room-list button:focus-visible { outline-offset: -2px; }
.room-list button:hover { color: #f7c995; }
.appearance-genders, .appearance-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.appearance-list { margin-top: 12px; }
.appearance-genders button, .appearance-list button { color: #f5e8d6; background: rgba(255, 244, 225, .04); border: 1px solid rgba(225, 189, 144, .2); border-radius: 5px; }
.appearance-genders button { min-height: 44px; }
.appearance-list button { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 5px; min-width: 0; min-height: 120px; padding: 5px 3px 8px; font-size: 13px; }
.appearance-genders button[aria-pressed="true"], .appearance-list button[aria-pressed="true"] { border-color: #e7c18e; background: rgba(231, 193, 142, .13); }
.appearance-genders button:hover, .appearance-list button:hover { background: rgba(231, 193, 142, .1); }
.appearance-list img { width: 100%; height: 82px; object-fit: contain; }
dialog .room-message { margin: 10px 0 0; min-height: 1.4em; color: #f1c79b; }
dialog .room-message:empty { margin: 0; min-height: 0; }
.share-fallback label { display: block; margin-bottom: 8px; font-size: 13px; }
.share-fallback input { width: 100%; padding: 10px; color: #fff5e5; background: #1f1611; border: 1px solid #987657; border-radius: 3px; }
.no-script { position: absolute; bottom: 10px; left: 10px; z-index: 50; padding: 10px; background: #302118; }
@media (max-aspect-ratio: 3/4) {
  .hall-art { --hall-width: max(100%, 56.28dvh, 225.12px); aspect-ratio: 941 / 1672; }
  .masthead { top: max(16px, env(safe-area-inset-top)); left: 18px; right: 18px; }
  .identity { display: block; }
  .identity h1 { margin-top: 7px; font-size: 15px; }
  .header-controls { flex: 1; min-width: 0; }
  .shared-actions { position: absolute; top: 72px; right: 0; width: calc(100vw - 36px); flex-wrap: nowrap; gap: 0 3px; }
  .shared-actions button { flex: none; padding-inline: 1px; white-space: nowrap; }
  .shared-actions span { font-size: 10px; }
  .mode-switch { gap: 9px; }
  .controls { bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); }
  .presence { margin-bottom: 10px; }
  .seat { left: var(--mobile-x, var(--x)); top: var(--mobile-y, var(--y)); --seat-size: clamp(70px, 22vw, 110px); --seat-scale: var(--mobile-scale, var(--scale)); --step-side: var(--tall-step-side); }
  .temple[data-mode="shared"] .seat { --cushion-width: 56%; }
  .incense { bottom: var(--incense-bottom-tall, 46.77%); height: 4%; }
  .smoke { width: 50px; height: 105px; }
  .temple[data-awaiting-seat="true"] .presence { display: none; }
}
@media (max-height: 550px) {
  .temple { min-height: 0; }
  .masthead { top: 8px; }
  .controls { bottom: 5px; }
  .presence { margin-bottom: 3px; }
  .shared-actions { margin-top: 0; }
}
@media (max-height: 550px) and (aspect-ratio > 3/4) {
  .temple[data-mode="shared"] .seat { --seat-size: clamp(100px, 26dvh, 144px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}