#openRoom{display:block;width:100%;margin:12px 0 0;padding:12px 10px;border:1px solid #9cd9cb66;background:#102b31;color:#bdede0;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer}
#roomDialog{width:min(540px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:24px;border:1px solid #627c86;background:#111f2c;color:#dce9ed;border-radius:16px;box-sizing:border-box}
#roomDialog::backdrop{background:#071019bb;backdrop-filter:blur(6px)}
#roomDialog [hidden]{display:none!important}#roomDialog .room-top{display:flex;align-items:center;justify-content:space-between;gap:12px}#roomDialog h2{margin:0;font-size:23px}
#roomDialog button{padding:11px 16px;background:#203d46;color:#dcf4eb;border:1px solid #9cd9cb55;border-radius:6px;cursor:pointer;min-height:42px}#roomDialog button:disabled{opacity:.4;cursor:not-allowed}
#roomDialog input,#roomDialog select{padding:10px;border:1px solid #637585;background:#0c1924;color:#fff;border-radius:5px;max-width:100%;box-sizing:border-box;font-size:16px}
#roomDialog label{display:grid;gap:8px;font-size:13px}#roomEntry{display:grid;gap:14px}.room-join{display:flex;gap:8px}.room-join input{flex:1;min-width:0}.room-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#roomStatus{min-height:20px;color:#ffd18d;font-size:13px;overflow-wrap:anywhere}#roomCode{display:block;font-size:24px;color:#a8ebd9;letter-spacing:.08em}#roomRules{font-size:12px;line-height:1.65;color:#afc2ce}#roomPlayers{padding-left:22px;line-height:2;overflow-wrap:anywhere}.room-actions{display:flex;flex-wrap:wrap;gap:10px}#roomStart{background:#ffba75!important;color:#13212a!important}
#roomConnection{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:60;background:#24313e;padding:10px 20px;border-radius:5px;color:#ffd18d;font-size:13px;max-width:90vw}#roomConnection[hidden]{display:none}
/* Full room lobby: four garage bays, race setup, and a persistent launch bar. */
#roomDialog.is-room{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:30px 40px;background:radial-gradient(ellipse at 35% 45%,#203c4a 0%,#101e2d 48%,#080f1c 100%);overflow:auto;display:flex;flex-direction:column;font-family:inherit}
#roomDialog.is-room .room-top{border-bottom:1px solid #ffffff20;padding-bottom:18px}#roomDialog.is-room h2{font-size:18px;font-weight:500}#roomDialog.is-room #roomClose{background:transparent;border-color:#ffffff30;font-size:12px}
#roomMembers{flex:1;display:flex;flex-direction:column}#roomDialog.is-room #roomStatus{margin:8px 0;min-height:18px}.room-heading{display:flex;justify-content:space-between;align-items:center;margin:12px 0 30px;gap:16px}.room-heading>span{font-size:11px;letter-spacing:.22em;color:#8ca9b9}#roomDialog .room-heading #roomCode{font-size:20px;color:#e6f6f4;letter-spacing:.12em}.room-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;flex:1;align-items:center}.room-section-title{font-size:11px;letter-spacing:.2em;color:#8ba6b5;margin-bottom:16px;display:flex;justify-content:space-between}.room-section-title span{color:#b8e9dc}
#roomPlayers{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;line-height:1.4}.room-seat{position:relative;min-width:0;min-height:300px;border:1px solid #719aac3b;border-radius:12px;background:linear-gradient(160deg,#2544528c,#10202ec9);overflow:hidden;display:flex;flex-direction:column}.room-seat.is-me{border-color:#8ee0ce;box-shadow:0 0 30px #80dbc610}.seat-top{display:flex;justify-content:space-between;padding:16px 14px;font-size:10px;gap:4px}.seat-number{color:#698b9b;letter-spacing:.1em;font-size:12px}.seat-role{color:#c0eddf;font-weight:600}.seat-kart{width:150%;margin-left:-25%;height:180px;object-fit:contain;filter:drop-shadow(0 18px 14px #0007)}.seat-info{padding:14px;display:flex;flex-direction:column;gap:8px;margin-top:auto}.seat-info strong{font-size:17px;overflow-wrap:anywhere;color:#f0f7f8}.seat-car{font-size:10px;color:#87a9ba;letter-spacing:.18em}.seat-state{border-top:1px solid #ffffff12;padding-top:12px;font-size:11px;color:#e4c78c}.is-ready .seat-state{color:#8ce4c6}.is-ready{background:linear-gradient(160deg,#24574880,#10202ec9)}.room-seat.is-empty{border-style:dashed;background:#0e1c2855}.is-empty>.seat-number{padding:16px}.room-seat .seat-invite{flex:1;border:0!important;background:transparent!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 8px 40px!important}.seat-invite>span{font-size:44px;font-weight:200;color:#65818e}.seat-invite strong{font-size:13px;font-weight:500;color:#acc4ce}.seat-invite small{font-size:10px;color:#678593}
.room-track{border-left:1px solid #ffffff17;padding-left:24px}.room-track-art{height:160px;padding:20px 16px;box-sizing:border-box;border-radius:8px;background:linear-gradient(150deg,#287881,#234551 50%,#102932);overflow:hidden;position:relative}.room-track-art[data-scene=citadel]{background:linear-gradient(150deg,#7d6141,#33413f 60%,#182c30)}.room-track-art[data-scene=harbor]{background:linear-gradient(150deg,#613768,#222a56 60%,#132231)}.room-track-art>span{font-size:20px;font-weight:600;display:block;position:relative;z-index:1}.room-track-art small{font-size:8px;color:#c0d7d9;letter-spacing:.13em}.room-track-art svg{position:absolute;width:190px;bottom:-6px;right:-8px;transform:rotate(-12deg);fill:none;stroke:#b8e9db;stroke-width:5;opacity:.55;stroke-linejoin:round}.room-settings{grid-template-columns:1fr;margin-top:20px}.room-settings label{color:#90aab8;font-size:11px!important}#roomDialog .room-settings select{font-size:13px;width:100%;background:#112230;border-color:#50708055}#roomDialog #roomRules{font-size:11px;line-height:1.8;color:#738d9f;margin-top:20px}
.room-actions{margin-top:30px;border-top:1px solid #ffffff20;padding-top:20px;align-items:center;gap:12px}.room-actions #roomHint{margin:0 auto 0 0;flex:1;color:#91acb8;font-size:12px;min-width:150px}#roomDialog #roomReady{background:#297c73;border-color:#63bfae;min-width:100px}#roomDialog #roomStart{min-width:145px;font-weight:700}#roomDialog #roomLeave{background:transparent;border:0;color:#849ba7;font-size:12px}.room-actions #roomInvite{background:transparent;border-color:#67839566;font-size:12px}
@media(min-width:1500px){#roomDialog.is-room{padding:40px 6vw}.room-seat{min-height:390px}.seat-kart{height:230px}.room-layout{gap:40px;grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:1000px){#roomDialog.is-room{padding:20px}.room-layout{grid-template-columns:minmax(0,1fr) 210px;gap:16px}.room-track{padding-left:16px}.room-seat{min-height:260px}.seat-kart{height:135px}.seat-info strong{font-size:14px}.seat-role{font-size:9px}.room-actions #roomHint{flex-basis:100%;margin-bottom:4px}}
@media(max-width:700px){#roomDialog.is-room{padding:16px}.room-heading{margin:12px 0 20px}.room-heading>span{font-size:8px;letter-spacing:.12em}#roomDialog .room-heading #roomCode{font-size:15px}.room-layout{grid-template-columns:1fr;align-items:start}#roomPlayers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.room-seat{min-height:220px}.seat-kart{height:110px}.seat-top{padding:10px}.seat-info{padding:10px}.seat-info strong{font-size:15px}.room-track{border-left:0;border-top:1px solid #ffffff17;padding:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.room-track>.room-section-title{grid-column:1/-1;margin:0}.room-track-art{height:130px}.room-settings{margin:0;gap:8px}#roomRules{grid-column:1/-1;margin:0!important}.room-actions{margin-top:18px;gap:8px}.room-actions button{flex:1;padding:10px 8px!important;min-width:0!important}.room-actions #roomLeave{flex-basis:100%}}
@media(max-height:550px) and (min-width:701px){#roomDialog.is-room{padding:12px 20px}.room-heading{margin:4px 0 8px}.room-seat{min-height:210px}.seat-kart{height:90px}.room-actions{margin-top:12px;padding-top:10px}.room-track-art{height:100px}.room-settings{margin-top:8px;gap:6px}#roomDialog #roomRules{margin-top:8px}.room-section-title{margin-bottom:8px}}
/* Neon paddock: restrained motion runs in CSS, without another live WebGL loop. */
#roomDialog.is-room{isolation:isolate;background:radial-gradient(ellipse at 28% 42%,#18354c 0%,#10192f 38%,#070b16 80%);padding-top:22px}
#roomDialog.is-room::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(118deg,transparent 15%,#40ccff0c 15.1%,transparent 32%),linear-gradient(65deg,transparent 65%,#b591ff0b 65.1%,transparent 83%),repeating-linear-gradient(0deg,transparent 0 79px,#92c9fb05 80px 81px);mask-image:linear-gradient(#000,transparent)}
#roomDialog.is-room::after{content:"";position:fixed;z-index:-1;pointer-events:none;left:-20%;right:-20%;height:45vh;bottom:-18vh;background:repeating-linear-gradient(90deg,transparent 0 89px,#64cde721 90px 91px),repeating-linear-gradient(0deg,transparent 0 49px,#64cde721 50px 51px);transform:perspective(500px) rotateX(58deg);transform-origin:top;mask-image:linear-gradient(transparent,#000)}
#roomDialog.is-room .room-top{border-bottom:0;padding-bottom:0}#roomDialog.is-room h2{font-size:12px;letter-spacing:.08em;color:#a0b5ca}#roomDialog.is-room #roomStatus{position:absolute;top:23px;left:50%;transform:translateX(-50%);font-size:11px;margin:0;color:#78c3c3;max-width:40%;text-align:center}
.room-heading{align-items:flex-end;margin:24px 0 26px}.room-brand>span{display:block;font-size:10px;color:#64dce6;letter-spacing:.26em}.room-brand h3{font-size:clamp(26px,3.5vw,48px);font-style:italic;letter-spacing:-.04em;color:#f3f7ff;margin:10px 0 8px;line-height:1.1;text-shadow:0 4px 24px #9ab8ff22}.room-brand p{font-size:12px;color:#7996ae;margin:0}.room-ticket{border-left:2px solid #6fdce4;padding:10px 18px;background:linear-gradient(90deg,#62bdd413,transparent);transform:skewX(-6deg);min-width:180px}.room-ticket>*{display:block;transform:skewX(6deg)}.room-ticket small{font-size:8px;color:#8196b0;letter-spacing:.25em}#roomDialog .room-ticket #roomCode{font-size:20px;color:#e5f9ff;margin:7px 0}.room-ticket>span{font-size:9px;color:#65d7c7}
.room-layout{gap:24px;grid-template-columns:minmax(0,1fr) 260px}.room-section-title{font-size:10px;font-weight:600;letter-spacing:.24em;padding-left:10px;border-left:3px solid #69d6e7}.room-section-title span{font-size:12px}.room-seat{--kart-accent:#7da3d3;min-height:360px;border:1px solid #718dbc35;border-radius:4px 20px 4px 4px;background:linear-gradient(155deg,#192b43c9,#0b1425e6 75%);box-shadow:0 18px 25px #0003;transition:border-color .3s,box-shadow .3s,transform .3s;animation:room-arrive .5s both}.room-seat:nth-child(2){animation-delay:.06s}.room-seat:nth-child(3){animation-delay:.12s}.room-seat:nth-child(4){animation-delay:.18s}.room-seat::before{content:"";position:absolute;top:0;left:0;width:40%;height:2px;background:var(--kart-accent);box-shadow:0 0 20px var(--kart-accent);opacity:.65}.room-seat.is-me{border-color:#78d3e799;box-shadow:0 0 0 1px #5bcddd22,0 12px 45px #368fb31a}.seat-top{align-items:center;padding:16px 16px 0;z-index:2}.seat-number{font-size:22px;font-style:italic;font-weight:800;color:#637c9e;letter-spacing:-.05em}.seat-role{padding:4px 7px;border:1px solid #81d6de40;background:#66bbc613;font-size:9px;color:#a1e7ef;letter-spacing:.07em}.seat-role:empty{display:none}.seat-stage{position:relative;height:235px;display:flex;align-items:center;justify-content:center;isolation:isolate}.seat-kart{position:relative;z-index:2;width:160%;height:220px;flex:none;margin:0;filter:drop-shadow(0 18px 12px #0009);transform:translateY(-8px);transition:transform .45s}.room-seat:hover .seat-kart{transform:translateY(-13px) scale(1.04)}.seat-platform{position:absolute;bottom:23px;width:86%;height:62px;border-radius:50%;border:2px solid #7186a448;background:radial-gradient(ellipse,#37516b70 0%,#18263e 62%,#0b111f 63%);box-shadow:0 8px 0 #060c18,0 10px 0 #53718b52,0 20px 20px #0008;transform:rotate(-7deg)}.seat-platform::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px dashed var(--kart-accent);opacity:.5}.seat-beam{position:absolute;z-index:-1;inset:-20px 0 35px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--kart-accent) 15%,transparent));clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);opacity:.65}.seat-info{padding:16px 18px 18px;gap:7px;background:linear-gradient(180deg,transparent,#03091766)}.seat-info strong{font-size:18px}.seat-car{color:var(--kart-accent);font-size:10px;font-weight:600;letter-spacing:.22em}.seat-state{margin-top:5px;font-size:10px;letter-spacing:.08em;color:#d6b779}.is-ready .seat-state{color:#89efc7}.room-seat.is-ready{border-color:#79e5c56b;background:linear-gradient(160deg,#193442aa,#0b1425e6 75%)}.is-ready .seat-platform{border-color:#7bf0c7;box-shadow:0 7px 0 #0b181d,0 9px 0 #429e8155,0 0 22px #6eebc144,0 20px 20px #0008}.is-ready .seat-beam{opacity:1}.room-seat.is-empty{background:linear-gradient(150deg,#111d3144,#060d1966);border-color:#627c9c40}.is-empty::before{opacity:.15}.is-empty>.seat-number{position:absolute;top:0;left:0}.room-seat .seat-invite{padding-bottom:0!important;min-height:310px}.seat-invite>span{display:grid;place-items:center;width:64px;height:64px;border:1px solid #7c9aaa42;border-radius:50%;font-size:36px;color:#7497ae;background:#5b95af0a;box-shadow:0 0 0 10px #5b95af05;transition:box-shadow .25s,color .25s}.seat-invite:hover>span{color:#99ecf2;box-shadow:0 0 0 12px #5b95af12,0 0 35px #54c9e31a}.seat-invite strong{font-size:12px}.seat-invite small{color:#647e99}
.room-track{border:1px solid #6886a42a;border-radius:4px 20px 4px 4px;padding:18px;background:linear-gradient(155deg,#1c29409c,#10182ac9);box-sizing:border-box}.room-track-art{height:170px;border-radius:3px;border:1px solid #6cbad349;background:radial-gradient(ellipse at 90% 80%,#24d0be33,transparent),linear-gradient(140deg,#224866,#101e35)}.room-track-art[data-scene=harbor]{background:radial-gradient(ellipse at 80% 70%,#b24df055,transparent),linear-gradient(140deg,#3b2e5f,#15203b)}.room-track-art[data-scene=citadel]{background:radial-gradient(ellipse at 80% 70%,#e1ad5044,transparent),linear-gradient(140deg,#51503a,#152a38)}.room-track-art>span{font-size:19px}.room-track-art svg{width:210px;bottom:4px;right:-5px;stroke:#a7eeec;stroke-width:3;opacity:.9;filter:drop-shadow(0 0 5px #58d3df);transform:rotate(-8deg)}.room-track-art small{font-size:8px;color:#aac3d2}.room-settings{margin-top:16px}#roomDialog .room-settings select{border-color:#769ec740;background:#0a1426;border-radius:3px}#roomDialog #roomRules{color:#8197ad;font-size:10px;line-height:1.9;margin-bottom:0}
.room-actions{border-top:1px solid #83b7d12e;position:relative;padding:18px 0 0;margin-top:24px}.room-actions::before{content:"";position:absolute;top:-1px;left:0;width:70px;height:2px;background:#85e3ea;box-shadow:0 0 12px #73dae4}.room-actions #roomHint{font-size:12px;color:#95abc0}.room-actions button{border-radius:3px!important;transition:filter .2s,box-shadow .2s,transform .2s}#roomDialog #roomReady{background:linear-gradient(110deg,#21596d,#2a8590);border-color:#81dce5a8;min-width:110px;font-weight:600}#roomDialog #roomStart{background:linear-gradient(100deg,#ffb358,#ffdb8e)!important;border:1px solid #ffe4a5;min-width:175px;min-height:48px;color:#24170e!important;box-shadow:0 0 28px #ffb65b22;letter-spacing:.05em}#roomDialog button:disabled{opacity:.45}#roomDialog #roomStart:disabled{box-shadow:none}.all-ready #roomStart:not(:disabled){animation:room-launch 2.4s ease-in-out infinite}.room-actions button:not(:disabled):hover{filter:brightness(1.15);transform:translateY(-2px)}#roomDialog button:focus-visible{outline:2px solid #a3f1ff;outline-offset:4px}
@keyframes room-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes room-launch{50%{box-shadow:0 0 30px #ffbc6955}}
@media(min-width:1500px){.room-seat{min-height:430px}.seat-stage{height:285px}.seat-kart{height:265px}}
@media(max-width:1000px){.room-layout{grid-template-columns:minmax(0,1fr) 210px;gap:16px}.room-track{padding:12px}.room-seat{min-height:320px}.seat-stage{height:180px}.seat-kart{height:180px}.seat-info{padding:12px}.seat-info strong{font-size:15px}.seat-top{padding:12px 10px 0}.seat-number{font-size:18px}.seat-role{font-size:8px;padding:3px}.seat-platform{height:45px;bottom:14px}.room-ticket{min-width:155px;padding:8px 12px}.room-seat .seat-invite{min-height:270px}}
@media(max-width:700px){#roomDialog.is-room{padding:16px}.room-heading{align-items:flex-start;gap:8px;margin:25px 0 22px}.room-brand h3{font-size:24px;margin-top:8px}.room-brand>span{font-size:7px;letter-spacing:.15em}.room-brand p{font-size:10px;max-width:190px;line-height:1.7}.room-ticket{min-width:0;flex:none;padding:6px 8px}.room-ticket small{font-size:6px;letter-spacing:.12em}#roomDialog .room-ticket #roomCode{font-size:12px;letter-spacing:.03em}.room-ticket>span{font-size:7px}#roomDialog.is-room #roomStatus{position:static;transform:none;max-width:none;text-align:left;margin:8px 0 0;font-size:10px}.room-layout{grid-template-columns:1fr}.room-seat{min-height:255px}.seat-stage{height:150px}.seat-kart{height:160px}.room-seat .seat-invite{min-height:250px}.seat-info strong{font-size:15px}.seat-state{font-size:9px;padding-top:9px}.room-track{padding:14px;gap:14px}.room-track-art{height:145px}.room-settings{margin:0}.room-track-art svg{width:170px}.room-actions #roomStart{min-width:0;min-height:44px}.room-actions #roomReady{min-width:0}.room-actions #roomHint{font-size:11px;line-height:1.6}.room-actions #roomLeave{font-size:10px}}
@media(max-height:550px) and (min-width:701px){.room-heading{margin:10px 0 14px}.room-brand h3{font-size:26px;margin:5px 0}.room-brand p{font-size:10px}.room-seat{min-height:220px}.seat-stage{height:110px}.seat-kart{height:120px}.seat-info{padding:8px 12px}.seat-info strong{font-size:13px}.seat-state{padding-top:6px;margin:0}.seat-number{font-size:16px}.room-seat .seat-invite{min-height:200px}.room-track{padding:10px}.room-track-art{height:105px}.room-track-art svg{width:150px}.room-settings{margin-top:8px;gap:5px}#roomDialog .room-settings select{padding:6px}.room-actions{margin-top:12px;padding-top:10px}}
@media(prefers-reduced-motion:reduce){#roomDialog .room-seat,#roomDialog #roomStart{animation:none}#roomDialog *{transition:none!important}}
#roomDialog:not([open]){display:none!important}

.room-track-art[data-scene="canyon"]{background:radial-gradient(ellipse at 80% 70%,#e1a34a44,transparent),linear-gradient(140deg,#7a4d36,#332725)}