/* Cassette skin (WYEM's original): a gray Maxell XLII in a silver deck.
   Laid out in millimetres on a real compact cassette: a 100.4 x 63.8 mm shell, hubs
   43.2 mm apart, label strip and tape-head trapezoid where they sit on a Maxell XLII.
   --mm is one millimetre at whatever width the cassette is drawn. */

/* --p (0..1 through the track, set by app.js on .player) winds tape from the left pack to the right. */
.cassette {
  width: 100%; max-width: 640px; container-type: inline-size; filter: drop-shadow(0 10px 18px rgba(40, 36, 30, 0.22)); }
.shell {
  --mm: calc(100cqw / 100.4);
  position: relative; aspect-ratio: 100.4 / 63.8; overflow: hidden;
  background: var(--shell); border-radius: calc(3.2 * var(--mm)); color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.shell > * { position: absolute; }

.screw {
  width: calc(3.4 * var(--mm)); height: calc(3.4 * var(--mm)); border-radius: 50%;
  background: #1d1d1f; box-shadow: inset 0 0 0 calc(0.8 * var(--mm)) #2c2c2f;
}
.screw::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: calc(0.45 * var(--mm)); margin-top: calc(-0.22 * var(--mm));
  background: #5a5a5e; transform: rotate(35deg);
}
.s1 { left: calc(2.2 * var(--mm)); top: calc(2.2 * var(--mm)); }
.s2 { right: calc(2.2 * var(--mm)); top: calc(2.2 * var(--mm)); }
.s3 { left: calc(2.2 * var(--mm)); bottom: calc(2.2 * var(--mm)); }
.s4 { right: calc(2.2 * var(--mm)); bottom: calc(2.2 * var(--mm)); }
.s5 { left: calc(48.5 * var(--mm)); top: calc(47.2 * var(--mm)); }

.shell-panel {
  left: calc(29 * var(--mm)); width: calc(42.4 * var(--mm)); top: 0; height: calc(35 * var(--mm));
  background: var(--shell-dark); text-align: center; padding-top: calc(6.5 * var(--mm));
}
.model { font-family: "Antonio", sans-serif; font-size: calc(7.2 * var(--mm)); line-height: 1; letter-spacing: 0.02em; }
.position { font-family: var(--narrow); font-size: max(8px, calc(2.1 * var(--mm))); letter-spacing: 0.14em; margin-top: calc(0.3 * var(--mm)); }

/* Hubs (centres 28.6 mm and 71.8 mm across, 28.6 mm down) */
.reel {
  top: calc(21.6 * var(--mm)); width: calc(14 * var(--mm)); height: calc(14 * var(--mm)); border-radius: 50%;
  background: #47484c; box-shadow: inset 0 0 0 calc(0.6 * var(--mm)) #3a3b3f; display: grid; place-items: center;
}
.reel.l { left: calc(21.6 * var(--mm)); }
.reel.r { left: calc(64.8 * var(--mm)); }
.hub {
  position: relative; width: calc(9.6 * var(--mm)); height: calc(9.6 * var(--mm)); border-radius: 50%;
  background: #d9d6cf; box-shadow: inset 0 0 0 calc(1.1 * var(--mm)) #f1efea;
  animation: spin 2.4s linear infinite; animation-play-state: paused;
}
.hub::before, .hub::after {
  content: ""; position: absolute; left: 50%; width: calc(1.2 * var(--mm)); height: calc(2.2 * var(--mm));
  margin-left: calc(-0.6 * var(--mm)); background: #9a958b; border-radius: 1px;
}
.hub::before { top: calc(-0.2 * var(--mm)); }
.hub::after { bottom: calc(-0.2 * var(--mm)); }
body.playing .hub { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tape window between the hubs; the two packs of tape trade size as the track plays. */
.window {
  left: calc(37.2 * var(--mm)); top: calc(25 * var(--mm)); width: calc(26 * var(--mm)); height: calc(7.2 * var(--mm));
  overflow: hidden; background: #241f1c; border-radius: calc(0.8 * var(--mm)); box-shadow: inset 0 0 0 calc(0.5 * var(--mm)) #3a3b3f;
}
.pack { position: absolute; border-radius: 50%; background: #5b4636; transition: all 1s linear; }
.pack.l {
  --r: calc((7 + 15 * (1 - var(--p))) * var(--mm));
  left: calc(-8.6 * var(--mm) - var(--r)); top: calc(3.6 * var(--mm) - var(--r)); width: calc(2 * var(--r)); height: calc(2 * var(--r));
}
.pack.r {
  --r: calc((7 + 15 * var(--p)) * var(--mm));
  left: calc(34.6 * var(--mm) - var(--r)); top: calc(3.6 * var(--mm) - var(--r)); width: calc(2 * var(--r)); height: calc(2 * var(--r));
}

.side-a {
  left: calc(6 * var(--mm)); top: calc(30 * var(--mm));
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600; font-size: calc(7.4 * var(--mm)); line-height: 1;
}
.label-strip {
  left: calc(7.4 * var(--mm)); width: calc(85.6 * var(--mm)); top: calc(38.2 * var(--mm)); height: calc(8.2 * var(--mm));
  display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--mm)); padding: 0 calc(2.6 * var(--mm));
  background: #ecebe7; border-radius: calc(0.6 * var(--mm));
  background-image: radial-gradient(#d6d5d0 0.8px, transparent 1px); background-size: 4px 4px;
}
.label-text {
  flex: 1; min-width: 0; font-size: max(15px, calc(4.3 * var(--mm))); line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.label-text > span + span { margin-left: 0.7em; }
.label-set { flex: none; font-size: max(15px, calc(4.3 * var(--mm))); line-height: 1.1; white-space: nowrap; }
/* On the one-line cassette label, venue and city sit side by side. */
.label-text .lb-where { display: inline-flex; flex-direction: row; gap: 0.6em; align-items: baseline; }
.label-text .lb-when { font-size: 1em; }

/* Tape-head opening: the trapezoid along the bottom edge, with capstan holes and the head slot. */
.head {
  left: calc(11 * var(--mm)); width: calc(78.4 * var(--mm)); top: calc(51 * var(--mm)); bottom: 0;
  background: var(--shell-dark); clip-path: polygon(7.6% 0, 92.4% 0, 100% 100%, 0 100%);
}
.head > * { position: absolute; background: #262427; }
.hole { top: calc(4.6 * var(--mm)); width: calc(3 * var(--mm)); height: calc(3 * var(--mm)); border-radius: 50%; }
.hole.l { left: calc(14 * var(--mm)); }
.hole.r { right: calc(14 * var(--mm)); }
.slot { left: 50%; top: calc(6.6 * var(--mm)); width: calc(11 * var(--mm)); height: calc(4.2 * var(--mm)); margin-left: calc(-5.5 * var(--mm)); border-radius: calc(0.5 * var(--mm)) calc(0.5 * var(--mm)) 0 0; }

/* The deck under the tape holds the controls. */
.deck {
  width: 100%; max-width: 640px; display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 16px;
  background: linear-gradient(180deg, #e2e1dd, #cfcec9); border: 1px solid #b9b7b1; border-radius: 6px; color: #3d3c3a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(40, 36, 30, 0.12);
}
.counter {
  font-family: "Antonio", sans-serif; font-size: 20px; letter-spacing: 0.06em; white-space: nowrap;
  background: #23211f; color: var(--gold); border: 1px solid #9e9c96; border-radius: 3px; padding: 2px 10px;
}
.vol { display: inline-flex; align-items: center; gap: 8px; flex: 1; font-family: var(--narrow); font-size: 11px; letter-spacing: 0.14em; }
.vol input { width: 100%; max-width: 150px; accent-color: var(--shell-dark); }
.play-label { margin-left: auto; font-family: var(--narrow); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.play {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--shell-dark); color: #f4f2ec;
}
.play:hover { background: var(--ink-black); }
.play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.play svg { width: 22px; height: 22px; fill: currentColor; }
.i-stop { display: none; }
body.playing .i-play { display: none; }
body.playing .i-stop { display: block; }

@media (max-width: 720px) {
  .vol { display: none; }
}