:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101b27;color:#edf1ee;--lime:#d9f78d;--muted:#a1b2c0}*{box-sizing:border-box}body{margin:0}main{max-width:850px;margin:auto;padding:30px 22px 60px}header,.row,.buttons{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}header a{font-weight:800;letter-spacing:2px;text-decoration:none}header span{font-size:10px;color:var(--muted);letter-spacing:1.5px}a{color:var(--lime)}h1{font-size:clamp(34px,6vw,58px);line-height:1.05;letter-spacing:-2px;margin:36px 0 18px}h2{font-size:20px;margin:0 0 12px}p{line-height:1.55}.intro{max-width:560px;color:#becbd4}section:not(#ride-panel){background:#172635;border:1px solid #ffffff1c;border-radius:16px;margin:20px 0;padding:24px}button,input,select{font:inherit;border-radius:8px;padding:10px 13px;border:1px solid #ffffff30;background:#10202d;color:inherit;min-height:42px}button{cursor:pointer}button:where(:not(#show-code,#refresh-match,#refresh-list,#leave-ride)){background:var(--lime);color:#1a2a24;font-weight:700}button:disabled{opacity:.45;cursor:wait}label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0}input,select{min-width:0;width:min(65%,420px)}#invite{width:100%;font-size:11px}#invite-label{display:block;font-size:11px}details{margin:16px 0;color:var(--muted)}details input{display:block;margin:12px 0;width:100%}section p,footer{font-size:13px;color:var(--muted)}#notice{color:var(--lime);min-height:1.5em}ul{list-style:none;padding:0}li{padding:12px 0;border-bottom:1px solid #ffffff20;display:flex;justify-content:space-between;gap:15px;align-items:center}#players{display:grid;grid-template-columns:1fr 1fr;gap:12px}#players>div{padding:16px;background:#10202d;border-radius:10px}#players strong,#players small{display:block}#players small{margin-top:7px;color:var(--muted)}#match-state{color:var(--lime);font-size:16px;font-weight:700}#watch button{margin:10px 10px 0 0}#ride-panel{position:fixed;inset:0;background:#101b27;z-index:10}#ride-bar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:3px 14px;font-size:12px}#ride-bar button{min-height:30px;padding:5px 12px}iframe{border:0;width:100%;height:calc(100% - 44px);display:block}[hidden]{display:none!important}footer{line-height:1.6;margin-top:32px}@media(max-height:500px){main{padding-top:15px}h1{font-size:34px;margin-top:22px}section:not(#ride-panel){padding:16px}#ride-bar{height:36px}iframe{height:calc(100% - 36px)}}

#inbox strong,#inbox small{display:block}#inbox small{color:var(--muted);margin-top:5px}.opponent-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}#match-panel{scroll-margin-top:16px}#match-title:focus{outline:none}#match-notice{color:var(--lime)}#result-note{border-left:2px solid var(--lime);padding-left:12px}#close-match{margin-top:15px}@media(max-width:500px){li{align-items:flex-start}.opponent-actions{max-width:48%}.opponent-actions button{font-size:12px;padding:8px}}

#new-contact>summary{cursor:pointer;color:var(--lime);font-weight:700}#ride-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}h1{font-size:clamp(30px,5vw,44px);margin:25px 0 16px}

#chat{width:min(30rem,calc(100% - 24px));max-height:calc(100% - 24px);padding:18px;border:1px solid #ffffff30;border-radius:16px;background:#172635;color:inherit;overflow:auto}
#chat::backdrop{background:#08121bcc}
#chat h2{margin:0;overflow-wrap:anywhere}
#chat p{margin:10px 0}
#chat-notice,#chat-count,#chat-waiting{color:var(--muted);font-size:13px}
#message-text{padding:12px;background:#10202d;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}
#chat-text{display:block;width:100%;margin-bottom:12px;padding:10px;background:#10202d;color:inherit;border:1px solid #ffffff30;border-radius:8px;font:inherit;font-size:16px;resize:vertical}

main{padding:0 14px 30px}
.friends-bar{position:sticky;top:0;z-index:2;gap:8px;padding:8px 0;background:#101b27}
.friends-bar h1{margin:0;font-size:20px;letter-spacing:0}
.friends-bar a{display:inline-flex;align-items:center;min-height:42px;letter-spacing:0;font-weight:700}
#notice{margin:4px 0 8px}
#notice:empty,#match-notice:empty{display:none}
#opponents{margin:4px 0 12px;padding:10px 12px}
#opponents h2{margin:0;font-size:16px}
#inbox{margin:4px 0 0}
#inbox li{gap:8px;padding:3px 0;align-items:center}
#inbox li:last-child{border-bottom:0}
.opponent-info{min-width:0}
#inbox strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
#inbox small{margin:0;white-space:nowrap;font-size:12px}
.opponent-actions{flex-wrap:nowrap;max-width:none;gap:4px}
.opponent-actions button{font-size:12px;padding:5px 8px;white-space:nowrap}
.opponent-actions .race-more{min-width:36px;font-size:18px;line-height:1}
#profile,#new-contact{margin:10px 0}
#profile>summary,#new-contact>summary{cursor:pointer;color:var(--lime);font-weight:700;padding:7px 0}
#new-panel{margin:4px 0;padding:12px}
#match-panel{scroll-margin-top:64px}
footer{margin-top:20px}
button.quiet,button#mp-settings{background:#10202d;color:inherit}
button.danger{background:#f78f94;color:#2b1517}
button.new-message::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#a62935;margin-right:5px;vertical-align:1px}
dialog:not(#chat){width:min(30rem,calc(100% - 24px));max-height:calc(100% - 24px);padding:16px;border:1px solid #ffffff30;border-radius:14px;background:#172635;color:inherit;overflow:auto}
dialog::backdrop{background:#08121bcc}
dialog h2{margin:0 0 8px}
dialog label{margin:8px 0}
#mp-scale{width:100%;padding:0;min-height:36px;accent-color:var(--lime)}
#restore-notice{color:var(--lime)}
#restore-notice:empty{display:none}
#race-menu-list{margin:4px 0 12px}
#race-menu-list li{gap:8px}
#race-menu-list strong,#race-menu-list small{display:block;overflow-wrap:anywhere}
#race-menu-list small{color:var(--muted);margin-top:4px}
.race-picker-actions{display:flex;flex-shrink:0;gap:4px}
.race-picker-actions button{font-size:12px;padding-inline:7px;white-space:nowrap}
@media(max-width:420px){
  main{padding-inline:8px}
  #opponents{padding-inline:8px}
  .opponent-actions button{padding-inline:6px}
}