/* ═══ UI Polish — симпатичный современный вид поверх любой темы ═══ */
html{
  overflow-x:hidden;
  max-width:100%;
  overscroll-behavior-x:none;
}
:root{
  --polish-glass:rgba(255,255,255,.055);
  --polish-glass-2:rgba(255,255,255,.085);
  --polish-shine:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 42%,transparent 100%);
  --polish-shadow:0 10px 40px rgba(0,0,0,.28);
  --polish-shadow-sm:0 4px 18px rgba(0,0,0,.18);
  --polish-accent-glow:0 0 32px color-mix(in srgb,var(--accent) 32%,transparent);
  --polish-border-grad:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,#ec4899 28%,transparent),color-mix(in srgb,var(--accent) 18%,transparent));
}

/* Фон по умолчанию (Telegram / без темы) */
body:not([data-app-theme]){
  position:relative;
  background-image:
    radial-gradient(ellipse 90% 55% at 0% -8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 52%),
    radial-gradient(ellipse 70% 45% at 100% 0%,rgba(236,72,153,.1),transparent 48%),
    radial-gradient(ellipse 80% 50% at 50% 110%,rgba(15,12,40,.55),transparent 58%),
    linear-gradient(168deg,var(--bg2) 0%,var(--bg) 48%,color-mix(in srgb,var(--bg) 80%,#000) 100%)!important;
  background-attachment:fixed;
}
body:not([data-app-theme])::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 42% 38% at 18% 22%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
    radial-gradient(ellipse 38% 34% at 82% 18%,rgba(236,72,153,.09),transparent 68%),
    radial-gradient(ellipse 50% 40% at 55% 88%,rgba(99,102,241,.08),transparent 72%);
  animation:mafiaAmbientDrift 22s ease-in-out infinite alternate;
  opacity:.9;
}
body:not([data-app-theme])::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 20%,transparent 78%);
  opacity:.35;
}
body>.header,body>.app-shell-top,body>.page,body>#netErrorBar{
  position:relative;z-index:1;
  max-width:100%;
}
@keyframes mafiaAmbientDrift{
  0%{opacity:.82;transform:translate(0,0)}
  50%{opacity:1;transform:translate(1%,-.8%)}
  100%{opacity:.88;transform:translate(-.8%,.6%)}
}

body{
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  max-width:100%;
  overscroll-behavior-x:none;
}

/* ── Шапка ── */
.mafia-brand-header{
  background:color-mix(in srgb,var(--bg) 72%,transparent)!important;
  backdrop-filter:saturate(1.25) blur(16px);
  -webkit-backdrop-filter:saturate(1.25) blur(16px);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,var(--border))!important;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  padding:calc(10px + env(safe-area-inset-top)) 14px 11px!important;
  gap:12px!important;
}
.mafia-brand-mark{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
  background:#0b0e14;
  border:1px solid color-mix(in srgb,var(--accent) 35%,rgba(255,255,255,.08));
  box-shadow:var(--polish-accent-glow),inset 0 1px 0 rgba(255,255,255,.12);
}
.mafia-brand-mark::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--polish-border-grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.75;animation:mafiaLogoRing 4s ease-in-out infinite;
}
.mafia-brand-mark::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(125deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);
  animation:mafiaLogoShine 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes mafiaLogoRing{
  0%,100%{opacity:.55;filter:blur(0)}
  50%{opacity:1;filter:blur(.5px)}
}
@keyframes mafiaLogoShine{
  0%,72%,100%{transform:translateX(-120%) skewX(-12deg);opacity:0}
  78%,88%{opacity:1}
  100%{transform:translateX(120%) skewX(-12deg);opacity:0}
}
.mafia-brand-logo{
  width:100%;height:100%;display:block;object-fit:cover;
  animation:mafiaLogoFloat 5s ease-in-out infinite;
}
@keyframes mafiaLogoFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1.5px) scale(1.02)}
}
.mafia-brand-text{flex:1;min-width:0}
.mafia-brand-text h1{
  font-size:1.08rem!important;font-weight:900!important;
  letter-spacing:.02em;line-height:1.15;
  background:linear-gradient(120deg,var(--text) 0%,color-mix(in srgb,var(--accent) 35%,var(--text)) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.mafia-brand-tag{
  display:block;font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--hint) 88%,var(--accent));
  margin-top:2px;
}
.header-badge{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#ec4899))!important;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent);
  border:1px solid rgba(255,255,255,.15);
  padding:4px 10px!important;
}

/* ── Навигация (закреплена снизу на всю ширину) ── */
.bottom-nav{
  position:fixed!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  margin:0!important;
  border-radius:0!important;
  background:color-mix(in srgb,var(--bg2) 86%,transparent)!important;
  backdrop-filter:saturate(1.35) blur(18px);
  -webkit-backdrop-filter:saturate(1.35) blur(18px);
  border-top:1px solid color-mix(in srgb,var(--accent) 12%,var(--border))!important;
  border-bottom:none!important;
  box-shadow:0 -12px 36px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  padding:4px 2px calc(4px + env(safe-area-inset-bottom))!important;
}
body:not([data-app-shell]){padding-bottom:5.05rem}
.nav-item.active{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-radius:14px;
}
.app-shell-top{
  background:color-mix(in srgb,var(--bg) 80%,transparent)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.app-shell-top .nav-item.active{
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  border-radius:12px;
}

/* ── Карточки и блоки ── */
.card,.player-row,.game-row,.my-game-card,.ann-card,.pool-builder-role,.nom-card{
  position:relative;
  background:linear-gradient(165deg,var(--polish-glass-2),var(--polish-glass))!important;
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border))!important;
  box-shadow:var(--polish-shadow-sm),inset 0 1px 0 rgba(255,255,255,.06)!important;
  border-radius:var(--radius)!important;
  overflow:hidden;
}
.card::before,.player-row::before,.game-row::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--polish-shine);opacity:.55;
}
.ann-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--polish-shine);opacity:.4;
}
.hero::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% -10%,rgba(255,255,255,.08),transparent 65%);
}

/* ── Hero ── */
.hero{
  border-radius:calc(var(--radius) + 2px)!important;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--hero-border,var(--border)))!important;
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%,var(--hero-radial,rgba(108,99,255,.15)),transparent 55%),
    linear-gradient(145deg,var(--hero-g1,rgba(108,99,255,.12)),var(--hero-g2,rgba(236,72,153,.08)))!important;
  box-shadow:var(--polish-shadow),inset 0 1px 0 rgba(255,255,255,.08);
  padding:22px 18px!important;
}
.hero-e{
  font-size:2.75rem!important;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
.hero h2{
  font-size:1.32rem!important;
  font-weight:900!important;
  letter-spacing:-.01em;
}
.hero p{font-size:.84rem!important;opacity:.92}

/* ── Статистика ── */
.stat-grid{gap:10px!important}
.stat-box{
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card))!important;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border))!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:var(--polish-shadow-sm),inset 0 1px 0 rgba(255,255,255,.07)!important;
  padding:14px 8px!important;
}
.stat-box .n{
  font-size:1.55rem!important;
  font-weight:900!important;
  background:linear-gradient(180deg,var(--text),color-mix(in srgb,var(--accent) 40%,var(--text)));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat-box .l{
  font-size:.62rem!important;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ── Заголовки секций ── */
.stitle{
  font-size:.7rem!important;
  letter-spacing:.12em!important;
  color:color-mix(in srgb,var(--hint) 70%,var(--accent))!important;
}
.stitle::after{
  height:2px!important;
  border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent)!important;
  opacity:1!important;
}

/* ── Кнопки ── */
.btn-primary{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#a855f7))!important;
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.2)!important;
  border:1px solid color-mix(in srgb,#fff 18%,var(--accent))!important;
}
.btn-primary::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:btnShimmer 4.5s ease-in-out infinite;
}
@keyframes btnShimmer{
  0%,68%,100%{transform:translateX(-120%)}
  78%,88%{transform:translateX(120%)}
}
.btn-outline{
  border-color:color-mix(in srgb,var(--accent) 22%,var(--border))!important;
  background:color-mix(in srgb,var(--card) 80%,transparent)!important;
}
.btn-danger{
  background:linear-gradient(135deg,#f87171,#dc2626)!important;
  box-shadow:0 6px 18px rgba(220,38,38,.28)!important;
}

/* ── Поля ввода ── */
.input,.search-box input{
  background:color-mix(in srgb,var(--bg) 55%,var(--card))!important;
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border))!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
}
.input:focus,.search-box input:focus{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),inset 0 1px 2px rgba(0,0,0,.08)!important;
}

/* ── Пилюли и вкладки ── */
.pill,.ptab{
  border-radius:999px!important;
  border-color:color-mix(in srgb,var(--accent) 10%,var(--border))!important;
}
.pill.active,.ptab.active{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#818cf8))!important;
  box-shadow:var(--polish-accent-glow)!important;
  border-color:transparent!important;
}
.ptabs{
  border-radius:999px!important;
  padding:4px!important;
  background:color-mix(in srgb,var(--bg) 50%,var(--card))!important;
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border))!important;
}
.ptab{border-radius:999px!important}

/* ── Анонсы ── */
.ann-card{
  position:relative;overflow:hidden;
}
.ann-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#ec4899));
  border-radius:3px 0 0 3px;
}
.ann-card h3{font-size:.92rem!important;letter-spacing:-.01em}
.ann-meta{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:8px;
  border-top:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  font-size:.68rem;color:var(--hint);
}

/* ── Игроки / рейтинг ── */
.player-row,.game-row{
  border-radius:var(--radius-sm)!important;
}
.pr-rank.r1,.pr-rank.r2,.pr-rank.r3{
  box-shadow:0 4px 12px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25);
}
.pr-name{font-weight:700!important}

/* ── Роли ── */
.role-card{
  border-radius:var(--radius)!important;
  box-shadow:var(--polish-shadow-sm)!important;
  border:1px solid color-mix(in srgb,var(--accent) 8%,var(--border))!important;
  overflow:hidden;
}
.role-card-name{font-weight:800!important}

/* ── Фазы игры ── */
.phase-banner{
  border-radius:var(--radius)!important;
  box-shadow:var(--polish-shadow-sm),inset 0 1px 0 rgba(255,255,255,.08)!important;
  letter-spacing:.02em;
}
.phase-night{box-shadow:var(--polish-shadow-sm),0 0 24px rgba(99,102,241,.15)!important}
.phase-day{box-shadow:var(--polish-shadow-sm),0 0 24px rgba(250,204,21,.12)!important}
.phase-voting{box-shadow:var(--polish-shadow-sm),0 0 20px rgba(168,162,158,.1)!important}

/* ── Модалки ── */
.modal-overlay.open{
  background:rgba(4,6,14,.72)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.modal-sheet{
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border))!important;
  box-shadow:0 -20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 92%,#fff 2%),var(--bg))!important;
}

/* ── Пустые состояния ── */
.empty{
  padding:36px 20px!important;
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--card) 65%,transparent);
  border:1px dashed color-mix(in srgb,var(--accent) 16%,var(--border));
}
.empty .ei{
  opacity:.65!important;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.2));
}

/* ── Toast ── */
.toast-container{
  position:fixed!important;
  top:calc(env(safe-area-inset-top,0px) + var(--toast-stack-top,4.35rem))!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  z-index:500!important;
  width:calc(100% - 24px);
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
body[data-app-shell="top"] .toast-container{
  top:calc(env(safe-area-inset-top,0px) + var(--toast-stack-top,7.6rem))!important;
}
body:has(#netErrorBar:not(.hidden)) .toast-container{
  top:calc(env(safe-area-inset-top,0px) + var(--toast-stack-top,4.35rem) + 2.6rem)!important;
}
.mafia-brand-header.mafia-header-compact~.app-shell-top~.toast-container,
body:has(.mafia-brand-header.mafia-header-compact) .toast-container{
  top:calc(env(safe-area-inset-top,0px) + var(--toast-stack-top,3.85rem))!important;
}
.toast{
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 32px rgba(0,0,0,.42)!important;
}
.toast-success{background:linear-gradient(135deg,#16a34a,#15803d)!important}
.toast-error{background:linear-gradient(135deg,#dc2626,#b91c1c)!important}
.toast-info{background:linear-gradient(135deg,#2563eb,#1d4ed8)!important}

/* ── Баннер игры ── */
#gameBanner:not(.hidden) .card,
#gameBanner:not(.hidden)>div{
  border-radius:var(--radius)!important;
  box-shadow:var(--polish-shadow-sm),0 0 28px color-mix(in srgb,var(--accent) 15%,transparent)!important;
}

/* ── Казино / кланы ── */
.casino-wallet{
  border-radius:22px!important;
  box-shadow:var(--polish-shadow),inset 0 1px 0 rgba(255,255,255,.1)!important;
}
#pgClansContent .card{
  border-radius:var(--radius)!important;
}
.clans-tap-btn{
  box-shadow:var(--polish-shadow),0 0 48px color-mix(in srgb,var(--accent) 12%,transparent)!important;
}

/* ── Светлая тема: чуть мягче тени ── */
body[data-app-theme="light"] .card,
body[data-app-theme="light"] .player-row,
body[data-app-theme="light"] .stat-box{
  box-shadow:0 2px 12px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.8)!important;
}
body[data-app-theme="light"] .mafia-brand-text h1{
  -webkit-text-fill-color:initial;
  color:var(--text);
  background:none;
}

/* ── Счётчики и бейджи ── */
.mafia-number-pop .n,.mafia-number-pop .pr-score-num{
  animation:mafiaNumberPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes mafiaNumberPop{
  0%{transform:scale(.82);opacity:.5}
  60%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}

/* ── Reduced motion: polish ── */
html[data-a11y-motion="reduce"] body:not([data-app-theme])::before,
html[data-a11y-motion="reduce"] body:not([data-app-theme])::after,
html[data-a11y-motion="reduce"] .mafia-brand-logo,
html[data-a11y-motion="reduce"] .mafia-brand-mark::before,
html[data-a11y-motion="reduce"] .mafia-brand-mark::after,
html[data-a11y-motion="reduce"] .btn-primary::after{
  animation:none!important;
}