/* ============================================
   Mafia God — خدای مافیا
   Premium Dark Theme · Cinematic UI
   RTL-first · Bilingual · Component-Ready
   v2.0 — Major Visual Overhaul
   ============================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

/* ---------- Design Tokens ---------- */
:root {
  /* Backgrounds — Deep midnight navy tones */
  --bg-primary: #060611;
  --bg-secondary: #0c0c1d;
  --bg-tertiary: #131325;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --bg-glass: rgba(255,255,255,0.045);
  --bg-glass-strong: rgba(255,255,255,0.09);

  /* Text */
  --text-primary: #eeeef5;
  --text-secondary: #8b8ba3;
  --text-muted: #4a4a5e;
  --text-inverse: #060611;

  /* Teams — More vivid with stronger glows */
  --mafia: #f43f5e;
  --mafia-glow: rgba(244,63,94,0.35);
  --mafia-bg: rgba(244,63,94,0.1);
  --citizen: #3b82f6;
  --citizen-glow: rgba(59,130,246,0.35);
  --citizen-bg: rgba(59,130,246,0.1);
  --independent: #a855f7;
  --independent-glow: rgba(168,85,247,0.35);
  --independent-bg: rgba(168,85,247,0.1);

  /* Accent — Rose-red with glow */
  --accent: #e11d48;
  --accent-hover: #be123c;
  --accent-glow: rgba(225,29,72,0.3);
  --success: #22c55e;
  --success-bg: rgba(34,197,94,0.1);
  --warning: #f59e0b;
  --warning-bg: rgba(245,158,11,0.1);
  --danger: #ef4444;
  --info: #06b6d4;

  /* Borders & Shadows — Richer depth */
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.3);

  /* Radius — Slightly rounder */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --radius-pill: 100px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Typography — Refined scale */
  --font: 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;

  /* Motion — More refined easing */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration: 200ms;
  --duration-quick: 120ms;
  --duration-slow: 350ms;
  --duration-dramatic: 500ms;

  /* Layout */
  --header-h: 56px;
  --nav-h: 72px;
  --max-w: 480px;
}

/* ═══════ Reset ═══════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html {
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg-primary);
  height:100%;
}
body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  direction: inherit;
  min-height: 100%;
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}
a { color:inherit; text-decoration:none; }
button { font-family:var(--font); cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea { font-family:var(--font); }
ul,ol { list-style:none; }
img { max-width:100%; display:block; }

/* Prevent text selection on interactive elements */
html,body,#app,.view,.section,.tabs,.player-list,.player-item,.role-grid,.role-card,.bottom-nav,.nav-item { user-select:none; -webkit-user-select:none; }
input,textarea,select,button,a { user-select:text; -webkit-user-select:text; }

/* Cinematic ambient background — multi-layered gradients */
body::before {
  content:'';
  position:fixed;
  top:-60%; left:-60%; width:220%; height:220%;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(225,29,72,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(59,130,246,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(168,85,247,0.02) 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
  animation: ambientDrift 25s ease-in-out infinite alternate;
}
body::after {
  content:'';
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.008) 2px,
      rgba(255,255,255,0.008) 4px
    );
  pointer-events:none;
  z-index:0;
  opacity:0.5;
}

/* Custom Scrollbar — Accent themed */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, var(--accent), rgba(225,29,72,0.3));
  border-radius:var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* LTR inline helper */
.ltr-inline { direction:ltr; unicode-bidi:embed; display:inline-block; text-align:left; }

/* Hidden utility */
.hidden { display:none !important; }

/* ═══════ App Shell ═══════ */
#app {
  position:relative; z-index:1;
  max-width:var(--max-w);
  margin:0 auto;
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* ═══════ Header — Frosted glass with accent line ═══════ */
.app-header {
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-md);
  padding-top:env(safe-area-inset-top,0);
  background:rgba(6,6,17,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.app-header::after {
  content:'';
  position:absolute; bottom:-1px; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-glow), transparent);
  opacity:0.6;
}
.app-header__left { display:flex; align-items:center; gap:var(--space-sm); }
.app-header__info { display:flex; flex-direction:column; }
.app-header__title {
  font-size:var(--text-base); font-weight:800;
  background:linear-gradient(135deg,#fff 30%,var(--mafia) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:0.5px;
}
.app-header__badge {
  font-size:10px; padding:2px 8px;
  border-radius:var(--radius-full);
  background:var(--bg-glass); color:var(--text-secondary);
  letter-spacing:0.5px;
}
.app-header__right { display:flex; align-items:center; gap:var(--space-sm); }

/* Back button — Refined */
.app-header__back {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full);
  background:var(--bg-glass);
  color:var(--text-primary);
  transition:all var(--duration) var(--ease);
  border:1px solid transparent;
}
.app-header__back:hover {
  background:var(--bg-glass-strong);
  border-color:var(--border);
  transform:scale(1.05);
}
.app-header__back:active { transform:scale(0.92); }
.app-header__back svg { width:20px; height:20px; }

/* Header buttons — Glass pill style */
.header-btn {
  min-width:38px; height:34px;
  border-radius:var(--radius-full);
  padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-glass);
  border:1px solid var(--border);
  font-weight:700; font-size:var(--text-sm);
  transition:all var(--duration) var(--ease);
  letter-spacing:0.3px;
}
.header-btn:hover { background:var(--bg-glass-strong); transform:translateY(-1px); }
.header-btn:active { transform:scale(0.94); }
.header-btn.active {
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  color:#fff; border-color:transparent;
  box-shadow:0 2px 12px var(--accent-glow);
}
.header-btn--dot { width:38px; padding:0; }
.header-btn__dot {
  width:16px; height:16px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
  transition:all var(--duration) var(--ease);
}

/* Legacy class aliases */
.lang-toggle {
  min-width:38px; height:34px;
  border-radius:var(--radius-full);
  padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-glass);
  border:1px solid var(--border);
  font-weight:700; font-size:var(--text-sm);
  transition:all var(--duration) var(--ease);
}
.lang-toggle:hover { background:var(--bg-glass-strong); }
.lang-toggle.active { background:linear-gradient(135deg,var(--accent),var(--accent-hover)); color:#fff; border-color:transparent; }
.theme-toggle {
  width:38px; height:34px; padding:0;
  border-radius:var(--radius-full);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-glass);
  border:1px solid var(--border);
  transition:all var(--duration) var(--ease);
}
.theme-toggle:hover { background:var(--bg-glass-strong); }
.theme-toggle__dot {
  width:16px; height:16px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
  transition:all var(--duration) var(--ease);
}

/* ═══════ Main Content ═══════ */
.app-main {
  flex:1;
  padding:var(--space-lg) var(--space-md);
  padding-bottom:calc(var(--nav-h) + var(--space-xl) + env(safe-area-inset-bottom,0));
  overflow-y:auto;
}

/* ═══════ Bottom Navigation — Floating dock with glow ═══════ */
.bottom-nav {
  position:fixed; bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%; max-width:var(--max-w);
  display:flex; align-items:stretch; justify-content:space-around;
  background:rgba(6,6,17,0.92);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  z-index:100;
  padding:var(--space-xs) 0 calc(var(--space-sm) + env(safe-area-inset-bottom,0)) 0;
}
.bottom-nav::before {
  content:'';
  position:absolute; top:-1px; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.08) 50%, transparent 95%);
}
.nav-item {
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  padding:8px 4px;
  position:relative;
  transition:all var(--duration) var(--ease);
  border-radius:var(--radius-sm);
}
.nav-item__svg {
  width:22px; height:22px;
  color:var(--text-muted);
  transition:all var(--duration) var(--ease);
}
.nav-item__icon { font-size:20px; line-height:1; color:var(--text-muted); transition:all var(--duration) var(--ease); }
.nav-item__label {
  font-size:10px; font-weight:700;
  color:var(--text-muted);
  letter-spacing:0.5px;
  text-transform:uppercase;
  transition:color var(--duration) var(--ease);
}

/* Active nav — Glowing accent indicator */
.nav-item.active .nav-item__svg,
.nav-item.active .nav-item__icon { color:var(--accent); transform:scale(1.1); filter:drop-shadow(0 0 6px var(--accent-glow)); }
.nav-item.active .nav-item__label { color:var(--accent); }
.nav-item.active::before {
  content:'';
  position:absolute; top:-1px; left:50%;
  transform:translateX(-50%);
  width:32px; height:3px;
  border-radius:0 0 var(--radius-full) var(--radius-full);
  background:var(--accent);
  box-shadow:0 2px 12px var(--accent-glow);
}

.nav-item:not(.active):not(.disabled):hover .nav-item__svg,
.nav-item:not(.active):not(.disabled):hover .nav-item__icon { color:var(--text-secondary); transform:translateY(-1px); }
.nav-item:not(.active):not(.disabled):hover .nav-item__label { color:var(--text-secondary); }
.nav-item.disabled { opacity:0.25; pointer-events:none; }

/* ═══════ View ═══════ */
.view { animation:viewEnter var(--duration-slow) var(--ease-out) both; }

/* ═══════ Section ═══════ */
.section { margin-bottom:var(--space-xl); }
.section__title {
  font-size:var(--text-lg); font-weight:700;
  margin-bottom:var(--space-md);
  display:flex; align-items:center; gap:var(--space-sm);
  letter-spacing:0.3px;
}
.section__subtitle { font-size:var(--text-sm); color:var(--text-secondary); margin-bottom:var(--space-md); line-height:1.7; }

/* ═══════ Cards — Enhanced depth and glow ═══════ */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  transition:all var(--duration) var(--ease);
  position:relative;
  overflow:hidden;
}
.card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  opacity:0;
  transition:opacity var(--duration) var(--ease);
}
.card:hover { background:var(--bg-card-hover); }
.card:hover::before { opacity:1; }

.history-item { cursor:pointer; position:relative; }
.history-item:active { transform:scale(0.98); }
.history-item__arrow { position:absolute; top:50%; right:var(--space-md); transform:translateY(-50%); font-size:1.4rem; color:var(--text-muted); pointer-events:none; }

.card--glass {
  background:var(--bg-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.08);
}
.card--mafia {
  border-color:rgba(244,63,94,0.3);
  box-shadow:inset 0 0 40px var(--mafia-bg), 0 0 20px rgba(244,63,94,0.05);
}
.card--citizen {
  border-color:rgba(59,130,246,0.3);
  box-shadow:inset 0 0 40px var(--citizen-bg), 0 0 20px rgba(59,130,246,0.05);
}
.card--independent {
  border-color:rgba(168,85,247,0.3);
  box-shadow:inset 0 0 40px var(--independent-bg), 0 0 20px rgba(168,85,247,0.05);
}

/* ═══════ Buttons — Tactile with light sweep ═══════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);
  padding:12px 24px;
  border-radius:var(--radius-md);
  font-size:var(--text-base); font-weight:600;
  transition:all var(--duration) var(--ease);
  position:relative; overflow:hidden;
  white-space:nowrap;
  min-height:48px;
  letter-spacing:0.3px;
}
/* Light sweep effect on hover */
.btn::after {
  content:'';
  position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition:left var(--duration-slow) var(--ease);
}
.btn:hover::after { left:100%; }
.btn:active { transform:scale(0.96); }

.btn--accent,
.btn--primary {
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color:white;
  box-shadow:0 2px 12px var(--accent-glow), var(--shadow-sm);
  border:1px solid rgba(255,255,255,0.1);
}
.btn--accent:hover,
.btn--primary:hover {
  box-shadow:0 4px 24px var(--accent-glow), var(--shadow-md);
  transform:translateY(-2px);
  filter:brightness(1.1);
}
.btn--accent:active,
.btn--primary:active { transform:translateY(0) scale(0.97); filter:brightness(0.95); }

.btn--secondary {
  background:var(--bg-glass-strong);
  border:1px solid var(--border-strong);
  color:var(--text-primary);
}
.btn--secondary:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.18); }

.btn--ghost { background:transparent; color:var(--text-secondary); }
.btn--ghost:hover { background:var(--bg-glass); color:var(--text-primary); }

.btn--success {
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:white;
  box-shadow:0 2px 12px rgba(34,197,94,0.25);
}
.btn--danger {
  background:linear-gradient(135deg,var(--danger),#b91c1c);
  color:white;
  box-shadow:0 2px 12px rgba(239,68,68,0.25);
}
.btn--warning {
  background:linear-gradient(135deg,var(--warning),#b45309);
  color:white;
  box-shadow:0 2px 12px rgba(245,158,11,0.25);
}

.btn--block { width:100%; }
.btn--lg { padding:16px 32px; font-size:var(--text-lg); min-height:56px; border-radius:var(--radius-lg); }
.btn--sm { padding:8px 16px; font-size:var(--text-sm); min-height:36px; }
.btn--xs { padding:4px 10px; font-size:var(--text-xs); min-height:28px; }
.btn--icon { width:44px; height:44px; padding:0; border-radius:var(--radius-full); }
.btn:disabled { opacity:0.35; pointer-events:none; filter:grayscale(0.3); }

/* ═══════ Inputs — Glowing focus ═══════ */
.input-group { display:flex; gap:var(--space-sm); margin-bottom:var(--space-md); }
.input {
  flex:1;
  padding:12px 16px;
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  font-size:var(--text-base);
  outline:none;
  transition:all var(--duration) var(--ease);
  direction:inherit;
  min-height:48px;
}
.input::placeholder { color:var(--text-muted); }
.input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow), 0 0 20px rgba(225,29,72,0.08);
  background:var(--bg-glass-strong);
}
html[dir="rtl"] .input { direction:rtl; text-align:right; }
html[dir="ltr"] .input { direction:ltr; text-align:left; }

/* ═══════ Radio Options ═══════ */
.radio-group { display:flex; flex-direction:column; gap:var(--space-sm); }
.radio-option {
  position:relative; display:flex; align-items:center;
  padding:var(--space-md);
  background:var(--bg-glass);
  border:2px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
}
.radio-option:hover { background:var(--bg-card-hover); border-color:var(--border-strong); }
.radio-option--active {
  background:var(--bg-glass-strong);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(225,29,72,0.1), inset 0 0 20px rgba(225,29,72,0.03);
}
.radio-option input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
.radio-option__label { flex:1; display:flex; flex-direction:column; gap:var(--space-xs); }
.radio-option__title { font-size:var(--text-md); font-weight:600; color:var(--text-primary); }
.radio-option__desc { font-size:var(--text-sm); color:var(--text-secondary); line-height:1.5; }

/* ═══════ Rulebook ═══════ */
.rulebook-view { padding-bottom:var(--space-2xl); }
.rulebook-header {
  font-size:var(--text-xl); font-weight:700; color:var(--text-primary);
  text-align:center; margin-bottom:var(--space-lg);
}
.rulebook-toc {
  display:flex; flex-wrap:wrap; gap:var(--space-xs);
  margin-bottom:var(--space-xl);
  padding:var(--space-md);
  background:var(--bg-glass);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
}
.rulebook-toc__item {
  display:inline-block;
  padding:6px 12px;
  font-size:var(--text-sm); font-weight:500;
  color:var(--accent);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  text-decoration:none;
  transition:all var(--duration) var(--ease);
}
.rulebook-toc__item:hover { background:var(--accent); color:#fff; box-shadow:0 2px 12px var(--accent-glow); }
.rulebook-section {
  margin-bottom:var(--space-lg);
  padding:var(--space-lg);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  scroll-margin-top:80px;
}
.rulebook-section__title {
  font-size:var(--text-lg); font-weight:700; color:var(--accent);
  margin-bottom:var(--space-md);
  padding-bottom:var(--space-sm);
  border-bottom:2px solid var(--border);
}
.rulebook-section__body {
  font-size:var(--text-sm); color:var(--text-secondary);
  line-height:1.8; white-space:pre-wrap; word-wrap:break-word;
}

/* ═══════ Player List — Enhanced with staggered animations ═══════ */
.player-list { display:flex; flex-direction:column; gap:var(--space-sm); }
.player-item {
  display:flex; align-items:center; gap:var(--space-md);
  padding:14px var(--space-md);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition:all var(--duration) var(--ease);
  animation:slideInStagger var(--duration-slow) var(--ease-out) both;
  position:relative;
  overflow:hidden;
}
.player-item::before {
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:var(--accent);
  opacity:0;
  transition:opacity var(--duration) var(--ease);
  border-radius:0 var(--radius-full) var(--radius-full) 0;
}
html[dir="rtl"] .player-item::before { left:auto; right:0; border-radius:var(--radius-full) 0 0 var(--radius-full); }
.player-item:hover { background:var(--bg-card-hover); transform:translateX(-2px); }
html[dir="rtl"] .player-item:hover { transform:translateX(2px); }
.player-item:hover::before { opacity:1; }

.player-item__num,
.player-item__number {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--bg-glass-strong), var(--bg-glass));
  font-size:var(--text-xs); font-weight:800;
  color:var(--text-secondary);
  flex-shrink:0;
  border:1px solid var(--border);
}
.player-item__name { flex:1; font-weight:600; font-size:var(--text-base); letter-spacing:0.2px; }
.player-item__grip,
.player-item__drag-handle {
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-size:var(--text-sm);
  background:none; border:none;
  cursor:grab; flex-shrink:0;
  touch-action:none;
  transition:color var(--duration) var(--ease);
}
.player-item__grip:hover,
.player-item__drag-handle:hover { color:var(--text-secondary); }
.player-item__del,
.player-item__remove {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full);
  color:var(--text-muted);
  transition:all var(--duration) var(--ease);
  flex-shrink:0;
  font-size:var(--text-lg);
}
.player-item__del:hover,
.player-item__remove:hover {
  background:rgba(239,68,68,0.15);
  color:var(--danger);
  transform:scale(1.1);
}
.player-item__del svg { width:16px; height:16px; }

.player-item--dead { opacity:0.35; }
.player-item--dead .player-item__name { text-decoration:line-through; }
.player-item--dead .player-item__num,
.player-item--dead .player-item__number { background:rgba(239,68,68,0.15); color:var(--danger); border-color:rgba(239,68,68,0.2); }
.player-item.dragging { opacity:0.5; border-color:var(--accent); box-shadow:0 4px 20px var(--accent-glow); }

/* ═══════ Role Badge — Refined with glow ═══════ */
.role-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px;
  border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:600;
  letter-spacing:0.3px;
}
.role-badge--mafia { background:var(--mafia-bg); color:var(--mafia); border:1px solid rgba(244,63,94,0.2); text-shadow:0 0 8px rgba(244,63,94,0.3); }
.role-badge--citizen { background:var(--citizen-bg); color:var(--citizen); border:1px solid rgba(59,130,246,0.2); text-shadow:0 0 8px rgba(59,130,246,0.3); }
.role-badge--independent { background:var(--independent-bg); color:var(--independent); border:1px solid rgba(168,85,247,0.2); text-shadow:0 0 8px rgba(168,85,247,0.3); }

/* ═══════ Role Grid — Enhanced selection and hover ═══════ */
.role-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-sm); }
.role-card {
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-sm);
  padding:var(--space-md); padding-top:calc(var(--space-md) + 4px);
  background:var(--bg-card);
  border:2px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  text-align:center;
  position:relative;
  user-select:none;
}
.role-card:hover {
  background:var(--bg-card-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.role-card.selected {
  border-color:var(--accent);
  background:rgba(225,29,72,0.06);
  box-shadow:0 0 16px rgba(225,29,72,0.1);
}
.role-card.selected::after {
  content:'✓';
  position:absolute; top:6px; left:6px;
  width:22px; height:22px;
  background:var(--accent); color:white;
  border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  box-shadow:0 2px 8px var(--accent-glow);
  animation:scaleIn var(--duration) var(--ease-bounce);
}
.role-card--mafia.selected { border-color:var(--mafia); background:var(--mafia-bg); box-shadow:0 0 16px rgba(244,63,94,0.1); }
.role-card--mafia.selected::after { background:var(--mafia); box-shadow:0 2px 8px var(--mafia-glow); }
.role-card--citizen.selected { border-color:var(--citizen); background:var(--citizen-bg); box-shadow:0 0 16px rgba(59,130,246,0.1); }
.role-card--citizen.selected::after { background:var(--citizen); box-shadow:0 2px 8px var(--citizen-glow); }
.role-card--independent.selected { border-color:var(--independent); background:var(--independent-bg); box-shadow:0 0 16px rgba(168,85,247,0.1); }
.role-card--independent.selected::after { background:var(--independent); box-shadow:0 2px 8px var(--independent-glow); }
.role-card--disabled { opacity:0.35; filter:grayscale(0.3); }

.role-card__icon { font-size:32px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.role-card__name { font-size:var(--text-sm); font-weight:700; letter-spacing:0.2px; }
.role-card__team { font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }

/* Role card info button */
.role-card__info,
.role-card__info-btn {
  position:absolute; top:5px; right:5px;
  width:22px; height:22px;
  border-radius:50% !important;
  background:rgba(255,255,255,0.08) !important;
  border:1.5px solid rgba(255,255,255,0.15) !important;
  color:#9ca3af !important;
  font-size:13px; font-weight:700; font-style:italic;
  font-family:Georgia,'Times New Roman',serif;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  line-height:1; padding:0; z-index:5;
}
.role-card__info:hover,
.role-card__info-btn:hover {
  background:var(--accent) !important;
  color:white !important;
  border-color:var(--accent) !important;
  transform:scale(1.15);
  box-shadow:0 2px 8px var(--accent-glow);
}

/* Role count stepper */
.role-card__count,
.role-card__counter { display:flex; align-items:center; gap:var(--space-sm); }
.role-card__count-btn,
.role-card__dec,
.role-card__inc {
  width:30px; height:30px;
  border-radius:var(--radius-full);
  background:var(--bg-glass-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-sm); font-weight:700;
  transition:all var(--duration) var(--ease);
  border:1px solid var(--border);
}
.role-card__count-btn:hover,
.role-card__dec:hover,
.role-card__inc:hover {
  background:var(--accent); color:white;
  border-color:var(--accent);
  box-shadow:0 2px 8px var(--accent-glow);
  transform:scale(1.1);
}
.role-card__count-value,
.role-card__val {
  font-size:var(--text-base); font-weight:800;
  min-width:24px; text-align:center;
}

/* Role bullets config inside card */
.role-card__bullets { margin-top:6px; font-size:var(--text-xs); width:100%; }

/* Role description modal */
.role-tooltip-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-lg);
  animation:fadeIn 0.2s var(--ease);
}
.role-tooltip {
  background:var(--bg-tertiary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
  padding:var(--space-xl) var(--space-lg);
  max-width:320px; width:100%;
  text-align:center;
  box-shadow:var(--shadow-lg);
  animation:scaleIn 0.3s var(--ease-spring);
}
.role-tooltip__icon { font-size:56px; margin-bottom:var(--space-sm); filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.role-tooltip__name { font-size:var(--text-xl); font-weight:800; margin-bottom:var(--space-xs); letter-spacing:0.3px; }
.role-tooltip__team { font-size:10px; color:var(--text-muted); margin-bottom:var(--space-md); text-transform:uppercase; letter-spacing:2px; font-weight:600; }
.role-tooltip__team--mafia { color:var(--mafia); text-shadow:0 0 8px var(--mafia-glow); }
.role-tooltip__team--citizen { color:var(--citizen); text-shadow:0 0 8px var(--citizen-glow); }
.role-tooltip__team--independent { color:var(--independent); text-shadow:0 0 8px var(--independent-glow); }
.role-tooltip__desc { font-size:var(--text-sm); line-height:1.8; color:var(--text-secondary); }

/* ═══════ Phase Bar — Dramatic cinematic gradients ═══════ */
.phase-bar {
  display:flex; align-items:center; justify-content:center;
  gap:var(--space-md);
  padding:var(--space-md) var(--space-lg);
  margin-bottom:var(--space-lg);
  border-radius:var(--radius-lg);
  font-weight:700; font-size:var(--text-lg);
  position:relative;
  overflow:hidden;
}
.phase-bar::before {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  opacity:0.4;
  animation:phaseShimmer 4s ease-in-out infinite;
}
.phase-bar--night {
  background:linear-gradient(135deg,rgba(30,27,75,0.5),rgba(88,28,135,0.3),rgba(30,27,75,0.5));
  border:1px solid rgba(139,92,246,0.25);
  color:#c4b5fd;
  box-shadow:inset 0 0 30px rgba(139,92,246,0.08), 0 2px 16px rgba(139,92,246,0.1);
}
.phase-bar--night::before {
  background:linear-gradient(90deg, transparent, rgba(139,92,246,0.1), transparent);
}
.phase-bar--day {
  background:linear-gradient(135deg,rgba(120,53,15,0.3),rgba(161,98,7,0.2),rgba(120,53,15,0.3));
  border:1px solid rgba(245,158,11,0.25);
  color:#fcd34d;
  box-shadow:inset 0 0 30px rgba(245,158,11,0.08), 0 2px 16px rgba(245,158,11,0.1);
}
.phase-bar--day::before {
  background:linear-gradient(90deg, transparent, rgba(245,158,11,0.1), transparent);
}
.phase-bar__icon { font-size:var(--text-2xl); filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.phase-bar__title { flex:1; letter-spacing:0.3px; }
.phase-bar__sub,
.phase-bar__round { font-size:var(--text-sm); color:var(--text-secondary); font-weight:500; }

/* ═══════ Stats — Refined with team glow ═══════ */
.stats-row,
.stat-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-sm);
  margin-bottom:var(--space-lg);
}
.stat-card,
.stat-pill {
  text-align:center;
  padding:var(--space-md);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition:all var(--duration) var(--ease);
  position:relative;
  overflow:hidden;
}
.stat-card:hover,
.stat-pill:hover { transform:translateY(-1px); background:var(--bg-card-hover); }
.stat-card__value,
.stat-pill__val { font-size:var(--text-2xl); font-weight:900; letter-spacing:-0.5px; }
.stat-card__label,
.stat-pill__lbl { font-size:10px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.stat-card--mafia .stat-card__value,
.stat-pill--mafia .stat-pill__val { color:var(--mafia); text-shadow:0 0 12px var(--mafia-glow); }
.stat-card--citizen .stat-card__value,
.stat-pill--citizen .stat-pill__val { color:var(--citizen); text-shadow:0 0 12px var(--citizen-glow); }
.stat-card--independent .stat-card__value,
.stat-pill--independent .stat-pill__val { color:var(--independent); text-shadow:0 0 12px var(--independent-glow); }

/* Subtle top border accent for stat cards */
.stat-card--mafia,
.stat-pill--mafia { border-top:2px solid rgba(244,63,94,0.4); }
.stat-card--citizen,
.stat-pill--citizen { border-top:2px solid rgba(59,130,246,0.4); }
.stat-card--independent,
.stat-pill--independent { border-top:2px solid rgba(168,85,247,0.4); }

/* ═══════ Timer — Enhanced with glowing progress ═══════ */
.timer { display:flex; flex-direction:column; align-items:center; gap:var(--space-md); padding:var(--space-xl); }
.timer__label { font-size:var(--text-sm); color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.timer__display {
  font-size:var(--text-4xl); font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:6px;
  color:var(--text-primary);
  text-shadow:0 0 20px rgba(255,255,255,0.1);
}
.timer__display.warning { color:var(--warning); text-shadow:0 0 20px rgba(245,158,11,0.3); }
.timer__display.danger { color:var(--danger); text-shadow:0 0 20px rgba(239,68,68,0.4); animation:timerPulse 1s ease infinite; }
.timer__controls { display:flex; gap:var(--space-sm); }
.timer__progress,
.timer__track {
  width:100%; height:5px;
  background:var(--bg-glass);
  border-radius:var(--radius-full);
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);
}
.timer__progress-bar,
.timer__fill {
  height:100%;
  background:linear-gradient(90deg, var(--accent), #f97316);
  border-radius:var(--radius-full);
  transition:width 1s linear;
  box-shadow:0 0 8px var(--accent-glow);
}

/* ═══════ Stepper (Night Actions) — Enhanced steps ═══════ */
.stepper { display:flex; flex-direction:column; gap:var(--space-md); }
.step {
  padding:var(--space-lg);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:all var(--duration-slow) var(--ease);
  position:relative;
  overflow:hidden;
}
.step::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2px; opacity:0;
  transition:opacity var(--duration) var(--ease);
}
.step.active {
  border-color:var(--accent);
  background:rgba(225,29,72,0.04);
  box-shadow:0 0 24px rgba(225,29,72,0.08), inset 0 0 30px rgba(225,29,72,0.02);
}
.step.active::before {
  opacity:1;
  background:linear-gradient(90deg, var(--accent), transparent);
}
.step.completed { opacity:0.5; border-color:var(--success); }
.step.completed::before { content:'✓ '; color:var(--success); }
.step__header { display:flex; align-items:center; gap:var(--space-md); margin-bottom:var(--space-md); }
.step__icon { font-size:var(--text-2xl); filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.step__title { font-weight:700; font-size:var(--text-base); letter-spacing:0.2px; }
.step__subtitle { font-size:var(--text-sm); color:var(--text-secondary); }
.step__body { display:none; }
.step.active .step__body { display:block; animation:fadeIn var(--duration-slow) var(--ease-out); }

/* Target grid — Enhanced buttons */
.target-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-sm); margin-top:var(--space-md); }
.target-btn {
  padding:var(--space-md);
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:500;
  transition:all var(--duration) var(--ease);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.target-btn:hover { background:var(--bg-glass-strong); border-color:var(--border-strong); transform:translateY(-1px); }
.target-btn.selected {
  border-color:var(--accent);
  background:rgba(225,29,72,0.1);
  color:var(--accent);
  font-weight:700;
  box-shadow:0 0 12px rgba(225,29,72,0.1);
}
.target-btn:disabled { opacity:0.25; pointer-events:none; }
.target-btn__extra { display:block; font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }

/* Role guess buttons */
.role-guess-btn {
  padding:var(--space-sm) var(--space-md);
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:var(--text-xs); font-weight:500;
  transition:all var(--duration) var(--ease);
  text-align:center; cursor:pointer; white-space:nowrap;
}
.role-guess-btn:hover { background:var(--bg-glass-strong); border-color:var(--border-strong); }
.role-guess-btn.selected { border-color:var(--danger); background:rgba(239,68,68,0.12); color:var(--danger); font-weight:700; }

/* ═══════ Voting — Competition feel ═══════ */
.vote-section { margin-top:var(--space-lg); }
.vote-card {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-md);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-sm);
  transition:all var(--duration) var(--ease);
  position:relative;
  overflow:hidden;
}
.vote-card:hover { background:var(--bg-card-hover); }
.vote-card__info { display:flex; align-items:center; gap:var(--space-md); }
.vote-card__name { font-weight:600; }
.vote-card__count { display:flex; align-items:center; gap:var(--space-xs); font-size:var(--text-lg); font-weight:800; color:var(--warning); text-shadow:0 0 8px rgba(245,158,11,0.3); }
.vote-bar { height:4px; background:var(--bg-glass); border-radius:var(--radius-full); margin-top:var(--space-sm); overflow:hidden; }
.vote-bar__fill {
  height:100%;
  background:linear-gradient(90deg, var(--warning), #f97316);
  border-radius:var(--radius-full);
  transition:width var(--duration-slow) var(--ease);
  box-shadow:0 0 6px rgba(245,158,11,0.3);
}

/* ═══════ God Dashboard — Premium overlay ═══════ */
.god-dashboard {
  background:linear-gradient(135deg,rgba(225,29,72,0.05),rgba(0,0,0,0.2));
  border:1px solid rgba(225,29,72,0.15);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  margin-bottom:var(--space-lg);
  position:relative;
  overflow:hidden;
}
.god-dashboard::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,29,72,0.3), transparent);
}
.god-dashboard--compact { padding:var(--space-sm); }
.god-dashboard__title,
.god-dashboard__hdr {
  font-size:var(--text-sm); color:var(--accent); font-weight:700;
  margin-bottom:var(--space-sm);
  display:flex; align-items:center; gap:var(--space-sm);
  text-transform:uppercase; letter-spacing:0.5px;
}
.god-dashboard__eye { font-size:var(--text-base); }
.god-dashboard__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.god-player {
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);
  background:var(--bg-glass);
  transition:all var(--duration-quick) var(--ease);
  border:1px solid transparent;
}
.god-player:hover { background:var(--bg-glass-strong); border-color:var(--border); }
.god-player__name { font-weight:600; flex:1; }
.god-player__role { font-weight:500; }
.god-player__event { font-size: var(--text-sm); opacity: 0.9; }
.god-player--mafia .god-player__role { color:var(--mafia); }
.god-player--citizen .god-player__role { color:var(--citizen); }
.god-player--independent .god-player__role { color:var(--independent); }
.god-player--dead { opacity:0.3; text-decoration:line-through; }

/* ═══════ God Context Menu ═══════ */
.god-context-menu {
  position:fixed; inset:0; z-index:1000;
  pointer-events:none;
}
.god-context-menu.hidden { display:none; }
.god-context-menu__popup {
  position:fixed; z-index:1001;
  transform:translate(-50%, -50%);
  pointer-events:all;
  background:var(--bg-secondary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  padding:var(--space-sm);
  min-width:140px;
  box-shadow:0 12px 48px rgba(0,0,0,0.6), 0 0 1px rgba(255,255,255,0.1);
  animation:contextMenuIn 0.2s var(--ease-spring);
}
.god-context-menu__title {
  font-size:var(--text-xs);
  font-weight:700;
  color:var(--accent);
  padding:6px 10px;
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.god-context-menu__buttons {
  display:flex; flex-direction:column; gap:4px;
}
.god-context-btn {
  padding:8px 12px;
  border:none;
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  color:var(--text-primary);
  font-size:var(--text-xs);
  font-weight:600;
  cursor:pointer;
  transition:all var(--duration-quick) var(--ease);
  text-align:center;
  border:1px solid transparent;
}
.god-context-btn:hover {
  background:var(--bg-card-hover);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  border-color:var(--border);
}
.god-context-btn[data-action="kill"] { color:var(--danger); }
.god-context-btn[data-action="kill"]:hover {
  background:rgba(239,68,68,0.1);
  border-color:rgba(239,68,68,0.3);
}
.god-context-btn[data-action="revive"] { color:var(--success); }
.god-context-btn[data-action="revive"]:hover {
  background:rgba(34,197,94,0.1);
  border-color:rgba(34,197,94,0.3);
}

/* ═══════ Role Reveal — Cinematic card flip ═══════ */
.reveal-container {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:60vh;
  gap:var(--space-xl);
  text-align:center;
}
.reveal-card { width:260px; height:360px; perspective:1200px; cursor:pointer; }
.reveal-card__inner {
  position:relative; width:100%; height:100%;
  transition:transform 0.7s var(--ease-spring);
  transform-style:preserve-3d;
}
.reveal-card.flipped .reveal-card__inner { transform:rotateY(180deg); }
.reveal-card__front,
.reveal-card__back {
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:var(--radius-xl);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--space-xl);
  border:2px solid var(--border-strong);
  overflow:hidden;
}
.reveal-card__front {
  background:linear-gradient(145deg,var(--bg-tertiary),var(--bg-secondary));
  gap:var(--space-md);
  box-shadow:var(--shadow-lg);
}
/* Subtle shimmer on front card */
.reveal-card__front::after {
  content:'';
  position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%);
  animation:cardShimmer 3s ease-in-out infinite;
}
.reveal-card__front-icon { font-size:56px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.reveal-card__front-text { font-size:var(--text-base); color:var(--text-secondary); font-weight:500; }
.reveal-card__back { transform:rotateY(180deg); gap:var(--space-md); }
.reveal-card__back--mafia {
  background:linear-gradient(145deg,#1a0508,#2d0a10);
  border-color:var(--mafia);
  box-shadow:0 0 40px rgba(244,63,94,0.3), inset 0 0 40px rgba(244,63,94,0.05);
}
.reveal-card__back--citizen {
  background:linear-gradient(145deg,#050a1a,#0a152d);
  border-color:var(--citizen);
  box-shadow:0 0 40px rgba(59,130,246,0.3), inset 0 0 40px rgba(59,130,246,0.05);
}
.reveal-card__back--independent {
  background:linear-gradient(145deg,#0f051a,#1a0a2d);
  border-color:var(--independent);
  box-shadow:0 0 40px rgba(168,85,247,0.3), inset 0 0 40px rgba(168,85,247,0.05);
}
.reveal-card__back-icon { font-size:64px; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
.reveal-card__back-role { font-size:var(--text-xl); font-weight:900; letter-spacing:0.5px; }
.reveal-card__back-team { font-size:10px; opacity:0.7; text-transform:uppercase; letter-spacing:2px; font-weight:600; }
.reveal-card__back-desc {
  font-size:var(--text-xs); color:var(--text-secondary); line-height:1.6;
  flex:1 1 auto; width:100%; overflow-y:auto; text-align:center; padding-right:6px;
}

/* ═══════ Timeline — Glowing markers ═══════ */
.timeline { position:relative; padding-right:var(--space-lg); }
.timeline::before {
  content:''; position:absolute; right:8px; top:0; bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--border-strong), var(--border), transparent);
}
.timeline-item { position:relative; padding-bottom:var(--space-lg); padding-right:var(--space-xl); }
.timeline-item::before {
  content:''; position:absolute; right:2px; top:6px;
  width:14px; height:14px;
  border-radius:var(--radius-full);
  background:var(--bg-tertiary);
  border:2px solid var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  transition:all var(--duration) var(--ease);
}
.timeline-item--night::before { border-color:#8b5cf6; box-shadow:0 0 8px rgba(139,92,246,0.35); }
.timeline-item--day::before { border-color:var(--warning); box-shadow:0 0 8px rgba(245,158,11,0.35); }
.timeline-item--death::before { border-color:var(--danger); background:var(--danger); box-shadow:0 0 10px rgba(239,68,68,0.4); }
.timeline-item__title { font-weight:700; font-size:var(--text-sm); margin-bottom:var(--space-xs); }
.timeline-item__desc { font-size:var(--text-sm); color:var(--text-secondary); line-height:1.8; }

/* ═══════ Modal — Spring animation ═══════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  z-index:200;
  padding:var(--space-lg);
  animation:fadeIn var(--duration) var(--ease);
}
.modal {
  background:var(--bg-secondary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
  padding:var(--space-xl);
  width:100%; max-width:400px;
  animation:modalEnter var(--duration-slow) var(--ease-spring);
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
.modal::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.modal__title { font-size:var(--text-xl); font-weight:800; margin-bottom:var(--space-md); text-align:center; letter-spacing:0.3px; }
.modal__body { margin-bottom:var(--space-lg); color:var(--text-secondary); text-align:center; line-height:1.8; }
.modal__actions { display:flex; gap:var(--space-sm); flex-wrap:wrap; justify-content:center; }
.modal__actions .btn { padding:8px 12px; min-height:36px; font-size:var(--text-sm); border-radius:var(--radius-md); }

/* ═══════ Last Action Card — Enhanced flip ═══════ */
.la-card {
  background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
  border: 2px solid var(--accent);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-align: center;
  margin-bottom: var(--space-md);
  animation: cardFlip 0.5s var(--ease-spring);
  box-shadow: 0 0 24px var(--accent-glow);
  position:relative;
  overflow:hidden;
}
.la-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.la-card__icon { font-size: 3rem; margin-bottom: var(--space-sm); filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.la-card__name { font-size: var(--text-xl); font-weight: 800; color: var(--accent); margin-bottom: var(--space-xs); letter-spacing:0.3px; }
.la-card__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.la-card__number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent); color: var(--bg-primary);
  font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-sm);
  box-shadow: 0 2px 8px var(--accent-glow);
}
.la-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: var(--space-sm); margin-top: var(--space-md);
}
.la-pick-btn {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); font-weight: 700;
  background: var(--bg-secondary); border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.la-pick-btn:hover { border-color:var(--accent); transform:scale(1.05); }
.la-pick-btn:active { transform: scale(0.92); background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
.la-target-list {
  display: flex; flex-direction: column; gap: var(--space-xs);
  max-height: 300px; overflow-y: auto; margin-top: var(--space-md);
}
.la-target-btn {
  padding: 12px var(--space-md); text-align: start;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-base);
  transition: all var(--duration) var(--ease);
}
.la-target-btn:hover { border-color:var(--border-strong); background:var(--bg-glass-strong); }
.la-target-btn:active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
@keyframes cardFlip {
  0% { transform: rotateY(90deg) scale(0.8); opacity:0; }
  100% { transform: rotateY(0) scale(1); opacity:1; }
}

/* ═══════ Toast — Enhanced with team theming ═══════ */
.toast {
  position:fixed; top:var(--space-lg); left:50%;
  transform:translateX(-50%) translateY(-120%);
  padding:14px 24px;
  border-radius:var(--radius-lg);
  font-size:var(--text-sm); font-weight:600;
  z-index:300;
  animation:toastIn 0.4s var(--ease-spring) forwards;
  backdrop-filter:blur(16px);
  max-width:calc(var(--max-w) - 32px);
  text-align:center;
  box-shadow:var(--shadow-lg);
  letter-spacing:0.2px;
}
.toast--success { background:rgba(34,197,94,0.95); color:white; box-shadow:0 4px 24px rgba(34,197,94,0.3); }
.toast--error { background:rgba(239,68,68,0.95); color:white; box-shadow:0 4px 24px rgba(239,68,68,0.3); }
.toast--info { background:rgba(6,182,212,0.95); color:white; box-shadow:0 4px 24px rgba(6,182,212,0.3); }
.toast.out { animation:toastOut 0.3s var(--ease) forwards; }

/* ═══════ Empty State ═══════ */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--space-2xl); text-align:center; gap:var(--space-md); color:var(--text-muted);
}
.empty-state__icon { font-size:56px; opacity:0.4; filter:grayscale(0.3); }
.empty-state__text { font-size:var(--text-sm); line-height:1.8; }
.empty-hint { text-align:center; padding:var(--space-lg); color:var(--text-muted); font-size:var(--text-sm); }

/* ═══════ Hero — Dramatic entrance ═══════ */
.hero {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  min-height:60vh; gap:var(--space-lg);
  padding:var(--space-xl) 0;
}
.hero__icon {
  font-size:80px;
  filter:drop-shadow(0 0 32px rgba(225,29,72,0.3));
  animation:heroFloat 3s ease-in-out infinite;
}
.hero__title {
  font-size:var(--text-3xl); font-weight:900;
  background:linear-gradient(135deg,#fff 20%,var(--mafia) 60%,#fff 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:titleShine 4s ease-in-out infinite;
  line-height:1.4;
  letter-spacing:0.5px;
}
.hero__subtitle {
  font-size:var(--text-base); color:var(--text-secondary);
  max-width:300px; line-height:1.8;
  animation:fadeIn 0.8s var(--ease) 0.3s both;
}
.hero__actions {
  display:flex; flex-direction:column; gap:var(--space-sm);
  width:100%; max-width:280px;
  margin-top:var(--space-md);
  animation:fadeIn 0.8s var(--ease) 0.5s both;
}

/* ═══════ Tabs — Pill-style selection ═══════ */
.tabs {
  display:flex; gap:2px;
  background:var(--bg-glass);
  border-radius:var(--radius-md);
  padding:4px;
  margin-bottom:var(--space-lg);
  border:1px solid var(--border);
}
.tab {
  flex:1; padding:10px; text-align:center;
  border-radius:var(--radius-sm);
  font-size:var(--text-sm); font-weight:600;
  color:var(--text-muted);
  transition:all var(--duration) var(--ease);
  position:relative;
}
.tab.active {
  background:var(--bg-tertiary);
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
.tab:not(.active):hover { color:var(--text-secondary); }
.tab.disabled { opacity:0.35; pointer-events:none; }

/* ═══════ Team Header ═══════ */
.team-header {
  display:flex; align-items:center; gap:var(--space-sm);
  padding:var(--space-sm) 0;
  margin-bottom:var(--space-sm);
  font-weight:700; font-size:var(--text-sm);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.team-header--mafia { color:var(--mafia); }
.team-header--citizen { color:var(--citizen); }
.team-header--independent { color:var(--independent); }
.team-header::after { content:''; flex:1; height:1px; background:var(--border); }
.team-controls { display:inline-flex; align-items:center; }

/* ═══════ Dots — Glowing status ═══════ */
.dot { width:8px; height:8px; border-radius:var(--radius-full); display:inline-block; transition:all var(--duration) var(--ease); }
.dot--alive { background:var(--success); box-shadow:0 0 8px rgba(34,197,94,0.5); }
.dot--dead { background:var(--danger); box-shadow:0 0 6px rgba(239,68,68,0.3); }

/* ═══════ Chip ═══════ */
.chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 14px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:600;
  background:var(--bg-glass);
  border:1px solid var(--border);
  letter-spacing:0.3px;
}

/* ═══════ Divider ═══════ */
.divider { height:1px; background:linear-gradient(90deg, transparent, var(--border-strong), transparent); margin:var(--space-lg) 0; }

/* ═══════ Win Screen — Dramatic reveal ═══════ */
.win-screen {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:65vh; text-align:center; gap:var(--space-xl);
  position:relative;
}
.win-screen::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,0.02) 0%, transparent 70%);
  pointer-events:none;
}
.win-screen__icon {
  font-size:88px;
  animation:heroFloat 3s ease-in-out infinite;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.3));
}
.win-screen__title {
  font-size:var(--text-3xl); font-weight:900;
  letter-spacing:0.5px;
  animation:winReveal 0.8s var(--ease-spring) both;
}
.win-screen__title--mafia { color:var(--mafia); text-shadow:0 0 30px var(--mafia-glow); }
.win-screen__title--citizen { color:var(--citizen); text-shadow:0 0 30px var(--citizen-glow); }
.win-screen__title--independent { color:var(--independent); text-shadow:0 0 30px var(--independent-glow); }
.win-screen__subtitle { color:var(--text-secondary); font-size:var(--text-lg); animation:fadeIn 0.6s var(--ease) 0.4s both; }

/* ═══════ Utility Classes ═══════ */
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.gap-xs { gap:var(--space-xs); }
.gap-sm { gap:var(--space-sm); }
.gap-md { gap:var(--space-md); }
.text-center { text-align:center; }
.text-muted { color:var(--text-muted); }
.text-secondary { color:var(--text-secondary); }
.text-sm { font-size:var(--text-sm); }
.font-bold { font-weight:700; }
.mb-sm { margin-bottom:var(--space-sm); }
.mb-md { margin-bottom:var(--space-md); }
.mb-lg { margin-bottom:var(--space-lg); }
.mt-sm { margin-top:var(--space-sm); }
.mt-md { margin-top:var(--space-md); }
.mt-lg { margin-top:var(--space-lg); }

/* ═══════ Animations — Cinematic keyframes ═══════ */
@keyframes viewEnter {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes scaleIn {
  from { transform:scale(0.8); opacity:0; }
  to { transform:scale(1); opacity:1; }
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(16px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes slideInStagger {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes heroFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
@keyframes pulse {
  0%,100% { opacity:1; }
  50% { opacity:0.5; }
}
@keyframes timerPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.6; transform:scale(1.02); }
}
@keyframes toastIn {
  from { transform:translateX(-50%) translateY(-120%); opacity:0; }
  to { transform:translateX(-50%) translateY(0); opacity:1; }
}
@keyframes toastOut {
  from { transform:translateX(-50%) translateY(0); opacity:1; }
  to { transform:translateX(-50%) translateY(-120%); opacity:0; }
}
@keyframes modalEnter {
  from { transform:scale(0.85) translateY(10px); opacity:0; }
  to { transform:scale(1) translateY(0); opacity:1; }
}
@keyframes contextMenuIn {
  from { opacity:0; transform:translate(-50%, -55%) scale(0.85); }
  to { opacity:1; transform:translate(-50%, -50%) scale(1); }
}
@keyframes phaseShimmer {
  0%,100% { transform:translateX(-100%); }
  50% { transform:translateX(100%); }
}
@keyframes titleShine {
  0% { background-position:200% center; }
  100% { background-position:-200% center; }
}
@keyframes cardShimmer {
  0% { transform:rotate(45deg) translate(-100%, -100%); }
  50% { transform:rotate(45deg) translate(100%, 100%); }
  100% { transform:rotate(45deg) translate(-100%, -100%); }
}
@keyframes ambientDrift {
  0% { transform:translate(0, 0) rotate(0deg); }
  100% { transform:translate(-2%, -1%) rotate(1deg); }
}
@keyframes winReveal {
  from { opacity:0; transform:scale(0.7) translateY(20px); letter-spacing:8px; }
  to { opacity:1; transform:scale(1) translateY(0); letter-spacing:0.5px; }
}

/* ═══════ Suggested Players ═══════ */
.suggested-players { margin-top:10px; }

/* ═══════ Card Variants — Result states ═══════ */
.card--danger {
  border-color:rgba(239,68,68,0.3);
  box-shadow:inset 0 0 30px rgba(239,68,68,0.05);
}
.card--success {
  border-color:rgba(34,197,94,0.3);
  box-shadow:inset 0 0 30px rgba(34,197,94,0.05);
}
.card--warning {
  border-color:rgba(245,158,11,0.3);
  box-shadow:inset 0 0 30px rgba(245,158,11,0.05);
}

/* ═══════ Handshake (3-player chaos) ═══════ */
.handshake-pair {
  padding:var(--space-md);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  text-align:center;
  font-weight:600;
}
.handshake-pair:hover {
  background:var(--bg-card-hover);
  border-color:var(--border-strong);
  transform:translateY(-1px);
}

/* ═══════ Media Queries ═══════ */
@media (max-width: 380px) {
  :root {
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --space-lg: 20px;
    --space-xl: 28px;
  }
  .role-grid { grid-template-columns:repeat(2,1fr); gap:6px; }
  .god-dashboard__grid { grid-template-columns:1fr; }
  .reveal-card { width:220px; height:320px; }
}

@media (min-width: 481px) {
  .bottom-nav {
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ═══════ Reduced Motion ═══════ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}