.channel-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin: 18px auto 10px;
  padding: 0 16px;
}

.prototype-badge {
  align-self: center;
  color: #d9c994;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.back-room-identity-strip {
  display: none;
  max-width: 760px;
  min-height: 108px;
  margin: 18px auto 0;
  padding: 10px 28px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border: 1px solid rgba(190, 196, 202, 0.62);
  border-radius: 10px;
  background: linear-gradient(115deg, #050607, #111316 55%, #070708);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 12px 38px rgba(0,0,0,.42);
}

.back-room-identity-strip img { width: 116px; height: auto; object-fit: contain; }
.back-room-identity-strip span { display: grid; gap: 7px; }
.back-room-identity-strip strong { color: #e4e6e8; font-size: 1.35rem; letter-spacing: .2em; }
.back-room-identity-strip small { color: #b7bbc0; font-size: .68rem; letter-spacing: .1em; }

.channel-button {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(226, 196, 122, 0.34);
  border-radius: 10px;
  background: #171510;
  color: #efe4ca;
  cursor: pointer;
  opacity: 0.72;
  transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.channel-button:hover { opacity: 0.92; }
.channel-button:focus-visible { outline: 3px solid #ffd75e; outline-offset: 3px; }
.channel-button.is-selected {
  opacity: 1;
  border-color: #ffd75e;
  box-shadow: 0 0 0 2px rgba(255, 215, 94, 0.24), 0 8px 28px rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
}

.channel-button img { width: 70px; height: auto; object-fit: contain; }
.channel-button span:last-child { display: grid; text-align: left; }
.channel-button strong { font-size: 0.92rem; letter-spacing: 0.08em; }
.channel-button small { margin-top: 3px; color: #c5b993; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.channel-mark { display: grid; place-items: center; min-width: 70px; min-height: 46px; border: 1px solid #9a824d; color: #ffd75e; font: 800 0.85rem/1 sans-serif; letter-spacing: 0.12em; }
.channel-mark-kiss { border: 0; background: transparent; }
.channel-bulb-svg { display: block; width: 82px; height: auto; overflow: visible; filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 7px rgba(255,183,70,.2)); }
.channel-bulb-svg .bulb-metal-back { opacity: .66; }
.channel-bulb-svg .marquee-bulb { opacity: .94; }
.channel-bulb-svg .bulb-light { opacity: .92; }
.channel-status { grid-column: 1 / -1; text-align: center; color: #c5b993; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.kiss-logo-window { mix-blend-mode: normal; }
.kiss-logo-window img { top: 0; height: 100%; object-fit: contain; filter: none; }

.receiver-era-logo {
  position: relative;
  width: clamp(300px, 34vw, 420px);
  aspect-ratio: 1000 / 417;
  overflow: visible;
  margin: 0 auto 1px;
}

.receiver-bulb-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(255,177,58,.13));
}

.bulb-metal-back { opacity: .42; filter: drop-shadow(0 3px 2px rgba(0,0,0,.88)); }
.bulb-socket { fill: url(#socketDepth); stroke: #060504; stroke-width: 2.4; }
.bulb-rim { fill: none; stroke: rgba(151, 113, 57, .72); stroke-width: 2; }
.marquee-bulb { opacity: .045; }
.bulb-light { opacity: .96; }
.bulb-glass { fill: url(#lampGlass); stroke: #ffe7ad; stroke-width: 1.1; }
.bulb-filament { fill: #fffdf0; }
.bulb-highlight { fill: rgba(255,255,255,.92); }

.receiver-era-logo.is-activating .marquee-bulb {
  animation: backRoomBulbIgnite .24s ease-out var(--delay) 1 forwards;
}
.receiver-era-logo.is-activating .bulb-light {
  animation: backRoomBulbDrift var(--drift) ease-in-out var(--phase) infinite;
}

body[data-selected-channel="back-room"] {
  background:
    radial-gradient(circle at 50% 15%, rgba(167, 18, 18, .16), transparent 35rem),
    #080706;
}

body[data-selected-channel="back-room"] .receiver-face {
  border-color: rgba(216, 174, 61, .65);
  box-shadow: 0 22px 80px rgba(0,0,0,.62), 0 0 34px rgba(152, 19, 19, .12);
}

body[data-selected-channel="back-room"] .receiver-nameplate h1 {
  color: #e1e4e7;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.42rem);
  letter-spacing: .22em;
  text-shadow: 0 1px #111, 0 0 18px rgba(205, 213, 220, .24);
}

body[data-selected-channel="back-room"] .receiver-nameplate .eyebrow,
body[data-selected-channel="back-room"] .receiver-tagline { color: #d7c690; }
body[data-selected-channel="back-room"] .glass-panel { gap: 5px; padding-block: 10px 12px; }
body[data-selected-channel="back-room"] .faceplate-particle-field {
  opacity: .46;
  filter: saturate(.82) brightness(.82);
}
body[data-selected-channel="back-room"] .receiver-nameplate { gap: 1px; padding-bottom: 0; }
body[data-selected-channel="back-room"] .tuner-scale { padding-block: 4px; }
body[data-selected-channel="back-room"] .scale-line { height: 54px; }
body[data-selected-channel="back-room"] .scale-numbers { margin-top: -43px; font-size: 1.05rem; }
body[data-selected-channel="back-room"] .tuning-needle { top: 0; height: 82px; }
body[data-selected-channel="back-room"] .station-ticker { display: none; }
body[data-selected-channel="back-room"] .back-room-identity-strip { display: flex; }
body[data-selected-channel="back-room"] .now-card,
body[data-selected-channel="back-room"] .radio-memory { border-color: rgba(216, 174, 61, .38); }
body[data-selected-channel="back-room"] .now-copy h2 { color: #e7e8e6; text-shadow: 0 0 18px rgba(198, 206, 214, .16), 0 2px #000; }
body[data-selected-channel="back-room"] .cover-frame {
  background: linear-gradient(145deg, #aeb4ba, #25282c 24%, #050607 72%, #666c72);
  box-shadow: inset 0 0 0 1px rgba(229, 232, 235, .18), 0 22px 48px rgba(0,0,0,.68);
}
body[data-selected-channel="back-room"] .on-air-pill { background: #8f1616; color: #fff1d0; }
body[data-selected-channel="back-room"] .channel-button-back-room {
  background: linear-gradient(135deg, #050607, #17191c 58%, #080809);
  border-color: rgba(178, 184, 190, .54);
}
body[data-selected-channel="back-room"] .channel-button-back-room.is-selected {
  border-color: #c9ced3;
  box-shadow: 0 0 0 1px rgba(227,231,235,.28), 0 0 20px rgba(186,194,202,.16), 0 10px 30px rgba(0,0,0,.5);
}
body[data-selected-channel="back-room"] .channel-button-back-room strong { color: #e8e9e7; }
body[data-selected-channel="back-room"] .channel-button-back-room small { color: #afb4b9; }
body[data-selected-channel="back-room"] .channel-button[data-channel="main"] {
  opacity: .96;
  border-color: rgba(241, 190, 73, .58);
  background: radial-gradient(circle at 22% 50%, rgba(255,181,53,.12), transparent 34%), linear-gradient(135deg, #21170a, #17120d 62%, #090705);
  box-shadow: inset 0 1px rgba(255,224,149,.08), 0 0 18px rgba(213,137,24,.1), 0 10px 28px rgba(0,0,0,.4);
}
body[data-selected-channel="back-room"] .channel-mark-wdoro {
  color: #ffcf62;
  text-shadow: 0 0 9px rgba(255,176,44,.72);
  box-shadow: inset 0 0 15px rgba(255,168,35,.09), 0 0 10px rgba(255,168,35,.1);
  animation: doorwayAmberBreath 4.8s ease-in-out infinite;
}
@media (max-width: 640px) {
  body[data-selected-channel="back-room"] .faceplate-particle-field { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .faceplate-particle-field canvas { animation: none !important; }
}

body[data-selected-channel="main"] .channel-button-back-room {
  opacity: 1;
  border-color: rgba(190,196,202,.6);
  background: linear-gradient(135deg, #050607, #15171a 60%, #070708);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 20px rgba(203,211,218,.1), 0 10px 30px rgba(0,0,0,.45);
}
body[data-selected-channel="main"] .channel-bulb-svg .bulb-light { animation: doorwayBulbBreath 5.6s ease-in-out infinite; }
body[data-selected-channel="back-room"] .channel-status { color: #b8bdc2; }
.channel-button-back-room small {
  max-width: 28ch;
  line-height: 1.35;
  letter-spacing: .08em;
}

@keyframes backRoomBulbIgnite {
  0% { opacity: .045; }
  52% { opacity: .62; }
  72% { opacity: .34; }
  100% { opacity: .96; }
}

@keyframes backRoomBulbDrift {
  0%, 43%, 57%, 100% { opacity: .96; }
  49% { opacity: .91; }
  51% { opacity: .98; }
}

@keyframes doorwayAmberBreath {
  0%, 100% { filter: brightness(.9); }
  50% { filter: brightness(1.16); }
}

@keyframes doorwayBulbBreath {
  0%, 100% { opacity: .88; }
  48% { opacity: .98; }
  52% { opacity: .93; }
}

@media (prefers-reduced-motion: reduce) {
  .receiver-era-logo.is-activating .marquee-bulb { animation: none; opacity: 1; }
  .receiver-era-logo.is-activating .bulb-light { animation: none; opacity: .96; }
  .channel-mark-wdoro,
  .channel-bulb-svg .bulb-light { animation: none !important; }
}
body[data-selected-channel="back-room"] .station-manifesto,
body[data-selected-channel="back-room"] .early-listener { display: none; }

@media (max-width: 620px) {
  .channel-switch { grid-template-columns: 1fr; }
  .channel-status { grid-column: 1; }
  .prototype-badge { max-width: 190px; line-height: 1.5; }
  .back-room-identity-strip { margin-inline: 16px; padding: 10px 14px; gap: 12px; }
  .back-room-identity-strip img { width: 78px; height: auto; }
  .back-room-identity-strip strong { font-size: 1rem; letter-spacing: .12em; }
  .back-room-identity-strip small { font-size: .58rem; line-height: 1.5; }
  body[data-selected-channel="back-room"] .receiver-face {
    grid-template-areas: "glass";
  }
  .receiver-era-logo { width: min(78vw, 300px); }
  body[data-selected-channel="back-room"] .receiver-nameplate h1 { font-size: 1rem; letter-spacing: .18em; }
  body[data-selected-channel="back-room"] .scale-line { height: 38px; }
  body[data-selected-channel="back-room"] .scale-numbers { margin-top: -32px; font-size: .68rem; }
  body[data-selected-channel="back-room"] .tuning-needle { height: 62px; }
  body[data-selected-channel="back-room"] .meter-bank,
  body[data-selected-channel="back-room"] .knob-row {
    display: none;
  }
}

/* Two equal channel doorways: the selected state marks location; both rooms stay alive. */
.channel-switch {
  max-width: 900px;
  gap: 14px;
}

.channel-button {
  position: relative;
  isolation: isolate;
  min-height: 112px;
  justify-content: flex-start;
  gap: 18px;
  padding: 12px 22px;
  overflow: hidden;
  opacity: 1;
  text-decoration: none;
}

.channel-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.07) 48%, transparent 72%);
  transform: translateX(-130%);
  transition: transform 700ms ease;
}

.channel-button:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.channel-button:hover::after { transform: translateX(130%); }

.channel-button.is-selected {
  transform: translateY(-1px);
}

.channel-button > span:last-of-type {
  position: relative;
  z-index: 2;
}

.channel-button strong {
  font-size: 1rem;
  letter-spacing: .11em;
}

.channel-mark-wdoro {
  position: relative;
  isolation: isolate;
  width: 152px;
  min-width: 152px;
  height: 72px;
  min-height: 72px;
  overflow: hidden;
  border: 1px solid rgba(255,190,67,.55);
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255,139,20,.2), transparent 64%),
    linear-gradient(180deg, #100a04, #030201);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.72),
    inset 0 0 22px rgba(255,129,18,.14),
    0 0 16px rgba(255,147,24,.12);
  color: #ffd36d;
}

.channel-mark-wdoro::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 4;
  border: 1px solid rgba(255,214,123,.12);
  pointer-events: none;
}

.channel-mark-wdoro::after {
  content: "";
  position: absolute;
  inset: -35% -70%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255,231,166,.22) 48%, transparent 58%);
  transform: translateX(-42%);
  animation: wdoroDoorwayGlass 7.6s ease-in-out infinite;
}

.wdoro-doorway-net {
  position: absolute;
  z-index: 0;
  inset: -24% -12%;
  opacity: .64;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,101,18,.2) 8px 9px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,179,43,.18) 13px 14px);
  filter: drop-shadow(0 0 4px rgba(255,111,16,.55));
  transform: perspective(110px) rotateX(54deg) translate3d(-5%, 9%, 0);
  transform-origin: 50% 100%;
  animation: wdoroDoorwayNet 6.2s linear infinite;
}

.wdoro-doorway-identity {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 3px;
}

.wdoro-doorway-identity b {
  color: #ffd66f;
  font: 900 1.36rem/.9 "Arial Narrow", "Trebuchet MS", Arial, sans-serif;
  letter-spacing: .17em;
  text-indent: .17em;
  text-shadow:
    0 0 3px rgba(255,239,189,.9),
    0 0 10px rgba(255,177,42,.92),
    0 0 24px rgba(255,91,12,.48),
    0 2px 0 #120600;
}

.wdoro-doorway-identity em {
  color: rgba(255,218,132,.82);
  font: 800 .47rem/1 "Trebuchet MS", Arial, sans-serif;
  font-style: normal;
  letter-spacing: .28em;
  text-indent: .28em;
  text-shadow: 0 0 7px rgba(255,146,25,.62);
}

.wdoro-doorway-live {
  position: absolute;
  right: 9px;
  top: 9px;
  z-index: 5;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff4a25;
  box-shadow: 0 0 3px #fff1c6, 0 0 10px #ff3a16;
  animation: wdoroDoorwayLamp 3.8s ease-in-out infinite;
}

.channel-button[data-channel="main"] {
  border-color: rgba(241,190,73,.62);
  background:
    radial-gradient(circle at 18% 50%, rgba(255,171,38,.16), transparent 38%),
    linear-gradient(135deg, #21170a, #15100b 64%, #070503);
  box-shadow:
    inset 0 1px rgba(255,224,149,.1),
    0 0 19px rgba(213,137,24,.1),
    0 10px 28px rgba(0,0,0,.42);
}

.channel-button[data-channel="main"] strong { color: #ffe2a0; }
.channel-button[data-channel="main"] small { color: #c9a966; }

.channel-button[data-channel="main"].is-selected {
  border-color: #ffd15d;
  box-shadow:
    0 0 0 2px rgba(255,202,77,.2),
    0 0 25px rgba(255,143,21,.2),
    0 10px 30px rgba(0,0,0,.48);
}

body[data-selected-channel="back-room"] .channel-button[data-channel="main"] {
  opacity: 1;
  border-color: rgba(241,190,73,.64);
}

body[data-selected-channel="back-room"] .channel-mark-wdoro {
  animation: doorwayAmberBreath 4.8s ease-in-out infinite;
}

.channel-button-back-room {
  min-height: 112px;
  opacity: 1;
}

.channel-button-back-room .channel-mark-kiss {
  width: 118px;
  min-width: 118px;
}

.channel-button-back-room .channel-bulb-svg { width: 112px; }

@keyframes wdoroDoorwayNet {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 18px, 28px 0; }
}

@keyframes wdoroDoorwayGlass {
  0%, 68% { transform: translateX(-42%); opacity: 0; }
  76% { opacity: .68; }
  90%, 100% { transform: translateX(42%); opacity: 0; }
}

@keyframes wdoroDoorwayLamp {
  0%, 100% { opacity: .72; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .channel-button::after,
  .channel-mark-wdoro::after,
  .wdoro-doorway-net,
  .wdoro-doorway-live { animation: none !important; }
  .channel-mark-wdoro::after { display: none; }
}

@media (max-width: 620px) {
  .channel-button {
    min-height: 100px;
    gap: 14px;
    padding: 10px 14px;
  }
  .channel-mark-wdoro {
    width: 126px;
    min-width: 126px;
    height: 62px;
    min-height: 62px;
  }
  .wdoro-doorway-identity b { font-size: 1.12rem; }
  .channel-button-back-room .channel-mark-kiss {
    width: 126px;
    min-width: 126px;
  }
  .channel-button-back-room .channel-bulb-svg { width: 116px; }
}