:root {
  --night: #0C0A09;
  --ink: #140F0C;
  --cream: #F4EFE7;
  --cream-dim: rgba(244, 239, 231, 0.62);
  --cream-mute: rgba(244, 239, 231, 0.42);
  --accent: #E8A65A;
  --label: #F0C48A;
  --label-ink: #2A1C0C;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #14110F; color: var(--cream); }
body {
  font-family: "Instrument Sans", Geist, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
}
button, a { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
img { display: block; }

#frame {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  overflow: hidden;
  background: var(--night);
  isolation: isolate;
  touch-action: none;
}
@media (min-width: 500px) {
  body { background: #1A1612; }
  #app {
    width: 390px;
    height: min(844px, 100dvh);
    max-height: 844px;
    border-radius: 42px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.06),
      0 40px 80px rgba(0,0,0,0.55);
  }
}

.wash, .wash-b {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: opacity, background;
}
.wash {
  background:
    radial-gradient(ellipse 90% 70% at 50% 28%, rgba(232,166,90,0.38), transparent 68%),
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(232,166,90,0.18), transparent 62%),
    var(--night);
}

.top {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 8;
  padding: calc(10px + var(--safe-top)) 16px 0;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}
.back {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--cream);
  border-radius: 50%;
}
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: Geist, "Instrument Sans", sans-serif;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
}
.brand-pin {
  width: 22px;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}
.badge {
  justify-self: end;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-mute);
  border-radius: 999px;
  padding: 5px 8px;
  box-shadow: inset 0 0 0 1px rgba(244,239,231,0.14);
}

.copy {
  position: absolute;
  left: 24px; right: 24px;
  top: calc(62px + var(--safe-top));
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.ask, .tonight {
  will-change: transform, opacity;
}
.ask {
  font-family: "Instrument Serif", Fraunces, serif;
  font-style: italic;
  font-size: 23px;
  line-height: 1.2;
  color: var(--cream);
}
.hint-top {
  margin-top: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cream-mute);
  will-change: opacity;
}
.tonight {
  position: absolute;
  left: 0; right: 0;
  top: 56px;
  font-family: "Instrument Serif", Fraunces, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--cream-dim);
  opacity: 0;
  transform: translateY(8px);
}

.word-stage {
  position: absolute;
  left: 12px; right: 12px;
  top: calc(132px + var(--safe-top));
  height: 108px;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Fraunces, serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: 88px;
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--cream);
  text-align: center;
  will-change: transform, opacity;
  white-space: nowrap;
}
.word.is-long { font-size: 46px; letter-spacing: -0.04em; }
.word.is-mid { font-size: 64px; letter-spacing: -0.042em; }

.vinyl-wrap {
  position: absolute;
  left: 0; right: 0;
  top: calc(248px + var(--safe-top));
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}
.vinyl {
  width: 248px;
  height: 248px;
  position: relative;
  will-change: transform;
}
.disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  will-change: transform;
  background:
    radial-gradient(circle at 50% 50%,
      #2a2a2a 0 31%,
      #111 32%,
      #1a1a1a 33%,
      #0e0e0e 34.2%,
      #191919 35.4%,
      #0d0d0d 36.6%,
      #181818 37.8%,
      #0c0c0c 39%,
      #171717 40.2%,
      #0b0b0b 41.4%,
      #161616 42.6%,
      #0a0a0a 43.8%,
      #151515 45%,
      #0a0a0a 46.2%,
      #141414 47.4%,
      #090909 48.6%,
      #131313 49.8%,
      #090909 51%,
      #121212 52.2%,
      #080808 53.4%,
      #111 54.6%,
      #080808 55.8%,
      #101010 57%,
      #070707 58.2%,
      #101010 59.4%,
      #070707 60.6%,
      #0f0f0f 61.8%,
      #060606 63%,
      #0e0e0e 64.2%,
      #060606 65.4%,
      #0d0d0d 66.6%,
      #050505 68%,
      #0c0c0c 70%,
      #050505 100%);
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 5px rgba(12,10,9,0.9),
    0 28px 50px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    transparent 0 8%,
    rgba(255,255,255,0.07) 14%,
    transparent 22% 55%,
    rgba(255,255,255,0.03) 62%,
    transparent 72% 100%);
  pointer-events: none;
}
.label {
  position: absolute;
  inset: 29%;
  border-radius: 50%;
  background: var(--label);
  box-shadow:
    inset 0 0 0 7px color-mix(in srgb, var(--label) 70%, #000 30%),
    0 2px 6px rgba(0,0,0,0.25);
  will-change: background;
  pointer-events: none;
}
.label-word {
  position: absolute;
  left: 0; right: 0;
  top: 10px;
  text-align: center;
  font-family: Fraunces, serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--label-ink);
}
.spindle {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--night);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--label-ink) 35%, transparent),
    inset 0 1px 2px rgba(0,0,0,0.6);
}

.tap-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(214px + var(--safe-bot));
  z-index: 6;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
  pointer-events: none;
  will-change: transform, opacity;
}
.tap-hint::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 6px rgba(244,239,231,0.12);
  transform: translateY(-1px);
}

.confirm {
  position: absolute;
  left: 22px; right: 22px;
  bottom: calc(36px + var(--safe-bot));
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(16px);
}
.confirm.is-on { pointer-events: auto; }
.confirm-sub {
  font-family: "Instrument Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cream-dim);
  text-align: center;
  margin-bottom: 6px;
}
.pill {
  height: 56px;
  border-radius: 999px;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.02em;
  display: grid;
  place-items: center;
  will-change: transform;
}
.pill.primary {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 16px 32px rgba(0,0,0,0.28);
}
.pill.ghost {
  background: rgba(244,239,231,0.08);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(244,239,231,0.16);
}
.press:active { transform: scale(0.97); }

.wheel-dock {
  position: absolute;
  left: 50%;
  bottom: calc(-424px + var(--safe-bot));
  transform: translateX(-50%);
  z-index: 6;
  width: 620px;
  height: 620px;
  will-change: transform, opacity;
}
.wheel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  touch-action: none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}
.wheel-rot {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.wedge-label {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.thumb {
  position: absolute;
  left: 50%;
  top: 96px;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background: #FBF7F0;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.28),
    0 0 0 6px rgba(251,247,240,0.18);
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}

.footnote {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(8px + var(--safe-bot));
  z-index: 3;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,239,231,0.28);
  pointer-events: none;
}

#app[data-mode="confirm"] .footnote { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .word, .vinyl, .wheel-dock, .confirm, .ask, .tonight, .tap-hint, .hint-top, .vinyl-wrap {
    will-change: auto;
  }
}