/* =========================
  基本
========================= */
*{ box-sizing:border-box; }

/* 全体で画像と文字の選択を禁止 */
body{
  margin:0;
  background:#000;

  /* ★ここが重要：center固定だと specialBar が切れやすい */
  display:flex;
  justify-content:center;
  align-items:flex-start;

  min-height:100dvh;

  -webkit-user-select:none;
  user-select:none;

  overflow:hidden; /* スクロール防止（ゲームなのでOK） */
}

/* 画像の長押し保存や選択を防止 */
img{
  pointer-events:none;
  -webkit-touch-callout:none;
}

#wrap{
  position:relative;
  width:640px;
  max-width:100vw;
  height:100dvh;
  overflow:hidden;
  background:#000;
}

/* =========================
  HUD
========================= */
#hud{
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  height:auto;
  padding:0 20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  z-index:200;
}

.hudGroupLeft{
  display:flex;
  gap:8px;
}

.hudItem{
  display:flex;
  align-items:center;
  gap:6px;
}

.hudItem.right{
  margin-right:5px;
  font-family:'Arial Black', sans-serif;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
  font-size:14px;
}

.icon{
  width:24px;
  height:auto;
}

.glass-effect{
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:12px;
  padding:6px 12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
  color:#fff;
  font-family:'Arial Black', sans-serif;
}

.hudItem .label{
  font-size:10px;
  color:#ffcc00;
  margin-right:5px;
}
.hudItem .unit{
  font-size:12px;
  margin-left:2px;
}

/* =========================
  Canvas
========================= */
canvas{
  display:block;
  background:#fff;
  width:100%;
  height:auto;
  max-height:100dvh;

  position:relative;
  z-index:1;
}

/* =========================
  カウントダウン用オーバレイ
========================= */
#countdown-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.3);
  z-index:500;
}

#countdown-text{
  font-size:120px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 20px #ffcc00, 0 0 40px #ff6600;
  animation:countPop 1s infinite;
}

@keyframes countPop{
  0%{ transform:scale(0.5); opacity:0; }
  20%{ transform:scale(1.2); opacity:1; }
  80%{ transform:scale(1.0); opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* =========================
  ★スペシャルアイテムバー（確実に表示させる本体）
  - play.html では wrap の外にあるので「fixed」にするのが安全 :contentReference[oaicite:3]{index=3}
========================= */
#specialBar{
  position:fixed;          /* ★重要：absolute禁止 */
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:20px;

  z-index:5000;           /* ★canvasより上に必ず出す */
  pointer-events:auto;
}

.spSlot{
  width:72px;
  height:72px;
  border-radius:50%;
  background:#fff;         /* 黒床が透けない */
  border:4px solid #ccc;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  transition:0.2s;
  pointer-events:auto;
}

.spSlot.active{
  border:4px solid #fa4baf;
  box-shadow:0 0 15px #fa4baf;
}

.spSlot img{
  width:60%;
  height:60%;
  object-fit:contain;
  pointer-events:none;
}

#specialBar .spSlot{
  pointer-events:auto;
}

/* =========================
  スマホ用：拡大＆縦を高く
========================= */
@media (max-width:768px){

  #wrap{
    width:100vw;
    height:100dvh;
  }

  canvas{
    width:120vw;
    height:auto;
    max-height:none;

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) scale(1.15);
    touch-action:none;
  }

  #hud{
    top:8px;
    z-index:200;
  }

  #specialBar{
    bottom:14px;
    gap:14px;
  }

.spSlot{
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:0.2s;
}
}


#gameOverPopup{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483647 !important; /* 最大値 */
}

/* スペシャルバーはクリック可能にする */
#specialBar img{
  pointer-events:auto !important;
}