/* 1920x1080 TV canvas, scaled by the shared player's fit() function. */
body { font-family:Arial,Helvetica,sans-serif; }
#chips { display:none!important; }
#topBar #links { display:none; }
#video { object-fit:contain; }
#topBar { background:linear-gradient(#07101de6,transparent);height:160px; }
#radioCard { position:absolute;left:0;top:0;width:1920px;height:1080px;display:none;background:radial-gradient(ellipse at center,#173250,#07101d 70%);text-align:center;box-sizing:border-box;padding-top:200px; }
#radioCard.on { display:block; }
#radioCard img { width:180px;height:180px;border-radius:24px; }
#radioCard h1 { font-size:62px;margin:35px 0 20px; }
#radioCard p { font-size:30px;color:#c9d6e8; }
#tvControls { position:absolute;left:60px;bottom:42px;width:1800px;padding:26px 30px 20px;box-sizing:border-box;background:rgba(7,16,29,.96);border:2px solid #39506a;border-radius:22px;z-index:20;transition:opacity .2s; }
#tvControls.idle { opacity:0;pointer-events:none; }
#tvControls .tv-row { display:flex;gap:18px;align-items:center; }
#tvControls .tv-row + .tv-row { margin-top:18px; }
#tvControls button { display:inline-block;box-sizing:border-box;min-width:160px;height:72px;padding:0 24px;font:700 28px Arial,sans-serif;white-space:nowrap;color:#f7f9ff;background:#1b3149;border:3px solid transparent;border-radius:12px; }
#tvControls button[disabled] { color:#91a0b4;background:#152336; }
#tvControls button.selected { color:#e7b84a;background:#324058; }
#tvControls button.tv-focus,#tvControls button:focus-visible { outline:none;border-color:#fff;background:#f4f7fb;color:#07101d;box-shadow:0 0 0 5px #e7b84a; }
#tvControls .channel-row button { flex:1; }
#tvControls .action-row button { flex:1;font-size:25px; }
#tvHelp { margin-top:18px;color:#c9d6e8;font-size:24px; }
#tvVersion { float:right;font-size:21px;color:#91a0b4; }
#tvToast { position:absolute;left:350px;bottom:370px;width:1220px;box-sizing:border-box;padding:22px 32px;border-radius:14px;background:#102a48;border:2px solid #e7b84a;color:#fff;font-size:30px;text-align:center;z-index:35; }
#volumePanel { position:absolute;left:500px;bottom:355px;width:920px;box-sizing:border-box;padding:36px;background:#102037;border:3px solid #e7b84a;border-radius:20px;z-index:40;text-align:center; }
#volumePanel label { font-size:36px;display:block;margin-bottom:20px; }
#volumePanel input { width:100%;height:50px;accent-color:#e7b84a; }
#volumePanel p { font-size:25px;color:#c9d6e8;margin-bottom:0; }
#exitPanel { position:absolute;left:500px;top:300px;width:920px;box-sizing:border-box;padding:46px 60px;background:#102037;border:3px solid #e7b84a;border-radius:20px;z-index:100;text-align:center; }
#exitPanel h2 { font-size:46px;margin:0 0 20px; }
#exitPanel p { font-size:28px;color:#c9d6e8;line-height:1.5; }
#exitPanel button { min-width:260px;height:80px;margin:15px;font-size:30px;background:#1b3149;color:#fff;border:4px solid transparent;border-radius:12px; }
#exitPanel button.tv-focus { border-color:#e7b84a;background:#f5f8fc;color:#07101d; }
#panel { z-index:50; }
#panelBody { max-height:570px;overflow-y:auto; }
#offAir .brand { border-radius:25px; }
#offTitle { font-size:52px; }

#radioStatus { color:#e7b84a!important;font-weight:700; }
#radioElapsed { color:#b7cbe3;font-variant-numeric:tabular-nums; }
#panelClose,#volumeDone { color:#fff;background:#1b3149;border:2px solid #e7b84a;border-radius:10px;padding:14px 30px;font-size:26px;margin-top:20px;cursor:pointer; }
#panelClose:focus-visible,#volumeDone:focus-visible {outline:3px solid #fff;outline-offset:3px;}
.desktop-player #panelClose,.desktop-player #volumeDone {font-size:16px;padding:10px 26px;margin-top:14px;}
.desktop-player #radioStatus,.desktop-player #radioElapsed {font-size:18px!important;}

/* Shared desktop layout */

      .desktop-player #stage {left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important;-webkit-transform:none!important;}
      .desktop-player #video {left:0!important;top:0!important;width:100%!important;height:calc(100% - 178px)!important;object-fit:contain;}
      .desktop-player #topBar {width:100%!important;height:90px!important;}
      .desktop-player #title {max-width:calc(100% - 80px)!important;margin-top:18px!important;padding:6px 18px!important;font-size:24px!important;}
      .desktop-player #liveBadge {left:auto!important;right:24px!important;top:22px!important;width:80px!important;height:32px!important;line-height:32px!important;font-size:18px!important;}
      .desktop-player #tvControls {left:16px!important;bottom:12px!important;width:calc(100% - 32px)!important;height:154px!important;padding:12px!important;border-radius:14px!important;}
      .desktop-player #tvControls.idle {opacity:1!important;pointer-events:auto!important;}
      .desktop-player #tvControls .tv-row {gap:8px!important;}
      .desktop-player #tvControls .tv-row + .tv-row {margin-top:10px!important;}
      .desktop-player #tvControls button {min-width:0!important;height:44px!important;padding:0 10px!important;font-size:14px!important;border-width:2px!important;border-radius:8px!important;}
      .desktop-player #tvControls button.tv-focus {box-shadow:0 0 0 2px #e7b84a!important;}
      .desktop-player #tvHelp {font-size:12px!important;margin-top:12px!important;line-height:16px!important;}
      .desktop-player #tvVersion {font-size:11px!important;}
      .desktop-player #radioCard {width:100%!important;height:calc(100% - 178px)!important;padding-top:10vh!important;}
      .desktop-player #radioCard img {width:96px!important;height:96px!important;}
      .desktop-player #radioCard h1 {font-size:32px!important;margin:22px 0 12px!important;}
      .desktop-player #radioCard p {font-size:18px!important;}
      .desktop-player #panel {left:50%!important;top:5vh!important;transform:translateX(-50%);width:min(800px,90vw)!important;max-height:calc(90vh - 160px);padding:26px!important;border-radius:14px!important;}
      .desktop-player #panelTitle {font-size:28px!important;margin-bottom:18px!important;}
      .desktop-player #panelBody {font-size:20px!important;max-height:calc(80vh - 250px)!important;overflow-y:auto;}
      .desktop-player #panelBody .row {padding:12px 0!important;}
      .desktop-player #panelBody .when {width:42%!important;}
      .desktop-player #panelBody .qr img {width:200px!important;height:200px!important;padding:10px!important;}
      .desktop-player #panelBody .qr p, .desktop-player #panelHint {font-size:16px!important;margin-top:16px!important;}
      .desktop-player #volumePanel {left:50%!important;bottom:185px!important;transform:translateX(-50%);width:min(650px,90vw)!important;padding:24px!important;}
      .desktop-player #volumePanel label {font-size:24px!important;}
      .desktop-player #volumePanel input {height:36px!important;}
      .desktop-player #volumePanel p {font-size:16px!important;}
      .desktop-player #tvToast {left:50%!important;bottom:190px!important;transform:translateX(-50%);width:min(700px,90vw)!important;font-size:18px!important;padding:16px!important;}
      .desktop-player #exitPanel {left:50%!important;top:22vh!important;transform:translateX(-50%);width:min(600px,90vw)!important;padding:28px!important;}
      .desktop-player #exitPanel h2 {font-size:30px!important;} .desktop-player #exitPanel p {font-size:18px!important;}
      .desktop-player #exitPanel button {font-size:16px!important;min-width:180px!important;height:48px!important;margin:10px!important;}
      .desktop-player #offAir {width:100%!important;height:calc(100% - 178px)!important;}
      .desktop-player #offAir .brand {left:50%!important;top:5vh!important;transform:translateX(-50%);width:min(420px,60vw)!important;height:clamp(120px,26vh,200px)!important;}
      .desktop-player #offAir .brand img {max-width:90%!important;max-height:90%!important;}
      .desktop-player #offTitle {top:48%!important;font-size:28px!important;} .desktop-player #offWhen {top:62%!important;font-size:20px!important;}
      .desktop-player #offNote {top:auto!important;bottom:14px!important;font-size:16px!important;}
      @media(max-width:1000px){.desktop-player #tvControls button {font-size:13px!important;padding:0 6px!important;}}