/* ==========================================================================
   CASSETTE HARDWARE SHELL
   Player looks like an audio cassette: clear plastic, label, two reels.
   ========================================================================== */

body.cassette-active #player.has-hardware {
  position: relative;
  padding: 38px 30px 72px;
  background:
    linear-gradient(180deg, #1a1a22 0%, #0e0e14 100%);
  border: 2px solid #2a2a32;
  border-radius: 8px;
  box-shadow:
    inset 0 2px 0 #ffffff15,
    inset 0 -2px 0 #00000080,
    0 10px 32px #000000a0;
  overflow: visible;
}

/* Screws at 6 points */
body.cassette-active .hw-cs-screw {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #808080 0%, #404040 60%, #1a1a1a 100%);
  box-shadow: inset 0 0 0 1px #00000080, 0 1px 1px #00000060;
}
body.cassette-active .hw-cs-screw::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(90deg, transparent 40%, #000 40%, #000 60%, transparent 60%);
  border-radius: 50%;
}
body.cassette-active .hw-cs-screw-tl { top: 12px; left: 12px; }
body.cassette-active .hw-cs-screw-tr { top: 12px; right: 12px; }
body.cassette-active .hw-cs-screw-bl { bottom: 12px; left: 12px; }
body.cassette-active .hw-cs-screw-br { bottom: 12px; right: 12px; }
body.cassette-active .hw-cs-screw-cl { top: 50%; left: 12px; transform: translateY(-50%); }
body.cassette-active .hw-cs-screw-cr { top: 50%; right: 12px; transform: translateY(-50%); }

/* Top label strip overlays the title bar area */
body.cassette-active .hw-cs-label {
  position: absolute;
  top: 10px;
  left: 32px;
  right: 32px;
  height: 26px;
  background: linear-gradient(180deg, #e4dbb8 0%, #c8b890 100%);
  border: 1px solid #6a5a30;
  border-radius: 2px;
  padding: 3px 8px;
  font-family: 'Georgia', serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: inset 0 1px 0 #ffffffc0, 0 1px 2px #00000040;
  z-index: 4;
  pointer-events: none;
}
body.cassette-active .hw-cs-label-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  color: #3a2a10;
  font-weight: bold;
}
body.cassette-active .hw-cs-side {
  font-size: 11px;
  letter-spacing: 0.1em;
}
body.cassette-active .hw-cs-brand {
  font-style: italic;
  font-size: 9px;
  color: #5a3a10;
}
body.cassette-active .hw-cs-label-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 1px;
}
body.cassette-active .hw-cs-label-lines span {
  height: 1px;
  background: #8a6a30;
  opacity: 0.4;
}

/* Hide the title bar (the label covers it) */
body.cassette-active #player.has-hardware .title-bar {
  opacity: 0;
  pointer-events: none;
  height: 26px;
}

/* Tape reels (flanking LCD area) */
body.cassette-active .hw-cs-reels {
  position: absolute;
  top: 48px;
  left: 32px;
  right: 32px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 3;
}

body.cassette-active .hw-cs-reel {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 50%, #000 100%);
  border: 2px solid #2a2a2a;
  box-shadow:
    inset 0 0 20px #000000,
    inset 0 0 0 3px #1a1a1a,
    inset 0 0 0 14px #2a2a2a,
    inset 0 0 0 16px #1a1a1a;
  display: grid;
  place-items: center;
  position: relative;
}

body.cassette-active .hw-cs-reel::before {
  content: '';
  position: absolute;
  inset: 32px;
  background:
    radial-gradient(circle at center, #4a4a4a 0%, #2a2a2a 100%);
  border-radius: 50%;
  border: 1px solid #1a1a1a;
}

body.cassette-active .hw-cs-reel-spokes {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  animation: hw-cs-spin 3s linear infinite;
}
body.cassette-active .hw-cs-reel-spokes span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 26px;
  background: #1a1a1a;
  border-radius: 2px;
  transform-origin: 2px 2px;
}
body.cassette-active .hw-cs-reel-spokes span:nth-child(1) { transform: translate(-2px, -2px) rotate(0deg); }
body.cassette-active .hw-cs-reel-spokes span:nth-child(2) { transform: translate(-2px, -2px) rotate(60deg); }
body.cassette-active .hw-cs-reel-spokes span:nth-child(3) { transform: translate(-2px, -2px) rotate(120deg); }
body.cassette-active .hw-cs-reel-spokes span:nth-child(4) { transform: translate(-2px, -2px) rotate(180deg); }
body.cassette-active .hw-cs-reel-spokes span:nth-child(5) { transform: translate(-2px, -2px) rotate(240deg); }
body.cassette-active .hw-cs-reel-spokes span:nth-child(6) { transform: translate(-2px, -2px) rotate(300deg); }

@keyframes hw-cs-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Tape window between reels */
body.cassette-active .hw-cs-tape-window {
  flex: 1;
  height: 14px;
  margin: 0 8px;
  background:
    linear-gradient(180deg, #5a4a20 0%, #3a2a10 100%);
  border: 1px solid #2a1a08;
  border-radius: 1px;
  box-shadow: inset 0 1px 2px #00000080;
}

/* Bottom tape holes (tiny rectangles) */
body.cassette-active .hw-cs-bottom {
  position: absolute;
  bottom: 30px;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
body.cassette-active .hw-cs-hole {
  width: 18px;
  height: 10px;
  background: #000;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px #ffffff15;
}
body.cassette-active .hw-cs-hole-wide { width: 60px; }

/* Push real LCD content clear of reels — LCD goes between reels visually */
body.cassette-active #player.has-hardware .lcd-section {
  margin: 40px 72px 0;
  border-radius: 4px;
  background: #0a0a0a;
  border: 1px solid #3a2a10;
  box-shadow: inset 0 0 12px #00000080;
  position: relative;
  z-index: 5;
}

body.cassette-active #player.has-hardware .lcd-time-digits,
body.cassette-active #player.has-hardware .lcd-marquee {
  color: #ff4433;
  text-shadow: 0 0 4px #ff443380, 0 0 10px #ff443340;
}

/* Pause reel spin if a transport button isn't playing */
body.cassette-active #player.has-hardware:not(.is-playing) .hw-cs-reel-spokes {
  animation-play-state: paused;
}

@media (max-width: 560px) {
  body.cassette-active #player.has-hardware { padding: 34px 22px 60px; }
  body.cassette-active .hw-cs-label { left: 24px; right: 24px; }
  body.cassette-active .hw-cs-reels { left: 24px; right: 24px; }
  body.cassette-active .hw-cs-reel { width: 72px; height: 72px; }
  body.cassette-active #player.has-hardware .lcd-section { margin: 36px 54px 0; }
}