/* Модальные окна, награды, анимации и исходные responsive overrides.
   Подключается последним: порядок переопределений сохранён. */

.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:flex-end;justify-content:center;z-index:50}

.modal.open{display:flex}

.sheet{width:min(100%,430px);background:var(--panel2);border:1px solid #353941;border-radius:24px 24px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto}

.anim-overlay{position:fixed;inset:0;background:rgba(9,10,12,.97);display:none;align-items:center;justify-content:center;z-index:70;text-align:center;padding:30px}

.anim-overlay.open{display:flex}

#animContent{width:min(100%,330px)}

.stat-reward .ring{width:164px;height:164px;margin:0 auto 20px}

.stat-reward b{font-size:24px;letter-spacing:-.025em}

.stat-reward .tiny{margin-top:8px}

.fade{animation:fade .35s ease}

@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:360px){
  .screen{padding-inline:14px}.stat-grid,.grid2{gap:8px}.stat-card{padding:12px}
  .stat-percent{top:12px;right:12px}.stat-name{font-size:12px}.class-card{padding:14px}.class-name{font-size:20px}
}

@media(prefers-reduced-motion:reduce){.fade{animation:none}.class-card,button{transition:none}}