.online-page{min-height:100vh;background:var(--chip)}.online-main{max-width:1080px;margin:0 auto;padding:48px 28px 72px}.online-card{background:var(--panel);border:1px solid var(--line);border-radius:0;box-shadow:0 14px 45px #2037520a;padding:clamp(24px,5vw,56px);margin-bottom:22px}.online-card h1{font-size:clamp(34px,5vw,54px);line-height:1.08;letter-spacing:0;color:var(--fg);margin:10px 0 16px}.online-hero{max-width:510px}.online-hero>p:not(.intro-label){font-size:15px;line-height:1.75;color:var(--dim)}.online-stages{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px;color:var(--dim);font-size:13px;font-weight:650}.online-entry{border-left:1px solid var(--line);padding:6px 0 6px 36px;display:grid;align-content:center;gap:18px}.online-entry>label,.room-join label,.online-controls label{font-size:13px;color:var(--dim)}.online-entry input,.online-entry select,.room-join input{display:block;width:100%;margin-top:7px}.online-entry>.primary-button{width:100%;margin-top:2px}.online-entry{max-width:390px}.online-card#online-lobby{display:grid;grid-template-columns:1fr minmax(260px,.75fr);gap:60px;align-items:center}.room-join{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:11px}.room-join>span{font-size:13px;color:var(--dim)}.room-join>.secondary-button{width:100%}.online-room-top{display:flex;justify-content:space-between;align-items:center;gap:30px}.online-room-top>div:first-child{max-width:590px}.online-room-top p:not(.intro-label){color:var(--dim);line-height:1.7}.room-code-card{display:grid;justify-items:center;gap:8px;background:var(--chip);border:1px solid var(--line);border-radius:0;padding:17px 22px;min-width:190px}.room-code-card>span{font-size:12px;color:var(--dim)}.room-code-card strong{font:700 25px ui-monospace,Consolas,monospace;letter-spacing:.12em;color:var(--fg)}.room-code-card button{font-size:13px;padding:9px 13px}.online-itinerary{display:flex;list-style:none;gap:12px;padding:0;margin:28px 0}.online-itinerary li{flex:1;border-top:2px solid var(--line);padding:12px;color:var(--dim);font-size:13px}.online-itinerary li[aria-current=step]{border-color:#4385f5;color:var(--fg);background:var(--chip)}.online-itinerary small{display:block;margin-top:7px;color:var(--dim)}.opponent-status{display:flex;gap:11px;align-items:center;color:var(--dim);font-size:13px;line-height:1.6}.opponent-status p{margin:0}.pulse{width:8px;height:8px;border-radius:50%;background:#d3a853;box-shadow:0 0 0 4px #f8efdc;flex:none}.pulse[data-state=online]{background:#48a997;box-shadow:0 0 0 4px #e3f2ed}.pulse[data-state=offline]{background:#bd6873;box-shadow:0 0 0 4px #f6e9eb}.online-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:22px}.online-help{font-size:13px;line-height:1.75;color:var(--dim);max-width:720px}.online-conditions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 24px}.online-conditions>div{background:var(--chip);border:1px solid var(--line);padding:10px 13px;border-radius:0;font-size:13px;color:var(--dim)}.online-editor-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:28px;align-items:start}.online-controls{display:grid;gap:17px}.online-controls fieldset{border:0;padding:0;margin:0}.online-controls legend{font-size:13px;color:var(--dim);margin-bottom:10px}.online-particles{display:grid;gap:7px}.online-particle{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:0;padding:9px 11px;color:var(--fg)}.online-particle input{accent-color:#4385f5}.online-particle span{font-size:13px}.online-particle small{margin-left:auto;color:var(--dim);font-size:12px}.point-controls{display:grid;gap:10px}.point-control{display:grid;grid-template-columns:1fr 1fr;gap:10px}.point-control label{font-size:12px}.point-control input{width:100%;display:block;margin-top:6px}.online-controls>.primary-button{width:100%}.draw-canvas{border:1px solid var(--line);border-radius:0;overflow:hidden;min-width:0}.draw-canvas svg{display:block;width:100%}.lock-status{margin:0!important}.reveal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.reveal-card{border:1px solid var(--line);border-radius:0;padding:15px}.reveal-card h3{font-size:14px;margin:0 0 7px}.reveal-card p{font-size:13px;color:var(--dim);margin:4px 0;line-height:1.6}.race-scene{position:relative;height:min(60vw,440px);min-height:300px;overflow:hidden;border-radius:0;background:var(--pit)}.race-scene canvas{display:block;width:100%;height:100%}.race-clock{font-variant-numeric:tabular-nums;color:var(--fg);font-size:14px;margin:15px 0}.race-clock output{font-size:22px;font-weight:700}.online-result{border-radius:0;background:var(--chip);padding:18px;margin:14px 0;color:var(--fg)}.online-result h2{margin:0 0 5px;font-size:22px}.online-result p{margin:0;font-size:13px;line-height:1.65}.online-score{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 24px}.score-chip{padding:8px 12px;border-radius:0;background:var(--chip);color:var(--dim);font-size:13px}.score-chip strong{margin-left:5px}.score-chip[data-winner=true]{background:var(--chip);color:var(--fg)}.online-footnote{max-width:730px;margin:24px auto 0;text-align:center;color:var(--dim);font-size:13px;line-height:1.7}.site-header>a.quiet-button{text-decoration:none}.online-page .site-footer{display:none}@media(max-width:760px){.online-main{padding:24px 14px 46px}.online-card#online-lobby{grid-template-columns:1fr;gap:30px}.online-entry{max-width:none;border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.online-room-top{align-items:flex-start;flex-direction:column}.room-code-card{justify-items:start;width:100%}.online-editor-layout{grid-template-columns:1fr}.reveal-list{grid-template-columns:1fr}.online-stages{gap:9px}.race-scene{height:70vw;min-height:260px}.online-itinerary{gap:5px}.online-itinerary li{padding:9px 7px;font-size:12px}}
.room-roster{list-style:none;padding:0;margin:18px 0 26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.room-roster li{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--line);border-radius:0;min-width:0}.room-roster strong{font-size:13px;overflow-wrap:anywhere}.room-roster small{font-weight:400;color:var(--dim)}.room-roster li>span:last-child{margin-left:auto;font-size:12px;color:var(--dim);text-align:right}.player-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.room-roster .empty-seat{border-style:dashed;color:var(--dim)}@media(max-width:600px){.room-roster{grid-template-columns:1fr}}

.online-conditions>div{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:138px}.online-conditions>div>span{font-size:12px;color:var(--dim)}.online-conditions>div>strong{font-size:13px;color:var(--fg);font-weight:600}.online-conditions>div>small{font-size:12px;line-height:1.45;color:var(--dim)}.online-conditions .surface-condition{border-left:3px solid #91a9c4}.online-conditions .wind-condition{border-left:3px solid #79a9d3}.online-conditions .zone-condition{border-left:3px solid var(--zone,#d2a257)}.online-conditions .zone-condition strong{color:var(--zone-ink,inherit)}.online-conditions .gate-condition{border-left:3px solid #69b1b5}.online-conditions .gate-condition strong{color:var(--dim)}

/* Tema néon "A Linha", parte online, com o layout dos mockups. Acima: folha original com as cores trocadas por tokens. */
.online-page{background:transparent}
.online-main{max-width:none;margin:0;padding:0}
body:has(#online-lobby:not([hidden])) .site-header{display:none}
.online-home .home-title{font:400 26px/1.05 var(--display);margin:0;text-shadow:none;transform:none}
.online-home .tagline{max-width:30ch}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--dim);line-height:1.35}
.facts li{padding-left:14px;border-left:2px solid var(--line-hi)}
.facts b{color:var(--fg);font-weight:600}
.side-links a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line-hi);padding:4px 0}
.side-links a:hover{color:var(--fg);border-color:var(--fg)}
.me{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:12px 18px;border-top:3px solid var(--cyan)}
.field{display:block;font-size:14px;color:var(--dim)}
.field input{display:block;width:100%;max-width:420px;margin:0;background:transparent;border:0;border-bottom:1px solid var(--line-hi);padding:3px 0 2px;font-weight:600;font-size:19px;color:var(--fg)}
.field input:focus{outline:none;border-bottom-color:var(--cyan)}
.two{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.home .map-families #online-family-options,.map-families #room-family-options{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.join{display:flex;flex-direction:column;gap:12px}
.join label{font-size:14px;color:var(--dim)}
.join input{display:block;width:100%;margin-top:6px;background:var(--tile);border:1px solid var(--line-hi);padding:12px 10px 10px;font:400 28px/1 var(--display);letter-spacing:.14em;text-align:center;text-transform:uppercase;color:var(--fg)}
.join input::placeholder{color:var(--line-hi)}
.join input:focus{outline:none;border-color:var(--fg)}

/* sala de espera */
.room-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:center;padding:18px}
.room-top h1{font:400 clamp(22px,2.6vw,34px)/1.05 var(--display);margin:0;color:var(--fg)}
.room-code-card{display:grid;justify-items:start;gap:8px;background:transparent;border:0;padding:0;min-width:0}
.room-code-card>span{font-size:14px;color:var(--dim)}
.room-code-card strong{font:400 clamp(40px,6vw,84px)/.95 var(--display);letter-spacing:.1em;color:var(--fg);text-shadow:0 0 22px rgba(45,226,255,.75),4px 4px 0 var(--magenta)}
.room-roster.slots{list-style:none;padding:0;margin:0;gap:0;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.room-roster.slots li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 14px 14px 12px;border:0;border-top:3px solid var(--c);border-right:1px solid var(--line);background:transparent;min-height:76px}
.room-roster.slots li:last-child{border-right:0}
.room-roster.slots .n{display:block;font-weight:700;font-size:17px;line-height:1.15;overflow-wrap:anywhere}
.room-roster.slots .n small{font-weight:500;color:var(--dim)}
.room-roster.slots .s{display:block;margin:0;font-size:14px;color:var(--dim);text-align:left;line-height:1.2}
.room-roster.slots .free{border-top-color:var(--line);border-style:solid;color:var(--dim)}
.room-roster.slots .ring{width:38px;height:38px;border-radius:50%;border:2px dashed var(--line-hi)}
.stagepage .plan{grid-column:auto}
.steps li{font-weight:700;font-size:15px;line-height:1.2}
.steps li small{font-weight:500}
.room-settings .settings-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.room-settings .settings-head p{color:var(--dim);font-size:14px}
.room-settings-controls{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.room-settings .map-families{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:1fr;gap:10px}
.room-settings .map-families legend{padding:0;font-size:15px;color:var(--dim)}
.room-settings .map:has(input:disabled){opacity:.6;cursor:default}
.opponent-status{display:flex;gap:11px;align-items:center;color:var(--dim);font-size:15px;line-height:1.4}
.opponent-status p{margin:0}
.pulse,.pulse[data-state=online],.pulse[data-state=offline]{box-shadow:none;width:10px;height:10px}

/* desenho online */
.online-particles{display:grid;gap:8px;margin-top:12px}
.online-particle{display:flex;align-items:center;gap:12px;background:var(--tile);border:1px solid var(--line);padding:10px 12px;color:var(--fg);cursor:pointer}
.online-particle input{position:absolute;opacity:0;width:1px;height:1px}
.online-particle .particle-preview{width:34px;height:34px;margin:0;flex:none;display:block;border-radius:50%}
.online-particle span{font-size:16px;font-weight:700}
.online-particle small{margin-left:auto;color:var(--dim);font-size:14px}
.online-particle:hover{border-color:var(--fg)}
.online-particle:has(input:checked){border-color:var(--cyan);background:linear-gradient(90deg,rgba(45,226,255,.16),transparent),var(--tile)}
.online-particle:has(input:focus-visible){outline:2px solid var(--fg);outline-offset:3px}
.point-controls{display:grid;gap:12px;margin-top:12px}
.point-control{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.point-control label{font-size:14px;color:var(--dim)}
.point-control input{width:100%;display:block;margin-top:8px}
.online-page .draw-canvas{border:0;background:transparent}
.online-page .board-head{flex-wrap:wrap}

/* corrida online */
.arena .race-scene{border:0;height:min(56vh,560px);min-height:300px;background:var(--pit)}
.online-page .race-clock{color:var(--dim);margin:0;display:flex;align-items:baseline;gap:5px;flex:1}
.online-page .race-clock output{font-family:var(--display);font-weight:400;font-size:40px;color:var(--fg);text-shadow:0 0 16px rgba(45,226,255,.6)}
.online-result{background:transparent;border:0;border-top:1px solid var(--line);padding:14px 0 0;margin:14px 0 0;color:var(--fg)}
.online-result h2{font:400 22px/1.1 var(--display);margin:0 0 6px}
.online-result p{font-size:15px;color:var(--dim);line-height:1.5}
.score-box:has(#online-score[hidden]){display:none}
.score-box .podium{margin-top:14px;gap:8px}
.score-box .podium .step{--h:60px}
.score-box .podium .step.place-1{--h:110px}
.score-box .podium .step.place-3{--h:38px}
.score-box .podium .step.place-4{--h:22px}
.score-box .podium .orb,.score-box .podium .step.place-1 .orb{width:36px;height:36px}
.score-box .podium .n,.score-box .podium .step.place-1 .n{font-size:15px}
.score-box .podium .block,.score-box .podium .step.place-1 .block{font-size:34px}
.online-page .learning h2{font:600 18px/1.2 var(--ui)}
.online-page .particle-comparison{border-top:1px solid var(--line);margin:0;max-width:none}
.dock:has(#race-confirm:not([hidden])) .dock-end{display:none}
.dock-end:not(:has(button:not([hidden]))) .acts{display:none}

@media(max-width:1180px){.two{grid-template-columns:1fr}.home .map-families #online-family-options,.map-families #room-family-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.facts{display:none}}
@media(max-width:640px){.room-roster.slots{grid-template-columns:repeat(2,minmax(0,1fr))}.room-roster.slots li:nth-child(2n){border-right:0}.room-top{grid-template-columns:1fr}}

.room-roster.slots li>span:last-child{margin:0;text-align:left;font-size:inherit;color:inherit}
.online-page .turn .orb,.me .orb{--c:var(--cyan)}