:root {
  --ink: #f4f3ef;
  --ink-dim: rgba(244, 243, 239, 0.6);
  --accent: #2f5fb3;
  --warn: #e8b93f;
  --bg: #14161a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden; /* content is sized to fit one screen, not scrolled */
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — accounts for mobile browser chrome */
  padding: 20px;
}

/* Blurred, scaled-up copy of the cover art, full-bleed behind everything.
   Scaling up hides the sharp edge blur() would otherwise leave at the
   viewport boundary.
   z-index is 0, not -1: a negative z-index here would paint *behind*
   body's own background instead of in front of it (body's background
   acts as part of the canvas paint, not a normal stacking-order layer —
   a well-known gotcha with the fixed-fullscreen-background technique).
   Foreground content instead opts into a stacking context of its own
   (.view below) so it still layers on top. */
#backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(0.55) saturate(1.3);
  transform: scale(1.25);
}

.view {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

/* Nudged up from dead-center — the card reads as too low otherwise,
   especially with the scanning pill/demo banner also competing for space
   at the bottom of the screen. Modest on purpose: the page no longer
   scrolls (see html/body above), so this can't push content off-screen
   on a short viewport. */
#view-player {
  margin-top: -5vh;
}

html[data-view="scan"] #view-scan,
html[data-view="player"] #view-player,
html[data-view="notfound"] #view-notfound,
html[data-view="error"] #view-error {
  display: flex;
}

.logo {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.hint {
  color: var(--ink-dim);
  font-size: 0.9rem;
  max-width: 320px;
  margin: 0;
}

.status {
  font-size: 0.8rem;
  color: var(--ink-dim);
  min-height: 1em;
  margin: 0;
}

/* Persistent "still listening for a card" pill — NFC scanning runs for
   the whole life of the page (see main.js), so this stays visible across
   every view, including on top of the player card, not just the landing
   page. Deliberately low-key: bottom corner, small, dim — a quiet "yes,
   still working" signal, not something competing for attention with the
   cover/title. Sits above .demo-banner (also bottom-fixed) so the two
   don't overlap when both are visible. */
.nfc-indicator {
  position: fixed;
  z-index: 2;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 22, 26, 0.5);
  padding: 4px 12px;
  border-radius: 999px;
  opacity: 0.8;
}

.nfc-indicator .status {
  font-size: 0.7rem;
}

.scan-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: scan-pulse 1.6s ease-out infinite;
}

@keyframes scan-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 95, 179, 0.5);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(47, 95, 179, 0);
  }
}

.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Share-card look: a dark box holding the full-definition cover + title/
   artist, floating over the blurred full-bleed copy of the same image
   (#backdrop) — never blurred or pixelated itself, the contrast with the
   on-device UI's byte-budget-constrained cover art is the point. */
.player-card {
  width: min(86vw, 62dvh, 380px);
  background: rgba(17, 18, 21, 0.94);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  text-align: left;
}

.cover-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  line-height: 0;
}

#cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Shown only when the browser blocked unprompted audio (autoplay policy —
   near-certain the first time the page is opened cold from a QR scan).
   Not a playback control, just a one-time nudge: any tap/touch anywhere
   on the page resumes it (see main.js playWhenReady), and this hides
   itself once that happens. */
.tap-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  pointer-events: none;
}

.player-info {
  padding: 18px 4px 2px;
}

#view-player h1 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}

#view-player #recipient {
  color: var(--ink-dim);
  margin: 0;
  font-size: 0.95rem;
}

#message {
  font-style: italic;
  color: var(--ink-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 10px 0 0;
  padding: 10px 0 0;
  font-size: 0.85rem;
}

.progress {
  margin-top: 14px;
}

.progress-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--ink);
  border-radius: 999px;
}

.progress-times {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--ink-dim);
}

.player-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.hidden {
  display: none !important;
}

.demo-banner {
  position: fixed;
  z-index: 1;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--warn);
  background: rgba(232, 185, 63, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0;
}