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

html {
  /* overflow:hidden only on html, not body — iOS Safari anchors position:fixed
     to the body when body has overflow:hidden, shifting fixed elements off-position */
  overflow: hidden;
  height: 100%;
  background-color: #000;
}

body {
  width: 100%; height: 100%;
  overscroll-behavior: none;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 4px,
      rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 5px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 4px,
      rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 5px
    ),
    linear-gradient(155deg, #505050 0%, #3a3a3a 55%, #484848 100%);
  touch-action: none;
}

/* CRT scanlines */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.16) 3px, rgba(0,0,0,0.16) 4px
  );
  pointer-events: none;
  z-index: 100;
}

/* ---- Arcade cabinet bezel ---- */

#arcade-bezel {
  position: fixed;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: calc(56px + 3px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  pointer-events: none;
  z-index: 8;
  background: transparent;
  border-radius: 14px;
  border: 1px solid rgba(50, 200, 80, 0.45);
  box-shadow:
    0 0 28px rgba(0, 180, 50, 0.15),
    inset 0 0 18px rgba(0, 0, 0, 0.35);
}

canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  touch-action: none;
  clip-path: inset(3px round 14px);
}

/* ---- Loading screen ---- */

#loader {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 50;
}

#status {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  letter-spacing: 6px;
  color: #32c832;
  text-shadow: 0 0 10px #e6dc32;
  text-transform: uppercase;
  animation: blink 1s step-end infinite;
}

@keyframes blink      { 50% { opacity: 0.25; } }
@keyframes blink-coin { 50% { opacity: 0;    } }

#bar-outer {
  width: 260px;
  height: 5px;
  border: 1px solid #1c1c1c;
  background: #080808;
}

#bar-inner {
  height: 100%;
  width: 0%;
  background: #32c832;
  box-shadow: 0 0 8px #32c832;
  transition: width .12s linear;
}

/* ---- Bottom bar — game-page overrides ---- */

#topbar { background: #000; }

#back:active { transform: translateY(2px); }


/* ---- Need-coin overlay ---- */

#need-coin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.8);
  z-index: 150;
  align-items: center;
  justify-content: center;
}
#need-coin-overlay.visible { display: flex; }

#need-coin-overlay .nco-msg {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e6dc32;
  text-shadow:
    0 0 10px #e6dc32,
    0 0 30px #e6dc32,
    0 0 60px rgba(230,220,50,0.4);
  animation: blink-coin 1.1s step-end infinite;
}

/* ---- Touch controls ---- */

#touch-pad {
  display: none;
  pointer-events: none;
}

#dpad {
  position: fixed;
  bottom: calc(56px + 20px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  width: 132px;
  height: 132px;
  pointer-events: auto;
  touch-action: none;
  z-index: 99;
}

.dpad-btn {
  position: absolute;
  width: 44px;
  height: 44px;
  background: rgba(50, 200, 50, 0.12);
  border: 1px solid rgba(50, 200, 50, 0.3);
  color: rgba(50, 200, 50, 0.7);
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  transition: background .05s, box-shadow .05s;
}
#btn-up    { top: 0;   left: 44px; }
#btn-left  { top: 44px; left: 0;  }
#btn-right { top: 44px; left: 88px; }
#btn-down  { top: 88px; left: 44px; }

.dpad-btn.active {
  background: rgba(50, 200, 50, 0.30);
  box-shadow: 0 0 10px rgba(50, 200, 50, 0.45);
  color: #32c832;
}

#btn-fire {
  position: fixed;
  bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  width: 72px;
  height: 72px;
  z-index: 99;
  background: rgba(50, 200, 50, 0.12);
  border: 2px solid rgba(50, 200, 50, 0.35);
  border-radius: 50%;
  color: rgba(50, 200, 50, 0.7);
  font-family: 'Courier New', Courier, monospace;
  font-size: 8px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 72px;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  pointer-events: auto;
  transition: background .05s, box-shadow .05s;
}
#btn-fire.active {
  background: rgba(50, 200, 50, 0.30);
  box-shadow: 0 0 14px rgba(50, 200, 50, 0.5);
  color: #32c832;
}

#btn-fire2 {
  position: fixed;
  bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + 72px + 12px);
  width: 72px;
  height: 72px;
  z-index: 99;
  background: rgba(200, 150, 50, 0.12);
  border: 2px solid rgba(200, 150, 50, 0.35);
  border-radius: 50%;
  color: rgba(200, 150, 50, 0.7);
  font-family: 'Courier New', Courier, monospace;
  font-size: 8px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 72px;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  pointer-events: auto;
  transition: background .05s, box-shadow .05s;
}
#btn-fire2.active {
  background: rgba(200, 150, 50, 0.30);
  box-shadow: 0 0 14px rgba(200, 150, 50, 0.5);
  color: #c89632;
}

/* ---- Paddle dials (rally only) ---- */

#paddle-dial, #paddle-dial-p2 {
  display: none;
  position: fixed;
  bottom: calc(56px + 20px + env(safe-area-inset-bottom, 0px));
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #0c170c, #050a05);
  border: 2px solid rgba(50, 200, 50, 0.35);
  box-shadow:
    0 0 16px rgba(50, 200, 50, 0.12),
    inset 0 0 24px rgba(0, 0, 0, 0.6);
  touch-action: none;
  user-select: none;
  pointer-events: auto;
  z-index: 99;
  -webkit-tap-highlight-color: transparent;
}

#paddle-dial    { left: 20px; }
#paddle-dial-p2 { right: 20px; }

/* Tick marks around the rim via conic-gradient */
#paddle-dial::before, #paddle-dial-p2::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 14deg, rgba(50,200,50,0.18) 14deg 16deg,
    transparent 16deg 44deg, rgba(50,200,50,0.18) 44deg 46deg,
    transparent 46deg 74deg, rgba(50,200,50,0.18) 74deg 76deg,
    transparent 76deg 104deg, rgba(50,200,50,0.18) 104deg 106deg,
    transparent 106deg 134deg, rgba(50,200,50,0.18) 134deg 136deg,
    transparent 136deg 164deg, rgba(50,200,50,0.18) 164deg 166deg,
    transparent 166deg 194deg, rgba(50,200,50,0.18) 194deg 196deg,
    transparent 196deg 224deg, rgba(50,200,50,0.18) 224deg 226deg,
    transparent 226deg 254deg, rgba(50,200,50,0.18) 254deg 256deg,
    transparent 256deg 284deg, rgba(50,200,50,0.18) 284deg 286deg,
    transparent 286deg 314deg, rgba(50,200,50,0.18) 314deg 316deg,
    transparent 316deg 344deg, rgba(50,200,50,0.18) 344deg 346deg,
    transparent 346deg 360deg
  );
}

/* Centre dot */
#paddle-dial::after, #paddle-dial-p2::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(50, 200, 50, 0.5);
  box-shadow: 0 0 6px #32c832;
}

#dial-hand, #dial-hand-p2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 32px;
  margin-left: -1.5px;
  margin-top: -32px;
  background: linear-gradient(to top, rgba(50,200,50,0.3), #32c832);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
  box-shadow: 0 0 8px rgba(50,200,50,0.7);
  transition: box-shadow .05s;
}

#paddle-dial.active #dial-hand, #paddle-dial-p2.active #dial-hand-p2 {
  box-shadow: 0 0 16px #32c832, 0 0 30px rgba(50,200,50,0.4);
}

#dial-label, #dial-label-p2 {
  position: absolute;
  bottom: -22px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(50, 200, 50, 0.4);
}

/* P2 dial — CPU mode (1-player selected) */

#paddle-dial-p2.cpu-mode {
  pointer-events: none;
  opacity: 0.5;
  border-color: rgba(50, 200, 50, 0.18);
}

#paddle-dial-p2.cpu-mode #dial-hand-p2 {
  display: none;
}

/* Replace the centre dot with a chip icon */
#paddle-dial-p2.cpu-mode::after {
  content: '⊡';
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
  color: rgba(50, 200, 50, 0.45);
}

/* Shrink controls in landscape / short screens */
@media (max-height: 450px) {
  #dpad {
    width: 99px;
    height: 99px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px);
    left: 10px;
  }
  .dpad-btn { width: 33px; height: 33px; line-height: 33px; font-size: 13px; }
  #btn-up    { top: 0;   left: 33px; }
  #btn-left  { top: 33px; left: 0;  }
  #btn-right { top: 33px; left: 66px; }
  #btn-down  { top: 66px; left: 33px; }
  #btn-fire {
    width: 56px;
    height: 56px;
    line-height: 56px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    right: 12px;
  }
  #btn-fire2 {
    width: 56px;
    height: 56px;
    line-height: 56px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    right: calc(12px + 56px + 10px);
  }
  #tilt-btn {
    width: 56px;
    height: 56px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    right: calc(12px + (56px + 10px) * 2);
  }
  #paddle-dial, #paddle-dial-p2 {
    width: 76px;
    height: 76px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px);
  }
  #paddle-dial    { left: 16px; }
  #paddle-dial-p2 { right: 16px; }
}

/* ---- Tilt button (game pages, sits left of fire buttons) ---- */

#tilt-btn {
  position: fixed;
  bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + (72px + 12px) * 2);
  width: 72px;
  height: 72px;
  z-index: 99;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  pointer-events: auto;
  transition: background .05s, box-shadow .05s, color .15s, border-color .15s;
}

#tilt-btn.tilt-on {
  background: rgba(50, 200, 50, 0.20);
  border-color: rgba(50, 200, 50, 0.55);
  color: #32c832;
  box-shadow: 0 0 14px rgba(50, 200, 50, 0.4);
}

/* ---- Initials entry overlay ---- */

#initials-overlay {
  display: none;
  position: fixed;
  inset: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.88);
  z-index: 160;
  align-items: center;
  justify-content: center;
}
#initials-overlay.visible { display: flex; }
#initials-leaderboard { display: none; }

.initials-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 32px;
}

.initials-title {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(2.4rem, 10vw, 4rem);
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #32c832;
  text-shadow: 0 0 14px #32c832, 0 0 40px rgba(50,200,50,0.4);
}

.initials-score {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .14em;
  color: #fff;
}

.initials-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(.8rem, 3.5vw, 1.1rem);
  letter-spacing: .18em;
  color: #e6dc32;
  text-shadow: 0 0 8px #e6dc32;
  text-transform: uppercase;
}

#initials-input {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 900;
  letter-spacing: .35em;
  text-align: center;
  text-transform: uppercase;
  width: 6em;
  background: transparent;
  border: none;
  border-bottom: 3px solid #e6dc32;
  color: #e6dc32;
  text-shadow: 0 0 10px #e6dc32;
  outline: none;
  padding: 4px 8px;
  caret-color: #e6dc32;
  /* Prevent iOS from zooming in when the input is tapped (requires font-size >= 16px;
     our clamp already satisfies this, but be explicit for safety). */
  touch-action: manipulation;
}

/* Pulse the input border on touch devices to hint the user to tap it. */
@media (hover: none) {
  #initials-input {
    animation: input-pulse 1.4s ease-in-out infinite;
  }
  @keyframes input-pulse {
    0%, 100% { border-bottom-color: #e6dc32; box-shadow: none; }
    50%       { border-bottom-color: #fff;   box-shadow: 0 3px 10px rgba(230,220,50,0.6); }
  }
  #initials-input:focus { animation: none; }
}

#initials-submit {
  margin-top: 8px;
  padding: 10px 36px;
  font-size: 1.1rem;
  background: transparent;
  border: 2px solid #e6dc32;
  border-radius: 4px;
}

.lb-box {
  min-width: min(340px, 90vw);
}

.lb-list {
  list-style: none;
  width: 100%;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  padding: 6px 0;
}

.lb-list li {
  display: grid;
  grid-template-columns: 2em 3em 1fr;
  gap: 0 12px;
  align-items: baseline;
  padding: 5px 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(.85rem, 3.5vw, 1rem);
  letter-spacing: .08em;
  color: #6e8c30;
  border-radius: 3px;
}

.lb-list li.lb-new {
  color: #e6dc32;
  text-shadow: 0 0 8px rgba(230,220,50,0.5);
  background: rgba(230,220,50,0.06);
}

.lb-rank  { color: #444; font-size: .8em; justify-self: end; }
.lb-new .lb-rank { color: #888; }
.lb-initials { font-weight: 900; letter-spacing: .2em; }
.lb-score { justify-self: end; font-weight: 700; }

#lb-close {
  margin-top: 12px;
}