:root {
  --accent: #fa6699;
  --text: #fff;
  --muted: rgba(255,255,255,.66);
  --glass: rgba(12,12,18,.30);
  --glass-strong: rgba(12,12,18,.48);
  --line: rgba(255,255,255,.16);
  --shadow: 0 18px 60px rgba(0,0,0,.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #07070a;
  color: var(--text);
}

body {
  min-height: 100dvh;
  overflow: hidden;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}


/* =========================================================
   APP
   ========================================================= */

.music-app {
  position: relative;
  min-height: 100dvh;
  isolation: isolate;
  overflow: hidden;
}


/* =========================================================
   COVER
   ========================================================= */

.cover-layer,
.cover-layer::before,
.cover-layer::after {
  position: absolute;
  inset: 0;
}

.cover-layer {
  z-index: -3;
  background: #111 center / cover no-repeat;
  transform: scale(1.035);
  transition:
    opacity .45s ease,
    background-image .45s ease;
}

.cover-layer::before {
  content: "";
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.12) 36%,
      rgba(0,0,0,.52) 72%,
      rgba(0,0,0,.78) 100%
    ),
    radial-gradient(
      circle at 50% 38%,
      transparent 0 20%,
      rgba(0,0,0,.13) 58%,
      rgba(0,0,0,.30) 100%
    );
}

.cover-layer::after {
  content: "";
  backdrop-filter: saturate(112%);
  -webkit-backdrop-filter: saturate(112%);
}


/* =========================================================
   TOP BAR
   ========================================================= */

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    max(18px, env(safe-area-inset-top))
    20px
    0;
}

.brand {
  color: #fff;
  text-decoration: none;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;

  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

.icon-btn {
  width: 42px;
  height: 42px;

  border: 1px solid var(--line);
  border-radius: 999px;

  color: #fff;
  background: rgba(14,14,20,.22);

  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);

  display: grid;
  place-items: center;

  cursor: pointer;

  box-shadow:
    inset 0 1px rgba(255,255,255,.10);
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}


/* =========================================================
   STAGE
   ========================================================= */

.stage {
  min-height: 100dvh;

  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;

  /*
    底部播放器現在 fixed，
    所以這裡預留空間，避免內容被蓋住。
  */
  padding:
    76px
    20px
    150px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  align-self: flex-end;
  justify-self: center;

  width: min(100%, 720px);

  display: flex;
  flex-direction: column-reverse;
  align-items: center;

  padding-top: 2vh;
}


/* =========================================================
   DISC / MASCOT
   ========================================================= */

.disc-wrap {
  position: relative;

  width: clamp(190px, 42vw, 310px);
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  filter:
    drop-shadow(0 18px 34px rgba(0,0,0,.35));
}

.disc-halo {
  position: absolute;
  inset: 7%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 42% 35%,
      rgba(255,255,255,.12),
      transparent 24%
    ),
    repeating-radial-gradient(
      circle,
      rgba(255,255,255,.035) 0 1px,
      transparent 2px 8px
    ),
    rgba(6,6,10,.50);

  border:
    1px solid rgba(255,255,255,.11);

  box-shadow:
    inset 0 0 35px rgba(0,0,0,.32),
    0 8px 35px rgba(0,0,0,.28);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mascot {
  position: relative;
  z-index: 1;

  width: 86%;
  height: 86%;

  object-fit: contain;

  transform-origin: 50% 50%;
  will-change: transform;

  user-select: none;
  pointer-events: none;
}

.playing .mascot {
  animation: spin 16s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   TRACK COPY
   ========================================================= */

.track-copy {
  margin-top: 22px;

  width: min(94vw, 620px);

  text-align: center;

  text-shadow:
    0 2px 18px rgba(0,0,0,.50);
}

.track-title {
  margin: 0;

  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 780;
}

.track-meta {
  margin: 8px 0 0;

  color: var(--muted);

  font-size: 13px;
  letter-spacing: .03em;
}

.track-meta strong {
  color: rgba(255,255,255,.92);
  font-weight: 650;
}


/* =========================================================
   FULL-WIDTH BOTTOM PLAYER
   ========================================================= */

.player-shell {
  position: fixed;

  z-index: 6;

  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;

  padding:
    15px
    max(20px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));

  /*
    左右、底部全部貼邊。
    只留下上方兩角圓角。
  */
  border: 0;
  border-top: 1px solid var(--line);


  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.085),
      rgba(255,255,255,.025)
    ),
    rgba(12,12,18,.34);

  backdrop-filter:
    blur(24px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(140%);

  box-shadow:
    0 -16px 55px rgba(0,0,0,.27),
    inset 0 1px rgba(255,255,255,.12);
}


/*
  外層玻璃整條滿版，
  但裡面的控制內容限制寬度，
  避免桌機變成按鈕散到天涯海角。
*/

.player-shell .timeline,
.player-shell .controls {
  width: min(100%, 700px);

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 10px;
}

.time {
  min-width: 36px;

  color: rgba(255,255,255,.65);

  font-size: 11px;

  font-variant-numeric: tabular-nums;
}

.time:last-child {
  text-align: right;
}

.seek {
  --p: 0%;

  appearance: none;
  -webkit-appearance: none;

  width: 100%;
  height: 18px;

  background: transparent;

  cursor: pointer;
}


/* Chrome / Safari */

.seek::-webkit-slider-runnable-track {
  height: 4px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--accent) 0 var(--p),
      rgba(255,255,255,.27) var(--p) 100%
    );
}

.seek::-webkit-slider-thumb {
  -webkit-appearance: none;

  width: 13px;
  height: 13px;

  margin-top: -4.5px;

  border: 0;
  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 2px 8px rgba(0,0,0,.3);
}


/* Firefox */

.seek::-moz-range-track {
  height: 4px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.27);
}

.seek::-moz-range-progress {
  height: 4px;

  border-radius: 999px;

  background:
    var(--accent);
}

.seek::-moz-range-thumb {
  width: 13px;
  height: 13px;

  border: 0;
  border-radius: 50%;

  background: #fff;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.controls {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 12px;

  margin-top: 10px;
}

.controls-side {
  display: flex;
  align-items: center;
  gap: 8px;
}

.controls-side.right {
  justify-content: flex-end;
}

.control-btn {
  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 999px;

  color: #fff;
  background: transparent;

  cursor: pointer;

  display: grid;
  place-items: center;

  transition:
    background .16s ease,
    transform .16s ease;
}

.control-btn:hover {
  background:
    rgba(255,255,255,.08);
}

.control-btn:active {
  transform: scale(.94);
}

.control-btn svg {
  width: 21px;
  height: 21px;
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

.play-btn {
  width: 58px;
  height: 58px;

  border:
    1px solid rgba(255,255,255,.20);

  border-radius: 50%;

  color: #fff;

  background:
    rgba(255,255,255,.16);

  box-shadow:
    0 8px 22px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    transform .16s ease,
    background .16s ease;
}

.play-btn:hover {
  background:
    rgba(255,255,255,.21);
}

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

.play-btn svg {
  width: 25px;
  height: 25px;
}


/* =========================================================
   STORY LINK
   ========================================================= */

.story-link {
  text-decoration: none;
}

.story-link[aria-disabled="true"] {
  opacity: .35;
  pointer-events: none;
}


/* =========================================================
   PLAYLIST
   ========================================================= */

.playlist {
  position: absolute;

  z-index: 7;

  /*
    因為播放器現在佔滿底部，
    Playlist 要浮在播放器上方。
  */
  inset:
    auto
    14px
    132px
    14px;

  max-height: min(62vh, 520px);

  width:
    min(calc(100% - 28px), 520px);

  margin-left: auto;

  padding: 12px;

  border:
    1px solid var(--line);

  border-radius: 26px;

  background:
    rgba(10,10,16,.68);

  backdrop-filter:
    blur(28px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(135%);

  box-shadow:
    var(--shadow);

  transform:
    translateY(calc(100% + 30px));

  opacity: 0;

  pointer-events: none;

  transition:
    transform .28s ease,
    opacity .28s ease;
}

.playlist.open {
  transform:
    translateY(0);

  opacity: 1;

  pointer-events: auto;
}

.playlist-head {
  display: flex;

  justify-content: space-between;
  align-items: center;

  padding:
    4px
    4px
    10px
    8px;
}

.playlist-head strong {
  font-size: 14px;
}

.track-list {
  display: grid;

  gap: 6px;

  overflow: auto;

  max-height: 430px;
}

.track-item {
  width: 100%;

  border:
    1px solid transparent;

  border-radius: 17px;

  background: transparent;

  color: #fff;

  padding: 9px;

  display: grid;

  grid-template-columns:
    48px
    1fr
    auto;

  gap: 10px;

  align-items: center;

  text-align: left;

  cursor: pointer;
}

.track-item:hover {
  background:
    rgba(255,255,255,.07);
}

.track-item.active {
  background:
    rgba(250,102,153,.13);

  border-color:
    rgba(250,102,153,.26);
}

.track-item img {
  width: 48px;
  height: 48px;

  border-radius: 12px;

  object-fit: cover;
}

.track-item b {
  display: block;

  font-size: 13px;
}

.track-item span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 11px;
}

.track-item .theme {
  margin: 0;

  color:
    rgba(255,255,255,.58);

  font-size: 10px;
}


/* =========================================================
   STATUS
   ========================================================= */

.status {
  position: fixed;

  inset:
    50%
    auto
    auto
    50%;

  transform:
    translate(-50%, -50%);

  z-index: 9;

  padding:
    10px
    14px;

  border-radius:
    999px;

  background:
    rgba(10,10,14,.70);

  border:
    1px solid var(--line);

  color: #fff;

  font-size: 12px;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.status[hidden] {
  display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .stage {
    padding:
      76px
      14px
      140px;
  }

  .hero {
    padding-top: 0;
  }

  .disc-wrap {
    width:
      min(58vw, 250px);
  }

  .track-copy {
    margin-top: 14px;
  }

  .track-title {
    font-size:
      clamp(27px, 9vw, 40px);
  }

  .player-shell {
    padding:
      12px
      max(14px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));

  }

  .play-btn {
    width: 54px;
    height: 54px;
  }

  .control-btn {
    width: 38px;
    height: 38px;
  }

  .playlist {
    inset:
      auto
      10px
      122px
      10px;

    width:
      calc(100% - 20px);
  }
}


/* =========================================================
   SHORT SCREENS
   ========================================================= */

@media (max-height: 700px) {

  .disc-wrap {
    width:
      min(34vh, 220px);
  }

  .track-copy {
    margin-top: 10px;
  }

  .track-title {
    font-size: 28px;
  }

  .stage {
    padding-top: 64px;
    padding-bottom: 130px;
  }

  .player-shell {
    padding-top: 10px;
  }

  .playlist {
    bottom: 116px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .playing .mascot {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;
  }
}