/* r60 strict touch UX: 48px targets, no text selection / callout / double-tap zoom on controls, 12px floor,
   control size (--cz) + left-handed mirror (body.sbL), settings sheet inside the pause menu. Loaded after rwd.css. */
:root{--cz:1}
html{touch-action:none;-webkit-touch-callout:none}
button,summary,#ctl,#sk,#fan,#CTX,#V,#rcui,#pzB,#skR,#hud{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}#ctl button,#sk button,#fan button,#CTX,#rcui button{touch-action:none}
input,textarea,#mplk{-webkit-user-select:text;user-select:text}
/* ---------- 48px hit areas (visual size kept, invisible ring extends the touch box) ---------- */
@media (pointer:coarse){
 #skR button,#a2g summary,#tier button,#rcui button{position:relative}
 :is(#q,#mute,#cuss,#pzB,#V,#skR button,#CTX)::after{content:'';position:absolute;inset:-3px;border-radius:inherit}
 #sk button::after,#fan button::after{content:'';position:absolute;inset:-4px;border-radius:50%}
 #a2g summary,#otab,#robo,.go2,#dailyb,#spon1,html body #rgb,#mpp input,#mpp button,#a2g .a2i,#pzM button{min-height:48px}
 #rotHint button::after{inset:-6px}
 #rcui button{width:52px;height:52px}
}
/* ---------- type floor 12px ---------- */
#sk small,#fan small,#CTX small{font-size:12px!important;letter-spacing:-.3px;white-space:nowrap}
#fan button{width:52px;height:52px}
@media (orientation:landscape) and (max-height:450px){#sk button{width:48px;height:48px}#sk small{font-size:12px!important}}
@media (orientation:portrait) and (max-width:374px){#sk button{width:48px;height:48px}}
#verh,#hcd{font-size:12px}
/* ---------- control size: 小 .88 / 標準 1 / 大 1.12 — every cluster scales from its own thumb corner ---------- */
#ctl .grp:first-child{transform:scale(var(--cz));transform-origin:bottom left}
#ctl .grp.rg{transform:scale(var(--cz));transform-origin:bottom right}
#sk{transform:translateY(calc((1 - var(--cz)) * 96px)) scale(var(--cz));transform-origin:bottom left}
#fan{transform:translateY(calc((1 - var(--cz)) * 96px)) scale(var(--cz));transform-origin:0 0}
/* ---------- left-handed: fly / brake / horn column on the left thumb, steering + skills on the right ---------- */
body.sbL #ctl{flex-direction:row-reverse}
body.sbL #ctl .grp:first-child{transform-origin:bottom right}
body.sbL #ctl .grp.rg{transform-origin:bottom left}
body.sbL #sk{left:auto;right:calc(var(--sr) + 14px);flex-direction:row-reverse;transform-origin:bottom right}
body.sbL #fan{left:auto;right:calc(var(--sr) + 66px)}
body.sbL #CTX{left:auto!important;right:calc(var(--sr) + 14px)!important}
@media (orientation:landscape) and (max-height:450px){body.sbL #CTX{right:auto!important;left:calc(var(--sl) + 112px)!important}}
body.sbL #ftlive .bn{left:calc(var(--sl) + 132px)!important;right:var(--sr)!important}
/* ---------- settings sheet (opened from the pause menu) ---------- */
#tuxP{display:none;text-align:left;margin-top:8px;background:#ffffff0d;border-radius:12px;padding:8px 10px}
#tuxP.on{display:block}
#tuxP .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0;flex-wrap:wrap}
#tuxP .row>span{font:800 14px "Noto Sans TC",sans-serif;color:#cfe6ff;min-width:5.5em}
#tuxP .seg{display:flex;gap:6px;flex:1;justify-content:flex-end}
#pzM #tuxP .seg button{min-height:48px;min-width:56px;flex:1;max-width:96px;font-size:14px;padding:0 8px}
#pzM #tuxP .seg button.on{background:#1a6aff;border-color:#9fd8ff}
#tuxP .tip{font:600 12px/1.5 "Noto Sans TC",sans-serif;color:#9fb8d8;margin-top:4px}
/* ---------- title: 12px floor, disclaimer gets its own line above the 畫質/聲音/髒話 band (it sat 4px under them) ---------- */
html body #disc{left:var(--sl)!important;right:var(--sr)!important;bottom:calc(var(--sb) + 58px)!important;font:600 12px/14px sans-serif!important}
#title{bottom:calc(var(--sb) + 76px)}
html body #rndB small{font-size:12px}#trk small,#trk i{font-size:12px}
#tuOffer button{min-height:48px}
/* ---------- portrait phones: the 6-skill rack moved off the road (it sat across the lane right above the car) into a
   2x3 block on the outer edge above the 飛越/煞車/喇叭 column; left-handed mirrors it ---------- */
@media (orientation:portrait) and (pointer:coarse){
 body.playing #skR{left:auto!important;right:calc(var(--sr) + 8px)!important;top:auto!important;transform:none!important;
  bottom:calc(var(--sb) + 34px + 226px * var(--cz))!important;grid-template-columns:repeat(2,44px)!important;column-gap:12px!important;row-gap:16px!important}
 body.playing.sbL #skR{right:auto!important;left:calc(var(--sl) + 8px)!important}
}
#skR button b{font-size:12px!important;letter-spacing:-.5px}
html body #tuOffer button{min-height:48px}
html body #rndB small{font-size:12px!important}
/* bigger controls lift the speed readout with them (portrait: it sits above the skill row) */
@media (orientation:portrait){#spdo{bottom:calc(var(--sb) + (112px + var(--skh)) * var(--cz) + 10px)}}
/* desktop: the keyboard skill rack sits bottom-centre, the speed readout goes just above it (they overlapped) */
@media (pointer:fine){body.playing #spdo{bottom:calc(var(--sb) + 68px)!important}}
html body #verh{font-size:12px!important}
html body #trk button small,html body #trk button i,html body #trk small,html body #trk i{font-size:12px!important}
html body #metaRow button{min-height:48px}
/* game over / QR card on top: the skill rack, speed readout and pause button step aside too */
body:has(#over:not(.hide)) :is(#skR,#spdo,#pzB),body:has(#spon:not(.hide)) :is(#skR,#spdo,#pzB){opacity:0!important;pointer-events:none!important}
html body #dfw button small{font-size:12px!important;line-height:1.2}