* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1a1a2e;
  color: #eee;
  font-family: -apple-system, "Hiragino Sans", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; align-items: center; }

/* ===== 上部バー ===== */
#topbar { width: 100%; flex: 0 0 auto; padding: 4px 6px; }
#topbar-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 940px; margin: 0 auto;
}
.title { font-weight: bold; font-size: 16px; letter-spacing: .04em; white-space: nowrap; }
.topbtns { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }

.ui-btn {
  background: #2a2c44; color: #eee; border: 1px solid #444a6a;
  border-radius: 8px; font-size: 18px; width: 40px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
}
.ui-btn:active { background: #3a3d5e; }
.ui-btn.wide { width: auto; padding: 0 18px; height: 40px; font-size: 16px; margin-top: 12px; }

/* ===== HUD ===== */
#hud {
  display: flex; gap: 10px; font-size: 12px;
  flex: 1 1 auto; min-width: 0; overflow: hidden; justify-content: center;
}
.player-info {
  display: flex; gap: 6px; padding: 3px 8px; border-radius: 6px;
  background: #222; align-items: center; white-space: nowrap;
}
#p1-info { border-left: 4px solid #e74c3c; }
#p2-info { border-left: 4px solid #3498db; }
.damage { font-weight: bold; font-variant-numeric: tabular-nums; }
.stocks { color: #ff6b6b; }
.bar-group { display: inline-flex; flex-direction: column; gap: 2px; }
.shield-bar, .super-bar {
  display: inline-block; width: 48px; height: 5px;
  background: #444; border-radius: 3px; overflow: hidden;
}
.shield-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #80d8ff, #4fc3f7); }
.super-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ffd86b, #ff8b3d); }
.super-fill.ready { background: linear-gradient(90deg, #fff, #ffd86b); box-shadow: 0 0 8px #ffd86b; }
.super-row { display: inline-flex; align-items: center; gap: 4px; }
.super-count { font-size: 9px; color: #ffb060; font-variant-numeric: tabular-nums; min-width: 28px; }

#message {
  text-align: center; font-size: 16px; font-weight: bold;
  color: #ffd86b; min-height: 20px; line-height: 20px;
}

/* ===== ステージ ===== */
#stage-wrap { position: relative; flex: 0 0 auto; margin: auto; }
#game {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(#1e1e3f, #4a2545);
  border: 1px solid #555; touch-action: none;
}

/* ===== タッチ操作オーバーレイ ===== */
#touch { position: absolute; inset: 0; pointer-events: none; display: none; }
#pad-left { position: absolute; left: 12px; bottom: 14px; display: flex; gap: 14px; }
#pad-right {
  position: absolute; right: 12px; bottom: 14px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.tbtn {
  pointer-events: auto; touch-action: none;
  border-radius: 50%;
  width: clamp(54px, 15vmin, 86px); height: clamp(54px, 15vmin, 86px);
  font-size: clamp(15px, 4vmin, 22px); font-weight: bold;
  color: #fff; background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.tbtn:active { background: rgba(255, 255, 255, 0.34); }
.tbtn.attack {
  width: clamp(64px, 18vmin, 100px); height: clamp(64px, 18vmin, 100px);
  background: rgba(231, 76, 60, 0.45); border-color: rgba(255, 140, 128, 0.7);
}
.tbtn.jump { background: rgba(80, 200, 120, 0.42); border-color: rgba(150, 240, 180, 0.7); }
.tbtn.special { background: rgba(255, 200, 70, 0.42); border-color: rgba(255, 220, 120, 0.8); }

/* ===== ヘルプモーダル ===== */
#help {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#help.hidden { display: none; }
.help-card {
  background: #20223a; border: 1px solid #444a6a; border-radius: 12px;
  padding: 16px 18px; max-width: 480px; max-height: 86vh; overflow: auto;
  line-height: 1.6; font-size: 14px; text-align: left;
}
.help-card h2 { margin: 0 0 8px; font-size: 18px; color: #ffd86b; }
.help-card p { margin: 6px 0; color: #ccd; }
.help-card b { color: #fff; }

/* 縦持ちでは省スペースのためタイトルを隠す */
@media (orientation: portrait) {
  .title { display: none; }
}