/* =============================
   css/scenes/drive.css
   ============================= */
/* ===== cena: SUV em primeira pessoa (fase 4, jogo) ===== */
#scene-drive{background:#58b8ff}
#scene-drive .cv{left:0;top:0;width:360px;height:640px}
#scene-drive.shake{animation:shake .35s linear}
@keyframes shake{20%{translate:-8px 4px}40%{translate:8px -4px}60%{translate:-6px 3px}80%{translate:5px -2px}}

#scene-drive .hud{left:10px;right:10px;top:10px}
#scene-drive .trk{position:relative;height:22px;background:#fff;border:4px solid var(--k);border-radius:12px;box-shadow:3px 3px 0 var(--k);margin-right:6px}
#scene-drive .trk i{position:absolute;top:-6px;font-style:normal;font-size:20px;line-height:22px}
#scene-drive .trk .car{left:0;transform:translateX(-4px) scaleX(-1)}
#scene-drive .trk .pump{right:-6px}
#scene-drive .dist{margin:8px auto 0;width:150px;text-align:center;font:900 13px "PDDText","Comic Sans MS",sans-serif;background:var(--y);border:3px solid var(--k);border-radius:10px;padding:2px 6px;box-shadow:3px 3px 0 var(--k)}

#scene-drive .alert{left:20px;right:20px;top:150px;text-align:center;z-index:6;font:900 34px/1.1 "PDDTitle",Impact,sans-serif;letter-spacing:1px;color:var(--y);text-shadow:3px 0px 0 var(--k),-3px 0px 0 var(--k),0px 3px 0 var(--k),0px -3px 0 var(--k),3px 3px 0 var(--k),-3px -3px 0 var(--k),3px -3px 0 var(--k),-3px 3px 0 var(--k),5px 5px 0 var(--k);animation:pulse .3s infinite}

#scene-drive .mirror{left:130px;top:70px;width:100px;height:30px;z-index:3}
#scene-drive .mirror .pu{fill:#111}
#scene-drive .dash{left:0;top:480px;width:360px;height:160px;z-index:4;pointer-events:none}
#scene-drive .wheel{transform-origin:180px 104px;transition:transform .05s}
#scene-drive .needle{transform-origin:62px 64px}
#scene-drive .warn{animation:blinkW .6s steps(2) infinite}
@keyframes blinkW{50%{opacity:.25}}

#scene-drive .flash{inset:0;z-index:7;background:#ff4b4b88;pointer-events:none;animation:flashA .45s ease-out forwards}
@keyframes flashA{to{opacity:0}}

#scene-drive .hint{left:0;right:0;top:456px;text-align:center;font:700 11px "PDDText","Comic Sans MS",sans-serif;color:#fff;text-shadow:1px 1px 0 var(--k);z-index:2}
#scene-drive .dbtn{z-index:5;top:580px;width:108px;height:52px;padding:0;font-size:26px;background:var(--y)}
#scene-drive .dl{left:8px}
#scene-drive .dr{right:8px}

#scene-drive .msg{left:20px;right:20px;top:120px;text-align:center;z-index:8;font:900 30px "PDDTitle",Impact,sans-serif}
#scene-drive .msg.big{font-size:96px;color:var(--y);text-shadow:3px 0px 0 var(--k),-3px 0px 0 var(--k),0px 3px 0 var(--k),0px -3px 0 var(--k),3px 3px 0 var(--k),-3px -3px 0 var(--k),3px -3px 0 var(--k),-3px 3px 0 var(--k),5px 5px 0 var(--k)}
#scene-drive .msg.card,#scene-drive .msg.warn{background:var(--w);border:4px solid var(--k);border-radius:18px;box-shadow:6px 6px 0 var(--k);padding:14px}
#scene-drive .msg.card h3{font:900 24px "PDDTitle",Impact,sans-serif;color:#d90429;margin-bottom:8px}
#scene-drive .msg.card p{font:700 14px/1.35 "PDDText","Comic Sans MS",sans-serif;margin-bottom:10px;color:var(--k)}
#scene-drive .msg.card .btn,#scene-drive .msg.warn .btn{width:100%;margin-top:8px}
#scene-drive .msg.warn{color:#d90429}
#scene-drive .msg small{display:block;font:700 14px "PDDText","Comic Sans MS",sans-serif;color:var(--k);margin-top:6px}