*{
  box-sizing:border-box;
}


html,
body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#020202;
}


body{
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


button,
input{
  font:inherit;
}


/* ====================================================
   FULLSCREEN SHELL
   ==================================================== */

#shell{

  position:fixed;

  inset:0;

  display:grid;

  place-items:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at center,
      #171008 0%,
      #080604 60%,
      #020202 100%
    );

}


/* ====================================================
   CONSOLE
   Image geometry = 1602 × 982
   ==================================================== */

#console{

  position:relative;

  aspect-ratio:1602 / 982;

  width:min(
    100vw,
    calc(100dvh * 1602 / 982)
  );

  height:min(
    100dvh,
    calc(100vw * 982 / 1602)
  );

  overflow:hidden;

  background:#050504;

}


/* ====================================================
   TV
   ==================================================== */

#tv{

  position:absolute;

  left:31.52%;
  top:11.51%;

  width:36.89%;
  height:28%;

  overflow:hidden;

  border-radius:22px;

  background:#050504;

  z-index:5;

}


#tvFrame{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  border:0;

  background:#050504;

}


#tvGuideToggles{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:9;

  display:flex;

  gap:2px;

  padding:2px;

  pointer-events:auto;

  background:rgba(5,5,4,.72);

}


#tvGuideToggles[hidden]{

  display:none;

}


#tvGuideToggles button{

  flex:1 1 0;

  min-width:0;

  margin:0;
  padding:2px 0;

  border:0;

  background:transparent;

  color:#ddb56e;

  font:700 8px/1.1 sans-serif;

  letter-spacing:.04em;

  cursor:pointer;

}


#tvGuideToggles button[aria-pressed="true"]{

  color:#fff;

  background:rgba(239,189,85,.28);

}


#channelName{

  position:absolute;

  top:3%;
  left:3%;

  color:#ddb56e;

  font-size:clamp(
    7px,
    .65vw,
    12px
  );

  font-weight:900;

  letter-spacing:.12em;

  z-index:8;

  pointer-events:none;

}


#tvFallback{

  position:absolute;

  inset:0;

  display:grid;

  place-items:center;

  padding:7%;

  text-align:center;

  color:#ecd7af;

  background:
    radial-gradient(
      circle at center,
      rgba(160,87,29,.14),
      transparent 52%
    ),
    #090704;

  z-index:6;

}


#tvFallback[hidden]{
  display:none;
}

/* Fitness channel: leadership board scrolls inside the TV.
   The frame stays put. The page outside does not scroll this list. */
#fitnessBoard{
  display:none;
  width:100%;
  min-height:0;
  border:0;
  background:#050504;
  overscroll-behavior:contain;
}

#fitnessBoard[hidden]{
  display:none !important;
}

#tv.is-fitness{
  overflow:hidden;
}

#tv.is-fitness #tvFallback{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:stretch;
  padding:0;
  overflow:hidden;
  text-align:left;
}

#tv.is-fitness #tvFallback[hidden]{
  display:none;
}

#tv.is-fitness #fitnessBoard{
  display:block;
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:6px 8px;
  color:#ecd7af;
  font:600 12px/1.3 system-ui,sans-serif;
}

#fitnessBoard .fitnessLeader{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:8px;
  margin:0 0 6px;
  padding:6px 8px;
  border:1px solid rgba(202,170,117,.28);
  border-radius:8px;
  background:rgba(10,10,8,.76);
}

#fitnessBoard .rank{
  color:#cc4c24;
  font-weight:900;
}

#fitnessBoard .name{
  font-weight:900;
}

#fitnessBoard .meta{
  color:#a99777;
  font-size:10px;
}

#tv.is-fitness .fallbackContent{
  flex:0 0 auto;
  max-width:100%;
  padding:4px 8px 6px;
  text-align:center;
}

#tv.is-fitness #fallbackTitle,
#tv.is-fitness #fallbackText{
  display:none;
}

#tv.is-fitness #fallbackAction{
  margin-top:0;
}


.fallbackContent{
  max-width:92%;
}


#fallbackTitle{

  margin:0 0 12px;

  font-size:clamp(
    18px,
    2vw,
    40px
  );

}


#fallbackText{

  color:#bfa277;

  line-height:1.5;

}


#fallbackAction{

  display:inline-flex;

  margin-top:14px;

  padding:10px 18px;

  border:1px solid #a66e37;

  border-radius:999px;

  color:#f2d9ad;

  text-decoration:none;

  background:#191108;

  font-weight:900;

}


/* ====================================================
   OVERLAY
   ==================================================== */

#overlay{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:fill;

  pointer-events:none;

  user-select:none;

  z-index:20;

}


/* ====================================================
   REAL MUSIC UI

   This covers the static fake names in the artwork.
   ==================================================== */

#musicUI{

  position:absolute;

  left:29.8%;
  top:42.8%;

  width:37.0%;
  height:17.5%;

  z-index:40;

  padding:1.1% 1.5%;

  color:#efdbb5;

  background:
    linear-gradient(
      180deg,
      rgba(7,7,6,.98),
      rgba(10,8,6,.96)
    );

  border-radius:8px;

  overflow:hidden;

}


.musicLabel{

  color:#d6a95d;

  font-size:clamp(
    7px,
    .60vw,
    11px
  );

  font-weight:900;

  letter-spacing:.14em;

}


#trackTitle{

  margin-top:3px;

  color:#f3dfb9;

  font-size:clamp(
    10px,
    1.12vw,
    22px
  );

  font-weight:900;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}


#trackArtist{

  margin-top:2px;

  color:#b99b70;

  font-size:clamp(
    8px,
    .72vw,
    13px
  );

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}


#timeline{

  display:grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items:center;

  gap:.6em;

  margin-top:1.5%;

  font-size:clamp(
    7px,
    .62vw,
    11px
  );

}


#seek,
#volume{

  width:100%;

  accent-color:#d84b2e;

}


#transport{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:3%;

  margin-top:1.2%;

}


#transport button{

  width:clamp(
    24px,
    2.3vw,
    45px
  );

  aspect-ratio:1;

  border-radius:50%;

  border:1px solid #9a713e;

  color:#efd8ad;

  background:#15100a;

  cursor:pointer;

}


#transport button:hover{

  border-color:#e34c2d;

}


#play{

  transform:scale(1.18);

}


#volumeRow{

  display:grid;

  grid-template-columns:
    auto
    1fr;

  align-items:center;

  gap:.5em;

  margin-top:1.4%;

  color:#ac9068;

  font-size:clamp(
    7px,
    .55vw,
    10px
  );

}


/* ====================================================
   REAL PLAYLIST
   ==================================================== */

#playlistPanel{

  position:absolute;

  left:66.25%;
  top:42.8%;

  width:12.4%;
  height:17.5%;

  z-index:42;

  padding:.7%;

  overflow:auto;

  color:#ecd6ae;

  background:
    rgba(
      8,
      7,
      6,
      .98
    );

  border-radius:6px;

}


.playlistHeading{

  color:#d8aa5f;

  font-size:clamp(
    7px,
    .57vw,
    10px
  );

  font-weight:900;

  letter-spacing:.13em;

  margin-bottom:4px;

}


.track{

  width:100%;

  display:grid;

  grid-template-columns:
    28px
    1.4em
    minmax(0, 1fr);

  gap:.35em;

  padding:4px 3px;

  border:0;

  border-bottom:
    1px solid rgba(255,255,255,.07);

  background:transparent;

  color:#c8ae82;

  text-align:left;

  cursor:pointer;

  font-size:clamp(
    7px,
    .58vw,
    11px
  );

}


.track:hover{

  color:#fff0d1;

  background:
    rgba(
      220,
      70,
      38,
      .10
    );

}


.track.active{

  color:#fff0d1;

  background:
    rgba(
      220,
      70,
      38,
      .18
    );

}


.trackName{

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

}


/* ====================================================
   CHANNEL CONTROLS
   ==================================================== */

#channelControls{

  position:absolute;

  inset:0;

  z-index:60;

  pointer-events:none;

}


.channelHit{

  position:absolute;

  top:77%;

  height:14.5%;

  padding:0;
  margin:0;

  border:0;

  background:transparent;

  appearance:none;

  cursor:pointer;

  pointer-events:auto;

  border-radius:12px;

}


.channelHit:hover{

  box-shadow:none;

}


.channelHit.active{

  box-shadow:none;

}


.hitFitness{
  left:3%;
  width:14.8%;
}


.hitGuide{
  left:18.4%;
  width:14.8%;
}


.hitCompass{
  left:33.8%;
  width:14.8%;
}


.hitScore{
  left:49.2%;
  width:14.8%;
}


.hitPodcast{
  left:64.6%;
  width:14.8%;
}


.hitNews{
  left:80%;
  width:15.2%;
}


/* ====================================================
   LANDSCAPE
   ==================================================== */

@media (orientation:landscape){

  #console{

    height:100dvh;
    width:auto;

  }

}


/* ====================================================
   PORTRAIT

   Keep the whole console visible.
   Dedicated portrait skin can come later.
   ==================================================== */

@media (orientation:portrait){

  #console{

    width:100vw;
    height:auto;

  }

}



/* =========================================================
   ANKR PLAYER™ RESPONSIVE AUTHORITY V1
   ONE DOM · ONE AUDIO SESSION · TWO PRESENTATIONS
   ========================================================= */


/* =========================================================
   LANDSCAPE
   Full ANKR console.
   ========================================================= */

@media (orientation:landscape){

  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden !important;
  }

  #shell{
    position:fixed;
    inset:0;

    width:100vw;
    height:100dvh;

    display:grid;
    place-items:center;

    overflow:hidden;

    padding:0;
  }

  #console{
    position:relative;

    width:auto !important;
    height:100dvh !important;

    max-width:100vw !important;
    max-height:100dvh !important;

    aspect-ratio:1602 / 982 !important;

    overflow:hidden;

    margin:auto;
  }


  /* Console artwork is the website */

  #overlay{
    display:block;

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:fill;

    z-index:20;
  }


  /* CRT channel window */

  #tv{
    position:absolute;

    left:31.52%;
    top:11.51%;

    width:36.89%;
    height:28%;

    aspect-ratio:auto;

    border-radius:22px;

    z-index:5;
  }


  /* Music UI inside physical console */

  #musicUI{
    position:absolute;

    left:29.8%;
    top:42.8%;

    width:37%;
    height:17.5%;

    z-index:40;
  }


  #playlistPanel{
    position:absolute;

    left:66.25%;
    top:42.8%;

    width:12.4%;
    height:17.5%;

    z-index:42;
  }


  /* Physical channel buttons */

  #channelControls{
    position:absolute;

    inset:0;

    display:block;

    z-index:60;

    pointer-events:none;
  }


  .channelHit{
    position:absolute;

    top:77%;

    height:14.5%;

    background:transparent;

    border:0;

    color:transparent;

    pointer-events:auto;
  }


  .channelHit::after{
    content:"";
  }


  .hitFitness{
    left:3%;
    width:14.8%;
  }

  .hitGuide{
    left:18.4%;
    width:14.8%;
  }

  .hitCompass{
    left:33.8%;
    width:14.8%;
  }

  .hitScore{
    left:49.2%;
    width:14.8%;
  }

  .hitPodcast{
    left:64.6%;
    width:14.8%;
  }

  .hitNews{
    left:80%;
    width:15.2%;
  }

}



/* =========================================================
   PORTRAIT
   Mobile ANKR experience.
   Same player. Same TV. Same state.
   ========================================================= */

@media (orientation:portrait){

  html,
  body{
    width:100%;

    min-height:100%;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    background:
      radial-gradient(
        circle at 50% 0%,
        #20150b,
        #080604 42%,
        #020202 100%
      ) !important;
  }


  #shell{
    position:relative !important;

    inset:auto !important;

    width:100% !important;
    height:auto !important;

    min-height:100dvh;

    display:block !important;

    overflow:visible !important;

    padding:
      max(16px, env(safe-area-inset-top))
      14px
      max(30px, env(safe-area-inset-bottom));

  }


  #console{
    position:relative !important;

    width:100% !important;
    height:auto !important;

    max-width:700px;

    margin:0 auto;

    aspect-ratio:auto !important;

    overflow:visible !important;

    background:transparent !important;
  }


  /* Hide giant desktop console artwork */

  #overlay{
    display:none !important;
  }


  /* ---------------------------------------------------------
     TV
     --------------------------------------------------------- */

  #tv{
    position:relative !important;

    left:auto !important;
    top:auto !important;

    width:100% !important;
    height:auto !important;

    aspect-ratio:16 / 9;

    margin:0 0 14px;

    border-radius:16px;

    overflow:hidden;

    background:#050504;

    border:1px solid #654322;

    box-shadow:
      0 16px 44px rgba(0,0,0,.40);

    z-index:auto !important;
  }


  #channelName{
    padding:4px 6px;

    background:
      linear-gradient(
        rgba(0,0,0,.62),
        transparent
      );
  }


  /* ---------------------------------------------------------
     MUSIC PLAYER
     --------------------------------------------------------- */

  #musicUI{
    position:relative !important;

    left:auto !important;
    top:auto !important;

    width:100% !important;
    height:auto !important;

    margin:0 0 12px;

    padding:18px;

    border-radius:16px;

    border:1px solid #654322;

    background:
      linear-gradient(
        145deg,
        rgba(27,18,10,.98),
        rgba(8,7,5,.98)
      );

    box-shadow:
      0 12px 32px rgba(0,0,0,.30);

    z-index:auto !important;
  }


  .musicLabel{
    font-size:11px !important;
  }


  #trackTitle{
    margin-top:6px;

    font-size:20px !important;
  }


  #trackArtist{
    font-size:13px !important;
  }


  #timeline{
    margin-top:14px;

    font-size:11px !important;
  }


  #transport{
    margin-top:14px;

    gap:16px;
  }


  #transport button{
    width:48px !important;
    height:48px !important;

    flex:0 0 48px;

    font-size:17px;
  }


  #play{
    width:56px !important;
    height:56px !important;

    flex-basis:56px;
  }


  #volumeRow{
    margin-top:15px;

    font-size:11px !important;
  }


  /* ---------------------------------------------------------
     PLAYLIST
     --------------------------------------------------------- */

  #playlistPanel{
    position:relative !important;

    left:auto !important;
    top:auto !important;

    width:100% !important;
    height:auto !important;

    max-height:none !important;

    margin:0 0 14px;

    padding:14px;

    border-radius:16px;

    border:1px solid #654322;

    background:
      rgba(9,7,5,.98);

    overflow:visible;

    z-index:auto !important;
  }


  .playlistHeading{
    margin-bottom:8px;

    font-size:11px !important;
  }


  .track{
    min-height:44px;

    align-items:center;

    padding:9px 8px;

    font-size:13px !important;

    border-radius:8px;
  }


  /* ---------------------------------------------------------
     CHANNEL SELECTOR
     Same buttons — visible mobile presentation.
     --------------------------------------------------------- */

  #channelControls{
    position:relative !important;

    inset:auto !important;

    width:100%;

    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:10px;

    padding:0 0 10px;

    pointer-events:auto !important;

    z-index:auto !important;
  }


  .channelHit{
    position:relative !important;

    left:auto !important;
    top:auto !important;

    width:100% !important;
    height:auto !important;

    min-height:72px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:12px;

    border-radius:14px;

    border:
      1px solid
      rgba(164,105,50,.62);

    background:
      linear-gradient(
        145deg,
        rgba(34,23,13,.98),
        rgba(9,8,6,.98)
      );

    color:#ead3aa;

    font-size:12px;

    font-weight:900;

    line-height:1.25;

    text-align:center;

    letter-spacing:.04em;

    pointer-events:auto !important;

    box-shadow:
      0 8px 20px
      rgba(0,0,0,.22);
  }


  .channelHit::after{
    content:
      attr(aria-label);

    display:block;

    color:#ead3aa;
  }


  .channelHit.active{
    border-color:#df4c2e;

    box-shadow:
      inset 0 0 0 1px
      rgba(223,76,46,.38),
      0 0 18px
      rgba(223,76,46,.14);
  }


  /* 6th tile spans normally in two-column layout */

  .hitNews{
    grid-column:auto;
  }

}



/* =========================================================
   SMALL PORTRAIT PHONE
   ========================================================= */

@media
  (orientation:portrait)
  and
  (max-width:420px){

  #shell{
    padding-left:10px;
    padding-right:10px;
  }


  #musicUI{
    padding:14px;
  }


  #playlistPanel{
    padding:11px;
  }


  .channelHit{
    min-height:64px;

    padding:9px;

    font-size:11px;
  }

}



/* ======================================================
   ANKR_MASTER_VOLUME_CSS_V1
   Real control over artwork MASTER VOLUME knob
   ====================================================== */

.ankr-master-volume {
  position: absolute;

  /* MASTER VOLUME knob location on 1602×982 console */
  left: 7.25%;
  top: 49.0%;

  width: 11.4%;
  aspect-ratio: 1 / 1;

  border-radius: 50%;
  z-index: 50;

  cursor: grab;
  touch-action: none;

  background: transparent;
  outline: none;
}

.ankr-master-volume:active {
  cursor: grabbing;
}

.ankr-master-volume:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 208, 98, .85),
    0 0 18px rgba(255, 180, 30, .50);
}

.ankr-master-volume-indicator {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 3px;
  height: 34%;

  transform-origin: 50% 100%;
  transform:
    translate(-50%, -100%)
    rotate(-135deg);

  border-radius: 999px;

  background:
    linear-gradient(
      to top,
      rgba(255,255,255,0),
      rgba(255,218,125,.95)
    );

  opacity: .72;

  pointer-events: none;

  filter:
    drop-shadow(0 0 3px rgba(255,184,54,.85));
}

/* Portrait layout:
   the baked MASTER VOLUME knob is hidden/not independently
   positioned, so do not leave an invisible control floating.
*/
@media (orientation: portrait) {
  .ankr-master-volume {
    display: none;
  }
}



/* ==========================================================
   ANKR_MASTER_VOLUME_VISUAL_V2
   ========================================================== */

#ankrMasterVolume {
  position: absolute;

  /*
   * Existing MASTER VOLUME artwork hotspot.
   * These values preserve the placement that already
   * gives you the hand cursor over the knob.
   */
  left: 7.25%;
  top: 49%;
  width: 11.4%;
  aspect-ratio: 1 / 1;

  z-index: 80;
  border-radius: 50%;

  cursor: ns-resize;
  touch-action: none;

  background: transparent;
}


/*
 * This transparent rotor is what visibly turns.
 * It sits directly over the baked artwork knob.
 */
#ankrMasterRotor {
  position: absolute;

  left: 13%;
  top: 13%;
  width: 74%;
  height: 74%;

  border-radius: 50%;

  transform: rotate(0deg);

  transform-origin:
    50% 50%;

  pointer-events: none;

  transition:
    transform 60ms linear;
}


/*
 * Bright indicator notch.
 */
#ankrMasterRotor .ankr-master-pointer {
  position: absolute;

  left: 50%;
  top: 3%;

  width: 4px;
  height: 25%;

  transform:
    translateX(-50%);

  border-radius: 10px;

  background:
    rgba(255, 213, 103, .95);

  box-shadow:
    0 0 4px rgba(255, 190, 55, .9),
    0 0 9px rgba(255, 166, 0, .55);
}


/*
 * Hover feedback confirms the physical control.
 */
#ankrMasterVolume:hover
#ankrMasterRotor {
  filter:
    drop-shadow(
      0 0 5px rgba(255,190,60,.65)
    );
}


@media (orientation: portrait) {

  #ankrMasterVolume {
    display: none;
  }

}


/* ==========================================================
   ANKR_MASTER_VOLUME_VISUAL_V3
   Artwork aligned ON the knob + grab cursor
   ========================================================== */

#ankrMasterVolume {
  cursor: grab !important;
}

#ankrMasterVolume.dragging {
  cursor: grabbing !important;
}

body.ankr-master-dragging {
  cursor: grabbing !important;
}

/*
 * Center the live rotating knob exactly over the baked artwork.
 * This replaces the “pointer floating beneath” look.
 */
#ankrMasterRotor {
  left: 16.2% !important;
  top: 16.2% !important;
  width: 67.6% !important;
  height: 67.6% !important;

  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;

  background:
    radial-gradient(circle at 34% 30%,
      rgba(255, 244, 208, 0.95) 0%,
      rgba(242, 198, 103, 0.92) 12%,
      rgba(182, 123, 48, 0.95) 38%,
      rgba(104, 64, 24, 0.98) 68%,
      rgba(45, 28, 10, 1) 100%);

  border: 1px solid rgba(255, 207, 120, 0.55);

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.25),
    inset 0 -8px 12px rgba(0,0,0,0.45),
    inset 10px 0 16px rgba(255,214,130,0.12),
    inset -10px 0 16px rgba(0,0,0,0.18),
    0 0 6px rgba(0,0,0,0.35);
}

/* inner brass face */
#ankrMasterRotor::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;

  background:
    radial-gradient(circle at 35% 28%,
      rgba(255,250,230,0.95) 0%,
      rgba(244,214,142,0.88) 14%,
      rgba(196,138,58,0.95) 45%,
      rgba(112,70,27,0.98) 74%,
      rgba(55,34,14,1) 100%);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.35),
    inset 0 -4px 6px rgba(0,0,0,0.35);
}

/* subtle center cap */
#ankrMasterRotor::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;

  background:
    radial-gradient(circle at 35% 30%,
      rgba(255,244,220,0.95) 0%,
      rgba(204,145,61,0.95) 40%,
      rgba(88,52,20,1) 100%);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.25),
    0 0 1px rgba(0,0,0,0.45);
}

/* the indicator notch now sits ON the knob */
#ankrMasterRotor .ankr-master-pointer {
  position: absolute;
  left: 50%;
  top: 7%;
  width: 4px;
  height: 22%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 999px;
  z-index: 7;

  background:
    linear-gradient(
      to bottom,
      rgba(255,248,217,1) 0%,
      rgba(255,215,117,0.98) 35%,
      rgba(255,168,53,0.98) 100%
    );

  box-shadow:
    0 0 4px rgba(255, 199, 82, 0.95),
    0 0 10px rgba(255, 160, 40, 0.55);
}

#ankrMasterVolume:hover #ankrMasterRotor {
  filter: drop-shadow(0 0 4px rgba(255,190,70,0.45));
}


/* ==========================================================
   ANKR_MASTER_KNOB_V4
   Independent responsive master-volume control
   ========================================================== */


/*
 * Entire interactive control.
 * Anchored to the ANKR console, not the browser viewport.
 */
#ankrMasterVolume {
  position: absolute !important;

  left: 7.05% !important;
  top: 47.75% !important;

  width: 11.0% !important;
  aspect-ratio: 1 / 1 !important;

  z-index: 90 !important;

  border-radius: 50% !important;

  cursor: grab !important;
  touch-action: none !important;

  background: transparent !important;

  overflow: visible !important;
}


#ankrMasterVolume.dragging {
  cursor: grabbing !important;
}


/*
 * Cover the original knob artwork underneath.
 * This gives the new control its own visual surface.
 */
#ankrMasterVolume::before {
  content: "";

  position: absolute;

  left: 5%;
  top: 5%;

  width: 90%;
  height: 90%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 50%,
      #19130d 0%,
      #100d09 58%,
      #070605 82%,
      #000 100%
    );

  box-shadow:
    0 0 0 2px rgba(93, 58, 25, .85),
    0 0 12px rgba(0,0,0,.85);

  pointer-events: none;

  z-index: 1;
}


/*
 * This is the actual moving knob.
 */
#ankrMasterRotor {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 67% !important;
  height: 67% !important;

  margin: 0 !important;

  border-radius: 50% !important;

  transform:
    translate(-50%, -50%)
    rotate(var(--ankr-knob-angle, 0deg)) !important;

  transform-origin: 50% 50% !important;

  transition:
    transform 55ms linear !important;

  overflow: hidden !important;

  pointer-events: none !important;

  z-index: 4 !important;

  border:
    1px solid rgba(255,210,125,.78) !important;

  background:
    radial-gradient(
      circle at 34% 29%,
      #fff0c0 0%,
      #e4b568 13%,
      #ad7337 32%,
      #79502a 52%,
      #49301d 73%,
      #21170f 100%
    ) !important;

  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.35),
    inset -5px -6px 10px rgba(0,0,0,.60),
    0 2px 5px rgba(0,0,0,.90),
    0 0 8px rgba(196,127,45,.28) !important;
}


/*
 * Fine radial machining rings.
 */
#ankrMasterRotor::before {
  content: "";

  position: absolute;

  inset: 9%;

  border-radius: 50%;

  background:
    repeating-radial-gradient(
      circle,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,.05) 2px,
      rgba(0,0,0,.05) 3px
    );

  box-shadow:
    inset 0 0 8px rgba(0,0,0,.25);

  pointer-events: none;
}


/*
 * Center hub.
 */
#ankrMasterRotor::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 23%;
  height: 23%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #f4cf8a,
      #b27839 46%,
      #5d3c20 76%,
      #26180e
    );

  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.25),
    0 0 3px rgba(0,0,0,.7);

  pointer-events: none;
}


/*
 * Small indicator embedded INTO the knob.
 * No more giant glowing slash.
 */
#ankrMasterRotor .ankr-master-pointer {
  position: absolute !important;

  left: 50% !important;
  top: 8% !important;

  width: 6px !important;
  height: 12% !important;

  transform:
    translateX(-50%) !important;

  border-radius: 6px !important;

  background:
    #ffd27a !important;

  box-shadow:
    0 0 3px rgba(255,198,80,.75) !important;

  z-index: 10 !important;
}


/*
 * Only a subtle glow when hovered.
 */
#ankrMasterVolume:hover #ankrMasterRotor {
  filter:
    drop-shadow(
      0 0 5px rgba(218,151,54,.34)
    );
}


/*
 * No invisible master knob floating around
 * when portrait layout changes.
 */
@media (orientation: portrait) {

  #ankrMasterVolume {
    display: none !important;
  }

}


/* ==========================================================
   ANKR_RESPONSIVE_MASTER_VOLUME_V1
   Device-independent placement authority
   ========================================================== */

#ankrMasterVolume {
  position: fixed !important;

  left: var(--ankr-master-left, 20px) !important;
  top: var(--ankr-master-top, 20px) !important;

  width: var(--ankr-master-size, 110px) !important;
  height: var(--ankr-master-size, 110px) !important;

  aspect-ratio: 1 / 1 !important;

  margin: 0 !important;

  z-index: 900 !important;

  display: block !important;

  transform: none !important;

  cursor: grab !important;

  touch-action: none !important;
}


#ankrMasterVolume.dragging {
  cursor: grabbing !important;
}


/*
 * Phone / compact portrait.
 * JS determines exact position.
 */
@media (max-aspect-ratio: 4/5) {

  #ankrMasterVolume {
    z-index: 900 !important;
  }

}


/*
 * Micro viewport:
 * smartwatch-sized surfaces, tiny browser windows,
 * narrow HUD/browser surfaces, etc.
 */
@media (max-width: 380px), (max-height: 420px) {

  #ankrMasterVolume {
    min-width: 44px !important;
    min-height: 44px !important;
  }

}


/*
 * Remove the old rule that hides the volume control
 * completely in portrait.
 */
@media (orientation: portrait) {

  #ankrMasterVolume {
    display: block !important;
  }

}


/* ==========================================================
   ANKR_MOBILE_LANDSCAPE_TV_CENTER_V1
   Center embedded video inside CRT on phone landscape
   ========================================================== */

@media (orientation: landscape) and (max-height: 500px) {

  /*
   * Keep the CRT viewport itself clipped cleanly.
   */
  #tvScreen,
  #tvViewport,
  .tv-screen,
  .tv-viewport,
  .tvScreen {
    overflow: hidden !important;
  }


  /*
   * Center any embedded channel iframe inside the CRT.
   * Especially YouTube / Channel 3.11.
   */
  #tvScreen iframe,
  #tvViewport iframe,
  .tv-screen iframe,
  .tv-viewport iframe,
  .tvScreen iframe,
  iframe[src*="youtube.com/embed"] {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    transform:
      translate(-50%, -50%) !important;

    transform-origin:
      50% 50% !important;

    border: 0 !important;

    display: block !important;
  }

}


/* ==========================================================
   ANKR_FULLSCREEN_CONSOLE_AUTHORITY_V1
   One console. One geometry. Any viewport.
   ========================================================== */

:root {
  --ankr-stage-w: 1602;
  --ankr-stage-h: 982;
}


/* ----------------------------------------------------------
   GLOBAL VIEWPORT
   ---------------------------------------------------------- */

html,
body {
  margin: 0 !important;
  padding: 0 !important;

  width: 100% !important;
  min-width: 100% !important;

  height: 100% !important;
  min-height: 100% !important;

  overflow: hidden !important;

  background: #000 !important;
}


body {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  overscroll-behavior: none !important;
}


/* ----------------------------------------------------------
   EXISTING ANKR SHELL
   ---------------------------------------------------------- */

.shell {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #000 !important;
}


/* ----------------------------------------------------------
   ANKR CONSOLE = SINGLE RESPONSIVE STAGE
   ---------------------------------------------------------- */

.console {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 1602px !important;
  height: 982px !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  transform-origin: 50% 50% !important;

  transform:
    translate(-50%, -50%)
    scale(
      var(--ankr-stage-scale-x, var(--ankr-stage-scale, 1)),
      var(--ankr-stage-scale-y, var(--ankr-stage-scale, 1))
    ) !important;

  overflow: visible !important;

  will-change: transform !important;
}


/* ----------------------------------------------------------
   OVERLAY ALWAYS DEFINES THE CONSOLE GEOMETRY
   ---------------------------------------------------------- */

.console > img,
.console img[src*="ankr-plyr-overlay"] {
  position: absolute !important;

  left: 0 !important;
  top: 0 !important;

  width: 1602px !important;
  height: 982px !important;

  max-width: none !important;
  max-height: none !important;

  display: block !important;

  object-fit: fill !important;

  pointer-events: none !important;
}


/* ----------------------------------------------------------
   TV CRT WINDOW
   Known geometry from the transparent overlay:
   left 31.52%
   top 11.51%
   width 36.89%
   height 28%
   ---------------------------------------------------------- */

#tvScreen,
#tvViewport,
.tv-screen,
.tv-viewport,
.tvScreen {

  position: absolute !important;

  left: 31.52% !important;
  top: 11.51% !important;

  width: 36.89% !important;
  height: 28% !important;

  margin: 0 !important;

  overflow: hidden !important;

  background: #000 !important;

  border-radius: 18px !important;

  z-index: 3 !important;

  transform: none !important;
}


/* ----------------------------------------------------------
   EVERY CHANNEL FILLS THE CRT
   ---------------------------------------------------------- */

#tvScreen iframe,
#tvViewport iframe,
.tv-screen iframe,
.tv-viewport iframe,
.tvScreen iframe,

#tvScreen video,
#tvViewport video,
.tv-screen video,
.tv-viewport video,
.tvScreen video {

  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  display: block !important;

  transform:
    translate(-50%, -50%) !important;

  transform-origin:
    50% 50% !important;

  background: #000 !important;
}


/* ----------------------------------------------------------
   YOUTUBE — CENTERED INSIDE CRT
   ---------------------------------------------------------- */

iframe[src*="youtube.com/embed"],
iframe[src*="youtube-nocookie.com/embed"] {

  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  transform:
    translate(-50%, -50%) !important;

  transform-origin:
    center center !important;
}

/* Channel 3.11 uses this frame. The rule above shifts every YouTube
   embed to the center of its box, which slides the news stream off the
   TV hole when the hole is already tall enough to skip the grow path. */
#tv #tvFrame[src*="youtube.com/embed"],
#tv #tvFrame[src*="youtube-nocookie.com/embed"] {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 200px !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: 0 0 !important;
  box-shadow: inset 0 0 0 2px #e7b85e !important;
}


/* ----------------------------------------------------------
   LANDSCAPE:
   whole console becomes the viewport authority
   ---------------------------------------------------------- */

@media (orientation: landscape) {

  html,
  body,
  .shell {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

}


/* ----------------------------------------------------------
   PHONE LANDSCAPE / SHORT VIEWPORT
   ---------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 500px) {

  .shell {
    padding: 0 !important;
  }

  #tvScreen,
  #tvViewport,
  .tv-screen,
  .tv-viewport,
  .tvScreen {
    border-radius: 12px !important;
  }

}


/* ----------------------------------------------------------
   PORTRAIT:
   leave the established mobile ANKR layout authority intact.
   ---------------------------------------------------------- */

@media (orientation: portrait) {

  body {
    position: relative !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  .shell {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .console {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    width: 100% !important;
    height: auto !important;

    transform: none !important;
  }

}


/* ==========================================================
   ANKR_CHANNEL_SELECTOR_KNOB_V1
   Right knob = 6-position channel selector
   Visual authority cloned from Master Volume
   ========================================================== */

#ankrChannelSelector {
  position: fixed !important;

  left: var(--ankr-channel-left, 80%) !important;
  top: var(--ankr-channel-top, 50%) !important;

  width: var(--ankr-channel-size, 100px) !important;
  height: var(--ankr-channel-size, 100px) !important;

  cursor: grab !important;

  touch-action: none !important;
  user-select: none !important;

  z-index: 80 !important;
}

#ankrChannelSelector.is-dragging {
  cursor: grabbing !important;
}


/*
 * The clone already carries the same visual classes
 * as the Master Volume knob.
 */
#ankrChannelSelector .ankr-master-rotor,
#ankrChannelSelector .ankr-master-pointer {
  pointer-events: none !important;
}


/*
 * Small center channel readout.
 */
#ankrChannelReadout {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  min-width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;

  background: rgba(0,0,0,.72) !important;

  border: 1px solid rgba(230,190,100,.65) !important;

  color: #f0d084 !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-shadow:
    0 1px 2px #000,
    0 0 7px rgba(240,208,132,.35) !important;

  pointer-events: none !important;

  z-index: 20 !important;
}


/*
 * Optional tooltip.
 */
#ankrChannelSelector::after {
  content: attr(data-channel-label);

  position: absolute !important;

  left: 50% !important;
  top: calc(100% + 7px) !important;

  transform: translateX(-50%) !important;

  max-width: 150px !important;

  padding: 4px 7px !important;

  border-radius: 7px !important;

  background: rgba(0,0,0,.76) !important;
  border: 1px solid rgba(255,255,255,.13) !important;

  color: rgba(255,255,255,.84) !important;

  font-size: 9px !important;
  font-weight: 800 !important;

  line-height: 1.1 !important;
  text-align: center !important;

  white-space: nowrap !important;

  opacity: .72 !important;

  pointer-events: none !important;
}


/*
 * Very small phone landscape:
 * don't let the tooltip dominate the console.
 */
@media (orientation: landscape) and (max-height: 500px) {

  #ankrChannelSelector::after {
    font-size: 7px !important;
    padding: 3px 5px !important;
    top: calc(100% + 4px) !important;
  }

  #ankrChannelReadout {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }

}


/* ==========================================================
   ANKR_CHANNEL_SELECTOR_KNOB_V2
   Exact visual twin of Master Volume.
   ========================================================== */

#ankrChannelSelector {
  position: fixed !important;

  left:
    var(
      --ankr-channel-left,
      20px
    ) !important;

  top:
    var(
      --ankr-channel-top,
      20px
    ) !important;

  width:
    var(
      --ankr-channel-size,
      100px
    ) !important;

  height:
    var(
      --ankr-channel-size,
      100px
    ) !important;

  cursor:
    grab !important;

  touch-action:
    none !important;

  user-select:
    none !important;

  z-index:
    90 !important;
}


#ankrChannelSelector.is-dragging {
  cursor:
    grabbing !important;
}


/*
 * Kill V1 badge.
 */
#ankrChannelSelector
#ankrChannelReadout {
  display:
    none !important;
}


/*
 * Keep only subtle hover/selected label.
 */
#ankrChannelSelector::after {
  content:
    attr(
      data-channel-label
    ) !important;

  position:
    absolute !important;

  left:
    50% !important;

  top:
    calc(100% + 5px) !important;

  transform:
    translateX(-50%) !important;

  color:
    #e7c66f !important;

  background:
    rgba(0,0,0,.70) !important;

  border:
    1px solid
    rgba(231,198,111,.25) !important;

  border-radius:
    6px !important;

  padding:
    3px 6px !important;

  font-size:
    8px !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  white-space:
    nowrap !important;

  opacity:
    0 !important;

  transition:
    opacity .15s ease !important;

  pointer-events:
    none !important;
}


#ankrChannelSelector:hover::after,
#ankrChannelSelector:focus::after {
  opacity:
    1 !important;
}



/* ==========================================================
   ANKR_CHANNEL_SELECTOR_CLICK_V3
   CLICK-ONLY TV selector
   ========================================================== */

#ankrChannelSelector {

  cursor:
    pointer !important;

  touch-action:
    manipulation !important;

}


/*
 * Hide old V1/V2 tooltip.
 */
#ankrChannelSelector::after {

  display:
    none !important;

}


/*
 * Center readout built directly into the knob.
 */
#ankrChannelSelector
.ankr-channel-center-v3 {

  position:
    absolute !important;

  left:
    50% !important;

  top:
    50% !important;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  z-index:
    100 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-width:
    42% !important;

  min-height:
    42% !important;

  padding:
    4px !important;

  border-radius:
    999px !important;

  background:
    rgba(
      5,
      6,
      7,
      .88
    ) !important;

  border:
    1px solid
    rgba(
      232,
      198,
      111,
      .75
    ) !important;

  box-shadow:
    inset 0 0 8px
      rgba(
        255,
        220,
        130,
        .10
      ),
    0 1px 4px
      rgba(
        0,
        0,
        0,
        .65
      ) !important;

  pointer-events:
    none !important;

}


#ankrChannelSelector
.ankr-channel-number-v3 {

  display:
    block !important;

  color:
    #f2d17c !important;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    monospace !important;

  font-size:
    clamp(
      10px,
      1.7vw,
      18px
    ) !important;

  font-weight:
    900 !important;

  line-height:
    .95 !important;

  letter-spacing:
    -.04em !important;

  text-shadow:
    0 0 7px
      rgba(
        242,
        209,
        124,
        .38
      ) !important;

}


#ankrChannelSelector
.ankr-channel-sub-v3 {

  display:
    block !important;

  margin-top:
    2px !important;

  color:
    rgba(
      255,
      255,
      255,
      .86
    ) !important;

  font-size:
    clamp(
      4px,
      .55vw,
      7px
    ) !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  letter-spacing:
    .07em !important;

}


/*
 * Physical click effect.
 */
#ankrChannelSelector
.ankr-master-rotor {

  transition:
    transform
    .09s ease-out !important;

}


#ankrChannelSelector.ankr-channel-click-v3 {

  transform:
    scale(.965) !important;

  transition:
    transform
    .06s ease-out !important;

}


@media (
  orientation: landscape
) and (
  max-height: 500px
) {

  #ankrChannelSelector
  .ankr-channel-center-v3 {

    padding:
      2px !important;

  }


  #ankrChannelSelector
  .ankr-channel-number-v3 {

    font-size:
      clamp(
        8px,
        1.45vw,
        13px
      ) !important;

  }


  #ankrChannelSelector
  .ankr-channel-sub-v3 {

    font-size:
      4px !important;

  }

}


/* ==========================================================
   FLUID EDGE-TO-EDGE LANDSCAPE AUTHORITY
   The console and every percentage-positioned control follow
   the live viewport continuously on desktop and phone landscape.
   Portrait keeps its dedicated stacked, touch-friendly layout.
   ========================================================== */

@media (orientation: landscape) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  #shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    display: grid !important;
    place-items: stretch !important;
    overflow: hidden !important;
  }

  #console {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}


/* =========================================================
   ANKR PLAYER™ · IPHONE PORTRAIT PLAYLIST SCROLL AUTHORITY V1
   Phone portrait only. Landscape and desktop keep the console list.
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait) {

  #playlist {
    display: block;
    width: 100%;

    max-height: 52vh;
    min-height: 260px;

    overflow-y: auto !important;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    touch-action: pan-y;

    scrollbar-width: thin;
  }

  #playlist .track {
    flex-shrink: 0;
  }
}


/* =========================================================
   ANKR PLAYER™ · IPHONE PORTRAIT CONTROLS V1
   Phone portrait only. The song list is its own scroller.
   Channel buttons sit below it, in two columns, so Guide
   stays visible and nothing covers the player.
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait) {

  html,
  body {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }

  #shell,
  #console {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    display: block !important;
  }

  #overlay {
    display: none !important;
  }

  #tv,
  #musicUI,
  #playlistPanel,
  #channelControls {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 12px !important;
    transform: none !important;
    float: none !important;
  }

  #tv {
    aspect-ratio: 16 / 9 !important;
    min-height: 180px !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  #musicUI {
    z-index: 1 !important;
    overflow: visible !important;
  }

  #trackTitle,
  #transport {
    position: relative !important;
    z-index: 1 !important;
  }

  #playlistPanel {
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    max-height: none !important;
    pointer-events: auto !important;
  }

  #playlist {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 24vh !important;
    max-height: 24vh !important;
    min-height: 160px !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    z-index: 3 !important;
  }

  #playlist .track {
    flex-shrink: 0 !important;
    min-height: 44px !important;
    touch-action: pan-y !important;
  }

  #channelControls {
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 0 18px !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  #channelControls .channelHit,
  #channelControls .hitGuide,
  #channelControls .hitFitness,
  #channelControls .hitCompass,
  #channelControls .hitScore,
  #channelControls .hitPodcast,
  #channelControls .hitNews {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    grid-column: auto !important;
    z-index: auto !important;
  }

  #channelControls .hitGuide {
    order: 0 !important;
  }
}

/* Visible page links own the clicks. Invisible hotspots do not. */
#channelControls,
#channelControls .channelHit,
#channelControls .hitGuide,
#channelControls .hitFitness,
#channelControls .hitCompass,
#channelControls .hitScore,
#channelControls .hitPodcast,
#channelControls .hitNews,
.channelHit{
  display:none !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  visibility:hidden !important;
}

#ankrSiteNav,
#ankrPageLinks{
  display:none !important;
}

#ankrArtHits{
  position:absolute;
  inset:0;
  z-index:70;
  pointer-events:none;
}

#ankrArtHits a{
  position:absolute;
  top:77%;
  height:14.5%;
  margin:0;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:transparent;
  font-size:0;
  line-height:0;
  overflow:hidden;
  text-decoration:none;
  cursor:pointer;
  pointer-events:auto;
}

@media (max-width: 700px) and (orientation: portrait) {
  #ankrArtHits{
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    padding:0 0 18px;
    pointer-events:auto;
    z-index:auto;
  }

  #ankrArtHits a{
    position:relative;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    border:1px solid rgba(164,105,50,.7);
    border-radius:12px;
    background:#1a120c;
    color:#ead3aa;
    font:700 12px/1.2 sans-serif;
    letter-spacing:.04em;
    text-indent:0;
    overflow:visible;
  }
}


/* =========================================================
   PHONE LANDSCAPE CENTER
   Center the rendered console picture on a short landscape
   screen. The image keeps its own 1602×982 shape. The TV,
   player, and cards stay on that picture. Desktop landscape
   stays edge to edge. Portrait is unchanged.
   ========================================================= */

@media (orientation: landscape) and (max-height: 500px) {

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #shell {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #console {
    --ankr-picture-w: min(100dvw, calc(100dvh * 1602 / 982));
    --ankr-picture-h: min(100dvh, calc(100dvw * 982 / 1602));

    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    justify-self: center !important;
    align-self: center !important;
    width: var(--ankr-picture-w) !important;
    height: var(--ankr-picture-h) !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    overflow: hidden !important;
  }

  #overlay {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--ankr-picture-w) !important;
    height: var(--ankr-picture-h) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /*
    The picture is shifted left by another 19.5px on an
    iPhone held sideways, on top of the current position.
    The frame stays wide enough to fill the brass hole.
    The hole clips it.
  */
  #tv {
    left: 31.52% !important;
    top: 11.51% !important;
    width: 36.89% !important;
    height: 28% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    z-index: 5 !important;
    background: #000 !important;
    border-radius: 18px !important;
    container-type: normal !important;
  }

  #tv #tvFrame {
    position: absolute !important;
    inset: auto !important;
    /* v32: fit the official YouTube player inside the TV hole, uncropped and uncovered */
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    border: 0 !important;
    z-index: 1 !important;
  }

}

/* Fitness channel: start the list below the channel label so row 1 is readable. */
#tv.is-fitness #fitnessBoard{
  padding-top:24px;
}

/* v32: keep YouTube player corners (controls) uncovered by the TV hole rounding */
html body #tv{border-radius:6px !important}

/* =========================================================
   CATALOGUE FILTERS, ARTWORK, YOUTUBE SONGS
   Touch scrolling is the priority for iPhone and iPad Safari.
   ========================================================= */

#catalogueFilters{
  position:relative;
  z-index:3;
  flex:0 0 auto;
}

#catalogueFilters .chipRow{
  display:none;
}

#catalogueFilters.is-open .chipRow{
  display:flex;
}

.chipRow{
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  padding:4px 0 6px;
  scrollbar-width:none;
}

.chipRow::-webkit-scrollbar{
  display:none;
}

.filterChip{
  flex:0 0 auto;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #9a713e;
  background:#15100a;
  color:#efd8ad;
  scroll-snap-align:start;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  font:700 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.filterChip[aria-pressed="true"],
#catalogueFilters.is-open #filterToggle{
  background:#d84b2e;
  border-color:#d84b2e;
  color:#fff;
}

.playScope,
.playlistEmpty{
  margin:4px 0 8px;
  color:#b99b70;
  font-size:12px;
  line-height:1.35;
}

.trackArt{
  width:28px;
  height:28px;
  border-radius:4px;
  overflow:hidden;
  background:#2a2118;
  color:#d6a95d;
  display:grid;
  place-items:center;
  font-size:14px;
}

.trackArt img{
  width:28px;
  height:28px;
  object-fit:cover;
  display:block;
}

#nowPlaying{
  position:relative;
  padding-left:44px;
}

#trackArt,
#trackArtFallback{
  position:absolute;
  left:0;
  top:0;
  width:36px;
  height:36px;
  border-radius:6px;
  object-fit:cover;
  background:#2a2118;
  color:#d6a95d;
  display:grid;
  place-items:center;
  font-size:18px;
}

#trackArt[hidden],
#trackArtFallback[hidden],
#ytMusic[hidden]{
  display:none !important;
}

#ytMusic{
  width:min(640px, calc(100vw - 16px));
  min-width:min(356px, calc(100vw - 16px));
  min-height:200px;
  aspect-ratio:16 / 9;
  height:auto;
  border:0;
  border-radius:8px;
  background:#000;
  margin:0 0 8px;
  box-shadow:0 0 0 2px #e7b85e, 0 8px 30px rgba(0,0,0,.7);
  filter:none;
  opacity:1;
}

body.ankr-yt-music #ytMusic,
body.ankr-pl.ankr-yt-music > #ytMusic{
  position:fixed !important;
  z-index:2147483000 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  filter:none !important;
  min-height:200px !important;
  /* Prod still centers every YouTube embed with translate(-50%,-50%). That shift throws this window off an iPhone. */
  transform:none !important;
}

/* The playlist stays in the console slot. Opening the library uses a panel
   placed in the player area (catalogue.js). It is never a full-page sheet. */
.playlistHeading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

#playlistClose{
  display:none;
  flex:0 0 auto;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #e7b85e;
  background:rgba(20,12,4,.9);
  color:#f3d9a4;
  font:800 10px/1 system-ui,sans-serif;
  letter-spacing:.08em;
}

#playlistPanel.is-lib{
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  background:rgba(8,7,6,.98);
}

#playlistPanel.is-lib #playlistClose{
  display:inline-flex;
  align-items:center;
}

#playlistPanel.is-lib #playlist{
  flex:1 1 auto;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

/* MOM phone landscape hides #shell. The open library stays visible inside it. */
body.ankr-pl #playlistPanel.is-lib{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

@media (pointer: coarse){
  .trackArt,
  .trackArt img{
    width:44px;
    height:44px;
  }
}

/* iPad portrait keeps the list under the player, in its own scroller. */
@media (pointer: coarse) and (orientation: portrait) and (min-width: 701px){
  #playlistPanel{
    max-height:min(52vh, 520px) !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  #playlistPanel #playlist{
    flex:1 1 auto;
    height:auto !important;
    max-height:none !important;
    min-height:160px !important;
    overflow-y:auto !important;
  }
}

@media (min-width: 900px) and (orientation: landscape) and (hover: hover){
  body.ankr-yt-music #ytMusic{
    position:fixed;
    left:max(12px, env(safe-area-inset-left));
    top:max(12px, env(safe-area-inset-top));
    bottom:auto;
    width:min(640px, calc(100vw - 24px));
    min-height:200px;
    z-index:2147483000;
    margin:0;
    box-shadow:0 0 0 2px #e7b85e, 0 12px 40px rgba(0,0,0,.5);
  }

  body.ankr-yt-music #musicUI{
    height:17.5%;
    max-height:none;
    overflow:hidden;
  }
}

@media (max-width: 700px) and (orientation: portrait){
  #catalogueFilters{
    position:sticky;
    top:0;
    background:rgba(8,7,6,.96);
    z-index:4;
  }

  .trackArt,
  .trackArt img{
    width:44px;
    height:44px;
  }

  #playlist .track{
    grid-template-columns:44px 1.6em minmax(0, 1fr) !important;
    align-items:center;
  }
}

/* Channel 1.11 stays inside #tv. It does not float over the homepage. */
#ankrCh111{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  transform:none !important;
  z-index:7 !important;
  background:#000;
  color:#f6e2c0;
  overflow:hidden;
  box-shadow:none;
}
#ankrCh111[hidden]{display:none !important}
/* The channel label sits on the picture. Channel 1.11 uses its own line below the video. */
body.ankr-ch111 #channelName,
body.ankr-yt-music #channelName{display:none !important}
#ankrCh111.is-video{
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  display:block !important;
  overflow:hidden !important;
}
#ankrCh111.is-video #ankrCh111Frame{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:100% !important;
  min-height:200px !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  flex:0 0 auto !important;
  margin:0 !important;
  transform:none !important;
}
#ankrCh111.is-video:not(.is-dock){
  display:flex !important;
  flex-direction:column !important;
}
#ankrCh111.is-video:not(.is-dock) #ankrCh111Frame{
  position:relative !important;
  height:200px !important;
  min-height:200px !important;
  max-height:200px !important;
  flex:0 0 200px !important;
}
#ankrCh111.is-video:not(.is-dock) #ankrCh111Filters,
#ankrCh111.is-video:not(.is-dock) #ankrCh111Info{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:auto !important;
  flex:0 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  z-index:1 !important;
  margin:0 !important;
}
#ankrCh111.is-dock #ankrCh111Frame,
#ankrCh111.is-dock #ankrCh111Art,
#ankrCh111.is-dock #ankrCh111Hold{
  width:calc(100% - var(--ankr-tray, 44px)) !important;
  right:auto !important;
  z-index:1 !important;
}
#ankrCh111.is-dock:not(.is-open) #ankrCh111Filters,
#ankrCh111.is-dock:not(.is-open) #ankrCh111Info{
  display:none !important;
}
#ankrCh111.is-dock.is-open #ankrCh111Filters,
#ankrCh111.is-dock.is-open #ankrCh111Info{
  display:flex !important;
  position:absolute !important;
  right:0 !important;
  left:auto !important;
  width:var(--ankr-tray, 44px) !important;
  height:auto !important;
  max-height:46% !important;
  margin:0 !important;
  overflow:auto !important;
  background:#140c06 !important;
  z-index:2 !important;
  box-sizing:border-box !important;
  pointer-events:auto !important;
}
#ankrCh111.is-dock.is-open #ankrCh111Filters{
  top:34px !important;
  bottom:auto !important;
}
#ankrCh111.is-dock.is-open #ankrCh111Info{
  top:auto !important;
  bottom:0 !important;
}
#ankrCh111.is-dock.is-open .meta{padding:6px 8px}
#ankrCh111.is-dock.is-open #ankrCh111Sound{min-height:32px;margin-top:4px}
#ankrCh111Dock{
  display:none;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:4px;
  border-radius:8px;
  border:1px solid #e7b85e;
  background:#140c06;
  color:#f3d9a4;
  font:800 9px/1.1 system-ui,sans-serif;
  letter-spacing:.08em;
  cursor:pointer;
}
#ankrCh111.is-dock #ankrCh111Dock{
  display:flex !important;
  position:absolute !important;
  right:2px !important;
  top:4px !important;
  z-index:6 !important;
  width:40px;
  min-height:44px;
  pointer-events:auto !important;
}
#ankrCh111Dock[hidden]{display:none !important}
#ankrCh111.is-video #ankrCh111Info{pointer-events:none}
#ankrCh111.is-video #ankrCh111Art{display:none !important}
#ankrCh111.is-video .meta{
  background:#140c06;
  padding:8px 10px 10px;
}
#ankrCh111.is-video #ankrCh111Filters{
  padding:6px 8px 0;
}
#ankrCh111.is-video #ankrCh111Filters .chipRow{
  overflow-x:auto;
  flex-wrap:nowrap;
  max-width:100%;
}
#ankrCh111.is-video #ankrCh111Filters .filterChip{flex:0 0 auto}
/* Phone landscape blanks the page for a floating YouTube. Channel 1.11 stays in the TV, with the player under it. */
body.ankr-ch111.ankr-pl > #shell{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#ankrCh111Frame{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:200px !important;
  margin:0 !important;
  border:0 !important;
  transform:none !important;
  transform-origin:0 0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  background:#000;
}
#ankrCh111Frame[hidden]{display:none !important}
/* Inline display from place() and the .is-video rule both outrank the earlier [hidden] rule.
   is-gone is set when the channel is left, including after YouTube replaces the iframe. */
#ankrCh111[hidden],
#ankrCh111.is-video[hidden],
#ankrCh111.is-gone,
#ankrCh111.is-gone.is-video{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  z-index:0 !important;
}
#ankrCh111.is-video #ankrCh111Frame[hidden]{
  display:none !important;
}
#ankrCh111Info{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  pointer-events:none;
}
#ankrCh111Info[hidden]{display:none !important}
#ankrCh111Art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
#ankrCh111Art[hidden]{display:none !important}
/* A song with no video and no artwork still fills the TV. The mark is the brand card, not an empty black field. */
#ankrCh111Hold{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at center, rgba(231,184,94,.28), rgba(8,6,4,.15) 68%),
    #100c08;
  box-shadow:inset 0 0 0 2px #e7b85e;
  pointer-events:none;
}
#ankrCh111Hold img{
  width:min(70%, 280px);
  height:auto;
  max-height:42%;
  object-fit:contain;
}
#ankrCh111Hold[hidden],
#ankrCh111.is-video #ankrCh111Hold{display:none !important}
#ankrCh111Hold.ankr-bezel,#ankrCh111Art.ankr-bezel{box-shadow:none !important;border-radius:0 !important}
#ankrCh111 .meta{
  position:relative;
  z-index:1;
  padding:10px 12px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.88));
  font:700 13px/1.3 -apple-system, system-ui, sans-serif;
}
#ankrCh111 .meta i{
  display:block;
  font-style:normal;
  letter-spacing:.16em;
  font-size:10px;
  color:#e7b85e;
}
#ankrCh111 .meta b{display:block;color:#fff;font-size:16px;margin-top:2px}
#ankrCh111 .meta span{display:block;font-weight:600;opacity:.85}
#ankrCh111Sound{
  pointer-events:auto;
  margin-top:8px;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #e7b85e;
  background:rgba(20,12,4,.8);
  color:#f3d9a4;
  font:800 11px/1 system-ui, sans-serif;
  letter-spacing:.12em;
}
#ankrCh111Sound.on{background:#e7b85e;color:#1a0f05}
/* Genre and mood chips sit under the channel name and stop before the player gear. */
#ankrCh111Filters{
  position:absolute;
  left:8px;
  top:22px;
  right:44px;
  z-index:8;
  display:flex;
  flex-direction:column;
  gap:4px;
  pointer-events:auto;
}
#ankrCh111Filters[hidden]{display:none !important}
#ankrCh111Filters .chipRow{
  display:flex;
  max-width:100%;
}
#ankrCh111Filters .filterChip{
  min-height:26px;
  height:26px;
  padding:0 10px;
  font-size:11px;
}
/* Same pill as the skin switch, in the open band under the music screen. */
#ankrFilterSwitch{
  position:absolute;
  left:58.6%;
  top:calc(60.3% + 36px);
  width:96px;
  box-sizing:border-box;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:45;
  font:700 10px/1 system-ui,sans-serif;
  letter-spacing:.06em;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(240,190,110,.55);
  background:rgba(20,12,4,.78);
  color:#f3d9a4;
  cursor:pointer;
  pointer-events:auto;
}
#ankrFilterSwitch:hover,#ankrFilterSwitch:focus-visible{border-color:#ffb24a;outline:none;box-shadow:0 0 0 2px rgba(255,178,74,.35)}
#ankrFilterSwitch.is-on{border-color:#e7b85e;color:#fff}
/* Phone landscape pushes the music panel over this spot. Categories stay in the TV. */
body.ankr-pl #ankrFilterSwitch{display:none !important}
/* Library video fills the TV hole. The outside bezel is separate, so this rule
   must beat the centered YouTube embed and the old floating window. */
body.ankr-yt-music #tv #ytMusic.ankr-bezel,
#tv iframe.ankr-bezel[src*="youtube.com/embed"],
#tv iframe.ankr-bezel[src*="youtube-nocookie.com/embed"]{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:100% !important;
  min-width:200px !important;
  min-height:200px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  transform-origin:0 0 !important;
}
@media (orientation:portrait){
  #ankrFilterSwitch{
    left:auto;
    right:3%;
    top:auto;
    bottom:calc(1.2% + 28px);
  }
}