/* ===== Shadow Mafia — Blood Noir Theme (red + black, Vazirmatn) =====
   این فایل بعد از استایل داخلی هر صفحه لود می‌شود و ظاهر را یکدست می‌کند.
   چیدمان (layout) صفحات دست نمی‌خورد؛ فقط رنگ، فونت و حس دکمه‌ها. */
:root {
    --bg: #08080a;
    --red: #d90429;
    --red-hi: #ff2e4d;
    --red-deep: #6e0a16;
    --red-glow: rgba(217, 4, 41, .45);
    --ink: #f4f1ea;
    --muted: #b3adb8;
    --line: #26262e;
    --card: #121218;
    --ok: #2fbf71;
    --bad: #ff4d5e;
}

html { scrollbar-color: var(--red-deep) #0c0c10; }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: #0c0c10; }
::-webkit-scrollbar-thumb { background: var(--red-deep); border-radius: 6px; }
::selection { background: var(--red); color: #fff; }

body {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--ink);
}
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
input:focus, select:focus { outline: none; border-color: var(--red-hi) !important; box-shadow: 0 0 0 2px rgba(217, 4, 41, .25); }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }

/* تیترها */
h1 {
    color: var(--ink) !important;
    font-weight: 900;
    letter-spacing: -.5px;
    text-shadow: 0 0 26px rgba(217, 4, 41, .4);
}
.sub { color: var(--muted) !important; }

/* دکمه اصلی (قرمز خونی) */
#scenarios { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.scenario-box {
    flex: 0 1 calc(25% - 7px); max-width: 150px; min-width: 0; margin: 0 !important;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 6px; min-height: 152px;
    background: transparent !important;
    border: 1px solid #2b2b34 !important;
    border-radius: 14px !important;
    color: var(--ink) !important;
    font-weight: 700;
    box-shadow: none !important;
    text-decoration: none;
    transition: transform .2s, border-color .2s, box-shadow .2s, background .2s;
}
.scenario-box:hover {
    background: rgba(217, 4, 41, .08) !important;
    border-color: var(--red) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(217, 4, 41, .25) !important;
}
.scenario-box img {
    width: 76px; height: 76px; object-fit: cover; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.scenario-box span { font-size: .8rem; line-height: 1.6; text-align: center; }
@media(max-width:420px){
    .scenario-box img { width: 60px; height: 60px; }
    .scenario-box { min-height: 128px; padding: 10px 4px; }
    .scenario-box span { font-size: .72rem; }
}
/* دکمه اصلی (قرمز خونی) */
.button, .player-box, button.act, button.main, button.big, a.big,
.go, .save, .panel-btn {
    background: linear-gradient(180deg, #e3062c, #9c0420) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 46, 77, .55) !important;
    border-radius: 10px !important;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(217, 4, 41, .35);
    transition: transform .2s, filter .2s, box-shadow .2s;
    text-decoration: none;
}
.button:hover, .player-box:hover, button.act:hover,
button.main:hover, button.big:hover, a.big:hover, .go:hover, .save:hover, .panel-btn:hover {
    background: linear-gradient(180deg, #ff2e4d, #b30526) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(217, 4, 41, .5);
}
/* دکمه‌های عمومی بدون کلاس (صفحه بازی) */
button {
    background: linear-gradient(180deg, #e3062c, #9c0420);
    color: #fff;
    border: 1px solid rgba(255, 46, 77, .55);
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(217, 4, 41, .35);
    transition: transform .2s, filter .2s;
}
button:hover { filter: brightness(1.12); }
button:disabled { background: #2a2a32 !important; color: #777 !important; border-color: #333 !important; box-shadow: none; cursor: wait; }

/* دکمه دوم (روح) */
button.small, .topbar a, .topbar button, .links a, .home, .copy,
a.small {
    background: #14141a !important;
    color: var(--ink) !important;
    border: 1px solid #383843 !important;
    border-radius: 9px !important;
    text-decoration: none;
    transition: border-color .2s, transform .2s;
}
button.small:hover, .topbar a:hover, .topbar button:hover, .links a:hover,
.home:hover, .copy:hover, a.small:hover {
    border-color: var(--red-hi) !important;
    transform: translateY(-1px);
}
/* خطر */
button.danger, .out, .stop, .reset {
    background: rgba(217, 4, 41, .12) !important;
    color: #ff8a96 !important;
    border: 1px solid rgba(217, 4, 41, .6) !important;
    border-radius: 9px !important;
}
button.danger:hover, .out:hover, .stop:hover, .reset:hover { background: rgba(217, 4, 41, .28) !important; }
/* دوربین (تمایز از شروع) */
.cam {
    background: transparent !important;
    color: var(--red-hi) !important;
    border: 1px solid var(--red) !important;
    border-radius: 9px !important;
}

/* باکس‌ها و کارت‌ها */
.box {
    background: linear-gradient(180deg, #121218, #0c0c10) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
}
.box h2 {
    color: var(--red-hi) !important;
    border-right: 3px solid var(--red);
    padding-right: 10px;
}
.box h3, .card h2, .tcard h2 { color: var(--red-hi) !important; }
.card, .tcard, .room, .op, .arch, .hist, .livecard, .role-card, .coming-soon {
    background: linear-gradient(180deg, #121218, #0c0c10);
    border-color: var(--line);
}
.livecard {
    border-color: var(--red-deep) !important;
    box-shadow: 0 0 22px rgba(217, 4, 41, .3) !important;
}
.livecard h2 { color: var(--red-hi) !important; }
.room .t { color: var(--red-hi) !important; }
.role-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.role-card p { color: var(--ink) !important; }
.role-card img { border: 1px solid #3a3a44; }
.card-link b { color: var(--red-hi) !important; }
.card-link:hover { border-color: var(--red) !important; transform: translateY(-2px); }
.op.sel { border-color: var(--red) !important; }
.checks input { accent-color: var(--red) !important; }

/* منوی ادمین */
.anav a { color: var(--red-hi) !important; background: #14141a !important; border-color: #34343e !important; }
.anav a.cur {
    background: linear-gradient(180deg, #e3062c, #9c0420) !important;
    color: #fff !important;
    border-color: var(--red-hi) !important;
}
.anav a.out { background: #1c0d10 !important; color: #ff8a96 !important; border-color: #4d1420 !important; }

/* صفحه اصلی */
.logo { color: var(--ink) !important; text-shadow: 0 0 32px rgba(217, 4, 41, .6) !important; }
.role-images img:hover { box-shadow: 0 0 20px rgba(217, 4, 41, .55); }
.audio-button {
    background: linear-gradient(180deg, #e3062c, #9c0420) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 46, 77, .55) !important;
    box-shadow: 0 4px 16px rgba(217, 4, 41, .35);
}
.install-prompt {
    background: #14141a !important;
    color: var(--ink) !important;
    border: 1px solid var(--red-deep) !important;
    box-shadow: 0 8px 30px rgba(217, 4, 41, .35) !important;
}
.install-prompt button {
    background: linear-gradient(180deg, #e3062c, #9c0420) !important;
    color: #fff !important;
}

/* صفحه بازی — پس‌زمینه ثابت هم‌خانواده خانه (بدون پالس تکراری) */
.background-animation {
    width: 100% !important;
    background:
        radial-gradient(900px 480px at 50% -8%, rgba(217, 4, 41, .2), transparent 60%),
        radial-gradient(700px 520px at 88% 112%, rgba(217, 4, 41, .1), transparent 60%),
        radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px),
        #08080a !important;
    background-size: auto, auto, 22px 22px, auto !important;
    animation: none !important;
    opacity: 1 !important;
}

/* امنیت ریسپانسیو سراسری */
img, video, svg { max-width: 100%; }
.linkbox, .kv { overflow-wrap: anywhere; }
.hub-top { flex-wrap: wrap; }
table { max-width: 100%; }
@media(max-width:640px){
    h1 { font-size: 1.25rem !important; }
    .hub-card { padding: 12px 10px; }
}
@media(max-width:640px){
    h1 { font-size: 1.25rem !important; }
    .hub-card { padding: 12px 10px; }
}
/* موبایل: ماسک و عکس هر دو وسط صفحه، نام و دکمه با فاصله زیرشان */
@media(max-width:640px){
    .game-area { min-height: 64vh; min-height: 64dvh; display: flex; align-items: center; justify-content: center; }
    .role-card { height: 100% !important; min-height: 0 !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 88px !important; gap: 20px !important; }
    .role-card img { width: min(70vw, 290px) !important; }
    #role-name { margin-top: 4px; }
    .role-card button { margin-bottom: 0; }
}
/* مرکز دقیق و تضمینی کارت نقش */
.role-card {
    left: 0 !important; right: 0 !important;
    width: auto !important; margin: 0 auto !important;
    text-align: center;
}
/* حذف قاب پس‌زمینه صحنه (خود کارت مات می‌ماند، چیزی از زیرش دیده نمی‌شود) */
.game-area { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
/* کارت نقش کاملاً نامرئی — فقط عکس و نام دیده می‌شود */
/* صفحه بازی: نوار نام نقش، تیم و شماره بازیکن مخفی (فقط عکس+نام) */
.role-header, .team-info, .player-number { display: none !important; }
/* عکس نقش بزرگ‌تر، نام و دکمه پایین‌تر */
.role-card { justify-content: flex-end !important; gap: clamp(14px, 3.5vw, 26px) !important; padding-top: clamp(34px, 9vw, 64px) !important; }
.role-card img { width: clamp(150px, 48vw, 230px) !important; height: auto !important; }
.role-card button { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; padding: 14px 36px !important; }
/* اسم نقش — رکاس نمایشی، کمی کوچک‌تر */
#role-name {
    font-family: 'Rakkas', 'Vazirmatn', Tahoma, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
    line-height: 1.9 !important;
    color: #fff !important;
    text-shadow: 0 0 30px rgba(255, 46, 77, .65), 0 2px 6px rgba(0, 0, 0, .8) !important;
}
/* انیمیشن واضح لحظه نمایش نقش: چرخش سه‌بعدی + جهش */
.role-card.show { animation: roleIn .6s cubic-bezier(.2, 1.25, .35, 1) !important; }
/* عکس نقش: ورود + هاله مشکی متحرک دور تصویر (بیرنگ، بدون قرمز) */
.role-card.show img {
    animation: roleImg .6s ease, haloMove 3s linear .6s infinite !important;
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, .9));
}
@keyframes roleIn {
    0% { opacity: 0; transform: perspective(600px) rotateY(55deg) scale(.55); }
    55% { opacity: 1; transform: perspective(600px) rotateY(-8deg) scale(1.06); }
    75% { transform: perspective(600px) rotateY(3deg) scale(.99); }
    100% { opacity: 1; transform: perspective(600px) rotateY(0) scale(1); }
}
@keyframes roleImg {
    0% { transform: scale(.4); }
    55% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@keyframes haloMove {
    0% { filter: drop-shadow(11px 0 8px rgba(255, 255, 255, .95)); }
    25% { filter: drop-shadow(0 11px 18px rgba(255, 255, 255, .95)); }
    50% { filter: drop-shadow(-11px 0 8px rgba(255, 255, 255, .95)); }
    75% { filter: drop-shadow(0 -11px 18px rgba(255, 255, 255, .95)); }
    100% { filter: drop-shadow(11px 0 8px rgba(255, 255, 255, .95)); }
}
@media (prefers-reduced-motion: reduce) {
    .role-card.show, .role-card.show img { animation: none !important; }
}
.role-header {
    background: linear-gradient(180deg, #c10424, #7d0a18) !important;
    color: #fff !important;
}
.mask { filter: drop-shadow(0 4px 14px rgba(217, 4, 41, .45)) !important; }
.mask { transition: transform .25s, filter .25s; }
.mask:hover { transform: scale(1.04); }
.player-number {
    background: #101016 !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    color: var(--ink) !important;
    font-weight: 900;
    text-shadow: none !important;
}
.player-number span { color: var(--red-hi); font-size: 1.2em; }
.team-info {
    border: 1px solid var(--red-deep) !important;
    border-radius: 20px !important;
    background: rgba(217, 4, 41, .12) !important;
}
#reset-roles {
    background: transparent !important;
    color: var(--muted) !important;
    border: 1px solid #34343e !important;
    box-shadow: none !important;
    font-size: .85rem !important;
    margin-top: 10px;
}
#reset-roles:hover { color: var(--red-hi) !important; border-color: var(--red) !important; }
/* اسم نقش — در theme نسخه جدید (پایین فایل) تعریف شده */
/* دکمه شناور دایره‌ای (بازشونده) بالای ناوبری */
.fab-wrap {
    position: fixed; bottom: 86px; left: 12px; z-index: 70;
    display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
}
.fab-main {
    width: 54px !important; height: 54px !important; border-radius: 50% !important;
    font-size: 1.4rem; padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s;
}
.fab-wrap.open .fab-main { transform: rotate(45deg); }
.fab-item {
    width: 46px !important; height: 46px !important; border-radius: 50% !important;
    font-size: 1.15rem; padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    transform: scale(0); opacity: 0; pointer-events: none;
    transition: transform .25s, opacity .25s;
}
.fab-wrap.open .fab-item { transform: scale(1); opacity: 1; pointer-events: auto; }
.fab-wrap.open .fab-item:nth-child(2) { transition-delay: .05s; }
.fab-wrap.open .fab-item:nth-child(3) { transition-delay: .1s; }
.fab-wrap.open .fab-item:nth-child(4) { transition-delay: .15s; }
.fab-wrap.open .fab-item:nth-child(5) { transition-delay: .2s; }
@media(max-height:560px){
    .fab-wrap { bottom: 78px; gap: 7px; }
    .fab-main { width: 46px !important; height: 46px !important; }
    .fab-item { width: 40px !important; height: 40px !important; font-size: 1rem; }
}
/* امنیت چیدمان ادمین در گوشی باریک */
.comp-row > span { min-width: 0; }

/* ===== باشگاه‌ها ===== */
.layout { display: flex; gap: 14px; align-items: flex-start; }
.maincol { flex: 1; min-width: 0; }
.sidecol { width: 272px; flex: none; position: sticky; top: 72px; }
@media(max-width:900px){ .sidecol { display: none; } }
.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.club-card {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, #14141b, #0c0c10);
    border: 1px solid var(--line); border-radius: 12px; padding: 10px;
    text-decoration: none; color: var(--ink);
    transition: border-color .2s, transform .2s;
}
.club-card:hover { border-color: var(--red); transform: translateY(-2px); }
.club-card img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 1px solid #34343e; flex: none; }
.club-card .nologo {
    width: 52px; height: 52px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    background: #1a1a21; border: 1px solid #34343e;
}
.club-card b { display: block; font-size: .9rem; line-height: 1.7; }
.club-card small { color: var(--muted); font-size: .72rem; }
.club-card.col { flex-direction: column; text-align: center; gap: 6px; padding: 12px 6px; }
.club-card.col img, .club-card.col .nologo { width: 56px; height: 56px; border-radius: 50%; }
/* نوار باشگاه‌ها در موبایل (به‌جای شمارنده‌ها) */
#mobileClubs { display: none; }
@media(max-width:640px){
    #statRow { display: none; }
    #mobileClubs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; }
    #mobileClubs .club-card { min-width: 148px; scroll-snap-align: start; }
}
/* صفحه باشگاه */
.club-hero { text-align: center; padding: 18px 12px; }
.club-hero img { width: 104px; height: 104px; border-radius: 28px; object-fit: cover; border: 2px solid var(--red-deep); box-shadow: 0 0 26px rgba(217, 4, 41, .35); }
.club-hero h2 { font-size: 1.35rem; font-weight: 900; margin: 10px 0 2px; }
.club-hero .addr { color: var(--muted); font-size: .85rem; }
.club-hero .actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.menu-list { display: grid; gap: 10px; margin-top: 6px; }
@media(min-width:640px){ .menu-list { grid-template-columns: 1fr 1fr; } }
.menu-item {
    display: flex; gap: 12px; align-items: center;
    background: linear-gradient(180deg, #14141b, #0c0c10);
    border: 1px solid var(--line); border-radius: 14px; padding: 10px;
}
.menu-item img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; flex: none; border: 1px solid #34343e; }
.menu-item .nophoto {
    width: 76px; height: 76px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
    background: #1a1a21; border: 1px solid #34343e;
}
.menu-item .inf { flex: 1; min-width: 0; }
.menu-item .inf b { display: block; font-size: .95rem; }
.menu-item .price { color: var(--red-hi); font-weight: 900; font-size: .95rem; white-space: nowrap; }
.clubs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
/* نوار بالای کارت حذف شد (کارت نامرئی است) */

/* اتاق (صندلی) */
.seat-label { color: var(--ink) !important; }
.chair .num { color: var(--red-hi) !important; text-shadow: 0 0 20px rgba(255, 46, 77, .75) !important; }

/* لایو */
h3.sec { color: var(--red-hi) !important; }
.sig.sok { background: #1d5c33 !important; }

/* کامینگ‌سون */
.coming-soon { box-shadow: 0 0 26px rgba(217, 4, 41, .4) !important; }
.coming-soon h1 { color: var(--ink) !important; text-shadow: 0 0 26px rgba(217, 4, 41, .55) !important; }
.coming-soon p { color: var(--muted) !important; }
.star { background-color: var(--red-hi) !important; }

/* ورودی‌ها */
input, select {
    background: #0b0b0f !important;
    border-color: #2c2c35 !important;
    color: var(--ink) !important;
}

/* ===== Tournament Hub System ===== */
.hub-top {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 10px;
    background: rgba(8, 8, 10, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    padding: 10px 14px; margin: -15px -15px 14px;
}
.hub-top img { width: 34px; height: 34px; border-radius: 8px; }
.hub-top b { font-size: 1rem; font-weight: 900; }
.hub-top .live-pill {
    margin-right: auto; font-size: .75rem; font-weight: 700;
    background: rgba(217, 4, 41, .15); color: var(--red-hi);
    border: 1px solid var(--red-deep); border-radius: 20px; padding: 3px 12px;
    text-decoration: none;
}
.hub-top .live-pill.off { background: transparent; color: var(--muted); border-color: var(--line); }
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 18px 2px 10px;
}
.section-head h2 { font-size: 1.05rem; font-weight: 900; border: none !important; padding: 0 !important; color: var(--ink) !important; }
.section-head h2::before { content: ''; display: inline-block; width: 4px; height: 1em; background: var(--red); border-radius: 2px; margin-left: 8px; vertical-align: -2px; }
.section-head a { font-size: .8rem; color: var(--red-hi); text-decoration: none; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width:640px){ .hub-grid{grid-template-columns:1fr;} }
.hub-card {
    display: block; text-decoration: none; color: var(--ink);
    background: linear-gradient(180deg, #14141b, #0c0c10);
    border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px;
    transition: border-color .2s, transform .2s;
}
.hub-card:hover { border-color: var(--red); transform: translateY(-2px); }
.hub-card .ic { font-size: 1.7rem; }
.hub-card b { display: block; font-size: 1rem; margin: 6px 0 2px; }
.hub-card small { color: var(--muted); font-size: .78rem; line-height: 1.9; }
.hub-card.hot { border-color: var(--red-deep); box-shadow: 0 0 20px rgba(217, 4, 41, .25); }
html, body { overflow-x: clip; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 2px; }
.stat-row > * { min-width: 0; }
@media(max-width:480px){
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat {
    min-width: 0; text-align: center;
    background: #101016; border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px;
}
.stat b { display: block; font-size: clamp(1.05rem, 5vw, 1.4rem); color: var(--red-hi); font-weight: 900; }
.stat small { color: var(--muted); font-size: .7rem; }
.empty {
    text-align: center; color: var(--muted);
    background: #101016; border: 1px dashed #34343e; border-radius: 12px;
    padding: 22px; margin-top: 4px; font-size: .88rem;
}
/* استپر بازی */
.stepper { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; }
.stepper span {
    flex: 1; max-width: 150px; text-align: center; font-size: .75rem; color: var(--muted);
    background: #101016; border: 1px solid var(--line); border-radius: 20px; padding: 5px 4px;
}
.stepper span.cur { color: #fff; border-color: var(--red); background: rgba(217, 4, 41, .18); font-weight: 700; }
.stepper span.done { color: var(--red-hi); border-color: var(--red-deep); }
/* ناوبری پایین موبایل */
.bottomnav {
    position: fixed; bottom: 0; right: 0; left: 0; z-index: 60;
    display: flex; background: rgba(10, 10, 14, .96);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottomnav a {
    flex: 1; text-align: center; text-decoration: none; color: var(--muted);
    font-size: .68rem; padding: 4px 2px; border-radius: 8px; line-height: 1.5;
}
.bottomnav a i { display: block; font-style: normal; font-size: 1.25rem; }
.bottomnav a.cur { color: var(--red-hi); }
body.has-bottomnav { padding-bottom: 84px; }
@media(min-width:761px){ .bottomnav{ display: none; } body.has-bottomnav{ padding-bottom: 15px; } }