.iufp-player{
  --iufp-accent:#00d8ff;
  --iufp-onair:#ff1b9b;
  box-sizing:border-box;
  position:relative;
  width:100%;
  max-width:100vw;
  min-height:84px;
  display:grid;
  grid-template-columns:minmax(230px,320px) minmax(280px,1fr) minmax(165px,190px);
  gap:16px;
  align-items:center;
  padding:9px 18px;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(90% 220% at 50% -120%,rgba(26,79,137,.22),transparent 56%),
    linear-gradient(180deg,#111822 0%,#070c13 45%,#020508 100%);
  border-top:1px solid rgba(123,158,194,.28);
  box-shadow:0 -9px 30px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.045);
  z-index:99999;
  overflow:hidden;
}
.iufp-player:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(18,187,255,.65) 20%,rgba(255,24,159,.78) 50%,rgba(18,187,255,.58) 80%,rgba(0,0,0,0));
  box-shadow:0 0 12px rgba(255,24,159,.22);
}
.iufp-sticky{position:fixed;left:0;right:0;bottom:0}
.iufp-player,.iufp-player *{box-sizing:border-box}
.iufp-left{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden;position:relative;z-index:4}
.iufp-info{flex:1 1 auto;min-width:0;max-width:100%;line-height:1.02;overflow:hidden}

/* PLAY BUTTONS - isolated from theme button styles */
.iufp-player button.iufp-play{
  -webkit-appearance:none !important;appearance:none !important;
  box-sizing:border-box !important;
  position:relative !important;
  display:inline-block !important;
  flex:0 0 56px !important;
  width:56px !important;height:56px !important;
  min-width:56px !important;min-height:56px !important;
  margin:0 !important;padding:0 !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,.24),rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 38%,#2a313b 0%,#151b23 37%,#080c11 66%,#010203 100%) !important;
  background-color:#05080d !important;
  color:#fff !important;
  font:inherit !important;line-height:1 !important;
  text-decoration:none !important;text-transform:none !important;
  overflow:hidden !important;
  cursor:pointer !important;
  box-shadow:
    0 0 0 1px rgba(0,216,255,.10),
    0 0 15px rgba(0,216,255,.08),
    0 0 13px rgba(255,27,155,.07),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 15px rgba(0,0,0,.58),
    inset 0 0 13px rgba(255,255,255,.025) !important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease !important;
}
.iufp-player button.iufp-play::before{
  content:"" !important;
  position:absolute !important;
  left:9% !important;right:9% !important;top:7% !important;height:39% !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.045) 46%,rgba(255,255,255,0) 100%) !important;
  opacity:.85 !important;
  transform:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
.iufp-player button.iufp-play::after{content:none !important;display:none !important;background:none !important;box-shadow:none !important;}
.iufp-player button.iufp-play:hover{transform:translateY(-1px) scale(1.018) !important;filter:brightness(1.06) !important;}
.iufp-player button.iufp-play:focus-visible{outline:2px solid var(--iufp-accent) !important;outline-offset:3px !important;}
.iufp-player .iufp-play-icon{
  position:absolute !important;z-index:3 !important;left:50% !important;top:50% !important;
  transform:translate(-42%,-50%) !important;width:0 !important;height:0 !important;
  border-top:9px solid transparent !important;border-bottom:9px solid transparent !important;border-left:13px solid #fff !important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.22)) !important;
  background:none !important;box-shadow:none !important;
}
.iufp-player.is-playing .iufp-play-icon{
  width:14px !important;height:18px !important;border:0 !important;
  transform:translate(-50%,-50%) !important;
  background:linear-gradient(90deg,#fff 0 34%,transparent 34% 66%,#fff 66% 100%) !important;
}
.iufp-button-pill button.iufp-play{
  flex-basis:76px !important;width:76px !important;min-width:76px !important;height:42px !important;min-height:42px !important;border-radius:999px !important;
}
.iufp-station{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#7e8c99;margin:0 0 4px}
.iufp-title-row{min-width:0;width:100%;overflow:hidden}
.iufp-marquee{position:relative;display:block;min-width:0;width:100%;overflow:hidden;white-space:nowrap;contain:paint}
.iufp-marquee-text{display:inline-block;min-width:max-content;max-width:none;white-space:nowrap;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased}
.iufp-title{font-size:16px;font-weight:700;text-shadow:0 0 7px rgba(255,255,255,.08)}
.iufp-marquee.is-scrolling .iufp-marquee-text{animation:iufp-marquee-pan var(--iufp-scroll-duration,12s) linear infinite both}
@keyframes iufp-marquee-pan{
  0%,7%{transform:translate3d(0,0,0);opacity:1}
  78%{transform:translate3d(calc(var(--iufp-scroll-distance,0) * .90),0,0);opacity:1}
  86%{transform:translate3d(var(--iufp-scroll-distance,0),0,0);opacity:0}
  87%{transform:translate3d(0,0,0);opacity:0}
  95%,100%{transform:translate3d(0,0,0);opacity:1}
}
.iufp-subrow{display:flex;align-items:center;gap:9px;min-width:0;width:100%;margin-top:8px;overflow:hidden}
.iufp-onair{display:inline-flex;align-items:center;gap:7px;height:20px;padding:0 11px 0 8px;border:1px solid rgba(0,225,255,.72);border-radius:11px;background:linear-gradient(180deg,rgba(27,10,26,.92),rgba(9,4,12,.96));font-size:8px;font-weight:800;letter-spacing:.17em;color:#ffe6f4;white-space:nowrap;box-shadow:0 0 9px rgba(0,220,255,.40),inset 0 0 8px rgba(255,22,157,.16)}
.iufp-dot{width:6px;height:6px;border-radius:50%;background:var(--iufp-onair);box-shadow:0 0 8px var(--iufp-onair)}
.iufp-track-wrap{display:none;flex:1 1 auto;min-width:0;width:auto}
.iufp-has-track .iufp-track-wrap{display:block}
.iufp-track{font-size:11px;color:#95a4b1;min-width:max-content}
.iufp-track:empty{display:none}


/* MUTE + VOLUME - isolated from theme button styles */
.iufp-volume-wrap{position:relative;z-index:4;display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border:1px solid rgba(101,122,145,.18);border-radius:14px;background:linear-gradient(180deg,#080c12,#020509);box-shadow:inset 0 0 14px rgba(0,0,0,.82)}
.iufp-player button.iufp-mute{
  -webkit-appearance:none !important;appearance:none !important;
  box-sizing:border-box !important;
  position:relative !important;display:inline-block !important;
  flex:0 0 40px !important;width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;
  margin:0 !important;padding:0 !important;border-radius:50% !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,.22),rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 38%,#2a313b 0%,#151b23 37%,#080c11 66%,#010203 100%) !important;
  background-color:#05080d !important;color:#fff !important;
  overflow:hidden !important;cursor:pointer !important;
  font:inherit !important;line-height:1 !important;text-decoration:none !important;
  box-shadow:
    0 0 0 1px rgba(0,216,255,.08),
    0 0 12px rgba(0,216,255,.07),
    0 0 10px rgba(255,27,155,.06),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -8px 12px rgba(0,0,0,.54),
    inset 0 0 10px rgba(255,255,255,.025) !important;
}
.iufp-player button.iufp-mute::before{
  content:"" !important;position:absolute !important;left:9% !important;right:9% !important;top:7% !important;height:39% !important;
  border-radius:999px !important;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 100%) !important;
  opacity:.85 !important;transform:none !important;box-shadow:none !important;pointer-events:none !important;
}
.iufp-player button.iufp-mute::after{content:none !important;display:none !important;background:none !important;box-shadow:none !important;}
.iufp-player button.iufp-mute:hover{transform:translateY(-1px) scale(1.018) !important;filter:brightness(1.06) !important;}
.iufp-player button.iufp-mute:focus-visible{outline:2px solid var(--iufp-accent) !important;outline-offset:3px !important;}
.iufp-speaker-icon{
  position:absolute;z-index:3;left:50%;top:50%;width:20px;height:16px;
  transform:translate(-50%,-50%);background:transparent !important;clip-path:none !important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.20));pointer-events:none;
}
.iufp-speaker-icon::before{
  content:"";position:absolute;left:1px;top:2px;width:9px;height:12px;background:#fff;
  clip-path:polygon(0 31%,40% 31%,100% 0,100% 100%,40% 69%,0 69%);
}
.iufp-speaker-icon::after{
  content:"";position:absolute;left:10px;top:2px;width:7px;height:12px;
  border-right:2px solid #fff;border-radius:0 12px 12px 0;box-sizing:border-box;
}
.iufp-mute.is-muted .iufp-speaker-icon::after{
  left:1px;top:7px;width:19px;height:2px;border:0;border-radius:2px;
  background:#ff4a99;transform:rotate(-43deg);transform-origin:center;
  box-shadow:0 0 4px rgba(255,74,153,.52);
}
.iufp-volume{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,#12dfff 0%,#38d5ff 46%,#ff4eb8 100%);outline:none;cursor:pointer;box-shadow:0 0 8px rgba(24,216,255,.18)}
.iufp-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff,#d9e0e6 62%,#7b8791 100%);border:1px solid rgba(255,255,255,.8);box-shadow:0 0 7px rgba(255,255,255,.38),0 0 7px rgba(255,46,170,.24)}
.iufp-volume::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff,#d9e0e6 62%,#7b8791 100%);border:1px solid rgba(255,255,255,.8);box-shadow:0 0 7px rgba(255,255,255,.38),0 0 7px rgba(255,46,170,.24)}
.iufp-volume::-moz-range-track{height:6px;border:0;border-radius:999px;background:linear-gradient(90deg,#12dfff 0%,#38d5ff 46%,#ff4eb8 100%)}
.iufp-status{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font-size:8px;letter-spacing:.08em;color:#596773;pointer-events:none}
.iufp-notice{padding:12px;background:#fff3cd;color:#4d3d00;border:1px solid #ffe69c}

@media(max-width:1100px){
  .iufp-player{grid-template-columns:minmax(220px,300px) minmax(260px,1fr);gap:12px;padding-left:12px;padding-right:12px}
  .iufp-volume-wrap{display:none}
  .iufp-player.iufp-mobile-volume .iufp-volume-wrap{position:relative;z-index:4;display:flex;grid-column:1/-1;min-height:36px;padding:6px 10px}

}
@media(max-width:760px){
  .iufp-player{grid-template-columns:minmax(210px,44%) minmax(230px,1fr);gap:9px;padding:8px 10px;min-height:74px}
  .iufp-left{gap:11px}
  .iufp-player button.iufp-play{width:50px !important;height:50px !important;min-width:50px !important;min-height:50px !important;flex-basis:50px !important}
  .iufp-button-pill button.iufp-play{width:70px !important;height:38px !important;min-width:70px !important;min-height:38px !important;flex-basis:70px !important}
  .iufp-title{font-size:15px}
  .iufp-onair{height:19px;padding:0 9px 0 7px;font-size:8px}

}
@media(max-width:640px){
  .iufp-player{grid-template-columns:minmax(0,1fr);gap:0;min-height:68px;padding:8px 10px}
  .iufp-left{width:100%;gap:11px}

  .iufp-volume-wrap{display:none}
  .iufp-player.iufp-mobile-volume .iufp-volume-wrap{position:relative;z-index:4;display:flex;grid-column:1/-1;margin-top:7px}
  .iufp-title{font-size:14px}
  .iufp-track{font-size:10px}
  .iufp-status{display:none}
}
@media(max-width:420px){
  .iufp-player{padding:7px 8px;min-height:64px}
  .iufp-left{gap:9px}
  .iufp-player button.iufp-play{width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;flex-basis:44px !important}
  .iufp-button-pill button.iufp-play{width:62px !important;height:34px !important;min-width:62px !important;min-height:34px !important;flex-basis:62px !important}
  .iufp-title{font-size:13.5px}
  .iufp-subrow{gap:7px;margin-top:6px}
  .iufp-onair{height:18px;padding:0 8px 0 7px;font-size:7.5px;letter-spacing:.14em}
}

@media(max-width:640px){
  .iufp-marquee.is-scrolling{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7px,#000 calc(100% - 7px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7px,#000 calc(100% - 7px),transparent 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .iufp-marquee.is-scrolling .iufp-marquee-text{animation:none}
  .iufp-marquee{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .iufp-marquee::-webkit-scrollbar{display:none}
}

/* v2.1.0 — canvas LCD system adapted from the proven Eclipse Player layout.
   The visualizer is painted on an absolute canvas, so it can never create a
   second row or escape the player container on mobile/tablet. */
.iufp-vu-canvas{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  width:100% !important;
  height:100% !important;
  display:block;
  pointer-events:none !important;
  mix-blend-mode:normal !important;
}
.iufp-vu-slot{
  grid-column:2;
  grid-row:1;
  min-width:0;
  width:100%;
  height:100%;
  min-height:54px;
  align-self:stretch;
  position:relative;
  z-index:1;
  pointer-events:none;
}
.iufp-player.iufp-vu-hidden .iufp-vu-slot,
.iufp-player.iufp-vu-hidden .iufp-vu-canvas{
  display:none !important;
}
.iufp-player.iufp-vu-visible .iufp-vu-slot{
  display:block !important;
}
.iufp-player>.iufp-left{grid-column:1;grid-row:1}
.iufp-player>.iufp-volume-wrap{grid-column:3;grid-row:1}

/* v2.1.1 compact stacked LCD layout for tablets/phones.
   The canvas remains absolute inside the player. The silent slot is removed
   from normal flow and the title lane spans the player; L is painted above
   the title and R below it, matching the old Eclipse Player canvas approach. */
@media(max-width:1100px){
  .iufp-player{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:1fr !important;
    gap:0 !important;
    min-height:94px !important;
    height:94px !important;
    padding:7px 12px !important;
    overflow:hidden !important;
  }
  .iufp-player>.iufp-left{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    align-self:stretch !important;
  }
  .iufp-player>.iufp-vu-slot{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    grid-column:auto !important;
    grid-row:auto !important;
    z-index:1 !important;
    pointer-events:none !important;
  }
  .iufp-player>.iufp-volume-wrap{display:none !important}
  .iufp-player.iufp-mobile-volume>.iufp-volume-wrap{display:none !important}
  .iufp-info{
    min-width:0 !important;
    max-width:100% !important;
    padding-top:13px !important;
    padding-bottom:13px !important;
    position:relative !important;
    z-index:4 !important;
  }
  .iufp-title-row{width:100% !important;min-width:0 !important}
  .iufp-title{font-size:15px !important}
  .iufp-subrow{margin-top:5px !important;gap:7px !important}
  .iufp-onair{height:18px !important;padding:0 8px 0 7px !important;font-size:7.5px !important;letter-spacing:.14em !important}
}

@media(max-width:767px){
  .iufp-player{
    min-height:90px !important;
    height:90px !important;
    padding:6px 8px !important;
  }
  .iufp-left{gap:9px !important;width:100% !important;min-width:0 !important}
  .iufp-info{padding-top:12px !important;padding-bottom:12px !important}
  .iufp-title{font-size:13.5px !important}
  .iufp-track{font-size:10px !important}
  .iufp-player button.iufp-play{
    width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important;flex-basis:48px !important;
  }
}

@media(max-width:480px){
  .iufp-player{
    min-height:88px !important;
    height:88px !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
  .iufp-left{gap:8px !important}
  .iufp-info{padding-top:11px !important;padding-bottom:11px !important}
  .iufp-title{font-size:13px !important}
  .iufp-player button.iufp-play{
    width:46px !important;height:46px !important;min-width:46px !important;min-height:46px !important;flex-basis:46px !important;
  }
}

@media(max-width:380px){
  .iufp-player{min-height:84px !important;height:84px !important;padding-left:6px !important;padding-right:6px !important}
  .iufp-player button.iufp-play{
    width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;flex-basis:42px !important;
  }
  .iufp-info{padding-top:10px !important;padding-bottom:10px !important}
  .iufp-title{font-size:12.5px !important}
  .iufp-onair{height:17px !important;padding-left:6px !important;padding-right:7px !important}
}

/* When LCDs are disabled for a device, reclaim the reserved lane. */
@media(min-width:1101px){
  .iufp-player.iufp-vu-hidden{
    grid-template-columns:minmax(230px,1fr) minmax(165px,190px) !important;
  }
  .iufp-player.iufp-vu-hidden>.iufp-left{grid-column:1 !important}
  .iufp-player.iufp-vu-hidden>.iufp-volume-wrap{grid-column:2 !important}
}
@media(max-width:1100px){
  .iufp-player.iufp-vu-hidden{grid-template-columns:minmax(0,1fr) !important}
  .iufp-player.iufp-vu-hidden>.iufp-left{grid-column:1 !important;width:100% !important}
  .iufp-player.iufp-vu-hidden .iufp-info{padding-top:0 !important;padding-bottom:0 !important}
}


/* v2.1.2: ON AIR badge removed. Keep it hidden even if an older cached HTML
   fragment is still present for one request. */
.iufp-onair,.iufp-dot{display:none !important}

/* JS adds these device classes from the actual viewport/player width. These
   class rules do not depend on media-query interpretation by the theme. */
.iufp-player.iufp-device-mobile,
.iufp-player.iufp-device-tablet{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  gap:0 !important;
  overflow:hidden !important;
}
.iufp-player.iufp-device-mobile>.iufp-left,
.iufp-player.iufp-device-tablet>.iufp-left{
  grid-column:1 !important;grid-row:1 !important;
  width:100% !important;min-width:0 !important;align-self:stretch !important;
}
.iufp-player.iufp-device-mobile>.iufp-vu-slot,
.iufp-player.iufp-device-tablet>.iufp-vu-slot{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;min-height:0 !important;
  grid-column:auto !important;grid-row:auto !important;pointer-events:none !important;
}
.iufp-player.iufp-device-mobile>.iufp-volume-wrap,
.iufp-player.iufp-device-tablet>.iufp-volume-wrap{display:none !important}
.iufp-player.iufp-device-mobile .iufp-info,
.iufp-player.iufp-device-tablet .iufp-info{
  display:flex !important;flex-direction:column !important;justify-content:center !important;
  min-width:0 !important;max-width:100% !important;position:relative !important;z-index:4 !important;
}
.iufp-player.iufp-device-mobile .iufp-subrow,
.iufp-player.iufp-device-tablet .iufp-subrow{display:none !important}
.iufp-player.iufp-device-mobile .iufp-title-row,
.iufp-player.iufp-device-tablet .iufp-title-row{width:100% !important;min-width:0 !important;margin:0 !important}

.iufp-player.iufp-device-mobile{height:78px !important;min-height:78px !important;padding:5px 8px !important}
.iufp-player.iufp-device-mobile .iufp-info{padding:14px 0 !important}
.iufp-player.iufp-device-tablet{height:84px !important;min-height:84px !important;padding:6px 12px !important}
.iufp-player.iufp-device-tablet .iufp-info{padding:15px 0 !important}

/* v2.1.4: JS sets the exact compact-title width to the final LCD block edge.
   These rules ensure themes cannot let the title paint beyond that viewport. */
@media(max-width:1100px){
  .iufp-player.iufp-vu-visible .iufp-title-row,
  .iufp-player.iufp-vu-visible .iufp-title-marquee{
    min-width:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
}

/* v2.1.5: compact title is positioned by JS to the first/last LCD block. */
@media(max-width:1100px){
  .iufp-player.iufp-vu-visible .iufp-title-row,
  .iufp-player.iufp-vu-visible .iufp-title-marquee{
    min-width:0 !important;
    overflow:hidden !important;
  }
}

/* V1.00 edge safety: never allow the compact player/canvas to create horizontal page overflow. */
@media(max-width:1100px){
  html,body{max-width:100%;overflow-x:hidden}
  .iufp-player.iufp-device-mobile,
  .iufp-player.iufp-device-tablet{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .iufp-player.iufp-device-mobile>.iufp-vu-slot,
  .iufp-player.iufp-device-tablet>.iufp-vu-slot,
  .iufp-player.iufp-device-mobile .iufp-vu-canvas,
  .iufp-player.iufp-device-tablet .iufp-vu-canvas{
    max-width:100% !important;
    overflow:hidden !important;
  }
}

/* V1.00 exact compact title clipping: the JS width is the measured end of
   the final LCD cell. Do not let theme rules enlarge that viewport. */
@media(max-width:1100px){
  .iufp-player.iufp-vu-visible .iufp-title-row,
  .iufp-player.iufp-vu-visible .iufp-title-marquee{
    box-sizing:border-box !important;
    overflow:hidden !important;
    min-width:0 !important;
    flex:none !important;
  }
}

/* V1.00 desktop vertical alignment:
   lower the title/info lane slightly so its visual centre lines up with
   the LCD tray. Mobile and tablet are intentionally untouched. */
@media(min-width:1101px){
  .iufp-player .iufp-info{
    transform:translateY(6px) !important;
  }
}

/* V1.00 portable/theme-proof play control.
   Some WordPress themes apply button:active / button:focus backgrounds with
   !important, flattening the glossy control to solid black. Repeat the complete
   surface on every interactive state with higher specificity. */
html body .iufp-player button.iufp-play,
html body .iufp-player button.iufp-play:hover,
html body .iufp-player button.iufp-play:active,
html body .iufp-player button.iufp-play:focus,
html body .iufp-player button.iufp-play:focus-visible,
html body .iufp-player.is-playing button.iufp-play{
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,.24),rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 38%,#2a313b 0%,#151b23 37%,#080c11 66%,#010203 100%) !important;
  background-color:#05080d !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
  opacity:1 !important;
  -webkit-tap-highlight-color:transparent !important;
}

html body .iufp-player button.iufp-play .iufp-play-icon{
  position:absolute !important;
  z-index:4 !important;
  left:50% !important;
  top:50% !important;
  width:24px !important;
  height:24px !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:visible !important;
  pointer-events:none !important;
}
html body .iufp-player button.iufp-play .iufp-play-icon svg{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:24px !important;
  height:24px !important;
  fill:#fff !important;
  stroke:none !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.22)) !important;
  pointer-events:none !important;
}
html body .iufp-player button.iufp-play .iufp-svg-pause{display:none !important}
html body .iufp-player.is-playing button.iufp-play .iufp-svg-play{display:none !important}
html body .iufp-player.is-playing button.iufp-play .iufp-svg-pause{display:block !important}

/* Neutralise the older CSS-only triangle/pause construction. */
html body .iufp-player .iufp-play-icon{
  border-top:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
}
html body .iufp-player.is-playing .iufp-play-icon{
  background:none !important;
}

/* V1.00 clean portable play button.
   Hard reset theme/browser focus rings and use simple pause bars so the button
   renders identically on different WordPress themes. */
html body .iufp-player button.iufp-play,
html body .iufp-player button.iufp-play:hover,
html body .iufp-player button.iufp-play:active,
html body .iufp-player button.iufp-play:focus,
html body .iufp-player button.iufp-play:focus-visible,
html body .iufp-player.is-playing button.iufp-play,
html body .iufp-player.is-playing button.iufp-play:hover,
html body .iufp-player.is-playing button.iufp-play:active,
html body .iufp-player.is-playing button.iufp-play:focus{
  outline:0 !important;
  outline-width:0 !important;
  outline-style:none !important;
  outline-offset:0 !important;
  border-style:solid !important;
  border-width:1px !important;
  border-color:rgba(126,151,174,.30) !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 34% 23%,rgba(255,255,255,.20),rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 43%,#252d37 0%,#141a22 38%,#080c12 67%,#020407 100%) !important;
  background-color:#05080d !important;
  background-image:
    radial-gradient(circle at 34% 23%,rgba(255,255,255,.20),rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 43%,#252d37 0%,#141a22 38%,#080c12 67%,#020407 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,216,255,.08),
    0 0 13px rgba(0,216,255,.08),
    0 0 10px rgba(255,27,155,.05),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -12px 18px rgba(0,0,0,.62) !important;
  filter:none !important;
  text-shadow:none !important;
  opacity:1 !important;
  -webkit-tap-highlight-color:transparent !important;
}

html body .iufp-player button.iufp-play:focus-visible{
  outline:0 !important;
  box-shadow:
    0 0 0 2px rgba(0,216,255,.26),
    0 0 14px rgba(0,216,255,.14),
    0 0 10px rgba(255,27,155,.06),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -12px 18px rgba(0,0,0,.62) !important;
}

/* Keep the glass highlight smooth and never allow a theme to add a dotted ring. */
html body .iufp-player button.iufp-play::before{
  content:"" !important;
  position:absolute !important;
  left:10% !important;
  right:10% !important;
  top:8% !important;
  height:36% !important;
  border:0 !important;
  outline:0 !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.035) 52%,rgba(255,255,255,0) 100%) !important;
  box-shadow:none !important;
  opacity:.82 !important;
  transform:none !important;
  pointer-events:none !important;
}
html body .iufp-player button.iufp-play::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:none !important;
}

/* Completely neutralise the older CSS triangle/pause construction. */
html body .iufp-player button.iufp-play .iufp-play-icon{
  position:absolute !important;
  z-index:5 !important;
  left:50% !important;
  top:50% !important;
  width:24px !important;
  height:24px !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:visible !important;
  pointer-events:none !important;
}
html body .iufp-player button.iufp-play .iufp-play-icon::before,
html body .iufp-player button.iufp-play .iufp-play-icon::after,
html body .iufp-player button.iufp-play .iufp-pause-bars::before,
html body .iufp-player button.iufp-play .iufp-pause-bars::after{
  content:none !important;
  display:none !important;
}

/* PLAY state */
html body .iufp-player button.iufp-play .iufp-svg-play{
  position:absolute !important;
  left:1px !important;
  top:0 !important;
  display:block !important;
  width:24px !important;
  height:24px !important;
  margin:0 !important;
  padding:0 !important;
  fill:#fff !important;
  color:#fff !important;
  stroke:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.20)) !important;
}

/* PAUSE state: plain independent rectangles, so themes cannot distort SVG rects. */
html body .iufp-player button.iufp-play .iufp-pause-bars{
  position:absolute !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:24px !important;
  height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  transform:none !important;
}
html body .iufp-player button.iufp-play .iufp-pause-bars > span{
  display:block !important;
  flex:0 0 5px !important;
  width:5px !important;
  height:17px !important;
  min-width:5px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:1.5px !important;
  background:#fff !important;
  box-shadow:0 0 3px rgba(255,255,255,.18) !important;
  transform:none !important;
  opacity:1 !important;
}

html body .iufp-player.is-playing button.iufp-play .iufp-svg-play{
  display:none !important;
}
html body .iufp-player.is-playing button.iufp-play .iufp-pause-bars{
  display:flex !important;
}

/* V1.00 smooth circular play button.
   Remove the separate top glass strip completely. The gloss is already baked
   into the circular radial background, so there is no hard internal edge or
   "missing chunk" appearance near the top of the button. */
html body .iufp-player button.iufp-play::before,
html body .iufp-player button.iufp-play:hover::before,
html body .iufp-player button.iufp-play:active::before,
html body .iufp-player button.iufp-play:focus::before,
html body .iufp-player button.iufp-play:focus-visible::before,
html body .iufp-player.is-playing button.iufp-play::before{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  opacity:0 !important;
}

/* Keep the actual face smoothly circular, with only a soft radial highlight. */
html body .iufp-player button.iufp-play,
html body .iufp-player button.iufp-play:hover,
html body .iufp-player button.iufp-play:active,
html body .iufp-player button.iufp-play:focus,
html body .iufp-player button.iufp-play:focus-visible,
html body .iufp-player.is-playing button.iufp-play{
  background-image:
    radial-gradient(circle at 38% 28%,rgba(255,255,255,.13) 0%,rgba(255,255,255,.055) 16%,rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 48%,#252d37 0%,#151b22 39%,#080c11 68%,#020406 100%) !important;
  background-color:#05080d !important;
  background-clip:padding-box !important;
}

/* V1.00 smooth hover ring fix.
   Do not scale/translate/filter the circular button on hover. Fractional
   transforms can rasterise the 1px circular edge unevenly and create the
   two "cracked" spots seen on some browsers/themes. */
html body .iufp-player button.iufp-play,
html body .iufp-player button.iufp-play:hover,
html body .iufp-player button.iufp-play:active,
html body .iufp-player button.iufp-play:focus,
html body .iufp-player button.iufp-play:focus-visible,
html body .iufp-player.is-playing button.iufp-play,
html body .iufp-player.is-playing button.iufp-play:hover{
  transform:none !important;
  filter:none !important;
  border:1px solid rgba(96,143,170,.42) !important;
  border-radius:50% !important;
  outline:0 !important;
  outline-offset:0 !important;
  box-shadow:
    0 0 10px rgba(0,216,255,.08),
    0 0 8px rgba(255,27,155,.035),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -12px 18px rgba(0,0,0,.62) !important;
}

/* Hover feedback comes from a tiny face brightness change only, so the circle
   remains on exactly the same pixels and the outer ring stays continuous. */
html body .iufp-player button.iufp-play:hover,
html body .iufp-player.is-playing button.iufp-play:hover{
  background-image:
    radial-gradient(circle at 38% 28%,rgba(255,255,255,.155) 0%,rgba(255,255,255,.065) 16%,rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 48%,#29323c 0%,#171e26 39%,#090e13 68%,#020406 100%) !important;
  border-color:rgba(110,166,195,.52) !important;
  box-shadow:
    0 0 12px rgba(0,216,255,.11),
    0 0 9px rgba(255,27,155,.045),
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -12px 18px rgba(0,0,0,.60) !important;
}

/* Keep keyboard focus smooth as well: no dotted/native ring. */
html body .iufp-player button.iufp-play:focus-visible{
  border-color:rgba(0,216,255,.62) !important;
  box-shadow:
    0 0 0 2px rgba(0,216,255,.16),
    0 0 13px rgba(0,216,255,.11),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -12px 18px rgba(0,0,0,.62) !important;
}

/* V1.00 matching mute button.
   Use the same cleaner, less-glossy face as the play button so both controls
   look like one matched set. */
html body .iufp-player button.iufp-mute,
html body .iufp-player button.iufp-mute:hover,
html body .iufp-player button.iufp-mute:active,
html body .iufp-player button.iufp-mute:focus,
html body .iufp-player button.iufp-mute:focus-visible{
  -webkit-appearance:none !important;
  appearance:none !important;
  outline:0 !important;
  outline-width:0 !important;
  outline-style:none !important;
  outline-offset:0 !important;
  border:1px solid rgba(96,143,170,.42) !important;
  border-radius:50% !important;
  background-image:
    radial-gradient(circle at 38% 28%,rgba(255,255,255,.13) 0%,rgba(255,255,255,.055) 16%,rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 48%,#252d37 0%,#151b22 39%,#080c11 68%,#020406 100%) !important;
  background-color:#05080d !important;
  background-clip:padding-box !important;
  box-shadow:
    0 0 10px rgba(0,216,255,.08),
    0 0 8px rgba(255,27,155,.035),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 15px rgba(0,0,0,.58) !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* Remove the older separate glossy cap from the mute button. */
html body .iufp-player button.iufp-mute::before,
html body .iufp-player button.iufp-mute:hover::before,
html body .iufp-player button.iufp-mute:active::before,
html body .iufp-player button.iufp-mute:focus::before,
html body .iufp-player button.iufp-mute:focus-visible::before{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  opacity:0 !important;
}
html body .iufp-player button.iufp-mute::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Matching restrained hover feedback: brighten the face, do not scale it. */
html body .iufp-player button.iufp-mute:hover{
  background-image:
    radial-gradient(circle at 38% 28%,rgba(255,255,255,.155) 0%,rgba(255,255,255,.065) 16%,rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 48%,#29323c 0%,#171e26 39%,#090e13 68%,#020406 100%) !important;
  border-color:rgba(110,166,195,.52) !important;
  box-shadow:
    0 0 12px rgba(0,216,255,.11),
    0 0 9px rgba(255,27,155,.045),
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -10px 15px rgba(0,0,0,.56) !important;
}

/* Smooth keyboard focus, matching the play button. */
html body .iufp-player button.iufp-mute:focus-visible{
  border-color:rgba(0,216,255,.62) !important;
  box-shadow:
    0 0 0 2px rgba(0,216,255,.16),
    0 0 13px rgba(0,216,255,.11),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -10px 15px rgba(0,0,0,.58) !important;
}

/* V1.00 one-way fade-loop marquee: never bounce text back to the right. */
.iufp-marquee-text{
  opacity:1;
}


/* ============================================================
   V1.00 THEME-PROOF PLAYER CONTROLS
   The real <button> is deliberately visually neutral. Everything
   the listener sees is painted by the inner .iufp-control-face,
   preventing WordPress themes from changing gloss/borders/shadows.
   ============================================================ */

/* Neutral outer click targets — keep size/layout, remove visual skin. */
html body .iufp-player button.iufp-play,
html body .iufp-player button.iufp-play:hover,
html body .iufp-player button.iufp-play:active,
html body .iufp-player button.iufp-play:focus,
html body .iufp-player button.iufp-play:focus-visible,
html body .iufp-player button.iufp-mute,
html body .iufp-player button.iufp-mute:hover,
html body .iufp-player button.iufp-mute:active,
html body .iufp-player button.iufp-mute:focus,
html body .iufp-player button.iufp-mute:focus-visible{
  -webkit-appearance:none !important;
  appearance:none !important;
  position:relative !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
  overflow:visible !important;
  color:#fff !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  isolation:isolate !important;
}

/* Kill theme pseudo-elements on the real buttons. */
html body .iufp-player button.iufp-play::before,
html body .iufp-player button.iufp-play::after,
html body .iufp-player button.iufp-mute::before,
html body .iufp-player button.iufp-mute::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  border:0 !important;
  outline:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
}

/* Player-owned visual surface shared by Play and Mute. */
html body .iufp-player button.iufp-play > .iufp-control-face,
html body .iufp-player button.iufp-mute > .iufp-control-face{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(96,143,170,.42) !important;
  border-radius:inherit !important;
  outline:0 !important;
  background-image:
    radial-gradient(circle at 38% 28%,rgba(255,255,255,.13) 0%,rgba(255,255,255,.055) 16%,rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 48%,#252d37 0%,#151b22 39%,#080c11 68%,#020406 100%) !important;
  background-color:#05080d !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-clip:padding-box !important;
  box-shadow:
    0 0 10px rgba(0,216,255,.08),
    0 0 8px rgba(255,27,155,.035),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 15px rgba(0,0,0,.58) !important;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  transition:background-image .14s ease,border-color .14s ease,box-shadow .14s ease !important;
}

/* Matching, restrained hover: no movement/scaling, only a subtle face lift. */
html body .iufp-player button.iufp-play:hover > .iufp-control-face,
html body .iufp-player button.iufp-mute:hover > .iufp-control-face{
  background-image:
    radial-gradient(circle at 38% 28%,rgba(255,255,255,.155) 0%,rgba(255,255,255,.065) 16%,rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 48%,#29323c 0%,#171e26 39%,#090e13 68%,#020406 100%) !important;
  border-color:rgba(110,166,195,.52) !important;
  box-shadow:
    0 0 12px rgba(0,216,255,.11),
    0 0 9px rgba(255,27,155,.045),
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -10px 15px rgba(0,0,0,.56) !important;
}

/* Keyboard focus lives on the internal face, not a theme/native button ring. */
html body .iufp-player button.iufp-play:focus-visible > .iufp-control-face,
html body .iufp-player button.iufp-mute:focus-visible > .iufp-control-face{
  border-color:rgba(0,216,255,.62) !important;
  box-shadow:
    0 0 0 2px rgba(0,216,255,.16),
    0 0 13px rgba(0,216,255,.11),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -10px 15px rgba(0,0,0,.58) !important;
}

/* Keep the face perfectly circular whenever the control is circular. */
html body .iufp-player button.iufp-play:not(.iufp-pill) > .iufp-control-face,
html body .iufp-player button.iufp-mute > .iufp-control-face{
  border-radius:50% !important;
}
html body .iufp-player.iufp-button-pill button.iufp-play > .iufp-control-face{
  border-radius:999px !important;
}

/* Play/pause symbol is also fully owned by the inner face. */
html body .iufp-player button.iufp-play > .iufp-control-face .iufp-play-icon{
  position:absolute !important;
  z-index:2 !important;
  left:50% !important;
  top:50% !important;
  width:24px !important;
  height:24px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  transform:translate(-50%,-50%) !important;
  overflow:visible !important;
  pointer-events:none !important;
}
html body .iufp-player button.iufp-play > .iufp-control-face .iufp-play-icon::before,
html body .iufp-player button.iufp-play > .iufp-control-face .iufp-play-icon::after{
  content:none !important;
  display:none !important;
}
html body .iufp-player button.iufp-play > .iufp-control-face .iufp-svg-play{
  position:absolute !important;
  left:1px !important;
  top:0 !important;
  display:block !important;
  width:24px !important;
  height:24px !important;
  fill:#fff !important;
  stroke:none !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.20)) !important;
  transform:none !important;
}
html body .iufp-player button.iufp-play > .iufp-control-face .iufp-pause-bars{
  position:absolute !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:24px !important;
  height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  transform:none !important;
}
html body .iufp-player button.iufp-play > .iufp-control-face .iufp-pause-bars > span{
  display:block !important;
  flex:0 0 5px !important;
  width:5px !important;
  height:17px !important;
  min-width:5px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:1.5px !important;
  background:#fff !important;
  box-shadow:0 0 3px rgba(255,255,255,.18) !important;
  transform:none !important;
  opacity:1 !important;
}
html body .iufp-player.is-playing button.iufp-play > .iufp-control-face .iufp-svg-play{
  display:none !important;
}
html body .iufp-player.is-playing button.iufp-play > .iufp-control-face .iufp-pause-bars{
  display:flex !important;
}

/* Mute/speaker symbol sits inside the same player-owned face. */
html body .iufp-player button.iufp-mute > .iufp-control-face .iufp-speaker-icon{
  position:absolute !important;
  z-index:2 !important;
  left:50% !important;
  top:50% !important;
  width:20px !important;
  height:16px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  clip-path:none !important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.20)) !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
}
html body .iufp-player button.iufp-mute > .iufp-control-face .iufp-speaker-icon::before{
  content:"" !important;
  position:absolute !important;
  left:1px !important;
  top:2px !important;
  width:9px !important;
  height:12px !important;
  border:0 !important;
  background:#fff !important;
  clip-path:polygon(0 31%,40% 31%,100% 0,100% 100%,40% 69%,0 69%) !important;
  box-shadow:none !important;
}
html body .iufp-player button.iufp-mute > .iufp-control-face .iufp-speaker-icon::after{
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  top:2px !important;
  width:7px !important;
  height:12px !important;
  border:0 !important;
  border-right:2px solid #fff !important;
  border-radius:0 12px 12px 0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
html body .iufp-player button.iufp-mute.is-muted > .iufp-control-face .iufp-speaker-icon::after{
  left:1px !important;
  top:7px !important;
  width:19px !important;
  height:2px !important;
  border:0 !important;
  border-radius:2px !important;
  background:#ff4a99 !important;
  transform:rotate(-43deg) !important;
  transform-origin:center !important;
  box-shadow:0 0 4px rgba(255,74,153,.52) !important;
}