/* DriveLab: localisation (RTL), touch and phone layout extensions. Desktop layout is untouched. */

/* ---------- Touch devices: no keyboard hints ---------- */
html.touch .key-hint{display:none!important}

/* ---------- Arabic / RTL ---------- */
:root[lang=ar]{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,Inter,Arial,sans-serif}
/* Letter-spacing breaks Arabic joining. */
[dir=rtl] body,[dir=rtl] body *{letter-spacing:normal!important}
[dir=rtl] .feature-card,[dir=rtl] .lesson-card,[dir=rtl] .car-option{text-align:right}
[dir=rtl] #road-feedback{text-align:right;border-left:0;border-right:3px solid #ddebba}
[dir=rtl] #road-feedback.warn{border-right-color:#e4a47c}
[dir=rtl] .vehicle-caption{border-left:0;border-right:1px solid #ecf4d83b}
[dir=rtl] .brand em{margin-left:0;margin-right:17px;border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:18px}
[dir=rtl] .hero-pills span:not(:last-child):after{margin-left:0;margin-right:17px}
[dir=rtl] .feature-card>span,[dir=rtl] .lesson-bar>.subtle,[dir=rtl] .coach-head small,[dir=rtl] .history-row>span{margin-left:0;margin-right:auto}
[dir=rtl] #coach,[dir=rtl] #modal,[dir=rtl] .settings-row{text-align:right}
/* The instruments stay physically left-to-right like a real car: wheel left, pedals right,
   gear grid and speedometer unchanged. Only the text direction inside labels flips. */
[dir=rtl] #control-deck,[dir=rtl] #gear-grid,[dir=rtl] .pedal-block,[dir=rtl] .signal-row,[dir=rtl] .wheel-keys,[dir=rtl] .speed-reading,[dir=rtl] .rpm-track,[dir=rtl] #bite-readout>i,[dir=rtl] .mirror-frame,[dir=rtl] #map,[dir=rtl] .slider-row{direction:ltr}
[dir=rtl] #control-deck .field-label,[dir=rtl] #control-deck .cluster-status,[dir=rtl] #control-deck .cluster-footer,[dir=rtl] #control-deck .rpm-labels,[dir=rtl] #control-deck #steering-caption,[dir=rtl] .pedal b{unicode-bidi:plaintext}
[dir=rtl] .speed-reading>b{margin-left:auto}
[dir=rtl] kbd{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .field-label>span{float:left}
[dir=rtl] .modal-close{right:auto;left:19px}
[dir=rtl] .lesson-art>span{left:auto;right:16px}
[dir=rtl] .brand-mark,[dir=rtl] .brand>span:nth-child(2),[dir=rtl] .brand em{direction:ltr;unicode-bidi:isolate}
[dir=rtl] #exit-drive{transform:scaleX(-1)}
[dir=rtl] #garage-title,[dir=rtl] #hero-car{direction:ltr;unicode-bidi:isolate;text-align:right}

/* ---------- Rotate overlay (phones in portrait while driving) ---------- */
#rotate-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 40%,#233a3bf2,#0d161bf7 72%);backdrop-filter:blur(10px);touch-action:none}
#rotate-overlay .rotate-card{max-width:320px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--ink)}
#rotate-overlay h2{margin:6px 0 0;font-size:24px;line-height:1.25;font-weight:600}
#rotate-overlay p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
#rotate-overlay .primary{margin-top:10px}
.rotate-phone{width:46px;height:78px;border:3px solid var(--lime);border-radius:10px;position:relative;animation:dl-rotate 2.4s ease-in-out infinite}
.rotate-phone i{position:absolute;left:50%;bottom:5px;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:var(--lime)}
@keyframes dl-rotate{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}
body.rotate-open .ltd-record{display:none}

/* ---------- Phone landscape: compact deck (<= ~30% of height), thumbs at the edges ---------- */
@media (orientation:landscape) and (max-height:500px){
 #control-deck,body.cockpit #control-deck{display:flex;align-items:center;justify-content:space-between;left:8px;right:8px;bottom:6px;width:auto;max-width:none;transform:none;height:min(112px,28vh);padding:6px 10px;gap:10px;border-radius:12px}
 .steering-block,body.cockpit .steering-block{width:108px;flex:none;order:0}
 .signal-row{font-size:7px}
 .signal-row button{width:32px;height:22px;font-size:13px}
 #steering-wheel,body.cockpit #steering-wheel{width:min(64px,17vh);height:min(64px,17vh);margin:2px auto 0}
 .drive-cluster,body.cockpit .drive-cluster{width:auto;flex:1 1 150px;max-width:210px;display:block;height:auto;position:relative}
 .cluster-status{font-size:7px;display:flex;flex-direction:row;justify-content:space-between;gap:6px}
 .cluster-status button{font-size:7px;padding:5px 7px}
 .speed-reading,body.cockpit .speed-reading{height:40px;gap:6px}
 .speed-reading>strong,body.cockpit .speed-reading>strong{font-size:36px}
 .speed-reading>span{font-size:8px}
 .speed-reading>b,body.cockpit .speed-reading>b{font-size:20px;width:30px;height:32px}
 .rpm-track{display:block;height:3px}
 .rpm-labels{display:none}
 .cluster-footer{position:static;margin-top:6px!important;font-size:7px}
 .cluster-footer button{font-size:7px;padding:5px 7px}
 .gear-block,body.cockpit .gear-block{width:108px;flex:none}
 .gear-block .field-label{display:none}
 #gear-grid{gap:3px}
 #gear-grid button{height:min(24px,6.4vh);font-size:11px}
 #bite-readout{font-size:6px;margin-top:5px;gap:5px}
 .pedal-block,body.cockpit .pedal-block{flex:none;gap:8px;align-self:stretch;align-items:flex-end}
 .pedal-wrap{gap:0}
 .pedal-wrap>span{display:none}
 .pedal,body.cockpit .pedal{width:44px;height:min(96px,25vh);padding-bottom:8px}
 .pedal.brake,body.cockpit .pedal.brake{width:50px;height:min(88px,23vh)}
 .pedal b{font-size:7px}
 #view-toolbar,body.cockpit #view-toolbar{bottom:calc(min(112px,28vh) + 12px);left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 330px);overflow-x:auto;scrollbar-width:none}
 #view-toolbar button{font-size:8px;padding:6px 8px}
 #drive-footer{left:auto;right:12px;bottom:calc(min(112px,28vh) + 12px);gap:8px}
 #drive-footer>span{display:none}
 #drive-footer button{font-size:9px;padding:6px 10px;background:#152324e8;border:1px solid var(--line);border-radius:6px}
 #coach,body.cockpit #coach{max-height:calc(100% - min(112px,28vh) - 108px);overflow-y:auto;width:200px}
 #coach p{font-size:10px;line-height:1.5}
 .coach-head{font-size:7px}
 .coach-head small{font-size:7px}
 #navigation,body.cockpit #navigation{max-height:calc(100% - min(112px,28vh) - 108px);overflow:hidden}
 .map-top,.map-bottom small{font-size:6px}
 .map-bottom strong{font-size:8px}
 .lesson-bar small{font-size:7px}
 .lesson-bar strong{font-size:10px}
 #observation button{font-size:8px;padding:5px 8px}
 #road-feedback{font-size:10px}
 body.driving .ltd-record{left:auto;right:auto;left:50%;transform:translateX(-50%);bottom:calc(min(112px,28vh) + 44px);font-size:8px;padding:4px 9px}
 body.driving .ltd-back{top:6px;padding:5px 9px;font-size:8px}
 body.driving .ltd-challenge{top:46px}
}

/* ---------- Desktop drive: keep the Record button clear of the keyboard-shortcut line ---------- */
@media (min-width:761px) and (min-height:501px){
 body.driving .ltd-record{left:auto;right:128px;bottom:5px}
 [dir=rtl] body.driving .ltd-record{right:auto;left:128px}
}