:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .7, .2);
}

@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes back-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes back-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes card-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

#app > .wrap { animation: page-in .28s var(--ease-out) backwards; }
.adm-main-in, .tu-form > *, .ch-pane > * { animation: fade-up .24s var(--ease-out) backwards; }

.modal-back { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: back-in .22s var(--ease-out) both; }
.modal-card { animation: card-in .28s var(--ease-out) both; }
.modal.is-closing { pointer-events: none; }
.modal.is-closing .modal-back { animation: back-out .2s var(--ease-in) both; }
.modal.is-closing .modal-card { animation: card-out .2s var(--ease-in) both; }
.wl-modal .wl-dim { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: back-in .22s var(--ease-out) both; }
.wl-modal .wl-dlg { animation: card-in .28s var(--ease-out) both; }
.wl-modal.is-closing { pointer-events: none; }
.wl-modal.is-closing .wl-dim { animation: back-out .2s var(--ease-in) both; }
.wl-modal.is-closing .wl-dlg { animation: card-out .2s var(--ease-in) both; }

.pc, .pcard, .gcard { transition: transform .28s var(--ease-out), filter .28s var(--ease-out); }
.pc:hover, .pcard:hover, .gcard:hover { transform: translateY(-4px) scale(1.01); filter: drop-shadow(0 14px 26px rgba(20, 83, 255, .16)); }
html[data-theme="dark"] .pc:hover, html[data-theme="dark"] .pcard:hover, html[data-theme="dark"] .gcard:hover { filter: drop-shadow(0 14px 28px rgba(82, 134, 255, .22)); }

.btn, .tu-pay, .wl-pay, .sp-buy, .sp-msg, .icon-btn, .wl-back, .adm-back, .adm-tab, .tu-tab, .pay-m, .chat-send, .cats-arrow, .fch-i {
  transition: transform .16s var(--ease-out), background-color .2s, color .2s, box-shadow .2s, opacity .2s, border-color .2s;
}
.btn:active:not(:disabled), .tu-pay:active:not(:disabled), .wl-pay:active:not(:disabled), .sp-buy:active, .sp-msg:active, .icon-btn:active, .wl-back:active,
.adm-back:active, .adm-tab:active, .tu-tab:active, .pay-m:active:not(:disabled), .chat-send:active, .cats-arrow:active { transform: scale(.97); }
.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-secondary.is-busy::after { border-color: color-mix(in srgb, var(--text) 30%, transparent); border-top-color: var(--text); }

.pc-pic, .pcard-media { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.pc-pic.has-img, .pcard-media.has-img { animation: none; background-image: none; }
.pc-pic img, .pcard-img, .pcard-ph-bg { opacity: 0; transition: opacity .4s var(--ease-out); }
.pc-pic img.is-loaded, .pcard-img.is-loaded, .pcard-ph-bg.is-loaded { opacity: 1; }

.tu-field { transition: box-shadow .2s, background-color .2s; }
.tu-field.is-err { animation: shake .42s var(--ease-out); box-shadow: inset 0 0 0 2px #ff4d5e; }
.tu-field.is-err::after { content: attr(data-hint); position: absolute; left: 4px; top: calc(100% + 6px); z-index: 3; padding: 6px 10px; border-radius: 10px; background: #ff4d5e; color: #fff; font-size: 13px; line-height: 18px; white-space: nowrap; animation: fade-up .2s var(--ease-out) both; }
.tu-resume .tu-panel { box-shadow: 0 0 0 2px var(--blue); transition: box-shadow .4s; }
.wl-preset .wl-field { box-shadow: 0 0 0 2px var(--blue); border-radius: 16px; }

.ok-layer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 16, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s var(--ease-out); }
.ok-layer.on { opacity: 1; }
.ok-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(380px, 100%); padding: 28px 24px 22px; border-radius: 24px; background: var(--card); color: var(--text); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); transform: translateY(16px) scale(.96); transition: transform .4s var(--ease-out); }
.ok-layer.on .ok-card { transform: none; }
.ok-check { width: 76px; height: 76px; margin-bottom: 8px; fill: none; stroke: #22c55e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ok-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s var(--ease-out) .1s forwards; }
.ok-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s var(--ease-out) .6s forwards; }
.ok-card > b { font-size: 22px; font-weight: 800; }
.ok-card > span { color: var(--muted); font-size: 14px; }
.ok-card > small { margin-top: 8px; color: var(--muted); font-size: 13px; }
.ok-list { width: 100%; margin: 12px 0 0; display: grid; gap: 8px; text-align: left; }
.ok-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); opacity: 0; animation: fade-up .3s var(--ease-out) forwards; }
.ok-list > div:nth-child(1) { animation-delay: .75s; }
.ok-list > div:nth-child(2) { animation-delay: .85s; }
.ok-list > div:nth-child(3) { animation-delay: .95s; }
.ok-list > div:nth-child(4) { animation-delay: 1.05s; }
.ok-list dt { color: var(--muted); font-size: 13px; }
.ok-list dd { margin: 0; font-weight: 700; font-size: 13px; text-align: right; word-break: break-word; }

.pv-media > img.bg { opacity: 1; }
.pv-media:not(.pv-cover)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%); pointer-events: none; }
.pv-media .pv-logo { z-index: 1; border: 0; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.pv-media.pv-cover { aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; }
.pv-media.pv-cover img.pv-blur { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(32px) saturate(1.2) brightness(.75); }
.pv-media.pv-cover img.pv-main { position: relative; z-index: 1; inset: auto; width: auto; height: auto; max-width: min(92%, 560px); max-height: min(92%, 420px); object-fit: contain; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.game-hero > img.bg { opacity: 1; }
.game-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--card) 0%, color-mix(in srgb, var(--card) 88%, transparent) 38%, color-mix(in srgb, var(--card) 20%, transparent) 75%, transparent 100%); pointer-events: none; }
.game-hero > *:not(.bg) { position: relative; z-index: 1; }
.pv-media:not(.pv-cover) > img.bg { filter: blur(18px) saturate(1.25); transform: scale(1.12); }
.game-hero > img.bg.hero { object-position: center; }
.pcard-ph-bg, .pc-pic img.pc-pic-blur { filter: blur(18px) saturate(1.35) brightness(.92); transform: scale(1.25); }
.pcard-ph-logo { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 16px 36px rgba(0, 0, 0, .3); }
.pc-pic img.pc-pic-logo { width: 88px; height: 88px; border-radius: 22px; }