/* ===== ROOT & THEME ===== */
:root{
  --crx-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --crx-bg:#1a1c20;--crx-bg-light:#25282e;--crx-bg-lighter:#30343c;--crx-border:#40444c;
  --crx-text:#f0f0f0;--crx-text-muted:#9a9ea6;
  --crx-yellow:#ffc107;--crx-yellow-dark:#e0a800;
  --crx-radius:12px;--crx-radius-sm:8px;--crx-shadow:0 4px 12px rgba(0,0,0,.1);
  --space:clamp(12px,2vw,24px);
  --space-sm:clamp(8px,1.2vw,16px);
  --space-xs:clamp(4px,.8vw,12px);
}

/* ===== BASE (Fluid Type & Spacing) ===== */
html{font-size:clamp(14px,.9vw + 10px,16px)}
*{box-sizing:border-box; min-width:0}              /* ✅ مهم برای جلوگیری از سرریز داخل Grid/Flex */
body{
  font-family:var(--crx-font);background:var(--crx-bg);color:var(--crx-text);
  margin:0;line-height:1.6;font-size:1rem;overflow-x:hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}
a{color:var(--crx-yellow);text-decoration:none}
h2,h3,h4,p{margin:0}
h2{font-size:clamp(1.4rem,1.2vw + 1rem,1.9rem);margin-bottom:.5em}
h3{font-size:clamp(1.1rem,.8vw + .8rem,1.35rem);margin-bottom:.35em}
h4{font-size:clamp(1rem,.6vw + .7rem,1.15rem)}
img{max-width:100%;height:auto;display:block}
p,li,.crx-bw-name,.crx-live-user,.crx-gh-cap p{overflow-wrap:anywhere}  /* ✅ شکستن متن‌های بلند */

/* ===== UTILITIES ===== */
.crx-muted{color:var(--crx-text-muted);font-size:.95em}
.crx-btn-ylw,.crx-btn-ghost{
  display:inline-block;padding:clamp(8px,.8vw,12px) clamp(12px,1.4vw,20px);
  border-radius:var(--crx-radius-sm);font-weight:700;font-size:clamp(.9rem,.3vw + .85rem,.98rem);
  border:2px solid transparent;transition:transform .2s ease,background .2s ease,border-color .2s ease;
  cursor:pointer;text-align:center; max-width:100%; /* جلوگیری از کشیدن */
}
.crx-btn-ylw{background:var(--crx-yellow);color:#111;border-color:var(--crx-yellow)}
.crx-btn-ylw:hover{background:var(--crx-yellow-dark);border-color:var(--crx-yellow-dark);transform:translateY(-2px)}
.crx-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.crx-btn-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3)}

/* ===== LAYOUT ===== */
.crx-container{max-width:min(1366px,96%);margin:0 auto;padding:var(--space)}
.crx-grid{
  display:grid;gap:var(--space);
  grid-template-columns:minmax(0,1fr) minmax(280px, 340px); /* ✅ ستون کناری انعطاف‌پذیر */
}
.crx-grid > *{min-width:0}                          /* ✅ جلوگیری از سرریز آیتم‌ها */
.crx-main{display:flex;flex-direction:column;gap:clamp(16px,2vw,32px)}
.crx-side{display:flex;flex-direction:column;gap:var(--space-sm);position:sticky;top:var(--space)}
.crx-sec,.crx-box{
  background:var(--crx-bg-light);border-radius:var(--crx-radius);
  padding:clamp(16px,1.6vw,20px);border:1px solid var(--crx-border)
}
.crx-sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm);gap:var(--space-xs);flex-wrap:wrap}

/* ===== SKELETON ===== */
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.is-loading{position:relative;overflow:hidden;background:var(--crx-bg-lighter);color:transparent!important;min-height:100px}
.is-loading::before{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:shimmer 1.5s infinite linear
}
#crxLiveFeed.is-loading{min-height:200px}
#crxBwTrack.is-loading{min-height:100px}

/* ===== HERO SLIDER ===== */
.crx-hero{
  position:relative;overflow:hidden;border-radius:var(--crx-radius);
  height:clamp(220px,38vh,520px);
  border:1px solid var(--crx-border);
}
.crx-slides{display:flex;height:100%;transition:transform .5s ease-in-out;will-change:transform}
.crx-slide{
  flex:0 0 100%;position:relative;background-size:cover;background-position:center;background-image:var(--bg);
  padding:clamp(16px,2.4vw,40px);display:flex;align-items:flex-end;min-height:100%
}
.crx-sl-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 50%,transparent 100%);z-index:1}
.crx-sl-cap{position:relative;z-index:2;max-width:min(58%,640px)}
.crx-sl-cap p{font-size:clamp(.95rem,.4vw + .9rem,1.1rem);color:rgba(255,255,255,.9);margin:.5em 0 1em}
.crx-sl-cta{display:flex;gap:var(--space-sm);flex-wrap:wrap}  /* ✅ دکمه‌ها روی خط بعد */

/* ناوبری */
.crx-sl-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,.4);color:#fff;
  border:1px solid rgba(255,255,255,.2);border-radius:50%;width:clamp(36px,3.4vw,44px);height:clamp(36px,3.4vw,44px);
  font-size:clamp(18px,1.6vw,24px);cursor:pointer;transition:background .2s
}
.crx-sl-nav:hover{background:rgba(0,0,0,.7)}
.crx-sl-nav.prev{right:16px} /* RTL */
.crx-sl-nav.next{left:16px}  /* RTL */

.crx-sl-dots{
  position:absolute;bottom:clamp(10px,1.2vw,16px);left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap
}
.crx-sl-dots button{
  width:10px;height:10px;padding:0;border-radius:50%;background:rgba(255,255,255,.4);border:0;cursor:pointer;transition:background .2s
}
.crx-sl-dots button[aria-selected="true"]{background:#fff;width:12px;height:12px}

/* ===== ANNOUNCEMENTS ===== */
.crx-anno{position:relative}
.crx-anno-track{display:flex;gap:var(--space-sm);overflow-x:auto;scroll-behavior:smooth;padding:var(--space-xs);scrollbar-width:none}
.crx-anno-track::-webkit-scrollbar{display:none}
.crx-anno-card{
  flex:0 0 clamp(220px,28vw,320px);background:var(--crx-bg-lighter);padding:clamp(12px,1.2vw,16px);
  border-radius:var(--crx-radius-sm);border:1px solid var(--crx-border)
}
.crx-anno-card h4{color:var(--crx-yellow)}
.crx-anno-card p{font-size:.95em;color:var(--crx-text-muted);margin-top:.4em}
.crx-anno-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:var(--crx-bg);border:1px solid var(--crx-border);
  color:var(--crx-text);width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer
}
.crx-anno-nav.prev{right:-18px} /* RTL */
.crx-anno-nav.next{left:-18px}  /* RTL */

/* ===== BIG WINS ===== */
.crx-bw-slider{overflow-x:auto;padding:var(--space-xs) 0}
.crx-bw-track{display:flex;gap:var(--space-sm)}
.crx-bw-item{
  flex:0 0 clamp(200px,26vw,260px);display:flex;justify-content:space-between;align-items:center;background:var(--crx-bg-lighter);
  padding:clamp(10px,1vw,14px) clamp(12px,1.2vw,16px);border-radius:var(--crx-radius-sm);border:1px solid var(--crx-border)
}
.crx-bw-name{font-weight:700}
.crx-bw-sub{display:flex;align-items:center;gap:6px;font-size:.95em;color:var(--crx-text-muted)}
.crx-bw-sub img{filter:grayscale(1) brightness(2)}
.crx-bw-x{font-weight:700;color:#4caf50}
.crx-bw-amt{font-size:clamp(1rem,.4vw + .95rem,1.15rem);font-weight:800;color:var(--crx-yellow)}
.crx-bw-amt .m{font-size:.85em;color:var(--crx-text-muted);font-weight:400}

/* ===== LIVE FEED ===== */
.crx-live-feed{display:flex;flex-direction:column;border-radius:var(--crx-radius-sm);overflow:hidden;background:var(--crx-bg-lighter)}
.crx-live-row{
  display:grid;grid-template-columns:1fr 1fr .8fr 1.2fr .7fr;gap:clamp(6px,1vw,12px);
  padding:clamp(10px,1.2vw,14px) clamp(12px,1.6vw,16px);border-bottom:1px solid var(--crx-border);
  font-size:.95rem;transition:background-color .2s;animation:fadeIn .4s ease
}
.crx-live-row:nth-child(even){background-color:rgba(0,0,0,.08)}
.crx-live-row:last-child{border-bottom:0}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.crx-live-user{font-weight:700}
.crx-live-amt{color:var(--crx-text-muted)}
.crx-live-x{font-weight:700;color:#4caf50}
.crx-live-win{font-weight:800;color:var(--crx-yellow)}
.crx-live-time{color:var(--crx-text-muted);text-align:left}
.crx-live-row .m{font-size:.85em;opacity:.8}
.crx-live-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}  /* ✅ */

/* ===== GAMES HUB (GRID) ===== */
.crx-gh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(200px,30vw,280px),1fr));gap:var(--space-sm)}
.crx-gh-card{
  display:block;position:relative;aspect-ratio:16/10;border-radius:var(--crx-radius-sm);overflow:hidden;
  background-size:cover;background-position:center;background-image:var(--bg);
  transition:transform .2s ease,box-shadow .2s ease
}
.crx-gh-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.crx-gh-badge{
  position:absolute;top:12px;right:12px;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);
  padding:4px 10px;border-radius:20px;font-size:.85rem;font-weight:700
}
.crx-gh-cap{
  position:absolute;inset-inline:0;bottom:0;padding:clamp(10px,1vw,16px);
  background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,transparent 100%)
}
.crx-gh-cap p{font-size:.95em;color:var(--crx-text-muted)}

/* ===== SIDEBAR ACTIONS ===== */
.crx-actions{display:flex;flex-direction:column;gap:var(--space-sm)}
.crx-qa{
  display:block;padding:clamp(12px,1.2vw,16px);background:var(--crx-bg-lighter);border:1px solid var(--crx-border);
  border-radius:var(--crx-radius-sm);font-weight:700;transition:background .2s,border-color .2s;color:var(--crx-text)
}
.crx-qa:hover{background:var(--crx-bg-lighter);border-color:var(--crx-yellow);color:var(--crx-yellow)}

/* ===== MODAL ===== */
.crx-modal{border:0;padding:0;background:transparent;max-width:420px;width:min(90%,420px);border-radius:var(--crx-radius);overflow:visible}
.crx-modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}
.crx-modal-ov{position:fixed;inset:0;z-index:1}
.crx-modal-box{
  position:relative;z-index:2;background:var(--crx-bg-light);border:1px solid var(--crx-border);
  border-radius:var(--crx-radius);padding:clamp(16px,1.6vw,24px);text-align:center
}
.crx-modal-box h3{margin-bottom:12px}
.crx-modal-box p{margin-bottom:clamp(12px,1.2vw,24px)}
.crx-modal-actions{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap} /* ✅ */
.crx-modal-actions a{flex:1;min-width:120px;max-width:100%}
.crx-modal-close{
  position:absolute;top:10px;left:10px;background:transparent;border:0;color:var(--crx-text-muted);
  font-size:1.5rem;cursor:pointer;line-height:1;padding:4px
}

/* ===== SPA LOADER ===== */
.crx-loader{
  position:fixed;top:0;left:0;right:0;height:3px;background:var(--crx-yellow);
  transform:scaleX(0);transform-origin:right;transition:transform .3s ease,opacity .3s ease;z-index:9999;opacity:0
}
body.is-navigating .crx-loader{transform:scaleX(1);opacity:1}
body.is-navigating #app-main{opacity:.5;transition:opacity .3s ease}

/* ================== BREAKPOINTS ================== */
/* <= 1360px: کمی زودتر جمع شود تا دو ستون فشار نیاورد */
@media (max-width:1360px){
  .crx-grid{grid-template-columns:minmax(0,1fr) minmax(260px, 320px)}
  .crx-sl-cap{max-width:62%}
}

/* <= 1200px: اگر محتوا سنگین است، تک‌ستونه شو */
@media (max-width:1200px){
  .crx-grid{grid-template-columns:1fr}
  .crx-side{position:static;flex-direction:row;flex-wrap:wrap;gap:var(--space-sm)}
  .crx-side .crx-box{flex:1 1 min(360px,100%)}
  .crx-sl-cap{max-width:70%}
  .crx-anno-nav{display:none}
}

/* <= 768px: تبلت/موبایل بزرگ */
@media (max-width:768px){
  .crx-container{max-width:100%;padding:clamp(12px,2.4vw,16px)}
  .crx-hero{height:clamp(200px,32vh,360px);border-radius:var(--crx-radius-sm)}
  .crx-slide{padding:clamp(14px,2vw,20px)}
  .crx-sl-cap{max-width:100%}
  .crx-sl-cap h2{font-size:clamp(1.2rem,1.6vw + 1rem,1.5rem)}
  .crx-sl-cap p{display:none}
  .crx-sl-cta a{padding:8px 12px;font-size:.95rem}
  .crx-sl-nav{width:36px;height:36px;font-size:20px}

  .crx-sec{padding:clamp(12px,2.2vw,16px)}
  .crx-sec-head{flex-direction:column;align-items:flex-start;gap:6px}

  .crx-gh-grid{grid-template-columns:repeat(2,1fr)}
  .crx-gh-cap h4{font-size:1rem}
  .crx-gh-cap p{display:none}

  .crx-live-row{
    grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto auto;
    padding:clamp(8px,1.6vw,12px);gap:4px 10px
  }
  .crx-live-user{grid-column:1;grid-row:1}
  .crx-live-time{grid-column:2;grid-row:1;text-align:left}
  .crx-live-amt{grid-column:1;grid-row:2}
  .crx-live-x{grid-column:2;grid-row:2;text-align:left}
  .crx-live-win{grid-column:1/3;grid-row:3;font-size:1.05rem}

  .crx-side{flex-direction:column}
}

/* <= 480px: موبایل کوچک */
@media (max-width:480px){
  .crx-sl-nav{display:none} /* سوایپ کافی است */
  .crx-gh-grid{grid-template-columns:1fr}
  .crx-anno-card{flex-basis:clamp(180px,70vw,260px)}
  .crx-bw-item{flex-basis:clamp(180px,70vw,240px)}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion:reduce){
  .crx-slides,.crx-loader{transition:none}
  .crx-anno-track{scroll-behavior:auto}
}
/* ===== APP HEADER (floating, rounded, responsive) ===== */
:root{
  --hdr-max-w: 1200px;
  --hdr-pad-x: 14px;
  --hdr-pad-y: 10px;
  --hdr-h: 64px; /* ارتفاع موثر: spacer نیز از همین می‌خوانَد */
}

.app-header{
  position:fixed; inset-inline:0;
  top:calc(12px + env(safe-area-inset-top,0px));
  margin-inline:auto; z-index:1000;
  width:min(var(--hdr-max-w), calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  height:var(--hdr-h);
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--crx-border) 80%, transparent);
  background: color-mix(in srgb, var(--crx-bg-light) 70%, transparent);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:saturate(135%) blur(6px);
  transition:transform .25s ease, opacity .25s ease;
  will-change:transform, opacity;
}

.app-header.is-hidden{ transform:none !important; opacity:1 !important; }

.app-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--hdr-pad-y) var(--hdr-pad-x); gap:10px; height:100%;
}

/* برند */
.app-header .brand{display:flex; align-items:center; gap:10px; min-width:0}
.app-header .brand img{
  height:clamp(28px, 4.2vw, 38px);
  display:block; object-fit:contain;
}

/* ناوبری دسکتاپ */
.app-nav{display:flex; align-items:center; gap:clamp(8px,1.2vw,16px); min-width:0}
.app-nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  color:var(--crx-text); text-decoration:none;
  font-weight:700; font-size:.95rem; opacity:.9;
  transition:background .2s, opacity .2s, color .2s;
}
.app-nav a:hover{ background:rgba(255,255,255,.06); opacity:1 }
.app-nav .chip{
  margin-inline-start:6px; padding:.2em .5em; border-radius:999px;
  background:rgba(255,255,255,.08); font-weight:800; font-size:.85em; color:var(--crx-yellow);
}

/* اکشن‌ها */
.app-actions{ display:flex; gap:8px; align-items:center }
.icon-btn.solid.pill{
  border-radius:999px; width:40px; height:40px; display:grid; place-items:center;
  background:linear-gradient(135deg,#60a5fa,#8b5cf6); color:#0b1226; border:none;
  box-shadow:0 6px 18px rgba(99,102,241,.35);
}

/* دکمه Drawer / همبرگری */
.hdr-toggle{
  --btn-bg:#101a34; --btn-border:#2a3b66; --btn-ink:#eaf2ff;
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background:var(--btn-bg); color:var(--btn-ink);
  border:1px solid var(--btn-border);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:background .2s, box-shadow .2s, transform .2s;
}
.hdr-toggle:hover{ background:#162552; box-shadow:0 10px 26px rgba(0,0,0,.35) }
.hdr-toggle svg{ width:20px; height:20px; transition:transform .2s }
#hdrDrawerBtn[aria-expanded="true"] svg{ transform:rotate(180deg) }

/* Spacer زیر هدر fixed */
.app-header-spacer{ height:calc(var(--hdr-h) + 24px + env(safe-area-inset-top,0px)); }

/* Drawer (همان قبلی) */
.app-drawer{
  position:fixed; inset-inline:0; margin-inline:auto;
  top:calc(var(--hdr-h) + 24px + env(safe-area-inset-top,0px));
  width:min(var(--hdr-max-w), calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  background:#0f1630; border:1px solid #243251; border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.45); padding:12px; display:none;
  max-height:clamp(240px, 60vh, 560px); overflow:auto; z-index:999;
}
.app-drawer.is-open{ display:block }
.app-drawer .sec{ padding:8px 6px }
.app-drawer .ttl{ color:#9fb0c6; font-weight:700; margin-bottom:6px }
.app-drawer .link{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; color:#e7eaf0; text-decoration:none; white-space:nowrap;
}
.app-drawer .link:hover{ background:#101a34; color:#fff }

/* نمایش/پنهان‌سازی ریسپانسیو */
.app-nav{ display:flex; }
.hdr-toggle{ display:none; }

@media (max-width:1024px){
  :root{ --hdr-h: 60px; --hdr-pad-x: 12px; --hdr-pad-y: 8px; }
  .app-header{ border-radius:16px }
  .icon-btn.solid.pill, .hdr-toggle{ width:36px; height:36px; border-radius:10px }
  .hdr-toggle svg{ width:18px; height:18px }
  .app-nav{ display:none; }            /* منوی دسکتاپ پنهان */
  .hdr-toggle{ display:inline-grid; }  /* همبرگری/پیکان نمایان */
  .app-drawer{ border-radius:12px; padding:10px }
}
@media (max-width:360px){
  .app-actions{ gap:6px }
  .app-header .brand img{ height:30px }
}

/* تم لایت/دارک (اختیاری) با data-theme روی <html> */
html[data-theme="light"] .app-header{
  background: color-mix(in srgb, #ffffff 70%, transparent);
  border-color: color-mix(in srgb, #d7dbe3 80%, transparent);
}
.loader {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        color: #fff;
      }
        .loader:before,
        .loader:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader:after {
          color: #FF3D00;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }