/* Discman presentation, retained from the original Ether player. */
.player-console.discman-unit {
  background: #090d12;
  border: 1px solid rgba(143, 168, 91, 0.22);
  border-radius: var(--radius-sm);
  padding: 1.75rem 2rem;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  box-shadow: var(--shadow-lg), 0 0 35px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out);
}

.discman-chassis-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}

.discman-brand-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.discman-disc-spinning-icon {
  color: var(--accent-primary);
  font-weight: 700;
  display: inline-block;
  transition: transform 0.3s ease;
}
.player-console.playing .discman-disc-spinning-icon {
  animation: spinIcon 1.5s linear infinite;
}
@keyframes spinIcon {
  100% { transform: rotate(360deg); }
}

.discman-top-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.discman-esp-badge {
  color: var(--accent-primary);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.btn-discman-eject {
  background: rgba(232, 234, 224, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform 100ms var(--ease-out);
}
.btn-discman-eject:active {
  transform: scale(0.96);
}
.btn-discman-eject:hover {
  background: var(--accent-primary);
  color: #090d12;
  border-color: var(--accent-primary);
}
.btn-discman-eject.open {
  background: var(--accent-warm);
  color: #fff;
  border-color: var(--accent-warm);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  background: #04080c;
  border: 1px solid rgba(143, 168, 91, 0.25);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.04);
}

.player-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  font-weight: 700;
}

.player-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-primary);
}
.player-console.playing .player-led {
  animation: pulseLed 0.8s infinite alternate;
}
@keyframes pulseLed {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

.player-time-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.player-sample-rate {
  color: var(--text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.player-time {
  color: var(--text-primary);
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Discman Viewport Switcher Tabs
   -------------------------------------------------------------------------- */
.discman-viewport-tabs {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.viewport-tab {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform 100ms var(--ease-out);
}
.viewport-tab:active {
  transform: scale(0.96);
}
.viewport-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}
.viewport-tab.active {
  background: var(--accent-primary);
  color: #090d12;
  border-color: var(--accent-primary);
  font-weight: 700;
}

.discman-viewport-stage {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.viewport-panel {
  width: 100%;
  display: none;
  transition: opacity 160ms var(--ease-out), filter 160ms var(--ease-out), transform 160ms var(--ease-out);
  will-change: opacity, filter, transform;
}
.viewport-panel.active {
  display: block;
}
.viewport-panel.panel-fading {
  opacity: 0;
  filter: blur(2px);
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   Physical Spinning Compact Disc & Spindle Bay
   -------------------------------------------------------------------------- */
.cd-spindle-bay {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, #101722 0%, #05080c 70%, #000000 100%);
  border: 4px solid rgba(232, 234, 224, 0.08);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.95), 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.optical-laser-head {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(var(--sled-pos, 20%), -50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  z-index: 1;
  pointer-events: none;
  transition: transform 240ms var(--ease-out);
  will-change: transform;
}
.laser-lens-diode {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-secondary);
  box-shadow: 0 0 10px var(--accent-secondary), 0 0 18px var(--accent-secondary);
  opacity: 0.6;
}
.player-console.playing .laser-lens-diode {
  opacity: 1;
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444, 0 0 20px #ef4444;
  animation: laserPulse 0.4s infinite alternate;
}
@keyframes laserPulse {
  from { transform: scale(0.9); }
  to { transform: scale(1.15); }
}

.laser-sled-label {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* The Compact Disc Disc Mesh */
.compact-disc {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #1a2430 0%,
    #2a3b4c 28%,
    #131c26 30%,
    #1f2d3d 50%,
    #0d141c 85%,
    #17222e 100%
  );
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

.compact-disc.spinning {
  animation: cdSpin 1.4s linear infinite;
}
@keyframes cdSpin {
  100% { transform: rotate(360deg); }
}

.compact-disc.ejected {
  transform: scale(0.85) translateY(-30px);
  opacity: 0.3;
}

/* Holographic Rainbow Diffraction Sheen (Anisotropic Audio CD Prism) */
.cd-rainbow-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 45deg,
      transparent 0deg,
      rgba(143, 168, 91, 0.16) 28deg,
      rgba(56, 189, 248, 0.22) 45deg,
      rgba(236, 72, 153, 0.2) 62deg,
      transparent 88deg,
      transparent 180deg,
      rgba(143, 168, 91, 0.16) 208deg,
      rgba(56, 189, 248, 0.22) 225deg,
      rgba(236, 72, 153, 0.2) 242deg,
      transparent 268deg,
      transparent 360deg
    ),
    conic-gradient(
      from 135deg,
      rgba(255, 0, 0, 0.08) 0deg,
      rgba(255, 165, 0, 0.08) 45deg,
      rgba(255, 255, 0, 0.08) 90deg,
      rgba(0, 255, 128, 0.1) 135deg,
      rgba(0, 200, 255, 0.12) 180deg,
      rgba(128, 0, 255, 0.08) 225deg,
      rgba(255, 0, 128, 0.08) 315deg,
      rgba(255, 0, 0, 0.08) 360deg
    );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Silk Screen Album Graphic on CD */
.cd-silk-screen {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  pointer-events: none;
}

.cd-logo {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-primary);
  opacity: 0.85;
}

.cd-album-print {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.15em;
  opacity: 0.9;
}

.cd-track-print {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.cd-inner-mirror {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, #f1f5f9 0%, #cbd5e1 30%, #64748b 65%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6), 0 0 2px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.cd-center-hole {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000000;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.cd-lid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 13, 18, 0.88);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  text-align: center;
  padding: 1rem;
}
.lid-warning-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-warm);
  letter-spacing: 0.1em;
  border: 1px dashed var(--accent-warm);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Oscilloscope Viewport Screen (Live FFT Canvas)
   -------------------------------------------------------------------------- */
.oscilloscope-screen {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: #020406;
  aspect-ratio: 2 / 1;
}

#discman-oscilloscope {
  width: 100%;
  height: 100%;
  display: block;
}

.scope-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143, 168, 91, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 168, 91, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.scope-telemetry-tag {
  position: absolute;
  bottom: 0.4rem;
  left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--accent-primary);
  opacity: 0.75;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.player-visual-screen {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  background: #000;
  aspect-ratio: 250 / 170;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-screen-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  filter: contrast(1.08) saturate(0.9);
  transition: opacity 0.3s ease;
}
.player-console.playing .player-screen-media {
  opacity: 1;
}

.player-screen-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem;
  pointer-events: none;
}

.screen-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.3) 2px,
    rgba(0, 0, 0, 0.3) 4px
  );
  opacity: 0.6;
}

.screen-track-indicator {
  position: relative;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background: rgba(9, 13, 18, 0.85);
  color: var(--accent-primary);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  letter-spacing: 0.05em;
}

.player-track-info {
  text-align: center;
  margin-bottom: 1.25rem;
}

.player-track-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

.player-track-sub {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.player-visualizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 42px;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.vis-bar {
  width: 6px;
  height: 42px;
  background: var(--accent-primary);
  border-radius: 1px;
  transform-origin: bottom;
  transform: scaleY(0.14);
  transition: transform 80ms linear;
  will-change: transform;
  opacity: 0.5;
}
.player-console.playing .vis-bar {
  opacity: 0.95;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform 100ms var(--ease-out);
  cursor: pointer;
}
.ctrl-btn:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}
.ctrl-btn:hover,
.ctrl-btn:focus-visible {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  outline: none;
}

.ctrl-play {
  background: var(--accent-primary);
  color: #090d12;
  border-color: var(--accent-primary);
  font-weight: 700;
}
.ctrl-play:hover,
.ctrl-play:focus-visible {
  background: var(--accent-hover);
  color: #090d12;
}

.ctrl-stop {
  color: var(--text-secondary);
}
.ctrl-stop:hover {
  color: var(--accent-warm);
  border-color: var(--accent-warm);
}

.player-progress-container {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.track-scrubber {
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}
.track-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent-primary);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.track-scrubber::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   Tactile Hardware Volume Control
   -------------------------------------------------------------------------- */
.discman-volume-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.volume-slider {
  width: 140px;
  height: 4px;
  appearance: none;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 1px;
  background: var(--accent-primary);
  cursor: pointer;
}

.volume-value-text {
  font-weight: 700;
  color: var(--accent-primary);
  min-width: 32px;
}

/* --------------------------------------------------------------------------
   Discography Jewel Case Rack
   -------------------------------------------------------------------------- */
.cd-jewel-case-rack {
  border-top: 1px dashed var(--border-subtle);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}

.rack-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.rack-title {
  color: var(--accent-primary);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.rack-hint {
  color: var(--text-muted);
  font-size: 0.62rem;
}

.rack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.jewel-case {
  background: rgba(17, 24, 34, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.jewel-case:active {
  transform: scale(0.97) translateY(0);
}
.jewel-case:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  background: rgba(25, 35, 50, 0.85);
}
.jewel-case.active {
  border-color: var(--accent-primary);
  background: rgba(143, 168, 91, 0.15);
  box-shadow: 0 0 10px var(--accent-glow);
}

.jewel-spine {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent-primary);
  font-weight: 700;
}

.jewel-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jewel-track {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
}