:root {
  --ink: #fff4dc;
  --gold: #f6c86a;
  --night: #070a18;
  --glass: rgba(10, 14, 32, 0.42);
  --line: rgba(246, 200, 106, 0.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink); }
body.idle { cursor: none; }

/* splash art: two layers crossfading, slow drift */
.art { position: fixed; inset: -6%; background: center / cover no-repeat; opacity: 0;
  filter: brightness(.42) saturate(1.1) blur(1.5px); transition: opacity 6s ease;
  animation: drift 90s ease-in-out infinite alternate; will-change: transform, opacity; }
.art.on { opacity: 1; }
@keyframes drift {
  0% { transform: scale(1.02) translate(0, 0); }
  50% { transform: scale(1.1) translate(-2%, 1%); }
  100% { transform: scale(1.06) translate(2%, -1.5%); }
}
.vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(4, 6, 16, .55) 75%, rgba(4, 6, 16, .92) 100%); }
#fluid, #sky { position: fixed; inset: 0; width: 100%; height: 100%; }
#fluid { mix-blend-mode: screen; }

/* intro: a single meep orb; its ring fills while the sounds load */
.intro { position: fixed; inset: 0; display: grid; place-items: center; z-index: 5;
  background: radial-gradient(ellipse at center, rgba(7, 10, 24, .2), rgba(7, 10, 24, .8));
  transition: opacity 2.5s ease, visibility 2.5s; }
.intro.gone { opacity: 0; visibility: hidden; }
.orb { position: relative; width: 112px; height: 112px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 38% 34%, #fffaf0, #fff0cd 45%, #f1d49a 80%);
  box-shadow: 0 0 60px rgba(246, 200, 106, .45), 0 0 140px rgba(246, 200, 106, .2);
  transition: transform .4s ease, box-shadow .4s ease; }
.orb::before { content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p) * 1turn), rgba(255, 244, 220, .12) 0);
  -webkit-mask: radial-gradient(circle, transparent 62px, #000 63px, #000 65px, transparent 66px);
          mask: radial-gradient(circle, transparent 62px, #000 63px, #000 65px, transparent 66px);
  transition: opacity .8s; }
.orb .stripe { position: absolute; left: 6px; top: 22px; width: 30px; height: 68px; border-radius: 50%;
  border-right: 7px solid #d6782f; }
.orb:disabled { cursor: progress; filter: saturate(.7) brightness(.85); }
.orb:not(:disabled) { animation: breathe 3.2s ease-in-out infinite; }
.orb:not(:disabled)::before { opacity: 0; }
.orb:not(:disabled):hover { transform: scale(1.06); box-shadow: 0 0 80px rgba(246, 200, 106, .65), 0 0 180px rgba(246, 200, 106, .3); }
@keyframes breathe { 50% { transform: scale(1.05); box-shadow: 0 0 80px rgba(246, 200, 106, .6), 0 0 170px rgba(246, 200, 106, .28); } }

/* controls (icons only) */
.hud { position: fixed; z-index: 4; transition: opacity 1.2s ease; }
.hud.hidden, body.idle .hud { opacity: 0; pointer-events: none; }
.controls { right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .4rem;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .5rem; }
.controls button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.controls button:hover { background: rgba(246, 200, 106, .14); }
.controls svg { width: 20px; height: 20px; fill: currentColor; }
.vol { display: flex; align-items: center; gap: .4rem; padding: 0 .4rem; color: var(--ink); }
.vol input { width: 96px; accent-color: var(--gold); }
@media (max-width: 640px) {
  .controls { right: 50%; transform: translateX(50%); }
  .vol input { width: 72px; }
}
@media (prefers-reduced-motion: reduce) { .art, .orb { animation: none !important; } }