* { box-sizing: border-box; margin: 0; padding: 0; }

button {
  touch-action: manipulation;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 3px solid #2F6FE0;
  outline-offset: 3px;
}

:root {
  /* Watermelon palette */
  --rind-dark:   #1B7A3D;
  --rind-mid:    #2FA84C;
  --rind-light:  #A6E06B;
  --rind-pale:   #CFF09B;
  --flesh:       #FF4667;
  --flesh-light: #FF7C93;
  --flesh-pale:  #FFA9B8;
  --flesh-deep:  #D42B49;
  --seed-black:  #2B2118;
  --seed-brown:  #4A3A2A;
  --cream:       #FFFBF2;
  --track-bg:    #F7F2E4;
  --text-dark:   #2B2118;
  --text-soft:   #7A6A58;

  --card-max: 640px;

  /* Shadow tint - neutral dark green-brown, not a saturated colour,
     so elevation reads as depth rather than a coloured glow. */
  --sh-tint: 24, 54, 30;

  /* Small contact shadow + soft ambient shadow, layered.
     Used on anything that sits "above" the cream surface. */
  --sh-rest:
    0 1px 2px rgba(var(--sh-tint), 0.10),
    0 4px 10px rgba(var(--sh-tint), 0.12),
    0 10px 22px rgba(var(--sh-tint), 0.10);

  --sh-press:
    0 1px 2px rgba(var(--sh-tint), 0.14),
    0 2px 6px rgba(var(--sh-tint), 0.12);

  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --sh-inset-bottom: inset 0 -2px 3px rgba(var(--sh-tint), 0.10);
}

html {
  height: 100%;
}

body {
  font-family: 'Baloo 2', sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #EFFAE8 0%, #D6F0C8 55%, #BFE6AE 100%);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  padding-top: max(clamp(12px, 3vw, 32px), env(safe-area-inset-top));
  padding-bottom: max(clamp(12px, 3vw, 32px), env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow-x: hidden;
  overscroll-behavior: none;
}

.app {
  width: 100%;
  max-width: var(--card-max);
  position: relative;
  z-index: 1;
}

/* ── Layered rind frame ── */
.rind-outer {
  border-radius: 48px;
  background: linear-gradient(155deg, var(--rind-mid) 0%, var(--rind-dark) 100%);
  padding: 14px;
  box-shadow:
    0 1px 3px rgba(var(--sh-tint), 0.10),
    0 10px 24px rgba(var(--sh-tint), 0.16),
    0 32px 64px -12px rgba(var(--sh-tint), 0.30);
}

.rind-inner {
  border-radius: 38px;
  background: linear-gradient(155deg, var(--rind-pale) 0%, var(--rind-light) 100%);
  padding: 8px;
}

.card {
  border-radius: 32px;
  background: var(--cream);
  padding: clamp(18px, 3.5vw, 30px) clamp(18px, 4.5vw, 36px) clamp(20px, 4vw, 32px);
}

/* ── Header ── */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(12px, 2.4vw, 20px);
}

.logo-mark {
  width: clamp(28px, 6vw, 34px);
  height: clamp(28px, 6vw, 34px);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  filter: drop-shadow(0 2px 3px rgba(var(--sh-tint), 0.22));
}

.logo-rind,
.logo-white,
.logo-flesh {
  position: absolute;
  border-radius: 50%;
}

.logo-rind {
  inset: 0;
  background: linear-gradient(155deg, var(--rind-mid), var(--rind-dark));
}

.logo-white {
  inset: 14%;
  background: #FBFFF4;
}

.logo-flesh {
  inset: 22%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), transparent 45%),
    radial-gradient(circle at 50% 58%, var(--flesh-light), var(--flesh) 58%, var(--flesh-deep) 100%);
}

.logo-seed {
  position: absolute;
  width: 9%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--seed-brown), var(--seed-black) 70%);
}

.logo-seed-1 { top: 42%; left: 32%; transform: rotate(-20deg); }
.logo-seed-2 { top: 52%; left: 56%; transform: rotate(20deg); }

.logo-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  letter-spacing: 0.3px;
  color: var(--text-dark);
}

.logo-dot { color: var(--flesh); }

/* ── Now playing ── */
.now-playing {
  text-align: center;
  margin-bottom: clamp(16px, 3vw, 24px);
  min-height: 56px;
}

.now-playing-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--rind-mid);
  margin-bottom: 3px;
}

.now-playing-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 4.4vw, 28px);
  color: var(--text-dark);
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Transport row ── */
.transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 28px);
  margin-bottom: clamp(20px, 4vw, 30px);
}

.side-btn {
  width: clamp(56px, 12vw, 74px);
  height: clamp(56px, 12vw, 74px);
  border-radius: 50%;
  border: none;
  background: linear-gradient(160deg, var(--rind-pale) 0%, var(--rind-light) 55%, #8CCB53 100%);
  color: var(--rind-dark);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--sh-inset-top), var(--sh-rest);
  transition: transform 0.12s cubic-bezier(.34,1.4,.64,1), box-shadow 0.12s ease;
}

.side-btn svg {
  width: 42%;
  height: 42%;
  fill: var(--rind-dark);
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.3));
}

.side-btn:active {
  transform: scale(0.92);
  box-shadow: var(--sh-inset-top), var(--sh-press);
}

/* ── The play button: a watermelon slice ── */
.melon-btn {
  --btn-size: clamp(120px, 30vw, 176px);
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  border: none;
  position: relative;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
  box-shadow:
    0 2px 4px rgba(var(--sh-tint), 0.14),
    0 10px 18px rgba(var(--sh-tint), 0.16),
    0 22px 38px -8px rgba(var(--sh-tint), 0.28);
  transition: transform 0.14s cubic-bezier(.34,1.4,.64,1), box-shadow 0.14s ease;
}

.melon-btn:active {
  transform: scale(0.95);
  box-shadow:
    0 1px 2px rgba(var(--sh-tint), 0.16),
    0 4px 10px rgba(var(--sh-tint), 0.18);
}

.melon-rind,
.melon-white,
.melon-flesh {
  position: absolute;
  border-radius: 50%;
}

.melon-rind {
  inset: 0;
  background: linear-gradient(155deg, var(--rind-mid), var(--rind-dark));
}

.melon-white {
  inset: 9%;
  background: #FBFFF4;
  box-shadow: inset 0 -2px 4px rgba(var(--sh-tint), 0.08);
}

.melon-flesh {
  inset: 15%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,0.32), transparent 45%),
    radial-gradient(circle at 50% 58%, var(--flesh-light), var(--flesh) 58%, var(--flesh-deep) 100%);
  box-shadow: inset 0 3px 8px rgba(var(--sh-tint), 0.12);
}

.seed {
  position: absolute;
  width: 6.5%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--seed-brown), var(--seed-black) 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.seed-1 { top: 30%; left: 34%; transform: rotate(-25deg); }
.seed-2 { top: 28%; left: 58%; transform: rotate(20deg); }
.seed-3 { top: 48%; left: 27%; transform: rotate(-45deg); }
.seed-4 { top: 50%; left: 68%; transform: rotate(35deg); }
.seed-5 { top: 66%; left: 42%; transform: rotate(-10deg); }
.seed-6 { top: 65%; left: 58%; transform: rotate(15deg); }

.melon-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32%;
  height: 32%;
  fill: #FFFDF8;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
  z-index: 2;
}

/* ── Secondary controls ── */
.secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(18px, 3.5vw, 26px);
  flex-wrap: wrap;
}

.shuffle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  background: linear-gradient(160deg, var(--rind-pale) 0%, var(--rind-light) 55%, #8CCB53 100%);
  color: var(--rind-dark);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2.6vw, 16px);
  cursor: pointer;
  box-shadow: var(--sh-inset-top), var(--sh-rest);
  transition: transform 0.12s cubic-bezier(.34,1.4,.64,1), box-shadow 0.12s ease, background 0.15s ease, color 0.15s ease;
}

.shuffle-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shuffle-btn:active { transform: scale(0.95); box-shadow: var(--sh-inset-top), var(--sh-press); }

.shuffle-btn.is-active {
  background: linear-gradient(160deg, var(--flesh-pale) 0%, var(--flesh) 55%, var(--flesh-deep) 100%);
  color: #FFFDF8;
}

.volume {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mute-btn {
  width: clamp(40px, 8vw, 46px);
  height: clamp(40px, 8vw, 46px);
  border-radius: 50%;
  border: none;
  background: linear-gradient(160deg, var(--rind-pale) 0%, var(--rind-light) 55%, #8CCB53 100%);
  color: var(--rind-dark);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--sh-inset-top), var(--sh-rest);
  transition: transform 0.12s cubic-bezier(.34,1.4,.64,1), box-shadow 0.12s ease, background 0.15s ease, color 0.15s ease;
}

.mute-btn svg {
  width: 50%;
  height: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mute-btn:active { transform: scale(0.92); box-shadow: var(--sh-inset-top), var(--sh-press); }

.mute-btn.is-active {
  background: linear-gradient(160deg, var(--flesh-pale) 0%, var(--flesh) 55%, var(--flesh-deep) 100%);
  color: #FFFDF8;
}

.volume-label {
  font-weight: 700;
  font-size: clamp(13px, 2.4vw, 15px);
  color: var(--text-soft);
}

.seed-meter {
  display: flex;
  gap: 6px;
}

.seed-dot {
  width: clamp(30px, 5.5vw, 34px);
  height: clamp(30px, 5.5vw, 34px);
  border-radius: 50%;
  border: none;
  background: var(--cream);
  box-shadow: inset 0 0 0 2.5px var(--rind-light), inset 0 1px 2px rgba(var(--sh-tint), 0.08);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.seed-dot:active { transform: scale(0.88); }

.seed-dot.is-filled {
  background: radial-gradient(circle at 35% 28%, var(--seed-brown), var(--seed-black) 75%);
  box-shadow: inset 0 0 0 2.5px var(--seed-black);
}

.seed-dot.is-muted {
  box-shadow: inset 0 0 0 2.5px #DCD5C4;
}

/* ── Track list ── */
.track-list-wrap {
  border-top: 3px dashed var(--rind-light);
  padding-top: clamp(12px, 2.5vw, 18px);
}

.track-list {
  list-style: none;
  max-height: clamp(220px, 34vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 6px;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--rind-light) transparent;
}

.track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(27, 122, 61, 0.08);
  border-radius: 18px;
  padding: clamp(12px, 2.6vw, 16px) clamp(14px, 3vw, 18px);
  background: var(--track-bg);
  color: var(--text-dark);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 2.8vw, 18px);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--sh-tint), 0.05);
  transition: transform 0.1s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.track-row:active { transform: scale(0.98); }

.track-row .track-seed {
  width: 11px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--seed-brown), var(--seed-black) 75%);
  flex-shrink: 0;
  transform: rotate(-20deg);
}

.track-row.is-current {
  background: linear-gradient(160deg, var(--flesh-light) 0%, var(--flesh) 70%);
  color: #FFFDF8;
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(var(--sh-tint), 0.16);
}

.track-row.is-current .track-seed {
  background: radial-gradient(circle at 35% 28%, #fff, #FFFDF8 75%);
}

/* Webkit scrollbar - thin, rounded, matches the rind colour */
.track-list::-webkit-scrollbar { width: 8px; }
.track-list::-webkit-scrollbar-track { background: transparent; margin-block: 4px; }
.track-list::-webkit-scrollbar-thumb {
  background: var(--rind-light);
  border-radius: 8px;
  border: 2px solid var(--cream);
  background-clip: padding-box;
}
.track-list::-webkit-scrollbar-thumb:hover { background: var(--rind-mid); background-clip: padding-box; }

/* ── Floating background decoration ── */
.bg-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  animation: bg-drift 16s ease-in-out infinite;
}

.bg-blob-1 {
  width: 220px; height: 220px;
  left: -60px; top: -40px;
  background: radial-gradient(circle at 35% 35%, var(--rind-light), transparent 70%);
  animation-duration: 18s;
}

.bg-blob-2 {
  width: 180px; height: 180px;
  right: -50px; top: 20%;
  background: radial-gradient(circle at 40% 40%, var(--flesh-light), transparent 70%);
  opacity: 0.35;
  animation-duration: 22s;
  animation-delay: -4s;
}

.bg-blob-3 {
  width: 260px; height: 260px;
  left: 8%; bottom: -100px;
  background: radial-gradient(circle at 45% 45%, var(--rind-mid), transparent 70%);
  opacity: 0.3;
  animation-duration: 20s;
  animation-delay: -9s;
}

@keyframes bg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(18px, 22px) scale(1.06); }
  66%      { transform: translate(-14px, 10px) scale(0.96); }
}

.bg-seed-float {
  position: absolute;
  width: 10px;
  height: 16px;
  border-radius: 50%;
  background: var(--seed-black);
  opacity: 0;
  animation: bg-seed-rise 13s ease-in infinite;
}

.bg-seed-float-1 { left: 12%; bottom: -20px; animation-delay: 0s; }
.bg-seed-float-2 { left: 82%; bottom: -20px; animation-delay: 3.2s; }
.bg-seed-float-3 { left: 45%; bottom: -20px; animation-delay: 6.4s; }
.bg-seed-float-4 { left: 68%; bottom: -20px; animation-delay: 9.6s; }

@keyframes bg-seed-rise {
  0%   { transform: translateY(0) rotate(-15deg); opacity: 0; }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-70vh) rotate(15deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-blob,
  .bg-seed-float {
    animation: none !important;
    opacity: 0.25;
  }
}

/* ── Small screens ── */
@media (max-width: 420px) {
  .transport { gap: 10px; }
  .secondary { justify-content: center; }
  .shuffle-btn { width: 100%; justify-content: center; }
  .volume {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .seed-meter { gap: 5px; }
}

@media (max-width: 340px) {
  .melon-btn { --btn-size: 108px; }
}

/* ── Landscape tablets and desktop ──
   Plenty of width, not much height. Instead of stacking transport
   controls above a track list — which either pushes the list off
   the bottom or forces the page to scroll — put the list beside the
   controls so the whole player fits the viewport. The controls are
   grouped into one column and centred as a block, so the layout
   doesn't stretch them apart with awkward gaps. */
@media (orientation: landscape) and (min-width: 680px) {
  :root { --card-max: min(860px, 94vw); }

  body {
    padding-top: max(clamp(10px, 2vw, 20px), env(safe-area-inset-top));
    padding-bottom: max(clamp(10px, 2vw, 20px), env(safe-area-inset-bottom));
  }

  .card {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header   header"
      "now      now"
      "controls list";
    column-gap: clamp(24px, 3.5vw, 40px);
    height: min(600px, 80vh);
  }

  .header      { grid-area: header; margin-bottom: 6px; }
  .now-playing { grid-area: now; margin-bottom: clamp(10px, 2vw, 16px); min-height: 0; }

  .controls-col {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(26px, 4vw, 40px);
    min-height: 0;
  }

  .transport  { margin-bottom: 0; }

  .secondary {
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2.4vw, 20px);
    margin-bottom: 0;
  }

  .track-list-wrap {
    grid-area: list;
    border-top: none;
    border-left: 3px dashed var(--rind-light);
    padding-top: 0;
    padding-left: clamp(18px, 2.4vw, 28px);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .track-list {
    max-height: none;
    flex: 1;
    min-height: 0;
  }

  .melon-btn { --btn-size: clamp(112px, 15vw, 156px); }
}

/* Short landscape (phones rotated) — same idea, tighter still */
@media (orientation: landscape) and (max-height: 480px) {
  .card { height: min(400px, 88vh); }
  .header      { margin-bottom: 4px; }
  .now-playing { margin-bottom: 6px; min-height: 0; }
  .controls-col { gap: clamp(14px, 3vw, 22px); }
  .melon-btn { --btn-size: clamp(88px, 13vw, 116px); }
  .side-btn  { width: clamp(46px, 8vw, 58px); height: clamp(46px, 8vw, 58px); }
}