/* Arcade character-select login */
#login.hero-login{position:relative;isolation:isolate;width:min(1180px,calc(100% - 24px));max-width:none;min-height:min(760px,calc(100svh - 42px));margin:20px auto;padding:34px clamp(16px,4vw,52px);background:radial-gradient(ellipse at 50% -10%,#393e86 0%,#171e39 52%,#0c1025 100%);border:1px solid #424970;border-radius:28px;color:#fff;box-shadow:0 24px 80px #05091850;overflow:hidden}
#login.hero-login:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;background-image:linear-gradient(90deg,transparent 49%,#7786d33d 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#7786d33d 50%,transparent 51%);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,#000)}
#login .hero-login-header{text-align:center}
#login .hero-login-header .brand-logo{width:140px;max-height:55px;object-fit:contain}
#login .hero-eyebrow{margin:14px 0 4px;color:#a8bcff;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:4px}
#login .hero-main-title{font-size:clamp(30px,5vw,60px);line-height:1.1;margin:4px 0 10px;font-weight:950;letter-spacing:-1.4px;color:#fff;text-shadow:0 4px 24px #87a1ff55}
#login .hero-description{color:#b4bdd9;font-size:14px;margin:0 0 24px}
#heroRoster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;max-width:980px;margin:0 auto 24px}
#heroRoster .hero-card{position:relative;min-width:0;border:2px solid #556185;background:linear-gradient(155deg,#3b456e,#242a48);border-radius:16px;padding:9px 9px 12px;color:#fff;box-shadow:0 9px 0 #080d2070;transition:transform .18s,border-color .18s,box-shadow .18s;cursor:pointer}
#heroRoster .hero-card:hover,#heroRoster .hero-card:focus-visible{transform:translateY(-7px);border-color:#b3ff95;box-shadow:0 10px 35px #abff7245;outline:none}
#heroRoster .hero-card.chosen{border-color:#b8ff7f;box-shadow:0 0 0 3px #b8ff7f55,0 12px 45px #91ff6355;transform:translateY(-6px)}
#heroRoster .hero-card.chosen:before{content:"SEÇİLDİ";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#b8ff7f;color:#152124;font-size:10px;font-weight:950;padding:5px 10px;border-radius:6px;z-index:1;letter-spacing:1px}
#heroRoster .hero-portrait{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:4/5;border-radius:11px;background:radial-gradient(circle at 45% 35%,#67789c,#26314d 75%);font-size:clamp(26px,4vw,48px);font-weight:950;color:#c6d5ff}
#heroRoster .hero-portrait img{width:100%;height:100%;object-fit:contain;object-position:bottom}
#heroRoster .hero-name{display:block;margin-top:10px;text-align:center;font-size:13px;font-weight:850;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
#heroRoster .hero-loading{grid-column:1/-1;text-align:center;color:#bdc7eb;padding:40px 10px}
#login #loginForm{width:min(420px,100%);margin:12px auto 0;padding:22px;border-radius:19px;background:#ffffff10;border:1px solid #ffffff35;box-shadow:0 12px 30px #0003}
#login #loginForm[hidden]{display:none}
#login #loginForm .chosen-label{font-size:16px;text-align:center;font-weight:850;margin-bottom:8px}
#login #loginForm label{color:#cbd4f5;margin:8px 0}
#login #password{background:#fff;color:#171e38;border:2px solid #8a96b9}
#login #loginButton{background:#aaff79;color:#1b2930;font-size:15px;margin-top:12px}
#login #heroBack{color:#cad4ee;background:none;border:0;display:block;margin:15px auto 0;text-decoration:underline;font-size:13px}
#login #error{text-align:center}
#login .login-top-tools{display:flex;justify-content:flex-end}
#login .login-top-tools button{color:#fff}
#login .hero-footer{text-align:center;margin-top:20px;color:#8998b8;font-size:12px}
@media(max-width:800px){#heroRoster{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}#login.hero-login{padding:20px 12px}}
@media(max-width:480px){#heroRoster{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}#heroRoster .hero-name{font-size:12px}#login.hero-login{width:calc(100% - 12px);margin:6px auto;border-radius:18px}#login .hero-description{font-size:12px}}
@media(prefers-reduced-motion:reduce){#heroRoster .hero-card{transition:none}}

#login #heroEmailLabel[hidden],#login #heroForgotPassword[hidden]{display:none!important}
#login #email:not([type=hidden]){display:block;width:100%;padding:12px;border:2px solid #8a96b9;border-radius:12px;background:#fff;color:#171e38;margin-bottom:12px}
#login #heroForgotPassword{display:block;width:100%;background:none;color:#bafc98;border:none;font-size:13px;text-decoration:underline;margin:14px auto 0}