/* ============================================================
   Quiz Game — Premium Glassmorphism + Material 3
   RTL | Vazirmatn | Mobile-first | Production-ready
   ============================================================ */
@font-face{font-family:'Vazirmatn';src:url('/fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/fonts/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --md-primary:#D0BCFF;--md-on-primary:#381E72;--md-primary-container:#4F378B;--md-on-primary-container:#EADDFF;
  --md-secondary:#CCC2DC;--md-on-secondary:#332D41;--md-secondary-container:#4A4458;--md-on-secondary-container:#E8DEF8;
  --md-tertiary:#EFB8C8;--md-on-tertiary:#492532;--md-tertiary-container:#633B48;--md-on-tertiary-container:#FFD8E4;
  --md-surface:#0F0E14;--md-surface-2:#141218;--md-on-surface:#E6E1E5;--md-on-variant:#CAC4D0;--md-outline:#938F99;--md-outline-variant:#49454F;
  --md-error:#F2B8B5;--md-on-error:#601410;--md-error-container:#8C1D18;--md-on-error-container:#F9DEDC;
  --md-success:#A8F5AB;--md-success-container:#00531A;
  --glass-bg:rgba(38,36,48,0.58);--glass-bg-strong:rgba(33,31,38,0.72);--glass-border:rgba(255,255,255,0.10);--glass-highlight:rgba(255,255,255,0.07);--glass-blur:18px;
  --radius-xl:28px;--radius-l:16px;--radius-m:12px;--radius-full:9999px;
  --shadow-soft:0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.22);--shadow-glass:0 8px 32px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--md-outline-variant) transparent}
body{font-family:'Vazirmatn',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--md-surface);color:var(--md-on-surface);line-height:1.6;direction:rtl;overflow-x:hidden;min-height:100vh;position:relative}
body::before,body::after{content:"";position:fixed;inset:auto;pointer-events:none;z-index:-1;filter:blur(60px);opacity:.55}
body::before{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle at 30% 30%, rgba(139,92,246,0.35) 0%, rgba(208,188,255,0.16) 35%, transparent 70%);border-radius:50%}
body::after{width:640px;height:640px;bottom:-180px;left:-120px;background:radial-gradient(circle at 70% 40%, rgba(236,72,153,0.18) 0%, rgba(99,102,241,0.18) 38%, transparent 72%);border-radius:50%}
.hidden{display:none!important}
.muted{color:var(--md-on-variant);font-size:.85rem}
.center{text-align:center}
.ltr{direction:ltr}
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
a{color:var(--md-primary)}
.link-btn{background:none;border:none;color:var(--md-primary);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.req{color:var(--md-error)}

/* Glass Card Base */
.glass{position:relative;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);overflow:hidden}
.glass::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);pointer-events:none}
.card{position:relative;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(1.15);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.15);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:22px;margin-bottom:20px;box-shadow:var(--shadow-glass);transition:transform .18s,box-shadow .18s,border-color .18s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);pointer-events:none}
.card:hover{transform:translateY(-1px);box-shadow:0 12px 36px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.card-head h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.page-head{margin:10px 0 18px}
.page-title{font-size:clamp(1.5rem,3vw,1.85rem);font-weight:800;letter-spacing:-.02em}
.section-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 12px}
.section-label h4{font-size:.95rem;font-weight:700}

/* Topbar Glass */
.topbar{position:sticky;top:0;z-index:40;background:rgba(18,16,24,0.68);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:18px}
.topbar::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:8px 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.22rem;color:var(--md-primary);letter-spacing:-.02em;white-space:nowrap}
.brand-icon{width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(135deg, rgba(139,92,246,0.9), rgba(208,188,255,0.9));color:#1a1033;border-radius:10px;box-shadow:0 4px 14px rgba(139,92,246,0.35);font-size:1.15rem}
.brand-pill{font-size:.60rem;background:rgba(208,188,255,0.14);border:1px solid rgba(208,188,255,0.22);color:var(--md-primary);padding:3px 8px;border-radius:var(--radius-full);font-weight:700;letter-spacing:.06em}
.nav{display:flex;align-items:center;gap:6px}
.nav-link{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid transparent;color:var(--md-on-variant);font:inherit;font-size:.86rem;font-weight:500;padding:8px 14px;border-radius:var(--radius-full);cursor:pointer;transition:.18s;white-space:nowrap}
.nav-link:hover{color:var(--md-on-surface);background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.06)}
.nav-link.is-active{color:var(--md-on-secondary-container);background:rgba(208,188,255,0.14);border-color:rgba(208,188,255,0.18);font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.nav-ic{font-size:1rem}
.user-chip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:4px 6px 4px 12px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,0.10);box-shadow:0 4px 16px rgba(0,0,0,0.22);min-width:0}
.user-chip img{width:36px;height:36px;border-radius:50%;object-fit:cover;outline:2px solid rgba(208,188,255,0.9);box-shadow:0 2px 10px rgba(0,0,0,0.25);flex-shrink:0}
.chip-info{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.chip-name{font-weight:700;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11ch}
.chip-sub{font-size:.62rem;color:var(--md-on-variant)}
.chip-logout{margin-inline-start:4px}

/* Mobile Nav */
.mobile-nav{position:fixed;bottom:12px;left:12px;right:12px;z-index:45;display:none;align-items:center;justify-content:space-around;gap:6px;background:rgba(26,24,34,0.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,0.10);padding:8px;border-radius:22px;box-shadow:0 12px 32px rgba(0,0,0,0.42);max-width:420px;margin:0 auto}
.mnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:none;color:var(--md-on-variant);font:inherit;font-size:.68rem;font-weight:600;padding:8px 4px;border-radius:14px;cursor:pointer;transition:.18s}
.mnav-item span:first-child{font-size:1.28rem;line-height:1}
.mnav-item.is-active{color:var(--md-on-secondary-container);background:rgba(208,188,255,0.16);border:1px solid rgba(208,188,255,0.14)}

/* Buttons Glass */
.btn{font:inherit;font-size:.88rem;font-weight:700;letter-spacing:.01em;height:42px;padding:0 22px;border:1px solid transparent;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .12s,box-shadow .18s,background .18s,border-color .18s,opacity .18s;user-select:none;white-space:nowrap;outline:none;position:relative;overflow:hidden;line-height:1}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:linear-gradient(135deg, #8b5cf6 0%, #a78bfa 52%, #d0bcff 100%);color:#1a1033;border-color:rgba(255,255,255,0.18);box-shadow:0 6px 18px rgba(139,92,246,0.35), inset 0 1px 0 rgba(255,255,255,0.55);font-weight:800}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px rgba(139,92,246,0.42), inset 0 1px 0 rgba(255,255,255,0.6)}
.btn-outline{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);color:var(--md-primary);backdrop-filter:blur(8px)}
.btn-outline:hover{background:rgba(208,188,255,0.10);border-color:rgba(208,188,255,0.28);color:var(--md-primary)}
.btn-ghost{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.08);color:var(--md-on-surface);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,0.12)}
.btn-danger{background:linear-gradient(135deg, #7f1d1d, #dc2626);color:#fff;border-color:rgba(255,255,255,0.14);box-shadow:0 6px 16px rgba(220,38,38,0.32)}
.btn-block{width:100%}
.btn-lg{height:52px;font-size:.98rem;padding:0 28px}
.btn-sm{height:34px;padding:0 14px;font-size:.78rem}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.06);color:var(--md-on-variant);font-size:1rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s;backdrop-filter:blur(8px)}
.icon-btn:hover{background:rgba(255,255,255,0.10);color:var(--md-on-surface)}

/* Forms Glass */
.field{margin-bottom:14px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--md-on-variant);margin-bottom:6px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .field-icon{position:absolute;inset-inline-start:12px;pointer-events:none;opacity:.7}
.form input,.form select,.inline-form input,.inline-form select{width:100%;height:48px;padding:0 16px;font:inherit;font-size:.92rem;background:rgba(255,255,255,0.06);color:var(--md-on-surface);border:1px solid rgba(255,255,255,0.12);border-radius:12px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s;backdrop-filter:blur(8px)}
.form input::placeholder{color:rgba(230,225,229,0.55)}
.form input:focus,.form select:focus,.inline-form input:focus{border-color:rgba(208,188,255,0.45);box-shadow:0 0 0 3px rgba(208,188,255,0.14), inset 0 1px 0 rgba(255,255,255,0.06);background:rgba(255,255,255,0.08)}
.input-wrap input{padding-inline-start:40px}
.form select{padding-inline-end:28px}
.form select,.inline-form select{color-scheme:dark;background-color:rgba(255,255,255,0.06);color:var(--md-on-surface)}
.form select option,.inline-form select option{background-color:#141218;color:#E6E1E5}
.form select option:checked,.inline-form select option:checked{background-color:#4F378B;color:#EADDFF}
.form select:focus,.inline-form select:focus{color:var(--md-on-surface)}
/* Ensure dropdown remains readable on mobile native pickers */
@media (max-width:768px){
  .form select,.inline-form select{color-scheme:dark}
  .form select option,.inline-form select option{background-color:#141218;color:#E6E1E5}
}
.form-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.form-row.four>label{flex:1;min-width:150px}
.form-msg{color:var(--md-error);font-size:.78rem;min-height:1.2em;margin-top:6px}
.inline-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.inline-form input{flex:1;min-width:160px}
.inline-form select{min-width:160px;width:auto}
input[type=range]{width:100%;accent-color:#a78bfa;height:20px}
.range-labels{display:flex;justify-content:space-between;font-size:.70rem;color:var(--md-on-variant);margin-top:4px}

/* Chips & Category Grid Glass */
.chip-cloud{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.78rem;font-weight:700;padding:7px 14px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:var(--md-on-variant);line-height:1;backdrop-filter:blur(8px);transition:.18s}
.chip.active{background:rgba(208,188,255,0.18);color:var(--md-primary);border-color:rgba(208,188,255,0.26);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:10px}
.category-grid.small{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
.cat-card{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);cursor:pointer;transition:border-color .18s,background .18s,transform .12s,box-shadow .18s;user-select:none;min-height:58px;overflow:hidden}
.cat-card::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent)}
.cat-card:hover{border-color:rgba(208,188,255,0.20);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,0.22);background:rgba(255,255,255,0.07)}
.cat-card.selected{border-color:rgba(208,188,255,0.35);background:linear-gradient(135deg, rgba(139,92,246,0.18), rgba(208,188,255,0.18));box-shadow:0 8px 20px rgba(139,92,246,0.16), inset 0 1px 0 rgba(255,255,255,0.08);color:var(--md-on-surface)}
.cat-icon{font-size:1.35rem;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);flex-shrink:0}
.cat-card.selected .cat-icon{background:rgba(208,188,255,0.18);border-color:rgba(208,188,255,0.18)}
.cat-name{font-weight:700;font-size:.88rem;line-height:1.2;flex:1}
.cat-count{font-size:.68rem;color:var(--md-on-variant);background:rgba(255,255,255,0.06);padding:3px 7px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,0.06)}
.cat-card.selected .cat-count{background:rgba(0,0,0,0.14);color:var(--md-on-surface)}
.cat-check{position:absolute;top:8px;inset-inline-end:8px;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,0.14);display:grid;place-items:center;font-size:.70rem;background:rgba(255,255,255,0.06);transition:.18s}
.cat-card.selected .cat-check{background:var(--md-primary);border-color:var(--md-primary);color:var(--md-on-primary)}
.lobby-categories{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px;margin:16px 0;backdrop-filter:blur(12px)}
.cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cat-foot{margin-top:10px;font-size:.78rem}
.cat-readonly{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;background:rgba(255,255,255,0.04);border:1px dashed rgba(255,255,255,0.10);border-radius:12px;margin:12px 0}

/* Tabs Glass */
.tabs{display:flex;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-full);padding:4px;gap:4px;backdrop-filter:blur(10px);margin-bottom:18px;width:fit-content;max-width:100%}
.admin-tabs{width:100%;max-width:520px}
.tab{flex:1;border:none;background:transparent;color:var(--md-on-variant);font:inherit;font-size:.86rem;font-weight:600;height:36px;padding:0 18px;border-radius:var(--radius-full);cursor:pointer;transition:.18s;white-space:nowrap}
.tab.active{background:rgba(208,188,255,0.18);color:var(--md-primary);border:1px solid rgba(208,188,255,0.20);font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}

/* Snackbars */
.toasts{position:fixed;bottom:16px;inset-inline-start:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:420px}
@media(min-width:640px){.toasts{left:auto;right:24px;bottom:24px}}
.toast{pointer-events:auto;background:rgba(28,26,36,0.84);backdrop-filter:blur(16px);color:var(--md-on-surface);border:1px solid rgba(255,255,255,0.10);border-inline-start:3px solid var(--md-primary);padding:13px 16px;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,0.38);font-size:.88rem;font-weight:600;animation:toastIn .28s cubic-bezier(.2,0,0,1)}
.toast.success{border-inline-start-color:var(--md-success)}
.toast.error{border-inline-start-color:var(--md-error)}
@keyframes toastIn{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}

/* Alerts */
.alert{display:flex;align-items:center;gap:10px;background:rgba(208,188,255,0.10);border:1px solid rgba(208,188,255,0.16);color:var(--md-on-surface);border-radius:12px;padding:12px 16px;margin:12px 0;flex-wrap:wrap;backdrop-filter:blur(10px)}
.alert-bar{flex:1 1 100%;height:4px;background:rgba(255,255,255,0.10);border-radius:var(--radius-full);overflow:hidden;margin-top:8px}
.alert-bar div{height:100%;background:linear-gradient(90deg, #8b5cf6, #d0bcff);width:100%;transition:width .25s linear}
.invite-banner{background:rgba(168,245,171,0.10);border:1px solid rgba(168,245,171,0.18);color:var(--md-success);border-radius:12px;padding:12px 16px;font-size:.86rem;margin-bottom:14px;text-align:center;font-weight:600;backdrop-filter:blur(8px)}

/* Auth Glass Premium */
.auth-wrap{display:flex;gap:32px;align-items:center;justify-content:center;min-height:calc(100vh - 120px);padding:36px 0;flex-wrap:wrap}
.auth-hero{flex:1.2;min-width:300px;max-width:560px;position:relative}
.auth-hero::before{content:"";position:absolute;inset:-40px -40px -40px -40px;background:radial-gradient(circle at 30% 20%, rgba(139,92,246,0.14), transparent 55%);filter:blur(18px);z-index:-1;pointer-events:none}
.auth-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);color:var(--md-on-variant);font-size:.76rem;padding:7px 12px;border-radius:var(--radius-full);margin-bottom:14px;backdrop-filter:blur(8px)}
.auth-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;line-height:1.12;margin-bottom:14px;letter-spacing:-.02em}
.auth-hero h1 .grad{background:linear-gradient(90deg, #d0bcff 0%, #f0abfc 55%, #fda4af 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{color:var(--md-on-variant);max-width:560px;font-size:1rem;line-height:1.85}
.hero-points{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.hero-points li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:12px 14px;backdrop-filter:blur(10px)}
.point-icon{font-size:1.2rem;width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);border-radius:12px;flex-shrink:0}
.hero-points li div{display:flex;flex-direction:column;line-height:1.3}
.hero-points li b{font-size:.88rem}
.hero-points li span{font-size:.78rem;color:var(--md-on-variant)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.hero-stats div{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px;text-align:center;backdrop-filter:blur(10px)}
.hero-stats b{display:block;font-size:1.22rem;color:var(--md-primary)}
.hero-stats span{font-size:.70rem;color:var(--md-on-variant)}
.auth-card{flex:1;min-width:340px;max-width:460px;background:rgba(26,24,34,0.62);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);border:1px solid rgba(255,255,255,0.12);border-radius:26px;padding:26px;box-shadow:0 24px 64px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)}
.auth-foot{font-size:.82rem;color:var(--md-on-variant);text-align:center;margin-top:12px}
.pass-toggle{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--md-on-variant);transition:.18s}
.pass-toggle:hover{background:rgba(255,255,255,0.10);color:var(--md-on-surface)}

/* Home Glass */
.home-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:16px;margin-bottom:20px}
.profile-top{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.avatar-picker{position:relative;width:76px;height:76px;cursor:pointer;flex-shrink:0}
.avatar-picker img{width:76px;height:76px;border-radius:50%;object-fit:cover;outline:2px solid rgba(208,188,255,0.9);box-shadow:0 4px 18px rgba(0,0,0,0.28)}
.avatar-edit{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.62rem;background:rgba(0,0,0,0.68);backdrop-filter:blur(4px);color:#fff;border-radius:0 0 38px 38px;padding:4px 0;font-weight:700}
.stats-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.stats-mini div{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;text-align:center;padding:10px 6px;backdrop-filter:blur(8px)}
.stats-mini b{display:block;font-size:1.15rem;color:var(--md-primary)}
.stats-mini span{font-size:.70rem;color:var(--md-on-variant)}
.actions-head h3{font-size:1rem}
.action-hint{font-size:.76rem;color:var(--md-on-variant);background:rgba(255,255,255,0.04);border:1px dashed rgba(255,255,255,0.10);border-radius:10px;padding:8px 10px;text-align:center;margin-top:6px}
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:14px}
.room-item{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px;transition:.18s;backdrop-filter:blur(10px);position:relative;overflow:hidden}
.room-item::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent)}
.room-item:hover{border-color:rgba(208,188,255,0.20);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,0.24);background:rgba(255,255,255,0.07)}
.room-item .r-info{flex:1;min-width:0}
.room-item .r-info b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-item .r-info span{font-size:.78rem;color:var(--md-on-variant)}
.r-count{font-size:.78rem;font-weight:800;background:rgba(208,188,255,0.14);border:1px solid rgba(208,188,255,0.18);color:var(--md-primary);border-radius:var(--radius-full);padding:5px 12px;white-space:nowrap}
.r-count.full{background:rgba(242,184,181,0.14);border-color:rgba(242,184,181,0.18);color:var(--md-error)}

/* Lobby Glass */
.lobby-card{overflow:hidden}
.lobby-share-grid{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px;margin:16px 0;backdrop-filter:blur(10px)}
.invite-box{flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,0.06);border:1px dashed rgba(255,255,255,0.12);padding:14px 16px;border-radius:12px;backdrop-filter:blur(8px)}
.invite-label{font-size:.78rem;font-weight:800;opacity:.9}
.invite-box code{background:rgba(0,0,0,0.28);border:1px solid rgba(255,255,255,0.08);color:var(--md-primary);padding:8px 12px;border-radius:10px;direction:ltr;word-break:break-all;font-weight:700;font-family:ui-monospace,monospace;font-size:.82rem}
.qr-container{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(255,255,255,0.05);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.08);text-align:center;min-width:180px;backdrop-filter:blur(10px)}
.qr-box{width:148px;height:148px;display:grid;place-items:center;background:#fff;border-radius:10px;padding:8px;box-shadow:0 4px 18px rgba(0,0,0,0.22)}
#qrCanvas{width:132px!important;height:132px!important}
#qrImage{width:132px;height:132px;object-fit:contain;background:#fff;padding:6px;border-radius:8px}
.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:12px;margin:12px 0}
.player-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:14px 10px;text-align:center;position:relative;transition:.18s;min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;backdrop-filter:blur(10px);overflow:hidden}
.player-card::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent)}
.player-card.me{border-color:rgba(208,188,255,0.28);background:rgba(208,188,255,0.08);box-shadow:0 8px 20px rgba(139,92,246,0.12)}
.player-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,0.22)}
.host-badge{position:absolute;top:8px;inset-inline-end:8px;font-size:.62rem;background:linear-gradient(135deg, #f59e0b, #fbbf24);color:#1f1300;border-radius:var(--radius-full);padding:3px 8px;font-weight:800;box-shadow:0 2px 8px rgba(245,158,11,0.35)}
.ready-badge{position:absolute;bottom:8px;inset-inline-start:50%;transform:translateX(-50%);font-size:.68rem;padding:3px 10px;border-radius:var(--radius-full);font-weight:800;border:1px solid transparent;white-space:nowrap}
.ready-badge.ready{background:rgba(168,245,171,0.14);border-color:rgba(168,245,171,0.18);color:var(--md-success)}
.ready-badge.notready{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.08);color:var(--md-on-variant)}
.player-card img{width:54px;height:54px;border-radius:50%;object-fit:cover;outline:2px solid rgba(208,188,255,0.9);box-shadow:0 3px 14px rgba(0,0,0,0.24);background:rgba(255,255,255,0.06)}
.player-card b{font-size:.88rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-status{font-size:.72rem;color:var(--md-on-variant)}
.lobby-actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}

/* Game Glass */
.game-sticky{position:sticky;top:66px;z-index:30;background:rgba(22,20,30,0.62);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,0.10);border-radius:16px;padding:12px 14px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,0.28)}
.game-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.q-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:200px}
.badge{background:rgba(208,188,255,0.14);border:1px solid rgba(208,188,255,0.18);color:var(--md-primary);border-radius:var(--radius-full);padding:6px 14px;font-size:.80rem;font-weight:800;white-space:nowrap;backdrop-filter:blur(8px)}
.progress-pill{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:var(--md-on-variant);border-radius:var(--radius-full);padding:6px 12px;font-size:.78rem;font-weight:600}
.timer-wrap{flex:0 0 300px;min-width:220px;max-width:100%}
.timer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.timer-label{font-size:.72rem;color:var(--md-on-variant);font-weight:600}
.timer-num{font-size:1.38rem;font-weight:800;color:var(--md-primary);min-width:2ch;text-align:end;font-variant-numeric:tabular-nums}
.timer-num.danger{color:var(--md-error);animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
.timer-bar{height:9px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-full);overflow:hidden}
#timerFill{height:100%;width:100%;background:linear-gradient(90deg, #8b5cf6, #d0bcff);border-radius:var(--radius-full);transition:width .25s linear,background-color .3s}
.question-card{padding:22px}
.q-index{font-size:.70rem;font-weight:800;letter-spacing:.08em;color:var(--md-primary);text-transform:uppercase;margin-bottom:6px}
.q-text{font-size:clamp(1.06rem,2.5vw,1.36rem);font-weight:700;line-height:1.6;margin-bottom:18px}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{font:inherit;font-size:.92rem;font-weight:600;text-align:start;color:var(--md-on-surface);cursor:pointer;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:16px;padding:14px 16px;min-height:58px;display:flex;align-items:center;gap:12px;transition:border-color .18s,background .18s,transform .12s,box-shadow .18s;position:relative;line-height:1.4;word-break:break-word;backdrop-filter:blur(10px)}
.opt:hover:not(:disabled):not(.correct):not(.wrong){border-color:rgba(208,188,255,0.28);background:rgba(255,255,255,0.07);transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,0.18)}
.opt:active:not(:disabled){transform:scale(.98)}
.opt:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}
.opt.picked{border-color:rgba(208,188,255,0.45);background:linear-gradient(135deg, rgba(139,92,246,0.18), rgba(208,188,255,0.16));color:var(--md-on-surface);font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.opt.correct{border-color:rgba(168,245,171,0.35);background:linear-gradient(135deg, rgba(0,83,26,0.35), rgba(168,245,171,0.16));color:var(--md-on-surface);font-weight:800;box-shadow:0 8px 18px rgba(16,122,20,0.14)}
.opt.wrong{border-color:rgba(242,184,181,0.35);background:linear-gradient(135deg, rgba(140,29,24,0.32), rgba(242,184,181,0.12));color:var(--md-on-surface)}
.opt-key{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);display:grid;place-items:center;font-size:.82rem;font-weight:800;flex-shrink:0}
.opt.picked .opt-key,.opt.correct .opt-key,.opt.wrong .opt-key{background:rgba(255,255,255,0.10);border-color:transparent}
.reveal-msg{margin-top:16px;padding:13px 16px;border-radius:12px;text-align:center;font-size:.90rem;font-weight:700;background:rgba(168,245,171,0.10);border:1px solid rgba(168,245,171,0.18);color:var(--md-success);backdrop-filter:blur(8px)}
.reveal-msg.bad{background:rgba(242,184,181,0.10);border-color:rgba(242,184,181,0.18);color:var(--md-error)}
.score-list{display:flex;flex-direction:column;gap:8px}
.score-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 14px;backdrop-filter:blur(8px);transition:.18s}
.score-row.eliminated{opacity:.48;filter:grayscale(.22)}
.score-row img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,0.10)}
.s-name{flex:1;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-score{font-weight:800;color:var(--md-primary)}
.lose-tag,.win-tag{font-size:.70rem;font-weight:800;padding:4px 9px;border-radius:var(--radius-full);white-space:nowrap;border:1px solid transparent}
.lose-tag{background:rgba(242,184,181,0.12);border-color:rgba(242,184,181,0.16);color:var(--md-error)}
.win-tag{background:rgba(168,245,171,0.12);border-color:rgba(168,245,171,0.16);color:var(--md-success)}

/* Countdown Glass */
.countdown-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(8,8,12,0.56);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);padding:20px}
.countdown-content{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:420px;width:100%;background:rgba(28,26,36,0.72);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,0.12);border-radius:26px;padding:28px 24px;box-shadow:0 24px 64px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);animation:dlgIn .32s cubic-bezier(.2,0,0,1);position:relative;overflow:hidden}
.countdown-content::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent)}
.countdown-badge{background:rgba(208,188,255,0.14);border:1px solid rgba(208,188,255,0.18);color:var(--md-primary);font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:6px 14px;border-radius:var(--radius-full)}
.countdown-ring{position:relative;width:148px;height:148px;display:grid;place-items:center;margin:6px 0}
.countdown-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.countdown-bg{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:8}
.countdown-fg{fill:none;stroke:var(--md-primary);stroke-width:8;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:0;transition:stroke-dashoffset .9s linear,stroke .3s}
.countdown-number{font-size:3.2rem;font-weight:800;color:var(--md-primary);font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 2px 12px rgba(139,92,246,0.35)}
.countdown-label{font-size:1.06rem;font-weight:700}
.countdown-sub{font-size:.82rem;color:var(--md-on-variant);min-height:1.2em}
.countdown-dots{display:flex;gap:6px}
.countdown-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.22);animation:dotPulse 1s infinite}
.countdown-dots span:nth-child(2){animation-delay:.2s}
.countdown-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotPulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
.countdown-overlay.hidden{display:none}

/* Over */
.over-card{text-align:center;padding:32px 20px}
.over-icon{font-size:2.7rem;margin-bottom:6px;filter:drop-shadow(0 4px 14px rgba(0,0,0,0.3))}
.over-sub{color:var(--md-on-variant);margin:8px 0 20px;font-size:.95rem}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.pod{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:16px 16px 0 0;padding:16px 18px;min-width:130px;flex:1;max-width:180px;backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.pod::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent)}
.pod img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.10)}
.medal{font-size:1.6rem}
.p-score{color:var(--md-primary);font-weight:800}
.pod.r1{padding-bottom:48px;background:rgba(255,255,255,0.07);transform:scale(1.04)}
.pod.r2{padding-bottom:28px}
.pod.r3{padding-bottom:16px}
.over-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Dashboard Glass */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat-cards .sc{position:relative;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px;text-align:center;backdrop-filter:blur(10px);transition:.18s;overflow:hidden}
.stat-cards .sc::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent)}
.stat-cards .sc:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,0.22)}
.stat-cards b{display:block;font-size:1.62rem;color:var(--md-primary);font-weight:800}
.stat-cards span{color:var(--md-on-variant);font-size:.76rem}
.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);backdrop-filter:blur(8px)}
.tbl{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px}
.tbl th{color:var(--md-on-variant);font-weight:700;text-align:start;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.08);white-space:nowrap;background:rgba(255,255,255,0.04)}
.tbl td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.06);vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,0.03)}
.tbl tr:last-child td{border-bottom:none}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-bottom:1px solid rgba(255,255,255,0.06)}
.lb-row:last-child{border-bottom:none}
.lb-row .rank{width:32px;text-align:center;font-weight:800;color:#fbbf24;font-size:1rem}
.lb-row img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,0.08)}
.lb-name{flex:1;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-stat{font-size:.76rem;color:var(--md-on-variant);white-space:nowrap}

/* Dialog Glass */
.dlg{position:fixed;inset:0;margin:auto;background:rgba(28,26,36,0.78);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);color:var(--md-on-surface);border:1px solid rgba(255,255,255,0.12);border-radius:26px;padding:0;width:min(92vw,560px);max-height:calc(100vh - 24px);overflow:auto;box-shadow:0 24px 64px rgba(0,0,0,0.45)}
.dlg[open]{animation:dlgIn .28s cubic-bezier(.2,0,0,1)}
@keyframes dlgIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.dlg::backdrop{background:rgba(4,4,10,0.55);backdrop-filter:blur(8px)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0 20px;position:sticky;top:0;background:rgba(28,26,36,0.86);backdrop-filter:blur(12px);z-index:1;border-bottom:1px solid rgba(255,255,255,0.06)}
.dlg-head h3{font-size:1.08rem;font-weight:800}
.dlg-body{padding:16px 20px}
.dlg-divider{height:1px;background:rgba(255,255,255,0.08);margin:16px 0}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;padding:0 20px 20px 20px;position:sticky;bottom:0;background:rgba(28,26,36,0.86);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,0.06);margin-top:8px;padding-top:14px}

/* Chat Glass */
.chat-wrap{padding:16px}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.chat-head h3{font-size:.95rem;display:flex;align-items:center;gap:8px;font-weight:800}
.chat-hint{font-size:.72rem}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:rgba(255,255,255,0.18);flex-shrink:0;box-shadow:0 0 0 0 rgba(168,245,171,0)}
.status-dot.on{background:var(--md-success);box-shadow:0 0 10px rgba(168,245,171,0.45)}
.status-dot.off{background:var(--md-error);box-shadow:0 0 10px rgba(242,184,181,0.35)}
.status-label{font-size:.72rem;color:var(--md-on-variant)}
.chat-messages{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto;padding:12px;background:rgba(0,0,0,0.18);border-radius:16px;border:1px solid rgba(255,255,255,0.06);scrollbar-width:thin;backdrop-filter:blur(8px)}
#gameChatSlot .chat-messages{max-height:200px}
.chat-row{display:flex;align-items:flex-end;gap:8px;max-width:90%}
.chat-row img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,0.08)}
.chat-bubble{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:12px 12px 12px 4px;padding:8px 12px 6px;max-width:100%;backdrop-filter:blur(8px)}
.chat-bubble b{display:block;font-size:.72rem;color:var(--md-primary);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row.mine .chat-bubble b{color:var(--md-on-primary-container)}
.chat-bubble span{font-size:.86rem;word-break:break-word;white-space:pre-wrap}
.chat-bubble i{display:block;font-style:normal;font-size:.62rem;color:var(--md-on-variant);text-align:start;margin-top:4px}
.chat-row.mine{flex-direction:row-reverse;align-self:flex-end}
.chat-row.mine .chat-bubble{background:rgba(208,188,255,0.16);border-color:rgba(208,188,255,0.16);color:var(--md-on-surface);border-radius:12px 12px 4px 12px}
.chat-row.mine .chat-bubble i{text-align:end;opacity:.75}
.chat-sys{text-align:center;font-size:.72rem;color:var(--md-on-variant);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-full);padding:5px 12px;align-self:center;max-width:90%}
.chat-form{display:flex;gap:8px;margin-top:12px}
.chat-form input{flex:1;height:46px;padding:0 16px;font:inherit;font-size:.88rem;background:rgba(255,255,255,0.06);color:var(--md-on-surface);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-full);outline:none;transition:.18s;backdrop-filter:blur(8px)}
.chat-form input:focus{border-color:rgba(208,188,255,0.35);box-shadow:0 0 0 3px rgba(208,188,255,0.12)}

/* Admin Layout Glass + Sidebar */
.admin-layout{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
.admin-sidebar{position:sticky;top:84px;background:rgba(26,24,34,0.62);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,0.10);border-radius:18px;padding:14px;box-shadow:0 12px 32px rgba(0,0,0,0.28)}
.admin-sidebar-head{display:flex;align-items:center;gap:10px;padding:6px 6px 12px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:12px}
.admin-sidebar-head b{font-size:.95rem}
.admin-nav{display:flex;flex-direction:column;gap:6px}
.admin-nav .tab{justify-content:flex-start;height:44px;border-radius:12px;padding:0 14px;gap:10px;width:100%;text-align:start}
.admin-nav .tab.active{background:rgba(208,188,255,0.14);border-color:rgba(208,188,255,0.18)}
.admin-main{min-width:0}
.admin-topbar{display:none;align-items:center;gap:10px;margin-bottom:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 12px;backdrop-filter:blur(10px)}
.admin-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);z-index:38;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}
.admin-drawer-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.admin-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.json-import{border:1px dashed rgba(208,188,255,0.22);background:rgba(208,188,255,0.06);border-radius:12px;padding:14px;margin-top:12px}
.json-textarea{width:100%;min-height:180px;font-family:ui-monospace,monospace;font-size:.82rem;background:rgba(0,0,0,0.24);color:var(--md-on-surface);border:1px solid rgba(255,255,255,0.10);border-radius:10px;padding:12px;resize:vertical;direction:ltr}
.json-example{font-size:.76rem;background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:12px;overflow:auto;max-height:220px;direction:ltr;text-align:left}
.empty-state{text-align:center;padding:32px 16px;color:var(--md-on-variant)}
.empty-state .empty-icon{font-size:2.2rem;margin-bottom:8px;opacity:.9}
.skeleton{height:14px;border-radius:8px;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Global spacing consistency & overflow prevention */
.admin-main, .dash-grid, .card, .table-wrap, .form, .inline-form{max-width:100%;min-width:0;box-sizing:border-box}
.actions-card{display:flex;flex-direction:column;gap:10px}
.actions-card .btn-block{width:100%}
.actions-card .btn-block + .btn-block{margin-top:0}
.card-head, .admin-topbar, .section-label, .game-head, .dlg-head, .dlg-actions, .over-actions, .lobby-head, .cat-head, .chat-head, .invite-box > div, .json-import > div, .form-row, .inline-form, .chart-controls{ gap:10px }
.btn-group, .dlg-actions, .over-actions, .admin-main .form-row, .inline-form, .chat-form, .lobby-actions, .form-row.four{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.dlg-actions .btn, .over-actions .btn, .inline-form .btn, .chat-form .btn{ flex-shrink:0 }
.table-wrap + .admin-card-grid, .table-wrap + #adminRoomsCards, .table-wrap + #adminCatCards, .table-wrap + #adminQCards{ margin-top:12px }
.stat-cards .sc, .lb-row, .score-row, .player-card, .room-item, .cat-card{ min-width:0; overflow-wrap:break-word; word-break:break-word }
html{scrollbar-gutter:stable}
body{min-width:0}
.container, .admin-main, .dash-grid, .admin-layout, .home-grid, .stat-cards, .table-wrap{ min-width:0 }
canvas, .chart, .qr-box, .category-grid{max-width:100%}
.tbl{max-width:100%}
.tbl th, .tbl td{overflow-wrap:break-word;word-break:break-word}
.table-wrap{scrollbar-width:thin}
.table-wrap::-webkit-scrollbar{height:6px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:4px}

/* Footer */
.footer{text-align:center;padding:28px 0 40px}
.footer-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.80rem;color:var(--md-on-variant)}
@media(max-width:768px){.footer-in{justify-content:center;text-align:center}}

/* Responsive */
@media(max-width:1024px){
  .home-grid{grid-template-columns:1fr 1fr}
  .home-grid .category-preview-card{grid-column:1/-1}
  .dash-grid{grid-template-columns:1fr}
  .admin-layout{grid-template-columns:220px 1fr}
}
@media(max-width:860px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:fixed;inset:0 auto 0 0;width:280px;max-width:82vw;z-index:39;transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,0,0,1),visibility .28s;visibility:hidden;pointer-events:none;border-radius:0 18px 18px 0;top:0;height:100vh;height:100dvh;overflow:auto;will-change:transform}
  .admin-sidebar.open{transform:translateX(0);visibility:visible;pointer-events:auto}
  .admin-topbar{display:flex}
}
@media(max-width:768px){
  .container{padding:0 14px}
  .card{padding:18px;border-radius:18px;overflow:visible}
  .card:has(.table-wrap){overflow:hidden}
  .auth-wrap{padding:20px 0}
  .auth-hero{text-align:center}
  .auth-hero h1{font-size:clamp(1.7rem,6vw,2.3rem)}
  .hero-desc{margin:0 auto}
  .auth-card{max-width:100%;width:100%;padding:20px}
  .home-grid{grid-template-columns:1fr}
  .options{grid-template-columns:1fr}
  .stats-mini{grid-template-columns:repeat(3,1fr)}
  .players-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .rooms-grid{grid-template-columns:1fr}
  .game-sticky{top:12px}
  .timer-wrap{flex:1 1 100%}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .category-grid.small{grid-template-columns:repeat(2,1fr)}
  .form-row{flex-direction:column;align-items:stretch;gap:12px}
  .form-row.four>label{min-width:0}
  .inline-form{flex-direction:column;align-items:stretch;gap:10px}
  .inline-form input,.inline-form select{width:100%;min-width:0}
  .form input,.form select{max-width:100%}
  .table-wrap{border-radius:10px;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;display:block}
  .tbl{font-size:.82rem;min-width:520px;width:max-content;min-width:100%}
  .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .podium{gap:8px}
  .pod{min-width:110px;max-width:140px}
  .lobby-share-grid{flex-direction:column;align-items:stretch}
  .qr-container{width:100%}
  .mobile-nav{display:flex}
  body{padding-bottom:84px}
  .topbar{margin-bottom:12px}
  #topbar .nav{display:none}
  .footer{padding-bottom:88px}
  .admin-card-grid{grid-template-columns:1fr}
  /* Dashboard mobile: stack and prevent overflow */
  .dash-grid{gap:14px}
  .stat-cards{gap:10px}
  .stat-cards .sc{padding:14px 10px}
  #dashStats, #adminStats{gap:10px}
  .lb-row{flex-wrap:wrap;gap:8px}
  .lb-row .lb-stat{flex-basis:100%;text-align:start;padding-inline-start:44px}
  /* Button spacing on mobile: ensure gaps when wrapping */
  .dlg-actions, .over-actions, .admin-main .form-row, .inline-form, .lobby-share-grid, .json-import, .admin-card-grid{ gap:10px }
  .btn + .btn{ margin:0 }
  .invite-box > div, .form-row > label, .inline-form > *{ min-width:0 }
  /* Ensure inputs and selects never overflow */
  .form-row label, .field label{ min-width:0; width:100% }
}
@media(max-width:480px){
  .container{padding:0 12px}
  .card{padding:14px}
  .brand{font-size:1.04rem}
  .brand-pill{display:none}
  .user-chip{padding:3px 6px;gap:6px}
  .user-chip img{width:32px;height:32px}
  .chip-name{max-width:6ch;font-size:.82rem}
  .chip-sub{display:none}
  .auth-card{padding:16px}
  .profile-top{flex-direction:column;text-align:center}
  .players-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .player-card{min-height:112px}
  .stat-cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat-cards .sc b{font-size:1.35rem}
  .tbl{font-size:.78rem;min-width:480px}
  .table-wrap{margin:0 -4px;width:calc(100% + 8px)}
  .dash-grid{gap:12px}
  .lb-row{padding:10px 6px}
  .form-row{gap:10px}
  .inline-form{gap:10px}
  .countdown-ring{width:132px;height:132px}
  .countdown-number{font-size:2.8rem}
  .dlg{width:94vw;border-radius:18px}
  .dlg-body{padding:14px 16px}
  .dlg-actions{padding:0 16px 16px;gap:8px;flex-wrap:wrap}
  .dlg-actions .btn{flex:1 1 auto;min-width:120px}
  .btn-lg{height:48px;font-size:.92rem}
  .btn{padding:0 16px;font-size:.84rem}
  .btn-sm{padding:0 12px}
  .over-actions{flex-direction:column}
  .over-actions .btn{width:100%}
  .opt{font-size:.88rem}
  .cat-card{padding:10px 12px;min-height:52px}
  .toast{font-size:.82rem}
  .json-import{padding:12px}
  .json-import > div{flex-direction:column}
  .json-import > div .btn{width:100%}
}
:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}
::selection{background:var(--md-primary);color:var(--md-on-primary)}
html,body{max-width:100%;overflow-x:hidden}
.view{animation:viewIn .22s cubic-bezier(.2,0,0,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media(pointer:coarse){.btn{min-height:44px}.opt{min-height:56px}.nav-link,.mnav-item{min-height:44px}}
/* Loading shimmer for rooms */
.rooms-grid.loading .room-item{pointer-events:none;opacity:.7}