/* ==========================================================================
   90S CLEAR PURPLE CORDLESS PHONE HARDWARE SHELL
   Translucent purple body with visible PCB, numeric keypad, antenna.
   ========================================================================== */

body.cordless-active #player.has-hardware {
  position: relative;
  padding: 80px 30px 60px 30px;
  background:
    /* circuit board showing through translucent purple */
    repeating-linear-gradient(45deg,
      transparent 0 12px,
      #2a5a3015 12px 13px),
    repeating-linear-gradient(-45deg,
      transparent 0 12px,
      #2a5a3015 12px 13px),
    linear-gradient(180deg,
      rgba(138, 74, 200, 0.85) 0%,
      rgba(90, 40, 150, 0.90) 50%,
      rgba(60, 22, 110, 0.92) 100%);
  border: 3px solid #4a1a7a;
  border-radius: 22px 22px 34px 34px;
  box-shadow:
    inset 0 8px 16px #ffffff40,
    inset 0 -8px 16px #2a084060,
    inset 8px 0 14px #ffffff20,
    inset -8px 0 14px #2a084030,
    0 12px 36px #00000080,
    0 0 24px #b060ff40;
  overflow: visible;
}

/* Glossy highlight strip */
body.cordless-active #player.has-hardware::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 16%;
  right: 16%;
  height: 40px;
  background: linear-gradient(180deg, #ffffff80, transparent);
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}

/* ---- Antenna ---- */
body.cordless-active .hw-cord-antenna {
  position: absolute;
  top: -52px;
  right: 30px;
  width: 12px;
  height: 60px;
  pointer-events: none;
}
body.cordless-active .hw-cord-ant-stem {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 54px;
  background:
    linear-gradient(180deg, #808080 0%, #404040 50%, #2a2a2a 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 1px 0 0 #a0a0a0, inset -1px 0 0 #202020;
}
body.cordless-active .hw-cord-ant-tip {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c0c0c0, #606060 60%, #202020);
  border: 1px solid #000;
}
body.cordless-active .hw-cord-ant-base {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
  background: linear-gradient(180deg, #3a1a5a, #1a0830);
  border: 1px solid #2a0840;
  border-radius: 3px 3px 0 0;
}

/* ---- Earpiece (speaker holes) on top ---- */
body.cordless-active .hw-cord-earpiece {
  position: absolute;
  top: 14px;
  left: 20%;
  right: 42%;
  height: 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
  padding: 4px;
  background: rgba(20, 5, 30, 0.5);
  border: 1px solid #2a0840;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px #0a0018;
  z-index: 2;
}
body.cordless-active .hw-cord-earpiece span {
  background:
    radial-gradient(circle at center, #0a0018 0%, #1a0830 60%, #2a0840 100%);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px #000, 0 0 1px #b060ff30;
}

/* ---- PCB/components visible through translucent body ---- */
body.cordless-active .hw-cord-pcb {
  position: absolute;
  inset: 60px 20px 60px 20px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}
body.cordless-active .hw-cord-chip {
  position: absolute;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 #2a2a2a, 0 1px 1px #00000080;
}
body.cordless-active .hw-cord-chip::before,
body.cordless-active .hw-cord-chip::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  height: 2px;
  background:
    repeating-linear-gradient(90deg,
      #c0c0c0 0 2px,
      transparent 2px 5px);
}
body.cordless-active .hw-cord-chip::before { top: 20%; }
body.cordless-active .hw-cord-chip::after  { bottom: 20%; }

body.cordless-active .hw-cord-chip-1 { top: 10%; left: 8%; width: 44px; height: 24px; }
body.cordless-active .hw-cord-chip-2 { top: 8%; right: 12%; width: 28px; height: 18px; }

body.cordless-active .hw-cord-trace {
  position: absolute;
  background: linear-gradient(90deg, #4aaa4a 0%, #2a7a2a 100%);
  box-shadow: 0 0 2px #4aaa4a60;
}
body.cordless-active .hw-cord-tr-1 { top: 36%; left: 6%; width: 40%; height: 1px; }
body.cordless-active .hw-cord-tr-2 { top: 50%; right: 10%; width: 30%; height: 1px; }
body.cordless-active .hw-cord-tr-3 { bottom: 30%; left: 18%; right: 18%; height: 1px; }

body.cordless-active .hw-cord-cap {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #909090 0%, #505050 60%, #2a2a2a 100%);
  border: 1px solid #1a1a1a;
}
body.cordless-active .hw-cord-cap-1 { top: 18%; right: 26%; }
body.cordless-active .hw-cord-cap-2 { bottom: 26%; left: 10%; }

body.cordless-active .hw-cord-resistor {
  position: absolute;
  width: 16px;
  height: 6px;
  background:
    linear-gradient(90deg,
      #c08060 0 2px,
      #3a3a3a 2px 4px,
      #c08060 4px 10px,
      #e0a070 10px 12px,
      #c08060 12px 16px);
  border-radius: 2px;
}
body.cordless-active .hw-cord-re-1 { top: 40%; right: 18%; }
body.cordless-active .hw-cord-re-2 { bottom: 36%; right: 10%; }

/* ---- Send / End buttons ---- */
body.cordless-active .hw-cord-sendend {
  position: absolute;
  top: 170px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
  z-index: 5;
}
body.cordless-active .hw-cord-btn {
  flex: 1;
  height: 32px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #ffffff;
  border: 1px solid #000;
  box-shadow:
    inset 0 2px 3px #ffffff80,
    inset 0 -2px 3px #00000060,
    0 3px 0 #00000080;
}
body.cordless-active .hw-cord-btn-send {
  background: radial-gradient(ellipse at 30% 30%, #80ff80 0%, #30a030 60%, #104410 100%);
  text-shadow: 0 1px 0 #104410;
}
body.cordless-active .hw-cord-btn-end {
  background: radial-gradient(ellipse at 30% 30%, #ff8080 0%, #c83030 60%, #550808 100%);
  text-shadow: 0 1px 0 #550808;
}
body.cordless-active .hw-cord-btn em {
  font-style: normal;
}

/* ---- Keypad ---- */
body.cordless-active .hw-cord-keypad {
  position: absolute;
  top: 216px;
  left: 30px;
  right: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  pointer-events: none;
  z-index: 5;
}
body.cordless-active .hw-cord-key {
  height: 40px;
  background:
    radial-gradient(ellipse at 30% 25%,
      #ffffff60 0%,
      rgba(180, 140, 230, 0.8) 40%,
      rgba(100, 60, 160, 0.9) 100%);
  border: 1px solid #3a1a5a;
  border-radius: 8px;
  box-shadow:
    inset 0 2px 3px #ffffff80,
    inset 0 -2px 3px #1a083060,
    0 2px 0 #1a0830,
    0 3px 4px #00000060;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
}
body.cordless-active .hw-cord-key strong {
  font-family: 'Georgia', serif;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 0 1px 0 #3a1a5a, 0 2px 2px #00000060;
  line-height: 1;
  font-weight: bold;
}
body.cordless-active .hw-cord-key em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.1em;
  color: #e8d0ff;
  margin-top: 1px;
  opacity: 0.85;
}

/* ---- Brand ---- */
body.cordless-active .hw-cord-brand {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
body.cordless-active .hw-cord-brand span {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-weight: bold;
  font-size: 13px;
  color: #ffffff;
  text-shadow: 0 1px 0 #3a1a5a, 0 0 6px #b060ff80;
  letter-spacing: 0.5px;
}
body.cordless-active .hw-cord-brand em {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.2em;
  color: #e8d0ff90;
  margin-top: 1px;
}

/* Battery silhouette visible through back */
body.cordless-active .hw-cord-battery {
  position: absolute;
  bottom: 8px;
  right: 18px;
  display: flex;
  gap: 2px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
body.cordless-active .hw-cord-cell {
  width: 8px;
  height: 20px;
  background: linear-gradient(180deg, #505050, #2a2a2a);
  border: 1px solid #1a1a1a;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 2px 0 #707070;
}

/* Mic at bottom */
body.cordless-active .hw-cord-mic {
  position: absolute;
  bottom: 14px;
  left: 30px;
  display: grid;
  grid-template-columns: repeat(3, 6px);
  gap: 2px;
  pointer-events: none;
  z-index: 5;
}
body.cordless-active .hw-cord-mic span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #0a0018, #2a0840);
  box-shadow: inset 0 1px 1px #000;
}

/* ---- Real UI: LCD at top, shrink rest, keep functional ---- */
body.cordless-active #player.has-hardware .title-bar {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

body.cordless-active #player.has-hardware .lcd-section {
  position: relative;
  z-index: 4;
  margin: 0 auto 4px;
  max-width: 60%;
  background:
    linear-gradient(180deg, #0f0a18 0%, #1a0f28 100%);
  border: 2px solid #4a6a3a;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow:
    inset 0 0 8px #00000080,
    inset 0 0 0 1px #73ff9a40,
    0 2px 6px #00000080;
}

body.cordless-active #player.has-hardware .lcd-time-digits,
body.cordless-active #player.has-hardware .lcd-marquee,
body.cordless-active #player.has-hardware .lcd-samplerate,
body.cordless-active #player.has-hardware .lcd-bitrate {
  color: #73ff9a;
  text-shadow: 0 0 4px #73ff9a80, 0 0 10px #4aaa4a60;
  font-family: 'Share Tech Mono', monospace;
}

/* Tuck viz/seek inside keypad area so it stays functional */
body.cordless-active #player.has-hardware .viz-container,
body.cordless-active #player.has-hardware .seek-bar-container {
  display: none;
}

/* Compact controls row below LCD, above keypad */
body.cordless-active #player.has-hardware .controls-section {
  position: relative;
  z-index: 6;
  margin: 0 auto;
  max-width: 80%;
  transform: scale(0.85);
  transform-origin: top center;
}

body.cordless-active #player.has-hardware .feature-bar {
  display: none;
}

@media (max-width: 560px) {
  body.cordless-active #player.has-hardware { padding: 66px 20px 54px 20px; }
  body.cordless-active .hw-cord-keypad { left: 20px; right: 20px; top: 192px; }
  body.cordless-active .hw-cord-key { height: 34px; }
  body.cordless-active .hw-cord-key strong { font-size: 14px; }
}