.game-header nav{gap:24px}.game-header nav #open-online{color:#ffd345}.track-cards{display:flex;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#c7a74b #30253a;padding-bottom:7px;scroll-snap-type:x proximity}.track-card{flex:0 0 calc((100% - 44px)/5);scroll-snap-align:start}.track-count button{font-size:20px;color:#ffd345;padding:0 2px}.place>span>b{font:inherit;font-weight:400}.course-label{max-width:72%}#lap-label{font-size:7px;color:#f9d76b;border-left:1px solid #9b859b;padding-left:8px;white-space:nowrap}.track-spec>span:nth-child(2)>strong{font-size:8px;letter-spacing:-.5px;line-height:22px}.online-label{font:8px Consolas;letter-spacing:2px;color:#a57a54}#online-content h2{font-size:27px;letter-spacing:-1px;font-weight:900;margin:15px 0 10px}#online-content>p{font-size:11px;color:#947a8d;line-height:1.8}.online-field{font-size:10px;font-weight:700;display:block;margin-top:23px}.online-field input,.online-join input{font:15px 'Segoe UI','Malgun Gothic',sans-serif;color:#352139;background:#fff9ed;border:2px solid #c6abbc;padding:11px 12px;border-radius:0;outline-offset:2px}.online-field input{display:block;width:100%;margin-top:7px}.online-field input:focus,.online-join input:focus{outline:2px solid #e498a2}.online-course{margin:17px 0 20px;background:#eee1ce;border:1px solid #d9c5c6;padding:12px 13px}.online-course>span{font-size:8px;color:#9e8193;display:block;margin-bottom:7px}.online-course>strong{font-size:13px;display:block;line-height:1.6}.online-course>small{font-size:9px;color:#9d8093;display:block;margin-top:6px;line-height:1.6}.online-primary{background:#ffd345;color:#2c1d31;border:2px solid #49304b;box-shadow:3px 3px 0 #ed72a6;font-weight:800;padding:13px 15px;width:100%;font-size:13px;text-align:left}.online-primary>span{float:right;font-size:18px;line-height:15px}.online-primary:disabled{background:#dfd1c5;border-color:#baa1b3;color:#a4879f;box-shadow:2px 2px 0 #c8b4c0;cursor:default}.online-or{display:flex;align-items:center;justify-content:center;gap:13px;margin:25px 0 18px;color:#aa8e9f;font-size:9px}.online-or>i{height:1px;background:#d2bdc9;flex:1}.online-join{display:flex;gap:9px}.online-join input{min-width:0;width:70%;text-transform:uppercase;letter-spacing:3px;font:18px Consolas}.online-join button{flex:1;background:#e9d4e1;color:#50354c;border:2px solid #a989a2;font-size:11px;font-weight:bold}.online-join button:disabled{opacity:.5}.online-note{font-size:9px!important;color:#a2869b!important;line-height:1.9!important;margin:20px 0 0}.room-code{border:2px dashed #d4b760;background:#fff2c5;text-align:center;padding:15px 10px;margin:22px 0 0}.room-code>small{display:block;font-size:9px;color:#a48a72}.room-code>strong{font:44px Impact,Consolas,sans-serif;letter-spacing:7px;display:block;margin:7px 0 11px;color:#37213c}.room-code>button{font-size:9px;padding:5px 10px;border:1px solid #bba35e;color:#9a7c47;background:#fff6db}.room-player{display:flex;align-items:center;gap:11px;border-bottom:1px solid #dbcbd4;padding:13px 2px}.room-player-icon{background:var(--player-color);color:#392743;font-size:23px;width:36px;height:36px;display:grid;place-items:center;border:2px solid #674b68}.room-player>span:nth-child(2){min-width:0;flex:1}.room-player strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-player strong>i{font-style:normal;color:#ac7a99;font-size:8px;border:1px solid #c2a4b9;padding:1px 3px;margin-left:3px;vertical-align:middle}.room-player small{display:block;color:#aa8fa0;font-size:8px;margin-top:5px}.room-player>b{font:11px Consolas,'Malgun Gothic';color:#a37a68}.room-actions{display:flex;gap:10px;margin-top:20px}.room-actions>.online-primary{flex:1;text-align:center;font-size:11px}.room-actions #start-room{background:#ff9356}#online-status{min-height:14px;color:#b76479;font-size:10px;line-height:1.7;margin-top:13px}#online-standings{position:absolute;z-index:5;right:28px;top:150px;width:190px;background:#1f172cdb;border:1px solid #7a5d80;padding:12px 11px;pointer-events:none}#online-standings>small{display:block;font:7px Consolas;letter-spacing:1.4px;color:#c6abce;margin-bottom:8px}#online-standings>div{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #ffffff14}#online-standings b{font:16px Impact;color:#ffe084;font-weight:400;width:10px}#online-standings span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}#online-standings i{font:8px Consolas;color:#c7aacd;white-space:nowrap}#online-room-badge{position:absolute;top:19px;left:50%;transform:translateX(-50%);z-index:12;white-space:nowrap;background:#38283edb;border:1px solid #bd9a5b;color:#f9d98c;font:9px Consolas;padding:9px 13px;letter-spacing:.4px}#online-room-badge.offline{color:#ffba95;border-color:#ba7055}.online-end-note{font-size:8px;text-align:center;color:#a7859c}@media(max-width:800px){.track-card{flex-basis:155px}.game-header nav{gap:17px}.track-spec>span:nth-child(2)>strong{font-size:7px}#online-standings{width:150px;padding:9px;right:20px;top:145px}#online-standings span{font-size:8px}#online-room-badge{top:48px;left:auto;right:20px;transform:none;font-size:7px;padding:6px 8px}.game-header nav small{display:none}}@media(max-width:600px){.game-header nav{gap:12px}.game-header nav button:nth-child(n+3){display:none}.game-header nav button:nth-child(1):after{content:'친구'}.game-header nav button:nth-child(2):after{content:'선수'}.track-card{flex-basis:145px}#online-standings{top:139px;right:17px;width:130px;padding:8px}#online-standings>small{font-size:5.5px;letter-spacing:.7px}#online-standings>div{padding-block:5px;gap:5px}#online-standings b{font-size:13px}#online-standings span{font-size:7px}#online-standings i{font-size:6px}#online-room-badge{top:50px;right:18px;font-size:6px;padding:5px 6px}#online-content h2{font-size:24px}.room-code>strong{font-size:37px}.room-player strong{font-size:11px}.room-actions>.online-primary{font-size:10px;padding-inline:6px}.track-count button{font-size:18px}#lap-label{font-size:5px;padding-left:5px}.course-label{gap:5px;font-size:6px}.online-join input{width:66%;font-size:16px}}

.room-visibility{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0;margin:14px 0}.room-visibility legend{font-size:11px;color:#746777;margin-bottom:9px}.room-visibility label{border:2px solid #d9d0c0;padding:12px 10px;border-radius:5px;cursor:pointer;background:#fff9ec;display:grid;grid-template-columns:18px 1fr;gap:4px}.room-visibility label:has(input:checked){border-color:#d99329;background:#ffecc1}.room-visibility input{accent-color:#9b6423;margin:2px 0}.room-visibility strong{font-size:13px;color:#302334}.room-visibility small{grid-column:1/3;font-size:10px;line-height:1.5;color:#6b5c69}.public-room-browser{border-top:1px solid #d7cdbb;margin-top:22px;padding-top:12px}.public-room-browser>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}.public-room-browser h3{font-size:15px;color:#342638}.public-room-browser .text-button{font-size:10px;color:#6a4d67;padding:5px}.public-room-browser #public-room-list{font-size:12px;line-height:1.6;color:#766573;max-height:240px;overflow:auto}.public-room{display:flex;align-items:center;gap:12px;background:#fff9ed;border:1px solid #dfd2be;padding:12px;margin-bottom:8px;border-radius:5px}.public-room>div{flex:1;min-width:0}.public-room strong{display:block;overflow:hidden;text-overflow:ellipsis;color:#3f2c43}.public-room span{display:block;font-size:10px}.public-room b{color:#7c5c24;font:12px Consolas}.public-room button{background:#3b2a40;color:#fff3d5;border-radius:4px;font-size:11px;padding:8px 10px}.room-visibility-label{display:inline-block;background:#f5db9a;border-radius:3px;padding:4px 8px;font-size:11px!important;color:#5b4024!important}
@media(max-width:480px){.room-visibility{gap:6px}.room-visibility label{padding:10px 7px}.room-visibility small{font-size:9px}.public-room{gap:8px;padding:10px}}

/* Match each screen to a single multiplayer task. */
#modal:has(#online-content){width:min(720px,calc(100% - 24px));max-height:90dvh;padding:24px;overflow-y:auto;overscroll-behavior:contain}
#modal:has(#online-content) .modal-head{position:sticky;top:-24px;z-index:3;background:#f7efdf;padding:8px 0}
#online-content h2{font-size:28px;margin:16px 0 8px;letter-spacing:-.7px}
#online-content .online-intro,#online-content .online-context{font-size:13px;color:#665568;line-height:1.65;margin:8px 0 16px}
#online-content .online-field{font-size:12px;margin:16px 0}
#online-content .online-field input{font-size:14px;padding:10px 12px;min-height:44px;margin-top:6px}
.online-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;border-bottom:2px solid #dacac9;margin:20px 0;padding-bottom:9px}
.online-tabs button{font-size:13px;font-weight:700;min-height:44px;padding:10px 8px;color:#68546c;background:#e9dfd7;border:2px solid transparent;border-radius:3px}
.online-tabs button[aria-pressed=true]{background:#ffd345;border-color:#49304b;color:#302137;box-shadow:2px 2px 0 #ed72a6}
#online-panel{min-height:220px}
#online-panel h3,.room-roster-heading h3{font-size:16px;color:#342638;margin:0 0 10px}
#online-panel-title:focus,#online-room-title:focus{outline:none}
.online-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}
.online-panel-head p{font-size:12px;color:#766575;line-height:1.6;margin:0}
#online-content .text-button{font-size:12px;color:#634c68;text-decoration:underline;min-height:40px;padding:8px;white-space:nowrap}
#online-content .text-button:disabled{opacity:.45}
#public-room-list{font-size:13px;color:#665568;line-height:1.6}
.online-empty{border:2px dashed #d3bfad;background:#fff8e9;text-align:center;padding:28px 20px;border-radius:4px}
.online-empty>span{display:block;font-size:28px;color:#ad7f36;margin-bottom:8px}
.online-empty>strong{display:block;font-size:14px;color:#49344d;line-height:1.6}
.online-empty>p{font-size:12px;margin:8px 0 20px}
.online-empty .online-primary{width:auto;min-width:190px;text-align:center}
.public-room{gap:16px;padding:14px;border:1px solid #d4c2c4;margin-bottom:10px}
.public-room>div>small{font-size:10px;color:#927880}
.public-room strong{font-size:15px;white-space:nowrap;text-overflow:ellipsis}
.public-room>div>span{font-size:12px;color:#6c5b6e;margin-top:4px;line-height:1.5}
.public-room .room-capacity{flex:none;text-align:center;white-space:nowrap}
.room-capacity b{display:block;font:bold 16px Consolas;color:#684a26}
.room-capacity small{display:block;font-size:10px;color:#806d78}
.public-room button{min-height:44px;font-size:12px;font-weight:700;padding:10px 14px}
.online-config{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin:18px 0}
.online-config label{font-size:12px;font-weight:700}
.online-config select{display:block;width:100%;min-height:44px;margin-top:7px;background:#fff9ed;color:#352139;border:2px solid #c6abbc;border-radius:2px;padding:8px;font-size:13px}
.room-visibility{gap:12px;margin:20px 0 14px}
.room-visibility legend{font-size:12px;color:#56425c;font-weight:700}
.room-visibility label{padding:14px 12px;gap:7px}
.room-visibility small{font-size:12px;line-height:1.65}
.room-visibility label:has(input:checked){border-color:#49304b;box-shadow:2px 2px 0 #ed72a6}
#online-content .online-primary{min-height:46px;font-size:13px;text-align:center}
#online-content button:disabled{filter:none;cursor:wait}
#online-content .online-note{font-size:11px!important;color:#806a7c!important;margin-top:14px;line-height:1.65!important}
.online-join{margin-top:22px}
.online-join input{min-height:46px;flex:1;width:auto}
.online-join button{flex:none;min-width:100px;font-size:13px;padding:10px 16px}
#online-status{font-size:12px;margin-top:12px}
.room-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
#online-content .room-heading h2{margin:0;flex:1}
.room-visibility-label{font-size:12px!important;padding:7px 10px;border:1px solid #b79c5b;white-space:nowrap}
.room-visibility-label[data-visibility=private]{background:#e5daef;border-color:#c2abd3;color:#65436c!important}
#online-content #room-access-hint{margin:12px 0 16px;font-size:12px}
.room-code{display:grid;grid-template-columns:1fr auto;text-align:left;align-items:center;gap:6px 12px;padding:12px 15px;margin:0 0 16px}
.room-code>small{font-size:11px;grid-column:1/-1;color:#806537}
.room-code>strong{font:32px Consolas;letter-spacing:6px;margin:0}
.room-code>button{font-size:12px;min-height:40px;padding:8px 12px;color:#684c22}
#online-room-view .online-course{margin:0 0 16px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:12px}
#online-room-view .online-course>small{font-size:11px;flex:none;margin:0}
.room-roster-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.room-roster-heading h3{font-size:13px;margin:0}
.room-roster-heading>span{font:13px Consolas;color:#806a79}
#room-players{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.room-player{border:1px solid #d7c5cb;background:#fff8e9;padding:11px;gap:9px;min-height:66px}
.room-player-icon{width:30px;height:30px;font-size:19px;flex:none}
.room-player strong{font-size:13px;max-width:165px}
.room-player small{font-size:10px;margin-top:5px}
.room-player>b{font-size:11px;white-space:nowrap}
.room-player.empty-seat{border-style:dashed;color:#9a8493;background:transparent;font-size:12px}
.empty-seat .room-player-icon{background:transparent;border:1px dashed #baa6b7;color:#a48c9f;font:20px Consolas}
#online-content #room-start-hint{font-size:12px;margin:14px 0 0;padding:9px 12px;background:#eee3d4;color:#5d4b60;border-left:3px solid #d9ac3e}
.room-actions{margin-top:12px}
#online-content .room-actions>.online-primary{font-size:13px;padding:11px 14px}
#online-content .room-actions>.online-primary:disabled{cursor:default}
.room-actions #start-room:disabled{background:#ded3c8;color:#887081;border-color:#bba7b4;box-shadow:2px 2px 0 #c9b6c1}
.room-footer{display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid #d9c7ce;margin-top:18px;padding-top:10px}
#online-content .room-footer .online-note{margin:0;font-size:10px!important;max-width:390px}
@media(max-width:600px){
 #modal:has(#online-content){padding:18px;max-height:92dvh}
 #modal:has(#online-content) .modal-head{top:-18px}
 #online-content h2{font-size:24px}
 .online-tabs{gap:4px;margin:16px 0}
 .online-tabs button{font-size:11px;padding:9px 4px}
 .online-config{grid-template-columns:1fr;gap:12px}
 .public-room{gap:10px;padding:11px}
 .public-room strong{font-size:13px}.public-room>div>span{font-size:11px}
 .public-room button{padding:10px;font-size:11px}.room-capacity small{display:none}
 .online-panel-head{gap:8px}.online-panel-head p{font-size:11px}
 #room-players{grid-template-columns:1fr}.room-player{min-height:58px;padding:9px}
 .room-player strong{max-width:190px}.room-player>b{margin-left:auto}
 #online-room-view .online-course{display:block}#online-room-view .online-course>small{margin-top:6px}
 .room-visibility small{font-size:11px}.room-visibility label{padding:12px 9px}
 .room-code>strong{font-size:28px;letter-spacing:4px}.room-code>button{font-size:11px}
 .room-footer{gap:12px}.room-heading{gap:8px}
}