* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; touch-action: manipulation;
  font-family: system-ui, sans-serif; background: #14141f; color: #fff; }
.screen { display: flex; flex-direction: column; gap: 16px; padding: 24px;
  min-height: 100dvh; justify-content: center; }
.hidden { display: none; }
h1 { text-align: center; letter-spacing: 2px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
input { font-size: 24px; padding: 12px; border-radius: 10px; border: none; text-transform: uppercase; }
#name { text-transform: none; }
#racers { border: 1px solid #444; border-radius: 12px; padding: 12px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 8px; }
#racers legend { padding: 0 6px; font-size: 14px; }
#racers button { padding: 14px 8px; font-size: 15px; border-radius: 10px; border: 2px solid transparent;
  background: #26263a; color: #fff; }
#racers button.sel { border-color: #56b4e9; background: #2f4a63; }
#go { padding: 18px; font-size: 22px; font-weight: 700; border-radius: 12px; border: none;
  background: #e69f00; color: #14141f; }
#go:disabled { opacity: .4; }
#status { text-align: center; min-height: 1.2em; color: #f0a5a5; }
#pad { padding: 12px; gap: 10px; justify-content: stretch; position: relative; }
#flash { position: fixed; inset: 0; background: #d55e00; opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 9; }
#flash.on { opacity: .55; transition: none; }
#phase { text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 1px;
  color: #9aa2c0; text-transform: uppercase; }
#phase.race { color: #1db954; }
#sabotage.ready { animation: gloed 0.9s ease-in-out infinite alternate; }
@keyframes gloed { from { box-shadow: 0 0 4px #d55e00; } to { box-shadow: 0 0 22px #ff8438; } }
#sabotage:not(.ready) { opacity: .45; }
#power.leeg { opacity: .45; }
#hud { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
#boost { flex: 1; margin: 0 12px; height: 14px; }
#conn { color: #1db954; } #conn.down { color: #d55e00; }
#hold { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #26263a; border-radius: 16px; font-size: 20px; font-weight: 700; text-align: center;
  user-select: none; -webkit-user-select: none; touch-action: none; }
#hold.active { background: #2f4a63; }
#buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#buttons button { padding: 20px 8px; font-size: 17px; font-weight: 700; border-radius: 14px; border: none;
  color: #fff; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#jump { background: #0072b2; }
#power { background: #009e73; }
#sabotage { background: #d55e00; grid-column: 1 / -1; padding: 24px 8px; font-size: 20px; }