:root {
  --bg-top: #151515;
  --bg-bottom: #090909;
  --scene-w: 100vw;
  --scene-h: 100vh;
  --wall-scale: 1;
  --wall-aspect: 1.0965;
  --wall-height: calc(var(--scene-h) * var(--wall-scale));
  --wall-size: calc(var(--wall-height) * var(--wall-aspect));
  --depth: calc(var(--wall-size) / 2);
  --camera-z: calc(var(--depth) * 0.68);
  --scene-perspective: 1900px;
  --orange-dark: #b65414;
  --orange-dark-hover: #cf6c22;
  --arrow-size: 72px;
  --wall-seam-strip-left: 96px;
  --wall-seam-strip-right: 120px;
}

@supports (height: 100dvh) {
  :root {
    --scene-h: 100dvh;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: var(--scene-h);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: radial-gradient(circle at 50% 10%, var(--bg-top), var(--bg-bottom) 60%);
  color: #f5f5f5;
  overflow: hidden;
}

.experience {
  min-height: var(--scene-h);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
}

.scene {
  position: relative;
  width: var(--scene-w);
  height: var(--scene-h);
  margin-bottom: 0;
  -webkit-perspective: var(--scene-perspective);
  perspective: var(--scene-perspective);
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  overflow: hidden;
  border-radius: 0;
  background:
    linear-gradient(to bottom, rgba(30, 24, 18, 0.18), rgba(30, 24, 18, 0.34)),
    radial-gradient(circle at 50% 0%, #a8a39b 0%, #8f8a82 55%, #776f66 100%);
  box-shadow: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    radial-gradient(ellipse at 13% 41%, rgba(255, 228, 153, 0.32) 0%, rgba(255, 228, 153, 0.16) 18%, rgba(255, 228, 153, 0) 48%),
    radial-gradient(ellipse at 34% 66%, rgba(255, 214, 124, 0.18) 0%, rgba(255, 214, 124, 0) 56%);
  mix-blend-mode: screen;
  animation: sunlightBreath 7.2s ease-in-out infinite;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 62% 0 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.sunlight-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}

.sunlight-ray {
  position: absolute;
  left: 6%;
  top: 31%;
  transform-origin: left center;
  pointer-events: none;
  mix-blend-mode: screen;
}

.sunlight-ray-main {
  width: 72%;
  height: 34%;
  opacity: 0.34;
  background: linear-gradient(100deg, rgba(255, 235, 170, 0.76) 0%, rgba(255, 223, 142, 0.38) 37%, rgba(255, 216, 128, 0.08) 72%, rgba(255, 214, 122, 0) 100%);
  clip-path: polygon(0 0, 22% 8%, 100% 63%, 100% 79%, 18% 28%, 0 16%);
  filter: blur(8px);
  transform: skewY(-7deg) rotate(1.2deg);
  animation: sunlightDriftMain 9.6s ease-in-out infinite;
}

.sunlight-ray-soft {
  width: 78%;
  height: 40%;
  opacity: 0.24;
  background: linear-gradient(102deg, rgba(255, 238, 184, 0.55) 0%, rgba(255, 227, 148, 0.24) 42%, rgba(255, 219, 134, 0.04) 74%, rgba(255, 214, 122, 0) 100%);
  clip-path: polygon(0 10%, 20% 18%, 100% 64%, 100% 86%, 16% 34%, 0 22%);
  filter: blur(16px);
  transform: skewY(-6deg) rotate(0.8deg) translateY(3%);
  animation: sunlightDriftSoft 10.8s ease-in-out infinite;
}

@keyframes sunlightBreath {
  0% {
    opacity: 0.76;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.76;
  }
}

@keyframes sunlightDriftMain {
  0% {
    opacity: 0.3;
    transform: skewY(-7deg) rotate(1.2deg) translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.38;
    transform: skewY(-7deg) rotate(1.2deg) translate3d(1.4%, -0.5%, 0);
  }
  100% {
    opacity: 0.3;
    transform: skewY(-7deg) rotate(1.2deg) translate3d(0, 0, 0);
  }
}

@keyframes sunlightDriftSoft {
  0% {
    opacity: 0.2;
    transform: skewY(-6deg) rotate(0.8deg) translate3d(0, 3%, 0);
  }
  50% {
    opacity: 0.28;
    transform: skewY(-6deg) rotate(0.8deg) translate3d(1.8%, 2.2%, 0);
  }
  100% {
    opacity: 0.2;
    transform: skewY(-6deg) rotate(0.8deg) translate3d(0, 3%, 0);
  }
}

.room {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, 0) translateZ(var(--camera-z)) rotateY(0deg);
  transition: transform 1800ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.entry-cinematic {
  position: absolute;
  inset: -2%;
  pointer-events: none;
  z-index: 12;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(255, 224, 156, 0.28) 0%, rgba(255, 224, 156, 0.12) 24%, rgba(255, 224, 156, 0) 56%),
    linear-gradient(to bottom, rgba(12, 10, 8, 0.34) 0%, rgba(12, 10, 8, 0.12) 45%, rgba(12, 10, 8, 0) 76%);
  transform-origin: 50% 54%;
  animation: entryCinematic 860ms cubic-bezier(0.2, 0.74, 0.28, 1) both;
  will-change: opacity, transform;
}

@keyframes entryCinematic {
  0% {
    opacity: 0.62;
    transform: translate3d(0, 1.2%, 0) scale(1.03);
  }
  70% {
    opacity: 0.14;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.wall {
  position: absolute;
  left: calc(var(--wall-size) * -0.5);
  top: calc(var(--wall-height) * -0.5);
  width: var(--wall-size);
  height: var(--wall-height);
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: none;
}

.wall img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hotspot-donate {
  position: absolute;
  left: 35%;
  top: 6.2%;
  width: 30%;
  height: 10.2%;
  z-index: 5;
  display: block;
  cursor: pointer;
}

.hotspot-donate:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.hotspot-word,
.hotspot-cancer {
  position: absolute;
  left: var(--tap-x, var(--x));
  top: var(--tap-y, var(--y));
  width: var(--tap-w, var(--w));
  height: var(--tap-h, var(--h));
  z-index: 6;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  pointer-events: auto;
  transform: translateZ(2px);
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot-window {
  position: absolute;
  left: 29%;
  top: 42%;
  width: 34%;
  height: 44%;
  z-index: 5;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  pointer-events: auto;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot-curtain {
  position: absolute;
  left: 74%;
  top: 0;
  width: 26%;
  height: 100%;
  z-index: 7;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  pointer-events: auto;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot-switch {
  position: absolute;
  left: 72.5%;
  top: 42.5%;
  width: 12.5%;
  height: 12%;
  z-index: 7;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  pointer-events: auto;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot-book {
  position: absolute;
  left: 70.5%;
  top: 62.5%;
  width: 15%;
  height: 19%;
  z-index: 7;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  pointer-events: auto;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot-bottle {
  position: absolute;
  left: 14.5%;
  top: 62%;
  width: 15%;
  height: 19.5%;
  z-index: 7;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  pointer-events: auto;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot-window:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
}

.hotspot-curtain:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
}

.hotspot-switch:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
}

.hotspot-book:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
}

.hotspot-bottle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
}

.hotspot-word:focus-visible,
.hotspot-cancer:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
}

.hotspot-door {
  position: absolute;
  left: 31%;
  top: 30%;
  width: 38%;
  height: 69%;
  z-index: 6;
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot-door:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.speech-bubble {
  position: absolute;
  transform: translate(-50%, 0.8rem);
  padding: 0.65rem 0.9rem;
  background: rgba(255, 252, 238, 0.96);
  color: #2b1c0f;
  border-radius: 0.8rem;
  border: 1px solid rgba(86, 64, 43, 0.45);
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: center;
  font-weight: 700;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 8;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.48rem;
  width: 0.9rem;
  height: 0.9rem;
  background: rgba(255, 252, 238, 0.96);
  border-right: 1px solid rgba(86, 64, 43, 0.45);
  border-bottom: 1px solid rgba(86, 64, 43, 0.45);
  transform: translateX(-50%) rotate(45deg);
}

.speech-bubble.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.door-bubble {
  left: 50%;
  top: 22%;
  max-width: 62%;
}

.left-bubble {
  left: 50%;
  top: 22%;
  max-width: 62%;
}

.right-bubble {
  left: 50%;
  top: 22%;
  max-width: 62%;
}

.wall-front {
  transform: translateZ(calc(var(--depth) * -1));
}

.wall-left {
  transform: rotateY(90deg) translateZ(calc(var(--depth) * -1));
}

.wall-right {
  transform: rotateY(-90deg) translateZ(calc(var(--depth) * -1));
}

.wall-back {
  transform: rotateY(180deg) translateZ(calc(var(--depth) * -1));
  overflow: visible;
}

.wall-back::before,
.wall-back::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--wall-seam-strip-left);
  height: 100%;
  background-image: url("Assets/Wall.webp");
  background-repeat: no-repeat;
  background-size: var(--wall-size) var(--wall-height);
  pointer-events: none;
}

.wall-back::before {
  left: calc(var(--wall-seam-strip-left) * -1);
  background-position: left top;
}

.wall-back::after {
  width: var(--wall-seam-strip-right);
  right: calc(var(--wall-seam-strip-right) * -1);
  background-position: right top;
}

.arrow-controls {
  position: fixed;
  left: 50%;
  bottom: max(calc(env(safe-area-inset-bottom) + 0.25rem), 0.25rem);
  transform: translateX(-50%) perspective(600px) rotateX(38deg);
  display: flex;
  gap: calc(var(--arrow-size) * 4);
  z-index: 30;
}

.arrow {
  width: var(--arrow-size);
  height: var(--arrow-size);
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--orange-dark-hover), var(--orange-dark));
  clip-path: polygon(50% 0%, 100% 52%, 70% 52%, 70% 100%, 30% 100%, 30% 52%, 0 52%);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
  opacity: 0.84;
}

.arrow:hover,
.arrow:focus-visible {
  transform: scale(1.08);
  opacity: 1;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6));
  outline: none;
}

.arrow.is-active {
  opacity: 1;
  filter: drop-shadow(0 11px 14px rgba(0, 0, 0, 0.68));
}

.arrow-left {
  transform: rotate(-90deg);
}

.arrow-right {
  transform: rotate(90deg);
}

.arrow-left:hover,
.arrow-left:focus-visible {
  transform: rotate(-90deg) scale(1.08);
}

.arrow-right:hover,
.arrow-right:focus-visible {
  transform: rotate(90deg) scale(1.08);
}

.sound-controls {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.85rem);
  right: calc(env(safe-area-inset-right) + 0.85rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.65rem 0.35rem 0.35rem;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 45;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.sound-controls:hover,
.sound-controls:focus-within {
  background: rgba(0, 0, 0, 0.86);
  border-color: rgba(255, 255, 255, 0.56);
}

.sound-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  background: rgba(0, 0, 0, 0.82);
  border-color: rgba(255, 255, 255, 0.58);
  transform: scale(1.05);
  outline: none;
}

.sound-toggle-icon {
  position: absolute;
  width: 18px;
  height: 18px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: #f5f5f5;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  overflow: hidden;
  transition: opacity 140ms ease;
}

.sound-toggle .icon-off {
  opacity: 0;
}

.sound-toggle.is-muted {
  border-color: rgba(255, 160, 92, 0.5);
}

.sound-toggle.is-muted .icon-on {
  opacity: 0;
}

.sound-toggle.is-muted .icon-off {
  opacity: 1;
  stroke: #ffb07a;
}

.sound-volume-wrap {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 146px;
  user-select: none;
}

.sound-volume-label {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

.sound-volume {
  width: 112px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(
    to right,
    #d56b1f 0%,
    #d56b1f var(--volume-percent, 70%),
    rgba(255, 255, 255, 0.82) var(--volume-percent, 70%),
    rgba(255, 255, 255, 0.82) 100%
  );
  cursor: pointer;
}

.sound-volume::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: transparent;
}

.sound-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -7px;
  border-radius: 50%;
  border: 1px solid rgba(30, 15, 6, 0.55);
  background: #d56b1f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.sound-volume::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.sound-volume::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: #d56b1f;
}

.sound-volume::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(30, 15, 6, 0.55);
  border-radius: 50%;
  background: #d56b1f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.window-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 60;
}

.window-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.window-modal-panel {
  width: min(90vw, 1060px);
  height: auto;
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto auto auto;
  background: #000 !important;
  border: 1px solid #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
}

.modal-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.25rem 0.32rem 0.05rem;
}

.modal-close {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.12rem;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
}

.modal-close:hover,
.modal-close:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(12, 12, 12, 0.92);
  outline: none;
}

.modal-content {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.modal-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000 !important;
}

.modal-doc-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  background: #000;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.22rem 0.42rem 0.42rem;
}

.modal-action {
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(18, 18, 18, 0.9);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.38rem 0.68rem;
  font-size: 0.86rem;
  line-height: 1;
  cursor: pointer;
}

.modal-action:hover,
.modal-action:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(34, 34, 34, 0.92);
  outline: none;
}

.window-modal-panel img,
.window-modal-panel iframe,
.window-modal-panel object,
.window-modal-panel embed {
  background: #000 !important;
}

/* iOS WebKit camera/perspective tuning (Safari + Chrome app on iOS). */
html.is-safari,
html.is-ios-webkit {
  --camera-z: calc(var(--depth) * 0.58);
  --scene-perspective: 1700px;
}

html.is-safari .scene,
html.is-ios-webkit .scene {
  -webkit-perspective: var(--scene-perspective);
  perspective: var(--scene-perspective);
}

/* iOS WebKit fallback: avoid blend-mode compositing that can flatten 3D layers. */
html.is-safari .scene::before,
html.is-safari .sunlight-ray,
html.is-ios-webkit .scene::before,
html.is-ios-webkit .sunlight-ray {
  mix-blend-mode: normal;
}

.mobile-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 85;
  transition: opacity 180ms ease;
}

.mobile-popup.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-popup-card {
  width: min(92vw, 430px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(14, 14, 14, 0.96);
  padding: 1rem 0.95rem 1rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

.mobile-popup-close {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
}

.mobile-popup-title {
  margin: 0.35rem 0 0;
  font-size: 1.08rem;
  line-height: 1.3;
  color: #fff8ea;
}

.mobile-popup-message {
  margin: 0.6rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.4;
  white-space: pre-line;
}

.mobile-popup-message:empty {
  display: none;
}

.mobile-popup-message:empty + .mobile-popup-actions {
  margin-top: 0.55rem;
}

.mobile-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.mobile-popup-action {
  width: 100%;
  min-height: 44px;
  border-radius: 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.65rem 0.8rem;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.mobile-open-pdf {
  display: none;
  background: linear-gradient(180deg, #cf6c22, #b65414);
  color: #fff;
  border-color: rgba(255, 188, 126, 0.42);
}

.mobile-open-pdf.is-visible {
  display: block;
}

.mobile-return {
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
}

@media (max-width: 820px) {
  :root {
    --arrow-size: 62px;
  }

  .arrow-controls {
    bottom: max(calc(env(safe-area-inset-bottom) + 0.4rem), 0.4rem);
  }

  .sound-controls {
    gap: 0.45rem;
    padding: 0.3rem 0.55rem 0.3rem 0.3rem;
    min-height: 46px;
    top: calc(env(safe-area-inset-top) + 0.65rem);
    right: calc(env(safe-area-inset-right) + 0.65rem);
  }

  .sound-toggle {
    width: 38px;
    height: 38px;
  }

  .sound-toggle-icon {
    width: 16px;
    height: 16px;
  }

  .sound-volume-wrap {
    min-width: 118px;
  }

  .sound-volume {
    width: 88px;
  }

  .modal-content {
    padding: 0;
  }

  .modal-doc-image {
    max-height: 62vh;
  }

  .modal-actions {
    padding: 0.18rem 0.34rem 0.34rem;
  }

  .modal-action {
    font-size: 0.8rem;
    padding: 0.34rem 0.58rem;
  }
}

@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
  :root {
    --arrow-size: 62px;
    --wall-scale: 0.88;
    --scene-perspective: 1900px;
    --camera-z: calc(var(--depth) * 0.68);
  }

  .sound-controls {
    top: calc(env(safe-area-inset-top) + 0.55rem);
    right: calc(env(safe-area-inset-right) + 0.55rem);
  }

  .arrow-controls {
    bottom: max(calc(env(safe-area-inset-bottom) + 0.6rem), 0.6rem);
    gap: calc(var(--arrow-size) * 2.35);
  }

  .window-modal-panel {
    width: min(96vw, 640px);
    max-height: 92vh;
  }

  .modal-header {
    padding: 0.2rem 0.25rem 0.06rem;
  }

  .modal-actions {
    justify-content: center;
    gap: 0.52rem;
    padding: 0.28rem 0.32rem 0.46rem;
  }

  .modal-action {
    min-height: 44px;
    padding: 0.54rem 0.7rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 540px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  :root {
    --wall-scale: 0.84;
    --camera-z: calc(var(--depth) * 0.66);
    --scene-perspective: 1900px;
    --arrow-size: 58px;
  }

  .arrow-controls {
    bottom: max(calc(env(safe-area-inset-bottom) + 0.7rem), 0.7rem);
  }
}

@media (hover: none) and (pointer: coarse) {
  .arrow:hover,
  .arrow:focus-visible {
    opacity: 0.9;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
    transform: none;
  }

  .arrow-left:hover,
  .arrow-left:focus-visible {
    transform: rotate(-90deg);
  }

  .arrow-right:hover,
  .arrow-right:focus-visible {
    transform: rotate(90deg);
  }

  .sound-controls:hover,
  .sound-controls:focus-within {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.32);
  }

  .sound-toggle:hover,
  .sound-toggle:focus-visible {
    background: rgba(0, 0, 0, 0.62);
    border-color: rgba(255, 255, 255, 0.28);
    transform: none;
  }

  .modal-close:hover,
  .modal-close:focus-visible,
  .modal-action:hover,
  .modal-action:focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(18, 18, 18, 0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-cinematic {
    animation: none;
    opacity: 0;
    transform: none;
  }
}