/* ===== レイアウト基礎 ===== */
:root{
  --stage-max-width: 960px; /* JSで更新：キャンバス/HUD幅 */
  --pad-gap: 0px;           /* JSで更新：タッチパッド分の下余白 */
}

html,body{ overflow-x:hidden; }

.cm-wrap{
  max-width: 100%;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

/* ===== HUD（PC=横3分割 / スマホ=縦） ===== */
.cm-hud{
  display:grid;
  grid-template-columns: 1fr auto auto; /* 左=スコア/タイム, 中=FUEL, 右=ボタン */
  gap:10px;
  align-items:center;
  margin:10px 0 12px;
  max-width:var(--stage-max-width);
}
@media (max-width: 640px){
  .cm-hud{ grid-template-columns: 1fr; }
  .cm-controls{ justify-content:center; }
}

.cm-panel{
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:10px; row-gap:6px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:8px 12px; border-radius:12px;
  font-weight:800; min-width:0; max-width:100%;
}
.cm-fuel{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:8px 12px; border-radius:12px;
  min-width:0;
}
.cm-badge{ opacity:.9 }
.ml{ margin-left:8px }

.cm-controls{ display:flex; gap:10px; justify-self:end; }
.cm-controls.center{ justify-content:center }

/* プライマリボタン */
.cm-btn{
  cursor:pointer; border:none; border-radius:999px;
  padding:10px 16px; min-height:40px;
  font-weight:800; letter-spacing:.2px;
  background:linear-gradient(180deg,#ffe08a,#ffbf66); color:#111;
  box-shadow:0 6px 14px rgba(255,166,0,.25), inset 0 -2px 0 rgba(0,0,0,.18);
}
.cm-btn:active{ transform:translateY(1px); filter:brightness(.98) }

/* セカンダリ（ボタン/リンク両対応・半透明グレー背景） */
.cm-btn-quiet,
.cm-btn-quiet:link,
.cm-btn-quiet:visited{
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(50,56,68,0.9); /* 半透明グレー */
  color:#fff; border-radius:999px;
  padding:10px 16px; min-height:40px;
  font-weight:800; text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.18);
}
.cm-btn-quiet:hover{ filter:brightness(1.05); }
.cm-btn-quiet:active{ transform:translateY(1px); filter:brightness(.98) }

.cm-hint{ opacity:.8; text-align:center; }

/* Fuel bar（単独表示・可変幅） */
.cm-bar{
  position:relative;
  flex: 1 1 160px;      /* 余裕があれば広がる/なければ縮む */
  min-width:120px; max-width:320px; height:10px;
  border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18)
}
.cm-bar>i{
  position:absolute; inset:0; width:0%;
  background:linear-gradient(180deg,#86efac,#22c55e);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)
}

/* ===== ステージ（16:9で可変） ===== */
#stage{
  position:relative; width:100%; max-width:var(--stage-max-width); margin:0 auto;
  margin-bottom: var(--pad-gap); /* 下のタッチに被らない余白 */
}
#stage canvas{
  width:100%; aspect-ratio:16/9;
  background:#0f1116; border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  display:block; margin:0 auto;
}

/* ===== オーバーレイ（スタート / リザルト） ===== */
#stage .screen{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
}
/* マスク（半透明グレーバック） → 少し濃く */
#stage .screen::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(12,14,18,0.72);      /* ← 0.55 → 0.72 に濃度アップ */
  -webkit-backdrop-filter: blur(3px);   /* iOS Safari */
  backdrop-filter: blur(3px);
}
/* 非表示 */
#stage .screen.hidden{ display:none; }

/* カード（中央のトースト/パネル） */
#stage .screen .cm-card,
#stage .screen .card{
  position:relative; /* マスクの上に重なる */
  background:rgba(20,24,32,0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.12);
  padding:16px;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  max-width:min(88%, 520px);
  /* 中央より“少し上”に配置（横幅や端末に応じて控えめに） */
  transform: translateY(calc(-1 * min(4vh, 28px)));
}
#stage .screen .cm-card .ttl,
#stage .screen .card .ttl{
  font-size:20px; font-weight:800; margin-bottom:8px; text-align:center;
}
#stage .screen .cm-card .desc,
#stage .screen .card .desc{
  opacity:.92; margin-bottom:14px; text-align:center;
}

/* 同期幅（HUDとステージの最大幅を揃える） */
.top-outside{ max-width:var(--stage-max-width); margin-left:auto; margin-right:auto; }

/* ===== タッチパッド ===== */
.cm-touchpad{
  position:sticky; bottom:0;
  display:flex; gap:16px; justify-content:center; align-items:center;
  margin:12px auto 0; max-width:var(--stage-max-width);
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(15,17,22,0), rgba(15,17,22,.75));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius:12px;
}
.pad-btn{
  -webkit-tap-highlight-color: transparent;
  user-select:none; touch-action:manipulation;
  border:none; border-radius:12px; padding:14px 18px; min-width:84px;
  font-weight:900; font-size:18px; letter-spacing:.5px;
  background:#2c3341; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.pad-btn:active{ transform:translateY(1px); filter:brightness(1.05) }
.pad-btn.round{ border-radius:999px; min-width:84px; }

/* スマホ拡大 */
@media (hover:none) and (pointer:coarse){
  .pad-btn{ padding:18px 22px; min-width:96px; font-size:20px; }
}

/* 極小端末 */
@media (max-width:360px){
  .cm-panel{ column-gap:8px; padding:6px 10px; }
  .cm-bar{ min-width:100px; }
}