/* ===================================================================
   JahanGame — جهان‌گیم
   سیستم طراحی: «کارتریج نئون» — آرکید شبانه با هویت دو-رنگی سایان/مژنتا
   =================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: local('Vazirmatn');
}

* , *::before, *::after { box-sizing: border-box; }

:root{
  /* --- رنگ‌ها --- */
  --bg:            #0a0817;
  --bg-soft:       #120e26;
  --surface:       #171233;
  --surface-2:     #1d1740;
  --surface-hover: #251c4e;
  --line:          rgba(150, 140, 220, 0.16);
  --line-strong:   rgba(150, 140, 220, 0.32);

  --cyan:          #45e8c8;
  --cyan-dim:      rgba(69, 232, 200, 0.16);
  --magenta:       #ff3e86;
  --magenta-dim:   rgba(255, 62, 134, 0.18);
  --amber:         #ffb84d;
  --amber-dim:     rgba(255, 184, 77, 0.18);

  --text:          #f1eefc;
  --text-dim:      #a79fd1;
  --text-faint:    #6d6497;

  --grad-cta: linear-gradient(135deg, var(--magenta), #ff7a4d);
  --grad-cyan: linear-gradient(135deg, var(--cyan), #3aa6ff);
  --shadow-glow-cyan: 0 0 0 1px rgba(69,232,200,.35), 0 8px 30px rgba(69,232,200,.15);
  --shadow-glow-magenta: 0 0 0 1px rgba(255,62,134,.4), 0 10px 34px rgba(255,62,134,.28);

  /* --- تایپوگرافی سیال --- */
  --fs-hero:   clamp(2.1rem, 1.35rem + 3.4vw, 4.4rem);
  --fs-h2:     clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --fs-h3:     clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  --fs-body:   clamp(0.92rem, 0.87rem + 0.2vw, 1.02rem);
  --fs-small:  clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --fs-hud:    clamp(0.7rem, 0.68rem + 0.2vw, 0.8rem);

  /* --- فاصله‌گذاری سیال --- */
  --sp-1: clamp(0.4rem, 0.3rem + 0.4vw, 0.6rem);
  --sp-2: clamp(0.7rem, 0.55rem + 0.6vw, 1rem);
  --sp-3: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  --sp-4: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  --sp-5: clamp(2.4rem, 1.8rem + 2.6vw, 4.2rem);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;

  --container: 1320px;
  --header-h: 72px;
  --ease-pop: cubic-bezier(.2,.9,.25,1.3);
}

html{
  scroll-behavior: smooth;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Vazirmatn', 'Tahoma', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.75;
  direction: rtl;
  overflow-x: hidden;
  min-height: 100vh;
  background-image:
    radial-gradient(60% 45% at 85% -8%, rgba(255,62,134,.16), transparent 60%),
    radial-gradient(50% 40% at 8% 8%, rgba(69,232,200,.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  background-attachment: fixed;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,p{ margin: 0; }

.container{
  width: min(100% - 2 * var(--sp-3), var(--container));
  margin-inline: auto;
}

:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- افکت اسکن‌لاین (امضای بصری سایت) ---------- */
.scanline-overlay{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .5;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    transparent 2px,
    transparent 3px
  );
  animation: scan-drift 9s linear infinite;
}
@keyframes scan-drift{
  from{ background-position: 0 0; }
  to{ background-position: 0 120px; }
}
.vignette{
  position: fixed; inset:0; z-index: 59; pointer-events:none;
  box-shadow: inset 0 0 18vw rgba(0,0,0,.55);
}

/* =========================================================
   صفحه بارگذاری (بوت‌سکانس آرکید)
   ========================================================= */
#boot-screen{
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(60% 60% at 50% 40%, #150f30 0%, #0a0817 70%);
  display:flex; align-items:center; justify-content:center;
  flex-direction: column;
  gap: var(--sp-3);
  transition: opacity .6s ease, visibility .6s ease;
}
#boot-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.boot-logo{
  font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3.2rem);
  letter-spacing: .5px;
  position: relative;
  color: var(--text);
}
.boot-logo span{ color: var(--cyan); }
.boot-logo::before, .boot-logo::after{
  content: 'JahanGame · جهان‌گیم';
  position:absolute; inset:0;
  opacity: .55;
}
.boot-logo::before{ color: var(--magenta); clip-path: inset(0 0 55% 0); animation: glitch-a 2.2s infinite linear; }
.boot-logo::after{ color: var(--cyan); clip-path: inset(55% 0 0 0); animation: glitch-b 2.6s infinite linear; }
@keyframes glitch-a{
  0%, 90%, 100%{ transform: translate(0,0); }
  92%{ transform: translate(-3px,1px); }
  94%{ transform: translate(3px,-1px); }
  96%{ transform: translate(-2px,0); }
}
@keyframes glitch-b{
  0%, 90%, 100%{ transform: translate(0,0); }
  91%{ transform: translate(2px,-1px); }
  95%{ transform: translate(-3px,1px); }
  97%{ transform: translate(2px,1px); }
}

.boot-bar{
  width: min(78vw, 340px);
  height: 10px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  position: relative;
}
.boot-bar-fill{
  height: 100%; width: 0%;
  border-radius: 99px;
  background: repeating-linear-gradient(-45deg, var(--cyan) 0 8px, var(--magenta) 8px 16px);
  background-size: 200% 100%;
  animation: boot-stripes 1s linear infinite;
  transition: width .25s ease-out;
}
@keyframes boot-stripes{ from{ background-position: 0 0; } to{ background-position: 32px 0; } }
.boot-status{
  font-size: var(--fs-hud);
  color: var(--text-dim);
  letter-spacing: .5px;
  min-height: 1.2em;
}
.boot-pct{ color: var(--cyan); font-weight:700; }

/* =========================================================
   هدر
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(10,8,23,.65);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background: rgba(10,8,23,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.header-inner{
  display:flex; align-items:center; gap: var(--sp-3);
  width:100%;
}
.brand{
  display:flex; align-items:center; gap:.55rem;
  font-weight: 800; font-size: 1.25rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-badge{
  width: 34px; height:34px; border-radius: 10px;
  background: var(--grad-cyan);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-glow-cyan);
  transform: rotate(-6deg);
  flex-shrink:0;
}
.brand-name b{ color: var(--cyan); }

.nav-search{
  flex:1;
  display:flex; align-items:center; gap:.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .55rem .9rem;
  max-width: 460px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav-search:focus-within{
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
}
.nav-search input{
  flex:1; background:transparent; border:none; outline:none;
  color: var(--text); font: inherit;
}
.nav-search input::placeholder{ color: var(--text-faint); }
.nav-search svg{ flex-shrink:0; color: var(--text-dim); }

.header-actions{ margin-inline-start:auto; display:flex; align-items:center; gap:.6rem; }
.icon-btn{
  width:40px; height:40px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--line);
  color: var(--text); transition: all .2s ease;
}
.icon-btn:hover{ border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }

/* =========================================================
   هیرو
   ========================================================= */
.hero{
  position:relative;
  padding-block: clamp(2.4rem, 1.8rem + 3vw, 5rem) clamp(2rem, 1.6rem + 2vw, 3.2rem);
  overflow:hidden;
}
#particle-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.7;
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; gap: var(--sp-3);
  max-width: 900px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  align-self:start;
  font-size: var(--fs-hud);
  letter-spacing: .8px;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid rgba(69,232,200,.4);
  padding: .35rem .8rem;
  border-radius: 99px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

.hero h1{
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
}
.hero h1 .accent{
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{
  color: var(--text-dim);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  max-width: 60ch;
}
.hero-cta{ display:flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .85rem 1.5rem;
  border-radius: 99px;
  font-weight:700; font-size: var(--fs-body);
  border: 1px solid transparent;
  transition: transform .18s var(--ease-pop), box-shadow .2s ease, filter .2s ease;
}
.btn:active{ transform: scale(.96); }
.btn-primary{
  background: var(--grad-cta); color:#160a10;
  box-shadow: var(--shadow-glow-magenta);
}
.btn-primary:hover{ transform: translateY(-3px); filter: brightness(1.08); }
.btn-ghost{
  background: var(--surface); color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); }

.hero-stats{
  display:flex; flex-wrap:wrap; gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.stat{ display:flex; flex-direction:column; gap:.15rem; }
.stat b{
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat b .unit{ font-size: .55em; color: var(--cyan); margin-inline-start:.25rem; }
.stat span{ font-size: var(--fs-hud); color: var(--text-faint); letter-spacing:.4px; }

/* =========================================================
   فیلترها (ژانر + جستجو)
   ========================================================= */
.filters{
  padding-block: var(--sp-2);
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(10,8,23,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.chip-row{
  display:flex; gap:.6rem; overflow-x:auto;
  padding-block:.2rem .4rem;
  scrollbar-width: thin;
}
.chip-row::-webkit-scrollbar{ height:6px; }
.chip-row::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius:99px; }
.chip{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:.4rem;
  padding: .5rem 1.05rem;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-weight:600;
  transition: all .18s ease;
  white-space: nowrap;
}
.chip:hover{ border-color: var(--line-strong); color: var(--text); }
.chip.active{
  background: var(--grad-cyan); color:#062621; border-color:transparent;
  box-shadow: var(--shadow-glow-cyan);
}
.chip .count{ opacity:.7; font-size:.85em; }

/* =========================================================
   گرید بازی‌ها
   ========================================================= */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-2);
  margin-block: var(--sp-4) var(--sp-3);
  flex-wrap:wrap;
}
.section-head h2{ font-size: var(--fs-h2); font-weight:800; }
.section-head .sub{ color: var(--text-faint); font-size: var(--fs-small); }

.game-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 480px){ .game-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px){ .game-grid{ grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } }
@media (min-width: 980px){ .game-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1240px){ .game-grid{ grid-template-columns: repeat(6, 1fr); } }

.game-card{
  position:relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; transform: translateY(14px);
  animation: card-in .5s var(--ease-pop) forwards;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.game-card:hover, .game-card:focus-within{
  transform: translateY(-6px);
  border-color: rgba(69,232,200,.5);
  box-shadow: var(--shadow-glow-cyan);
}
@keyframes card-in{ to{ opacity:1; transform:none; } }

.card-notch{
  position:absolute; top:0; inset-inline:0;
  height: 5px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  z-index:2;
}
.card-thumb{
  position:relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow:hidden;
}
.card-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease, filter .4s ease;
  filter: saturate(1.05);
}
.game-card:hover .card-thumb img{ transform: scale(1.09); filter: saturate(1.25) brightness(1.05); }
.card-thumb .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: 2rem; font-weight:800; color: var(--text-faint);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
.card-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(10,8,23,0) 40%, rgba(10,8,23,.85) 100%);
  opacity:0; transition: opacity .25s ease;
}
.game-card:hover .card-play, .game-card:focus-within .card-play{ opacity:1; }
.card-play-btn{
  width:52px; height:52px; border-radius:50%;
  background: var(--grad-cta);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-glow-magenta);
  transform: scale(.7);
  transition: transform .25s var(--ease-pop);
}
.game-card:hover .card-play-btn{ transform: scale(1); }
.card-body{ padding: var(--sp-2); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.card-title{
  font-size: var(--fs-small);
  font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-tags{ display:flex; gap:.3rem; flex-wrap:wrap; }
.tag-pill{
  font-size: .68rem; padding: .18rem .55rem; border-radius:99px;
  background: var(--surface-2); color: var(--text-faint); border:1px solid var(--line);
}
.card-link{ position:absolute; inset:0; z-index:3; }
.card-link span{ display:none; }

.empty-state, .loadmore-wrap{
  text-align:center; padding: var(--sp-4) 0; color: var(--text-faint);
}
.btn-loadmore{
  margin-inline:auto;
}

/* =========================================================
   فوتر
   ========================================================= */
.site-footer{
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-4);
  color: var(--text-faint);
  font-size: var(--fs-small);
}
.footer-inner{ display:flex; flex-wrap:wrap; gap: var(--sp-3); justify-content:space-between; align-items:center; }
.footer-brand{ font-weight:800; color: var(--text-dim); }

/* =========================================================
   صفحه بازی
   ========================================================= */
.game-page-head{ padding-block: var(--sp-3) var(--sp-2); }
.breadcrumb{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  color: var(--text-faint); font-size: var(--fs-small); margin-bottom: var(--sp-2);
}
.breadcrumb a{ color: var(--text-dim); }
.breadcrumb a:hover{ color: var(--cyan); }

.game-title-row{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-2); flex-wrap:wrap;
}
.game-title-row h1{ font-size: var(--fs-h2); font-weight:800; }
.game-tags{ display:flex; gap:.4rem; flex-wrap:wrap; }

.stage-wrap{
  position:relative;
  border-radius: var(--radius-l);
  overflow:hidden;
  background: #000;
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.stage-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: .6rem .9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  gap:.6rem; flex-wrap:wrap;
}
.stage-toolbar-left{ display:flex; align-items:center; gap:.5rem; font-size: var(--fs-hud); color: var(--text-dim); }
.led{ width:9px; height:9px; border-radius:50%; background: var(--cyan); box-shadow:0 0 8px var(--cyan); animation: pulse-dot 1.6s ease-in-out infinite; }
.stage-toolbar-actions{ display:flex; gap:.5rem; }
.toolbar-btn{
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; border-radius: 10px;
  background: var(--surface-2); border:1px solid var(--line);
  color: var(--text); font-size: var(--fs-small); font-weight:600;
  transition: all .2s ease;
}
.toolbar-btn:hover{ border-color: var(--cyan); color: var(--cyan); }

.stage{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
}
.stage:fullscreen{ aspect-ratio: auto; height:100vh; }
.stage:-webkit-full-screen{ height:100vh; }
.stage iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.stage-loading{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-2);
  background: radial-gradient(60% 60% at 50% 40%, #150f30 0%, #05040c 75%);
  transition: opacity .4s ease, visibility .4s ease;
}
.stage-loading.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.spinner{
  width:56px; height:56px; border-radius:50%;
  border: 3px solid var(--surface-2);
  border-top-color: var(--cyan);
  border-inline-end-color: var(--magenta);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.stage-loading p{ color: var(--text-dim); font-size: var(--fs-small); }
.stage-loading .pct{ color: var(--cyan); font-weight:800; font-variant-numeric: tabular-nums; }

.stage-error{
  position:absolute; inset:0; z-index:6;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-2);
  background: rgba(5,4,12,.97); text-align:center; padding: var(--sp-3);
}
.stage-error.show{ display:flex; }
.stage-error h3{ font-size: var(--fs-h3); }
.stage-error p{ color: var(--text-dim); max-width: 46ch; font-size: var(--fs-small); }
.stage-error-actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }

.game-info-grid{
  display:grid; gap: var(--sp-3);
  grid-template-columns: 1fr;
  margin-top: var(--sp-4);
}
@media (min-width: 860px){ .game-info-grid{ grid-template-columns: 2fr 1fr; } }

.info-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m);
  padding: var(--sp-3);
}
.info-card h3{ font-size: var(--fs-h3); margin-bottom: var(--sp-2); font-weight:800; }
.info-card p{ color: var(--text-dim); white-space:pre-line; }
.info-card + .info-card{ margin-top: var(--sp-3); }

.howto-list{ display:flex; flex-direction:column; gap:.6rem; }
.howto-list li{ display:flex; gap:.6rem; align-items:flex-start; color: var(--text-dim); font-size: var(--fs-small); }
.howto-list .ico{ color: var(--cyan); flex-shrink:0; margin-top:.15rem; }

.related-scroller{
  display:flex; gap: var(--sp-2); overflow-x:auto; padding-bottom: var(--sp-1);
  scroll-snap-type: x proximity;
}
.related-scroller .game-card{ min-width: 160px; max-width:160px; scroll-snap-align:start; animation:none; opacity:1; transform:none; }

.notfound{
  min-height: 50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-2);
  text-align:center; padding-block: var(--sp-5);
}
.notfound h1{ font-size: clamp(2.4rem, 2rem + 2vw, 4rem); color: var(--magenta); }

/* Utility */
.mobile-only{ display:none; }
.mobile-search-bar{ display:none; }
@media (max-width: 720px){
  .mobile-only{ display:flex; }
  .desktop-only{ display:none; }
  .nav-search{ display:none; }
  .mobile-search-bar.mobile-open{
    display:flex; position:absolute; inset-inline:0; top: var(--header-h);
    margin:.5rem 1rem; max-width:none; z-index:90;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .55rem .9rem;
    align-items: center;
    gap: .5rem;
  }
}