:root{
  --bg:#0b1220;
  --accent:#f59e0b;
  --fg:#dbeafe;
  --muted:#9fb4d3;

  /* شفافیت کارت‌ها (0..1) کمتر = شفاف‌تر روی بک‌گراند */
  --tile-alpha:.32;
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* بک‌گراند متحرک (hi.js) پشتِ محتوا بماند */
#bg-canvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:-1 !important;
  pointer-events:none;
}

/* لوگوی قرصیِ وسط بالا (مثل هوم‌پیج) */
.brand{
  position:fixed; top:18px; left:0; right:0;
  display:flex; justify-content:center; align-items:center;
  z-index:3;
  background:transparent !important;
}
.brand .logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:192px; height:60px; padding:0 8px;
  background:#f59e0b;
  border-radius:9999px;
  box-shadow:0 12px 30px rgba(245,158,11,.32);
}
.brand .logo img{
  width:192px; height:60px; display:block;
  filter:drop-shadow(0 12px 28px rgba(245,158,11,.20));
}

/* === کانتینر تمام‌عرض با گاتر 16px در طرفین === */
.content{
  width: min(2000px, calc(100vw - 32px)); /* نزدیکِ تمام صفحه، فقط 16px حاشیه در هر طرف */
  max-width: none;
  margin: 118px auto 80px;
  padding: 0; /* گاترها را بالا هندل کردیم */
}

/* منوی نقطه‌دار بالا (پیش‌فرض سفید، فعال=زرد) */
.video-nav{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:0; margin:6px 0 22px;
  font-weight:800; text-transform:uppercase;
  letter-spacing:.28em; font-size:12px;
  background:transparent !important;
  position:relative; z-index:2;
}
.video-nav a{
  color:#ffffff; text-decoration:none; padding:8px 0; opacity:.98;
}
.video-nav a:hover{ opacity:.86; }
.video-nav a + a::before{ content:"•"; margin:0 18px; color:rgba(255,255,255,.3); }
.video-nav a.active{ color:var(--accent); }

/* وضعیت لودینگ / خالی */
#status{
  margin:42px 0; text-align:center; color:var(--fg); opacity:.9;
  background:transparent !important;
}


/* === گرید آجری واکنش‌گرا (ستون‌ها بر اساس عرض صفحه زیاد/کم می‌شوند) === */
.grid{
  column-gap: 14px;
  column-width: 280px;          /* پایه‌ی دسکتاپ */
  padding-bottom: 24px;
}

/* کارتِ موزائیکی؛ ارتفاع از نسبت تصویر می‌آید */
.video-card{
  break-inside:avoid; border-radius:14px; overflow:hidden;
  background:rgba(11,18,32,var(--tile-alpha));
  border:1px solid rgba(255,255,255,.06);
  margin:0 0 16px;
  box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:saturate(110%) blur(1.5px);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.video-card:hover{
  background:rgba(11,18,32,calc(var(--tile-alpha) + .12));
  transform:translateY(-2px);
}

/* تصویر بندانگشتی؛ اگر تصویر خودت نسبت درست دارد، همین کافی است */
.video-card .thumb{ position:relative }
.video-card img{ width:100%; height:auto; display:block; object-fit:cover }

/* اگر خواستی با کلاس نسبت بدهی (بدون تغییر فایلِ تصویر) */
.thumb.wide  { aspect-ratio:16/9; }
.thumb.square{ aspect-ratio:1/1;  }
.thumb.tall  { aspect-ratio:3/4;  }

/* نشانِ مدت‌زمان/قیمت و... */
.video-card .badge{
  position:absolute; left:10px; bottom:10px; padding:6px 9px; border-radius:10px;
  background:rgba(0,0,0,.55); color:#fff; font:600 12px/1 Inter,system-ui,sans-serif;
}

/* عنوان/متای کارت */
.video-card .title{ margin:10px 12px 0; font-size:16px; line-height:1.35 }
.video-card .title a{ color:var(--fg); text-decoration:none }
.video-card .title a:hover{ color:#fff }
.video-card .meta{ margin:8px 12px 12px; opacity:.7; font-size:12px }

/* مودال پلیر/پریویو */
#player-modal[hidden]{ display:none }
#player-modal{ position:fixed; inset:0; z-index:40; }
#player-modal .shade{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
}
#player-modal .box{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1280px,92vw); height:min(720px,55vw);
  background:#000; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6); overflow:hidden;
}
#yt-frame{ width:100%; height:100%; border:0; display:block }

/* برای Dizbad (player-slot دینامیک) */
.player-slot, .player-slot > *{ width:100%; height:100%; display:block; }

/* دکمه بستن مودال */
#player-modal .close{
  position:absolute; top:10px; right:12px; z-index:2; width:40px; height:40px; border:0;
  border-radius:10px; background:rgba(255,255,255,.1); color:#fff; font-size:26px; cursor:pointer;
}

/* دسکتاپ‌های خیلی عریض */
@media (min-width: 2000px){ .grid{ column-width: 300px; } }

/* پله‌های منطقی تا تبلت */
@media (max-width: 1600px){ .grid{ column-width: 260px; } }
@media (max-width: 1400px){ .grid{ column-width: 240px; } }
@media (max-width: 1200px){ .grid{ column-width: 220px; } }
@media (max-width: 900px) { .grid{ column-width: 200px; } }
@media (max-width: 768px) { .grid{ column-width: 180px; } }
@media (max-width: 640px) { .grid{ column-width: 160px; } }

/* موبایل‌های باریک → 2 تا 3 ستونِ جمع‌وجور */
@media (max-width: 400px){
  .grid{ column-width: 120px; column-gap: 10px; }
}

/* کارت‌ها کمی جمع‌وجورتر شوند */
.video-card{ margin: 0 0 14px; }