/* EGYSHOW home cinematic refresh 2026-10-22
   Presentation-only overrides; all data, playback and navigation remain intact.
   This sheet is loaded by public/web/index.html only.
*/
:root{--egy-accent:#f04438;--egy-accent-strong:#e72d2f}
body{background:#090b0f}
body:has(#homeView:not(.hidden)) #topbar{
  height:68px;padding-inline:clamp(16px,3.5vw,60px);gap:20px;
  background:rgba(9,11,15,.94);border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);box-shadow:0 5px 24px rgba(0,0,0,.22)
}
body:has(#homeView:not(.hidden)) #topbar .brand strong{font-size:17px;letter-spacing:.6px}
body:has(#homeView:not(.hidden)) #topbar .brand-symbol{width:30px;height:30px}
body:has(#homeView:not(.hidden)) #topbar .desktop-nav{gap:clamp(9px,1.3vw,21px);overflow-x:auto;scrollbar-width:none}
body:has(#homeView:not(.hidden)) #topbar .desktop-nav::-webkit-scrollbar{display:none}
body:has(#homeView:not(.hidden)) #topbar .desktop-nav a{font-size:11.5px;font-weight:800;white-space:nowrap}
body:has(#homeView:not(.hidden)) #topbar .desktop-nav a[href="/"]{color:#ff6155}
body:has(#homeView:not(.hidden)) #topbar .desktop-nav a[href="/"]:after{
  content:"";position:absolute;inset:auto 0 -11px;height:2px;border-radius:4px;background:var(--egy-accent)
}
body:has(#homeView:not(.hidden)) #topbar .app-nav-link{background:linear-gradient(115deg,#f44f3c,#d92732);padding:7px 10px;border-radius:8px}
body:has(#homeView:not(.hidden)) #topbar .icon-btn,
body:has(#homeView:not(.hidden)) #topbar .pill,
body:has(#homeView:not(.hidden)) #topbar .avatar{border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.035)}
/* Show actual featured item, never placeholder artwork. */
body:has(#homeView:not(.hidden)) #hero{
  height:clamp(360px,33vw,480px);min-height:360px;
  align-items:center;padding:84px clamp(18px,5.3vw,86px) 43px;
  background-position:center 32%;background-size:cover;background-color:#0a0b0e
}
body:has(#homeView:not(.hidden)) #hero:before{
  background:linear-gradient(90deg,rgba(6,8,12,.99) 0%,rgba(6,8,12,.9) 23%,rgba(6,8,12,.65) 43%,rgba(6,8,12,.06) 78%),linear-gradient(0deg,#090b0f 0%,transparent 25%)
}
[dir="rtl"] body:has(#homeView:not(.hidden)) #hero:before{
  background:linear-gradient(270deg,rgba(6,8,12,.99) 0%,rgba(6,8,12,.9) 23%,rgba(6,8,12,.65) 43%,rgba(6,8,12,.06) 78%),linear-gradient(0deg,#090b0f 0%,transparent 25%)
}
body:has(#homeView:not(.hidden)) #hero .hero-shade{background:linear-gradient(0deg,#090b0f 0%,transparent 28%)}
body:has(#homeView:not(.hidden)) #hero .hero-content{width:min(525px,48vw);padding:0}
body:has(#homeView:not(.hidden)) #hero .eyebrow{font-size:10px;letter-spacing:1.4px;color:#ff9c90}
body:has(#homeView:not(.hidden)) #hero h1{font-size:clamp(28px,3.2vw,46px);line-height:1.3;letter-spacing:-.5px;margin:8px 0 8px}
body:has(#homeView:not(.hidden)) #hero .hero-meta{font-size:11px;margin-bottom:7px;color:#ffbd8d}
body:has(#homeView:not(.hidden)) #hero .hero-text{font-size:clamp(11px,1vw,14px);line-height:1.8;-webkit-line-clamp:3;color:#ddd}
body:has(#homeView:not(.hidden)) #hero .hero-actions{gap:10px;margin-top:17px}
body:has(#homeView:not(.hidden)) #hero .hero-actions .btn{border-radius:8px;min-height:42px;padding:8px 19px;font-size:12px}
body:has(#homeView:not(.hidden)) #hero .btn.primary{background:linear-gradient(115deg,#f34e3c,#e12b32);color:#fff;box-shadow:0 8px 24px rgba(233,47,46,.23)}
body:has(#homeView:not(.hidden)) #hero .btn.primary:hover{background:#f3584b}
body:has(#homeView:not(.hidden)) #hero .btn.glass{background:rgba(10,13,20,.61);border-color:rgba(255,255,255,.24)}
body:has(#homeView:not(.hidden)) #hero .hero-dots{bottom:20px}
body:has(#homeView:not(.hidden)) #hero .hero-dots button.active{background:var(--egy-accent)}
/* Compact app promotion from the mockup, without removing its download link. */
#homeView{margin-top:0;padding-bottom:65px;background:linear-gradient(180deg,#090b0f,#090a0e 65%,#090909)}
#homeView #appInstallFeature{position:relative;z-index:7;max-width:960px;margin:-13px auto 9px;padding-inline:var(--page-pad)}
#homeView #appInstallFeature .native-app-feature__inner{min-height:66px;padding:9px 16px;border-radius:11px;border-color:rgba(244,79,62,.26);background:linear-gradient(110deg,#23161b,#161319 48%,#101219);box-shadow:0 10px 29px rgba(0,0,0,.35)}
#homeView #appInstallFeature .native-app-feature__text{gap:11px}
#homeView #appInstallFeature .native-app-feature__logo{width:41px;height:41px;border-radius:9px;flex:0 0 41px}
#homeView #appInstallFeature .native-app-feature__logo img{width:29px;height:29px}
#homeView #appInstallFeature .native-app-feature__text strong{font-size:12px}
#homeView #appInstallFeature .native-app-feature__text small{font-size:10px;line-height:1.5}
#homeView #appInstallFeature .native-app-feature__button{font-size:11px;padding:9px 14px;border-radius:8px;background:linear-gradient(115deg,#f34e3c,#e12b32)}
/* Consistent section hierarchy and restrained empty space. */
#homeView .media-section{max-width:1480px;padding:9px var(--page-pad) 12px;margin-inline:auto}
#homeView .section-head{margin-bottom:9px;min-height:34px}
#homeView .section-head h2{font-size:clamp(16px,1.6vw,21px);line-height:1.45;letter-spacing:0;font-weight:900}
#homeView .section-tools{gap:10px}
#homeView .view-all{padding:6px 12px;color:#c5c8d0;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.14);border-radius:8px;font-size:10px}
#homeView .view-all:hover{color:#fff;border-color:rgba(244,79,62,.4)}
#homeView .rail-actions button,
#homeView .matches-flash-arrows button{width:29px;height:29px;border-radius:8px;border-color:rgba(255,255,255,.13);background:#1b1e25;color:#e8e8ea}
#homeView .rail-actions button:hover,
#homeView .matches-flash-arrows button:hover{background:#b92332;color:#fff}
#homeView .rail{gap:12px;padding:5px 2px 12px;scroll-padding-inline:2px}
#homeView .rail:has(.portrait-media-card){grid-auto-columns:clamp(155px,15vw,205px);gap:13px}
#homeView .rail:has(.episode-landscape-card),
#homeView .rail:has(.channel-landscape-card){grid-auto-columns:clamp(215px,20vw,300px)}
#homeView .portrait-poster{border-color:rgba(255,255,255,.13);border-radius:9px;box-shadow:0 10px 25px rgba(0,0,0,.22)}
#homeView .portrait-poster-gradient{background:linear-gradient(180deg,rgba(0,0,0,.44),transparent 31%,rgba(0,0,0,.12) 57%,rgba(0,0,0,.94))}
#homeView .poster-top-meta{inset:8px 8px auto}
#homeView .poster-type-badge,#homeView .poster-year-badge,#homeView .poster-rating-badge{font-size:8px;min-height:19px;padding:3px 6px;border-radius:5px}
#homeView .poster-bottom-meta{padding:45px 11px 10px 48px}
#homeView .poster-title{font-size:12px;line-height:1.5;min-height:36px}
#homeView .poster-submeta{font-size:9px;color:#c5c7ce}
#homeView .portrait-poster .poster-play-center{
  inset:50% auto auto 50%;
  width:46px;height:46px;padding-inline-start:2px;
  transform:translate(-50%,-50%);opacity:.94;background:rgba(16,19,26,.73);
  border:1px solid rgba(255,255,255,.78);color:#fff;box-shadow:0 5px 15px rgba(0,0,0,.5)
}
#homeView .portrait-poster .poster-play-center:hover,
#homeView .portrait-poster .poster-play-center:focus-visible{background:var(--egy-accent);transform:translate(-50%,-50%) scale(1.08)}
#homeView .portrait-poster .poster-play-center .play-glyph{color:#fff}
#homeView .channel-landscape-card .card-play{
  inset:50% auto auto 50%;width:44px;height:44px;
  transform:translate(-50%,-50%);opacity:.94;
  background:rgba(16,19,26,.73);border:1px solid rgba(255,255,255,.78);color:#fff
}
#homeView .channel-landscape-card:hover .card-play,
#homeView .channel-landscape-card:focus-within .card-play{transform:translate(-50%,-50%);background:var(--egy-accent)}
#homeView .episode-landscape-card,#homeView .channel-landscape-card{background:#13161b;border:1px solid rgba(255,255,255,.08);border-radius:10px}
#homeView .episode-card-media{border-radius:10px 10px 0 0}
#homeView .stream-card-copy{padding:9px 10px}
#homeView .stream-card:focus-within{outline:2px solid var(--egy-accent);outline-offset:2px}
/* Same stadium fixtures, scores and timestamps, only the visual treatment changes. */
#homeView #matchesPreview{margin:2px auto 8px;max-width:1480px}
#homeView #matchesPreview .section-head{margin-bottom:8px}
#homeView .matches-flashes-track{gap:10px;padding:2px 2px 9px}
#homeView .match-flash{
  flex-basis:clamp(180px,17vw,224px);height:112px;padding:8px 10px;
  border-color:#303440;border-radius:9px;
  background:linear-gradient(145deg,#181b24,#101217 78%);box-shadow:0 6px 16px rgba(0,0,0,.14)
}
#homeView .match-flash:before{background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.025) 60%,transparent 82%)}
#homeView .match-flash:hover{border-color:rgba(244,79,62,.63);background:linear-gradient(145deg,#22242e,#14151b)}
#homeView .match-flash-meta{font-size:9px;color:#a8adb8}
#homeView .match-flash-status.is-live{color:#ff665b}
#homeView .match-flash-status.is-live:before{background:#f1483e;box-shadow:0 0 0 3px #f1483e20}
#homeView .match-flash-body{grid-template-columns:minmax(0,1fr) 43px minmax(0,1fr)}
#homeView .match-flash-logo{width:30px;height:30px}
#homeView .match-flash-name{font-size:10px}
#homeView .match-flash-score{font-size:13px}
#homeView .match-flash-play{background:#e9393a}
#homeView .match-flash-message{background:#14171e;border-color:#2b3039}
/* Touch-first: preserve the existing rails, navigation and player behaviors. */
@media(max-width:900px){
  body:has(#homeView:not(.hidden)) #topbar{height:62px;padding-inline:14px}
  body:has(#homeView:not(.hidden)) #hero{height:410px;min-height:410px;padding:92px 20px 37px;background-position:59% center}
  body:has(#homeView:not(.hidden)) #hero .hero-content{width:min(510px,76vw)}
  body:has(#homeView:not(.hidden)) #hero h1{font-size:clamp(27px,4.8vw,39px)}
  #homeView .rail:has(.portrait-media-card){grid-auto-columns:clamp(150px,25vw,192px)}
  #homeView .match-flash{flex-basis:195px}
}
@media(max-width:640px){
  body:has(#homeView:not(.hidden)) #topbar{height:59px;gap:8px;padding-inline:10px}
  body:has(#homeView:not(.hidden)) #topbar .brand strong{font-size:13px}
  body:has(#homeView:not(.hidden)) #hero{height:clamp(415px,61svh,515px);min-height:415px;align-items:flex-end;padding:76px 16px 63px;background-position:57% center}
  body:has(#homeView:not(.hidden)) #hero:before,
  [dir="rtl"] body:has(#homeView:not(.hidden)) #hero:before{
    background:linear-gradient(0deg,#090b0f 0%,rgba(8,10,14,.92) 17%,rgba(8,10,14,.53) 62%,rgba(8,10,14,.02) 100%)
  }
  body:has(#homeView:not(.hidden)) #hero .hero-content{width:100%;padding:0}
  body:has(#homeView:not(.hidden)) #hero h1{font-size:clamp(26px,7.5vw,35px);line-height:1.36}
  body:has(#homeView:not(.hidden)) #hero .hero-text{font-size:11.5px;-webkit-line-clamp:3}
  body:has(#homeView:not(.hidden)) #hero .hero-actions .btn{padding:9px 12px;font-size:11px}
  #homeView #appInstallFeature{padding-inline:13px;margin:-16px auto 10px}
  #homeView #appInstallFeature .native-app-feature__inner{padding:9px 10px;gap:9px;min-height:61px}
  #homeView #appInstallFeature .native-app-feature__logo{display:none}
  #homeView #appInstallFeature .native-app-feature__text strong{font-size:11px}
  #homeView #appInstallFeature .native-app-feature__text small{font-size:8px}
  #homeView #appInstallFeature .native-app-feature__button{font-size:10px;padding:7px 9px}
  #homeView .media-section{padding:9px 13px 10px}
  #homeView .section-head{min-height:30px}
  #homeView .section-head h2{font-size:15px}
  #homeView .view-all{padding:5px 7px;font-size:9px}
  #homeView .rail:has(.portrait-media-card){grid-auto-columns:min(43vw,178px);gap:9px}
  #homeView .rail:has(.episode-landscape-card),#homeView .rail:has(.channel-landscape-card){grid-auto-columns:min(72vw,280px)}
  #homeView .portrait-poster{border-radius:8px}
  #homeView .poster-bottom-meta{padding:39px 8px 7px 42px}
  #homeView .poster-title{font-size:11px;min-height:32px}
  #homeView .portrait-poster .poster-play-center{width:40px;height:40px}
  #homeView .match-flash{flex-basis:190px;height:111px}
  #homeView #matchesPreview{margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
  #homeView .match-flash,#homeView .portrait-media-card{transition:none}
}