/* ===== 基本テーマ ===== */
* { box-sizing: border-box; }
:root {
  --bg: #0b1220;
  --card: #121a2b;
  --accent: #2dd4bf;
  --muted: #9fb2d3;
  --text: #e9eef7;
  --blue: #60a5fa;

  --pad: 12px;           /* 余白は控えめに */
  --gap: 8px;            /* セクション間の隙間 */
  --btn-pad: 10px 12px;  /* ボタンの内側余白 */
  --font: 14px;          /* ベース文字サイズ */
}

/* 安全領域（iOS等） */
@supports (padding: max(0px)) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100svh;        /* small viewport height を採用（バー表示時でもはみ出さない） */
  overflow: hidden;      /* 画面全体のスクロールを止める */
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: var(--font);
}

/* ===== レイアウト全体 =====
   1画面にピッタリ収めるため、縦フレックス＋キャンバスを 1fr で伸縮 */
.wrap {
  height: calc(100svh - var(--safe-top) - var(--safe-bottom) - var(--global-bar-height));
  padding: calc(var(--pad) + var(--safe-top)) var(--pad) calc(var(--pad) + var(--safe-bottom));
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--gap);

  /* 横幅：少しワイド（最大560px）。幅広くすると縦が伸びるので様子見のバランス */
  width: min(96vw, 560px);
}

/* ===== ヘッダー ===== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.topbar h1 {
  margin: 0;
  font-size: clamp(15px, 2.6vw, 18px);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hud { display: flex; gap: 10px; font-weight: 700; color: var(--accent); }

/* ===== キャンバス =====
   - 内部解像度は 400x600（JS）
   - 表示は aspect-ratio で 2:3 を維持
   - 高さは残りを “すべて” 使ってフィット（スクロールなし） */
#game {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;

  background: linear-gradient(#0a2742, #0f3f63 50%, #0a2742);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  flex: 1 1 auto;  /* ← 残りの縦スペースをすべて使う */
  min-height: 0;   /* フレックス子要素のはみ出し防止 */
}

/* ===== ステータスバー ===== */
.bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.bar-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.bar-fill {
  height: 100%;
  width: 50%;
  background: #22c55e;
  transition: width .15s ease;
}
.bar-fill--blue { background: var(--blue); }

/* ===== 操作ボタン ===== */
.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
}
.controls button {
  padding: var(--btn-pad);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.controls button#btnPause {
  color: #042f2a;
  background: var(--accent);
}

/* ===== ヘルプ＆フッター ===== */
.help {
  color: var(--muted);
  font-size: 12px;
}
.help summary { cursor: pointer; }
.footer {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ===== 画面が低い端末用の“段階的コンパクト化” ===== */
@media (max-height: 720px) {
  :root { --pad: 10px; --gap: 6px; --btn-pad: 9px 10px; --font: 13px; }
  .bar-track { height: 9px; }
  .topbar h1 { font-size: 16px; }
}
@media (max-height: 660px) {
  :root { --pad: 8px; --gap: 6px; --btn-pad: 8px 9px; --font: 12px; }
  .bar-track { height: 8px; }
  .help { font-size: 11px; }
}
@media (max-height: 600px) {
  /* かなり縦が厳しい端末：さらに圧縮 */
  :root { --pad: 6px; --gap: 4px; --btn-pad: 7px 8px; --font: 12px; }
  .topbar h1 { font-size: 15px; }
  .hud { gap: 8px; }
  .bar-track { height: 7px; }
  .help { font-size: 10.5px; }
  /* detailsは閉じたまま想定。開くと収まりません */
}