/* GAME SCREEN — black bg, white ground line, yellow logo */
#screen-game {
  background: #000000;
}

#game-area {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  contain: layout paint;
}

/* ── HUD ──
   Kiosk-anchored values via clamp() so the layout still looks right on
   phone and desktop (where the screen container is much smaller).
   At kiosk 1080×1920 each clamp pins to the max:
   • top spacing 290px  (15.1cqh)
   • side pad   69px    (6.39cqw)
   • label font 37.44px (3.47cqw bold)
   • value font 92.16px (8.53cqw bold) */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: clamp(60px, 15.1cqh, 290px) clamp(20px, 6.39cqw, 69px) 0;
  z-index: 10;
  pointer-events: none;
}

.hud-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, 0.4cqh, 8px);
}

.hud-block.right {
  align-items: flex-end;
}

.hud-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 3.47cqw, 37.44px);
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.hud-val {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 8.53cqw, 92.16px);
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ── Round intro — clean centered number, no overlay tint ── */
.round-intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.round-intro.show { opacity: 1; }

.round-intro-inner {
  text-align: center;
}

.round-intro-kicker,
.round-intro-sub {
  display: none;
}

.round-intro-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(96px, 14cqi, 168px);
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

/* ── Hide decorative clouds ── */
.cloud { display: none; }

/* ── Ground line — the road element IS the line in the new design ── */
.road {
  position: absolute;
  bottom: var(--road-offset);
  left: 0;
  right: 0;
  height: var(--road-height);
  background: #ffffff;
  z-index: 2;
}

.road-dashes { display: none; }

/* ── Basket ── */
#basket {
  position: absolute;
  left: 0;
  bottom: calc(var(--road-offset) + var(--basket-bottom));
  transform: translate3d(0, 0, 0);
  z-index: 5;
  pointer-events: none;
  will-change: transform;
}

#basket img,
#basket svg {
  width: var(--basket-width);
  height: auto;
  display: block;
}

/* ── Fire effect on bomb hit ── */
#fire-wrap {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  transition: opacity 0.1s;
}

#fire-wrap.lit {
  opacity: 1;
  animation: fireShake 0.08s linear infinite;
}

@keyframes fireShake {
  0%, 100% { transform: translateX(-50%) scaleX(1); }
  50%      { transform: translateX(-50%) scaleX(1.04); }
}

#fire-wrap img,
#fire-wrap svg {
  width: var(--fire-width);
  height: auto;
  display: block;
}

/* ── Falling items (z-index above HUD so they're never hidden behind it) ── */
.item {
  position: absolute;
  pointer-events: none;
  z-index: 11;
  left: 0;
  top: 0;
  will-change: transform;
  transform-origin: top left;
  backface-visibility: hidden;
}

.item img,
.item svg {
  width: 100%;
  height: 100%;
  display: block;
}

.item-art {
  will-change: transform;
  transform-origin: center;
}

.item-art.spin   { animation: itemSpin 2s linear infinite; }
.item-art.wobble { animation: itemWobble 1.5s ease-in-out infinite; }

@keyframes itemSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes itemWobble {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* ── Score popups ── */
.score-pop {
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 4.5cqi, 60px);
  color: #ffffff;
  pointer-events: none;
  z-index: 20;
  animation: scorePop 0.8s ease-out forwards;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

@keyframes scorePop {
  0%   { opacity: 1; transform: translateY(0)    scale(1.2); }
  20%  {             transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-65px) scale(0.85); }
}

/* ── Game over overlay ── */
#gameover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

#gameover-overlay.show { opacity: 1; }

.gameover-txt {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(46px, 12cqi, 160px);
  color: #ffffff;
  text-align: center;
  line-height: 1;
  letter-spacing: -0.03em;
  padding: 0 clamp(20px, 5cqi, 64px);
  animation: goZoom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes goZoom {
  0%   { transform: scale(0.4) rotate(-4deg); opacity: 0; }
  100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}