/* ═══ UI Motion — плавные переходы и микро-анимации ═══ */
:root{
  --ease-out-smooth:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-soft:cubic-bezier(0.4,0,0.2,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --motion-dur:0.48s;
  --motion-fast:0.28s;
}
html{scroll-behavior:smooth}

/* ── Страницы ── */
.page{
  animation:none!important;
  will-change:opacity,transform;
  overflow-x:hidden;
  max-width:100%;
}
.page.active{
  animation:mafiaPageIn var(--motion-dur) cubic-bezier(0.16,1,0.3,1) both!important;
}
.page.active.mafia-page-from-right{
  animation:mafiaPageFromRight var(--motion-dur) cubic-bezier(0.16,1,0.3,1) both!important;
}
.page.active.mafia-page-from-left{
  animation:mafiaPageFromLeft var(--motion-dur) cubic-bezier(0.16,1,0.3,1) both!important;
}
@keyframes mafiaPageIn{
  from{opacity:0;transform:translateY(12px) scale(.993)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes mafiaPageFromRight{
  from{opacity:0;transform:translateY(10px) scale(.995)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes mafiaPageFromLeft{
  from{opacity:0;transform:translateY(10px) scale(.995)}
  to{opacity:1;transform:none;filter:none}
}

/* ── Нижняя навигация ── */
.bottom-nav{
  transition:box-shadow var(--motion-fast) var(--ease-soft),border-color var(--motion-fast);
  overflow-x:hidden;
  max-width:100%;
}
.nav-item{
  position:relative;
  transition:color var(--motion-fast) var(--ease-soft),transform 0.26s var(--ease-spring),background var(--motion-fast)!important;
}
.nav-item:active:not(.active){
  transform:scale(.94)!important;
}
.nav-item.active{
  transform:translateY(-2px);
}
.nav-item.active::after{
  content:'';
  position:absolute;
  bottom:1px;
  left:14%;
  right:14%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 90%,#fff),transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent);
  animation:navPillIn 0.45s var(--ease-spring) both;
}
.nav-item.active::before{
  content:'';position:absolute;inset:4px 6px;border-radius:12px;
  background:radial-gradient(ellipse 80% 70% at 50% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);
  pointer-events:none;animation:navGlowIn .5s var(--ease-out-smooth) both;
}
@keyframes navGlowIn{
  from{opacity:0;transform:scaleY(.6)}
  to{opacity:1;transform:none}
}
@keyframes navPillIn{
  from{opacity:0;transform:scaleX(0.2)}
  to{opacity:1;transform:scaleX(1)}
}
.nav-item .ni{
  transition:transform 0.28s var(--ease-spring);
}
.nav-item.active .ni{
  transform:scale(1.12);
  filter:drop-shadow(0 2px 8px rgba(108,99,255,.45));
}

/* ── Карточки и списки (stagger через JS) ── */
.card,.player-row,.stat-box,.ann-card,.game-row,.nom-card,.vote-option{
  transition:transform var(--motion-fast) var(--ease-out-smooth),
    box-shadow var(--motion-fast) var(--ease-out-smooth),
    border-color var(--motion-fast),
    background var(--motion-fast)!important;
}
.card.mafia-stagger-in,.player-row.mafia-stagger-in,.stat-box.mafia-stagger-in,
.ann-card.mafia-stagger-in,.game-row.mafia-stagger-in,.role-card.mafia-stagger-in,
.mafia-podium-card.mafia-stagger-in{
  animation:mafiaStaggerIn 0.48s var(--ease-out-smooth) both;
  animation-delay:calc(var(--stagger-i,0) * 42ms);
}
@keyframes mafiaStaggerIn{
  from{opacity:0;transform:translateY(22px) scale(0.97);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
@media (hover:hover){
  .card:hover:not(.clans-clicker):not(.clans-war),.player-row:hover,.role-card:hover{
    transform:translateY(-3px) scale(1.005);
    box-shadow:0 14px 36px rgba(0,0,0,.26),0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
  }
}
.card:active,.player-row:active,.role-card:active,.game-row:active:not(.clans-clicker):not(.clans-war){
  transform:scale(.985)!important;
  transition-duration:.12s!important;
}
#clansMainAction.card:active,.clans-clicker.card:active,.clans-war.card:active{
  transform:none!important;
}

/* ── Кнопки ── */
.btn{
  transition:transform 0.22s var(--ease-spring),box-shadow var(--motion-fast),
    background var(--motion-fast),filter var(--motion-fast),border-color var(--motion-fast)!important;
}
.btn-primary:not(:active){
  box-shadow:0 4px 16px rgba(108,99,255,.28);
}
.btn-primary:active,.btn-danger:active{
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.pill,.ptab{
  transition:transform 0.2s var(--ease-spring),background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)!important;
}
.pill.active,.ptab.active{
  animation:pillPop 0.32s var(--ease-spring) both;
}
@keyframes pillPop{
  0%{transform:scale(0.94)}
  70%{transform:scale(1.04)}
  100%{transform:scale(1)}
}

/* ── Hero & статистика ── */
.hero{
  animation:heroIn 0.62s var(--ease-out-expo) both;
}
.hero-e{
  animation:heroEmojiFloat 4.5s ease-in-out infinite;
  display:inline-block;
}
@keyframes heroEmojiFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-6px) rotate(2deg)}
}
.hero.mafia-hero-tilt .hero-e{
  transition:transform .35s var(--ease-out-smooth);
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);
  animation:heroShimmer 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(14px) scale(0.97);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes heroShimmer{
  0%,100%{transform:translateX(-30%) rotate(-8deg);opacity:0}
  45%,55%{opacity:1}
  100%{transform:translateX(30%) rotate(-8deg);opacity:0}
}
.stat-box:nth-child(1){animation-delay:0.04s}
.stat-box:nth-child(2){animation-delay:0.1s}
.stat-box:nth-child(3){animation-delay:0.16s}

/* ── Фаза игры ── */
.phase-banner{
  transition:background 0.45s var(--ease-soft),border-color 0.45s,color 0.45s,
    box-shadow 0.35s var(--ease-out-smooth)!important;
  animation:phaseBannerIn 0.5s var(--ease-out-smooth) both;
}
.phase-banner.mafia-phase-pulse{
  animation:phasePulse 0.65s var(--ease-out-smooth) both!important;
}
@keyframes phaseBannerIn{
  from{opacity:0;transform:translateY(-10px) scale(0.97)}
  to{opacity:1;transform:none}
}
@keyframes phasePulse{
  0%,100%{transform:scale(1);box-shadow:none}
  40%{transform:scale(1.02);box-shadow:0 0 28px rgba(108,99,255,.22)}
}

/* ── Модалки ── */
.modal-overlay.open{
  animation:modalBackdropIn 0.34s var(--ease-soft) both;
}
.modal-overlay.open .modal-sheet{
  animation:modalSheetIn 0.44s var(--ease-out-smooth) both!important;
}
@keyframes modalBackdropIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes modalSheetIn{
  from{opacity:0;transform:translateY(100%) scale(0.96)}
  70%{transform:translateY(-4px) scale(1.01)}
  to{opacity:1;transform:none}
}
.best-move-overlay.open .best-move-sheet{
  animation:bestMoveSheet 0.48s var(--ease-out-smooth) both!important;
}

/* ── Toast ── */
.toast{
  animation:toastBounceIn 0.48s var(--ease-spring) both,toastOut 0.32s var(--ease-soft) forwards!important;
  animation-delay:0s,var(--toast-dur,3.2s)!important;
  backdrop-filter:blur(8px);
}
@keyframes toastBounceIn{
  from{opacity:0;transform:translateY(-20px) scale(0.92)}
  60%{transform:translateY(4px) scale(1.02)}
  to{opacity:1;transform:none}
}

/* ── Баннер игры на главной ── */
#gameBanner:not(.hidden){
  animation:bannerSlideIn 0.48s var(--ease-out-smooth) both;
}
@keyframes bannerSlideIn{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:none}
}

/* ── Пустые состояния ── */
.empty{
  animation:emptyFade 0.55s var(--ease-out-smooth) both;
}
.empty .ei{
  animation:emptyIconBob 2.4s ease-in-out infinite;
}
@keyframes emptyFade{
  from{opacity:0;transform:scale(0.96)}
  to{opacity:1;transform:none}
}
@keyframes emptyIconBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* ── Инпуты ── */
.input:focus,.search-box input:focus{
  box-shadow:0 0 0 3px rgba(108,99,255,.18);
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast)!important;
}

/* ── Сеть / загрузка ── */
#netErrorBar:not(.hidden){
  animation:netBarIn 0.4s var(--ease-out-smooth) both;
}
@keyframes netBarIn{
  from{opacity:0;transform:translateY(-100%)}
  to{opacity:1;transform:none}
}

/* ── Игровой стол ── */
.seat-btn,.game-role-card,.host-ctrl-btn{
  transition:transform 0.22s var(--ease-spring),border-color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast)!important;
}
.seat-btn:not(.taken):active,.host-ctrl-btn:active{
  transform:scale(0.9)!important;
}

/* ── Рейтинг пьедестал ── */
.mafia-podium--gold .mafia-podium-card{
  animation:podiumGold 3s ease-in-out infinite;
}
@keyframes podiumGold{
  0%,100%{box-shadow:0 4px 22px rgba(255,185,60,.18)}
  50%{box-shadow:0 8px 32px rgba(255,210,100,.32)}
}

/* ── Кланы: плавные блоки ── */
.clans-lb-row,.clans-tap-btn{
  transition:transform 0.22s var(--ease-spring),box-shadow 0.3s var(--ease-out-smooth)!important;
}
.clans-tap-btn:not(:active){
  animation:clansTapGlow 3.2s ease-in-out infinite;
}
@keyframes clansTapGlow{
  0%,100%{box-shadow:var(--polish-shadow),0 0 32px color-mix(in srgb,var(--accent) 10%,transparent)}
  50%{box-shadow:var(--polish-shadow),0 0 56px color-mix(in srgb,var(--accent) 22%,transparent)}
}

/* ── Шапка при скролле ── */
.mafia-brand-header.mafia-header-compact{
  padding-top:calc(6px + env(safe-area-inset-top))!important;
  padding-bottom:7px!important;
  box-shadow:0 4px 20px rgba(0,0,0,.22)!important;
}
.mafia-brand-header.mafia-header-compact .mafia-brand-mark{
  width:38px;height:38px;border-radius:12px;
}

/* ── Появление при скролле ── */
.mafia-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease-out-smooth),transform .55s var(--ease-out-smooth),filter .55s;
  filter:blur(4px);
}
.mafia-reveal.mafia-reveal--in{
  opacity:1;transform:none;filter:none;
}

/* ── Ripple на кнопках ── */
.mafia-ripple-host{position:relative;overflow:hidden;isolation:isolate}
.mafia-ripple{
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:rgba(255,255,255,.4);pointer-events:none;
  animation:mafiaRipple 0.58s ease-out forwards;
}
@keyframes mafiaRipple{
  from{transform:scale(0);opacity:0.85}
  to{transform:scale(22);opacity:0}
}

/* ── Reduced motion ── */
html[data-a11y-motion="reduce"] .page.active,
html[data-a11y-motion="reduce"] .hero,
html[data-a11y-motion="reduce"] .hero-e,
html[data-a11y-motion="reduce"] .clans-tap-btn,
html[data-a11y-motion="reduce"] .mafia-reveal{
  animation:none!important;transition:none!important;
  opacity:1!important;transform:none!important;filter:none!important;
}
html[data-a11y-motion="reduce"] .nav-item.active::before{display:none}
html[data-a11y-motion="reduce"] .phase-banner,
html[data-a11y-motion="reduce"] .mafia-stagger-in,
html[data-a11y-motion="reduce"] .empty .ei,
html[data-a11y-motion="reduce"] .nav-item.active::after,
html[data-a11y-motion="reduce"] .mafia-podium--gold .mafia-podium-card{
  animation:none!important;
}
html[data-a11y-motion="reduce"] .hero::after{display:none}