.online-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px}.online-main,.online-side{display:flex;flex-direction:column;gap:24px}.online-panel{position:relative;padding:30px;background:linear-gradient(135deg,#123d4deb,#071f32f0);border:18px solid transparent;border-image:url('/public/assets/ui/panel-frame.png') 64 stretch;color:#d6e6e6;box-shadow:0 16px 35px #102b3520}.online-panel h2{font:700 30px 'Barlow Condensed',sans-serif;margin:12px 0;color:#fff3d9}.online-panel p{font-size:13px;line-height:1.7;color:#b6cdd1}.online-panel .eyebrow{font-size:10px}.online-connection{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:1px;white-space:nowrap}.online-connection i{width:7px;height:7px;border-radius:50%;background:#c29155}.online-connection.connected i{background:#278367}.online-panel label{display:flex;flex-direction:column;gap:8px;letter-spacing:1.2px;font-size:10px;font-weight:800;color:#dcdabb}.online-panel input,.online-panel select{width:100%;min-height:48px;padding:12px;color:#ecf4ee;background:#071d2dbf;border:1px solid #c1ae7059;border-radius:3px;font:500 13px 'DM Sans',sans-serif;outline-offset:3px}.online-panel option{background:#102c3b}.online-panel input:focus,.online-panel select:focus{outline:2px solid #e8bb6b}.online-panel button:disabled{opacity:.4;cursor:wait}.online-panel form{display:flex;flex-direction:column;gap:16px}.online-panel form small{color:#8faeb6;font-size:10px;line-height:1.5}.online-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;margin:20px 0}.online-boat-showcase{position:relative;min-height:215px;display:flex;flex-direction:column;align-items:center;justify-content:end;padding-bottom:10px;background:radial-gradient(ellipse,#457f8640,transparent 65%)}.online-boat-showcase .pod-art{position:relative;width:220px;height:175px;filter:drop-shadow(0 10px 14px #020d18)}.online-boat-showcase strong{color:#fff2d3;font:700 24px 'Barlow Condensed',sans-serif}.online-boat-showcase>span:last-child{font-size:9px;letter-spacing:1.8px;margin-top:5px;color:#b7c8c6}.online-ranked-button,.online-boat-choice{width:100%;margin-top:18px}.online-fairness{font-size:11px!important;padding-top:15px;border-top:1px solid #c3b17829;margin-bottom:0}.online-login{margin-top:20px;padding-top:18px;border-top:1px solid #c3b17829}.online-login summary{font-size:12px;color:#e6cc92;cursor:pointer}.online-login form{margin-top:18px}.skipper-panel h2{overflow-wrap:anywhere}.skipper-rating{display:flex;align-items:center;gap:14px;margin:15px 0}.skipper-rating strong{font:800 52px 'Barlow Condensed',sans-serif;color:#ebc176}.skipper-rating span{font-size:9px;letter-spacing:1.5px;max-width:55px;line-height:1.6}.skipper-stats{display:flex;gap:22px;margin-bottom:25px}.skipper-stats span{font-size:10px;color:#9bb7be}.skipper-stats b{font-size:15px;color:#d5e3dd;margin-right:4px}.name-protection{display:block;font-size:9px;letter-spacing:1px;color:#e6b476}.name-protection.protected{color:#9adcab}.skipper-panel>p{font-size:11px}.skipper-panel .text-link{margin-top:18px}.online-notice{padding:16px 20px;background:#eddcc2;color:#663c28;border-left:3px solid #b37b43;font-size:13px;margin-bottom:20px}.room-heading{display:flex;align-items:center;gap:18px;justify-content:space-between}.room-heading h2{margin-right:auto}.room-heading .small{min-width:150px;font-size:20px;letter-spacing:3px;flex-direction:column;gap:3px}.room-heading .small span{font-size:8px;letter-spacing:1px}.room-roster{margin:20px 0;border-top:1px solid #d5c39425}.room-roster>div{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #d5c39425}.roster-avatar{display:grid;place-items:center;width:40px;height:40px;background:#2d5961;color:#f7d799;border:1px solid #c09c59;font-weight:800;border-radius:50%}.room-roster strong,.room-roster small{display:block}.room-roster strong{color:#f3e4c6;font-size:14px}.room-roster small{font-size:10px;margin-top:5px;color:#9ab3bc}.room-roster b{margin-left:auto;font-size:9px;letter-spacing:1px;color:#b1a68b}.room-roster b.ready{color:#9cdab5}.online-button-row{display:flex;flex-wrap:wrap;gap:12px}.online-button-row button{flex:1;min-width:130px}.online-how>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.online-how b{display:block;color:#e6ce96;font-size:10px;letter-spacing:1px;margin-bottom:8px}.online-how p{font-size:11px}.invite-form{display:grid!important;grid-template-columns:1fr 1fr;align-items:end;padding-top:20px;border-top:1px solid #d5c39425}.invite-form input{text-transform:uppercase}.queue-status{text-align:center;padding:22px 0;position:relative}.queue-status strong{display:block;color:#efcc89;font-size:12px;letter-spacing:1px;margin:10px 0}.queue-status>span:last-child{font-size:11px}.queue-status .live-dot{display:inline-block}.leaderboard-toolbar{display:flex;gap:5px;padding-bottom:20px;border-bottom:1px solid #d5c39425;flex-wrap:wrap}.leaderboard-toolbar button{background:none;color:#acbfc3;min-height:44px;padding:10px 22px;font-size:11px;font-weight:800;letter-spacing:1px;border:1px solid transparent}.leaderboard-toolbar button.active{background:#d3b57b1a;color:#f1cf87;border-color:#d3b57b70}.scoreboard-explainer{font-size:12px!important}.leaderboard-scroll{overflow:auto}.leaderboard-table{width:100%;border-collapse:collapse;white-space:nowrap}.leaderboard-table th{font-size:9px;text-align:left;color:#a7bcbf;letter-spacing:1.5px;padding:15px 12px}.leaderboard-table td{font-size:13px;padding:20px 12px;border-top:1px solid #d5c39425}.leaderboard-table td:first-child{font:700 26px 'Barlow Condensed',sans-serif;color:#e4c280}.leaderboard-table td:nth-child(3){color:#e4c280;font-weight:700}.leaderboard-table td span{color:#aac6c1;border:1px solid #aac6c1;font-size:8px;padding:3px 6px;margin-left:9px}.leaderboard-table .is-you{background:#69ab9920}.leaderboard-footnote{font-size:10px!important;padding-top:15px}.online-empty{text-align:center;padding:55px 20px}.online-empty>span{font-size:11px;letter-spacing:2px;color:#d5b77e}.online-empty .primary-button{margin-top:20px}.online-account-link{border:0;background:none;color:#627b7b;font-size:10px;max-width:145px;text-align:right;cursor:pointer}.online-account-link strong{display:block;font-size:12px;color:#12373f;overflow:hidden;text-overflow:ellipsis}.online-account-link span{display:block;margin-top:3px}.online-results{width:100%;margin:20px 0;text-align:left;border-collapse:collapse}.online-results td{padding:12px 8px;border-bottom:1px solid #ddc99b36;font-size:12px}.online-results td:last-child{text-align:right;color:#e9c480}.online-results .you{background:#477f7938}.online-result-note{font-size:11px;color:#c4d7d6;line-height:1.7}.online-panel .primary-button,.online-panel .outline-button{min-height:54px}.online-score-link{min-height:58px}.online-result-modal{max-width:610px!important}.online-result-modal h2{font-size:36px!important}
.online-boat-showcase .boat-sprite{position:static;left:auto;top:auto;translate:none;width:170px;height:170px;flex:none;max-width:none;aspect-ratio:1;margin:0 0 15px}.online-account-link{color:#bfd3d2}.online-account-link strong{color:#f0d6a0}.online-panel{border-image:url('/public/assets/ui/panel-frame.png') 190 170 220 170 fill stretch;background:transparent}.online-panel form{margin-top:16px}.sidebar nav{gap:4px}.sidebar .nav-item{margin-bottom:4px;min-height:43px;padding:7px 10px}
@media(min-width:1150px){.matchmaking-panel{display:grid;grid-template-columns:minmax(0,1fr) 190px;column-gap:24px}.online-panel-copy{grid-column:1;grid-row:1}.online-boat-showcase{grid-column:2;grid-row:1/4;min-height:220px;justify-content:center}.online-boat-choice,.online-ranked-button,.queue-status{grid-column:1}.online-fairness{grid-column:1/-1}.matchmaking-panel>.outline-button{grid-column:1}}
@media(max-width:1100px){.online-layout{grid-template-columns:minmax(0,1fr) 275px}.online-panel{padding:20px;border-width:12px}.online-how>div{grid-template-columns:1fr;gap:0}.online-field-grid,.invite-form{grid-template-columns:1fr}.online-account-link{display:none}}
@media(max-width:760px){.online-layout{grid-template-columns:1fr;gap:16px}.online-side{order:-1}.skipper-panel form,.online-login{max-width:100%}.skipper-panel{padding:18px}.online-side .skipper-panel h2{font-size:28px}.skipper-rating{margin:5px 0}.skipper-rating strong{font-size:38px}.skipper-stats{margin-bottom:15px}.online-panel{border-width:10px}.online-connection{font-size:8px}.online-button-row{flex-direction:column}.room-heading{align-items:start;flex-direction:column}.room-heading .small{width:100%}.leaderboard-toolbar button{padding:10px 12px;font-size:9px}.leaderboard-table td{padding:15px 10px}.online-empty{padding:28px 5px}.online-panel h2{font-size:28px}.online-how>div{grid-template-columns:1fr}.online-main,.online-side{gap:16px}}

.online-side .skipper-panel h2{font-size:26px;line-height:1.15;text-wrap:balance}
.online-class-choices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.online-class-choices label{min-width:0}.room-class-note{margin-bottom:8px}.room-roster>div>span:nth-child(2){min-width:0}.room-roster small{line-height:1.5;overflow-wrap:anywhere}.room-roster b{flex:none}.room-roster .roster-avatar{flex:none}
@media(max-width:700px){.online-class-choices{grid-template-columns:1fr}}