:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #77b5b9;
  color: #fff4d1;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body,
#experience {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #77b5b9;
}

button {
  font: inherit;
}

#experience {
  position: relative;
  isolation: isolate;
  background: linear-gradient(#66aeb8 0%, #9bc6bc 49%, #d8b477 73%, #ad6c3f 100%);
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

#scene:active {
  cursor: grabbing;
}

.title-card {
  position: absolute;
  z-index: 3;
  top: clamp(1.5rem, 5vw, 4.5rem);
  left: clamp(1.35rem, 5vw, 5rem);
  max-width: 23rem;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(41, 27, 17, 0.32);
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: #ffe0a6;
  font: 600 0.69rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #fff5d6;
  font-size: clamp(2.65rem, 7vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.74;
}

.dek {
  width: min(19rem, 65vw);
  margin: 1.3rem 0 0;
  color: rgba(255, 243, 211, 0.82);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-style: italic;
  line-height: 1.5;
}

.controls {
  position: absolute;
  z-index: 4;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.5rem;
  align-items: center;
}

.controls button {
  border: 1px solid rgba(255, 240, 202, 0.35);
  border-radius: 999px;
  padding: 0.65rem 0.9rem;
  background: rgba(43, 38, 30, 0.42);
  color: #fff2cc;
  cursor: pointer;
  font: 650 0.7rem/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.controls button:hover,
.controls button:focus-visible {
  border-color: rgba(255, 240, 202, 0.75);
  background: rgba(70, 52, 37, 0.66);
  outline: none;
  transform: translateY(-1px);
}

.controls button:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 225, 166, 0.28);
}

.button-icon {
  display: inline-block;
  margin-right: 0.38rem;
  color: #efad5b;
}

.controls p {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
  color: rgba(255, 240, 202, 0.66);
  font: 500 0.63rem/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

.loading {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  background: #253f40;
  transition: opacity 800ms ease, visibility 800ms ease;
}

.loading.is-complete {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.loading p {
  margin: 1rem 0 0.8rem;
  color: #f4d69d;
  font-size: 0.77rem;
  font-style: italic;
  letter-spacing: 0.08em;
}

.loader-mark {
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(240, 176, 89, 0.45);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.55rem #253f40, inset 0 0 0 0.62rem #efad5b;
  animation: breathe 1.5s ease-in-out infinite;
}

.loading-track {
  width: 10rem;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 244, 211, 0.15);
}

.loading-track span {
  display: block;
  width: 0;
  height: 100%;
  background: #efad5b;
  transition: width 180ms ease;
}

.scene-error {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 2rem;
  translate: -50% 0;
  width: min(34rem, calc(100% - 2rem));
  margin: 0;
  border: 1px solid rgba(255, 226, 180, 0.4);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  background: rgba(72, 37, 26, 0.9);
  color: #ffe9bd;
  text-align: center;
}

.grain,
.vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.grain {
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.vignette {
  background: radial-gradient(circle at 55% 43%, transparent 42%, rgba(49, 29, 18, 0.24) 115%);
}

@keyframes breathe {
  50% { transform: scale(0.9); opacity: 0.64; }
}

@media (max-width: 640px) {
  .title-card {
    top: 1.4rem;
    left: 1.2rem;
  }

  .dek {
    display: none;
  }

  .controls {
    right: 0.8rem;
    bottom: 0.8rem;
  }

  .controls p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.drive-controls { position:absolute; left:clamp(1rem,3vw,2.5rem); bottom:clamp(1rem,3vw,2rem); z-index:4; color:#fff2cc; font:500 11px system-ui,sans-serif; }
.drive-pad { display:grid; grid-template-columns:repeat(3,44px); gap:5px; }
.drive-pad button { border:1px solid #fff0ca66; border-radius:12px; height:42px; background:#2b261e99; color:#fff2cc; font-size:24px; touch-action:none; user-select:none; }
.drive-pad button:active { background:#95672f; }
.drive-pad button:first-child { grid-column:2; }
.drive-pad button:nth-child(2) { grid-column:1; }
.cockpit-view .title-card { opacity:0; pointer-events:none; }
@media(max-width:600px) {
  .controls { grid-template-columns:auto auto; gap:5px; }
  .controls button { padding:0.6rem; }
  .drive-controls { left:0.8rem; bottom:0.8rem; }
  .drive-controls p { max-width:135px; font-size:9px; }
  .drive-pad { grid-template-columns:repeat(3,36px); gap:4px; }
  .drive-pad button { height:36px; }
}

.cockpit-view #scene { cursor:grab; touch-action:none; }
.cockpit-view #scene.looking { cursor:grabbing; }
@media(max-width:600px) {
  .cockpit-view .controls p { display:block; font-size:8px; letter-spacing:0; }
}

.atmosphere-panel { position:absolute; z-index:5; right:clamp(1rem,3vw,2.5rem); top:clamp(1rem,3vw,2rem); width:260px; padding:16px 18px; border:1px solid #fff0ca44; border-radius:15px; background:#292c2bd9; backdrop-filter:blur(12px); color:#fff2cc; font:12px system-ui,sans-serif; }
.atmosphere-panel summary { cursor:pointer; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; }
.atmosphere-panel label { display:flex; justify-content:space-between; gap:8px; margin-top:19px; }
.atmosphere-panel output { color:#eabd84; font-size:11px; }
.atmosphere-panel input { width:100%; margin:10px 0 0; accent-color:#e4ab66; cursor:pointer; }
.atmosphere-panel input:focus-visible { outline:2px solid #fff2cc; outline-offset:4px; }
@media(max-width:600px) {
  .atmosphere-panel { width:190px; padding:12px; right:0.8rem; top:0.8rem; }
  .atmosphere-panel label { flex-wrap:wrap; margin-top:12px; }
  .atmosphere-panel summary { font-size:10px; }
  .title-card { max-width:calc(100% - 215px); }
  .title-card h1 { font-size:26px; }
}

.atmosphere-panel { max-height:calc(100% - 180px); overflow:auto; }

.join-raidguild { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; margin-bottom:4px; border:1px solid #fff0ca55; border-radius:999px; background:#292c2bd9; color:#f5c78a; font:500 11px system-ui,sans-serif; text-decoration:none; }
.join-raidguild:hover { color:#fff2cc; background:#6f553b; }
.join-raidguild:focus-visible { outline:2px solid #fff2cc; outline-offset:3px; }

.cockpit-radio-controls { display:none; border-top:1px solid #fff0ca33; margin-top:16px; }
.cockpit-view .cockpit-radio-controls { display:block; }

.audio-description { color:#eabd84; font-size:10px; margin:14px 0 0; }

#radio-channel:focus-visible { outline:2px solid #fff2cc; outline-offset:3px; }
.radio-display { padding:10px; margin:10px 0 0; border-radius:5px; background:#151e1b; color:#dab979; font:11px monospace; letter-spacing:.04em; }

.radio-stations { display:flex; justify-content:space-between; color:#eabd84; font:10px monospace; padding:0 3px; }
/* Compact instrument dials on every screen size. */
.atmosphere-panel { width:220px; padding:14px; max-height:calc(100% - 100px); }
.dial-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 6px; margin-top:18px; }
.dial-button { appearance:none; border:0; padding:4px; background:none; color:#f8e4ba; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; font:11px system-ui,sans-serif; min-width:0; }
.dial-face { display:block; width:46px; height:46px; border-radius:50%; border:2px solid #ac8f60; background:radial-gradient(circle at 35% 28%,#657068,#323b35 65%); box-shadow:0 3px 0 #121914,0 0 0 4px #151d18; position:relative; transform:rotate(var(--dial-angle)); }
.dial-pointer { position:absolute; width:3px; height:13px; top:4px; left:20px; background:#f0c17b; border-radius:3px; }
.dial-value { color:#eabd84; font:10px monospace; min-height:12px; }
.dial-button:hover .dial-face,.dial-button[aria-expanded=true] .dial-face { border-color:#ffdb9e; box-shadow:0 3px 0 #121914,0 0 0 4px #635035; }
.dial-button:focus-visible { outline:2px solid #f0c17b; border-radius:8px; }
.dial-hint { font:10px system-ui,sans-serif; text-align:center; color:#d0b98f; margin:14px 0 0; }
.radio-dial { display:none; }.cockpit-view .radio-dial { display:flex; }
.settings-actions { display:grid; gap:7px; margin-top:16px; border-top:1px solid #fff0ca33; padding-top:12px; }
.settings-actions button,.camera-access { border:1px solid #fff0ca55; border-radius:20px; background:#292c2be8; padding:10px 12px; color:#fff2cc; cursor:pointer; font:11px system-ui,sans-serif; }
.dial-popup { position:fixed; z-index:10; width:44px; height:163px; padding:8px 4px; border:1px solid #b4986a; border-radius:24px; background:#242d27f5; box-shadow:0 4px 12px #0005; }
.dial-popup[hidden],.dial-popup label,.dial-popup output,.dial-popup .radio-display { display:none; }
.dial-popup input[type=range] { writing-mode:vertical-lr; direction:rtl; width:34px; height:145px; margin:0; display:block; accent-color:#e6b979; cursor:ns-resize; touch-action:none; }
.dial-popup input:focus-visible { outline:1px solid #e6b979; outline-offset:2px; border-radius:18px; }
@media(max-width:600px) {
 .atmosphere-panel { right:12px; top:max(12px,env(safe-area-inset-top)); width:200px; max-height:calc(100% - 145px); }
 .atmosphere-panel:not([open]) { width:112px; }
 .camera-access { position:absolute; z-index:6; top:max(12px,env(safe-area-inset-top)); left:12px; min-height:42px; }
 .title-card { top:78px; max-width:calc(100% - 32px); pointer-events:none; }
 .title-card h1 { font-size:30px; }
 .title-card .eyebrow { font-size:9px; }
 .drive-controls { bottom:calc(92px + env(safe-area-inset-bottom)); }
 .controls { display:none; }
 .dial-grid { gap:10px 4px; }
}

.dial-button { touch-action:none; user-select:none; cursor:ns-resize; }
.dial-button.dial-dragging { cursor:grabbing; }

.radio-dial-row { display:none; grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; border-top:1px solid #fff0ca33; margin-top:2px; padding-top:14px; }
.cockpit-view .radio-dial-row { display:grid; }