/****************************************/
/* common styles used for v1 through v4 */
/****************************************/

body          { font-family: Arial, Helvetica, sans-serif; }
#racer        { position: relative; z-index: 0; width: 1440px; height: 1080px; margin-left: 20em; border: 2px solid black; }
#canvas       { position: absolute; z-index: 0; width: 1440px; height: 1080px; z-index: 0; background-color: #080339; }
#mute {
  position: absolute;
  top: 35px;
  left: 920px;
  width: 32px;
  height: 32px;
  background: url(images/mute.png) no-repeat 0 0;
  cursor: pointer;
  display: block;
  z-index: 30; /* above radio */
}
#mute.on {
  background-position: -32px 0px;
}


/**************************************************/
/* heads up display */
/**************************************************/

/* Centered HUD bar */
#hud {
  position: absolute;
  top: 60px;   /* was 20px, now moved down */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(0,0,0,0.4);
  border-radius: 12px;
  padding: 10px 20px;
  z-index: 20;
}


#hud .hud {
  background: rgba(255,255,255,0.15);
  border: 2px solid #444;
  border-radius: 8px;
  padding: 10px 15px;
  color: #eee;
  font-weight: bold;
}

#hud .value {
  color: #0f0;
  font-size: 1.4em;
  font-family: "DS-Digital", monospace; /* optional dashboard-style font */
  text-shadow: 0 0 6px #0f0;
}

/* Speedometer wrapper keeps gauge + digital readout together */
#speedometer-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* Speedometer now uses background image */
#speedometer {
  position: relative;
  width: 160px;   /* display size */
  height: 80px;   /* display size */
  background: url("images/speedometer-bg.png") no-repeat center bottom;
  background-size: contain;
  overflow: hidden; /* crop anything overflowing */
}

/* Needle pivots from bottom center */
#needle {
  position: absolute;
  width: 3px;
  height: 75px;
  background: red;
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  transform: rotate(-90deg);
  transition: transform 0.1s linear;
}

/* MPH digital readout (outside the gauge) */
#speed_readout {
  font-size: 15px;
  font-weight: bold;
  color: #0f0;
  text-shadow: 0 0 6px #0f0;
  min-width: 70px;
  text-align: right;
}
/* Fuel wrapper sits under speedometer */
#fuel-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

/* Fuel meter container */
#fuelmeter {
  position: relative;
  width: 160px;
  height: 40px;
  border: 2px solid #555;
  border-radius: 4px;
  overflow: hidden;
}

/* Fuel bar that drains from right → left */
#fuel_bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to left, rgb(1, 241, 41), rgb(2, 97, 2));
  transform-origin: left center;   /* anchor to the right */
  transform: scaleX(1);             /* start full */
  transition: transform 0.2s linear;
  z-index: 0;  /* sits underneath */
}

/* Fuel overlay (tick marks + frame graphic) */
#fuelmeter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/fuelmeter-bg.png") no-repeat center center;
  background-size: contain;
  z-index: 1;  /* sits on top of the bar */
  pointer-events: none; /* don’t block input */
}


/* Money display */
#money_display {
  font-size: 16px;
  font-weight: bold;
  background: rgba(255,255,255,0.15);
  border: 2px solid #444;
  border-radius: 6px;
  padding: 6px 10px;
  color: #0f0;
  text-shadow: 0 0 4px #0f0;
}

/* === PNWK: Arcade bezel sizing hotfix === */
/* Prevent collapsing parent when canvas is absolutely positioned */
#arcade-wrapper {
  width: 1440px;
  height: 1080px;
}

#arcade-bezel {
  width: 100%;
  height: 100%;
}

#arcade-bezel > #canvas {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
}

/* === PNWK: Responsive cabinet scaling (keeps internal 1440x1080) === */
html, body { height: 100%; margin: 0; background: #0a0a0a; }
#racer {
  margin: 0 !important;
  border: none;
  background: transparent;
  width: 1440px;  /* internal resolution */
  height: 1080px; /* internal resolution */
  z-index: 0;
}
/* allow HUD to scale with the cabinet */
#hud { transform-origin: top left; }
/* keep the bezel hotfix */
#arcade-wrapper { width: 1440px; height: 1080px; }
#arcade-bezel   { width: 100%; height: 100%; position: relative; }
#arcade-bezel > #canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* === PNWK: CRT overlay + guaranteed stacking (v2) === */
#arcade-bezel { position: relative; overflow: hidden; }

/* === PNWK: CRT Aesthetic Pack (layers + flicker + mask) === */
#arcade-wrapper { width: 1440px; height: 1080px; }
#arcade-bezel   { position: relative; overflow: hidden; width: 100%; height: 100%; perspective: 1200px; }
#arcade-bezel > #canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  image-rendering: pixelated;
  filter: contrast(1.15) saturate(1.1) brightness(0.97);
  transform: scale(1.01) rotateX(1deg);
  transform-origin: center center;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}

/* Base scanlines + glass reflection */
#arcade-bezel::after,
#arcade-bezel::before { content:""; position:absolute; inset:0; pointer-events:none; }
#arcade-bezel::after {
  z-index: 5;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.055) 0px,
      rgba(255,255,255,0.055) 1px,
      rgba(0,0,0,0.12) 2px
    );
  mix-blend-mode: overlay;
  opacity: .55;
  animation: crt-flicker 6s steps(60,end) infinite, crt-roll 4s linear infinite;
}
#arcade-bezel::before {
  z-index: 6; border-radius: 8px;
  box-shadow: inset 0 0 140px rgba(0,0,0,0.75);
  opacity: .80;
}

/* Additional layers */
.crt-layer { position: absolute; inset: 0; pointer-events: none; }

.crt-glow {
  z-index: 3;
  backdrop-filter: blur(1.2px) brightness(1.08) saturate(1.08);
  -webkit-backdrop-filter: blur(1.2px) brightness(1.08) saturate(1.08);
  opacity: .55;
}

.crt-mask {
  z-index: 4;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,0,0,0.08) 0px,  rgba(255,0,0,0.08) 1px,
      rgba(0,255,0,0.08) 1px,  rgba(0,255,0,0.08) 2px,
      rgba(0,0,255,0.08) 2px,  rgba(0,0,255,0.08) 3px
    );
  background-size: 3px 100%;
  mix-blend-mode: soft-light;
  image-rendering: pixelated;
  opacity: .33;
}

.crt-noise {
  z-index: 7;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 2px, rgba(0,0,0,0.04) 2px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 2px, rgba(255,255,255,0.02) 2px 3px);
  mix-blend-mode: overlay;
  opacity: .20;
  animation: crt-noise-move 1.2s steps(8,end) infinite alternate;
}

#arcade-bezel.crt-off::after, #arcade-bezel.crt-off::before { opacity: 0; }
#arcade-bezel.crt-light::after { opacity: .45; }  #arcade-bezel.crt-light::before { opacity: .60; }
#arcade-bezel.crt-strong::after { opacity: .85; } #arcade-bezel.crt-strong::before { opacity: .90; }

#arcade-bezel.mask-off  .crt-mask  { display: none; }
#arcade-bezel.glow-off  .crt-glow  { display: none; }
#arcade-bezel.noise-off .crt-noise { display: none; }

@keyframes crt-flicker {
  0%, 100% { opacity: 0.52; }
  48%      { opacity: 0.58; }
}
@keyframes crt-roll {
  0%   { transform: translateY(-1%); }
  100% { transform: translateY(1%);  }
}
@keyframes crt-noise-move {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-1px, 1px); }
}

#game-container {
  position: relative;
  display: inline-block;
  margin-top: 0 !important;
}

#racer {
  position: relative;
  z-index: 1;
}

#game-frame {
  position: absolute;
  inset: 0;
  background: url("images/game-frame.png") no-repeat center center;
  background-size: contain;
  pointer-events: none;
  z-index: 10;
}

#hud {
  position: absolute;
  z-index: 20;
}

#gameover-overlay,
#gameover-money-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  color: #fff;
  text-align: center;
}

#gameover-overlay .gameover-text,
#gameover-money-overlay .gameover-text {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #ff3030;
  text-shadow: 0 0 10px #ff3030, 0 0 20px #000;
}

#continue-text,
#continue-money-text {
  font-size: 24px;
  color: #00ff7f;
  cursor: pointer;
  animation: blink 1s step-start infinite;
}

#fuel_bar.low {
  background: red !important;
  animation: fuel-flash 0.6s step-start infinite;
}

@keyframes fuel-flash {
  50% { opacity: 0.3; }
}

#earnings-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  color: #fff;
  text-align: center;
  font-family: typewriter, monospace;
}

#earnings-bg {
  background: url("images/earnings-bg.png") no-repeat center center;
  background-size: contain;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  transform: scale(2.5);
}

#earnings-list div {
  font-size: 10px;
  margin: 6px 0;
}

.earnings-sub { color: #9cf; font-weight: bold; }
.earnings-gas { color: #1f1b1b; font-weight: bold; }

.earnings-total {
  font-size: 10px;
  font-weight: 800;
  color: #ffd700;
  margin-top: 8px;
  text-shadow: 0 0 6px #000;
}

#continue-earnings-text {
  margin-top: 16px;
  font-size: 10px;
  color: rgb(18, 19, 18);
  cursor: pointer;
  animation: blink 1s step-start infinite;
}

#earnings-overlay { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.handwritten {
  font-family: 'Comic Sans MS', 'Bradley Hand', cursive, sans-serif;
  font-size: 15px;
  color: #000;
}

.earnings-top {
  margin-top: -12px;  /* pull Shirts up */
}

#earnings-list .handwritten:nth-of-type(2) {
  margin-top: -6px;   /* pull Tickets closer to Shirts */
}

.typewriter {
  font-family: "Courier New", Courier, monospace;
  font-size: 4px;
  color: #000;
  text-align: right;
  width: 100%;
}

#continue-earnings-text.typewriter {
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  margin-top: 12px;
  color: #000;
  animation: blink 1s step-start infinite;
}

#earnings-list .handwritten.earnings-top {
  margin-top: -12px !important;  /* pull Shirts up */
}

#earnings-list .handwritten:nth-of-type(2) {
  margin-top: -6px !important;   /* pull Tickets closer */
}
/* Tighten spacing for typewriter lines on earnings overlay */
#earnings-list div.typewriter {
  margin: 2px 0 !important;   /* reduce vertical gap above & below each line */
  line-height: 1.1;           /* slightly tighter leading */
}

/* (Optional) also tighten the gap before [CONTINUE] */
#continue-earnings-text.typewriter {
  margin-top: 6px !important;
}

/* === Mobile Controls === */
#mobile-controls {
  position: absolute;
  inset: 0;
  pointer-events: none; /* let game still get clicks */
  z-index: 5000;
}

#mobile-controls .mc-btn {
  pointer-events: auto;
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  user-select: none;
}

.mc-left  { bottom: 40px; left: 40px; }
.mc-right { bottom: 40px; left: 140px; }
.mc-accel { bottom: 140px; right: 40px; }
.mc-brake { bottom: 40px;  right: 40px; }

/* === Radio === */
#radio {
  position: absolute;
  top: 100px; /* raised closer under HUD */
  left: 50%;
  transform: translateX(-50%);
  width: 978px;
  height: 106px;
  background: url("images/radio-bg.png") no-repeat center center;
  background-size: contain;
  z-index: 25; /* draw above HUD */
}


#radio-title,
#radio-band {
  position: absolute;
  left: 725px;
  color: #0f0;
  font-family: "DS-Digital", monospace;
  text-shadow: 0 0 6px #0f0;
  white-space: nowrap;
}

#radio-title {
  top: 25px;
  font-size: 20px;
  font-weight: bold;
}

#radio-band {
  top: 55px;
  font-size: 16px;
}
/* Crash overlay effect */
#crash-overlay {
  position: absolute;
  inset: 0;
  background: center center no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  z-index: 5; /* above gameplay, below frame & HUD */
  transition: opacity 5s linear; /* smooth fade */
}
/* Highlight negative money deduction */
#money_display.negative,
#money_display.negative #money_value {
  color: #ff3030 !important;
  text-shadow: 0 0 6px #ff3030;
}