/* ==========================================================
   MAFIA ONLINE — asosiy stil fayli
   Mafia atmosferasi: qora-qizil-oltin noir uslub, filmona effektlar
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Segoe+UI:wght@400;600;700&display=swap');

/* Forscha (fa) til tanlanganda sahifa o'ngdan-chapga (RTL) yo'nalishga o'tadi */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .bottom-nav,
html[dir="rtl"] .navbar-links,
html[dir="rtl"] .menu-row,
html[dir="rtl"] .profile-name-row { direction: rtl; }

:root {
    --bg: #0a0a0e;
    --bg-card: #16141a;
    --bg-card-2: #1e1a20;
    --border: #322730;
    --text: #f1ece2;
    --text-dim: #9b8f9a;
    --primary: #b81f30;
    --primary-2: #d8a545;
    --gold: #d8a545;
    --gold-dim: #8a7137;
    --blood: #7c1622;
    --mafia: #e0313f;
    --town: #4dc9ff;
    --success: #3ddc97;
    --warn: #d8a545;
    --radius: 16px;
    --shadow: 0 10px 40px rgba(0,0,0,.6);
    --font-display: 'Cinzel', 'Segoe UI', serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Filmona "grain" tekstura - butun sayt ustida juda xira shovqin qatlami,
   noir/retro kino hissini beradi. Hech qanday HTML o'zgarishisiz ishlaydi. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 3; pointer-events: none;
    opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Vinyetka - burchaklarni qorong'ilashtirib, sahna yorug'ligi hissini beradi */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 8%, transparent 40%, rgba(0,0,0,.55) 100%);
}

.bg-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(650px circle at 12% 8%, rgba(163,24,43,.22), transparent 60%),
        radial-gradient(550px circle at 92% 24%, rgba(216,165,69,.13), transparent 60%),
        radial-gradient(750px circle at 50% 105%, rgba(124,22,34,.20), transparent 60%);
}

a { color: inherit; text-decoration: none; }

.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 0 rgba(163,24,43,0); } 50% { box-shadow: 0 0 30px rgba(163,24,43,.4); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- PREMIUM ICON BADGE (mafia uslubidagi ikonka konteynerlari) ---------- */
.auth-logo, .lobby-hero-emoji, .finished-emoji, .admin-logo i.bi, .navbar-logo i.bi {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--blood), #241419 65%);
    border: 1px solid rgba(216,165,69,.35);
    box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(163,24,43,.35);
    color: var(--gold);
}
.auth-logo { width: 76px; height: 76px; border-radius: 22px; font-size: 40px; margin: 0 auto 12px; }
.lobby-hero-emoji { width: 84px; height: 84px; border-radius: 24px; font-size: 42px; margin: 0 auto; }
.finished-emoji { width: 84px; height: 84px; border-radius: 24px; font-size: 42px; margin: 0 auto; }
.navbar-logo i.bi { width: 30px; height: 30px; border-radius: 10px; font-size: 15px; margin-right: 8px; vertical-align: middle; }
.admin-logo i.bi { width: 30px; height: 30px; border-radius: 10px; font-size: 14px; margin-right: 8px; vertical-align: middle; }

h1, .navbar-logo, .admin-logo, .lobby-hero h1, .auth-card h1, .finished-card h1, .finished-card h2,
.winners-title, .my-role-card .role-name, .stat-num {
    font-family: var(--font-display);
    letter-spacing: .3px;
}

/* ---------- NAVBAR ---------- */
.navbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
    flex-wrap: wrap; gap: 10px;
}
.navbar-logo { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.navbar-links { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.navbar-links a { color: var(--text-dim); transition: all .2s; }
.navbar-links a:hover { color: var(--text); }

.nav-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bg-card); border: 1px solid var(--border);
    padding: 7px 12px; border-radius: 20px; font-weight: 600;
    white-space: nowrap;
}
.nav-pill:hover { border-color: var(--primary); background: var(--bg-card-2); }
.nav-pill-profile { color: var(--text); }
.nav-points { color: var(--primary); font-weight: 700; }
.nav-pill-icon { padding: 7px 10px; font-size: 14px; }

@media (max-width: 480px) {
    .navbar { padding: 12px 16px; }
    .navbar-logo { font-size: 16px; }
    .navbar-links { gap: 6px; font-size: 12px; }
    .nav-pill { padding: 6px 10px; }
}
/* ---------- BUTTONS ---------- */
.btn-primary, .btn-secondary {
    border: none; border-radius: 10px; padding: 11px 20px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
    position: relative; overflow: hidden;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--blood) 55%, #241419);
    color: var(--gold);
    box-shadow: 0 6px 20px rgba(124,20,30,.45), inset 0 1px 0 rgba(255,255,255,.08);
    border: 1px solid rgba(216,165,69,.4);
    letter-spacing: .2px;
}
.btn-primary::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(216,165,69,.28) 50%, transparent 70%);
    background-size: 220% 100%; background-position: 120% 0; transition: background-position .5s ease;
}
.btn-primary:hover::after { background-position: -20% 0; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124,20,30,.55); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
    background: var(--bg-card-2); color: var(--text); border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--gold); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- AUTH PAGES ---------- */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 44px 32px; width: 100%; max-width: 420px; text-align: center;
    box-shadow: var(--shadow);
}
.auth-logo { font-size: 48px; margin-bottom: 8px; animation: pulse 3s infinite; }
.auth-card h1 { margin: 0 0 4px; font-size: 26px; }
.auth-sub { color: var(--text-dim); margin: 0 0 28px; font-size: 15px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.auth-card input {
    background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    padding: 18px 20px; border-radius: 12px; font-size: 17px; outline: none;
    min-height: 56px; box-sizing: border-box; width: 100%;
    transition: border-color .2s;
}
.auth-card input:focus { border-color: var(--primary); }
.auth-card button { margin-top: 6px; }
.auth-card .btn-primary {
    padding: 17px 20px; font-size: 17px; border-radius: 12px; min-height: 56px; width: 100%;
    box-sizing: border-box;
}
.auth-switch { margin-top: 22px; font-size: 15px; color: var(--text-dim); }
.auth-switch a { color: var(--primary); font-weight: 600; }

@media (max-width: 480px) {
    .auth-page { padding: 12px; }
    .auth-card { padding: 32px 20px; max-width: 100%; border-radius: 18px; }
    .auth-card input, .auth-card .btn-primary { font-size: 18px; padding: 18px; min-height: 58px; }
    .auth-logo { font-size: 42px; }
    .auth-card h1 { font-size: 22px; }
}
.error { color: var(--mafia); font-size: 13px; min-height: 18px; margin: 10px 0 0; }
.success { color: var(--success); font-size: 13px; }
.hint { color: var(--text-dim); font-size: 12px; margin-top: 14px; }

/* ---------- LOBBY (bosh sahifa) ---------- */
.lobby-wrap { max-width: 900px; margin: 0 auto; padding: 60px 24px; }
.lobby-hero { text-align: center; margin-bottom: 40px; }
.lobby-hero-emoji { font-size: 56px; animation: pulse 3s infinite; }
.lobby-hero h1 { font-size: 30px; margin: 10px 0 6px; letter-spacing: -.3px; }
.lobby-hero p { color: var(--text-dim); max-width: 460px; margin: 0 auto; line-height: 1.6; font-size: 14px; }

.lobby-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px 22px; text-align: center; transition: border-color .2s, transform .2s;
}
.lobby-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.lobby-card-icon { font-size: 30px; margin-bottom: 8px; }
.lobby-card h2 { margin: 4px 0; font-size: 17px; }
.lobby-card p { color: var(--text-dim); font-size: 12.5px; margin-bottom: 18px; }
.lobby-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.join-form { display: flex; gap: 8px; }
.join-form input {
    flex: 1; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    padding: 13px 14px; border-radius: 10px; font-size: 15px; outline: none; text-align: center;
}
#lobbyError { text-align: center; margin-top: 16px; }

@media (max-width: 640px) { .lobby-cards { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
    .lobby-wrap { padding: 32px 16px; }
    .lobby-hero { margin-bottom: 32px; }
    .lobby-hero-emoji { font-size: 48px; }
    .lobby-hero h1 { font-size: 28px; }
    .lobby-card { padding: 24px 18px; }
    .daily-bonus-chips { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- GENERIC PAGE WRAP ---------- */
.page-wrap { max-width: 800px; margin: 0 auto; padding: 48px 24px; }
.page-wrap h1 { font-size: 26px; margin-bottom: 24px; }

/* ---------- LEADERBOARD ---------- */
.leaderboard { display: flex; flex-direction: column; gap: 10px; }
.lb-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.lb-tab {
    flex: 1; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 12px; padding: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.lb-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.lb-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 18px; transition: transform .15s;
}
.lb-row:hover { transform: translateX(4px); }
.lb-top-1 { border-color: #ffd75e; background: linear-gradient(90deg, rgba(255,215,94,.08), transparent); }
.lb-top-2 { border-color: #c9d2e0; }
.lb-top-3 { border-color: #d99a5b; }
.lb-rank { font-weight: 800; font-size: 18px; width: 28px; text-align: center; color: var(--text-dim); }
.lb-top .lb-rank { color: var(--text); }
.lb-avatar { font-size: 28px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lb-avatar .avatar-photo { width: 100%; height: 100%; object-fit: cover; }
.lb-info { flex: 1; }
.lb-name { font-weight: 700; }
.lb-level { font-size: 12px; color: var(--text-dim); }
.lb-stats { text-align: right; font-size: 13px; color: var(--text-dim); display: flex; flex-direction: column; gap: 2px; }
.lb-points { font-weight: 700; color: var(--primary); font-size: 15px; }

/* ---------- PROFILE ---------- */
.profile-page { display: flex; flex-direction: column; gap: 16px; }

.profile-header-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px; display: flex; align-items: center; gap: 18px;
}
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar-ring {
    width: 76px; height: 76px; border-radius: 50%; font-size: 36px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--primary);
    overflow: hidden;
}
.avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-upload-btn {
    position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px;
    border-radius: 50%; background: var(--primary); color: #fff; border: 2px solid var(--bg-card);
    display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer;
}

/* ---------- SHOP: kosmetik avatar romkalari ---------- */
.frame-gold   { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px #ffd75e, 0 0 14px rgba(255,215,94,.6); }
.frame-fire   { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px #ff6a3d, 0 0 16px rgba(255,106,61,.65); }
.frame-ice    { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px #6fd9ff, 0 0 16px rgba(111,217,255,.65); }
.frame-royal  { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px #b06bff, 0 0 16px rgba(176,107,255,.65); }
.frame-legend { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px #ffd75e, 0 0 0 7px #ff6a3d, 0 0 18px rgba(255,110,60,.7); }
.frame-vip { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px #ffd75e, 0 0 22px rgba(255,215,94,.85); animation: vipPulse 2.2s ease-in-out infinite; }
@keyframes vipPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* ---------- VIP STATUS ---------- */
.vip-badge {
    display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800;
    color: #1a1400; background: linear-gradient(135deg, #ffd75e, #ff6a3d);
    padding: 2px 8px; border-radius: 20px; white-space: nowrap; vertical-align: middle;
}
.vip-badge-sm { font-size: 10px; padding: 1px 6px; }
.vip-badge-edit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--bg-card); color: var(--text-secondary, #9aa); font-size: 11px;
    box-shadow: 0 0 0 1px var(--border);
}
.lang-select {
    background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer;
}
.vip-status-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 16px; margin-bottom: 18px;
}
.vip-status-card.vip-active { border-color: #ffd75e; background: linear-gradient(135deg, rgba(255,215,94,.08), var(--bg-card)); }
.vip-status-card p { margin: 0 0 10px; font-size: 14px; }
.vip-plan-row { display: flex; gap: 8px; }
.vip-buy-btn {
    flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--primary); color: #fff; font-weight: 700; cursor: pointer; font-size: 13px;
}
.vip-color-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.vip-color-label { font-size: 12px; color: var(--text-dim); }
.vip-color-dot {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0;
}
.vip-color-dot.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }
.vip-color-none { background: var(--bg-card-2); position: relative; }
.vip-color-none::after { content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 14px; }

/* ---------- KUNLIK BONUS ---------- */
.daily-bonus-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 16px; margin-bottom: 18px;
}
.daily-bonus-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.db-chip {
    background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 10px;
    padding: 6px 2px; text-align: center;
}
.db-day { font-size: 10px; color: var(--text-dim); }
.db-amount { font-size: 11px; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.db-chip.db-done { border-color: var(--success); background: rgba(61,220,151,.12); }
.db-chip.db-done .db-amount { color: var(--success); }
.db-chip.db-next { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,92,255,.25); }
.frame-equip-btn, .frame-buy-btn {
    width: 100%; margin-top: 8px; padding: 8px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--primary); color: #fff; font-weight: 700; cursor: pointer;
}
.frame-equip-btn:disabled { background: rgba(124,92,255,.15); color: var(--primary); cursor: default; }
.frame-buy-btn { background: var(--bg-card); color: var(--text); }
.profile-header-info { min-width: 0; flex: 1; }
.profile-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-name-row h1 { font-size: 20px; margin: 0; }
.profile-level-chip {
    font-size: 12px; font-weight: 700; color: var(--primary);
    background: rgba(124,92,255,.15); border: 1px solid var(--primary);
    padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.profile-id-row {
    margin-top: 6px; background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 13px; padding: 0; display: flex; align-items: center; gap: 6px;
    font-family: inherit;
}
.profile-id-row:hover { color: var(--text); }
.profile-id-row .copy-icon { font-size: 12px; }

.profile-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-mini-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 16px 6px; text-align: center; color: inherit; text-decoration: none; display: block;
}
.stat-mini-card .smc-icon {
    font-size: 15px; margin: 0 auto 8px; width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--blood), #241419 65%);
    border: 1px solid rgba(216,165,69,.3); color: var(--gold);
    box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.stat-mini-card .smc-val { font-size: 20px; font-weight: 800; }
.stat-mini-card .smc-label { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

.profile-progress-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 20px;
}
.progress-label-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; }
.progress-label-row .progress-nums { color: var(--text-dim); }
.progress-bar { background: var(--bg-card-2); border-radius: 8px; height: 10px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, var(--primary), var(--primary-2)); height: 100%; transition: width .4s; }

.section-title { margin: 4px 0 -4px; font-size: 15px; color: var(--text-dim); }

.menu-list { display: flex; flex-direction: column; gap: 10px; }
.menu-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 16px; cursor: pointer; text-align: left; width: 100%; font-family: inherit;
    transition: border-color .15s, background .15s;
}
.menu-row:hover { border-color: var(--primary); background: var(--bg-card-2); }
.menu-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(150deg, var(--blood), #241419 65%);
    border: 1px solid rgba(216,165,69,.3); color: var(--gold);
    box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.menu-text { flex: 1; min-width: 0; }
.menu-title { font-weight: 700; font-size: 14px; }
.menu-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-chevron { color: var(--text-dim); font-size: 20px; flex-shrink: 0; }

.avatar-picker {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 20px;
}
.avatar-picker h3 { margin-bottom: 12px; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.avatar-opt {
    font-size: 26px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 0; cursor: pointer; transition: all .15s;
}
.avatar-opt:hover { border-color: var(--primary); transform: scale(1.08); }
.avatar-opt.selected { border-color: var(--primary); background: rgba(124,92,255,.15); }

/* ---------- GAME TOPBAR ---------- */
.game-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-bottom: 1px solid var(--border);
}
.game-back { color: var(--text-dim); font-size: 14px; }
.room-code { font-size: 14px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.room-code button { background: none; border: none; color: var(--text-dim); cursor: pointer; }
.room-thumb {
    width: 24px; height: 24px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card-2);
}
.room-thumb img { width: 100%; height: 100%; object-fit: cover; }
.room-code-sub { color: var(--text-dim); font-size: 12px; }
.phase-badge {
    padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 700;
    background: var(--bg-card-2); border: 1px solid var(--border);
}
.phase-badge.phase-night { background: rgba(77,92,255,.15); border-color: #4d5cff; }
.phase-badge.phase-day { background: rgba(255,184,77,.15); border-color: var(--warn); }
.phase-badge.phase-voting { background: rgba(255,77,94,.15); border-color: var(--mafia); }

.game-wrap { max-width: 1100px; margin: 0 auto; padding: 20px; }
.hidden { display: none !important; }

/* ---------- LOBBY VIEW (ichida) ---------- */
.lobby-view { text-align: center; padding: 40px 0; }
.lobby-hint { color: var(--text-dim); margin-bottom: 24px; }
.lobby-players { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 28px; }
.lobby-player-chip {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 30px;
    padding: 10px 18px; display: flex; align-items: center; gap: 8px; animation: fadeIn .3s ease both;
}
.lobby-player-chip .host-star { color: var(--warn); }

/* ---------- GAME VIEW ---------- */
.game-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .game-grid { grid-template-columns: 1fr; } }

.phase-info {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 22px; margin-bottom: 16px; text-align: center;
}
.phase-info .timer { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.phase-info .timer.urgent { color: var(--mafia); animation: pulse 1s infinite; }
.phase-info .round-label { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.phase-info .event-log { margin-top: 10px; font-size: 13px; color: var(--warn); min-height: 18px; }

.my-role-card {
    border-radius: var(--radius); padding: 18px 22px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px; border: 1px solid var(--border);
}
.my-role-card.role-mafia { background: linear-gradient(135deg, rgba(255,77,94,.15), var(--bg-card)); border-color: var(--mafia); }
.my-role-card.role-town { background: linear-gradient(135deg, rgba(77,201,255,.12), var(--bg-card)); border-color: var(--town); }
.my-role-card .role-emoji { font-size: 36px; }
.my-role-card .role-name { font-weight: 800; font-size: 18px; }
.my-role-card .role-desc { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.my-role-card.dead { opacity: .5; }

.action-panel {
    background: var(--bg-card); border: 1px solid var(--primary); border-radius: var(--radius);
    padding: 18px 22px; margin-bottom: 16px; animation: glowPulse 2.5s infinite;
}.action-panel h3 { margin: 0 0 12px; }
.target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.target-btn {
    background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 12px 8px; cursor: pointer; font-size: 13px; transition: all .15s;
}
.target-btn:hover { border-color: var(--primary); transform: translateY(-2px); }
.target-btn.selected { border-color: var(--primary); background: rgba(124,92,255,.2); }
.action-result { margin-top: 10px; font-weight: 600; color: var(--success); }

.last-words-box {
    background: var(--bg-card); border: 1px solid var(--warn); border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 16px;
}
.last-words-box p { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); }
.last-words-box form { display: flex; gap: 8px; }
.last-words-box input {
    flex: 1; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 10px 12px; outline: none; font-size: 14px;
}
.last-words-box button { padding: 0 16px; }

.players-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.player-tile {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 10px; text-align: center; transition: all .2s;
}
.player-tile.dead { opacity: .4; filter: grayscale(1); }
.player-tile .p-emoji { font-size: 26px; }
.player-tile .p-name { font-size: 13px; font-weight: 600; margin-top: 4px; }
.player-tile .p-tag { font-size: 11px; color: var(--text-dim); }
.player-tile.host-tile { border-color: var(--warn); }

/* ---------- CHAT ---------- */
.game-chat {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column; height: 520px;
}
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { font-size: 13px; line-height: 1.4; animation: fadeIn .25s ease both; }
.chat-msg .cm-name { font-weight: 700; color: var(--primary); }
.chat-msg.system { color: var(--warn); text-align: center; font-size: 12px; }
.chat-msg.mafia-msg { color: var(--mafia); }
.chat-form { display: flex; border-top: 1px solid var(--border); }
.chat-form input {
    flex: 1; background: transparent; border: none; color: var(--text);
    padding: 14px 16px; outline: none; font-size: 14px;
}
.chat-form button { background: none; border: none; color: var(--primary); font-size: 20px; padding: 0 18px; cursor: pointer; }

/* ---------- FINISHED VIEW ---------- */
.finished-view { display: flex; justify-content: center; padding: 60px 0; }
.finished-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 44px 36px; text-align: center; max-width: 460px; width: 100%;
    position: relative; overflow: hidden;
}

/* Shu o'yinda qo'lga kiritilgan ball va (agar bo'lsa) MVP belgisini ko'rsatadigan
   qisqa xulosa - avvalgi versiyada natija ekranida faqat ism/rol ro'yxati bor edi,
   o'yinchiga necha ball berilgani va kim eng ajralib chiqqani ko'rinmasdi. */
.result-summary {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin: 14px 0 6px;
}
.result-summary-chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
    padding: 7px 14px; border-radius: 20px; background: var(--bg-card-2); border: 1px solid var(--border);
}
.result-summary-chip.rs-points { color: var(--gold); border-color: var(--gold-dim); }
.result-summary-chip.rs-points.rs-negative { color: var(--text-dim); }
.result-summary-chip.rs-total { color: var(--text-dim); }
.mvp-badge {
    display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700;
    color: #1a1408; background: var(--gold); border-radius: 8px; padding: 1px 6px; margin-left: 6px;
    text-transform: uppercase; letter-spacing: .3px; vertical-align: middle;
}
.finished-emoji { font-size: 64px; animation: pulse 2s infinite; }
.roles-reveal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0 28px; }
.roles-reveal .rr-chip {
    background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 20px;
    padding: 8px 14px; font-size: 12px;
}

/* G'oliblar va mag'lublar ikkita alohida ustunda - har bir ism faqat bitta
   ro'yxatda chiqadi, keng ekranda yonma-yon, tor ekranda ustma-ust turadi */
.results-columns { display: flex; gap: 20px; align-items: flex-start; }
.results-columns > div { flex: 1; min-width: 0; }
@media (max-width: 560px) {
    .results-columns { flex-direction: column; gap: 4px; }
}

/* Finish ekranidagi tugmalar ("Yana o'ynash" / "Bosh sahifaga qaytish") ilgari
   display qoymay ketgani uchun (button = inline-block, a = inline) ustma-ust
   yoki tartibsiz chiqib turardi. Endi ustun qilib, har biriga to'liq kenglik
   va orasiga bo'shliq beramiz. */
.finished-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.finished-actions .btn-primary { display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; }

/* G'oliblar ro'yxati (top 1/2/3) - reytingdagi oltin/kumush/bronza uslubi bilan bir xil */
.winners-section { margin: 22px 0 4px; text-align: left; }
.losers-section { margin: 22px 0 4px; text-align: left; }
.winners-title, .losers-title {
    font-size: 13px; color: var(--text-dim); margin: 0 0 10px; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 6px; text-transform: uppercase; letter-spacing: .3px;
}
.winners-list { display: flex; flex-direction: column; gap: 8px; }
.winner-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; animation: fadeIn .3s ease both;
}
.winner-row.rank-1 { border-color: #ffd75e; background: linear-gradient(90deg, rgba(255,215,94,.14), transparent); }
.winner-row.rank-2 { border-color: #c9d2e0; background: linear-gradient(90deg, rgba(201,210,224,.10), transparent); }
.winner-row.rank-3 { border-color: #d99a5b; background: linear-gradient(90deg, rgba(217,154,91,.10), transparent); }
.winner-rank { font-weight: 800; font-size: 16px; width: 24px; text-align: center; color: var(--text-dim); flex-shrink: 0; }
.rank-1 .winner-rank { color: #ffd75e; }
.rank-2 .winner-rank { color: #c9d2e0; }
.rank-3 .winner-rank { color: #d99a5b; }
.winner-name { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner-role { font-size: 12px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.winner-points { font-size: 12px; font-weight: 700; color: var(--gold); white-space: nowrap; flex-shrink: 0; }

/* ---------- ADMIN PANEL ---------- */
.admin-body { background: var(--bg); }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 230px; background: var(--bg-card); border-right: 1px solid var(--border); padding: 24px 0; flex-shrink: 0; transition: transform .25s ease; }
.admin-logo { font-size: 18px; font-weight: 800; padding: 0 24px 20px; }
.admin-sidebar nav { display: flex; flex-direction: column; }
.admin-sidebar nav a {
    padding: 12px 24px; color: var(--text-dim); font-size: 14px; border-left: 3px solid transparent;
    transition: all .15s;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: var(--text); background: var(--bg-card-2); border-left-color: var(--primary); }
.admin-main { flex: 1; min-width: 0; }
.admin-topbar { padding: 18px 32px; border-bottom: 1px solid var(--border); font-size: 14px; display: flex; align-items: center; gap: 14px; }
.admin-content { padding: 32px; max-width: 1100px; }
.admin-content h1 { margin-top: 0; }
.admin-menu-toggle {
    display: none; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    font-size: 18px; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
    align-items: center; justify-content: center;
}
.admin-overlay { display: none; }

@media (max-width: 860px) {
    .admin-menu-toggle { display: inline-flex; }
    .admin-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 60;
        transform: translateX(-100%); box-shadow: var(--shadow); overflow-y: auto;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50;
    }
    .admin-overlay.open { display: block; }
    .admin-topbar { padding: 14px 16px; }
    .admin-content { padding: 16px; max-width: 100%; }
    .admin-content h1 { font-size: 22px; }

    /* Jadvallarni gorizontal skroll o'rniga har bir qatorni alohida
       "karta" sifatida ko'rsatamiz - mobilda o'qish va boshqarish osonroq */
    .admin-table { display: block; white-space: normal; border-radius: 0; background: transparent; }
    .admin-table tr:first-child { display: none; } /* th qatori */
    .admin-table tr {
        display: block; background: var(--bg-card); border: 1px solid var(--border);
        border-radius: 12px; margin-bottom: 12px; padding: 4px 0;
    }
    .admin-table td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: right;
    }
    .admin-table td:last-child { border-bottom: none; }
    .admin-table td[data-label]::before {
        content: attr(data-label); color: var(--text-dim); font-weight: 600; font-size: 12px;
        text-align: left; flex-shrink: 0;
    }
    .admin-table td.actions-cell { flex-direction: column; align-items: stretch; }
    .admin-table td.actions-cell::before { text-align: left; margin-bottom: 4px; }
    .admin-table .inline-form { width: 100%; }
    .admin-table .inline-form button { flex: 1; padding: 10px 8px; }

    /* Reyting tahrirlash formasi: har bir maydon o'z nomi bilan alohida qatorda */
    .stats-inline-form { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
    .stat-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-dim); width: 100%; }
    .stats-inline-form .points-input { width: 110px; padding: 8px 10px; font-size: 14px; }
    .stats-inline-form button { width: 100%; padding: 10px; font-size: 13px; }

    /* Barmoq bilan bosish uchun kattaroq maydon */
    .inline-form button, .inline-search button, .settings-form button,
    .role-card button, button[type="submit"] { min-height: 40px; }
    .settings-form, .settings-form input { max-width: 100%; }
    .inline-search { flex-wrap: wrap; }
    .inline-search input { flex: 1; min-width: 0; }
    .role-grid { grid-template-columns: 1fr; }
}

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 800px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 2px solid var(--gold-dim); border-radius: 12px; padding: 20px; }
.stat-num { font-size: 28px; font-weight: 800; }
.stat-label { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

.admin-room-cell { display: flex; align-items: center; gap: 10px; }
.admin-room-thumb {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
    background: var(--bg-card-2); display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--primary);
}
.admin-room-thumb img { width: 100%; height: 100%; object-fit: cover; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: 12px; overflow: hidden; }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.admin-table th { color: var(--text-dim); font-weight: 600; background: var(--bg-card-2); }
.badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-lobby { background: rgba(255,184,77,.15); color: var(--warn); }
.badge-playing { background: rgba(61,220,151,.15); color: var(--success); }
.badge-finished { background: rgba(255,77,94,.15); color: var(--mafia); }

.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.role-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.role-card-head { display: flex; align-items: center; justify-content: space-between; }
.role-team { font-size: 12px; font-weight: 700; }
.role-team-mafia { color: var(--mafia); }
.role-team-town { color: var(--town); }
.role-name-input, .role-card textarea {
    background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 8px 10px; font-size: 13px; width: 100%; font-family: inherit;
}
.role-fields { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-dim); }
.role-fields input { width: 70px; margin-left: 8px; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 6px; }
.role-card button { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 8px; cursor: pointer; font-weight: 600; font-size: 13px; }

.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-card-2); border-radius: 24px; transition: .2s; border: 1px solid var(--border); }
.slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px; background: white; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider:before { transform: translateX(18px); }

.settings-form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.settings-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); }
.settings-form input { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.settings-form button { align-self: flex-start; background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; font-weight: 600; }

.inline-form { display: inline-flex; gap: 4px; align-items: center; }
.inline-form button { background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 8px; cursor: pointer; font-size: 12px; }
.points-input { width: 70px; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 6px; }
.stats-inline-form { flex-wrap: wrap; }
.stats-inline-form .points-input { width: 56px; }
.stat-field { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.actions-cell { display: flex; gap: 6px; }
.inline-search { margin-bottom: 16px; display: flex; gap: 8px; }
.inline-search input { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 8px; }
.inline-search button { background: var(--primary); border: none; color: #fff; border-radius: 8px; padding: 8px 14px; cursor: pointer; }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 8px; }

/* ---------- BOTTOM NAV (mobil ilova uslubidagi pastki menyu) ---------- */
body.has-bottom-nav { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-around;
    background: rgba(20,24,38,.9); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0,0,0,.35);
}
.bn-item {
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px; transition: all .15s;
}
.bn-item .bn-icon { font-size: 21px; line-height: 1; }
.bn-item:hover, .bn-item.active { color: var(--text); background: var(--bg-card-2); }
.bn-item-main {
    width: 52px; height: 52px; margin-top: -14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff; box-shadow: 0 8px 22px rgba(124,92,255,.45);
}
.bn-item-main .bn-icon { font-size: 24px; }
.bn-item-main:hover { background: linear-gradient(135deg, var(--primary), var(--primary-2)); transform: translateY(-2px); }

.lobby-hint { font-size: 13px; color: var(--text-dim); margin-top: 14px; opacity: .8; }

/* ============================================
   Yangi qo'shilgan: iconlarni admin panel orqali
   almashtirish, balans/to'lov sahifalari uchun stillar
   ============================================ */
.icon-img { width: 1.15em; height: 1.15em; object-fit: contain; display: inline-block; vertical-align: -0.15em; }

.role-team-solo { color: var(--warn); }

.role-card-actions { display: flex; gap: 8px; }
.role-card-actions button { flex: 1; }

.btn-danger-outline {
    background: transparent !important;
    border: 1px solid var(--mafia) !important;
    color: var(--mafia) !important;
}

.settings-form textarea, .settings-form select {
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
    padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: inherit;
}

.role-card input[type="text"] {
    background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 8px 10px; font-size: 13px; width: 100%; font-family: inherit;
}

.role-card input[type="file"] { font-size: 12px; color: var(--text-dim); flex: 1; }

.role-card label.role-card { cursor: pointer; }
.role-card input[type="radio"] { width: 20px; height: 20px; accent-color: var(--primary); }

/* ---------- XONAGA QO'SHILISH MODALI ---------- */
.jr-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    background: rgba(6,7,12,.72);
    backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
    padding: 20px;
}
.jr-overlay.open { display: flex; }
.jr-modal {
    position: relative;
    width: 100%; max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    animation: fadeIn .2s ease both;
}
.jr-modal h3 { margin: 0 0 16px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.jr-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; color: var(--text-dim);
    font-size: 22px; line-height: 1; cursor: pointer;
}
.jr-close:hover { color: var(--text); }
.jr-input {
    width: 100%; box-sizing: border-box;
    background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 12px 14px; font-size: 18px; letter-spacing: 1px;
    text-align: center; font-family: inherit; margin-bottom: 14px;
}
.jr-input:focus { outline: none; border-color: var(--primary); }
.jr-modal .btn-primary { width: 100%; }

/* ---------- XONALARNI QIDIRISH / RO'YXATI (Xonaga qo'shilish modali ichida) ---------- */
.jr-modal-wide { max-width: 420px; display: flex; flex-direction: column; max-height: 82vh; }
.rl-search {
    position: relative; flex-shrink: 0; margin-bottom: 14px;
}
.rl-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-dim); font-size: 14px; pointer-events: none;
}
.rl-search-input {
    width: 100%; box-sizing: border-box;
    background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 12px 14px 12px 38px; font-size: 14px;
    font-family: inherit; outline: none; transition: border-color .2s;
}
.rl-search-input:focus { border-color: var(--primary); }
.rl-search-input::placeholder { color: var(--text-dim); }

.rl-list {
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; flex: 1; min-height: 120px; margin: -2px; padding: 2px;
}
.rl-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left; font-family: inherit;
    background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 12px; cursor: pointer; color: var(--text);
    transition: border-color .15s, transform .1s;
    animation: fadeIn .25s ease both;
}
.rl-item:hover { border-color: var(--primary); }
.rl-item:active { transform: scale(.98); }
.rl-thumb {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    background: var(--bg-card); display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--primary); overflow: hidden;
}
.rl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rl-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.rl-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-meta { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.rl-chevron { color: var(--text-dim); font-size: 16px; flex-shrink: 0; }
.rl-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 40px 10px; color: var(--text-dim); text-align: center; font-size: 13px;
}
.rl-empty i { font-size: 26px; opacity: .7; }
.rl-empty p { margin: 0; }

/* ---------- XONA YARATISH MODALI ---------- */
.cr-image-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cr-image-preview {
    width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
    background: var(--bg-card-2); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--text-dim); overflow: hidden;
}
.cr-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.cr-image-actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-image-btn { padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
.cr-image-hint { font-size: 11px; color: var(--text-dim); }
.cr-field-label { display: block; font-size: 12.5px; color: var(--text-dim); margin: 0 0 6px; font-weight: 600; }
.cr-name-input { text-align: left; font-size: 14px; letter-spacing: normal; }
.cr-range {
    width: 100%; margin-bottom: 18px; accent-color: var(--primary);
    height: 4px; cursor: pointer;
}
#crMaxPlayersVal { color: var(--primary); font-weight: 700; }

.cr-roles-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cr-roles-toggle-all {
    background: none; border: none; color: var(--primary); font-size: 12px;
    font-weight: 600; cursor: pointer; padding: 2px 4px;
}
.cr-roles-box {
    max-height: 220px; overflow-y: auto; background: var(--bg-card-2);
    border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
    margin-bottom: 16px;
}
.cr-roles-group + .cr-roles-group { margin-top: 10px; }
.cr-roles-group-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-dim); font-weight: 700; margin-bottom: 6px;
}
.cr-role-check {
    display: flex; align-items: center; gap: 8px; padding: 6px 2px;
    font-size: 13.5px; cursor: pointer;
}
.cr-role-check input { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
.cr-role-check span:nth-child(2) { flex: 1; }
.cr-role-min { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }

/* ---------- LOBBYDA DO'STLARNI TAKLIF QILISH MODALI ---------- */
.fi-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; background: var(--bg-card-2); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 12px; animation: fadeIn .25s ease both;
}
.fi-thumb {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; position: relative;
    background: var(--bg-card); display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--primary); overflow: hidden;
}
.fi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fi-dot {
    position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
    border-radius: 50%; border: 2px solid var(--bg-card-2); background: var(--text-dim);
}
.fi-dot.online { background: #2ecc71; }
.fi-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fi-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-meta { font-size: 12px; color: var(--text-dim); }
.fi-btn {
    flex-shrink: 0; border: none; border-radius: 9px; padding: 8px 13px;
    font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--primary); color: #fff;
    white-space: nowrap;
}
.fi-btn:disabled { opacity: .6; cursor: default; }
.fi-btn.fi-btn-done { background: var(--bg-card); color: var(--text-dim); border: 1px solid var(--border); }
.invite-share-alt { width: 100%; margin-top: 14px; }

/* ---------- ADMIN: XONALARNI TOZALASH TUGMALARI ---------- */
.admin-room-cleanup { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.admin-room-cleanup .inline-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }

/* ---------- DO'KON: G'ALABA EFFEKTLARI VA CHAT EMOJILARI ---------- */
.effect-equip-btn, .effect-buy-btn, .emoji-buy-btn {
    border: none; border-radius: 8px; padding: 8px; cursor: pointer; font-weight: 600; font-size: 13px;
    background: var(--primary); color: #fff;
}
.effect-equip-btn:disabled { background: rgba(124,92,255,.15); color: var(--primary); cursor: default; }
.effect-buy-btn, .emoji-buy-btn { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }

/* Chatga yozilgan sotib olingan animatsiyali emoji */
.chat-emoji-fx { display: inline-block; font-size: 16px; margin: 0 1px; }
.emoji-fx-fire { color: #ff6a3d; animation: emojiPulse 1s ease-in-out infinite; }
.emoji-fx-crown { color: #ffd75e; animation: emojiPulse 1s ease-in-out infinite; }
.emoji-fx-skull { color: #b06bff; animation: emojiShake .5s ease-in-out infinite; }
.emoji-fx-heart { color: #ff4d5e; animation: emojiPulse .8s ease-in-out infinite; }
@keyframes emojiPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes emojiShake { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* Chatdagi maxsus emoji tanlagich (do'kondan sotib olinganlar) */
.emoji-picker {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px;
    border-top: 1px solid var(--border); background: var(--bg-card-2);
}
.emoji-picker.hidden { display: none; }
.emoji-picker-item {
    border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px;
    padding: 6px 10px; font-size: 17px; cursor: pointer;
}
.emoji-picker-empty { font-size: 12px; color: var(--text-dim); }
#emojiPickerBtn { background: none; border: none; color: var(--text-dim); font-size: 18px; padding: 0 8px; cursor: pointer; }

/* G'alaba ekranida ijro etiladigan (sof kosmetik) zarracha effekti. Ilgari butun
   ekranni 3+ soniya to'sib turadigan zich "yomg'ir" edi (natija/tugmalarni yopib,
   tartibsiz ko'rinar edi) - endi faqat karta ichida, qisqa va siyrak portlash
   sifatida ko'rinadi, natija matni va tugmalarni to'smaydi. */
.win-fx-layer {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2;
}
.win-fx-particle {
    position: absolute; top: -24px; animation-name: winFxFall; animation-timing-function: ease-in;
    animation-fill-mode: forwards; opacity: 0;
}
@keyframes winFxFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: .9; }
    100% { transform: translateY(60%) rotate(220deg); opacity: 0; }
}

/* O'LIM EFFEKTI: o'yinchi o'ldirilganda yoki osilganda (tun yoki kunduzgi
   ovoz berish natijasida) uning ekranida bir necha soniyaga chiqadigan
   to'liq ekran qopqoni - bosh suyagi + qon tomchilari */
.death-overlay {
    position: fixed; inset: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 42%, rgba(124,22,34,.55), rgba(10,10,14,.94) 72%);
    animation: deathFadeIn .35s ease-out; pointer-events: none;
}
.death-overlay.hidden { display: none; }
.death-card { text-align: center; animation: deathPop .5s cubic-bezier(.34,1.56,.64,1); }
.death-skull { width: 132px; height: 152px; filter: drop-shadow(0 0 20px rgba(184,31,48,.65)); }
.death-text {
    margin-top: 10px; font-family: var(--font-display); font-size: 26px; font-weight: 800;
    letter-spacing: 3px; color: var(--mafia); text-shadow: 0 0 18px rgba(224,49,63,.75);
    animation: deathTextShake .35s ease-in-out .25s 2;
}
@keyframes deathFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes deathPop { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes deathTextShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.blood-drip {
    stroke-dasharray: 60; stroke-dashoffset: 60; opacity: 0;
    animation: dripReveal 1.3s ease-in .15s forwards;
}
@keyframes dripReveal {
    0%   { opacity: 0; stroke-dashoffset: 60; }
    12%  { opacity: 1; }
    100% { opacity: 1; stroke-dashoffset: 0; }
}

/* ---------- ADMIN: CHAT MODERATSIYASI ---------- */
.admin-chat-link {
    background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 5px 8px; font-size: 12px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.admin-chat-log { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.admin-chat-row { font-size: 13px; line-height: 1.4; padding: 6px 8px; border-radius: 8px; }
.admin-chat-row.mafia { background: rgba(255,77,94,.08); }
.admin-chat-row.system { color: var(--warn); font-size: 12px; text-align: center; }
.admin-chat-row .ac-time { color: var(--text-dim); font-size: 11px; margin-right: 6px; }
.admin-chat-row .ac-name { font-weight: 700; color: var(--primary); }
.admin-chat-row .ac-channel { font-size: 10px; color: var(--text-dim); margin-left: 6px; }

/* ==========================================================
   STOL FONLARI (xona/o'yin stoli dizaynlari) — do'konda sotib
   olinadi, xona egasi ochgan o'yinning stoli shu fonga o'zgaradi
   ========================================================== */
.table-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.table-shop-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.table-shop-info { text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.table-shop-name { font-weight: 700; font-size: 14px; }

.table-preview {
    width: 100%; height: 92px; border-radius: 50%; position: relative;
    border: 5px solid var(--gold-dim); box-shadow: inset 0 0 20px rgba(0,0,0,.5);
}
.table-preview.table-bg-none {
    background: radial-gradient(ellipse at 50% 40%, #2a262d 0%, #1a171c 60%, #100e12 100%);
    border-color: var(--border);
}

.table-tier-badge {
    font-size: 10px; font-weight: 700; letter-spacing: .6px; padding: 3px 10px;
    border-radius: 20px; text-transform: uppercase;
}
.table-tier-oddiy { background: rgba(255,255,255,.08); color: var(--text-dim); }
.table-tier-noyob { background: rgba(77,201,255,.15); color: var(--town); }
.table-tier-epik { background: rgba(184,31,48,.18); color: var(--mafia); }
.table-tier-afsonaviy { background: rgba(216,165,69,.22); color: var(--gold); }

/* 1. Oddiy - klassik yashil kartastol mato */
.table-preview.table-bg-classic {
    background: radial-gradient(ellipse at 50% 38%, #2d6b43 0%, #184a2c 55%, #0c2a18 100%);
    border-color: #7a5a2f;
}

/* 2. Noyob - Verdigris, patinali yashil-ko'k mato, ingichka oltin chiziq */
.table-preview.table-bg-verdigris {
    background: radial-gradient(ellipse at 50% 35%, #3f8f80 0%, #256158 50%, #123430 100%);
    border-color: #3f7a70;
    box-shadow: inset 0 0 22px rgba(0,0,0,.5), 0 0 18px rgba(63,143,128,.35);
}
.table-preview.table-bg-verdigris::after {
    content: ''; position: absolute; inset: 8px; border: 1px solid rgba(216,165,69,.45); border-radius: 50%;
}

/* 3. Epik - Qizil noir, qora-qizil art-deco */
.table-preview.table-bg-crimson {
    background: radial-gradient(ellipse at 50% 35%, #7c1f2e 0%, #470f18 55%, #1f0509 100%);
    border-color: var(--gold);
    box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 0 20px rgba(184,31,48,.4);
}
.table-preview.table-bg-crimson::after {
    content: ''; position: absolute; inset: 8px; border: 1px solid rgba(216,165,69,.5); border-radius: 50%;
}

/* 4. Afsonaviy - Ivory Society, eng qimmat va eng chiroyli: fil suyagi +
   oltin art-deco naqsh, yumshoq porlash effekti bilan */
.table-preview.table-bg-ivory {
    background:
        repeating-conic-gradient(from 0deg, rgba(216,165,69,.16) 0deg 6deg, transparent 6deg 24deg),
        radial-gradient(ellipse at 50% 32%, rgba(255,247,224,.9) 0%, #e6d6ab 45%, #b89f6c 100%);
    border-color: var(--gold);
    box-shadow: inset 0 0 22px rgba(120,90,30,.35), 0 0 30px rgba(216,165,69,.55);
}
.table-preview.table-bg-ivory::after {
    content: ''; position: absolute; inset: 7px; border: 1.5px solid rgba(120,90,30,.55); border-radius: 50%;
}
.table-preview.table-bg-ivory::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.55), transparent 55%);
}

/* O'yin xonasida stol foni - o'yinchilar joylashgan maydonning orqa foni */
.players-board.table-bg-classic,
.players-board.table-bg-verdigris,
.players-board.table-bg-crimson,
.players-board.table-bg-ivory {
    padding: 20px; border-radius: 24px; position: relative;
}
.players-board.table-bg-classic {
    background: radial-gradient(ellipse at 50% 30%, #245538 0%, #123018 75%, #081a0d 100%);
    border: 1px solid rgba(122,90,47,.5);
}
.players-board.table-bg-verdigris {
    background: radial-gradient(ellipse at 50% 30%, #316f65 0%, #1a423c 75%, #0c2320 100%);
    border: 1px solid rgba(63,143,128,.5);
    box-shadow: 0 0 30px rgba(63,143,128,.12) inset;
}
.players-board.table-bg-crimson {
    background: radial-gradient(ellipse at 50% 30%, #591723 0%, #300a10 75%, #150406 100%);
    border: 1px solid rgba(216,165,69,.4);
    box-shadow: 0 0 30px rgba(184,31,48,.15) inset;
}
.players-board.table-bg-ivory {
    background:
        repeating-conic-gradient(from 0deg, rgba(216,165,69,.08) 0deg 6deg, transparent 6deg 24deg),
        radial-gradient(ellipse at 50% 25%, #3a3226 0%, #221d17 70%, #14110d 100%);
    border: 1px solid rgba(216,165,69,.6);
    box-shadow: 0 0 40px rgba(216,165,69,.18) inset;
}

/* ==========================================================
   DO'STLAR SAHIFASI — qayta dizayn qilingan
   ========================================================== */
.fr-hero {
    background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
    border: 1px solid var(--border); border-radius: 20px; padding: 22px 20px;
    margin-bottom: 18px; position: relative; overflow: hidden;
}
.fr-hero::before {
    content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(216,165,69,.18), transparent 70%); pointer-events: none;
}
.fr-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fr-eyebrow { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 6px; }
.fr-hero-title { font-family: var(--font-display); font-size: 24px; margin: 0; line-height: 1.15; }
.fr-hero-desc { color: var(--text-dim); font-size: 13px; margin: 8px 0 0; max-width: 46ch; line-height: 1.5; }
.fr-hero-icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--bg-card-2);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 17px; text-decoration: none;
}

.fr-search {
    display: flex; align-items: center; gap: 8px; background: var(--bg-card-2);
    border: 1px solid var(--border); border-radius: 14px; padding: 4px 4px 4px 14px; margin-bottom: 18px;
}
.fr-search i { color: var(--text-dim); font-size: 15px; }
.fr-search input { flex: 1; background: transparent; border: none; color: var(--text); padding: 12px 6px; outline: none; font-size: 14px; }
.fr-search-btn {
    background: var(--gold); color: #17130c; border: none; border-radius: 10px;
    width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 15px;
}

.fr-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 10px; }
.fr-section-eyebrow { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 2px; }
.fr-section-count { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; }
.fr-section-new { font-size: 13px; color: var(--town); font-weight: 600; }

.fr-empty-state { text-align: center; padding: 50px 10px 30px; color: var(--text-dim); }
.fr-empty-state i { font-size: 30px; color: var(--text-dim); opacity: .6; display: block; margin-bottom: 12px; }
.fr-empty-state p { font-size: 13px; margin: 0; }