/* Homepage command center: portrait stage + live game widgets. */
.landing-page .landing-video-hero { height:auto; min-height:100svh; padding:120px 4vw 80px; box-sizing:border-box; }
.landing-page .landing-video-hero::before { background:linear-gradient(90deg,rgba(8,8,25,.7),rgba(7,9,23,.4) 40%,rgba(5,9,20,.87)),linear-gradient(0deg,#02060b,transparent 50%); }
.landing-page .landing-video-hero-video.is-active { opacity:.48; }
@media(max-width:900px) {
    .landing-page .landing-video-hero {
        background:radial-gradient(ellipse 480px 430px at 25% 180px,#30244480,transparent 85%),radial-gradient(ellipse 440px 480px at 100% 520px,#18314b55,transparent 85%),#090e1b;
    }
    .landing-page .landing-video-hero-video { display:none; }
    .landing-page .landing-video-hero::before { background:none; }
    .landing-page .landing-video-hero-fade { height:160px; background:linear-gradient(180deg,transparent,#02060b); }
}
.landing-hub { position:relative; z-index:4; max-width:1660px; margin:auto; display:grid; grid-template-columns:minmax(360px,.9fr) minmax(560px,1.15fr); gap:42px; align-items:center; font-family:'Outfit',sans-serif; }
.hub-stage { position:relative; min-height:660px; isolation:isolate; --stage-color:#ed9aff; }
.hub-stage-heading { position:absolute; inset:0 0 auto; display:flex; justify-content:space-between; gap:10px; color:#c7b5db; font-size:10px; letter-spacing:.18em; }
.hub-stage-heading b { color:#ffe3af; font-weight:500; }
.hub-orbit { position:absolute; width:110%; left:-5%; top:60px; aspect-ratio:1; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,var(--stage-color),transparent 64%); opacity:.22; }
.hub-orbit svg { width:100%; height:100%; fill:none; stroke:var(--stage-color); stroke-width:1; animation:hub-orbit 70s linear infinite; }
.hub-stage-word { position:absolute; top:100px; left:0; font:700 clamp(110px,14vw,230px)/1 'Outfit',sans-serif; letter-spacing:-.08em; color:transparent; -webkit-text-stroke:1px #dbb7f83d; z-index:-1; }
.hub-character { position:absolute; height:590px; width:115%; left:-8%; top:0; object-fit:contain; object-position:center; filter:drop-shadow(0 0 40px #9f6be92a) drop-shadow(0 18px 22px #0009); transition:opacity .25s,filter .5s; }
.hub-character.is-switching { opacity:0; }
.hub-character-copy { position:absolute; left:5%; bottom:0; right:4%; z-index:2; text-shadow:0 2px 20px #070714; }
.hub-skin-tag { display:inline-block; padding:8px 12px; background:linear-gradient(100deg,#8e3bacbb,#17132ed9); color:#ffd8ff; border:1px solid #e1a2ee66; font-size:10px; font-weight:700; letter-spacing:.16em; transform:skew(-7deg); }
.hub-character-copy p { font-size:12px; color:#e4d5f3; letter-spacing:.18em; margin:16px 0 2px; }
.hub-character-copy h1 { font:500 clamp(48px,5vw,80px)/1 'Outfit',sans-serif; letter-spacing:-.04em; color:#fff; margin:0 0 15px; }
.hub-release { display:grid; grid-template-columns:1fr auto; padding:12px 18px; max-width:330px; color:#ffedc1; text-decoration:none; background:linear-gradient(100deg,#5b447bcc,#121a32e8); border:1px solid #ecd1a16b; border-left:3px solid #ffe1a6; box-shadow:0 8px 30px #0005; }
.hub-release span { font-size:9px; letter-spacing:.2em; color:#ddd0ea; }
.hub-release strong { grid-column:1; font-size:19px; font-weight:500; }
.hub-release b { grid-column:2; grid-row:1/3; align-self:center; font-size:26px; font-weight:400; }
.hub-character-controls { display:flex; gap:7px; margin-top:20px; flex-wrap:wrap; }
.hub-character-controls button { font:500 10px 'Outfit',sans-serif; letter-spacing:.08em; text-transform:uppercase; background:#0d1327cc; color:#b5b6cc; border:1px solid #9696ca40; padding:10px 13px; cursor:pointer; }
.hub-character-controls button[aria-pressed=true] { background:#ae84c42e; color:#ffe3fc; border-color:#d6b2ee; box-shadow:0 0 18px #bf7be629; }
.hub-dashboard { min-width:0; }
.hub-dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:0 0 20px; }
.hub-dashboard-heading span { font-size:9px; letter-spacing:.25em; color:#a5a7c1; }
.hub-dashboard-heading h2 { font:500 clamp(23px,2.2vw,34px)/1.25 'Outfit',sans-serif; margin:6px 0 0; letter-spacing:-.02em; color:#f6f2ff; }
.hub-dashboard-heading>a { flex-shrink:0; padding:12px 16px; border:1px solid #c7a86d8a; background:linear-gradient(115deg,#cfb06a2b,#84683d13); color:#ffe5b0; text-decoration:none; font-size:12px; }
.hub-dashboard-heading>a b { margin-left:12px; }
.hub-dashboard .landing-latest-patch { position:relative; left:auto; right:auto; bottom:auto; width:100%; margin:0 0 14px; min-height:53px; box-sizing:border-box; background:#0b1223e0; border-color:#bba77855; border-radius:3px; }
.hub-events { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.hub-event { min-width:0; position:relative; height:192px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; padding:14px; border:1px solid #9988c457; border-radius:4px; color:#fff; text-decoration:none; background:#141127; box-sizing:border-box; box-shadow:0 12px 25px #0004,inset 0 1px #fff1; transition:transform .2s,border-color .2s; }
.hub-event::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#100d222b,#0d0f22aa 43%,#080c1cee); pointer-events:none; }
.hub-event>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%; opacity:.8; transition:transform .6s; }
.hub-event>div,.hub-event-tag,.hub-arrow { position:relative; z-index:1; }
.hub-event-tag { align-self:flex-start; font-size:8px; letter-spacing:.14em; padding:5px 7px; border:1px solid #e4c6ff4a; background:#2115319c; color:#eddbff; }
.hub-event h3 { font:500 19px/1.15 'Outfit',sans-serif; margin:0 0 10px; }
.hub-event small { display:block; font-size:9px; color:#c2bdd1; margin-bottom:4px; }
.hub-event strong { display:block; font:500 13px 'Outfit',sans-serif; font-variant-numeric:tabular-nums; color:#f6dfb2; }
.hub-arrow { position:absolute; top:14px; right:12px; font-weight:400; }
.hub-event--halloween { border-color:#bd894450; }
.hub-event--pass { border-color:#619ecb55; }
.hub-event:hover { transform:translateY(-3px); border-color:#e0c8ff; }
.hub-event:hover>img { transform:scale(1.06); }
.hub-bottom { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:12px; margin-top:12px; align-items:stretch; }
.hub-dashboard #landing-toplista-stack { position:static; width:auto; display:flex; flex-direction:column; justify-content:flex-start; gap:10px; min-width:0; zoom:1; order:0; }
.hub-dashboard .landing-toplista-peek { position:relative; width:100%; max-width:none; margin:0; padding:13px; box-sizing:border-box; background:linear-gradient(135deg,#152034eb,#070d1be8); border-color:#818eb347; flex:1; }
.hub-dashboard .landing-toplista-peek-row { padding:4px 5px; }
.hub-dashboard .landing-toplista-peek-avatar-wrap { width:28px; height:28px; }
.hub-dashboard .landing-toplista-peek-header { margin-bottom:8px; }
.hub-dashboard .landing-toplista-peek-eyebrow { font-size:10px; }
.hub-dashboard .landing-bj-cta { min-height:66px; padding:12px 70px 12px 14px; border-radius:4px; background:linear-gradient(110deg,#573879b8,#121a30e8); }
.hub-dashboard .landing-bj-cta-label { max-width:none; font-size:13px; }
.hub-bj-time { position:relative; display:block; font:400 10px 'Outfit',sans-serif; color:#d5c0e9; margin-top:4px; }
.hub-dashboard .landing-bj-cta-mascot { width:65px; bottom:0; right:4px; }
.hub-dashboard .hub-skin-tile { display:block; position:relative; right:auto; bottom:auto; width:100%; max-width:none; padding:12px; margin:0; box-sizing:border-box; background:#0b1223e8; border:1px solid #b79f754a; border-radius:4px; min-width:0; zoom:1; order:0; }
.hub-tile-heading { display:flex; align-items:center; justify-content:space-between; font-size:9px; letter-spacing:.12em; color:#e9d0a0; margin-bottom:10px; }
.hub-tile-heading a { color:#e9d0a0; font-size:19px; text-decoration:none; }
.hub-skin-tile .landing-shop-peek-spotlight { width:100%; height:225px; min-height:0; padding:0; background:#0c1425; }
.hub-skin-tile .landing-shop-peek-img { width:100%; height:100%; object-fit:cover; opacity:1; }
.hub-skin-tile .landing-shop-peek-spotlight-info { padding:12px; }
.hub-skin-tile .landing-shop-peek-name { font-size:13px; }
.hub-skin-tile .skin-tier-badge { top:10px; left:10px; font-size:9px; }
.hub-skin-tile .landing-shop-peek-dots { margin:9px 0 0; }
.hub-skin-tile button.landing-shop-peek-dot { padding:0; border:0; cursor:pointer; width:8px; height:8px; }
.hub-community { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:0; margin:0 0 20px; }
.hub-tool { position:relative; display:flex; align-items:center; gap:9px; padding:10px; background:linear-gradient(110deg,#1c203bd9,#0a1222d9); border:1px solid #8b88b532; border-radius:3px; min-width:0; }
.hub-tool>span { font-size:11px; color:#cbc7dd; pointer-events:none; }
.hub-tool>a,.hub-tool>button,.hub-tool>.topbar-feature-icon { position:static!important; width:32px!important; height:32px!important; min-width:32px!important; margin:0!important; padding:0!important; background:none!important; border:0!important; box-shadow:none!important; border-radius:0!important; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.hub-tool>a::after,.hub-tool>button::after { content:''; position:absolute; inset:0; }
.hub-tool img { width:32px; height:32px; object-fit:contain; }
.hub-tool--profile svg { width:32px; height:32px; color:#d3b5fa; filter:drop-shadow(0 0 5px #b28bdd44); }
.hub-tool .topbar-feature-icon__glow,.hub-tool .message-board-icon__signal { display:none; }
.hub-tool .topbar-feature-badge { position:absolute; top:2px; right:4px; z-index:2; }
.hub-tool:hover { border-color:#c5b0ea90; background:#292b4bdd; }
.landing-hub :focus-visible { outline:2px solid #ffe4ac; outline-offset:4px; }
.hub-dashboard [hidden] { display:none!important; }
.hub-footer { display:flex; align-items:stretch; gap:10px; margin-top:14px; }
.hub-footer #hub-assistant-slot { flex:0 0 144px; min-width:0; }
.hub-event-calendar { display:flex; align-items:center; justify-content:center; gap:8px; flex:0 0 145px; min-height:53px; padding:8px 10px; box-sizing:border-box; border:1px solid #8b88b54a; border-radius:3px; background:linear-gradient(110deg,#1c203bed,#0a1222ed); color:#ddd6ed; text-decoration:none; font:500 11px 'Outfit',sans-serif; }
.hub-event-calendar svg { width:22px; height:22px; flex-shrink:0; color:#c4b2df; }
.hub-event-calendar:hover { border-color:#c5b0ea90; background:#292b4b; }
.hub-footer .landing-latest-patch { flex:1; min-width:0; width:auto; margin:0; border-color:#8b88b54a; background:linear-gradient(110deg,#1c203bed,#0a1222ed); box-shadow:none; }
.hub-footer .landing-latest-patch::before { display:none; }
.hub-footer .landing-latest-patch-bg { display:block; opacity:.17; filter:saturate(.75); }
.hub-footer .landing-latest-patch::after { display:block; background:linear-gradient(90deg,rgba(19,22,42,.75),rgba(10,18,34,.48)); }
.hub-footer .landing-latest-patch:hover .landing-latest-patch-bg,.hub-footer .landing-latest-patch:focus-visible .landing-latest-patch-bg { opacity:.24; }
.hub-footer .landing-latest-patch-icon { color:#c4b2df; text-shadow:none; }
.hub-footer .landing-latest-patch-copy small { font:500 9px/1.3 'Outfit',sans-serif; letter-spacing:.08em; color:#a9a4c1; }
.hub-footer .landing-latest-patch-copy strong { font:500 12px/1.4 'Outfit',sans-serif; color:#e5dff2; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.hub-footer .landing-latest-patch:hover { border-color:#c5b0ea90; background:#292b4b; box-shadow:none; transform:none; }
.hub-footer .landing-latest-patch-date,.hub-footer .landing-latest-patch-more { display:none; }
.hub-footer .mascot-docked { position:relative; inset:auto; z-index:7; display:block; opacity:1; transform:none; animation:none; cursor:default; height:100%; }
.mascot-docked-toggle { box-sizing:border-box; display:flex; align-items:center; gap:7px; width:100%; height:100%; min-height:53px; padding:5px 9px; border:1px solid #c9aee25c; border-radius:3px; background:linear-gradient(110deg,#362747de,#10182aef); color:#eee0fa; cursor:pointer; font:500 11px 'Outfit',sans-serif; }
.mascot-docked-toggle:hover,.mascot-docked-toggle[aria-expanded=true] { border-color:#e2c1ff; background:#342346; }
.hub-footer .mascot-float-icon { width:35px; height:40px; object-fit:contain; filter:drop-shadow(0 2px 6px #0008); }
.mascot-docked-toggle span { min-width:0; white-space:nowrap; }
.mascot-docked-toggle b { flex-shrink:0; font-size:10px; color:#dfbcf6; margin-left:auto; }
.hub-footer .mascot-float-bubble { position:absolute; left:0; bottom:calc(100% + 12px); margin:0; width:270px; max-width:calc(100vw - 70px); box-sizing:border-box; padding:16px; font-size:12px; display:block; background:linear-gradient(140deg,#1d1931,#0b1222); border-color:#b992d780; }
.hub-footer .mascot-float-bubble[hidden] { display:none!important; }
.hub-footer .mascot-float-close { right:6px; top:6px; }
.hub-footer .mascot-float-bubble-text { display:block; padding-right:12px; }
@media(max-width:600px) {
    .hub-footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:0; border:1px solid #8b88b54a; border-radius:6px; background:linear-gradient(110deg,#1c203bed,#0a1222ed); }
    .hub-footer #hub-assistant-slot { grid-column:1; grid-row:2; min-width:0; height:52px; margin:0; }
    .hub-footer .mascot-docked { height:52px; margin:0; }
    .hub-footer .hub-event-calendar { grid-column:2; grid-row:2; border-left:1px solid #8b88b530; }
    .hub-footer .mascot-docked-toggle,.hub-footer .hub-event-calendar { width:100%; height:52px; min-height:52px; margin:0; justify-content:center; gap:8px; padding:8px; border-width:0; border-radius:0 0 5px 5px; background:transparent; box-sizing:border-box; font-size:11px; }
    .hub-footer .hub-event-calendar { border-left:1px solid #8b88b530; }
    .hub-footer .mascot-docked-toggle:hover,.hub-footer .hub-event-calendar:hover { background:#b695eb12; }
    .hub-footer .mascot-docked-toggle span,.hub-footer .hub-event-calendar span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; }
    .hub-footer .mascot-docked-toggle b { display:none; }
    .hub-footer .mascot-float-icon { width:30px; height:32px; }
    .hub-footer .hub-event-calendar svg { width:21px; height:21px; }
    .hub-footer .landing-latest-patch { grid-column:1/-1; grid-row:1; min-height:76px; padding:16px 14px; grid-template-columns:auto minmax(0,1fr); gap:12px; border:0; border-bottom:1px solid #8b88b530; background:transparent; box-shadow:none; border-radius:5px 5px 0 0; }
    .hub-footer .landing-latest-patch-icon { display:block; }
    .hub-footer .landing-latest-patch-copy strong { white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.4; font-size:13px; }
    .hub-footer .landing-latest-patch-copy small { font-size:9px; line-height:1.4; letter-spacing:.06em; margin-bottom:3px; }
    .hub-footer .landing-latest-patch:hover { transform:none; }
    .hub-footer .mascot-float-bubble { max-width:calc(100vw - 48px); }
}
@keyframes hub-orbit { to { transform:rotate(360deg); } }
@media(min-width:1700px) { .hub-stage { min-height:730px; } .hub-character { height:690px; } .hub-event { height:220px; } }
@media(max-width:1150px) { .landing-page .landing-video-hero { padding:115px 24px 75px; } .landing-hub { grid-template-columns:minmax(270px,.75fr) minmax(490px,1.25fr); gap:20px; } .hub-character { height:550px; width:140%; left:-20%; top:30px; } .hub-stage { min-height:670px; } .hub-event { padding:11px; } .hub-event h3 { font-size:16px; } .hub-tool { gap:5px; padding:8px 5px; } .hub-tool>span { font-size:10px; } }
@media(max-width:850px) { .landing-page .landing-video-hero { padding:105px 20px 65px; } .landing-hub { grid-template-columns:1fr; gap:35px; max-width:680px; } .hub-stage { min-height:580px; } .hub-character { height:550px; width:100%; left:0; top:0; } .hub-orbit { width:85%; left:7.5%; top:0; } .hub-stage-word { top:60px; font-size:190px; left:8%; } .hub-character-copy { left:0; } .hub-character-copy h1 { font-size:60px; } .hub-dashboard-heading h2 { font-size:27px; } .hub-event { height:200px; } }
@media(max-width:480px) { .landing-page .landing-video-hero { padding:100px 14px 65px; } .hub-stage { min-height:510px; } .hub-character { height:450px; } .hub-stage-heading { font-size:8px; } .hub-stage-word { font-size:140px; } .hub-dashboard-heading { align-items:flex-start; } .hub-dashboard-heading h2 { font-size:22px; } .hub-dashboard-heading>a { font-size:10px; padding:10px; } .hub-events { grid-template-columns:1fr 1fr; gap:8px; } .hub-event { height:180px; } .hub-event--pass { grid-column:1/-1; height:115px; } .hub-event--pass>img { object-position:50% 35%; } .hub-event--pass>div { margin-left:36%; } .hub-event--pass .hub-event-tag { position:absolute; top:12px; left:12px; } .hub-bottom { grid-template-columns:1fr; } .hub-skin-tile .landing-shop-peek-spotlight { height:220px; } .hub-community { grid-template-columns:repeat(2,1fr); } .hub-tool>span { font-size:12px; } .hub-dashboard .landing-latest-patch-date,.hub-dashboard .landing-latest-patch-more { display:none; } }
@media(prefers-reduced-motion:reduce) { .hub-orbit svg { animation:none; } .landing-hub * { transition:none!important; } }

/* Fixed navigation must occlude scrolled content and retain its own hit area. */
.landing-page .landing-topbar {
    background:linear-gradient(110deg,#101224,#080f1d);
    border-bottom:1px solid #a6a1cf26;
    box-shadow:0 8px 24px #03061180;
    pointer-events:auto;
}
.landing-page .landing-video-hero { padding-top:calc(var(--landing-header-height,96px) + 28px); }
.landing-hub .hub-dashboard,.landing-hub .hub-footer,.landing-hub button,.landing-hub a { scroll-margin-top:calc(var(--landing-header-height,96px) + 16px); }
.hub-dashboard-heading>div { min-width:0; }
/* Social shortcuts belong to the page footer, not over game cards. */
.landing-page .global-social-links { position:relative; inset:auto; z-index:auto; justify-content:center; flex-wrap:wrap; margin:28px auto; }
@media (min-width:481px) and (max-width:1150px) {
    .hub-community .hub-tool { flex-direction:column; align-items:center; justify-content:center; gap:4px; }
}
@media (max-width:480px) {
    .hub-community .hub-tool--profile { grid-column:1/-1; justify-content:center; }
}