/* Tịnh An · jade, ivory paper and antique gold. All interface text stays in the DOM. */
:root {
  --temple-jade: #183e35;
  --temple-jade-deep: #102f29;
  --temple-ivory: #fbf6e8;
  --temple-gold: #c5a46a;
  --temple-soft-gold: #ead7ae;
  --temple-muted: #687c6b;
  --temple-paper-art: url('./art-ui/ui-paper-frame-v1.webp');
  --temple-garden-art: url('./art-ui/ui-lotus-garden-v1.webp');
}
body {
  --hud-ink: var(--temple-ivory);
  --hud-soft: #e7e7d2;
  --hud-edge: #d3b67e75;
  --hud-bg: #183e35e8;
}
.game-vignette {
  background: linear-gradient(180deg, #0c272b48, transparent 27%, transparent 64%, #0e302d45);
}
.game-identity {
  top: max(24px, env(safe-area-inset-top));
  left: max(28px, env(safe-area-inset-left));
  max-width: min(420px, calc(100% - 385px));
  text-shadow: 0 2px 13px #092c29a6;
}
.game-logo { gap: 11px; font-size: 31px; letter-spacing: -.7px; color: var(--temple-ivory); }
.game-logo svg {
  width: 45px; height: 45px; padding: 8px;
  color: var(--temple-soft-gold);
  border: 1px solid #d8bc858c; border-radius: 50%;
  background: #183e35df;
  box-shadow: 0 0 0 4px #183e3530, inset 0 0 0 3px #ecd9b014;
}
.game-location {
  width: max-content; max-width: 100%; min-width: 0;
  gap: 7px; padding: 5px 10px; margin: 10px 0 0;
  font-size: 12px; line-height: 1.5; color: #f5efd9;
  border: 1px solid #d0b47745; border-radius: 20px;
  background: #183e35d9; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-shadow: none;
}
.game-location .live-dot { width: 5px; height: 5px; background: #d6bc80; box-shadow: 0 0 0 3px #d5bd7920; }
#location-heading { flex: none; font-size: 12px; letter-spacing: 0; }
#time-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; opacity: .82; }
.location-dot { flex: none; }
.visitor-hud { gap: 7px 8px; margin-top: 9px; max-width: 100%; }
.profile-button {
  min-height: 44px; max-width: min(238px, 100%); gap: 8px;
  padding: 8px 13px 8px 10px; font-size: 12px;
  border: 1px solid #d0b47759; border-radius: 24px;
  color: var(--temple-ivory); background: #183e35e6;
  box-shadow: inset 0 1px #fff6dc12, 0 4px 16px #0b30252b;
}
.profile-button svg { width: 19px; height: 19px; color: #d6bd86; }
.profile-button:hover { background: #265447; border-color: #d6bd86b3; }
#profile-display-name { min-width: 0; line-height: 1.5; }
.online-badge {
  min-height: 31px; padding: 6px 10px; gap: 5px; font-size: 11px;
  color: #f3edda; border: 1px solid #d0b47747; border-radius: 18px;
  background: #15392fe6; box-shadow: inset 0 1px #fff6dc0c;
}
.online-dot { width: 6px; height: 6px; margin-right: 2px; background: #b9dbad; box-shadow: 0 0 0 3px #b9dbad1c; }
#online-count { min-width: 1ch; color: #f4dcaa; font-weight: 600; }
.online-badge[data-connected=false] { color: #d7d2bf; }
.online-badge[data-connected=false] .online-dot { background: #c4b28a; box-shadow: none; }
.scene-panel.inside .online-badge { background: #15392fe6; color: #f3edda; text-shadow: none; }
.scene-panel.inside .profile-button { background: #183e35e6; border-color: #d0b47759; color: var(--temple-ivory); }
.scene-panel.inside .profile-button:hover { background: #265447; border-color: #d6bd86b3; }
.home-return {
  width: max-content; max-width: 100%; min-height: 44px;
  margin-top: 10px; padding: 9px 13px; gap: 8px;
  color: #f5ecd4; font-size: 12px; border-color: #c5a46a8c;
  background: #183e35e8; box-shadow: inset 0 1px #fff4cf12;
}
.hud-controls {
  top: max(24px, env(safe-area-inset-top));
  right: max(28px, env(safe-area-inset-right)); gap: 8px;
}
.hud-glass {
  background: #183e35e8; border: 1px solid #c5a46a80;
  color: var(--temple-ivory);
  box-shadow: 0 6px 22px #0c2c2733, inset 0 1px #fff5d515;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.hud-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 12px; border-radius: 16px; }
.hud-icon svg { width: 20px; height: 20px; color: #eddfbc; }
.hud-controls .music-toggle {
  min-height: 48px; min-width: 48px; padding: 11px 16px; gap: 9px;
  font-size: 12px; line-height: 1.4; border-radius: 25px;
  background: #183e35e8; color: var(--temple-ivory); border-color: #c5a46a80;
  box-shadow: 0 6px 22px #0c2c2733, inset 0 1px #fff5d515;
}
.hud-controls .music-toggle svg { width: 19px; height: 19px; color: #eddfbc; }
.hud-controls button:hover, .home-return:hover { background: #28584a; border-color: #d9be8c; }
.hud-controls .music-toggle[aria-pressed=true] { background: #294f3c; border-color: #d6b875; }
.equalizer i { background: #d4b57c; }
#game-menu-btn[aria-expanded=true] { color: #183e35; background: #ecdbb6; border-color: #efdfbf; }
#game-menu-btn[aria-expanded=true] svg { color: #183e35; }
.hud-icon #saved-count { top: -4px; right: -4px; padding: 3px 5px; background: #e7ca8e; color: #173e33; box-shadow: 0 0 0 2px #183e35; font-size: 10px; }

/* The compact paper menu scrolls inside the viewport, including on short screens. */
.game-menu.hud-glass {
  top: 85px; right: max(28px, env(safe-area-inset-right));
  width: 328px; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 106px - env(safe-area-inset-bottom));
  padding: 23px 25px 21px; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b39c6c60 transparent;
  border: 1px solid #e0cca5; border-radius: 20px;
  color: var(--temple-jade); text-shadow: none;
  background-color: var(--temple-ivory);
  background-image: none;
  border-image-source: var(--temple-paper-art); border-image-slice: 280 fill;
  border-image-width: 18px; border-image-repeat: stretch;
  box-shadow: 0 20px 65px #0b282f48, inset 0 0 0 5px #fffdf31f;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.game-menu::before {
  content: ''; display: block; height: 64px; margin: -8px -5px 18px;
  pointer-events: none; border: 1px solid #d7c7a65c; border-radius: 11px;
  background: var(--temple-garden-art) center 55% / cover no-repeat;
}
.menu-eyebrow { font-size: 9px; letter-spacing: 2.1px; color: #8e754a; margin-bottom: 6px; }
.game-menu h2 { font-size: 29px; line-height: 1.3; color: #183e35; margin-bottom: 17px; }
.menu-rituals button {
  min-height: 49px; padding: 12px 0; gap: 11px;
  color: #294d40; font-size: 13px; line-height: 1.6;
  border-top: 1px solid #a78a5330;
}
.menu-rituals button:hover { color: #766035; background: #bba67510; }
.menu-rituals button svg { width: 19px; height: 19px; color: #947746; }
.menu-rituals button>span:nth-child(2) { min-width: 0; }
.menu-rituals button>span:last-child:not(:nth-child(2)) { color: #998052; }
.menu-rituals button small { font-size: 11px; color: #78846a; }
.temple-music-settings { padding-top: 18px; margin-top: 8px; border-color: #a78a5330; }
.temple-music-settings>label { color: #344f3d; font-size: 12px; line-height: 1.6; }
.temple-music-settings>p { margin: 5px 0 12px; color: #7d816b; font-size: 11px; line-height: 1.75; }
.temple-music-settings>div { color: #63755c; font-size: 12px; }
.temple-music-settings input { width: 142px; min-height: 44px; accent-color: #45654e; }
.menu-settings { gap: 8px; margin-top: 15px; }
.menu-settings button {
  min-height: 46px; padding: 9px 8px; font-size: 12px;
  border: 1px solid #c6b992; border-radius: 10px;
  background: #e9e8d773; color: #36513f;
}
.menu-settings svg { color: #957c4c; }
.menu-settings button:hover { background: #dfe4d2; }
.menu-profile { border-color: #a78a5330; margin-top: 18px; padding-top: 9px; gap: 1px; }
.menu-profile button { min-height: 46px; font-size: 12px; color: #3f5946; gap: 11px; }
.menu-profile svg { color: #947b4b; }
.menu-profile button:hover { color: #7f663b; }
.menu-profile #logout-profile-btn { color: #7e7c65; }
.menu-footnote { font-size: 10px; line-height: 1.8; color: #8a8871; margin-top: 15px; }

/* Quiet, tactile game controls retain the original hit areas and interaction hooks. */
.movement-controls {
  left: max(28px, env(safe-area-inset-left)); bottom: max(36px, calc(env(safe-area-inset-bottom) + 21px));
  grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 6px;
  opacity: .94;
}
.movement-controls::before {
  content: ''; position: absolute; z-index: -1; inset: -9px;
  border: 1px solid #dfc38a21; border-radius: 24px;
  background: #143d2a0c; pointer-events: none;
}
.movement-controls button {
  width: 48px; height: 48px; min-width: 48px; min-height: 48px;
  border: 1px solid #d5bd8673; border-radius: 14px;
  background: #183e35df; color: #f4ecd9;
  box-shadow: 0 4px 15px #0e342a24, inset 0 1px #fcebdc19, inset 0 -2px #061d201a;
}
.movement-controls button:active, .movement-controls button.pressed, .movement-controls button.active {
  color: #153b31; background: #eddfbb; border-color: #e9d5a7; box-shadow: inset 0 1px #fff9e5, 0 2px 5px #092f2924;
}
.move-arrow { font-size: 23px; }
.movement-controls small { font-size: 9px; padding-bottom: 10px; }
.interaction-dock { max-width: min(600px, calc(100% - 390px)); gap: 12px; }
.context-action {
  min-height: 52px; padding: 12px 18px; gap: 11px;
  border-color: #d4b77ccc; border-radius: 28px;
  background: linear-gradient(145deg, #2c5848f5, #183e35f5); color: #fcf5df;
  font-size: 13px; line-height: 1.55;
  box-shadow: 0 7px 26px #092a2b36, inset 0 1px #f7e6bc25, inset 0 -2px #102c2526;
}
.context-action:hover { background: #34624f; transform: none; }
.context-action svg { width: 23px; height: 23px; color: #e2c58f; }
#context-label { min-width: 0; }
.interact-key { width: 26px; height: 26px; font-size: 11px; color: #eddbb3; border-color: #d5bc8170; background: #0b2e252e; }
#scene-hint { font-size: 11px; line-height: 1.7; color: #f4edda; text-shadow: 0 2px 9px #0c2f27d9; }
#walk-help { font-size: 10px; line-height: 1.5; color: #f1ead9cf; }
.scene-panel .scene-interior-actions {
  gap: 4px; padding: 5px; border-color: #cab17c94; border-radius: 29px;
  background: #153b31ed; box-shadow: 0 7px 24px #092b274d, inset 0 1px #ffedc918;
}
.scene-panel .scene-interior-actions button {
  min-height: 46px; padding: 11px 16px; font-size: 12px; line-height: 1.5; color: #f5e9ce;
}
.scene-panel .scene-interior-actions .scene-bow-button { color: #1b4033; background: #e6cea0; box-shadow: inset 0 1px #fff2d0; }
.scene-panel .scene-interior-actions .scene-bow-button:hover { background: #f1dfba; }
.scene-panel .scene-interior-actions button:hover { background: #355846; }
.bow-steps { gap: 8px; }
.bow-steps span { width: 25px; height: 25px; font-size: 10px; border-color: #d7c1957d; color: #f1e1bc; background: #173e35c9; }
.bow-steps span.current { color: #173e35; background: #ead4a6; border-color: #f5e5c3; box-shadow: 0 0 0 3px #ead4a61f; }
.bow-steps span.done { background: #b79a61; color: #fff8e4; border-color: #d6bc83; }
.bow-steps i { background: #c5a46a61; }
#bow-status { max-width: 360px; font-size: 11px; line-height: 1.65; color: #f0dfb8; }
.scene-panel.inside .movement-controls button { color: #f3e5c8; background: #183e35eb; border-color: #d5bd8673; }
.scene-panel.inside .movement-controls button.pressed, .scene-panel.inside .movement-controls button:active { color: #183e35; background: #ead7ae; }
.scene-panel.inside .game-logo, .scene-panel.inside .game-location { color: #f3ecd7; }
.scene-panel.inside #scene-hint { color: #f0e0bf; }
.toast {
  bottom: max(179px, calc(env(safe-area-inset-bottom) + 160px));
  max-width: min(480px, calc(100vw - 32px)); padding: 14px 22px;
  font-size: 12px; line-height: 1.7; color: #f9f0d9;
  background: #163d32f5; border: 1px solid #c5a46a94; border-radius: 18px;
  box-shadow: 0 10px 32px #092b2d4d, inset 0 1px #fbe9bc14;
}

/* The compact guest form uses generated artwork as framing, never as text. */
.welcome-screen {
  padding: 26px max(20px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  color: #183e35;
  align-items: start; align-items: safe center;
  background: radial-gradient(ellipse at 50% 35%, #34544750, #0c2c27dc 85%);
  backdrop-filter: blur(10px) saturate(.88); -webkit-backdrop-filter: blur(10px) saturate(.88);
  scrollbar-width: thin; scrollbar-color: #b6a07080 #15392f;
}
.welcome-card {
  width: min(424px, 100%); padding: 99px 31px 24px; margin: auto 0;
  border: 1px solid #decba2; border-radius: 24px; color: #183e35;
  background-color: var(--temple-ivory);
  background-image: none;
  box-shadow: 0 24px 90px #092c286b, inset 0 0 0 6px #fffaf236;
}
.welcome-card::before {
  inset: 0; z-index: -1; border: 1px solid transparent; border-radius: 24px;
  border-image-source: var(--temple-paper-art); border-image-slice: 280 fill;
  border-image-width: 18px; border-image-repeat: stretch; pointer-events: none;
}
.welcome-card::after {
  content: ''; position: absolute; top: 14px; left: 14px; right: 14px; height: 68px;
  background: var(--temple-garden-art) center 55% / cover no-repeat;
  border: 1px solid #d4c39b66; border-radius: 13px 13px 7px 7px;
  pointer-events: none;
}
.welcome-brand { gap: 8px; margin-bottom: 15px; font-size: 24px; color: #22483b; }
.welcome-lotus { width: 34px; height: 34px; border-color: #bca16b8c; color: #9b7a44; background: #fdf9e966; box-shadow: inset 0 0 0 3px #c5a46a0b; }
.welcome-lotus svg { width: 25px; height: 25px; }
.welcome-kicker { margin-bottom: 8px; font-size: 9px; letter-spacing: 2.1px; color: #9a7d4c; }
.welcome-title { margin-bottom: 9px; font-size: 33px; line-height: 1.2; letter-spacing: -.6px; color: #173e33; }
.welcome-copy { margin-bottom: 19px; font-size: 12px; line-height: 1.7; color: #74816c; }
.guest-name-label { margin-bottom: 7px; color: #425d49; font-size: 12px; line-height: 1.6; }
#guest-name {
  height: 50px; min-height: 48px; padding: 12px 14px;
  border-color: #c5b991; border-radius: 11px; background: #fffdf4d9;
  font-size: 16px; line-height: 1.5; color: #244738;
  box-shadow: inset 0 1px 4px #8c7d5120, 0 1px #ffffff85;
}
#guest-name::placeholder { color: #9a9e87; font-size: 13px; }
#guest-name:focus { border-color: #678766; box-shadow: 0 0 0 3px #6e946821, inset 0 1px 4px #8c7d510c; }
#guest-name[aria-invalid=true] { border-color: #aa7851; box-shadow: 0 0 0 3px #aa78511c; }
.guest-helper { margin: 8px 0 17px; color: #8d9278; font-size: 10px; line-height: 1.6; }
.guest-helper span { margin: 0 5px; color: #b4ab8c; }
.avatar-presets legend { margin-bottom: 9px; color: #53674d; font-size: 12px; line-height: 1.6; }
.avatar-presets legend span { margin-left: 5px; font-size: 10px; color: #93977e; }
.avatar-options { gap: 9px; }
.avatar-option {
  min-height: 102px; padding: 5px 4px 9px; border: 1px solid #d6d3b8; border-radius: 13px;
  color: #78896c; background: #f4f2e5c9; box-shadow: inset 0 1px #ffffff6b;
}
.avatar-option:hover { background: #eceddd; border-color: #aab690; }
.avatar-option[aria-pressed=true] { color: #284f38; background: #e8ecd7e3; border-color: #8a9b6a; box-shadow: inset 0 0 0 2px #c5a46a33, 0 3px 10px #5d744a10; }
.avatar-portrait { width: 76px; height: 75px; }
.avatar-name { margin-top: 3px; font-size: 11px; line-height: 1.5; }
.avatar-check { top: 6px; right: 6px; width: 18px; height: 18px; font-size: 11px; background: #536f46; border-color: #fff6dc9c; }
.guest-error { min-height: 17px; margin: 8px 0 7px; color: #9e633f; font-size: 11px; line-height: 1.7; }
.guest-submit {
  min-height: 50px; padding: 12px 17px; gap: 15px;
  border-color: #254c39; border-radius: 12px;
  color: #fcf6e5; background: linear-gradient(135deg, #3c6248, #224735);
  box-shadow: 0 5px 14px #3b563629, inset 0 1px #f9e7bb24;
  font-size: 13px; line-height: 1.5;
}
.guest-submit:hover { transform: none; background: #274d38; }
.guest-submit svg { width: 19px; height: 19px; color: #e5c995; }
.guest-submit:disabled { cursor: wait; opacity: .65; }
.guest-cancel { min-height: 44px; margin-top: 9px; padding: 9px 15px; color: #748268; font-size: 12px; }
.profile-footnote { margin-top: 15px; font-size: 10px; line-height: 1.7; color: #999982; }
.scene-loading {
  background: radial-gradient(ellipse at 50% 35%, #fffdf5, #f1eddb);
  color: #274c3c;
}
.scene-loading::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: min(28vh, 230px); pointer-events: none;
  background: var(--temple-garden-art) center / cover no-repeat;
  opacity: .68; mask-image: linear-gradient(transparent, #000 45%); -webkit-mask-image: linear-gradient(transparent, #000 45%);
}
.loading-lotus {
  position: relative; display: grid; place-items: center;
  width: 78px; height: 78px; border: 1px solid #c8ad77; border-radius: 50%;
  color: #8b774a; background: #fbf7e9cf;
  box-shadow: 0 0 0 8px #bfa56a0c, inset 0 0 0 5px #bfa56a0a;
}
.loading-lotus svg { width: 43px; height: 43px; color: #718263; animation: none; }
.scene-loading p { position: relative; max-width: calc(100% - 48px); font-size: 14px; line-height: 1.8; color: #6b7c62; text-align: center; margin-top: 22px; }
.scene-panel button:focus-visible, .welcome-screen button:focus-visible { outline: 2px solid #e7c47d; outline-offset: 4px; }
.welcome-screen #guest-name:focus-visible { outline: none; }
/* Visibility remains controlled by the existing hidden attributes and modal roles. */
[hidden] { display: none !important; }

@media (max-width: 900px) {
  .game-identity { max-width: calc(100% - 244px); }
  .game-logo { font-size: 28px; gap: 9px; }
  .hud-controls .music-toggle { width: 48px; height: 48px; padding: 12px; gap: 0; }
  .hud-controls #music-label, .hud-controls .equalizer { display: none; }
}
@media (max-width: 760px) {
  .game-identity { top: max(18px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); max-width: calc(100% - 242px); }
  .game-logo { font-size: 28px; }
  .game-logo svg { width: 40px; height: 40px; padding: 7px; }
  .game-location { margin-top: 8px; padding: 5px 8px; gap: 6px; font-size: 11px; }
  #location-heading { font-size: 12px; }
  #time-label, .location-dot { display: inline; }
  #time-label { font-size: 11px; }
  .visitor-hud { margin-top: 8px; gap: 6px; }
  .profile-button { max-width: 100%; font-size: 12px; padding: 8px 10px; }
  .online-badge { font-size: 11px; padding: 6px 9px; }
  .hud-controls { top: max(18px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); gap: 6px; }
  .hud-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  .home-return { min-height: 44px; font-size: 11px; margin-top: 9px; padding: 8px 11px; }
  .game-menu.hud-glass { top: 78px; right: max(16px, env(safe-area-inset-right)); width: 316px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 98px - env(safe-area-inset-bottom)); padding: 22px 24px 20px; }
  .movement-controls { left: max(16px, env(safe-area-inset-left)); bottom: max(34px, calc(env(safe-area-inset-bottom) + 19px)); grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 5px; }
  .movement-controls button { width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
  .movement-controls small { display: none; }
  .interaction-dock { right: max(16px, env(safe-area-inset-right)); bottom: max(39px, calc(env(safe-area-inset-bottom) + 24px)); left: auto; transform: none; width: max-content; max-width: calc(100% - 210px); gap: 10px; }
  .context-action { min-height: 50px; max-width: 100%; padding: 11px 13px; font-size: 12px; gap: 8px; line-height: 1.6; white-space: normal; }
  .context-action svg { width: 21px; height: 21px; }
  .interact-key { display: none; }
  #scene-hint { max-width: 275px; font-size: 10px; line-height: 1.7; }
  #walk-help { bottom: max(12px, env(safe-area-inset-bottom)); font-size: 9px; letter-spacing: 0; }
  .scene-panel .scene-interior-actions { max-width: 100%; gap: 4px; border-radius: 16px; padding: 4px; }
  .scene-panel .scene-interior-actions button { min-height: 44px; padding: 9px 10px; font-size: 12px; border-radius: 12px; }
  .scene-panel .scene-interior-actions .scene-bow-button { flex-basis: auto; }
  #bow-status { max-width: 260px; font-size: 10px; }
  .bow-steps span { width: 23px; height: 23px; font-size: 9px; }
  .toast { bottom: max(188px, calc(env(safe-area-inset-bottom) + 173px)); font-size: 12px; padding: 12px 18px; }
  .welcome-screen { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .welcome-card { padding-right: 28px; padding-left: 28px; }
}
@media (max-width: 420px) {
  .game-identity { top: max(16px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); max-width: calc(100% - 150px); }
  .game-logo { font-size: 27px; gap: 8px; }
  .game-logo svg { width: 38px; height: 38px; }
  .game-location { max-width: 100%; }
  .visitor-hud { flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
  .profile-button { width: max-content; max-width: 100%; min-height: 44px; }
  .online-badge { min-height: 29px; font-size: 11px; }
  .hud-controls { top: max(16px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(2, 48px); grid-template-rows: repeat(2, 48px); gap: 6px; }
  .hud-controls .music-toggle { width: 48px; height: 48px; min-height: 48px; padding: 12px; }
  .game-menu.hud-glass { top: 130px; right: max(14px, env(safe-area-inset-right)); width: min(316px, calc(100vw - 28px)); max-width: calc(100vw - 28px); max-height: calc(100dvh - 150px - env(safe-area-inset-bottom)); padding: 21px 23px; }
  .game-menu::before { height: 57px; margin-bottom: 16px; }
  .movement-controls { left: max(14px, env(safe-area-inset-left)); grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 5px; }
  .interaction-dock { right: max(14px, env(safe-area-inset-right)); max-width: calc(100% - 194px); }
  .scene-panel .scene-interior-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .scene-panel .scene-interior-actions .scene-bow-button { grid-column: 1 / -1; justify-content: center; }
  .scene-panel .scene-interior-actions button { width: 100%; min-height: 44px; padding: 9px 6px; font-size: 11px; justify-content: center; }
  #scene-hint { max-width: 100%; font-size: 10px; }
  #bow-status { max-width: 100%; font-size: 10px; }
  .welcome-screen { padding-top: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .welcome-card { padding-right: 25px; padding-left: 25px; }
  .welcome-title { font-size: 31px; }
  .avatar-options { gap: 7px; }
  .avatar-portrait { width: 72px; height: 73px; }
  .avatar-name { font-size: 11px; }
}
@media (max-width: 360px) {
  .game-logo { font-size: 25px; gap: 7px; }
  .game-logo svg { width: 35px; height: 35px; }
  .game-location { padding: 5px 7px; gap: 5px; }
  .movement-controls { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; }
  .movement-controls button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .interaction-dock { max-width: calc(100% - 184px); }
  .context-action { font-size: 12px; padding: 10px 11px; gap: 7px; }
  .scene-panel .scene-interior-actions { grid-template-columns: 1fr; }
  .scene-panel .scene-interior-actions .scene-bow-button { grid-column: auto; }
  .scene-panel .scene-interior-actions button { font-size: 12px; }
  .welcome-card { padding-left: 23px; padding-right: 23px; }
  .welcome-title { font-size: 29px; }
  .avatar-portrait { width: 65px; }
}
@media (max-height: 740px) {
  .welcome-card { padding-top: 80px; padding-bottom: 20px; }
  .welcome-card::after { top: 13px; height: 52px; }
  .welcome-brand { margin-bottom: 12px; font-size: 22px; }
  .welcome-lotus { width: 30px; height: 30px; }
  .welcome-lotus svg { width: 23px; height: 23px; }
  .welcome-kicker { margin-bottom: 7px; }
  .welcome-title { font-size: 29px; }
  .welcome-title br { display: none; }
  .welcome-copy { margin-bottom: 16px; }
  .guest-helper { margin-bottom: 14px; }
  .avatar-option { min-height: 94px; }
  .avatar-portrait { height: 65px; }
  .profile-footnote { margin-top: 12px; }
}
@media (max-height: 560px) {
  .welcome-screen { place-items: start center; padding-top: 14px; padding-bottom: 14px; }
  .welcome-card { padding-top: 70px; padding-bottom: 18px; }
  .welcome-card::after { height: 43px; }
  .welcome-brand { margin-bottom: 10px; }
  .welcome-kicker { margin-bottom: 6px; }
  .welcome-title { font-size: 27px; }
  .welcome-copy { margin-bottom: 14px; font-size: 11px; }
  .guest-helper { margin-bottom: 12px; }
  .avatar-option { min-height: 85px; padding-bottom: 7px; }
  .avatar-portrait { height: 56px; }
  .guest-error { min-height: 16px; margin: 6px 0; }
}
@media (max-height: 510px) and (orientation: landscape) {
  .game-identity { top: 12px; left: max(18px, env(safe-area-inset-left)); display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 10px; max-width: calc(100% - 248px); }
  .game-logo { grid-column: 1; grid-row: 1; gap: 7px; font-size: 24px; }
  .game-logo svg { width: 34px; height: 34px; padding: 6px; }
  .game-location { grid-column: 2; grid-row: 1; padding: 4px 8px; margin: 0; }
  #time-label, .location-dot { display: none; }
  .visitor-hud { grid-column: 1 / -1; grid-row: 2; max-width: 100%; flex-direction: row; flex-wrap: nowrap; margin: 0; gap: 7px; }
  .profile-button { min-height: 44px; max-width: 200px; }
  .online-badge { min-height: 30px; }
  .game-identity .home-return { grid-column: 1 / -1; grid-row: 3; margin-top: 0; min-height: 44px; padding: 8px 12px; }
  .hud-controls { top: 13px; right: max(18px, env(safe-area-inset-right)); display: flex; gap: 6px; }
  .hud-controls .music-toggle, .hud-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px; }
  .hud-controls #music-label, .hud-controls .equalizer { display: none; }
  .game-menu.hud-glass { top: 68px; right: max(18px, env(safe-area-inset-right)); width: 320px; max-height: calc(100dvh - 83px - env(safe-area-inset-bottom)); padding: 21px 24px; }
  .game-menu::before { height: 48px; margin-bottom: 14px; }
  .movement-controls { left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 5px; }
  .movement-controls button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .interaction-dock { right: max(18px, env(safe-area-inset-right)); bottom: max(31px, calc(env(safe-area-inset-bottom) + 15px)); max-width: calc(100% - 220px); }
  .scene-panel .scene-interior-actions { display: flex; flex-wrap: nowrap; width: auto; max-width: 100%; border-radius: 25px; }
  .scene-panel .scene-interior-actions button { width: auto; min-height: 44px; padding: 9px 12px; font-size: 12px; }
  .scene-panel .scene-interior-actions .scene-bow-button { grid-column: auto; }
  #scene-hint { font-size: 10px; max-width: 330px; }
  #walk-help { bottom: 7px; font-size: 8px; }
  .toast { bottom: 134px; }
  .welcome-screen { padding: 14px; }
  .welcome-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0 25px; width: min(660px, 100%); padding: 23px 27px; text-align: left; }
  .welcome-card::after { top: 18px; left: 19px; right: auto; width: calc(43% - 30px); height: 67px; border-radius: 10px; }
  .welcome-brand { grid-column: 1; grid-row: 1; justify-content: flex-start; align-self: end; margin-top: 77px; margin-bottom: 12px; font-size: 22px; }
  .welcome-kicker { display: block; grid-column: 1; grid-row: 2; margin-bottom: 8px; font-size: 8px; }
  .welcome-title { grid-column: 1; grid-row: 3; font-size: 28px; line-height: 1.24; margin-bottom: 9px; }
  .welcome-title br { display: block; }
  .welcome-copy { grid-column: 1; grid-row: 4; margin-bottom: 12px; font-size: 11px; }
  #guest-form { grid-column: 2; grid-row: 1 / 6; }
  .profile-footnote { grid-column: 1; grid-row: 5; align-self: start; margin: 0; font-size: 9px; line-height: 1.6; }
  .guest-cancel { grid-column: 2; grid-row: 6; margin-top: 4px; font-size: 11px; }
  .guest-name-label { font-size: 11px; margin-bottom: 5px; }
  #guest-name { height: 46px; min-height: 44px; padding: 10px 12px; }
  .guest-helper { font-size: 9px; margin: 6px 0 11px; }
  .avatar-presets legend { font-size: 11px; margin-bottom: 6px; }
  .avatar-presets legend span { font-size: 9px; }
  .avatar-options { gap: 7px; }
  .avatar-option { min-height: 81px; padding: 3px 3px 7px; }
  .avatar-portrait { width: 63px; height: 54px; }
  .avatar-name { font-size: 10px; }
  .guest-error { min-height: 16px; margin: 6px 0; font-size: 10px; }
  .guest-submit { min-height: 46px; font-size: 12px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-lotus svg, .equalizer i, .avatar-check { animation: none !important; }
  .scene-panel button, .welcome-screen button, .toast { transition: none !important; }
}