:root {
  --paper: #ece7dc;
  --paper-hi: #f5f1e8;
  --ink: #151413;
  --muted: #6c675e;
  --red: #e8321c;
  --tape: rgba(226, 214, 180, .95);
  --cond: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --player-h: 72px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .06 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* aus JS */
  --W: 380px;
  --H: 374px;
}

* { box-sizing: border-box; }

html {
  /* Papier mit Kopierer-Körnung */
  background: var(--grain), var(--paper);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- Kopf ---------- */
.top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(14px, 2.4vh, 24px) clamp(16px, 2vw, 28px);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--cond);
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.logo__word b {
  font-weight: inherit;
  margin-left: .06em;
  padding: .04em .14em 0;
  background: var(--ink);
  color: var(--paper);
  display: inline-block;
  transform: rotate(-2deg);
}
.logo__rec {
  width: .36em; height: .36em;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--ink);
  flex: none;
}
body.is-playing .logo__rec { animation: rec 1.1s steps(1) infinite; }
@keyframes rec { 50% { background: transparent; } }
.top__tag {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

/* ---------- Bühne mit der Hülle ---------- */
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  touch-action: pan-y; /* hoch/runter scrollt die Seite, quer dreht die Hülle */
  --scene-y: 46%;
}
.scene {
  position: absolute;
  left: 50%;
  top: var(--scene-y);
  width: 0; height: 0;
}

/* ein Rig = eine Hülle + Schatten; beim Tausch gibt es kurz zwei */
.rig {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  perspective: calc(var(--W) * 4.1);
  will-change: transform, opacity;
}

.shadow {
  position: absolute;
  left: calc(var(--W) / -2);
  top: calc(var(--H) / -2);
  width: var(--W);
  height: var(--H);
  border-radius: calc(var(--W) * .03);
  background: rgba(21, 20, 19, .2);
  filter: blur(calc(var(--W) * .016));
  pointer-events: none;
  will-change: transform;
}

.case {
  position: absolute;
  left: calc(var(--W) / -2);
  top: calc(var(--H) / -2);
  width: var(--W);
  height: var(--H);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  cursor: pointer;
}
body.is-busy .case { cursor: default; }
body.is-pressing, body.is-pressing * { cursor: none !important; }

.tray, .lid, .disc {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.lid { transform-origin: 0 50%; }

.face { position: absolute; inset: 0; }
.face svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.plate { border-radius: calc(var(--W) * .03); }
.plate--back { background: rgba(250, 248, 243, .45); }
.lid__out {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, var(--gloss-a, 0)) 0,
    rgba(255, 255, 255, var(--gloss-a, 0)) var(--gloss-x, 52%),
    rgba(255, 255, 255, 0) var(--gloss-x, 52%));
}
.lid__in { background: rgba(250, 250, 251, .08); border-radius: calc(var(--W) * .03); }

.wall {
  position: absolute;
  border: 1px solid rgba(21, 20, 19, .6);
  border-radius: 2px;
}
.wall--h { background: linear-gradient(rgba(240, 238, 232, .75) 0 44%, rgba(60, 58, 54, .45) 44% 56%, rgba(228, 225, 218, .6) 56%); }
.wall--v { background: linear-gradient(90deg, rgba(240, 238, 232, .75) 0 44%, rgba(60, 58, 54, .45) 44% 56%, rgba(228, 225, 218, .6) 56%); }

.disc { inset: auto; }
.disc__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.disc__face--back { transform: rotateY(180deg); }
.disc__face canvas, .disc__spin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.disc__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from var(--sheen, 0deg),
      rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .12) 18deg, rgba(255, 255, 255, 0) 46deg,
      rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .08) 200deg, rgba(255, 255, 255, 0) 228deg,
      rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 29%, #000 30.5%);
  mask: radial-gradient(circle, transparent 29%, #000 30.5%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---------- Takt: Raster-Blob, Welle, Pegel ---------- */
/* Rasterpunkte wie auf den Discs, als unregelmäßiger Fleck hinter der Hülle; JS skaliert mit dem Bass */
.blob {
  position: absolute;
  left: 50%;
  top: var(--scene-y);
  width: calc(var(--W) * 2.1);
  height: calc(var(--W) * 2.1);
  margin: calc(var(--W) * -1.05) 0 0 calc(var(--W) * -1.05);
  border-radius: 46% 54% 52% 48% / 51% 45% 55% 49%;
  background: radial-gradient(circle, rgba(21, 20, 19, .8) 0 1.5px, transparent 2px) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(closest-side, #000 0 50%, rgba(0, 0, 0, .55) 75%, transparent 100%);
  mask: radial-gradient(closest-side, #000 0 50%, rgba(0, 0, 0, .55) 75%, transparent 100%);
  opacity: .22;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Welle: weicher Schattenrand, kein Strich */
.shock {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--W) * 1.2);
  height: calc(var(--W) * 1.2);
  border-radius: 48% 52% 50% 50% / 50% 46% 54% 50%;
  box-shadow:
    0 0 calc(var(--W) * .07) calc(var(--W) * .015) rgba(21, 20, 19, .3),
    inset 0 0 calc(var(--W) * .07) calc(var(--W) * .015) rgba(21, 20, 19, .3);
  pointer-events: none;
  will-change: transform, opacity;
}
.shock--hot {
  box-shadow:
    0 0 calc(var(--W) * .07) calc(var(--W) * .015) rgba(232, 50, 28, .28),
    inset 0 0 calc(var(--W) * .07) calc(var(--W) * .015) rgba(232, 50, 28, .28);
}

/* Leiste unter der Hülle: Herz-Sticker, Pegel, Teilen */
.deck {
  position: absolute;
  left: 50%;
  bottom: calc(var(--player-h) + 92px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Pegel-Modul: zwei waagerechte LED-Zeilen */
.meters {
  transform: rotate(-1deg);
  display: grid;
  gap: 5px;
  padding: 7px 10px;
  background: var(--paper-hi);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
}
.meter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}
.meter span { width: 3ch; }
.meter__bar {
  --segs: repeating-linear-gradient(to right, #000 0 calc(100% / 16 - 2px), transparent calc(100% / 16 - 2px) calc(100% / 16));
  position: relative;
  width: 120px;
  height: 7px;
}
/* LED-Segmente: links Tinte, rechts Rot; dunkle Segmente bleiben schwach sichtbar */
.meter__bar::before, .meter__fill {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--segs);
  mask: var(--segs);
}
.meter__bar::before { content: ""; background: rgba(21, 20, 19, .12); }
.meter__fill {
  background: linear-gradient(to right, var(--ink) 0 68%, var(--red) 68%);
  clip-path: inset(0 calc((1 - var(--v, 0)) * 100%) 0 0);
}
.meter__peak {
  position: absolute;
  top: -2px; bottom: -2px;
  left: calc(var(--pk, 0) * (100% - 3px));
  width: 3px;
  background: var(--red);
  opacity: calc(var(--pk, 0) * 8);
}

/* ---------- Booklet im Deckel (nur offen sichtbar) ---------- */
.booklet {
  inset: 3.5%;
  transform: translateZ(-.5px) rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--paper-hi);
  border: 1.5px solid var(--ink);
  border-radius: calc(var(--W) * .012);
  box-shadow: inset 0 0 calc(var(--W) * .07) rgba(120, 100, 60, .14);
}
.bk {
  position: absolute;
  inset: 0;
  padding: 11% 9% 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--W) * .022);
  font-size: calc(var(--W) * .034);
  line-height: 1.3;
}
.bk__tape {
  position: absolute;
  top: -2.5%;
  width: 28%;
  height: 8%;
  background: var(--tape);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.bk__tape--a { left: 6%; transform: rotate(-7deg); }
.bk__tape--b { right: 8%; transform: rotate(5deg); }
.bk__no { margin: 0; font-size: calc(var(--W) * .03); letter-spacing: .12em; color: var(--muted); }
.bk__title {
  margin: 0;
  font-family: var(--cond);
  font-weight: 400;
  font-size: calc(var(--W) * .125);
  line-height: .9;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.bk__meta { margin: auto 0 0; display: grid; grid-template-columns: auto 1fr; gap: .15em 1.2em; }
.bk__meta div { display: contents; }
.bk__meta dt { color: var(--muted); text-transform: uppercase; font-size: .85em; letter-spacing: .06em; }
.bk__meta dd { margin: 0; font-weight: 700; }
.bk__note { margin: 0; font-style: italic; }
.bk__prod { margin: 0; font-size: calc(var(--W) * .028); text-transform: uppercase; letter-spacing: .1em; }
.booklet .stamp { font-size: calc(var(--W) * .045); }

/* Stempel BEAT / SONG */
.stamp {
  display: inline-block;
  padding: .12em .45em 0;
  border: 2px solid currentColor;
  font-family: var(--cond);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.15;
  transform: rotate(-4deg);
}
.stamp--beat { color: var(--red); }
.stamp--song { color: var(--ink); }

.hint {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(var(--player-h) + 64px);
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.to-tracks {
  position: absolute;
  left: 50%;
  bottom: calc(var(--player-h) + 26px);
  transform: translateX(-50%) rotate(-2deg);
  padding: 6px 12px;
  background: var(--tape);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* ---------- Trackliste ---------- */
.tracks {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 16px 24px;
  scroll-margin-top: 12px;
}
.tracks__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--ink);
}
.tracks h2 {
  margin: 0;
  font-family: var(--cond);
  font-weight: 400;
  font-size: clamp(44px, 10vw, 80px);
  line-height: .85;
  text-transform: uppercase;
}
#trackCount { font-family: var(--mono); font-size: 14px; vertical-align: top; letter-spacing: 0; }
.filter { display: flex; }
.filter button {
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  background: var(--paper-hi);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.filter button + button { margin-left: -2px; }
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.list { list-style: none; margin: 0; padding: 0; }
.row__btn {
  display: grid;
  grid-template-columns: 2.6ch 52px minmax(0, 1fr) auto 5ch;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.row__btn:hover { background: rgba(21, 20, 19, .05); }
.row__no { position: relative; font-size: 12px; color: var(--muted); }
.row__no b { font-weight: 400; }
.row__disc canvas { width: 52px; height: 52px; display: block; border-radius: 50%; }
.row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row__title {
  font-family: var(--cond);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__meta { font-size: 11px; color: var(--muted); }
.row__meta:empty { display: none; }
.row__dur { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

.row.is-current .row__btn { background: var(--ink); color: var(--paper); }
.row.is-current .row__no, .row.is-current .row__meta { color: #b3ada2; }
.row.is-current .stamp--song { color: var(--paper); }
.row.is-current .row__disc canvas { animation: spin 2.2s linear infinite paused; }
body.is-playing .row.is-current .row__disc canvas { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

/* drei Balken statt Nummer, solange der Track läuft */
.eq { display: none; position: absolute; left: 0; bottom: -2px; height: 14px; gap: 2px; align-items: flex-end; }
.eq i { width: 3px; height: 100%; background: var(--red); animation: eq .8s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s; }
.eq i:nth-child(3) { animation-delay: -.55s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.eq i { transform-origin: bottom; }
body.is-playing .row.is-current .eq { display: flex; }
body.is-playing .row.is-current .row__no b { visibility: hidden; }

.foot {
  padding: 8px 16px calc(var(--player-h) + 44px);
  text-align: center;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Kisten: durchsichtige Boxen voller Hüllen ---------- */
.tracks__hint { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.crates {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 20px;
}
.crate-wrap { text-align: center; }
.crate {
  /* S = Kantenlänge einer Hülle; Box: Breite CW, Höhe CH, Tiefe CD */
  --S: 116px;
  --CW: calc(var(--S) * 1.16);
  --CH: calc(var(--S) * 1.08);
  --CD: calc(var(--S) * .9);
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--S) * 2.15);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: calc(var(--S) * 7);
}
.crate__box {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(-32deg);
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1);
}
.crate:hover .crate__box, .crate:focus-visible .crate__box { transform: rotateX(-28deg) rotateY(-22deg) translateY(-4px); }
.crate.is-open .crate__box { transform: rotateX(-30deg) rotateY(-14deg) translateY(-6px); }
.crate:focus-visible { outline: none; }
.crate:focus-visible + .crate__name { outline: 3px solid var(--red); outline-offset: 2px; }

.crate__face, .crate__lid {
  position: absolute;
  left: 0; top: 0;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: rgba(255, 255, 255, .2);
}
.crate__face--front, .crate__face--back { width: var(--CW); height: var(--CH); margin: calc(var(--CH) / -2) 0 0 calc(var(--CW) / -2); }
.crate__face--front {
  transform: translateZ(calc(var(--CD) / 2));
  /* Kanten-Glanz wie beim Acryl */
  background: linear-gradient(115deg, rgba(255, 255, 255, .5) 0 12%, rgba(255, 255, 255, .14) 12% 70%, rgba(255, 255, 255, .32) 70%);
}
.crate__face--back { transform: rotateY(180deg) translateZ(calc(var(--CD) / 2)); }
.crate__face--left, .crate__face--right { width: var(--CD); height: var(--CH); margin: calc(var(--CH) / -2) 0 0 calc(var(--CD) / -2); }
.crate__face--left { transform: rotateY(-90deg) translateZ(calc(var(--CW) / 2)); }
.crate__face--right { transform: rotateY(90deg) translateZ(calc(var(--CW) / 2)); background: rgba(255, 255, 255, .3); }
.crate__face--bottom {
  width: var(--CW); height: var(--CD);
  margin: calc(var(--CD) / -2) 0 0 calc(var(--CW) / -2);
  transform: rotateX(90deg) translateZ(calc(var(--CH) / -2));
  background: rgba(21, 20, 19, .12);
}
/* Deckel hängt an der hinteren Oberkante und klappt nach hinten auf */
.crate__hinge {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
  transform: translate3d(0, calc(var(--CH) / -2), calc(var(--CD) / -2)) rotateX(var(--lid, 0deg));
  transition: transform .45s cubic-bezier(.3, 1.35, .5, 1);
}
.crate__lid {
  left: calc(var(--CW) / -2);
  width: var(--CW);
  height: var(--CD);
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  background: rgba(255, 255, 255, .26);
}
.crate:hover { --lid: 12deg; }
.crate.is-open { --lid: 108deg; }
.crate__label {
  position: absolute;
  left: 8%; right: 8%;
  bottom: 9%;
  padding: .25em .3em .1em;
  background: var(--tape);
  font-family: var(--cond);
  font-size: calc(var(--S) * .13);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* eine Hülle in der Kiste; --t: 1 = ganz vorn, 0 = ganz hinten */
.crate__slab {
  position: absolute;
  left: 0; top: 0;
  width: var(--S); height: var(--S);
  margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: rgba(250, 248, 243, .62);
  transform-origin: 50% 100%;
  transform:
    translate3d(0, calc(var(--CH) / 2 - var(--S) / 2 - 3px + var(--lift, 0px)), calc(var(--CD) * (-.4 + .8 * var(--t))))
    rotateX(var(--lean)); /* nach hinten angelehnt */
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1) calc(var(--i) * 30ms);
}
.crate__slab canvas { position: absolute; inset: 7%; width: 86%; height: 86%; }
.crate:hover .crate__slab { --lift: calc(var(--S) * -.1); }
.crate.is-open .crate__slab { --lift: calc(var(--S) * -.62); }

.crate__name {
  margin: 0;
  font-family: var(--cond);
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
}
.crate__name span { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; }

/* ---------- offene Kiste ---------- */
html.is-boxed { overflow: hidden; }
.boxview {
  position: fixed;
  inset: 0;
  z-index: 15; /* unter dem Player */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--grain), var(--paper);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .3, 1);
}
.boxview.is-in { opacity: 1; transform: none; }
.boxview__inner { max-width: 900px; margin: 0 auto; padding: 22px 16px calc(var(--player-h) + 56px); }
.boxview__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 -16px 26px;
  padding: 12px 16px;
  background: var(--grain), var(--paper);
  border-bottom: 3px solid var(--ink);
}
.boxview__kicker { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.boxview__title {
  margin: 2px 0 4px;
  font-family: var(--cond);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 76px);
  line-height: .88;
  text-transform: uppercase;
}
.boxview__meta { margin: 0; font-size: 12px; color: var(--muted); }
.boxview__close {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  background: var(--paper-hi);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.boxview__close:active { transform: translate(3px, 3px); box-shadow: none; }

.cds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 30px 22px;
}
.cd {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transform: rotate(var(--tilt));
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.boxview.is-in .cd { animation: cd-in .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--d) * 45ms); }
@keyframes cd-in { from { opacity: 0; transform: translateY(40px) rotate(calc(var(--tilt) * 4)) scale(.8); } }
.cd:hover, .cd:focus-visible { transform: rotate(0) translateY(-4px); }
.cd__case {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(125deg, rgba(255, 255, 255, .6) 0 18%, rgba(255, 255, 255, .2) 18% 72%, rgba(255, 255, 255, .45) 72%);
  box-shadow: 3px 3px 0 var(--ink);
  transition: box-shadow .2s ease;
}
/* Tray-Linie und Scharnier wie bei der großen Hülle */
.cd__case::before { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(21, 20, 19, .28); border-radius: 3px; }
.cd__case::after { content: ""; position: absolute; top: 4%; bottom: 4%; left: 6%; border-left: 1.5px solid rgba(21, 20, 19, .45); }
.cd:hover .cd__case { box-shadow: 6px 6px 0 var(--ink); }
.cd__case canvas { position: absolute; inset: 9%; width: 82%; height: 82%; }
.cd__title { font-family: var(--cond); font-size: 21px; line-height: 1.05; text-transform: uppercase; }
.cd__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.cd__meta .stamp { font-size: 11px; }
.cd.is-current .cd__case { background: var(--ink); }
.cd.is-current .cd__case::before { border-color: rgba(236, 231, 220, .3); }
.cd.is-current .cd__title::after { content: " ●"; color: var(--red); }
body.is-playing .cd.is-current canvas { animation: spin 2.2s linear infinite; }

/* ---------- Herzen und Teilen ---------- */
/* Herz als Aufkleber: weißer Stanzrand, rote Füllung, Tinte drumherum */
.h-edge { fill: var(--paper-hi); stroke: var(--paper-hi); stroke-width: 5; stroke-linejoin: round; }
.h-fill { fill: var(--red); stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.h-glint { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.3; stroke-linecap: round; }

.sticker {
  position: relative;
  flex: none;
  width: 58px; height: 58px;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none; /* sonst scrollt das Handy statt zu ziehen */
}
.sticker svg {
  display: block;
  width: 100%; height: 100%;
  transform: rotate(-8deg);
  filter: drop-shadow(1.5px 2px 0 rgba(21, 20, 19, .3));
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease;
}
.sticker:hover svg { transform: rotate(-2deg) scale(1.08); }
.sticker.is-lifted svg { opacity: .15; }
/* Herz klebt auf der CD: auf dem Blatt bleibt nur der gestrichelte Umriss */
.sticker.is-used { cursor: pointer; }
.sticker.is-used .h-edge, .sticker.is-used .h-glint { opacity: 0; }
.sticker.is-used .h-fill { fill: transparent; stroke-dasharray: 2 1.6; }
.sticker.is-used svg { filter: none; }
.sticker__hint {
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  margin-top: 2px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sticker.is-used .sticker__hint { visibility: hidden; }
.stage.is-heart-target .shadow { background: rgba(232, 50, 28, .35); }

.heart-ghost { position: fixed; z-index: 60; pointer-events: none; will-change: transform; }
.heart-ghost svg { display: block; width: 100%; height: 100%; filter: drop-shadow(2px 4px 0 rgba(21, 20, 19, .3)); }

/* Herz auf dem Deckel der Hülle, mit Zahl auf Kreppband */
.case-heart { position: absolute; right: 5%; top: 5%; width: 21%; aspect-ratio: 1; pointer-events: none; }
.case-heart svg {
  display: block;
  width: 100%; height: 100%;
  transform: rotate(14deg) scale(0);
  transition: transform .4s cubic-bezier(.3, 1.7, .5, 1);
}
.rig.is-liked .case-heart svg { transform: rotate(14deg) scale(1); }
.case-heart__count {
  position: absolute;
  right: 4%; top: 96%;
  padding: .12em .4em 0;
  background: var(--tape);
  font-family: var(--cond);
  font-size: calc(var(--W) * .055);
  line-height: 1.15;
  white-space: nowrap;
  transform: rotate(-6deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.case-heart__count:empty { display: none; }

.share-tape {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: var(--tape);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(2deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  cursor: pointer;
}
.share-tape:active { transform: rotate(2deg) translateY(1px); }

/* Herz und Teilen im Player */
.pbtn { position: relative; }
.pbtn--heart svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; overflow: visible; }
.pbtn--heart[aria-pressed="true"] svg { fill: var(--red); stroke: var(--ink); }
.pbtn__count {
  position: absolute;
  top: 1px; right: -2px;
  min-width: 18px;
  padding: 2px 4px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}
.pbtn__count:empty { display: none; }

/* eigenes Herz in Liste und Kiste */
.row.is-liked .row__title::before, .cd.is-liked .cd__title::before { content: "♥ "; color: var(--red); }

.toast {
  position: fixed;
  z-index: 21;
  left: 50%;
  bottom: calc(var(--player-h) + max(12px, env(safe-area-inset-bottom)) + 14px);
  transform: translate(-50%, 8px);
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Player unten ---------- */
.player {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(720px, calc(100% - 24px));
  height: var(--player-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px 0 8px;
  background: var(--paper-hi);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
}
.pbtn {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.pbtn svg { width: 20px; height: 20px; }
.pbtn:active { transform: scale(.92); }
.pbtn--play {
  width: 52px; height: 52px;
  background: var(--red);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.pbtn--play:active { transform: translate(2px, 2px); box-shadow: none; }
.pbtn--play .i-pause { display: none; }
body.is-playing .pbtn--play .i-play { display: none; }
body.is-playing .pbtn--play .i-pause { display: block; }

.now { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-left: 10px; }
.now__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.now__title {
  min-width: 0;
  font-family: var(--cond);
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now__time { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.wave { position: relative; height: 24px; cursor: pointer; touch-action: none; }
.wave__bars { position: absolute; inset: 0; }
.wave svg { display: block; width: 100%; height: 100%; }
.wave__bars rect { fill: rgba(21, 20, 19, .22); }
.wave__bars--done { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.wave__bars--done rect { fill: var(--ink); }
.wave::after {
  content: "";
  position: absolute;
  top: -3px; bottom: -3px;
  left: var(--p, 0%);
  width: 2px;
  margin-left: -1px;
  background: var(--red);
}

/* ---------- Zieh-Cursor: Ring hinter der Faust ---------- */
.cursor-ring, .cursor-hand {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity .15s ease;
  will-change: transform;
}
.cursor-ring {
  width: calc(var(--W) * .145);
  height: calc(var(--W) * .145);
  margin: calc(var(--W) * -.0725) 0 0 calc(var(--W) * -.0725);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.cursor-hand { width: 22px; height: 22px; margin: -11px 0 0 -11px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.cursor-hand svg { width: 100%; height: 100%; display: block; }
body.is-pressing .cursor-ring, body.is-pressing .cursor-hand { opacity: 1; }
@media (hover: none) { .cursor-ring, .cursor-hand { display: none; } }

/* ---------- kleine Bildschirme ---------- */
@media (max-width: 560px) {
  :root { --player-h: 68px; }
  .top__tag { display: none; }
  .stage { --scene-y: 43%; }
  .row__btn { grid-template-columns: 44px minmax(0, 1fr) auto 4.5ch; gap: 10px; padding: 10px 4px; min-height: 66px; }
  .row__no { display: none; }
  .row__disc canvas { width: 44px; height: 44px; }
  .row__title { font-size: 20px; }
  .stamp { font-size: 11px; }
  .player { padding: 0 12px 0 4px; gap: 0; }
  .now { padding-left: 8px; }
  .now__title { font-size: 16px; }
  .deck { bottom: calc(var(--player-h) + 98px); gap: 10px; }
  .meters { padding: 6px 8px; }
  .sticker { width: 50px; height: 50px; }
  .share-tape { padding: 0 9px; font-size: 11px; }
  .pbtn--side { width: 38px; }
  .now__time, .sticker__hint { display: none; } /* Platz für den Titel; Fortschritt zeigt die Welle */
  .crates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .crate { --S: 84px; }
  .crate__name { font-size: 18px; }
  .cds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .cd__title { font-size: 17px; }
  .meter__bar { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .eq i, .row.is-current .row__disc canvas, body.is-playing .logo__rec, body.is-playing .cd.is-current canvas, .boxview.is-in .cd { animation: none; }
  .crate__box, .crate__slab, .crate__hinge, .boxview, .cd, .sticker svg, .case-heart svg, .toast { transition: none; }
}