.player-mobile-sound-card{
    position:relative;
    top:auto;
    z-index:10;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.85rem 1rem;
    align-items:center;
    background:rgba(17,24,39,.97);
}
.player-mobile-sound-card.is-enabled{background:#0b6b45}
.player-mobile-sound-card.is-off{background:rgba(17,24,39,.97)}
.player-narration-copy{min-width:0}
.player-narration-mode-list{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.45rem;
    padding:.35rem;
    border-radius:13px;
    background:rgba(0,0,0,.18);
}
.player-narration-mode{
    min-height:42px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    padding:.55rem .7rem;
    background:rgba(255,255,255,.08);
    color:#fff;
    font:inherit;
    font-size:.88rem;
    font-weight:800;
    cursor:pointer;
}
.player-narration-mode:hover,
.player-narration-mode:focus-visible{background:rgba(255,255,255,.16);outline:none}
.player-narration-mode.is-selected{
    border-color:#fff;
    background:#fff;
    color:#12372b;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.player-narration-play{min-width:190px}
.player-narration-play:disabled{opacity:.48;cursor:not-allowed}
.player-mobile-sound-card[data-current-mode="on_demand"] .remote-connection-pill i{background:#ffd43b}
.player-mobile-sound-card[data-current-mode="off"] .remote-connection-pill i{background:#adb5bd}
@media(max-width:640px){
    .player-mobile-sound-card{grid-template-columns:1fr}
    .player-narration-mode-list{grid-column:1}
    .player-narration-play{width:100%;min-width:0}
}
@media(max-width:390px){
    .player-narration-mode{padding:.5rem .3rem;font-size:.78rem}
}