/* The out-of-flow mascot is anchored to the actual controls, not the heading. */
#player.radio-widget { position: relative; --radio-mascot-size: 240px; }
#player .radio-player-inline { position: relative; z-index: 1; }

#player .radio-mascot {
  position: absolute;
  /* Source torso y=1030 meets the existing panel, 15px above this row.
     Crop only the empty canvas below y=1260, not the hanging hand. */
  bottom: calc(100% + 15px - var(--radio-mascot-size) * 230 / 1122);
  right: 0;
  width: var(--radio-mascot-size);
  aspect-ratio: 1122 / 1260;
  z-index: 2;
  pointer-events: none;
}

#player .radio-mascot[hidden],
#player .radio-mascot-restore[hidden] { display: none; }

.radio-mascot-art {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.radio-mascot-art * { pointer-events: none; }
.radio-mascot-art img { display: block; max-width: none; border: 0; }
.radio-mascot-illustration {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.radio-mascot-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1122 / 1402;
}

.radio-mascot-base { width: 100%; height: auto; object-fit: contain; }

/* All supplied assets share the same canvas. Reference their actual groups
   so eyes blink independently while the perspective, smile and cheeks stay intact. */
.radio-mascot-face, .radio-mascot-note, .radio-mascot-rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.radio-mascot-eye {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: radio-mascot-blink 5.6s infinite;
}

.radio-mascot-note {
  transform-origin: 89.5% 32%;
  opacity: 1;
  filter: brightness(1.5) saturate(1.15) drop-shadow(0 0 5px #259dff);
}

.radio-mascot-ray {
  opacity: 1;
  filter: brightness(1.6) drop-shadow(0 0 4px #bc62ff);
}

#player .radio-mascot-bubble {
  position: absolute;
  left: 26px;
  top: -50px;
  width: 166px;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1.5px solid #c4baff;
  border-radius: 20px 20px 8px 20px;
  background: linear-gradient(145deg, #1c112d, #100d1c);
  color: #fff4ff;
  font: italic 600 15px/1.4 Manrope, sans-serif;
  text-align: center;
  text-shadow: 0 0 2px #fff, 0 0 6px #d788ff, 0 0 12px #a544ff, 0 0 20px #723bff;
  box-shadow: 0 0 5px #bba0ff99, 0 0 15px #755eff66, inset 0 0 12px #8140d944;
  transform: rotate(-7deg);
  opacity: 1;
  filter: brightness(1.1) drop-shadow(0 0 3px #ac72ff66);
}

.radio-mascot-bubble::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid #c4baff;
  border-bottom: 1.5px solid #c4baff;
  background: #171025;
  transform: rotate(45deg);
}

#player .radio-mascot-close,
#player .radio-mascot-restore {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  font-family: inherit;
  background: #191322;
  border: 1px solid #594073;
  color: #c9bada;
  z-index: 3;
}

#player .radio-mascot-close {
  top: 16px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  font-size: 21px;
  line-height: 1;
}

#player .radio-mascot-restore {
  top: 0;
  right: 0;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.5;
}

#player :is(.radio-mascot-close, .radio-mascot-restore):hover { color: #fff; border-color: #9e77ed; }
#player :is(.radio-mascot-close, .radio-mascot-restore):focus-visible { outline: 2px solid #53d4ff; outline-offset: 3px; }

.radio-mascot.is-playing .radio-mascot-note { animation: radio-mascot-note-glow 3.2s ease-in-out infinite; }
.radio-mascot.is-playing .radio-mascot-ray { animation: radio-mascot-ray-glow 2.4s ease-in-out infinite; }
.radio-mascot.is-playing .radio-mascot-ray:nth-child(2) { animation-delay: .18s; }
.radio-mascot.is-playing .radio-mascot-ray:nth-child(3) { animation-delay: .36s; }
#player .radio-mascot.is-playing .radio-mascot-bubble { animation: radio-mascot-bubble-glow 3.2s ease-in-out infinite; }

@keyframes radio-mascot-blink {
  0%, 43%, 47%, 78%, 82%, 100% { transform: scaleY(1); }
  45%, 80% { transform: scaleY(.08); }
}
@keyframes radio-mascot-note-glow {
  0%, 100% { opacity: .95; transform: translateY(0) scale(1); filter: brightness(1.5) saturate(1.15) drop-shadow(0 0 3px #259dff); }
  50% { opacity: 1; transform: translateY(-3px) scale(1.06); filter: brightness(2) saturate(1.15) drop-shadow(0 0 8px #59c8ff); }
}
@keyframes radio-mascot-ray-glow {
  0%, 60%, 100% { opacity: .85; filter: brightness(1.5) drop-shadow(0 0 3px #bc62ff); }
  30% { opacity: 1; filter: brightness(2.2) drop-shadow(0 0 8px #e5b2ff); }
}
@keyframes radio-mascot-bubble-glow {
  0%, 100% { filter: brightness(1.1) drop-shadow(0 0 3px #ac72ff66); }
  50% { filter: brightness(1.5) drop-shadow(0 0 8px #c792ffcc); }
}

@media (min-width: 1100px) and (max-width: 1199px) {
  #player.radio-widget { --radio-mascot-size: 200px; }
  #player .radio-mascot-bubble { left: 12px; }
}

@media (min-width: 1100px) {
  /* Keep the right-hand lane free, without changing the widget's outer width. */
  #player :is(h2, .fm-selector-wrap, .fm-station-source, .station-stream-notice),
  #player #radioVolume { width: calc(100% - var(--radio-mascot-size) - 24px); }
  #player .fm-selector-wrap { flex-wrap: nowrap; }
  #player .fm-station-picker { flex: 1 1 0; min-width: 0; }
  #player .fm-freq-badge { flex: 0 0 auto; }
  #player .radio-player-footer { position: relative; isolation: isolate; justify-content: space-between; }
  #player .radio-player-footer::before {
    content: "";
    position: absolute;
    inset: -68px -14px -8px;
    z-index: -1;
    pointer-events: none;
    border: 1px solid #7750bc;
    border-radius: 20px;
    background: linear-gradient(120deg, #20172f, #231535 75%, #301956);
    box-shadow: inset 0 1px 0 #b18aff44, inset 0 0 20px #782cf52b, 0 0 18px #6825e02b;
  }
}

/* The compact two-column layout has no safe decorative lane, even on a tablet.
   Do not squeeze or move existing controls merely to make the mascot fit. */
@media (max-width: 1099px) {
  #player .radio-mascot, #player .radio-mascot-restore { display: none; }
  #player .radio-mascot * { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #player .radio-mascot *, #player .radio-mascot *::before, #player .radio-mascot *::after {
    animation: none !important;
    transition: none !important;
  }
}