:root{
  --asphalt:#0c0d10;
  --panel:rgba(16,18,22,0.88);
  --panel-border:rgba(255,167,51,0.25);
  --amber:#ffa733;
  --amber-dim:#8a5a24;
  --police-red:#ff3b30;
  --police-blue:#2f6fff;
  --steel:#9aa4b3;
  --steel-dim:#454c56;
  --warn-yellow:#ffd23f;
  --good:#3ddc84;
  --text:#eef1f5;
  --font-display:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Code',Consolas,'Roboto Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--text);font-family:var(--font-display);user-select:none;-webkit-user-select:none;}
#canvas-container{position:fixed;inset:0;}
#canvas-container canvas{display:block;outline:none;}

button{font-family:var(--font-display);cursor:pointer;}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;display:none;}
.hud-corner{position:absolute;padding:18px 24px;background:rgba(12,14,18,0.90);border:1px solid var(--panel-border);backdrop-filter:blur(6px);}
#wanted-panel{top:16px;left:16px;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));}
#difficulty-label{font-size:1.15rem;font-weight:900;letter-spacing:0.18em;margin-bottom:8px;text-transform:uppercase;text-shadow:0 0 10px currentColor;}
.diff-easy{color:#4ade80;}
.diff-normal{color:#a3e635;}
.diff-hard{color:#fb923c;}
.diff-nightmare{color:#f87171;}
.diff-insanity{color:#991b1b;}
#wanted-label{font-size:.9rem;letter-spacing:.16em;color:var(--steel);margin-bottom:10px;font-weight:850;}
#wanted-badges{display:flex;gap:10px;}
.wanted-badge{width:31px;height:31px;background:var(--steel-dim);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transition:background .2s,box-shadow .2s;}
.wanted-badge.lit{background:var(--police-red);box-shadow:0 0 12px var(--police-red);}
#evade-status {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--good);
  min-height: 28px;
  transform: skewX(-8deg);
  animation: evadePulse 1.4s infinite alternate;
}
@keyframes evadePulse {
  0% { filter: drop-shadow(0 0 2px currentColor) brightness(0.9); }
  100% { filter: drop-shadow(0 0 10px currentColor) brightness(1.25); }
}

#race-panel{top:14px;right:14px;text-align:right;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);}
#lap-info,#pos-info{font-family:var(--font-mono);font-size:1.12rem;letter-spacing:.08em;font-weight:800;}
#pos-info{color:var(--steel);margin-top:4px;}

#hud-score-wrap, #hud-coins-wrap {
  font-family: var(--font-mono);
  font-size: 1.14rem;
  font-weight: 800;
  margin-top: 5px;
  letter-spacing: 0.05em;
}
#active-multipliers-container {
  position: fixed;
  top: 136px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 99;
}
.skill-line-screen.flashing {
  animation: badgeFlash 0.3s infinite alternate;
}
@keyframes badgeFlash {
  from { opacity: 0.35; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1.02); }
}
.skill-line-screen {
  display: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  min-width: 220px;
  max-width: 340px;
  padding: 7px 13px;
  background: rgba(9, 12, 17, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--steel);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.skill-line-screen.active {
  display: block;
  opacity: 1;
  transform: scale(1);
}
#clean-info.skill-line-screen.active {
  color: var(--good);
  border-color: rgba(61, 220, 132, 0.45);
  text-shadow: 0 0 10px rgba(61, 220, 132, 0.5);
  box-shadow: 0 0 15px rgba(61, 220, 132, 0.15);
}
#skill-info.skill-line-screen.active {
  color: var(--amber);
  border-color: rgba(255, 167, 51, 0.45);
  text-shadow: 0 0 10px rgba(255, 167, 51, 0.5);
  box-shadow: 0 0 15px rgba(255, 167, 51, 0.15);
}
#hud-score-wrap {
  color: var(--text);
}
#hud-coins-wrap {
  color: var(--warn-yellow);
  text-shadow: 0 0 8px rgba(255, 210, 63, 0.4);
}

#minimap-wrap{position:absolute;bottom:18px;left:18px;width:170px;height:170px;border-radius:50%;overflow:hidden;border:2px solid var(--amber-dim);box-shadow:0 0 22px rgba(255,167,51,0.2),inset 0 0 24px rgba(0,0,0,0.7);background:#05070a;}
#minimap{position:absolute;inset:0;width:100%;height:100%;}
#minimap-sweep{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(255,167,51,0.4),transparent 22%);animation:sweep 3.2s linear infinite;mix-blend-mode:screen;}
#minimap-ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,167,51,0.15);}
@keyframes sweep{to{transform:rotate(360deg);}}

#speedo{position:absolute;bottom:10px;right:14px;width:190px;text-align:center;}
#speedo svg{width:100%;overflow:visible;}
#speed-readout{margin-top:-38px;font-family:var(--font-mono);font-weight:700;}
#speed-value{font-size:2.6rem;color:var(--amber);text-shadow:0 0 16px rgba(255,167,51,0.55);}
#speed-value.brk{color:var(--police-red);text-shadow:0 0 16px rgba(255,59,48,0.6);}
.unit{font-size:.8rem;color:var(--steel);letter-spacing:.1em;margin-left:4px;}

#quick-actions{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto;}
#quick-actions button{background:var(--panel);border:1px solid var(--panel-border);color:var(--text);font-size:.68rem;letter-spacing:.05em;padding:7px 11px;font-weight:600;}
#quick-actions button:hover{border-color:var(--amber);color:var(--amber);}
#quick-actions button.active{color:var(--police-red);border-color:var(--police-red);}

#damage-warning{position:absolute;top:62px;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:.86rem;letter-spacing:.08em;color:var(--police-red);text-shadow:0 0 8px rgba(255,59,48,0.6);opacity:0;transition:opacity .3s;font-weight:850;text-transform:uppercase;}
#damage-warning.show{opacity:1;}
#vehicle-health{position:absolute;top:84px;left:50%;transform:translateX(-50%);width:260px;background:var(--panel);border:1px solid var(--panel-border);padding:8px 10px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;opacity:.95;}
.meter-row{display:flex;align-items:center;gap:8px;margin-top:5px;}
.meter-label{width:76px;color:var(--steel);}
.meter-track{height:7px;flex:1;background:rgba(255,255,255,0.08);overflow:hidden;}
.meter-fill{height:100%;width:100%;background:var(--good);transition:width .16s,background .16s;}
#repair-fill{width:0;background:var(--amber);}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;background:radial-gradient(ellipse at center,rgba(12,13,16,0.75),rgba(6,7,9,0.94));}
.hidden{display:none !important;}
#menu-screen{
  justify-content:stretch;align-items:stretch;background:transparent;pointer-events:none;
  padding:0;display:flex;
}
#menu-screen.hidden{display:none !important;}
#garage-sidebar,#garage-run,#garage-upgrades{pointer-events:auto;}
#garage-sidebar{
  position:fixed;top:0;left:0;bottom:0;width:522px;z-index:22;
  background:rgba(12,14,18,0.90);border-right:1px solid var(--panel-border);
  backdrop-filter:blur(10px);padding:20px 18px;display:flex;flex-direction:column;
  box-shadow:8px 0 28px rgba(0,0,0,0.36);
}
#garage-sidebar h1{font-size:1.5rem;margin:0 0 6px;font-weight:800;letter-spacing:.03em;}
#garage-sidebar .subtitle{font-size:1.05rem;margin:0 0 10px;color:var(--steel);}
.garage-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px;}
.wallet-chip{
  font-family:var(--font-mono);font-size:1.0rem;font-weight:700;color:var(--warn-yellow);
  background:rgba(255,210,63,0.08);border:1px solid var(--panel-border);padding:6px 10px;border-radius:4px;
  white-space:nowrap;flex-shrink:0;
}
.wallet-chip span{opacity:.55;margin-right:4px;}
#garage-car-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px;min-height:0;}
#garage-car-list::-webkit-scrollbar{width:6px;}
#garage-car-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px;}
.g-car-btn{
  text-align:left;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  color:var(--text);padding:12px 14px;cursor:pointer;border-radius:4px;
  transition:border-color .15s,background .15s,box-shadow .15s;font:inherit;
}
.g-car-btn:hover{border-color:var(--steel);background:rgba(255,255,255,0.05);}
.g-car-btn.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 0 18px rgba(255,167,51,0.15);background:rgba(255,167,51,0.06);}
.g-car-btn.locked{opacity:.72;}
.g-car-name{font-weight:750;font-size:1.15rem;margin-bottom:2px;}
.g-car-meta{font-family:var(--font-mono);font-size:0.9rem;color:var(--steel);letter-spacing:.08em;text-transform:uppercase;}
.g-swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle;border:1px solid rgba(255,255,255,0.2);}
.g-lock{color:var(--police-red);font-family:var(--font-mono);font-size:0.8rem;margin-left:4px;}

#garage-upgrades{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:22;
  width:min(680px,calc(100vw - 1042px));min-width:280px;
  background:rgba(12,14,18,0.90);border:1px solid var(--panel-border);
  backdrop-filter:blur(10px);padding:16px 20px;border-radius:4px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
}
.g-up-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}.g-up-head b{display:block;font-size:1.3rem;font-weight:800;}
.g-up-head span{display:block;font-family:var(--font-mono);font-size:.88rem;color:var(--steel);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;}
.g-up-stats{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.g-up-stats span{font-family:var(--font-mono);font-size:.88rem;color:var(--amber);background:rgba(255,167,51,0.08);border:1px solid rgba(255,167,51,0.2);padding:3px 6px;letter-spacing:.06em;}
.g-up-title{font-family:var(--font-mono);font-size:.95rem;color:var(--amber);letter-spacing:.14em;margin-bottom:8px;font-weight:700;}
.g-up-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px;}
.g-up-left {
  flex: 1;
}
.g-up-left span{display:block;font-family:var(--font-mono);font-size:.86rem;color:var(--steel);letter-spacing:.06em;}
.g-progress-bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.g-progress-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 4px;
  transition: width 0.2s ease;
  box-shadow: 0 0 8px var(--amber);
}
.g-up-columns {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}
.g-up-col-left {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-right: 20px;
}
.g-up-col-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.g-colors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.g-color-swatch {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  padding: 0;
}
.g-color-swatch:hover {
  transform: scale(1.15);
  border-color: var(--amber);
  box-shadow: 0 0 10px rgba(255, 167, 51, 0.4);
}
.g-color-swatch.applied {
  border: 2px solid var(--text);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  transform: scale(1.08);
}
.g-color-swatch.locked {
  opacity: 0.82;
}
.g-color-swatch .g-check-icon {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.8);
  pointer-events: none;
}
.g-color-swatch .g-lock-icon {
  font-style: normal;
  font-size: 0.52rem;
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(12, 14, 18, 0.85);
  border-radius: 50%;
  padding: 2px;
  display: block;
  pointer-events: none;
}
.g-colors-info {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--steel);
  line-height: 1.4;
  margin-top: 8px;
}
.g-colors-info b {
  color: var(--text);
}
.g-up-btn{border:none;padding:8px 16px;font-family:var(--font-mono);font-size:1.0rem;font-weight:700;background:var(--amber);color:#1a1206;cursor:pointer;}
.g-up-btn.disabled,.g-up-btn:disabled{background:var(--steel-dim);color:var(--steel);cursor:not-allowed;}
.g-max{color:var(--good);font-family:var(--font-mono);font-size:1.0rem;font-weight:700;}
.g-locked-banner{text-align:center;color:var(--police-red);background:rgba(255,59,48,0.08);border:1px solid rgba(255,59,48,0.3);padding:14px;font-family:var(--font-mono);font-size:1.1rem;font-weight:700;letter-spacing:.08em;}

#garage-run{
  position:fixed;top:0;right:0;bottom:0;width:480px;z-index:22;
  background:rgba(12,14,18,0.90);border-left:1px solid var(--panel-border);
  backdrop-filter:blur(10px);padding:20px 18px;display:flex;flex-direction:column;
  box-shadow:-8px 0 28px rgba(0,0,0,0.36);overflow-y:auto;
}
#garage-run .big-btn{margin-top:auto;}
#garage-run .big-btn.unlock{background:var(--good);color:#05070a;box-shadow:0 8px 24px rgba(61,220,132,0.25);}
#garage-run .big-btn.need{background:var(--steel-dim);color:var(--steel);box-shadow:none;}
#garage-run .controls-hint{margin-top:12px;padding-top:12px;}
#map-options{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:8px;}
.map-card{background:rgba(255,255,255,0.03);border:1px solid var(--panel-border);padding:12px 14px;text-align:left;cursor:pointer;color:var(--text);font:inherit;border-radius:4px;}
.map-card:hover{border-color:var(--steel);}
.map-card.selected{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber);}
#difficulty-options{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px;}
.diff-card{background:rgba(255,255,255,0.03);border:1px solid var(--panel-border);padding:12px 14px;text-align:left;cursor:pointer;color:var(--text);font:inherit;border-radius:4px;}
.diff-card:hover{border-color:var(--steel);}
.diff-card.selected{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber);}
.diff-card[data-diff="hard"].selected{border-color:var(--warn-yellow);box-shadow:0 0 0 1px var(--warn-yellow);}
.diff-card[data-diff="nightmare"].selected{border-color:var(--police-red);box-shadow:0 0 0 1px var(--police-red);}
.diff-card[data-diff="insanity"].selected{border-color:#ff0055;box-shadow:0 0 0 1px #ff0055;}

#countdown-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:25;pointer-events:none;}
#countdown-text{font-family:var(--font-display);font-size:7.5rem;font-weight:950;letter-spacing:.04em;color:#fff;text-transform:uppercase;transform:skewX(-12deg);text-shadow:0 0 16px var(--amber),0 0 35px var(--amber),0 12px 24px rgba(0,0,0,0.9);animation:countdownScale 1s ease-out infinite;}
@keyframes countdownScale {
  0% { transform: skewX(-12deg) scale(0.92); opacity: 0.85; }
  100% { transform: skewX(-12deg) scale(1.08); opacity: 1; }
}

.menu-panel{background:var(--panel);border:1px solid var(--panel-border);padding:34px 38px;max-width:560px;width:92%;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.eyebrow{font-family:var(--font-mono);font-size:.95rem;letter-spacing:.22em;color:var(--amber);margin:0 0 6px;font-weight:700;}
h1{font-size:2.1rem;letter-spacing:.03em;margin:0 0 4px;font-weight:800;}
.subtitle{color:var(--steel);font-size:1.05rem;margin:0 0 22px;}
h2{font-size:1.5rem;margin:0 0 18px;letter-spacing:.03em;}

.garage-title{font-family:var(--font-mono);font-size:1.1rem;color:var(--amber);letter-spacing:.14em;margin:14px 0 8px;font-weight:700;}
.map-name{font-weight:800;font-size:1.15rem;margin-bottom:4px;}
.map-desc{font-family:var(--font-mono);font-size:.9rem;color:var(--steel);line-height:1.35;}
.diff-name{font-weight:800;font-size:1.15rem;margin-bottom:3px;letter-spacing:.04em;text-transform:uppercase;}
.diff-desc{font-family:var(--font-mono);font-size:.88rem;color:var(--steel);line-height:1.35;}

.big-btn{width:100%;background:var(--amber);color:#1a1206;border:none;padding:16px;font-size:1.15rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 24px rgba(255,167,51,0.25);}
.big-btn:hover{background:#ffb95c;}
.ghost-btn{width:100%;background:transparent;color:var(--text);border:1px solid var(--panel-border);padding:14px;font-size:1.05rem;letter-spacing:.05em;margin-top:10px;}
.ghost-btn:hover{border-color:var(--amber);color:var(--amber);}

.controls-hint{margin-top:20px;padding-top:16px;border-top:1px solid var(--panel-border);font-family:var(--font-mono);font-size:0.95rem;color:var(--steel);line-height:1.9;}
.controls-hint b{color:var(--text);}
.controls-hint .key{display:inline-block;background:rgba(255,255,255,0.07);border:1px solid var(--panel-border);border-radius:3px;padding:0 6px;color:var(--amber);font-weight:700;margin-right:4px;}

#result-title{color:var(--amber);}

/* ---------- Score Popup & Stats Layout ---------- */
#score-popup {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(-12deg) scale(0.72);
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 950;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 0 16px var(--amber), 0 0 35px var(--amber), 0 4px 15px rgba(0,0,0,0.85);
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  text-transform: uppercase;
}
#achievement-popup {
  position: fixed;
  top: 142px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  max-width: 340px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 167, 51, 0.42);
  background: rgba(9, 12, 17, 0.78);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 167, 51, 0.34);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 99;
  opacity: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 24px;
}
.stat-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--panel-border);
  padding: 12px 14px;
  text-align: center;
}
.stat-card span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--steel);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.stat-card b {
  font-size: 1.2rem;
  color: var(--text);
}
.stat-card.highlight b {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 167, 51, 0.4);
}
.stat-card.coins b {
  color: var(--warn-yellow);
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.4);
}

.car-card.card-locked {
  opacity: 0.76;
  background: rgba(12, 14, 18, 0.55);
  border-color: rgba(255, 59, 48, 0.16);
}
.car-card.card-locked:hover {
  border-color: rgba(255, 59, 48, 0.45);
}
.car-card.card-locked.selected {
  border-color: var(--police-red);
  box-shadow: 0 0 0 1px var(--police-red), 0 0 18px rgba(255, 59, 48, 0.22);
}

/* ---------- Volume Slider Styling ---------- */
.volume-slider-container {
  margin-top: 10px;
  margin-bottom: 10px;
}
.volume-slider-container input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
}
.volume-slider-container input[type="range"]:focus {
  outline: none;
}
.volume-slider-container input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: var(--steel-dim);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.volume-slider-container input[type="range"]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
  box-shadow: 0 0 10px rgba(255, 167, 51, 0.5);
  transition: transform 0.1s, background-color 0.1s;
}
.volume-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #ffb95c;
}
.volume-slider-container input[type="range"]::-moz-range-track {
  width: 100%;
  height: 6px;
  background: var(--steel-dim);
  border-radius: 3px;
}
.volume-slider-container input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 167, 51, 0.5);
  border: none;
  transition: transform 0.1s, background-color 0.1s;
}
.volume-slider-container input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
  background: #ffb95c;
}

#boost-container {
  position: absolute;
  bottom: 24px;
  right: 215px;
  width: 170px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  opacity: 0.95;
  box-shadow: 0 0 15px rgba(47, 111, 255, 0.15);
}
#boost-container .boost-label-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--steel);
}
#boost-container .boost-track {
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border-radius: 2px;
}
#boost-container #boost-fill {
  height: 100%;
  width: 100%;
  background: var(--police-blue);
  transition: width 0.1s ease, background-color 0.15s ease;
  box-shadow: 0 0 8px rgba(47, 111, 255, 0.4);
}

/* Custom Confirmation Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.85);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.modal-box {
  background: rgba(12, 14, 18, 0.95);
  border: 1px solid var(--panel-border);
  box-shadow: 0 0 35px rgba(255, 167, 51, 0.15), inset 0 0 15px rgba(0,0,0,0.6);
  padding: 36px;
  width: 460px;
  border-radius: 8px;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.show .modal-box {
  transform: scale(1);
}
.modal-title {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--amber);
  letter-spacing: 0.15em;
  margin-bottom: 18px;
  text-shadow: 0 0 8px rgba(255, 167, 51, 0.3);
}
.modal-message {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 26px;
}
.confirm-balance-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 26px;
  font-family: var(--font-mono);
  font-size: 1.15rem;
}
.confirm-balance-flow .bal-val {
  color: var(--steel);
}
.confirm-balance-flow .bal-val.highlight {
  color: var(--amber);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 167, 51, 0.3);
}
.confirm-balance-flow .bal-arrow {
  color: var(--steel-dim);
  font-size: 1.2rem;
}
.modal-buttons-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.modal-btn.ok-full {
  width: 100%;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 14px 0;
  background: var(--amber);
  color: #1a1206;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-align: center;
  transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(255, 167, 51, 0.2);
}
.modal-btn.ok-full:hover {
  transform: scale(1.02);
  background: #ffb95c;
  box-shadow: 0 4px 16px rgba(255, 167, 51, 0.35);
}
.modal-link-btn {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--steel);
  cursor: pointer;
  letter-spacing: 0.08em;
  text-decoration: underline;
  transition: color 0.15s;
  margin-top: 4px;
}
.modal-link-btn:hover {
  color: var(--text);
}

/* Cop Counter HUD */
#cop-counter-panel {
  position: static;
  text-align: center;
  min-width: 145px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  border-color: rgba(255, 59, 48, 0.4);
  box-shadow: 0 0 15px rgba(255, 59, 48, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
}
#cop-counter-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--steel);
  margin-bottom: 2px;
  text-transform: uppercase;
}
#cop-counter-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--police-red);
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(255, 59, 48, 0.65);
}