/* التجربة الحية لشاشة Corolla Dash */
.device { background:linear-gradient(160deg,#1b2333,#0b0f17); border-radius:26px; padding:14px; border:1px solid #2a3750; box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); transform:perspective(1400px) rotateY(-8deg) rotateX(4deg); transition:transform .5s; }
[dir=ltr] .device { transform:perspective(1400px) rotateY(8deg) rotateX(4deg); }
.device:hover { transform:none; }
.screen { aspect-ratio:800/480; background:#090c12; border-radius:14px; display:grid; grid-template-columns:1.1fr 1fr; gap:2.2%; padding:2.6%; position:relative; overflow:hidden; direction:ltr; container-type:inline-size; }
.gauge { position:relative; }
.gauge svg { width:100%; height:100%; }
.gauge .val { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge .val b { font-size:9cqw; line-height:1; }
.gauge .val span { font-size:2.1cqw; color:var(--accent); font-weight:700; }
.side { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:2cqw; min-width:0; min-height:0; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:1.4cqw; }
.tile { background:#121927; border:1px solid #1f2a3d; border-radius:1.4cqw; padding:1.2cqw 1.6cqw; }
.tile small { display:block; font-size:1.7cqw; color:var(--sub); font-weight:700; letter-spacing:.3px; }
.tile b { font-size:3.3cqw; }
.car { position:relative; justify-self:center; height:100%; aspect-ratio:700/660; }
.car img { width:100%; height:100%; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.door { position:absolute; width:1.1%; background:var(--bad); border-radius:3px; transform-origin:50% 0; transition:transform .45s cubic-bezier(.3,1.4,.5,1), opacity .3s; opacity:0; box-shadow:0 0 10px var(--bad); }
.door.l { left:33.3%; } .door.r { left:66.6%; }
.door.f { top:35%; height:19%; } .door.b { top:54.5%; height:16%; }
.door.open { opacity:1; }
.door.l.open { transform:rotate(38deg); } .door.r.open { transform:rotate(-38deg); }
.trunk { position:absolute; left:37%; width:26%; top:75%; height:15%; border-radius:6px; border:2px solid var(--bad); opacity:0; transition:.3s; box-shadow:0 0 12px var(--bad) inset; }
.trunk.open { opacity:1; }
.hit { position:absolute; background:none; border:0; border-radius:6px; }
.hit:hover { background:rgba(var(--ar),.12); outline:1px dashed rgba(var(--ar),.5); }
.alert { border-radius:1.2cqw; padding:1cqw 1.6cqw; font-size:2cqw; font-weight:700; display:flex; align-items:center; gap:1.2cqw; background:rgba(0,210,106,.1); color:var(--ok); border:1px solid rgba(0,210,106,.35); transition:.3s; }
.alert.warn { background:rgba(255,176,32,.12); color:var(--warn); border-color:rgba(255,176,32,.4); }
.alert.bad { background:rgba(255,59,92,.15); color:var(--bad); border-color:rgba(255,59,92,.5); animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.55; } }
.ctrl { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.hint { text-align:center; color:var(--sub); font-size:12.5px; margin-top:8px; }