/* petscii.nw — modem panel CSS */



.petscii-modem-panel { display:flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.6rem 0.8rem; background: linear-gradient(180deg, #c8c4ba 0%, #aaa6a0 100%); border-top: 2px solid #6a6660; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 6px 12px rgba(0,0,0,0.15); min-height: 92px; position: relative; overflow-x: auto; }



/* Single modem chassis container */

.modem {

  display: flex;

  align-items: center;

  padding: 0.4rem 0.7rem;

  border-radius: 5px;

  border: 1px solid rgba(0,0,0,0.55);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,0.12),

    inset 0 -2px 6px rgba(0,0,0,0.45),

    0 2px 4px rgba(0,0,0,0.6),

    0 0 0 1px rgba(255,255,255,0.04);

  font-family: ui-monospace, 'Courier New', monospace;

  font-size: 10px;

  letter-spacing: 0.5px;

  min-width: 180px;

  height: 64px;

  position: relative;

  gap: 0.6rem;

}



/* Border variants per chassis color */

.modem--cream { border-color: #7a6638; }

.modem--black { border-color: #444450; }

.modem--brown { border-color: #2a1c10; }

.modem--grey  { border-color: #2a2a30; }



/* Chassis colors */

.modem--cream { background: linear-gradient(180deg, #e8dfc6 0%, #cdc09a 100%); color: #2a1a08; }

.modem--black { background: linear-gradient(180deg, #1c1c20 0%, #0a0a0e 100%); color: #c8c8d0; }

.modem--brown { background: linear-gradient(180deg, #6b4a30 0%, #4a3220 100%); color: #f0e0c8; }

.modem--grey  { background: linear-gradient(180deg, #5a5a64 0%, #404048 100%); color: #d8d8e0; }



/* Brand badge area (left side of chassis) */

.modem-badge {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 0.2rem 0.4rem;

  border-radius: 2px;

  background: rgba(0,0,0,0.15);

  min-width: 64px;

}

.modem--cream .modem-badge { background: rgba(0,0,0,0.08); }

.modem-badge-brand {

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.8px;

  white-space: nowrap;

}

.modem-badge-model {

  font-size: 9px;

  opacity: 0.75;

  letter-spacing: 0.4px;

  white-space: nowrap;

}

.modem-badge-baud {

  font-size: 8px;

  margin-top: 1px;

  opacity: 0.65;

}



/* LED row */

.modem-leds {

  display: flex;

  gap: 0.45rem;

  align-items: center;

  padding: 0.2rem 0.4rem;

  background: rgba(0,0,0,0.25);

  border-radius: 3px;

}

.modem--cream .modem-leds { background: rgba(0,0,0,0.12); }

.modem-led {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

}

.modem-led-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #2a1010;

  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);

  transition: background 0.05s, box-shadow 0.05s;

}

.modem-led-label {

  font-size: 7px;

  letter-spacing: 0.5px;

  opacity: 0.55;

  font-weight: 600;

}



/* LED states */

.modem-led--on .modem-led-dot {

  background: #ff3030;

  box-shadow: 0 0 6px #ff3030, 0 0 12px rgba(255,48,48,0.5);

}

.modem-led--amber.modem-led--on .modem-led-dot {

  background: #ffaa20;

  box-shadow: 0 0 6px #ffaa20, 0 0 12px rgba(255,170,32,0.5);

}

.modem-led--green.modem-led--on .modem-led-dot {

  background: #20e040;

  box-shadow: 0 0 6px #20e040, 0 0 12px rgba(32,224,64,0.5);

}

.modem-led--flash .modem-led-dot {

  animation: modem-flash 80ms ease-out;

}

@keyframes modem-flash {

  0%   { background: #ff5050; box-shadow: 0 0 10px #ff5050, 0 0 18px rgba(255,80,80,0.65); }

  100% { background: #2a1010; box-shadow: inset 0 0 2px rgba(0,0,0,0.8); }

}



/* Acoustic coupler — special case (PET) */

.modem--acoustic {

  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);

  color: #c8c8c0;

  min-width: 180px;

  position: relative;

}

.modem--acoustic .modem-cups {

  display: flex;

  gap: 0.3rem;

}

.modem--acoustic .modem-cup {

  width: 22px;

  height: 36px;

  background: radial-gradient(ellipse at center, #555 0%, #222 80%);

  border-radius: 50%;

  border: 2px solid #1a1a1a;

  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.6);

}

.modem--acoustic .modem-needle {

  width: 50px;

  height: 24px;

  background: #d4c898;

  border-radius: 3px;

  position: relative;

  overflow: hidden;

}

.modem--acoustic .modem-needle::before {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 2px;

  height: 18px;

  background: #c02828;

  transform-origin: bottom center;

  transform: rotate(-30deg);

  transition: transform 80ms ease-out;

}

.modem--acoustic.is-twitching .modem-needle::before {

  animation: needle-twitch 80ms ease-out;

}

@keyframes needle-twitch {

  0%   { transform: rotate(-30deg); }

  50%  { transform: rotate(20deg); }

  100% { transform: rotate(-30deg); }

}



/* Sysop rack — 4 modems mismatched, in a row */

.petscii-modem-panel.is-rack {

  justify-content: flex-start;

  gap: 0.4rem;

}



/* Caller home modem — centered, larger */

.petscii-modem-panel.is-home .modem {

  transform: scale(1.05);

}



/* Mobile / narrow: scroll horizontally */

@media (max-width: 720px) {

  .petscii-modem-panel { display:flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.6rem 0.8rem; background: linear-gradient(180deg, #c8c4ba 0%, #aaa6a0 100%); border-top: 2px solid #6a6660; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 6px 12px rgba(0,0,0,0.15); min-height: 92px; position: relative; overflow-x: auto; }

  .modem { transform: scale(0.85); transform-origin: left center; }

}



/* Hide on intro / cold-open stages */

body.petscii-intro-full .petscii-modem-panel,

[data-stage="cold"] ~ .petscii-modem-panel { display:flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.6rem 0.8rem; background: linear-gradient(180deg, #c8c4ba 0%, #aaa6a0 100%); border-top: 2px solid #6a6660; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 6px 12px rgba(0,0,0,0.15); min-height: 92px; position: relative; overflow-x: auto; }



/* Black chassis (USR, Anchor): give the LED tray a lighter recess so LEDs read against it */

.modem--black .modem-leds {

  background: linear-gradient(180deg, #3a3a44 0%, #1a1a22 100%);

  box-shadow:

    inset 0 1px 1px rgba(0,0,0,0.7),

    inset 0 -1px 0 rgba(255,255,255,0.05);

}

.modem--black .modem-led-dot {

  background: #4a1818;

  box-shadow: inset 0 0 2px rgba(0,0,0,0.95), 0 0 1px rgba(255,255,255,0.08);

}

.modem--black .modem-led-label {

  color: #c8c8d4;

  opacity: 0.75;

}

.modem--black .modem-badge {

  background: rgba(255,255,255,0.06);

}



/* Brand badge brightness on black chassis */

.modem--black .modem-badge-brand {

  color: #ffe9a0;     /* gold-ish brand text on black, like real USR/Anchor */

  text-shadow: 0 0 1px rgba(255,233,160,0.4);

}

.modem--black .modem-badge-model {

  color: #c8c8d4;

}

.modem--black .modem-badge-baud {

  color: #b0b0b8;

}



/* USR Sportster — known for the distinctive red LED bar look on metal trim */

.modem[data-style="usr-sportster"] .modem-leds {

  background: linear-gradient(180deg, #2a2a30 0%, #1a1a20 100%);

  border: 1px solid #45454a;

}



/* Anchor 9600 — black with amber LEDs; bump tray amber too for cohesion */

.modem[data-style="anchor-9600"] .modem-leds {

  background: linear-gradient(180deg, #353035 0%, #1a1518 100%);

}

.modem[data-style="anchor-9600"] .modem-led-dot {

  background: #4a3010;

}

.modem[data-style="anchor-9600"] .modem-led-label {

  color: #d4b890;

}



/* Rack wrap + collapse toggle (sysop's shelf at the bottom of the pane) */

.petscii-modem-wrap {

  flex: 0 0 auto;

  background: linear-gradient(180deg, #c8c4ba 0%, #aaa6a0 100%);

  border-top: 2px solid #6a6660;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 6px 12px rgba(0,0,0,0.15);

}



/* Override panel chrome since it's now nested inside the wrap */

.petscii-modem-wrap .petscii-modem-panel {

  background: transparent;

  border: none;

  box-shadow: none;

  padding: 0.5rem 0.8rem 0.7rem;

}



.petscii-rack-toggle {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  width: 100%;

  padding: 0.3rem 0.8rem;

  background: linear-gradient(180deg, #b8b4a8 0%, #98948a 100%);

  border: none;

  border-bottom: 1px solid #6a6660;

  font: 11px ui-monospace, 'Courier New', monospace;

  letter-spacing: 1px;

  color: #3a3530;

  cursor: pointer;

  text-align: left;

  transition: background 0.15s;

}

.petscii-rack-toggle:hover {

  background: linear-gradient(180deg, #c4c0b4 0%, #a4a096 100%);

}

.petscii-rack-toggle-icon {

  font-weight: 700;

  color: #2a1a08;

}

.petscii-rack-toggle-label {

  font-weight: 600;

}



/* Collapsed state: hide the panel, keep just the toggle strip */

.petscii-modem-wrap.is-collapsed .petscii-modem-panel {

  display: none;

}

.petscii-modem-wrap.is-collapsed .petscii-rack-toggle {

  border-bottom: none;

}