/* ============================================================
   responsive.css — All viewport-based overrides, consolidated.
   Loaded LAST so it can override base/title/scene-game/etc.
   Order within file: width queries → height queries → combos
   → prefers-reduced-motion. Within each query, group by
   selector affinity (title / game / cta) for easier scanning.
   ============================================================ */

/* ============================================================
   Phone frame: stretch to viewport height once we run out of width
   ============================================================ */
@media (max-height: 880px) {
  .phone {
    height: 100vh; height: 100svh; height: 100dvh;
    width: calc(100vh * 390 / 844); width: calc(100svh * 390 / 844); width: calc(100dvh * 390 / 844);
    max-width: 100vw;
  }
}
@media (max-width: 430px) {
  .phone {
    width: 100vw;
    height: 100vh; height: 100svh; height: 100dvh;
    max-width: 100vw;
    max-height: 100vh; max-height: 100svh; max-height: 100dvh;
    aspect-ratio: unset;
    box-shadow: none;
  }
}

/* ============================================================
   Mobile gameplay UI: shrink rhythm ring + push button
   ============================================================ */
@media (max-width: 430px) {
  .rhythm-wrap { width: 250px; height: 250px; }
  .rhythm-ring,
  .rhythm-indicator { width: 240px; height: 240px; }
  .rhythm-ticks { width: 250px; height: 250px; }
  .rhythm-ticks i { transform-origin: 50% 121px; height: 12px; width: 4px; }
  .push-btn {
    width: 160px; height: 160px;
    font-size: 32px; letter-spacing: 2px;
    -webkit-text-stroke: 2px var(--deep);
    text-shadow: 0 3px 0 var(--deep), 0 -1px 0 #FFB6FA;
    box-shadow:
      inset 0 -10px 0 rgba(42,11,74,0.3),
      inset 0 8px 0 rgba(255,255,255,0.4),
      0 0 0 4px #fff,
      0 0 0 7px var(--deep),
      0 0 0 10px #FFE600,
      0 12px 0 var(--deep),
      0 20px 36px rgba(255,77,246,0.5);
  }
  .push-btn:active, .push-btn.pressed {
    box-shadow:
      inset 0 -6px 0 rgba(42,11,74,0.3),
      inset 0 4px 0 rgba(255,255,255,0.4),
      0 0 0 5px #fff,
      0 0 0 9px var(--deep),
      0 0 0 12px #FFE600,
      0 6px 0 var(--deep),
      0 10px 20px rgba(255,77,246,0.5);
  }
  .push-zone { height: 34%; padding-bottom: 22px; }
  .beat-badge { top: 110px; font-size: 14px; padding: 3px 12px; }
}

/* ============================================================
   Taller viewports (iPhone 12+, Pro Max, desktops): scale up
   ============================================================ */
@media (min-height: 800px) {
  .char-stage { width: 440px; height: 480px; }
  .char-img { width: 420px; }
  /* Mash overlay grows with screen */
  .mash-title-wrap { max-width: 360px; }
  .mash-counter { font-size: 116px; }
  .mash-timer-bar { width: 280px; height: 30px; }
  .mash-timer-text { font-size: 30px; }
}

/* ============================================================
   Short viewport (~iPhone SE 667h): title padding 詰め + ボタン compactness
   画像 (word-1/2/kyomu/tagline) はベースの大型値をそのまま使う方針 — SE でも
   他端末同等に主役要素を大きく表示。375×667 で title 群合計 ~613px (padding
   含む) なので 667 に収まる。 GAME START とフッターだけ縮める。
   ============================================================ */
@media (max-height: 750px) {
  /* SE 375x667 で title 群合計が 667 に収まるよう gap/margin/tagline を compact 化。
     画像 (word-1/2/kyomu) はベース大型値を維持 (ユーザー要望)。 */
  #scene-title { padding: 16px 0 16px; gap: 8px; }
  .title-words { gap: 6px; }
  .title-kyomu { margin-top: 0; }
  .title-tagline {
    font-size: 12px;
    padding: 10px 18px;
    min-height: 64px;
    line-height: 1.6;
    letter-spacing: 1px;
  }
  .start-btn {
    /* SE では tagline と狭いので少しだけ縮めるが、十分目立つサイズを維持 */
    font-size: 18px;
    padding: 12px 32px;
    letter-spacing: 1.8px;
    white-space: nowrap;
    margin: 14px auto 0;
    box-shadow: 0 0 0 3px #FF3EA5, 0 0 0 5px #fff, 0 0 0 7px #3EE8FF, 0 6px 0 var(--deep), 0 12px 22px rgba(0,0,0,0.4);
  }
  .start-btn:active {
    transform: translateY(3px) scale(0.98);
    box-shadow: 0 0 0 3px #FF3EA5, 0 0 0 5px #fff, 0 0 0 7px #3EE8FF, 0 3px 0 var(--deep), 0 6px 14px rgba(0,0,0,0.4);
  }
  .powered-by {
    margin: 4px auto 0;
    font-size: 9px;
    letter-spacing: 1.2px;
  }
}

/* ============================================================
   iPhone SE / very short combo: ゲーム画面のみ v=117 のバランスに戻す。
   キャラは大きく (400×440) / PUSH は小さく (82px) / ring 138px。
   v=117 で「66px 隙間」が確保されてバランス良かったとのユーザー判定。
   タイトル画面は別 (max-height:750) でベース大型値を継承。
   ============================================================ */
@media (max-width: 430px) and (max-height: 720px) {
  /* SE: max-width:430 の大型 PUSH (180px/ring 280px) をそのまま継承。
     char-stage と被ってOK (z-index push-zone:6 > char-stage:5 で PUSH が上)。
     ユーザー判定: 「最悪ボタンとうさぎ被ってもいいからボタン大きめに」優先。
     padding-bottom のみ SE 用に微調整 (24→14)。 */
  .push-zone { padding-bottom: 14px; }

  .fever-text { font-size: 52px; letter-spacing: 2.5px; }
}

/* ============================================================
   Intermediate-short viewports (700〜880h): CTAのDLボタン死守。
   主役 = AppStore/GooglePlay (CV)。 .cta-top は min-height:0 +
   overflow:hidden で flex-shrink を効かせ、不足分は narrative/sub
   側を自然clipさせる。視覚劣化を抑えるため moderate に各要素縮小。
   ============================================================ */
@media (max-height: 880px) {
  .cta-top { padding: 10px 18px 10px; }
  .cta-info {
    max-width: 330px;
    padding: 12px 14px;
    gap: 8px;
  }
  .cta-rank-wrap { gap: 0; }
  .cta-rank-badge { font-size: 48px; padding: 1px 14px; }
  .cta-scoreboard { padding: 8px 12px; }
  .sb-row { padding: 2px 2px; }
  .sb-label { font-size: 11px; }
  .sb-val { font-size: 18px; }
  .sb-total-row .sb-val { font-size: 24px; }
  .cta-share-btns { gap: 9px; }
  .share-btn { width: 36px; height: 36px; }
  .cta-headline { font-size: 18px; line-height: 1.4; letter-spacing: 1.5px; }
  .cta-sub { font-size: 10.5px; line-height: 1.7; }
  .cta-download-card { padding: 16px 16px; gap: 18px; }
  .cta-brand-row { gap: 28px; }
  .cta-applogo { width: 48px; height: 48px; }
  .cta-brand-logo { width: 156px; }
  .store-row { gap: 11px; padding-top: 2px; }
  .store-btn { height: 41px; }
  .store-btn-appstore { width: 111px; }
  .store-btn-googleplay { width: 138px; }
  .cta-ranking { padding: 8px 12px; }
}

/* ============================================================
   iPhone SE / short screens: now-playing + mash overlay shrink
   ============================================================ */
@media (max-height: 700px) {
  .now-playing { padding: 0 10px; gap: 4px; max-width: calc(100% - 80px); }
  .now-playing .np-note { font-size: 12px; }
  .now-playing .np-title { font-size: 8px; letter-spacing: 0.6px; }

  .fever-text { font-size: 42px; letter-spacing: 2px; }
  .fever-overlay { top: 22%; height: 26%; }

  .mash-overlay { padding-bottom: 30%; }
  .mash-title-wrap { width: 74%; max-width: 260px; margin-bottom: 10px; }
  .mash-counter { font-size: 76px; }
  .mash-timer-wrap { margin-top: 22px; gap: 6px; }
  .mash-timer-bar { width: 200px; height: 20px; }
  .mash-timer-text { font-size: 20px; letter-spacing: 2px; }
  .mash-instruction { font-size: 17px; margin-top: 6px; letter-spacing: 2px; }

  /* CTA compaction on short screens */
  #scene-cta { padding: 0; }
  .cta-top { padding: 8px 14px 8px; }
  .cta-info {
    max-width: 320px;
    padding: 10px 12px;
    gap: 6px;
  }
  .retry-link {
    top: 0; right: 0;
    font-size: 10px;
    padding: 4px 9px;
    letter-spacing: 1.2px;
  }
  .cta-rank-wrap { gap: 0; }
  .cta-rank-label { font-size: 10px; letter-spacing: 2px; }
  .cta-rank-badge { font-size: 40px; padding: 0 12px; border-width: 2px; }
  .cta-scoreboard { padding: 6px 10px; gap: 0; border-width: 1px; }
  .sb-row { padding: 1px 2px; }
  .sb-label { font-size: 10px; letter-spacing: 1px; }
  .sb-val { font-size: 15px; min-width: 66px; }
  .sb-total-row { padding: 2px 2px 0; }
  .sb-total-row .sb-label { font-size: 12px; letter-spacing: 1.2px; }
  .sb-total-row .sb-val { font-size: 20px; min-width: 90px; }
  .sb-divider { margin: 2px 0 0; }
  .cta-share { gap: 2px; }
  .cta-share-label { font-size: 10px; letter-spacing: 1.2px; }
  .cta-share-btns { gap: 8px; }
  .share-btn { width: 32px; height: 32px; }
  .cta-divider { display: none; }
  .cta-headline { font-size: 16px; line-height: 1.35; letter-spacing: 1px; }
  .cta-sub { font-size: 10px; line-height: 1.55; }
  .cta-download-card { padding: 12px 14px; gap: 12px; }
  .cta-brand-row { gap: 22px; }
  .cta-applogo { width: 44px; height: 44px; }
  .cta-brand-tag { font-size: 11px; line-height: 20px; }
  .cta-brand-logo { width: 146px; }
  .store-row { gap: 10px; padding-top: 0; }
  .store-btn { height: 38px; }
  .store-btn-appstore { width: 103px; }
  .store-btn-googleplay { width: 128px; }

  /* Ranking panel compaction */
  .cta-ranking { padding: 6px 10px; border-width: 1px; gap: 2px; }
  .rk-header { padding-bottom: 2px; margin-bottom: 0; }
  .rk-title { font-size: 10px; letter-spacing: 1.4px; }
  .rk-badge { font-size: 9px; padding: 1px 6px; letter-spacing: 1px; }
  .rk-row { padding: 1px 2px; font-size: 11px; gap: 6px; }
  .rk-pos { font-size: 10px; min-width: 20px; }
  .rk-name { font-size: 11px; letter-spacing: 1px; }
  .rk-score { font-size: 12px; }
  .rk-you { padding: 2px 4px; font-size: 11px; }
  .rk-you .rk-pos { font-size: 10px; }
  .rk-you .rk-name { font-size: 11px; letter-spacing: 1.4px; }
  .rk-you .rk-score { font-size: 12px; }
  .rank-name-card { max-width: 260px; padding: 14px 12px 10px; gap: 8px; }
  .rank-name-title { font-size: 14px; letter-spacing: 1.6px; }
  .rank-name-sub { font-size: 10px; }
  .rank-name-input { font-size: 16px; padding: 8px 10px; letter-spacing: 3px; }
  .rank-name-submit, .rank-name-skip { font-size: 11px; padding: 8px 10px; letter-spacing: 1.4px; }
  .cta-slide-dots { gap: 8px; margin-top: 6px; }
  .cta-dot { width: 6px; height: 6px; border-width: 1px; }
}

/* ============================================================
   Ultra-short viewports (≤600h): iPhone SE iOS Safari with URL bar
   visible (effective ~540h)。タイトル画像とキャラを compact 化、
   PUSHボタンに safe-area-inset-bottom クリアランス確保。
   既存 max-height:750/720/700 を上書きする最強コンパクション層。
   ============================================================ */
@media (max-height: 600px) {
  /* --- Title: 画像とキャラを compact 化（基底大型方針を緩和） --- */
  #scene-title { padding: 8px 0 8px; gap: 4px; }
  .title-words { gap: 4px; }
  .title-word-1 { width: 70%; max-width: 280px; }
  .title-word-2 { width: 60%; max-width: 240px; }
  .title-kyomu { width: 38%; max-width: 200px; margin-top: 0; }
  .title-tagline {
    font-size: 11px;
    padding: 6px 14px;
    min-height: 44px;
    line-height: 1.45;
    letter-spacing: 0.8px;
  }
  .start-btn {
    font-size: 16px;
    padding: 9px 26px;
    letter-spacing: 1.4px;
    margin: 8px auto 0;
  }
  .powered-by { margin: 2px auto 0; font-size: 8px; letter-spacing: 1px; }

  /* --- Game: PUSH ボタン safe-area で iOS Safari URL バー overlay 回避 --- */
  .push-zone { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ============================================================
   iOS Safari URL バー対策: bottom-anchored 要素に safe-area
   クリアランス確保。viewport-fit=cover 環境では env() が
   home indicator + URL バー overlay 領域を表す。
   ============================================================ */
.cta-download-card {
  padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
}
@media (max-height: 700px) {
  .cta-download-card {
    padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
  }
}