:root{
    --ids-bg:#04111d;
    --ids-panel:rgba(6,20,35,.72);
    --ids-panel-strong:rgba(5,17,31,.90);
    --ids-line:rgba(114,210,255,.20);
    --ids-cyan:#54d7ff;
    --ids-cyan-2:#38bdf8;
    --ids-lime:#a7f36b;
    --ids-yellow:#ffe15b;
    --ids-text:#f7fbff;
    --ids-muted:#9fb4c8;
}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
}

body.ids-game-landing{
    min-height:100dvh;
    overflow:hidden;
    color:var(--ids-text);
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(20,97,133,.28),
            transparent 46%
        ),
        #020b14;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.ids-launcher{
    position:relative;
    width:100%;
    height:100dvh;
    min-height:620px;
    overflow:hidden;
    isolation:isolate;
}

/* Mundo ao fundo */
.ids-world-bg{
    position:absolute;
    inset:-3%;
    z-index:-5;

    background-image:
        linear-gradient(
            90deg,
            rgba(1,9,17,.95) 0%,
            rgba(2,13,24,.78) 34%,
            rgba(3,17,29,.33) 68%,
            rgba(1,8,15,.78) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3,17,29,.18),
            rgba(1,8,16,.76)
        ),
        var(--ids-world-bg);

    background-position:center;
    background-size:cover;
    filter:saturate(1.18) contrast(1.05);
    transform:scale(1.035);
}

.ids-world-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 68% 48%,
            transparent 0 18%,
            rgba(1,8,15,.10) 40%,
            rgba(1,8,15,.60) 100%
        );
}

/* Luz ambiente */
.ids-ambient{
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 72% 44%,
            rgba(84,215,255,.12),
            transparent 22%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(167,243,107,.07),
            transparent 28%
        );
}

/* HUD */
.ids-hud{
    position:absolute;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;

    width:min(calc(100% - 34px),1180px);
    height:66px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:0 14px 0 18px;

    background:rgba(4,17,30,.68);
    border:1px solid rgba(125,211,252,.20);
    border-radius:22px;

    box-shadow:
        0 18px 60px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.ids-brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.ids-brand-icon{
    width:42px;
    height:42px;
    border-radius:14px;

    display:grid;
    place-items:center;

    font-size:22px;

    background:
        linear-gradient(
            145deg,
            var(--ids-cyan),
            var(--ids-lime)
        );

    box-shadow:
        0 8px 24px rgba(84,215,255,.22);
}

.ids-brand-copy{
    min-width:0;
}

.ids-brand-name{
    font-size:17px;
    font-weight:900;
    letter-spacing:-.03em;
    white-space:nowrap;
}

.ids-brand-world{
    margin-top:2px;

    color:#8ca6bd;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.ids-hud-right{
    display:flex;
    align-items:center;
    gap:10px;
}

.ids-online{
    display:flex;
    align-items:center;
    gap:7px;

    height:36px;
    padding:0 12px;

    border:1px solid rgba(167,243,107,.15);
    border-radius:999px;

    color:#ccefb6;
    background:rgba(101,163,68,.08);

    font-size:11px;
    font-weight:800;
}

.ids-online-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#8cf45b;
    box-shadow:0 0 12px rgba(140,244,91,.8);
}

.ids-enter-mini{
    min-height:40px;
    padding:0 18px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:#06121d;
    background:#f5fbff;

    border:0;
    border-radius:13px;

    text-decoration:none;
    font-size:13px;
    font-weight:900;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.ids-enter-mini:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(255,255,255,.15);
}

/* Cena principal */
.ids-stage{
    width:min(calc(100% - 40px),1180px);
    height:100%;

    margin:0 auto;
    padding-top:102px;
    padding-bottom:82px;

    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(310px,.72fr);
    align-items:center;
    gap:42px;
}

.ids-copy{
    align-self:center;
    max-width:690px;
}

.ids-kicker{
    width:max-content;
    max-width:100%;

    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:20px;
    padding:7px 12px;

    color:#d4eeff;
    background:rgba(16,61,82,.34);
    border:1px solid rgba(84,215,255,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.ids-kicker::before{
    content:"";
    width:7px;
    height:7px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--ids-cyan);
    box-shadow:0 0 14px var(--ids-cyan);
}

.ids-title{
    margin:0;
    max-width:700px;

    font-size:clamp(52px,6vw,88px);
    line-height:.91;

    font-weight:950;
    letter-spacing:-.07em;

    text-wrap:balance;
    text-shadow:0 18px 70px rgba(0,0,0,.45);
}

.ids-title strong{
    display:block;

    color:transparent;
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #96e9ff 42%,
            #b9fa83 100%
        );
    background-clip:text;
    -webkit-background-clip:text;
}

.ids-subtitle{
    max-width:590px;
    margin:25px 0 0;

    color:#c7d5e2;
    font-size:clamp(15px,1.5vw,18px);
    line-height:1.65;
    font-weight:500;
}

.ids-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;

    margin-top:30px;
}

.ids-play{
    min-height:58px;
    padding:0 27px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border-radius:18px;
    border:1px solid rgba(255,255,255,.20);

    color:#04111d;
    background:
        linear-gradient(
            100deg,
            #55d8ff,
            #7fe9c9 54%,
            #d7ef54
        );

    box-shadow:
        0 14px 38px rgba(57,189,234,.24),
        inset 0 1px 0 rgba(255,255,255,.62);

    text-decoration:none;
    font-size:15px;
    font-weight:950;
    letter-spacing:-.01em;

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.ids-play:hover{
    transform:translateY(-3px) scale(1.015);
    filter:brightness(1.05);
    box-shadow:
        0 20px 50px rgba(57,189,234,.32),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.ids-play-arrow{
    width:27px;
    height:27px;
    border-radius:9px;

    display:grid;
    place-items:center;

    background:rgba(3,19,31,.12);

    font-size:13px;
}

.ids-secure{
    display:flex;
    align-items:center;
    gap:8px;

    padding:0 5px;

    color:#9fb4c8;
    font-size:11px;
    font-weight:750;
}

/* Portal */
.ids-portal-zone{
    display:grid;
    place-items:center;
    position:relative;
    min-height:450px;
}

.ids-portal-halo{
    position:absolute;

    width:min(36vw,430px);
    aspect-ratio:1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(84,215,255,.21) 0%,
            rgba(84,215,255,.08) 30%,
            transparent 68%
        );

    filter:blur(10px);
}

.ids-portal-ring{
    position:relative;

    width:min(32vw,365px);
    aspect-ratio:1;

    padding:16px;
    border-radius:50%;

    background:
        conic-gradient(
            from 20deg,
            rgba(84,215,255,.18),
            #55d8ff,
            #d7ef54,
            rgba(84,215,255,.22),
            #55d8ff
        );

    box-shadow:
        0 0 70px rgba(84,215,255,.18),
        0 28px 80px rgba(0,0,0,.42);

    animation:idsPortalFloat 5s ease-in-out infinite;
}

.ids-portal-ring::before{
    content:"";

    position:absolute;
    inset:8px;

    border-radius:50%;
    background:#051523;
}

.ids-portal-core{
    position:relative;
    z-index:1;

    width:100%;
    height:100%;

    overflow:hidden;
    border-radius:50%;

    background-image:
        linear-gradient(
            rgba(1,16,28,.12),
            rgba(1,11,21,.38)
        ),
        var(--ids-world-bg);

    background-position:center;
    background-size:cover;

    border:1px solid rgba(255,255,255,.22);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;

    padding:34px;

    box-shadow:
        inset 0 -90px 90px rgba(0,9,17,.80);
}

.ids-portal-label{
    position:relative;
    z-index:3;

    padding:8px 13px;

    color:#ecfbff;
    background:rgba(2,17,29,.72);
    border:1px solid rgba(118,220,255,.25);
    border-radius:999px;

    backdrop-filter:blur(10px);

    font-size:11px;
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.ids-portal-status{
    position:absolute;
    bottom:-44px;
    left:50%;
    transform:translateX(-50%);

    width:max-content;

    color:#7995ab;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

/* Barra inferior de game systems */
.ids-systems{
    position:absolute;

    left:50%;
    bottom:18px;
    transform:translateX(-50%);

    width:min(calc(100% - 34px),900px);

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;

    z-index:20;

    padding:8px;

    border:1px solid rgba(125,211,252,.13);
    border-radius:18px;

    background:rgba(3,15,27,.64);

    box-shadow:0 18px 60px rgba(0,0,0,.25);

    backdrop-filter:blur(18px);
}

.ids-system{
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    color:#b8cada;

    border-radius:12px;

    font-size:11px;
    font-weight:850;

    cursor:default;
}

.ids-system-icon{
    font-size:17px;
}

.ids-system small{
    display:block;
    margin-top:1px;

    color:#668298;
    font-size:8px;
    font-weight:800;
    letter-spacing:.10em;
    text-transform:uppercase;
}

@keyframes idsPortalFloat{
    0%,100%{
        transform:translateY(0) rotate(-1deg);
    }

    50%{
        transform:translateY(-10px) rotate(1deg);
    }
}

@media(max-width:850px){
    body.ids-game-landing{
        overflow:auto;
    }

    .ids-launcher{
        height:auto;
        min-height:100dvh;
        overflow:hidden;
    }

    .ids-stage{
        min-height:100dvh;
        height:auto;

        padding:
            112px
            20px
            115px;

        grid-template-columns:1fr;
        gap:8px;

        text-align:center;
    }

    .ids-copy{
        max-width:620px;
        margin:0 auto;
    }

    .ids-kicker{
        margin-left:auto;
        margin-right:auto;
    }

    .ids-title{
        font-size:clamp(45px,12vw,70px);
    }

    .ids-subtitle{
        margin-left:auto;
        margin-right:auto;
    }

    .ids-actions{
        justify-content:center;
    }

    .ids-portal-zone{
        min-height:300px;
    }

    .ids-portal-ring{
        width:min(64vw,290px);
    }

    .ids-portal-halo{
        width:min(76vw,340px);
    }

    .ids-online{
        display:none;
    }
}

@media(max-width:540px){
    .ids-hud{
        top:10px;
        width:calc(100% - 20px);
        height:60px;

        padding-left:11px;
        border-radius:18px;
    }

    .ids-brand-icon{
        width:37px;
        height:37px;
        border-radius:12px;
        font-size:19px;
    }

    .ids-brand-name{
        font-size:14px;
    }

    .ids-brand-world{
        display:none;
    }

    .ids-enter-mini{
        min-height:37px;
        padding:0 13px;
        font-size:11px;
    }

    .ids-stage{
        padding:
            92px
            14px
            108px;
    }

    .ids-title{
        font-size:clamp(42px,13vw,58px);
    }

    .ids-subtitle{
        margin-top:18px;
        font-size:14px;
    }

    .ids-actions{
        margin-top:22px;
    }

    .ids-play{
        width:100%;
        max-width:320px;
    }

    .ids-secure{
        width:100%;
        justify-content:center;
    }

    .ids-portal-zone{
        min-height:260px;
    }

    .ids-portal-ring{
        width:min(68vw,250px);
    }

    .ids-systems{
        bottom:10px;
        width:calc(100% - 20px);
    }

    .ids-system{
        gap:5px;
        font-size:9px;
    }

    .ids-system-icon{
        font-size:15px;
    }
}

@media(prefers-reduced-motion:reduce){
    .ids-portal-ring{
        animation:none;
    }

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        transition:none!important;
    }
}

/* IDS_COMPANIONS_PATCH */

.ids-systems{
    display:none!important;
}

.ids-portal-characters{
    position:absolute;
    left:50%;
    bottom:54px;
    transform:translateX(-50%);
    width:82%;
    max-height:74%;
    object-fit:contain;
    object-position:center bottom;
    filter:
        drop-shadow(0 18px 24px rgba(0,0,0,.38))
        saturate(1.08);
    z-index:2;
    pointer-events:none;
}

.ids-portal-core{
    position:relative;
}

.ids-portal-core::after{
    content:"";
    position:absolute;
    inset:auto 10% 28px;
    height:25%;
    border-radius:50%;
    background:rgba(84,215,255,.13);
    filter:blur(25px);
    z-index:1;
}

.ids-portal-label{
    z-index:4;
}

.ids-companions{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    z-index:30;

    display:flex;
    align-items:center;
    gap:18px;

    width:max-content;
    max-width:calc(100% - 32px);

    padding:8px 12px 8px 15px;

    background:rgba(3,15,27,.54);
    border:1px solid rgba(125,211,252,.14);
    border-radius:18px;

    box-shadow:0 14px 40px rgba(0,0,0,.22);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.ids-companions-copy{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.ids-companions-copy small{
    color:#63839b;
    font-size:7px;
    font-weight:900;
    letter-spacing:.14em;
}

.ids-companions-copy strong{
    margin-top:4px;
    color:#dceaf5;
    font-size:11px;
    white-space:nowrap;
}

.ids-companion-stack{
    display:flex;
    align-items:flex-end;
    height:48px;
}

.ids-companion-stack img{
    width:46px;
    height:46px;

    margin-left:-8px;

    object-fit:contain;
    object-position:center bottom;

    border-radius:13px;

    background:
        radial-gradient(
            circle at 50% 65%,
            rgba(84,215,255,.14),
            rgba(3,15,27,.12) 65%
        );

    border:1px solid rgba(255,255,255,.10);

    filter:drop-shadow(0 6px 7px rgba(0,0,0,.35));

    transition:
        transform .18s ease,
        filter .18s ease;
}

.ids-companion-stack img:first-child{
    margin-left:0;
}

.ids-companion-stack img:hover{
    transform:translateY(-8px) scale(1.12);
    filter:
        drop-shadow(0 10px 12px rgba(0,0,0,.38))
        brightness(1.08);
    z-index:5;
}

.ids-companions-path{
    color:#7690a5;
    font-size:8px;
    font-weight:850;
    letter-spacing:.10em;
    text-transform:uppercase;
    white-space:nowrap;
}

@media(max-width:720px){
    .ids-companions-copy,
    .ids-companions-path{
        display:none;
    }

    .ids-companions{
        gap:0;
        padding:7px 10px;
    }

    .ids-companion-stack img{
        width:40px;
        height:40px;
    }

    .ids-portal-characters{
        bottom:46px;
        width:86%;
    }
}