#gameplay {
  background: #000000;
  justify-content: flex-start;
  position: relative;
  padding: 0;
}

#gameplay-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(28px, 5vh, 56px) clamp(28px, 6vw, 56px) 0;
  overflow: hidden;
  gap: clamp(8px, 2vh, 22px);
}

/* ── HUD (TIME / SCORE) ── */
#hud {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

.hud-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, 0.6vh, 8px);
}

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

.hud-label {
  font-family: var(--display-font);
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 1;
}

.hud-value {
  font-family: var(--display-font);
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── Bar stage (bar + caption packed together) ── */
#bar-area {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  gap: clamp(16px, 2.6vh, 26px);
}

#bar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#game-bar-svg {
  height: clamp(360px, 56vh, 720px);
  width: auto;
  max-width: clamp(58px, 9vw, 110px);
  display: block;
}

#bar-fill {
  transition: opacity 0.1s ease;
}

#target-line {
  /* SVG rect positioned via y attribute by game.js */
}

#hold-hint { display: none !important; }

/* Score popup sits just to the right of the yellow target line.
   Horizontal offset = bar half-width (SVG height ÷ 8 since aspect is 1:4)
   plus a small gap, so it always lands right next to the bar regardless
   of viewport size. */
#game-score-popup {
  position: absolute;
  left: calc(50% + clamp(45px, 5.5vw, 70px));
  top: var(--popup-top, 50%);
  transform: translateY(-50%) scale(0.85);
  font-family: var(--display-font);
  font-size: clamp(24px, 5vh, 38px);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 3;
}

#game-score-popup.show {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

#game-score-popup.miss {
  color: #EC536D;
}

#feedback-text {
  display: none !important;
}

/* ── Caption (sits directly below the bar) ── */
#gp-caption {
  font-family: var(--display-font);
  font-size: clamp(14px, 3.4vw, 20px);
  font-weight: 600;
  color: #6B7373;
  text-align: center;
  letter-spacing: -0.005em;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Logo overrides nothing extra — uses .brand-logo absolute positioning ── */
.gp-logo { /* inherits .brand-logo */ }

/* ── Hide legacy intro elements (now no-op) ── */
#gp-intro, #timer-track, #lives-row {
  display: none !important;
}

/* ── 3-2-1-GO! countdown overlay ── */
#gp-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(120px, 26vw, 220px);
  letter-spacing: -0.04em;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  z-index: 20;
}

#gp-countdown.active {
  opacity: 1;
}

#gp-countdown.pop {
  animation: countdown-pop 0.7s ease-out;
}

#gp-countdown.go {
  color: #EEFF41;
  font-size: clamp(96px, 22vw, 180px);
}

@keyframes countdown-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  28%  { transform: scale(1.18); opacity: 1; }
  70%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #gp-countdown.pop { animation: none; }
}

/* Kiosk countdown sizing */
@media (orientation: portrait) and (min-width: 1000px) and (min-height: 1700px) {
  #gp-countdown    { font-size: 360px; }
  #gp-countdown.go { font-size: 280px; }
}

/* ── Miss shake (kept for feedback) ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
.miss-shake { animation: shake 0.3s ease; }

#gameplay.flash-ok  { background: #0a0a0a; }
#gameplay.flash-red { background: #2a0d12; }

/* ── Kiosk 1080×1920 (slightly scaled down) ── */
@media (orientation: portrait) and (min-width: 1000px) and (min-height: 1700px) {
  #gameplay-frame {
    padding: 290px 69px 0;
    gap: 0;
  }
  .hud-label  { font-size: 37.44px; font-weight: 700; }
  .hud-value  { font-size: 92.16px; }
  #bar-area   {
    gap: 48px;
    margin-top: -134px;  /* pull pill up so its top tip aligns with the TIME label */
  }
  #game-bar-svg {
    height: 1033.92px;
    max-width: 149px;
  }
  #gp-caption { font-size: 30px; white-space: nowrap; }
  #game-score-popup {
    left: calc(50% + 100px);  /* bar half-width 74.5px + 25px gap */
    font-size: 54px;
  }
}

@media (max-width: 480px) {
  #gp-caption {
    white-space: normal;
    max-width: 90%;
  }
}