/* 携帯端末と幅の判定はphone-battle.js。通常のPC・タブレットには適用しない。 */
#app.phone-combat { overflow: hidden; --log-extra: 0px; }
#app.phone-combat #topbar { min-height: 48px; height: 48px; padding: 2px 8px; }
#app.phone-combat #topbar-cur, #app.phone-combat .fi-pips { display: none; }
#app.phone-combat #floor-info { flex-direction: row; justify-content: space-between; gap: 6px; }
#app.phone-combat .fi-name { font-size: 13px; letter-spacing: 0; text-align: left; }
#app.phone-combat .fi-depth { font-size: 21px; }
#app.phone-combat #settings-btn { min-height: 44px; height: 44px; }
#app.phone-combat > #turn-order { flex: 0 0 36px; min-height: 36px; margin: 0; padding: 3px 8px; overflow-x: auto; }
#app.phone-combat #screen { padding: 0; position: relative; }
#app.phone-combat #view { margin: 0; border-radius: 0; border-width: 0; display: block; }
#app.phone-combat #combat-message { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2; min-height: 30px; height: auto; margin: 0; padding: 6px; pointer-events: none; background: #11191bce; border: 1px solid #615335; }
#app.phone-combat #combat-message .who-n { font-size: 14px; }
#app.phone-combat #combat-message .who-sk { font-size: 13px; }
#app.phone-combat #enemy-display-tools { display: none; }
/* 名前は戦場直下・記録欄の上にまとめ、絵やHPに重ねない。 */
#app.phone-combat #enemy-names { display: grid; }
.phone-enemies { display: none; }
#app.phone-combat .phone-enemies { position: absolute; inset: 0 0 33.5px; pointer-events: none; display: block; }
.phone-enemy { position: absolute; min-width: 24px; min-height: 24px; padding: 0; transform: translateX(-50%); border: 0; background: transparent; color: transparent; pointer-events: auto; }
.phone-enemy:focus-visible { outline: 1px solid #e2c06e; }
#app.phone-combat #hud { flex: 0 0 44px; height: 44px; min-height: 44px; padding: 2px 6px; position: relative; }
#app.phone-combat #log { height: 40px; min-height: 40px; max-height: 40px; margin: 0; padding: 3px 45px 3px 6px; font-size: 11px; overflow: hidden; }
#app.phone-combat #log::after { content: '記録 ›'; position: absolute; right: 12px; top: 14px; color: #d5c38a; font-size: 11px; }
#app.phone-combat #log .log-line { display: none; }
#app.phone-combat #log .log-line:last-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 30px; }
#app.phone-combat #log .log-badge { display: none; }
#app.phone-combat .log-new { display: none; }
#app:is(.phone-combat, .phone-board) #party { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 5px 6px; }
#app:is(.phone-combat, .phone-board) #party .pc { width: auto; max-width: none; min-height: 49px; padding: 3px 4px; grid-template-columns: 26px minmax(0,1fr); grid-template-rows: 13px 12px 12px auto; grid-template-areas: 'por name' 'por hp' 'por mp' 'bf bf'; gap: 1px 4px; }
#app:is(.phone-combat, .phone-board) #party .pc-por { display: block; width: 26px; height: 36px; }
#app:is(.phone-combat, .phone-board) #party .pc-seals { display: flex; max-width: 28px; grid-area: por; }
#app:is(.phone-combat, .phone-board) #party .pc-seal { width: 12px; height: 12px; flex-basis: 12px; font-size: 8px; }
#app:is(.phone-combat, .phone-board) #party .pc .cls, #app:is(.phone-combat, .phone-board) #party .pc-lv { display: none; }
#app:is(.phone-combat, .phone-board) #party .pc-n { font-size: 11px; }
#app:is(.phone-combat, .phone-board) #party .pc-vial { min-height: 12px; height: 12px; border-radius: 2px; }
#app:is(.phone-combat, .phone-board) #party .pc-num { font-size: 10px; line-height: 12px; justify-content: flex-end; }
#app:is(.phone-combat, .phone-board) #party .pc-vial .pc-num::before { content: 'HP'; margin-right: auto; padding-left: 2px; font-size: 8px; }
#app:is(.phone-combat, .phone-board) #party .pc-vial.mp .pc-num::before { content: 'MP'; }
#app:is(.phone-combat, .phone-board) #party .buffs { min-width: 0; flex-wrap: nowrap; align-items: center; height: auto; min-height: 0; visibility: visible; overflow: hidden; white-space: nowrap; }
#app.phone-combat #controls:not(.measure-commands) { flex: 0 0 auto; min-height: 44px; padding: 4px 6px calc(5px + var(--safe-bottom)); }
#app.phone-combat #combat-menu { min-height: 44px; gap: 4px; }
#app.phone-combat #controls:not(.measure-commands) .cmd-main { display: grid; grid-template-columns: 1.1fr 1.1fr .9fr .75fr .9fr; height: 44px; gap: 4px; }
#app.phone-combat #combat-menu .cmd-main:not(.has-quick) { grid-template-columns: 1.1fr .9fr .75fr .9fr; }
#app.phone-combat #combat-menu .cmd-main .btn.cmd { display: flex; flex-direction: column; gap: 2px; height: 44px; min-height: 44px; padding: 4px 2px; font-size: 13px; letter-spacing: 0; }
/* 主の段: 1行目にアイコンと名前を横に並べ、2行目に一回り小さい補足 (2026-11-14 ユーザー指定) */
#app.phone-combat #combat-menu .cmd-main .btn.cmd { display: grid; grid-template-columns: auto minmax(0, max-content); grid-template-rows: auto auto; justify-content: center; align-content: center; column-gap: 3px; row-gap: 1px; }
#app.phone-combat #combat-menu .cmd-main .cmd-t { display: contents; }
#app.phone-combat #combat-menu .cmd-main .btn.cmd .cmd-ic { display: block; grid-row: 1; grid-column: 1; align-self: center; width: 14px; height: 14px; }
#app.phone-combat #combat-menu .cmd-main .cmd-l { grid-row: 1; grid-column: 2; min-width: 0; }
#app.phone-combat #combat-menu .cmd-main .cmd-s { grid-row: 2; grid-column: 1 / -1; justify-self: center; max-width: 100%; margin-top: 0; font-size: 8px; }
@media(max-width:340px) { #app.phone-combat #combat-menu .cmd-main .btn.cmd { column-gap: 1px; padding-inline: 1px; font-size: 12px; } #app.phone-combat #combat-menu .cmd-main .btn.cmd .cmd-ic { width: 11px; height: 11px; } }
#app.phone-combat #combat-menu .cmd-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#app.phone-combat #combat-menu .cmd-s { font-size: 9px; letter-spacing: 0; }
#app.phone-combat #combat-menu .cmd-main .sp-tags, #app.phone-combat #combat-menu .cmd-main .sp-edges { display: none; }
#app.phone-combat #combat-menu .cmd-sub { display: none; }
#app.phone-combat #combat-menu .target-list { max-height: 132px; overflow-y: auto; }
#app.phone-combat #combat-menu .cmd-autorow { display: flex; min-height: 44px; }
#app.phone-combat #combat-menu .cmd-autorow .cmd-stop { flex: 1; min-height: 44px; }
#app.phone-combat #combat-menu .cmd-autorow .cmd-keep { flex: 0 0 58px; }
#app.phone-combat #hint { display: none; }
@media(max-width:360px) { #app:is(.phone-combat, .phone-board) #party .pc { grid-template-columns: 20px minmax(0,1fr); column-gap: 3px; } #app:is(.phone-combat, .phone-board) #party .pc-por { width: 20px; } }
#app:is(.phone-combat, .phone-board) #party .buffs:empty { display: none; }
#app:is(.phone-combat, .phone-board) #party .buffs .bf { flex: 0 0 auto; white-space: nowrap; font-size: 8px; padding: 0 1px; }
@media(max-height:600px) {
  #app.phone-combat #combat-menu .target-list { max-height: 44px; }
}


/* スマホ探索も戦闘と同じ隊の札を使い、盤面下の帯は置かない。 */
#app.phone-board #hud { display: none; }
#app.phone-board #screen { position: relative; padding: 0; }
#app.phone-board #view { margin: 0; display: block; }
#app.phone-board #runbar, #app.phone-board:not(.measure-explore-buttons) #runbar {
  position: absolute; z-index: 3; right: 8px; bottom: 8px;
  width: auto; height: auto; min-height: 0; margin: 0; padding: 0;
  display: flex; gap: 6px; background: none; border: 0; box-shadow: none;
  pointer-events: none;
}
#app.phone-board #runbar.hidden { display: none; }
#app.phone-board #runbar-goal { display: none; }
#app.phone-board #runbar button, #app.phone-board:not(.measure-explore-buttons) #runbar button {
  min-height: 44px; height: 44px; padding: 6px 10px;
  background: rgba(15, 18, 20, .65); border: 1px solid rgba(201, 162, 74, .5);
  border-radius: 4px; color: #eee4cf; pointer-events: auto;
}
#app.phone-board #board-camera-tools { position: static; display: flex; }

/* 戦闘の配置は手番・対象選択・効果の増減で動かさない。 */
#app.phone-combat > #turn-order.hidden { display: flex !important; visibility: hidden; }
#app.phone-combat #screen { flex: 1 1 0; min-height: 0; overflow: hidden; }
#app:is(.phone-combat, .phone-board) #party {
  flex: 0 0 134px; height: 134px; min-height: 134px; max-height: 134px;
  grid-template-rows: repeat(2, 60px);
}
#app:is(.phone-combat, .phone-board) #party .pc {
  height: 60px; min-height: 60px; max-height: 60px;
  grid-template-rows: 13px 12px 12px 12px; overflow: hidden;
}
/* 札の外は切り取られるので、瀕死の赤い縁は内側に描く */
#app:is(.phone-combat, .phone-board) #party .pc.low::after { inset: 0; border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px #d1261a, inset 0 0 12px rgba(160,10,10,0.35); }
#app.phone-combat #controls:not(.measure-commands) {
  position: relative; flex: 0 0 calc(53px + var(--safe-bottom));
  height: calc(53px + var(--safe-bottom)); min-height: calc(53px + var(--safe-bottom));
  max-height: calc(53px + var(--safe-bottom));
}
#app.phone-combat #combat-menu:is([data-mode="target"], [data-mode="spells"]) {
  position: absolute; z-index: 5; bottom: calc(100% + 182px); left: 6px; right: 6px;
  max-height: clamp(90px, calc(100dvh - 360px - var(--safe-top) - var(--safe-bottom) * 2), 192px);
  padding: 6px; background: rgba(16, 18, 22, .96); border: 1px solid #7a6242;
  border-radius: 4px; box-shadow: 0 2px 12px #000;
}
#app.phone-combat #combat-menu .cmd-autorow .btn.cmd { height: 44px; min-height: 44px; padding-block: 2px; }