/* ═══════════════════════════════════════════════════════════════════════════
 *  v455 · حالت‌های «گیمینگ موبایل» و «استودیو / OBS» — پوستهٔ صفحهٔ شروع لایو
 *  (پنج زبانه به‌جای سه، صحنهٔ انتخاب بازی، کنسول استودیو) + شیت کلید پخش و
 *  چیپ OBS داخل اتاق. روی سبک Aurora (src/181-v139.css) سوار است: رنگ هر
 *  حالت با همان متغیرهای --a1/--a2/--a3. انیمیشن‌های بی‌پایان فقط
 *  transform/opacity و با html.lite366 و prefers-reduced-motion خاموش.
 *  فایل‌های درگیر: src/373-v455-live-modes.js، src/180-v139.js، src/040-v49.js
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── رنگ تأکید دو حالت تازه ─── */
#goLive51.gl139.m-game  { --a1:#A78BFA; --a2:#7C3AED; --a3:#22D3EE }
#goLive51.gl139.m-studio{ --a1:#34D399; --a2:#0D9488; --a3:#FFC53D }

/* ─── پنج زبانه ─── */
#goLive51.gl455 .gl-tabs{ gap:12px }                                    /* بدون پوستهٔ Aurora */
#goLive51.gl139.gl455 .gl-tabs{ grid-template-columns:repeat(5,1fr) }
#goLive51.gl139.gl455 .gl-tabs .ind139{ width:calc((100% - 10px) / 5) }
#goLive51.gl139.gl455 .gl-tab span{ font-size:9.5px !important; overflow:hidden; text-overflow:ellipsis; max-width:100% }
#goLive51.gl139.gl455 .gl-tab .gl-tic svg{ width:20px; height:20px }
.gl-tab.game.on .gl-tic{ background:linear-gradient(135deg,#a78bfa,#7c3aed) }
.gl-tab.studio.on .gl-tic{ background:linear-gradient(135deg,#34d399,#0d9488) }

/* ─── صحنهٔ مشترک ─── */
.hero455{ flex:none; width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; padding:4px 16px 8px;
  box-sizing:border-box; animation:hIn455 .5s cubic-bezier(.2,.9,.25,1.05) both }
@keyframes hIn455{ from{ opacity:0; transform:translateY(16px) scale(.96) } }

/* ═══ گیمینگ: انتخاب بازی ═══ */
.gm455-cap{ display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; row-gap:1px;
  align-items:center; width:100%; margin:0 0 10px }
.gm455-cap i{ grid-row:span 2; width:40px; height:40px; border-radius:14px; display:grid; place-items:center; padding:8px; box-sizing:border-box;
  background:linear-gradient(135deg,var(--a1,#A78BFA),var(--a2,#7C3AED)); box-shadow:0 8px 20px color-mix(in srgb,var(--a2,#7C3AED) 45%,transparent), inset 0 1px 0 rgba(255,255,255,.35) }
.gm455-cap i svg{ width:100%; height:100% }
.gm455-cap b{ font-size:14.5px; font-weight:900; color:#fff }
.gm455-cap small{ font-size:10.5px; font-weight:700; color:rgba(233,228,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/*  v456: کاتالوگ ۱۲تایی + بازی‌های دلخواه اخیر — ردیف چهارم به بعد داخل خودش اسکرول می‌خورد  */
.gm455-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%;
  max-height:min(44vh,312px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:2px }
.gm455-grid::-webkit-scrollbar{ display:none }
.gm455-t{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 3px 8px; min-width:0;
  border-radius:16px; border:1.5px solid var(--line,rgba(255,255,255,.11)); background:var(--glass,rgba(255,255,255,.06));
  color:rgba(233,228,255,.72); cursor:pointer; transition:transform .12s, border-color .2s, background .2s }
.gm455-t:active{ transform:scale(.93) }
.gm455-t i{ width:40px; height:40px; display:grid; filter:grayscale(.45) brightness(.8); transition:filter .2s, transform .2s }
.gm455-t i svg{ width:100%; height:100% }
.gm455-t span{ font-size:9px; font-weight:900; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.gm455-t.on{ color:#fff; border-color:transparent;
  background:linear-gradient(var(--ink2,#120B2E),var(--ink2,#120B2E)) padding-box,
             linear-gradient(145deg,var(--a1,#A78BFA),#ffe08a 45%,var(--a3,#22D3EE)) border-box;
  box-shadow:0 10px 26px color-mix(in srgb,var(--a2,#7C3AED) 45%,transparent) }
.gm455-t.on i{ filter:none; transform:scale(1.08) }
.gm455-t.on::after{ content:"✓"; position:absolute; top:-6px; inset-inline-end:-5px; width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center; font-size:10px; font-weight:900; color:#1c1543;
  background:linear-gradient(180deg,#ffe9ad,#f3b83e); box-shadow:0 3px 8px rgba(0,0,0,.4) }
.gm455-warn{ margin:10px 0 0; padding:7px 12px; border-radius:12px; font-size:10px; font-weight:800; line-height:1.7; text-align:center;
  color:#FFE2B0; background:rgba(255,160,40,.12); border:1px solid rgba(255,180,70,.35) }

/* ═══ استودیو: کنسول پخش + سه قدم ═══ */
.st455-art{ width:min(72vw,300px); height:auto; margin:2px 0 10px; filter:drop-shadow(0 14px 26px rgba(0,0,0,.45)) }
.st455-art text{ direction:ltr; unicode-bidi:bidi-override }   /* صفحهٔ RTL نوشته‌های REC/RTMP را جابه‌جا نکند */
.st455-art .rec{ animation:stRec455 1.15s ease-in-out infinite }
@keyframes stRec455{ 50%{ opacity:.25 } }
.st455-art .eq{ transform-box:fill-box; transform-origin:50% 100%; animation:stEq455 .95s ease-in-out infinite alternate; animation-delay:calc(var(--d) * -1) }
@keyframes stEq455{ from{ transform:scaleY(.18) } to{ transform:scaleY(var(--h,1)) } }
.st455-art .wv1{ animation:stWv455 2.4s ease-in-out infinite }
.st455-art .wv2{ animation:stWv455 2.4s ease-in-out infinite; animation-delay:.35s }
@keyframes stWv455{ 0%,100%{ opacity:.25 } 45%{ opacity:1 } }
.st455-cap{ text-align:center; margin-bottom:10px }
.st455-cap b{ display:block; font-size:14.5px; font-weight:900; color:#fff;
  background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--a3,#FFC53D) 75%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent }
.st455-cap small{ display:block; margin-top:2px; font-size:10.5px; font-weight:700; color:rgba(233,228,255,.6) }
.st455-steps{ display:flex; flex-direction:column; gap:6px; width:100% }
.st455-st{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px;
  background:var(--glass,rgba(255,255,255,.06)); border:1px solid var(--line,rgba(255,255,255,.11)) }
.st455-st u{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; text-decoration:none;
  font-size:11px; font-weight:900; color:#1c1543; background:linear-gradient(180deg,#ffe9ad,#f3b83e); box-shadow:0 3px 8px rgba(0,0,0,.35) }
.st455-st b{ display:block; font-size:11.5px; font-weight:900; color:#fff }
.st455-st small{ display:block; font-size:9.5px; font-weight:700; color:rgba(233,228,255,.55) }
.st455-st > div{ min-width:0 }

/* صفحه‌های کوتاه: فشرده‌تر */
@media (max-height:640px){
  .gm455-cap small, .st455-cap small{ display:none }
  .gm455-t i{ width:32px; height:32px }
  .gm455-t{ padding:7px 3px 6px; border-radius:13px }
  .st455-art{ width:min(60vw,240px); margin-bottom:6px }
  .st455-st{ padding:6px 10px }
  .st455-st small{ display:none }
}

/* ═══ شیت کلید پخش استودیو ═══ */
#stKeys455{ position:fixed; inset:0; z-index:99; display:none; align-items:flex-end; justify-content:center }
#stKeys455 .stk455-bk{ position:absolute; inset:0; background:rgba(4,3,14,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) }
.stk455{ position:relative; width:100%; max-width:430px; box-sizing:border-box; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0; border:1.5px solid transparent; border-bottom:0; animation:stkUp455 .32s cubic-bezier(.2,.9,.3,1.05);
  background:linear-gradient(175deg,#17123A,#0C0824 70%) padding-box,
             linear-gradient(135deg,#f6c45a,rgba(255,255,255,.14) 40%,#34D399) border-box;
  box-shadow:0 -18px 50px rgba(0,0,0,.55) }
@keyframes stkUp455{ from{ opacity:0; transform:translateY(40px) } }
.stk455-hd{ display:flex; align-items:center; gap:9px; margin-bottom:12px }
.stk455-hd > i{ flex:none; width:36px; height:36px; border-radius:13px; display:grid; place-items:center; padding:7px; box-sizing:border-box;
  background:linear-gradient(135deg,#34D399,#0D9488); box-shadow:0 6px 16px rgba(13,148,136,.45), inset 0 1px 0 rgba(255,255,255,.35) }
.stk455-hd > i svg{ width:100%; height:100% }
.stk455-hd b{ flex:1; min-width:0; font-size:14.5px; font-weight:900; color:#fff }
.stk455-chip{ flex:none; display:inline-flex; align-items:center; gap:5px; max-width:46%; padding:4px 10px; border-radius:999px;
  font-size:9.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.stk455-chip i{ flex:none; width:7px; height:7px; border-radius:50% }
.stk455-chip.w{ color:#FFE2B0; background:rgba(255,180,70,.14); border:1px solid rgba(255,180,70,.4) }
.stk455-chip.w i{ background:#FFB546; animation:stRec455 1.3s ease-in-out infinite }
.stk455-chip.ok{ color:#B7F7D9; background:rgba(52,211,153,.15); border:1px solid rgba(52,211,153,.45) }
.stk455-chip.ok i{ background:#34D399 }
.stk455-chip.e{ color:#FFC2C9; background:rgba(244,63,94,.15); border:1px solid rgba(244,63,94,.4) }
.stk455-chip.e i{ background:#FB7185 }
.stk455-row{ display:flex; align-items:center; gap:7px; padding:9px 10px; border-radius:14px; margin-bottom:8px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11) }
.stk455-row small{ flex:none; width:64px; font-size:9.5px; font-weight:900; color:rgba(233,228,255,.6) }
.stk455-row code{ flex:1; min-width:0; font-size:11px; font-weight:800; color:#E9FBF3; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-align:left; font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.stk455-row code.msk{ letter-spacing:2px; color:rgba(233,228,255,.55) }
.stk455-row button{ flex:none; width:30px; height:30px; border-radius:10px; border:1px solid rgba(255,255,255,.14); padding:6px; box-sizing:border-box;
  background:rgba(255,255,255,.07); color:#F6E3B4; cursor:pointer; transition:transform .12s }
.stk455-row button:active{ transform:scale(.88) }
.stk455-row button svg{ width:100%; height:100%; display:block }
.stk455-hint{ margin:2px 2px 0; font-size:9.5px; font-weight:700; line-height:1.8; color:rgba(233,228,255,.5) }
.stk455-sk{ height:48px; border-radius:14px; margin-bottom:8px; background:rgba(255,255,255,.07); animation:stSk455 1.1s ease-in-out infinite alternate }
@keyframes stSk455{ to{ opacity:.35 } }
.stk455-err{ margin:0 0 10px; padding:9px 12px; border-radius:12px; font-size:11px; font-weight:800; line-height:1.8;
  color:#FFC2C9; background:rgba(244,63,94,.12); border:1px solid rgba(244,63,94,.35) }
.stk455-why{ display:block; margin-top:5px; font-size:9px; font-weight:700; color:rgba(255,194,201,.7);
  text-align:left; word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,monospace }   /* v456: reason سرور برای عیب‌یابی */
.stk455-rt{ display:block; width:100%; border:0; border-radius:14px; padding:11px; margin-bottom:8px; font-size:12.5px; font-weight:900;
  color:#fff; background:linear-gradient(135deg,#34D399,#0D9488); box-shadow:0 8px 20px rgba(13,148,136,.4); cursor:pointer }
.stk455-x{ display:block; width:100%; border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:10px; margin-top:4px;
  font-size:12px; font-weight:900; color:rgba(233,228,255,.8); background:rgba(255,255,255,.06); cursor:pointer }

/* ═══ چیپ OBS داخل اتاق (فقط میزبان استودیو) ═══ */
#stChip455{ position:absolute; top:148px; inset-inline-start:10px; z-index:6; display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px 0 6px; border-radius:999px; border:1px solid rgba(52,211,153,.45); cursor:pointer;
  background:rgba(6,20,17,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#CFF8E6 }
#stChip455 i{ width:17px; height:17px; display:grid }
#stChip455 i svg{ width:100%; height:100% }
#stChip455 span{ font-size:10px; font-weight:900; letter-spacing:.5px }
#stChip455 u{ width:7px; height:7px; border-radius:50%; background:#FFB546; animation:stRec455 1.3s ease-in-out infinite }
#stChip455.up u{ background:#34D399; animation:none }

/* ═══ v456 · شیت‌های کوچک گیمینگ (نام بازی، راهنمای آیفون) ═══ */
.ovl455{ position:fixed; inset:0; z-index:99; display:none; align-items:flex-end; justify-content:center }
.gmhd455{ background:linear-gradient(135deg,#A78BFA,#7C3AED) !important;
  box-shadow:0 6px 16px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.35) !important }
.gm455-p{ margin:0 2px 12px; font-size:12px; font-weight:700; line-height:2; color:rgba(233,228,255,.78) }
#gmNameIn455{ display:block; width:100%; box-sizing:border-box; margin-bottom:10px; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); outline:none;
  color:#fff; font-size:14px; font-weight:800 }
#gmNameIn455::placeholder{ color:rgba(233,228,255,.4); font-weight:700 }
#gmNameIn455:focus{ border-color:#A78BFA; box-shadow:0 0 0 3px rgba(167,139,250,.22) }

/* ═══ v456 · داخل اتاق گیمینگ: چیپ نام بازی (همه) + دکمهٔ «ورود به بازی» (میزبان) ═══ */
#gmChip455{ position:absolute; top:148px; inset-inline-start:10px; z-index:6; display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 11px 0 7px; border-radius:999px; border:1px solid rgba(167,139,250,.45);
  background:rgba(14,8,34,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#E4DAFF }
#gmChip455 i{ width:16px; height:16px; display:grid }
#gmChip455 i svg{ width:100%; height:100% }
#gmChip455 b{ font-size:10px; font-weight:900; max-width:132px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#gmGo455{ position:absolute; top:184px; inset-inline-start:10px; z-index:6; display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 13px 0 8px; border-radius:999px; border:0; cursor:pointer; color:#1c1543;
  background:linear-gradient(180deg,#ffe9ad,#f3b83e 60%,#dd9a19); box-shadow:0 8px 20px rgba(221,154,25,.45), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s }
#gmGo455:active{ transform:scale(.93) }
#gmGo455 i{ width:17px; height:17px; display:grid }
#gmGo455 i svg{ width:100%; height:100% }
#gmGo455 i svg *{ stroke:#1c1543 }
#gmGo455 span{ font-size:11px; font-weight:900 }

/* ─── خاموشی انیمیشن‌ها ─── */
html.lite366 .hero455 *, html.lite366 .st455-art *, html.lite366 #stKeys455 *, html.lite366 #stChip455 u{ animation:none !important }
@media (prefers-reduced-motion:reduce){
  .hero455, .hero455 *, .st455-art *, #stKeys455 *, .stk455, #stChip455 u{ animation:none !important }
}