#howtoplay {
  background: #FFFFFF;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(56px, 12vh, 120px) clamp(20px, 6vw, 40px) clamp(28px, 5vh, 56px);
  cursor: pointer;
}

/* Stacked, centered group: title → bar → caption → logo */
.htp-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5.5vh, 56px);
  width: 100%;
  max-width: 460px;
}

/* ── Header (title + subtitle) ── */
.htp-header {
  text-align: center;
}

.htp-title {
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(40px, 10.5vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: #000000;
  margin: 0;
}

.htp-sub {
  margin: clamp(8px, 1.4vh, 16px) 0 0;
  font-family: var(--display-font);
  font-weight: 600;
  font-size: clamp(14px, 3.7vw, 26px);
  letter-spacing: -0.005em;
  color: #000000;
}

/* ── Bar with score popup ── */
.htp-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.htp-bar {
  height: clamp(340px, 44vh, 560px);
  width: auto;
  max-width: clamp(120px, 26vw, 200px);
  display: block;
}

.htp-score {
  position: absolute;
  left: calc(50% + clamp(45px, 7vw, 70px));
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(20px, 3.8vw, 28px);
  letter-spacing: -0.02em;
  color: #000000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.htp-score.show { opacity: 1; }
.htp-score.miss { color: #EC536D; }

/* ── Caption ── */
.htp-caption {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: clamp(14px, 3.7vw, 24px);
  letter-spacing: -0.005em;
  color: #6B7373;
  text-align: center;
  max-width: 32ch;
  min-height: 1.4em;
  transition: opacity 0.2s ease;
}

/* ── Brand logo (absolute bottom-center, shared position across screens) ── */
.brand-logo {
  position: absolute;
  left: 50%;
  bottom: clamp(88px, 14vh, 180px);
  transform: translateX(-50%);
  height: clamp(20px, 3vh, 32px);
  width: auto;
  display: block;
}

/* ── Intro ── */
#howtoplay:not(.hidden) .htp-header { animation: htpIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#howtoplay:not(.hidden) .htp-bar-wrap { animation: htpIn 0.55s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#howtoplay:not(.hidden) .htp-caption { animation: htpIn 0.5s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#howtoplay:not(.hidden) .brand-logo  { animation: htpInLogo 0.5s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes htpIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Logo-specific keyframe preserves the translateX(-50%) used for centering */
@keyframes htpInLogo {
  from { transform: translateX(-50%) translateY(10px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ── Kiosk 1080×1920 portrait (slightly scaled down) ── */
@media (orientation: portrait) and (min-width: 1000px) and (min-height: 1700px) {
  #howtoplay {
    padding: 296px 56px 0;
  }
  .htp-stack {
    max-width: 720px;
    gap: 72px;
  }
  .htp-title {
    font-size: 115.2px;
    letter-spacing: -0.03em;
  }
  .htp-sub {
    font-size: 40.32px;
    margin-top: 20px;
    white-space: nowrap;
  }
  .htp-bar {
    height: 702px;
    max-width: 157px;
  }
  .htp-score {
    left: calc(50% + 110px);
    font-size: 40.32px;
  }
  .htp-caption {
    font-size: 40.32px;
    max-width: none;
    white-space: nowrap;
  }
  .brand-logo {
    height: 34px;
    bottom: 221px;
  }
}

/* ── Mobile: let the logo flow inside the column so it can't overlap the caption ── */
@media (max-width: 600px) {
  #howtoplay {
    padding: clamp(48px, 8vh, 88px) clamp(20px, 6vw, 40px)
             calc(max(32px, env(safe-area-inset-bottom)) + 24px);
    min-height: 100dvh;
  }
  .htp-stack {
    flex: 1;
    gap: clamp(20px, 3.5vh, 40px);
  }
  .htp-bar {
    height: clamp(280px, 38vh, 480px);
  }
  #howtoplay:not(.hidden) .brand-logo {
    animation-name: htpIn;
  }
}

@media (prefers-reduced-motion: reduce) {
  #howtoplay:not(.hidden) .htp-header,
  #howtoplay:not(.hidden) .htp-bar-wrap,
  #howtoplay:not(.hidden) .htp-caption,
  #howtoplay:not(.hidden) .brand-logo {
    animation: none;
  }
}