/* A clear driving window: information docks to the edge of each player's view. */
.ring-counter{display:inline-flex;flex-direction:column;gap:3px;line-height:1.2}.ring-counter>span{white-space:nowrap}.ring-counter small{display:block;font-size:10px;font-weight:600;letter-spacing:0;color:#ffe6a7}.ring-icon{display:inline-block;width:15px;height:15px;border:3px solid #ffd553;border-radius:50%;vertical-align:-1px;box-shadow:inset 1px 1px 0 #a96b1f,1px 1px 1px #132939}
@container race-hud (max-width:650px){.ring-counter small{font-size:8px}.ring-icon{width:12px;height:12px;border-width:2px}}
:is(#hud,#hud2,#hud3,#hud4).hud-player{container-type:size;container-name:race-hud;overflow:hidden;--edge:14px;text-shadow:0 2px 4px #071923b0}
:is(#hud,#hud2,#hud3,#hud4).hud-player .position{left:var(--edge);top:26px;line-height:1;white-space:nowrap}
:is(#hud,#hud2,#hud3,#hud4).hud-player .position b{font-size:54px;-webkit-text-stroke:1px #172a35}
:is(#hud,#hud2,#hud3,#hud4).hud-player .position span{font-size:20px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .player-tag{top:10px;left:var(--edge);max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;letter-spacing:.5px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .top{left:50%;top:10px;width:auto;max-width:42%;padding:6px 12px;border-radius:9px;background:#10283598;white-space:nowrap}
:is(#hud,#hud2,#hud3,#hud4).hud-player .top span{font-size:9px;letter-spacing:.7px;margin:0 0 3px;overflow:hidden;text-overflow:ellipsis}
:is(#hud,#hud2,#hud3,#hud4).hud-player .top strong{font-size:17px}
:is(#hud,#hud2,#hud3,#hud4).hud-player [id^=height]{display:none}
:is(#hud,#hud2,#hud3,#hud4).hud-player [id^=standings]{position:absolute;left:var(--edge);top:92px;gap:3px;display:grid;width:145px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .standing{font-size:11px;padding:3px 6px;background:#10283585;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#hud,#hud2,#hud3,#hud4).hud-player .standing.me{border:1px solid #ffe294}
:is(#hud,#hud2,#hud3,#hud4).hud-player .bottom{left:var(--edge);bottom:var(--edge);gap:12px;font-size:17px;padding:7px 10px;border-radius:8px;background:#102835ab;white-space:nowrap}
:is(#hud,#hud2,#hud3,#hud4).hud-player .speed{bottom:var(--edge);left:50%;padding:0;line-height:1}
:is(#hud,#hud2,#hud3,#hud4).hud-player .speed b{font-size:27px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .speed small{font-size:8px;margin-left:3px}
:is(#hud,#hud2,#hud3,#hud4).hud-player [id^=boostbar]{height:3px;margin:5px auto 0;max-width:90px;background:#78e6f9;box-shadow:0 0 8px #78e6f9}
:is(#hud,#hud2,#hud3,#hud4).hud-player [id^=map]{position:absolute;right:var(--edge);top:72px;bottom:auto;width:108px;height:88px;opacity:.85}
:is(#hud,#hud2,#hud3,#hud4).hud-player [id^=item]{position:absolute;left:auto;top:auto;right:var(--edge);bottom:var(--edge);width:182px;min-height:48px;height:48px;padding:6px 9px;gap:8px;border:1px solid #cbeaf36b;border-radius:10px;display:flex;align-items:center;background:#102835c9;box-shadow:0 2px 10px #07171b30;text-shadow:none;font-size:16px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-icon{font-size:29px;line-height:1;flex-shrink:0}
:is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text{display:grid;gap:3px;min-width:0}
:is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text strong{font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
:is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text small{position:static;font-size:8px!important;letter-spacing:.3px;white-space:nowrap!important}
:is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text span,:is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text kbd{display:none}
:is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast{left:auto;right:var(--edge);top:auto;bottom:72px;transform:none;width:auto;max-width:210px;padding:7px 10px;border-radius:8px;text-align:left;background:#102835d6;box-shadow:none}
:is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast small{font-size:8px;letter-spacing:.4px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast strong{font-size:12px;margin:3px 0 0}
:is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast span{display:none}
:is(#hud,#hud2,#hud3,#hud4).hud-player .active-effect{bottom:129px;right:var(--edge);font-size:11px;max-width:210px;padding:3px 6px;border-radius:5px;background:#10283590}
:is(#hud,#hud2,#hud3,#hud4).hud-player .active-effect:empty{display:none}
:is(#hud,#hud2,#hud3,#hud4).hud-player .live-results{left:var(--edge);top:auto;bottom:64px;width:238px;max-height:150px;padding:8px;border-radius:9px;background:#102835d6;overflow:auto;pointer-events:auto}
:is(#hud,#hud2,#hud3,#hud4).hud-player .live-results>strong{font-size:9px;letter-spacing:.4px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .live-results>small{font-size:9px;margin-top:4px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .live-results .finish-table{font-size:10px;margin:4px 0}
:is(#hud,#hud2,#hud3,#hud4).hud-player .live-results th{font-size:8px;padding:3px}
:is(#hud,#hud2,#hud3,#hud4).hud-player .live-results td{padding:3px}
:is(#hud,#hud2,#hud3,#hud4).hud-player:not(.finished-view) .live-results tbody tr:nth-child(n+3){display:none}
:is(#hud,#hud2,#hud3,#hud4).hud-player.finished-view .live-results{max-height:65%;bottom:auto;top:90px}
:is(#hud,#hud2,#hud3,#hud4).hud-player.finished-view [id^=item]{display:none!important}
:is(#hud,#hud2,#hud3,#hud4).hud-player.has-finishers [id^=standings]{display:none!important}
body:has(.hud-player:not([hidden])) #sound-toggle{display:none}
body:has(.hud-player:not([hidden])) #fps-counter{top:8px;right:10px;padding:4px 6px;font-size:9px;gap:3px;background:#102835ad}
body:has(.hud-player:not([hidden])) #fps-counter b{font-size:14px}
body:has(.hud-player:not([hidden])) #fps-counter small{display:none}
@container race-hud (max-width:700px){
 :is(#hud,#hud2,#hud3,#hud4).hud-player .position b{font-size:40px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .position span{font-size:16px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=standings]{display:none}
 :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=map]{width:84px;height:69px;top:48px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=item]{width:148px;height:42px;min-height:42px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-icon{font-size:24px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text strong{font-size:11px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast{bottom:64px;max-width:180px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .active-effect{bottom:114px;font-size:10px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .bottom{font-size:14px;padding:6px 8px;gap:8px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .speed b{font-size:23px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .top span{display:none}
}
@container race-hud (max-height:440px){
 :is(#hud,#hud2,#hud3,#hud4).hud-player{--edge:9px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .position{top:22px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .position b{font-size:34px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .position span{font-size:14px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .player-tag{top:6px;font-size:9px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .top{top:7px;padding:4px 8px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .top span{display:none}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .top strong{font-size:13px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=standings]{display:none}
 :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=map]{top:42px;width:76px;height:62px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=item]{height:38px;min-height:38px;width:148px;padding:4px 7px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-icon{font-size:23px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text strong{font-size:11px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text small{font-size:7px!important}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast{bottom:56px;padding:5px 8px;max-width:180px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast strong{font-size:11px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .active-effect{bottom:99px;font-size:9px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .bottom{font-size:13px;padding:5px 7px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .speed b{font-size:21px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .live-results{width:210px;bottom:48px;max-height:100px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player.finished-view .live-results{top:62px;max-height:65%}
}
/* Touch controls retain their familiar positions; inventory moves to the top edge. */
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=item]{top:9px;bottom:auto;right:72px;width:150px;height:39px;min-height:39px}
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player .top{top:9px;left:43%;max-width:25%;padding:4px 7px}
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player .top strong{font-size:13px}
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player .top span{display:none}
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast{top:55px;bottom:auto;right:72px;max-width:180px}
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player .active-effect{top:105px;bottom:auto;right:72px;max-width:180px}
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=map]{top:54px;right:9px;width:62px;height:51px}
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player .bottom{left:calc(max(12px,env(safe-area-inset-left)) + var(--touch-steering-width) + 12px);bottom:12px;font-size:14px}
.phone :is(#hud,#hud2,#hud3,#hud4).hud-player .speed{left:49%;bottom:13px}
.phone .touch-pause{top:70px}
.phone.split-race :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=item]{top:9px;bottom:auto;right:9px;width:120px}
.phone.split-race :is(#hud,#hud2,#hud3,#hud4).hud-player .pickup-toast{top:55px;bottom:auto;right:9px;max-width:160px}
.phone.split-race :is(#hud,#hud2,#hud3,#hud4).hud-player .active-effect{top:100px;bottom:auto;right:9px}
.phone.split-race :is(#hud,#hud2,#hud3,#hud4).hud-player .bottom{left:64px;top:64px;bottom:auto;font-size:12px}
.phone.split-race :is(#hud,#hud2,#hud3,#hud4).hud-player .top{left:52%;top:7px}
.phone:has(.hud-player:not([hidden])) #mobile-fullscreen{top:112px;right:9px;min-height:32px;padding:6px 8px;font-size:10px}
@container race-hud (max-width:420px){
 :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=map]{display:none}
 :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=item]{width:120px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .inventory-text strong{font-size:10px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .bottom{font-size:12px}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .speed small{display:none}
 :is(#hud,#hud2,#hud3,#hud4).hud-player .top{left:55%}
}

.phone.split-race :is(#hud,#hud2,#hud3,#hud4).hud-player [id^=map]{display:none}
.phone.split-race:has(.hud-player:not([hidden])) #fps-counter{top:149px}
/* Keep the global fullscreen button below the top-right player's minimap. */
body:not(.phone):has(.hud-player:not([hidden])) #mobile-fullscreen{top:168px}
@media(max-width:700px){body:not(.phone):has(.hud-player:not([hidden])) #mobile-fullscreen{top:125px}}
@media(max-width:1400px){body.split-race:not(.phone):is([data-split-layout=vertical],[data-split-layout=grid]) #mobile-fullscreen{top:125px}}
@media(max-height:880px){body.split-race:not(.phone):is([data-split-layout=horizontal],[data-split-layout=grid]) #mobile-fullscreen{top:112px}}
@media(max-height:440px){body:not(.phone):has(.hud-player:not([hidden])) #mobile-fullscreen{top:112px}}