* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  background: #0a0a12;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  font-family: 'DotGothic16', 'MS Gothic', monospace;
}

#wrap {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
}

canvas {
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  background: #7ec0ee;
  touch-action: none;
}

/* ダブルタップズーム防止 (メニューのボタンはクリックのみ許可) */
button, .btn, input { touch-action: manipulation; }

/* ---------- overlay UI ---------- */
#ui {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  color: #fff;
  text-align: center;
  z-index: 10;
}
#ui.show { display: flex; }

.panel {
  background: rgba(8, 8, 24, .88);
  border: 4px solid #ffd54a;
  border-radius: 8px;
  padding: 24px 32px;
  max-width: 88%;
  max-height: 92%;
  overflow-y: auto;
  box-shadow: 0 0 0 4px #7a5c00, 0 12px 40px rgba(0,0,0,.6);
}
.panel h1 {
  font-size: clamp(28px, 6vw, 52px);
  color: #ffd54a;
  text-shadow: 3px 3px 0 #b33, 6px 6px 0 rgba(0,0,0,.5);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.panel h2 { color: #ffd54a; font-size: clamp(18px, 4vw, 30px); margin-bottom: 12px; }
.panel p { font-size: clamp(12px, 2.4vw, 17px); line-height: 1.8; margin: 8px 0; }
.panel .sub { color: #9fd8ff; }
.panel .small { font-size: clamp(10px, 1.8vw, 13px); color: #aaa; }

.menu { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; align-items: center; }
.btn {
  font-family: inherit;
  font-size: clamp(15px, 3vw, 22px);
  padding: 10px 34px;
  background: #e33d3d;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 0 #8c1c1c;
  min-width: 220px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8c1c1c; }
.btn.alt { background: #2e7d32; box-shadow: 0 4px 0 #144216; }

input#nameInput {
  font-family: inherit;
  font-size: clamp(16px, 3.4vw, 24px);
  padding: 8px 12px;
  width: 240px;
  text-align: center;
  border: 3px solid #ffd54a;
  border-radius: 6px;
  background: #111;
  color: #fff;
  margin: 10px 0;
}

table.rank { margin: 12px auto 0; border-collapse: collapse; min-width: 280px; }
table.rank td, table.rank th {
  padding: 4px 14px;
  font-size: clamp(12px, 2.4vw, 17px);
  border-bottom: 1px solid #333;
  text-align: left;
}
table.rank td.score { text-align: right; color: #ffd54a; }
table.rank tr.me td { color: #7CFC00; }
.rankNo { color: #9fd8ff; }

/* ---------- touch buttons ---------- */
#touch { display: none; }
body.touchmode #touch { display: block; }
/* メニュー(パネル)表示中はボタンを隠す */
#ui.show ~ #touch { display: none !important; }
.tbtn {
  position: fixed;
  bottom: calc(4vh + env(safe-area-inset-bottom, 0px));
  width: clamp(70px, 16vw, 110px);
  height: clamp(70px, 16vw, 110px);
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 3px solid rgba(255,255,255,.5);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: clamp(9px, 1.8vw, 13px);
  z-index: 20;
  touch-action: none;
}
.tbtn span { font-size: clamp(22px, 5vw, 34px); line-height: 1.1; }
.tbtn.on { background: rgba(255,213,74,.45); border-color: #ffd54a; }
#btnJ { right: 3%; }
#btnA { right: calc(6% + clamp(70px, 16vw, 110px)); }

/* ---------- 縦持ちレイアウト ----------
 * ゲーム画面を上部に寄せ、下の空きスペースに
 * 左手=アタック / 右手=ジャンプ の大きなボタンを置く */
@media (orientation: portrait) {
  #wrap {
    top: calc(env(safe-area-inset-top, 0px) + 10vh);
    transform: translate(-50%, 0);
    /* 縦持ちは視界を狭めてズーム表示 (game.js側で内部解像度640x540に切替) */
    aspect-ratio: 640 / 540;
  }
  .tbtn {
    width: clamp(90px, 26vw, 150px);
    height: clamp(90px, 26vw, 150px);
    bottom: calc(7vh + env(safe-area-inset-bottom, 0px));
    font-size: clamp(11px, 3vw, 15px);
    background: rgba(255,255,255,.10);
  }
  .tbtn span { font-size: clamp(30px, 9vw, 48px); }
  #btnA { left: 7%; right: auto; }
  #btnJ { right: 7%; }
}

/* ---------- system buttons ---------- */
#sysbtns { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 8px; z-index: 30; display: flex; gap: 8px; }
#sysbtns button {
  font-size: 18px;
  width: 40px; height: 40px;
  background: rgba(0,0,0,.35);
  color: #fff;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 8px;
  cursor: pointer;
}