/* ===== みずやんの大冒険 — レイアウト ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #0e1726;
  color: #e8eefc;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#game-wrap {
  position: relative;
  width: min(96vw, 880px);
  max-height: 86vh;
  aspect-ratio: 880 / 480;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 4px #1b2a44, 0 0 0 8px #324a78;
  border-radius: 14px;
  overflow: hidden;
}

canvas#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #7fc7ff;
  image-rendering: auto;
}

#hint {
  font-size: clamp(11px, 1.6vw, 14px);
  color: #9fb3d6;
  text-align: center;
  letter-spacing: 0.02em;
  padding: 0 10px;
}

/* ===== タッチ操作 ===== */
#touch-controls {
  display: none;                 /* タッチ端末でのみ表示 */
  width: min(96vw, 880px);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.pad-left, .pad-right { display: flex; gap: 16px; }

.tbtn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: rgba(30, 48, 80, 0.55);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.2);
  touch-action: none;
}
.tbtn:active { transform: scale(0.92); background: rgba(60, 90, 150, 0.7); }
.tbtn.jump {
  width: 86px; height: 86px; font-size: 16px;
  background: rgba(54, 120, 80, 0.6);
}

/* タッチ端末でだけ操作UIを出す（ゲーム画面の下に配置） */
@media (hover: none) and (pointer: coarse) {
  body { justify-content: flex-start; gap: 10px; padding: 10px 0; }
  /* ゲーム画面はボタンぶんの高さを残して縦横比を保ったまま収める */
  #game-wrap, #touch-controls {
    width: min(96vw, calc((100vh - 132px) * 880 / 480));
    width: min(96vw, calc((100dvh - 132px) * 880 / 480));
  }
  #game-wrap { max-height: none; }
  #touch-controls { display: flex; }
  #hint { display: none; }
}