@font-face {
  font-family: 'Anton';
  src: url('./fonts/Anton-Regular.ttf') format('truetype');
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  height: 100%;
  overflow: hidden;
  font-family: 'Anton', sans-serif;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
}

#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden; /* edge HUD elements/labels must never grow the page */
}

/* Projected actor labels — positioned via translate3d by labels.js.
   The translate(-50%,-100%) in here centres them above the anchor point. */
.label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -100%);
  color: #cfd6e4;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: pre-line; /* fat-target labels carry a second $ line (02-05) */
  text-align: center;
  will-change: transform;
}

.label.me {
  color: #35d0a0; /* accent */
}

.label.bot {
  font-size: 11px; /* slightly smaller than a player's name */
  opacity: 0.72;   /* and dimmer — bots are tellable at a glance (03-03) */
}

.label.cop {
  color: #ff5566; /* police red — readable as threat at a glance (03-04) */
  font-size: 11px;
  letter-spacing: 0.18em;
}

.label.site {
  color: #b98cff; /* vault violet — matches the ready ring */
  font-size: 12px;
  letter-spacing: 0.14em;
  opacity: 0.9;
}

/* Centre-screen contextual hint (03-01): HOLD TO CRACK inside a ready ring. */
#hint {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  color: #ffd94d;
  font-size: 18px;
  letter-spacing: 0.18em;
  background: rgba(10, 10, 18, 0.7);
  border: 1px solid rgba(255, 217, 77, 0.35);
  border-radius: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

#banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  color: #e8ecf4;
  background: rgba(10, 10, 18, 0.82);
  border: 1px solid #2a3040;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.05em;
}

#debug {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 8px;
  color: #8f8;
  background: rgba(0, 0, 0, 0.6);
  font: 12px monospace;
  white-space: pre;
}

/* Master volume pill (07-02) — top-right, out of the pad arrow's way. */
#volbtn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  color: #8fa0b8;
  background: rgba(10, 10, 18, 0.82);
  border: 1px solid #2a3040;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
#volbtn:hover { color: #e8ecf4; border-color: #35d0a0; }

/* ------------------------------------------------- run HUD (02-05) ------ */

#timer {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  color: #e8ecf4;
  font-size: 34px;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

#timer.sudden {
  color: #ff5040;
  animation: sudden-pulse 0.5s infinite;
}

@keyframes sudden-pulse {
  50% { transform: translateX(-50%) scale(1.12); }
}

#runhud {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  color: #e8ecf4;
  background: rgba(10, 10, 18, 0.72);
  border: 1px solid #2a3040;
  border-radius: 4px;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

#carry { color: #ffd94d; }
#mult  { color: #66d9ff; }
#banked { color: #35d0a0; }
#heat  { color: #ff7040; min-height: 1em; }

/* Dash cooldown ring (03-02): conic fill beside the carry readout —
   full cyan = dash ready. */
#dashring {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 2px 0 4px;
  background: conic-gradient(#35d0e0 360deg, rgba(255, 255, 255, 0.10) 0deg);
}
#dashring.ready {
  box-shadow: 0 0 6px rgba(53, 208, 224, 0.8);
}
#dashring-in {
  width: 12px;
  height: 12px;
  margin: 4px;
  border-radius: 50%;
  background: #14161d;
}

/* Screen-edge compass arrow — clip-path triangle pointing UP at rotate(0);
   hud.js adds the +π/2 offset so rotate(a) tracks the screen-space angle. */
#padarrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 30px;
  background: #35d0a0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

#bankflash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(53, 208, 160, 0) 55%, rgba(53, 208, 160, 0.4) 100%);
}

#bankflash.on { animation: bankflash 0.55s ease-out; }

@keyframes bankflash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Red edge flash when the local player is tackled (03-02). */
#hitflash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 64, 64, 0) 50%, rgba(255, 64, 64, 0.45) 100%);
}

#hitflash.on { animation: hitflash 0.45s ease-out; }

@keyframes hitflash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* BUSTED banner — the exact loss, centre screen (03-04). */
#bustflash {
  position: absolute;
  top: 22%;
  left: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  font-family: 'Anton', sans-serif;
  font-size: 44px;
  letter-spacing: 0.08em;
  color: #ff5566;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

#bustflash.on { animation: bustflash 1.4s ease-out; }

@keyframes bustflash {
  0% { opacity: 0; transform: scale(1.25); }
  12% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Danger vignette — opacity is driven per frame by cop proximity (03-04). */
#danger {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 47, 69, 0) 55%, rgba(255, 47, 69, 0.5) 100%);
  transition: opacity 0.18s linear;
}

/* Corner minimap (03-05) — bottom-right, clear of the run HUD (top-left),
   the round strip area (top), the hint (bottom-centre) and debug (bottom-left). */
#minimap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 160px;
  height: 160px;
  background: transparent; /* the canvas paints its own backdrop — see below */
  border: 1px solid #2a3040;
  border-radius: 6px;
  /* NOT element opacity. The panel should sit in the scene rather than on top of
     it (the project lead's call), but `opacity` here fades the arrow, pads and
     sites along with the backdrop — dimming the one thing you have to find at a
     glance. The canvas draws its BACKDROP at CONFIG.minimap.baseAlpha and every
     marker at full strength, so the city shows faintly through the map while
     you stay crisp on it. */
  opacity: 1;
}

@media (max-width: 600px) {
  #minimap { width: 120px; height: 120px; }
}

/* ------------------------------------------------- round strip (04-03) --
   One line under the run timer. Layout is pinned: banner top:12 center,
   runhud top:12 left, timer top:44 center (~51px + pulse), minimap
   bottom-right — the strip owns the free band at top:104. */
#roundstrip {
  position: absolute;
  top: 104px; /* timer box ends ~95px; the sudden pulse adds ~3px */
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  color: #cfd6e4;
  background: rgba(10, 10, 18, 0.72);
  border: 1px solid #2a3040;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 600px) {
  #roundstrip {
    font-size: 11px;
    padding: 4px 8px;
    max-width: 96vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------- leaderboard (04-03) --
   Translucent card like the title: the arena stays alive behind it. */
#lb {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 45;
}
#lb .lb-card {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: min(480px, 94vw);
  max-height: 80vh;
  padding: 20px 22px 16px;
  background: rgba(8, 12, 24, 0.9);
  border: 1px solid rgba(64, 200, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(0, 170, 255, 0.18);
  color: #e8ecf4;
  font-size: 13px;
  letter-spacing: 0.04em;
}
#lb .lb-head { display: flex; align-items: center; justify-content: space-between; }
#lb .lb-title {
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  color: #7fd4ff;
  text-shadow: 0 0 12px rgba(64, 200, 255, 0.5);
}
#lb .lb-close {
  background: none; border: none; color: #8a93a8;
  font-size: 22px; cursor: pointer; padding: 0 4px;
}
#lb .lb-close:hover { color: #e8ecf4; }
#lb .lb-tabs { display: flex; gap: 6px; margin: 12px 0 10px; }
#lb .lb-tabs button {
  flex: 1;
  padding: 6px 0;
  background: rgba(20, 28, 44, 0.6);
  border: 1px solid #2a3040;
  border-radius: 4px;
  color: #8a93a8;
  font: inherit;
  letter-spacing: 0.08em;
  cursor: pointer;
}
#lb .lb-tabs button.on {
  color: #ffd76a;
  border-color: rgba(255, 200, 60, 0.5);
  background: rgba(50, 38, 10, 0.55);
}
#lb .lb-body { overflow-y: auto; min-height: 120px; }
#lb .lb-sub { color: #9fb3d8; padding: 4px 0; }
#lb .lb-sec {
  margin-top: 12px; padding: 4px 0;
  color: #7fd4ff; border-bottom: 1px solid #2a3040;
}
#lb .lb-empty { color: #8a93a8; padding: 14px 0; text-align: center; }
#lb .lb-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 3px 0;
}
#lb .lb-rank { color: #ffd76a; min-width: 30px; }
#lb .lb-alias { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lb .lb-wallet { color: #8a93a8; font-size: 11px; }
#lb .lb-score { color: #7fe08a; }
#lb .lb-prize { color: #ffd76a; }
#lb .lb-payout { padding: 0 0 6px 40px; color: #8a93a8; font-size: 11px; }
#lb .lb-payout a { color: #7fd4ff; }
#lb .lb-foot { color: #8a93a8; font-size: 11px; min-height: 16px; padding-top: 8px; }
#lb .lb-rules { display: block; text-align: center; margin-top: 10px; color: #7fd4ff; font-size: 12px; text-decoration: none; }
#lb .lb-rules:hover { text-decoration: underline; }

/* ------------------------------------------------- 04-04: round end --
   BANK NOW flashes during the intermission window while a run is still
   live; the intermission card is the closed-round winner board. */
#banknow {
  position: absolute;
  top: 150px; /* below the round strip, above gameplay focus */
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 22px;
  color: #0a0a12;
  background: #ff4455;
  border-radius: 4px;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.08em;
  animation: banknowpulse 0.6s infinite alternate;
  /* display is inline-controlled by intermission.js — a stylesheet
     display:none here would win over style.display='' forever */
}
@keyframes banknowpulse {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

#intermission {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 15, 0.72);
  pointer-events: none;
  z-index: 46; /* above the leaderboard card */
}
#intermission .im-card {
  pointer-events: auto;
  min-width: 320px;
  max-width: 560px;
  padding: 26px 34px;
  color: #e8ecf4;
  background: rgba(10, 10, 18, 0.94);
  border: 1px solid rgba(64, 200, 255, 0.35);
  border-radius: 10px;
  text-align: center;
  letter-spacing: 0.05em;
}
#intermission .im-title { font-size: 22px; letter-spacing: 0.12em; color: #ffd76a; }
#intermission .im-sub { margin-top: 8px; font-size: 13px; color: #8b93a7; }
#intermission .im-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 6px 12px; margin-top: 6px; font-size: 14px;
  background: rgba(28, 34, 52, 0.6); border-radius: 4px;
}
#intermission .im-row.top { border: 1px solid rgba(255, 215, 106, 0.3); }
#intermission .im-rank { color: #8a93a8; }
#intermission .im-alias { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
#intermission .im-wallet { color: #8a93a8; font-size: 11px; }
#intermission .im-score { color: #7fe08a; }
#intermission .im-prize { color: #ffd76a; }
#intermission .im-mine { margin-top: 12px; font-size: 13px; color: #ffb84d; }
#intermission .im-play {
  margin-top: 14px; padding: 8px 24px; font-family: inherit; font-size: 15px;
  letter-spacing: 0.08em; color: #0a0a12; background: #35d0a0;
  border: none; border-radius: 4px; cursor: pointer;
}
#intermission .im-play:hover:not(:disabled) { background: #4be0b0; }
#intermission .im-play:disabled { opacity: 0.45; cursor: default; }
#intermission .im-foot { margin-top: 12px; font-size: 13px; color: #8b93a7; }
#intermission .im-rules {
  display: inline-block; margin-top: 10px; color: #7fd4ff;
  font-size: 12px; text-decoration: none;
}
#intermission .im-rules:hover { text-decoration: underline; }

/* -------------------------------------------------------------- title --
   04-01: translucent neon card over the live arena (the spectator socket
   renders behind it). Pointer events only on the card — the arena stays
   alive underneath. */
#title {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 40;
}
#title .t-card {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px 44px 30px;
  background: rgba(8, 12, 24, 0.82);
  border: 1px solid rgba(64, 200, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(0, 170, 255, 0.18), inset 0 0 60px rgba(0, 60, 120, 0.15);
  backdrop-filter: blur(3px);
}
#title .t-name {
  font-family: 'Anton', sans-serif;
  font-size: 46px;
  letter-spacing: 3px;
  color: #ffd23c;
  text-shadow: 0 0 18px rgba(255, 190, 40, 0.45), 0 2px 0 #6b4a00;
  white-space: nowrap;
}
#title .t-tag {
  font-size: 13px;
  color: #9fb4d0;
  letter-spacing: 0.5px;
  margin-top: -6px;
}
#title .t-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#title .t-who {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: #5ce8c8;
  text-shadow: 0 0 12px rgba(92, 232, 200, 0.4);
}
#title .t-addr {
  font-size: 12px;
  color: #7f93ad;
  font-family: monospace;
  letter-spacing: 1px;
}
#title .t-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}
#title .t-btn {
  font-family: 'Anton', sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  padding: 11px 22px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(64, 200, 255, 0.5);
  background: rgba(16, 32, 56, 0.9);
  color: #d8ecff;
  text-shadow: 0 0 8px rgba(120, 210, 255, 0.35);
  transition: background 0.12s, box-shadow 0.12s;
}
#title .t-btn:hover { background: rgba(28, 56, 92, 0.95); box-shadow: 0 0 16px rgba(64, 200, 255, 0.3); }
#title .t-btn.primary {
  border-color: rgba(255, 200, 60, 0.65);
  color: #ffd23c;
  text-shadow: 0 0 10px rgba(255, 200, 60, 0.4);
}
#title .t-btn.primary:hover { background: rgba(70, 52, 12, 0.9); box-shadow: 0 0 16px rgba(255, 200, 60, 0.3); }
#title .t-btn.dim {
  border-color: rgba(120, 140, 170, 0.35);
  color: #9fb4d0;
  font-size: 14px;
  text-shadow: none;
}
#title .t-err {
  font-size: 12px;
  color: #ff8d7a;
  max-width: 300px;
  text-align: center;
}
#title .t-pitch {
  font-size: 13px;
  color: #ffb84d;
  max-width: 320px;
  text-align: center;
  min-height: 16px;
}
#title .t-rules {
  font-size: 12px;
  color: #7fd4ff;
  text-decoration: none;
}
#title .t-rules:hover { text-decoration: underline; }
@media (max-width: 600px) {
  #title .t-card { padding: 24px 22px 20px; }
  #title .t-name { font-size: 30px; letter-spacing: 2px; }
}

/* --------------------------------------------- results screen (02-05) --- */

#results {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 15, 0.55);
}

.r-card {
  min-width: 260px;
  padding: 26px 34px;
  color: #e8ecf4;
  background: rgba(10, 10, 18, 0.92);
  border: 1px solid #2a3040;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.06em;
}

.r-title {
  font-size: 30px;
  margin-bottom: 14px;
}

.r-row {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  font-size: 15px;
  line-height: 1.9;
}

.r-row span { color: #8b93a7; }
.r-row b { color: #ffd94d; }

#r-again {
  margin-top: 18px;
  padding: 10px 30px;
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #0a0a12;
  background: #35d0a0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto; /* #ui is pointer-events:none */
}

#r-again:hover { background: #4be0b0; }

.r-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #8b93a7;
}

.r-pitch {
  margin-top: 10px;
  font-size: 13px;
  color: #ffb84d;
}

#r-claim {
  margin-top: 10px;
  padding: 7px 20px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #e8ecf4;
  background: transparent;
  border: 1px solid rgba(64, 200, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
}
#r-claim:hover { background: rgba(28, 56, 92, 0.9); }