/* Portrait phones use a readable receiver panel, rather than a scaled PC panel. */
.mobileCabinet{display:contents}
@media(max-width:700px), (max-width:1000px) and (pointer:coarse){
body.compactRadio.retroMode{height:auto!important;min-height:100dvh!important;overflow:auto!important;display:block!important;background:#080e12!important}
body.compactRadio.retroMode main{height:auto!important;min-height:100dvh!important;width:100%!important;padding:0!important;display:block!important;max-width:none!important}
body.compactRadio.retroMode #retroRoom,body.compactRadio.retroMode .radioStage{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important;transform:none!important}
body.compactRadio.retroMode #retroRoom:fullscreen{display:block!important;height:100dvh!important;overflow:auto!important;padding:0!important;background:#080e12!important}
body.compactRadio.retroMode .radioStage>.referenceRadio{position:relative!important;display:block!important;width:100%!important;max-width:520px!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;transform:none!important;margin:0 auto!important;padding:0!important}
body.compactRadio.retroMode .referenceRadio>.referenceSurface{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-areas:'hero hero hero hero' 'station station station station' 'search search search search' 'prev play play next' 'favorites favorites recent recent' 'volume volume volume volume' 'info info settings full' 'presets presets presets presets'!important;gap:10px!important;padding:0 14px max(20px,env(safe-area-inset-bottom))!important;width:100%!important;box-sizing:border-box!important;background:linear-gradient(110deg,#111c22,#1c282e 48%,#0b151b)!important;border:1px solid #526269!important;border-radius:0 0 20px 20px!important;box-shadow:inset 0 0 0 3px #080f13!important;font-size:14px!important}
body.compactRadio.retroMode .mobileCabinet{display:block!important;grid-area:hero!important;position:relative!important;aspect-ratio:1672/941!important;margin:0 -14px!important;isolation:isolate!important}
body.compactRadio.retroMode .referenceSurface .referenceCabinet{z-index:-2!important;object-fit:contain!important}
body.compactRadio.retroMode .referenceSurface>.refStation{grid-area:station!important;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:128px!important;padding:12px!important;border:1px solid #68816d!important;border-radius:10px!important;box-shadow:inset 0 2px 14px #000b,0 1px #98a3a044!important;overflow:hidden!important}
body.compactRadio.retroMode .refStation .tunerLabels{height:auto!important;min-height:28px!important;font:10px system-ui!important;padding:0 118px 4px 0!important;letter-spacing:.08em!important}
body.compactRadio.retroMode .refStation #retroFavorite{top:8px!important;right:8px!important;height:32px!important;min-height:32px!important;width:auto!important;font:11px system-ui!important;padding:6px 8px!important;border-radius:6px!important}
body.compactRadio.retroMode .refStation .tunerScale{display:none!important}
body.compactRadio.retroMode .referenceSurface .refStation .retroDisplay{height:auto!important;min-height:52px!important;gap:12px!important;align-items:center!important}
body.compactRadio.retroMode .refStation .stationAvatar{width:48px!important;height:48px!important;flex-basis:48px!important;border-radius:6px!important;font-size:18px!important}
body.compactRadio.retroMode .refStation .retroText{gap:4px!important;padding:0!important}
body.compactRadio.retroMode .refStation .retroText #retroChannel{font:800 23px/1.18 system-ui!important;white-space:normal!important;overflow-wrap:anywhere!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
body.compactRadio.retroMode .refStation .retroText #retroTrack{font:12px/1.4 system-ui!important;white-space:normal!important;max-height:34px!important}
body.compactRadio.retroMode #receiverStatus{position:static!important;display:block!important;font:12px/1.4 system-ui!important;white-space:normal!important;margin-top:8px!important}
body.compactRadio.retroMode .referenceSurface .refSearch{grid-area:search!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 44px!important;gap:8px!important;position:static!important;margin:0!important;padding:0!important;width:100%!important}
body.compactRadio.retroMode .refSearch>label{position:static!important;inset:auto!important;width:auto!important;height:auto!important;display:flex!important;flex-direction:column!important;gap:5px!important;grid-column:auto!important;order:0!important;color:#c9d9de!important;font:12px system-ui!important;min-width:0!important}
body.compactRadio.retroMode .refSearch>button{position:static!important;inset:auto!important;align-self:end!important;width:44px!important;height:46px!important;min-height:46px!important;padding:0!important;font:24px system-ui!important;color:#d9f4cd!important;background:#223e32!important;border:1px solid #719686!important;border-radius:8px!important}
body.compactRadio.retroMode .refSearch input,body.compactRadio.retroMode .refSearch select,body.compactRadio.retroMode .refSearch #countryImageButton{height:46px!important;min-height:46px!important;padding:10px!important;font:16px system-ui!important;border-radius:8px!important;gap:7px!important}
body.compactRadio.retroMode .refSearch .countryFlagImage{width:24px!important;height:18px!important}
body.compactRadio.retroMode .referenceSurface>button{position:static!important;inset:auto!important;width:100%!important;height:48px!important;min-height:48px!important;padding:8px!important;font:600 14px system-ui!important;line-height:1.2!important;color:#edf6ed!important;background:linear-gradient(#30434a,#17282e)!important;border:1px solid #71848a!important;border-radius:9px!important;opacity:1!important;box-shadow:0 2px 0 #020709!important;white-space:normal!important}
body.compactRadio.retroMode .referenceSurface #retroPrev{grid-area:prev!important;font-size:21px!important}
body.compactRadio.retroMode .referenceSurface #retroNext{grid-area:next!important;font-size:21px!important}
body.compactRadio.retroMode .referenceSurface #playSelected{grid-area:play!important;background:linear-gradient(#b7e2a0,#6caa70)!important;color:#102414!important;border-color:#dcf0cf!important;font-size:17px!important}
body.compactRadio.retroMode .referenceSurface #playSelected:after{content:none!important}
body.compactRadio.retroMode .referenceSurface #quickFavorites{grid-area:favorites!important}
body.compactRadio.retroMode .referenceSurface #quickRecent{grid-area:recent!important}
body.compactRadio.retroMode .referenceSurface #retroInfo{grid-area:info!important}
body.compactRadio.retroMode .referenceSurface #referenceMenu{grid-area:settings!important;font-size:23px!important}
body.compactRadio.retroMode .referenceSurface #retroFullscreen{grid-area:full!important;font-size:24px!important;z-index:auto!important}
body.compactRadio.retroMode .referenceSurface #retroMute,body.compactRadio.retroMode .referenceSurface #retroPower,body.compactRadio.retroMode .referenceSurface #referenceVolume,body.compactRadio.retroMode .referenceSurface .refEQScreen,body.compactRadio.retroMode .referenceSurface .refSliders{display:none!important}
body.compactRadio.retroMode .referenceSurface .refVolume{grid-area:volume!important;position:static!important;inset:auto!important;display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;height:auto!important;max-width:none!important;min-height:44px!important;margin:0!important;padding:4px!important;opacity:1!important;font:11px system-ui!important;letter-spacing:.07em!important}
body.compactRadio.retroMode .refVolume input{height:32px!important;min-height:32px!important;flex:1!important;min-width:0!important;width:0!important}
body.compactRadio.retroMode .referenceSurface .refStationKeys{grid-area:presets!important;position:static!important;inset:auto!important;width:100%!important;height:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:2px 0 0!important}
body.compactRadio.retroMode .refStationKeys button{min-height:52px!important;height:auto!important;padding:10px!important;font:600 12px/1.3 system-ui!important;gap:8px!important;border-radius:7px!important}
body.compactRadio.retroMode .refStationKeys button small{font:800 16px system-ui!important;min-width:24px!important}
body.compactRadio.retroMode .referenceSurface button:focus-visible{outline:3px solid #c9f58b!important;outline-offset:2px!important}
body.compactRadio.retroMode dialog{max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 24px)!important;padding:16px!important;border-radius:14px!important;box-sizing:border-box!important;overflow:auto!important}
body.compactRadio.retroMode dialog input,body.compactRadio.retroMode dialog select{font-size:16px!important;min-height:44px!important}
body.compactRadio.retroMode .pickerList{max-height:55dvh!important;overflow:auto!important}
body.compactRadio.retroMode .pickerHeader h2{font-size:20px!important}
body.compactRadio.retroMode #referenceSettings .touchEQ{display:block!important}
}

@media (max-width:700px), (max-width:1000px) and (pointer:coarse) {
  /* Override the desktop ID selectors that position these controls on the artwork. */
  body.compactRadio.retroMode .referenceSurface :is(
    #retroPrev, #playSelected, #retroNext, #quickFavorites, #quickRecent,
    #retroInfo, #referenceMenu, #retroFullscreen
  ) {
    position: static!important;
    inset: auto!important;
    display: grid!important;
    place-items: center;
    width: 100%!important;
    max-width: none!important;
    height: auto!important;
    min-height: 48px!important;
    max-height: none!important;
    box-sizing: border-box;
    padding: 6px!important;
    margin: 0!important;
    border-radius: 8px!important;
    transform: none!important;
    white-space: normal!important;
    text-align: center;
  }
  body.compactRadio.retroMode .referenceSurface #playSelected {
    display: flex!important;
    align-items: center;
    justify-content: center;
    font-size: 16px!important;
    gap: 6px;
  }
  body.compactRadio.retroMode .referenceSurface #playSelected::after {
    display: none!important;
  }
  body.compactRadio.retroMode .referenceSurface :is(#quickFavorites,#quickRecent) {
    font-size: 13px!important;
  }
  body.compactRadio.retroMode .referenceSurface .refVolume {
    position: static!important;
    visibility: visible!important;
    pointer-events: auto!important;
  }
  body.compactRadio.retroMode .referenceSurface #referenceVolume { display: none!important; }
  body.compactRadio.retroMode .referenceSurface .refSearch {
    grid-template-columns: minmax(0,1fr) 44px!important;
  }
  body.compactRadio.retroMode .refSearch > label:first-child {
    grid-column: 1 / -1!important;
  }
  .mobileCabinet::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 30.7%;
    top: 22.5%;
    width: 38.6%;
    height: 14.4%;
    border-radius: 3px;
    background: linear-gradient(#0a1817, #050d0c);
    box-shadow: inset 0 0 0 1px #425950;
    pointer-events: none;
  }
}

@media (max-width:700px), (max-width:1000px) and (pointer:coarse) {
  body.compactRadio.retroMode .referenceRadio > .referenceSurface {
    grid-template-areas:
      'station station station station'
      'prev play play next'
      'volume volume volume volume'
      'presets presets presets presets'
      'search search search search'
      'favorites favorites recent recent'
      'info info settings settings'
      'hero hero hero hero'!important;
    padding-top: 12px!important;
  }
  body.compactRadio.retroMode .referenceSurface :is(
    #retroPrev, #retroNext, #quickFavorites, #quickRecent,
    #retroInfo, #referenceMenu, #retroFullscreen
  ) {
    background: linear-gradient(#283d47,#15262e)!important;
    color: #eaf6f0!important;
    border: 1px solid #667f87!important;
    box-shadow: none!important;
  }
  body.compactRadio.retroMode .referenceSurface #playSelected {
    background: linear-gradient(#c8ef9e,#8bc777)!important;
    color: #102313!important;
    border: 1px solid #deffbc!important;
  }
  body.compactRadio.retroMode .mobileCabinet {
    width: min(100%, 320px);
    justify-self: center;
    margin: 4px 0 0!important;
    overflow: hidden;
    border-radius: 10px;
  }
}

.cabinetReadout, .cabinetSpectrum { display: none; }

@media (max-width:700px), (max-width:1000px) and (pointer:coarse) {
  body.compactRadio.retroMode .mobileCabinet { container-type: inline-size; }
  .mobileCabinet::before { content: none; }
  .mobileCabinet .cabinetReadout {
    position: absolute;
    inset: 22.5% 30.7% auto;
    height: 14.4%;
    display: flex;
    align-items: center;
    gap: 1cqw;
    padding: .8cqw 1.1cqw;
    overflow: hidden;
    background: linear-gradient(120deg,#102e17,#06140b);
    color: #e0ffc9;
    border: 1px solid #54735e;
    border-radius: 3px;
  }
  .cabinetReadout img { width: 6cqw; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
  .cabinetReadout div { min-width: 0; }
  .cabinetReadout :is(strong,small) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 700 2.6cqw/1.25 system-ui;
  }
  .cabinetReadout small { font-size: 1.9cqw; font-weight: 400; color: #bedda9; }
  .mobileCabinet .cabinetSpectrum {
    position: absolute;
    inset: 59.65% 34.9% auto;
    height: 8%;
    display: flex;
    align-items: end;
    gap: .25cqw;
    margin: 0;
    padding: .55cqw;
    border-radius: 2px;
    background: #06121c;
  }
  .cabinetSpectrum i { flex: 1; height: 3%; }
}