/* Music kits: a turntable with a crate of records, as in the game's music kit preview.
   The static (no-JavaScript) projection renders the same kits as a plain list. */

/* Static list */
.music-kit-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.music-kit { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.music-kit > img, .music-kit-cover { width: 4.75rem; height: auto; aspect-ratio: 256 / 198; object-fit: contain; }
.music-kit-cover { background: var(--panel-2, var(--panel)); }
.music-kit-copy { min-width: 0; }
.semantic-block .music-kit-copy p { margin: 0; }
.music-kit-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.music-kit-name strong { font-size: .95rem; font-weight: 600; line-height: 1.45; }
.music-kit-name span { color: var(--ink-dim); font-size: .8rem; }
.semantic-block .music-kit-note { margin-top: .3rem; color: var(--ink-dim); font-size: .84rem; line-height: 1.7; }

/* Turntable. The deck is a physical object with its own finish per theme;
   text around it uses the site tokens. Geometry follows the 125 x 100 plinth
   used by the hardware drawing in registry.js. */
.music-deck { --progress: 0; display: grid; gap: 1.25rem; }

.deck-player {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--line);
}

.deck-turntable {
  --deck-top: #2a2e35;
  --deck-bottom: #14171b;
  --deck-edge: #353a42;
  --deck-key: #2b2f36;
  --deck-key-edge: #4a5059;
  --deck-plate: #1b1e23;
  --deck-ring: #3d434b;
  --deck-shadow: rgba(0, 0, 0, .7);
  position: relative;
  width: 100%;
  aspect-ratio: 125 / 100;
  border: 1px solid var(--deck-edge);
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--deck-top), var(--deck-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 22px 34px -22px var(--deck-shadow);
}

html[data-theme="light"] .deck-turntable {
  --deck-top: #f6f5f2;
  --deck-bottom: #d6d3cd;
  --deck-edge: #c3bfb7;
  --deck-key: #e9e7e2;
  --deck-key-edge: #a8a49c;
  --deck-plate: #cbc8c1;
  --deck-ring: #b3afa7;
  --deck-shadow: rgba(70, 60, 40, .45);
}

/* Platter: centred at (50, 50) with radius 43. */
.deck-platter-well {
  position: absolute;
  top: 7%;
  left: 5.6%;
  width: 68.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 8px 18px -6px rgba(0, 0, 0, .65);
}

.deck-platter {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #1d2024 0 90%, #5a6068 93%, #2c3036 97%, #15171a 100%);
  animation: deck-spin 1.8s linear infinite;
  animation-play-state: paused;
}

/* Strobe dots on the platter rim. */
.deck-platter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(#b9bec5 0 1.3deg, transparent 1.3deg 5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 94.5%, #000 95% 98.5%, transparent 99%);
  mask: radial-gradient(closest-side, transparent 94.5%, #000 95% 98.5%, transparent 99%);
}

/* Record: radius 41, with grooves, three track gaps and a smooth run-out. */
.deck-disc {
  position: absolute;
  inset: 4.6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 96.5%, #2c2c30 97.5%, #070708 100%),
    radial-gradient(closest-side, #0c0c0e 0 37%, rgba(255, 255, 255, .05) 37.6%, transparent 38.4%),
    radial-gradient(closest-side, transparent 0 52%, rgba(255, 255, 255, .06) 52.5% 53.3%, transparent 53.8% 67%, rgba(255, 255, 255, .06) 67.5% 68.2%, transparent 68.7% 82%, rgba(255, 255, 255, .05) 82.5% 83.1%, transparent 83.6%),
    repeating-radial-gradient(circle, #111113 0 1px, #1a1a1d 1px 2px);
}

/* The record label shows the square middle of the sleeve, which sits at
   x 24-183, y 10-179 inside every 256 x 198 kit image. */
html .semantic-block .deck-label {
  position: absolute;
  top: 32.5%;
  left: 32.5%;
  width: 35%;
  height: 35%;
  overflow: hidden;
  border-radius: 50%;
  background: #8f8a80;
  box-shadow: 0 0 0 1.5px #050506, 0 0 0 2.5px rgba(255, 255, 255, .06);
}

html .semantic-block .deck-label img {
  position: absolute;
  top: -17.9%;
  left: -24.3%;
  width: 182.9%;
  max-width: none;
  height: auto;
  margin: 0;
}

.deck-label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .18), transparent 55%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}

/* Light falls on the record from one side; the grooves turn under it. */
.deck-sheen {
  position: absolute;
  inset: 4.6%;
  border-radius: 50%;
  background: conic-gradient(from 200deg, transparent 0 6%, rgba(255, 255, 255, .13) 12%, transparent 19% 50%, rgba(255, 255, 255, .08) 57%, transparent 64%);
  -webkit-mask: radial-gradient(closest-side, transparent 36%, #000 39%);
  mask: radial-gradient(closest-side, transparent 36%, #000 39%);
  pointer-events: none;
}

.deck-spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffffff, #b9bec5 45%, #555b63 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  transform: translate(-50%, -50%);
}

/* Hardware: keys, LED, pitch fader and tonearm. */
.deck-hardware { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.deck-key { fill: var(--deck-key); stroke: var(--deck-key-edge); stroke-width: .4; }
.deck-led { fill: #3b3f46; transition: fill .3s ease; }
.deck-slot { fill: rgba(0, 0, 0, .45); }
.deck-fader rect:first-child { fill: #1d2024; stroke: #6a7078; stroke-width: .4; }
.deck-fader-line { fill: #c9ced4; }
.deck-arm-plate { fill: var(--deck-plate); stroke: rgba(0, 0, 0, .25); stroke-width: .5; }
.deck-arm-ring { fill: none; stroke: var(--deck-ring); stroke-width: .6; }
.deck-rest { fill: var(--deck-plate); stroke: var(--deck-key-edge); stroke-width: .4; }
.deck-headshell { fill: #1c1f24; stroke: #6a7078; stroke-width: .4; }
.deck-stylus { fill: var(--amber); }

.deck-arm {
  filter: drop-shadow(1.2px 2px 1.2px rgba(0, 0, 0, .45));
  transform-box: view-box;
  transform-origin: 108px 24px;
  transform: rotate(0deg);
  transition: transform 1s cubic-bezier(.25, 1, .5, 1);
}

.music-deck.is-playing .deck-platter { animation-play-state: running; }
.music-deck.is-playing .deck-arm { transform: rotate(calc(25deg + var(--progress) * 13deg)); }
.music-deck.is-playing .deck-led { fill: var(--signal); filter: drop-shadow(0 0 1.4px var(--signal)); }

@keyframes deck-spin { to { transform: rotate(1turn); } }

/* Spectrum of the clip that is playing. */
.deck-spectrum {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 2.25rem;
  margin-top: 1.1rem;
}

.deck-spectrum i {
  height: 100%;
  border-radius: 1px;
  background: linear-gradient(to top, var(--signal), color-mix(in srgb, var(--signal) 35%, transparent));
  opacity: .85;
  transform: scaleY(.06);
  transform-origin: bottom;
}

.music-deck:not(.is-playing) .deck-spectrum i { opacity: .35; }

.deck-now { min-width: 0; }
.semantic-block .deck-now p { margin: 0; }
.deck-title { display: grid; gap: .2rem; }
.deck-title strong { color: var(--ink); font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
.deck-title span { color: var(--ink-dim); font-size: .86rem; }
.semantic-block .deck-note { margin-top: .75rem; color: var(--ink-dim); font-size: .88rem; line-height: 1.75; }
.deck-note[hidden] { display: none; }

.deck-transport { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

.deck-play {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .5rem;
  min-width: 5.5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 .84rem/1 var(--font-sans);
  cursor: pointer;
}

.deck-play[hidden] { display: none; }
.deck-play:hover { border-color: var(--ink-dim); }
.deck-play:focus-visible, .deck-sleeve:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.deck-play i { width: 0; height: 0; border-block: 5px solid transparent; border-left: 8px solid currentColor; }
.deck-play[aria-pressed="true"] { color: var(--signal-text); border-color: var(--signal); background: var(--signal-soft); }
.deck-play[aria-pressed="true"] i { width: 8px; height: 10px; border: 0; border-inline: 3px solid currentColor; }
.deck-play[hidden] + .deck-progress { display: none; }

.deck-progress { position: relative; flex: 1; height: 2px; background: var(--line); }
.deck-progress span { position: absolute; inset: 0; background: var(--signal); transform: scaleX(var(--progress)); transform-origin: left; }
.deck-time { flex: none; min-width: 5.5em; color: var(--ink-dim); font: 500 .76rem/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.deck-time:empty { display: none; }
.deck-play[hidden] ~ .deck-time { display: none; }

/* Record crate */
.deck-crate { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }

.deck-sleeve {
  display: grid;
  align-content: start;
  gap: .45rem;
  width: 100%;
  padding: .4rem .4rem .5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-dim);
  font: 500 .78rem/1.35 var(--font-sans);
  text-align: left;
  cursor: pointer;
}

.deck-sleeve img, .deck-sleeve-blank { display: block; width: 100%; height: auto; aspect-ratio: 256 / 198; object-fit: contain; }
.deck-sleeve-blank { background: var(--panel-2, var(--panel)); }
.deck-sleeve span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.deck-sleeve:hover { border-color: var(--line); }
.deck-sleeve[aria-pressed="true"] { border-color: var(--line-strong); background: var(--panel); color: var(--ink); }

@media (max-width: 640px) {
  .deck-player { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1rem; }
  .deck-turntable { width: min(100%, 22rem); margin-inline: auto; }
  .deck-crate { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-platter { animation: none; }
  .deck-arm, .deck-led { transition: none; }
  .deck-spectrum { display: none; }
}

@media print {
  .deck-transport, .deck-spectrum, .deck-arm { display: none; }
}

/* Changing records: the new disc is set down on the platter and its title
   arrives with it (class set by registry.js). The arm already swings back. */
@media (prefers-reduced-motion: no-preference) {
  .deck-disc.is-retuning { animation: deck-record-drop .62s cubic-bezier(.16, 1, .3, 1) both; }
  .deck-title.is-retuning > * { animation: deck-title-in .42s cubic-bezier(.16, 1, .3, 1) both; }
  .deck-title.is-retuning > :last-child { animation-delay: 60ms; }
}

@keyframes deck-record-drop {
  from { opacity: 0; scale: 1.08; rotate: -50deg; }
  60% { opacity: 1; }
}

@keyframes deck-title-in { from { opacity: 0; translate: 0 6px; } }