/* ================================================================
   POLISH (2026-10-21): singles, the album score's fine control, and the
   things around them. Loaded last; transform and opacity only.
   ================================================================ */

/* ---- a single is a song page ------------------------------------------ */
#view-album-detail.is-single #rate-album-btn,
#view-album-detail.is-single #suggest-album-btn,
#view-album-detail.is-single #detail-current-score,
#view-album-detail.is-single #detail-completion,
#view-album-detail.is-single #detail-reviews,
#view-album-detail.is-single #detail-cert { display: none !important; }
#view-album-detail.single-solo .tracks-head,
#view-album-detail.single-solo #detail-tracks { display: none; }
#view-album-detail.is-single:not(.single-solo) .tracks-head { font-size: 0; }
#view-album-detail.is-single:not(.single-solo) .tracks-head::before { content: 'Also on the single'; font-size: 13px; }

#detail-single:empty { display: none; }
.sg {
  --sg-c: var(--gold);
  margin: var(--s5) 0 var(--s4); padding: 18px; border-radius: 24px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--sg-c) 16%, transparent), transparent 70%), var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  transition: background 400ms ease;
}
.sg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sg-chip { font: 700 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
#detail-single button.idx.sg-play {
  width: auto; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; gap: 10px;
  display: inline-flex; align-items: center; background: #fff; color: #111; border: 0;
}
#detail-single button.idx.sg-play .pi { display: block; font-size: 14px; }
#detail-single button.idx.sg-play em { font: 600 13px/1 var(--font-body, inherit); font-style: normal; }
#detail-single button.idx.sg-play.playing, #detail-single button.idx.sg-play.paused { background: var(--c-cyan); color: #04141a; }
#detail-single button.idx.sg-play.nopv { opacity: .45; }
.sg-rate { margin: 4px 0 12px; }
.sg-save { transition: transform 160ms var(--gs-spring), opacity 200ms; }
.sg-save:disabled { opacity: .55; }
.sg.sg-done .sg-save { animation: sgPress 520ms var(--gs-spring); }
@keyframes sgPress { 0% { transform: scale(.94); } 100% { transform: scale(1); } }

/* ---- the album score: drag, then − / + ----------------------------------- */
#rate-view .rate-fine { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 2px 0 10px; }
#rate-view #rate-score {
  min-width: 3.2ch; text-align: center; font: 800 52px/1 var(--font-display); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; transition: color 200ms ease;
}
#rate-view #rate-score span { font-size: 15px; color: var(--text-faint); letter-spacing: 0; margin-left: 2px; }
#rate-view #rate-score.pop { animation: rsPop 220ms var(--gs-spring); }
@keyframes rsPop { from { transform: scale(1.12); } to { transform: scale(1); } }
.rate-step {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.07); color: var(--text); font: 600 26px/1 var(--font-display);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform 140ms var(--gs-spring), background 200ms;
}
.rate-step:active { transform: scale(.9); background: rgba(255,255,255,.14); }
#rate-view .rate-drag { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #rate-view #rate-score.pop,
  html:not([data-motion="full"]) .sg.sg-done .sg-save { animation: none; }
}

/* ---- tutorial: the song beat and the drag ---------------------------- */
.onb-slider { flex-direction: column; align-items: stretch; gap: 10px; }
.onb-slider .onb-score { text-align: center; }
.onb-spin {
  position: relative; display: block; margin: 4px auto 18px; padding: 0; border: 0; cursor: pointer;
  width: min(220px, 58vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #111;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.04), 0 0 40px -6px var(--onb-tint, var(--gold));
  -webkit-tap-highlight-color: transparent; transition: box-shadow .4s ease, scale .2s;
}
.onb-spin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.onb-spin::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16%; height: 16%; translate: -50% -50%; border-radius: 50%; background: #0a0908; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.onb-spin-ico {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: #111; font-size: 22px; transition: opacity .25s, scale .25s;
}
.onb-spin.on { animation: onbSpin 3.2s linear infinite; }
.onb-spin.on .onb-spin-ico { opacity: 0; scale: .6; }
.onb-spin:active { scale: .97; }
@keyframes onbSpin { to { rotate: 360deg; } }
.onb-rated .onb-spin { box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 6px var(--onb-tint), 0 0 70px 6px var(--onb-tint); }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .onb-spin.on { animation: none; } }

/* ---- splash: the sound line, GO, and a flight you can see -------------- */
.splash-sound { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .16em; padding-left: .16em; }
.splash-sound svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
/* GO answers on touch-down, not on release. */
.splash-cta { position: relative; min-width: 128px; justify-content: center; overflow: visible;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.splash-cta .sc-label { display: inline-block; transition: transform .22s var(--ease), opacity .18s; }
.splash-cta .sc-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity .18s; }
.splash-cta .sc-load i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: scDot .9s ease-in-out infinite; }
.splash-cta .sc-load i:nth-child(2) { animation-delay: .12s; }
.splash-cta .sc-load i:nth-child(3) { animation-delay: .24s; }
@keyframes scDot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
.splash-cta.is-down { transform: scale(.92); box-shadow: 0 0 28px var(--gold-glow), 0 0 60px var(--accent-2-dim); transition-duration: .08s; }
.splash-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent); opacity: 0; }
.splash-cta.pressed { animation: scPop .42s cubic-bezier(.2,1.6,.4,1); }
.splash-cta.pressed::after { animation: scWave .7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes scPop { 0% { transform: scale(.92); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes scWave { 0% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent); }
  100% { opacity: 0; box-shadow: 0 0 0 26px color-mix(in srgb, var(--gold) 0%, transparent); } }
/* Waiting on the session: the word lifts away and the dots take its place. */
.splash-cta.waiting { opacity: 1; animation: scPop .42s cubic-bezier(.2,1.6,.4,1), scSheen 1.4s linear infinite; }
.splash-cta.waiting .sc-label { transform: translateY(-140%); opacity: 0; }
.splash-cta.waiting .sc-load { opacity: 1; }
@keyframes scSheen { to { background-position: 200% 0; } }
/* The flight: the record is near-black and the app behind it is dark, so
   without an edge it vanished the moment the ground faded and the hand-off
   read as a fade and a ring. A gold rim and glow scale down with it, and the
   label warms to the header mark's gold as it lands. */
.splash-gate.is-handing .sd-vinyl {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 70%, transparent), 0 0 90px 16px color-mix(in srgb, var(--gold) 38%, transparent);
  transition: box-shadow .35s ease;
}
.sd-label::after { content: ''; position: absolute; inset: 7%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 35%, var(--accent-2), var(--gold) 70%); transition: opacity .5s ease .55s; }
.splash-gate.is-handing .sd-label::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .splash-cta.pressed,
  html:not([data-motion="full"]) .splash-cta.waiting,
  html:not([data-motion="full"]) .splash-cta .sc-load i { animation: none; }
}
html[data-motion="none"] .splash-cta.pressed, html[data-motion="none"] .splash-cta.waiting { animation: none; }

/* ---- native feel: nothing drifts sideways, nothing bounces, art is art --- */
html, body { overflow-x: clip; overscroll-behavior: none; }
.modal-panel { overflow-x: hidden; overscroll-behavior: contain; }
img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
a, button, [role="button"], label { -webkit-tap-highlight-color: transparent; }