/* Shared styles for the 3D driving games (car-kit.js). Works on top of /simulation-games/_shared/sim3d.css. */
.ck-hud { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 8px; }
.ck-speed { background: rgba(8, 16, 28, .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 6px 12px 4px; text-align: center; min-width: 86px; }
.ck-speed b { display: block; font: 900 34px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ck-speed small { font: 700 10px system-ui, sans-serif; letter-spacing: .1em; opacity: .75; }
.ck-gear { background: rgba(8, 16, 28, .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font: 900 20px system-ui, sans-serif; }
.ck-rev { position: absolute; left: 0; right: 0; top: -9px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.ck-rev i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4ade80, #facc15 70%, #ef4444); }
.ck-rev.is-red i { animation: ck-blink .2s steps(2) infinite; }
@keyframes ck-blink { 50% { opacity: .4; } }
.ck-limit { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 5px solid #dc2626; display: flex; align-items: center; justify-content: center; color: #111; font: 900 17px system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.ck-limit.is-over { animation: ck-blink .4s steps(2) infinite; }
.ck-map { position: absolute; right: 10px; top: 10px; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.ck-map canvas { width: 100%; height: 100%; display: block; }
.ck-nav { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(12, 74, 110, .88); border: 1px solid rgba(125, 211, 252, .6); border-radius: 14px; padding: 6px 14px 6px 10px; font: 800 17px system-ui, sans-serif; white-space: nowrap; }
.ck-nav__arrow { font-size: 30px; line-height: 1; }
.ck-nav__txt small { display: block; font-size: 12px; font-weight: 700; opacity: .85; }
.ck-mission { position: absolute; left: 12px; top: 10px; background: rgba(8, 16, 28, .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 6px 12px; font: 800 14px system-ui, sans-serif; line-height: 1.35; max-width: 42%; }
.ck-mission b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ck-mission small { display: block; font-weight: 600; opacity: .85; }
/* touch: steer on the left, pedals on the right */
.ck-touch .sim-tbtns { left: 10px; right: 10px; bottom: 12px; display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
.ck-touch .sim-tbtn { min-width: 64px; min-height: 58px; font-size: 20px; border-radius: 14px; }
.ck-touch .sim-tbtn[data-id="brake"] { order: 3; background: rgba(127, 29, 29, .75); font-size: 13px; }
.ck-touch .sim-tbtn[data-id="gas"] { order: 4; background: rgba(21, 128, 61, .78); font-size: 13px; min-height: 76px; }
.ck-touch .sim-tbtn[data-id="hb"] { order: 2; margin-left: auto; font-size: 12px; }
.sim-has-touch .ck-hud { bottom: 100px; }
@container (max-width: 480px) {
  .ck-map { width: 96px; height: 96px; top: 50px; }
  .sim-toolbar { right: 106px; }   /* clear the 96 px minimap (sim3d's default only clears a 78 px one); 6 buttons still fit on one row */
  .ck-nav { top: 150px; left: 8px; transform: none; font-size: 14px; padding: 4px 10px 4px 8px; }
  .ck-nav__arrow { font-size: 22px; }
  .ck-mission { top: 94px; left: 8px; max-width: 58%; font-size: 12px; }
  .ck-mission b { font-size: 15px; }
  .ck-speed b { font-size: 26px; } .ck-speed { min-width: 68px; }
  .ck-touch .sim-tbtn { min-width: 52px; min-height: 52px; }
  .ck-touch .sim-tbtns { gap: 6px; }
  .sim-has-touch .ck-hud { bottom: 92px; }
}