:root {
  --accent: #cfe3ff;
  --dim: rgba(255, 255, 255, 0.4);
  --faint: rgba(255, 255, 255, 0.15);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background: #000;
  color: var(--accent);
  color-scheme: dark;
  font-family: -apple-system, "SF Pro", Inter, system-ui, sans-serif;
  font-weight: 200;
  overflow: hidden;
  overflow-x: clip;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  position: fixed;
  inset: 0;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  pointer-events: none;
  z-index: 0;
}

#sky::-webkit-media-controls,
#sky::-webkit-media-controls-start-playback-button,
#sky::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

#bore {
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 1px solid rgba(207, 227, 255, 0.35);
  border-radius: 50%;
}

#bore[hidden] { display: none !important; }

#reticle {
  position: fixed;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#reticle .sight,
#reticle .lockheart {
  display: block;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#reticle .sight {
  width: 100%;
  height: 100%;
}

#reticle .lockheart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  height: 86%;
  transform: translate(-50%, -50%);
  opacity: 0;
  fill: rgba(207, 227, 255, 0.22);
}

#ring .heart {
  opacity: 0;
  fill: rgba(207, 227, 255, 0.14);
}

#reticle .burst {
  position: absolute;
  inset: -36px;
  pointer-events: none;
}

#reticle .burst svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: 0;
  fill: var(--accent);
  stroke: none;
  opacity: 0;
}

#reticle.pop .burst svg {
  animation: heart-drift 1.25s ease-out forwards;
}

#reticle.pop .burst svg:nth-child(1) { --x: -22px; --y: -42px; animation-delay: 0.02s; }
#reticle.pop .burst svg:nth-child(2) { --x: 20px; --y: -38px; animation-delay: 0.08s; }
#reticle.pop .burst svg:nth-child(3) { --x: -32px; --y: -18px; animation-delay: 0.12s; }
#reticle.pop .burst svg:nth-child(4) { --x: 30px; --y: -16px; animation-delay: 0.16s; }
#reticle.pop .burst svg:nth-child(5) { --x: 4px; --y: -50px; animation-delay: 0.05s; }

#hud {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}

#app {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

body.live #hint,
body.live #readout,
body.live #note,
body.live #lockmsg {
  text-shadow: 0 0 10px #000, 0 1px 2px #000;
}

body.live #bore { display: block; }
body.live.on-star #mark { opacity: 0; }
body.locked #mark { opacity: 1; }

body.live #mark {
  width: min(22vw, 88px);
  height: min(22vw, 88px);
}

body.live #hint {
  top: calc(50% + min(11vw, 44px) + 0.55rem);
}

body.live #lockmsg {
  top: calc(50% + min(11vw, 44px) + 2.1rem);
}

.locked #reticle .sight { animation: pulse 1.4s ease-out 1; }
.locked #reticle .spark,
.locked #ring .spark { opacity: 0; }
.locked #reticle .lockheart,
.locked #ring .heart { opacity: 1; }
#reticle.pop .lockheart { animation: heart-in 0.55s ease-out; }

[hidden] { display: none !important; }

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
}

#app.active {
  justify-content: flex-end;
}

#title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  width: min(22rem, 100%);
  text-align: center;
}

#title h1 {
  margin: 0;
  font-weight: 200;
  font-size: 2.1rem;
  letter-spacing: 0.32em;
  font-variant: small-caps;
}

#title p {
  margin: 0;
  max-width: 20rem;
  color: var(--dim);
  font-weight: 200;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  line-height: 1.55;
}

#title .aside {
  color: var(--faint);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-variant: small-caps;
}

.pill {
  appearance: none;
  border: 1px solid rgba(207, 227, 255, 0.35);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 300;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

#seek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: min(100%, 22rem);
  max-width: 100%;
}

#mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(58vw, 240px);
  height: min(58vw, 240px);
  margin: 0;
  transform: translate(-50%, -50%);
  stroke: var(--accent);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.22 + var(--warm, 0) * 0.78);
  transition: opacity 0.2s linear;
}

#needle,
#ring {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

#needle {
  transform-origin: 50px 50px;
  transform-box: view-box;
  transition: transform 0.16s linear, opacity 0.45s ease;
}

#ring {
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 0.45s ease;
}

#hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + min(29vw, 120px) + 0.4rem);
  margin: 0;
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  font-variant: small-caps;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#lockmsg {
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(50% + min(29vw, 120px) + 2.6rem);
  margin: 0;
  text-align: center;
  font-weight: 200;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--accent);
  overflow-wrap: anywhere;
}

#lockmsg[hidden] { display: none !important; }

#readout {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem 1.5rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  font-variant: small-caps;
  transition: opacity 0.45s ease;
}

#note,
#calib,
#err {
  margin: 0;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  font-variant: small-caps;
  text-align: center;
}

#err:empty { display: none; }

#calib { color: rgba(207, 227, 255, 0.28); }

.desktop #mark {
  opacity: 0;
}

.tick #needle {
  filter: drop-shadow(0 0 8px rgba(207, 227, 255, 0.7));
}

.below #hint { opacity: 0.55; }

.locked #needle { opacity: 0; }
.locked #ring {
  opacity: 1;
  animation: pulse 1.15s ease-out 1;
}
.locked #readout,
.locked #note,
.locked #calib { opacity: 0.15; }
.locked #hint {
  letter-spacing: 0.22em;
  font-weight: 200;
}

@keyframes pulse {
  0% { filter: drop-shadow(0 0 0 transparent); }
  35% { filter: drop-shadow(0 0 10px rgba(207, 227, 255, 0.55)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

@keyframes heart-in {
  0% { transform: translate(-50%, -50%) scale(0.55); }
  70% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes heart-drift {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.35);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  #needle,
  #ring,
  #readout,
  #note,
  #calib { transition: none; }
  .tick #needle { filter: none; }
  #mark { transition: none; }
  #reticle.pop .burst svg,
  #reticle.pop .lockheart { animation: none; }
}