* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000; color: #f3efe8;
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
#cam { position: fixed; width: 2px; height: 2px; opacity: 0; pointer-events: none; left: 0; top: 0; }
[hidden] { display: none !important; }

/* start screen */
#start {
  position: fixed; inset: 0; display: grid; place-items: center; text-align: center;
  background: radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,.05), rgba(0,0,0,.55));
  transition: opacity .6s ease; z-index: 5;
}
#start.gone { opacity: 0; pointer-events: none; }
.start-inner { padding: 24px; max-width: 420px; margin-top: -6vh; }
.title {
  margin: 0; font-size: clamp(48px, 15.5vw, 104px); line-height: .88; letter-spacing: -.04em; font-weight: 900;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 14px 26px rgba(0,0,0,.8));
}
.title span {
  display: block; padding-bottom: .06em;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,90,210,.55) 45%, rgba(90,220,255,.55) 50%, rgba(255,230,100,.5) 55%, transparent 62%) 120% 0 / 300% 100% no-repeat,
    linear-gradient(178deg, #f4f1ea 0%, #b9b5ad 30%, #2a2826 47%, #0a0a0a 55%, #5a5752 80%, #1a1918 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s ease-in-out infinite;
}
@keyframes sheen { 0%,100% { background-position: 120% 0, 0 0 } 50% { background-position: -20% 0, 0 0 } }
.sub { margin: 18px 0 30px; font-size: 18px; color: rgba(255,250,240,.85); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.go {
  font: inherit; font-size: 19px; font-weight: 700; color: #fff; border: 0; cursor: pointer;
  padding: 17px 38px; border-radius: 999px;
  background: radial-gradient(120% 140% at 30% 20%, #3a3a3a, #050505 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -6px 14px rgba(0,0,0,.8), 0 8px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
  animation: pulse 2.4s ease-in-out infinite;
}
.go:active { transform: scale(.97); }
@keyframes pulse { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -6px 14px rgba(0,0,0,.8), 0 8px 40px rgba(120,200,255,.25), 0 0 0 1px rgba(255,255,255,.2); } }
.fine { margin-top: 26px; font-size: 13px; color: rgba(255,250,240,.6); text-shadow: 0 1px 6px #000; }

/* controls */
#hud {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 4;
  bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 6px; padding: 6px;
  border-radius: 22px; background: rgba(10,10,10,.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 30px rgba(0,0,0,.35);
}
.b {
  appearance: none; border: 0; background: transparent; color: #f3efe8; cursor: pointer;
  width: 58px; height: 56px; border-radius: 16px; display: grid; place-items: center; gap: 0;
  padding: 7px 0 5px; font: 600 10.5px/1 inherit; font-family: inherit; letter-spacing: .02em;
}
.b svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.b svg .wave { stroke-width: 2; fill: none; }
.b svg .hole { fill: rgba(10,10,10,.9); }
.b span { opacity: .8; }
.b:active { background: rgba(255,255,255,.12); }
.b[aria-pressed="true"] { background: linear-gradient(160deg, rgba(255,120,220,.28), rgba(90,210,255,.24) 50%, rgba(255,220,90,.22)); }
#bDrips[aria-pressed="false"] svg, #bSound[aria-pressed="false"] svg { opacity: .45; }
#bSound[aria-pressed="false"] .wave { display: none; }

#toast {
  position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top)); transform: translate(-50%, -8px);
  z-index: 6; padding: 10px 16px; border-radius: 14px; background: rgba(10,10,10,.6); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 14px; text-align: center;
  opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; max-width: 92vw; white-space: nowrap;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 7; transition: opacity .4s; }
#flash.on { opacity: .8; transition: none; }

/* WebXR dom overlay */
#xr-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.pill {
  position: absolute; left: 50%; transform: translateX(-50%); pointer-events: auto;
  font: 600 15px/1 -apple-system, Roboto, sans-serif; color: #fff; border: 0; padding: 13px 20px; border-radius: 999px;
  background: rgba(10,10,10,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
#xrExit { top: calc(16px + env(safe-area-inset-top)); }
.hint { bottom: 30px; pointer-events: none; white-space: nowrap; }