:root {
  --amber: #f2a33c;
  --ink: #14110c;
  --haze: #cfa77b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; background: var(--ink); }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#hud {
  position: fixed; inset: 0; pointer-events: none;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  color: var(--amber);
}

#minimap {
  position: absolute; left: 18px; bottom: 18px;
  border: 3px solid rgba(20, 17, 12, .85);
  border-radius: 6px;
  background: rgba(20, 17, 12, .55);
}

#speed {
  position: absolute; right: 22px; bottom: 18px;
  font-size: 54px; letter-spacing: 2px;
  text-shadow: 3px 3px 0 var(--ink);
  display: none;
}
#speed .unit { font-size: 22px; margin-left: 6px; opacity: .85; }

#hint {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);
  font-size: 26px; letter-spacing: 3px; text-transform: uppercase;
  color: #f5e9d0; text-shadow: 2px 2px 0 var(--ink);
  opacity: 0; transition: opacity .15s;
}
#hint.on { opacity: 1; }

#toast {
  position: absolute; right: 24px; bottom: 96px;
  font-size: 44px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--amber); text-shadow: 3px 3px 0 var(--ink);
  opacity: 0; transition: opacity .4s;
}
#toast.on { opacity: 1; }

#start {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2a2019 0%, #14110c 70%);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
#start.hidden { display: none; }

#start .panel { text-align: center; color: #f5e9d0; padding: 24px; }

#start h1 {
  font-size: clamp(56px, 10vw, 110px);
  letter-spacing: 6px; text-transform: uppercase;
  color: var(--amber); text-shadow: 5px 5px 0 #000;
}

#start .tag {
  font-family: Georgia, serif; font-style: italic; font-size: 17px;
  color: var(--haze); margin: 10px 0 26px;
}

#start .controls {
  list-style: none; font-size: 20px; letter-spacing: 2px; line-height: 1.9;
  margin-bottom: 30px;
}
#start .controls b { color: var(--amber); margin-right: 10px; }

#play {
  font: inherit; font-size: 26px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--ink); background: var(--amber);
  border: none; padding: 12px 46px; cursor: pointer;
  box-shadow: 4px 4px 0 #000;
}
#play:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
#play:focus-visible { outline: 3px solid #f5e9d0; outline-offset: 3px; }

#stars {
  position: absolute; right: 22px; top: 16px;
  font-size: 34px; letter-spacing: 6px;
  color: rgba(245, 233, 208, .35); text-shadow: 2px 2px 0 var(--ink);
}
#stars.hot { color: var(--amber); }

#health {
  position: absolute; right: 22px; top: 62px;
  width: 150px; height: 12px;
  background: rgba(20, 17, 12, .6);
  border: 2px solid rgba(20, 17, 12, .85);
}
#health-fill { height: 100%; width: 100%; background: #7fae5a; }

#weapon {
  position: absolute; right: 22px; top: 84px;
  font-size: 22px; letter-spacing: 3px; text-transform: uppercase;
  color: #f5e9d0; text-shadow: 2px 2px 0 var(--ink);
}

#crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; transform: translate(-50%, -50%);
  display: none;
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: #f5e9d0;
  box-shadow: 0 0 2px var(--ink);
}
#crosshair::before { left: 7px; top: 0; width: 2px; height: 16px; }
#crosshair::after { left: 0; top: 7px; width: 16px; height: 2px; }

#overlay {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-size: clamp(60px, 12vw, 130px); letter-spacing: 10px; text-transform: uppercase;
  color: #c9483a; text-shadow: 6px 6px 0 #000;
  opacity: 0; transition: opacity .5s;
}
#overlay.on { opacity: 1; }

#cash {
  position: absolute; top: 14px; right: 18px;
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 30px; color: #7ec97e;
  text-shadow: 2px 2px 0 #142014;
  letter-spacing: 1px;
}
#mission {
  position: absolute; top: 50px; right: 18px;
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 22px; color: #f2a33c;
  text-shadow: 2px 2px 0 #201a08;
}