/* ═══════════════════════════════════════════════════════════
   Reset
   ═══════════════════════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   PC / base styles — body centres the canvas
   ═══════════════════════════════════════════════════════════ */
body {
  background: #1a1a2e;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: sans-serif;
}

/* On PC the wrapper is invisible — body handles centring */
#game-wrapper {
  display: contents;
}

#gameCanvas {
  display: block;
  border: 3px solid #555;
  image-rendering: pixelated;
}

/* Touch controls hidden on PC */
#touch-controls {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   Touch-device layout
   Condition: touch screen + ≤1024 px wide
   ═══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) and (max-width: 1024px) {

  html {
    height: 100%;
    overflow: hidden;
  }

  body {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* dvh falls back to vh in older browsers */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    touch-action: none;
  }

  #game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }

  /* ── Canvas ──────────────────────────────────────
     Touch strip ≈ 160 px (primary + gap + secondary).
     width × (480/800) + 160 ≤ 100vh
     → width ≤ (100vh − 160) × (800/480)
     Also cap at 100vw.
  ─────────────────────────────────────────────── */
  #gameCanvas {
    flex: 0 0 auto;
    display: block;
    border-width: 2px;
    width: 100%;
    max-width: calc((100vh - 160px) * 800 / 480);
    aspect-ratio: 800 / 480;
    height: auto;
  }

  /* ── Touch controls strip ───────────────────── */
  #touch-controls {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* プライマリを上端、セカンダリを下端へ */
    flex: 1 0 0;
    min-height: 130px;
    max-height: 160px;
    width: 100%;
    padding: 8px 18px 10px;
    background: rgba(5, 5, 20, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }

  /* ── Primary row: dpad left, FIRE+JUMP right ── */
  #primary-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
  }

  /* ── D-pad (left of primary row) ────────────── */
  #dpad {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-shrink: 0;
  }

  /* ── FIRE + JUMP side by side (right of primary row) */
  #primary-right {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
  }

  /* ── Secondary row: R と 連打 を中央寄せ ──────── */
  #secondary-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }

  /* ── Base button style ──────────────────────── */
  .touch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    /* Remove blue tap flash on iOS */
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: background 60ms, transform 60ms;
  }

  .touch-btn.pressed {
    background: rgba(255, 255, 255, 0.44);
    transform: scale(0.91);
  }

  /* D-pad arrow buttons */
  .dpad-btn {
    font-size: 26px;
  }

  /* Small utility button (R) */
  .btn-sm {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.65);
  }

  .btn-sm.pressed {
    background: rgba(255, 255, 255, 0.32);
    color: #ffffff;
  }

  /* FIRE button — warm orange */
  .btn-fire {
    background: rgba(255, 100, 28, 0.20);
    border-color: rgba(255, 140, 55, 0.52);
    font-size: 13px;
  }

  .btn-fire.pressed {
    background: rgba(255, 100, 28, 0.62);
    transform: scale(0.91);
  }

  /* JUMP button — blue, largest (most-used action) */
  .btn-jump {
    width: 70px;
    height: 70px;
    border-width: 3px;
    background: rgba(51, 136, 255, 0.20);
    border-color: rgba(100, 170, 255, 0.52);
    font-size: 13px;
  }

  .btn-jump.pressed {
    background: rgba(51, 136, 255, 0.62);
    transform: scale(0.91);
  }

  /* ── 連打切り替えボタン ───────────────────────── */
  .btn-rapid {
    width: 56px;
    height: 46px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.45);
  }

  /* ON 状態 — 金オレンジで光らせる */
  .btn-rapid.rapid-on {
    background: rgba(255, 165, 0, 0.28);
    border-color: rgba(255, 210, 0, 0.80);
    color: #ffcc00;
    box-shadow: 0 0 10px rgba(255, 200, 0, 0.45);
  }

  /* タップ時の一瞬フィードバック (ON/OFF 問わず) */
  .btn-rapid.pressed {
    transform: scale(0.91);
    background: rgba(255, 255, 255, 0.28);
  }

  .btn-rapid.rapid-on.pressed {
    background: rgba(255, 165, 0, 0.55);
    transform: scale(0.91);
  }
}

/* ═══════════════════════════════════════════════════════════
   Landscape overrides (narrower viewport height)
   Touch controls: 105 px; canvas height-constrained.
   ═══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) and (max-width: 1024px) and (orientation: landscape) {

  #gameCanvas {
    max-width: calc((100vh - 120px) * 800 / 480);
  }

  #touch-controls {
    min-height: 100px;
    max-height: 120px;
    padding: 6px 14px 8px;
  }

  #secondary-row {
    gap: 40px;
  }

  #dpad {
    gap: 20px;
  }

  #primary-right {
    gap: 10px;
  }

  .touch-btn {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }

  .dpad-btn { font-size: 22px; }

  .btn-sm {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .btn-fire { font-size: 11px; }

  .btn-jump {
    width: 60px;
    height: 60px;
    font-size: 11px;
  }

  .btn-rapid {
    width: 46px;
    height: 37px;
    font-size: 9px;
  }
}