:root {
  --purple: #c33dff;
  --green:  #3dff5e;
  --blue:   #2e9bff;
  --yellow: #ffe23a;
  --red:    #ff2d3a;
  --aspect: 1536 / 2752;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#stage {
  position: relative;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: var(--aspect);
  max-width: 100vw;
  overflow: hidden;
  background: #000;
}

/* If the viewport is wider than the aspect ratio allows, the stage stays its width */
@media (orientation: landscape) {
  #stage { height: 100vh; height: 100dvh; }
}

#bg {
  position: absolute;
  inset: 0;
  background-image: url("guitar_hero_background.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

#playfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Hit line is invisible by default; shown briefly on hits/misses for feedback */
#hitline {
  position: absolute;
  left: 0;
  right: 0;
  top: 85.5%;
  height: 1px;
  background: rgba(255,255,255,0);
}

/* Falling skittles */
.skittle {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  will-change: transform;
}

.skittle .disc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--size);
  height: calc(var(--size) * 0.78);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 35%),
    radial-gradient(circle at 50% 50%, var(--c) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  box-shadow:
    0 0 calc(var(--size) * 0.35) color-mix(in srgb, var(--c) 70%, transparent),
    inset 0 calc(var(--size) * -0.08) calc(var(--size) * 0.18) rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-style: italic;
  color: rgba(255,255,255,0.95);
  font-size: calc(var(--size) * 0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Lane buttons — positioned over the painted-on button caps in the background.
   Centers (from image analysis) are at 17.61, 33.79, 50.03, 66.24, 82.39% of
   the stage width, and the row's vertical center sits at ~85.5%. */
#buttons {
  position: absolute;
  left: 0;
  right: 0;
  top: 82.45%;
  height: 6.1%;
  pointer-events: none;
}

.lane-btn {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 17%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.lane-btn[data-lane="0"] { left: 17.61%; }
.lane-btn[data-lane="1"] { left: 33.79%; }
.lane-btn[data-lane="2"] { left: 50.03%; }
.lane-btn[data-lane="3"] { left: 66.24%; }
.lane-btn[data-lane="4"] { left: 82.39%; }

/* Splash burst on tap. Colors are taken from the lane palette and run
   purple → green → blue → yellow → red across the row. */
.splash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  background: radial-gradient(
    circle at 50% 50%,
    var(--c) 0%,
    color-mix(in srgb, var(--c) 70%, transparent) 35%,
    color-mix(in srgb, var(--c) 0%, transparent) 70%
  );
  filter: blur(0.4vmin);
  animation: splash-burst 520ms ease-out forwards;
}

@keyframes splash-burst {
  0%   { opacity: 0.0; transform: translate(-50%, -50%) scale(0.35); }
  20%  { opacity: 1.0; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 0.0; transform: translate(-50%, -50%) scale(2.6); }
}

/* HUD numbers positioned over the empty boxes drawn on the background */
.hud-num {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  text-shadow: 0 0 0.5vmin rgba(255,255,255,0.6), 0 0 1.6vmin rgba(255, 220, 80, 0.55);
  letter-spacing: 0.04em;
  pointer-events: none;
  white-space: nowrap;
}

#score-display  { left: 3.0%;  top: 4.4%;  width: 22.0%; height: 3.5%; font-size: 2.6vh; }
#multi-display  { right: 3.0%; top: 4.4%;  width: 22.0%; height: 3.5%; font-size: 2.6vh; }
#streak-display { left: 3.0%;  top: 94.4%; width: 22.0%; height: 3.5%; font-size: 2.6vh; }

/* Taste meter needle — pivots at center-bottom of the painted gauge */
#taste-needle {
  position: absolute;
  /* Pivot point: center of the painted semicircular gauge */
  left: 87.2%;
  top: 93.1%;
  width: 0.6%;
  height: 4.2%;
  transform-origin: 50% 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 3;
  transition: transform 0.35s ease-out;
  /* Triangle needle via clip-path */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #fff;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.7));
}

/* Score-pop floating numbers */
.score-pop {
  position: absolute;
  pointer-events: none;
  font-weight: 900;
  font-style: italic;
  font-size: 4vh;
  color: var(--c, #fff);
  text-shadow: 0 0 1.2vmin rgba(0,0,0,0.7), 0 0 2vmin var(--c, #fff);
  transform: translate(-50%, -50%);
  animation: pop 700ms ease-out forwards;
}

@keyframes pop {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -55%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1.0); }
}

.miss {
  color: #fff !important;
  text-shadow: 0 0 1vmin #ff2d3a, 0 0 2vmin #ff2d3a;
}

/* Overlays: start, win */
.overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.85) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#start-screen {
  background: transparent;
  align-items: flex-end;
  padding-bottom: 3vh;
}

.overlay.hidden { display: none; }

.overlay-card {
  text-align: center;
  padding: 4vh 6vw;
  max-width: 90%;
}

.overlay-card h1 {
  margin: 0.4vh 0;
  font-size: 5.5vh;
  font-style: italic;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, var(--purple), var(--blue), var(--green), var(--yellow), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 2vmin rgba(255,255,255,0.25);
}

.overlay-card h2 {
  margin: 0.4vh 0 1.6vh;
  font-size: 3.2vh;
  font-style: italic;
  color: #fff;
}

.overlay-card p {
  margin: 1vh 0;
  font-size: 2vh;
  line-height: 1.4;
  color: #eee;
}

.overlay-card p.small { font-size: 1.6vh; opacity: 0.8; }

.big-btn {
  margin-top: 2.5vh;
  padding: 1.4vh 4vw;
  font-size: 2.6vh;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--green), var(--blue), var(--purple));
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 3vmin rgba(255,255,255,0.25);
}

.big-btn:active { transform: scale(0.97); }

.win-card {
  max-width: 96%;
  width: 96%;
  padding: 4vh 3vw;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 2vh;
  box-shadow: 0 0 4vmin rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.win-card h1 {
  font-size: 4.6vh;
  margin: 1vh 0;
  /* white-space: nowrap; */
}

.coupon {
  margin: 2.4vh auto 0.8vh;
  padding: 2vh 3vw;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 1.4vh;
  background: rgba(255, 255, 255, 0.06);
  max-width: 80%;
}

.coupon-label {
  margin: 0 0 0.8vh !important;
  font-size: 1.9vh !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff !important;
  text-transform: uppercase;
}

.coupon-code {
  margin: 0 !important;
  font-size: 4vh !important;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.18em;
  color: #fff !important;
  background: linear-gradient(90deg, var(--purple), var(--blue), var(--green), var(--yellow), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 2vmin rgba(255, 255, 255, 0.25);
}