/* ==========================================================================
   MOTOROLA STARTAC FLIP PHONE HARDWARE SHELL
   Clamshell open vertically: flip lid up top with LCD + speaker, hinge across
   middle, keypad + soft keys + send/end in the base.
   ========================================================================== */

body.fliptac-active #player.has-hardware {
  position: relative;
  padding: 44px 22px 64px 22px;
  background:
    linear-gradient(180deg,
      #48484e 0%,
      #3a3a40 15%,
      #32323a 50%,
      #2a2a32 85%,
      #202028 100%);
  border: 2px solid #1a1a22;
  border-radius: 26px 26px 22px 22px;
  box-shadow:
    inset 0 2px 0 #7a7a82,
    inset 0 -3px 0 #14141a,
    inset 4px 0 6px #ffffff10,
    inset -4px 0 6px #00000040,
    0 12px 36px #000000a0;
  overflow: visible;
}

/* Subtle brushed-metal stripes */
body.fliptac-active #player.has-hardware::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 2px,
    #ffffff06 2px 3px
  );
  pointer-events: none;
  border-radius: inherit;
}

/* ---- Antenna (top right) ---- */
body.fliptac-active .hw-flip-antenna {
  position: absolute;
  top: -58px;
  right: 22px;
  width: 10px;
  height: 62px;
  pointer-events: none;
}
body.fliptac-active .hw-flip-ant-stem {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 58px;
  background: linear-gradient(180deg, #808080 0%, #4a4a4a 100%);
  border-radius: 2px 2px 0 0;
  box-shadow:
    inset 1px 0 0 #a0a0a0,
    inset -1px 0 0 #202020,
    0 0 1px #00000080;
}
body.fliptac-active .hw-flip-ant-tip {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2a2a2a, #0a0a0a);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 #4a4a4a;
}

/* ---- External caller-ID LCD strip (tiny, on top of the flip) ---- */
body.fliptac-active .hw-flip-ext-lcd {
  position: absolute;
  top: 10px;
  left: 30px;
  width: 80px;
  height: 18px;
  background: linear-gradient(180deg, #4a7a4a 0%, #2a4a2a 100%);
  border: 1px solid #0a1a0a;
  border-radius: 3px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 2px #00000080;
  z-index: 3;
}
body.fliptac-active .hw-flip-ext-lcd span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.15em;
  color: #0a1a0a;
  font-weight: bold;
}

/* ---- Brand on flip lid (right side of external LCD row) ---- */
body.fliptac-active .hw-flip-brand {
  position: absolute;
  top: 12px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 3;
}
body.fliptac-active .hw-flip-m {
  font-family: 'Arial Black', sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: #ffffff;
  background: #1a1a22;
  padding: 0 3px;
  border: 1px solid #505058;
  line-height: 1;
}
body.fliptac-active .hw-flip-logo {
  font-family: 'Arial Black', sans-serif;
  font-size: 8px;
  letter-spacing: 0.15em;
  color: #d8d8e0;
}
body.fliptac-active .hw-flip-model {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 7px;
  letter-spacing: 0.05em;
  color: #a0a0a8;
}

/* ---- Speaker earpiece above LCD ---- */
body.fliptac-active .hw-flip-earpiece {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 8px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  z-index: 2;
  padding: 1px;
  background: #14141a;
  border: 1px solid #0a0a10;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px #000000a0;
}
body.fliptac-active .hw-flip-earpiece span {
  background: radial-gradient(circle, #0a0a10 0%, #000 100%);
  border-radius: 50%;
}

/* ---- Hinge line (between flip and base) ---- */
body.fliptac-active .hw-flip-hinge {
  position: absolute;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}
/* Position via nth / utility class in CSS since we can't easily compute top */
body.fliptac-active .hw-flip-hinge {
  top: 58%;
  transform: translateY(-50%);
}
body.fliptac-active .hw-flip-hinge-cyl {
  width: 18px;
  height: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, #7a7a82 0%, #404048 60%, #1a1a22 100%);
  border: 1px solid #0a0a10;
  border-radius: 6px;
  box-shadow: inset 0 1px 1px #a0a0a8, 0 2px 2px #00000080;
}
body.fliptac-active .hw-flip-hinge-bar {
  flex: 1;
  height: 2px;
  background: linear-gradient(180deg, #14141a, #0a0a10);
  margin: 0 4px;
  border-radius: 1px;
  box-shadow: 0 1px 0 #404048;
}

/* Since the hinge 58% position is rough, override using a fixed px anchor */
body.fliptac-active .hw-flip-hinge { top: auto; bottom: 290px; transform: none; }

/* ---- Soft keys + nav rocker ---- */
body.fliptac-active .hw-flip-navrow {
  position: absolute;
  bottom: 240px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}
body.fliptac-active .hw-flip-soft {
  width: 48px;
  height: 18px;
  background: linear-gradient(180deg, #5a5a62 0%, #32323a 100%);
  border: 1px solid #0a0a10;
  border-radius: 3px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 #7a7a82, 0 2px 0 #14141a;
}
body.fliptac-active .hw-flip-soft em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-shadow: 0 1px 0 #000;
}

body.fliptac-active .hw-flip-nav {
  width: 64px;
  height: 24px;
  position: relative;
}
body.fliptac-active .hw-flip-nav-up,
body.fliptac-active .hw-flip-nav-dn {
  position: absolute;
  left: 0;
  right: 0;
  height: 11px;
  background: linear-gradient(180deg, #5a5a62 0%, #32323a 100%);
  border: 1px solid #0a0a10;
  box-shadow: inset 0 1px 0 #7a7a82;
}
body.fliptac-active .hw-flip-nav-up {
  top: 0;
  border-radius: 10px 10px 2px 2px;
}
body.fliptac-active .hw-flip-nav-dn {
  bottom: 0;
  border-radius: 2px 2px 10px 10px;
}
body.fliptac-active .hw-flip-nav-up::after {
  content: '▲';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #ffffff;
}
body.fliptac-active .hw-flip-nav-dn::after {
  content: '▼';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #ffffff;
}

/* ---- Send / End ---- */
body.fliptac-active .hw-flip-sendend {
  position: absolute;
  bottom: 208px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
  z-index: 5;
}
body.fliptac-active .hw-flip-sendbtn,
body.fliptac-active .hw-flip-endbtn {
  flex: 1;
  height: 22px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  border: 1px solid #0a0a10;
  box-shadow:
    inset 0 1px 0 #ffffff50,
    inset 0 -1px 0 #00000060,
    0 2px 0 #0a0a10;
}
body.fliptac-active .hw-flip-sendbtn {
  background: linear-gradient(180deg, #40c060 0%, #208040 60%, #0f4020 100%);
}
body.fliptac-active .hw-flip-endbtn {
  background: linear-gradient(180deg, #ff5050 0%, #c02020 60%, #600808 100%);
}
body.fliptac-active .hw-flip-sendbtn em,
body.fliptac-active .hw-flip-endbtn em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
}

/* ---- Keypad ---- */
body.fliptac-active .hw-flip-keypad {
  position: absolute;
  bottom: 44px;
  left: 22px;
  right: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  pointer-events: none;
  z-index: 5;
}
body.fliptac-active .hw-flip-key {
  height: 38px;
  background:
    linear-gradient(180deg,
      #5a5a62 0%,
      #42424a 50%,
      #2a2a32 100%);
  border: 1px solid #0a0a10;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 0 2px;
  box-shadow:
    inset 0 1px 0 #7a7a82,
    inset 0 -1px 0 #14141a,
    0 2px 0 #0a0a10,
    0 3px 3px #00000060;
}
body.fliptac-active .hw-flip-key strong {
  font-family: 'Arial Black', sans-serif;
  font-size: 15px;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 1px 0 #000;
  font-weight: 900;
}
body.fliptac-active .hw-flip-key em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 6px;
  letter-spacing: 0.15em;
  color: #a0a0a8;
  margin-top: 1px;
}

/* ---- Mic at bottom ---- */
body.fliptac-active .hw-flip-mic {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 10px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  padding: 2px;
  background: #14141a;
  border: 1px solid #0a0a10;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px #000000a0;
  pointer-events: none;
  z-index: 5;
}
body.fliptac-active .hw-flip-mic span {
  background: #000;
  border-radius: 50%;
}

/* ---- Real UI ---- */
body.fliptac-active #player.has-hardware .title-bar {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

/* Main LCD on the flip lid */
body.fliptac-active #player.has-hardware .lcd-section {
  position: relative;
  z-index: 4;
  margin: 50px 30px 10px;
  background:
    linear-gradient(180deg, #0f3228 0%, #0a1810 100%);
  border: 2px solid #1a2a24;
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow:
    inset 0 0 12px #00000080,
    inset 0 0 0 1px #4affcf30,
    0 2px 4px #00000080;
}
body.fliptac-active #player.has-hardware .lcd-time-digits,
body.fliptac-active #player.has-hardware .lcd-marquee,
body.fliptac-active #player.has-hardware .lcd-samplerate,
body.fliptac-active #player.has-hardware .lcd-bitrate {
  color: #4affcf;
  text-shadow: 0 0 4px #4affcf80, 0 0 10px #4affcf40;
  font-family: 'Share Tech Mono', monospace;
}

/* Viz + seek under the LCD (tiny) */
body.fliptac-active #player.has-hardware .viz-container,
body.fliptac-active #player.has-hardware .seek-bar-container {
  position: relative;
  z-index: 4;
  margin: 4px 30px;
  max-height: 40px;
}

/* Hide feature bar + controls (keypad replaces them visually) */
body.fliptac-active #player.has-hardware .controls-section {
  position: relative;
  z-index: 6;
  margin: 8px 30px 0;
  transform: scale(0.85);
  transform-origin: top center;
}
body.fliptac-active #player.has-hardware .feature-bar {
  display: none;
}

@media (max-width: 560px) {
  body.fliptac-active #player.has-hardware { padding: 38px 16px 56px 16px; }
  body.fliptac-active .hw-flip-key { height: 32px; }
  body.fliptac-active .hw-flip-key strong { font-size: 13px; }
}