*{
  box-sizing:border-box;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

body{
  margin:0;
  background:#000;
  display:flex;
  justify-content:center;
  padding-top:10px;
  color:#fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

#wrap{
  width:360px;
}

/* =========================
   POP/CASUAL DECORATION
========================= */
#wrap{
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
}
#game{
  border-radius:18px;
  outline:4px solid rgba(255,255,255,.18);
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(255,255,255,.12);
}

/* GAME */
#game{
  position:relative;
  width:360px;
  height:496px;
  background:center/cover no-repeat;
  overflow:hidden;
}

/* フェード */
#fade{
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:.6s;
  z-index:90;
}

/* フラッシュ */
#flash{
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
  z-index:89;
}
#game.flash #flash{
  animation:flash .15s steps(1) infinite;
}
@keyframes flash{
  50%{opacity:.9;}
}

/* =========================
   Fever whole screen rainbow glow (復活)
   - #game.fever の時だけ表示
========================= */
#game::before{
  content:"";
  position:absolute;
  inset:-20px;
  opacity:0;
  pointer-events:none;
  z-index:88; /* fade(90)より下、ゲーム上より上 */
  transition:opacity .25s;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(90deg,
      rgba(255,0,0,.28),
      rgba(255,140,0,.28),
      rgba(255,255,0,.28),
      rgba(0,255,120,.28),
      rgba(0,220,255,.28),
      rgba(80,0,255,.28),
      rgba(255,0,200,.28)
    );
  filter: blur(2px) saturate(1.4);
  background-size: 220% 220%;
}
#game.fever::before{
  opacity:1;
  animation: feverRainbowGlow 1.1s linear infinite;
}
@keyframes feverRainbowGlow{
  0%   { background-position: 0% 0%;   transform: scale(1);   }
  50%  { background-position: 100% 80%; transform: scale(1.01);}
  100% { background-position: 0% 0%;   transform: scale(1);   }
}

/* UI */
#ui{
  position:absolute;
  top:6px;
  width:100%;
  padding:0 10px;
  display:flex;
  justify-content:space-between;
  z-index:60;
  font-size:20px;
  font-weight:900;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
#ui .ui-left, #ui .ui-right{
  padding:6px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}

/* ライフ */
#life{
  position:absolute;
  right:10px;
  bottom:80px;
  z-index:220; /* 木箱より前に */
  font-size:22px;
  padding:6px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}

/* アイテム */
#items{
  position:absolute;
  left:12px;
  bottom:28px; /* もっと下 */
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:260; /* 木箱より前 */
}

/* ===== アイテム枠 ===== */
.itemWrap {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 56px;
}

/* アイコン */
.itemIcon {
  width: 56px;
  height: 56px;
  display: block;
  padding:6px;
  background:rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.14);
}
.itemIcon.clickable{
  cursor:pointer;
  outline:3px solid rgba(255,210,77,.85);
  box-shadow:
    0 0 0 4px rgba(255,210,77,.20),
    0 10px 18px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.16);
}

/* 手りゅう弾だけアクション（少し拡大縮小） */
.grenadePulse{
  animation: grenadePulse .7s ease-in-out infinite;
}
@keyframes grenadePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

/* ===== 個数表示 ===== */
.itemCount {
  position: absolute;
  right: 4px;
  bottom: 2px;

  min-width: 18px;
  height: 18px;
  line-height: 18px;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

  font-size: 12px;
  font-weight: 900;
  text-align: center;

  border-radius: 9px;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* 主人公（木箱より最前面） */
#track{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:170px;
  z-index:240; /* slots(最大100)より上 */
  pointer-events:none;
}
#player{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%) scale(1.2);
  width:126px;
  z-index:241; /* 主人公最前面 */
  cursor:pointer;
}
#player.damage{
  animation:playerBlink .2s steps(1) infinite;
}
@keyframes playerBlink{
  50%{filter:brightness(2) drop-shadow(0 0 8px red);}
}

/* スロット */
.slot{
  position:absolute;
  width:72px;
  transform-origin:top left;
}

/* 敵（箱幅内に収める） */
.enemy{
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(calc(-50% + var(--enemyShift, 0px)),60px);
  opacity:0;
  transition:.25s;
  z-index:1;
  width:64px;
  max-width:100%;
  height:auto;
}
.enemy.show{opacity:1; transform:translate(calc(-50% + var(--enemyShift, 0px)),0);}
.enemy.attack{transform:translate(calc(-50% + var(--enemyShift, 0px)),14px);}
.enemy.downBlink{
  animation:enemyBlink .2s steps(1) infinite;
}
.enemy.fade{opacity:0; transition:.5s;}
@keyframes enemyBlink{
  50%{filter:brightness(2) drop-shadow(0 0 6px red);}
}

/* 攻撃画像は少し小さめ */
.enemy.attackSmall{
  width:56px;
}

/* down画像（小さめ） */
.enemy.downSmall{
  width:56px;
}
/* downをもう少し下に */
.enemy.downSmall2{
  transform:translate(calc(-50% + var(--enemyShift, 0px)), 10px) !important;
}

/* 木箱 */
.box{
  width:100%;
  position:relative;
  z-index:2;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

/* 弾（木箱より最前面） */
.bullet{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:yellow;
  z-index: 280; /* 木箱より前 */
  box-shadow: 0 0 10px rgba(255,255,0,.6);
}
.enemyBullet{
  background:red;
  box-shadow: 0 0 10px rgba(255,0,0,.55);
}

/* メーター */
#meterWrap{
  width:360px;
  height:16px;
  border:2px solid rgba(255,255,255,.18);
  margin-top:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
#meter{
  height:100%;
  width:0%;
  background: yellow; /* 通常時：黄色 */
  transition:width .1s linear;
}

/* フィーバー中だけ虹 */
#meter.rainbow{
  background: linear-gradient(
    90deg,
    red, orange, yellow, green, cyan, blue, violet
  );
  background-size:200% 100%;
  animation: rainbowMove 1s linear infinite;
}
@keyframes rainbowMove {
  from { background-position: 0%  }
  to   { background-position: 100% }
}

/* GAME OVER */
#gameover{
  position:absolute;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  z-index:300;
}
#gameover .bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}
#gameover .panel{
  position:relative;
  width:300px;
  background: linear-gradient(180deg, rgba(30,30,30,.96), rgba(10,10,10,.96));
  border-radius:16px;
  padding:16px;
  text-align:center;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
  border:2px solid rgba(255,255,255,.14);
}
#gameover .panel h2{
  margin:6px 0 10px;
  font-weight:1000;
  letter-spacing:.5px;
}
#gameover .btns{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}
#gameover button{
  border:0;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  color:#111;
  background: linear-gradient(180deg, #ffe25a, #ffb84d);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  cursor:pointer;
}
#gameover button#btnTop{
  background: linear-gradient(180deg, #6be6ff, #3bb6ff);
}

/* =========================
   Fever ☆ frame (上下左右すべて枠内)
   - JSが .edge.top/.bottom/.left/.right を生成
   - ☆★☆ と ★☆★ を上下左右すべて交互点滅
   - 上下左右すべて流れる（移動）演出
========================= */
.feverFrame{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:200; /* 木箱より上（ただし主人公241/弾280より下でもOK） */
  display:none;
}
#game.fever .feverFrame{
  display:block;
}

/* 枠の内側に収める */
.feverFrame .edge{
  position:absolute;
  left:8px;
  right:8px;
  top:8px;
  bottom:8px;
  color:#fff;
  font-weight:1000;
  text-shadow: 0 0 10px rgba(255,255,255,.6), 0 0 20px rgba(255,0,255,.25);
  opacity:1;
}

/* top/bottom */
.feverFrame .edge.top{
  height:28px;
  top:6px;
  left:6px; right:6px;
  bottom:auto;
  overflow:hidden;
}
.feverFrame .edge.bottom{
  height:28px;
  bottom:6px;
  left:6px; right:6px;
  top:auto;
  overflow:hidden;
}

/* left/right */
.feverFrame .edge.left{
  width:28px;
  left:6px;
  top:6px; bottom:6px;
  right:auto;
  overflow:hidden;
}
.feverFrame .edge.right{
  width:28px;
  right:6px;
  top:6px; bottom:6px;
  left:auto;
  overflow:hidden;
}

/* 2パターンを重ねて交互点滅 */
.feverFrame .edge .patternA,
.feverFrame .edge .patternB{
  position:absolute;
  inset:0;
  display:block;
  white-space:nowrap;
  font-size:22px;
  line-height:28px;
  letter-spacing:2px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.45));
}

/* 交互点滅（上下左右すべて同じ） */
#game.fever .feverFrame .edge .patternA{
  animation: starBlinkA .6s steps(1) infinite;
}
#game.fever .feverFrame .edge .patternB{
  animation: starBlinkB .6s steps(1) infinite;
}
@keyframes starBlinkA{ 0%,49%{opacity:1} 50%,100%{opacity:.15} }
@keyframes starBlinkB{ 0%,49%{opacity:.15} 50%,100%{opacity:1} }

/* 上下：横スクロール（☆★☆ ↔ ★☆★ が流れる） */
#game.fever .feverFrame .edge.top .patternA,
#game.fever .feverFrame .edge.top .patternB{
  animation-name: starBlinkA, starMarqueeTop;
  animation-duration: .6s, 1.4s;
  animation-timing-function: steps(1), linear;
  animation-iteration-count: infinite, infinite;
}
#game.fever .feverFrame .edge.bottom .patternA,
#game.fever .feverFrame .edge.bottom .patternB{
  animation-name: starBlinkA, starMarqueeBottom;
  animation-duration: .6s, 1.6s;
  animation-timing-function: steps(1), linear;
  animation-iteration-count: infinite, infinite;
}
#game.fever .feverFrame .edge.top .patternB{
  animation-name: starBlinkB, starMarqueeTop;
}
#game.fever .feverFrame .edge.bottom .patternB{
  animation-name: starBlinkB, starMarqueeBottom;
}

@keyframes starMarqueeTop{
  from{ transform: translateX(0); }
  to  { transform: translateX(-120px); }
}
@keyframes starMarqueeBottom{
  from{ transform: translateX(-120px); }
  to  { transform: translateX(0); }
}

/* 左右：縦スクロール（縦に見えるよう調整） */
.feverFrame .edge.left .patternA,
.feverFrame .edge.left .patternB,
.feverFrame .edge.right .patternA,
.feverFrame .edge.right .patternB{
  white-space:normal;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size:18px;
  line-height:22px;
  letter-spacing:0;
}

#game.fever .feverFrame .edge.left .patternA,
#game.fever .feverFrame .edge.left .patternB{
  animation-name: starBlinkA, starMarqueeLeft;
  animation-duration: .6s, 1.5s;
  animation-timing-function: steps(1), linear;
  animation-iteration-count: infinite, infinite;
}
#game.fever .feverFrame .edge.right .patternA,
#game.fever .feverFrame .edge.right .patternB{
  animation-name: starBlinkA, starMarqueeRight;
  animation-duration: .6s, 1.7s;
  animation-timing-function: steps(1), linear;
  animation-iteration-count: infinite, infinite;
}
#game.fever .feverFrame .edge.left .patternB{
  animation-name: starBlinkB, starMarqueeLeft;
}
#game.fever .feverFrame .edge.right .patternB{
  animation-name: starBlinkB, starMarqueeRight;
}

@keyframes starMarqueeLeft{
  from{ transform: translateY(0); }
  to  { transform: translateY(-60px); }
}
@keyframes starMarqueeRight{
  from{ transform: translateY(-60px); }
  to  { transform: translateY(0); }
}

img, button {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* iOS 長押し禁止 */
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

#stageText{
  position:absolute;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  font-size:22px;
  font-weight:1000;
  text-shadow:0 3px 8px rgba(0,0,0,.7);
}

#clearText{
  position:absolute;
  top:38px; /* STAGEのすぐ下 */
  left:50%;
  transform:translateX(-50%);
  font-size:18px;
  font-weight:900;
  color:#ff2222;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
  z-index:50;
}

@keyframes blink{
  from{opacity:1}
  to{opacity:.4}
}

#nextStageBtn{
  margin-top:10px;
  padding:10px 14px;
  border-radius:14px;
  border:0;
  font-weight:900;
  background:linear-gradient(180deg,#6be6ff,#3bb6ff);
  cursor:pointer;
}
#stageText{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  font-size:26px;
  font-weight:1000;
  color:#fff;
  text-shadow:0 4px 12px rgba(0,0,0,.7);
  z-index:50;
}