* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  overscroll-behavior: none; touch-action: none; background: #000;
  -webkit-text-size-adjust: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body { position: fixed; inset: 0; }
#scene { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
button, input, label, .video-item { touch-action: manipulation; }

/* ---------- Loading ---------- */
#loading {
  position: fixed; inset: 0; background: radial-gradient(ellipse at center, #1a0a0a 0%, #05000a 80%);
  display: flex; align-items: center; justify-content: center; z-index: 100; transition: opacity .6s ease;
}
#loading.hidden { opacity: 0; pointer-events: none; }
.loading-card { text-align: center; color: #e8c26a; }
.reel { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid #3a2210; border-top-color: #e8c26a; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

/* ---------- Crosshair ---------- */
#crosshair {
  position: fixed; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 0 2px rgba(0,0,0,.8);
  z-index: 20; pointer-events: none; display: none;
}
body.pointer-locked #crosshair, body.playing.is-touch #crosshair { display: block; }

/* ---------- Prompt ---------- */
#prompt {
  position: fixed; bottom: 14%; left: 50%; transform: translateX(-50%);
  background: rgba(10,8,14,.72); color: #f2e6c8; padding: 10px 18px; border-radius: 8px;
  font-size: 15px; letter-spacing: .02em; border: 1px solid rgba(232,194,106,.35);
  z-index: 25; pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
#prompt.show { opacity: 1; }

/* ---------- Click to play ---------- */
#click-to-play {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
#click-to-play.hidden { display: none; }
.ctp-card { text-align: center; color: #fff; padding: 28px 34px; background: rgba(20,10,18,.85); border-radius: 14px; border: 1px solid rgba(232,194,106,.3); max-width: 90vw; }
.ctp-card h1 { margin: 0 0 10px; font-size: 26px; color: #e8c26a; letter-spacing: .04em; }
.ctp-card p { margin: 0 0 18px; font-size: 13px; line-height: 1.6; opacity: .85; }
#enter-btn { background: linear-gradient(180deg,#c9a24a,#8a6a24); color: #241608; border: none; padding: 12px 26px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: .03em; }
#enter-btn:active { transform: translateY(1px); }

@media (hover:none) and (pointer:coarse) {
  #click-to-play .ctp-card p { display: none; }
  #click-to-play::after { content: 'Tap to enter'; position:absolute; bottom: 30px; color:#e8c26a; font-size:12px; opacity:.7; }
}

/* ---------- Mobile joystick (LEFT side, invisible until touch) ---------- */
#joystick-zone {
  position: fixed; left: 0; top: 0; width: 45%; height: 100%; z-index: 30; display: none; touch-action: none;
}
body.playing.is-touch #joystick-zone { display: block; }
#joystick-base {
  position: absolute; width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.18);
  opacity: 0; transition: opacity .12s ease; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
}
#joystick-base.active { opacity: 1; }
#joystick-nub {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.5);
}

/* ---------- Mobile look zone (RIGHT side) ---------- */
#look-zone { position: fixed; right: 0; top: 0; width: 55%; height: 100%; z-index: 29; display: none; touch-action: none; }
body.playing.is-touch #look-zone { display: block; }

/* ---------- Universal HUD buttons ---------- */
#mobile-buttons {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 55; display: none; flex-direction: row; gap: 10px; align-items: center;
}
body.playing #mobile-buttons { display: flex; }
body.panel-open #mobile-buttons { display: none; }
body.is-touch #mobile-buttons { flex-direction: column; }
.round-btn {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(20,14,10,.6); color: #f2e6c8;
  border: 1px solid rgba(232,194,106,.4); font-size: 11px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  backdrop-filter: blur(5px);
}
#sit-btn { font-weight: 700; }
#embed-input-btn.player-active { background: rgba(232,194,106,.88); color: #241608; border-color: #f4d589; }
#embed-input-btn[hidden] { display: none; }

/* ---------- Video control panel ---------- */
#video-panel {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: min(92vw, 420px); background: rgba(14,10,10,.92); border: 1px solid rgba(232,194,106,.3);
  border-radius: 14px; color: #f2e6c8; z-index: 60; overflow: hidden; overscroll-behavior: contain;
  touch-action: manipulation; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
#video-panel.hidden { display: none; }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(232,194,106,.08); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.panel-header button { background: none; border: none; color: #f2e6c8; font-size: 15px; cursor: pointer; }
.panel-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
#video-list { display: flex; flex-direction: column; gap: 6px; max-height: 120px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.video-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; cursor: pointer; display: flex; justify-content: space-between; }
.video-item:hover, .video-item.active { background: rgba(232,194,106,.15); border-color: rgba(232,194,106,.4); }
.panel-row { display: flex; gap: 8px; align-items: center; }
/* 16px is the floor: iPhone Safari zooms the whole page into any smaller text box on focus, and with the
   look/joystick zones owning every touch there was no way to pinch back out. min-width:0 lets the box shrink
   so the Play URL button beside it stays on screen instead of being cut off by the panel's edge. */
#video-url { flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 16px; }
#video-url { user-select: text; }
#load-url-btn, .upload-label { background: rgba(232,194,106,.18); border: 1px solid rgba(232,194,106,.4); color: #f2e6c8; padding: 8px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; }
#video-status { min-height: 2.7em; color: rgba(242,230,200,.72); font-size: 11px; line-height: 1.35; }
#video-status.error { color: #ff9ea8; }
#video-upload { display: none; }
.transport { gap: 10px; }
.transport button { background: none; border: none; color: #f2e6c8; font-size: 18px; cursor: pointer; }
#seek-bar { flex: 1; }

@media (max-width: 640px) {
  #video-panel { bottom: calc(84px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 120px); overflow-y: auto; }
}
input, select, textarea { font-size: max(16px, 1em); }

/* shared screen */
#stop-btn { background: rgba(255,120,120,.14); border: 1px solid rgba(255,140,140,.45); color: #ffd9d9; padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; min-height: 40px; }
#share-note { color: rgba(242,230,200,.6); font-size: 11px; line-height: 1.35; }
#sound-btn { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60;
  background: #e8c26a; color: #1a1408; border: 0; border-radius: 999px; padding: 12px 20px; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
#sound-btn[hidden], #stop-btn[hidden], #share-note[hidden] { display: none; }