:root {
  --sky-top: #3a7bd5;
  --sky-bottom: #9fd3ff;
  --stone-light: #b3a288;
  --stone: #8a7a66;
  --stone-dark: #5e5245;
  --stone-side: #4a3f33;
  --text: #1d1d1f;
  --weak: #1f9d3a;
  --strong: #d62d2d;
  --gold: #f5b700;
  --panel: #ffffff;
  --floor-h: 72px;
  --floor-w: 88px;
  --depth: 14px;        /* 塔の奥行き（3D感の強さ） */
  --bg-img: none;       /* game.js が背景画像をセットする */
  /* キャラの大きさ：部屋の高さと幅の小さいほうに合わせる（縦長の部屋でもはみ出さない） */
  --u: min(calc(var(--floor-h) * .72), calc(var(--floor-w) * .92));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #1b2a41;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: relative;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  overflow: hidden;
}

/* ===== HUD ===== */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 8px rgba(0, 0, 0, .25);
}
.hud-level { flex: 1; font-size: 20px; line-height: 1.1; }
.hud-world { font-size: 11px; font-weight: 700; opacity: .95; }
.hud-btn {
  min-width: 58px;
  height: 40px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(#4f86e8, #2458b8);
  border: 0;
  border-radius: 12px;
  padding: 0 8px;
  box-shadow: 0 4px 0 #173a7a;
  cursor: pointer;
  text-shadow: none;
}
.hud-btn.small { min-width: 40px; }
.hud-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #173a7a; }
.hud-btn:disabled { filter: grayscale(1) brightness(.8); cursor: default; }
#undo-count { font-size: 13px; margin-left: 2px; }

/* ゲーム画面以外では HUD などを隠す */
#app:not([data-screen="game"]) .hud,
#app:not([data-screen="game"]) .minimap,
#app:not([data-screen="game"]) .hint,
#app:not([data-screen="game"]) .tip { display: none; }

/* ===== ミニマップ ===== */
.minimap {
  position: absolute;
  top: 62px;
  left: 50%;
  z-index: 8;
  width: min(300px, calc(100% - 32px));
  height: 30px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  cursor: pointer;
  overflow: hidden;
}
.minimap-view {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 6px;
}
.mm-dot {
  position: absolute;
  width: 5px;
  height: 4px;
  margin-left: -2.5px;
  border-radius: 1px;
  background: #fff;
}
.mm-dot.weak { background: #4fd46a; }
.mm-dot.strong { background: #ff5a5a; }
.mm-dot.potion, .mm-dot.double { background: #ffd23f; }
.mm-dot.bomb, .mm-dot.poison { background: #c86bff; }
.mm-dot.boss { width: 8px; height: 6px; margin-left: -4px; box-shadow: 0 0 4px #ff5a5a; }
.mm-dot.cleared { display: none; }
.mm-dot.hero-dot {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #5b9bff;
  box-shadow: 0 0 0 2px #fff;
  transition: left .4s;
}

/* ===== ヒント・チュートリアル ===== */
.tip {
  position: absolute;
  top: 100px;
  left: 50%;
  z-index: 9;
  width: min(340px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  animation: panelIn .3s;
  cursor: pointer;
}
.tip.hidden { display: none; }
.weak-text { color: var(--weak); font-weight: 900; }
.tutorial-hand {
  position: absolute;
  z-index: 20;
  width: 64px;
  pointer-events: none;
  transform: translate(-10%, 10%) rotate(-20deg);
  animation: tapHand 1s ease-in-out infinite;
}
.tutorial-hand.hidden { display: none; }
@keyframes tapHand {
  0%, 100% { margin-top: 18px; }
  50% { margin-top: 0; }
}

/* ===== ステージ（スマホに映る窓） ===== */
#stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  touch-action: pan-y;   /* 横スワイプはゲーム側でカメラ移動に使う */
  cursor: grab;
}
#stage.dragging { cursor: grabbing; }

/* 奥行きレイヤー：遠いものほどゆっくり動く（多重スクロール） */
.layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
}
#bg-far {
  width: 100%;
  background: var(--bg-img) center bottom / cover no-repeat;
}
#bg-mid .decor {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25));
}
#bg-mid .decor.cloud { opacity: .85; filter: none; }

/* 地面（手前に厚みのある板） */
#stage::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background: linear-gradient(#8cc85a 0 8px, #5b8c3a 8px, #3f6828);
  box-shadow: 0 -2px 0 rgba(255, 255, 255, .35) inset;
  z-index: 1;
}

/* ステージ本体（横に広い）。カメラ位置は transform で動かす */
#world {
  position: absolute;
  top: 0;
  bottom: 34px;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--tower-gap, 40px);
  padding: 0 60px 0 20px;
  will-change: transform;
}

/* 画面の外にまだ敵がいる方向を知らせる矢印 */
.edge-arrow {
  position: absolute;
  top: 45%;
  z-index: 6;
  width: 44px;
  height: 60px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-size: 22px;
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
  animation: nudge 1s ease-in-out infinite;
}
.edge-arrow.left { left: 6px; --dir: -1; }
.edge-arrow.right { right: 6px; --dir: 1; }
.edge-arrow.hidden { display: none; }
@keyframes nudge {
  50% { transform: translateX(calc(var(--dir) * 5px)); }
}

/* ===== 3D の塔（斜投影：正面 + 右側面 + 上面） ===== */
.home-tower,
.tower {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: 6px 6px 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(0, 0, 0, .08) 18px 20px),
    linear-gradient(90deg, var(--stone-light), var(--stone) 55%, var(--stone-dark));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25);
}
/* 敵の塔はワールドごとの壁の模様（石・木・氷・溶岩）＋左右の陰影で立体感 */
.tower {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 35%, rgba(0, 0, 0, .35)),
    var(--wall-img, none) center / calc(var(--floor-w) * .5) repeat,
    var(--stone);
}
/* 塔の屋根 */
.roof {
  position: absolute;
  bottom: calc(100% + var(--depth) - 10px);
  left: 50%;
  width: calc(var(--floor-w) * 1.2);
  transform: translateX(-46%);
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3));
}
/* 右側面 */
.home-tower::after,
.tower::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: var(--depth);
  height: 100%;
  background: linear-gradient(var(--stone-dark), var(--stone-side));
  transform-origin: 0 0;
  transform: skewY(-45deg);
}
/* 上面 */
.home-tower::before,
.tower::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: var(--depth);
  background: linear-gradient(color-mix(in srgb, var(--stone-light) 75%, #fff), var(--stone-light));
  transform-origin: 0 100%;
  transform: skewX(-45deg);
}
.home-tower {
  --stone-light: #8fb3d9;
  --stone: #6d8fb3;
  --stone-dark: #45617f;
  --stone-side: #33485f;
}
.home-tower::before { background: linear-gradient(#b5d0ec, #8fb3d9); }

.enemies {
  display: flex;
  align-items: flex-end;
  gap: var(--tower-gap, 40px);
}

/* 各階は壁にくぼんだ部屋のように見せる */
.floor {
  position: relative;
  width: var(--floor-w);
  height: var(--floor-h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(#b89f78, #e3d2b0 70%, #cbb690);
  box-shadow:
    inset 0 8px 12px rgba(0, 0, 0, .45),
    inset 6px 0 8px rgba(0, 0, 0, .2),
    0 1px 0 rgba(255, 255, 255, .3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4px;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.floor.home { background: linear-gradient(#89a9c9, #c3daf0 70%, #a6c1dd); cursor: default; }
.floor.cleared { filter: saturate(.5) brightness(.8); cursor: default; }
.floor.cleared .unit { display: none; }
.floor:not(.cleared):not(.home):hover { filter: brightness(1.12); }
.floor:not(.cleared):not(.home):active { transform: scale(.96); }

/* ===== ユニット（敵・アイテム・ヒーロー共通） ===== */
.unit {
  position: relative;
  z-index: 4;          /* はしご（塔の中で z-index 3）より手前。大きな数字の頭がはしごに隠れないように */
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  pointer-events: none;
}
/* 足元の影 */
.unit::before {
  content: '';
  position: absolute;
  bottom: calc(var(--floor-h) * .2);
  left: 50%;
  width: calc(var(--floor-h) * .55);
  height: calc(var(--floor-h) * .12);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(rgba(0, 0, 0, .45), transparent 70%);
  z-index: -1;
}
.unit .emoji {
  font-size: calc(var(--u) * .66);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35));
}
.unit .sprite {
  display: block;
  width: var(--u);
  height: var(--u);
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .4));
}
.unit.boss .sprite { width: calc(var(--u) * 1.18); height: calc(var(--u) * 1.18); }
.unit.boss .emoji { font-size: calc(var(--u) * .83); }

/* 待機中はふわふわ動く */
.floor:not(.cleared) .unit .emoji,
.floor:not(.cleared) .unit .sprite {
  animation: bob 1.8s ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}

.unit .val {
  margin-top: -2px;
  font-size: calc(var(--u) * .3);
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(#ff5a5a, var(--strong));
  box-shadow: 0 2px 0 #8a1414, inset 0 1px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.unit.weak .val { background: linear-gradient(#4fd46a, var(--weak)); box-shadow: 0 2px 0 #0f5e21, inset 0 1px 0 rgba(255, 255, 255, .4); }
.unit.item .val { background: linear-gradient(#ffe066, var(--gold)); color: #3b2a00; box-shadow: 0 2px 0 #9a7200, inset 0 1px 0 rgba(255, 255, 255, .6); text-shadow: none; }
.unit.trap .val { background: linear-gradient(#b77cff, #7a3bd1); box-shadow: 0 2px 0 #45207a, inset 0 1px 0 rgba(255, 255, 255, .4); }
.unit.trap.deadly .val { background: linear-gradient(#ff5a5a, var(--strong)); box-shadow: 0 2px 0 #8a1414; }
.unit.dying { animation: die calc(.35s * var(--spd, 1)) forwards; }

/* ボスの塔の上：檻に入ったお姫様 */
.captive {
  position: absolute;
  bottom: calc(100% + var(--depth) + 2px);
  left: 50%;
  width: calc(var(--floor-w) * 1.05);
  height: calc(var(--floor-w) * 1.05);
  transform: translateX(-50%);
  pointer-events: none;
}
.captive img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.captive .princess { z-index: 1; transform: scale(.78) translateY(10%); filter: drop-shadow(0 0 6px rgba(255, 220, 240, .9)); }
.captive .cage { z-index: 2; opacity: .8; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4)); }
.captive.freed .cage { animation: cageBreak .6s forwards; }
.captive.freed .princess { animation: princessJoy .8s ease-in-out infinite; }
@keyframes cageBreak {
  30% { transform: scale(1.15) rotate(-6deg); }
  100% { transform: scale(.4) translateY(80%) rotate(40deg); opacity: 0; }
}
@keyframes princessJoy {
  0%, 100% { transform: scale(.85) translateY(0); }
  50% { transform: scale(.85) translateY(-18%); }
}

/* 💣 で画面が揺れる */
#stage.shake #world { animation: stageShake calc(.4s * var(--spd, 1)); }
@keyframes stageShake {
  20% { margin-left: -10px; margin-top: 4px; }
  40% { margin-left: 8px; margin-top: -4px; }
  60% { margin-left: -6px; }
  80% { margin-left: 4px; }
}

.hero {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  transform: translate(-50%, -62%);
  transition: left var(--move-ms, 320ms) ease-in-out, top var(--move-ms, 320ms) ease-in-out;
}
.hero .val { background: linear-gradient(#5b9bff, #2466d8); box-shadow: 0 2px 0 #123b85, inset 0 1px 0 rgba(255, 255, 255, .4); }
.hero .emoji, .hero .sprite { animation: bob 1.4s ease-in-out infinite; }
.hero.jump .emoji, .hero.jump .sprite { animation: jump var(--move-ms, 320ms) ease-in-out; }
.hero.fight { animation: shake .3s; }
.hero.grow .emoji, .hero.grow .sprite { animation: grow .35s; }
.hero.dying { animation: heroDie .6s forwards; }

/* ===== 演出 ===== */
.fx {
  position: absolute;
  z-index: 9;
  width: calc(var(--floor-h) * 1.3);
  height: calc(var(--floor-h) * 1.3);
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: fxPop calc(.6s * var(--spd, 1)) ease-out forwards;
}
@keyframes fxPop {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--fx-rot, 0deg)) scale(calc(var(--fx-scale, 1) * .3)); }
  25% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--fx-rot, 0deg)) scale(calc(var(--fx-scale, 1) * 1.1)); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--fx-rot, 0deg)) scale(calc(var(--fx-scale, 1) * 1.4)); }
}

/* ===== 撃破演出 ===== */
/* 火花・光の玉は JS の animate() で動かす */
.spark, .orb {
  position: absolute;
  z-index: 11;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 6px 2px rgba(255, 220, 120, .8);
}
.orb {
  width: 14px;
  height: 14px;
  background: radial-gradient(#fff 0 30%, #7fe0ff 45%, #3a8bff 70%, transparent 72%);
  box-shadow: 0 0 10px 4px rgba(90, 180, 255, .75);
}
/* 吹き飛ぶ敵（複製した絵） */
.ko-ghost {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  object-fit: contain;
  animation: none !important;
}
.unit.ko .sprite, .unit.ko .emoji, .unit.ko .val { visibility: hidden; }
/* 斬られた瞬間に白く光る */
.unit.hit .sprite, .unit.hit .emoji { filter: brightness(4) saturate(0) drop-shadow(0 0 8px #fff); }
/* 画面全体の白いフラッシュ（クリティカル） */
.flash { position: absolute; inset: 0; z-index: 15; background: #fff; pointer-events: none; }

/* ヒーローの踏み込み・吸収 */
.hero.lunge .sprite, .hero.lunge .emoji { animation: lunge calc(.22s * var(--spd, 1)) ease-out forwards; }
@keyframes lunge {
  0% { transform: translateX(0) rotate(0) scale(1); }
  40% { transform: translateX(-8px) rotate(-8deg) scale(1.05); }
  100% { transform: translateX(22px) rotate(10deg) scale(1.15); }
}
.hero.absorb .sprite, .hero.absorb .emoji { animation: absorbGlow calc(.25s * var(--spd, 1)) ease-out; }
@keyframes absorbGlow {
  0% { filter: brightness(1.8) drop-shadow(0 0 10px #7fe0ff); transform: scale(1.12); }
  100% { filter: none; transform: scale(1); }
}

/* 通常ヒットの小さな揺れ */
#stage.shake-small #world { animation: stageShakeSmall calc(.18s * var(--spd, 1)); }
@keyframes stageShakeSmall {
  33% { margin-left: -4px; margin-top: 2px; }
  66% { margin-left: 3px; margin-top: -1px; }
}

.pop {
  position: absolute;
  z-index: 10;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: 900;
  color: #fff6c2;
  text-shadow: 0 1px 0 #c98a00, 0 2px 0 #b07800, 0 3px 0 #8f6200, 0 5px 6px rgba(0, 0, 0, .45);
  pointer-events: none;
  animation: pop calc(.8s * var(--spd, 1)) forwards;
}
.pop.bad {
  color: #ffe0e0;
  text-shadow: 0 1px 0 #c22, 0 2px 0 #a11, 0 3px 0 #800, 0 5px 6px rgba(0, 0, 0, .45);
}
.pop.big { font-size: 40px; }
.pop.crit, .pop.combo {
  z-index: 13;
  white-space: nowrap;
  animation: popStamp calc(1.1s * var(--spd, 1)) forwards;
}
.pop.crit {
  font-size: 34px;
  color: #fff;
  -webkit-text-stroke: 1.5px #b30000;
  text-shadow: 0 2px 0 #ff3b3b, 0 4px 0 #b30000, 0 6px 0 #700, 0 0 16px rgba(255, 80, 0, .9);
}
.pop.combo {
  margin-top: -44px;
  font-size: 22px;
  color: #ffe066;
  text-shadow: 0 2px 0 #b06a00, 0 4px 0 #6b3f00, 0 0 10px rgba(255, 200, 0, .8);
}
@keyframes popStamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(-8deg); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(.9) rotate(-4deg); }
  25% { transform: translate(-50%, -50%) scale(1.05) rotate(-4deg); }
  75% { opacity: 1; transform: translate(-50%, -80%) scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(.9) rotate(-4deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes jump {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-34px) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes grow {
  50% { transform: scale(1.35); }
}
@keyframes die {
  to { transform: scale(0) rotate(90deg); opacity: 0; }
}
@keyframes heroDie {
  to { transform: translate(-50%, 40%) rotate(180deg); opacity: 0; }
}
@keyframes shake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -6px; }
  75% { margin-left: 6px; }
}
@keyframes pop {
  0% { opacity: 0; margin-top: 0; transform: translate(-50%, -50%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; margin-top: -54px; transform: translate(-50%, -50%) scale(1); }
}

.hint {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 7;
  pointer-events: none;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ===== オーバーレイ ===== */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
}
.overlay.hidden { display: none; }
.panel {
  width: min(300px, calc(100% - 32px));
  background: linear-gradient(#fff, #eef3ff);
  border-radius: 18px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 8px 0 #9fb3d9, 0 16px 30px rgba(0, 0, 0, .35);
  animation: panelIn .3s;
}
.panel-title {
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 8px;
  color: #ffd23f;
  text-shadow: 0 1px 0 #d99a00, 0 2px 0 #c28800, 0 3px 0 #a67300, 0 4px 0 #7a5400, 0 6px 8px rgba(0, 0, 0, .3);
}
.panel-body { font-size: 16px; margin-bottom: 20px; line-height: 1.6; }
.panel-body b { font-size: 26px; color: #2458b8; }
.panel-body b.need { color: var(--strong); }
.sub-line { display: block; font-size: 13px; color: #555; }
.coin-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 2px 12px;
  border-radius: 99px;
  background: #fff3c4;
  font-weight: 900;
  color: #8a6100;
}
.coin-line img { width: 26px; }
.panel-btns { display: flex; flex-direction: column; gap: 12px; }
.panel-btn.sub { font-size: 15px; background: linear-gradient(#9aa7bd, #6b7890); box-shadow: 0 5px 0 #475163; }
.panel-btn:disabled { filter: grayscale(1); opacity: .6; }
/* クリア画面の下の小さなリンク（感想ページ。セーブ済みなので同じタブで開く） */
.panel-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 800; color: #2458b8; text-decoration: none; }
.panel-link.hidden { display: none; }
.stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 6px; }
.stars.hidden { display: none; }
.stars img { width: 60px; height: 60px; object-fit: contain; }
.stars img:nth-child(2) { transform: translateY(-10px); }
.stars img.got { animation: starGet .4s; }
@keyframes starGet {
  0% { transform: scale(0); }
  70% { transform: scale(1.3); }
}

/* 紙吹雪 */
.confetti { position: absolute; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translate(var(--drift), 110dvh) rotate(720deg); }
}

.panel-btn {
  width: 100%;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(#5b9bff, #2466d8);
  border: 0;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 5px 0 #173a7a;
  cursor: pointer;
}
.panel-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #173a7a; }
@keyframes panelIn {
  from { transform: scale(.7) rotateX(40deg); opacity: 0; }
}

/* ===== タイトル・ステージ選択・ショップ ===== */
.screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  background:
    linear-gradient(rgba(20, 40, 90, .25), rgba(20, 40, 90, .55)),
    url("img/backgrounds/meadow_castle.webp") center / cover;
  color: #fff;
}
.screen.hidden { display: none; }

#title { justify-content: center; gap: 8px; padding: 24px 16px; }
.logo {
  margin: 0;
  font-size: 58px;
  line-height: 1;
  text-align: center;
  font-weight: 900;
  color: #ffd23f;
  letter-spacing: .04em;
  transform: rotate(-4deg);
  text-shadow: 0 2px 0 #d99a00, 0 4px 0 #b07800, 0 6px 0 #8f6200, 0 8px 0 #6b4a00, 0 12px 18px rgba(0, 0, 0, .5);
  -webkit-text-stroke: 2px #fff;
}
.title-hero {
  width: min(56vw, 220px);
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .4));
  animation: bob 1.8s ease-in-out infinite;
}
.title-btns { display: flex; flex-direction: column; gap: 14px; width: min(300px, 100%); }
/* 背の低い画面（iPhone SE など）では王さまを小さくして、ボタンとリンクまで1画面に収める */
@media (max-height: 700px) {
  #title .logo { font-size: 50px; }
  .title-hero { width: min(56vw, 220px, 22vh); }
  .title-links .a2hs-btn { padding: 6px 10px; font-size: 13px; }
  .title-links .games-btn { padding: 6px 8px; font-size: 13px; }
}
.big-btn {
  font-size: 22px;
  font-weight: 900;
  padding: 14px;
  color: #fff;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(#5b9bff, #2466d8);
  box-shadow: 0 6px 0 #173a7a, 0 10px 16px rgba(0, 0, 0, .3);
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.big-btn.green { background: linear-gradient(#4fd46a, #1f9d3a); box-shadow: 0 6px 0 #0f5e21, 0 10px 16px rgba(0, 0, 0, .3); }
.big-btn.gold { background: linear-gradient(#ffd23f, #e39b00); box-shadow: 0 6px 0 #8f6200, 0 10px 16px rgba(0, 0, 0, .3); }
.big-btn:active { transform: translateY(4px); }
.title-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 14px 4px 6px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .35);
  font-size: 20px;
  font-weight: 900;
}
.title-coins img { width: 32px; }
.title-coins.inline { margin: 0 0 0 auto; font-size: 16px; }
.title-coins.inline img { width: 26px; }

.screen-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: rgba(20, 40, 90, .75);
  backdrop-filter: blur(4px);
}
.screen-head h2 { margin: 0; font-size: 20px; }

.select-list { width: 100%; padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.world-sec {
  border-radius: 16px;
  padding: 10px;
  background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)), var(--wbg) center / cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.world-sec h3 { margin: 0 0 8px; font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; }
.world-sec h3 small { font-size: 12px; opacity: .85; }
.lv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lv-btn {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(#5b9bff, #2466d8);
  box-shadow: 0 4px 0 #173a7a;
  cursor: pointer;
}
.lv-btn.current { background: linear-gradient(#ffd23f, #e39b00); box-shadow: 0 4px 0 #8f6200; animation: nudgeUp 1s ease-in-out infinite; }
.lv-btn.locked { background: rgba(255, 255, 255, .25); box-shadow: none; font-size: 18px; cursor: default; }
.lv-stars { font-size: 10px; color: #ffd23f; letter-spacing: -1px; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
@keyframes nudgeUp { 50% { transform: translateY(-3px); } }

.shop-list { width: 100%; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.shop-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.shop-card > img { width: 64px; height: 64px; object-fit: contain; }
.shop-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.shop-info span { font-size: 12px; color: #2458b8; font-weight: 900; }
.shop-info small { font-size: 12px; color: #555; }
.buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 90px;
  justify-content: center;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(#4fd46a, #1f9d3a);
  box-shadow: 0 4px 0 #0f5e21;
  cursor: pointer;
}
.buy-btn img { width: 22px; }
.buy-btn:disabled { filter: grayscale(1); opacity: .6; cursor: default; }
.shop-note { font-size: 13px; text-align: center; padding: 0 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* 感想ページへのリンク（見た目は「ホーム画面に追加」ボタンと同じ） */
.feedback-btn {
  margin: 4px 0 calc(20px + env(safe-area-inset-bottom));
  padding: 8px 16px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 99px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}
.feedback-btn:active { transform: translateY(2px); }

/* ===== 手前の飾り（ステージより速く動く） ===== */
.fg { z-index: 4; }
.fg .decor {
  position: absolute;
  bottom: -6px;
  object-fit: contain;
  filter: brightness(.8) drop-shadow(0 4px 4px rgba(0, 0, 0, .35));
}

/* ===== 速さボタン ===== */
#speed-btn { font-size: 15px; letter-spacing: -3px; }
#speed-btn.on { background: linear-gradient(#ffd23f, #e39b00); box-shadow: 0 4px 0 #8f6200; }

/* ===== 先行入力・ヒント ===== */
.floor.queued { box-shadow: inset 0 0 0 3px #5b9bff, inset 0 8px 12px rgba(0, 0, 0, .45); }
.floor.hinted { animation: hintPulse 1s ease-in-out infinite; }
@keyframes hintPulse {
  50% { box-shadow: inset 0 0 0 4px #ffd23f, 0 0 18px 6px rgba(255, 210, 63, .9); }
}
.hint-line {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7d6;
  font-size: 14px;
  line-height: 1.5;
}
.hint-line b { font-size: 16px; color: #b35c00; }

/* ===== 色だけに頼らない表示：勝てる敵は ⚔、勝てない敵は 🔒 ===== */
.unit.mon .val::before { content: '🔒'; font-size: .75em; margin-right: 2px; }
.unit.mon.weak .val::before { content: '⚔'; }
.unit.trap.deadly .val::before { content: '⚠'; font-size: .8em; margin-right: 2px; }
/* 桁の多い数字は小さく・横の余白をつめて、部屋の幅に収める（頭の数字が隠れないように） */
.unit .val { white-space: nowrap; }
.unit .val[data-len="5"] { font-size: calc(var(--u) * .26); padding: 2px 5px; }
.unit .val[data-len="6"] { font-size: calc(var(--u) * .23); padding: 2px 4px; }
.unit .val[data-len="7"], .unit .val[data-len="8"] { font-size: calc(var(--u) * .2); padding: 2px 3px; }

/* ===== ボス ===== */
.hpbar {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 2;
  width: 90%;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 1.5px #fff;
  overflow: hidden;
}
.hpbar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(#ff7a7a, #d62d2d);
  transition: width calc(.3s * var(--spd, 1)) ease-out;
}
.unit.boss .sprite { filter: drop-shadow(0 0 6px rgba(255, 60, 60, .7)) drop-shadow(0 4px 3px rgba(0, 0, 0, .4)); }
.unit.mega .sprite { transform-origin: 50% 100%; scale: 1.35; }
.unit.mega .hpbar { top: -30px; }
.unit.enrage .sprite { animation: enrage .25s ease-in-out infinite !important; }
@keyframes enrage {
  50% { transform: scale(1.12); filter: drop-shadow(0 0 14px #ff2020) brightness(1.2); }
}
.unit.recoil .sprite { animation: recoil calc(.3s * var(--spd, 1)) ease-out !important; }
@keyframes recoil {
  30% { transform: translateX(12px) rotate(8deg); }
}
.warning {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(transparent 30%, rgba(120, 0, 0, .55));
  pointer-events: none;
  animation: warnFade calc(1s * var(--spd, 1)) forwards;
}
.warning span {
  padding: 6px 0;
  width: 100%;
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: .15em;
  color: #fff;
  background: repeating-linear-gradient(-45deg, rgba(200, 0, 0, .85) 0 14px, rgba(40, 0, 0, .85) 14px 28px);
  text-shadow: 0 0 10px #ff2020, 0 3px 0 #700;
  animation: warnBlink calc(.25s * var(--spd, 1)) steps(2) infinite;
}
.warning small { margin-top: 6px; font-size: 18px; font-weight: 900; color: #ffd0d0; letter-spacing: .4em; }
@keyframes warnBlink { 50% { opacity: .55; } }
@keyframes warnFade {
  0% { opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== タイトルのロゴ登場 ===== */
.logo { animation: logoDrop .9s cubic-bezier(.3, 1.6, .5, 1) both, logoFloat 3s ease-in-out .9s infinite; }
@keyframes logoDrop {
  0% { transform: translateY(-120%) rotate(-4deg) scale(1.6); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(0) rotate(-4deg) scale(1); }
}
@keyframes logoFloat {
  50% { transform: translateY(-6px) rotate(-3deg); }
}
.title-hero { animation: heroPop .7s .5s cubic-bezier(.3, 1.6, .5, 1) both, bob 1.8s ease-in-out 1.2s infinite; }
@keyframes heroPop { from { transform: scale(0); opacity: 0; } }
.title-btns .big-btn { animation: btnIn .5s both; }
.title-btns .big-btn:nth-child(1) { animation: btnIn .5s .8s both, pulse 1.4s ease-in-out 1.4s infinite; }
.title-btns .big-btn:nth-child(2) { animation-delay: .9s; }
.title-btns .big-btn:nth-child(3) { animation-delay: 1s; }
@keyframes btnIn { from { transform: translateY(30px); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.05); } }

/* ===== 移動ルール：行ける部屋・行けない部屋・橋 ===== */
.floor.far { filter: brightness(.55) saturate(.7); cursor: not-allowed; }
.floor.far .unit .sprite, .floor.far .unit .emoji { animation-play-state: paused; }
.floor.open { animation: openGlow 1.6s ease-in-out infinite; }
@keyframes openGlow {
  50% { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), inset 0 8px 12px rgba(0, 0, 0, .35), 0 0 12px 2px rgba(255, 240, 160, .7); }
}
.floor.nope { animation: nope .35s; }
@keyframes nope {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
/* 隣の塔の同じ階どうしをつなぐ橋（両端に柱） */
.bridge {
  position: absolute;
  z-index: 1;
  height: 12px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, #a8733f 0 9px, #7a4f26 9px 11px),
    #8d5d30;
  box-shadow: 0 3px 0 #4f3218, 0 5px 6px rgba(0, 0, 0, .35);
  filter: brightness(.6) saturate(.6);
  pointer-events: none;
  transition: filter .3s;
}
.bridge::before, .bridge::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 26px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #8d5d30, #5e3c1c);
}
.bridge::before { left: -2px; }
.bridge::after { right: -2px; }
/* 通った橋は明るく */
.bridge.used { filter: none; }
.mm-dot.far { opacity: .35; }

/* ===== ？ボックス ===== */
.qbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * .78);
  height: calc(var(--u) * .78);
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: calc(var(--u) * .53);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 #8a4b00, 0 0 6px rgba(255, 255, 255, .8);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .7) 0 12%, transparent 13%),
    linear-gradient(135deg, #ffe066, #f5a300 60%, #c97800);
  box-shadow:
    inset 0 0 0 3px #fff3b0, inset -4px -5px 0 rgba(0, 0, 0, .2),
    0 4px 0 #8a4b00, 0 0 14px rgba(255, 210, 63, .8);
}
.floor:not(.far) .qbox { animation: qboxGlow 1.4s ease-in-out infinite; }
@keyframes qboxGlow {
  50% { transform: translateY(-4px) rotate(-4deg); box-shadow: inset 0 0 0 3px #fff3b0, inset -4px -5px 0 rgba(0, 0, 0, .2), 0 8px 0 #8a4b00, 0 0 22px rgba(255, 230, 120, 1); }
}
.qbox.roulette { animation: none !important; box-shadow: 0 0 0 3px #fff, 0 0 14px 4px rgba(255, 214, 80, .9); }
.qbox.roulette img { width: 80%; height: 80%; object-fit: contain; }
.qbox.roulette.stop { transform: scale(1.15); transition: transform .15s; }
.qbox.shaking { animation: qboxShake calc(.42s * var(--spd, 1)) ease-in-out !important; }
@keyframes qboxShake {
  15% { transform: rotate(-14deg) scale(1.05); }
  30% { transform: rotate(12deg) scale(1.1); }
  45% { transform: rotate(-10deg) scale(1.15); }
  60% { transform: rotate(8deg) scale(1.2); }
  100% { transform: scale(1.6); opacity: 0; filter: brightness(3); }
}
.unit.mystery .val { background: linear-gradient(#ffe066, #f5a300); color: #6b3f00; box-shadow: 0 2px 0 #8a4b00; text-shadow: none; }
.unit.mystery.revealed .sprite, .unit.mystery.revealed .emoji { animation: revealPop calc(.4s * var(--spd, 1)) cubic-bezier(.3, 1.8, .5, 1) !important; }
.unit.mystery.bad .val { background: linear-gradient(#b77cff, #7a3bd1); color: #fff; }
@keyframes revealPop {
  from { transform: scale(0) translateY(20px); }
}
.mm-dot.mystery { background: #ffb300; box-shadow: 0 0 3px #fff; }

/* ===== はしご（同じ塔の上下をつなぐ） ===== */
.ladder {
  position: absolute;
  z-index: 3;
  width: 16px;
  pointer-events: none;
  background:
    linear-gradient(90deg, #7a4f26 0 3px, transparent 3px 13px, #7a4f26 13px 16px),
    repeating-linear-gradient(0deg, transparent 0 7px, #a8733f 7px 10px);
  filter: brightness(.6) saturate(.6) drop-shadow(1px 2px 1px rgba(0, 0, 0, .4));
  transition: filter .3s;
}
.ladder.used { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .4)); }

/* ===== お姫様の吹き出し ===== */
.speech {
  position: absolute;
  z-index: 12;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 8px 14px;
  border-radius: 16px;
  background: #fff;
  border: 3px solid #ff7eb6;
  font-size: 18px;
  font-weight: 900;
  color: #d6336c;
  white-space: nowrap;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
  pointer-events: none;
  animation: speechPop .35s cubic-bezier(.3, 1.8, .5, 1), speechWiggle 1s ease-in-out .35s infinite;
}
.speech::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #ff7eb6;
}
@keyframes speechPop { from { transform: translate(-50%, calc(-100% - 12px)) scale(0); } }
@keyframes speechWiggle { 50% { transform: translate(-50%, calc(-100% - 16px)) rotate(-2deg); } }

/* ===== ステージ開始バナー ===== */
.stage-banner {
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  z-index: 13;
  padding: 10px 16px 12px;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, transparent, rgba(20, 40, 90, .85) 15%, rgba(20, 40, 90, .85) 85%, transparent);
  pointer-events: none;
  animation: bannerIn .45s cubic-bezier(.3, 1.4, .5, 1);
}
.stage-banner.hidden { display: none; }
.stage-banner.treasure { background: linear-gradient(90deg, transparent, rgba(150, 100, 0, .9) 15%, rgba(150, 100, 0, .9) 85%, transparent); }
.stage-banner.boss, .stage-banner.rush { background: linear-gradient(90deg, transparent, rgba(140, 0, 0, .88) 15%, rgba(140, 0, 0, .88) 85%, transparent); }
.stage-banner.dark { background: linear-gradient(90deg, transparent, rgba(30, 10, 60, .92) 15%, rgba(30, 10, 60, .92) 85%, transparent); }
.sb-lv { font-size: 34px; font-weight: 900; letter-spacing: .08em; color: #ffd23f; text-shadow: 0 3px 0 #8f6200, 0 0 12px rgba(0, 0, 0, .5); }
.sb-name { font-size: 20px; font-weight: 900; margin-top: 2px; }
.sb-desc { font-size: 13px; font-weight: 700; opacity: .95; }
@keyframes bannerIn { from { transform: translateX(-100%); } }
#app:not([data-screen="game"]) .stage-banner { display: none; }

/* ===== 暗闇ステージ：行けない部屋は中身が見えない ===== */
.floor.far.fog { filter: none; background: radial-gradient(circle at 50% 40%, #3a3160, #120f22 75%); box-shadow: inset 0 0 0 2px rgba(160, 140, 255, .25), inset 0 8px 12px rgba(0, 0, 0, .6); }
.floor.fog .unit { visibility: hidden; }
.floor.fog::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * .7);
  font-weight: 900;
  color: rgba(200, 190, 255, .55);
  text-shadow: 0 0 10px rgba(140, 120, 255, .6);
}

/* ===== ワールドマップ ===== */
.map-screen { background: #0f1f3a; }
.map { width: 100%; }
.map-world {
  position: relative;
  width: 100%;
  background: linear-gradient(rgba(10, 20, 50, .15), rgba(10, 20, 50, .35)), var(--wbg) center / cover;
  box-shadow: inset 0 12px 20px -12px rgba(0, 0, 0, .7);
}
.map-road { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-road .road-edge { stroke: #6b4a22; stroke-width: 30px; }
.map-road .road { stroke: #e9c98a; stroke-width: 24px; }
.map-road .road-dash { stroke: #fff6dc; stroke-width: 3px; stroke-dasharray: 8 12; }
.map-sign {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 10px;
  background: linear-gradient(#a8733f, #7a4f26);
  border: 3px solid #4f3218;
  font-size: 16px;
  font-weight: 900;
  color: #fff6dc;
  white-space: nowrap;
  box-shadow: 0 4px 0 #3a2410, 0 8px 12px rgba(0, 0, 0, .4);
  text-shadow: 0 2px 0 #3a2410;
}
.map-sign small { margin-left: 8px; font-size: 11px; opacity: .85; }
.map-node {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 4px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fc0ff, #2458b8);
  box-shadow: 0 5px 0 #173a7a, 0 8px 12px rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.map-node.cleared { background: radial-gradient(circle at 35% 30%, #8ff0a0, #1f9d3a); box-shadow: 0 5px 0 #0f5e21, 0 8px 12px rgba(0, 0, 0, .45); }
.map-node.boss { width: 76px; height: 76px; background: radial-gradient(circle at 35% 30%, #ff9a9a, #b31d1d); box-shadow: 0 5px 0 #6d0e0e, 0 0 16px rgba(255, 60, 60, .8); }
.map-node.treasure { background: radial-gradient(circle at 35% 30%, #ffe98a, #e39b00); box-shadow: 0 5px 0 #8f6200, 0 0 14px rgba(255, 210, 63, .8); }
.map-node.locked { background: radial-gradient(circle at 35% 30%, #b8bcc6, #6b7280); box-shadow: 0 5px 0 #3f444d; border-color: #d8dbe2; cursor: default; font-size: 18px; }
.map-node.current { animation: nodePulse 1s ease-in-out infinite; z-index: 2; }
@keyframes nodePulse {
  50% { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 5px 0 #173a7a, 0 0 22px 6px rgba(255, 230, 120, .95); }
}
.type-badge {
  position: absolute;
  top: -10px;
  right: -12px;
  font-size: 20px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}
.new-tag {
  position: absolute;
  top: -14px;
  left: -26px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #ff3b6b;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  transform: rotate(-12deg);
  box-shadow: 0 2px 0 #a3163c;
}
.node-stars {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: #ffd23f;
  white-space: nowrap;
  letter-spacing: -1px;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.map-hero {
  position: absolute;
  bottom: 44px;
  left: 50%;
  width: 62px;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .5));
  animation: heroHop .9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroHop { 50% { transform: translateX(-50%) translateY(-10px); } }

/* ============================================================
   ワールドマップ（豪華版）
   ============================================================ */
.map-screen { background: #0b1830; }
.map { position: relative; width: 100%; padding-bottom: 90px; }
.map-head { justify-content: flex-start; gap: 8px; z-index: 30; }
.map-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px 3px 4px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2);
  font-size: 16px;
  font-weight: 900;
}
.map-pill:first-of-type { margin-left: auto; }
.map-pill img { width: 26px; height: 26px; object-fit: contain; }

.map-world {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0, 0, 0, .35)),
    var(--wbg) center / cover;
}
/* ワールドの境目：上を少し暗くして区切る */
.map-world::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 60px;
  background: linear-gradient(rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
  z-index: 1;
}
.map-decor {
  position: absolute;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .35));
  pointer-events: none;
  z-index: 1;
}
.map-decor.cloud { opacity: .9; filter: none; transform: translate(-50%, -50%); }
.map-decor.flag { animation: flagWave 1.6s ease-in-out infinite; transform-origin: 20% 100%; }
.map-decor.torch { animation: flicker .5s steps(2) infinite; }
@keyframes flagWave { 50% { transform: translate(-50%, -100%) rotate(-4deg) scaleX(.94); } }
@keyframes flicker { 50% { filter: drop-shadow(0 0 10px rgba(255, 160, 40, .9)) brightness(1.15); } }
.map-cloud {
  position: absolute;
  left: -40%;
  opacity: .75;
  pointer-events: none;
  z-index: 3;
  animation: cloudDrift linear infinite;
}
@keyframes cloudDrift { to { transform: translateX(260%); } }

/* 石畳の道 */
.map-road { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.map-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-road .road-shadow { stroke: rgba(0, 0, 0, .35); stroke-width: 44px; transform: translateY(6px); }
.map-road .road-edge { stroke: #7a5a34; stroke-width: 40px; }
.map-road .road { stroke: #e2c794; stroke-width: 32px; }
.map-road .road-stones { stroke: #c9a86b; stroke-width: 24px; stroke-dasharray: 6 10; }
.map-road .road-done { stroke: #ffd23f; stroke-width: 8px; stroke-dasharray: 2 14; filter: drop-shadow(0 0 4px #fff3b0); }

/* ワールドの看板（リボン） */
.map-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 6;
  width: min(330px, 88%);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.mb-ribbon { width: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }
.mb-text {
  position: absolute;
  top: 18%;
  left: 0;
  right: 0;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 #7a0f0f, 0 0 6px rgba(0, 0, 0, .5);
}
.mb-text b { display: block; font-size: 11px; letter-spacing: .25em; color: #ffe29a; }
.mb-progress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: -6px;
  padding: 2px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .55);
  font-size: 13px;
  font-weight: 900;
  color: #ffe29a;
}
.mb-progress img { width: 18px; }

/* まだ行けないワールドは雲に覆われる */
.map-fog {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .5), transparent 45%),
    linear-gradient(rgba(190, 205, 230, .82), rgba(150, 165, 200, .9));
  backdrop-filter: blur(3px);
}
.fog-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 22px;
  border-radius: 18px;
  background: rgba(20, 30, 60, .75);
  font-weight: 900;
  color: #fff;
}
.fog-lock img { width: 64px; }

/* レベルの丸ボタン（ツヤのある3D） */
.map-node {
  position: absolute;
  z-index: 5;
  width: 66px;
  height: 66px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  cursor: pointer;
  animation: none;
}
.node-disc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 4px solid #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .85) 0 12%, transparent 30%),
    radial-gradient(circle at 50% 60%, #6fa8ff, #1f4fb0 70%);
  box-shadow: 0 6px 0 #10306f, 0 10px 14px rgba(0, 0, 0, .5), inset 0 -6px 10px rgba(0, 0, 0, .25);
}
.node-disc .num { font-size: 24px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.map-node.cleared .node-disc {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .85) 0 12%, transparent 30%),
    radial-gradient(circle at 50% 60%, #7fe38f, #16873a 70%);
  box-shadow: 0 6px 0 #0c5222, 0 10px 14px rgba(0, 0, 0, .5), inset 0 -6px 10px rgba(0, 0, 0, .25);
}
.map-node.current .node-disc {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .9) 0 12%, transparent 30%),
    radial-gradient(circle at 50% 60%, #ffe066, #e08a00 70%);
  box-shadow: 0 6px 0 #8f5200, 0 0 0 6px rgba(255, 230, 120, .45), 0 0 26px 6px rgba(255, 210, 63, .9);
  animation: nodeGlow 1.2s ease-in-out infinite;
}
@keyframes nodeGlow { 50% { transform: scale(1.08); } }
.map-node.locked .node-disc {
  background: radial-gradient(circle at 50% 60%, #aab0bd, #5d6472 70%);
  box-shadow: 0 6px 0 #3a3f48, 0 8px 10px rgba(0, 0, 0, .4);
  border-color: #d7dbe3;
}
.node-lock { width: 30px; }
.map-node.boss { width: 82px; height: 82px; }
.map-node.boss .node-disc {
  border-color: #ffd23f;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .8) 0 10%, transparent 28%),
    radial-gradient(circle at 50% 60%, #ff7a7a, #9e1111 70%);
  box-shadow: 0 6px 0 #5c0808, 0 0 22px rgba(255, 60, 60, .8);
}
.map-node.treasure .node-disc {
  border-color: #fff3b0;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .85) 0 12%, transparent 30%),
    radial-gradient(circle at 50% 60%, #ffe98a, #d98a00 70%);
  box-shadow: 0 6px 0 #8f5200, 0 0 18px rgba(255, 210, 63, .8);
}
/* ボスの顔・宝箱は丸の上に */
.node-portrait {
  position: absolute;
  bottom: 62%;
  left: 50%;
  width: 78px;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .5));
  z-index: 1;
  pointer-events: none;
}
.map-node.boss .node-portrait { width: 96px; animation: bossBreath 2s ease-in-out infinite; }
.node-portrait.chest { width: 54px; bottom: 70%; }
@keyframes bossBreath { 50% { transform: translateX(-50%) scale(1.06); } }
.map-node.locked .node-portrait { filter: grayscale(1) brightness(.6) drop-shadow(0 6px 5px rgba(0, 0, 0, .5)); }
/* ★は丸の下に弧を描くように */
.node-stars {
  position: absolute;
  bottom: -20px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
  z-index: 2;
}
.node-stars img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.node-stars img:nth-child(2) { transform: translateY(4px); }
.type-badge { z-index: 3; top: -8px; right: -10px; font-size: 22px; }
.new-tag { z-index: 3; top: -12px; left: -30px; }
.map-node.unlocked-now .node-disc { animation: unlockPop .6s cubic-bezier(.3, 1.8, .5, 1), nodeGlow 1.2s ease-in-out .6s infinite; }
@keyframes unlockPop { 0% { transform: scale(.3); } }

/* 今いるレベルのヒーローと「▼」 */
.map-hero-wrap {
  position: absolute;
  z-index: 7;
  transform: translate(-50%, -100%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-hero-wrap .map-hero {
  position: static;
  width: 70px;
  transform: none;
  animation: heroHop2 .9s ease-in-out infinite;
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .5));
}
.map-hero-wrap.walking .map-hero { animation: heroWalk .25s ease-in-out infinite; }
.map-pointer {
  font-size: 22px;
  color: #ffd23f;
  text-shadow: 0 2px 0 #8f5200, 0 0 8px rgba(0, 0, 0, .5);
  animation: pointerBounce .7s ease-in-out infinite;
}
@keyframes heroHop2 { 50% { transform: translateY(-8px); } }
@keyframes heroWalk { 50% { transform: translateY(-10px) rotate(-6deg); } }
@keyframes pointerBounce { 50% { transform: translateY(6px); } }

/* 画面下の大きなプレイボタン */
.map-play-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  width: 100%;
  margin-top: -90px;
  padding: 12px 16px 16px;
  background: linear-gradient(transparent, rgba(8, 16, 36, .9) 40%);
  display: flex;
  justify-content: center;
}
.map-play {
  width: min(320px, 100%);
  font-size: 22px;
  background: linear-gradient(#5fe07a, #1f9d3a);
  box-shadow: 0 6px 0 #0f5e21, 0 10px 16px rgba(0, 0, 0, .4);
  animation: pulse 1.4s ease-in-out infinite;
}

/* レベルのプレビュー */
.lv-preview {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
}
.lv-preview.hidden { display: none; }
.lp-card {
  position: relative;
  width: min(310px, calc(100% - 40px));
  padding: 44px 18px 20px;
  border-radius: 22px;
  background: linear-gradient(#fffaf0, #f3e3c2);
  border: 4px solid #c99a4b;
  box-shadow: 0 10px 0 #8a6428, 0 18px 30px rgba(0, 0, 0, .5);
  color: var(--text);
  text-align: center;
  animation: panelIn .3s;
}
.lp-ribbon {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  padding: 10px 0 12px;
  background: url("img/ui/ribbon.webp") center / 100% 100% no-repeat;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 #7a0f0f;
}
.lp-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #d9534f;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 3px 0 #8a2320;
  cursor: pointer;
}
.lp-type { font-size: 15px; line-height: 1.5; margin: 6px 0 10px; }
.lp-type b { font-size: 18px; }
.lp-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.lp-stars img { width: 50px; height: 50px; object-fit: contain; }
.lp-stars img:nth-child(2) { transform: translateY(-8px); }
.lp-info { font-size: 14px; margin-bottom: 16px; line-height: 1.6; }
.lp-info b { color: #2458b8; font-size: 17px; }
.lp-new { color: #ff3b6b; font-weight: 900; }
.lp-play { width: 100%; font-size: 24px; background: linear-gradient(#5fe07a, #1f9d3a); box-shadow: 0 6px 0 #0f5e21; }

/* ===== アイテムボタン（ゲーム画面の左側） ===== */
.item-bar {
  position: absolute;
  top: 190px;
  left: 8px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#app:not([data-screen="game"]) .item-bar { display: none; }
.item-btn {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 4px;
  border: 3px solid #fff;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 30%, #fff8e0, #e9c98a 70%);
  box-shadow: 0 4px 0 #8a6428, 0 6px 10px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.item-btn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.item-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6428; }
.item-btn.empty img { filter: grayscale(1) opacity(.5); }
.item-btn.active { border-color: #ffd23f; box-shadow: 0 4px 0 #8f6200, 0 0 16px 4px rgba(255, 210, 63, .9); animation: nodeGlow 1s ease-in-out infinite; }
.item-btn.shield { background: radial-gradient(circle at 35% 30%, #e6f0ff, #9dbbe8 70%); box-shadow: 0 4px 0 #3d5f94, 0 6px 10px rgba(0, 0, 0, .35); }
.item-count {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ff3b6b;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 20px;
  box-shadow: 0 2px 0 #a3163c;
}
.item-btn.empty .item-count { background: #777; box-shadow: 0 2px 0 #444; }

/* ハンマーで壊せる敵 */
.floor.targetable { animation: targetPulse .8s ease-in-out infinite !important; cursor: crosshair; }
@keyframes targetPulse {
  50% { box-shadow: inset 0 0 0 4px #ff5a5a, 0 0 18px 6px rgba(255, 90, 90, .9); }
}
.hammer-drop {
  position: absolute;
  z-index: 14;
  width: calc(var(--u) * 1.6);
  transform-origin: 80% 80%;
  pointer-events: none;
  animation: hammerSwing calc(.38s * var(--spd, 1)) cubic-bezier(.5, 0, .9, .4) forwards;
}
@keyframes hammerSwing {
  0% { transform: translate(-10%, -150%) rotate(-70deg) scale(1.3); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-40%, -70%) rotate(20deg) scale(1.3); }
}

/* 水晶玉で中身が見えた？ボックス */
.unit.mystery.peeked .qbox img { width: 80%; height: 80%; object-fit: contain; }
.unit.mystery.peeked.bad .qbox { background: linear-gradient(135deg, #d6b3ff, #7a3bd1); }
.unit.mystery.peeked.bad .val { background: linear-gradient(#b77cff, #7a3bd1); color: #fff; }

/* ショップのアイテム欄 */
.shop-head { margin: 10px 4px 0; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

/* ===== ホーム画面に追加 ===== */
.a2hs-btn {
  margin-top: 4px;
  padding: 8px 16px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 99px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  animation: btnIn .5s 1.1s both;
}
.a2hs-btn:active { transform: translateY(2px); }
.a2hs-btn.hidden { display: none; }
/* 「ホーム画面に追加」と「ほかのゲーム」を1行に並べる（背の低い画面でも1画面に収める） */
.title-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; }
/* AIゲーム実験室のトップ（ほかのゲーム一覧）へ戻るリンク */
.games-btn {
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 99px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  animation: btnIn .5s 1.2s both;
}
.games-btn:active { transform: translateY(2px); }
/* リンクの前のアイコン（絵文字は使わない） */
.lk-ic { width: 24px; height: 24px; margin: -5px 4px -5px -2px; vertical-align: middle; }
.overlay.a2hs { position: fixed; z-index: 40; }
.a2hs-panel { position: relative; padding-top: 20px; }
.a2hs-icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
.a2hs-title { margin: 8px 0 6px; font-size: 22px; font-weight: 900; color: #2458b8; }
.a2hs-body { margin-bottom: 16px; font-size: 14px; line-height: 1.6; color: #333; }
.a2hs-steps { margin: 10px 0 8px; padding: 0; list-style: none; counter-reset: step; text-align: left; }
.a2hs-steps li {
  position: relative;
  margin: 0 0 8px;
  padding: 8px 10px 8px 42px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 0 #c9d6ef;
  counter-increment: step;
}
.a2hs-steps li::before {
  content: counter(step);
  position: absolute;
  left: 9px;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2f7cf6;
  color: #fff;
  font-weight: 900;
  line-height: 24px;
  text-align: center;
}
.a2hs-steps b { color: #2458b8; }
.a2hs-steps small { display: block; font-size: 12px; color: #667; }
.share-ico { width: 22px; height: 22px; vertical-align: -5px; color: #2f7cf6; }
.a2hs-note { margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: #fff4cc; font-size: 13px; }
.a2hs-note b { font-size: 14px; color: #b36b00; }
.a2hs-small { margin-top: 6px; font-size: 11px; color: #777; }
/* クリア画面のおすすめ */
.a2hs-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border: 2px dashed #7fa6e8;
  border-radius: 14px;
  background: #eef4ff;
  color: #333;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.a2hs-inline b { font-size: 13px; color: #2458b8; }
.a2hs-inline-ico { font-size: 26px; }
.a2hs-inline em {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 99px;
  background: linear-gradient(#5b9bff, #2466d8);
  color: #fff;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}