/* Phone/tablet overrides. Every rule is gated by html.touch; Chrome 53 uses flex and plain viewport units. */
html.touch { -webkit-text-size-adjust: 100%; }
html.touch body { -webkit-tap-highlight-color: transparent; }
html.touch #app { height: 100%; }
@supports (height: 100dvh) { html.touch #app { height: 100dvh; bottom: auto; } }
/* Keep the configured TV layout, header positions and menu tile proportions.
   Narrow screens wrap only the left header group; guest details stay top-right. */
html.touch .topbar { flex-shrink: 0; }
html.touch .main { min-height: 0; -webkit-overflow-scrolling: touch; scroll-behavior: auto; }
@media (max-width: 760px) {
  html.touch .topbar { align-items: flex-start; }
  html.touch .topbar .left { flex: 1 1 58%; flex-wrap: wrap; }
  html.touch .topbar .right { flex: 0 1 38%; text-align: right; }
  html.touch .topbar .title, html.touch .topbar .sub { white-space: normal; overflow: visible; overflow-wrap: break-word; }
  html.touch .topbar .logo { max-width: 90px; object-fit: contain; }
  html.touch .topbar .wx { display: flex; }
}
html.touch .focusable:focus, html.touch .focusable:hover, html.touch .btn:hover { transform: none; }
html.touch .cards { -webkit-overflow-scrolling: touch; scroll-behavior: auto; }
html.touch .card { width: 42vw; flex-shrink: 0; }
html.touch .card.wide { width: 72vw; }
html.touch .btn { min-height: 44px; }
html.touch .input, html.touch input, html.touch select, html.touch textarea { font-size: 16px; max-width: 100%; }
html.touch .register { padding: 16px; overflow: auto; }
html.touch .register .box { width: 100%; max-width: 520px; }
html.touch .devid { flex-wrap: wrap; }
html.touch .devid input { width: 100%; flex-basis: 100%; }
html.touch .overlay { padding: 12px; }
html.touch .dialog { width: 100%; max-width: 680px; max-height: 92vh; }
html.touch .dialog header, html.touch .dialog .content, html.touch .dialog footer { padding-left: 14px; padding-right: 14px; }
html.touch .dialog footer { flex-wrap: wrap; }
html.touch .info-layout, html.touch .movie-layout, html.touch .chat-layout { display: flex; flex-direction: column; }
html.touch .info-layout > *, html.touch .movie-layout > *, html.touch .chat-layout > * { min-width: 0; max-width: 100%; margin-bottom: 12px; }
html.touch .webview-page iframe { pointer-events: auto; }
html.touch .player .mobile-close { position: absolute; top: 10px; left: 10px; z-index: 20; padding: 4px 14px; font-size: 22px; background: rgba(0,0,0,.7); }
html.touch .player .mobile-panel-back { position: absolute; top: 10px; right: 10px; z-index: 20; background: rgba(0,0,0,.7); }
html.touch .player .osd { font-size: 16px; padding: 12px; }
html.touch .player .osd-main { flex-direction: column; align-items: stretch; }
html.touch .player .osd .ch { width: 100%; max-width: none; margin-bottom: 8px; }
html.touch .player .osd .prog { width: 100%; }
html.touch .mobile-player-actions { display: flex; flex-wrap: wrap; margin-top: 8px; }
html.touch .mobile-player-actions .btn { font-size: .8em; margin: 0 6px 6px 0; padding: 6px 10px; }
html.touch .player .chlist { width: 88vw; max-width: 420px; top: 62px; bottom: 0; }
html.touch .player .chlist .items { -webkit-overflow-scrolling: touch; }
html.touch .player .epg { left: 0; right: 0; top: 62px; bottom: 0; width: 100%; overflow: auto; }
html.touch .player .epg-head, html.touch .player .epg-row { min-width: 700px; }
html.touch .player .tracks { left: 12px; right: 12px; top: 62px; bottom: 12px; width: auto; max-width: none; transform: none; max-height: none; overflow: auto; }
html.touch .player video::cue { font-size: 18px; }
@supports (top: env(safe-area-inset-top, 0px)) {
  html.touch .topbar { padding-top: calc(var(--pad) * .6 + env(safe-area-inset-top, 0px)); }
  html.touch .main { padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); }
  html.touch .player .mobile-close, html.touch .player .mobile-panel-back { top: calc(10px + env(safe-area-inset-top, 0px)); }
  html.touch .player .osd { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 600px) {
  html.touch .card { width: 180px; }
  html.touch .card.wide { width: 280px; }
}
@media (max-height: 499px) {
  html.touch .player .osd .ev.next { display: none; }
}

html.touch .player .tracks .tcol { flex: 1; min-width: 0; max-height: 100%; }
html.touch .player .epg-rows { min-width: 700px; }
html.touch .settings .box { padding: 14px; }
html.touch .splash .msg { max-width: 90%; }
html.touch .splash h1 { font-size: 1.8em; }