/* Shared icon alignment: reserve space even before SVG rendering finishes. */
.icon{display:inline-block;vertical-align:middle;flex:0 0 15px;width:15px;height:15px;margin:0}
.icon.fi{display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
.socials button{display:flex;align-items:center;justify-content:center}
.socials .icon{width:22px;height:22px;margin:0;flex:none}
.header nav a,.actions button,.tabs button,.login-button,.steam-login{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2}
.header .account .login-button{display:inline-flex;height:36px;padding:0 16px;white-space:nowrap}
.product .cart{display:grid;place-items:center;padding:0}.product-art{display:flex;align-items:center;justify-content:center}.product-art .sprite{max-width:100%}
.sprite{line-height:0}
.inventory .item{display:flex;align-items:center;justify-content:flex-start;flex-direction:column}.inventory .item .sprite{max-width:100%;flex-shrink:1}.inventory .item small{position:absolute;left:0;right:0;text-align:center;line-height:1.1}
.feature .support-floating{position:absolute;top:auto;right:128px;bottom:145px;pointer-events:none;width:40px;height:40px}
.hero .float,.support-floating{pointer-events:none;animation:diamond-float 4s ease-in-out infinite;will-change:translate}
.hero .f2{animation-delay:-1.3s}.hero .f3{animation-delay:-2.6s}.hero .f4{animation-delay:-.7s}.hero .f5{animation-delay:-2s}
@keyframes diamond-float{0%{translate:0 0;rotate:-4deg}20%{translate:9px -14px;rotate:5deg}45%{translate:-6px -20px;rotate:-8deg}70%{translate:-11px -5px;rotate:6deg}100%{translate:0 0;rotate:-4deg}}
.chevrons{position:relative;display:block;width:21px;height:50px;margin:9px auto 0}
.chevrons i{position:absolute;left:0;width:21px;height:21px;border-right:2px solid #666;border-bottom:2px solid #666;transform:rotate(45deg);opacity:.2;animation:chevron-trail 1.8s ease-in-out infinite}
.chevrons i:nth-child(1){top:0;animation-delay:0s}
.chevrons i:nth-child(2){top:14px;animation-delay:.18s}
.chevrons i:nth-child(3){top:28px;animation-delay:.36s}
@keyframes chevron-trail{0%,55%,100%{opacity:.2;border-color:#555}20%{opacity:1;border-color:#a9c8f0}}
.prediction-card .prediction-person{transition:transform .35s ease,filter .35s ease}
.prediction-card:hover .prediction-person{filter:brightness(1.18) drop-shadow(0 0 22px #4fa8ff66);animation:predict-sway 1.7s ease-in-out infinite}
@keyframes predict-sway{0%,100%{transform:scale(1.07) rotate(-1.6deg)}50%{transform:scale(1.07) rotate(1.6deg)}}
.server-person{animation:server-drone-float 4.5s ease-in-out infinite}
@keyframes server-drone-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(1deg)}}
.mini-drone{position:absolute;z-index:1;pointer-events:none;animation:diamond-float 3.6s ease-in-out infinite}
.mini-drone .drone-img{display:block;transform:scaleX(-1);filter:drop-shadow(0 6px 10px #00000066)}
.mini-drone.md1{top:-92px;right:250px;animation-delay:-.8s}
.mini-drone.md2{top:60px;right:420px;opacity:.85;animation-delay:-1.9s}
.mini-drone.md3{top:-62px;right:95px;opacity:.7;animation-delay:-2.9s}
.mini-drone.md4{top:18px;left:5%;opacity:.65;animation-delay:-1.4s}
details::details-content{transition:none}
.server-card{transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.server-card:hover{background:#33445c;transform:translateX(8px);box-shadow:0 10px 30px #14274a4d}
.server-card>strong{font-family:Unbounded,Arial,sans-serif}
.net-light{fill:#4d9fff;filter:drop-shadow(0 0 5px #4d9fffcc)}
.net-streak{fill:none;stroke:#f4f4f4;stroke-width:3;stroke-linecap:round;stroke-dasharray:20 80;opacity:.6;filter:drop-shadow(0 0 4px #ffffffbb)}
.net-streak-dot{fill:#f4f4f4;filter:drop-shadow(0 0 5px #ffffffcc)}
.net-core{transform-box:fill-box;transform-origin:center;animation:net-rotate 4s linear infinite;filter:drop-shadow(0 0 8px #4d9fff88)}
@keyframes net-rotate{to{transform:rotate(360deg)}}
.net-pulse{transform-box:fill-box;transform-origin:center;animation:net-pulse 1.5s ease-in-out infinite}
@keyframes net-pulse{0%,100%{opacity:.5;transform:scale(.75)}50%{opacity:1;transform:scale(1.35)}}
.calendar .days{cursor:grab;user-select:none}
.calendar .days.dragging{cursor:grabbing;scroll-snap-type:none}
.calendar .days button{user-select:none}
@media(max-width:850px){.mini-drone{display:none}}
.advantages{position:relative;display:block;height:435px;touch-action:pan-y}
.advantages .adv,.advantages .adv.selected,.advantages .adv.edge{position:absolute;left:50%;top:18px;width:300px;height:400px;margin:0;padding:22px 15px;transform:translateX(calc(-50% + var(--shift))) scale(var(--scale));transform-origin:center;transition:transform .75s cubic-bezier(.22,.68,.2,1),opacity .6s;opacity:1;z-index:2}
.advantages .adv.edge{opacity:.35;z-index:0}.advantages .adv.selected{z-index:3}.advantages .adv.wrapping{transition:none;opacity:0}
.advantages .adv h3,.advantages .adv.selected h3,.advantages .adv.edge h3{font-size:23px;white-space:normal}
.advantages .adv p,.advantages .adv.selected p,.advantages .adv.edge p{font-size:16px;line-height:1.3}
.advantages .adv .adv-art,.advantages .adv.selected .adv-art,.advantages .adv.edge .adv-art{width:245px;height:230px;bottom:40px}
.advantages .adv-anticheat .adv-art,.advantages .adv-anticheat.selected .adv-art{width:165px;height:180px;bottom:85px}
.adv-clans,.adv-clans.selected{background:linear-gradient(#2c3036,#345679)}.adv-rewards,.adv-rewards.selected{background:linear-gradient(#2c3036,#314c69)}
.adv:focus-visible{outline:2px solid #64b0ff;outline-offset:-4px}
dialog[open]{animation:dialog-enter .2s ease-out}dialog::backdrop{animation:backdrop-enter .2s ease-out}
dialog.closing{animation:dialog-leave .2s ease-in forwards}dialog.closing::backdrop{animation:backdrop-leave .2s ease-in forwards}
@keyframes dialog-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes dialog-leave{from{opacity:1;translate:0 0}to{opacity:0;translate:0 10px}}@keyframes backdrop-leave{from{opacity:1}to{opacity:0}}
.login-panel{text-align:center;padding:15px 14px 8px}.login-panel>.diamond{width:62px;height:62px;margin-bottom:25px}.login-panel>.diamond svg{width:45px;height:45px}.login-panel h2{font-size:22px;line-height:1.6}.login-panel p{font-size:14px}.steam-login{width:100%;height:48px;margin-top:14px;border-radius:8px;font-weight:700;cursor:pointer;text-decoration:none}.login-panel .demo-note{font-size:12px;margin-top:18px}
.reel-track{position:relative}.reel-track.spinning{animation:none}
.reel:after{transform:translateX(-50%)}
.reel:before{content:'';position:absolute;left:50%;bottom:0;top:auto;width:6px;height:12px;border-radius:6px;background:#367dcc;transform:translateX(-50%);z-index:2}
.reel .item.landed{box-shadow:0 0 22px 3px var(--rarity,#4d9fff)}
/* Generic accordion chevron + smooth open/close, shared by every <details> on the site. */
summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:'';width:9px;height:9px;border-right:2px solid #999;border-bottom:2px solid #999;transform:rotate(45deg);transition:transform .25s ease;flex:none}
details[open] summary::after{transform:rotate(-135deg)}
details .detail-body{overflow:hidden;transition:height .25s ease}
.live-drops .drop{overflow:hidden;box-shadow:inset 0 52px 36px -34px color-mix(in srgb,var(--rarity,#4d9fff) 45%,transparent)}
.live-drops .drop:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--rarity,#4d9fff)}
.days{scrollbar-width:none}.days::-webkit-scrollbar{display:none}
/* Live drop ticker: track is duplicated in the markup, so a -50% scroll loops seamlessly. */
html,body{overflow-x:hidden}
.live-drops{max-width:100vw}
.live-drops-tag{flex:0 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#1b1b1b;border-right:1px solid #2c2c2c;overflow:hidden}
.live-drops-tag .dot{width:6px;height:6px;flex:none;border-radius:50%;background:#ff4757;box-shadow:0 0 0 4px #ff475733;animation:live-dot-pulse 1.6s ease-in-out infinite}
.live-drops-tag .label{writing-mode:vertical-rl;transform:rotate(180deg);color:#ff4757;font:800 10px Unbounded,Arial,sans-serif;letter-spacing:.2px;text-transform:none;white-space:nowrap;max-height:100%}
.live-drops-viewport{flex:1;min-width:0;max-width:100%;overflow:hidden}
.live-drops-track{display:flex;width:max-content;animation:live-drops-scroll 42s linear infinite;will-change:transform;backface-visibility:hidden}
@keyframes live-drops-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes live-dot-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:600px){.header nav{width:100%;min-width:0;gap:2px}.header nav a{min-width:0;padding:8px 3px;gap:4px;font-size:11px}.header nav a span{font-size:11px}.header nav a .icon{width:11px;height:11px;flex-basis:11px;margin:0}}
@media(min-width:601px) and (max-width:1000px){.hero .f1{top:48px}.hero .f4,.hero .f5{top:300px}.hero .f4{right:25px}.hero .f5{left:30px}}
@media(max-width:600px){.header .account .login-button{display:inline-flex;height:34px;font-size:12px;padding:0 12px}.advantages{height:350px}.advantages .adv,.advantages .adv.selected,.advantages .adv.edge{top:-20px}.feature .support-floating{right:100px;bottom:130px;width:32px;height:32px}.banner .bonus-person{right:-30px;width:180px;height:195px;bottom:42px;mask-image:linear-gradient(90deg,transparent,#000 35%)}.banner .actions{position:absolute;left:22px;right:15px;bottom:15px}.banner p{max-width:190px}.product .row strong{overflow-wrap:anywhere}.inventory .item .sprite{height:40px}.login-panel h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero .float,.support-floating{will-change:auto}}

@media(min-width:601px){.hero .float.f2{top:62px}.hero .float.f3{top:75px}}

.lang-switch{display:flex}
.lang-switch .dropdown-toggle{width:46px;height:46px;padding:0;border-radius:50%;justify-content:center;background:#242424;overflow:hidden}
.lang-switch .dropdown-toggle:hover{background:#2f2f2f}
.lang-switch .fi.lang-flag{width:24px;height:18px;flex:none;border-radius:3px;box-shadow:0 0 0 1px #ffffff26;background-color:#3a3f47}
.lang-switch .dropdown-toggle .fi.lang-flag{width:24px;height:24px;border-radius:50%;box-shadow:none}
.lang-switch .dropdown-panel{top:auto;bottom:calc(100% + 10px);right:0;left:auto;width:360px;min-width:auto;max-height:none;overflow:visible;padding:10px;display:none;background:#20242b;border:1px solid #333a45}
.lang-switch.open .lang-panel{display:grid}
.lang-panel{grid-template-columns:repeat(2,1fr);gap:6px}
.lang-switch .dropdown-item{width:100%;height:auto;gap:8px;padding:10px 8px;border-radius:8px}
.lang-switch .dropdown-item span{flex:1;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:800;letter-spacing:.1px;text-transform:uppercase;color:#dfe3ea;text-align:left}
.lang-switch .dropdown-item:hover{background:#2b3140}
.lang-switch .dropdown-item.selected{background:linear-gradient(100deg,#25344a,#1e5aa1);box-shadow:inset 0 0 0 1px #4c93ffa0}
.lang-switch .dropdown-item.selected span{color:#fff}
@media(max-width:600px){.lang-switch .dropdown-panel{position:fixed;left:16px;right:16px;bottom:16px;top:auto;width:auto;max-height:70vh;overflow-y:auto}}
.account-menu .account-toggle{background:#2d2d2d}
.account-menu .account-toggle:hover{background:#3a3a3a}
.account-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.account-menu .dropdown-panel{top:calc(100% + 6px);right:0;left:auto;min-width:170px}
@media(max-width:1000px){.account-toggle span{display:none}}