:root {
  --bg: #050505;
  --panel: rgba(9, 9, 10, .88);
  --panel-soft: rgba(13, 13, 15, .72);
  --white: #f5f5f2;
  --muted: #a3a3a3;
  --dim: #656565;
  --red: #e02828;
  --red-bright: #ff3535;
  --line: rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.28);
  --focus: #fff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100%; }
html { background: var(--bg); font-size: clamp(14px, .95vw, 19px); }

body {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: "SamsungOne", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }
.is-hidden { display: none !important; }

.billboard {
  position: fixed;
  inset: 0;
  background-color: #0b0b0d;
  background-size: cover;
  background-position: center 22%;
  transform: scale(1.025);
  transition: background-image .55s ease, opacity .3s ease;
}

.billboard.is-idle {
  transform: none;
  background-image:
    radial-gradient(70% 90% at 74% 44%, rgba(224,40,40,.12), transparent 58%),
    linear-gradient(118deg, #070707 0%, #101013 48%, #070707 100%);
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,2,3,.97) 0%, rgba(2,2,3,.88) 25%, rgba(2,2,3,.30) 57%, rgba(2,2,3,.12) 100%),
    linear-gradient(0deg, rgba(2,2,3,.98) 0%, rgba(2,2,3,.66) 28%, transparent 55%),
    linear-gradient(180deg, rgba(2,2,3,.78) 0%, transparent 22%);
}

.texture {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 58%, transparent 100%);
}

.head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2rem 3.6rem 0;
  direction: ltr;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: inherit;
  text-decoration: none;
  direction: ltr;
}

.brand__sigil {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(5,5,5,.55);
  font-size: 1.45rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.08em;
  box-shadow: inset 4px 0 0 var(--red);
}

.brand__text { display: flex; flex-direction: column; gap: .12rem; }
.brand__mark { font-size: 1.16rem; font-weight: 800; letter-spacing: .12em; line-height: 1; }
.brand__mark b { color: var(--red-bright); }
.brand__sub { color: #8b8b8b; font-size: .56rem; font-weight: 700; letter-spacing: .28em; }
.brand__img { height: 3.1rem; width: auto; }

.head__status { text-align: right; direction: rtl; min-width: 18rem; }
.head__eyebrow {
  display: block;
  margin-bottom: .35rem;
  color: #777;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  direction: ltr;
}
.head__count { font-size: 1rem; font-weight: 750; }
.head__count.is-live::before {
  content: "";
  display: inline-block;
  width: .48rem;
  height: .48rem;
  margin-inline-end: .5rem;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 12px rgba(255,53,53,.85);
  animation: pulse 1.8s ease-in-out infinite;
}
.head__audience { margin-top: .15rem; color: #929292; font-size: .76rem; }
@keyframes pulse { 50% { opacity: .4; transform: scale(.76); } }

.notice {
  position: relative;
  z-index: 4;
  margin: .7rem 3.6rem 0;
  color: #ff7e7e;
  font-size: .78rem;
}
.notice:empty { display: none; }

.deck {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  padding: 0 3.6rem 2.5rem;
}

.feature-shell { max-width: 50rem; }
.feature-kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .55rem;
  color: #8f8f8f;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .18em;
  direction: ltr;
}
.feature-kicker__line { width: 2.2rem; height: 2px; background: var(--red); }

.feature { min-height: 10.5rem; max-width: 41rem; }
.feature__flag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .48rem;
  border: 1px solid rgba(255,75,75,.38);
  background: rgba(155,12,12,.64);
  color: #fff;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .14em;
  direction: ltr;
}
.feature__flag::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #fff; }
.feature__name {
  margin-top: .52rem;
  max-width: 100%;
  font-size: clamp(2.5rem, 5.2vw, 5.4rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .92;
  direction: ltr;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 5px 30px rgba(0,0,0,.7);
}
.feature__title {
  margin-top: .7rem;
  max-width: 38rem;
  color: #e5e5e5;
  font-size: .96rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .45rem;
  color: #8f8f8f;
  font-size: .75rem;
}
.feature__meta span + span::before { content: "•"; margin-inline-end: 1rem; color: #4f4f4f; }
.feature__viewers { color: #d4d4d4; direction: ltr; font-weight: 800; }

.feature__cta {
  position: relative;
  margin-top: 1.05rem;
  min-width: 9.4rem;
  padding: .72rem 1.35rem;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 0;
  background: rgba(240,240,237,.96);
  color: #070707;
  font: inherit;
  font-size: .9rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.feature__cta::after { content: "▶"; margin-inline-start: .72rem; font-size: .7rem; }
.feature__cta:hover { transform: translateY(-2px); }
.feature__cta:focus, .feature__cta.is-focused {
  outline: none;
  background: var(--red-bright);
  border-color: var(--red-bright);
  color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,53,53,.85);
}

.feature__idle { margin-top: .45rem; font-size: 2.2rem; font-weight: 900; }
.feature__idle-sub { margin-top: .45rem; max-width: 37rem; color: #8f8f8f; font-size: .9rem; }

.channels { margin-top: 1.55rem; }
.channels__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .62rem;
  border-top: 1px solid var(--line);
  padding-top: .72rem;
}
.channels__title { font-size: .88rem; font-weight: 850; }
.channels__hint { color: #666; font-size: .62rem; }

.row {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  padding: .3rem .25rem .45rem;
  scrollbar-width: none;
  direction: rtl;
}
.row::-webkit-scrollbar { display: none; }

.chip {
  position: relative;
  flex: 0 0 auto;
  width: 14rem;
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  background: rgba(10,10,11,.80);
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.chip::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.chip:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.chip:focus, .chip.is-focused {
  outline: none;
  transform: translateY(-4px) scale(1.018);
  border-color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 14px 30px rgba(0,0,0,.62);
}
.chip:focus::before, .chip.is-focused::before { background: var(--red-bright); }
.chip.is-current { border-color: rgba(255,53,53,.68); }
.chip.is-current::before { background: var(--red); }

.chip__art {
  position: relative;
  aspect-ratio: 16 / 8.7;
  background-color: #141416;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.chip__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.56), transparent 58%);
}
.chip__flag {
  position: absolute;
  z-index: 2;
  top: .52rem;
  inset-inline-start: .52rem;
  padding: .18rem .4rem;
  border-radius: 0;
  background: var(--red);
  color: #fff;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .12em;
  direction: ltr;
}
.chip__viewers {
  position: absolute;
  z-index: 2;
  bottom: .45rem;
  inset-inline-end: .48rem;
  padding: .12rem .36rem;
  border-radius: 0;
  background: rgba(0,0,0,.74);
  color: #fff;
  font-size: .61rem;
  font-weight: 800;
  direction: ltr;
}
.chip__viewers::after { content: " WATCHING"; color: #8f8f8f; font-size: .5rem; }

.chip__art--off {
  display: grid;
  place-items: center;
  background: linear-gradient(125deg, #141416, #09090a);
}
.chip__art--off::before {
  content: "OFFLINE";
  position: absolute;
  z-index: 2;
  top: .55rem;
  inset-inline-start: .55rem;
  color: #555;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .13em;
  direction: ltr;
}
.chip__initial {
  position: relative;
  z-index: 2;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: 1px solid #333;
  border-radius: 0;
  background: transparent;
  color: #6d6d6d;
  font-size: 1.45rem;
  font-weight: 900;
  direction: ltr;
}
.chip__body {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .55rem .72rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.chip__name { color: #eee; font-size: .78rem; font-weight: 900; letter-spacing: .02em; direction: ltr; }
.chip__state { color: #6f6f6f; font-size: .62rem; white-space: nowrap; }
.chip.is-current .chip__state { color: #ff6a6a; }
.chip--off { opacity: .68; }
.chip--off:focus, .chip--off.is-focused { opacity: 1; }

.stage { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #000; }
.stage__frame { flex: 1; min-height: 0; background: #000; }
.stage__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.stage__bar {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 2rem;
  border-top: 1px solid #262626;
  background: #080808;
  direction: ltr;
}
.stage__identity { display: flex; align-items: center; gap: .8rem; }
.stage__live { padding: .25rem .42rem; background: var(--red); color: #fff; font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.stage__meta { text-align: left; }
.stage__name { font-size: .98rem; font-weight: 900; direction: ltr; }
.stage__title { max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #888; font-size: .72rem; }
.stage__actions { display: flex; gap: .55rem; direction: rtl; }
.btn {
  padding: .58rem 1rem;
  border: 1px solid #fff;
  border-radius: 0;
  background: #f4f4f1;
  color: #080808;
  font: inherit;
  font-size: .74rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.btn--ghost { background: transparent; border-color: #383838; color: #ddd; }
.btn:focus, .btn.is-focused { outline: 2px solid var(--red-bright); outline-offset: 2px; }

@media (max-width: 900px) {
  .head { padding-inline: 2rem; }
  .deck { padding-inline: 2rem; }
  .notice { margin-inline: 2rem; }
  .feature__name { font-size: clamp(2.5rem, 8vw, 4rem); }
  .chip { width: 12rem; }
}

@media (max-width: 700px) {
  body { overflow: auto; }
  .head { padding: 1.2rem; }
  .head__status { min-width: 0; }
  .head__eyebrow, .channels__hint { display: none; }
  .brand__sub { letter-spacing: .16em; }
  .deck { position: static; padding: 42vh 1.2rem 2rem; }
  .notice { margin-inline: 1.2rem; }
  .feature { min-height: 0; }
  .feature__title { white-space: normal; }
  .chip { width: 11.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .billboard { transform: none; }
}