@charset "UTF-8";

/* ============================================================
   Home — تعزيزات الواجهة الرئيسية
   ============================================================ */

/* الخطوط: العناوين بخط كوفي، والنص Cairo */
.brand .t,
.player-titles h1,
.panel-card .r-title,
.cat-tab { font-family: var(--font-display); }

/* ===== خلفية Three.js ===== */
.hero-3d {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  width: 100%; height: min(580px, 64vh);
  z-index: 0; pointer-events: none; opacity: .62;
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}
.hero-veil {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  width: 100%; height: min(580px, 64vh);
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 320px at 72% 8%, rgba(46,230,120,.10), transparent 65%),
    linear-gradient(to bottom, rgba(5,7,13,.05), rgba(5,7,13,.55) 58%, #05070d 100%);
}
.app-shell { position: relative; z-index: 1; }
footer { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .hero-3d, .hero-veil { height: min(420px, 52vh); opacity: .45; }
}

/* ===== الهيدر: شارة مباشر + إعدادات ===== */
.head-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; color: #b9ffd9;
  background: rgba(46,230,120,.09); border: 1px solid rgba(46,230,120,.24);
}
.head-live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(46,230,120,.85); animation: ui-pulse 1.8s infinite;
}
@media (max-width: 980px) { .head-live { display: none; } }

/* ===== علامة القناة (بدل الحرف الواحد) ===== */
.brandmark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 1; direction: ltr;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.38);
}
.brandmark i {
  font-style: normal; font-size: 7px; font-weight: 900;
  letter-spacing: .1px; opacity: .96;
}
.brandmark b {
  font-size: 12px; font-weight: 900; margin-block-start: 1px;
  font-variant-numeric: tabular-nums;
}
.brandmark.tiny i { display: none; }
.brandmark.tiny b { font-size: 8px; }

.player-head { view-transition-name: playerHead; }
.player-head .avatar {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px rgba(0,0,0,.35);
}
.player-head .brandmark i { font-size: 9px; }
.player-head .brandmark b { font-size: 18px; }

/* ===== بطاقة القناة ===== */
.chan {
  container-type: inline-size;
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: start;
  isolation: isolate;
}
.chan::before {
  content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0;
  width: 2px; border-radius: 4px; background: var(--g, var(--accent));
  opacity: .32; transition: opacity var(--dur-fast), box-shadow var(--dur-fast);
}
.chan.active::before {
  opacity: 1; box-shadow: 0 0 12px var(--g, var(--accent));
}
.chan .avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  overflow: hidden; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.32);
}
.chan .avatar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 55%);
}
.chan .nm {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1;
}
.chan .nm-row {
  display: flex; align-items: center; gap: 5px; min-width: 0;
}
.chan .nm-row .name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chan .nm small {
  color: var(--faint); font-size: 9.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chan .ch-num {
  flex: none; padding: 1px 5px; border-radius: 999px;
  font-size: 9px; font-weight: 800; color: var(--faint);
  background: rgba(255,255,255,.06); font-variant-numeric: tabular-nums;
}
.chan .live-dot {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgba(46,230,120,.75);
  animation: ui-pulse 2s infinite;
}
.chan .star {
  padding: 0; border: 0; background: transparent;
  min-width: 30px; min-height: 30px; border-radius: 9px;
  display: grid; place-items: center; color: var(--faint);
}
.chan .star:hover { color: var(--gold); background: rgba(245,184,61,.12); }
.chan .star.on { color: var(--gold); }
.chan:has(.star.on) {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
  background: color-mix(in srgb, var(--bg-2) 88%, rgba(245,184,61,.06));
}
.chan.active { box-shadow: 0 6px 22px -10px color-mix(in srgb, var(--g, var(--accent)) 55%, transparent); }
@container (max-width: 152px) {
  .chan .ch-num { display: none; }
  .chan .nm small { display: none; }
  .chan { min-height: 56px; }
}
@container (max-width: 120px) {
  .chan .live-dot { display: none; }
}

/* ===== وضع المسرح ===== */
.app-shell.theater { grid-template-columns: 1fr; }
.app-shell.theater .panel { display: none; }
.app-shell.theater .stage {
  position: static; max-width: 1440px; margin-inline: auto; width: 100%;
}
.app-shell.theater .frame-wrap { max-height: none; }

/* ===== الشريط المصغّر ===== */
.mini-bar .mi-avatar { overflow: hidden; }
.mini-bar .brandmark i { font-size: 6px; }
.mini-bar .brandmark b { font-size: 10px; }

/* ===== تحسينات صغيرة ===== */
.status, #cLatency, .player-titles .sub { font-variant-numeric: tabular-nums; }
.cat-tabs { scrollbar-width: thin; }
.chan-scroll { scrollbar-color: #223049 transparent; }
@media (max-width: 520px) {
  .player-head .avatar { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
  .player-head .brandmark b { font-size: 15px; }
  .player-head .brandmark i { font-size: 8px; }
}

.hide-recents .recents{display:none!important}