/* シンプルな見た目（ボタンと文字中心） */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  background: #1e2230;
  color: #e8e8f0;
  line-height: 1.5;
}

header {
  padding: 12px 16px;
  background: #151823;
  border-bottom: 1px solid #333a50;
}
header h1 { margin: 0 0 4px; font-size: 1.2rem; }
#floor-status  { font-size: 1rem; font-weight: bold; color: #8ad0ff; }
#global-status { font-size: 0.9rem; color: #ffd54a; margin-bottom: 8px; }
button.active { background: #4a5a8a; border-color: #8a9ad0; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
#speed-buttons { display: inline-flex; gap: 4px; }

/* ---- ポップアップ ---- */
#popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
}
#popup.hidden { display: none; }
.popup-box {
  max-width: 360px;
  width: 100%;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  background: #2a3044;
  border: 1px solid #4a5270;
}
.popup-box strong { color: #ffd54a; font-size: 1.2rem; }
.popup-portrait {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  object-fit: contain;
  animation: idle-breath 2s ease-in-out infinite;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}
.popup-title { font-size: 1.2rem; font-weight: bold; color: #ffd54a; margin: 8px 0 4px; }
.popup-note  { font-size: 0.85rem; color: #c0c6dc; margin: 0 0 12px; }

main { max-width: 1120px; margin: 0 auto; padding: 12px 16px 40px; }
h2 { font-size: 0.95rem; margin: 12px 0 6px; color: #9aa3c0; }

select, button {
  font: inherit;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #4a5270;
  background: #2b3145;
  color: #e8e8f0;
}
button { cursor: pointer; }
button:hover:not(:disabled) { background: #3a4260; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- バトル画面のレイアウト（左：本体／右：パネル） ---- */
.battle-layout { display: flex; gap: 14px; align-items: flex-start; }
.battle-main   {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 4px 12px 12px;
  border-radius: 12px;
  --area-text: #9aa3c0;
  transition: background 0.8s;
}
.battle-main .field > h2 { color: var(--area-text); } /* エリアの背景の上の見出し */

/* エリアが変わったときの大きな表示 */
.area-banner {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 14px 36px;
  border-radius: 12px;
  background: rgba(10, 12, 20, 0.8);
  border: 2px solid rgba(255, 213, 74, 0.7);
  text-align: center;
  pointer-events: none;
  animation: area-banner 2.8s ease-in-out forwards;
}
.area-banner .area-name  { font-size: 1.8rem; font-weight: bold; color: #ffd54a; letter-spacing: 0.1em; white-space: nowrap; }
.area-banner .area-floor { font-size: 0.95rem; color: #e8e8f0; }
@keyframes area-banner {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* エンディング */
#ending {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 240, 200, 0.25), rgba(5, 8, 20, 0.92) 70%);
  animation: ending-fade 1.5s ease-out;
}
#ending.hidden { display: none; }
.ending-box { max-width: 520px; width: 100%; text-align: center; }
.ending-title { font-size: 2rem; font-weight: bold; color: #ffd54a; letter-spacing: 0.2em; margin-bottom: 16px; }
.ending-text { line-height: 1.9; color: #e8e8f0; }
.ending-stats { margin: 16px 0; color: #ffd54a; }
.ending-buttons { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ending-buttons button { min-width: 260px; padding: 10px 16px; font-size: 1rem; }
#ending-next { border-color: #ffd54a; color: #ffd54a; }
.ending-note { font-size: 0.8rem; color: #9aa3c0; margin-top: 12px; }
@keyframes ending-fade { from { opacity: 0; } to { opacity: 1; } }
#side-panel {
  flex: 0 0 210px;
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden; /* 行動順の行が左へ消えるとき、横スクロールバーを出さない */
}
/* 強化・アイテムタブは中身が多いので幅を広げる */
#side-panel[data-tab="upgrade"],
#side-panel[data-tab="items"] { flex-basis: 340px; }

/* タブ */
#panel-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
#panel-tabs button { flex: 1; padding: 5px 2px; font-size: 0.8rem; position: relative; white-space: nowrap; }
.tab-badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e04a4a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
}
.tab-badge.hidden { display: none; }

/* ヘッダーの「アイテムを選べます」 */
#reward-badge {
  margin-top: 4px;
  border-color: #ffd54a;
  color: #ffd54a;
  animation: badge-pulse 1.4s ease-in-out infinite;
}
#reward-badge.hidden { display: none; }
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 213, 74, 0); }
  50%      { box-shadow: 0 0 10px rgba(255, 213, 74, 0.7); }
}

/* ---- 行動順リスト ---- */
#order-list {
  position: relative; /* 消える行をその場に固定するための基準 */
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
#order-list.hidden { display: none; }
/* 墨をかぶっている間は行動順が見えない */
#order-list.inked::before {
  content: "🦑 墨で行動順が見えない！";
  display: block;
  padding: 16px 8px;
  border-radius: 8px;
  background: #111;
  color: #9aa3c0;
  text-align: center;
  font-size: 0.85rem;
}
#order-list.previewing::before {
  content: "使ったあとの行動順";
  font-size: 0.75rem;
  color: #ffd54a;
}
.order-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 2px solid;
  background: #252a3b;
  font-size: 0.85rem;
  cursor: default;
  /* 並びの移動・出入りのアニメーション（main.js の ORDER_ANIM_MS と合わせる） */
  transition:
    transform calc(0.3s / var(--speed)) ease,
    opacity   calc(0.3s / var(--speed)) ease;
}
.order-row.ally  { border-color: #4a8ae0; }
.order-row.enemy { border-color: #d04a4a; }
.order-row:hover { background: #343b52; }

/* 顔アイコン：立ち絵の上半分を丸く切り抜く（切り抜き位置は data.js の face） */
.order-row .face {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #f4f4f8;
  background-size: 200%;
  background-repeat: no-repeat;
  border: 2px solid currentColor;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.order-row.ally  .face { border-color: #4a8ae0; }
.order-row.enemy .face { border-color: #d04a4a; }
.order-row .info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.order-row .oname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-row .warn  { font-size: 0.75rem; font-weight: bold; color: #ffd0d0; }
.order-row .warn:empty { display: none; }
.order-row .arrow { display: none; color: #ffd54a; }
.order-row .mark  { font-weight: bold; }

/* 一番上（今行動中）：大きめ・枠が光る・▶ */
.order-row.now {
  padding: 8px 10px;
  font-size: 1rem;
  font-weight: bold;
  animation: now-glow 1.2s ease-in-out infinite;
}
.order-row.now .arrow { display: inline; }
.order-row.now .face  { width: 46px; height: 46px; }
.order-row.ally.now  { --glow: #6ab0ff; }
.order-row.enemy.now { --glow: #ff6a6a; }
@keyframes now-glow {
  0%, 100% { box-shadow: 0 0 4px var(--glow); }
  50%      { box-shadow: 0 0 14px var(--glow), 0 0 4px var(--glow); }
}

/* 危険の予告：赤く点滅 */
.order-row.danger { animation: danger-blink 0.8s ease-in-out infinite; }
@keyframes danger-blink {
  0%, 100% { background: #252a3b; }
  50%      { background: #7a2020; }
}

/* プレビューの印：前に来た（緑）／後ろに下がった（赤）／新しく入った（黄） */
.order-row.chg-up   { background: #1f4a30; }
.order-row.chg-up   .mark { color: #6aff9a; }
.order-row.chg-down { background: #4a1f24; }
.order-row.chg-down .mark { color: #ff7a7a; }
.order-row.chg-new  { background: #4a421f; }
.order-row.chg-new  .mark { color: #ffd54a; }

/* 出入り */
.order-row.entering { opacity: 0; transform: translateX(20px); }
.order-row.leaving  {
  position: absolute;
  opacity: 0;
  transform: translateX(-120%);
  pointer-events: none;
}

/* リストの行にマウスを乗せたとき、バトル画面のキャラを光らせる */
.unit.focus { box-shadow: 0 0 0 2px #ffd54a, 0 0 16px #ffd54a; }

/* 狭い画面：行動順タブは上部に横並び、強化・アイテムタブは下部のパネルに */
/* ---- ユニット表示 ---- */
.unit-row { display: flex; flex-wrap: wrap; gap: 10px; }
.unit {
  flex: 1 1 200px;
  max-width: 280px;
  padding: 10px;
  border-radius: 8px;
  background: #2a3044;
  border: 2px solid transparent;
}
.unit.acting { border-color: #ffd54a; }
.unit.dead   { opacity: 0.35; }
.unit .name  { font-weight: bold; }
.unit .sub   { font-size: 0.75rem; color: #9aa3c0; }
.unit .stats { font-size: 0.8rem; margin-top: 4px; }
.unit .status { font-size: 0.75rem; margin-top: 4px; min-height: 1.2em; color: #ffcf7a; }

.hpbar {
  height: 8px;
  background: #11131b;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.hpbar > div { height: 100%; background: #4cc26a; transition: width 0.3s; }
.hpbar > div.mid { background: #e0b43a; }
.hpbar > div.low { background: #e05a4a; }

/* =====================================================================
   キャラのアニメーション
   --speed は戦闘速度（×1/×2/×4）。行動アニメの長さは「×1 の秒数 ÷ --speed」
   ※ 秒数を変えたら main.js の ANIM_MS も同じ値にする（終わるまで待つ時間）
   ===================================================================== */
:root { --speed: 1; }

/* 立ち絵の置き場所（踏み込みで枠の外へ動けるよう、はみ出しを許可） */
.sprite-box {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 24px;
  margin-bottom: 6px;
}
.unit .portrait {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
  /* 絵の黒い輪郭が暗い背景に埋もれないよう、白いふちどりを付ける */
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

/* 画像が読み込めないときの代わり（名前の1文字目） */
.portrait-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #3a4260;
  border: 2px dashed #7a84a8;
  font-size: 3rem;
  font-weight: bold;
  color: #e8e8f0;
}

/* 小さい敵（ちびスライムなど） */
.unit.small .portrait { width: 80px; height: 80px; }
.unit.small .sprite-box { min-height: 80px; }

/* 強化個体：金色のオーラ */
.unit.elite { border-color: rgba(255, 201, 74, 0.6); }
.unit.elite .sprite-box::before {
  content: "";
  position: absolute;
  inset: 0 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 80, 0.55) 0%, rgba(255, 210, 80, 0) 70%);
  animation: elite-aura 1.6s ease-in-out infinite;
  pointer-events: none;
}
.unit.elite .name { color: #ffd54a; }
@keyframes elite-aura {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* 擬態中（ミミック）：少し暗く */
.unit.dormant .aura { filter: saturate(0.6) brightness(0.85); }

/* 名前の横の特殊能力アイコン（マウスを乗せると説明） */
.traits { margin-left: 4px; }
.trait-icon {
  display: inline-block;
  margin-left: 2px;
  padding: 0 3px;
  border-radius: 4px;
  background: #3a4260;
  font-size: 0.8rem;
  cursor: help;
}

/* キャラの上の状態異常アイコン＋残りターン */
.badges {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3px;
  z-index: 4;
  pointer-events: auto;
}
.sbadge {
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: bold;
  background: rgba(20, 22, 32, 0.85);
  border: 1px solid #7a84a8;
  cursor: help;
}
.sbadge.poison    { border-color: #a05ad0; color: #e0b0ff; }
.sbadge.burn      { border-color: #e07a3a; color: #ffc090; }
.sbadge.freeze    { border-color: #6ac8ff; color: #c0ecff; }
.sbadge.flying    { border-color: #c0c6dc; }
.sbadge.countdown { border-color: #ff4a4a; color: #ff9a9a; animation: danger-blink 0.8s ease-in-out infinite; }

/* ボスのセリフの吹き出し */
.speech {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  color: #222;
  font-size: 0.85rem;
  font-weight: bold;
  z-index: 8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: speech-pop 0.25s ease-out;
}
.speech::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #fff;
}
@keyframes speech-pop {
  from { opacity: 0; transform: translateX(-50%) scale(0.7); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ---- 待機アニメーション（data.js の idle で指定） ---- */
.idle-breath { animation: idle-breath 2s ease-in-out infinite; }
.idle-puni   { animation: idle-puni 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.idle-flap   { animation: idle-flap 0.4s ease-in-out infinite; }
.idle-float  { animation: idle-float 3s ease-in-out infinite; }
.idle-sway   { animation: idle-sway 2.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.idle-heavy  { animation: idle-heavy 2.6s ease-in-out infinite; }

@keyframes idle-breath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes idle-puni   { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.08, 0.9); } }
@keyframes idle-flap   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes idle-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes idle-sway   { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes idle-heavy  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }

/* ---- 状態の色 ---- */
/* 力をためている：赤く点滅 */
.aura.charging { animation: charge-blink 0.6s ease-in-out infinite; }
@keyframes charge-blink {
  0%, 100% { filter: none; }
  50%      { filter: sepia(1) saturate(5) hue-rotate(-30deg) drop-shadow(0 0 8px #ff3030); }
}
/* 怒り（ゴーレム王のHP50%未満）：赤っぽくなり、待機の揺れが大きくなる */
.unit.enraged .aura { filter: sepia(0.6) saturate(3) hue-rotate(-25deg) drop-shadow(0 0 6px #ff4020); }
.unit.enraged .portrait { animation: idle-rage 1s ease-in-out infinite; }
@keyframes idle-rage {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-6px) rotate(-2deg); }
  75%      { transform: translateY(4px) rotate(2deg); }
}

/* ---- 行動アニメーション ---- */
/* 攻撃の踏み込み（相手の方向へ 40px）。戻りは 0.3 秒 */
.actor {
  position: relative;
  transition: transform calc(0.3s / var(--speed)) ease-out;
}
.actor.step { transition-duration: calc(0.1s / var(--speed)); z-index: 5; }
.unit.ally  .actor.step { transform: translateY(-40px); } /* 味方は上（敵側）へ */
.unit.enemy .actor.step { transform: translateY(40px); }  /* 敵は下（味方側）へ */

/* 被ダメージ：白く光って左右に揺れる */
.actor.anim-hit { animation: hit calc(0.3s / var(--speed)) linear; }
@keyframes hit {
  0%   { transform: translateX(0);    filter: brightness(3); }
  20%  { transform: translateX(-6px); filter: brightness(2.5); }
  40%  { transform: translateX(6px);  filter: brightness(2); }
  60%  { transform: translateX(-4px); filter: brightness(1.5); }
  80%  { transform: translateX(4px);  filter: brightness(1.2); }
  100% { transform: translateX(0);    filter: brightness(1); }
}

/* 回復：緑に光る */
.actor.anim-heal { animation: heal-glow calc(0.4s / var(--speed)) ease-out; }
@keyframes heal-glow {
  0%, 100% { filter: none; }
  40%      { filter: brightness(1.3) drop-shadow(0 0 12px #40ff70) drop-shadow(0 0 4px #40ff70); }
}

/* 戦闘不能：傾きながら沈んで消える（消えたまま） */
.actor.anim-defeat { animation: defeat calc(0.7s / var(--speed)) ease-in forwards; }
@keyframes defeat {
  from { transform: translateY(0) rotate(0);       opacity: 1; }
  to   { transform: translateY(30px) rotate(-25deg); opacity: 0; }
}
.unit.dead .actor:not(.anim-defeat) { opacity: 0; } /* 念のため：倒れたキャラは表示しない */

/* ダメージ・回復の数字：上に浮かびながら消える */
.popups {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  pointer-events: none;
  z-index: 6;
}
.num {
  position: absolute;
  left: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
  animation: float-up calc(0.9s / var(--speed)) ease-out forwards;
}
.num.dmg  { color: #ff4a4a; }
.num.heal { color: #4aff7a; }
.num.crit { color: #ffd54a; font-size: 1.9rem; } /* 会心 */
.num.miss { color: #c0c6dc; font-size: 1.2rem; } /* 回避 */
@keyframes float-up {
  from { transform: translate(-50%, 0);     opacity: 1; }
  to   { transform: translate(-50%, -40px); opacity: 0; }
}

/* 全体攻撃：バトル画面全体が揺れる */
.anim-quake { animation: quake calc(0.5s / var(--speed)) linear; }
@keyframes quake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, 4px); }
  30% { transform: translate(8px, -4px); }
  50% { transform: translate(-6px, 3px); }
  70% { transform: translate(6px, -3px); }
  90% { transform: translate(-3px, 1px); }
}

/* ---- コマンド ---- */
#command-area {
  margin-top: 14px;
  padding: 10px;
  min-height: 110px;
  border-radius: 8px;
  background: #252a3b;
}
#command-title { font-weight: bold; margin-bottom: 6px; }
#command-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
#skill-desc { margin-top: 6px; font-size: 0.8rem; color: #9aa3c0; min-height: 1.2em; }

/* ---- 勝敗 ---- */
#result {
  margin-top: 12px;
  padding: 14px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 8px;
}
#result.win  { background: #234a33; }
#result.lose { background: #4a2323; }
#result .detail { font-size: 0.9rem; font-weight: normal; margin: 6px 0 10px; }
.hidden { display: none; }

/* ---- 強化画面 ---- */
.upgrade-head .points { font-size: 1.1rem; margin: 8px 0; }
.upgrade-head strong { color: #ffd54a; font-size: 1.4rem; }
.slot-box {
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: #252a3b;
}
.char-list { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.char-card {
  flex: 1 1 240px;
  max-width: 290px;
  padding: 10px;
  border-radius: 8px;
  background: #2a3044;
  border: 2px solid transparent;
}
.char-card.sortie { border-color: #6a9ae0; }
.char-card .portrait {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 6px;
  object-fit: contain;
  background: #f4f4f8;
  border-radius: 8px;
}
.char-card .name { font-weight: bold; }
.char-card .sub  { font-size: 0.8rem; color: #9aa3c0; }
.sortie-check { display: block; margin: 6px 0; font-size: 0.9rem; }
.sortie-hint  { font-size: 0.75rem; color: #9aa3c0; }

/* 未加入キャラ：シルエットで「？？？」 */
.char-card.locked { opacity: 0.85; }
.char-card.locked .portrait { filter: brightness(0) opacity(0.55); background: none; } /* 台座まで黒くならないよう背景を消す */
.char-card.locked .name { color: #9aa3c0; }
.join-cond { margin-top: 6px; font-size: 0.85rem; color: #ffd54a; }
.stat-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 0.9rem; }
.stat-table th { text-align: left; width: 3em; }
.stat-table td { padding: 3px 2px; }
.stat-table .val   { text-align: right; width: 3em; }
.stat-table .bonus { color: #8ae0a0; font-size: 0.8rem; }
.stat-table .gear-bonus { color: #8ac8ff; }   /* 装備による加算 */
.stat-table .up { white-space: nowrap; }
.stat-table button { padding: 2px 8px; }
button.danger { border-color: #a05050; color: #ffb0b0; }

/* パネル内では1列で表示 */
#side-panel .char-list { flex-direction: column; }
#side-panel .char-card { max-width: none; flex: none; }
#side-panel .char-card .portrait { width: 80px; height: 80px; }
.panel-note { font-size: 0.75rem; color: #9aa3c0; margin-top: 4px; }
.equip-summary { font-size: 0.8rem; margin: 4px 0 8px; }
.equip-title { color: #9aa3c0; }

/* ---- アイテムタブ ---- */
.item-section {
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #252a3b;
  font-size: 0.85rem;
}
.item-section h3 { margin: 0 0 6px; font-size: 0.95rem; color: #c0c6dc; }
.item-section small { display: block; font-size: 0.75rem; color: #9aa3c0; }
.item-name.tier1 { color: #e8e8f0; font-weight: bold; }
.item-name.tier2 { color: #ffc94a; font-weight: bold; }  /* 上級は金色 */

/* アイテムのアイコン（絵の輪郭が黒いので明るいマスに置く。上級は金色の枠） */
.item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #7a84a8;
  border-radius: 8px;
  background: #eceef5;
  color: #333;
  font-weight: bold;
  vertical-align: middle;
}
.item-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item-icon.sm { width: 28px; height: 28px; padding: 1px; border-radius: 6px; }
.item-icon.md { width: 40px; height: 40px; padding: 2px; }
.item-icon.lg { width: 52px; height: 52px; padding: 3px; }
.item-icon.tier2 {
  border-color: #ffc94a;
  background: #fff6dc;
  box-shadow: 0 0 6px rgba(255, 201, 74, 0.8);
}
.item-icon.empty { border-style: dashed; background: transparent; border-color: #4a5270; }
/* 画像がない・読み込めないときは名前の1文字目 */
.item-icon.noimg::after { content: attr(data-initial); font-size: 1rem; color: #444; }
.item-icon.sm.noimg::after { font-size: 0.8rem; }
/* 図鑑の未入手：シルエット */
.item-icon.unknown img { filter: brightness(0) opacity(0.45); }
.item-icon.unknown { background: #c8ccd8; box-shadow: none; border-color: #7a84a8; }

/* ---- 合成図鑑 ---- */
.zukan-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 6px; font-size: 0.85rem; }
.zukan-head strong { color: #ffd54a; }
.zukan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.zukan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid #343b52;
  background: #20253a;
  text-align: center;
  font-size: 0.8rem;
}
.zukan-card small { line-height: 1.35; }
.zukan-card button { margin-top: auto; padding: 2px 12px; font-size: 0.8rem; }
.zukan-card.unknown .zukan-result { opacity: 0.9; }
.unknown-name { color: #7a84a8; letter-spacing: 0.2em; }
/* 作れるものは光らせる */
.zukan-card.ready { border-color: #ffd54a; animation: recipe-glow 1.4s ease-in-out infinite; }
/* 同じ素材2つの「極」 */
.zukan-card.ultimate { background: linear-gradient(180deg, #2c2540 0%, #20253a 100%); }
.kiwami {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 0 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffe48a, #c8901a);
  color: #3a2000;
  font-weight: bold;
  font-size: 0.75rem;
  cursor: help;
}
.icon-row { display: flex; align-items: center; gap: 8px; }

/* 報酬 */
.item-section.reward { border: 2px solid #ffd54a; }
.reward-list { display: flex; flex-direction: column; gap: 6px; }
.reward-choice { text-align: left; display: flex; align-items: center; gap: 10px; }
.reward-choice.tier2 { border-color: #ffc94a; box-shadow: 0 0 8px rgba(255, 201, 74, 0.5); }
.reward-choice small { margin-top: 2px; }

/* 装備 */
.equip-box { margin-bottom: 8px; }
.equip-char { font-weight: bold; margin-bottom: 2px; }
.equip-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 0;
  border-top: 1px solid #343b52;
}
.equip-slot .slot-text { flex: 1; min-width: 0; }
.equip-slot select { flex: 1; min-width: 0; font-size: 0.8rem; padding: 4px; }
.equip-slot button { padding: 2px 8px; font-size: 0.8rem; }

/* 所持品 */
.inv-row { padding: 3px 0; border-top: 1px solid #343b52; }

/* 合成 */
.craft-message { color: #ffd54a; margin-bottom: 6px; }
.craft-free { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.craft-free select { flex: 1; min-width: 90px; font-size: 0.8rem; padding: 4px; }
.recipe-row {
  padding: 6px;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid #343b52;
  opacity: 0.75;
}
.recipe-row .have { color: #9aa3c0; font-size: 0.75rem; margin-left: 2px; }
.recipe-icons { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.recipe-icons .arrow { margin: 0 2px; color: #ffd54a; font-weight: bold; }
.recipe-mat { display: inline-flex; align-items: flex-end; }
.recipe-mat.missing .item-icon { opacity: 0.4; filter: grayscale(1); } /* 持っていない素材は薄く */
.recipe-row button { margin-top: 4px; padding: 2px 10px; font-size: 0.8rem; }
/* 作れるレシピは光らせる */
.recipe-row.ready {
  opacity: 1;
  border-color: #ffd54a;
  animation: recipe-glow 1.4s ease-in-out infinite;
}
@keyframes recipe-glow {
  0%, 100% { box-shadow: 0 0 2px rgba(255, 213, 74, 0.4); }
  50%      { box-shadow: 0 0 12px rgba(255, 213, 74, 0.8); }
}

/* ---- ログ ---- */
#log {
  height: 220px;
  overflow-y: auto;
  padding: 8px;
  background: #151823;
  border-radius: 8px;
  font-size: 0.85rem;
}
#log p { margin: 0 0 2px; }
#log .turn   { color: #ffd54a; margin-top: 6px; }
#log .damage { color: #ff9a8a; }
#log .heal   { color: #8ae0a0; }
#log .info   { color: #9ac0ff; }
#log .system { color: #ffffff; font-weight: bold; }


/* =====================================================================
   横画面（16:9）のステージ
   ゲームは 960×540 の #stage に描き、screen.js が画面に合わせて拡大縮小する。
   サイズはすべてこの 960×540 の中での大きさ（実際の画面ではそれを拡大・縮小して表示）
   ===================================================================== */
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: #0b0d14; }

#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 540px;
  transform-origin: 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #1e2230;
  font-size: 13px;
  line-height: 1.4;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#stage input { -webkit-user-select: text; user-select: text; }

/* 一時停止中（縦向きなど）はアニメーションも止める */
#stage.paused *, #stage.paused *::before, #stage.paused *::after { animation-play-state: paused !important; }

/* ボタン類：ダブルタップでの拡大を防ぎ、すぐ反応させる */
button, select, input, .trait-icon, .sbadge, .item-icon, .kiwami { touch-action: manipulation; }

/* ---- ヘッダー（1行） ---- */
#stage header {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
}
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
#stage header h1 { margin: 0; font-size: 15px; white-space: nowrap; }
.header-status { min-width: 0; line-height: 1.3; }
#stage #floor-status  { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage #global-status { font-size: 11px; margin: 0; white-space: nowrap; }
.header-right { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.header-right button { padding: 4px 9px; font-size: 12px; }
#stage #reward-badge { margin: 0; }
#cloud-status { font-size: 10px; color: #9aa3c0; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 本体 ---- */
#stage main { flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; padding: 6px 8px 8px; }
#battle-screen { height: 100%; }
#stage .battle-layout { height: 100%; gap: 8px; align-items: stretch; flex-direction: row; }

#stage .battle-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 6px;
  overflow: hidden;
}
#stage .controls { flex: 0 0 auto; margin: 0; gap: 6px; }
#stage .controls button { padding: 3px 10px; font-size: 12px; }
#stage .controls > span:first-of-type { color: var(--area-text); font-size: 12px; } /* 「速度：」をエリアの背景でも読めるように */

/* 敵・味方の列：それぞれ残りの高さを半分ずつ */
#stage .field { flex: 1 1 0; min-height: 0; display: flex; }
#stage .field > h2 { display: none; }
#stage .unit-row { flex: 1; flex-wrap: nowrap; gap: 6px; justify-content: center; align-items: stretch; }
#stage .unit {
  flex: 1 1 0;
  min-width: 0;
  max-width: 150px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
}
#stage .unit .portrait, #stage .portrait-fallback { width: 70px; height: 70px; }
#stage .portrait-fallback { font-size: 1.8rem; }
#stage .unit.small .portrait { width: 48px; height: 48px; }
#stage .sprite-box, #stage .unit.small .sprite-box { min-height: 70px; margin-bottom: 2px; }
#stage .unit .name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage .traits { margin-left: 2px; }
#stage .trait-icon { font-size: 10px; padding: 0 2px; }
#stage .unit .sub { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage .hpbar { height: 6px; margin: 2px 0 1px; }
#stage .unit .hp-text { font-size: 11px; }
#stage .unit .stats { font-size: 9.5px; margin-top: 1px; line-height: 1.3; }
#stage .unit .status { font-size: 9.5px; min-height: 0; margin-top: 1px; line-height: 1.3; }
#stage .sbadge { font-size: 10px; }
#stage .num { font-size: 1.2rem; }
#stage .num.crit { font-size: 1.5rem; }
#stage .unit.ally  .actor.step { transform: translateY(-26px); }
#stage .unit.enemy .actor.step { transform: translateY(26px); }
#stage .speech { max-width: 200px; font-size: 11px; }

/* コマンド */
#stage #command-area { flex: 0 0 auto; min-height: 0; margin: 0; padding: 5px 8px; }
#stage #command-title { font-size: 12px; margin-bottom: 4px; min-height: 16px; }
#stage #command-buttons { gap: 5px; }
#stage #command-buttons button { padding: 5px 12px; font-size: 13px; }
#stage #skill-desc { font-size: 11px; min-height: 15px; margin-top: 3px; }

/* 勝敗メッセージはバトルの上に重ねる */
#stage #result {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 15;
  min-width: 340px;
  margin: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

#stage .area-banner { top: 38%; }

/* ---- 右パネル ---- */
#stage #side-panel {
  flex: 0 0 250px;
  position: static;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#stage #side-panel[data-tab="upgrade"],
#stage #side-panel[data-tab="items"] { flex-basis: 310px; }
#stage #panel-tabs { flex: 0 0 auto; margin-bottom: 6px; gap: 3px; }
#stage #panel-tabs button { padding: 4px 2px; font-size: 12px; }
#panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#stage #order-list { flex-direction: column; overflow: visible; }
#log-root { height: 100%; }
#stage #log { height: 100%; font-size: 11px; }

/* ---- お知らせ（タップした説明・保存のお知らせなど） ---- */
#toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 80%;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(15, 18, 28, 0.95);
  border: 1px solid #7a84a8;
  color: #e8e8f0;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
#toast.show { opacity: 1; }

/* ---- 遊び方 ---- */
.howto { text-align: left; }
.howto h3 { margin: 0 0 6px; text-align: center; color: #ffd54a; }
.howto ol { margin: 0 0 8px; padding-left: 1.4em; }
.howto li { margin-bottom: 5px; line-height: 1.5; font-size: 12px; }
.howto b { color: #ffd54a; }
#stage .popup-box { max-height: 500px; overflow-y: auto; }
#stage .popup-box:has(.howto) { max-width: 560px; }
#stage #popup, #stage #ending { position: absolute; }

/* ---- ウィンドウ（アカウント・ランキング・ニックネーム） ---- */
#modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
#modal.hidden { display: none; }
.modal-box {
  width: 460px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: #2a3044;
  border: 1px solid #4a5270;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #4a5270;
  font-weight: bold;
  color: #ffd54a;
}
#modal-close { padding: 2px 10px; }
#modal-body { padding: 10px 14px 14px; overflow-y: auto; }
#modal-body p { margin: 0 0 8px; }
.modal-note { font-size: 11px; color: #9aa3c0; }
.modal-error { font-size: 12px; color: #ff9a8a; min-height: 1em; }
.modal-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
button.primary { border-color: #ffd54a; color: #ffd54a; }
/* ---- シェア ---- */
.share-preview {
  padding: 10px 12px;
  border-radius: 8px;
  background: #1d2232;
  border: 1px solid #4a5270;
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
  word-break: break-all;
}
.share-buttons button { padding: 8px 14px; }
button.share-x { background: #000; border-color: #fff; color: #fff; font-weight: bold; }
.popup-share { margin-top: 4px; border-color: #ffd54a; color: #ffd54a; }
.rank-share { margin-left: 8px; padding: 2px 8px; font-size: 11px; border-color: #ffd54a; color: #ffd54a; }
#ending-share { border-color: #ffd54a; color: #ffd54a; }
#nickname-input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid #7a84a8;
  background: #151823;
  color: #e8e8f0;
}
.account-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 12px; }
.account-table th { text-align: left; width: 7em; color: #9aa3c0; font-weight: normal; padding: 3px 0; }
.account-table td { padding: 3px 0; }

/* ランキング */
.my-rank { margin-bottom: 8px; font-size: 13px; }
.my-rank strong { color: #ffd54a; font-size: 16px; }
.my-rank button { margin-left: 6px; padding: 2px 10px; font-size: 12px; }
.rank-scroll { max-height: 320px; overflow-y: auto; border-radius: 6px; border: 1px solid #343b52; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rank-table th { position: sticky; top: 0; background: #20253a; color: #9aa3c0; font-weight: normal; padding: 4px 6px; text-align: left; }
.rank-table td { padding: 4px 6px; border-top: 1px solid #343b52; }
.rank-table .rank  { width: 3em; text-align: right; color: #9aa3c0; }
.rank-table .rfloor { width: 5em; text-align: right; font-weight: bold; }
.rank-table .rname { word-break: break-all; }
.rank-table tr.top1 .rank { color: #ffd54a; font-weight: bold; }
.rank-table tr.top2 .rank { color: #d8dce8; font-weight: bold; }
.rank-table tr.top3 .rank { color: #e0a060; font-weight: bold; }
.rank-table tr.mine td { background: rgba(255, 213, 74, 0.15); }

/* =====================================================================
   折りたたみ表示・縦画面（9:16）・タップで開くパネル
   ===================================================================== */

/* ---- キャラのカード：ふだんは「名前・HPバー・行動順」だけ ----
   設定「ステータスを常に表示」が ON（#stage.show-stats）なら全部出す */
#stage .unit { cursor: pointer; }
#stage .unit:hover { border-color: rgba(255, 255, 255, 0.25); }
#stage:not(.show-stats) .unit .sub,
#stage:not(.show-stats) .unit .hp-text,
#stage:not(.show-stats) .unit .stats,
#stage:not(.show-stats) .unit .status,
#stage:not(.show-stats) .unit .traits { display: none; }
#stage:not(.show-stats) .unit .portrait,
#stage:not(.show-stats) .portrait-fallback { width: 80px; height: 80px; }
#stage:not(.show-stats) .sprite-box { min-height: 80px; }
#stage:not(.show-stats) .unit { justify-content: center; }

/* 行動順（常に表示） */
.turn-badge { font-size: 11px; color: #9aa3c0; margin-top: 2px; min-height: 15px; white-space: nowrap; }
.turn-badge.soon { color: #8ad0ff; font-weight: bold; }
.turn-badge.now  { color: #ffd54a; font-weight: bold; }

/* ---- 🎒ボタン（バトル画面の右上の端） ---- */
#bag-btn {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 12;
  width: 40px;
  height: 34px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  border-radius: 10px;
  border-color: #ffd54a;
  background: #2b3145;
}

/* ---- タップで開くパネル（キャラの詳細・🎒変換） ---- */
#overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: 44;
  background: rgba(0, 0, 0, 0.3); /* 外側をタップすると閉じる。開いている間は後ろを触れない */
}
#overlay-backdrop.hidden { display: none; }
.float-panel {
  position: absolute;
  z-index: 45;
  width: 270px;
  max-height: 460px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: #262c40;
  border: 1px solid #5a6488;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  animation: panel-pop 0.15s ease-out;
}
.float-panel.hidden { display: none; }
#bag-panel { width: 380px; }
@keyframes panel-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
/* 縦画面では画面の下から出す */
.float-panel.sheet {
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important; /* #bag-panel の幅指定より優先して横いっぱいに */
  max-height: 58%;
  border-radius: 14px 14px 0 0;
  animation: sheet-up 0.18s ease-out;
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.fp-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #3a4260;
}
.fp-title { font-weight: bold; font-size: 14px; color: #ffd54a; min-width: 0; }
.fp-title.ally  { color: #8ab8ff; }
.fp-title.enemy { color: #ff9a8a; }
.fp-title small { display: block; font-size: 11px; font-weight: normal; color: #9aa3c0; }
.fp-close { flex: 0 0 auto; padding: 4px 12px; font-size: 14px; }
.fp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px 10px; font-size: 12px; }

/* キャラの詳細 */
.detail-hp { margin-bottom: 6px; }
.detail-hp b { font-size: 15px; }
.detail-hp .hpbar { margin-top: 3px; }
.detail-stats { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.detail-stats th { text-align: left; width: 5em; color: #9aa3c0; font-weight: normal; padding: 2px 0; }
.detail-stats td { padding: 2px 0; font-weight: bold; }
.detail-stats .up   { color: #6aff9a; font-size: 11px; }
.detail-stats .down { color: #ff7a7a; font-size: 11px; }
.detail-intent { margin: 4px 0 6px; padding: 4px 8px; border-radius: 6px; background: #5a2020; color: #ffd0d0; font-weight: bold; }
.detail-sec { margin: 6px 0 3px; color: #9aa3c0; font-size: 11px; border-bottom: 1px solid #3a4260; }
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li { padding: 2px 0; line-height: 1.45; }
.detail-list li.buff { color: #8ae0a0; }
.detail-list li.debuff { color: #ffb0a0; }
.detail-list li.none { color: #7a84a8; }
.detail-list .item-icon { vertical-align: middle; }

/* 🎒 変換パネル */
.bag-note { margin: 0 0 6px; font-size: 11px; color: #9aa3c0; }
.bag-empty { color: #7a84a8; text-align: center; padding: 12px 0; }
.bag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  border-radius: 6px;
  border-top: 1px solid #343b52;
  cursor: pointer;
}
.bag-row.picked { background: rgba(255, 213, 74, 0.12); }
.bag-name { flex: 1; min-width: 0; }
.bag-name small { display: block; font-size: 10px; color: #9aa3c0; }
.bag-step { display: flex; align-items: center; gap: 3px; }
.bag-step span { min-width: 18px; text-align: center; font-weight: bold; }
.bag-step button { padding: 2px 8px; font-size: 13px; }
.bag-step .bag-all { font-size: 11px; padding: 3px 6px; }
.bag-foot { flex: 0 0 auto; padding: 8px 10px 10px; border-top: 1px solid #3a4260; }
.bag-total { margin-bottom: 6px; font-size: 13px; }
.bag-total b { color: #ffd54a; font-size: 15px; }
.bag-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.bag-buttons button { padding: 6px 12px; }

/* ⚙ 設定 */
.setting-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.setting-row input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.setting-row small { color: #9aa3c0; }

/* =====================================================================
   縦画面（540×960）のレイアウト
   上から：ヘッダー → 右パネル（行動順は横並び）→ バトル → コマンド
   ===================================================================== */
#stage.portrait { font-size: 14px; }
#stage.portrait header { height: auto; flex-wrap: wrap; padding: 6px 10px; row-gap: 4px; }
#stage.portrait .header-left { width: 100%; }
#stage.portrait .header-right { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
#stage.portrait .header-right button { padding: 6px 10px; font-size: 13px; }
#stage.portrait #cloud-status { margin-right: auto; max-width: 200px; }

#stage.portrait .battle-layout { flex-direction: column; gap: 6px; }
#stage.portrait #side-panel { flex: 0 0 auto; width: 100%; height: auto; }
#stage.portrait #side-panel[data-tab="upgrade"],
#stage.portrait #side-panel[data-tab="items"],
#stage.portrait #side-panel[data-tab="log"] { flex: 0 0 330px; }
#stage.portrait #panel-tabs button { padding: 7px 2px; font-size: 13px; }
#stage.portrait #order-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
#stage.portrait .order-row { flex: 0 0 auto; max-width: 130px; padding: 3px 7px; gap: 5px; font-size: 12px; }
#stage.portrait .order-row .face { width: 30px; height: 30px; }
#stage.portrait .order-row.now { padding: 5px 9px; }
#stage.portrait .order-row.now .face { width: 36px; height: 36px; }
#stage.portrait #order-list.previewing::before { display: none; }

#stage.portrait .battle-main { flex: 1 1 auto; min-height: 0; }
#stage.portrait .unit-row { flex-wrap: wrap; align-content: center; gap: 6px; }
#stage.portrait .unit { flex: 0 0 calc((100% - 12px) / 3); max-width: 170px; }
#stage.portrait .unit .name { font-size: 13px; }
#stage.portrait .turn-badge { font-size: 12px; }

#stage.portrait #command-area { padding: 6px 8px; }
#stage.portrait #command-title { font-size: 13px; }
#stage.portrait #command-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#stage.portrait #command-buttons button { padding: 10px 4px; font-size: 14px; }
#stage.portrait #result { min-width: 0; width: 88%; }
#stage.portrait .modal-box { width: 500px; }
#stage.portrait .popup-box:has(.howto) { max-width: 500px; }
#stage.portrait #bag-btn { width: 46px; height: 40px; font-size: 22px; }
/* =====================================================================
   📖 図鑑
   ===================================================================== */
.zk-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.zk-tabs button { flex: 1; padding: 6px 4px; font-size: 13px; }
.zk-progress { height: 5px; border-radius: 3px; background: #151823; overflow: hidden; margin-bottom: 8px; }
.zk-progress > div { height: 100%; background: linear-gradient(90deg, #ffd54a, #ff9a3a); }
.zk-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}
.zk-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px 4px;
  border-radius: 8px;
  background: #20253a;
  border: 1px solid #343b52;
}
.zk-cell:hover:not(:disabled) { background: #2c3350; }
.zk-cell.boss { border-color: #c8901a; }
.zk-img { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.zk-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 1px #fff); }
.zk-name { font-size: 10px; line-height: 1.25; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-cell.unknown .zk-img img { filter: brightness(0) opacity(0.5); }   /* 未登録：シルエット */
.zk-cell.unknown .zk-name { color: #7a84a8; letter-spacing: 0.1em; }
.zk-tag {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  background: #c8901a;
  color: #2a1a00;
  font-size: 9px;
  font-weight: bold;
}
.zk-cell .zk-tag { position: absolute; top: 3px; right: 3px; }

.zk-back { margin-bottom: 8px; padding: 4px 12px; font-size: 12px; }
.zk-detail { text-align: center; }
.zk-big { display: flex; justify-content: center; margin-bottom: 4px; }
.zk-big img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 2px #fff); }
.zk-detail.unknown .zk-big img { filter: brightness(0) opacity(0.5); }
.zk-big .item-icon.lg { width: 80px; height: 80px; }
.zk-dname { font-size: 17px; font-weight: bold; }
.zk-sub { font-size: 11px; color: #9aa3c0; margin-bottom: 6px; }
.zk-desc { margin: 4px 0 8px; }
.zk-hint { color: #ffd54a; margin: 6px 0; }
.zk-stats { width: 100%; border-collapse: collapse; margin: 4px 0; font-size: 12px; }
.zk-stats th { color: #9aa3c0; font-weight: normal; text-align: left; padding: 2px 4px; }
.zk-stats td { font-weight: bold; text-align: left; padding: 2px 4px; }
.zk-detail .detail-list, .zk-detail .detail-sec { text-align: left; }
.zk-recipe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0; }
.zk-used { font-size: 12px; text-align: left; margin: 2px 0 0; }
#stage.portrait .zk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: 560px; }
#stage.portrait .modal-box { max-height: 860px; }
/* =====================================================================
   縦画面：バトル部分は中身の高さだけにして、残りを下のパネルに回す
   （上から：ヘッダー → バトル（敵・味方・コマンド）→ タブ＋パネル）
   ===================================================================== */
#stage.portrait .battle-main { flex: 0 0 auto; gap: 4px; padding: 4px 6px 6px; }
#stage.portrait .field { flex: 0 0 auto; }
#stage.portrait .unit-row { align-content: flex-start; align-items: flex-start; }
#stage.portrait .unit { padding: 4px 5px 3px; }
#stage.portrait:not(.show-stats) .unit .portrait,
#stage.portrait:not(.show-stats) .portrait-fallback { width: 58px; height: 58px; }
#stage.portrait:not(.show-stats) .sprite-box { min-height: 58px; margin-bottom: 0; }
#stage.portrait .unit.small .portrait { width: 40px; height: 40px; }
#stage.portrait .unit .name { font-size: 12px; }
#stage.portrait .turn-badge { font-size: 11px; min-height: 14px; margin-top: 1px; }
#stage.portrait .hpbar { margin: 2px 0 0; }
#stage.portrait .controls button { padding: 4px 10px; }
#stage.portrait #command-area { padding: 5px 8px; }
#stage.portrait #command-buttons button { padding: 8px 4px; font-size: 13px; }

/* パネルは残りの高さを全部使う（どのタブでも） */
#stage.portrait #side-panel,
#stage.portrait #side-panel[data-tab="upgrade"],
#stage.portrait #side-panel[data-tab="items"],
#stage.portrait #side-panel[data-tab="log"] { flex: 1 1 auto; min-height: 0; height: auto; }

/* 行動順は縦のリスト（場所があるので名前まで読める） */
#stage.portrait #order-list { flex-direction: column; overflow: visible; padding-bottom: 0; gap: 4px; }
#stage.portrait .order-row { flex: 0 0 auto; max-width: none; padding: 3px 8px; font-size: 13px; }
#stage.portrait .order-row .face { width: 30px; height: 30px; }
#stage.portrait .order-row.now { padding: 5px 10px; font-size: 14px; }
#stage.portrait .order-row.now .face { width: 38px; height: 38px; }
#stage.portrait #order-list.previewing::before { display: block; }
/* 縦画面のヘッダー：ボタンはアイコンだけにして1段に収める */
#stage.portrait .header-right .lbl { display: none; }
#stage.portrait .header-right { flex-wrap: nowrap; gap: 4px; }
#stage.portrait .header-right button { padding: 5px 9px; font-size: 15px; }
#stage.portrait #cloud-status { max-width: 260px; }
/* 歌の効果・気（キャラの上のアイコン） */
.sbadge.song { border-color: #6ad0a0; color: #c0ffe0; }
.sbadge.ki   { border-color: #e0a040; color: #ffd8a0; }
.sbadge.ki.full { background: #6a3a10; border-color: #ffd54a; color: #ffe48a; animation: badge-pulse 1.2s ease-in-out infinite; }
.sbadge.sleep { border-color: #8a9ad0; color: #d0d8ff; }
.sbadge.focus { border-color: #c08aff; color: #ecd8ff; }
.sbadge.counterStance { border-color: #e0a040; color: #ffd8a0; }
/* =====================================================================
   縦画面で「強化」「アイテム」「ログ」を開いている間は、バトル部分を小さく
   （キャラは小さなアイコン＋HPバーだけ。パネルを広く使える。「行動順」タブで元の大きさに戻る）
   ===================================================================== */
#stage.portrait:not([data-tab="order"]) .battle-main { gap: 3px; padding: 3px 6px 4px; }
#stage.portrait:not([data-tab="order"]) .controls button { padding: 2px 8px; font-size: 12px; }
#stage.portrait:not([data-tab="order"]) .controls > span:first-of-type { display: none; }
#stage.portrait:not([data-tab="order"]) #bag-btn { width: 36px; height: 30px; font-size: 17px; top: 3px; }
#stage.portrait:not([data-tab="order"]) .unit-row { flex-wrap: nowrap; gap: 3px; justify-content: flex-start; }
#stage.portrait:not([data-tab="order"]) .unit { flex: 1 1 0; max-width: 90px; min-width: 0; padding: 2px 3px 3px; }
#stage.portrait:not([data-tab="order"]) .unit .portrait,
#stage.portrait:not([data-tab="order"]) .portrait-fallback { width: 34px !important; height: 34px !important; font-size: 1rem; }
#stage.portrait:not([data-tab="order"]) .sprite-box { min-height: 34px !important; margin-bottom: 0; }
#stage.portrait:not([data-tab="order"]) .unit .name { font-size: 9.5px; }
#stage.portrait:not([data-tab="order"]) .hpbar { height: 4px; margin: 1px 0 0; }
#stage.portrait:not([data-tab="order"]) .turn-badge,
#stage.portrait:not([data-tab="order"]) .unit .sub,
#stage.portrait:not([data-tab="order"]) .unit .hp-text,
#stage.portrait:not([data-tab="order"]) .unit .stats,
#stage.portrait:not([data-tab="order"]) .unit .status,
#stage.portrait:not([data-tab="order"]) .traits,
#stage.portrait:not([data-tab="order"]) .area-banner { display: none; }
#stage.portrait:not([data-tab="order"]) .sbadge { font-size: 8px; padding: 0 3px; }
#stage.portrait:not([data-tab="order"]) .num { font-size: 0.85rem; }
#stage.portrait:not([data-tab="order"]) .speech { display: none; }
#stage.portrait:not([data-tab="order"]) .unit.ally  .actor.step { transform: translateY(-8px); }
#stage.portrait:not([data-tab="order"]) .unit.enemy .actor.step { transform: translateY(8px); }
/* コマンド欄は、自分で技を選ぶ番（ボタンがあるとき）だけ出す */
#stage.portrait:not([data-tab="order"]) #command-area:not(:has(#command-buttons button)) { display: none; }
#stage.portrait:not([data-tab="order"]) #command-title { font-size: 11px; margin-bottom: 2px; min-height: 0; }
#stage.portrait:not([data-tab="order"]) #command-buttons button { padding: 6px 2px; font-size: 12px; }
#stage.portrait:not([data-tab="order"]) #skill-desc { display: none; }
#stage.portrait:not([data-tab="order"]) #result { font-size: 13px; padding: 6px; }
/* 重なり順の整理：お知らせ・エンディングは、バトル画面の勝敗メッセージや🎒ボタン、
   キャラの詳細パネルより必ず上に出す（下に隠れて OK が押せなくならないように） */
#stage #ending { z-index: 47; }
#stage #popup  { z-index: 48; }
#modal         { z-index: 50; }
#toast         { z-index: 60; }
/* =====================================================================
   軽量モード（#stage.lite）：スマホで絵が止まらないよう、重い効果を減らす
   ・動いている絵（とその親）に付いた filter（影・色変え）をやめる … 毎フレーム描き直しになって重いため
   ・ずっと光り続ける・点滅し続けるアニメーションを止めて、色で表す
   キャラの揺れ・攻撃の踏み込み・ダメージ表示などの軽い動きはそのまま
   ===================================================================== */
#stage.lite .unit .portrait { filter: none; will-change: transform; }
#stage.lite .aura,
#stage.lite .aura.charging,
#stage.lite .unit.enraged .aura,
#stage.lite .unit.dormant .aura { filter: none !important; animation: none !important; }
/* 力をためている・怒り・擬態は、カードの枠の色で表す */
#stage.lite .unit:has(.aura.charging) { border-color: #ff4a4a; box-shadow: inset 0 0 0 1px #ff4a4a; }
#stage.lite .unit.enraged { border-color: #ff7a3a; background: #3a2630; }
#stage.lite .unit.dormant { opacity: 0.85; }
/* 強化個体のオーラは動かさない */
#stage.lite .unit.elite .sprite-box::before { animation: none; opacity: 0.7; }
/* 光り続ける・点滅し続けるもの → 止めた見た目に */
#stage.lite .order-row.now { animation: none; box-shadow: 0 0 6px var(--glow); }
#stage.lite .order-row.danger { animation: none; background: #5a2020; }
#stage.lite .sbadge.countdown { animation: none; background: #5a2020; }
#stage.lite .sbadge.ki.full { animation: none; }
#stage.lite #reward-badge { animation: none; box-shadow: 0 0 6px rgba(255, 213, 74, 0.7); }
#stage.lite .recipe-row.ready,
#stage.lite .zukan-card.ready { animation: none; box-shadow: 0 0 6px rgba(255, 213, 74, 0.6); }
#stage.lite .rotate-icon { animation: none; }
/* =====================================================================
   エリアの背景画像
   ・バトル画面いっぱい（cover・下寄せ）。縦画面では左右が切れる（中央基準）
   ・背景を上に少し伸ばして置くことで、地平線が画面の真ん中あたりに来る
     → 敵は地平線のあたり、味方は手前の地面（下から3割ほど）に立って見える
   ・切り替えは新しい背景を重ねて1秒でフェード
   ===================================================================== */
#stage .battle-main { isolation: isolate; overflow: hidden; }
#bg-layers {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.bg-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  bottom: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease;
}
.bg-layer.show { opacity: 1; }
/* ボス戦：少し暗くして赤みを足す */
#bg-layers.boss .bg-layer { filter: brightness(0.62) sepia(0.35) saturate(1.6) hue-rotate(-18deg); }
#bg-layers.boss::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(160, 20, 20, 0) 30%, rgba(120, 0, 0, 0.35) 100%);
}
/* 背景が見えるように、キャラのカード・コマンド欄は半透明に */
#stage .unit { background: rgba(18, 22, 34, 0.58); }
#stage .unit.elite { background: rgba(40, 32, 12, 0.6); }
#stage #command-area { background: rgba(18, 22, 34, 0.82); }
#stage .controls button { background: rgba(43, 49, 69, 0.9); }

/* エリア名：画面の中央に大きく出してから消える */
#stage .area-banner {
  top: 50%;
  left: 50%;
  padding: 18px 44px;
  animation: area-banner-center 2.8s ease-in-out forwards;
}
#stage .area-banner .area-name { font-size: 38px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
#stage .area-banner .area-floor { font-size: 15px; }
@keyframes area-banner-center {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

/* =====================================================================
   スキルのエフェクト（effects.js が #fx-layer に画像を置く）
   長さは「×1 の秒数 ÷ --speed」。effects.js の FX の ms と合わせる
   ===================================================================== */
#fx-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.fx {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
/* 斬撃：左上から右下へ、素早く拡大しながら消える */
.fx-slash { animation: fx-slash calc(0.3s / var(--speed)); }
@keyframes fx-slash {
  0%   { transform: translate(-30%, -30%) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(30%, 30%) scale(1.3); opacity: 0; }
}
/* 炎・矢：攻撃者から対象へ飛んでいく（--sx/--sy は攻撃者の位置） */
.fx-fire { animation: fx-fly calc(0.5s / var(--speed)) ease-in; }
@keyframes fx-fly {
  0%   { transform: translate(var(--sx), var(--sy)) scale(0.45); opacity: 0.9; }
  65%  { transform: translate(0, 0) scale(0.75); opacity: 1; }
  100% { transform: translate(0, 0) scale(1.6); opacity: 0; }
}
.fx-arrow { animation: fx-arrow calc(0.35s / var(--speed)) linear; }
@keyframes fx-arrow {
  0%   { transform: translate(var(--sx), var(--sy)) rotate(var(--rot)) scale(0.8); opacity: 1; }
  85%  { transform: translate(0, 0) rotate(var(--rot)) scale(0.8); opacity: 1; }
  100% { transform: translate(0, 0) rotate(var(--rot)) scale(0.9); opacity: 0; }
}
/* 爆発：小さい状態から一気に拡大＋回転 */
.fx-explosion { animation: fx-explosion calc(0.5s / var(--speed)); }
@keyframes fx-explosion {
  0%   { transform: scale(0.15) rotate(0deg); opacity: 1; }
  60%  { transform: scale(1.2) rotate(60deg); opacity: 1; }
  100% { transform: scale(1.5) rotate(90deg); opacity: 0; }
}
/* 雷：上から落ちてきて2回点滅 */
.fx-thunder { animation: fx-thunder calc(0.55s / var(--speed)) linear; }
@keyframes fx-thunder {
  0%   { transform: translateY(-120%); opacity: 1; }
  25%  { transform: translateY(0); opacity: 1; }
  40%  { opacity: 0.1; }
  55%  { opacity: 1; }
  70%  { opacity: 0.1; }
  85%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
/* 氷：拡大しながらゆっくり回転 */
.fx-ice { animation: fx-ice calc(0.6s / var(--speed)); }
@keyframes fx-ice {
  0%   { transform: scale(0.5) rotate(0deg); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.3) rotate(70deg); opacity: 0; }
}
/* 回復：下からふわっと上がる */
.fx-heal { animation: fx-heal calc(0.8s / var(--speed)); }
@keyframes fx-heal {
  0%   { transform: translateY(35%) scale(0.8); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-35%) scale(1); opacity: 0; }
}
/* 強化：足元から上にふわっと */
.fx-buff { animation: fx-buff calc(0.7s / var(--speed)); }
@keyframes fx-buff {
  0%   { transform: translateY(45%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-40%); opacity: 0; }
}
/* 弱体：上から沈むように */
.fx-debuff { animation: fx-debuff calc(0.7s / var(--speed)); }
@keyframes fx-debuff {
  0%   { transform: translateY(-45%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(40%); opacity: 0; }
}
/* 状態異常：ぷくぷく膨らむ */
.fx-poison { animation: fx-poison calc(0.7s / var(--speed)); }
@keyframes fx-poison {
  0%   { transform: scale(0.5); opacity: 0; }
  25%  { transform: scale(1.05); opacity: 1; }
  45%  { transform: scale(0.9); }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
/* 打撃：一瞬大きく出てすぐ消える */
.fx-impact { animation: fx-impact calc(0.2s / var(--speed)); }
@keyframes fx-impact {
  0%   { transform: scale(0.5); opacity: 1; }
  50%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
/* 防御：キャラを包むように、薄く光りながら消える */
.fx-shield { animation: fx-shield calc(0.8s / var(--speed)); }
@keyframes fx-shield {
  0%   { transform: scale(1.15); opacity: 0; }
  30%  { transform: scale(1); opacity: 0.9; }
  60%  { opacity: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}
/* 歌：ゆらゆら揺れながら上へ */
.fx-music { animation: fx-music calc(1s / var(--speed)) ease-in-out; }
@keyframes fx-music {
  0%   { transform: translate(0, 30%); opacity: 0; }
  20%  { transform: translate(-10%, 15%); opacity: 1; }
  45%  { transform: translate(10%, 0); }
  70%  { transform: translate(-10%, -15%); opacity: 1; }
  100% { transform: translate(5%, -35%); opacity: 0; }
}
/* 時：回転しながら拡大 */
.fx-time { animation: fx-time calc(0.7s / var(--speed)); }
@keyframes fx-time {
  0%   { transform: scale(0.4) rotate(0deg); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.4) rotate(270deg); opacity: 0; }
}
/* 闇：渦を巻くように回転しながら縮む */
.fx-dark { animation: fx-dark calc(0.7s / var(--speed)) ease-in; }
@keyframes fx-dark {
  0%   { transform: scale(1.3) rotate(0deg); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: scale(0.15) rotate(-540deg); opacity: 0; }
}
/* 会心：ドンと拡大して少し残ってから消える */
.fx-crit { animation: fx-crit calc(0.65s / var(--speed)); }
@keyframes fx-crit {
  0%   { transform: scale(0.3); opacity: 1; }
  20%  { transform: scale(1.25); opacity: 1; }
  65%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* 会心のときの白い光（ステージ全体） */
#flash { position: absolute; inset: 0; z-index: 35; pointer-events: none; background: #fff; opacity: 0; }
#flash.on { animation: flash calc(0.25s / var(--speed)) ease-out; }
@keyframes flash { 0% { opacity: 0.7; } 100% { opacity: 0; } }

/* 打撃のときの小さな揺れ */
.anim-shake-small { animation: shake-small calc(0.2s / var(--speed)) linear; }
@keyframes shake-small {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, 1px); }
}

/* 縦画面で強化・アイテムを開いて小さくしているときは、エフェクトも小さめに */
#stage.portrait:not([data-tab="order"]) .fx { transform-origin: center; scale: 0.5; }
/* =====================================================================
   スキル一覧・スキルの吹き出し・所持品の格子・諦めるボタン・強化画面のずれ対策
   ===================================================================== */

/* ---- スキル一覧（強化タブのキャラ詳細・仲間加入のお知らせ） ---- */
.skill-box { margin: 4px 0 8px; font-size: 0.8rem; }
.skill-box summary { cursor: pointer; color: #9aa3c0; padding: 2px 0; }
.skill-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.skill-list li { padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); text-align: left; }
.skill-list .skill-name { font-weight: bold; color: #e8e8f0; }
.skill-list .skill-limit {
  margin-left: 6px; padding: 0 6px; border-radius: 8px;
  font-size: 0.7rem; color: #ffd54a; background: rgba(255, 213, 74, 0.12);
}
.skill-list small { display: block; color: #9aa3c0; font-size: 0.75rem; margin-top: 1px; }
.popup-skills { margin-top: 8px; max-height: 220px; overflow-y: auto; font-size: 0.85rem; }
.popup-skills-title { font-weight: bold; color: #c0c6dc; margin-bottom: 2px; text-align: left; }

/* ---- スキルの説明の吹き出し ---- */
#skill-tip {
  position: absolute; z-index: 55; max-width: 280px; padding: 7px 10px;
  border-radius: 8px; border: 1px solid #6a9ae0; background: rgba(20, 24, 36, 0.96);
  color: #e8e8f0; font-size: 12px; line-height: 1.5; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.12s;
  left: 0; top: 0;
}
#skill-tip.show { opacity: 1; visibility: visible; }
#skill-tip .tip-limit { margin-left: 6px; font-size: 11px; color: #ffd54a; }
#command-buttons button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#command-buttons button.is-disabled { opacity: 0.45; cursor: default; }

/* ---- 所持品：アイコンの格子（タップで名前と効果） ---- */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.inv-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 3px; border-radius: 8px; background: transparent; border: 2px solid transparent;
}
.inv-cell.selected { border-color: #6a9ae0; background: rgba(106, 154, 224, 0.15); }
.inv-count {
  position: absolute; right: 2px; bottom: 1px; padding: 0 4px; border-radius: 6px;
  font-size: 0.7rem; font-weight: bold; color: #fff; background: rgba(0, 0, 0, 0.7);
}
.inv-info { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 58px; }

/* ---- 装備の選択（アイコンで選ぶ） ---- */
.equip-slot .empty-text { color: #6a7290; }
.equip-picker { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px 10px; padding-left: 8px; border-left: 2px solid #4a5270; }
.pick-cell { display: flex; align-items: center; gap: 8px; text-align: left; padding: 4px 6px; }
.pick-cell .pick-text { flex: 1; min-width: 0; }
.pick-cell small { display: block; font-size: 0.72rem; color: #9aa3c0; }
.craft-pick { display: inline-flex; vertical-align: middle; margin-right: 3px; }

/* ---- 諦めるボタン（小さく目立たない。🎒ボタンと重ならないよう右に余白） ---- */
#stage .controls #giveup-btn {
  margin-left: auto; margin-right: 52px;
  padding: 2px 8px; font-size: 11px;
  color: #8a91aa; background: rgba(30, 34, 48, 0.6); border-color: #3a4058;
}
#stage .controls #giveup-btn:hover { color: #ffb0b0; border-color: #a05050; }
#stage.portrait:not([data-tab="order"]) .controls #giveup-btn { margin-right: 42px; font-size: 10px; padding: 1px 6px; }

/* ---- 遊び方の上のゲーム名 ---- */
.howto-logo {
  text-align: center; font-size: 2rem; font-weight: bold; letter-spacing: 0.08em;
  color: #ffd54a; text-shadow: 0 2px 0 #7a5a10, 0 0 12px rgba(255, 213, 74, 0.5); margin-bottom: 4px;
}

/* ---- 強化画面：ボタンを押しても画面がずれないように ---- */
/* 数値の桁が増えても幅が変わらないよう、等幅の数字＋列の幅を固定 */
.stat-table { table-layout: fixed; font-variant-numeric: tabular-nums; }
.stat-table th { width: 3em; }
.stat-table .val { width: 3.5em; }
.stat-table .bonus { width: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stat-table .up { width: 8.5em; text-align: right; }
.stat-table button { min-width: 3.6em; }
#upgrade-root .points strong, .slot-box, .char-card .sub, .char-card .name { font-variant-numeric: tabular-nums; }
/* 画像の大きさを固定（時の魔導士のように絵の輪が大きくても行の高さが変わらない） */
#side-panel .char-card .portrait { width: 80px; height: 80px; min-height: 80px; flex: none; overflow: hidden; }
#side-panel .char-card .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 強化・アイテム画面ではアニメーションを止める */
#upgrade-root *, #item-root * { animation: none !important; transition: none !important; }
/* スクロール位置を中身の変化に引っぱられないように */
#panel-body { overflow-anchor: none; }

/* ---- 第一部クリアの演出（50階） ---- */
.area-banner.part1-banner .area-name { color: #ffd54a; font-size: 2.4rem; text-shadow: 0 2px 0 #7a5a10, 0 0 18px rgba(255, 213, 74, 0.7); }
.area-banner.part1-banner { animation-duration: 4s; }

/* ---- 敵が7体以上いるとき（虚神の目など）：カードを小さくして1列に収める ---- */
#stage #enemy-area.crowd7 { gap: 3px; }
#stage #enemy-area.crowd7 > .unit { padding: 2px 3px; }
#stage #enemy-area.crowd7 .portrait,
#stage #enemy-area.crowd7 .portrait-fallback { width: 52px !important; height: 52px !important; }
#stage #enemy-area.crowd7 .sprite-box { min-height: 52px !important; }
#stage #enemy-area.crowd7 .name { font-size: 10px; }
/* 星座の獣の星 */
.sbadge.stars { background: rgba(60, 50, 120, 0.85); }

/* ---- 神々の塔：部位（足・首・コア・球・目）と、タップで狙える表示 ---- */
#stage .unit.part { border: 2px dashed rgba(255, 213, 74, 0.55); }
#stage .unit.part .hpbar { height: 5px; }
#stage .unit.targetable { border-color: #ffd54a; box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.5); cursor: crosshair; }

/* ---- 真のエンディング：スタッフロール ---- */
.ending-credits { height: 150px; overflow: hidden; position: relative; margin: 10px auto; max-width: 420px;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.credits-roll { position: absolute; left: 0; right: 0; text-align: center; line-height: 1.9; color: #e8e8f0;
  animation: credits-roll 40s linear forwards; }
.credits-roll .cr-title { font-size: 1.4rem; font-weight: bold; color: #ffd54a; margin: 10px 0; }
.credits-roll .cr-head { margin-top: 18px; color: #9ac8ff; font-weight: bold; }
@keyframes credits-roll { from { transform: translateY(150px); } to { transform: translateY(-100%); } }
.ending-stats b { color: #ffd54a; }

/* ---- エンディングを16:9の画面に収める（長いときはスクロール） ---- */
#stage #ending { overflow-y: auto; padding: 10px 16px; }
#stage .ending-box { max-width: 640px; margin: auto; }
#stage .ending-title { font-size: 1.5rem; margin-bottom: 6px; }
#stage .ending-text { font-size: 13px; line-height: 1.6; }
#stage .ending-credits { height: 110px; margin: 6px auto; font-size: 13px; }
#stage .ending-stats { margin: 6px 0; font-size: 13px; line-height: 1.5; }
#stage .ending-buttons { flex-direction: row; justify-content: center; flex-wrap: wrap; }
#stage .ending-buttons button { min-width: 220px; padding: 8px 12px; font-size: 14px; }
#stage .ending-note { margin-top: 6px; }
@keyframes credits-roll { from { transform: translateY(110px); } to { transform: translateY(-100%); } }

/* ---- 敵が9体以上（クラーケンの足など）：さらに小さく ---- */
#stage #enemy-area.crowd9 { gap: 2px; }
#stage #enemy-area.crowd9 > .unit { padding: 2px 1px; }
#stage #enemy-area.crowd9 .portrait,
#stage #enemy-area.crowd9 .portrait-fallback { width: 40px !important; height: 40px !important; }
#stage #enemy-area.crowd9 .sprite-box { min-height: 40px !important; }
#stage #enemy-area.crowd9 .name { font-size: 9px; }
#stage #enemy-area.crowd9 .turn-badge { font-size: 9px; }

/* 敵が多いとき：カードの中身で幅が広がらないように */
#stage #enemy-area.crowd7 > .unit { overflow: hidden; }
#stage #enemy-area.crowd7 > .unit > * { min-width: 0; max-width: 100%; }
#stage #enemy-area.crowd7 .name,
#stage #enemy-area.crowd7 .turn-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* エンディングの背景は暗く（文字を読みやすく） */
#stage #ending { background: radial-gradient(circle at 50% 30%, rgba(80, 64, 30, 0.95), rgba(5, 8, 20, 0.97) 70%); }

/* 並びの欄そのものが、カードの最小幅で画面より広がらないように */
#stage .unit-row { min-width: 0; }
#stage .field { min-width: 0; }

/* =====================================================================
   特級装備（虹色の枠・★ランク）と特級合成
   ===================================================================== */
.item-icon.tier3 {
  border: 2px solid transparent;
  background: linear-gradient(#fdfbff, #fdfbff) padding-box,
              linear-gradient(135deg, #ff5f6d, #ffc371, #f9f871, #6ee7a8, #5bc0ff, #a77bff, #ff6ad5) border-box;
  box-shadow: 0 0 8px rgba(167, 123, 255, 0.75);
}
.item-name.tier3 {
  font-weight: bold;
  background: linear-gradient(90deg, #ff7a7a, #ffd36e, #8ff0a4, #7ac8ff, #c79bff, #ff8ad8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.craft-tabs { display: flex; gap: 6px; margin: 6px 0 8px; }
.craft-tabs button { flex: 1; padding: 6px; font-size: 0.85rem; }
.craft-tabs button.active { border-color: #c79bff; color: #e6d4ff; background: rgba(167, 123, 255, 0.18); }
.legend-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.legend-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; }
.legend-mats { display: flex; gap: 2px; font-size: 0.7rem; color: #9aa3c0; }
.legend-preview { margin: 8px 0; padding: 8px; border-radius: 8px; border: 1px solid #a77bff; background: rgba(167, 123, 255, 0.1); }
.legend-breakdown { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; }
.legend-count { display: inline-flex; align-items: center; gap: 2px; opacity: 0.7; }
.legend-count.top { opacity: 1; font-weight: bold; color: #ffd54a; }
.legend-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.8rem; }
.legend-choice button.active { border-color: #ffd54a; color: #ffd54a; }
.legend-result { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.legend-result small { display: block; }
.legend-go { width: 100%; margin-top: 8px; padding: 8px; font-weight: bold; border-color: #c79bff; color: #e6d4ff; }
.legend-pick-grid .inv-cell:disabled { opacity: 0.35; }
.legend-ranks li.best { color: #ffd54a; }
.zk-cell.legend { border-color: rgba(167, 123, 255, 0.6); }
.legend-made { display: flex; justify-content: center; margin-bottom: 6px; }
.legend-made .item-icon.lg { width: 84px; height: 84px; animation: legend-pulse 1.2s ease-in-out infinite; }
@keyframes legend-pulse { 50% { box-shadow: 0 0 22px rgba(255, 255, 255, 0.9), 0 0 36px rgba(167, 123, 255, 0.8); } }
/* 特級装備ができたときの虹色の光 */
.legend-flash {
  position: absolute; inset: 0; z-index: 58; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255,95,109,.55), rgba(255,195,113,.55), rgba(249,248,113,.55), rgba(110,231,168,.55), rgba(91,192,255,.55), rgba(167,123,255,.55), rgba(255,106,213,.55), rgba(255,95,109,.55));
  mix-blend-mode: screen; animation: legend-flash 1.8s ease-out forwards;
}
@keyframes legend-flash { 0% { opacity: 0; filter: hue-rotate(0deg); } 15% { opacity: 1; } 100% { opacity: 0; filter: hue-rotate(360deg); } }

/* 図鑑の上の記録（総撃破数・無限モード・旧記録） */
.zk-records { margin: 4px 0 6px; font-size: 0.8rem; color: #c0c6dc; text-align: center; }


/* 特級合成のロック・装備数 */
.craft-tabs button.locked { opacity: 0.6; color: #9aa3c0; }
.legend-cap { margin-left: 8px; padding: 0 6px; border-radius: 8px; font-size: 0.72rem; font-weight: normal; color: #e6d4ff; background: rgba(167, 123, 255, 0.2); }
.legend-cap.full { color: #ffd54a; background: rgba(255, 213, 74, 0.15); }
.zk-name small { display: block; font-size: 0.6rem; color: #9aa3c0; }

/* ---- 敵・味方の欄：入りきらないときはスクロール（コマンド欄は下に固定のまま） ---- */
#stage .battle-scroll {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;          /* 端まで行っても画面全体は動かさない */
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
#stage .battle-scroll::-webkit-scrollbar { width: 6px; }
#stage .battle-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 3px; }
#stage .battle-scroll > .field { flex: 1 0 auto; }   /* 中身より小さくはしない（はみ出す分はスクロール） */
/* 縦画面：バトル部分が伸びすぎて下のパネルを押し出さないよう、高さに上限 */
#stage.portrait .battle-main { max-height: 600px; }
#stage.portrait .battle-scroll { flex: 0 1 auto; }
#stage.portrait .battle-scroll > .field { flex: 0 0 auto; }

/* 称号（ランキング・アカウント画面の名前の横） */
.title-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; font-size: 0.72rem; color: #ffd54a; background: rgba(255, 213, 74, 0.15); white-space: nowrap; }

/* ---- 与ダメージ表（ログタブの上・キャラの詳細） ---- */
#dmg-meter { margin-bottom: 8px; padding: 6px 8px; border-radius: 8px; background: #252a3b; font-size: 0.8rem; }
#dmg-meter:empty { display: none; }
.dm-title { font-weight: bold; color: #c0c6dc; margin-bottom: 4px; }
.dm-row { margin: 4px 0; }
.dm-head { display: flex; justify-content: space-between; gap: 6px; font-variant-numeric: tabular-nums; }
.dm-head b { color: #ffd54a; }
.dm-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 2px 0; }
.dm-bar > div { height: 100%; background: linear-gradient(90deg, #ff9a4a, #ffd54a); }
.dm-parts { font-size: 0.7rem; color: #9aa3c0; }
.dm-last { margin-top: 6px; color: #9aa3c0; }
.dm-last summary { cursor: pointer; }
.float-panel .dm-row { font-size: 0.85rem; }
/* ログタブ：上に与ダメージ表、下にログ（ログはスクロール） */
#log-root:not(.hidden) { display: flex; flex-direction: column; }
#log-root #dmg-meter { flex: 0 0 auto; max-height: 45%; overflow-y: auto; }
#stage #log-root #log { flex: 1 1 auto; min-height: 0; height: auto; }

/* ---- 🗺 階層を選ぶ ---- */
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 8px 0; }
.fs-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; }
.fs-cell small { font-size: 0.68rem; color: #9aa3c0; }
.fs-cell.boss { border-color: #a05050; }
.fs-cell.active { border-color: #ffd54a; background: rgba(255, 213, 74, 0.15); color: #ffd54a; }

/* パッシブ（強化タブ・仲間加入・キャラ詳細） */
.skill-sub { margin: 6px 0 2px; font-size: 0.72rem; font-weight: bold; color: #c0c6dc; }
.passive-list li { background: rgba(167, 123, 255, 0.1); }
.skill-limit.passive-tag { color: #d9c4ff; background: rgba(167, 123, 255, 0.2); }

/* ---- 行動ゲージ（HPバーの下の細い青いバー。満タンで行動） ---- */
.gaugebar { height: 3px; margin: 1px 0 0; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.gaugebar > div { height: 100%; width: 0; background: linear-gradient(90deg, #4a8cff, #7ac8ff); transition: width calc(0.3s / var(--speed, 1)) ease-out; }
.gaugebar.full > div { background: #ffd54a; }
.gaugebar.delayed { box-shadow: 0 0 0 1px #e05a4a; }
#stage.portrait:not([data-tab="order"]) .gaugebar { height: 2px; }
.detail-gauge { height: 5px; margin-top: 3px; }
#stage .gaugebar { height: 4px; margin-top: 2px; }
#stage.portrait:not([data-tab="order"]) .gaugebar { height: 2px; margin-top: 1px; }

/* 行動ゲージのマイナス表示：赤いバー＋横に「-30%」 */
.gaugerow { display: flex; align-items: center; gap: 3px; }
.gaugerow .gaugebar { flex: 1 1 auto; min-width: 0; }
.gauge-neg { flex: none; font-size: 9px; line-height: 1; font-weight: bold; color: #ff7a6a; font-variant-numeric: tabular-nums; }
.gauge-neg:empty { display: none; }
.gaugebar.delayed > div { background: linear-gradient(90deg, #e05a4a, #ff9a6a); }