html, body { margin:0; height:100%; overflow:hidden; background:transparent; }

/* —— ルート：この範囲だけを覆う —— */
.game-root{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;            /* 子のabsoluteがはみ出さない */
  background:#000;            /* ローディング時の下地 */
  aspect-ratio:16/9;          /* ファーストビュー用に比率固定（スマホでも崩れない） */
}

/* Canvas は常にラッパーいっぱい */
#game{position:absolute; inset:0; width:100%; height:100%; display:block}

/* HUDは軽く乗せるだけ */
.hud{
  position:absolute; left:0; right:0; top:6px;
  display:flex; justify-content:center; gap:12px;
  font:700 12px/1.2 system-ui, sans-serif; color:#fff; z-index:3;
  text-shadow:0 2px 4px rgba(0,0,0,.45); pointer-events:none;
}
.hud span{background:rgba(0,0,0,.35); padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.15)}
#hud {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  font-size: clamp(14px, 3vw, 22px); /* 最小14px, 最大22px, 通常は画面幅の3% */
}
/* ハートのアイコン */
.hud .hearts {
  font-size: clamp(16px, 3.5vw, 28px); /* 画面に応じて可変 */
}
/* カウントダウン：ラッパー内のみを覆う（absolute！） */
.countdown{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:#000; z-index:4;
}
.countdown span{font-weight:900; font-size:min(28vw,220px); color:#fff; opacity:1; transition:opacity .35s}
.countdown.fade span{opacity:0}

/* 終了レイヤも absolute でラッパー内限定 */
.over{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:5; background:rgba(0,0,0,.55); backdrop-filter:saturate(110%) blur(2px);
}
.over[hidden]{display:none}
.over-box{
  width:min(92%,720px); padding:16px; border-radius:18px; color:#fff;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); text-align:center
}
.over h2{margin:6px 0 10px; font-size:clamp(18px,6vw,30px)}
.over .big{margin:0 0 10px; font-size:clamp(16px,5vw,24px)}
.over .copy{margin:4px 0 14px; color:#dbe4ff; font-weight:700}
.over .cta{
  display:inline-block; margin-top:6px; padding:10px 16px; border-radius:12px;
  background:#16a34a; color:#fff; text-decoration:none; font-weight:900;
  border:1px solid color-mix(in oklab, #16a34a, #000 35%); opacity:0; pointer-events:none; transition:opacity .3s, transform .2s
}
.over .cta.show{opacity:1; pointer-events:auto}
.over .cta:active{transform:translateY(1px) scale(.99)}

/* 終了レイヤに背景画像（端末で切替） */
.over::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("img/zanp_devlopment2.jpg"); /* PC */
  background-size:cover; background-position:center;
  opacity:.9; z-index:-1;
}
@media (hover:none),(max-width:820px){
  .over::before{ background-image:url("img/main.webp"); } /* スマホ/タブレット */
}

/* コピー帯（3.png のイメージ） */
.over .copy{
  display:inline-block;
  margin:6px 0 14px;
  padding:6px 12px;
  background:#0b5bd3;           /* 濃い青 */
  color:#fff;
  font-weight:900;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

#high {
  display: none;
}