/* r41 strict RWD pass: safe-area insets everywhere, dvh, >=44px touch targets, no control/HUD overlap, fluid type.
   Loaded after the inline styles; module-injected styles (street-events / missions / police-convoy / escape-stunt) are beaten with `html body` specificity. */
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sx:max(var(--sl),var(--sr));--skh:60px}
html,body{width:100%;height:100%;height:100dvh;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* ---------- HUD + controls respect the notch / rounded corners ---------- */
#hud .top{padding-left:calc(var(--sl) + 16px);padding-right:calc(var(--sr) + 16px)}
#ctl{padding-left:calc(var(--sl) + 16px);padding-right:calc(var(--sr) + 16px)}
#mul{right:calc(var(--sr) + 16px)}#toasts{right:calc(var(--sr) + 12px)}
#rcui{right:calc(var(--sr) + 12px)!important;top:calc(var(--st) + 110px)!important}
/* slide-in cards parked above the screen must not peek (their shadow showed as a white bar under the notch) */
html body #qkA,html body #gmC,html body #pcN{visibility:hidden;transition:transform .35s cubic-bezier(.2,1.4,.4,1),visibility 0s linear .36s}
html body #qkA.on,html body #gmC.on,html body #pcN.on{visibility:visible;transition:transform .35s cubic-bezier(.2,1.4,.4,1),visibility 0s}
html body #qkA,html body #gmC,html body #pcN,html body #fpD{box-sizing:border-box}
html body #fpD{visibility:hidden}html body #fpD.on{visibility:visible}
/* ---------- fluid type: nothing nowrap may run off a 320px screen ---------- */
.pop{font-size:clamp(22px,7.2vw,34px);max-width:calc(100vw - 2*var(--sx) - 24px);overflow:hidden;text-overflow:ellipsis}.pop.s{font-size:clamp(16px,5vw,22px)}
#lnh{font-size:clamp(34px,11vw,64px);padding:0 calc(var(--sx) + 12px)}#lnh small{font-size:clamp(14px,4vw,22px)}
#rage{font-size:clamp(16px,5.4vw,26px);white-space:normal;width:max-content;max-width:calc(100vw - 2*var(--sx) - 32px);text-align:center}
html body #wfB,html body #pcB{font-size:clamp(20px,7.6vw,34px);white-space:normal;width:max-content;max-width:calc(100vw - 2*var(--sx) - 24px)}
html body #fthint{font-size:clamp(14px,4.6vw,22px);white-space:normal;width:max-content;max-width:calc(100vw - 2*var(--sx) - 24px);text-align:center}
#btt{max-width:calc(100vw - 2*var(--sx) - 16px);white-space:normal}
#quip{max-width:min(560px,calc(100vw - 2*var(--sx) - 32px));font-size:clamp(15px,4.6vw,20px)}
#over .logo{font-size:clamp(30px,10vw,44px)!important}#over .stats{flex-wrap:wrap;justify-content:center;gap:clamp(8px,2.4vw,14px)}#over .stats .card{min-width:clamp(84px,24vw,96px)}#over .big{font-size:clamp(24px,7.6vw,32px)!important}
#fines{max-width:calc(100vw - 2*var(--sx) - 32px)}
/* dvh where the browser bars matter */
#a2g .a2c{max-height:calc(100vh - 80px);max-height:calc(100dvh - var(--st) - var(--sb) - 80px)}
/* ---------- 請吃三寶飯 QR card ---------- */
#spon .sbox{max-height:calc(100dvh - var(--st) - var(--sb) - 24px);overflow:auto;box-sizing:border-box;width:min(340px,calc(100vw - 2*var(--sx) - 24px))}
#spon .sbox .logo{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ffc04a;filter:none;text-shadow:0 0 18px #ff7a0088;font-size:clamp(26px,8.6vw,34px)!important}
#spon .qr{width:min(70vw,260px,calc(100dvh - var(--st) - var(--sb) - 300px));min-width:150px;box-sizing:border-box}
@media (orientation:landscape) and (max-height:600px){
 #spon .sbox{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:8px;align-items:center;align-content:center;text-align:left;width:auto;max-width:min(640px,calc(100vw - 2*var(--sx) - 24px));padding:14px 18px}
 #spon .sbox>*{grid-column:2}#spon .qr{grid-column:1;grid-row:1/span 4;width:auto;min-width:0;height:min(260px,calc(100dvh - var(--st) - var(--sb) - 56px));aspect-ratio:1}
 #spon .sbox .logo{font-size:clamp(22px,5.4vh,28px)!important;white-space:nowrap}#spon .sline{font-size:15px}#spon #sponx{justify-self:start}}
/* ---------- title / game-over screens: content scrolls between a top band (加入主畫面 · 橫放) and a bottom band (畫質 · 聲音 · 髒話) ---------- */
#title{top:calc(var(--st) + 58px);bottom:calc(var(--sb) + 62px);padding-left:calc(var(--sl) + 12px);padding-right:calc(var(--sr) + 12px);box-shadow:0 0 0 100vmax #03040a99}
#over,#spon{padding:calc(var(--st) + 16px) calc(var(--sr) + 16px) calc(var(--sb) + 16px) calc(var(--sl) + 16px)}
html body #a2g{top:calc(var(--st) + 8px);left:calc(var(--sl) + 10px)}
#a2g summary{min-height:44px;box-sizing:border-box;padding:0 14px}
#title:not(.hide)~#q,#title:not(.hide)~#mute,#title:not(.hide)~#cuss{bottom:calc(var(--sb) + 10px)!important;top:auto!important;transform:none!important}
#title:not(.hide)~#q{left:calc(var(--sl) + 12px)!important}#title:not(.hide)~#mute{left:calc(var(--sl) + 100px)!important}#title:not(.hide)~#cuss{left:calc(var(--sl) + 152px)!important}
#trk{max-width:min(560px,calc(100vw - 2*var(--sx) - 24px))}
#news{max-width:min(340px,calc(100vw - 2*var(--sx) - 24px))!important;box-sizing:border-box}
/* rotate hint: only on the title, compact, in the top band (portrait stays fully playable) */
html body #rotHint{top:calc(var(--st) + 8px);left:auto;right:calc(var(--sr) + 10px);transform:none;height:44px;box-sizing:border-box;padding:0 4px 0 12px;font-size:13px}
#rotHint button{width:36px;height:36px;position:relative}#rotHint button:after{content:'';position:absolute;inset:-5px}
body.playing #rotHint,#title.hide~#rotHint{display:none!important}
@media (max-width:560px){#rotHint>span:not(.ph){font-size:0}#rotHint>span:not(.ph):after{content:'橫放更好玩';font-size:13px}}
/* ---------- touch targets >= 44px ---------- */
#q,#mute,#cuss{min-height:44px;min-width:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px}
#otab,#robo,.go2,#dailyb,#spon1{min-height:44px;box-sizing:border-box}
html body #rgb{min-height:44px}
#V{width:44px!important;height:44px!important;font-size:18px!important}
#mpp input{min-height:44px;box-sizing:border-box;font-size:16px}#mpp button{min-height:44px;min-width:56px;box-sizing:border-box}
#a2g .a2i{min-height:44px}
/* ---------- in-game layout, all orientations ---------- */
body.playing #q,body.playing #mute{top:calc(var(--st) + 10px)}
body.playing #V{left:calc(50% - 96px)!important;top:calc(var(--st) + 10px)!important;z-index:22}
body.playing #q{left:50%}body.playing #mute{left:calc(50% + 48px)}
@media (pointer:coarse){body.playing #verh{display:none!important}}
#verh{top:calc(var(--st) + 58px)!important}
#mul{top:calc(var(--st) + 100px)}
#toasts{top:calc(var(--st) + 112px)}
/* skill row never runs under the right-hand control column; wraps upward instead */
#sk{flex-wrap:wrap-reverse;max-width:calc(100vw - var(--sl) - var(--sr) - 14px - 132px);align-content:flex-start}
#CTX{bottom:calc(var(--sb) + 112px + var(--skh) + 10px)!important}
/* event HUD: banners + cards live in the top band, never over the buttons */
html body #qkA,html body #gmC,html body #pcN{width:min(520px,calc(100vw - 2*var(--sx) - 2*136px));top:calc(var(--st) + 60px)}
html body #fpD{width:min(330px,calc(100vw - 2*var(--sx) - 2*136px));top:calc(var(--st) + 60px)}
html body #qkH,html body #wfH,html body #pcH,html body #gmH{top:calc(var(--st) + 62px);left:50%;right:auto;transform:translateX(-50%)}
html body #fpC{left:calc(var(--sl) + 16px);top:calc(var(--st) + 104px)}
html body #ftlive .lv{top:calc(var(--st) + 104px);left:calc(var(--sl) + 16px)}
html body #ftlive .ch{top:calc(var(--st) + 134px);left:calc(var(--sl) + 16px);right:auto}
html body #ftlive .bn{left:var(--sl);right:calc(var(--sr) + 132px);bottom:calc(var(--sb) + 112px + var(--skh) + 10px)}
html body #ftlive .bn span{text-overflow:ellipsis}
#mis{top:calc(var(--st) + 104px);max-width:calc(100vw - 2*var(--sx) - 32px)}
#spdo{bottom:calc(var(--sb) + 112px + var(--skh) + 10px)}
/* landscape: speed readout sits bottom-centre between the two thumb clusters */
@media (orientation:landscape){#spdo{bottom:calc(var(--sb) + 18px)!important}}
/* short landscape phones (568x320 … 932x430): scale the clusters so the right column clears the fuel card */
@media (orientation:landscape) and (max-height:450px){
 #ctl{bottom:calc(var(--sb) + 12px)}
 #ctl button{width:72px;height:72px;font-size:26px}
 #ctl #fly{width:80px;height:80px;font-size:15px}
 #ctl .rg{gap:8px}#ctl .rg #H{padding:0}#ctl .rg #B{width:58px;height:46px;font-size:14px}#ctl .rg #H{width:50px;height:50px;font-size:20px}
 #sk,#fan{bottom:calc(var(--sb) + 96px)}#sk{gap:6px}
 #sk button{width:46px;height:46px;font-size:15px}#sk #WA,#sk #RO,#sk #LN{width:52px;height:52px;font-size:16px}#sk small{font-size:10px}
 #CTX{bottom:calc(var(--sb) + 96px + var(--skh) + 8px)!important}
 html body #ftlive .bn{bottom:calc(var(--sb) + 96px + var(--skh) + 8px);right:calc(var(--sr) + 112px)}
 .card{padding:6px 12px}#score{font-size:24px}.fuelw{width:136px}#combo{font-size:18px}
 #mul{top:calc(var(--st) + 100px);right:auto;left:50%;transform:translateX(-50%)}
 #toasts{top:calc(var(--st) + 100px);right:auto;left:50%;transform:translateX(-50%)}
}
/* portrait phones: skill row above the thumbs, cards over the score row like OS notifications */
@media (orientation:portrait){
 body.playing #q,body.playing #mute,body.playing #V{top:calc(var(--st) + 110px)!important}
 body.playing #V{left:calc(var(--sl) + 14px)!important}body.playing #q{left:50%}body.playing #mute{left:calc(50% + 48px)}
 html body #qkA,html body #gmC,html body #pcN{width:min(520px,calc(100vw - 2*var(--sx) - 16px));top:calc(var(--st) + 8px)}
 html body #qkA{font-size:12px}
 html body #pcN svg{width:44px;height:44px}html body #pcN b{font-size:14px}
 html body #fpD{width:min(330px,calc(100vw - 2*var(--sx) - 32px));top:calc(var(--st) + 196px)}
 html body #qkH,html body #wfH,html body #pcH,html body #gmH{top:calc(var(--st) + 162px)}
 html body #fpC{top:calc(var(--st) + 162px)}
 html body #ftlive .lv{top:calc(var(--st) + 162px)}html body #ftlive .ch{top:calc(var(--st) + 192px)}
 #mis{top:calc(var(--st) + 196px)}#toasts{top:calc(var(--st) + 196px)}#mul{top:calc(var(--st) + 162px)}
}
@media (orientation:portrait) and (max-width:374px){
 #ctl button{width:72px;height:72px;font-size:26px}#ctl #fly{width:88px;height:88px}
 #sk button{width:46px;height:46px;font-size:15px}#sk #WA,#sk #RO,#sk #LN{width:52px;height:52px;font-size:16px}#sk{gap:6px;bottom:calc(var(--sb) + 100px)}
 #spdo,#CTX{bottom:calc(var(--sb) + 100px + var(--skh) + 10px)!important}
 .fuelw{width:128px}.card{padding:6px 10px}#score{font-size:24px}
}
#ctl #H,#ctl #B,#ctl #fly{padding:0}
/* game-over / title on top: in-game HUD + controls step aside (they used to show through the over screen and sit under its buttons) */
body:has(#over:not(.hide)) :is(#hud,#ctl,#sk,#fan,#CTX,#V,#q,#mute,#verh,#mul,#rcui,#lnh,#rage,#btfx,#kfh,#sens,#ftlive,#fthint,#qkA,#qkH,#fpD,#fpC,#wfB,#wfH,#gmC,#gmH,#pcB,#pcH,#pcN),
body:has(#spon:not(.hide)) :is(#hud,#ctl,#sk,#fan,#CTX,#V){opacity:0!important;pointer-events:none!important;transition:opacity .2s}
/* 發票對獎 card: on short landscape / narrow portrait the 5 numbers go into two columns so the card never reaches the skill row */
@media (orientation:landscape) and (max-height:450px),(orientation:portrait) and (max-width:420px){
 html body #fpD{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;padding:6px 10px;line-height:1.3}html body #fpD>h4,html body #fpD>div:not(.r){grid-column:1/-1}
 html body #fpD .r{font-size:10.5px;gap:4px}html body #fpD .r span{white-space:nowrap}html body #fpD .w{font-size:12.5px}html body #fpD h4{font-size:12.5px}}
@media (orientation:landscape) and (max-height:450px){html body #fpD{width:min(360px,calc(100vw - 2*var(--sx) - 2*112px))}}
@media (orientation:portrait) and (max-width:420px){html body #fpD{width:calc(100vw - 2*var(--sx) - 16px)}}
/* bullet-time title and the LIVE ticker clear the pill row / contextual button */
#btt{top:max(22%,calc(var(--st) + 62px))}
@media (orientation:portrait){#btt{top:max(24%,calc(var(--st) + 168px))}}
html body #ftlive .bn{bottom:calc(var(--sb) + 112px + var(--skh) + 64px)}
@media (orientation:landscape) and (max-height:450px){html body #ftlive .bn{bottom:calc(var(--sb) + 96px + var(--skh) + 8px)}#CTX{left:auto!important;right:calc(var(--sr) + 112px)!important;bottom:calc(var(--sb) + 12px)!important}}
/* achievement toasts: fade in place (the shared pop keyframes slid them 60px up into the pill row and half off the edge) */
@keyframes rwdToast{0%{opacity:0;transform:translateY(-6px)}10%{opacity:1;transform:none}85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
#toasts .toast{animation:rwdToast 3.2s ease-out forwards;max-width:min(300px,calc(100vw - 2*var(--sx) - 24px));box-sizing:border-box}
@media (orientation:landscape) and (max-height:450px){html body #fpD{top:calc(var(--st) + 58px);line-height:1.22;padding-top:5px;padding-bottom:5px}}
/* road-rage bubble + boss banners stay clear of the pill row on portrait phones */
@media (orientation:portrait){#rage{top:max(31%,calc(var(--st) + 252px))}}
html body #qkH,html body #wfH,html body #pcH,html body #gmH{max-width:calc(100vw - 2*var(--sx) - 24px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}
@media (max-width:374px){html body #qkH,html body #wfH,html body #pcH,html body #gmH{font-size:12px;padding:4px 10px}}
@media (orientation:portrait){html body.pcboss #rage{top:calc(var(--st) + 228px)}}