/* ==========================================================================
   PARA EDELLEM MARIA ♥ — Monochromatic Hand-Drawn Stroke Music Player
   Mobile-First • Pure White & Black Ink Sketch Aesthetic
   ========================================================================== */

:root {
  --bg-white: #ffffff;
  --ink-black: #111111;
  --ink-soft: #333333;
  --ink-muted: #666666;
  --ink-faint: rgba(17, 17, 17, 0.12);

  /* Live Audio/Beat Reactive CSS Variables (Updated at 60fps in app.js) */
  --beat-scale: 1;
  --beat-energy: 0;
  --heart-scale: 1;
  --doodle-bounce: 0px;
  --doodle-tilt: 0deg;

  --font-hand: 'Caveat', 'Patrick Hand', cursive;
  --font-sketch: 'Patrick Hand', 'Architects Daughter', cursive;
  --font-note: 'Architects Daughter', cursive;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background-color: var(--bg-white);
  color: var(--ink-black);
  font-family: var(--font-sketch);
  overflow-x: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* Subtle paper texture dots in ultra-faint monochrome on pure white */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.045) 0.75px, transparent 0.75px);
  background-size: 18px 18px;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Frame-by-frame 2D line boil filter classes toggled at ~8fps */
.boil-frame-0 .doodle,
.boil-frame-0 .walkman-svg,
.boil-frame-0 .sketch-play-svg {
  filter: url(#sketch-boil-0);
}
.boil-frame-1 .doodle,
.boil-frame-1 .walkman-svg,
.boil-frame-1 .sketch-play-svg {
  filter: url(#sketch-boil-1);
}
.boil-frame-2 .doodle,
.boil-frame-2 .walkman-svg,
.boil-frame-2 .sketch-play-svg {
  filter: url(#sketch-boil-2);
}

/* ==========================================================================
   STAGE CONTAINER (Mobile-First)
   ========================================================================== */
.stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(48px, env(safe-area-inset-top, 48px)) 34px max(48px, env(safe-area-inset-bottom, 48px));
  z-index: 1;
  overflow: hidden;
}

/* ==========================================================================
   SURROUNDING BEAT-REACTIVE HAND-DRAWN DOODLES
   ========================================================================== */
.ambient-doodles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Keep doodles above the card background so they are always visible on mobile */
  z-index: 10;
  overflow: hidden;
}

.doodle {
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0.32;
  transition: opacity 0.6s ease;
  transform-origin: center center;
  will-change: transform;
}

/* When player is active, surrounding doodles become bold and beat with the music */
.stage.player-mode .doodle {
  opacity: 0.94;
}

.doodle .draw-path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage.intro-ready .doodle .draw-path,
.stage.player-mode .doodle .draw-path {
  stroke-dashoffset: 0;
}

/* Mobile-first perimeter positions: clearly visible around the compact player card */
.doodle-tl {
  top: max(6px, env(safe-area-inset-top, 6px));
  left: 6px;
  width: 48px;
  height: 48px;
  transform: translateY(var(--doodle-bounce)) scale(var(--beat-scale)) rotate(calc(-6deg + var(--doodle-tilt)));
}

.doodle-tc {
  top: max(4px, env(safe-area-inset-top, 4px));
  left: 50%;
  width: 108px;
  height: 38px;
  margin-left: -54px;
  transform: translateY(calc(var(--doodle-bounce) * 0.75)) scale(var(--beat-scale));
}

.doodle-tr {
  top: max(6px, env(safe-area-inset-top, 6px));
  right: 6px;
  width: 48px;
  height: 48px;
  transform: translateY(calc(var(--doodle-bounce) * -0.9)) scale(var(--beat-scale)) rotate(calc(6deg - var(--doodle-tilt)));
}

.doodle-ml {
  top: 26%;
  left: 2px;
  width: 44px;
  height: 66px;
  transform: translateY(var(--doodle-bounce)) scale(var(--beat-scale)) rotate(var(--doodle-tilt));
}

.doodle-mr {
  top: 26%;
  right: 2px;
  width: 44px;
  height: 66px;
  transform: translateY(calc(var(--doodle-bounce) * -1)) scale(var(--beat-scale)) rotate(calc(var(--doodle-tilt) * -1));
}

.doodle-mll {
  top: 58%;
  left: 2px;
  width: 40px;
  height: 54px;
  transform: translateY(calc(var(--doodle-bounce) * -0.85)) scale(var(--beat-scale)) rotate(calc(var(--doodle-tilt) * -0.8));
}

.doodle-mlr {
  top: 58%;
  right: 2px;
  width: 42px;
  height: 54px;
  transform: translateY(var(--doodle-bounce)) scale(var(--beat-scale)) rotate(var(--doodle-tilt));
}

.doodle-bl {
  bottom: max(6px, env(safe-area-inset-bottom, 6px));
  left: 6px;
  width: 58px;
  height: 40px;
  transform: translateY(var(--doodle-bounce)) scale(var(--beat-scale)) rotate(calc(-4deg + var(--doodle-tilt)));
}

.doodle-bc {
  bottom: max(4px, env(safe-area-inset-bottom, 4px));
  left: 50%;
  width: 116px;
  height: 34px;
  margin-left: -58px;
  transform: translateY(calc(var(--doodle-bounce) * -0.65)) scale(var(--beat-scale));
}

.doodle-br {
  bottom: max(6px, env(safe-area-inset-bottom, 6px));
  right: 6px;
  width: 58px;
  height: 40px;
  transform: translateY(calc(var(--doodle-bounce) * -0.8)) scale(var(--beat-scale)) rotate(calc(4deg - var(--doodle-tilt)));
}

/* Floating Beat Particles (Notes & Mini Sketch Hearts spawned on beats) */
.beat-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.beat-particle {
  position: absolute;
  color: var(--ink-black);
  font-family: var(--font-hand);
  font-weight: 700;
  pointer-events: none;
  animation: floatUpSketch 2.3s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes floatUpSketch {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.5) rotate(-10deg);
  }
  20% {
    opacity: 0.85;
    transform: translateY(0px) scale(1.05) rotate(6deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-95px) scale(0.85) rotate(-14deg);
  }
}

/* ==========================================================================
   PHASE 1: HANDWRITTEN INTRO SCREEN
   ========================================================================== */
.intro-screen {
  position: relative;
  width: 100%;
  max-width: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-screen.is-exiting {
  opacity: 0;
  transform: translateY(-22px) scale(0.96);
  pointer-events: none;
}

.intro-screen.is-hidden {
  display: none;
}

.intro-notebook {
  width: 100%;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-flourish {
  width: 155px;
  height: 36px;
  margin-bottom: 18px;
}

.intro-flourish-path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: drawStrokeSlow 1.4s ease forwards 0.15s;
}

@keyframes drawStrokeSlow {
  to {
    stroke-dashoffset: 0;
  }
}

.handwriting-area {
  position: relative;
  width: 100%;
  min-height: 235px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 8px 6px;
}

.hw-line {
  font-family: var(--font-hand);
  font-size: clamp(1.62rem, 6.2vw, 1.95rem);
  font-weight: 600;
  line-height: 1.26;
  color: var(--ink-black);
  letter-spacing: 0.01em;
  min-height: 1.3em;
  position: relative;
}

#hwLine0 {
  font-size: clamp(1.9rem, 7vw, 2.25rem);
  font-weight: 700;
}

.hw-line-highlight {
  display: inline-block;
  align-self: flex-start;
  font-size: clamp(1.8rem, 6.8vw, 2.15rem);
  font-weight: 700;
  padding-bottom: 6px;
}

.hw-underline {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 15px;
  overflow: visible;
}

.hw-underline path {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

.hw-underline.is-drawn path {
  stroke-dashoffset: 0;
}

/* Animated Fountain Pen Nib following the handwriting */
.pen-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  opacity: 0;
  transform: translate(2px, -22px);
  transition: opacity 0.25s ease;
  z-index: 10;
}

.pen-cursor.is-writing {
  opacity: 1;
  animation: penScratch 0.16s infinite alternate ease-in-out;
}

@keyframes penScratch {
  0% {
    transform: translate(2px, -22px) rotate(-3deg);
  }
  100% {
    transform: translate(4px, -25px) rotate(4deg);
  }
}

/* Hand-Drawn Play Button in Intro */
.intro-play-wrapper {
  margin-top: 22px;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.intro-play-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sketch-play-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px;
  color: var(--ink-black);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sketch-play-btn:hover,
.sketch-play-btn:focus-visible {
  transform: scale(1.06);
  outline: none;
}

.sketch-play-btn:active {
  transform: scale(0.92);
}

.sketch-play-svg {
  width: 104px;
  height: 104px;
  overflow: visible;
}

/* Stroke-draw animation when button appears */
.play-circle-1,
.play-circle-2 {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}

.play-triangle,
.play-triangle-shade {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}

.play-ring-outer {
  opacity: 0;
  transform-origin: 60px 60px;
}

.intro-play-wrapper.is-visible .play-circle-1 {
  animation: drawStrokeSlow 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.intro-play-wrapper.is-visible .play-circle-2 {
  animation: drawStrokeSlow 0.95s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.15s;
}

.intro-play-wrapper.is-visible .play-triangle {
  animation: drawStrokeSlow 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.45s;
}

.intro-play-wrapper.is-visible .play-triangle-shade {
  animation: drawStrokeSlow 0.5s ease forwards 0.75s;
}

.intro-play-wrapper.is-visible .play-ring-outer {
  opacity: 0.7;
  animation: spinPulseRing 5s linear infinite 0.7s;
}

/* Exit animation when Play Button is clicked: strokes retract! */
.intro-play-wrapper.is-ClickedExit .play-circle-1,
.intro-play-wrapper.is-ClickedExit .play-circle-2 {
  stroke-dashoffset: 320 !important;
  transition: stroke-dashoffset 0.45s ease-in;
}

.intro-play-wrapper.is-ClickedExit .play-triangle {
  stroke-dashoffset: 160 !important;
  transition: stroke-dashoffset 0.35s ease-in;
}

@keyframes spinPulseRing {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.06);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.intro-play-hint {
  font-family: var(--font-hand);
  font-size: 1.38rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  opacity: 0;
  animation: fadeInPulse 2s ease-in-out infinite;
  animation-delay: 0.8s;
}

@keyframes fadeInPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* ==========================================================================
   PHASE 2 & 3: SPOTIFY-STYLE HAND-DRAWN PLAYER
   ========================================================================== */
.player-screen {
  display: none;
  width: 100%;
  max-width: 304px;
  z-index: 6;
  position: relative;
}

.player-screen.is-active {
  display: block;
}

.player-card {
  position: relative;
  width: 100%;
  background: rgba(255, 255, 255, 0.94);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 14px;
  transition: background-color 0.6s ease;
}

.player-screen.is-walkman-intro .player-card {
  background: transparent;
}

/* Hand-Drawn Card Outer Frame that draws itself when player is assembled at 15.5s */
.card-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.card-stroke-1,
.card-stroke-2 {
  stroke-dasharray: 2100;
  stroke-dashoffset: 2100;
}

.player-screen.is-player-assembled .card-stroke-1 {
  animation: drawStrokeSlow 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.player-screen.is-player-assembled .card-stroke-2 {
  animation: drawStrokeSlow 1.85s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.22s;
}

/* Staggered Construction of Player Elements (Triggered at 15.5s when piano starts) */
.construct-item {
  opacity: 0;
  transform: translateY(12px);
}

.player-screen.is-walkman-intro .construct-item:not(.cover-wrapper) {
  opacity: 0;
  pointer-events: none;
}

.player-screen.is-walkman-intro .cover-wrapper {
  opacity: 1;
  transform: translateY(62px) scale(1.24);
  z-index: 20;
}

.player-screen.is-player-assembled .construct-item {
  animation: constructAppear 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--step, 1) * 0.22s);
}

.player-screen.is-player-assembled .cover-wrapper {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none;
}

@keyframes constructAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animated SVG strokes inside player controls */
.stroke-draw {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}

.player-screen.is-player-assembled .stroke-draw {
  animation: drawStrokeSlow 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s;
}

/* 1. Player Top Header */
.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 4px;
  z-index: 3;
}

.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-black);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.icon-btn:active {
  transform: scale(0.88);
}

.header-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header-kicker {
  font-family: var(--font-note);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.header-dedication {
  font-family: var(--font-hand);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ink-black);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.05;
  position: relative;
}

.mini-inline-heart {
  transform: scale(var(--beat-scale));
  transition: transform 0.08s ease-out;
}

/* 2. Cover Art Box (Walkman/Cassette Stage & Video Stage) */
.cover-wrapper {
  position: relative;
  width: 84%;
  aspect-ratio: 1 / 1;
  max-height: 192px;
  margin: 2px auto;
  z-index: 12;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.cover-corner-doodles {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}

.player-screen.is-player-assembled .cover-corner-doodles {
  opacity: 1;
}

.corner-doodle {
  position: absolute;
  width: 28px;
  height: 28px;
  transform: scale(var(--beat-scale));
  transition: transform 0.08s ease-out;
}

.corner-tl {
  top: 0;
  left: 0;
}
.corner-tr {
  top: 0;
  right: 0;
}
.corner-bl {
  bottom: 0;
  left: 0;
}
.corner-br {
  bottom: 0;
  right: 0;
}

.cover-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: visible;
  border-radius: 8px;
}

.cover-box.video-mode {
  background: var(--bg-white);
  overflow: hidden;
}

.cover-frame-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.cover-frame-path-1,
.cover-frame-path-2 {
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
}

.player-screen.is-player-assembled .cover-frame-path-1 {
  animation: drawStrokeSlow 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.1s;
}

.player-screen.is-player-assembled .cover-frame-path-2 {
  animation: drawStrokeSlow 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

/* STAGE A: 2D/3D Walkman & "Para Edellem" Cassette Stage (00:00 to 00:33) */
.cover-heart-stage {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  overflow: visible;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.cover-box.video-mode .cover-heart-stage {
  opacity: 0;
  transform: scale(1.22);
  pointer-events: none;
}

.walkman-scene {
  position: relative;
  width: 96%;
  height: 96%;
  overflow: visible;
  will-change: transform;
}

.walkman-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform, opacity;
}

.walkman-base-layer {
  z-index: 2;
  transform-origin: 50% 52%;
}

.cassette-layer {
  z-index: 4;
  transform-origin: 50% 47%;
}

.cassette-layer.is-foreground {
  z-index: 30;
}

.walkman-door-layer {
  z-index: 6;
  transform-origin: 50% 71%;
}

.walkman-fg-layer {
  z-index: 8;
}

.walkman-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Handwritten stage caption shown below Walkman during 00:00 - 00:15.5 */
.walkman-stage-caption {
  position: absolute;
  bottom: -34px;
  left: -24px;
  right: -24px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-black);
  line-height: 1.15;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.player-screen.is-walkman-intro .walkman-stage-caption {
  opacity: 1;
  transform: translateY(0);
}

.ecg-line {
  stroke-dasharray: 340;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.player-screen.is-player-assembled .ecg-line {
  opacity: 0.22;
}

.cover-heart-stage.is-beating-window .ecg-line {
  opacity: 0.95 !important;
}

.heart-burst-rays {
  opacity: 0;
  transform-origin: 140px 124px;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.cassette-heart-core {
  opacity: 0.2;
  transform-origin: 0px 0px;
  transition: opacity 0.12s ease, fill 0.12s ease;
}

/* Active Heartbeat Mode (00:25 - 00:33 at 109 BPM) */
.cover-heart-stage.is-beating-window .cassette-heart-core {
  opacity: 0.85;
  fill: #f7d547;
}

.cover-heart-stage.is-beating-window .heart-burst-rays {
  opacity: 0.38;
}

.cover-heart-stage.pulse-hit .heart-burst-rays {
  opacity: 1;
  transform: scale(1.07);
}

.cover-heart-stage.pulse-hit .cassette-heart-core {
  opacity: 1;
  fill: #111111;
}

/* Expanding Hand-Drawn Heart Shockwaves (00:25 - 00:33) */
.heart-shockwaves {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.shockwave-ring {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 2.2px solid var(--ink-black);
  border-radius: 50%;
  opacity: 0.75;
  animation: shockwaveExpand 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shockwaveExpand {
  0% {
    transform: scale(0.65);
    opacity: 0.75;
    border-width: 2.6px;
  }
  100% {
    transform: scale(1.95);
    opacity: 0;
    border-width: 0.8px;
  }
}

/* STAGE B: Looping Hand-Drawn Video Cover (00:33+) */
.cover-video-stage {
  position: absolute;
  inset: 8px;
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
  overflow: hidden;
  border-radius: 4px;
}

.cover-box.video-mode .cover-video-stage {
  opacity: 1;
  transform: scale(1);
  z-index: 5;
}

.cover-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: var(--bg-white);
  /* Ensures white video background merges seamlessly with #ffffff card */
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.08);
  transform: scale(calc(1 + (var(--beat-energy) * 0.035)));
  transition: transform 0.08s ease-out;
}

/* 3. Hand-Drawn Rhythm Equalizer Doodles Row */
.sketch-eq-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 18px;
  padding: 0 6px;
  z-index: 3;
}

.eq-doodle-note {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-black);
  transform: translateY(var(--doodle-bounce)) scale(var(--beat-scale));
}

.sketch-eq-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  height: 16px;
  flex: 1;
  max-width: 170px;
}

.eq-bar {
  width: 2.2px;
  height: 4px;
  background: var(--ink-black);
  border-radius: 99px;
  transition: height 0.07s ease-out;
}

/* 4. Spotify Track Info & Like Heart */
.track-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
  z-index: 3;
}

.track-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.track-title {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.04;
  color: var(--ink-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-artist {
  font-family: var(--font-sketch);
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 1px;
}

.artist-dot {
  opacity: 0.5;
}

.artist-dedication {
  font-family: var(--font-hand);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-black);
  border-bottom: 1.4px solid var(--ink-black);
  line-height: 1;
}

.like-heart-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(var(--beat-scale));
  transition: transform 0.12s ease;
}

.like-heart-btn.is-liked .like-heart-path {
  fill: var(--ink-black);
}

.like-heart-btn:active {
  transform: scale(1.3);
}

/* 5. Synchronized Handwritten Lyric / Moment Strip */
.lyric-strip {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px 6px;
  border-top: 1px dashed rgba(17, 17, 17, 0.18);
  border-bottom: 1px dashed rgba(17, 17, 17, 0.18);
  z-index: 3;
}

.lyric-line {
  font-family: var(--font-hand);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.12;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 6. Hand-Drawn Progress Scrubber Timeline */
.progress-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 1px 2px 0;
  z-index: 3;
}

.progress-bar-container {
  position: relative;
  width: 100%;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.progress-track-svg {
  width: 100%;
  height: 18px;
  overflow: visible;
}

.progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--beat-scale));
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Timeline Markers for 00:25 Heartbeat & 00:33 Video */
.timeline-marker {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  font-size: 0.62rem;
  color: var(--ink-black);
  opacity: 0.75;
  pointer-events: none;
  line-height: 1;
}

.time-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sketch);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.bpm-pill {
  font-family: var(--font-hand);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-black);
  padding: 0 7px;
  border: 1.2px solid rgba(17, 17, 17, 0.35);
  border-radius: 999px;
  transform: scale(var(--beat-scale));
  transition: transform 0.08s ease;
}

/* 7. Spotify Playback Controls Row */
.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 4px 0;
  z-index: 3;
}

.ctrl-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-black);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ctrl-btn:hover {
  transform: scale(1.08);
}

.ctrl-btn:active {
  transform: scale(0.9);
}

.ctrl-secondary {
  opacity: 0.65;
}

.ctrl-secondary.is-active {
  opacity: 1;
}

.active-dot {
  width: 4px;
  height: 4px;
  background: var(--ink-black);
  border-radius: 50%;
  margin-top: 2px;
  opacity: 0;
}

.ctrl-secondary.is-active .active-dot {
  opacity: 1;
}

.ctrl-play-main {
  padding: 1px;
  transform: scale(var(--beat-scale));
}

.main-play-svg {
  width: 52px;
  height: 52px;
}

/* ==========================================================================
   RESPONSIVE ENHANCEMENTS (Larger Phones & Desktop Preview)
   ========================================================================== */
@media (min-width: 520px) {
  .player-screen {
    max-width: 332px;
  }
  .cover-wrapper {
    max-height: 220px;
  }
  .doodle {
    width: 68px;
    height: 68px;
  }
  .doodle-tl {
    top: 8%;
    left: calc(50% - 255px);
  }
  .doodle-tc {
    top: 4%;
    width: 135px;
    height: 46px;
    margin-left: -67px;
  }
  .doodle-tr {
    top: 8%;
    right: calc(50% - 255px);
  }
  .doodle-ml {
    top: 32%;
    left: calc(50% - 265px);
    width: 64px;
    height: 92px;
  }
  .doodle-mr {
    top: 32%;
    right: calc(50% - 265px);
    width: 64px;
    height: 92px;
  }
  .doodle-mll {
    top: 60%;
    left: calc(50% - 255px);
    width: 56px;
    height: 74px;
  }
  .doodle-mlr {
    top: 60%;
    right: calc(50% - 255px);
    width: 56px;
    height: 74px;
  }
  .doodle-bl {
    bottom: 8%;
    left: calc(50% - 255px);
    width: 78px;
    height: 54px;
  }
  .doodle-bc {
    bottom: 4%;
    width: 140px;
    height: 40px;
    margin-left: -70px;
  }
  .doodle-br {
    bottom: 8%;
    right: calc(50% - 255px);
    width: 78px;
    height: 54px;
  }
}

@media (max-height: 670px) {
  .stage {
    padding: 38px 30px;
  }
  .player-screen {
    max-width: 286px;
  }
  .player-card {
    padding: 9px 12px 10px;
    gap: 3px;
  }
  .cover-wrapper {
    width: 78%;
    max-height: 162px;
  }
  .track-title {
    font-size: 1.45rem;
  }
  .main-play-svg {
    width: 46px;
    height: 46px;
  }
}