:root {
  color-scheme: dark;
  --gold: #ffc76a;
  --line: rgba(255, 221, 157, .27);
}

* { box-sizing: border-box; }

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

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.experience {
  position: fixed;
  inset: 0;
  isolation: isolate;
  background: radial-gradient(circle at 50% 48%, #0f0904 0, #020205 42%, #000 100%);
}

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

.fallback {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
}

.no-webgl .fallback { display: grid; }
.no-webgl #blackhole { display: none; }

.fallback img {
  width: min(42vw, 42vh, 460px);
  filter: drop-shadow(0 0 42px rgba(255, 164, 50, .65));
  animation: float 7s ease-in-out infinite;
}

.fallback-ring {
  position: absolute;
  width: min(75vw, 75vh, 760px);
  aspect-ratio: 1;
  border: 9px solid rgba(255, 159, 38, .75);
  border-radius: 50%;
  transform: rotateX(70deg);
  box-shadow: 0 0 28px #ff7a18, inset 0 0 22px #ffd991;
  animation: spin 4s linear infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 36%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.72) 118%);
}

.grain {
  position: absolute;
  inset: -50%;
  opacity: .032;
  pointer-events: none;
  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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain .3s steps(2) infinite;
}

.actions {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.action {
  appearance: none;
  min-width: 112px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff8e8;
  background: linear-gradient(180deg, rgba(30, 22, 14, .7), rgba(8, 7, 7, .78));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 40px rgba(0,0,0,.36);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  font: 650 .78rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.action svg { width: 15px; height: 15px; fill: currentColor; }
.action:hover { transform: translateY(-2px); border-color: rgba(255,211,123,.6); background: rgba(48,31,16,.72); box-shadow: 0 10px 34px rgba(255,125,26,.12); }
.action:active { transform: translateY(0) scale(.98); }
.action:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.action.disabled { opacity: .45; pointer-events: none; }

.status {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px));
  margin: 0;
  color: rgba(255,240,210,.76);
  font-size: .78rem;
  letter-spacing: .06em;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .2s ease;
  white-space: nowrap;
}

.status.show { opacity: 1; }

@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(2%,-3%); } 50% { transform: translate(-3%,2%); } 75% { transform: translate(3%,4%); } }
@keyframes float { 50% { transform: translateY(-8px) scale(1.012); } }
@keyframes spin { to { transform: rotateX(70deg) rotateZ(360deg); } }

@media (max-width: 560px) {
  .actions { bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px)); }
  .action { height: 42px; min-width: 104px; padding: 0 15px; }
  .status { bottom: max(70px, calc(env(safe-area-inset-bottom) + 64px)); }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .fallback img, .fallback-ring { animation: none; }
  .action { transition: none; }
}