/* Musrank website. The app's world: near-black under blurred coral, violet and
   pink circles, cream text, Clash Display for headings and track names, and
   everything else in Onest. Values mirror src/theme. */

:root {
  --night: #101012;
  --raised: #1b1b1f;
  --field: rgba(255, 246, 234, 0.08);
  /* The app's search bar: the dark mixed 12% with cream, solid. */
  --raised-field: #2d2c2c;
  --cream: #fff6ea;
  --cream-2: rgba(255, 246, 234, 0.74);
  --cream-3: rgba(255, 246, 234, 0.56);
  --line: rgba(255, 246, 234, 0.16);
  --coral: #f6737c;
  --coral-deep: #e9646e;
  --violet: #9d82ff;
  --pink: #ff82fd;

  --display: 'Clash Display', 'Onest', sans-serif;
  --body: 'Onest', system-ui, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(96px, 14vh, 168px);
  --control: 48px;
  --radius: 999px;
  --radius-card: 14px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 180ms;
  --slow: 420ms;

  color-scheme: dark;
}

@font-face { font-family: Ionicons; src: url(assets/fonts/Ionicons.ttf) format('truetype'); font-display: block; }
.ion { font-family: Ionicons; font-style: normal; font-weight: normal; line-height: 1; }
@font-face { font-family: 'Font Awesome 6 Brands'; src: url(assets/fonts/FontAwesome6-Brands.ttf) format('truetype'); font-display: block; }
.ion.fab { font-family: 'Font Awesome 6 Brands'; }
.apps .ion.fab { font-size: 24px; }

* { box-sizing: border-box; }
/* Keeps the scrollbar's room when the page locks under the drawer, so nothing shifts. */
html { background: var(--night); scroll-behavior: smooth; scroll-padding-top: 72px; scrollbar-gutter: stable; }
/* No background on body: html paints the page colour. A body background would
   sit over the glow (z-index -1) and hide it. */
body {
  margin: 0;
  color: var(--cream);
  font: 500 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
::selection { background: var(--coral); color: var(--night); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 246, 234, 0.2) transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The glow stays put while the page scrolls over it. Drawn like the app's home
   header (Glow in src/ui): soft spots, full strength to a core then fading out,
   coral the largest, with a fine grain over them. Sizes are shares of the screen. */
/* Sized to the large viewport (address bar hidden) and pinned to the top, so it
   doesn't resize while a phone's address bar slides away during a scroll, which
   left an unpainted strip at the bottom. Its own layer keeps the scroll smooth. */
.glow {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh;
  z-index: -1; overflow: hidden; pointer-events: none; background: var(--night);
  transform: translateZ(0);
}
.glow span { position: absolute; border-radius: 50%; }
.glow-coral {
  width: 150vmax; height: 150vmax; left: -62vmax; bottom: -70vmax;
  background: radial-gradient(circle closest-side, var(--coral) 30%, rgb(246 115 124 / 0.5) 61%, rgb(246 115 124 / 0) 100%);
}
.glow-violet {
  width: 95vmax; height: 95vmax; left: 22vmax; top: -48vmax;
  background: radial-gradient(circle closest-side, rgb(157 130 255 / 0.75), rgb(157 130 255 / 0.38) 45%, rgb(157 130 255 / 0) 100%);
}
.glow-pink {
  width: 80vmax; height: 80vmax; right: -34vmax; top: 4vmax;
  background: radial-gradient(circle closest-side, rgb(255 130 253 / 0.65), rgb(255 130 253 / 0.32) 45%, rgb(255 130 253 / 0) 100%);
}
.glow-violet-2 {
  width: 70vmax; height: 70vmax; right: -8vmax; bottom: -42vmax;
  background: radial-gradient(circle closest-side, rgb(157 130 255 / 0.55), rgb(157 130 255 / 0.28) 45%, rgb(157 130 255 / 0) 100%);
}
.glow::after { content: ''; position: absolute; inset: 0; background: url(assets/noise.png); opacity: 0.08; }

/* Story bars: one per section, filled by how far the page has scrolled through it. */
.story {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; gap: 6px; padding: 12px var(--gutter) 0;
}
.story a { flex: 1; padding: 6px 0 12px; text-decoration: none; }
.story span {
  display: block; height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 246, 234, 0.22);
  font-size: 0; color: transparent;
  position: relative; transition: height var(--fast) var(--ease-out);
}
.story span::after {
  content: ''; position: absolute; inset: 0; background: var(--cream);
  transform-origin: left; transform: scaleX(var(--fill, 0));
}
.story a:hover span, .story a:focus-visible span { height: 7px; }

.top {
  position: absolute; top: 34px; left: var(--gutter); right: var(--gutter); z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 24px var(--display); min-height: 44px; }
.soon-pill { font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--line); color: var(--cream-2); }

/* Hero */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding: 120px var(--gutter) 80px;
}
.hero-text { position: relative; z-index: 1; text-align: center; }
.hero h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -0.03em; }
.hero h1 span { display: block; white-space: nowrap; }
.hero p { margin: 20px auto 0; font-size: clamp(16px, 1.3vw, 19px); color: var(--cream-2); white-space: nowrap; }

.search {
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: var(--radius);
  background: var(--raised-field);
}
.hero .search { margin: 36px auto 0; width: min(100%, 460px); cursor: text; }
.search:focus-within { box-shadow: 0 0 0 2px rgba(255, 246, 234, 0.35); }
.search .ion { font-size: 20px; color: var(--cream-2); flex: none; }
.search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none;
  color: var(--cream); font: 600 15px var(--body); caret-color: var(--cream);
}
.search input::placeholder { color: var(--cream-2); }
.search input::-webkit-search-cancel-button { display: none; }

/* Sound-wave bars from the screen's edges to just short of the text. Each bar is
   one rounded line; main.js sizes them and moves them from one wave to the next. */
.waves { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.waves canvas { display: block; width: 100%; height: 100%; }

/* Sections */
section:not(.hero) { padding: var(--section) var(--gutter); }
section h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.03em; }

/* Watch it rank: battles play out on their own while the list beside them sorts. */
.demo-sticky {
  display: grid; align-content: center; justify-items: center; gap: clamp(28px, 5vh, 56px);
}
.demo h2 { text-align: center; }
.demo-stage {
  width: min(100%, 1040px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.demo-battle { display: grid; gap: 14px; }
.demo-count { font-size: 15px; font-weight: 600; color: var(--cream-2); font-variant-numeric: tabular-nums; }
.demo-track {
  font: 600 clamp(26px, 3.2vw, 46px)/1.05 var(--display); letter-spacing: -0.025em;
  /* Always two lines tall, so a long title never changes the block's height. Each
     sits against Tie: the top one from above, the bottom one from below. */
  height: 2.1em; display: flex; align-items: flex-end;
  transition: opacity 620ms ease-out, filter 620ms ease-out, color var(--slow) var(--ease-out);
}
.demo-track[data-slot="bottom"] { align-items: flex-start; }
.demo-track span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.demo-track.is-picked { color: var(--cream); }
.demo-track.is-dim { opacity: 0.3; }
.demo-tie { display: flex; align-items: center; gap: 14px; }
.demo-tie::before, .demo-tie::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.demo-tie i {
  font: normal 700 15px var(--body); padding: 10px 22px; border-radius: var(--radius); background: var(--raised-field);
  transition: background var(--slow) var(--ease-out), color var(--slow) var(--ease-out);
}
.demo-tie.is-picked i { background: var(--cream); color: var(--night); }
.demo-count { transition: opacity 620ms ease-out, filter 620ms ease-out; }
/* The old pair dissolves, softly blurring, before the next one fades in. */
.demo-battle.is-fading .demo-track, .demo-battle.is-fading .demo-count {
  opacity: 0; filter: blur(6px); transition-duration: 460ms; transition-timing-function: ease-in;
}
.demo-battle.is-fading .demo-tie i { background: var(--raised-field); color: var(--cream); }
.demo-list { list-style: none; margin: 0; padding: 0; }
.demo-list li {
  display: flex; align-items: baseline; gap: 16px; padding: 9px 0;
  border-top: 1px solid var(--line); font-weight: 600; font-size: clamp(15px, 1.25vw, 18px);
  transition: opacity var(--slow) var(--ease-out), color var(--slow);
}
.demo-list li:first-child { border-top: 0; }
.demo-list i { font: normal 600 1.1em var(--display); width: 28px; color: var(--cream-3); font-variant-numeric: tabular-nums; }
.demo-list span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-list em { font-style: normal; font-size: 13px; color: var(--cream-3); margin-left: auto; }
.demo-list li.is-waiting { opacity: 0.35; }
.demo-list li { color: var(--cream-2); }
.demo-list li.is-new { color: var(--cream); }

/* Share: two share images, the front one whole and one half behind it. */
.share {
  display: grid; grid-template-columns: auto minmax(0, 520px); justify-content: center;
  align-items: center; gap: clamp(48px, 8vw, 140px);
}
.stack { position: relative; width: min(64vw, 300px); aspect-ratio: 9 / 16; margin-left: 24%; }
.card {
  position: absolute; inset: 0; margin: 0; padding: 22px;
  border-radius: 20px; display: flex; flex-direction: column;
  background: linear-gradient(135deg, var(--card, #4b6779), var(--card-2, #2c4352));
  color: var(--on-card, var(--cream));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.card-front { z-index: 2; rotate: -2deg; }
.card-back { z-index: 1; scale: 0.88; filter: brightness(0.9); }
.card-left { translate: -52% 2%; rotate: -9deg; }
.card-head { display: flex; gap: 12px; align-items: center; }
.card-head img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; background: rgba(255, 246, 234, 0.12); flex: none; }
.card-head b { font: 600 15px/1.15 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-head span { font-size: 11px; opacity: 0.75; }
.card-list { list-style: none; padding: 0; margin: 16px 0 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-list li { display: flex; align-items: baseline; gap: 10px; font: 600 14px/1.3 var(--body); white-space: nowrap; overflow: hidden; }
.card-list li span { overflow: hidden; text-overflow: ellipsis; }
.card-list i { font: normal 600 14px var(--display); width: 22px; flex: none; opacity: 0.55; font-variant-numeric: tabular-nums; }
.card-mark { display: flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 13px var(--display); }
.card-mark img { width: 15px; height: auto; }
/* On the white background the white heart turns dark, as the share image draws it. */
.card[data-background='white'] .card-mark img { filter: invert(1) brightness(0.1); }
.share-text p { margin-top: 18px; font-size: 19px; color: var(--cream-2); white-space: nowrap; }
.apps { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px 10px; }
.apps li { width: 64px; display: grid; justify-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--cream-2); }
.apps .ion {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; color: #fff; background: var(--app);
}
.apps .ion.is-quiet { background: var(--field); color: var(--cream); }

.private { text-align: center; }
.private h2 { font-size: clamp(28px, 3.4vw, 48px); }
.private h2 span { display: block; white-space: nowrap; }
.private p { margin-top: 22px; color: var(--cream-2); }

/* The close and the footer fill the last screen together; main.js sets --foot-h. */
.soon { min-height: calc(100svh - var(--foot-h, 150px)); text-align: center; display: grid; place-content: center; justify-items: center; gap: 20px; }
.soon p { color: var(--cream-2); }
.again {
  display: inline-flex; align-items: center; min-height: var(--control); padding: 0 26px; margin-top: 8px;
  border-radius: var(--radius); background: var(--night); color: var(--cream); font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 30px rgba(16, 16, 18, 0.35);
  transition: background var(--fast), transform var(--fast) var(--ease-out);
}
/* Dark with cream text, like the app's Share ranking button, so it reads on any part of the glow. */
.again:hover { background: #1f1f23; transform: translateY(-1px); }

.foot { padding: 32px var(--gutter) 40px; border-top: 1px solid var(--line); display: grid; gap: 14px; justify-items: center; text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--cream-2); text-decoration: none; }
.foot a:hover { color: var(--cream); text-decoration: underline; }
.foot p { font-size: 13px; color: var(--cream-3); max-width: 70ch; }
/* On phones the five links wrap three over two, so none sits alone on the second line. */
@media (max-width: 520px) {
  .foot nav::after { content: ''; flex-basis: 100%; order: 1; }
  .foot nav a:nth-child(n + 4) { order: 2; }
}

/* Search drawer */
.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer[hidden], .stage[hidden] { display: none; }
.drawer-scrim, .stage-scrim { position: absolute; inset: 0; background: rgba(8, 8, 10, 0.6); backdrop-filter: blur(6px); }
.drawer-panel {
  position: relative; margin: 0 auto; width: min(100%, 680px);
  max-height: min(78vh, 720px); display: flex; flex-direction: column;
  padding: 22px 20px 12px; border-radius: 0 0 28px 28px; background: var(--raised);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.search-drawer { background: var(--field); box-shadow: none; height: 56px; }
.text-button { border: 0; background: none; color: var(--cream-2); font: 600 15px var(--body); min-height: 44px; padding: 0 4px; cursor: pointer; }
.text-button:hover { color: var(--cream); }
.drawer-status { padding: 14px 8px 4px; font-size: 15px; color: var(--cream-2); }
.drawer-status:empty { display: none; }
.results { list-style: none; margin: 8px 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.results button {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 10px 8px; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer;
  font: inherit;
}
.results button:hover, .results button:focus-visible { background: var(--field); }
.results img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex: none; background: var(--field); }
.results b { display: block; font-weight: 700; font-size: 16px; line-height: 1.25; }
.results span { font-size: 14px; color: var(--cream-2); }
.skeleton { height: 76px; border-radius: 12px; background: var(--field); margin-bottom: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .drawer:not([hidden]) .drawer-panel { animation: drop var(--slow) var(--ease-out); }
  .drawer:not([hidden]) .drawer-scrim, .stage:not([hidden]) .stage-scrim { animation: fade var(--slow) var(--ease-out); }
  .stage:not([hidden]) .phone { animation: rise var(--slow) var(--ease-out); }
  @keyframes drop { from { transform: translateY(-40px); opacity: 0.4; } }
  @keyframes rise { from { transform: translateY(48px) scale(0.97); opacity: 0.4; } }
  @keyframes fade { from { opacity: 0; } }
}

/* The battle stage: a phone-sized frame over the dimmed page. */
.stage { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.phone {
  position: relative; width: min(100vw, calc(min(92vh, 860px) * 9 / 19.5)); height: min(100svh, 92vh, 860px);
  border-radius: 34px; overflow: hidden; background: var(--album, var(--night)); color: var(--on-album, var(--cream));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column;
  transition: background var(--slow) var(--ease-out), color var(--slow) var(--ease-out);
}
@media (max-width: 560px) { .phone { width: 100vw; height: 100svh; border-radius: 0; } }

.b-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 12px 12px 0; }
.b-segs { display: flex; gap: 2px; height: 6px; align-items: center; }
.b-segs i { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 25%, transparent); }
.b-segs i.done { background: currentColor; }
.b-segs i.now { height: 6px; background: currentColor; }
.b-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-left: 4px; }
.b-title { flex: 1; min-width: 0; }
.b-title { line-height: 1.25; }
.b-title b { display: block; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-title span { display: block; font-size: 13px; opacity: 0.75; }
.icon-button {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer;
}
.icon-button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.icon-button svg { width: 24px; height: 24px; }
.icon-button:disabled { opacity: 0.3; cursor: default; background: none; }

.b-cover { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.b-cover img { position: absolute; top: 0; left: 50%; translate: -50% 0; height: 100%; aspect-ratio: 1; object-fit: cover; }
.b-cover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--album) 0%, transparent 30%, transparent 62%, var(--album) 100%);
}
.b-nav { position: absolute; bottom: 14px; left: 12px; right: 12px; z-index: 1; display: flex; justify-content: space-between; }
.b-nav button {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius); cursor: pointer;
  background: color-mix(in srgb, var(--album) 70%, transparent); color: inherit; font: 600 14px var(--body);
  display: inline-flex; align-items: center; gap: 4px;
}
.b-nav button svg { width: 16px; height: 16px; }
.b-nav button:disabled { opacity: 0.35; cursor: default; }

.b-battle { flex: none; height: 38%; min-height: 250px; padding: 0 20px 18px; display: flex; flex-direction: column; }
.b-track { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 0; }
.b-pick {
  flex: 1; min-width: 0; align-self: stretch; text-align: left; border: 0; background: none; color: inherit; cursor: pointer;
  font: 600 clamp(26px, 4.2vh, 38px)/1.05 var(--display); letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 4px 0;
  transition: opacity var(--fast);
}
.b-pick:hover { opacity: 0.8; }
.b-pick.is-dim { opacity: 0.45; }
.b-tie-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 48px; }
.b-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.b-side::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
.b-pick-note { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.b-pick-note .ion { font-size: 16px; width: 16px; text-align: center; }
.b-tie {
  min-height: 44px; padding: 0 24px; border-radius: var(--radius); border: 0; cursor: pointer;
  background: var(--on-album, var(--cream)); color: var(--album, var(--night)); font: 700 15px var(--body);
}
.b-tie.is-quiet { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.b-tie.is-picked { outline: 2px solid currentColor; outline-offset: 3px; }

.play {
  position: relative; width: 52px; height: 52px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; display: grid; place-items: center;
}
.play svg.icon { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.play svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.play svg.ring circle { stroke-width: 3; }
.play .track-ring { stroke: color-mix(in srgb, currentColor 25%, transparent); }
.play .fill-ring { stroke: currentColor; stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 * (1 - var(--p, 0))); }
.play:disabled { opacity: 0.35; cursor: default; }

/* Loading and results inside the phone */
.b-loading, .b-error { flex: 1; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 32px; text-align: center; }
.b-loading img { width: 62%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
.b-bar { width: 62%; height: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 20%, transparent); overflow: hidden; }
.b-bar i { display: block; height: 100%; width: 40%; background: currentColor; border-radius: 4px; animation: load 1.2s var(--ease-out) infinite; }
@keyframes load { from { translate: -100% 0; } to { translate: 260% 0; } }
.b-error b { font: 600 22px var(--display); }
.b-actions { display: grid; gap: 10px; justify-items: center; }
.pill {
  min-height: 48px; padding: 0 26px; border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--on-album, var(--cream)); color: var(--album, var(--night)); font: 700 16px var(--body);
}
.pill.is-quiet { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }

.r-scroll { flex: 1; overflow-y: auto; padding: 72px 22px 24px; scrollbar-width: none; }
.r-scroll::-webkit-scrollbar { display: none; }
.store-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 14px; font-weight: 600; color: inherit; opacity: 0.85; text-decoration: none; }
.store-link img, .icon-button img { width: 22px; height: 22px; opacity: 0.7; }
.b-row .store { margin-right: 2px; }
.r-hero { text-align: center; }
.r-hero img { width: 58%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.r-hero h2 { margin-top: 20px; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.r-hero p { margin-top: 6px; font-weight: 700; opacity: 0.8; }
.r-hero small { display: block; margin-top: 4px; font-size: 13px; opacity: 0.6; }
.r-list { list-style: none; padding: 0; margin: 28px 0 0; }
.r-list li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.r-list li:first-child { border-top: 0; }
.r-list i { font: normal 600 18px var(--display); width: 30px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.r-list span { font-weight: 600; }
.r-list em { font-style: normal; font-size: 13px; opacity: 0.6; margin-left: 8px; }
.r-foot { flex: none; padding: 14px 20px 20px; display: grid; gap: 10px; background: var(--album); }
.r-foot .pill { width: 100%; }
.r-note { text-align: center; font-size: 13px; opacity: 0.7; }

@media (max-width: 860px) {
  .demo-stage { grid-template-columns: 1fr; gap: 24px; }
  .demo-track { font-size: clamp(24px, 6.4vw, 34px); }
  .demo-list li { padding: 6px 0; }
}

/* Share stacks earlier than the rest: side by side, the cards (the back one sticks
   out to the left) and the seven apps in one row need about 1160px. Narrower, the
   back card was cut off at the edge and Copy link fell to a second row. */
@media (max-width: 1180px) {
  .share { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .share-text p { margin-inline: auto; }
  .stack { width: min(50vw, 260px); }
  .apps { justify-content: center; }
}
@media (max-width: 560px) {
  .soon-pill { display: none; }
  /* With no Coming soon pill, the logo sits in the middle. */
  .top { justify-content: center; }
  /* Slimmer switch and button, so both fit on one line on a phone. */
  .shared-bottom { flex-wrap: nowrap; gap: 8px; width: min(calc(100vw - 2 * var(--gutter)), 460px); }
  /* The line runs the card's width: the switch and the button share it. */
  .shared-bottom .segmented { flex: 1; }
  .shared-bottom .segmented button { flex: 1; }
  .shared-bottom .again { flex: 1; justify-content: center; }
  .shared-bottom .segmented button { min-width: 0; padding: 0 12px; font-size: 14px; }
  .shared-bottom .again { padding: 0 18px; font-size: 15px; white-space: nowrap; }
  .shared-card .card-list.is-columns { column-gap: 14px; }
  .shared-card .card-list.is-columns li { font-size: 12.5px; gap: 6px; }
  .shared-card .card-list.is-columns i { width: 18px; font-size: 12.5px; }
  .hero h1 span, .hero p, .share-text p, .private h2 span { white-space: normal; }
  .hero .search { height: 58px; }
}
/* Only the narrowest phones stack the switch over the button; the card leaves room. */
@media (max-width: 349px) {
  .page { --shared-chrome: 214px; }
  .shared-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-list li, .demo-track, .demo-tie i { transition: none; }
  .b-bar i { animation: none; width: 100%; opacity: 0.5; }
}

/* ---------- Subpages: the shared ranking and the policy pages ---------- */

.page .top { position: relative; top: auto; left: auto; right: auto; padding: 22px var(--gutter) 0; }
.page .foot { margin-top: 64px; }

/* The card and the line under it fill the first screen, so Rank it yourself is always in view. */
.shared { display: grid; justify-items: center; gap: 14px; padding: 10px var(--gutter) 0; }
/* Wide as a phone screen and only as tall as the screen allows, so Top 10 fits
   without scrolling; a long full list splits into two columns, and only scrolls
   inside the card past that. */
/* Edge padding and the gap above the Musrank mark follow the app's share image
   (24 and 16 of its 360 width), scaled to this card's width. */
.shared-card {
  --shared-w: min(calc(100vw - 2 * var(--gutter)), 460px);
  position: relative; inset: auto; rotate: none; padding: calc(var(--shared-w) * 24 / 360);
  width: var(--shared-w);
  height: min(calc(100svh - var(--shared-chrome, 176px)), 760px); min-height: 400px;
}
.shared-card .card-head img { width: 64px; height: 64px; }
.shared-card .card-head b { font-size: 18px; }
.shared-card .card-list { min-height: 0; overflow-y: auto; scrollbar-width: none; justify-content: space-evenly; }
.shared-card .card-list::-webkit-scrollbar { display: none; }
.shared-card .card-list li { font-size: 16px; }
.shared-card .card-list.is-columns {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto);
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-content: space-evenly;
}
.shared-card .card-list.is-columns li { font-size: 14px; }
.shared-card .card-list em { font-style: normal; font-size: 12px; opacity: 0.7; margin-left: auto; padding-left: 8px; }
.shared-card .card-more { opacity: 0.6; font-weight: 500; }
.segmented { display: flex; padding: 4px; border-radius: var(--radius); background: var(--raised-field); }
.segmented button {
  min-height: 44px; min-width: 104px; padding: 0 20px; border: 0; border-radius: var(--radius); cursor: pointer;
  background: none; color: var(--cream-2); font: 600 15px var(--body);
}
.segmented button[aria-selected='true'] { background: var(--cream); color: var(--night); }
.shared-card.is-loading { opacity: 0.55; }
.shared-bottom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
.shared-bottom .again { margin: 0; }
.shared-card .card-mark { justify-content: space-between; gap: 12px; margin-top: calc(var(--shared-w) * 16 / 360); }
.shared-card .card-mark > span { display: inline-flex; align-items: center; gap: 6px; }
.card-store { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0; font: 600 12px var(--body); color: inherit; opacity: 0.85; text-decoration: none; }
.card-store img { width: 18px; height: 18px; opacity: 0.7; }
/* Past phone widths the card takes the window's height (up to 1000px), as wide as
   a share image of that height, and everything in it scales with its width like
   the app's share image (sizes in its units, --u per unit of its 360 width). */
@media (min-width: 561px) {
  .shared-card {
    --shared-h: min(calc(100svh - var(--shared-chrome, 176px)), 1000px);
    --shared-w: min(calc(100vw - 2 * var(--gutter)), calc(var(--shared-h) * 0.62));
    --u: calc(var(--shared-w) / 360);
    height: var(--shared-h);
    border-radius: calc(var(--u) * 18);
  }
  .shared-card .card-head { gap: calc(var(--u) * 14); }
  .shared-card .card-head img { width: calc(var(--u) * 60); height: calc(var(--u) * 60); }
  .shared-card .card-head b { font-size: calc(var(--u) * 20); }
  .shared-card .card-head span { font-size: calc(var(--u) * 12); }
  .shared-card .card-list { margin-top: calc(var(--u) * 16); }
  .shared-card .card-list li { font-size: calc(var(--u) * 19); gap: calc(var(--u) * 12); }
  .shared-card .card-list.is-columns { column-gap: calc(var(--u) * 20); }
  .shared-card .card-list.is-columns li { font-size: calc(var(--u) * 14); gap: calc(var(--u) * 10); }
  .shared-card .card-list i { font-size: 1.05em; width: 1.6em; }
  .shared-card .card-list em { font-size: calc(var(--u) * 11); }
  .shared-card .card-mark { font-size: calc(var(--u) * 15); }
  .shared-card .card-mark img { width: calc(var(--u) * 15); }
  .shared-card .card-store { font-size: calc(var(--u) * 11); }
  .shared-card .card-store img { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
}
.shared-message { max-width: 34rem; text-align: center; display: grid; justify-items: center; gap: 16px; }
.shared-message h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; }
.shared-message p { color: var(--cream-2); }

.doc { max-width: 42rem; margin: 0 auto; padding: 56px var(--gutter) 0; }
.doc h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.03em; }
.doc .updated { margin-top: 12px; font-size: 14px; color: var(--cream-3); }
.doc h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; margin-top: 44px; }
.doc p, .doc li { color: var(--cream-2); }
.doc p { margin-top: 12px; }
.doc ul, .doc ol { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.doc strong { color: var(--cream); font-weight: 600; }
.doc a { color: var(--cream); }
.doc .lead { margin-top: 20px; font-size: 19px; color: var(--cream); }
.doc .note { margin-top: 32px; padding: 16px 20px; border-radius: 16px; background: var(--field); }

/* ---------- Donate page ---------- */

.goal { margin-top: 36px; padding: 20px; border-radius: 16px; background: var(--field); display: grid; gap: 12px; }
.doc .goal-figures { margin: 0; color: var(--cream-2); }
.goal-figures strong { font: 600 28px var(--display); letter-spacing: -0.01em; margin-right: 4px; }
.goal-bar { height: 10px; border-radius: var(--radius); background: var(--line); overflow: hidden; }
.goal-bar span { display: block; height: 100%; min-width: 10px; border-radius: inherit; background: var(--coral); }
.doc .donate-button { margin-top: 28px; gap: 10px; }
.doc .donate-small { font-size: 14px; color: var(--cream-3); }
/* The Musrank heart, the sound-wave bars, in coral beside Donate (header pill and footer). */
.donate-heart {
  display: inline-block; width: 14px; height: 12.4px; flex: none; background: var(--coral);
  -webkit-mask: url(/assets/heart.svg) center / contain no-repeat;
  mask: url(/assets/heart.svg) center / contain no-repeat;
}
.foot .donate-heart { margin-left: 6px; }
.soon .soon-donate { margin-top: 4px; font-size: 14px; color: var(--cream-3); }
.soon-donate a { color: var(--cream-2); }

/* Donate in the header: the Coming soon pill's outline, with a coral heart. Not on the share page. */
.top-end { display: flex; align-items: center; gap: 10px; }
.donate-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--cream-2); text-decoration: none;
  transition: color var(--fast), border-color var(--fast);
}
/* A 44px touch target around the slimmer pill. */
.donate-pill::after { content: ''; position: absolute; inset: -4px 0; }
.donate-pill:hover, .donate-pill:focus-visible, .donate-pill[aria-current='page'] { color: var(--cream); border-color: rgba(255, 246, 234, 0.4); }
/* On phones Coming soon hides; with Donate on the right, the logo goes back to the left. */
@media (max-width: 560px) {
  .top:has(.donate-pill) { justify-content: space-between; }
}

/* Home share cards on phones: at half the screen wide the card was too short for
   ten songs, and the Musrank mark spilled out below it. A little wider, and the
   list gives way (clipped) before the mark ever leaves the card. */
.stack .card-list { min-height: 0; overflow: hidden; }
@media (max-width: 560px) {
  .stack { width: min(58vw, 260px); }
}

/* The supporter mark on a shared ranking (links with s=1), as the app's share image
   draws it on a dark card: the seal and the name in one pale holographic foil, under
   a faint dark shadow, then "Supporter" dimmed. The seal is assets/seal.png as a mask. */
.card-supporter { display: inline-flex; align-items: center; gap: 6px; }
.holo {
  --holo: linear-gradient(105deg, #ffb3e6, #c9b8ff, #a6ecff, #b8ffe0, #fff1b0);
  --holo-width: 104px;
  display: inline-flex; align-items: center; gap: 6px;
  filter: drop-shadow(0 0.5px 3px rgba(16, 16, 18, 0.4));
}
/* One sweep across both: each piece shows its own stretch of the same gradient. */
.holo-seal {
  width: 26px; height: 26px; flex: none; rotate: -14deg;
  background: var(--holo); background-size: var(--holo-width) 100%;
  -webkit-mask: url(/assets/seal.png) center / contain no-repeat;
  mask: url(/assets/seal.png) center / contain no-repeat;
}
.holo-name {
  background: var(--holo); background-size: var(--holo-width) 100%; background-position: -32px 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-supporter-label { opacity: 0.5; text-shadow: 0 0.5px 6px rgba(16, 16, 18, 0.4); }