

#mobileDriveUI,#portraitRotateNotice{display:none}
@media (hover:none) and (pointer:coarse) and (orientation:portrait){
 html,body{width:100%;height:100%;height:100dvh;overflow:hidden;background:#050505}
 #game{position:fixed!important;left:0!important;top:0!important;width:100vw!important;height:calc(100dvh - clamp(330px,40dvh,390px))!important;display:block!important}
 #perfOverlay,#globalOnlineStatus{display:none!important}
 #start{height:100dvh!important;background:#050505!important}
 #start .arcadeTitleHud{width:100%!important;height:100%!important;min-height:0!important;transform:none!important;background:linear-gradient(145deg,#0b0b0b,#050505 54%,#170000)!important}
 #start .courseButtons.arcadeMenu{position:absolute!important;left:7%!important;right:7%!important;top:18%!important;width:auto!important;height:auto!important;display:flex!important;flex-direction:column!important;gap:1.0vh!important}
 #start .arcadeNav{width:100%!important;min-height:7vh!important;margin:0!important}
 #start .playerGate{left:7%!important;right:7%!important;top:7%!important;width:auto!important}
 #start .arcadePlayerCard{left:7%!important;right:7%!important;bottom:4%!important;width:auto!important;height:auto!important}
 #start .arcadeVersion{right:3%!important;bottom:1%!important}

 #mobileDriveUI{position:fixed;z-index:80;left:0;right:0;bottom:0;height:clamp(330px,40dvh,390px);box-sizing:border-box;padding:7px 7px max(7px,env(safe-area-inset-bottom));background:linear-gradient(145deg,#161616,#050505 48%,#160000);border-top:2px solid #7b1010;box-shadow:0 -8px 24px #000;grid-template-rows:minmax(0,1fr) 66px;gap:7px}
 body.mobile-racing #mobileDriveUI{display:grid}
 .mpGrid{display:grid;grid-template-columns:33% 44% 23%;min-height:0;gap:6px}
 .mpCol{min-width:0;min-height:0;border:1px solid #5c5c5c;border-radius:8px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.08) 2px 5px),linear-gradient(#171717,#070707);box-shadow:inset 0 0 0 1px #111,0 0 10px #000}
 .mpLeft{display:grid;grid-template-rows:34% 66%}
 .mpOnline{padding:7px 6px 4px;font:700 clamp(7px,2vw,10px)/1.25 Arial;color:#ddd;overflow:hidden;background:rgba(0,0,0,.38)}
 .mpOnlineHead{display:flex;align-items:center;gap:4px;color:#ff4545;font-weight:900;letter-spacing:.04em;white-space:nowrap}
 #mpOnlineCount{margin-left:auto;color:#fff;font-size:1.15em}
 #mpOnlineList{margin-top:5px;display:grid;gap:2px;color:#bfc5c7}
 #mpOnlineList span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mpCockpit{position:relative;overflow:hidden;background:#050505 url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==) center/cover no-repeat}
 .mpCockpit:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.48));pointer-events:none}
 .mpWheel{position:absolute;z-index:2;left:50%;bottom:-12%;width:min(31vw,170px);aspect-ratio:1;transform:translateX(-50%) rotate(0deg);transform-origin:50% 50%;transition:transform .07s linear;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==) center/contain no-repeat;filter:drop-shadow(0 6px 7px #000)}
 .mpSteerHit{position:absolute;z-index:5;top:0;bottom:0;width:50%;touch-action:none} .mpSteerHit.left{left:0} .mpSteerHit.right{right:0}
 .mpCenter{display:grid;grid-template-rows:44px minmax(0,1fr)}
 .mpUtility{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px}
 .mpUtility button,.mpGear{border:1px solid #aaa;border-radius:5px;background:linear-gradient(#505050,#181818 46%,#050505);color:#eee;font:900 clamp(7px,2vw,11px)/1 Arial;box-shadow:inset 0 0 0 1px #222}
 .mpMapWrap{position:relative;margin:0 5px 5px;border:1px solid #707070;border-radius:6px;background:#050505;overflow:hidden}
 #mpMapCanvas{width:100%;height:100%;display:block}
 .mpMapLabel{position:absolute;left:5px;top:4px;color:rgba(255,255,255,.52);font:800 6px/1 Arial;letter-spacing:.08em;pointer-events:none}
 .mpRight{display:grid;grid-template-rows:repeat(5,1fr);gap:5px;padding:6px}
 .mpGear{font-size:clamp(18px,6vw,28px);border:2px solid #bcbcbc;background:linear-gradient(135deg,#d6d6d6,#727272 50%,#222);color:#111;text-shadow:0 1px rgba(255,255,255,.4);box-shadow:inset 0 0 0 2px #353535,0 2px 4px #000}
 .mpGear.active{background:linear-gradient(#d63434,#7b0808);color:#fff;border-color:#eee;box-shadow:0 0 10px #e22,inset 0 0 0 2px #4b0000}
 .mpBrake{position:relative;border:2px solid #c6c6c6;border-radius:9px;background:radial-gradient(circle at 5% 30%,#0a0a0a 0 4px,transparent 5px),radial-gradient(circle at 10% 70%,#0a0a0a 0 4px,transparent 5px),radial-gradient(circle at 15% 30%,#0a0a0a 0 4px,transparent 5px),radial-gradient(circle at 20% 70%,#0a0a0a 0 4px,transparent 5px),radial-gradient(circle at 80% 70%,#0a0a0a 0 4px,transparent 5px),radial-gradient(circle at 85% 30%,#0a0a0a 0 4px,transparent 5px),radial-gradient(circle at 90% 70%,#0a0a0a 0 4px,transparent 5px),radial-gradient(circle at 95% 30%,#0a0a0a 0 4px,transparent 5px),linear-gradient(#b41d1d,#520606);color:#fff;font:900 clamp(18px,6vw,30px)/1 Arial;letter-spacing:.12em;text-shadow:0 2px 3px #000;box-shadow:inset 0 0 0 2px #4a0000,0 3px 8px #000;touch-action:none}
 .mpBrake.pressed{transform:translateY(2px);filter:brightness(.72)}
 #mobileDriveUI,#mobileDriveUI *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
 #mobileDriveUI button,#mobileDriveUI .mpSteerHit{touch-action:none!important}

 #onlineOverlay[aria-hidden="false"] .onlinePanel{width:100vw!important;height:100dvh!important;margin:0!important;border-radius:0!important;padding:8px!important;box-sizing:border-box!important}
 #onlineOverlay[aria-hidden="false"] .onlineGrid{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;gap:6px!important}
 #onlineOverlay[aria-hidden="false"] .onlineMaps{grid-template-columns:1fr!important}#onlineOverlay[aria-hidden="false"] .onlineLobbyCanvas{width:100%!important;height:190px!important;min-height:190px!important}
 #onlineOverlay[aria-hidden="false"] .chatRow{padding-left:36px!important}
 #onlineOverlay[aria-hidden="false"] .onlineTitle,#onlineOverlay[aria-hidden="false"] .onlineSub{font-size:9px!important}
}
body.mobileRotateRequired.mobile-racing #portraitRotateNotice{position:fixed;z-index:99999;inset:0;display:grid;place-items:center;background:#050505;color:#eee;font:900 clamp(18px,4vw,34px)/1.5 Arial;text-align:center;padding:10vw}body.mobileRotateRequired.mobile-racing>*:not(#portraitRotateNotice){visibility:hidden!important}

