/* MusicInsight Shelter 1.2.0 — focused compatibility fixes */

/* Accent must exist outside the hero stage too. */
.mi-shelter{--mi-accent:#c59a65!important}

/* Our play buttons use an SVG. Play Block also draws a pseudo icon on .btn-play. */
.mi-shelter .mi-shelter-primary::before,
.mi-shelter .mi-shelter-primary::after,
.mi-shelter .mi-shelter-play-all::before,
.mi-shelter .mi-shelter-play-all::after,
.mi-shelter .mi-shelter-track-play::before,
.mi-shelter .mi-shelter-track-play::after{content:none!important;display:none!important;border:0!important}
.mi-shelter .mi-shelter-primary svg,
.mi-shelter .mi-shelter-play-all svg,
.mi-shelter .mi-shelter-track-play svg{display:block!important;fill:currentColor!important;transform:none!important}
.mi-shelter .mi-shelter-track-play{display:grid!important;place-items:center!important;line-height:1!important}
.mi-shelter .mi-shelter-track-play svg{width:18px!important;height:18px!important;margin:0!important}

/* CTA and access card: never inherit a dark link color from the theme. */
.mi-shelter .mi-shelter-access-card{color:#f2e8dc!important}
.mi-shelter .mi-shelter-access-card strong{color:#f6eadc!important;opacity:1!important}
.mi-shelter .mi-shelter-access-card p{color:#c6b9aa!important;opacity:1!important}
.mi-shelter .mi-shelter-access-card>a,
.mi-shelter .mi-shelter-gate-card>a{
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:var(--mi-accent,#c59a65)!important;color:#1b1510!important;
  opacity:1!important;visibility:visible!important;text-shadow:none!important;
  border:0!important;text-decoration:none!important;font-weight:800!important;
}
.mi-shelter .mi-shelter-access-card>a{min-width:230px!important}

/* Gate/modal is explicitly styled and its two actions stack instead of colliding. */
.mi-shelter .mi-shelter-gate-card{color:#f3e9dc!important;text-align:right!important;overflow:visible!important}
.mi-shelter .mi-shelter-gate-card>small{color:var(--mi-accent,#c59a65)!important;opacity:1!important}
.mi-shelter .mi-shelter-gate-card h2{color:#f7ecdf!important;opacity:1!important;text-shadow:none!important}
.mi-shelter .mi-shelter-gate-card p{color:#c9bcad!important;opacity:1!important}
.mi-shelter .mi-shelter-gate-card>a,
.mi-shelter .mi-shelter-gate-card>[data-gate-close]{width:100%!important;margin:0!important}
.mi-shelter .mi-shelter-gate-card>[data-gate-close]{
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin-top:12px!important;color:#eee2d4!important;background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.14)!important;opacity:1!important;font-weight:700!important;
}

/* Play Block player palette — independent of theme-side CSS variables. */
body.mi-shelter-view #plyr-playlist,
body.mi-shelter-view #plyr-playlist .plyr,
body.mi-shelter-view #plyr-playlist .plyr__controls{
  --text-color:#f2e8dc!important;
  --text-secondary-color:#aa9e91!important;
  --background-color:#1c1916!important;
  --border-color:rgba(255,255,255,.11)!important;
  --plyr-color-main:var(--mi-accent,#c59a65)!important;
  --plyr-menu-background:#24201c!important;
  --plyr-menu-color:#f2e8dc!important;
  color:#f2e8dc!important;
  background-color:#1c1916!important;
}
body.mi-shelter-view #plyr-playlist{
  z-index:2147483000!important;overflow:visible!important;
  border-top:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 -16px 50px rgba(0,0,0,.36)!important;
}
body.mi-shelter-view #plyr-playlist *,
body.mi-shelter-view #plyr-playlist *::before,
body.mi-shelter-view #plyr-playlist *::after{box-sizing:border-box}
body.mi-shelter-view #plyr-playlist .plyr,
body.mi-shelter-view #plyr-playlist .plyr__controls,
body.mi-shelter-view #plyr-playlist .plyr__row,
body.mi-shelter-view #plyr-playlist .plyr__col,
body.mi-shelter-view #plyr-playlist .plyr__volume,
body.mi-shelter-view #plyr-playlist .plyr__menu,
body.mi-shelter-view #plyr-playlist .plyr-list-wrap{overflow:visible!important}
body.mi-shelter-view #plyr-playlist .plyr__controls{position:relative!important;z-index:20!important;color:#eee3d6!important}
body.mi-shelter-view #plyr-playlist .plyr__info{position:relative!important;z-index:2!important;min-width:0!important}
body.mi-shelter-view #plyr-playlist .plyr__title,
body.mi-shelter-view #plyr-playlist .plyr__title:visited,
body.mi-shelter-view #plyr-playlist .plyr-item-title,
body.mi-shelter-view #plyr-playlist .plyr-item-title:visited{color:#f3e8db!important;opacity:1!important;text-shadow:none!important}
body.mi-shelter-view #plyr-playlist .plyr__author,
body.mi-shelter-view #plyr-playlist .plyr__author a,
body.mi-shelter-view #plyr-playlist .plyr-item-author,
body.mi-shelter-view #plyr-playlist .plyr__time,
body.mi-shelter-view #plyr-playlist .plyr__queue{color:#a99c8e!important;opacity:1!important}
body.mi-shelter-view #plyr-playlist .plyr__control,
body.mi-shelter-view #plyr-playlist .plyr__control svg{color:#e7dccf!important;fill:currentColor!important;opacity:1!important}
body.mi-shelter-view #plyr-playlist .plyr__control:hover,
body.mi-shelter-view #plyr-playlist .plyr__control[aria-expanded=true],
body.mi-shelter-view #plyr-playlist .plyr__control.plyr__tab-focus{color:var(--mi-accent,#c59a65)!important;background:rgba(197,154,101,.11)!important}
body.mi-shelter-view #plyr-playlist input[type=range]{accent-color:var(--mi-accent,#c59a65)!important}

/* Settings menu must sit above both rows of the player. */
body.mi-shelter-view #plyr-playlist .plyr__menu{position:relative!important;z-index:2147483300!important}
body.mi-shelter-view #plyr-playlist .plyr__menu__container{
  z-index:2147483500!important;bottom:calc(100% + 12px)!important;
  background:#24201c!important;color:#f2e8dc!important;
  border:1px solid rgba(197,154,101,.22)!important;border-radius:14px!important;
  box-shadow:0 18px 46px rgba(0,0,0,.42)!important;overflow:visible!important;
}
body.mi-shelter-view #plyr-playlist .plyr__menu__container>div{max-height:min(55vh,440px)!important;overflow:auto!important}
body.mi-shelter-view #plyr-playlist .plyr__menu__container .plyr__control,
body.mi-shelter-view #plyr-playlist .plyr__menu__container [role=menuitem],
body.mi-shelter-view #plyr-playlist .plyr__menu__container [role=menuitemradio]{color:#f2e8dc!important;background:transparent!important}
body.mi-shelter-view #plyr-playlist .plyr__menu__container .plyr__control:hover{background:rgba(197,154,101,.12)!important}

/* Replace the old rotated/clipped volume slider with a compact horizontal popover. */
body.mi-shelter-view #plyr-playlist .plyr__volume{position:relative!important;z-index:2147483400!important}
body.mi-shelter-view #plyr-playlist .plyr__volume input[type=range]{
  display:none!important;position:absolute!important;z-index:2147483550!important;
  transform:none!important;transform-origin:center!important;
  right:50%!important;left:auto!important;bottom:calc(100% + 13px)!important;
  width:150px!important;height:46px!important;margin:0!important;padding:0 14px!important;
  border:1px solid rgba(197,154,101,.24)!important;border-radius:14px!important;
  background:#24201c!important;box-shadow:0 18px 46px rgba(0,0,0,.42)!important;
}
body.mi-shelter-view #plyr-playlist .plyr__volume:hover input[type=range],
body.mi-shelter-view #plyr-playlist .plyr__volume:focus-within input[type=range],
body.mi-shelter-view #plyr-playlist .plyr__volume.mi-volume-open input[type=range]{display:block!important}

/* Queue/list becomes a viewport-level panel above the complete player. */
body.mi-shelter-view #plyr-playlist .plyr-list-wrap{position:static!important;z-index:2147483450!important}
body.mi-shelter-view #plyr-playlist .plyr-list{
  position:fixed!important;z-index:2147483500!important;
  left:50%!important;right:auto!important;
  bottom:calc(var(--mi-shelter-player-height,92px) + 18px)!important;
  width:min(560px,calc(100vw - 28px))!important;
  height:min(610px,calc(100vh - var(--mi-shelter-player-height,92px) - 48px))!important;
  max-height:none!important;margin:0!important;
  transform:translate(-50%,18px)!important;
  background:#1d1916!important;color:#f2e8dc!important;
  border:1px solid rgba(197,154,101,.22)!important;border-radius:20px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.48)!important;
  opacity:0!important;pointer-events:none!important;overflow:hidden!important;
}
body.mi-shelter-view #plyr-playlist.open .plyr-list{
  transform:translate(-50%,0)!important;opacity:1!important;pointer-events:auto!important;
}
body.mi-shelter-view #plyr-playlist .plyr-list-header{background:#24201c!important;border-bottom:1px solid rgba(255,255,255,.08)!important;color:#f2e8dc!important}
body.mi-shelter-view #plyr-playlist .plyr-list-content{overflow:auto!important;min-height:0!important;background:#1d1916!important}
body.mi-shelter-view #plyr-playlist .plyr-item{color:#f2e8dc!important;border-color:rgba(255,255,255,.075)!important;background:rgba(255,255,255,.025)!important}
body.mi-shelter-view #plyr-playlist .plyr-item:hover{background:rgba(197,154,101,.08)!important}

@media(max-width:960px){
  body.mi-shelter-view #plyr-playlist .plyr__volume{display:none!important}
  body.mi-shelter-view #plyr-playlist .plyr-list{
    bottom:calc(var(--mi-shelter-player-height,118px) + 10px)!important;
    width:calc(100vw - 16px)!important;
    height:min(64vh,560px)!important;border-radius:18px!important;
  }
}
@media(max-width:700px){
  .mi-shelter .mi-shelter-access-card>a{min-width:0!important;width:100%!important}
  .mi-shelter .mi-shelter-gate-card{padding:26px 18px 18px!important}
  .mi-shelter .mi-shelter-gate-card h2{font-size:30px!important;line-height:1.45!important}
}


/* 1.3.4 — visual refinements only; Play Block JS remains untouched. */
.mi-shelter-room-zone-head{display:none}

/* Track copy: title and artist share one right-aligned text column. */
.mi-shelter .mi-shelter-track-copy{
  direction:rtl!important;text-align:right!important;justify-self:stretch!important;
  min-width:0!important;width:100%!important;overflow:hidden!important;
}
.mi-shelter .mi-shelter-track-copy>div{
  direction:rtl!important;text-align:right!important;display:flex!important;
  flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;
  min-width:0!important;width:100%!important;max-width:100%!important;overflow:hidden!important;
}
.mi-shelter .mi-shelter-track-copy a{
  display:block!important;flex:0 1 auto!important;min-width:0!important;max-width:100%!important;
  margin:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  text-align:right!important;direction:rtl!important;unicode-bidi:plaintext!important;
}
.mi-shelter .mi-shelter-track-copy em{
  flex:0 0 auto!important;margin:0 0 0 9px!important;direction:rtl!important;
}
.mi-shelter .mi-shelter-track-copy>span{
  display:block!important;width:100%!important;margin-top:5px!important;
  text-align:right!important;direction:rtl!important;unicode-bidi:plaintext!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}

/* Fixed-bottom Play Block player: keep mixed/long metadata in one bounded column. */
body.mi-shelter-view #plyr-playlist .plyr__col,
body.mi-shelter-view #plyr-playlist .plyr__row,
body.mi-shelter-view #plyr-playlist .plyr__info{
  min-width:0!important;max-width:100%!important;
}
body.mi-shelter-view #plyr-playlist .plyr__row{
  display:flex!important;align-items:center!important;width:100%!important;overflow:hidden!important;
}
body.mi-shelter-view #plyr-playlist .plyr__info{
  display:block!important;flex:1 1 0!important;width:0!important;overflow:hidden!important;
  padding-inline:10px!important;direction:ltr!important;text-align:left!important;
}
body.mi-shelter-view #plyr-playlist .plyr__title,
body.mi-shelter-view #plyr-playlist .plyr__author{
  display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
  margin:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  -webkit-line-clamp:1!important;word-break:normal!important;overflow-wrap:normal!important;
  direction:ltr!important;text-align:left!important;unicode-bidi:plaintext!important;
}
body.mi-shelter-view #plyr-playlist .plyr__author,
body.mi-shelter-view #plyr-playlist .plyr__author *{
  display:inline!important;max-width:100%!important;white-space:nowrap!important;
}
body.mi-shelter-view #plyr-playlist .plyr__timer,
body.mi-shelter-view #plyr-playlist .plyr__time{
  flex:0 0 auto!important;white-space:nowrap!important;
}

@media(max-width:900px){
  /* An intentional mobile room selector instead of a clipped horizontal strip. */
  .mi-shelter-room-zone{
    display:block!important;width:100%!important;margin:24px 0 0!important;padding:16px!important;
    border:1px solid rgba(255,255,255,.11)!important;border-radius:22px!important;
    background:linear-gradient(180deg,rgba(24,20,17,.42),rgba(24,20,17,.72))!important;
    box-shadow:0 20px 46px rgba(0,0,0,.16)!important;overflow:visible!important;
  }
  .mi-shelter-room-zone-head{
    display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
    gap:12px!important;margin:0 2px 13px!important;text-align:right!important;
  }
  .mi-shelter-room-zone-head span{
    color:var(--mi-accent,#c59a65)!important;font-size:11px!important;white-space:nowrap!important;
  }
  .mi-shelter-room-zone-head strong{
    color:#f2e7da!important;font-size:15px!important;font-weight:750!important;line-height:1.5!important;
  }
  .mi-shelter-room-strip{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;gap:10px!important;
    overflow:visible!important;scroll-snap-type:none!important;direction:rtl!important;
  }
  .mi-shelter-room-card{
    width:100%!important;min-width:0!important;max-width:none!important;flex:none!important;height:104px!important;
    margin:0!important;border-radius:16px!important;scroll-snap-align:none!important;overflow:hidden!important;
  }
  .mi-shelter-room-card-image{transform:scale(1.01)!important}
  .mi-shelter-room-card-shade{
    background:linear-gradient(0deg,rgba(13,11,10,.94),rgba(13,11,10,.14) 85%)!important;
  }
  .mi-shelter-room-card-copy{inset:auto 12px 11px!important;text-align:right!important}
  .mi-shelter-room-card-copy strong{font-size:14px!important;line-height:1.5!important}
  .mi-shelter-room-card-copy small{font-size:9px!important;line-height:1.5!important}
  .mi-shelter-room-card.is-active{
    border-color:var(--room-accent)!important;box-shadow:0 0 0 1px var(--room-accent),0 12px 28px rgba(0,0,0,.24)!important;
  }
}

@media(max-width:420px){
  .mi-shelter-room-zone{padding:13px!important;border-radius:19px!important}
  .mi-shelter-room-strip{gap:8px!important}
  .mi-shelter-room-card{height:94px!important}
  .mi-shelter-room-zone-head{align-items:flex-start!important;flex-direction:column!important;gap:2px!important}
  body.mi-shelter-view #plyr-playlist .plyr__info{padding-inline:7px!important}
  body.mi-shelter-view #plyr-playlist .plyr__title{font-size:12px!important}
  body.mi-shelter-view #plyr-playlist .plyr__author{font-size:10px!important}
}


/* 1.3.9 — artwork-aware fixed player and current queue item */
body.mi-shelter-view{
  --mi-player-rgb:197,154,101;
  --mi-player-accent:rgb(var(--mi-player-rgb));
}
body.mi-shelter-view #plyr-playlist{
  border-color:rgba(var(--mi-player-rgb),.34)!important;
  background:
    radial-gradient(circle at 22% -85%,rgba(var(--mi-player-rgb),.27),transparent 45%),
    radial-gradient(circle at 86% 160%,rgba(var(--mi-player-rgb),.11),transparent 45%),
    linear-gradient(110deg,rgba(34,29,25,.98),rgba(25,22,19,.98))!important;
  box-shadow:0 -16px 50px rgba(0,0,0,.36),0 0 34px rgba(var(--mi-player-rgb),.08)!important;
  transition:border-color .5s ease,box-shadow .5s ease,background .5s ease!important;
}
body.mi-shelter-view #plyr-playlist .plyr,
body.mi-shelter-view #plyr-playlist .plyr__controls{background:transparent!important}
body.mi-shelter-view #plyr-playlist .plyr__control:hover,
body.mi-shelter-view #plyr-playlist .plyr__control[aria-expanded=true],
body.mi-shelter-view #plyr-playlist .plyr__control.plyr__tab-focus{
  color:var(--mi-player-accent)!important;background:rgba(var(--mi-player-rgb),.12)!important;
}
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"],
body.mi-shelter-view #plyr-playlist .plyr__control--overlaid{
  border:1px solid rgba(var(--mi-player-rgb),.44)!important;
  background:rgba(var(--mi-player-rgb),.18)!important;color:#fff2e4!important;
  box-shadow:0 8px 24px rgba(var(--mi-player-rgb),.11)!important;
}
body.mi-shelter-view #plyr-playlist input[type=range]{accent-color:var(--mi-player-accent)!important}
body.mi-shelter-view #plyr-playlist .plyr__progress input[type=range]{color:var(--mi-player-accent)!important}
body.mi-shelter-view #plyr-playlist .plyr-item.is-current,
body.mi-shelter-view #plyr-playlist .plyr-item.active{
  border-color:rgba(var(--mi-player-rgb),.38)!important;
  background:linear-gradient(90deg,rgba(var(--mi-player-rgb),.16),rgba(255,255,255,.025))!important;
}
body.mi-shelter-view #plyr-playlist .plyr-item.is-current .plyr-item-title,
body.mi-shelter-view #plyr-playlist .plyr-item.active .plyr-item-title{color:#fff1e3!important}
@media(prefers-reduced-motion:reduce){
  body.mi-shelter-view #plyr-playlist{transition:none!important}
}


/* 1.3.10 — fixed Play Block controls placement */
@media(min-width:961px){
  body.mi-shelter-view #plyr-playlist .plyr-list{
    left:auto!important;right:clamp(18px,3vw,52px)!important;
    width:min(520px,calc(100vw - 36px))!important;
    height:min(560px,calc(100vh - var(--mi-shelter-player-height,92px) - 52px))!important;
    transform:translateY(18px)!important;transform-origin:bottom right!important;
  }
  body.mi-shelter-view #plyr-playlist.open .plyr-list{transform:translateY(0)!important}
}
@media(max-width:960px){
  body.mi-shelter-view #plyr-playlist,
  body.mi-shelter-view .fixed-bottom.plyr-playlist{
    left:8px!important;right:8px!important;width:auto!important;max-width:calc(100vw - 16px)!important;margin:0!important;
  }
  body.mi-shelter-view #plyr-playlist .plyr,
  body.mi-shelter-view #plyr-playlist .plyr__controls,
  body.mi-shelter-view #plyr-playlist .plyr__row,
  body.mi-shelter-view #plyr-playlist .plyr__col{width:100%!important;max-width:100%!important;min-width:0!important}
  body.mi-shelter-view #plyr-playlist .plyr__controls{padding-inline:9px!important;overflow:hidden!important}
  body.mi-shelter-view #plyr-playlist .plyr__progress__container,
  body.mi-shelter-view #plyr-playlist .plyr__progress{flex:1 1 auto!important;width:auto!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important}
  body.mi-shelter-view #plyr-playlist .plyr__progress input[type=range]{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}
}


/* 1.3.11 — restore the floating volume popover and align it slightly farther right. */
@media(min-width:961px){
  body.mi-shelter-view #plyr-playlist .plyr__volume:before{
    right:-18px!important;transform:none!important;width:176px!important;
  }
  body.mi-shelter-view #plyr-playlist .plyr__volume input[type=range]{
    right:-18px!important;left:auto!important;transform:none!important;
  }
}


/* 1.3.19 — clear active feedback for Play Block toggles. */
body.mi-shelter-view #plyr-playlist [data-plyr="shuffle"].is--shuffle,
body.mi-shelter-view #plyr-playlist [data-plyr="repeat"].is--repeat,
body.mi-shelter-view #plyr-playlist [data-plyr="like"].active,
body.mi-shelter-view .plyr-playlist [data-plyr="shuffle"].is--shuffle,
body.mi-shelter-view .plyr-playlist [data-plyr="repeat"].is--repeat,
body.mi-shelter-view .plyr-playlist [data-plyr="like"].active{
  color:var(--mi-player-accent,#c59a65)!important;
  background:rgba(var(--mi-player-rgb,197,154,101),.17)!important;
  border-color:rgba(var(--mi-player-rgb,197,154,101),.42)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--mi-player-rgb,197,154,101),.18),0 0 18px rgba(var(--mi-player-rgb,197,154,101),.10)!important;
}
body.mi-shelter-view #plyr-playlist [data-plyr="like"].active svg,
body.mi-shelter-view .plyr-playlist [data-plyr="like"].active svg{
  fill:currentColor!important;
  stroke:currentColor!important;
}
body.mi-shelter-view #plyr-playlist [data-plyr="shuffle"],
body.mi-shelter-view #plyr-playlist [data-plyr="repeat"],
body.mi-shelter-view #plyr-playlist [data-plyr="like"]{
  transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.mi-shelter-art-player [data-art-repeat].is-active{
  color:var(--mi-accent,#c59a65)!important;
  background:rgba(var(--mi-art-rgb,197,154,101),.16)!important;
  border-color:rgba(var(--mi-art-rgb,197,154,101),.42)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--mi-art-rgb,197,154,101),.16),0 0 16px rgba(var(--mi-art-rgb,197,154,101),.08)!important;
}

/* 1.3.31 — keep the fixed Play Block player visible on every Shelter view. */
body.mi-shelter-route-locked #plyr-playlist,
body.mi-shelter-route-locked .fixed-bottom.plyr-playlist { display:none!important; }

/* ==========================================================
   1.3.44 — fixed-player play button only
   ========================================================== */
/* Keep the fixed Play Block transport button visually calm in every playback
   state. This intentionally does not target the large artistic player. */
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"],
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"].plyr__control--pressed,
body.mi-shelter-view #plyr-playlist .plyr--playing .plyr__control[data-plyr="play"],
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"]:hover,
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"]:focus,
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"]:focus-visible,
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"]:active{
  background:rgba(255,255,255,.045)!important;
  color:var(--mi-player-accent)!important;
  border-color:rgba(var(--mi-player-rgb),.54)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 8px 24px rgba(var(--mi-player-rgb),.10)!important;
}

/* Correct only the optical centre of Plyr's triangular play glyph. The button
   box, transport layout and the large-player icons remain untouched. */
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"] .icon--not-pressed{
  transform:translateX(1px)!important;
  transform-origin:center!important;
}
body.mi-shelter-view #plyr-playlist .plyr__control[data-plyr="play"] .icon--pressed{
  transform:none!important;
}

/* ==========================================================
   1.3.83.3 — responsive access gate and profile avatar upload
   ========================================================== */

/* The access dialog occupies only the visual viewport area above the fixed
   Play Block player. Values are measured by frontend.js whenever the dialog,
   viewport or player geometry changes. */
.mi-shelter-gate[data-shelter-gate]{
  inset:auto 0 auto 0!important;
  top:var(--mi-gate-viewport-top,0px)!important;
  height:var(--mi-gate-viewport-height,100dvh)!important;
  min-height:0!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  overscroll-behavior:contain!important;
  place-items:center!important;
  padding:
    max(8px,env(safe-area-inset-top))
    max(8px,env(safe-area-inset-right))
    calc(var(--mi-gate-player-clearance,0px) + max(10px,env(safe-area-inset-bottom)))
    max(8px,env(safe-area-inset-left))!important;
  scroll-padding-bottom:calc(var(--mi-gate-player-clearance,0px) + 12px)!important;
}
.mi-shelter-gate[data-shelter-gate] .mi-shelter-gate-card{
  width:min(560px,calc(100vw - 18px))!important;
  max-width:100%!important;
  max-height:var(--mi-gate-available-height,calc(100dvh - 24px))!important;
  margin:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable both-edges;
}
.mi-shelter-gate[data-shelter-gate] .mi-shelter-gate-card::-webkit-scrollbar{width:5px}
.mi-shelter-gate[data-shelter-gate] .mi-shelter-gate-card::-webkit-scrollbar-thumb{
  border-radius:999px;background:rgba(215,170,112,.35)
}

/* Compact spacing is based on the actual free height, not a device model or
   user-agent guess. It only changes presentation; content and gate actions
   remain untouched. */
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-card{
  padding:21px 16px 16px!important;
  border-radius:22px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-mascot{
  width:154px!important;
  height:132px!important;
  margin:-10px auto 8px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-mascot img{
  transform:translateY(-6px)!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-mascot-glow{
  transform:translateY(-6px) scale(1.04)!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-card>[data-gate-kicker]{
  margin-bottom:7px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-card>[data-gate-title]{
  margin-bottom:8px!important;
  line-height:1.42!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-card>[data-gate-message]{
  margin-bottom:13px!important;
  line-height:1.82!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-benefits{
  gap:6px!important;
  margin-bottom:14px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-benefits li{
  min-height:40px!important;
  padding:7px 9px!important;
  line-height:1.62!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-card>a[data-gate-upgrade]{
  min-height:48px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-compact .mi-shelter-gate-card>[data-gate-close]{
  min-height:44px!important;
  margin-top:9px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-tight .mi-shelter-gate-mascot{
  width:112px!important;
  height:92px!important;
  margin:-7px auto 2px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-tight .mi-shelter-gate-card{
  padding-top:15px!important;
  padding-bottom:13px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-tight .mi-shelter-gate-card>[data-gate-title]{
  line-height:1.32!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-tight .mi-shelter-gate-card>[data-gate-message]{
  margin-bottom:9px!important;
  line-height:1.68!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-tight .mi-shelter-gate-benefits{
  gap:4px!important;
  margin-bottom:10px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-tight .mi-shelter-gate-benefits li{
  min-height:34px!important;
  padding:4px 8px!important;
  line-height:1.5!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-tight .mi-shelter-gate-card>a[data-gate-upgrade]{
  min-height:44px!important;
}
.mi-shelter-gate[data-shelter-gate].is-gate-tight .mi-shelter-gate-card>[data-gate-close]{
  min-height:40px!important;
  margin-top:7px!important;
}

/* Logged-in users can update the same local avatar used by Play Block. */
.mi-shelter-avatar-picker{
  -webkit-appearance:none!important;
  appearance:none!important;
  padding:0!important;
  margin:0!important;
  font:inherit!important;
  cursor:pointer!important;
  outline:none!important;
  overflow:visible!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.mi-shelter-avatar-picker:hover,
.mi-shelter-avatar-picker:focus-visible{
  transform:translateY(-1px)!important;
  border-color:color-mix(in srgb,var(--mi-nav-accent,#c59a65) 58%,rgba(255,255,255,.22))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mi-nav-accent,#c59a65) 14%,transparent),inset 0 1px rgba(255,255,255,.08)!important;
}
.mi-shelter-avatar-edit{
  position:absolute!important;
  z-index:4!important;
  right:-3px!important;
  bottom:-3px!important;
  width:21px!important;
  height:21px!important;
  display:grid!important;
  place-items:center!important;
  border:2px solid #24201c!important;
  border-radius:50%!important;
  background:var(--mi-nav-accent,#c59a65)!important;
  color:#1d1510!important;
  box-shadow:0 5px 13px rgba(0,0,0,.3)!important;
  pointer-events:none!important;
}
.mi-shelter-avatar-edit svg{
  width:10px!important;
  height:10px!important;
  fill:currentColor!important;
}
.mi-shelter-account-head>div .mi-shelter-avatar-hint{
  display:block!important;
  margin-top:2px!important;
  color:rgba(239,224,208,.46)!important;
  font-size:8.5px!important;
  line-height:1.55!important;
}
.mi-shelter-avatar-input[hidden]{display:none!important}
.mi-shelter-avatar-status{
  margin:8px 1px 1px!important;
  padding:7px 9px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(244,231,217,.72)!important;
  font-size:9.5px!important;
  line-height:1.7!important;
  text-align:right!important;
}
.mi-shelter-avatar-status[hidden]{display:none!important}
.mi-shelter-avatar-status.is-success{
  border-color:rgba(83,190,105,.25)!important;
  background:rgba(83,190,105,.08)!important;
  color:#bfe7c7!important;
}
.mi-shelter-avatar-status.is-error{
  border-color:rgba(225,105,93,.28)!important;
  background:rgba(225,105,93,.08)!important;
  color:#f0b9b3!important;
}
.mi-shelter-account-popover.is-avatar-uploading .mi-shelter-avatar-edit svg{
  opacity:0!important;
}
.mi-shelter-account-popover.is-avatar-uploading .mi-shelter-avatar-edit:after{
  content:"";
  width:8px;height:8px;border:1.5px solid currentColor;border-left-color:transparent;border-radius:50%;
  animation:miShelterAvatarSpin .7s linear infinite;
}
@keyframes miShelterAvatarSpin{to{transform:rotate(360deg)}}

@media(max-width:480px){
  .mi-shelter-gate[data-shelter-gate]{
    padding-inline:7px!important;
  }
  .mi-shelter-gate[data-shelter-gate] .mi-shelter-gate-card{
    width:calc(100vw - 14px)!important;
    border-radius:20px!important;
  }
  .mi-shelter-account-head>div .mi-shelter-avatar-hint{font-size:8px!important}
}

@media(prefers-reduced-motion:reduce){
  .mi-shelter-avatar-picker{transition:none!important}
  .mi-shelter-account-popover.is-avatar-uploading .mi-shelter-avatar-edit:after{animation-duration:1.4s}
}
