:root {
  --hot: #a77bff;
  --gold: #fdd023;
  --lime: #58ff7a;
  --cyan: #39d8ff;
  --red: #ff3b3b;
  --panel: rgba(12, 10, 8, 0.84);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { font-family: 'Chakra Petch', system-ui, sans-serif; color: #fff; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.disp { font-family: 'Bungee', 'Impact', 'Arial Black', sans-serif; font-weight: 400; }

/* ---- HUD */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 12px) 0 calc(env(safe-area-inset-left, 0px) + 12px);
  text-shadow: 2px 2px 0 #000;
}
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hud-l { max-width: 52%; }
#hRegion { font-size: clamp(10px, 2.2vmin, 14px); color: var(--gold); letter-spacing: 1px; }
#hObj { font-size: clamp(12px, 2.8vmin, 18px); font-weight: 700; margin-top: 2px; }
#hTime { font-size: clamp(22px, 6vmin, 40px); line-height: 1.1; margin-top: 4px; font-style: italic; }
/* Rev gauge: bottom-right on desktop; top-right on touch, where the gas
   cluster owns the bottom-right corner. */
#speedo {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  width: clamp(130px, 24vmin, 200px);
  height: clamp(130px, 24vmin, 200px);
}
body.touch #speedo {
  bottom: auto;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  width: clamp(104px, 22vmin, 150px);
  height: clamp(104px, 22vmin, 150px);
}
.topBtns {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  display: flex;
  gap: 8px;
}
.topBtns button {
  pointer-events: auto;
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 2px solid #fff;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font: 400 12px 'Bungee', sans-serif;
}
#msg {
  position: fixed;
  left: 0;
  right: 0;
  top: 28%;
  text-align: center;
  font-size: clamp(26px, 8vmin, 60px);
  color: var(--gold);
  font-style: italic;
  text-shadow: 3px 3px 0 #4b2e83, 6px 6px 0 rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.12s, transform 0.12s;
}
#msg.on { opacity: 1; transform: scale(1); }
#trickFeed {
  position: fixed;
  left: 0;
  right: 0;
  top: 40%;
  text-align: center;
  pointer-events: none;
  font: 400 clamp(14px, 3.6vmin, 24px) 'Bungee', sans-serif;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}

/* ---- touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; }
#stickZone { position: absolute; left: 0; top: 25%; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
#stickHint { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 22px); bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); font-size: 12px; font-weight: 700; opacity: 0.55; }
#stickBase { position: fixed; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.2); display: none; pointer-events: none; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); }
#btns { --W: clamp(240px, 60vmin, 370px); position: absolute; right: calc(env(safe-area-inset-right, 0px) + 10px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); width: var(--W); height: calc(var(--W) * 0.72); }
#gasCombo { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
#gasCombo div {
  position: absolute;
  border-radius: 50%;
  border: 3px solid #fff;
  color: #fff;
  font: 400 clamp(9px, 2.1vmin, 14px) 'Bungee', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  flex-direction: column;
  line-height: 1.1;
}
#gasCombo div.on { filter: brightness(1.3); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); }
#cGas { width: calc(var(--W) * 0.4); height: calc(var(--W) * 0.4); left: calc(var(--W) * 0.3); bottom: 0; background: radial-gradient(circle at 40% 35%, #7dff8a, #17a83a); z-index: 2; }
#cBoost { width: calc(var(--W) * 0.3); height: calc(var(--W) * 0.3); left: calc(var(--W) * 0.35); bottom: calc(var(--W) * 0.385); background: radial-gradient(circle at 40% 35%, #ffb04a, #e2470a 58%, transparent 59%), conic-gradient(#fdd023 calc(var(--b, 50) * 1%), rgba(0, 0, 0, 0.6) 0); z-index: 3; }
#cBrake { width: calc(var(--W) * 0.28); height: calc(var(--W) * 0.28); left: calc(var(--W) * 0.035); bottom: calc(var(--W) * 0.06); background: radial-gradient(circle at 40% 35%, #8a8a96, #3c3c46); z-index: 3; }
#cBrake.ebrake { background: #ffcc33; color: #2a1650; text-shadow: none; }
#cBrake small, #cHop small { font: 700 clamp(8px, 1.7vmin, 11px) 'Chakra Petch', sans-serif; opacity: 0.85; }
#cHop { width: calc(var(--W) * 0.28); height: calc(var(--W) * 0.28); left: calc(var(--W) * 0.685); bottom: calc(var(--W) * 0.06); background: radial-gradient(circle at 40% 35%, #6aa8ff, #1f4fb0); z-index: 3; }
.cLink { border: none !important; box-shadow: none !important; border-radius: 6px !important; z-index: 1 !important; }
#lBoost { left: calc(var(--W) * 0.455); bottom: calc(var(--W) * 0.36); width: calc(var(--W) * 0.09); height: calc(var(--W) * 0.07); background: linear-gradient(180deg, #e2470a, #17a83a); }
#lBrake { left: calc(var(--W) * 0.29); bottom: calc(var(--W) * 0.165); width: calc(var(--W) * 0.06); height: calc(var(--W) * 0.07); background: linear-gradient(90deg, #3c3c46, #17a83a); }
#lHop { left: calc(var(--W) * 0.65); bottom: calc(var(--W) * 0.165); width: calc(var(--W) * 0.06); height: calc(var(--W) * 0.07); background: linear-gradient(90deg, #17a83a, #1f4fb0); }

/* ---- menus */
#screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55));
  overflow: auto;
}
.panel {
  background: var(--panel);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
  padding: clamp(16px, 4vmin, 30px);
  max-width: 620px;
  width: 100%;
  line-height: 1.5;
  font-size: clamp(13px, 2.6vmin, 16px);
  margin: auto;
}
.center { text-align: center; }
h1 {
  font-family: 'Bungee', 'Impact', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 10vmin, 66px);
  margin: 0;
  line-height: 0.95;
  color: var(--gold);
  text-shadow: 3px 3px 0 #4b2e83, 7px 7px 0 rgba(0, 0, 0, 0.7);
  font-style: italic;
  transform: skewX(-6deg);
}
h1 em { display: block; font-style: inherit; color: var(--hot); font-size: 0.6em; }
h2 { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: clamp(20px, 6vmin, 36px); margin: 4px 0 10px; color: var(--gold); text-shadow: 3px 3px 0 #4b2e83; font-style: italic; }
h3 { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: clamp(12px, 3vmin, 16px); margin: 18px 0 8px; color: var(--cyan); }
.tag { margin: 10px 0 4px; color: #e9dcc6; }
.hint { opacity: 0.72; font-size: 0.88em; margin: 14px 0 0; }
.btn {
  font: 400 clamp(12px, 2.6vmin, 15px) 'Bungee', sans-serif;
  color: #fff;
  background: linear-gradient(180deg, #6a46b8, #3b1f73);
  border: 2px solid #fdd023;
  border-radius: 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.6);
  padding: 11px 16px;
  margin: 6px;
  cursor: pointer;
  min-height: 46px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn.alt { background: #241a38; border-color: #fff; }
.row { display: flex; flex-wrap: wrap; justify-content: center; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.choice { margin: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #2c2620; padding: 10px 12px; gap: 3px; }
.choice.sel { background: linear-gradient(180deg, #fdd023, #c99a10); color: #2a1650; outline: 3px solid #fff; outline-offset: 1px; }
.choice .d { font-family: 'Chakra Petch', sans-serif; font-weight: 500; font-size: 0.82em; opacity: 0.9; line-height: 1.25; }
@media (max-width: 420px) { .choices { grid-template-columns: 1fr; } }
/* Narrow screens: give the top buttons their own row under the HUD text. */
@media (max-width: 620px) {
  .topBtns { top: calc(env(safe-area-inset-top, 0px) + 96px); }
  .hud-l { max-width: 58%; }
}
@media (prefers-reduced-motion: reduce) { #msg { transition: none; } }