@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--ink:#090b12;--panel:#111420;--gold:#efbd67;--teal:#62d9c5;--violet:#a086ed;--text:#f3f0e9;--muted:#a9a8b8;--line:#ffffff16;font-family:'DM Sans',system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--ink);color:var(--text);font-size:15px;line-height:1.65}button,a,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{opacity:.5;cursor:not-allowed}button,a{transition:transform .18s,color .18s,border-color .18s,background .18s}button:hover:not(:disabled){transform:translateY(-2px)}button:active:not(:disabled){transform:scale(.97)}:focus-visible{outline:2px solid var(--teal);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3,.brand,.manifesto>span,.house-grid strong,.stage-name{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif}h1,h2{font-weight:800;letter-spacing:-.025em;line-height:.94}h2{font-size:clamp(44px,5.1vw,72px)}em{font-style:normal;color:var(--gold)}p{color:var(--muted)}button{border:0}.skip{position:fixed;top:-100px;background:var(--gold);color:#111;z-index:100;padding:12px}.skip:focus{top:0}.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid var(--line);position:absolute;inset:0 0 auto;z-index:10;background:linear-gradient(#090b12ed,#090b1260)}.brand{display:flex;align-items:center;font-size:28px;font-weight:800;letter-spacing:1px;position:relative;line-height:1}.brand>span:not(.brand-mark){color:var(--gold)}.brand small{position:absolute;top:36px;left:47px;font:7px/1 monospace;letter-spacing:2px;color:#c8bfb0}.brand-mark{width:32px;height:34px;border:2px solid var(--gold);margin-right:12px;color:var(--gold);display:grid;place-items:center;font-size:25px;transform:skew(-8deg);position:relative}.brand-mark span{font:16px monospace;position:absolute;right:-8px;top:-8px;background:#10101a}.site-header nav{display:flex;gap:30px;font-size:12px;font-weight:600;letter-spacing:.3px}.site-header nav a:hover{color:var(--gold)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;padding:13px 23px;border:1px solid #ffffff35;background:#10111e90;font-size:13px;font-weight:700;border-radius:4px}.button.primary{background:var(--gold);color:#1b1720;border-color:var(--gold);box-shadow:0 3px 0 #9a6c28}.button.primary:hover{background:#ffd493;box-shadow:0 5px 22px #edb55e35}.button.small{min-height:40px;font-size:12px;padding:10px 16px}.text-button{background:transparent;font-size:12px;display:inline-flex;align-items:center;gap:12px;font-weight:600;padding:8px 0}.text-button:hover{color:var(--gold)}.hero{min-height:790px;height:min(920px,100svh);position:relative;overflow:hidden;background:#11101d}.hero-art{position:absolute;inset:0;background-image:linear-gradient(90deg,#090b12fa 0%,#090b12bd 27%,#090b1220 65%),linear-gradient(0deg,#090b12 0%,transparent 23%),url('/web/art/trenches-robinhood-hd.webp');background-size:cover;background-position:center,center,center;animation:scene-breathe 20s ease-in-out infinite alternate}.hero-grid{position:absolute;inset:0;opacity:.08;background-image:linear-gradient(90deg,#b895ee 1px,transparent 1px);background-size:25% 100%;pointer-events:none}.hero-content{position:relative;padding:154px 0 70px 7.2%;max-width:680px;z-index:2}.eyebrow{font:10px/1.5 monospace;font-weight:600;letter-spacing:2.3px;color:var(--gold)}.signal{display:inline-block;width:6px;height:6px;background:var(--teal);border-radius:50%;box-shadow:0 0 12px var(--teal);margin-right:8px}.hero h1{font-size:clamp(65px,6.5vw,100px);margin:26px 0;color:#fff7ec}.hero h1>span{color:var(--gold)}.hero p{font-size:14px;color:#c4c2c8}.actions{display:flex;gap:26px;align-items:center;margin:28px 0}.play-icon{width:29px;height:29px;display:grid;place-items:center;border:1px solid #ffffff60;border-radius:50%;font-size:18px}.hero-meta{font:8px monospace;letter-spacing:1.3px;color:#a2a0b0;display:flex;gap:13px;align-items:center}.hero-meta i{height:3px;width:3px;background:var(--gold)}.scene-caption{position:absolute;right:6%;top:25%;text-align:right;display:grid;gap:5px;border-right:2px solid var(--gold);padding-right:15px;text-shadow:0 2px 12px #000}.scene-caption>span{font:9px monospace;letter-spacing:2px;color:#e7c896}.scene-caption strong{font-size:15px}.scene-caption .coordinates{font-size:8px;color:#aba4bf}.scroll-cue{position:absolute;bottom:32px;left:7.2%;font:9px monospace;letter-spacing:2px;z-index:2;display:flex;gap:24px;align-items:center}.scroll-cue span{font-size:20px;color:var(--gold)}.hero-champions{position:absolute;bottom:38px;right:6%;width:43%;height:300px;display:flex;align-items:end;justify-content:center;pointer-events:none}.hero-champions canvas{width:34%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 15px 8px #000a)}.hero-champions canvas:nth-child(2){width:42%;margin-left:-8%;margin-right:-8%;z-index:1}.manifesto{display:flex;align-items:center;justify-content:space-around;border-block:1px solid #e7bc602b;background:#11111a;padding:23px 6%}.manifesto>span{font-size:30px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:10px}.manifesto small{font:9px monospace;letter-spacing:2px;color:#b9b1bd}.manifesto b{font-size:14px;color:#715e43}.section{padding:105px 7.2%;max-width:1600px;margin:auto}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:45px;gap:25px}.section-heading .eyebrow{margin-bottom:18px}.section-heading p{font-size:13px;max-width:360px;padding-bottom:5px}.champion-layout{display:grid;grid-template-columns:1.1fr 1fr;background:#11121d;border:1px solid var(--line);border-radius:8px;overflow:hidden}.champion-stage{position:relative;min-height:430px;background:radial-gradient(ellipse at 50% 48%,#b5813128,transparent 65%),#13131e;overflow:hidden;--aura:var(--gold)}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000)}.stage-index{position:absolute;top:22px;left:24px;font:10px monospace;letter-spacing:2px;color:#a1a0ae}.stage-orbit{position:absolute;width:64%;height:65%;border:1px solid #e9c37925;border-radius:50%;left:18%;top:17%;transform:rotateX(30deg);box-shadow:0 0 100px #8e70e50b}.champion-stage canvas{position:absolute;inset:0;margin:auto;width:min(92%,430px);height:auto;image-rendering:pixelated;z-index:2}.stage-name{position:absolute;bottom:50px;left:0;right:0;text-align:center;font-size:100px;letter-spacing:5px;font-weight:900;color:#ffffff05;white-space:nowrap}.preview-button{position:absolute;bottom:18px;right:18px;z-index:3;background:#ffffff0a;border:1px solid #ffffff20;border-radius:4px;padding:8px 12px;font-size:10px}.stage-caption{position:absolute;bottom:28px;left:22px;font:7px monospace;letter-spacing:1px;color:#767383}.champion-info{padding:44px;border-left:1px solid var(--line)}.champion-tags{display:flex;gap:10px;font:9px monospace;letter-spacing:1px}.champion-tags span{border:1px solid #a994cf30;padding:5px 9px;border-radius:2px;color:#d0c0e8}.champion-info h3{font-size:62px;line-height:1.15;margin:13px 0}.champion-info p{font-size:13px;max-width:410px}.ult-line{margin:22px 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px}.ult-line span,.wardrobe-heading{font:9px monospace;letter-spacing:1.5px;color:#96909f}.ult-line strong{font-size:12px;color:var(--gold)}.wardrobe-heading{display:flex;justify-content:space-between;margin-bottom:12px}.skin-select{display:flex;gap:8px}.skin-select button{width:37px;height:37px;background:var(--swatch);border:4px solid #14141e;outline:1px solid #ffffff20;border-radius:50%;position:relative}.skin-select button[aria-pressed=true]{outline:2px solid var(--gold)}.skin-select button[aria-pressed=true]:after{content:'✓';color:#101119;font-weight:900}.look-name{font-size:13px;margin:15px 0 2px}.muted{font-size:10px;color:#8f8a9b}.champion-select{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:16px}.champion-select button{background:#10121b;border:1px solid var(--line);border-radius:4px;padding:8px 5px 9px;font-size:10px;color:#bbb5c6}.champion-select button[aria-pressed=true]{border-color:var(--gold);background:#e5b16010;color:var(--gold)}.champion-select canvas{display:block;width:64px;height:64px;max-width:100%;margin:auto;image-rendering:pixelated}.world{border-top:1px solid var(--line)}.world-layout{display:grid;grid-template-columns:1.65fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden}.world-map{min-height:420px;position:relative;background:linear-gradient(0deg,#08091380,transparent),url('/web/art/trenches-robinhood-hd.webp') center right/cover}.map-label{position:absolute;left:22px;top:20px;font:11px monospace;letter-spacing:2px;text-shadow:0 2px 4px #000}.map-label span{display:block;font-size:7px;letter-spacing:1px;margin-top:7px;color:#b8b5c1}.map-pin{position:absolute;left:var(--x);top:var(--y);width:35px;height:35px;background:#16111bdd;border:1px solid #e5bd69;border-radius:50%;font:12px monospace;color:#f1d48e;box-shadow:0 0 0 6px #e5bd6920}.map-pin[aria-pressed=true]{background:var(--gold);color:#19131e;box-shadow:0 0 0 9px #e5bd6920,0 0 30px #e5bd69a0}.place-info{padding:36px;background:#11121b;display:flex;flex-direction:column;align-items:start}.place-symbol{color:var(--gold);font-size:45px;line-height:1;margin:28px 0 15px}.place-info h3{font-size:36px;margin-bottom:10px}.place-info p{font-size:13px}.place-info>a{color:var(--gold);margin:15px 0}.place-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:20px}.place-tabs button{background:none;border:1px solid var(--line);padding:6px 8px;border-radius:3px;font-size:10px;color:#9993a5}.place-tabs button[aria-pressed=true]{color:var(--gold);border-color:#edbd6355}.modes{padding-top:40px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.mode-card{background:radial-gradient(ellipse at 50% 0%,var(--modeglow),transparent 65%),#11121b;border:1px solid var(--line);padding:27px;border-radius:6px;overflow:hidden;position:relative;--modeglow:#78613235}.mode-card.pit{--modeglow:#8776c045}.mode-card.royale{--modeglow:#29797940}.mode-index{font:9px monospace;letter-spacing:1.5px;color:#9991a5}.mode-art{font-size:76px;color:#d4ba80;line-height:1.6;text-align:center;text-shadow:0 0 40px #d7a95240}.pit .mode-art{color:#b69bea;text-shadow:0 0 40px #a074ef60}.royale .mode-art{color:#62d9c5;text-shadow:0 0 40px #62d9c560}.mode-card h3{font-size:38px}.mode-card p{font-size:12px;min-height:65px;margin:10px 0 20px}.mode-card .text-button{color:var(--gold);border-top:1px solid var(--line);width:100%;padding-top:17px}.ghost-line{border:1px solid var(--line);margin-top:17px;display:flex;align-items:center;gap:25px;padding:20px 27px;border-radius:4px}.ghost-line>span{font:8px monospace;letter-spacing:1px;color:#a294b4}.ghost-line strong{white-space:nowrap}.ghost-line p{font-size:11px}.ghost-line button{margin-left:auto;white-space:nowrap}.houses{padding-top:40px}.house-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.house-grid button{display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#ffffff02,transparent);border:1px solid var(--line);border-top:2px solid var(--house);padding:30px 15px;border-radius:5px}.house-grid button[aria-pressed=true]{background:linear-gradient(180deg,#eabc6220,transparent);border-color:var(--house)}.house-sigil{font-size:60px;line-height:1.4;color:var(--house);text-shadow:0 0 26px color-mix(in srgb,var(--house) 20%,transparent)}.house-grid small{font:8px monospace;letter-spacing:1px;color:var(--house);margin:15px 0 12px}.house-grid strong{font-size:27px;letter-spacing:1px}.house-grid button>span:last-child{font-size:10px;color:#aaa0b0;margin-top:7px}.house-roster{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:22px}.house-roster>span{font:9px monospace;letter-spacing:1px;color:#9b92a9}.house-roster button{background:#141521;border:1px solid var(--line);padding:6px 12px;border-radius:3px;font-size:11px}.join{text-align:center;padding-block:85px 100px;background:radial-gradient(ellipse at bottom,#4d38612b,transparent 65%);border-top:1px solid var(--line)}.join h2{font-size:clamp(64px,8vw,112px);margin:25px 0}.join p{margin-bottom:25px}.join small{display:block;font-size:10px;color:#958a9d;margin-top:24px}footer{border-top:1px solid var(--line);padding:35px 7.2%;display:flex;align-items:center;gap:35px}footer p{font-size:9px;margin-right:auto}footer>span,footer button{font-size:9px;color:#9c8fa8}dialog{border:1px solid #b4915b50;border-radius:10px;background:#12141f;color:var(--text);width:470px;max-width:calc(100vw - 28px);max-height:90svh;padding:36px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#05060ddc;backdrop-filter:blur(6px)}dialog .close{position:absolute;right:16px;top:12px;font-size:28px;background:none;line-height:1}dialog h2{font-size:50px;margin:24px 0 15px}dialog p{font-size:12px;margin:15px 0}#methods{display:grid;gap:10px;margin:20px 0}#methods button{width:100%;display:flex;justify-content:space-between;background:#202230;border:1px solid #ffffff18;border-radius:5px;padding:15px;font-size:13px;text-align:left}#methods button:hover{border-color:var(--gold)}#methods button span{font-size:10px;color:#bdb2cb}#methods .wallet-name{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--text)}#methods .wallet-icon{width:28px;height:28px;border-radius:7px;object-fit:contain;background:#ffffff0d;flex:none}#methods .wallet-icon-blank{border:1px dashed #ffffff33}#methods .wallet-others{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}#methods .wallet-others summary{cursor:pointer;font-size:13px;color:var(--gold);list-style:none}#methods .wallet-others summary::-webkit-details-marker{display:none}#methods .wallet-others summary::before{content:'+ ';color:var(--muted)}#methods .wallet-others[open] summary::before{content:'– '}#methods .wallet-install{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}#methods .wallet-install a{border:1px solid #ffffff22;border-radius:4px;padding:8px 12px;font-size:12px;font-weight:600}#methods .wallet-install a:hover{border-color:var(--gold);color:var(--gold)}.wallet-steps{display:flex;justify-content:space-between;border-block:1px solid var(--line);padding:14px 0;margin-top:20px;font:10px monospace;color:var(--gold)}#message{color:#edbd63;min-height:20px;overflow-wrap:anywhere}#content-dialog{width:780px}#content-dialog canvas{width:100%;border:1px solid var(--line);border-radius:6px;image-rendering:pixelated;background:radial-gradient(ellipse,#51426130,#0d1019)}.instruction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.instruction-grid strong{font-size:12px;color:var(--gold)}.instruction-grid p{font-size:11px;margin:7px 0}.dialog-table{width:100%;border-collapse:collapse;font-size:12px}.dialog-table td,.dialog-table th{padding:13px 7px;text-align:left;border-bottom:1px solid var(--line)}.profile-line{padding:14px 0;border-bottom:1px solid var(--line)}.profile-line small{color:#9f94ad;display:block}.profile-line strong{font-size:13px;overflow-wrap:anywhere}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:50;background:#202332;border:1px solid #665b76;border-radius:6px;padding:12px 20px;max-width:90vw;display:none}.paused *,.paused *:before,.paused *:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}@keyframes scene-breathe{from{transform:scale(1)}to{transform:scale(1.025)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(min-width:1700px){.hero-content{padding-left:calc((100vw - 1450px)/2)}.hero{height:880px}.hero h1{font-size:110px}}@media(max-width:1000px){.site-header nav{gap:18px}.hero h1{font-size:78px}.hero-champions{right:0;width:48%;bottom:65px}.hero-content{padding-left:6%}.scene-caption{right:4%;top:30%}.section{padding:75px 5%}.champion-info{padding:30px}.champion-stage{min-height:430px}.hero-content{max-width:570px}.ghost-line{flex-wrap:wrap;gap:14px}.ghost-line p{width:45%}.house-grid strong{font-size:23px}.hero{min-height:770px}.world-layout{grid-template-columns:1.4fr 1fr}}@media(max-width:700px){.site-header{height:76px;padding:0 20px}.site-header nav{display:none}.brand{font-size:24px}.brand small{font-size:6px;letter-spacing:1px;top:32px;left:44px}.button.small{font-size:10px;gap:10px;padding:10px}.hero{min-height:820px;height:auto}.hero-content{padding:125px 24px 270px;max-width:none}.hero h1{font-size:72px}.hero .eyebrow{font-size:7px;letter-spacing:1.5px}.hero-art{background-position:center,center,61% center;background-image:linear-gradient(90deg,#090b12e6,#090b1277 70%),linear-gradient(0deg,#090b12,transparent 55%),url('/web/art/trenches-robinhood-hd.webp')}.hero p{font-size:12px}.hero .actions{gap:18px;flex-wrap:wrap;margin:25px 0}.hero .button{font-size:11px;padding:13px 16px;gap:20px}.hero .text-button{font-size:11px}.hero-meta{font-size:6px;gap:8px}.hero-champions{width:86%;right:3%;bottom:53px;height:235px}.scene-caption{display:none}.scroll-cue{left:24px;bottom:24px;font-size:8px}.manifesto{display:grid;grid-template-columns:1fr 1fr;padding:20px 24px;gap:14px}.manifesto b{display:none}.manifesto>span{font-size:23px;gap:7px}.manifesto small{font-size:7px;letter-spacing:1px}.section{padding:65px 22px}.section-heading{display:block;margin-bottom:30px}.section-heading p{margin-top:22px;font-size:12px}.champion-layout{grid-template-columns:1fr}.champion-stage{min-height:340px}.champion-stage canvas{width:340px;max-width:100%}.champion-info{padding:25px;border-left:0;border-top:1px solid var(--line)}.champion-info h3{font-size:48px}.champion-select{grid-template-columns:repeat(4,1fr);gap:6px}.champion-select canvas{width:55px;height:55px}.world-layout{grid-template-columns:1fr}.world-map{min-height:330px}.place-info{padding:25px}.place-symbol{margin:20px 0 10px}.mode-grid{grid-template-columns:1fr}.mode-card{padding:25px;display:grid;grid-template-columns:1fr 80px}.mode-index,.mode-card h3,.mode-card p,.mode-card button{grid-column:1}.mode-art{grid-column:2;grid-row:1/4;font-size:50px;align-self:center}.mode-card p{min-height:0}.mode-card button{grid-column:1/3}.ghost-line{padding:22px;display:block}.ghost-line>*{display:block;margin:8px 0!important}.ghost-line p{width:auto}.house-grid{grid-template-columns:1fr 1fr;gap:10px}.house-grid button{padding:20px 7px}.house-grid strong{font-size:22px}.house-grid small{font-size:6px}.house-grid button>span:last-child{font-size:8px}.house-sigil{font-size:45px}.join h2{font-size:75px}footer{flex-wrap:wrap;padding:30px 22px;gap:20px}footer p{width:calc(100% - 140px);font-size:8px}dialog{padding:29px 23px}.instruction-grid{grid-template-columns:1fr;gap:0}.stage-caption{font-size:6px}.champions .section-heading h2{font-size:55px}}
/* Living city hero: the artwork and its light pass share one camera transform. */
.hero{--journey:0}
.hero-art{animation:none!important;transform-origin:65% 45%;transform:translateY(calc(var(--journey)*72px)) scale(calc(1 + var(--journey)*.035));will-change:transform}
#city-life{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mask-image:linear-gradient(90deg,transparent 25%,#000 65%)}
.hero-content{transform:translateY(calc(var(--journey)*-42px));opacity:calc(1 - var(--journey)*.8)}
.scene-caption{opacity:calc(1 - var(--journey));pointer-events:none}
.homepage-music{position:absolute;right:5%;bottom:35px;z-index:4;display:grid;grid-template-columns:24px auto;column-gap:12px;text-align:left;border:1px solid #efbd6740;background:#0b0e17bb;backdrop-filter:blur(10px);border-radius:6px;padding:13px 18px;color:#efbd67;font:10px monospace;letter-spacing:1.5px}
.homepage-music small{grid-column:2;font:7px monospace;color:#b4aabc;letter-spacing:1.7px;margin-top:5px}
.sound-bars{grid-row:1/3;display:flex;gap:3px;align-items:center;height:27px}.sound-bars i{width:2px;height:4px;background:currentColor;border-radius:2px}
.homepage-music[aria-pressed=true] .sound-bars i{animation:fm-wave .9s ease-in-out infinite alternate}.sound-bars i:nth-child(2){animation-delay:-.5s!important}.sound-bars i:nth-child(3){animation-delay:-.2s!important}.sound-bars i:nth-child(4){animation-delay:-.7s!important}
@keyframes fm-wave{from{height:4px}to{height:22px}}
.scroll-cue span{display:inline-block;animation:scroll-invite 2s ease-in-out infinite}
@keyframes scroll-invite{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
#champions.arrival-ready .section-heading,#champions.arrival-ready .champion-layout,#champions.arrival-ready .champion-select{opacity:0;transform:translateY(45px);transition:opacity .85s ease,transform 1s cubic-bezier(.16,1,.3,1)}
#champions.arrived .section-heading,#champions.arrived .champion-layout,#champions.arrived .champion-select{opacity:1;transform:none}
#champions.arrived .champion-layout{transition-delay:.12s}#champions.arrived .champion-select{transition-delay:.22s}
.manifesto{position:relative;z-index:2;box-shadow:0 -28px 65px #090b1270}
body.paused .hero-art,body.paused .hero-content{transform:none!important}body.paused .hero-content,body.paused .scene-caption{opacity:1}
body.paused #champions.arrival-ready :is(.section-heading,.champion-layout,.champion-select){opacity:1;transform:none;transition:none}
body.paused .sound-bars i,body.paused .scroll-cue span{animation:none!important}
@media(max-width:767px){.homepage-music{right:24px;bottom:34px;padding:10px;column-gap:8px;font-size:8px}.homepage-music small{font-size:6px}.scroll-cue{max-width:145px;font-size:7px}.hero-content{padding-bottom:240px}#city-life{mask-image:linear-gradient(90deg,transparent,#000 75%)}}
@media(prefers-reduced-motion:reduce){.hero-art,.hero-content{transform:none!important}.hero-content,.scene-caption{opacity:1!important}#champions.arrival-ready :is(.section-heading,.champion-layout,.champion-select){opacity:1!important;transform:none!important;transition:none!important}.sound-bars i,.scroll-cue span{animation:none!important}}
/* Full-screen world entrance. All editorial content lives inside the beacons. */
body.immersive{overflow:hidden;background:#0a0d17}
.immersive .hero{height:100dvh;min-height:0;max-height:none;width:100%;isolation:isolate}
.immersive .hero-art{inset:0;background-image:url('/web/art/trenches-robinhood-hd.webp');background-size:cover;background-position:center;transform:none!important;filter:saturate(1.1) contrast(1.035)}
.immersive .hero-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#05081166,transparent 15%,transparent 85%,#05081177)}
.immersive #city-life{mask-image:none}
.city-header{position:fixed;z-index:5;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:25px 35px;pointer-events:none}
.city-header>*{pointer-events:auto}.city-header .brand{font:800 25px 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1px;text-shadow:0 2px 12px #000}.city-header .button{background:#0b0e17b8;backdrop-filter:blur(12px);border-color:#efbd6744}
.city-hotspots button{position:absolute;left:var(--pin-x);top:var(--pin-y);transform:translate(-50%,-50%);padding:5px;background:transparent;border-radius:50%;z-index:3;color:#fff0d2}
.city-hotspots button:hover,.city-hotspots button:active{transform:translate(-50%,-50%)}
.city-hotspots b{display:grid;place-items:center;width:40px;height:40px;border:1px solid #f0cb89ab;border-radius:50%;background:#10101bd9;backdrop-filter:blur(7px);box-shadow:0 0 0 5px #ecc58012,0 0 28px #edc57535;font:12px monospace;transition:background .2s,box-shadow .2s}
.city-hotspots button:hover b,.city-hotspots button:focus-visible b{background:#a77d3c;box-shadow:0 0 0 8px #ecc58022,0 0 35px #edc57555}
.city-hotspots button span{position:absolute;top:59px;left:50%;transform:translate(-50%,-5px);white-space:nowrap;padding:7px 12px;border:1px solid #ffffff18;border-radius:6px;background:#0b0e17e8;font-size:11px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.city-hotspots button:hover span,.city-hotspots button:focus-visible span{opacity:1;transform:translate(-50%,0)}
.city-hint{position:absolute;left:35px;bottom:34px;color:#f1d6a4;font:9px monospace;letter-spacing:2px;pointer-events:none;text-shadow:0 1px 5px #000}
.city-hint span{display:block;margin-top:8px;color:#c5bccb;font-size:7px;letter-spacing:2.5px}
.city-motion{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:4;background:#0a0d1780;border:1px solid #ffffff18;border-radius:5px;color:#c9c1d1;padding:8px 12px;font:9px monospace}.city-motion:hover,.city-motion:active{transform:translateX(-50%)}
.immersive .homepage-music{right:35px;bottom:25px}
#feature-dialog{width:min(1100px,94vw);max-width:none;max-height:88dvh;padding:30px;background:#10121eeF;border:1px solid #c6a16044;border-radius:18px;overscroll-behavior:contain;animation:panel-arrival .3s ease}
#feature-dialog::backdrop{background:#0608169c;backdrop-filter:blur(5px)}
.feature-tabs{display:flex;gap:8px;flex-wrap:wrap;padding-right:34px;margin-bottom:25px}.feature-tabs button{padding:9px 13px;border-radius:6px;background:#ffffff06;color:#afa9bd;font:10px monospace;border:1px solid #ffffff0c}.feature-tabs button[aria-pressed=true]{color:#efbd67;border-color:#efbd6755;background:#efbd670d}
#feature-dialog .section{padding:12px 0 20px;max-width:none;margin:0}#feature-dialog .section-heading{margin-bottom:25px}#feature-dialog h2{font-size:48px}#feature-dialog .section-heading p{font-size:12px}#feature-dialog .champion-stage{min-height:330px}#feature-dialog .champion-info{padding:30px}#feature-dialog .champion-layout{grid-template-columns:1fr 1fr}#feature-dialog .champion-select{margin-top:14px}#feature-dialog .champion-select canvas{height:60px;width:60px}#feature-dialog .champion-select button{padding:6px}#feature-dialog .world-map{min-height:350px}#feature-dialog .house-grid strong{font-size:23px}#feature-dialog .house-grid button{padding:20px 8px}
.feature-entry{display:flex;align-items:center;gap:20px;border-top:1px solid #ffffff12;margin-top:18px;padding-top:20px}.feature-entry small{font-size:10px;color:#a7a0b4}
@keyframes panel-arrival{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:767px){.immersive .hero-art{background-position:61% center}.city-header{padding:19px 18px}.city-header .brand{font-size:23px}.city-header .button{font-size:10px;padding:11px 13px;gap:10px}.city-hotspots{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);display:flex;gap:22px;padding:12px 15px;border-radius:35px;background:#0b0e1777;backdrop-filter:blur(8px)}.city-hotspots button{position:relative;left:auto;top:auto;transform:none!important;padding:0}.city-hotspots b{width:42px;height:42px}.city-hotspots button span{display:none}.city-hint{left:18px;bottom:82px;font-size:7px}.city-hint span{display:none}.immersive .homepage-music{right:18px;bottom:18px}.city-motion{left:18px;bottom:22px;transform:none!important}#feature-dialog{padding:22px 17px;max-height:90dvh;width:96vw}.feature-tabs{gap:5px}.feature-tabs button{padding:7px;font-size:8px}#feature-dialog h2{font-size:38px}#feature-dialog .champion-layout{grid-template-columns:1fr}#feature-dialog .champion-stage{min-height:280px}#feature-dialog .champion-info{padding:23px}#feature-dialog .section-heading p{margin-top:12px}#feature-dialog .champion-select{grid-template-columns:repeat(4,1fr)}.feature-entry{flex-wrap:wrap;gap:10px}#feature-dialog .world-layout{grid-template-columns:1fr}}
#feature-dialog>.close{position:sticky;top:0;float:right;right:auto;margin:-12px -12px 0 8px;z-index:12;background:#1b2032;border:1px solid #ffffff24;border-radius:50%;width:36px;height:36px;line-height:30px}
/* Preserve the entire original panorama instead of cropping its outer districts. */
.immersive .hero{background:radial-gradient(ellipse at 32% 20%,#22204b 0%,#13132f 45%,#090f20 100%)}
.immersive .hero-art{background-image:url('/web/art/trenches-robinhood-hd.webp');background-size:cover;background-repeat:no-repeat;background-position:center top!important;filter:none}
.immersive .hero-art::after{background:linear-gradient(#07091933,transparent 10%,transparent 91%,#07091933)}
@media(min-resolution:1.5dppx),(min-width:2560px){.immersive .hero-art{background-image:url('/web/art/trenches-robinhood-hd.webp')}}
@media(max-width:767px){.immersive .hero-art{background-size:contain}.city-hotspots{bottom:110px}.city-hint{color:#c9b5e3}}
#city-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none;opacity:0}
.film-playing #city-film{opacity:1}.film-playing #city-life{visibility:hidden}
body.paused #city-film{opacity:0}

/* Chain insignia echo the four Colosseum banners. */
.house-sigil{display:flex;align-items:center;justify-content:center;min-height:120px}.house-sigil img{display:block;width:80px;height:96px;object-fit:contain;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--house) 25%,transparent))}.house-grid button:hover .house-sigil img{transform:translateY(-3px)}.house-sigil img{transition:transform .2s}.paused .house-sigil img{transition:none;transform:none}@media(max-width:700px){.house-sigil{min-height:90px}.house-sigil img{width:56px;height:72px}}

.header-actions{display:flex;gap:10px;align-items:center;pointer-events:auto;position:relative}.account-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:240px;background:var(--panel);border:1px solid #ffffff22;border-radius:8px;padding:14px;display:grid;gap:10px;box-shadow:0 18px 40px #00000088;z-index:40}.account-menu-head{display:grid;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--line)}.account-menu-head small{font-size:9px;letter-spacing:2px;color:var(--muted)}.account-menu-head strong{font-size:16px}.account-menu-head span{font-size:12px;color:var(--muted);font-family:'DM Mono',monospace}.account-menu .button{justify-content:center}.account-menu .text-button{text-align:left;padding:6px 0;background:none;border:0;color:var(--muted)}.account-menu .text-button:hover{color:var(--text)}.account-menu .menu-warn{margin:0;padding:8px 10px;border-left:2px solid var(--gold);background:#efbd670f;font-size:12px;line-height:1.5;color:var(--muted)}
.city-header .button.primary{background:var(--gold);border-color:var(--gold);color:#1b1720;backdrop-filter:none}
@media(max-width:600px){.header-actions{gap:6px}.header-actions .button{gap:6px;padding:10px 10px;font-size:9px;letter-spacing:.2px}.header-actions .button span{display:none}}