/* Mobile browsing starts with the channel directory. Playback keeps its existing controls. */
@media (max-width:900px) and (orientation:portrait){
 body:not(.tv-mode):not(.player-expanded):not(.mobile-channel-selected) .player-panel{display:none}
 body:not(.tv-mode) .channel-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin:0;gap:18px 12px}
 body:not(.tv-mode) .channel-art{width:100%;max-width:none;height:0;padding-top:100%;margin:0;border-radius:14px}
 body:not(.tv-mode) .channel-art>.channel-logo{position:absolute;left:11%;top:11%;width:78%;height:78%;max-width:none;max-height:none;transform:none;object-fit:contain;object-position:center;filter:none;opacity:1}
 body:not(.tv-mode) .channel-art>.channel-status{display:none}
 body:not(.tv-mode) .channel-info{max-width:none;margin:0;padding:8px 0 0;min-height:42px;gap:3px;align-items:flex-start}
 body:not(.tv-mode) .channel-info>div{min-width:0;flex:1}
 body:not(.tv-mode) .channel-name{font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.8em;max-height:2.8em;overflow:hidden}
 body:not(.tv-mode) .favorite-button{width:22px;height:27px;padding:2px;margin-top:-3px}
 body:not(.tv-mode) .favorite-button svg{width:14px;height:14px}
 body:not(.tv-mode) .grid-viewport{padding:5px 3px max(18px,env(safe-area-inset-bottom))}
}
@media (max-width:350px) and (orientation:portrait){
 body:not(.tv-mode) .channel-grid{gap:16px 9px}
 body:not(.tv-mode) .channel-name{font-size:10px}
 body:not(.tv-mode) .favorite-button{width:20px}
}