/* Endless landing page. Existing account forms keep their established layout. */.landing-page{--accent:#ff9800;--accent-hover:#ffad33;background:#0b0b0c;color:#fff;isolation:isolate}.landing-page::before{content:"";position:absolute;inset:0 0 auto;height:min(1000px,110vh);z-index:-2;background:linear-gradient(180deg,#000a,#0b0b0c 96%),url('/assets/gta-v-los-santos.jpg') center 35%/cover no-repeat;filter:grayscale(1);opacity:.65;pointer-events:none}.landing-page .topbar{background:transparent;border:0;box-shadow:none}.landing-page .header-inner{width:min(1740px,94%);max-width:none;min-height:132px;padding:16px 18px;gap:26px}.landing-page .brand{display:flex;gap:8px;align-items:center}.landing-page .brand img{width:68px;height:68px}.landing-page .brand-name{display:block;font-size:27px;font-weight:900;font-style:italic;line-height:1;letter-spacing:-1.2px}.landing-page .brand-name small{font-size:9px;letter-spacing:3.1px;font-weight:600;font-style:normal;margin-top:7px;color:#c5c5c5}.online-status{padding:11px 12px;display:flex;align-items:center;gap:8px;white-space:nowrap;background:#ffffff0a;border:1px solid #ffffff08;border-radius:5px;color:#ccc;font-size:12px;font-weight:700}.status-dot{height:6px;width:6px;background:#858585;border-radius:50%;flex:none}.online-status.available .status-dot{background:#ff9800;box-shadow:0 0 8px #ff980050}.online-status strong{margin-left:5px;color:#fff}.landing-page nav{margin:auto;gap:25px;font-size:12px;font-weight:700;white-space:nowrap}.landing-page nav a{font-size:inherit;color:#bbb;padding:12px 0}.landing-page nav a:hover{color:#fff;text-decoration:none}.header-account{display:flex;align-items:center;gap:22px;white-space:nowrap}.language-label{font-size:12px;font-weight:700;color:#c5c5c5}.language-label span{margin-left:8px;font-size:23px;vertical-align:middle}.landing-page .button{border-radius:5px;font-size:12px;font-weight:800;letter-spacing:.1px;padding:16px 23px;min-height:48px}.landing-page .button.small{min-height:46px;padding:14px 21px}.roles-hero{width:min(1780px,95%);margin:8px auto 0}.roles-viewport{overflow:hidden;border-radius:16px;scrollbar-width:none}.roles-viewport::-webkit-scrollbar{display:none}.roles-artwork{position:relative;width:100%;aspect-ratio:2057/765}.roles-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none}/* Every hover layer uses the same canvas as the original, without rescaling slices. */.roles-image{filter:grayscale(1)}.role-panel{display:block;text-decoration:none;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:#fff;cursor:pointer;isolation:isolate;clip-path:var(--card-shape);-webkit-tap-highlight-color:transparent}.role-color{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:contain;filter:sepia(1) saturate(5) hue-rotate(350deg);opacity:0;transition:opacity .2s;pointer-events:none}.role-panel::after{content:"";position:absolute;inset:0;background:#ff9800;mix-blend-mode:color;mask:url('/assets/direct-roles.png') center/100% 100% no-repeat;-webkit-mask:url('/assets/direct-roles.png') center/100% 100% no-repeat;opacity:0;transition:opacity .2s;pointer-events:none}.role-panel:hover .role-color,.role-panel:focus-visible .role-color{opacity:1}.role-panel:hover::after,.role-panel:focus-visible::after{opacity:.8}.role-start::after{display:none}.role-panel:focus-visible{outline:none}.role-panel:focus-visible .role-label strong{text-decoration:underline;text-underline-offset:5px}.role-label{position:absolute;z-index:1;bottom:11%;left:calc(var(--start)*1%);width:calc(var(--span)*1%);padding:5px 8px;text-align:center;line-height:1.4;text-shadow:0 2px 10px #000;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}.role-label>span:not(.play-circle){display:block;color:#ddd;font-size:11px;font-weight:600}.role-label strong{font-size:clamp(12px,1vw,18px);font-weight:900}.role-panel:hover .role-label,.role-panel:focus-visible .role-label{opacity:1;transform:none}.play-start .role-label{bottom:8%;height:29%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;opacity:1;transform:none}.play-circle{height:clamp(46px,4.2vw,77px);width:clamp(46px,4.2vw,77px);flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 6px 24px #d9790030;transition:transform .2s,box-shadow .2s}.play-circle svg{width:32%;height:32%;fill:#ff9800}.play-start:hover .play-circle{transform:scale(1.1);box-shadow:0 0 0 11px #ffffff1a}.swipe-hint{display:none}.world-intro{max-width:760px;margin:72px auto 55px;padding:0 25px;text-align:center;scroll-margin-top:30px}.intro-kicker{font-size:10px;font-weight:700;letter-spacing:2.6px;color:#aaa;margin:0 0 17px}.world-intro h2{font-size:clamp(29px,3vw,44px);letter-spacing:-1.2px;line-height:1.15;margin:0 0 20px;font-weight:800}.world-intro h2 span{color:#ff9800}.world-intro>p:not(.intro-kicker){font-size:15px;color:#b9b9be;line-height:1.85;max-width:590px;margin:0 auto}.intro-actions{display:flex;gap:30px;justify-content:center;align-items:center;margin:26px 0 20px}.rules-link{white-space:nowrap;font-size:13px;font-weight:700;color:#ddd}.rules-link span{margin-left:8px;color:#ff9800}.world-intro>p.getting-started{font-size:12px;color:#777}.project-notice{width:min(890px,90%);margin:0 max(4%,calc((100% - 1700px)/2)) 36px auto;padding:18px 20px;border:1px solid #ffffff18;background:#181818;display:flex;gap:22px;align-items:center;border-radius:7px}.project-notice strong{font-size:11px}.project-notice p{margin:6px 0 0;font-size:11px;line-height:1.6;color:#858585}.project-notice button{flex:none;height:36px;width:36px;border:1px solid #333;background:transparent;border-radius:4px;color:#8c8c8c;font-size:22px}.project-notice button:hover{color:#fff;border-color:#777}.landing-page footer{background:#0b0b0c;border-top:1px solid #ffffff0d}.landing-page .footer-inner{width:min(1740px,94%);max-width:none;min-height:90px;padding:24px 18px;gap:28px;font-size:11px;color:#858585}.footer-name{font-weight:900;letter-spacing:1px;color:#ccc}.footer-platform{margin-left:auto;color:#555}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(min-width:1700px){.landing-page .header-inner{min-height:148px}.roles-hero{margin-top:8px}}@media(max-width:1190px){.landing-page .header-inner{gap:16px}.landing-page nav{gap:15px;font-size:11px}.language-label{display:none}.online-status{font-size:10px;padding:9px}.landing-page .brand-name{font-size:23px}.landing-page .brand img{width:52px;height:52px}.header-account{gap:0}}@media(max-width:850px){.landing-page .header-inner{width:94%;min-height:112px;flex-wrap:wrap;justify-content:space-between;padding:12px 4px;gap:10px}.landing-page nav{order:4;flex-basis:100%;justify-content:center;gap:25px;margin:0;font-size:10px}.landing-page nav a{padding:9px 0}.online-status{margin-right:auto}.landing-page .button.small{min-height:40px;padding:10px 14px;font-size:10px}.roles-hero{width:96%;margin-top:10px}.roles-viewport{overflow-x:auto}.roles-artwork{width:1050px;max-width:none}.play-start{font-size:13px;gap:18px}.play-circle{height:54px;width:54px}.role-label{opacity:1;transform:none}.role-label>span:not(.play-circle){font-size:9px}.role-label strong{font-size:11px}.play-start .role-label{gap:18px}.swipe-hint{display:block;margin:15px 0 0;text-align:center;color:#777;font-size:10px;letter-spacing:1.3px}.world-intro{margin-top:46px;margin-bottom:36px}.project-notice{width:90%;margin:0 auto 28px}.landing-page .footer-inner{gap:20px;justify-content:center}.footer-platform{flex-basis:100%;margin:0;text-align:center}}@media(max-width:440px){.landing-page .brand img{width:45px;height:45px}.landing-page .brand-name{font-size:20px}.landing-page .brand-name small{font-size:7px;letter-spacing:2px}.online-status{font-size:9px;padding:8px;gap:5px}.landing-page .header-inner{column-gap:9px}.landing-page nav{gap:18px;font-size:9px}.roles-artwork{width:920px}.intro-actions{gap:18px}.project-notice{padding:15px;gap:12px}}@media(max-width:360px){.landing-page nav{gap:8px;font-size:8px}.landing-page .brand-name{font-size:18px}.online-status{font-size:8px;padding:6px}.landing-page .button.small{padding:10px;font-size:9px}.landing-page .header-inner{column-gap:7px}}@media(prefers-reduced-motion:reduce){.play-circle,.role-label,.role-color,.role-panel::after{transition:none}}@media(max-width:1250px){.landing-page .header-inner{flex-wrap:wrap;justify-content:space-between;row-gap:4px}.landing-page nav{order:4;flex-basis:100%;justify-content:center;margin:0;gap:24px}.online-status{margin-right:auto}}@media(max-width:650px){.landing-page nav{flex-wrap:wrap;column-gap:22px;row-gap:0;font-size:10px}.landing-page nav a{padding:9px 0}}@media(max-width:360px){.landing-page nav{column-gap:18px;font-size:9px}}.role-police{--start:0;--span:14}.role-worker{--start:14;--span:14.5}.role-street{--start:28.5;--span:13.5}.role-start{--start:42;--span:15}.role-business{--start:57;--span:14.5}.role-medic{--start:71.5;--span:14.5}.role-action{--start:86;--span:14}/* Clip to each card; transparent image edges also mask the accent overlay. */
.role-police{--card-shape:polygon(0.97229% 6.27451%,13.85513% 6.27451%,13.85513% 92.28758%,0.97229% 92.28758%)}.role-worker{--card-shape:polygon(14.04959% 5.49020%,28.53670% 5.49020%,28.53670% 96.07843%,14.04959% 96.07843%)}.role-street{--card-shape:polygon(28.68255% 6.79739%,41.95430% 6.79739%,41.95430% 94.77124%,28.68255% 94.77124%)}.role-start{--card-shape:polygon(42.10015% 0.00000%,57.36509% 0.00000%,57.36509% 98.16993%,42.10015% 98.16993%)}.role-business{--card-shape:polygon(57.60817% 6.79739%,71.60914% 6.79739%,71.60914% 95.03268%,57.60817% 95.03268%)}.role-medic{--card-shape:polygon(71.80360% 8.10458%,85.75596% 9.15033%,85.75596% 97.38562%,71.80360% 96.33987%)}.role-action{--card-shape:polygon(85.95041% 9.41176%,100.00000% 12.28758%,100.00000% 97.77778%,85.95041% 96.99346%)}/* Support contact selection. */.support-options{display:grid;gap:12px}.support-option{display:grid;gap:9px;padding:20px;border:1px solid #464646;border-radius:7px;background:#242424;text-decoration:none}.support-option strong{display:flex;justify-content:space-between;gap:16px;color:#ff9800;font-size:16px}.support-option>span{color:#ccc;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.support-option:hover{background:#2c2c2c;border-color:#ff9800;text-decoration:none}#support-dialog{width:min(510px,calc(100% - 28px))}#open-support{flex:none}