/* Highway drive simulator: styles scoped to .sim so they never touch the rest of the page. */
.sim{--ink:#1d2433;--muted:#5b6473;--line:#e3e6ea;--panel:#f5f6f8;--blue:#1f56c2;--green:#1d7a52;--amber:#b26a00;--red:#b42318;color:var(--ink);margin:8px 0 0}
.sim *{box-sizing:border-box}
.sim .stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#cfe3f3;touch-action:none;user-select:none;-webkit-user-select:none}
@media (max-width:640px){.sim .stage{aspect-ratio:3/4}.sim .card{font-size:14px;padding:14px 16px}.sim .card h2,.sim .card h3{font-size:19px}.sim .card ul{margin:6px 0 8px}.sim .qprompt{font-size:16px}.sim .opt{font-size:14px;padding:6px 8px}}
.sim .stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 0 rgba(180,35,24,0);transition:box-shadow .25s}
.sim .stage.hit::after{box-shadow:inset 0 0 0 8px rgba(180,35,24,.85)}
.sim canvas{display:block;width:100%;height:100%}
.sim .hud{position:absolute;inset:0;pointer-events:none;color:#fff;font-size:clamp(11px,1.6vw,15px)}
.sim .pill{background:rgba(15,23,42,.66);border-radius:10px;padding:6px 10px}
.sim .hud-l{position:absolute;top:10px;left:10px;display:flex;gap:8px;align-items:center}
.sim .speed{font-weight:700;font-size:clamp(18px,3vw,28px);line-height:1}
.sim .speed small{font-size:.5em;font-weight:600;margin-left:3px}
.sim .speed.over{background:rgba(180,35,24,.9)}
.sim .limit{width:clamp(34px,5vw,48px);height:clamp(34px,5vw,48px);border-radius:50%;background:#fff;border:clamp(4px,.7vw,6px) solid #c8102e;color:#111;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(13px,1.9vw,18px)}
.sim .hud-r{position:absolute;top:10px;right:10px;width:min(46%,280px)}
.sim .bar{height:6px;background:rgba(255,255,255,.3);border-radius:3px;margin:5px 0;overflow:hidden}
.sim .bar i{display:block;height:100%;width:0;background:#4ade80}
.sim .faults{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.sim .faults b{font-weight:700}
.sim .toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);max-width:min(90%,520px);text-align:center;padding:8px 14px;border-radius:10px;font-weight:600;color:#fff;background:rgba(180,35,24,.92);opacity:0;transition:opacity .2s;pointer-events:none}
.sim .toast.show{opacity:1}
.sim .toast.info{background:rgba(29,122,82,.92)}
.sim .count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(60px,14vw,140px) "Noto Serif",serif;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.45);pointer-events:none}
.sim .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.25)}
.sim .card{background:#fff;max-width:540px;margin:12px;padding:18px 22px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-height:calc(100% - 24px);overflow:auto;font-size:15px;line-height:1.55}
.sim .card h2,.sim .card h3{margin:0 0 6px;font-size:22px;font-family:"Noto Serif",Georgia,serif;line-height:1.25}
.sim .card ul{margin:8px 0 12px;padding-left:20px}
.sim .card .note{font-size:13px;color:var(--muted);margin:10px 0 0}
.sim .btn{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:10px 18px;font:600 16px "Noto Sans",sans-serif;cursor:pointer}
.sim .btn.secondary{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.sim .btn:hover{filter:brightness(1.08)}
.sim :focus-visible{outline:3px solid #f2b705;outline-offset:2px}
.sim .hidden{display:none!important}
.sim .touch{position:absolute;left:0;right:0;bottom:10px;display:none;justify-content:space-between;padding:0 10px;pointer-events:none}
.sim .touch.on{display:flex}
@media (pointer:coarse){.sim .touch{display:flex}}
.sim .touch div{display:flex;gap:10px}
.sim .touch button{pointer-events:auto;width:62px;height:62px;border-radius:50%;background:rgba(15,23,42,.5);color:#fff;border:2px solid rgba(255,255,255,.75);font:700 15px "Noto Sans",sans-serif;touch-action:none}
.sim .touch button.active{background:rgba(31,86,194,.85)}
.sim .bar-under{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 4px}
.sim .keys{color:var(--muted);font-size:14px}
.sim kbd{font-family:inherit;background:var(--panel);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 6px;font-size:13px}
.sim .result-head{display:flex;align-items:center;gap:10px}
.sim .badge{display:inline-block;padding:2px 10px;border-radius:999px;color:#fff;font-weight:700;font-size:14px}
.sim .badge.pass{background:var(--green)}.sim .badge.fail{background:var(--red)}
.sim .card table{border-collapse:collapse;width:100%;font-size:14px;margin:8px 0}
.sim .card th,.sim .card td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.sim .card td.num,.sim .card th.num{text-align:right}
.sim .qchip{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#b26a00;color:#fff;font-weight:700;border-radius:999px;padding:5px 14px;white-space:nowrap;animation:simBlink 1s steps(2,start) infinite}
@keyframes simBlink{to{visibility:hidden}}
.sim .qcard{max-width:640px}
.sim .qmeta{font-size:13px;color:var(--amber);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 2px}
.sim .qprompt{font-size:18px;font-weight:600;margin:0 0 12px;line-height:1.4}
.sim .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
@media (max-width:560px){.sim .opts{grid-template-columns:1fr}}
.sim .opt{display:flex;gap:8px;align-items:flex-start;text-align:left;background:#fff;border:1.5px solid #c9ced6;border-radius:8px;padding:8px 10px;font:500 15px "Noto Sans",sans-serif;color:var(--ink);cursor:pointer;line-height:1.35}
.sim .opt:hover:not(:disabled){border-color:var(--blue);background:#f2f6fd}
.sim .opt .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--panel);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sim .opt:disabled{cursor:default}
.sim .opt.right{border-color:var(--green);background:#e8f5ee}
.sim .opt.right .n{background:var(--green);color:#fff}
.sim .opt.wrong{border-color:var(--red);background:#fdecea}
.sim .opt.wrong .n{background:var(--red);color:#fff}
.sim .qwhy{border-left:4px solid var(--green);background:var(--panel);padding:8px 12px;border-radius:6px;margin:0 0 12px;font-size:15px}
.sim .qwhy.bad{border-left-color:var(--red)}
.sim:fullscreen{background:#000;display:flex;flex-direction:column;justify-content:center;padding:8px}
.sim:fullscreen .stage{max-height:calc(100vh - 70px);aspect-ratio:auto;flex:1}
@media (prefers-reduced-motion: reduce){.sim .toast,.sim .stage::after{transition:none}.sim .qchip{animation:none}}
.sim{position:relative}
.sim > .sim-h{margin:0 0 8px;padding-right:44px;font-size:1.1rem}
@media (max-width:640px){.sim #startOverlay .card ul + p{display:none}.sim #startOverlay .card li{margin:0}}