* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #10131a; color: #fff;
  font: 16px/1.3 system-ui, "Segoe UI", Roboto, sans-serif;
  user-select: none; -webkit-user-select: none;
}

#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* прицел в центре экрана */
#aim {
  position: fixed; left: 50%; top: 50%; width: 46px; height: 46px;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 2px solid rgba(255,255,255,.35); border-radius: 50%;
  transition: border-color .15s, background .15s;
}
#aim span { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px;
  transform: translate(-50%,-50%); background: rgba(255,255,255,.6); border-radius: 50%; }
#aim.hit { border-color: #ffd23f; background: rgba(255,210,63,.12); }
#aim.hidden { opacity: 0; }

/* приборы */
#hud {
  position: fixed; left: 14px; top: calc(12px + env(safe-area-inset-top, 0px));
  pointer-events: none; display: flex; flex-direction: column; gap: 8px;
}
#speedo {
  background: rgba(10,14,20,.55); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 8px 14px; display: flex; align-items: baseline; gap: 6px;
}
#speedo b { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
#speedo i { font-style: normal; font-size: 12px; opacity: .6; }
#hands {
  background: rgba(10,14,20,.55); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 6px 12px; font-size: 13px; opacity: .85;
}

#hint {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  max-width: 78vw; text-align: center; pointer-events: none;
  background: rgba(10,14,20,.6); border-radius: 12px; padding: 10px 16px;
  font-size: 15px; transition: opacity .4s;
}
#hint.gone { opacity: 0; }

/* кнопки рук */
#sideBtns {
  position: fixed; right: calc(14px + env(safe-area-inset-right, 0px)); top: 50%;
  transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px;
}
#sideBtns button {
  min-width: 140px; padding: 16px 18px; font-size: 16px; font-weight: 700;
  color: #fff; background: rgba(255,210,63,.9); border: none; border-radius: 14px;
}
#dropBtn { background: rgba(255,255,255,.18) !important; }
#sideBtns button.off { opacity: .3; pointer-events: none; }
#sideBtns button:active { transform: scale(.96); }

/* педали */
#pedals {
  position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%); display: flex; gap: 18px;
}
#pedals button {
  width: 34vw; max-width: 200px; height: 96px; border: none; border-radius: 18px;
  font-size: 17px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
}
#gasBtn { background: rgba(70,200,110,.28); border-color: rgba(70,200,110,.5); }
#brakeBtn { background: rgba(230,80,70,.26); border-color: rgba(230,80,70,.5); }
#pedals button.down { filter: brightness(1.7); transform: translateY(3px); }

/* заставка */
#start {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1d2433, #0b0e14);
  text-align: center; padding: 24px;
}
#start.on { display: flex; }
#start h1 { font-size: 40px; margin-bottom: 12px; }
#start p { opacity: .75; max-width: 420px; margin: 0 auto 22px; }
#startBtn {
  padding: 18px 34px; font-size: 18px; font-weight: 800; border: none;
  border-radius: 16px; background: #ffd23f; color: #201a00;
}

#err {
  position: fixed; left: 12px; right: 12px; bottom: 12px; display: none;
  background: rgba(200,40,40,.9); border-radius: 10px; padding: 10px 14px; font-size: 13px;
}
#err.on { display: block; }