:root{
  --bg:#f6fbff;
  --panel:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --ok:#16a34a;
  --ng:#ef4444;
  --accent:#ff5fa2;
  --accent2:#ffb6d9;
  --line:#e5e7eb;
  --shadow: 0 10px 28px rgba(0,0,0,.08);
  --r:18px;
}

html, body{
  overflow-x: hidden;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background: linear-gradient(180deg, var(--bg), #fff);
  color:var(--ink);
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 12px 28px;
}

/* ---------- header ---------- */
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}

.title{
  font-weight:900;
  letter-spacing:.02em;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

/* タイトル行だけ横並び */
.titleRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap; /* スマホで自然に折り返す */
  min-width: 0;
}

/* ヒント帯：画面いっぱい（レイアウト崩さない版） */
.topHint{
  width: 100vw;
	margin: 0 calc(50% - 50vw) 12px; /* 左右を画面端へ＋下に余白 */
	
	  display: -webkit-box;
  -webkit-box-orient: vertical;

  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);

  background: rgba(255,255,255,.7);
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 10px 12px;

  white-space: nowrap;     /* PCは1行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* スマホでは改行OKにする */
@media (max-width: 720px){
  .topHint{
    white-space: normal;        /* ★ここで改行許可 */
    font-size: 13px;
  }
}

@media (max-width: 720px){
  .topbar{
    flex-direction: column;
    gap: 10px;
  }
  .stat{
    width: 100%;
    justify-content: flex-start;
  }
  .topHint{
    max-width: 100%;
  }
}

.big{
  font-size:18px;
  font-weight:900;
}

.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#ffe4f1;
  border:1px solid #ffd0e6;
  color:#b4236a;
  font-weight:700;
  white-space:nowrap;
}

.stat{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}
.stat b{ color:var(--ink); }

.statRight{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.guardBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:800;
  color:#166534;
  background:#ecfdf5;
  border:1px solid #86efac;
  border-radius:999px;
  padding:2px 8px;
}

.guardBadge[hidden]{
  display:none !important;
}

.soundToggleBtn{
  font-size:12px;
  line-height:1;
  padding:6px 9px;
  border-radius:999px;
  box-shadow:none;
  font-weight:800;
}

/* ---------- layout ---------- */
.grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6px;
}
@media (max-width: 860px){
  .grid{ grid-template-columns:1fr; }
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 8px;
}

.story{
  background:#fef6ff;
  border-color:#f5d0fe;
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  }

  .myHpLine{
    display:flex;
    align-items:center;
    height:18px;        /* HPバーと同じ高さ */
    line-height:18px;   /* 文字の上下ズレ防止 */
  }

#myHpBar{
  height:18px;        /* 念のため統一 */
  margin-top: 0 !important;  /* 直書きの8pxを潰す */
  }
}

.hint{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* ---------- HP BAR (60 segments) ---------- */
.hpbar{
  --segments: 60;
  --gap: 2px;
  --c1: #22c55e;
  --c2: #a3e635;

  position:relative;
  height:16px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,.10) 0 calc((100%/var(--segments)) - var(--gap)),
      transparent calc((100%/var(--segments)) - var(--gap)) calc(100%/var(--segments))
    );
}

.hpbar.me{
  --c1:#60a5fa;
  --c2:#a78bfa;
}

.hpfill{
  height:100%;
  width:100%;
  transition: width .25s ease;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0) 0 calc((100%/var(--segments)) - var(--gap)),
      transparent calc((100%/var(--segments)) - var(--gap)) calc(100%/var(--segments))
    ),
    linear-gradient(90deg, var(--c1), var(--c2));
}

/* ===== RPG風 HPバー ===== */
.hpbarRPG{
  --segments: 60;
  flex: 1;
  min-width: 220px;
  position: relative;
  height: 18px;
  border-radius: 10px;
  overflow: hidden;

  /* 枠と影でRPGっぽく */
  border: 2px solid rgba(0,0,0,.12);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.08);

  /* 背景（空HP） */
  background: linear-gradient(180deg, #e5e7eb, #cbd5e1);

  padding-left: 0px; /* 左のハート分 */
}

/* HPの塗り */
.hpbarRPG .hpfill{
  height: 100%;
  width: 100%
  transition: width .25s ease;
  border-radius: 8px;

  background: #a3e635;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.10);

  /* 光沢 */
  box-shadow
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.10);
}

/* 区切り線（数えられるように） */
.hpbarRPG::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  /* セグメント区切り */
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,.0) 0,
    rgba(255,255,255,.0) calc((100%/var(--segments)) - 1px),
    rgba(255,255,255,.95) calc((100%/var(--segments)) - 1px),
    rgba(255,255,255,.95) calc(100%/var(--segments))
  );

  mix-blend-mode: overlay;
  opacity: .9;
  z-index: 2;
  pointer-events:none;
}

/* 自分HPは青系にしたい場合 */
.hpbarRPG.me .hpfill{
  background: linear-gradient(90deg,
    #ef4444 0%,
    #f97316 30%,
    #facc15 60%,
    #22c55e 100%
  );
}

/* ダメージ表示（既存のやつと両立） */
.hpbarRPG .dmgFloat{
  z-index: 10;
}

/* ---------- damage float ---------- */
.dmgFloat{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  font-weight:900;
  font-size:24px;
  color:#111827;
  background:rgba(255,255,255,.95);
  border:2px solid rgba(0,0,0,.15);
  padding:6px 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
}

.dmgFloat.pitari{
  color: #fff;
  font-size: 32px;
  text-shadow: 0 0 12px rgba(255,255,255,.8);
  animation: pitariPop .5s ease-out;
}

@keyframes pitariPop{
  0%   { transform: scale(.6) translateY(10px); opacity:0; }
  50%  { transform: scale(1.3) translateY(-10px); opacity:1; }
  100% { transform: scale(1) translateY(-30px); opacity:0; }
}

.dmgFloat.show{
  animation: dmgUp 1.4s ease forwards;
}

.battle .dmgFloat{
  z-index: 10;
}

@keyframes dmgUp{
  0%   { opacity:0; transform: translate(-50%, 16px) scale(.9); }
  20%  { opacity:1; transform: translate(-50%, 0px) scale(1.15); } /* ★ ドン！ */
  70%  { opacity:1; transform: translate(-50%, -10px) scale(1.05); }
  100% { opacity:0; transform: translate(-50%, -24px) scale(1); }
}

/* ---------- message ---------- */
.msg{
  margin-top:10px;
  border-radius:14px;
  padding:10px 12px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  min-height:44px;
  line-height:1.5;
}

.msg.ok{
  border-color:#bbf7d0;
  background:#f0fdf4;
}

.msg.ng{
  border-color:#fecaca;
  background:#fff1f2;
}

.msgRow{
  margin-top:10px;
  display:flex;
  align-items:stretch;
  gap:8px;
}

.msgRow .msg{
  margin-top:0;
  flex:1;
}

.kukuBtn{
  margin-top:0;
  min-width:44px;
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  font-size:22px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg,#fff,#f8fafc);
}

.kukuOverlay{
  position:absolute;
  inset:8px;
  background: rgba(15, 23, 42, .35);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 20;
}

.kukuOverlay.show{
  opacity:1;
  pointer-events:auto;
}

.kukuOverlay[hidden]{
  display:none;
}

.kukuCard{
  width:min(96%, 480px);
  max-height:90%;
  overflow:auto;
  background:#fffef8;
  border:1px solid #e5d8b8;
  border-radius:14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.24);
  padding:10px;
  position:relative;
}

.kukuTitle{
  text-align:center;
  font-size:18px;
  font-weight:900;
  margin-bottom:10px;
}

.kukuClose{
  position:absolute;
  right:8px;
  top:8px;
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  border-radius:999px;
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.kukuTable{
  width:100%;
  border-collapse: collapse;
  font-size:13px;
}

.kukuTable th,
.kukuTable td{
  border:1px solid #e8dcc0;
  padding:6px 8px;
  text-align:left;
}

.kukuTable th{
  background:#f7efd9;
  width:72px;
  white-space:nowrap;
}

.kukuSpellHead{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.kukuSpellName{
  text-align:center;
  font-size:16px;
  font-weight:900;
}

.kukuNavBtn{
  width:32px;
  min-width:32px;
  height:32px;
  padding:0;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  box-shadow:none;
}

.kukuHintGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
}

.kukuHintItem{
  border:1px solid #e8dcc0;
  background:#fffaf0;
  border-radius:10px;
  padding:8px 6px;
  text-align:center;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}

.panel.story.tutorial-focus-guide > *{
  opacity:.14;
  transition: opacity .2s ease;
}

.panel.story.tutorial-focus-guide .msgRow{
  opacity:1;
  position:relative;
  z-index:22;
}

.panel.story.tutorial-focus-guide .kukuOverlay.show{
  opacity:1;
  z-index:24;
}

.panel.story.tutorial-focus-guide #btnKuku{
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(59,130,246,.45);
  animation: tutorialBookPulse .9s ease-in-out infinite;
}

.panel.story.tutorial-focus-close > *{
  opacity:.14;
  transition: opacity .2s ease;
}

.panel.story.tutorial-focus-close .msgRow{
  opacity:1;
  position:relative;
  z-index:22;
}

.panel.story.tutorial-focus-close .kukuOverlay.show{
  opacity:1;
  z-index:24;
}

.panel.story.tutorial-focus-close .kukuClose{
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(16,185,129,.4);
  animation: tutorialBookPulse .9s ease-in-out infinite;
}

@keyframes tutorialBookPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

/* ---------- KPI ---------- */
.kpi{
  display:none;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  margin-top:12px;
}

.kpi .box{
  border-radius:16px;
  border:1px solid var(--line);
  padding:10px 12px;
  background:#f8fafc;
}

.kpi .box .t{
  color:var(--muted);
  font-size:12px;
}

.kpi .box .v{
  font-weight:900;
  font-size:18px;
  margin-top:4px;
}

/* ---------- choices ---------- */
.choices{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-top:12px;
  transition: opacity .15s ease, filter .15s ease;
}
@media (max-width: 520px){
  .choices{ grid-template-columns: repeat(2, 1fr); }
}

.choices.is-processing{
  opacity: .5;
  filter: saturate(.8);
}

button{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:12px 10px;
  border-radius:16px;
  font-weight:900;
  font-size:18px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border:1px solid var(--line);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition: transform .06s ease, filter .06s ease;
}

button:active{
  transform: translateY(1px);
  filter: brightness(.98);
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ---------- controls ---------- */
/* ボタンエリアを左右中央に配置 */
.controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

/* 中央に「リトライ」を置くために3分割 */
.controls{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* 左 / 中 / 右 */
  align-items:center;
  width:100%;
  gap:10px;
}

/* 左：トップへ */
#btnMode{
  justify-self:start;
}

/* 中：リトライ */
#btnRetry{
  justify-self:center;
}

/* 右：つぎへ */
#btnNext{
  justify-self:end;
}


.smallbtn{
  font-size:14px;
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
}

.primary{
  border-color:#ffd0e6;
  background: linear-gradient(180deg, #fff0f7, #ffffff);
}

/* ===== 次へボタン：クリア時だけ出す ===== */
#btnNext{
  display:none;              /* ふだんは消す */
  transform: translateY(6px) scale(.98);
  opacity: 0;
}

/* クリアしたら出現 */
#btnNext.showNext{
  display:inline-block;
  animation: popNext .55s ease forwards;
  box-shadow: 0 10px 22px rgba(255,95,162,.25);
  border-color:#ffd0e6;
  background: linear-gradient(180deg, #fff0f7, #ffffff);
}

/* キラッ演出（右上に小さく出る） */
#btnNext.showNext::after{
  content:"▶︎";
  margin-left: 6px;
}

/* ぷるん＆キラッ */
@keyframes popNext{
  0%   { opacity:0; transform: translateY(10px) scale(.92); }
  60%  { opacity:1; transform: translateY(-2px) scale(1.05); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

/* PC：1行で省略 */
@media (min-width: 861px){
  .topHint{
    white-space: nowrap;
    -webkit-line-clamp: 1;
  }
}

/* タブレット縦：2行まで表示（切れ対策） */
@media (min-width: 521px) and (max-width: 860px){
  .topHint{
    white-space: normal;
    -webkit-line-clamp: 2;
  }
}

/* スマホ：制限なし（読みやすく） */
@media (max-width: 520px){
  .topHint{
    white-space: normal;
    -webkit-line-clamp: unset;
  }
}

/* ===== Landing (トップ画面) ===== */
.landingWrap{
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.landingCard{
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 22px 18px;
  text-align:center;
}

.landingLogo{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}

.landingLogo img{
  display:block;
  width:min(340px, 92%);
  height:auto;
}

.landingBadge{
  display:inline-block;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#ffe4f1;
  border:1px solid #ffd0e6;
  color:#b4236a;
  font-weight:700;
}

.landingSub{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.landingStart{
  margin-top: 18px;
  width: 100%;
  padding: 14px 12px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 18px;
  border: 1px solid #ffd0e6;
  background: linear-gradient(180deg, #fff0f7, #ffffff);
  box-shadow: 0 10px 22px rgba(255,95,162,.18);
}

/* ===== Mode (モード選択) ===== */
.modeWrap{
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.modeCard{
  width: min(720px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 22px 18px;
}

.modeTitle{
  font-weight: 900;
  font-size: 22px;
  text-align:center;
  margin-bottom: 14px;
}

.modeGrid{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 auto;
	gap: 12px;
}

@media (max-width: 520px){
  .modeGrid{ grid-template-columns: 1fr; }
}

.modeBtn{
	  position: relative;
  width: 100%;
  padding: 16px 12px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  color: var(--ink);
	text-decoration: none; 
	text-align: center;
}

.starBadge{
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 13px;
  opacity: .85;
}

.starBadge.perfect{
  font-size: 16px;
  transform: scale(1.1);
}

.modeProgressBadge{
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  line-height: 1;
  color: #475569;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 3px 6px;
  font-weight: 800;
}

.modeBtn.is-locked{
  opacity:.45;
  filter: grayscale(1);
  pointer-events:auto; /* クリックは受けるけどJSで止める */
}
.modeBtn.is-locked::after{
  content:"🔒";
  margin-left:.4em;
}

.modeBtn.is-locked:active{
  transform: none;
}

/* ロック押した時に左右に震える */
.modeBtn.shake{
  animation: btnShake .22s ease-in-out;
}

@keyframes btnShake{
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}


.modeBtn.isDisabled{
  opacity: .45;
  cursor: not-allowed;
  color: #9aa3af;
  text-decoration: none; 
}

.modeHint{
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align:center;
}

.battle{
  position: relative;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  border:1px solid #e5e7eb;
  background: linear-gradient(180deg,#ffffff,#f1f5ff);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 14px;
  margin-top: 10px;
}

.enemy{
  max-width: 240px;
  max-height: 180px;
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 12%;
  --enemy-scale: 1;
  --anim-scale: 1;
  --enemy-x: 0px;
  --enemy-y: 0px;

  transform:
    translateX(-50%)
    translate(var(--enemy-x), var(--enemy-y))
    scale(calc(var(--enemy-scale) * var(--anim-scale)));
  transform-origin: 50% 80%;
  transition: filter .12s linear;
}

/* 被弾：白フラッシュ＋小刻み揺れ */
.enemy.hit{
  animation: enemyHit .22s ease-out;
}

@keyframes enemyHit{
  0%   { --anim-scale: 1;    filter:none; }
  20%  { --anim-scale: 1.08; filter:brightness(2); }
  40%  { --anim-scale: 0.96; }
  60%  { --anim-scale: 1.05; }
  100% { --anim-scale: 1;    filter:none; }
}

/* 死亡：黒くなってから薄く消える */
.enemy.dead{
  animation: enemyDead .5s ease-in forwards;
}

@keyframes enemyDead{
  0%{
    opacity: 1;
    filter: none;
    --anim-scale: 1;
  }
  30%{
    opacity: 1;
    filter: brightness(0.6) grayscale(0.6);
    --anim-scale: 0.98;
  }
  100%{
    opacity: 0;
    filter: brightness(0.3) grayscale(1);
    --anim-scale: 0.95;
  }
}

/* 反撃：前に出てズンッ→戻る（基準スケールは --enemy-scale） */
.enemy.counter{
  animation: enemyCounter .25s ease-out;
}

@keyframes enemyCounter{
  0%   { --anim-scale: 1; }
  30%  { --anim-scale: 1.2; }
  100% { --anim-scale: 1; }
}

.spellFxOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index: 6;
}

.spellFxOverlay.show{
  animation: spellFlash .24s ease-out both;
}

.spellFxOverlay.fx-mini-fire{ background: radial-gradient(circle at 50% 60%, rgba(255,133,58,.45), rgba(255,133,58,0) 64%); }
.spellFxOverlay.fx-mini-thunder{ background: radial-gradient(circle at 55% 55%, rgba(120,188,255,.42), rgba(120,188,255,0) 66%); }
.spellFxOverlay.fx-stone{ background: radial-gradient(circle at 48% 62%, rgba(186,150,112,.4), rgba(186,150,112,0) 66%); }
.spellFxOverlay.fx-lighvolt{ background: radial-gradient(circle at 56% 54%, rgba(157,232,255,.68), rgba(157,232,255,0) 72%); }
.spellFxOverlay.fx-icicle{ background: radial-gradient(circle at 50% 60%, rgba(154,235,255,.46), rgba(154,235,255,0) 66%); }
.spellFxOverlay.fx-aqua{ background: radial-gradient(circle at 52% 58%, rgba(120,215,255,.44), rgba(120,215,255,0) 66%); }
.spellFxOverlay.fx-lighvolt.show{ animation: spellFlashStrong .36s ease-out both; }

.spellFxSlash{
  position:absolute;
  left:50%;
  top:58%;
  width:65%;
  height:10px;
  border-radius:999px;
  opacity:0;
  transform: translate(-50%, -50%) rotate(-20deg) scaleX(.35);
  filter: blur(.2px);
}

.spellFxSlash.run{
  animation: spellSlash .26s ease-out both;
}

.spellFxSlash.fx-mini-fire{ background: linear-gradient(90deg, rgba(255,120,58,0), rgba(255,197,102,.95), rgba(255,120,58,0)); }
.spellFxSlash.fx-mini-thunder{ background: linear-gradient(90deg, rgba(108,186,255,0), rgba(201,239,255,.95), rgba(108,186,255,0)); transform: translate(-50%, -50%) rotate(-24deg) scaleX(.3); }
.spellFxSlash.fx-stone{ background: linear-gradient(90deg, rgba(164,132,102,0), rgba(218,198,164,.92), rgba(164,132,102,0)); }
.spellFxSlash.fx-lighvolt{
  height: 12px;
  background: linear-gradient(90deg, rgba(120,215,255,0), rgba(244,253,255,1), rgba(120,215,255,0));
  transform: translate(-50%, -50%) rotate(-28deg) scaleX(.25);
  box-shadow: 0 0 14px rgba(156,229,255,.9);
}
.spellFxSlash.fx-icicle{ background: linear-gradient(90deg, rgba(140,226,255,0), rgba(225,250,255,.98), rgba(140,226,255,0)); }
.spellFxSlash.fx-aqua{ background: linear-gradient(90deg, rgba(78,187,255,0), rgba(186,238,255,.98), rgba(78,187,255,0)); }

.spellFxParticles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 6;
  overflow:hidden;
}

.spellParticle{
  --tx: 0px;
  --ty: -40px;
  --rot: 0deg;
  --dur: .4s;
  position:absolute;
  left:50%;
  top:60%;
  width:9px;
  height:9px;
  border-radius:3px;
  opacity:0;
  transform: translate(-50%, -50%);
  animation: spellParticleBurst var(--dur) ease-out forwards;
}

.spellParticle.fx-mini-fire{ background: linear-gradient(180deg, #ffd27d, #ff7a3d); box-shadow: 0 0 8px rgba(255,146,68,.75); }
.spellParticle.fx-mini-thunder{ background: linear-gradient(180deg, #e9f9ff, #7cc4ff); box-shadow: 0 0 8px rgba(132,205,255,.78); }
.spellParticle.fx-stone{ background: linear-gradient(180deg, #dbc5a0, #9f7d61); box-shadow: 0 0 6px rgba(160,123,94,.5); }
.spellParticle.fx-lighvolt{ background: linear-gradient(180deg, #effbff, #86ddff); box-shadow: 0 0 9px rgba(151,223,255,.84); }
.spellParticle.fx-icicle{ background: linear-gradient(180deg, #f2fdff, #9ce8ff); box-shadow: 0 0 8px rgba(158,236,255,.8); }
.spellParticle.fx-aqua{ background: linear-gradient(180deg, #d9f4ff, #4dbbff); box-shadow: 0 0 8px rgba(94,194,255,.78); }
.spellParticle.fx-lighvolt{
  width: 11px;
  height: 11px;
  border-radius: 2px;
}

@keyframes spellFlash{
  0%{ opacity: 0; }
  35%{ opacity: 1; }
  100%{ opacity: 0; }
}

@keyframes spellFlashStrong{
  0%{ opacity: 0; }
  25%{ opacity: 1; }
  55%{ opacity: .9; }
  100%{ opacity: 0; }
}

@keyframes spellSlash{
  0%{ opacity:0; transform: translate(-50%, -50%) rotate(-20deg) scaleX(.2); }
  35%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%, -50%) rotate(-20deg) scaleX(1.2); }
}

@keyframes spellParticleBurst{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(.7);
  }
  15%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(.2);
  }
}

/* 互換：.float（旧）も .dmgFloat（新）も同じ見た目で動く */
.float{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  font-weight:900;
  font-size:14px;
  color:#111827;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.1);
  padding:2px 8px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
}
.float.show{ animation: dmgUp .55s ease forwards; }

/* =========================
   スマホUI ぎゅっと最適化
   ========================= */
@media (max-width: 520px){

  /* 全体の余白を圧縮 */
  .wrap{ padding: 10px 10px 16px; }
  .panel{ padding: 10px; }
  .grid{ gap: 10px; }

  /* いらない文言を非表示（DOMは残すのでJSは壊れない） */
  .hint{ display:none !important; }          /* ルール説明文 */
  .topHint{ display:none !important; }       /* 上のヒント帯 */
  #spellBadge{ display:none !important; }    /* 「魔法：〜」バッジ */
  /* 右パネルの補足文言を消したい場合（該当要素に class="subnote" を付けてね） */
  .subnote{ display:none !important; }

  /* 画像表示エリアを縮める */
  .battle{
    height: 150px;          /* 好みで 140〜170 */
    padding: 10px;
  }
  .enemy{
    width: 120px;           /* 敵を少し小さく */
  }

  /* 数字パネルを3×3にしてボタン小さく */
  .choices{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
  }
  .choices button{
    padding: 10px 8px;
    font-size: 18px;
    border-radius: 14px;
	}
	
	/* 下の操作ボタンも数字ボタンと同じ見た目に寄せる */
@media (max-width: 520px){
  .controls{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px; /* choices と揃える */
  }

  .controls button{
    padding: 10px 8px;       /* 数字ボタンと同じ */
    font-size: 18px;         /* 数字ボタンと同じ */
    border-radius: 14px;     /* 数字ボタンと同じ */
    width: 100%;
    min-width: 0;            /* 変な横幅固定を殺す */
  }
}


  /* 右側パネルを「画面下に貼り付け」してスクロール地獄回避 */
  .panelChoices{
    position: sticky;
    bottom: 10px;
    z-index: 50;
  }

  /* 「何発うつ？」見出しがデカいなら少し縮める */
  .panelChoices h2,
  .panelChoices .big{
    font-size: 16px;
  }

  /* KPIも少し詰める（残す場合） */
  .kpi{
    gap: 8px;
    margin-top: 10px;
  }
  .kpi .box{ padding: 8px 10px; }
  .kpi .box .v{ font-size: 16px; }

  .subnote{
    display:none !important;
  }
}

.choicesTitle{
  text-align:center;
}

@media (min-width: 521px){

  /* 右パネル全体を4列グリッドにする */
  .panelChoices{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; /* 数字パネルと同じ余白にしたいならここ */
    align-content: start;
  }

  /* 見出しは横幅いっぱい */
  .choicesTitle{
    grid-column: 1 / -1;
    margin: 0;
  }

  /* choicesの箱を消して「中のボタンだけ」グリッド参加させる */
  .choices{
    display: contents;
  }

  /* controlsも同じく「中のボタンだけ」グリッド参加 */
  .controls,
  .controls .ctrl-left{
    display: contents;
  }

  /* ボタンの高さと見た目を数字と揃える */
  .panelChoices button{
    min-height: 64px;
    font-size: 16px;          /* ← ここを下げる（18→16 or 15） */
    white-space: nowrap;     /* ← 改行させない */
    line-height: 1;          /* ← 縦の間延び防止 */
    padding: 10px 8px;       /* ← 文字が長い分ちょい横余裕 */    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* 9が左下に来るように整列させたい時の保険（基本いらんけど念のため） */
  /* .panelChoices #choices button:nth-child(9){ grid-column: 1; grid-row: 4; } */
}

.visuallyHidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

#spellBadge{
  display:none !important;
}

/* ===== panel.story 基本 ===== */
.panel.story{
  position: relative;
  background: #f3f4f6;          /* 薄グレー */
  border-color: #e5e7eb;
  transition: background .25s ease, border-color .25s ease;
}

/* HPが減ったとき（ダメージ） */
.panel.story.is-damage{
  background: #FF8F93;
  border-color: #fecaca;
}

/* ピタリ成功 */
.panel.story.is-success{
  animation: clearFlash .35s ease-out;
}

@keyframes clearFlash{
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

/* ===== クリア演出オーバーレイ ===== */
.battleOverlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: rgba(0,0,0,.0);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease, background .25s ease;
  z-index: 9; /* enemyより上 */
}

.battleOverlay.show{
  opacity:1;
  background: rgba(0,0,0,.55);
}

.clearTitle{
  font-weight: 900;
  font-size: 30px;
  color:#fff;
  letter-spacing:.06em;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.clearStars{
  font-size: 28px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

.rankUpOverlay{
  position:absolute;
  inset:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(12, 18, 32, .35);
  border-radius:16px;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  z-index: 10;
}

.rankUpOverlay.show{
  opacity:1;
}

.rankUpCard{
  width:min(92%, 420px);
  text-align:center;
  font-size:16px;
  line-height:1.7;
  font-weight:900;
  color:#fff;
  background: linear-gradient(180deg, #1f3f73, #17315a);
  border:1px solid rgba(191,219,254,.9);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 14px 28px rgba(0,0,0,.32);
  animation: rankUpPop .35s ease both;
}

@keyframes rankUpPop{
  0%{ opacity:0; transform: translateY(8px) scale(.92); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}

/* enemyの上に重ねる赤黒フィルム */
.bossInk{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
  z-index: 3; /* enemyより上、overlayより下にしたいなら調整 */
  opacity:0;
  mix-blend-mode: multiply;
}

/* ボス死亡中だけ表示 */
.bossInk.on{
  display:block;
  animation: inkFill 1.35s linear forwards;
}

@keyframes inkFill{
  0%{
    opacity:0;
    background: rgba(0,0,0,0);
  }
  20%{
    opacity:.55;
    background: rgba(120,0,0,.55);
  }
  55%{
    opacity:.85;
    background: rgba(40,0,0,.85);
  }
  100%{
    opacity:1;
    background: rgba(0,0,0,1);
  }
}

/* ===== ボス専用死亡：最後までブルブル＋赤黒＋下から崩壊 ===== */
.enemy.deadBoss{
  transform:
    translateX(-50%)
    translate(var(--enemy-x), var(--enemy-y))
    scale(var(--enemy-scale));
  transform-origin: 50% 85%;
  will-change: transform, clip-path, opacity, filter;
  animation: bossDead 1.35s linear forwards;
}

@keyframes bossDead{
  0%{
    opacity:1;
    filter:none;
    clip-path: inset(0 0 0 0);
    transform:
      translateX(-50%)
      translate(var(--enemy-x), var(--enemy-y))
      scale(var(--enemy-scale));
  }

  /* 赤黒化 */
  10%{ filter: saturate(1.5) hue-rotate(-20deg) brightness(.95); }
  30%{ filter: saturate(1.7) hue-rotate(-30deg) brightness(.75); }
  60%{ filter: saturate(2.0) hue-rotate(-35deg) brightness(.55); }
  100%{ filter: brightness(.35) saturate(2); }

  /* 下から崩壊（clip-path） */
  55%{ clip-path: inset(0 0 18% 0); }
  70%{ clip-path: inset(0 0 45% 0); opacity:.75; }
  85%{ clip-path: inset(0 0 75% 0); opacity:.55; }
  100%{ clip-path: inset(0 0 100% 0); opacity:0; }

  /* ブルブル高頻度ジッター（最後まで維持） */
  4%  { transform: translateX(-50%) translate(calc(var(--enemy-x) - 3px), calc(var(--enemy-y) + 2px)) scale(calc(var(--enemy-scale) * 1.02)); }
  8%  { transform: translateX(-50%) translate(calc(var(--enemy-x) + 3px), calc(var(--enemy-y) - 2px)) scale(calc(var(--enemy-scale) * 1.02)); }
  12% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 4px), calc(var(--enemy-y) + 1px)) scale(calc(var(--enemy-scale) * 1.02)); }
  16% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 4px), calc(var(--enemy-y) - 1px)) scale(calc(var(--enemy-scale) * 1.02)); }
  20% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 3px), calc(var(--enemy-y) + 2px)) scale(calc(var(--enemy-scale) * 1.02)); }
  24% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 3px), calc(var(--enemy-y) - 2px)) scale(calc(var(--enemy-scale) * 1.02)); }
  28% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 4px), calc(var(--enemy-y) + 1px)) scale(calc(var(--enemy-scale) * 1.02)); }
  32% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 4px), calc(var(--enemy-y) - 1px)) scale(calc(var(--enemy-scale) * 1.02)); }
  36% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 3px), calc(var(--enemy-y) + 2px)) scale(calc(var(--enemy-scale) * 1.01)); }
  40% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 3px), calc(var(--enemy-y) - 2px)) scale(calc(var(--enemy-scale) * 1.01)); }
  44% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 4px), calc(var(--enemy-y) + 1px)) scale(calc(var(--enemy-scale) * 1.01)); }
  48% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 4px), calc(var(--enemy-y) - 1px)) scale(calc(var(--enemy-scale) * 1.01)); }

  /* 後半もブルブル維持（崩壊中） */
  56% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 2px), calc(var(--enemy-y) + 4px)) scale(calc(var(--enemy-scale) * 1.00)); }
  60% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 2px), calc(var(--enemy-y) + 3px)) scale(calc(var(--enemy-scale) * 1.00)); }
  64% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 3px), calc(var(--enemy-y) + 5px)) scale(calc(var(--enemy-scale) * .99)); }
  68% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 3px), calc(var(--enemy-y) + 4px)) scale(calc(var(--enemy-scale) * .99)); }
  72% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 2px), calc(var(--enemy-y) + 6px)) scale(calc(var(--enemy-scale) * .98)); }
  76% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 2px), calc(var(--enemy-y) + 5px)) scale(calc(var(--enemy-scale) * .98)); }
  80% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 3px), calc(var(--enemy-y) + 7px)) scale(calc(var(--enemy-scale) * .97)); }
  84% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 3px), calc(var(--enemy-y) + 6px)) scale(calc(var(--enemy-scale) * .97)); }
  88% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 2px), calc(var(--enemy-y) + 9px)) scale(calc(var(--enemy-scale) * .96)); }
  92% { transform: translateX(-50%) translate(calc(var(--enemy-x) + 2px), calc(var(--enemy-y) + 8px)) scale(calc(var(--enemy-scale) * .96)); }
  96% { transform: translateX(-50%) translate(calc(var(--enemy-x) - 2px), calc(var(--enemy-y) + 12px)) scale(calc(var(--enemy-scale) * .95)); }
  100%{ transform: translateX(-50%) translate(var(--enemy-x), calc(var(--enemy-y) + 14px)) scale(calc(var(--enemy-scale) * .95)); }
}

.battle{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;      /* ← バトル枠の縦横比を固定（超大事） */
  background-size: cover;    /* ← 枠にフィット */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  overflow: hidden;
}

.modeGrid .modeBtn{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.modeBtn.shake:active{
  transform: none !important;
}

.modeBtn.shake{
  animation: btnShake .22s ease-in-out;
}

@keyframes btnShake{
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.resetArea{
  margin-top: 12px;
  text-align: center;
}

.resetBtn{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-weight: 700;
}

.resetConfirm{
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}

.resetQ{
  font-size: 14px;
  margin-bottom: 8px;
}

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

.resetYes, .resetNo{
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-weight: 700;
}

.resetYes{
  border-color: #fda4af;
}