/* شکاف زمان | Time Rift — استایل سینمایی فارسی */

@font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn-UI-FD-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn-UI-FD-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn-UI-FD-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn-UI-FD-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn-UI-FD-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --bg: #070b16;
  --bg2: #0b1226;
  --panel: rgba(16, 24, 48, .82);
  --panel-brd: rgba(96, 140, 220, .22);
  --ink: #e8eeff;
  --ink-dim: #9aa8cc;
  --gold: #d4a24e;
  --gold-hi: #ffd98a;
  --cyan: #4ac0d4;
  --cyan-hi: #9beeff;
  --danger: #e05c5c;
  --ok: #57c98a;
  --r: 16px;
  --shadow: 0 12px 44px rgba(0, 0, 0, .55);
  /* نام‌های کوتاهی که بخش v4.0 (لندینگ، فروشگاه، دانلود، هم‌رسانی) به کار می‌برد.
     بدون این دو، `color: var(--dim)` نامعتبر بود و رنگ از والد ارث می‌رسید —
     یعنی رنگ طراحی‌شده اصلاً اعمال نمی‌شد و متن جایی می‌توانست ناخوانا شود. */
  --dim: var(--ink-dim);
  --acc: var(--cyan);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, #14204a 0%, var(--bg2) 45%, var(--bg) 100%);
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
  direction: rtl;
}
/* v4.3: هیچ متنی نباید رنگ پیش‌فرض مرورگر (مشکی) بگیرد — روی زمینهٔ تیره ناخواناست */
button, input, select, textarea, optgroup {
  font-family: inherit; font-size: 1rem; color: var(--ink);
}
/* فهرست‌های بازشوی بومی: زمینه و متن هر دو صریح */
select, option, optgroup { background-color: #0e1430; color: var(--ink); }
/* پرکردن خودکار مرورگر: کروم زمینه را روشن می‌کند و متن را مشکی — هر دو را برمی‌گردانیم */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #131a38 inset !important;
  box-shadow: 0 0 0 1000px #131a38 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
input::placeholder, textarea::placeholder { color: var(--ink-dim); opacity: .75; }

#stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* ───── صحنهٔ سینمایی دوره ───── */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; transition: opacity .38s ease, filter .38s ease; }
.scene.scene-fade { opacity: 0; filter: blur(10px); }
.scene svg { position: absolute; inset: -4% -6%; width: 112%; height: 108%; }
.scene .l-far  { transform: translate(calc(var(--px, 0) * -8px),  calc(var(--py, 0) * -5px)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.scene .l-mid  { transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -9px)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.scene .l-near { transform: translate(calc(var(--px, 0) * -32px), calc(var(--py, 0) * -14px)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.scene .tw { animation: scene-tw 3.4s ease-in-out infinite; }
@keyframes scene-tw { 50% { opacity: .15 } }
.scene .flame { animation: flame-flicker .42s ease-in-out infinite alternate; }
@keyframes flame-flicker { from { transform: scaleY(.9) skewX(-3deg) } to { transform: scaleY(1.15) skewX(4deg) } }
.scene .wlit { animation: win-blink 7s steps(1) infinite; }
@keyframes win-blink { 0%, 88%, 100% { opacity: .85 } 92% { opacity: .1 } }
.scene .beacon { animation: beacon 1.6s ease-in-out infinite; }
@keyframes beacon { 50% { opacity: .15 } }
.scene .ringspin { animation: spin 26s linear infinite; }
.scene .bird { animation: bird-drift 13s linear infinite; }
@keyframes bird-drift { from { transform: translateX(6%) } to { transform: translateX(-14%) } }

/* ───── لایه‌های سینمایی ───── */
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(2, 4, 10, .55) 100%); }
.grain { position: fixed; inset: -60px; z-index: 3; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jitter .48s steps(4) infinite;
  will-change: transform; /* کارایی: لایهٔ جدا — جابه‌جایی نویز فقط composite شود، نه repaint تمام‌صفحه */ }
@keyframes grain-jitter { 0% { transform: translate(0,0) } 25% { transform: translate(-14px, 8px) } 50% { transform: translate(10px, -12px) } 75% { transform: translate(-6px, -6px) } }
.letterbox .lb { position: fixed; right: 0; left: 0; height: 0; background: #010208; z-index: 40; transition: height .7s cubic-bezier(.6,0,.3,1); }
.letterbox .lb-top { top: 0; }
.letterbox .lb-bot { bottom: 0; }
body.cine-mode .letterbox .lb { height: clamp(26px, 6dvh, 60px); }
.hud { pointer-events: none; }
.hud .hc { position: fixed; width: 26px; height: 26px; z-index: 4; opacity: .5;
  border: 1.5px solid color-mix(in srgb, var(--accent, #4ac0d4) 70%, transparent); }
.hud .tl { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.hud .tr { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.hud .bl { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.hud .br { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
body.cine-mode .hud .hc { opacity: 0; }

/* ───── شمارندهٔ سال پرش ───── */
.portal-wrap { position: relative; }
.portal-label { letter-spacing: .25em; color: var(--cyan-hi); animation: blink 2.2s steps(2) infinite; }
.year-counter { margin: 4vh 0 2vh; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.yc-num {
  font-size: clamp(4rem, 17vw, 7.5rem); font-weight: 900; line-height: 1; direction: ltr;
  background: linear-gradient(180deg, #fff, var(--cyan-hi) 45%, var(--accent, var(--gold)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--accent, #4ac0d4) 55%, transparent));
  font-variant-numeric: tabular-nums;
}
.yc-suffix { font-size: 1rem; color: var(--ink-dim); letter-spacing: .3em; }
.jump-track { width: min(70vw, 380px); height: 4px; margin: 0 auto 3vh; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.jump-track i { display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--accent, var(--gold)));
  box-shadow: 0 0 14px var(--cyan); transition: width .3s linear; }

/* ───── گرداب پرش زمانی ───── */
.vortex { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(74,192,212,.10), rgba(7,11,22,.94) 70%); animation: vortex-in .4s ease; }
.vortex-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--cyan); border-bottom-color: var(--gold); filter: drop-shadow(0 0 18px rgba(74,192,212,.8)); }
.vortex-ring.r1 { width: 34vmin; height: 34vmin; animation: spin 1.1s linear infinite; }
.vortex-ring.r2 { width: 52vmin; height: 52vmin; animation: spin 1.7s linear infinite reverse; opacity: .8; }
.vortex-ring.r3 { width: 72vmin; height: 72vmin; animation: spin 2.6s linear infinite; opacity: .5; }
.vortex-core { width: 10vmin; height: 10vmin; border-radius: 50%; background: radial-gradient(circle, #fff, var(--cyan) 40%, transparent 75%); animation: core-pulse .7s ease-in-out infinite alternate; }
@keyframes vortex-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes core-pulse { from { transform: scale(.8); opacity: .8 } to { transform: scale(1.25); opacity: 1 } }

/* ───── نوار بالا ───── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px;
  background: rgba(7, 11, 22, .8); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--panel-brd);
}
.topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.logo-mini { font-size: 1.2rem; animation: floaty 3s ease-in-out infinite; }
.tb-era { font-size: .8rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-code { font-weight: 800; letter-spacing: .15em; color: var(--gold-hi); font-size: .9rem; direction: ltr; }
.tb-metrics { display: flex; gap: 7px; flex-wrap: nowrap; }
.tb-m { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 34px; }
.tb-m .ico { font-size: .8rem; line-height: 1; }
.tb-m .bar { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.tb-m .bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width .9s cubic-bezier(.2,.9,.2,1); }
.tb-m.crit .bar i { background: var(--danger); animation: blink 1s steps(2) infinite; }
.tb-m .val { font-size: .62rem; color: var(--ink-dim); }
@keyframes blink { 50% { opacity: .35 } }

/* ───── صفحه‌ها ───── */
#app { position: relative; z-index: 5; max-width: 760px; margin: 0 auto; padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
.screen { display: none; animation: screen-in .5s cubic-bezier(.2,.9,.25,1); }
.screen.active { display: block; }
@keyframes screen-in { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.panel {
  background: var(--panel); border: 1px solid var(--panel-brd); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 22px 20px; max-width: 460px; margin: 4vh auto 0;
  backdrop-filter: blur(10px);
}
.panel.wide { max-width: 760px; }
.panel-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.panel-sub { color: var(--ink-dim); font-size: .85rem; margin-bottom: 18px; }

/* ───── اسپلش ───── */
.splash-wrap { text-align: center; padding-top: 6vh; }
.portal-logo { position: relative; width: 168px; height: 168px; margin: 0 auto 22px; }
.portal-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.portal-ring.pr1 { border-top-color: var(--cyan); border-left-color: var(--cyan); animation: spin 3.5s linear infinite; filter: drop-shadow(0 0 10px rgba(74,192,212,.7)); }
.portal-ring.pr2 { inset: 16px; border-bottom-color: var(--gold); border-right-color: var(--gold); animation: spin 2.6s linear infinite reverse; filter: drop-shadow(0 0 8px rgba(212,162,78,.7)); }
.portal-ring.pr3 { inset: 32px; border-top-color: rgba(255,255,255,.6); animation: spin 5s linear infinite; }
.portal-center { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4rem; animation: floaty 3s ease-in-out infinite; text-shadow: 0 0 34px rgba(74,192,212,.9); }
@keyframes floaty { 50% { transform: translateY(-7px) } }

.game-title { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.title-fa { font-size: 2.5rem; font-weight: 900; background: linear-gradient(180deg, #fff, var(--gold-hi) 55%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-en { font-size: .85rem; letter-spacing: .65em; color: var(--cyan); text-indent: .65em; direction: ltr; }
.tagline { color: var(--ink-dim); margin-bottom: 22px; }

.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; }
.glitch::before { animation: glitch-a 5s infinite steps(1); text-shadow: -2px 0 var(--cyan); }
.glitch::after { animation: glitch-b 5s infinite steps(1); text-shadow: 2px 0 var(--danger); }
@keyframes glitch-a { 0%,93%,100% { opacity: 0; transform: none } 94% { opacity: .85; transform: translate(-3px, 2px) } 96% { opacity: 0 } 97% { opacity: .7; transform: translate(2px, -1px) } 98% { opacity: 0 } }
@keyframes glitch-b { 0%,94%,100% { opacity: 0; transform: none } 95% { opacity: .8; transform: translate(3px, -2px) } 97% { opacity: 0 } 98% { opacity: .65; transform: translate(-2px, 1px) } 99% { opacity: 0 } }

.warning-box { max-width: 420px; margin: 0 auto 26px; border: 1px solid rgba(224,92,92,.4); background: rgba(224,92,92,.07); border-radius: 12px; padding: 14px 16px; text-align: right; }
.warning-line { height: 2px; background: repeating-linear-gradient(90deg, var(--danger) 0 14px, transparent 14px 24px); margin-bottom: 10px; animation: warn-slide 1.2s linear infinite; }
@keyframes warn-slide { to { background-position: 24px 0 } }
.type-line { min-height: 3.4em; font-size: .9rem; color: #ffb9b9; }
.type-line::after { content: '▌'; animation: blink 1s steps(2) infinite; color: var(--danger); }

/* ───── دکمه‌ها ───── */
.btn {
  border: 1px solid var(--panel-brd); border-radius: 13px; cursor: pointer;
  padding: 12px 20px; font-weight: 700; color: var(--ink);
  background: rgba(255,255,255,.05); transition: transform .15s, box-shadow .2s, background .2s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: linear-gradient(135deg, #2a4a8f, #1b3161); border-color: rgba(120,170,255,.45); box-shadow: 0 4px 22px rgba(42,74,143,.5); }
.btn-primary:hover { box-shadow: 0 6px 30px rgba(74,192,212,.4); }
.btn-ghost { background: transparent; }
.btn-danger-ghost { background: transparent; border-color: rgba(224,92,92,.4); color: #ffb9b9; }
.btn-big { font-size: 1.06rem; padding: 15px 30px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.pulse-glow { animation: pulse-glow 2.2s ease-in-out infinite; }
@keyframes pulse-glow { 50% { box-shadow: 0 0 34px rgba(74,192,212,.55); } }
.row-2 { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.row-2 > .btn { flex: 1; min-width: 140px; }
.row-2.gap { gap: 16px; }
.row-2.gap > div { flex: 1; min-width: 160px; }
.center-row { text-align: center; margin-top: 16px; }

/* ───── فرم ───── */
.field-label { display: block; font-size: .82rem; color: var(--ink-dim); margin: 14px 0 6px; }
.inp {
  width: 100%; padding: 13px 15px; border-radius: 13px; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid var(--panel-brd); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.inp:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(74,192,212,.18); }
.inp-code { text-align: center; font-size: 1.7rem; font-weight: 800; letter-spacing: .4em; direction: ltr; text-transform: uppercase; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatar-cell { font-size: 1.5rem; padding: 8px 0; text-align: center; border-radius: 12px; border: 1px solid transparent; cursor: pointer; background: rgba(255,255,255,.04); transition: transform .15s, border-color .2s; }
.avatar-cell:hover { transform: scale(1.12); }
.avatar-cell.sel { border-color: var(--gold); background: rgba(212,162,78,.16); box-shadow: 0 0 14px rgba(212,162,78,.35); }
.check-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: .82rem; color: var(--ink-dim); cursor: pointer; }

/* ───── انتخاب دوره ───── */
.era-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.era-card {
  position: relative; overflow: hidden; border-radius: 14px; padding: 16px 14px;
  border: 1px solid var(--panel-brd); background: rgba(255,255,255,.04); cursor: pointer;
  transition: transform .18s, border-color .2s, box-shadow .25s;
}
.era-card:hover { transform: translateY(-3px); }
.era-card.sel { border-color: var(--era-c, var(--gold)); box-shadow: 0 0 0 1px var(--era-c, var(--gold)), 0 8px 26px rgba(0,0,0,.4); }
.era-card.sel::after { content: '✓'; position: absolute; top: 8px; left: 10px; color: var(--era-c, var(--gold)); font-weight: 900; }
.era-ico { font-size: 1.7rem; margin-bottom: 6px; }
.era-name { font-weight: 800; }
.era-year { font-size: .74rem; color: var(--ink-dim); margin-top: 2px; }
.era-mission { font-size: .76rem; color: var(--ink-dim); margin-top: 8px; line-height: 1.7; }
.era-stages { position: absolute; top: 10px; right: auto; left: 12px; font-size: .68rem; color: var(--ink-dim); }

.seg { display: flex; border: 1px solid var(--panel-brd); border-radius: 12px; overflow: hidden; }
.seg button { flex: 1; padding: 10px 6px; background: transparent; border: 0; color: var(--ink-dim); cursor: pointer; font-weight: 700; transition: background .2s, color .2s; }
.seg button.sel { background: rgba(74,192,212,.18); color: var(--cyan-hi); }

/* ───── لابی ───── */
.room-code-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: rgba(255,255,255,.05); border: 1px dashed rgba(212,162,78,.5); border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; }
.room-code-label { font-size: .74rem; color: var(--ink-dim); }
.room-code { font-size: 2.2rem; font-weight: 900; letter-spacing: .3em; color: var(--gold-hi); direction: ltr; text-shadow: 0 0 24px rgba(212,162,78,.5); }
.qr-box { color: #0b1020; background: #fff; padding: 6px; border-radius: 10px; line-height: 0; }
.qr-box svg, .qr-box img { width: 92px; height: 92px; display: block; }
.lobby-settings { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { font-size: .76rem; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--panel-brd); background: rgba(255,255,255,.05); color: var(--ink-dim); }
.chip b { color: var(--ink); }
.player-orbit { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 12px; }
.player-card { text-align: center; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--panel-brd); background: rgba(255,255,255,.04); animation: pop-in .4s cubic-bezier(.2,1.4,.4,1); position: relative; }
@keyframes pop-in { from { transform: scale(.6); opacity: 0 } }
.player-card .pav { font-size: 1.9rem; }
.player-card .pname { font-size: .8rem; font-weight: 700; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card .prole { font-size: .68rem; color: var(--ink-dim); margin-top: 2px; }
.player-card.host::before { content: '👑'; position: absolute; top: -8px; right: 8px; font-size: .9rem; }
.player-card.off { opacity: .4; filter: grayscale(1); }
.player-card .pstat { position: absolute; top: 6px; left: 8px; font-size: .72rem; }
.hint { color: var(--ink-dim); font-size: .8rem; margin-top: 10px; text-align: center; }

/* ───── نقش‌ها ───── */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.role-card {
  border-radius: 14px; padding: 16px; cursor: pointer; position: relative;
  border: 1px solid var(--panel-brd); background: rgba(255,255,255,.04);
  transition: transform .18s, box-shadow .25s, border-color .2s;
}
.role-card:hover { transform: translateY(-3px); }
.role-card.mine { border-color: var(--role-c); box-shadow: 0 0 0 1px var(--role-c), 0 0 26px color-mix(in srgb, var(--role-c) 40%, transparent); }
.role-card.taken { opacity: .55; cursor: default; }
.role-ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 12px; background: color-mix(in srgb, var(--role-c) 22%, transparent); margin-bottom: 8px; }
.role-name { font-weight: 800; color: var(--role-c); }
.role-desc { font-size: .76rem; color: var(--ink-dim); line-height: 1.8; margin-top: 6px; }
.role-ability { display: inline-block; font-size: .7rem; margin-top: 8px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--role-c) 18%, transparent); color: var(--role-c); }
.role-taker { position: absolute; top: 10px; left: 12px; font-size: .74rem; color: var(--ink-dim); }

/* ───── سینماتیک ───── */
.cine { max-width: 620px; margin: 4vh auto 0; text-align: center; }
.cine.center { padding-top: 10vh; }
.era-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; border: 1px solid var(--panel-brd); background: rgba(255,255,255,.05); font-size: .8rem; color: var(--ink-dim); margin-bottom: 14px; }
.cine-title { font-size: 1.7rem; font-weight: 900; margin-bottom: 6px; background: linear-gradient(180deg, #fff, var(--gold-hi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cine-title.small { font-size: 1.2rem; }
.cine-year { color: var(--cyan); font-size: .9rem; margin-bottom: 16px; }
.cine-year.big { font-size: 1.5rem; font-weight: 800; margin: 14px 0 20px; text-shadow: 0 0 24px rgba(74,192,212,.6); }
.cine-text { color: var(--ink); line-height: 2.15; text-align: justify; font-size: .95rem; background: var(--panel); border: 1px solid var(--panel-brd); border-radius: var(--r); padding: 18px 20px; margin-bottom: 18px; }
.mission-box { border: 1px solid rgba(212,162,78,.4); background: rgba(212,162,78,.08); border-radius: 13px; padding: 12px 16px; margin-bottom: 20px; font-size: .9rem; }
.mission-box b { color: var(--gold-hi); }

.crisis .crisis-flash { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 30%, rgba(224,92,92,.16), transparent 60%); animation: crisis-throb 1.6s ease-in-out infinite; z-index: -1; }
@keyframes crisis-throb { 50% { opacity: .3 } }
.crisis-label { color: var(--danger); font-size: .95rem; letter-spacing: .2em; margin-bottom: 10px; animation: blink 1.4s steps(2) infinite; }

/* ───── مرحله / کاوش ───── */
.stage-head { text-align: center; margin-bottom: 14px; }
.stage-title { font-size: 1.4rem; font-weight: 900; }
.stage-year { color: var(--cyan); font-size: .82rem; margin: 4px 0 10px; }
.stage-intro { text-align: justify; color: var(--ink-dim); font-size: .87rem; line-height: 2; background: var(--panel); border: 1px solid var(--panel-brd); border-radius: var(--r); padding: 14px 16px; }
.section-label { font-size: .95rem; margin: 18px 0 10px; color: var(--gold-hi); }
.section-label.big { font-size: 1.3rem; text-align: center; color: var(--ink); }

.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.loc-card {
  position: relative; border-radius: 13px; padding: 14px 10px; text-align: center; cursor: pointer;
  border: 1px solid var(--panel-brd); background: rgba(255,255,255,.05);
  transition: transform .16s, border-color .2s;
}
.loc-card:hover { transform: translateY(-3px) scale(1.02); border-color: var(--cyan); }
.loc-card .lico { font-size: 1.7rem; }
.loc-card .lname { font-size: .8rem; font-weight: 700; margin-top: 6px; }
.loc-card .ltag { font-size: .64rem; color: var(--cyan); margin-top: 4px; }
.loc-card.done { opacity: .5; cursor: default; border-style: dashed; }
.loc-card.done::after { content: '✔'; position: absolute; top: 8px; left: 10px; color: var(--ok); }
.loc-card.special { border-color: rgba(176,74,143,.6); background: rgba(176,74,143,.09); animation: pulse-glow 2.4s ease-in-out infinite; }
.loc-card.mine-role { border-color: rgba(176,141,74,.6); }

.clue-list { display: flex; flex-direction: column; gap: 8px; }
.clue-item { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 12px; padding: 10px 12px; animation: clue-in .45s cubic-bezier(.2,1.2,.3,1); }
@keyframes clue-in { from { transform: translateX(-16px); opacity: 0 } }
.clue-item .cico { font-size: 1.2rem; }
.clue-item .ctxt { font-size: .82rem; line-height: 1.9; }
.clue-item .cby { display: block; font-size: .68rem; color: var(--ink-dim); margin-top: 3px; }
.clue-item.private { border-color: rgba(176,141,74,.55); background: rgba(176,141,74,.08); }
.clue-empty { color: var(--ink-dim); font-size: .8rem; text-align: center; padding: 10px; }

/* ───── تایمر ───── */
.phase-timer { display: grid; place-items: center; margin: 8px 0 14px; }
.timer-ring { position: relative; width: 76px; height: 76px; }
.timer-ring svg { transform: rotate(-90deg); }
.timer-ring .tbg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 5; }
.timer-ring .tfg { fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.timer-ring.low .tfg { stroke: var(--danger); }
.timer-ring.low { animation: timer-shake .5s ease-in-out infinite; }
@keyframes timer-shake { 25% { transform: translateX(-1.5px) } 75% { transform: translateX(1.5px) } }
.timer-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 1.15rem; }

/* ───── تصمیم ───── */
.opt-list { display: flex; flex-direction: column; gap: 12px; max-width: 620px; margin: 0 auto; }
.opt-card {
  position: relative; text-align: right; cursor: pointer;
  border: 1px solid var(--panel-brd); border-radius: 15px; padding: 16px 16px 14px;
  background: var(--panel); transition: transform .16s, border-color .2s, box-shadow .25s;
}
.opt-card:hover { transform: translateY(-2px); }
.opt-card.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(212,162,78,.3); }
.opt-card.hist-hint { border-color: rgba(176,141,74,.8); }
.opt-card.hist-hint .opt-hist { display: inline-flex; }
.opt-hist { display: none; align-items: center; gap: 4px; font-size: .68rem; color: #e6c98a; background: rgba(176,141,74,.15); padding: 3px 10px; border-radius: 99px; margin-top: 8px; }
.opt-card.unlocked { border-color: rgba(74,127,176,.8); animation: unlock-in .6s cubic-bezier(.2,1.3,.3,1); }
@keyframes unlock-in { from { transform: scale(.92); opacity: 0; filter: blur(3px) } }
.opt-head { display: flex; align-items: center; gap: 10px; }
.opt-ico { font-size: 1.5rem; }
.opt-label { font-weight: 800; font-size: 1rem; flex: 1; }
.opt-votes { display: flex; gap: 3px; flex-wrap: wrap; direction: ltr; }
.opt-votes span { font-size: 1rem; animation: pop-in .35s cubic-bezier(.2,1.5,.4,1); }
.opt-desc { font-size: .83rem; color: var(--ink); line-height: 1.9; margin-top: 8px; }
.opt-risk { font-size: .74rem; color: #ffb9b9; margin-top: 6px; }
.opt-risk::before { content: '⚠ خطر: '; }
.opt-locked { border-style: dashed; opacity: .75; text-align: center; padding: 14px; color: var(--ink-dim); font-size: .82rem; border-radius: 15px; border: 1px dashed rgba(74,127,176,.5); }
.vote-status { text-align: center; margin-top: 14px; color: var(--ink-dim); font-size: .84rem; }

/* ───── نتیجه ───── */
.result-choice { text-align: center; background: rgba(255,255,255,.05); border: 1px solid var(--panel-brd); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.result-choice .rc-ico { font-size: 2.1rem; }
.result-choice .rc-label { font-weight: 800; margin-top: 6px; }
.result-choice .rc-tag { font-size: .72rem; color: var(--ok); margin-top: 4px; }
.result-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 8px; }
.metric-row { background: rgba(255,255,255,.04); border: 1px solid var(--panel-brd); border-radius: 12px; padding: 10px 12px; }
.metric-head { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 6px; }
.metric-head .delta { font-weight: 800; }
.metric-head .delta.up { color: var(--ok); }
.metric-head .delta.down { color: var(--danger); }
.metric-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.metric-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width 1.1s cubic-bezier(.2,.9,.2,1); }
.metric-bar i.crit { background: var(--danger); }
.echo-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.echo-item { border: 1px solid rgba(122,84,176,.55); background: rgba(122,84,176,.1); border-radius: 13px; padding: 12px 14px; font-size: .84rem; line-height: 1.9; animation: echo-in 1s cubic-bezier(.2,.9,.2,1); position: relative; overflow: hidden; }
.echo-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%); animation: shimmer 2.4s ease-in-out infinite; }
@keyframes echo-in { from { opacity: 0; transform: scale(.94); filter: blur(6px) } }
@keyframes shimmer { to { transform: translateX(-160%) } }
.echo-item.good { border-color: rgba(87,201,138,.5); background: rgba(87,201,138,.08); }

/* ───── پایان ───── */
.ending .ending-icon { font-size: 4.2rem; animation: ending-pop 1.4s cubic-bezier(.2,1.2,.3,1); margin-bottom: 8px; }
@keyframes ending-pop { 0% { transform: scale(0) rotate(-180deg); opacity: 0 } 60% { transform: scale(1.25) rotate(8deg) } }
.score-table { display: flex; flex-direction: column; gap: 8px; max-width: 480px; margin: 0 auto 14px; }
.score-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 12px; padding: 9px 14px; animation: clue-in .5s both; }
.score-row .rank { font-weight: 900; width: 26px; color: var(--ink-dim); }
.score-row.first { border-color: rgba(212,162,78,.6); box-shadow: 0 0 18px rgba(212,162,78,.25); }
.score-row .sav { font-size: 1.3rem; }
.score-row .sname { flex: 1; text-align: right; font-weight: 700; font-size: .88rem; }
.score-row .sdetail { font-size: .66rem; color: var(--ink-dim); }
.score-row .sval { font-weight: 900; color: var(--gold-hi); }
#team-score { color: var(--gold-hi); font-size: 1.3rem; }

/* ───── نوار توانایی ───── */
.ability-bar {
  position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%);
  z-index: 30; display: flex; gap: 10px; align-items: center;
  background: rgba(10, 16, 34, .92); border: 1px solid var(--panel-brd); border-radius: 99px;
  padding: 8px 14px; backdrop-filter: blur(12px); box-shadow: var(--shadow);
  max-width: min(94vw, 560px);
}
.ability-role { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--role-c, var(--ink-dim)); white-space: nowrap; }
.ability-btn {
  border: 1px solid var(--role-c, var(--panel-brd)); color: var(--role-c, var(--ink));
  background: color-mix(in srgb, var(--role-c, #888) 14%, transparent);
  border-radius: 99px; padding: 8px 16px; font-weight: 800; font-size: .8rem; cursor: pointer;
  white-space: nowrap; position: relative;
}
/* کارایی: به‌جای انیمیشن box-shadow (repaint دائم روی چند دکمه)، سایهٔ ثابت روی لایهٔ ::after و تپش با opacity */
.ability-btn::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 34px rgba(74,192,212,.55); opacity: 0;
  animation: glow-fade 2.6s ease-in-out infinite;
}
@keyframes glow-fade { 50% { opacity: 1; } }
.ability-btn[disabled] { opacity: .4; }
.ability-btn[disabled]::after { animation: none; opacity: 0; }
.ability-note { font-size: .68rem; color: var(--ink-dim); white-space: nowrap; }

/* ───── اعلان و مودال ───── */
.toasts { position: fixed; top: 58px; right: 50%; transform: translateX(50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(94vw, 420px); pointer-events: none; }
.toast { background: rgba(12, 19, 40, .95); border: 1px solid var(--panel-brd); border-right: 3px solid var(--cyan); border-radius: 12px; padding: 10px 14px; font-size: .82rem; box-shadow: var(--shadow); animation: toast-in .4s cubic-bezier(.2,1.2,.3,1), toast-out .4s ease 4.6s both; }
.toast.big { border-right-color: var(--gold); font-weight: 700; }
@keyframes toast-in { from { transform: translateY(-14px); opacity: 0 } }
@keyframes toast-out { to { transform: translateY(-8px); opacity: 0 } }

.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(4, 7, 14, .7); backdrop-filter: blur(6px); animation: vortex-in .25s ease; padding: 18px; }
.modal-card { background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 18px; padding: 22px; max-width: 440px; width: 100%; box-shadow: var(--shadow); animation: pop-in .35s cubic-bezier(.2,1.3,.4,1); max-height: 82dvh; overflow-y: auto; }
.modal-card h3 { margin-bottom: 10px; font-size: 1.1rem; }
.modal-card p { font-size: .87rem; line-height: 2; color: var(--ink); margin-bottom: 10px; }
.modal-card .m-dim { color: var(--ink-dim); font-size: .78rem; }
.modal-card .btn { width: 100%; margin-top: 8px; }
.verdict { display: inline-block; padding: 4px 14px; border-radius: 99px; font-size: .8rem; font-weight: 800; margin-bottom: 10px; }
.verdict.bright { background: rgba(87,201,138,.18); color: var(--ok); }
.verdict.grim { background: rgba(224,92,92,.18); color: var(--danger); }
.verdict.grey { background: rgba(255,255,255,.1); color: var(--ink-dim); }

.hidden { display: none !important; }

/* ───── کانفتی پایان طلایی ───── */
.confetti { position: fixed; top: -12px; z-index: 65; font-size: 1.1rem; animation: confetti-fall linear both; pointer-events: none; }
@keyframes confetti-fall { to { transform: translateY(105dvh) rotate(720deg); opacity: .7; } }

@media (max-width: 480px) {
  html { font-size: 15px; }
  .title-fa { font-size: 2rem; }
  .tb-metrics { gap: 5px; }
  .tb-m { min-width: 28px; }
  .tb-m .val { display: none; }
  .qr-box svg, .qr-box img { width: 74px; height: 74px; }
  .room-code { font-size: 1.7rem; }
}

/* ═══════════ ارتقای سینمایی نسخهٔ ۲ — شیشه، نور، حرکت ═══════════ */

@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

body {
  background:
    radial-gradient(1400px 800px at 50% -12%, rgba(20, 32, 74, .55) 0%, transparent 60%),
    #05070f;
}

/* پنل‌های شیشه‌ای با حاشیهٔ نورانی چرخان */
.panel, .cine-text, .modal-card {
  background: linear-gradient(160deg, rgba(14, 21, 44, .72), rgba(8, 12, 26, .78));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.panel { position: relative; }
.panel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ang),
    transparent 0turn .32turn,
    color-mix(in srgb, var(--accent, #4ac0d4) 85%, transparent) .43turn,
    transparent .54turn 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  /* کارایی: steps به‌جای linear — گرادیان زاویه‌ای قابل composite نیست و هر فریم repaint می‌شد؛
     با ۱۲ به‌روزرسانی در ثانیه همان جلوه با ~۲۰٪ هزینه به دست می‌آید */
  animation: border-rot 7s steps(84) infinite; pointer-events: none; opacity: .8;
}
@keyframes border-rot { to { --ang: 360deg; } }

/* دکمهٔ اصلی: انرژی زمان */
.btn-primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, #4ac0d4) 34%, #16264f),
    #131f42 55%, #0d1730);
  border-color: color-mix(in srgb, var(--accent, #4ac0d4) 55%, transparent);
  box-shadow: 0 4px 26px color-mix(in srgb, var(--accent, #4ac0d4) 28%, transparent),
              inset 0 1px 0 rgba(255,255,255,.14);
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.22) 50%, transparent 68%);
  transform: translateX(160%); animation: btn-sweep 3.4s ease-in-out infinite;
}
@keyframes btn-sweep { 0%, 55% { transform: translateX(160%) } 85%, 100% { transform: translateX(-160%) } }

/* تیترهای درخشان.
   v4.5: صحنه‌های پشتِ تیتر گاهی هالهٔ روشن دارند (نور پرتال، انفجار زمان) و
   تیتر روشن روی زمینهٔ روشن گم می‌شد. هالهٔ تیره زیر درخشش گذاشته شد تا تیتر
   روی هر دو زمینه — تیره و روشن — خوانا بماند. */
.cine-title, .panel-title, .stage-title {
  text-shadow:
    0 1px 3px rgba(4, 8, 20, .95),
    0 0 14px rgba(4, 8, 20, .85),
    0 0 34px color-mix(in srgb, var(--accent, #d4a24e) 40%, transparent);
}
.panel-sub, .section-label { text-shadow: 0 1px 3px rgba(4, 8, 20, .9), 0 0 12px rgba(4, 8, 20, .75); }
.section-label { color: color-mix(in srgb, var(--accent, #d4a24e) 75%, #fff); }

/* اسپلش: پورتال بزرگ‌تر با هالهٔ انرژی */
.portal-logo { width: 200px; height: 200px; filter: drop-shadow(0 0 44px rgba(74,192,212,.35)); }
.portal-logo::before {
  content: ''; position: absolute; inset: -26%; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,192,212,.16), transparent 62%);
  animation: core-pulse 2.6s ease-in-out infinite alternate;
}
.portal-ring.pr1 { box-shadow: inset 0 0 22px rgba(74,192,212,.18); }
.title-fa { font-size: clamp(2.4rem, 9vw, 3.2rem); }
.splash-wrap { padding-top: 4vh; }

/* کارت‌های دوره: تصویر زنده‌تر */
.era-card { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.era-card.sel { transform: translateY(-3px) scale(1.02); }
.era-ico { font-size: 2rem; filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--era-c, #d4a24e) 60%, transparent)); }

/* کارت نقش: هالهٔ رنگ نقش */
.role-card.mine { transform: translateY(-3px); }
.role-ico { box-shadow: inset 0 0 18px color-mix(in srgb, var(--role-c) 30%, transparent); }

/* کارت تصمیم: سینمایی */
.opt-card { background: linear-gradient(160deg, rgba(16, 24, 48, .8), rgba(9, 13, 28, .85)); backdrop-filter: blur(12px); }
.opt-card.sel { transform: translateY(-2px) scale(1.012); }
.opt-ico { font-size: 1.9rem; filter: drop-shadow(0 2px 12px rgba(212,162,78,.5)); }

/* بحران: قرمز سینمایی */
#screen-crisis .cine-text { border-color: rgba(224,92,92,.4); box-shadow: 0 0 60px rgba(224,92,92,.12) inset; }
.crisis-label { font-size: 1.05rem; text-shadow: 0 0 22px rgba(224,92,92,.8); }
body.phase-crisis .vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(60, 4, 10, .6) 100%); }

/* پایان‌ها: رنگ‌آمیزی صحنه */
body.end-golden .vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(64, 44, 4, .5) 100%); }
body.end-dark .vignette { background: radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(2, 2, 6, .85) 100%); }
body.end-hidden .vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 48%, rgba(34, 8, 56, .6) 100%); }
.ending .ending-icon { font-size: 5rem; filter: drop-shadow(0 0 44px color-mix(in srgb, var(--accent, #ffd98a) 70%, transparent)); }

/* حس عمق در ورود صفحه */
@keyframes screen-in {
  from { opacity: 0; transform: translateY(26px) scale(.975); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* موبایل: پورتال جمع‌وجورتر */
@media (max-width: 480px) {
  .portal-logo { width: 158px; height: 158px; }
  .hud .hc { width: 18px; height: 18px; }
}

/* کاهش حرکت برای کاربران حساس */
@media (prefers-reduced-motion: reduce) {
  .grain, .btn-primary::after { animation: none !important; }
  .scene .l-far, .scene .l-mid, .scene .l-near { transition: none; }
}

/* ═══════════ نسخهٔ ۳: روایت متحرک — متن دیگر ثابت نیست ═══════════ */

/* ظهور کلمه‌به‌کلمهٔ روایت */
.wrev {
  display: inline-block; opacity: 0; filter: blur(8px);
  transform: translateY(10px) scale(.96);
  animation: wrev .6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes wrev { to { opacity: 1; filter: none; transform: none; } }

/* ورود پلکانی کارت‌ها */
.deal-in { opacity: 0; animation: deal-in .55s cubic-bezier(.2, .8, .3, 1.2) forwards; }
@keyframes deal-in {
  from { opacity: 0; transform: translateY(22px) scale(.92); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* سرنخ تازه: چرخش و درخشش */
.clue-pop { animation: clue-pop .7s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes clue-pop {
  0% { opacity: 0; transform: rotateX(80deg) translateY(-14px); box-shadow: 0 0 0 rgba(155,238,255,0); }
  55% { box-shadow: 0 0 34px rgba(155,238,255,.5); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 rgba(155,238,255,0); }
}
.loc-card.opening { animation: loc-open .5s ease; }
@keyframes loc-open { 40% { transform: scale(.94); filter: brightness(1.6); } }

/* ردیف آواتار رأی‌دهنده‌ها */
.vote-avs { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.vav {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.25rem;
  border-radius: 50%; background: rgba(255,255,255,.06);
  border: 1.6px solid rgba(255,255,255,.14); filter: grayscale(.9) opacity(.55);
  animation: vav-wait 1.6s ease-in-out infinite;
}
.vav.did {
  filter: none;
  border-color: color-mix(in srgb, var(--accent, #4ac0d4) 80%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent, #4ac0d4) 55%, transparent);
  animation: vav-pop .5s cubic-bezier(.2, .9, .3, 1.4);
}
@keyframes vav-wait { 50% { transform: translateY(-3px); } }
@keyframes vav-pop { 0% { transform: scale(.4) rotate(-14deg); } 70% { transform: scale(1.18); } 100% { transform: none; } }

/* بحران: لرزش صفحه + تپش قرمز */
#screen-crisis.active { animation: quake .8s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes quake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-7px, 3px); }
  40%, 60% { transform: translate(7px, -3px); }
}
/* کارایی: تپش بحران با opacity روی لایهٔ ::after — انیمیشنِ خودِ background هر فریم repaint تمام‌صفحه بود */
body.phase-crisis .vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(60, 4, 10, .55) 100%); }
body.phase-crisis .vignette::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 38%, rgba(96, 6, 14, .72) 100%);
  opacity: 0; animation: crisis-pulse 1.8s ease-in-out infinite;
}
@keyframes crisis-pulse { 50% { opacity: 1; } }
#screen-crisis .crisis-label { animation: alert-strobe 1s steps(2) infinite; }
@keyframes alert-strobe { 50% { opacity: .35; } }

/* ورود سینمایی تیترها هنگام فعال‌شدن صفحه */
.screen.active .cine-title { animation: title-in 1s cubic-bezier(.2, .8, .3, 1) both; }
.screen.active .cine-year { animation: year-stamp .9s cubic-bezier(.2, .9, .3, 1.35) .35s both; }
@keyframes title-in {
  from { opacity: 0; transform: translateY(-18px) scale(1.12); filter: blur(10px); letter-spacing: .3em; }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes year-stamp {
  from { opacity: 0; transform: scale(1.8); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.screen.active .cine-text { animation: panel-rise .8s cubic-bezier(.2, .8, .3, 1) .2s both; }
@keyframes panel-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.screen.active .mission-line { animation: deal-in .6s 1s both; }

/* پژواک‌های زمان: لغزش از عمق */
.echo-item { animation: echo-in .8s cubic-bezier(.2, .8, .3, 1) both; }
.echo-item:nth-child(2) { animation-delay: .35s; }
.echo-item:nth-child(3) { animation-delay: .7s; }
@keyframes echo-in {
  from { opacity: 0; transform: translateX(-30px) scale(.95); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* نتیجه: مهر انتخاب تیم */
.screen.active .result-choice { animation: stamp-in .7s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes stamp-in {
  0% { opacity: 0; transform: scale(1.6) rotate(3deg); filter: blur(8px); }
  100% { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wrev, .deal-in, .screen.active .cine-title, .screen.active .cine-year,
  .screen.active .cine-text, .echo-item { animation-duration: .01s !important; animation-delay: 0s !important; }
  #screen-crisis.active { animation: none; }
}

/* ═══════════ نسخهٔ ۴: نور حجمی، مه روان، موسیقی ═══════════ */

.scene .ray { opacity: 0; animation: ray-breathe 8.4s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes ray-breathe { 0%, 100% { opacity: 0; } 45% { opacity: .07; } }
.scene .mist { mix-blend-mode: screen; }
.scene .m1 { opacity: .05; animation: mist-a 46s ease-in-out infinite alternate; }
.scene .m2 { opacity: .04; animation: mist-b 61s ease-in-out infinite alternate; }
.scene .m3 { opacity: .035; animation: mist-a 38s ease-in-out infinite alternate-reverse; }
@keyframes mist-a { from { transform: translateX(-90px); } to { transform: translateX(120px); } }
@keyframes mist-b { from { transform: translateX(110px); } to { transform: translateX(-130px); } }

.music-btn {
  position: fixed; bottom: 14px; inset-inline-start: 14px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10, 16, 34, .78); backdrop-filter: blur(10px);
  border: 1.4px solid color-mix(in srgb, var(--accent, #4ac0d4) 55%, transparent);
  color: var(--ink); font-size: 1.15rem; cursor: pointer;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .5), 0 0 18px color-mix(in srgb, var(--accent, #4ac0d4) 22%, transparent);
  animation: music-beat 1.25s ease-in-out infinite;
  transition: transform .2s, opacity .2s;
}
.music-btn:active { transform: scale(.9); }
.music-btn.off { animation: none; opacity: .55; }
@keyframes music-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.09); } 24% { transform: scale(1); } }
.voice-btn { bottom: 70px; animation: none; }
.voice-btn.off { opacity: .55; }

/* ═══════════ نسخهٔ ۲: شکاف زمان — Void، تصمیم شخصی، مستند ═══════════ */

.void-title { color: #b08cf0; text-shadow: 0 0 30px rgba(176, 140, 240, .6); }
#screen-void.active { animation: void-in 1.2s ease both; }
@keyframes void-in { from { filter: invert(1) blur(14px); opacity: 0; } to { filter: none; opacity: 1; } }
body:has(#screen-void.active) .vignette {
  background: radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(30, 8, 52, .72) 100%);
}
.void-avatar { font-size: 4rem; animation: void-float 3.2s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(176,140,240,.7)); }
@keyframes void-float { 50% { transform: translateY(-12px) rotate(4deg); } }

.personal-card {
  margin: 14px 0; padding: 14px; border-radius: var(--r);
  background: linear-gradient(160deg, rgba(40, 22, 66, .75), rgba(18, 10, 34, .8));
  border: 1px dashed rgba(176, 140, 240, .45);
}
.personal-head { font-weight: 800; color: #cbb0f5; margin-bottom: 6px; }
.personal-head.done { color: var(--ok); }
.personal-q { color: var(--ink); font-size: .95rem; margin-bottom: 10px; }
.personal-opt { display: block; width: 100%; margin-top: 8px; text-align: right; }

.collective-line {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: .88rem;
  background: rgba(74, 192, 212, .08); border: 1px solid rgba(74, 192, 212, .25);
  color: var(--ink-dim);
}
.collective-line b { color: var(--cyan-hi); }

.docu { margin: 18px 0; }
.timeline-map { overflow-x: auto; padding: 8px 0; direction: ltr; }
.timeline-map .tl-node { opacity: 0; animation: deal-in .6s cubic-bezier(.2,.8,.3,1.2) forwards; }
.docu-moments { margin-top: 10px; }

/* ═══════════ v3: سفر تاریخ ایران — زنجیرهٔ حذف، ابزارها ═══════════ */

.mystery-box {
  padding: 22px 18px; border-radius: var(--r); text-align: center;
  background: linear-gradient(160deg, rgba(20, 34, 66, .7), rgba(10, 14, 30, .8));
  border: 1px dashed rgba(74, 192, 212, .4); margin-bottom: 14px;
}
.mystery-ico { font-size: 2.6rem; animation: floaty 3s ease-in-out infinite; }
.mystery-title { font-weight: 900; font-size: 1.15rem; color: var(--cyan-hi); margin: 8px 0 6px; }
.mystery-text { color: var(--ink-dim); font-size: .88rem; line-height: 1.9; }

.persuade-pair { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 6px; }
.pp-side { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pp-av { font-size: 2.6rem; }
.pp-av.ghosted { opacity: .45; filter: grayscale(1); animation: ghost-flicker 1.8s steps(2) infinite; }
@keyframes ghost-flicker { 50% { opacity: .15; } }
.pp-name { font-weight: 800; font-size: .9rem; }
.pp-tag { font-size: .72rem; color: var(--ink-dim); }
.pp-vs { font-size: 1.6rem; animation: floaty 2.2s ease-in-out infinite; }
.tone-said { margin: 10px 0; padding: 12px; border-radius: 12px; background: rgba(176, 140, 240, .1);
  border: 1px solid rgba(176, 140, 240, .35); }
.opt-card.spent { opacity: .35; pointer-events: none; }
.solo-hint { margin: 10px 0; padding: 10px 14px; border-radius: 12px; font-size: .88rem;
  background: rgba(87, 201, 138, .08); border: 1px dashed rgba(87, 201, 138, .4); color: var(--ink); }

/* بازیکن محوشده در همهٔ فهرست‌ها */
.player-card.ghosted, .vav.ghosted { opacity: .4; filter: grayscale(1); }
.item-uses { font-size: .7rem; letter-spacing: .12em; color: var(--gold-hi); margin-inline-start: 6px; }

/* ═══════════ v3.1: پارادوکس، شامّهٔ نقش، سبک سفر ═══════════ */

.tb-paradox {
  display: flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 800;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: rgba(176, 140, 240, .12); border: 1px solid rgba(176, 140, 240, .35); color: #cbb0f5;
}
.tb-paradox.pband-2 { background: rgba(255, 179, 90, .14); border-color: rgba(255, 179, 90, .45); color: #ffd9a0; }
.tb-paradox.pband-3 { background: rgba(224, 92, 92, .16); border-color: rgba(224, 92, 92, .5); color: #ffb0b0; animation: blink 1.6s steps(2) infinite; }
.tb-paradox.pband-4 { background: rgba(224, 40, 60, .25); border-color: #ff5f7a; color: #ffdde0; animation: blink .8s steps(2) infinite; }

/* فضاسازی تصاعدی پارادوکس — دنیا با بالارفتن پارادوکس «خراب‌تر» دیده می‌شود */
body[data-pband='2'] .grain { opacity: .07; }
body[data-pband='3'] .grain { opacity: .1; animation-duration: .3s; }
body[data-pband='3'] .scene { filter: saturate(.85) hue-rotate(-6deg); }
body[data-pband='4'] .grain { opacity: .14; animation-duration: .18s; }
body[data-pband='4'] .scene { filter: saturate(.7) hue-rotate(-14deg) contrast(1.08); animation: reality-shake 6s ease-in-out infinite; }
body[data-pband='4'] .vignette {
  background: radial-gradient(120% 90% at 50% 40%, transparent 38%, rgba(60, 6, 22, .68) 100%);
}
@keyframes reality-shake { 0%,92%,100% { transform: none; } 94% { transform: translateX(-3px) skewX(.4deg); } 96% { transform: translateX(3px); } 98% { transform: translateX(-2px) skewX(-.3deg); } }

.insight {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: .86rem; color: var(--ink);
  background: rgba(255, 217, 138, .08); border: 1px dashed rgba(255, 217, 138, .45);
}
.seg.wrap { flex-wrap: wrap; }
.seg.wrap button { flex: 1 1 30%; }
.opt-tally { margin-inline-start: auto; font-size: .78rem; font-weight: 800; color: var(--gold-hi);
  background: rgba(255,217,138,.1); border: 1px solid rgba(255,217,138,.4); padding: 2px 8px; border-radius: 10px; }

/* ─────────── v3.3 اثر پروانه‌ای: گزارش ورود + وضعیت جهان ─────────── */
.arrival-card {
  position: relative;
  margin: 12px 0; padding: 14px 16px; border-radius: var(--r);
  background: linear-gradient(155deg, rgba(14, 40, 52, .82), rgba(8, 16, 32, .85));
  border: 1px solid rgba(126, 222, 255, .25);
  box-shadow: 0 0 24px rgba(80, 200, 255, .12) inset;
}
/* کارایی: نفس‌کشیدن حاشیه با opacity روی ::after — انیمیشن border-color هر فریم repaint کارت بود */
.arrival-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(126, 222, 255, .55); opacity: 0;
  animation: arrivalGlow 3.5s ease-in-out infinite alternate;
}
@keyframes arrivalGlow { to { opacity: 1; } }
.arrival-head { font-weight: 800; color: #8fe3ff; margin-bottom: 8px; letter-spacing: .3px; }
.arrival-line { color: var(--ink); font-size: .95rem; line-height: 1.9; margin-top: 6px; }
.arrival-line + .arrival-line {
  border-top: 1px dashed rgba(126, 222, 255, .18); padding-top: 6px;
}
.world-banner {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0; padding: 10px 14px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(64, 30, 20, .75), rgba(30, 14, 40, .75));
  border: 1px solid rgba(255, 170, 90, .4);
}
/* کارایی: تپش هاله با opacity روی ::after — انیمیشن box-shadow هر فریم repaint می‌شد */
.world-banner::after, .fork-banner::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 170, 90, .25); opacity: 0;
  animation: worldPulse 2.8s ease-in-out infinite;
}
@keyframes worldPulse { 50% { opacity: 1; } }
.world-banner .wico { font-size: 1.4rem; }
.world-banner .wtxt { font-size: .88rem; color: var(--ink); line-height: 1.7; }
.world-banner .wtxt b { color: #ffc58a; }

/* ─────────── v3.4 گزینهٔ «بازنویسی عمدی تاریخ» ─────────── */
.opt-card.rewrite {
  border: 1px solid rgba(255, 200, 90, .55);
  background: linear-gradient(155deg, rgba(58, 40, 10, .8), rgba(30, 16, 8, .85));
  position: relative;
  overflow: hidden;
}
.opt-card.rewrite::before {
  content: '✍️ دستکاری عمدی تاریخ';
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .4px;
  color: #1a1002;
  background: linear-gradient(90deg, #ffd27a, #ffb84d);
  border-radius: 999px; padding: 2px 10px; margin-bottom: 6px;
}
.opt-card.rewrite .opt-label { color: #ffd9a0; }
.opt-card.rewrite .opt-risk { color: #ff9d6b; }
.opt-card.rewrite.sel {
  box-shadow: 0 0 22px rgba(255, 180, 70, .35);
  border-color: #ffcf7d;
}
/* نشان بازنویسی در مستند پایانی */
.docu-rewrite { color: #ffcf7d; font-weight: 800; }

/* ─────────── v3.5: جبههٔ دوم، تاریخ‌نامه، زرادخانهٔ ابزار ─────────── */
.fork-banner {
  position: relative;
  margin: 10px 0; padding: 12px 14px; border-radius: var(--r);
  background: linear-gradient(90deg, rgba(70, 34, 12, .8), rgba(34, 16, 44, .8));
  border: 1px dashed rgba(255, 150, 70, .5);
  font-size: .9rem; line-height: 1.8; color: var(--ink);
}
.fork-banner::after { animation-duration: 3s; }
.foray-card {
  margin: 12px 0; padding: 16px; border-radius: var(--r);
  background: linear-gradient(160deg, rgba(60, 26, 8, .85), rgba(20, 10, 30, .9));
  border: 1px solid rgba(255, 150, 70, .55);
  box-shadow: 0 0 28px rgba(255, 130, 50, .15) inset;
}
.foray-head { font-weight: 800; color: #ffb27a; margin-bottom: 8px; font-size: 1.05rem; }
.foray-text { color: var(--ink); line-height: 1.9; font-size: .95rem; margin-bottom: 10px; }
.foray-team { color: #d8b28f; font-size: .85rem; margin-bottom: 10px; }
.foray-opt { display: block; width: 100%; margin-top: 8px; text-align: right; border-color: rgba(255,150,70,.4); }
.foray-wait { color: #ffd9a0; font-size: .9rem; padding: 8px 0; }

.tb-chron {
  background: none; border: 1px solid rgba(255, 207, 125, .4); border-radius: 8px;
  font-size: 1rem; padding: 2px 8px; cursor: pointer; margin-inline-end: 8px;
  transition: box-shadow .25s;
}
.tb-chron:hover { box-shadow: 0 0 12px rgba(255, 207, 125, .4); }

.chron-book { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.chron-page {
  padding: 12px 14px; border-radius: 10px; text-align: right;
  background: rgba(16, 20, 40, .8); border-right: 3px solid #888;
}
.chron-page.ch-kept { border-right-color: #57c98a; }
.chron-page.ch-changed { border-right-color: #ffb35a; }
.chron-page.ch-rewritten { border-right-color: #ffcf7d; background: rgba(48, 34, 10, .55); }
.chron-head { font-weight: 800; font-size: .88rem; color: var(--ink); margin-bottom: 6px; }
.chron-verdict { font-size: .75rem; opacity: .9; float: left; }
.chron-real { font-size: .85rem; color: #9fd8a9; line-height: 1.8; margin-bottom: 4px; }
.chron-yours { font-size: .88rem; color: var(--ink); line-height: 1.8; }
.chron-fork { font-size: .85rem; color: #ffb27a; line-height: 1.8; margin-top: 4px; }

.ability-btn.used { opacity: .35; text-decoration: line-through; }

/* ═══════════ v4.0: لندینگ، ورود، آزمون، توشه ═══════════ */
#screen-landing { padding-bottom: 40px; }
.lnd-hero { text-align: center; padding: 26px 16px 8px; }
.lnd-portal { margin: 0 auto 8px; }
.lnd-lines { margin: 14px auto 20px; max-width: 640px; }
.lnd-lines p {
  color: var(--dim); font-size: .95rem; line-height: 2; margin: 4px 0;
  animation: fadeUp .8s both;
}
.lnd-lines p:nth-child(2) { animation-delay: .18s; }
.lnd-lines p:nth-child(3) { animation-delay: .36s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lnd-stats { display: flex; justify-content: center; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.lnd-stats div { display: flex; flex-direction: column; gap: 2px; }
.lnd-stats b { font-size: 1.5rem; color: var(--acc); }
.lnd-stats span { font-size: .74rem; color: var(--dim); }
.lnd-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 0 14px; }
.lnd-card {
  background: linear-gradient(160deg, rgba(20, 30, 60, .8), rgba(10, 16, 34, .85));
  border: 1px solid rgba(155, 238, 255, .16); border-radius: var(--r); padding: 16px;
  transition: transform .3s, border-color .3s;
}
.lnd-card:hover { transform: translateY(-4px); border-color: rgba(155, 238, 255, .45); }
.lnd-card .lc-ico { font-size: 2rem; margin-bottom: 6px; }
.lnd-card h4 { margin: 0 0 6px; font-size: .98rem; color: var(--acc); }
.lnd-card p { margin: 0; font-size: .86rem; line-height: 1.9; color: var(--ink); opacity: .9; }
.lnd-steps { display: flex; flex-direction: column; gap: 10px; padding: 0 14px; }
.lnd-step { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(155, 238, 255, .12); border-radius: var(--r); padding: 12px 14px; }
.lnd-step .ls-n { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #1c6f86, #2a9ab5); font-weight: 800; }
.lnd-step b { display: block; margin-bottom: 3px; font-size: .92rem; }
.lnd-step p { margin: 0; font-size: .84rem; color: var(--dim); line-height: 1.8; }
.lnd-roles { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px; justify-content: center; }
.lnd-role { font-size: .82rem; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--rc, rgba(155,238,255,.3)); color: var(--rc, var(--ink)); background: rgba(255,255,255,.03); }
.lnd-footer { text-align: center; color: var(--dim); font-size: .82rem; padding: 22px 20px 0; }

.auth-panel, .quiz-panel { max-width: 460px; margin: 8vh auto 0; }
.otp-inp { text-align: center; letter-spacing: .5em; font-size: 1.4rem; direction: ltr; }
.auth-msg { min-height: 24px; margin-top: 10px; }
.auth-msg .am-bad { color: #ff9b9b; font-size: .88rem; }
.auth-msg .am-ok { color: var(--ok); font-size: .88rem; }
.quiz-q { margin-bottom: 18px; }
.qq-title { font-weight: 800; margin-bottom: 8px; font-size: .96rem; }
.qq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qq-opt { padding: 12px 10px; border-radius: 12px; border: 1px solid rgba(155, 238, 255, .2);
  background: rgba(255, 255, 255, .03); color: var(--ink); font-family: inherit; font-size: .88rem; cursor: pointer;
  transition: transform .2s, border-color .2s; }
.qq-opt:hover { transform: translateY(-2px); }
.qq-opt.sel { border-color: var(--acc); background: rgba(74, 192, 212, .16); font-weight: 700; }
.wallet-chip { margin-top: 14px; text-align: center; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 207, 125, .1); border: 1px solid rgba(255, 207, 125, .35); color: #ffd9a0; font-size: .82rem; }
.wallet-chip:hover { background: rgba(255, 207, 125, .18); }
.shop-pkg { border: 1px solid rgba(255, 207, 125, .3); border-radius: 12px; padding: 12px; margin: 10px 0;
  background: rgba(40, 30, 12, .5); text-align: right; }
.shop-pkg .sp-head { display: flex; align-items: center; gap: 8px; font-size: .96rem; }
.shop-pkg .sp-price { margin-inline-start: auto; color: #ffcf7d; font-size: .84rem; }
.shop-pkg .sp-desc { font-size: .85rem; color: var(--dim); line-height: 1.8; margin: 6px 0 10px; }

/* v4.1: تب‌های ورود + جعبهٔ دانلود اپ */
.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-tab { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid rgba(155,238,255,.2);
  background: rgba(255,255,255,.03); color: var(--dim); font-family: inherit; font-size: .88rem; cursor: pointer; }
.auth-tab.on { background: linear-gradient(135deg, #1c6f86, #2a9ab5); color: #fff; border-color: transparent; font-weight: 700; }
.dl-box { display: flex; align-items: center; gap: 12px; margin: 18px 14px 0; padding: 14px;
  border-radius: var(--r); background: linear-gradient(140deg, rgba(14,42,28,.8), rgba(8,20,16,.85));
  border: 1px solid rgba(90,220,150,.35); }
.dl-box .dl-ico { font-size: 2rem; }
.dl-box .dl-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dl-box .dl-txt b { font-size: .95rem; }
.dl-box .dl-txt span { font-size: .78rem; color: var(--dim); line-height: 1.7; }
.dl-box .dl-btn { flex: 0 0 auto; text-decoration: none; padding: 9px 14px; font-size: .85rem; }

/* v4.2: دعوت و پیوند عمیق */
.share-row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.share-row .share-btn { flex: 1; min-width: 120px; font-size: .86rem; padding: 10px 8px; }
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.share-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px;
  border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 1.5rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(155,238,255,.18); transition: transform .2s; }
.share-item:hover { transform: translateY(-3px); border-color: rgba(155,238,255,.5); }
.share-item span { font-size: .72rem; color: var(--dim); }
.app-banner { position: fixed; bottom: 0; inset-inline: 0; z-index: 60; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(10,26,18,.96); border-top: 1px solid rgba(90,220,150,.4);
  font-size: .82rem; backdrop-filter: blur(8px); }
.app-banner span { flex: 1; }
.app-banner a { text-decoration: none; padding: 7px 12px; border-radius: 8px; font-size: .8rem; font-weight: 700; }
.app-banner .ab-open { background: linear-gradient(135deg,#1c6f86,#2a9ab5); color: #fff; }
.app-banner .ab-get { border: 1px solid rgba(90,220,150,.45); color: #8fe3b0; }
.app-banner .ab-x { background: none; border: 0; color: var(--dim); font-size: 1rem; cursor: pointer; padding: 4px 6px; }

/* نسخه — تا با یک نگاه بدانی به‌روزرسانی رسیده */
.ver-chip { text-align: center; color: #5d6b90; font-size: .72rem; padding: 10px 0 4px; direction: ltr; }

/* ═══════════ کارایی: خاموشی انیمیشن‌های دائمی برای کاربران حساس به حرکت ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .scene .tw, .scene .flame, .scene .beacon, .scene .wlit, .scene .ray,
  .scene .mist, .scene .ringspin, .scene .bird,
  .grain, .panel::before, .btn-primary::after,
  .pulse-glow, .loc-card.special, .ability-btn::after,
  .world-banner::after, .fork-banner::after, .arrival-card::after,
  .echo-item::before, .music-btn, .vav,
  .glitch::before, .glitch::after, .warning-line, .type-line::after,
  .logo-mini, .portal-center, .portal-logo::before, .mystery-ico, .pp-vs, .void-avatar,
  body.phase-crisis .vignette::after, .crisis .crisis-flash, .crisis-label,
  #screen-crisis .crisis-label, .tb-m.crit .bar i, .tb-paradox,
  .timer-ring.low, .portal-label, .pp-av.ghosted,
  body[data-pband='4'] .scene {
    animation: none !important;
  }
}

/* ═══════════ v4.4: زرادخانهٔ ۳ ابزاره + رفع همپوشانی آیکون‌ها ═══════════ */

/* ── ۱) زرادخانه: از ردیف flexِ درهم به پنل کارت‌محور ──
   هر ابزار یک کارت مستقل در گرید است؛ هیچ آیکونی روی متن یا آیکون دیگر نمی‌افتد
   و هر سه ابزار — حتی خاموش‌ها — همیشه دیده می‌شوند. */
.ability-bar {
  position: fixed; z-index: 30;
  bottom: calc(10px + env(safe-area-inset-bottom));
  inset-inline: max(10px, calc(50% - 300px));
  right: auto; left: auto; transform: none; max-width: none;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 10px 12px 12px;
  background: linear-gradient(160deg, rgba(14, 21, 44, .95), rgba(8, 12, 26, .96));
  border: 1px solid color-mix(in srgb, var(--role-c, #4ac0d4) 40%, var(--panel-brd));
  border-radius: 18px; box-shadow: var(--shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  max-height: min(48dvh, 340px); overflow-y: auto; overscroll-behavior: contain;
}
.arsenal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.arsenal-title { font-size: .82rem; font-weight: 800; line-height: 1.9; color: var(--gold-hi); min-width: 0; }
.arsenal-charge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: 99px; font-size: .72rem; line-height: 1.9;
  background: rgba(255, 217, 138, .1); border: 1px solid rgba(255, 217, 138, .45); color: var(--gold-hi);
}
.arsenal-charge .ac-dots { letter-spacing: .14em; font-size: .62rem; }
.arsenal-charge.empty { background: rgba(224, 92, 92, .14); border-color: rgba(224, 92, 92, .5); color: #ffb9b9; }
.arsenal-role {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0;
  font-size: .72rem; line-height: 1.9; color: var(--ink-dim);
}
.arsenal-toggle {
  flex: 0 0 auto; padding: 3px 10px; border-radius: 99px; cursor: pointer;
  font-family: inherit; font-size: .7rem; line-height: 1.9; white-space: nowrap;
  background: rgba(255, 255, 255, .05); color: var(--ink-dim);
  border: 1px solid var(--panel-brd);
}
.arsenal-toggle:hover { color: var(--ink); border-color: color-mix(in srgb, var(--role-c, #4ac0d4) 60%, transparent); }

/* ── حالت فشرده (پیش‌فرض): پنل نباید نیمی از صفحه را بگیرد ──
   هر سه ابزار همچنان دیده می‌شوند — آیکون، نام و وضعیت — فقط توضیح‌ها
   جمع می‌شوند تا محتوای بازیِ پشت پنل پنهان نشود. */
.ability-bar.compact { max-height: none; padding-bottom: 10px; }
.ability-bar.compact .arsenal-role,
.ability-bar.compact .tool-card .tc-desc { display: none; }
.ability-bar.compact .tool-card { padding: 6px 5px; gap: 2px; }
.ability-bar.compact .tool-card .tc-ico { font-size: 1.2rem; line-height: 1.2; }
.ability-bar.compact .tool-card .tc-name { font-size: .7rem; line-height: 1.5; }
.ability-bar.compact .tool-card .tc-state { font-size: .58rem; padding: 1px 6px; }
.ability-bar.compact .arsenal-msg { font-size: .68rem; }

.arsenal-role .ar-name { font-weight: 800; color: var(--role-c, var(--ink)); }
.arsenal-role .ar-hint { min-width: 0; overflow-wrap: anywhere; }
.arsenal-msg { font-size: .74rem; line-height: 1.9; color: var(--ink-dim); }

.arsenal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tool-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  min-width: 0; padding: 10px 8px; font-family: inherit; color: var(--ink);
  border-radius: 14px; cursor: pointer; position: relative;
  border: 1px solid color-mix(in srgb, var(--role-c, #7f8fbf) 45%, transparent);
  background: color-mix(in srgb, var(--role-c, #7f8fbf) 12%, rgba(255, 255, 255, .03));
  transition: transform .16s, border-color .2s;
}
.tool-card .tc-ico { font-size: 1.55rem; line-height: 1.4; }
.tool-card .tc-body { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0; flex: 1; }
.tool-card .tc-name { font-weight: 800; font-size: .78rem; line-height: 1.7; color: var(--role-c, var(--ink)); overflow-wrap: anywhere; }
.tool-card .tc-desc { font-size: .66rem; line-height: 1.8; color: var(--ink-dim); overflow-wrap: anywhere; }
.tool-card .tc-state {
  margin-top: auto; max-width: 100%; padding: 2px 8px; border-radius: 99px;
  font-size: .64rem; line-height: 1.75; overflow-wrap: anywhere;
}
/* آمادهٔ استفاده: تپش نور روی لایهٔ جدا (opacity) — نه انیمیشن box-shadow */
.tool-card.ready::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 26px color-mix(in srgb, var(--role-c, #4ac0d4) 55%, transparent);
  opacity: 0; animation: tool-glow 2.6s ease-in-out infinite;
}
@keyframes tool-glow { 50% { opacity: 1; } }
.tool-card.ready:hover { transform: translateY(-2px); }
.tool-card.ready:active { transform: scale(.97); }
.tool-card.ready .tc-state { color: #a6ebc4; background: rgba(87, 201, 138, .18); }
/* ابزار خاموش دیده می‌شود (کم‌نور + قفل) تا بازیکن بداند هر سه را دارد */
.tool-card.used { opacity: .58; cursor: default; border-style: dashed; }
.tool-card.used .tc-name { text-decoration: line-through; }
.tool-card.used .tc-state { color: var(--ink); background: rgba(255, 255, 255, .1); }
.tool-card.locked { opacity: .66; cursor: not-allowed; }
.tool-card.locked .tc-state { color: #ffdcae; background: rgba(255, 179, 90, .18); }
.tool-card:disabled { pointer-events: none; }

/* موبایل باریک: کارت‌ها ستونی و افقی — متن خرد و ناخوانا نشود */
@media (max-width: 430px) {
  /* فقط حالت باز (با توضیح) ستونی می‌شود؛ حالت فشرده روی موبایل هم سه‌تایی
     می‌ماند تا پنل کوتاه بماند و محتوای بازیِ پشتش پیدا باشد. */
  .ability-bar:not(.compact) .arsenal-grid { grid-template-columns: 1fr; }
  .ability-bar:not(.compact) .tool-card { flex-direction: row; align-items: flex-start; text-align: right; gap: 9px; }
  .ability-bar:not(.compact) .tool-card .tc-body { align-items: flex-start; }
  .ability-bar:not(.compact) .tool-card .tc-state { margin-top: 2px; align-self: flex-start; }
  .ability-bar.compact .tool-card .tc-name { font-size: .64rem; }
}

/* ── ۲) لنگرهای پایین صفحه: هیچ آیکون شناوری روی پنل نمی‌افتد ──
   ارتفاع زرادخانه/بنر اپ را app.js در --dock-h می‌گذارد. */
#app { padding-bottom: calc(96px + env(safe-area-inset-bottom) + var(--dock-h, 0px)); }
.music-btn { bottom: calc(14px + env(safe-area-inset-bottom) + var(--dock-h, 0px)); }
.voice-btn { bottom: calc(70px + env(safe-area-inset-bottom) + var(--dock-h, 0px)); }

/* ── ۳) ابزارهای نقش در کارت نقش (فاز انتخاب نقش) ── */
.role-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.role-tools .rt-head { width: 100%; font-size: .68rem; line-height: 1.9; color: var(--ink-dim); }
.role-tools .rt-chip {
  max-width: 100%; padding: 3px 9px; border-radius: 99px;
  font-size: .68rem; line-height: 1.9; color: var(--ink);
  background: rgba(255, 255, 255, .05);
  border: 1px solid color-mix(in srgb, var(--role-c, #7f8fbf) 35%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* آواتار انتخاب‌کننده‌ها روی آیکون/نام نقش نیفتد */
.role-taker {
  max-width: calc(100% - 74px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: ltr; text-align: left;
}

/* ── ۴) نوار بالا: ۶ شاخص + پارادوکس + کد اتاق در یک ردیف جا نمی‌شد ── */
.topbar { flex-wrap: wrap; row-gap: 6px; }
.topbar-right, .topbar-left { min-width: 0; }
.topbar-left { display: flex; align-items: center; }
.tb-metrics { flex-wrap: wrap; justify-content: center; row-gap: 4px; min-width: 0; flex: 1 1 auto; }
.tb-m .ico { line-height: 1.5; }
@media (max-width: 520px) {
  /* شاخص‌ها ردیف کامل خودشان را می‌گیرند — نه فشرده‌سازی، نه سرریز */
  .tb-metrics { order: 3; flex-basis: 100%; }
  .toasts { top: 96px; }
}

/* ── ۵) ردیف‌های flex که آیتم‌هایشان روی هم می‌رفتند: اجازهٔ شکستن و کوچک‌شدن ── */
.clue-item .ctxt { min-width: 0; overflow-wrap: anywhere; }
.opt-head { flex-wrap: wrap; row-gap: 6px; }
.opt-label { min-width: 0; overflow-wrap: anywhere; }
.opt-votes { max-width: 100%; }
.score-row { flex-wrap: wrap; row-gap: 4px; }
.score-row .sname { min-width: 0; overflow-wrap: anywhere; }
.world-banner { flex-wrap: wrap; }
.world-banner .wtxt { min-width: 0; overflow-wrap: anywhere; }
.persuade-pair { flex-wrap: wrap; }
.pp-side { min-width: 0; }
.pp-name, .pp-tag { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-box .dl-txt { min-width: 0; }
.dl-box .dl-txt b, .dl-box .dl-txt span { overflow-wrap: anywhere; }
.app-banner span { min-width: 0; overflow-wrap: anywhere; }
.chron-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.chron-head .chron-verdict { float: none; flex: 0 0 auto; }
/* ایموجی‌ها در فارسی خط‌کرسی بلندتری می‌خواهند — با line-height کم، روی خط بالا/پایین می‌افتند */
.chip, .lnd-role, .era-badge, .verdict, .role-ability, .item-uses { line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .tool-card.ready::after { animation: none; opacity: 0; }
}