:root{--acc:#C8F55A}
[hidden]{display:none!important}
body{margin:0;background:#0C0D10}
a{color:#C9CCD3}a:hover{color:#FFFFFF}
::selection{background:#C8F55A;color:#0C0D10}
button:focus-visible,a:focus-visible{outline:2px solid #C8F55A;outline-offset:3px}
input::placeholder{color:#6B707C}

.mg-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.mg-disp{font-family:'Archivo',system-ui,sans-serif;font-style:italic;font-weight:900;font-stretch:70%;text-transform:uppercase;letter-spacing:-0.005em}
.mg-cut{clip-path:polygon(var(--c,16px) 0,100% 0,100% calc(100% - var(--c,16px)),calc(100% - var(--c,16px)) 100%,0 100%,0 var(--c,16px))}
.mg-panel{position:relative;background:#14161B;clip-path:polygon(var(--c,18px) 0,100% 0,100% calc(100% - var(--c,18px)),calc(100% - var(--c,18px)) 100%,0 100%,0 var(--c,18px))}
.mg-corners{position:absolute;inset:0;pointer-events:none;z-index:3;--l:18px;--w:2px;--k:var(--acc);background:
linear-gradient(var(--k),var(--k)) 0 0/var(--l) var(--w) no-repeat,linear-gradient(var(--k),var(--k)) 0 0/var(--w) var(--l) no-repeat,
linear-gradient(var(--k),var(--k)) 100% 0/var(--l) var(--w) no-repeat,linear-gradient(var(--k),var(--k)) 100% 0/var(--w) var(--l) no-repeat,
linear-gradient(var(--k),var(--k)) 0 100%/var(--l) var(--w) no-repeat,linear-gradient(var(--k),var(--k)) 0 100%/var(--w) var(--l) no-repeat,
linear-gradient(var(--k),var(--k)) 100% 100%/var(--l) var(--w) no-repeat,linear-gradient(var(--k),var(--k)) 100% 100%/var(--w) var(--l) no-repeat}
.mg-tag{position:absolute;z-index:4;left:14px;top:14px;display:inline-flex;align-items:center;padding:5px 10px;background:rgba(12,13,16,.86);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.mg-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 30px;background:var(--acc);color:#0C0D10;font-family:'Archivo',system-ui,sans-serif;font-style:italic;font-weight:900;font-stretch:78%;font-size:20px;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;border:0;cursor:pointer;overflow:hidden;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:transform .2s cubic-bezier(.2,.9,.2,1),filter .2s}
.mg-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .55s cubic-bezier(.2,.9,.2,1)}
.mg-btn:hover{color:#0C0D10;transform:translateY(-3px);filter:brightness(1.08)}
.mg-btn:hover::after{left:130%}
.mg-btn svg{transition:transform .25s}
.mg-btn:hover svg{transform:translateX(5px)}
.mg-btn--ghost{background:transparent;color:#F3F2EE;box-shadow:inset 0 0 0 1px #6B707C}
.mg-btn--ghost:hover{color:#FFFFFF;box-shadow:inset 0 0 0 1px var(--acc)}
.mg-in{animation:mg-in .6s cubic-bezier(.2,.9,.2,1) both}

.su-sso{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 14px;border:0;background:#0C0D10;box-shadow:inset 0 0 0 1px #3A3F4A;color:#F3F2EE;font:inherit;font-weight:700;font-size:16px;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:box-shadow .2s,transform .2s}
.su-sso:hover{box-shadow:inset 0 0 0 1px var(--acc);transform:translateY(-2px)}
.su-label{display:flex;flex-direction:column;gap:8px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C9CCD3}
.su-input{height:54px;width:100%;box-sizing:border-box;padding:0 16px;background:#0C0D10;border:0;box-shadow:inset 0 0 0 1px #3A3F4A;color:#F3F2EE;font-family:'Archivo',system-ui,sans-serif;font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;color-scheme:dark;appearance:none;-webkit-appearance:none;transition:box-shadow .2s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.su-input:focus,.su-input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.su-input--bad{box-shadow:inset 0 0 0 2px #FF4D2E}
.su-err{font-family:'Archivo',system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:#FF8A70}
.su-hint{font-family:'Archivo',system-ui,sans-serif;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:#8A8E99}
.su-field{position:relative}
.su-eye{position:absolute;right:6px;top:7px;height:40px;padding:0 12px;border:0;background:transparent;color:var(--acc);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.su-chev{position:absolute;right:16px;top:19px;pointer-events:none;color:#8A8E99}

.su-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.su-step{display:flex;flex-direction:column;gap:8px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6B707C}
.su-step i{display:block;height:4px;background:#2A2E37;transform-origin:left}
.su-step--on{color:#F3F2EE}
.su-step--on i{background:var(--acc);animation:su-grow .5s cubic-bezier(.2,.9,.2,1)}
.su-step--done{color:#A7AAB3}
.su-step--done i{background:color-mix(in srgb,var(--acc) 50%,#2A2E37)}

.su-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.su-game{position:relative;aspect-ratio:16/10;overflow:hidden;padding:0;border:0;background:#000;color:#F3F2EE;font:inherit;text-align:left;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.su-game img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.6) brightness(.62);transition:transform .45s cubic-bezier(.2,.9,.2,1),filter .3s}
.su-game:hover img{transform:scale(1.07);filter:saturate(1) brightness(.9)}
.su-game--on img{filter:none}
.su-game::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,13,16,0) 38%,rgba(12,13,16,.92) 100%)}
.su-game::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 3px var(--acc);opacity:0;transition:opacity .2s}
.su-game--on::before{opacity:1}
.su-gcap{position:absolute;z-index:2;left:12px;right:12px;bottom:10px;display:flex;flex-direction:column;gap:3px}
.su-gname{font-family:'Archivo',system-ui,sans-serif;font-style:italic;font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:20px;line-height:1}
.su-gskill{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.su-tick{position:absolute;z-index:4;right:10px;top:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--acc);color:#0C0D10;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);animation:su-pop .3s cubic-bezier(.2,.9,.2,1)}
.su-badge{position:absolute;z-index:4;left:10px;top:10px;padding:4px 8px;background:#0C0D10;color:var(--acc);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

.su-chips{display:flex;flex-wrap:wrap;gap:8px}
.su-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.su-chip{min-height:46px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:#0C0D10;box-shadow:inset 0 0 0 1px #3A3F4A;color:#C9CCD3;font:inherit;font-size:15px;font-weight:600;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.su-chip:hover{color:#FFFFFF;box-shadow:inset 0 0 0 1px #8A8E99;transform:translateY(-1px)}
.su-chip--on,.su-chip--on:hover{background:var(--acc);color:#0C0D10;box-shadow:none}

.su-checkrow{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:#C9CCD3;cursor:pointer}
.su-checkrow input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--acc);cursor:pointer}
.su-checkrow a{color:var(--acc);font-weight:700}

.su-card{position:relative;overflow:hidden;background:linear-gradient(150deg,#1D2416 0%,#14161B 55%);box-shadow:inset 0 0 0 1px #3A3F4A;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.su-card::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-20deg);animation:su-shine 3.6s ease-in-out infinite 0.6s}
.su-burst{position:relative;width:88px;height:88px;flex:none}
.su-burst b{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--acc);animation:su-ring 1.8s cubic-bezier(.2,.9,.2,1) infinite}
.su-burst b:nth-child(2){animation-delay:.6s}
.su-burst span{position:absolute;inset:14px;display:flex;align-items:center;justify-content:center;background:var(--acc);color:#0C0D10;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);animation:su-pop .5s cubic-bezier(.2,.9,.2,1)}

@keyframes mg-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mg-blink{50%{opacity:.25}}
@keyframes su-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes su-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes su-ring{from{transform:scale(.7);opacity:1}to{transform:scale(1.5);opacity:0}}
@keyframes su-shine{0%{left:-60%}60%,100%{left:140%}}
@media (max-width:640px){
.su-hwrap{padding:12px 16px!important}
.su-hide-sm{display:none}
.su-main{padding:16px 16px 48px!important;gap:20px!important}
.su-aside-text{display:none!important}
.su-form{padding:20px 16px!important;gap:22px!important}
.su-nav,.su-nav1{flex-direction:column-reverse;align-items:stretch!important}
.su-nav1>span{text-align:center}
.su-stack{flex-direction:column;align-items:stretch!important}
.mg-btn{min-height:54px;font-size:18px}
.su-burst{width:64px;height:64px}
.su-burst span{inset:10px}
.su-gname{font-size:16px}
}
@media (max-width:560px){
.su-games{grid-template-columns:repeat(2,minmax(0,1fr))}
.su-seg{grid-template-columns:repeat(2,minmax(0,1fr))}
.su-step b{display:none}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}
.su-form h2[tabindex="-1"]:focus{outline:none}
