/* =========================================================
DEEPROWSS FOOTBALL APP
========================================================= */

:root {
--bg:#07090d;
--surface:#10141b;
--surface-2:#151a22;
--surface-3:#1b2029;
--line:rgba(255,255,255,.08);
--text:#fff;
--muted:#8d96a5;
--accent:#ff1744;
--accent-soft:rgba(255,23,68,.12);
--green:#20e070;
--match-upcoming:#ff1744;
--match-live:#ff1744;
--match-ended:#858c98;
--header-height:66px;
--screen-stack-height:0px;
--app-menu-top:66px;
}

*{box-sizing:border-box}
html{
scroll-behavior:smooth;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
body{
margin:0;min-height:100vh;
background:radial-gradient(circle at 50% -20%,rgba(255,23,68,.06),transparent 35%),var(--bg);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
-webkit-font-smoothing:antialiased;
touch-action:manipulation;
overscroll-behavior-x:none;
overflow-x:hidden;
}
input,textarea,select{-webkit-user-select:text;user-select:text}
button,input{font:inherit}
button{border:0;outline:0}
a{color:inherit;text-decoration:none}

.container{width:min(1180px,calc(100% - 30px));margin:0 auto}

.site-header{
position:sticky;top:0;z-index:1000;
background:rgba(7,9,13,.94);
border-bottom:1px solid var(--line);
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
}
.nav-wrap{min-height:66px;display:flex;align-items:center;gap:25px}

.brand{
display:flex;align-items:center;gap:9px;flex-shrink:0;
font-size:15px;font-weight:950;letter-spacing:1px;
}
.brand>span:last-child span{color:var(--accent)}
.brand-mark{
width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
background:linear-gradient(145deg,var(--accent),#b8002e);
color:#fff;font-weight:950;
box-shadow:0 5px 18px rgba(255,23,68,.25);
}

.main-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
.main-nav a{
padding:9px 12px;border-radius:8px;color:var(--muted);
font-size:13px;font-weight:800;
transition:background .2s ease,color .2s ease;
}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.main-nav a.active{color:#fff;background:var(--accent-soft)}

.menu-toggle{
display:none;width:40px;height:40px;border-radius:9px;
background:var(--surface);color:#fff;font-size:20px;
cursor:pointer;touch-action:manipulation;
}

.football-app{padding-bottom:50px;overflow:visible}

.screen-section{
position:sticky;top:var(--header-height);z-index:900;
padding:20px 0 0;background:var(--bg);
}
.screen-player{
position:relative;overflow:hidden;background:#000;
border:1px solid rgba(255,255,255,.08);border-radius:17px;
box-shadow:0 20px 60px rgba(0,0,0,.35);
touch-action:manipulation;
}
.screen-status{
  position:absolute;
  top:13px;
  right:13px;
  bottom:auto;
  left:auto;
z-index:10;
display:flex;
align-items:center;
gap:7px;
padding:6px 10px;
border-radius:999px;
background:rgba(0,0,0,.72);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
color:#fff;
font-size:9px;
font-weight:950;
letter-spacing:1.2px;
}
.screen-live-dot{
width:7px;height:7px;flex-shrink:0;border-radius:50%;
background:var(--accent);box-shadow:0 0 10px rgba(255,23,68,.8);
}
.screen-player iframe{
display:block;width:100%;height:540px;border:0;background:#000;opacity:1;
transition:opacity .25s ease;touch-action:manipulation;
}
.screen-app-marquee{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:9999;
  height:34px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:rgba(0,0,0,.45);
  text-decoration:none;
  cursor:pointer;
}

.screen-app-marquee-track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:screenAppMarquee 18s linear infinite;
  will-change:transform;
}

.screen-app-marquee-track span{
  display:block;
  padding-right:120px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.3px;
  line-height:34px;
}

.screen-app-marquee:hover{
  background:rgba(0,0,0,.92);
}

@keyframes screenAppMarquee{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

.screen-player:fullscreen .screen-app-marquee,
.screen-player:-webkit-full-screen .screen-app-marquee{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:999999;
}

@media (max-width:550px){
  .screen-app-marquee{
    height:30px;
  }

  .screen-app-marquee-track span{
    font-size:10px;
    line-height:30px;
    padding-right:80px;
  }
}
.screen-placeholder{
position:absolute;inset:0;z-index:3;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;background:radial-gradient(circle,#151922 0%,#050608 65%);
color:#fff;text-align:center;pointer-events:none;
transition:opacity .25s ease;
}
.screen-placeholder.hidden{opacity:0;visibility:hidden}
.screen-placeholder-icon{
width:58px;height:58px;display:grid;place-items:center;border-radius:16px;
background:rgba(255,255,255,.06);font-size:27px;
}
.screen-placeholder strong{font-size:14px;color:#dce1e8}
.screen-placeholder[hidden] {
  display: none !important;
}

.screen-bottom{
display:flex;align-items:center;justify-content:space-between;gap:15px;
padding:13px 15px;
background:linear-gradient(145deg,#11151d,#0b0e14);
border-top:1px solid var(--line);
}
.now-showing{min-width:0}
.now-showing span{
display:block;margin-bottom:3px;color:var(--muted);
font-size:9px;font-weight:900;letter-spacing:1.5px;
}
#nowShowing{
display:block;overflow:hidden;color:#fff;font-size:15px;font-weight:900;
text-overflow:ellipsis;white-space:nowrap;
}
.fullscreen-button{
flex-shrink:0;width:40px;height:36px;display:flex;
align-items:center;justify-content:center;
border:1px solid rgba(255,255,255,.1);border-radius:8px;
background:var(--surface-3);color:#fff;font-size:18px;line-height:1;
cursor:pointer;transition:background .2s ease,transform .2s ease,color .2s ease;
touch-action:manipulation;
}
.fullscreen-button:hover{background:var(--accent);transform:translateY(-1px)}

.screen-player:fullscreen,
.screen-player:-webkit-full-screen{
position:fixed;
inset:0;
width:100%;
height:100%;
max-width:none;
max-height:none;
margin:0;
padding:0;
border:0;
border-radius:0;
background:#000;
box-shadow:none;
overflow:hidden;
z-index:999999;
}
.screen-player:fullscreen iframe,
.screen-player:fullscreen iframe,
.screen-player:-webkit-full-screen iframe{
width:100vw;
height:100vh;
min-width:0;
min-height:0;
max-width:100vw;
max-height:100vh;
display:block;
border:0;
border-radius:0;
background:#000;
opacity:1;
}
@media (orientation: landscape){
.screen-player:fullscreen iframe,
.screen-player:-webkit-full-screen iframe{
transform:scale(.96);
transform-origin:center center;
}
}
.screen-player:fullscreen .screen-status,
.screen-player:-webkit-full-screen .screen-status{
position:absolute;top:20px;left:20px;z-index:99999;
}
.screen-player:fullscreen .screen-bottom,
.screen-player:-webkit-full-screen .screen-bottom{
position:absolute;inset:0;z-index:99998;display:block;width:100%;height:100%;
padding:0;background:transparent;border:0;pointer-events:none;
}
.screen-player:fullscreen .now-showing,
.screen-player:-webkit-full-screen .now-showing{display:none}
.screen-player:fullscreen .fullscreen-button,
.screen-player:-webkit-full-screen .fullscreen-button{
position:absolute;top:20px;right:20px;z-index:100000;
width:52px;height:52px;display:flex;align-items:center;justify-content:center;
margin:0;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;
background:rgba(0,0,0,.68);color:#fff;font-size:34px;font-weight:300;
line-height:1;text-align:center;backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 25px rgba(0,0,0,.35);
pointer-events:auto;transform:none;
}
.screen-player:fullscreen .fullscreen-button:hover,
.screen-player:-webkit-full-screen .fullscreen-button:hover{
background:var(--accent);transform:scale(1.05);
}

.app-menu{
position:sticky;top:var(--app-menu-top);z-index:850;padding:17px 0 8px;
background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 88%,rgba(7,9,13,0) 100%);
}
.app-buttons{
display:flex;align-items:stretch;gap:10px;overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;
}
.app-buttons::-webkit-scrollbar{display:none}
.app-button{
flex:0 0 auto;min-width:150px;min-height:58px;
display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;
border:1px solid var(--line);border-radius:11px;
background:linear-gradient(145deg,var(--surface),#0c1016);
color:var(--muted);font-size:13px;font-weight:900;cursor:pointer;white-space:nowrap;
transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
touch-action:manipulation;
}
.app-button:hover{transform:translateY(-2px);color:#fff;border-color:rgba(255,255,255,.14)}
.app-button.active{
color:#fff;border-color:rgba(255,23,68,.45);
background:linear-gradient(145deg,rgba(255,23,68,.18),#10141b);
box-shadow:0 8px 25px rgba(255,23,68,.07);
}
.app-button-icon{font-size:18px;line-height:1}

.content-section{padding:25px 0 20px}
.content-heading{
display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px;
}
.content-heading h1{margin:0;font-size:clamp(20px,3vw,26px);letter-spacing:-.5px}
.content-count{
min-width:27px;height:27px;display:grid;place-items:center;padding:0 8px;
border-radius:999px;background:var(--surface-2);color:var(--muted);
font-size:11px;font-weight:900;
}

.match-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.match-card{
position:relative;min-height:112px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:5px;padding:12px 14px;overflow:hidden;
border:1px solid rgba(255,23,68,.20);border-radius:14px;
background:linear-gradient(145deg,#11151c,#0b0e14);color:#fff;text-align:center;
cursor:pointer;transition:transform .2s ease,border-color .3s ease,box-shadow .3s ease,
background .3s ease,opacity .3s ease;touch-action:manipulation;
}
.match-card.is-upcoming{border-color:rgba(255,23,68,.28);background:linear-gradient(145deg,#11151c,#0b0e14)}
.match-card.is-upcoming:hover{transform:translateY(-2px);border-color:rgba(255,23,68,.60);box-shadow:0 8px 24px rgba(255,23,68,.10)}
.match-card.is-live{
  border-color:rgba(255,23,68,.65);
  background:linear-gradient(145deg,rgba(255,23,68,.12),#0c1016);
  box-shadow:0 0 0 1px rgba(255,23,68,.10),0 0 22px rgba(255,23,68,.12);
  animation:none;
}
.match-card.is-live:hover{transform:translateY(-2px);border-color:rgba(255,23,68,.85);box-shadow:0 0 0 1px rgba(255,23,68,.16),0 0 30px rgba(255,23,68,.20)}
.match-card.is-ended{opacity:.58;border-color:rgba(255,255,255,.05);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));box-shadow:none;cursor:pointer}
.match-card.is-ended:hover{transform:none;border-color:rgba(255,255,255,.08);box-shadow:none}

.match-status{
display:inline-flex;align-items:center;justify-content:center;width:fit-content;min-height:23px;
padding:4px 10px;margin-bottom:1px;border-radius:999px;font-size:8px;font-weight:950;
letter-spacing:1px;line-height:1;transition:color .3s ease,background .3s ease,border-color .3s ease;
}
.match-status.upcoming{color:#ff637d;background:rgba(255,23,68,.10);border:1px solid rgba(255,23,68,.25)}
.match-status.live{
color:#fff;background:var(--match-live);border:1px solid rgba(255,255,255,.12);
font-weight:950;box-shadow:0 0 12px rgba(255,23,68,.25);
}
.match-status.live::before{
  content:"";
  width:6px;
  height:6px;
  margin-right:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.9);
  animation:none;
}
.match-status.ended{color:var(--match-ended);background:rgba(133,140,152,.10);border:1px solid rgba(133,140,152,.16)}
.match-teams{
display:block;width:100%;overflow:hidden;color:#fff;font-size:16px;font-weight:900;
line-height:1.2;text-overflow:ellipsis;white-space:nowrap;
}
.match-card.is-ended .match-teams{color:#858b95}
.match-date{display:inline-block;color:#aeb6c3;font-size:10px;font-weight:700;line-height:1.2;margin-top:1px}
.match-time{display:inline-block;color:#fff;font-size:12px;font-weight:900;line-height:1.2}
.match-date+.match-time{margin-top:-2px}
.match-countdown{display:block;margin-top:3px;color:#ff637d;font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.1px}
.match-card.is-live .match-countdown{color:#ff637d;font-weight:950}
.match-card.is-ended .match-countdown{color:#777e89;font-weight:600}

.highlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.highlight-card{
position:relative;min-width:0;min-height:135px;display:flex;flex-direction:column;
align-items:flex-start;justify-content:space-between;padding:13px;overflow:hidden;isolation:isolate;
border:1px solid rgba(255,255,255,.09);border-radius:16px;
background:linear-gradient(145deg,#11151c,#0b0e14);color:#fff;text-align:left;
cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
touch-action:manipulation;
}
.highlight-card::before,.tv-channel::before{
content:"";position:absolute;width:115px;height:115px;top:-62px;right:-6px;border-radius:50%;
background:rgba(255,23,68,.09);z-index:-1;
}
.highlight-card::after,.tv-channel::after{
content:"";position:absolute;width:88px;height:88px;top:-48px;right:23px;border-radius:50%;
background:rgba(255,23,68,.035);z-index:-1;
}
.highlight-card:hover,.tv-channel:hover{transform:translateY(-3px);border-color:rgba(255,23,68,.4);box-shadow:0 10px 25px rgba(0,0,0,.28)}
.highlight-card.active,.tv-channel.active{
border-color:rgba(255,23,68,.65);
background:linear-gradient(145deg,rgba(255,23,68,.13),#10141b);
}
.highlight-thumbnail{
width:50px;height:50px;display:grid;place-items:center;flex-shrink:0;border-radius:14px;
background:linear-gradient(145deg,#252b36,#151922);border:1px solid rgba(255,255,255,.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 5px 15px rgba(0,0,0,.2);
font-size:24px;line-height:1;position:relative;z-index:2;
}
.highlight-thumbnail span{width:auto;height:auto;display:block;padding:0;border-radius:0;background:transparent;color:#fff;font-size:22px;line-height:1}
.highlight-card strong{
display:block;width:100%;min-width:0;overflow:hidden;padding:9px 5px 0 0;color:#fff;
font-size:14px;font-weight:900;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:2;
}
/* =========================================================
   HIGHLIGHTS — SAME STYLE AS MATCH CARDS
   ========================================================= */

.highlight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.highlight-card{
  position:relative;
  min-width:0;
  min-height:112px;
  height:auto;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;

  padding:12px 14px;
  overflow:hidden;

  border:1px solid rgba(255,23,68,.28);
  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #11151c,
      #0b0e14
    );

  color:#fff;
  text-align:center;

  cursor:pointer;

  transition:
    transform .2s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;

  touch-action:manipulation;
}

/* Red highlight card glow */

.highlight-card.is-upcoming{
  border-color:rgba(255,23,68,.30);

  background:
    linear-gradient(
      145deg,
      #11151c,
      #0b0e14
    );
}

.highlight-card.is-upcoming:hover{
  transform:translateY(-2px);

  border-color:
    rgba(255,23,68,.60);

  box-shadow:
    0 8px 24px
    rgba(255,23,68,.10);
}

/* Highlight pill */

.highlight-card .match-status.upcoming{
  color:#fff;

  background:
    var(--accent);

  border:
    1px solid
    rgba(255,255,255,.12);

  box-shadow:
    0 0 12px
    rgba(255,23,68,.25);

  font-weight:950;
}

/* Highlight title */

.highlight-card .match-teams{
  display:-webkit-box;
  width:100%;
  overflow:hidden;

  color:#fff;

  font-size:15px;
  font-weight:900;

  line-height:1.2;

  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal;
  text-overflow:clip;
}

/* Highlight date */

.highlight-card .match-date{
  display:inline-block;

  color:#aeb6c3;

  font-size:10px;
  font-weight:700;

  line-height:1.2;

  margin-top:1px;
}

/* Bottom action */

.highlight-card .match-countdown{
  display:block;

  margin-top:3px;

  color:#ff637d;

  font-size:10px;
  font-weight:950;

  line-height:1.2;

  letter-spacing:.1px;
}

/* Selected highlight */

.highlight-card.active{
  border-color:
    rgba(255,23,68,.65);

  background:
    linear-gradient(
      145deg,
      rgba(255,23,68,.13),
      #10141b
    );

  box-shadow:
    0 0 0 1px
    rgba(255,23,68,.10),
    0 0 22px
    rgba(255,23,68,.12);
}

.tv-content{padding-top:20px}
.tv-category{padding-top:22px}
.tv-category-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}
.tv-category-heading h2{margin:0;font-size:18px;letter-spacing:-.3px}
.tv-category-heading span{color:var(--muted);font-size:10px;font-weight:700}
.tv-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* =========================================================
TV CHANNEL CARD
========================================================= */

.tv-channel{
position:relative;
min-width:0;
min-height:90px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
padding:10px;
border:1px solid rgba(255,255,255,.09);
border-radius:16px;
background:linear-gradient(145deg,#11151c,#0b0e14);
color:#fff;
text-align:left;
cursor:pointer;
overflow:hidden;
isolation:isolate;
transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
touch-action:manipulation;
}

/* TV CHANNELS — SAME COMPACT STYLE AS HIGHLIGHTS */

.tv-channel{
  width:100%;
  max-width:none;
  min-height:112px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;

  padding:12px 14px;

  border:1px solid rgba(255,23,68,.28);
  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #11151c,
      #0b0e14
    );

  color:#fff;
  text-align:center;
}

.tv-channel-icon{
  width:45px;
  height:45px;
  border-radius:12px;
  font-size:23px;
}

.tv-channel-info{
  width:100%;
  min-width:0;
  padding:0;
  text-align:center;
}

.tv-channel-info strong{
  display:block;
  width:100%;
  overflow:hidden;
  margin:0;

  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.2;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.tv-channel-info small{
  display:block;
  margin-top:3px;
  color:#9aa3b2;
  font-size:9px;
  line-height:1.2;
}

.tv-channel-status{
  position:absolute;
  top:10px;
  right:10px;

  min-height:22px;
  padding:4px 7px;

  border-radius:999px;

  background:rgba(255,23,68,.13);
  color:#ff5b78;

  font-size:7px;
  font-weight:950;
  letter-spacing:.8px;
}

.tv-channel:hover{transform:translateY(-3px);border-color:rgba(255,23,68,.4);box-shadow:0 10px 25px rgba(0,0,0,.28)}
.tv-channel.active{
border-color:rgba(255,23,68,.65);
background:linear-gradient(145deg,rgba(255,23,68,.13),#10141b);
box-shadow:0 0 0 1px rgba(255,23,68,.08),0 10px 25px rgba(0,0,0,.22);
}
.tv-channel-icon{
display:grid;place-items:center;flex-shrink:0;border-radius:14px;
background:linear-gradient(145deg,#252b36,#151922);
border:1px solid rgba(255,255,255,.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 5px 15px rgba(0,0,0,.2);
line-height:1;position:relative;z-index:2;
}
.tv-channel-info{
min-width:0;width:100%;padding-top:9px;padding-right:5px;position:relative;z-index:2;
}
.tv-channel-info strong{
display:block;overflow:hidden;margin-bottom:5px;color:#fff;font-weight:900;line-height:1.2;
text-overflow:ellipsis;white-space:nowrap;
}
.tv-channel-info small{display:block;color:#9aa3b2;line-height:1.2}
.tv-channel-status{
position:absolute;top:13px;right:13px;z-index:3;display:inline-flex;
align-items:center;justify-content:center;min-height:32px;border-radius:999px;
background:rgba(255,23,68,.13);color:#ff5b78;font-weight:950;letter-spacing:1px;
}
.tv-channel.active .tv-channel-status{background:rgba(255,23,68,.2);color:#ff6b86}

.movies-content{padding-top:25px}
.movie-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.movie-card{
position:relative;min-width:0;min-height:150px;display:flex;flex-direction:column;
align-items:flex-start;justify-content:center;gap:7px;padding:17px;overflow:hidden;
border:1px solid var(--line);border-radius:14px;
background:linear-gradient(145deg,var(--surface),#0c1016);color:#fff;text-align:left;
cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;touch-action:manipulation;
}
.movie-card::before{
content:"";position:absolute;width:110px;height:110px;top:-58px;right:-8px;border-radius:50%;
background:rgba(255,23,68,.08);pointer-events:none;
}
.movie-card:hover{transform:translateY(-3px);border-color:rgba(255,23,68,.45);box-shadow:0 10px 25px rgba(0,0,0,.22)}
.movie-card.active{border-color:rgba(255,23,68,.65);background:linear-gradient(145deg,rgba(255,23,68,.13),#10141b);box-shadow:0 0 0 1px rgba(255,23,68,.08)}
/* =========================================================
   MOVIE CARD IMAGE BACKGROUND
   ========================================================= */

.movie-background {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;

  z-index: 0;

  pointer-events: none;

  transition: transform 0.3s ease;
}

.movie-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.35) 35%,
      rgba(0, 0, 0, 0.88) 100%
    );

  z-index: 1;

  pointer-events: none;
}

.movie-card:hover .movie-background {
  transform: scale(1.05);
}
.movie-status{
display:inline-flex;padding:4px 7px;border-radius:999px;background:rgba(255,23,68,.12);
color:#ff637d;font-size:8px;font-weight:950;letter-spacing:1px;position:relative;z-index:2;
}
.movie-icon{
position:absolute;top:15px;right:15px;width:42px;height:42px;display:grid;place-items:center;
border-radius:12px;background:linear-gradient(145deg,#252b36,#151922);
border:1px solid rgba(255,255,255,.09);font-size:20px;z-index:2;
}
.movie-title{
display:block;max-width:75%;overflow:hidden;font-size:16px;font-weight:900;line-height:1.2;
text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:2;
}
.movie-rating{color:var(--muted);font-size:11px;position:relative;z-index:2}
.empty-state{padding:35px 15px;color:var(--muted);text-align:center;font-size:13px}

.footer{border-top:1px solid var(--line);padding:20px 0;background:#05070a}
.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px}
.footer strong{color:#fff;font-size:12px;letter-spacing:.7px}
.footer strong span{color:var(--accent)}

@media (max-width:900px){
.match-grid,.movie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.highlight-grid,.tv-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:700px){
:root{--header-height:60px}
.nav-wrap{position:relative;min-height:60px}
.menu-toggle{display:grid;place-items:center;margin-left:auto}
.main-nav{
position:absolute;top:calc(100% + 1px);left:0;right:0;display:none;
flex-direction:column;align-items:stretch;gap:3px;padding:10px;
background:rgba(7,9,13,.98);border-bottom:1px solid var(--line);
box-shadow:0 15px 30px rgba(0,0,0,.3);
}
.main-nav.open{display:flex}
.main-nav a{padding:12px}
.screen-section{top:var(--header-height)}
.screen-player{border-radius:12px}
.screen-player iframe{height:400px}
.app-buttons{gap:8px;padding-bottom:2px;touch-action:pan-x}
.app-button{min-width:145px;min-height:52px;padding:8px 13px;font-size:11px}
.app-button-icon{font-size:16px}
}

@media (max-width:550px){
  .container{
    width:calc(100% - 20px);
  }

  .screen-section{
    top:var(--header-height);
    padding-top:9px;
    width:calc(100% + 20px);
    margin-left:-10px;
  }

  .screen-player{
    width:100%;
  }

  .screen-player iframe{
    height:300px;
  }

  .screen-bottom{
    padding:10px 10px;
  }

  #nowShowing{
    font-size:13px;
  }

  .fullscreen-button{
    width:36px;
    height:34px;
    font-size:16px;
  }

  .content-section{
    padding-top:18px;
  }

  .content-heading h1{
    font-size:19px;
  }
}

.match-grid{grid-template-columns:1fr;gap:9px}
.match-card{min-height:105px;height:105px;padding:9px 14px;gap:3px;border-radius:14px;border:1px solid rgba(255,23,68,.30);justify-content:center;text-align:center}
.match-card.is-upcoming{border-color:rgba(255,23,68,.30);background:linear-gradient(145deg,#11151c,#0b0e14)}
.match-card.is-upcoming:hover{transform:none;border-color:rgba(255,23,68,.55);box-shadow:0 6px 18px rgba(255,23,68,.08)}
.match-card.is-live{border-color:rgba(255,23,68,.65)}
.match-card.is-ended{min-height:105px;height:105px}
.match-status{min-height:21px;padding:4px 9px;margin:0 0 2px;font-size:7px;letter-spacing:.9px}
.match-teams{width:100%;font-size:15px;font-weight:900;line-height:1.15;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.match-date{display:inline-block;margin-top:2px;color:#9da6b4;font-size:9px;font-weight:700;line-height:1.1}
.match-time{display:inline-block;color:#fff;font-size:11px;font-weight:900;line-height:1.1;margin-left:4px}
.match-date+.match-time{margin-top:0}
.match-countdown{margin-top:3px;color:#ff637d;font-size:9px;font-weight:800;line-height:1.1}
.match-card.is-live .match-countdown{color:#ff637d}
.match-card.is-ended .match-countdown{color:#777e89}

.match-card, .highlight-card, .tv-channel, .movie-card {
  position: relative;
}
.share-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  font-size: 14px;
  z-index: 5;
  cursor: pointer;
}
.share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #10131a;
  border: 1px solid #2a2e37;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.highlight-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.highlight-card{min-height:128px;padding:11px;border-radius:14px}
.highlight-thumbnail{width:45px;height:45px;border-radius:13px;font-size:22px}
.highlight-thumbnail span{font-size:21px}
.highlight-card strong{padding:7px 4px 0 0;font-size:12px}
.highlight-card small{padding:4px 4px 0 0;font-size:9px}
.highlight-card::before{width:100px;height:100px;top:-54px;right:-8px}
.highlight-card::after{width:76px;height:76px;top:-42px;right:18px}

.tv-category{padding-top:18px}
.tv-category-heading h2{font-size:16px}
.tv-category-heading span{font-size:9px}
.tv-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

/* Smaller TV channel cards on mobile */
.tv-channel{
  width:100%;
  max-width:none;
  min-height:112px;
  padding:12px 10px;
  border-radius:14px;
}

.tv-channel-icon{
  width:45px;
  height:45px;
  border-radius:12px;
  font-size:23px;
}

.tv-channel-info{
  padding:0;
  text-align:center;
}

.tv-channel-info strong{
  font-size:12px;
}

.tv-channel-info small{
  font-size:9px;
}

.tv-channel-status{
  top:9px;
  right:9px;
  min-height:22px;
  padding:4px 7px;
  font-size:7px;
}
.tv-channel-icon{width:52px;height:52px;border-radius:13px;font-size:26px}
.tv-channel-status{top:11px;right:11px;min-height:27px;padding:5px 7px;font-size:7px;letter-spacing:.8px}
.tv-channel-info{padding-top:6px}
.tv-channel-info strong{margin-bottom:3px;font-size:12px}
.tv-channel-info small{font-size:9px}
.tv-channel::before{width:100px;height:100px;top:-54px;right:-8px}
.tv-channel::after{width:76px;height:76px;top:-42px;right:18px}

.movie-grid{grid-template-columns:1fr;gap:10px}
.movie-card{min-height:125px;padding:15px;border-radius:14px}
.movie-status{font-size:8px;padding:4px 7px}
.movie-title{font-size:15px;max-width:72%}
.movie-rating{font-size:10px}
.movie-icon{width:43px;height:43px;top:13px;right:13px;border-radius:12px;font-size:20px}

.footer-wrap{flex-direction:column;align-items:flex-start}
}

@media (max-width:360px){
.app-button{min-width:140px;font-size:10px;gap:5px}
.app-button-icon{font-size:14px}

.match-card{min-height:100px;height:100px;padding:8px 12px;gap:2px}
.match-card.is-ended{min-height:100px;height:100px}
.match-status{min-height:20px;padding:4px 8px;font-size:7px}
.match-teams{font-size:14px}
.match-date{font-size:8px}
.match-time{font-size:10px}
.match-countdown{font-size:8px;margin-top:2px}

.highlight-grid{gap:7px}
.highlight-card{min-height:122px;padding:10px;border-radius:13px}
.highlight-thumbnail{width:43px;height:43px;border-radius:12px;font-size:21px}
.highlight-thumbnail span{font-size:20px}
.highlight-card strong{font-size:12px}
.highlight-card small{font-size:9px}

.tv-channel-grid{gap:7px}
/* Keep TV channel cards compact on very small phones */
.tv-channel{width:140px;max-width:140px;min-height:140px;padding:10px;border-radius:13px}
.tv-channel-icon{width:45px;height:45px;border-radius:12px;font-size:22px}
.tv-channel-status{top:10px;right:10px;padding:5px 7px;font-size:7px}
.tv-channel-info strong{font-size:11px}
.tv-channel-info small{font-size:8px}

.movie-card{min-height:120px;padding:14px}
.movie-title{font-size:14px}
.movie-icon{width:40px;height:40px;top:12px;right:12px;font-size:19px}
}

@media (orientation:landscape){
.screen-player:fullscreen,.screen-player:-webkit-full-screen{width:100vw;height:100vh;min-width:100vw;min-height:100vh}
.screen-player:fullscreen iframe,.screen-player:-webkit-full-screen iframe{width:100vw;height:100vh;min-width:100vw;min-height:100vh}
}

@media (max-width:550px){
.screen-player:fullscreen .fullscreen-button,.screen-player:-webkit-full-screen .fullscreen-button{
top:14px;right:14px;width:48px;height:48px;font-size:31px;
}
}

/* =========================================================
   HEADER ACTION BUTTONS
   ========================================================= */

.header-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;

  padding-top: 0;
  padding-bottom: 8px;
}


.header-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  height: 32px;
  padding: 0 11px;

  border: 1px solid #2a2e37;
  border-radius: 8px;

  background: #10131a;
  color: #ffffff;

  font-size: 10px;
  font-weight: 700;

  text-decoration: none;
  white-space: nowrap;

  transition: 0.2s ease;
}


.header-action-button:hover {
  border-color: #e9003f;
  background: #171a22;
}


.header-action-button:active {
  transform: scale(0.97);
}


@media (max-width: 550px) {

  .header-action-buttons {
    gap: 6px;
    padding-bottom: 7px;
  }

  .header-action-button {
    height: 32px;
    padding: 0 11px;
    font-size: 10px;
  }

}

/* =========================================================
   MOVIE GENRE FILTERS
   ========================================================= */

.movie-heading {
  align-items: flex-start;
}

.movie-heading-left {
  min-width: 0;
  flex: 1;
}

.movie-heading-left h1 {
  margin-bottom: 12px;
}

.movie-genres {
  display: flex;
  align-items: center;
  gap: 8px;

  width: 100%;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  padding-bottom: 5px;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.movie-genres::-webkit-scrollbar {
  display: none;
}

.movie-genre {
  flex: 0 0 auto;

  min-height: 34px;

  padding: 0 14px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;

  background: #10141b;

  color: #9aa3b2;

  font: inherit;
  font-size: 11px;
  font-weight: 800;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.movie-genre:hover {
  border-color: rgba(255, 23, 68, 0.45);

  color: #ffffff;

  background: #171b23;
}

.movie-genre.active {
  border-color: rgba(255, 23, 68, 0.75);

  background: rgba(255, 23, 68, 0.14);

  color: #ffffff;

  box-shadow:
    0 0 0 1px rgba(255, 23, 68, 0.08);
}

.movie-genre:active {
  transform: scale(0.96);
}


/* MOBILE */

@media (max-width: 550px) {

  .movie-heading {
    gap: 10px;
  }

  .movie-heading-left h1 {
    margin-bottom: 10px;
  }

  .movie-genre {
    min-height: 32px;

    padding: 0 12px;

    font-size: 10px;
  }

}
/* =========================================================
   MOVIE GENRE FILTER VISIBILITY
   ========================================================= */

.movie-card.genre-hidden {
  display: none !important;
}

/* =========================================================
   MOVIE SEARCH
   ========================================================= */

.movie-title-search {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;

  margin-bottom: 12px;
}

.movie-title-search h1 {
  margin: 0;
  flex: 0 0 auto;
}

.movie-search {
  position: relative;

  flex: 1;
  min-width: 0;
}

.movie-search-icon {
  position: absolute;

  left: 13px;
  top: 50%;

  transform: translateY(-50%);

  color: #9aa3b2;

  font-size: 20px;

  pointer-events: none;
}

.movie-search input {
  width: 100%;
  height: 42px;

  padding: 0 14px 0 42px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;

  outline: none;

  background: #10141b;

  color: #ffffff;

  font: inherit;
  font-size: 12px;
  font-weight: 600;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.movie-search input::placeholder {
  color: #727b89;
}

.movie-search input:focus {
  border-color: rgba(255, 23, 68, 0.70);

  background: #151922;

  box-shadow:
    0 0 0 3px rgba(255, 23, 68, 0.08);
}


/* MOBILE */

@media (max-width: 550px) {

  .movie-title-search {
    gap: 10px;
  }

  .movie-title-search h1 {
    font-size: 28px;
  }

  .movie-search input {
    height: 40px;
    font-size: 11px;
  }

}

/* =========================================================
   EXTRA COMPACT TOP PLAYER AND NAVIGATION
   Does NOT change iframe/video screen resolution
   ========================================================= */

/* Move top player area upward */
.screen-section {
  padding-top: 3px;
}


/* Slim navigation area */
.app-menu {
  padding: 5px 0 2px;
}

.app-buttons {
  gap: 6px;
}


/* Football Live, Highlights, TV Channels, Movies */
.app-button {
  min-height: 38px;
  padding: 4px 11px;
  border-radius: 10px;
}


/* Bring Movies/content upward */
.content-section {
  padding-top: 8px;
}


/* Reduce Now Showing area */
.screen-bottom {
  padding: 4px 10px;
  gap: 7px;
}


/* Compact Now Showing text */
.now-showing span {
  margin-bottom: 0;
}

#nowShowing {
  line-height: 1.1;
}


/* Smaller fullscreen button */
.fullscreen-button {
  width: 34px;
  height: 30px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 550px) {

  .screen-section {
    padding-top: 0;
  }

  .app-menu {
    padding: 4px 0 1px;
  }

  .app-buttons {
    gap: 6px;
  }

  .section-header h2,
.content-header h2,
.category-header h2 {
  display: none;
}

.section-header,
.content-header,
.category-header {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
  /* Extra slim buttons */
  .app-button {
    min-width: 125px;
    min-height: 38px;
    padding: 3px 10px;
    font-size: 10px;
  }

  /* Reduce space below navigation */
  .content-section {
    padding-top: 8px;
  }

  /* Extra compact Now Showing section */
  .screen-bottom {
    padding: 4px 9px;
    gap: 6px;
  }

  .now-showing span {
    font-size: 7px;
    margin-bottom: 0;
  }

  #nowShowing {
    font-size: 12px;
    line-height: 1.1;
  }

  .fullscreen-button {
    width: 34px;
    height: 30px;
  }
}

/* =========================================================
   SMALLER CATEGORY HEADER TEXTS
   ========================================================= */

.section-header h2,
.content-header h2,
.category-header h2 {
  font-size: 10px;
  line-height: 1;
}


/* Mobile */
@media (max-width: 550px) {
  .section-header h2,
  .content-header h2,
  .category-header h2 {
    font-size: 5px;
    line-height: 1;
  }
}

/* REMOVE CATEGORY HEADERS AND THEIR SPACE
   EXCEPT THE MOVIES HEADER */

.content-heading:not(.movies-content .content-heading),
.tv-category-heading {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Hide status in fullscreen */
.screen-player:fullscreen .screen-status,
.screen-player:-webkit-full-screen .screen-status {
    display: none !important;
}

/* =========================================================
   DEEPROWS APP DOWNLOAD POPUP
   ========================================================= */

.deeprows-app-popup[hidden] {
    display: none !important;
}

.deeprows-app-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.deeprows-app-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.deeprows-app-popup-card {
    position: relative;
    z-index: 2;
    width: min(420px, 100%);
    padding: 30px 24px 24px;
    background: #101512;
    border: 1px solid rgba(0, 255, 120, 0.25);
    border-radius: 22px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
    text-align: center;
    color: #fff;
    animation: deeprowsPopupIn 0.3s ease;
}

@keyframes deeprowsPopupIn {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

.deeprows-app-popup-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 120, 0.12);
    border-radius: 18px;
    font-size: 32px;
}

.deeprows-app-popup-card h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 800;
}

.deeprows-app-popup-card p {
    margin: 0 auto 22px;
    max-width: 330px;
    color: #b9c2bc;
    font-size: 14px;
    line-height: 1.6;
}

.deeprows-app-popup-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #18d66b;
    color: #061109;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.deeprows-app-popup-download:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.deeprows-app-popup-browser {
    width: 100%;
    margin-top: 10px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: #aeb8b1;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.deeprows-app-popup-browser:hover {
    color: #fff;
}

.deeprows-app-popup-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.deeprows-app-popup-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

body.deeprows-popup-open {
    overflow: hidden;
}

@media (max-width: 550px) {

    .deeprows-app-popup {
        align-items: flex-end;
        padding: 12px;
    }

    .deeprows-app-popup-card {
        width: 100%;
        padding: 28px 20px 18px;
        border-radius: 20px;
    }

    .deeprows-app-popup-card h2 {
        font-size: 21px;
    }

    .deeprows-app-popup-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

}

/* =========================================================
   REFRESH CONTENT BUTTON
   ========================================================= */

.refresh-page-btn {
  position: fixed;
  left: 15px;
  bottom: 45px;

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background: #1db954;
  color: #fff;

  font-size: 25px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  z-index: 9999;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);

  transition: transform 0.2s ease;
}

.refresh-page-btn:active {
  transform: scale(0.9);
}

.share-btn {
  top: auto !important;
  bottom: 8px !important;
  right: 8px !important;
}

.disclaimer-menu-link {
  text-align: center;
  margin: 10px auto 15px;
}

.disclaimer-menu-link a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.disclaimer-menu-link a:hover {
  text-decoration: underline;
}

.match-card {
  height: auto;          /* don't force a fixed height */
  min-height: 0;
}
.match-teams {
  white-space: normal;   /* allow wrapping instead of one-line clipping */
  overflow: visible;
  text-overflow: unset;
  line-height: 1.3;
  word-break: break-word;
  font-size: clamp(13px, 3.5vw, 16px); /* shrink on small screens instead of clipping */
}

/* =========================================================
   X2 ONCLICK ADS NOTICE
   Floating near the bottom / footer
   ========================================================= */

.x2-ad-notice {
  position: fixed;

  /*
   * Keep it floating near the bottom of the screen.
   * It is independent of where the HTML sits in the body.
   */
  left: 50%;
  bottom: 70px;
  top: auto;

  transform: translateX(-50%) translateY(20px);

  width: calc(100% - 32px);
  max-width: 420px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 10px 12px 10px 15px;

  background: #111;
  color: #fff;

  border: 1px solid rgba(255, 0, 0, 0.35);
  border-radius: 10px;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);

  /*
   * Above normal page content, but below fullscreen player.
   */
  z-index: 9998;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}


/* =========================================================
   VISIBLE STATE
   ========================================================= */

.x2-ad-notice.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateX(-50%) translateY(0);
}


/* =========================================================
   TEXT
   ========================================================= */

.x2-ad-notice-text {
  flex: 1;
  min-width: 0;

  font-size: 13px;
  line-height: 1.35;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.x2-ad-notice-close {
  flex-shrink: 0;

  width: 28px;
  height: 28px;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: transparent;
  color: #fff;

  font-size: 22px;
  line-height: 28px;

  cursor: pointer;
}

.x2-ad-notice-close:hover {
  background: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

body.light-mode .x2-ad-notice,
body.light .x2-ad-notice {
  background: #fff;
  color: #111;
  border-color: rgba(255, 0, 0, 0.4);
}

body.light-mode .x2-ad-notice-close,
body.light .x2-ad-notice-close {
  color: #111;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .x2-ad-notice {
    left: 50%;
    top: auto;

    /*
     * Leave enough room above the bottom navigation/footer.
     */
    bottom: 62px;

    width: calc(100% - 20px);

    padding: 9px 10px 9px 13px;

    transform: translateX(-50%) translateY(20px);
  }

  .x2-ad-notice.show {
    transform: translateX(-50%) translateY(0);
  }

  .x2-ad-notice-text {
    font-size: 12px;
  }

}

/* =========================================
   DEEPROWSS MOVIES & HIGHLIGHTS TICKER
   Normal page layout
   Movies → Highlights
   ========================================= */

.deeprowss-ticker {
  position: relative;

  width: 100%;
  height: 40px;

  display: flex;
  align-items: center;

  background: #111;
  color: #fff;

  border-bottom:
    1px solid rgba(255, 0, 0, 0.45);

  overflow: hidden;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2);

  z-index: 99998;

  opacity: 1;

  transition:
    opacity 0.3s ease,
    height 0.3s ease,
    transform 0.3s ease;
}


/* =========================================
   HIDDEN / CLOSED
   ========================================= */

.deeprowss-ticker.is-hidden {
  opacity: 0;

  pointer-events: none;

  height: 0;

  transform:
    translateY(-20px);

  border: none;

  overflow: hidden;
}


/* =========================================
   NOTIFICATION ICON
   ========================================= */

.deeprowss-ticker-label {
  width: 42px;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  background: #d60000;

  color: #fff;
}


.deeprowss-ticker-notification-icon {
  font-size: 17px;

  line-height: 1;
}


/* =========================================
   SCROLLING WINDOW
   ========================================= */

.deeprowss-ticker-window {
  flex: 1;

  height: 100%;

  min-width: 0;

  overflow: hidden;

  display: flex;
  align-items: center;
}


/* =========================================
   MOVING TRACK
   ========================================= */

.deeprowss-ticker-track {
  display: inline-flex;

  align-items: center;

  width: max-content;

  white-space: nowrap;

  will-change: transform;

  animation:
    deeprowssTickerMove
    var(--ticker-speed, 35s)
    linear
    infinite;
}


@keyframes deeprowssTickerMove {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* Pause on hover */

.deeprowss-ticker-window:hover
.deeprowss-ticker-track {
  animation-play-state: paused;
}


/* =========================================
   INDIVIDUAL ITEM
   ========================================= */

.deeprowss-ticker-item {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-right: 30px;

  padding: 0;

  border: none;

  background: transparent;

  color: inherit;

  font-family: inherit;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  text-decoration: none;

  white-space: nowrap;
}


.deeprowss-ticker-item:hover {
  color: #ff4b4b;
}


/* =========================================
   MOVIE / HIGHLIGHT BADGE
   ========================================= */

.deeprowss-ticker-badge {
  padding: 3px 6px;

  border-radius: 4px;

  background:
    rgba(255, 255, 255, 0.1);

  color: inherit;

  font-size: 9px;

  font-weight: 800;

  line-height: 1.2;

  text-transform: uppercase;
}


/* =========================================
   SEPARATOR
   ========================================= */

.deeprowss-ticker-separator {
  color:
    rgba(255, 255, 255, 0.35);

  margin-right: 30px;

  flex-shrink: 0;
}


/* =========================================
   CLOSE BUTTON
   ========================================= */

.deeprowss-ticker-close {
  width: 38px;

  height: 100%;

  padding: 0;

  border: none;

  border-left:
    1px solid
    rgba(255, 255, 255, 0.1);

  background: #111;

  color: #fff;

  font-family: inherit;

  font-size: 22px;

  line-height: 1;

  cursor: pointer;

  flex-shrink: 0;

  transition:
    background 0.2s ease;
}


.deeprowss-ticker-close:hover {
  background:
    rgba(255, 255, 255, 0.08);
}


/* =========================================
   LIGHT MODE
   ========================================= */

body.light-mode .deeprowss-ticker,
body.light .deeprowss-ticker {
  background: #fff;

  color: #111;

  border-bottom-color:
    rgba(255, 0, 0, 0.4);
}


body.light-mode
.deeprowss-ticker-close,
body.light
.deeprowss-ticker-close {
  background: #fff;

  color: #111;
}


body.light-mode
.deeprowss-ticker-close:hover,
body.light
.deeprowss-ticker-close:hover {
  background:
    rgba(0, 0, 0, 0.06);
}


body.light-mode
.deeprowss-ticker-separator,
body.light
.deeprowss-ticker-separator {
  color:
    rgba(0, 0, 0, 0.3);
}


body.light-mode
.deeprowss-ticker-badge,
body.light
.deeprowss-ticker-badge {
  background:
    rgba(0, 0, 0, 0.08);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

  .deeprowss-ticker {
    width: 100%;

    height: 38px;
  }


  .deeprowss-ticker-label {
    width: 38px;
  }


  .deeprowss-ticker-notification-icon {
    font-size: 16px;
  }


  .deeprowss-ticker-item {
    font-size: 11px;

    margin-right: 24px;
  }


  .deeprowss-ticker-badge {
    font-size: 8px;

    padding: 3px 5px;
  }


  .deeprowss-ticker-separator {
    margin-right: 24px;
  }


  .deeprowss-ticker-close {
    width: 34px;

    font-size: 21px;
  }

}

/* =====================================================
   DESKTOP / PC LAYOUT ONLY
   These rules affect screens wider than 768px
   ===================================================== */

@media screen and (min-width: 769px) {

    /* Desktop page width */
    body {
        overflow-x: hidden;
    }

    /* Main content width */
    .container {
        width: 95%;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* -------------------------------------------------
       PLAYER SECTION - DESKTOP
       Prevent sticky player from covering page content
       ------------------------------------------------- */

    .screen-section {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;

        width: 100%;
        max-width: 1400px;

        margin-left: auto;
        margin-right: auto;
    }

    /* Player stays properly sized on PC */
    .screen-player {
        position: relative;

        width: 100%;
        max-width: 100%;
    }

    /* Desktop iframe wrapper */
    .screen-frame-wrap {
        position: relative;

        width: 100%;
        max-width: 100%;

        aspect-ratio: 16 / 9;
        max-height: 700px;

        overflow: hidden;
    }

    /* Force iframe to fit its container */
    #screenFrame {
        display: block;

        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;

        border: 0;
    }

    /* -------------------------------------------------
       CONTENT SECTIONS
       Keep all fixtures, movies and other content visible
       ------------------------------------------------- */

    .content-section {
        position: relative !important;

        width: 100%;
        max-width: 1400px;

        margin-left: auto;
        margin-right: auto;

        z-index: 2 !important;
    }

    /* Make sure hidden sections stay hidden */
    .content-section[hidden] {
        display: none !important;
    }

    /* -------------------------------------------------
       FIXTURE AND CONTENT GRIDS
       ------------------------------------------------- */

    .match-grid,
    .movie-grid,
    .highlight-grid,
    .tv-grid {
        position: relative;

        width: 100%;
        max-width: 100%;
    }

}

/* =========================================================
   SEO CONTENT SECTION
   ========================================================= */

.seo-content {
  width: 100%;
  max-width: 1100px;
  margin: 40px auto;
  padding: 24px;
  line-height: 1.7;
}

.seo-content h2 {
  margin-top: 28px;
  margin-bottom: 12px;
}

.seo-content p {
  margin-bottom: 16px;
}

/* =========================================================
   SEO CONTENT — HIDDEN FROM FRONTEND
   ========================================================= */

.seo-content {
  display: none !important;
}

/* =========================================================
   MATCH CHAT
   ========================================================= */

.match-chat {
  width: 100%;
  margin-top: 20px;
}


/* CHAT HEADER */

.match-chat-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}


.chat-back-button {
  width: fit-content;
  border: none;
  background: transparent;
  color: #1e5eff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0;
}


.chat-back-button:hover {
  opacity: 0.8;
}


.match-chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
}


.match-chat-title > span {
  font-size: 30px;
}


.match-chat-title strong {
  display: block;
  font-size: 20px;
}


.match-chat-title small {
  display: block;
  margin-top: 3px;
  opacity: 0.65;
}


/* =========================================================
   NAME SETUP
   ========================================================= */

.chat-name-setup {
  max-width: 500px;
  margin: 30px auto;
  padding: 25px;
  border-radius: 16px;
  background: var(--card-bg, #ffffff);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}


.chat-name-setup h2 {
  margin-top: 0;
  margin-bottom: 8px;
}


.chat-name-setup p {
  margin-top: 0;
  margin-bottom: 20px;
  opacity: 0.7;
}


.chat-name-setup input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
  margin-bottom: 10px;
}


.random-name-button,
.enter-chat-button {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
}


.random-name-button {
  background: #f0f2f5;
}


.enter-chat-button {
  background: #1e5eff;
  color: white;
}


/* =========================================================
   CHAT ROOM
   ========================================================= */

.chat-room {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg, #ffffff);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}


.chat-messages {
  height: 500px;
  overflow-y: auto;
  padding: 18px;
  box-sizing: border-box;
}


.chat-loading {
  text-align: center;
  opacity: 0.6;
  padding: 30px;
}


/* INDIVIDUAL MESSAGE */

.chat-message {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


.chat-message:last-child {
  border-bottom: none;
}


.chat-message-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e5eff;
  margin-bottom: 5px;
}


.chat-message-text {
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
}


/* =========================================================
   CHAT FORM
   ========================================================= */

.chat-form {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}


#chatMessageInput {
  flex: 1;
  min-width: 0;
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
}


#sendChatMessage {
  border: none;
  background: #1e5eff;
  color: white;
  border-radius: 10px;
  padding: 0 20px;
  font-weight: 700;
  cursor: pointer;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .chat-name-setup {
    margin: 20px 0;
    padding: 18px;
  }


  .chat-messages {
    height: 55vh;
    min-height: 350px;
  }


  .chat-form {
    padding: 10px;
  }


  #sendChatMessage {
    padding: 0 14px;
  }

}

/* =========================================================
   DEEPROWSS FORCE FULLSCREEN LANDSCAPE PLAYER
   ========================================================= */

.screen-player.fullscreen-active,
.screen-player:fullscreen,
.screen-player:-webkit-full-screen,
.screen-player:-moz-full-screen,
.screen-player:-ms-fullscreen {

  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  min-width: 100vw !important;
  min-height: 100vh !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: #000 !important;

  overflow: hidden !important;

  z-index: 2147483647 !important;
}


/* =========================================================
   FULLSCREEN FRAME
   ========================================================= */

.screen-player.fullscreen-active
.screen-frame-wrap,
.screen-player:fullscreen
.screen-frame-wrap,
.screen-player:-webkit-full-screen
.screen-frame-wrap {

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  min-width: 100vw !important;
  min-height: 100vh !important;

  max-width: none !important;
  max-height: none !important;

  aspect-ratio: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #000 !important;

  overflow: hidden !important;
}


/* =========================================================
   FULLSCREEN IFRAME
   ========================================================= */

.screen-player.fullscreen-active iframe,
.screen-player:fullscreen iframe,
.screen-player:-webkit-full-screen iframe,
.screen-player:-moz-full-screen iframe,
.screen-player:-ms-fullscreen iframe {

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  min-width: 100vw !important;
  min-height: 100vh !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: #000 !important;

  display: block !important;

  transform: none !important;
}


/* =========================================================
   HIDE NORMAL PAGE CONTENT WHILE FULLSCREEN
   ========================================================= */

.screen-player.fullscreen-active
~ * {

  pointer-events: none;
}


/* =========================================================
   FULLSCREEN CLOSE BUTTON
   ========================================================= */

.screen-player.fullscreen-active
.fullscreen-button,
.screen-player:fullscreen
.fullscreen-button,
.screen-player:-webkit-full-screen
.fullscreen-button {

  position: fixed !important;

  top: 16px !important;
  right: 16px !important;

  width: 52px !important;
  height: 52px !important;

  z-index: 2147483647 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;

  background: rgba(0, 0, 0, 0.70) !important;

  color: #fff !important;

  font-size: 32px !important;

  border: 1px solid rgba(255,255,255,.25) !important;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  pointer-events: auto !important;

}


/* =========================================================
   MOBILE FULLSCREEN
   ========================================================= */

@media (max-width: 768px) {

  .screen-player.fullscreen-active,
  .screen-player:fullscreen,
  .screen-player:-webkit-full-screen {

    width: 100vw !important;
    height: 100vh !important;

    width: 100dvw !important;
    height: 100dvh !important;

  }


  .screen-player.fullscreen-active iframe,
  .screen-player:fullscreen iframe,
  .screen-player:-webkit-full-screen iframe {

    width: 100vw !important;
    height: 100vh !important;

    width: 100dvw !important;
    height: 100dvh !important;

  }

}


/* =========================================================
   LANDSCAPE
   ========================================================= */

@media (orientation: landscape) {

  .screen-player.fullscreen-active,
  .screen-player:fullscreen,
  .screen-player:-webkit-full-screen {

    width: 100vw !important;
    height: 100vh !important;

  }

  .screen-player.fullscreen-active iframe,
  .screen-player:fullscreen iframe,
  .screen-player:-webkit-full-screen iframe {

    width: 100vw !important;
    height: 100vh !important;

  }

}

/* Hide Alternative Screen button in landscape fullscreen */
@media (orientation: landscape) {
  .screen-player:fullscreen #altScreenButton,
  .screen-player:-webkit-full-screen #altScreenButton {
    display: none !important;
  }
}