/* ═══ مینی‌گیم‌ها ═══ */

/* ── معرفیِ مرحله / پایان ── */
.brief__goal{
  display:flex; gap:9px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r-md);
  background:var(--glass); border:1px solid var(--line);
  font-size:13px; line-height:1.85; color:var(--cream);
}
.brief__guide{
  display:flex; flex-direction:column; gap:8px; text-align:right;
  padding:10px 12px; border-radius:var(--r-md);
  background:rgba(111,211,228,.06); border:1px solid rgba(111,211,228,.16);
}
.brief__guideList{
  margin:0; padding:0 1.1em 0 0; font-size:12.5px; line-height:1.55; opacity:.95;
}
.brief__guideList li{ margin:4px 0 }
.brief__rw{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:2px }

.win{ display:flex; flex-direction:column; align-items:center; gap:5px }
.win__stars{ transform:scale(1.9); margin:4px 0 12px }
.win__score{ font-size:38px; font-weight:900; line-height:1;
  background:linear-gradient(100deg,var(--gold-2),var(--flame-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.win__rows{ width:100%; display:flex; flex-direction:column; gap:7px; margin-top:14px }
.win__r{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 13px; border-radius:var(--r-sm);
  background:var(--glass); border:1px solid var(--line); font-size:13.5px;
}
.win__r b{ font-size:15px }
.unlock__ring{
  width:78px; height:78px; margin:6px auto 14px; border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--flame),transparent 55%,var(--gold),transparent);
  animation:spin 3.4s linear infinite; filter:blur(1px);
  mask:radial-gradient(circle, transparent 56%, #000 58%);
  -webkit-mask:radial-gradient(circle, transparent 56%, #000 58%);
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.modal--card .modal__t{ font-size:16px }

/* ── گزینه‌های چهارگانه (آزمون و زبان) ── */
/* پرسش‌ها به‌جای چسبیدن به بالا، در میانهٔ صفحه می‌نشینند */
.quiz, .lex{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:34px 0 8px;
}
.quiz__num, .lex__num{
  font-size:11.5px; color:var(--muted); font-weight:700; text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.quiz__q{
  font-size:clamp(15px,4.4vw,18px); font-weight:800; line-height:1.95; text-align:center;
  padding:16px 14px; border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(26,21,48,.86),rgba(12,10,24,.78));
  border:1px solid var(--line); color:var(--ink);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.quiz__opts, .lex__opts{ display:flex; flex-direction:column; gap:8px }
.qopt{
  display:flex; align-items:center; gap:10px; text-align:right; width:100%;
  padding:14px 15px; border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(26,21,48,.88),rgba(13,11,26,.82));
  border:1.5px solid var(--line);
  color:var(--ink); font-family:inherit; font-size:14.5px; font-weight:600; line-height:1.7;
  cursor:pointer; position:relative; overflow:hidden;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  transition:transform .14s var(--ease-back), border-color .2s, background .2s;
}
.qopt:active:not(:disabled){ transform:scale(.98) }
.qopt:disabled{ cursor:default }
.qopt__k{
  flex:0 0 auto; width:9px; height:9px; border-radius:50%;
  background:var(--line-2); transition:background .2s, transform .2s;
}
.qopt__t{ flex:1 1 auto; min-width:0 }
.qopt.is-right{
  border-color:rgba(75,193,126,.75); background:rgba(75,193,126,.14); color:#CFF5E0;
  animation:rightPop .42s var(--ease-back);
}
.qopt.is-right .qopt__k{ background:var(--ok); transform:scale(1.5) }
.qopt.is-wrong{
  border-color:rgba(228,84,63,.7); background:rgba(228,84,63,.13); color:#FFC9BF;
  animation:shake .38s;
}
.qopt.is-wrong .qopt__k{ background:var(--bad) }
@keyframes rightPop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.035) } 100%{ transform:scale(1) } }
@keyframes shake{
  0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-7px) }
  40%{ transform:translateX(6px) }   60%{ transform:translateX(-4px) } 80%{ transform:translateX(3px) }
}
.quiz__why{
  display:flex; gap:8px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r-md); margin-top:2px;
  background:rgba(233,178,74,.08); border:1px solid var(--line);
  font-size:12.5px; line-height:1.9; color:var(--muted);
}
.quiz__whyI{ flex:0 0 auto; color:var(--gold); margin-top:3px }

.lex__word{
  text-align:center; padding:20px 12px 16px; border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(92,107,192,.16),rgba(255,244,228,.02));
  border:1px solid rgba(92,107,192,.34);
}
.lex__t{
  display:block; font-size:clamp(30px,10vw,44px); font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--gold-2),#9BA8F0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lex__hintL{ display:block; margin-top:6px; font-size:10.5px; color:var(--faint); font-weight:700 }
.lex__q{ font-size:12.5px; color:var(--muted); text-align:center }

/* ── شکار ── */
.hunt{ position:absolute; inset:0; overflow:hidden }
.mark{
  position:absolute; width:56px; height:56px; padding:0;
  transform:translate(-50%,-50%);
  background:none; border:0; cursor:pointer; color:var(--mc);
  transition:opacity .3s, filter .3s;
}
.mark svg{ width:100%; height:100%; position:relative; z-index:2 }
.mark__halo{
  position:absolute; inset:-22%; border-radius:50%; z-index:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--mc) 40%, transparent), transparent 68%);
  opacity:.5;
}
.mark--real .mark__halo{ opacity:.95; animation:markPulse 2.1s var(--ease) infinite alternate }
.mark--real svg{ filter:drop-shadow(0 0 7px color-mix(in srgb, var(--mc) 70%, transparent)) }
@keyframes markPulse{ from{ transform:scale(.85); opacity:.5 } to{ transform:scale(1.18); opacity:1 } }
.mark.is-found{ opacity:0; transform:translate(-50%,-50%) scale(2.1); pointer-events:none; transition:all .5s var(--ease) }
.mark.is-wrong{ animation:shake .4s; filter:hue-rotate(-40deg) brightness(.7) }
.mark--flash{ transition:opacity .18s ease, transform .18s ease }
.mark--flash.is-live{ animation:markPop .24s var(--ease) }
.mark--flash.is-gone{ opacity:0 !important; pointer-events:none; transform:translate(-50%,-50%) scale(.7) !important }
@keyframes markPop{
  from{ transform:translate(-50%,-50%) scale(.55); opacity:0 }
  to{ transform:translate(-50%,-50%) scale(1); opacity:1 }
}
.hunt__hint{
  text-align:center; font-size:12.5px; color:var(--muted);
  padding:9px 12px; border-radius:99px;
  background:rgba(11,10,22,.6); border:1px solid var(--line);
}
.hunt__hint b{ color:var(--gold-2) }

/* ── شکار AR (فاز ۳) ── */
.arhunt{ position:absolute; inset:0; overflow:hidden; background:#0B0A16 }
.arhunt__cam{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}
.arhunt__overlay{
  position:absolute; inset:0; z-index:2;
}
.arhunt__mark{
  position:absolute; width:58px; height:58px; pointer-events:auto;
  transform:translate(-50%,-50%);
}
.arhunt__edge{
  position:absolute; top:42%; z-index:3; transform:translateY(-50%);
  padding:8px 10px; border-radius:999px;
  background:rgba(11,10,22,.55); border:1px solid rgba(233,178,74,.35);
  color:#FFD98A; font-size:18px; font-weight:900; pointer-events:none;
  opacity:0; transition:opacity .2s ease;
}
.arhunt__edge--l{ left:8px }
.arhunt__edge--r{ right:8px }
.arhunt__motion{
  position:absolute; left:50%; bottom:18%; z-index:4;
  transform:translateX(-50%);
  padding:10px 16px; border-radius:999px;
  background:rgba(11,10,22,.72); border:1px solid rgba(233,178,74,.5);
  color:#FFD98A; font-size:13px; font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  pointer-events:auto;
}
.arhunt__motion--pulse{ animation:arhuntPulse 1.4s ease-in-out infinite alternate }
@keyframes arhuntPulse{
  from{ box-shadow:0 0 0 0 rgba(233,178,74,.35) }
  to{ box-shadow:0 0 0 10px rgba(233,178,74,0) }
}

/* ── ریتم ── */
.rh{ position:absolute; inset:0; display:flex; flex-direction:column }
.rh__track{
  flex:1 1 auto; min-height:0; display:flex; gap:6px;
  padding:0 4px; position:relative;
  mask:linear-gradient(180deg, transparent, #000 12%, #000 100%);
  -webkit-mask:linear-gradient(180deg, transparent, #000 12%, #000 100%);
}
.rh__lane{
  flex:1; position:relative; border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,244,228,.02), rgba(233,178,74,.06));
  border:1px solid rgba(233,178,74,.10); overflow:hidden;
}
.rh__notes{ position:absolute; inset:0 }
.rh__note{
  position:absolute; top:-26px; left:9%; right:9%; height:22px; border-radius:8px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 0 16px rgba(233,178,74,.55), inset 0 1px 0 rgba(255,255,255,.5);
  will-change:transform;
}
.rh__note--kick{
  background:linear-gradient(180deg,var(--flame-2),var(--flame)); height:26px;
  box-shadow:0 0 20px rgba(242,102,13,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
.rh__note.is-hit{ opacity:0 !important; transform:scale(1.5) !important; transition:all .18s }
.rh__line{
  height:3px; margin:0 4px; border-radius:3px; flex:0 0 auto;
  background:linear-gradient(90deg,transparent,var(--flame),var(--gold),var(--flame),transparent);
  box-shadow:0 0 20px rgba(242,102,13,.8);
}
.rh__judge{
  flex:0 0 auto; height:30px; display:grid; place-items:center;
  font-size:16px; font-weight:900; opacity:0;
}
.rh__judge.is-pop{ animation:judgePop .5s var(--ease) }
@keyframes judgePop{
  0%{ opacity:0; transform:scale(.6) } 25%{ opacity:1; transform:scale(1.15) }
  60%{ opacity:1; transform:scale(1) } 100%{ opacity:0; transform:scale(1) }
}
.rh__pads{ flex:0 0 auto; display:flex; gap:6px; padding:0 4px }
.rh__pad{
  flex:1; height:74px; border-radius:var(--r-md); cursor:pointer;
  background:linear-gradient(180deg, rgba(233,178,74,.10), rgba(233,178,74,.04));
  border:1.5px solid var(--line-2); display:grid; place-items:center;
  transition:transform .08s, background .12s, box-shadow .12s;
}
.rh__padI{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,178,74,.5), transparent 70%);
  border:1.5px solid var(--line-2);
}
.rh__pad.is-on{
  transform:scale(.94);
  background:linear-gradient(180deg, rgba(242,102,13,.5), rgba(242,102,13,.2));
  box-shadow:0 0 30px rgba(242,102,13,.6);
}

/* ── بافت ── */
.wv{
  flex:1 1 auto; min-height:0;
  display:flex; gap:14px; align-items:center; justify-content:center;
  padding-top:36px;
}
.wv__side{ flex:0 0 34% }
.wv__main{ flex:1 1 auto; min-width:0 }
.wv__label{ font-size:11px; font-weight:800; color:var(--faint); margin-bottom:6px; text-align:center }
.wv__grid{
  display:grid; grid-template-columns:repeat(var(--n),1fr); gap:3px;
  padding:6px; border-radius:var(--r-md);
  background:rgba(11,10,22,.55); border:1px solid var(--line);
}
.wv__grid--target{ opacity:.92 }
.wv__cell{
  aspect-ratio:1; border-radius:4px; padding:0; cursor:pointer; border:0;
  background:var(--c,#333); position:relative; overflow:hidden;
  transition:transform .14s var(--ease-back), box-shadow .2s;
}
.wv__cell.is-static{ cursor:default }
.wv__thread{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
             repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 4px);
}
.wv__cell.is-right{ box-shadow:inset 0 0 0 2px rgba(255,244,228,.75) }
.wv__cell.is-pop{ animation:cellPop .3s var(--ease-back) }
@keyframes cellPop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.22) } 100%{ transform:scale(1) } }
.wv__hint{
  text-align:center; font-size:12px; color:var(--faint); line-height:1.8;
  padding:9px 12px; border-radius:var(--r-md);
  background:rgba(11,10,22,.5); border:1px solid var(--line);
}

/* ── جفت‌سازی ── */
.mm__grid{
  flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns:repeat(var(--n),1fr);
  /* ردیف‌ها ارتفاعِ موجود را برابر تقسیم می‌کنند تا شبکه هرگز از قاب
     بیرون نزند (وگرنه روی نمایشِ عریض، کاشی‌ها بزرگ و ردیفِ بالا زیرِ
     سربرگ پنهان می‌شد). */
  grid-template-rows:repeat(var(--rows,4),minmax(0,1fr));
  gap:7px; justify-content:center; align-content:stretch;
  width:100%; max-width:min(96%,540px); margin-inline:auto;
  padding-top:8px;
}
.mm__tile{
  min-width:0; min-height:0; padding:0; border:0; background:none; cursor:pointer;
  perspective:700px;
}
.mm__inner{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .48s var(--ease);
}
.mm__tile.is-open .mm__inner{ transform:rotateY(180deg) }
.mm__back, .mm__face{
  position:absolute; inset:0; border-radius:var(--r-md);
  display:grid; place-items:center; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  padding:6px; overflow:hidden;
}
.mm__back{
  background:linear-gradient(150deg,#1B1630,#100D1E);
  border:1px solid var(--line); color:var(--gold);
}
.mm__back svg{ width:64%; height:64% }
.mm__face{
  transform:rotateY(180deg);
  background:linear-gradient(150deg, color-mix(in srgb,var(--rc) 18%,transparent), rgba(11,10,22,.9));
  border:1.5px solid color-mix(in srgb,var(--rc) 55%,transparent); color:var(--rc);
}
.mm__art{ width:74%; height:74%; display:grid; place-items:center }
.mm__art svg{ width:100%; height:100% }
.mm__name{
  font-size:clamp(10px,3vw,12.5px); font-weight:800; text-align:center;
  color:var(--ink); line-height:1.5;
}
.mm__tile.is-matched{ animation:matched .55s var(--ease-back); pointer-events:none }
.mm__tile.is-matched .mm__face{ border-color:var(--ok); box-shadow:0 0 22px rgba(75,193,126,.45) }
.mm__tile.is-bad .mm__face{ border-color:var(--bad) }
@keyframes matched{ 0%{ transform:scale(1) } 40%{ transform:scale(1.1) } 100%{ transform:scale(.97); opacity:.72 } }

/* ── تور ── */
.tr{ position:absolute; inset:0 }
.tr__map{
  position:absolute; inset:0; border-radius:var(--r-lg); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%, rgba(233,178,74,.06), transparent 60%);
  border:1px solid var(--line);
}
.tr__lines{ position:absolute; inset:0 }
.tr__lines svg{ width:100%; height:100% }
.tr__stop{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--faint); transition:color .3s;
}
.tr__pin{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(11,10,22,.75); border:1.5px solid currentColor; padding:7px;
}
.tr__pin svg{ width:100%; height:100% }
.tr__label{
  font-size:10px; font-weight:700; white-space:nowrap; opacity:.85;
  padding:1px 6px; border-radius:99px; background:rgba(9,8,20,.72);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.tr__stop.is-next{ color:var(--flame-2) }
.tr__stop.is-next .tr__pin{
  box-shadow:0 0 0 4px rgba(242,102,13,.18), 0 0 26px rgba(242,102,13,.55);
  animation:pinPulse 1.5s var(--ease) infinite alternate;
}
@keyframes pinPulse{ from{ transform:scale(1) } to{ transform:scale(1.12) } }
.tr__stop.is-done{ color:var(--ok) }
.tr__stop.is-done .tr__pin{ background:rgba(75,193,126,.16) }
.tr__panel{ display:flex; flex-direction:column; align-items:center; gap:9px }
.tr__head{ display:flex; align-items:center; gap:8px }
.tr__cur__t{ font-size:14px; font-weight:800; color:var(--gold-2) }
.tr__ring{ width:96px; height:96px; position:relative }
.tr__ring svg{ width:100%; height:100%; transition:filter .2s }
.tr__ring.is-hot svg{ filter:drop-shadow(0 0 12px rgba(233,178,74,.9)) }
.tr__ring.is-bad{ animation:shake .38s }

/* ── نبردِ باس ── */
.boss{ position:absolute; inset:0; display:flex; flex-direction:column; gap:10px }
.boss__hud{ flex:0 0 auto; display:flex; gap:11px; align-items:center }
.boss__side{ flex:1 1 auto; min-width:0 }
.boss__row{ display:flex; align-items:center; gap:8px; margin-bottom:5px }
.boss__n{ font-size:15px; font-weight:900; color:#FF9A8B }
.bar--boss .bar__fill{ background:linear-gradient(90deg,#8E1B12,#E4543F,#FF8A3D) }
.bar--hero .bar__fill{ background:linear-gradient(90deg,var(--hirkan),#4BC17E,#7BD8A6); box-shadow:0 0 12px rgba(75,193,126,.5) }
.boss__avatar{ flex:0 0 auto; width:66px; height:66px; transition:filter .4s }
.boss__avatar svg{ width:100%; height:100% }
.boss__eye{ animation:eyeGlow 1.6s var(--ease) infinite alternate }
@keyframes eyeGlow{ from{ opacity:.55 } to{ opacity:1 } }
.boss__avatar.is-hurt{ animation:shake .45s }
.boss__avatar.is-defeated{ opacity:.2; filter:grayscale(1) blur(1.5px); transform:scale(.85); transition:all .9s }
.boss__arena{ flex:1 1 auto; min-height:0; position:relative; display:flex; flex-direction:column }
.boss__hero{ flex:0 0 auto }
.boss__ann{
  position:absolute; inset:0; z-index:6; display:grid; place-items:center; text-align:center;
  background:radial-gradient(60% 40% at 50% 50%, rgba(11,10,22,.94), rgba(11,10,22,.75));
  animation:fadeIn .3s var(--ease); backdrop-filter:blur(6px);
}
.boss__ann.is-out{ animation:fadeOutAnn .3s var(--ease) forwards }
@keyframes fadeOutAnn{ to{ opacity:0; transform:scale(1.05) } }
.boss__annT{
  font-size:clamp(24px,8vw,36px); font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--flame-2),var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:annIn .55s var(--ease-back);
}
.boss__annS{ font-size:13px; color:var(--muted); margin-top:7px }
@keyframes annIn{ from{ opacity:0; transform:scale(.75) } to{ opacity:1; transform:none } }