/*==================================================
    LOGIN SCREEN (Oct 2026)
    (+ at the end: small Oct 2026 UI bits: slot buttons
    that wait for their level, X / Discord icons)
    The first thing a player sees: the stacked logo in
    a neon halo, moving aurora light, a star field and
    a perspective grid floor, one big Connect Wallet.
    Overrides the old .login-gate-* rules in main.css.
    Everything stops with "reduce motion".
==================================================*/

#loginGate{
    background:#05060d;
    isolation:isolate;
}

/* ---------- background ---------- */
.lg-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }

.lg-aurora{
    position:absolute;
    width:70vmax; height:70vmax;
    border-radius:50%;
    filter:blur(90px);
    opacity:.55;
    mix-blend-mode:screen;
}
.lg-aurora-a{ background:radial-gradient(circle, #6B3BFF 0%, transparent 62%); left:-20vmax; top:-25vmax; animation:lgDriftA 18s ease-in-out infinite alternate; }
.lg-aurora-b{ background:radial-gradient(circle, #00C6FF 0%, transparent 60%); right:-25vmax; top:-10vmax; opacity:.42; animation:lgDriftB 22s ease-in-out infinite alternate; }
.lg-aurora-c{ background:radial-gradient(circle, #ff3bd4 0%, transparent 60%); left:20vmax; bottom:-40vmax; opacity:.32; animation:lgDriftC 26s ease-in-out infinite alternate; }

.lg-stars{
    position:absolute; inset:-50%;
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.8), transparent),
        radial-gradient(1.5px 1.5px at 200px 160px, #9fe8ff, transparent),
        radial-gradient(1px 1px at 60px 200px, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 260px 40px, #d7c4ff, transparent);
    background-size:300px 240px;
    opacity:.55;
    animation:lgStars 120s linear infinite;
}

.lg-floor{
    position:absolute;
    left:-50%; right:-50%; bottom:-10%;
    height:55%;
    background:
        linear-gradient(to top, rgba(0,229,255,.22) 1px, transparent 1px) 0 0 / 100% 46px,
        linear-gradient(to right, rgba(138,92,255,.22) 1px, transparent 1px) 0 0 / 46px 100%;
    transform:perspective(420px) rotateX(62deg);
    transform-origin:50% 100%;
    -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%);
            mask-image:linear-gradient(to top, #000 10%, transparent 85%);
    animation:lgFloor 3.5s linear infinite;
}

/* ---------- the card ---------- */
.login-gate-box{
    position:relative;
    max-width:420px;
    width:calc(100% - 32px);
    padding:30px 32px 26px;
    border-radius:28px;
    background:linear-gradient(165deg, rgba(30,18,64,.72), rgba(8,10,22,.88) 70%);
    border:1px solid rgba(138,92,255,.35);
    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 0 60px rgba(107,59,255,.22);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    animation:lgIn .7s cubic-bezier(.2,.8,.2,1) both;
}
/* thin moving light on the card's edge */
@property --lg-edge{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.login-gate-box::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:conic-gradient(from var(--lg-edge, 0deg), transparent 0 70%, #00E5FF 80%, #8A5CFF 88%, transparent 96%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation:lgEdge 6s linear infinite;
    pointer-events:none;
}

/* Closed Beta / Testnet badge (html[data-nb-env], set by wallet.js) */
.lg-badge{
    display:none;
    position:absolute; top:16px; right:16px;
    padding:4px 10px;
    border-radius:999px;
    font-family:var(--font-display,"Orbitron",sans-serif);
    font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
}
.lg-badge-beta{ color:#0b0f1d; background:linear-gradient(100deg,#FFC83D,#ffdf7e); box-shadow:0 0 14px rgba(255,200,61,.45); }
.lg-badge-test{ color:#cfe9ff; background:rgba(0,198,255,.15); border:1px solid rgba(0,198,255,.45); }
html[data-nb-env="beta"] .lg-badge-beta,
html[data-nb-env="test"] .lg-badge-test{ display:inline-block; }

/* logo */
.lg-logo-wrap{
    position:relative;
    width:min(250px, 66vw);
    margin:8px auto 10px;
    display:grid; place-items:center;
}
.lg-halo{
    position:absolute;
    width:96%; aspect-ratio:1;
    top:50%; left:50%;
    translate:-50% -54%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,229,255,.32) 0%, rgba(138,92,255,.22) 40%, transparent 68%);
    filter:blur(6px);
    animation:lgHalo 4s ease-in-out infinite;
}
#loginGate .login-gate-logo{
    position:relative;
    display:block;
    width:100%; height:auto;
    margin:0;
    object-fit:contain;
    filter:drop-shadow(0 14px 24px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(0,229,255,.25));
    animation:lgFloat 5s ease-in-out infinite;
}

.login-gate-box p.login-gate-prompt{
    color:#d4dcf2;
    font-size:15px;
    line-height:1.45;
    max-width:300px;
    margin:0 auto 22px;
}

/* ---------- Connect Wallet ---------- */
.login-gate-btn{
    position:relative;
    overflow:hidden;
    width:100%;
    min-height:58px;
    padding:0 22px;
    border:none;
    border-radius:16px;
    background:linear-gradient(100deg,#6B3BFF 0%,#8A5CFF 35%,#00C6FF 100%);
    background-size:180% 100%;
    color:#fff;
    font-family:var(--font-display,"Orbitron",sans-serif);
    font-size:16px;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(107,59,255,.45), 0 0 0 1px rgba(255,255,255,.12) inset;
    transition:transform .2s, box-shadow .2s, background-position .5s;
    animation:lgBtnGlow 3s ease-in-out infinite;
}
.login-gate-btn .lg-btn-text{ position:relative; z-index:1; text-shadow:0 1px 8px rgba(0,0,0,.35); }
/* light sweep */
.login-gate-btn::after{
    content:"";
    position:absolute; top:0; bottom:0; left:-60%;
    width:45%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform:skewX(-20deg);
    animation:lgSweep 3.4s ease-in-out infinite;
}
.login-gate-btn:hover{
    transform:translateY(-2px);
    background-position:100% 0;
}
.login-gate-btn:active{ transform:translateY(0) scale(.99); }
.login-gate-btn:focus-visible{ outline:2px solid #00E5FF; outline-offset:3px; }
.login-gate-btn:disabled{ opacity:.6; cursor:default; transform:none; animation:none; }
.login-gate-btn:disabled::after{ display:none; }

.login-gate-box p.lg-wallets{
    margin:12px 0 0;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1px;
    color:#8f9bbd;
}
.login-gate-box p.login-gate-note{ margin:10px 0 0; }
.login-gate-box p.lg-safe{
    margin:16px 0 0;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.07);
    font-size:11.5px;
    line-height:1.5;
    color:#7f8aa8;
}
#loginGate.checking .lg-wallets,
#loginGate.checking .lg-safe{ display:none; }

/* ---------- wallet choice popup (wallet.js chooseWallet) ---------- */
.wallet-pick{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.wallet-pick img{ width:min(170px, 50vw); height:auto; filter:drop-shadow(0 0 16px rgba(0,229,255,.3)); margin:0 auto 6px; display:block; }
.wallet-pick p{ margin:0; color:#c9d3ea; font-size:14px; text-align:center; }

/* ---------- motion ---------- */
@keyframes lgDriftA{ to{ transform:translate(14vmax, 10vmax) scale(1.1); } }
@keyframes lgDriftB{ to{ transform:translate(-12vmax, 14vmax) scale(.9); } }
@keyframes lgDriftC{ to{ transform:translate(-10vmax, -12vmax) scale(1.15); } }
@keyframes lgStars{ to{ transform:translate(300px, 240px); } }
@keyframes lgFloor{ to{ background-position:0 46px, 0 0; } }
@keyframes lgIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } }
@keyframes lgEdge{ to{ --lg-edge:360deg; } }
@keyframes lgHalo{ 0%,100%{ opacity:.7; scale:.94; } 50%{ opacity:1; scale:1.05; } }
@keyframes lgFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
@keyframes lgBtnGlow{ 0%,100%{ box-shadow:0 10px 30px rgba(107,59,255,.45), 0 0 0 1px rgba(255,255,255,.12) inset; } 50%{ box-shadow:0 10px 36px rgba(0,198,255,.5), 0 0 0 1px rgba(255,255,255,.18) inset; } }
@keyframes lgSweep{ 0%{ left:-60%; } 55%,100%{ left:130%; } }

@media (max-width:480px){
    .login-gate-box{ padding:26px 20px 22px; border-radius:24px; }
    .login-gate-btn{ min-height:54px; font-size:15px; letter-spacing:2px; }
}
@media (max-height:620px){
    .lg-logo-wrap{ width:min(180px, 50vw); margin-top:0; }
    .login-gate-box p.lg-safe{ display:none; }
}

@media (prefers-reduced-motion:reduce){
    .lg-aurora, .lg-stars, .lg-floor, .lg-halo, #loginGate .login-gate-logo,
    .login-gate-box, .login-gate-box::before, .login-gate-btn, .login-gate-btn::after{ animation:none !important; }
}


/*==================================================
    SMALL UI (Oct 2026)
==================================================*/
/* Beast slot that waits for its hunting level */
.unlockSlotBtn:disabled,
.unlockSlotBtn.slot-level-locked{
    cursor:not-allowed;
    opacity:.55;
    border-color:rgba(255,255,255,.12);
    background:rgba(255,255,255,.03);
}
.unlockSlotBtn:disabled:hover{ border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03); }

/* X / Discord at the bottom of the left menu */
.sidebar-social a svg{ width:17px; height:17px; }
.sidebar-social a:hover{ transform:translateY(-1px); }