#raceSlots{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;gap:10px;z-index:6;pointer-events:none}
.raceSlot{position:relative;width:68px;min-height:72px;padding:3px;border:2px solid #7bcbcf;border-radius:12px;background:#102833e8;color:#e7fcf6;pointer-events:auto;touch-action:none;user-select:none}
.raceSlot canvas{display:block;width:42px;height:42px;margin:auto;image-rendering:pixelated}.raceSlot .slotLabel{display:block;font:12px VT323,monospace;white-space:nowrap}.raceSlot kbd{font:11px monospace;color:#9ed8c7}.raceSlot:active:not(:disabled){transform:scale(.93);background:#286c62}.raceSlot:disabled{opacity:.38}
#raceSlots.touch{right:max(22px,env(safe-area-inset-right));bottom:max(38px,env(safe-area-inset-bottom));width:90px;height:90px;display:block}
.touch .raceSlot{position:absolute;width:56px;min-height:62px}.touch #raceSlot0{right:101px;bottom:4px}.touch #raceSlot1{right:24px;bottom:103px}.touch .raceSlot canvas{width:38px;height:38px}.touch .raceSlot kbd:empty{display:none}
@media(max-width:350px),(max-height:500px){#raceSlots.touch{right:16px;bottom:max(28px,env(safe-area-inset-bottom));width:76px;height:76px}.touch .raceSlot{width:48px;min-height:54px}.touch .raceSlot canvas{width:30px;height:30px}.touch #raceSlot0{right:84px;bottom:0}.touch #raceSlot1{right:14px;bottom:85px}.touch .slotLabel{font-size:11px}}

/* First inventory slot replaces the unused Race fire button. */
#raceSlots.touch{right:max(24px,env(safe-area-inset-right));bottom:max(38px,env(safe-area-inset-bottom))}
.touch #raceSlot0{right:0;bottom:0;width:90px;height:90px;border-radius:50%;padding:6px}
.touch #raceSlot0 canvas{width:49px;height:49px}.touch #raceSlot0 .slotLabel{font-size:13px;max-width:74px;overflow:hidden;text-overflow:ellipsis;margin:auto}
.touch #raceSlot1{right:102px;bottom:10px;width:60px;height:66px}
@media(max-width:350px),(max-height:500px){#raceSlots.touch{right:16px;bottom:max(28px,env(safe-area-inset-bottom))}.touch #raceSlot0{width:76px;height:76px;padding:4px}.touch #raceSlot0 canvas{width:40px;height:40px}.touch #raceSlot0 .slotLabel{max-width:62px;font-size:11px}.touch #raceSlot1{right:88px;bottom:4px;width:52px;height:58px}}
#raceFinishBanner{position:fixed;left:50%;bottom:max(110px,20dvh);transform:translateX(-50%);z-index:5;pointer-events:none;text-align:center;color:#f5ffdc;text-shadow:2px 3px #07131d,-1px -1px #07131d;white-space:nowrap}
#raceFinishBanner strong{display:block;font:64px VT323,monospace}#raceFinishBanner small{display:block;font:18px VT323,monospace;color:#afffd6}
@media(max-height:500px){#raceFinishBanner{bottom:40px}#raceFinishBanner strong{font-size:44px}}

/* Keep iOS long-press selection/loupe out of the two item slots. */
#raceSlots,#raceSlots *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
