/* A small, composited transition shared by both sides of the Mini App. */
html.skin-entry-running { overflow:hidden!important; }
.skin-entry { position:fixed; inset:0; z-index:2147483646; display:grid; place-items:center; overflow:hidden; background:#090e17; color:#dbeeff; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease,visibility .24s; contain:paint; }
.skin-entry.is-active { opacity:1; visibility:visible; pointer-events:auto; }
.skin-entry::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 25% 35%,#176f9e26,transparent 50%),radial-gradient(ellipse at 75% 65%,#8354ee26,transparent 50%); }
.skin-entry-scene { position:relative; width:min(100vw,650px); height:min(76vh,620px); perspective:950px; }
.skin-entry-grid { position:absolute; inset:10% -15%; background:linear-gradient(#7ed5ed08 1px,transparent 1px),linear-gradient(90deg,#7ed5ed08 1px,transparent 1px); background-size:48px 48px; transform:rotateX(65deg) rotateZ(-20deg); mask-image:radial-gradient(ellipse,#000,transparent 70%); }
.skin-entry-ring { position:absolute; left:50%; top:48%; width:72%; aspect-ratio:1; border:1px solid #76ceee20; border-radius:50%; transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-24deg); box-shadow:0 0 40px #3da1e00a; }
.skin-entry-ring::before,.skin-entry-ring::after { content:""; position:absolute; inset:-10%; border:1px solid #b397ff15; border-radius:50%; }
.skin-entry-ring::after { inset:15%; border-color:#77d3ea12; }
.skin-entry-card { --x:0px; --y:0px; --angle:0deg; --scale:1; --glow:109,194,233; position:absolute; left:50%; top:48%; width:68%; aspect-ratio:1.75; border:1px solid rgba(var(--glow),.19); border-radius:28px; background:linear-gradient(150deg,#27384bee,#151c28f0); box-shadow:0 30px 70px #0006; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--angle)) scale(var(--scale)); opacity:0; }
.skin-entry-card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(ellipse at 50% 100%,rgba(var(--glow),.2),transparent 68%); }
.skin-entry-card::after { content:""; position:absolute; bottom:0; left:22%; right:22%; height:3px; border-radius:5px; background:rgb(var(--glow)); box-shadow:0 0 18px rgba(var(--glow),.7); }
.skin-entry-card img { position:absolute; inset:-15% -8%; width:116%; height:130%; object-fit:contain; filter:drop-shadow(0 18px 15px #0007); }
.skin-entry-card-awp { --x:28px; --y:-110px; --angle:12deg; --scale:.8; --glow:127,142,252; }
.skin-entry-card-knife { --x:-34px; --y:128px; --angle:-12deg; --scale:.72; --glow:174,133,244; }
.skin-entry-card-knife img { transform:rotate(-15deg); }
.skin-entry-card-ak { --angle:-5deg; z-index:2; }
.skin-entry.is-active .skin-entry-card { animation:skinEntryDeal .43s cubic-bezier(.18,.8,.24,1) both; }
.skin-entry.is-active .skin-entry-card-knife { animation-delay:.045s; }
.skin-entry.is-active .skin-entry-card-ak { animation-delay:.09s; }
.skin-entry[data-destination="donat"] .skin-entry-scene { --donat-spread:clamp(78px,20vw,135px); }
.skin-entry[data-destination="donat"] .skin-entry-card { width:46%; aspect-ratio:.82; border-radius:26px; overflow:hidden; background:#172a43; }
.skin-entry[data-destination="donat"] .skin-entry-card img { inset:0; width:100%; height:100%; object-fit:cover; filter:none; transform:none; }
.skin-entry[data-destination="donat"] .skin-entry-card::before { z-index:1; background:linear-gradient(180deg,#0c172500 35%,#0c172535 55%,#0c1725f5 100%); }
.skin-entry[data-destination="donat"] .skin-entry-card::after { z-index:3; }
.skin-entry-card-mlbb { --x:calc(var(--donat-spread) * -1); --y:32px; --angle:-15deg; --scale:.88; --glow:115,157,255; }
.skin-entry-card-telegram { --x:var(--donat-spread); --y:32px; --angle:15deg; --scale:.88; --glow:151,127,247; }
.skin-entry-card-pubg { --y:-12px; --angle:-2deg; z-index:2; --glow:109,207,233; }
.skin-entry.is-active .skin-entry-card-telegram { animation-delay:.045s; }
.skin-entry.is-active .skin-entry-card-pubg { animation-delay:.09s; }
.skin-entry-card-caption { position:absolute; z-index:2; bottom:18px; left:16px; right:16px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; color:#f0f7ff; font-family:Arial,sans-serif; text-shadow:0 2px 8px #0009; }
.skin-entry-card-caption>span { font-size:clamp(10px,2.2vw,15px); font-weight:700; letter-spacing:.04em; }
.skin-entry-card-caption strong { display:flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid #92cfff45; border-radius:10px; background:#133752b3; font-size:clamp(13px,2.8vw,18px); font-weight:700; }
.skin-entry-card-caption svg { width:17px; height:17px; color:#abe4ff; flex-shrink:0; }
.skin-entry-flare { position:absolute; left:15%; right:15%; top:48%; height:1px; background:linear-gradient(90deg,transparent,#89deffb3,transparent); box-shadow:0 0 18px #5dbcf777; opacity:0; }
.skin-entry.is-active .skin-entry-flare { animation:skinEntryFlare .7s ease both; }
.skin-entry-dots { position:absolute; left:50%; bottom:8%; display:flex; gap:7px; transform:translateX(-50%); }
.skin-entry-dots i { width:5px; height:5px; border-radius:50%; background:#a0c6db; opacity:.3; }
.skin-entry.is-active .skin-entry-dots i { animation:skinEntryDot .8s ease-in-out infinite alternate; }
.skin-entry-dots i:nth-child(2) { animation-delay:.13s!important; }
.skin-entry-dots i:nth-child(3) { animation-delay:.26s!important; }
.skin-entry.is-incoming .skin-entry-card { opacity:1; animation:none; }
.skin-entry.is-incoming .skin-entry-flare { animation:none; }
.skin-entry.is-active.is-leaving { opacity:0; pointer-events:none; }
.skin-entry.is-leaving * { animation-play-state:paused!important; }
@keyframes skinEntryDeal { from { opacity:0; transform:translate(calc(-50% + var(--x) * 1.8),calc(-50% + var(--y) * 2 + 100px)) rotate(calc(var(--angle) * 2)) scale(.55); } to { opacity:1; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--angle)) scale(var(--scale)); } }
@keyframes skinEntryFlare { 0% { opacity:0; transform:scaleX(.2) translateY(-160px); } 45% { opacity:.8; } 100% { opacity:0; transform:scaleX(1.2) translateY(170px); } }
@keyframes skinEntryDot { to { opacity:1; transform:translateY(-3px); } }
@media(max-width:400px) { .skin-entry-card { width:74%; border-radius:22px; } .skin-entry-card-awp { --y:-95px; } .skin-entry-card-knife { --y:110px; } }
@media(prefers-reduced-motion:reduce) { .skin-entry { transition:opacity .12s,visibility .12s; } .skin-entry * { animation:none!important; } .skin-entry.is-active .skin-entry-card { opacity:1; } }