/* =====================================================================
   迷宮の画面 — 「黒鉄の計器盤」
   探索の盤面・戦闘のコマンド板・隊の札・見出し・記録を、ひとつの黒鉄の計器として揃える。
   theme.css の上に重ねる。盤面/戦場のキャンバスの高さは game.js (fitView) が決める。
   ===================================================================== */

:root {
  --dg-iron: linear-gradient(180deg, #221b20 0%, #161116 55%, #0e0b0f 100%);
  --dg-iron-hi: linear-gradient(180deg, #2c2329 0%, #1b151b 55%, #120e13 100%);
  --dg-edge: inset 0 1px 0 rgba(255,236,200,0.07), inset 0 0 0 1px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.65);
  --dg-gold: #c9a24a;
  --dg-gold-hi: #f3d58b;
  --dg-gold-dim: #7a6230;
  --dg-blood: #b0261c;
  --dg-blood-hi: #ff6a52;
  --dg-soul: #8fd4ff;
}

/* 縦の配分: 見出し・盤面・収穫・隊は固定、記録が余りを取る (戦闘では命令板が縮んで中を巻く) */
#topbar, #screen, #runbar, #party, #hint { flex-shrink: 0; }
#hud { flex: 1 1 0; min-height: 0; padding: 4px 6px; }
#app.board-camera-active #hud { min-height: 102px; }
/* 背の低い画面でも行動順・記録を隊の札に重ねず、収まらない分は内側で巻く。 */
#app.in-combat { overflow-y: auto; overscroll-behavior-y: contain; }
#app.in-combat #hud { flex-shrink: 0; min-height: 93px; }
#app.in-combat #log { min-height: 54px; }
#app.in-combat #controls:has(#combat-menu[data-mode="input"]) { flex-shrink: 0; }
#controls { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 2px 6px 6px; }

/* ===== 見出し (#topbar) ===== */
#topbar {
  padding: 5px 8px 6px; min-height: 52px; gap: 8px;
  background:
    var(--grain),
    radial-gradient(60% 120% at 50% 0%, rgba(201,162,74,0.10), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #231b21 0%, #140f15 70%, #0b080c 100%);
}
.topbar-left { gap: 5px; flex: 0 0 auto; }
#settings-btn, #descend-btn, #return-btn {
  width: 38px; height: 38px; min-width: 38px; min-height: 38px; padding: 0;
  background: var(--grain), var(--dg-iron-hi);
  border: 1px solid #4d3f37; border-radius: 3px;
  box-shadow: var(--dg-edge);
  color: #d8c9a8;
}
#settings-btn svg { width: 20px; height: 20px; fill: #b9a582; filter: drop-shadow(0 1px 0 #000); }
#settings-btn:active svg { fill: var(--dg-gold-hi); }
#descend-btn canvas, #return-btn canvas { width: 30px !important; height: 30px !important; filter: drop-shadow(0 0 4px rgba(0,0,0,0.9)); }
#descend-btn { border-color: #8a6d2e; box-shadow: var(--dg-edge), 0 0 0 1px rgba(201,162,74,0.25), 0 0 14px rgba(243,213,139,0.28); animation: dg-call 2.4s ease-in-out infinite; }
#return-btn { border-color: #3f8a92; box-shadow: var(--dg-edge), 0 0 0 1px rgba(90,220,235,0.2), 0 0 14px rgba(90,220,235,0.3); }
@keyframes dg-call { 0%, 100% { box-shadow: var(--dg-edge), 0 0 0 1px rgba(201,162,74,0.25), 0 0 10px rgba(243,213,139,0.18); } 50% { box-shadow: var(--dg-edge), 0 0 0 1px rgba(201,162,74,0.5), 0 0 18px rgba(243,213,139,0.45); } }

#floor-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  white-space: nowrap; letter-spacing: 0; text-shadow: none;
}
#floor-info .fi-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px; font-weight: 700; letter-spacing: 3px; color: #a8916a;
  text-shadow: 0 1px 0 #000;
}
#floor-info .fi-row { display: flex; align-items: center; gap: 7px; max-width: 100%; }
#floor-info .fi-depth {
  font-size: 19px; font-weight: 800; letter-spacing: 2px; line-height: 1.05;
  color: var(--dg-gold-hi);
  text-shadow: 0 0 12px rgba(201,162,74,0.45), 0 2px 0 #000;
}
#floor-info .fi-of { font-size: 11px; color: #8c7a5a; letter-spacing: 1px; }
#floor-info .fi-pips { display: inline-flex; align-items: center; gap: 4px; }
#floor-info .fi-pips i {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: #1a1416; border: 1px solid #5a4a36; box-shadow: inset 0 0 2px #000;
}
#floor-info .fi-pips i.done { background: linear-gradient(135deg, #8a6d2e, #4a3a18); border-color: #8a6d2e; }
#floor-info .fi-pips i.now { background: linear-gradient(135deg, #fff1c4, #c9a24a); border-color: #f3d58b; box-shadow: 0 0 8px rgba(243,213,139,0.85); }
#floor-info .fi-pips i.boss { border-color: #a8231c; background: #2a0606; box-shadow: 0 0 6px rgba(200,30,20,0.6); }
#floor-info .fi-pips i.boss.now { background: linear-gradient(135deg, #ff8a70, #9a1a12); border-color: #ff9a80; }
#floor-info .fi-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px; line-height: 1;
  padding: 2px 4px 2px 5px; border: 1px solid currentColor; border-radius: 2px; background: rgba(0,0,0,0.45);
  max-width: 76px; overflow: hidden; text-overflow: ellipsis;
}
#floor-info .fi-elite { color: #ff6a5c; text-shadow: 0 0 8px rgba(255,60,40,0.6); animation: dg-pulse-red 1.6s ease-in-out infinite; }
#floor-info .fi-mut { color: #d7b8ff; }
@keyframes dg-pulse-red { 0%, 100% { box-shadow: 0 0 0 rgba(255,60,40,0); } 50% { box-shadow: 0 0 10px rgba(255,60,40,0.55); } }

#topbar-cur { flex: 0 0 auto; display: grid; gap: 1px; justify-items: end; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
#topbar-cur .cur { display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; text-shadow: 0 1px 0 #000; }
#topbar-cur .cur::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; }
#topbar-cur .cur-gold { color: #f0d48c; }
#topbar-cur .cur-gold::before { border-radius: 0; background: url("art/dungeon/crypt-gold.webp") center / contain no-repeat; }
#topbar-cur .cur-soul { color: #b4e6ff; }
#topbar-cur .cur-soul::before { width: 7px; height: 7px; margin: 0 1px; transform: rotate(45deg); background: radial-gradient(circle, #ffffff, #7fd0ff 55%, #1d5a86); box-shadow: 0 0 6px rgba(127,208,255,0.9); }
#topbar-cur .cur-red { color: #ff8a7a; }
#topbar-cur .cur-red::before { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffc2b2, #d1261a 50%, #4a0604 100%); box-shadow: 0 0 6px rgba(255,50,30,0.7); }
#topbar-cur .cur-ember { color: #ffb070; }
#topbar-cur .cur-ember::before { border-radius: 0; background: url("art/dungeon/crypt-ember.webp") center / contain no-repeat; }

/* ===== 盤面/戦場の額 ===== */
#screen { padding: 6px 6px 4px; background: transparent; }
#view {
  width: 100%; aspect-ratio: auto; border: 0; border-radius: 2px;
  image-rendering: auto; background: #030204;
  box-shadow:
    0 0 0 1px #000, 0 0 0 3px #2a2026, 0 0 0 4px #0a0709, 0 0 0 5px rgba(201,162,74,0.6),
    0 0 0 6px rgba(0,0,0,0.9), 0 12px 30px rgba(0,0,0,0.9);
}

/* ===== この階の目的 (#runbar) ===== */
#runbar {
  position: relative;
  margin: 4px 6px 0; padding: 0 8px 0 7px; min-height: 44px; gap: 6px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--grain), var(--dg-iron); border: 1px solid #33292a; border-radius: 2px;
  box-shadow: var(--dg-edge); font-size: 12px; font-variant-numeric: tabular-nums;
}
#runbar.hidden { display: none; }
.rb-goal { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; }
.rb-goal-ic {
  flex: 0 0 auto; width: 8px; height: 8px; transform: rotate(45deg);
  background: linear-gradient(135deg, #f3d58b, #8a6d2e); box-shadow: 0 0 6px rgba(201,162,74,0.7);
}
.rb-goal-boss .rb-goal-ic { background: linear-gradient(135deg, #ff9a80, #8a120c); box-shadow: 0 0 8px rgba(255,60,40,0.8); }
.rb-goal-t { color: #e6d6b4; font-weight: 700; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.rb-goal-boss .rb-goal-t { color: #ffb4a0; }
.rb-portal {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; line-height: 1;
  color: #8ff0f4; border: 1px solid #3f8a92; border-radius: 2px; padding: 2px 4px; background: rgba(20,60,64,0.35);
}
/* ===== 記録 (#log): 下から積もる年代記。小さい画面でも文字の明るさを保つ ===== */
#log {
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; touch-action: manipulation; /* スクロールさせない: 溢れた古い行は上の闇へ切れて消える */
  cursor: pointer; /* タップで記録の履歴 (全文) を開く */
  min-height: 0;
  padding: 6px 10px 6px; font-size: 13px; line-height: 1.5;
  -webkit-mask-image: none;
  mask-image: none;
}
#app.board-camera-active #log { min-height: 94px; }
/* 新しい行は文字の光だけで示し、iOSで古い描画が残る合成レイヤーを作らない。 */
#log > div { flex: 0 0 auto; }
#log > div { opacity: 1; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9); }
#log > div:last-child { animation: dg-line-in 0.45s ease-out; }
@keyframes dg-line-in {
  from { text-shadow: 0 1px 0 #000, 0 0 8px rgba(255,236,200,0.55); }
  to { text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9); }
}
#log.has-scene {
  background:
    var(--grain),
    linear-gradient(180deg, rgba(10,8,11,0.95) 0%, rgba(10,8,11,0.86) 40%, rgba(10,8,11,0.62) 100%),
    var(--log-scene) center bottom / cover no-repeat,
    #0b090c;
}
@media (max-height: 680px) { #log { height: auto; } }

/* ===== 行動順 (#turn-order): 記録の上に、手番の者 → このラウンドの残りをアイコンで並べる ===== */
#hud { flex-direction: column; }
#app:not(.in-combat) #turn-order { display: none; }
#turn-order {
  flex: 0 0 auto; display: flex; align-items: center; gap: 3px;
  height: 28px; margin: 0 0 3px; padding: 0 2px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), rgba(0,0,0,0.2));
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), rgba(0,0,0,0.2));
}
.to-ic {
  position: relative; flex: 0 1 26px; min-width: 16px; height: 26px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid #3c4f66; border-radius: 3px;
  background: radial-gradient(80% 80% at 50% 35%, #1d2633, #0b0d12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}
.to-ic.e { border-color: #6e2a22; background: radial-gradient(80% 80% at 50% 35%, #2e1514, #0e0909); }
.to-ic.boss { border-color: #a0402c; }
.to-ic.now {
  flex: 0 0 28px; height: 28px; border-color: var(--dg-gold-hi);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.7), 0 0 7px rgba(243,213,139,0.55);
}
.to-ic.stun > canvas { filter: grayscale(0.85) brightness(0.55); }
.to-ic.mind { border-style: dashed; }
.to-ic > canvas { display: block; flex: 0 0 auto; image-rendering: pixelated; }
.to-ch { font-size: 12px; color: #d8c9a8; }
.to-tag {
  position: absolute; right: 0; bottom: 0; padding: 0 2px;
  font-size: 9px; line-height: 11px; font-weight: 700; color: #f3d58b;
  background: rgba(0,0,0,0.72); border-top-left-radius: 3px;
}
/* 大技の予兆 (溜め) を見せている敵: 琥珀の縁と脈動、左上に「溜」 */
.to-ic.omen { border-color: #ffb43a; box-shadow: 0 0 0 1px rgba(0,0,0,0.7), 0 0 6px rgba(255,180,58,0.6); animation: to-omen 1.1s ease-in-out infinite; }
@keyframes to-omen { 50% { box-shadow: 0 0 0 1px rgba(0,0,0,0.7), 0 0 10px rgba(255,180,58,0.95); } }
@media (prefers-reduced-motion: reduce) { .to-ic.omen { animation: none; } }
.to-omen {
  position: absolute; left: 0; top: 0; padding: 0 2px;
  font-size: 9px; line-height: 11px; font-weight: 800; color: #ffe2a8;
  background: rgba(120,72,10,0.9); border-bottom-right-radius: 3px;
}
.to-sep { flex: 0 0 auto; color: var(--dg-gold); font-size: 14px; line-height: 1; margin: 0 1px; text-shadow: 0 1px 0 #000; }

/* ===== 隊の札 (#party) ===== */
/* 名は札の幅いっぱいに。左に肖像 (24×24 ドットの胸像を ~40px)、右に職とLv・血の小瓶 (HP)・魂の小瓶 (MP) */
#party {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  padding: 3px 6px 3px;
}
.pc {
  flex: 1 1 calc((100% - 10px) / 3); max-width: calc((100% - 5px) / 2); min-width: 0;
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas: "name name" "por cls" "por hp" "por mp" "bf bf";
  column-gap: 6px; row-gap: 3px; align-items: center;
  padding: 4px 6px 5px 5px; font-size: 10px;
  background: var(--grain), radial-gradient(90% 60% at 20% 0%, rgba(201,162,74,0.07), rgba(0,0,0,0) 70%), var(--dg-iron);
  border: 1px solid #3a2f2b; border-radius: 3px; box-shadow: var(--dg-edge);
  position: relative;
}
#party .pc { touch-action: none; } /* 札の上のフリックもブラウザのパンに奪わせず、盤面の移動に使う */
/* 迷宮の中の隊列の並べ替え: 長押しで持ち上げた札は沈め、落とす先の札を金の縁で示す (ghost は ui-party.css の .pt-ghost) */
#party .pc.lifting { opacity: 0.45; border-style: dashed; border-color: #f3d58b; }
#party .pc.drop-over { border-color: #f3d58b; box-shadow: 0 0 0 1px #f3d58b, 0 0 14px rgba(243,213,139,0.5); }
#party.n4 .pc { flex-grow: 0; flex-basis: calc((100% - 10px) / 3); max-width: none; }
.pc-por {
  grid-area: por; position: relative; width: 42px; height: 42px; align-self: start;
  background: radial-gradient(circle at 50% 38%, #2a2024, #0b080a 72%);
  border: 1px solid #5a4838; border-radius: 2px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.9), 0 0 0 1px #000;
  overflow: hidden;
}
.pc-por .pc-pic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.9)); } /* 胸像はドットの整数倍の寸法のまま中央に */
.pc-row {
  position: absolute; left: 0; bottom: 0; font-size: 8.5px; font-weight: 800; line-height: 1;
  padding: 1px 2px 1px 2px; background: rgba(8,6,8,0.9); border-top: 1px solid; border-right: 1px solid; border-radius: 0 2px 0 0;
}
.pc-row.front { color: #e2b773; border-color: #6e5228; }
.pc-row.back { color: #9cbbe0; border-color: #3d5370; }
.pc-seals {
  grid-area: por; align-self: start; justify-self: end; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1px;
  max-width: 100%; min-height: 16px; pointer-events: none;
}
.pc-seal {
  flex: 0 0 15px; width: 15px; height: 15px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; line-height: 1; border-radius: 50%; border: 1px solid currentColor;
  background: rgba(6,4,6,0.88); box-shadow: 0 0 6px currentColor;
}
.pc-seal.poison { color: #8ee05a; }
.pc-seal.paralyze { color: #ffd84a; }
.pc-seal.stone { color: #c9c4b8; }
.pc-seal.sleep { color: #8fc8ff; }
.pc-seal.charm { color: #ff8fc8; }
.pc-seal.confuse { color: #ffa860; }
.pc-seal.dead { color: #ff5a4a; }
.pc .name { grid-area: name; min-width: 0; display: flex; align-items: baseline; gap: 4px; line-height: 1.25; }
.pc .pc-n { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; text-shadow: 0 1px 0 #000; }
.pc .pc-lv { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; color: #d9bd7a; letter-spacing: 0.3px; }
.pc .cls { grid-area: cls; min-width: 0; font-size: 9.5px; color: #9a8e78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.pc-vial {
  position: relative; min-height: 11px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, #050304, #140c0f);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.95), 0 0 0 1px #2c2226, 0 1px 0 rgba(255,236,200,0.05);
}
.pc-vial.hp { grid-area: hp; }
.pc-vial.mp { grid-area: mp; min-height: 9px; }
.pc-vial > i {
  position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: 6px;
  transition: width 0.35s ease;
}
.pc-vial.hp > i { background: linear-gradient(180deg, #ff8a70 0%, #c92a1c 30%, #7a0f08 75%, #4a0604 100%); box-shadow: inset 0 1px 0 rgba(255,210,190,0.55), 0 0 6px rgba(200,30,20,0.45); }
.pc-vial.hp.overheal > i { background: linear-gradient(180deg, #b9f5dc, #39a88d 40%, #16574e); box-shadow: inset 0 1px 0 #d8fff0, 0 0 6px #39a88d; }
.pc-vial.hp.overheal .pc-num { color: #d7fff1; }
.pc-vial.mp > i { background: linear-gradient(180deg, #b8ecff 0%, #3c8fd6 35%, #1d4a8a 80%, #0f2650 100%); box-shadow: inset 0 1px 0 rgba(220,245,255,0.55), 0 0 6px rgba(80,170,255,0.4); }
.pc-vial > i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.28); }
.pc-vial.none { opacity: 0.35; }
.pc-num {
  /* 現在値と最大値が一行に収まらない札では、最大値を次の行へ送る。 */
  position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
  padding: 1px 4px; overflow-wrap: anywhere;
  font-size: 9.5px; font-weight: 800; line-height: 1.4; color: #fff4e6; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px #000, 0 1px 1px #000, 0 0 1px #000;
}
.pc-vial.mp .pc-num { font-size: 8.5px; color: #e6f6ff; }
.pc-num small { font-size: 0.82em; opacity: 0.72; margin-left: 1px; }
/* 桁数で札の高さを変えず、敵と操作欄に使う高さを守る。正確な値は札の詳細へ。 */
#app.in-combat .pc-num { flex-wrap: nowrap; white-space: nowrap; overflow-wrap: normal; line-height: 1.4; }
.pc .buffs { grid-area: bf; display: flex; flex-wrap: wrap; gap: 2px; margin-top: 0; }
/* 戦闘中は種類数の札を1行に固定。効果が増えても技の一覧の高さを保つ。 */
#app.in-combat .pc .buffs {
  height: 15px; min-height: 15px; min-width: 0; flex-wrap: nowrap; align-items: center;
}
#app.in-combat .pc .buffs .bf {
  flex: 0 0 auto; white-space: nowrap; font-size: 8px; padding: 2px;
}
/* 最も狭い6人表示でも、強化・弱体がそれぞれ二桁になった札を収める。 */
@media (max-width: 360px) {
  #app.in-combat .pc .buffs { gap: 1px; }
  #app.in-combat .pc .buffs .bf { font-size: 7.5px; padding-inline: 0; }
}
/* Safari の操作バーで縦の余りが少ない時も、名前・HP/MP・効果の札を残す。 */
@media (max-width: 560px) and (max-height: 760px) {
  #party .pc { grid-template-columns: 32px minmax(0, 1fr); column-gap: 4px; row-gap: 2px; padding: 3px 4px; }
  #party .pc-por { width: 32px; height: 32px; }
}
@media (max-width: 560px) and (max-height: 640px) {
  #topbar { min-height: 46px; padding: 3px 8px; }
  #party .pc { grid-template-columns: 26px minmax(0, 1fr); column-gap: 3px; row-gap: 1px; padding-block: 2px; }
  #party .pc-por { width: 26px; height: 26px; }
  #party .pc-n { font-size: 11px; }
  #party .cls { font-size: 9px; }
  #party .pc-vial.hp { min-height: 10px; }
  #party .pc-vial.mp { min-height: 8px; }
}
.pc .buffs .bf { display: inline-flex; align-items: center; gap: 1px; font-size: 8.5px; font-weight: 800; line-height: 1; padding: 2px 3px; border-radius: 2px; border: 1px solid; }
.pc .buffs .bf b { font-size: 7.5px; margin-left: 1px; opacity: 0.85; }
.pc .buffs .bf.up { color: #8ff0b0; border-color: #2e6b48; background: rgba(30,80,50,0.4); }
.pc .buffs .bf.dn { color: #ffa8a0; border-color: #7a2a2a; background: rgba(90,24,24,0.45); }
.pc.active {
  border-color: var(--dg-gold);
  background: var(--grain), radial-gradient(90% 70% at 30% 0%, rgba(243,213,139,0.16), rgba(0,0,0,0) 70%), var(--dg-iron);
  box-shadow: 0 0 0 1px var(--dg-gold), 0 0 16px rgba(201,162,74,0.5), var(--dg-edge);
}
.pc.active::before {
  content: ""; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #fff1c4, #c9a24a); box-shadow: 0 0 8px rgba(243,213,139,0.9);
}
.pc.dead { opacity: 0.55; filter: grayscale(0.9) brightness(0.8); }
.pc.dead .pc-pic { opacity: 0.45; }
/* 瀕死の警告: 縁と影を動かすと札を毎コマ描き直すので、赤い縁の層を重ねて不透明度だけを動かす */
.pc.low::after {
  content: ""; position: absolute; inset: -1px; border: 1px solid #d1261a; border-radius: 3px; pointer-events: none;
  box-shadow: 0 0 14px rgba(209,38,26,0.65), inset 0 0 12px rgba(160,10,10,0.35);
  opacity: 0; will-change: opacity;
  animation: dg-low 1.15s ease-in-out infinite;
}
@keyframes dg-low { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.pc.fx-hit { animation: dg-hit 0.38s ease; }
.pc.fx-heal { animation: dg-heal 0.45s ease; }
@keyframes dg-hit {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); box-shadow: 0 0 0 1px #ff3a2a, 0 0 18px rgba(255,40,20,0.75), inset 0 0 22px rgba(200,20,10,0.55); }
  45% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
@keyframes dg-heal {
  0%, 100% { box-shadow: var(--dg-edge); }
  40% { box-shadow: 0 0 0 1px #6fdc8c, 0 0 18px rgba(110,220,140,0.6), inset 0 0 18px rgba(80,200,120,0.35); }
}
/* 戦闘の演出の膜 (game.js renderParty の .pc-fx)。長さ --fxd は一手の余韻に合わせて game.js が決める (テンポを落とさない) */
.pc-fx {
  position: absolute; inset: 0; pointer-events: none; border-radius: 3px; overflow: hidden; z-index: 3;
  opacity: 0; animation: pcfx-fade var(--fxd, 0.36s) ease-out forwards; mix-blend-mode: screen;
}
@keyframes pcfx-fade { 0% { opacity: 0; } 15% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
/* 爪痕: 三本の傷が左上から走る (会心は金) */
.pc-fx.v-claw {
  --c: rgba(255, 70, 50, 0.95);
  background:
    linear-gradient(118deg, transparent 0 29%, var(--c) 29.6% 30.8%, transparent 31.4% 42%, var(--c) 42.6% 43.8%, transparent 44.4% 55%, var(--c) 55.6% 56.8%, transparent 57.4%),
    radial-gradient(70% 90% at 50% 50%, rgba(180, 10, 0, 0.35), transparent 75%);
  animation: pcfx-fade var(--fxd, 0.36s) ease-out forwards, pcfx-claw var(--fxd, 0.36s) ease-out forwards;
}
.pc-fx.v-claw.v-crit { --c: rgba(255, 196, 80, 0.98); }
@keyframes pcfx-claw { 0% { clip-path: inset(0 100% 100% 0); } 40%, 100% { clip-path: inset(0 0 0 0); } }
/* 石化・状態異常 */
.pc-fx.v-stone { mix-blend-mode: normal; background: radial-gradient(80% 100% at 50% 50%, rgba(200, 196, 184, 0.55), rgba(90, 86, 80, 0.4)); }
.pc-fx.v-status { background: radial-gradient(80% 100% at 50% 50%, rgba(255, 140, 210, 0.45), transparent 75%); }
/* ブレス・全体呪文: 属性の色の奔流が上から押し寄せる */
.pc-fx[class*="v-el-"] {
  background: linear-gradient(180deg, var(--c) 0%, var(--c2) 55%, transparent 100%);
  animation: pcfx-fade var(--fxd, 0.36s) ease-out forwards, pcfx-wash var(--fxd, 0.36s) ease-out forwards;
}
@keyframes pcfx-wash { 0% { transform: translateY(-70%); } 50%, 100% { transform: translateY(0); } }
.pc-fx.v-el-fire  { --c: rgba(255, 210, 120, 0.85); --c2: rgba(220, 70, 20, 0.5); }
.pc-fx.v-el-water { --c: rgba(200, 240, 255, 0.8);  --c2: rgba(40, 130, 230, 0.5); }
.pc-fx.v-el-wind  { --c: rgba(220, 255, 230, 0.8);  --c2: rgba(60, 190, 130, 0.45); }
.pc-fx.v-el-earth { --c: rgba(240, 210, 160, 0.8);  --c2: rgba(120, 80, 40, 0.55); }
.pc-fx.v-el-light { --c: rgba(255, 255, 240, 0.9);  --c2: rgba(230, 190, 80, 0.45); }
.pc-fx.v-el-dark  { --c: rgba(200, 140, 255, 0.75); --c2: rgba(40, 0, 70, 0.6); }
.pc-fx.v-el-none  { --c: rgba(230, 200, 255, 0.8);  --c2: rgba(140, 80, 230, 0.45); }
/* 回復・強化・治療・魔力: 下から光が昇る */
.pc-fx.v-heal, .pc-fx.v-buff, .pc-fx.v-cure, .pc-fx.v-mana, .pc-fx.v-debuff {
  background:
    radial-gradient(2px 2px at 18% 70%, #fff, transparent), radial-gradient(2px 2px at 46% 85%, #fff, transparent),
    radial-gradient(2px 2px at 74% 62%, #fff, transparent), radial-gradient(2px 2px at 88% 90%, #fff, transparent),
    linear-gradient(0deg, var(--c) 0%, transparent 80%);
  animation: pcfx-fade var(--fxd, 0.36s) ease-out forwards, pcfx-rise var(--fxd, 0.36s) ease-out forwards;
}
@keyframes pcfx-rise { 0% { transform: translateY(35%); } 100% { transform: translateY(-10%); } }
.pc-fx.v-heal { --c: rgba(110, 230, 140, 0.55); }
.pc-fx.v-buff { --c: rgba(255, 210, 90, 0.5); }
.pc-fx.v-cure { --c: rgba(150, 230, 255, 0.5); }
.pc-fx.v-mana { --c: rgba(120, 170, 255, 0.55); }
/* 弱体: 紫が上から沈む */
.pc-fx.v-debuff { --c: rgba(160, 80, 230, 0.55); animation: pcfx-fade var(--fxd, 0.36s) ease-out forwards, pcfx-sink var(--fxd, 0.36s) ease-out forwards; background: linear-gradient(180deg, var(--c) 0%, transparent 80%); }
@keyframes pcfx-sink { 0% { transform: translateY(-35%); } 100% { transform: translateY(10%); } }

/* 使った技・発動した効果の名 (game.js renderParty の .pc-call)。肖像の上端から右へはみ出して読ませる。
   入れ物は肖像の段 (grid の 2〜4段目) を囲む枠。長さ --calld は game.js の PARTY_CALL_MS と同じ */
.pc-call {
  position: absolute; grid-row: 2 / 5; grid-column: 1 / 3; inset: 0 0 auto 0; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding-top: 1px;
  pointer-events: none; min-width: 0;
  animation: pccall var(--calld, 1.4s) ease-out both;
}
@keyframes pccall {
  0% { opacity: 0; transform: translateX(-6px); }
  6% { opacity: 1; transform: translateX(0); }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
.pc-cl {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 800; line-height: 14px; letter-spacing: 0.3px;
  padding: 0 5px 0 4px; border-left: 2px solid currentColor; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, rgba(8,6,8,0.94), rgba(8,6,8,0.8) 75%, rgba(8,6,8,0.55));
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(0,0,0,0.9);
  box-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
/* 隣の札の上まで幅を取り、技名を一行で読ませる。画面端では内側へ広げる。 */
.pc-call { width: max-content; max-width: min(240px, calc((100vw - 32px) / 2)); right: auto; }
.pc:nth-child(3n) .pc-call, .pc:last-child .pc-call { left: auto; right: 0; align-items: flex-end; }
@media (max-width: 600px) and (max-height: 760px) {
  .pc:nth-child(n+4) .pc-call { left: auto; right: 0; align-items: flex-end; }
}
.pc-cl.k-skill { color: #f3d58b; }   /* 技・呪文 */
.pc-cl.k-heal  { color: #9ff0b8; }   /* 回復・治療・魔力 */
.pc-cl.k-item  { color: #d8e6a0; }   /* 道具 */
.pc-cl.k-guard { color: #a8c4e6; }   /* 防御 */
.pc-cl.k-proc  { color: #c8b4ff; font-size: 10px; } /* 発動した効果 (パッシブ・反撃・かばう…) */
.pc-cl.k-proc::before { content: "◆"; margin-right: 2px; font-size: 7.5px; vertical-align: 1px; opacity: 0.9; }

/* ===== 戦闘のコマンド板 ===== */
/* 探索中は命令板の場所を空けない。戦闘中は演出の間も板の高さを保つ (記録欄が跳ねないように) */
#app:not(.in-combat) #controls { display: none; }
#app.in-combat #controls { min-height: 150px; }
#app.in-combat #combat-menu[data-mode="acting"], #app.in-combat #combat-menu[data-mode=""] { justify-content: center; flex: 1 1 auto; }
#combat-message .who.who-foe .who-mark { background: linear-gradient(135deg, #ff9a80, #8a120c); box-shadow: 0 0 8px rgba(255,60,40,0.85); }
#combat-message .who.who-foe .who-n { color: #ff9a86; text-shadow: 0 0 10px rgba(255,60,40,0.45), 0 1px 0 #000; }
/* 不確定名 (まだ名を知らない敵「羽ばたく小さなもの？」): 正式な名と見分けるため淡い藤色 (itemview.js UNKNOWN_COLOR と揃える) */
.unk-name { color: #b9acd9; font-weight: 700; }
/* 名前のまだわからない魔物の絵: 闇色の影に不確定名の色の淡い縁 (戦闘の monsterUnknownBitmap と揃える) */
canvas.unk-sil { filter: brightness(0) drop-shadow(0 0 1px rgba(185,172,217,0.85)) drop-shadow(0 0 4px rgba(150,130,210,0.35)); }
#combat-message .who.who-unk .who-n, #combat-menu .tgt-n.unk { color: #b9acd9; text-shadow: 0 0 10px rgba(150,130,210,0.4), 0 1px 0 #000; }
#combat-menu { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
#combat-message .who {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 3px 6px;
  margin: 0; font-size: 12.5px; line-height: 1.3; text-align: center; letter-spacing: 0.5px; text-shadow: 0 1px 0 #000;
}
#combat-message .who-mark {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff1c4, #c9a24a); box-shadow: 0 0 8px rgba(243,213,139,0.85);
}
#combat-message .who-n { color: var(--dg-gold-hi); font-weight: 800; font-size: 14px; letter-spacing: 1px; text-shadow: 0 0 10px rgba(201,162,74,0.4), 0 1px 0 #000; }
#combat-message .who-t { color: #b4a286; font-weight: 700; }
/* 使った技の札 (game.js callPlate):「〇〇の エクスプロージョン」。技の名を大きく金で */
#combat-message .who-sk {
  font-size: 16px; font-weight: 800; color: #ffe9b0; letter-spacing: 1px;
  padding: 1px 8px; border: 1px solid #8a6a2c; border-radius: 3px;
  background: linear-gradient(180deg, rgba(90,62,18,0.75), rgba(30,20,8,0.75));
  text-shadow: 0 0 10px rgba(243,213,139,0.6), 0 1px 0 #000;
  animation: who-sk-in 0.18s ease-out;
}
@keyframes who-sk-in { from { transform: scale(1.15); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #combat-message .who-sk { animation: none; } }
#combat-message .who-c {
  font-size: 10px; font-weight: 700; color: #cbb991; line-height: 1;
  padding: 2px 5px; border: 1px solid #4d3f37; border-radius: 2px; background: rgba(0,0,0,0.35);
}
#combat-menu .cmd-main { display: grid; grid-template-columns: 1.75fr 1fr; gap: 6px; }
#combat-menu .cmd-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
#combat-menu .cmd-sub.has-swap { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } /* 持ち替え (袋に武器がある時だけ) */
#combat-menu .cmd-sub.has-swap .btn.cmd { font-size: 11.5px; letter-spacing: 0; }

#combat-menu .btn.cmd {
  min-height: 44px; padding: 6px 8px; gap: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; letter-spacing: 1px; text-align: left;
  color: #e8dcc4;
  background:
    var(--grain),
    linear-gradient(180deg, rgba(255,240,210,0.05), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, #2b2328 0%, #1c161b 55%, #120d11 100%);
  border: 1px solid #4d3f37; border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,0.1), inset 0 -2px 0 rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.55),
    0 3px 0 #070507, 0 4px 10px rgba(0,0,0,0.7);
  transform: translateY(0);
}
#combat-menu .btn.cmd:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(0,0,0,0.6), 0 1px 0 #070507;
}
#combat-menu .cmd-ic { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 0 #000); opacity: 0.92; }
#combat-menu .cmd-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
#combat-menu .cmd-l { font-weight: 800; white-space: nowrap; }
#combat-menu .cmd-s { font-size: 9.5px; font-weight: 700; color: #9a8e78; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#combat-menu .cmd-main .btn.cmd { min-height: 56px; font-size: 17px; letter-spacing: 3px; }
#combat-menu .cmd-main .cmd-ic { width: 24px; height: 24px; }
/* 下の段も主の段と同じく、アイコンを文字の左に置く (2026-11-14 ユーザー指定) */
#combat-menu .cmd-sub .btn.cmd { flex-direction: row; gap: 6px; padding: 5px 4px 4px; min-height: 46px; font-size: 12.5px; text-align: left; }
#combat-menu .cmd-sub .cmd-t { align-items: flex-start; }
#combat-menu .cmd-sub .cmd-ic { width: 17px; height: 17px; }
#combat-menu .cmd-sub .cmd-s { font-size: 8.5px; margin-top: 1px; }
/* 主の一手: 血に濡れた鉄と金の縁 */
#combat-menu .btn.cmd.primary {
  color: #ffe9c0;
  border-color: #a8812e;
  background:
    var(--grain),
    radial-gradient(120% 90% at 30% 0%, rgba(255,120,80,0.16), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #4a1712 0%, #2c0d0b 55%, #170605 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,210,170,0.22), inset 0 -2px 0 rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.5),
    0 0 0 1px rgba(201,162,74,0.3), 0 0 18px rgba(200,40,20,0.3), 0 3px 0 #070507, 0 4px 10px rgba(0,0,0,0.7);
  text-shadow: 0 0 10px rgba(255,140,90,0.35), 0 1px 0 #000;
}
#combat-menu .btn.cmd.primary .cmd-s { color: #d9a98a; }
#combat-menu .btn.cmd.primary .cmd-ic { color: #ffd9a0; }
#combat-menu .cmd-skill .cmd-ic { color: #a8c8ff; }
#combat-menu .cmd-defend .cmd-ic { color: #c9b48a; }
#combat-menu .cmd-run .cmd-ic { color: #b9b0a0; }
#combat-menu .cmd-auto .cmd-ic { color: #ffd84a; }
#combat-menu .btn.cmd.on { color: var(--dg-gold-hi); border-color: #8a6d2e; box-shadow: inset 0 0 12px rgba(201,162,74,0.25), 0 3px 0 #070507, 0 0 12px rgba(201,162,74,0.25); }
#combat-menu .btn.cmd.on .cmd-s { color: var(--dg-gold-hi); }
#combat-menu .btn.cmd.muted { opacity: 0.5; }
#combat-menu .btn.cmd-wide { min-height: 46px; width: 100%; flex: 0 0 auto; }
#combat-menu .btn.cmd-stop { color: #ffd0c0; border-color: #7a2a24; }
@media (hover: hover) {
  #combat-menu .btn.cmd:hover { border-color: #7a6242; }
  #combat-menu .btn.cmd.primary:hover { border-color: #d6a94a; }
}

/* 対象選択・スキル一覧 (巻物のように中を巻く) */
:is(#combat-menu, .battle-skill-picker) .target-list { display: grid; gap: 5px; flex: 0 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 1px; }
:is(#combat-menu, .battle-skill-picker) .target-list.cols2 { grid-template-columns: 1fr 1fr; }
:is(#combat-menu, .battle-skill-picker) .btn.tgt, :is(#combat-menu, .battle-skill-picker) .btn.spell {
  min-height: 44px; padding: 6px 9px; display: grid; gap: 3px; align-content: center; justify-items: stretch; text-align: left;
  font-size: 13px; letter-spacing: 0.5px; line-height: 1.2;
  background: var(--grain), linear-gradient(180deg, #261e23 0%, #171216 100%);
  border: 1px solid #45383a; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.07), inset 0 0 0 1px rgba(0,0,0,0.55), 0 2px 0 #070507;
}
#combat-menu .btn.tgt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n hp" "bar bar"; }
#combat-menu .tgt-n { grid-area: n; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#combat-menu .tgt-hp { grid-area: hp; font-size: 10px; color: #b4a286; font-variant-numeric: tabular-nums; }
#combat-menu .tgt-mp { display: block; color: #aabbe0; }
#combat-menu .tgt-bar { grid-area: bar; position: relative; height: 5px; border-radius: 3px; background: #0a0607; box-shadow: inset 0 1px 1px #000, 0 0 0 1px #2c2226; overflow: hidden; }
#combat-menu .tgt-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ff7a60, #a8231c 60%, #5a0806); }
#combat-menu .tgt-enemy { border-left: 3px solid #8a1a12; }
#combat-menu .tgt-ally { border-left: 3px solid #3c7a4e; }
#combat-menu .tgt-ally .tgt-bar > i { background: linear-gradient(180deg, #9ff0b0, #3c9a5a 60%, #1c4a2a); }
#combat-menu .tgt-down { opacity: 0.6; }
/* .btn 共通の justify-content: center がグリッドの列を中身の幅に縮めて中央へ寄せるので、列を札いっぱいに広げる */
:is(#combat-menu, .battle-skill-picker) .btn.spell { border-left: 3px solid var(--sp-col, #c9a24a); grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
:is(#combat-menu, .battle-skill-picker) .sp-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
:is(#combat-menu, .battle-skill-picker) .sp-n { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f0e4cc; }
/* 道具の一覧: 品の絵を名前の前に添え、名前は残りの幅で切る */
:is(#combat-menu, .battle-skill-picker) .spell-item .sp-top { justify-content: flex-start; }
:is(#combat-menu, .battle-skill-picker) .spell-item .sp-n { flex: 1 1 auto; min-width: 0; }
:is(#combat-menu, .battle-skill-picker) .sp-ic { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; }
:is(#combat-menu, .battle-skill-picker) .sp-ic canvas { width: 20px; height: 20px; image-rendering: pixelated; }
:is(#combat-menu, .battle-skill-picker) .sp-mp { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; color: #b4e6ff; padding: 1px 4px; border: 1px solid #2c5a7a; border-radius: 2px; background: rgba(20,50,80,0.4); }
:is(#combat-menu, .battle-skill-picker) .sp-d { font-size: 10px; color: #9a8e78; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(#combat-menu, .battle-skill-picker) .btn.spell.locked { opacity: 0.38; filter: grayscale(0.6); }
:is(#combat-menu, .battle-skill-picker) .target-list.cols2 .btn { min-height: 44px; font-size: 12px; padding: 5px 7px; }
/* 2列のときは説明を1行に収める (長い説明が技名に重ならないように) */
:is(#combat-menu, .battle-skill-picker) .target-list.cols2 .sp-d { -webkit-line-clamp: 1; line-clamp: 1; }

/* ===== 操作のヒント ===== */
#hint { font-size: 10px; padding: 3px 8px 4px; color: #6e6457; letter-spacing: 1px; border-top: 1px solid #1a1517; }

@media (max-width: 560px) and (max-height: 640px) {
  #app.in-combat #controls { min-height: 120px; }
  #combat-menu { gap: 4px; }
  #combat-menu .cmd-main .btn.cmd { min-height: 44px; }
  #combat-menu .cmd-sub .btn.cmd { min-height: 44px; }
  #combat-menu .cmd-sub .cmd-ic { display: none; }
}

/* ===== 広い画面 (デスクトップ) ===== */
@media (min-width: 560px) {
  #topbar { min-height: 56px; padding: 6px 12px 7px; }
  #floor-info .fi-name { font-size: 11.5px; }
  #floor-info .fi-depth { font-size: 21px; }
  #screen { padding: 8px 10px 4px; }
  #runbar { margin: 4px 10px 0; }
  #hud { padding: 4px 10px; }
  #party { padding: 3px 10px 3px; }
  #controls { padding: 2px 10px 8px; }
  .pc .name { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #descend-btn, .pc.low::after, #floor-info .fi-elite, #log > div:last-child { animation: none !important; }
  .pc-fx { display: none; }
  .pc-call { animation: none; }
}

/* 表示操作は盤面に重ねず、記録の上の右端に置く。 */
#runbar button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; min-height: 44px; padding: 4px 10px;
  font: inherit; color: #eadbb3; background: var(--grain), var(--dg-iron-hi);
  border: 1px solid #665338; border-radius: 4px; white-space: nowrap;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#runbar button:active { filter: brightness(1.15); }
#runbar button:focus-visible { outline: 2px solid #f3d58b; outline-offset: -3px; }
#board-overview { min-width: 68px; }
#board-camera-tools { display: none; }
@media (max-width: 600px) {
  .board-camera-active #screen { position: relative; flex-direction: column; }
  .board-camera-active #view { flex: 0 0 auto; }
  .board-camera-active #board-camera-tools { display: flex; flex: 0 0 auto; }
  #runbar button { font-size: 13px; }
}

/* 縦の短い探索画面では隊を一列にし、記録と盤面の両方を残す。詳細は札をタップ。 */
@media (max-width: 600px) and (max-height: 760px) {
  #app.board-camera-active #party { flex-wrap: nowrap; gap: 3px; }
  #app.board-camera-active #party .pc {
    flex: 1 1 0; max-width: none; min-height: 44px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "status" "hp" "mp" "bf";
    padding: 3px; row-gap: 3px;
  }
  #app.board-camera-active .pc .pc-seals { grid-area: status; justify-self: start; }
  #app.board-camera-active .pc .pc-por,
  #app.board-camera-active .pc .cls,
  #app.board-camera-active .pc .pc-lv { display: none; }
}

/* 戦闘では行動順と命令板もあるため、少し早めに隊の表示を詰める。 */
@media (max-width: 600px) and (max-height: 760px) {
  #app.in-combat #party { flex-wrap: nowrap; gap: 3px; }
  #app.in-combat #party .pc {
    flex: 1 1 0; max-width: none; min-height: 44px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "status" "hp" "mp" "bf";
    padding: 3px; row-gap: 3px;
  }
  #app.in-combat .pc .pc-seals { grid-area: status; justify-self: start; }
  #app.in-combat .pc .pc-por,
  #app.in-combat .pc .cls,
  #app.in-combat .pc .pc-lv { display: none; }
}

/* 敵の表示操作は戦場の内側。人数によって記録・隊・命令板を動かさない。 */
.in-combat #screen { position: relative; }
#enemy-display-tools { display: none; }
.in-combat #enemy-display-tools {
  position: absolute; top: 10px; bottom: 10px; left: 14px; right: 14px;
  display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px;
  pointer-events: none;
}
#enemy-focus {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#enemy-focus.has-target {
  bottom: 0; left: 0; width: auto; height: auto; max-width: 100%;
  clip-path: none; white-space: normal; color: #eadbb3;
  font-size: 11px; text-shadow: 0 1px 3px #000;
}
#enemy-row-toggle {
  pointer-events: auto; flex: 0 0 auto; min-height: 44px; padding: 4px 8px; white-space: nowrap;
  font-size: 12px; color: #eadbb3; background: rgba(24, 19, 25, 0.94);
  border: 1px solid #665338; border-radius: 4px;
}
#enemy-row-toggle[hidden] { display: none; }
#enemy-row-toggle:disabled { opacity: 0.5; }
#enemy-row-toggle:focus-visible { outline: 2px solid #f3d58b; outline-offset: 2px; }

/* 戦場の下端に前後の列と同じ並びで名を残す。スマホの敵の配置は変えない。 */
#enemy-names { display: none; }
.in-combat #enemy-names {
  display: grid; position: absolute; bottom: 4px; left: 6px; right: 6px;
  padding: 4px 8px; gap: 3px; pointer-events: none;
  background: rgba(14, 12, 19, 0.88); color: #eadbb3;
  font-size: 12px; line-height: 1.4;
}
.enemy-name-row { display: flex; gap: 8px; }
.enemy-name { flex: 1; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.enemy-name.unk { color: #b9acd9; }
.enemy-name.complete { color: #ffd36b; }
.in-combat #enemy-focus.has-target { top: 0; bottom: auto; }
@media (min-width: 560px) {
  .in-combat #enemy-names { left: 10px; right: 10px; }
}
@media (max-width: 600px) {
  .in-combat #screen { flex-direction: column; }
  .in-combat #enemy-names {
    position: relative; z-index: 1; inset: auto; width: 100%; min-height: 27px; box-sizing: border-box;
    padding: 1px 4px; gap: 1px; align-content: center; font-size: 10px; line-height: 1.2;
  }
  .enemy-name-row { gap: 4px; }
  /* 一列・二列で戦場や記録の高さを変えず、名前の上にも余白を残す。 */
  #app.in-combat #enemy-names { height: 33.5px; min-height: 33.5px; padding-top: 7.5px; }
}
/* 短いスマホでは隊の札と命令板の余白も詰める。 */
@media (max-width: 600px) and (max-height: 640px) {
  #app.in-combat #party .pc { row-gap: 0; padding-block: 0; }
  #app.in-combat #controls { padding-bottom: 2px; }
}

/* スマホでは札と命令ボタンを詰めた分だけ記録を広げ、盤面の高さを保つ。 */
@media (max-width: 600px) {
  #app:is(.board-camera-active, .in-combat) #hud { flex: 0 0 auto; min-height: 0; }
  #app:is(.board-camera-active, .in-combat) #log {
    flex: 0 0 auto; height: calc(2.5em + var(--log-extra, 0px));
    min-height: calc(2.5em + var(--log-extra, 0px)); max-height: calc(2.5em + var(--log-extra, 0px));
    padding-block: 2px;
  }
  #app.in-combat #controls { flex: 1 1 0; }
}

.pc-current-short { display: none; }
@media (max-width: 600px) {
  #app.board-camera-active { --log-extra: calc(var(--party-log-extra, 0px) + var(--explore-button-log-extra, 9.2px)); }
  #app.board-camera-active #party:not(.measure-vitals) .pc-num {
    flex-wrap: nowrap; white-space: nowrap; overflow-wrap: normal;
  }
  #app.board-camera-active #party:not(.measure-vitals) .pc-current,
  #app.board-camera-active #party:not(.measure-vitals) .pc-num small { display: none; }
  #app.board-camera-active #party:not(.measure-vitals) .pc-current-short { display: inline; }
  #app.in-combat {
    --log-extra: var(--command-log-extra, 11.05px);
    --command-reserve: 150px;
  }
  #app.in-combat #controls:not(.measure-commands) { min-height: calc(var(--command-reserve) - var(--log-extra)); }
  #app.in-combat #controls:not(.measure-commands) .cmd-main { height: var(--command-main-height, 50.4px); flex: 0 0 auto; }
  #app.in-combat #controls:not(.measure-commands) .cmd-sub { height: var(--command-sub-height, 49.05px); flex: 0 0 auto; }
  #app.in-combat #controls:not(.measure-commands) .cmd-main .btn.cmd { min-height: 0; height: 100%; padding-block: 3px; }
  #app.in-combat #controls:not(.measure-commands) .cmd-sub .btn.cmd { min-height: 0; height: 100%; padding-block: 1.7px; }
}
@media (max-width: 560px) and (max-height: 640px) {
  #app.in-combat { --command-reserve: 120px; }
}

/* スマホの探索ボタンは元の実寸高の0.9倍。安全領域を残して縮小分を記録へ渡す。 */
@media (max-width: 600px) {
  #app.board-camera-active:not(.measure-explore-buttons) #runbar {
    height: var(--explore-runbar-height, 41.6px); min-height: 0;
  }
  #app.board-camera-active:not(.measure-explore-buttons) #runbar button {
    height: var(--explore-run-button-height, 39.6px); min-height: 0; padding-block: 3px;
  }
  #app.board-camera-active:not(.measure-explore-buttons) #hint.dg-dock {
    height: var(--explore-dock-height, calc(52.2px + var(--safe-bottom))); min-height: 0;
  }
  #app.board-camera-active:not(.measure-explore-buttons) #hint .dk-btn {
    height: var(--explore-dock-button-height, 43.2px); min-height: 0; padding-block: 2.5px;
  }
  #app.board-camera-active:not(.measure-explore-buttons) #hint .dk-idle { min-height: 0; }
}

/* 色だけでなく形でも作用を示す。対象の札だけに重ねる。 */
.pc-fx.v-heal::after, .pc-fx.v-cure::after, .pc-fx.v-buff::after, .pc-fx.v-debuff::after {
  position:absolute; right:10px; top:8px; font:700 28px/1 sans-serif; text-shadow:0 0 8px currentColor;
}
.pc-fx.v-heal::after { content:"＋"; color:#7cfc7c; }
.pc-fx.v-cure::after { content:"✦"; color:#9be8ff; }
.pc-fx.v-buff::after { content:"↑"; color:#ffd84a; }
.pc-fx.v-debuff::after { content:"↓"; color:#c58aff; }

/* 敵表示の直下に、空欄でも同じ高さの行動枠を保つ。 */
#combat-message { display: none; }
#app.in-combat #combat-message {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  flex: 0 0 36px; height: 36px; min-height: 36px; overflow: hidden;
  margin: 0 6px; padding: 0 8px; border: 1px solid #59452e;
  background: var(--dg-iron); box-shadow: var(--dg-edge);
}
#combat-message .who { width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; }
#combat-message .who > * { flex-shrink: 0; }
#combat-message .who-n, #combat-message .who-sk {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

#combat-message .battle-action-name {
  padding: 0; margin: 0; border: 0; background: none; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: bold 14px/1.3 var(--font);
}
#combat-message .who:has(.who-n:empty) .who-mark { display: none; }