/*
 * Zuno Play MSX 1.0.0 — TV-first layout.
 * Retains Zuno's artwork, colours and controls, but does not assume a
 * 1920×1080 drawing canvas or apply manual TV resolution presets.
 * Loaded after all Samsung/MSX legacy style sheets.
 */
html, html body {
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
html body #stage {
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  -webkit-transform:none !important;
  zoom:1 !important;
  overflow:hidden !important;
}
html body #stage .view {
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  overflow:hidden !important;
}
html body #stage #storeAppVersion {display:none !important;}
html body #stage #bootView.active,
html body #stage #loginView.active {
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-box-align:center !important;
  -webkit-align-items:center !important;
  align-items:center !important;
  -webkit-box-pack:center !important;
  -webkit-justify-content:center !important;
  justify-content:center !important;
}
html body #stage #bootView#bootView {
  width:100% !important;
  height:100% !important;
}
html body #stage #loginView.ps-restored-login.active {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
}
html body #stage #bootView .boot-shell {
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:90% !important;
  min-height:0 !important;
  max-height:90% !important;
  transform:none !important;
}
html body #stage #bootView .boot-logo {
  width:36% !important;
  height:auto !important;
  max-height:35vh !important;
}

/* Login: two real responsive columns; keep QR + ID visible in HD. */
html body.msx-tv #stage #loginView.ps-restored-login .ps-login-layout,
html body.msx-tv #stage #loginView.ps-restored-login:not(.keyboard-docked) .ps-login-layout,
html body #stage #loginView .ps-login-layout {
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:92% !important;
  max-width:1130px !important;
  height:auto !important;
  max-height:96% !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  transform:none !important;
  -webkit-transform:none !important;
}
html body.msx-tv #stage #loginView.ps-restored-login .ps-login-brand-only,
html body #stage #loginView .ps-login-brand-only {
  width:100% !important;
  height:12vh !important;
  min-height:60px !important;
  max-height:108px !important;
  margin:0 0 8px !important;
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-box-pack:center !important;
  -webkit-justify-content:center !important;
  justify-content:center !important;
  -webkit-box-align:center !important;
  -webkit-align-items:center !important;
  align-items:center !important;
}
html body.msx-tv #stage #loginView .ps-login-logo,
html body #stage #loginView .ps-login-logo {
  width:auto !important;
  height:100% !important;
  max-width:220px !important;
  object-fit:contain !important;
}
html body.msx-tv #stage #loginView.ps-restored-login .ps-login-card,
html body.msx-tv #stage #loginView.ps-restored-login:not(.keyboard-docked) .ps-login-card,
html body #stage #loginView .ps-login-card {
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:100% !important;
  max-width:100% !important;
  height:74vh !important;
  max-height:620px !important;
  min-height:0 !important;
  padding:3vh 3% !important;
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-box-orient:horizontal !important;
  -webkit-flex-direction:row !important;
  flex-direction:row !important;
  -webkit-box-align:stretch !important;
  -webkit-align-items:stretch !important;
  align-items:stretch !important;
  grid-template-columns:none !important;
  gap:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  transform:none !important;
}
html body.msx-tv #stage #loginView .ps-login-card .ps-login-left,
html body #stage #loginView .ps-login-left {
  width:51% !important;
  max-width:51% !important;
  min-width:0 !important;
  -webkit-box-flex:1 !important;
  -webkit-flex:1 1 51% !important;
  flex:1 1 51% !important;
  height:auto !important;
  overflow:hidden !important;
}
html body.msx-tv #stage #loginView .ps-login-card .ps-login-divider,
html body #stage #loginView .ps-login-divider {
  display:block !important;
  width:1px !important;
  height:auto !important;
  margin:0 2.5% !important;
  padding:0 !important;
  -webkit-flex:0 0 1px !important;
  flex:0 0 1px !important;
}
html body.msx-tv #stage #loginView .ps-login-card .ps-device-side,
html body #stage #loginView .ps-device-side {
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-box-orient:vertical !important;
  -webkit-flex-direction:column !important;
  flex-direction:column !important;
  width:43% !important;
  max-width:43% !important;
  min-width:0 !important;
  height:auto !important;
  -webkit-flex:1 1 43% !important;
  flex:1 1 43% !important;
  overflow:hidden !important;
}
html body.msx-tv #stage #loginView .ps-login-field,
html body #stage #loginView .ps-login-field {
  width:100% !important;
  height:7.6vh !important;
  min-height:42px !important;
  max-height:65px !important;
  margin:0 0 1.2vh !important;
  box-sizing:border-box !important;
}
html body.msx-tv #stage #loginView .ps-login-field input,
html body #stage #loginView .ps-login-field input {
  height:100% !important;
  line-height:normal !important;
  font-size:19px !important;
  font-size:clamp(17px,2.1vh,23px) !important;
}
html body.msx-tv #stage #loginView .ps-login-button,
html body #stage #loginView .ps-login-button {
  height:7.1vh !important;
  min-height:42px !important;
  max-height:60px !important;
  font-size:18px !important;
  font-size:clamp(16px,2.1vh,22px) !important;
}
html body #stage #loginView .ps-demo-hint,
html body #stage #loginView .ps-avulso-status {
  font-size:clamp(11px,1.55vh,15px) !important;
  line-height:1.25 !important;
}
html body #stage #loginView .ps-device-side h2 {
  font-size:clamp(17px,2.6vh,26px) !important;
  margin:0 0 1.6vh !important;
}
html body #stage #loginView .ps-device-data {
  margin:0 0 1.5vh !important;
  max-height:11vh !important;
}
html body #stage #loginView .ps-device-data strong {
  font-size:clamp(13px,2vh,21px) !important;
  line-height:1.3 !important;
  overflow-wrap:anywhere !important;
  word-break:break-all !important;
}
html body #stage #loginView .ps-device-rule {
  margin:0 0 1.5vh !important;
}
html body.msx-tv #stage #loginView .ps-config-row,
html body #stage #loginView .ps-config-row {
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-box-align:center !important;
  -webkit-align-items:center !important;
  align-items:center !important;
  grid-template-columns:none !important;
  width:100% !important;
  min-height:0 !important;
  margin:0 0 1.5vh !important;
}
html body.msx-tv #stage #loginView .ps-config-row .ps-qr-wrap,
html body #stage #loginView .ps-qr-wrap {
  width:110px !important;
  height:110px !important;
  width:clamp(90px,12vh,130px) !important;
  height:clamp(90px,12vh,130px) !important;
  -webkit-flex:0 0 auto !important;
  flex:0 0 auto !important;
  padding:5px !important;
}
html body.msx-tv #stage #loginView .ps-config-row .ps-config-copy,
html body #stage #loginView .ps-config-copy {
  margin-left:12px !important;
  -webkit-flex:1 1 auto !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
}
html body #stage #loginView .ps-config-copy b {
  font-size:clamp(14px,2vh,18px) !important;
}
html body #stage #loginView .ps-config-copy p {
  margin:8px 0 !important;
  font-size:clamp(11px,1.5vh,15px) !important;
}
html body #stage #loginView .ps-config-copy strong {
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  font-size:clamp(12px,1.65vh,17px) !important;
}
/* First launch's language selection must also fit an HD television. */
html body #stage #firstLanguageDialog {
  position:absolute !important;
  width:100% !important;
  height:100% !important;
}
html body #stage #firstLanguageDialog .first-language-card {
  width:86% !important;
  max-width:900px !important;
  max-height:85% !important;
  padding:3% !important;
  overflow-y:auto !important;
}
html body #stage #firstLanguageDialog img {
  width:24% !important;
  height:14vh !important;
  object-fit:contain !important;
}
html body #stage #firstLanguageDialog h1 {
  font-size:23px !important;
  margin:1.5vh 0 3vh !important;
}
html body #stage #firstLanguageDialog button {
  height:9vh !important;
  min-height:50px !important;
  font-size:21px !important;
}
html body #stage #loginView.keyboard-open .ps-login-brand-only,
html body #stage #loginView.keyboard-docked .ps-login-brand-only {
  display:none !important;
}
html body #stage #loginView.keyboard-docked .ps-login-layout,
html body #stage #loginView.keyboard-open .ps-login-layout {
  max-height:95% !important;
}
html body #stage #loginView.keyboard-docked .ps-login-card,
html body #stage #loginView.keyboard-open .ps-login-card {
  height:68vh !important;
  max-height:500px !important;
}

/* Home: four Zuno tiles plus account panel, scaled by available space. */
html body #stage #homeView .zuno-home-logo {
  position:absolute !important;
  left:3% !important;
  top:2.5% !important;
  width:14% !important;
  height:12% !important;
  object-fit:contain !important;
}
html body #stage #homeView .home-top {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:16% !important;
  padding:0 4% !important;
}
html body #stage #homeView .home-status {
  font-size:clamp(14px,1.8vh,21px) !important;
}
html body #stage #homeView .home-status #clock {
  font-size:clamp(20px,3vh,35px) !important;
}
html body #stage #homeView .home-main {
  position:absolute !important;
  left:3% !important;
  top:19% !important;
  width:94% !important;
  height:64% !important;
  padding:0 !important;
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-flex-direction:row !important;
  flex-direction:row !important;
  -webkit-align-items:stretch !important;
  align-items:stretch !important;
  gap:2% !important;
}
html body #stage #homeView .home-cards {
  -webkit-box-flex:1 !important;
  -webkit-flex:1 1 auto !important;
  flex:1 1 auto !important;
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-flex-direction:row !important;
  flex-direction:row !important;
  width:73% !important;
  height:100% !important;
  min-width:0 !important;
  margin:0 !important;
  gap:1.3% !important;
}
html body #stage #homeView .home-card {
  -webkit-flex:1 1 0 !important;
  flex:1 1 0 !important;
  width:24% !important;
  min-width:0 !important;
  height:100% !important;
  padding:2% !important;
  border-radius:16px !important;
}
html body #stage #homeView .home-icon {
  width:68% !important;
  height:24% !important;
  max-height:110px !important;
  min-height:0 !important;
  margin:0 0 6% !important;
}
html body #stage #homeView .home-icon svg {
  width:100% !important;
  height:100% !important;
}
html body #stage #homeView .home-card strong {
  font-size:clamp(16px,2.8vh,29px) !important;
  white-space:normal !important;
}
html body #stage #homeView .home-card small {
  font-size:clamp(10px,1.5vh,16px) !important;
  margin-top:10px !important;
}
html body #stage #homeView .account-panel {
  -webkit-flex:0 0 25% !important;
  flex:0 0 25% !important;
  width:25% !important;
  height:100% !important;
  min-width:0 !important;
  max-width:25% !important;
  padding:3% !important;
  border-radius:18px !important;
}
html body #stage #homeView .account-logo {
  width:70% !important;
  height:20% !important;
  max-height:85px !important;
}
html body #stage #homeView .account-line {
  margin:3% 0 5% !important;
}
html body #stage #homeView .account-item {
  padding:4% 0 !important;
  gap:4% !important;
}
html body #stage #homeView .account-symbol {
  width:15% !important;
  font-size:clamp(15px,2.6vh,30px) !important;
}
html body #stage #homeView .account-item b,
html body #stage #homeView .account-item small {
  font-size:clamp(11px,1.7vh,17px) !important;
  line-height:1.3 !important;
}
html body #stage #homeView .home-actions {
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:2% !important;
  width:100% !important;
  height:12% !important;
  padding:0 !important;
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-justify-content:center !important;
  justify-content:center !important;
  -webkit-align-items:center !important;
  align-items:center !important;
  gap:2% !important;
  transform:none !important;
}
html body #stage #homeView .home-actions .home-action {
  -webkit-flex:0 0 7% !important;
  flex:0 0 7% !important;
  width:7% !important;
  min-width:56px !important;
  max-width:110px !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
}
html body #stage #homeView .home-action img {
  max-width:65% !important;
  max-height:65% !important;
  width:auto !important;
  height:auto !important;
}

/* Catalog: three fluid columns, scrolling inside each (never clipped). */
html body #stage #catalogView .catalog-top {
  height:11% !important;
  padding:0.7% 2% !important;
  gap:1% !important;
  overflow:hidden !important;
}
html body #stage #catalogView .catalog-logo {
  -webkit-flex:0 0 auto !important;
  flex:0 0 auto !important;
  width:8% !important;
  height:85% !important;
}
html body #stage #catalogView .catalog-top h1 {
  font-size:clamp(16px,2.7vh,30px) !important;
}
html body #stage #catalogView .catalog-switcher {
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-flex:1 1 auto !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  gap:1% !important;
}
html body #stage #catalogView .catalog-switcher .catalog-tab {
  width:auto !important;
  min-width:0 !important;
  -webkit-flex:1 1 0 !important;
  flex:1 1 0 !important;
  height:6vh !important;
  max-height:58px !important;
  padding:0 0.6vw !important;
  font-size:clamp(11px,1.7vh,17px) !important;
}
html body #stage #catalogView #catalogRefresh {
  -webkit-flex:0 0 12% !important;
  flex:0 0 12% !important;
  min-width:0 !important;
  height:6vh !important;
  max-height:58px !important;
  padding:0 !important;
  font-size:clamp(11px,1.6vh,15px) !important;
}
html body #stage #catalogView #catalogBody.catalog-body,
html body #stage #catalogView#catalogView #catalogBody.catalog-body {
  position:absolute !important;
  left:1.5% !important;
  top:12% !important;
  width:97% !important;
  height:86% !important;
  min-height:0 !important;
  max-height:86% !important;
  padding:0 !important;
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-flex-direction:row !important;
  flex-direction:row !important;
  gap:1% !important;
  overflow:hidden !important;
  grid-template-rows:none !important;
  grid-template-columns:none !important;
}
html body #stage #catalogView #catalogBody > .category-panel {
  -webkit-flex:0 0 23% !important;
  flex:0 0 23% !important;
  width:23% !important;
}
html body #stage #catalogView #catalogBody > .content-panel {
  -webkit-flex:1 1 0 !important;
  flex:1 1 0 !important;
  width:auto !important;
}
html body #stage #catalogView #catalogBody > .detail-panel {
  -webkit-flex:0 0 35% !important;
  flex:0 0 35% !important;
  width:35% !important;
}
html body #stage #catalogView #catalogBody > .category-panel,
html body #stage #catalogView #catalogBody > .content-panel,
html body #stage #catalogView #catalogBody > .detail-panel {
  height:100% !important;
  max-height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:1% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
html body #stage #catalogView #catalogBody .group-window,
html body #stage #catalogView #catalogBody #groupWindow {
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  -webkit-flex:1 1 auto !important;
  flex:1 1 auto !important;
  overflow-y:auto !important;
}
html body #stage #catalogView #catalogBody #contentWindow {
  height:96% !important;
  max-height:96% !important;
  min-height:0 !important;
  overflow-y:auto !important;
}
html body #stage #catalogView #catalogBody .quick-filters {
  height:12% !important;
  min-height:58px !important;
  max-height:94px !important;
  gap:1% !important;
  padding:0 !important;
  margin:0 0 1vh !important;
}
html body #stage #catalogView #catalogBody .quick-filter {
  min-width:0 !important;
  padding:0.5vw !important;
}
html body #stage #catalogView#catalogView #previewBox {
  height:32vh !important;
  max-height:36% !important;
  min-height:0 !important;
  -webkit-flex:0 0 32vh !important;
  flex:0 0 32vh !important;
}
html body #stage #catalogView#catalogView .channel-heading {
  height:auto !important;
  min-height:0 !important;
  -webkit-flex:0 0 auto !important;
  flex:0 0 auto !important;
  margin:1vh 0 !important;
}
html body #stage #catalogView#catalogView #epgBox {
  height:auto !important;
  min-height:0 !important;
  -webkit-flex:1 1 auto !important;
  flex:1 1 auto !important;
}
html body #stage #catalogView #contentWindow.live-grid {
  grid-template-columns:1fr !important;
  grid-template-rows:none !important;
  grid-auto-rows:88px !important;
  grid-auto-rows:clamp(70px,11vh,110px) !important;
  gap:1vh !important;
}
html body #stage #catalogView #contentWindow.poster-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:none !important;
  grid-auto-rows:190px !important;
  grid-auto-rows:clamp(140px,27vh,260px) !important;
  gap:1vh !important;
}
html body #stage #catalogView .poster-grid .media-card {
  min-height:0 !important;
  height:100% !important;
  grid-template-rows:minmax(0,1fr) 22% !important;
}
html body #stage #catalogView .poster-grid .media-art {
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
}
html body #stage #catalogView .poster-grid .media-copy {
  height:auto !important;
  min-height:0 !important;
}
html body #stage #catalogView .live-grid .media-card {
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  padding:1vh !important;
}
html body #stage #catalogView .live-grid .media-art {
  width:7vh !important;
  height:7vh !important;
  max-width:68px !important;
  max-height:68px !important;
}
html body #stage #catalogView .live-grid .media-copy strong {
  font-size:clamp(13px,2vh,22px) !important;
}

/* Independent full-screen player; no 1920×1080 media element. */
html body #stage #avPlayer.full-surface {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
}
html body #stage #sectionLoading,
html body #stage #searchKeyboard {
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
}
html body #stage .simple-card,
html body #stage #searchKeyboard .keyboard-card {
  width:90% !important;
  max-width:1050px !important;
  max-height:90% !important;
  overflow-y:auto !important;
}
html body #stage #seriesView .series-top {height:12% !important;}
html body #stage #seriesView .series-body {
  height:88% !important;
  padding:1% !important;
  grid-template-columns:28% 20% 1fr !important;
  gap:1% !important;
}
html body #stage #seriesView .series-info {
  grid-template-rows:45% 1fr !important;
}
html body #stage #seriesView .series-poster {
  max-height:100% !important;
}
@media (max-height:800px) {
  html body #stage #loginView .ps-login-card {
    height:75vh !important;
    padding:2.5vh 2.5% !important;
  }
  html body #stage #loginView .ps-login-brand-only {height:10vh !important;}
  html body #stage #homeView .home-main {top:17% !important;height:66% !important;}
  html body #stage #catalogView #catalogBody .group-btn {height:52px !important;min-height:0 !important;}
  html body #stage #catalogView #catalogBody .live-grid .media-art {margin-right:12px !important;}
  html body #stage #catalogView#catalogView #previewBox {
    height:28vh !important;
    -webkit-flex-basis:28vh !important;
    flex-basis:28vh !important;
  }
}
@media (max-width:1050px) {
  html body #stage #loginView .ps-login-layout {width:96% !important;}
  html body #stage #loginView .ps-login-card {padding:2% !important;}
  html body #stage #homeView .account-panel {display:none !important;}
  html body #stage #homeView .home-cards {width:100% !important;}
  html body #stage #catalogView #catalogBody > .category-panel {flex-basis:25% !important;width:25% !important;}
  html body #stage #catalogView #catalogBody > .detail-panel {flex-basis:30% !important;width:30% !important;}
}
/* The same fluid design remains readable if the MSX exposes a 4K viewport. */
@media (min-width:2500px) and (min-height:1400px) {
  html body #stage #loginView .ps-login-layout {max-width:2200px !important;}
  html body #stage #loginView .ps-login-brand-only {max-height:190px !important;}
  html body #stage #loginView .ps-login-logo {max-width:440px !important;}
  html body #stage #loginView .ps-login-card {max-height:1250px !important;}
  html body #stage #loginView .ps-login-field {max-height:125px !important;}
  html body #stage #loginView .ps-login-field input {font-size:38px !important;}
  html body #stage #loginView .ps-login-button {max-height:120px !important;font-size:35px !important;}
  html body #stage #loginView .ps-device-side h2 {font-size:45px !important;}
  html body #stage #loginView .ps-device-data strong {font-size:35px !important;}
  html body #stage #loginView .ps-qr-wrap {
    width:245px !important;
    height:245px !important;
  }
  html body #stage #loginView .ps-config-copy b {font-size:33px !important;}
  html body #stage #loginView .ps-config-copy p {font-size:26px !important;}
  html body #stage #loginView .ps-config-copy strong {font-size:28px !important;}
  html body #stage #homeView .home-card strong {font-size:52px !important;}
  html body #stage #homeView .home-card small {font-size:27px !important;}
  html body #stage #homeView .home-icon {max-height:220px !important;}
  html body #stage #homeView .account-logo {max-height:175px !important;}
  html body #stage #homeView .account-item b,
  html body #stage #homeView .account-item small {font-size:29px !important;}
  html body #stage #catalogView .catalog-top h1 {font-size:48px !important;}
  html body #stage #catalogView .catalog-switcher .catalog-tab {max-height:110px !important;font-size:30px !important;}
  html body #stage #catalogView #catalogRefresh {max-height:110px !important;font-size:28px !important;}
  html body #stage #catalogView #contentWindow.live-grid {grid-auto-rows:195px !important;}
  html body #stage #catalogView #contentWindow.poster-grid {grid-auto-rows:430px !important;}
  html body #stage #catalogView .live-grid .media-copy strong {font-size:39px !important;}
}