/* =====================================================================
   隊・魂 (WP-B) — 統合された人業の画面 (src/ui/party.js / soulpanel.js)
   ui.css のトークン (--iron-*, --gold*, --t-*, --sp-*) と kit の部品を土台に重ねる。
   黒鉄の板・燻した金の罫・明朝。押せる場所は最低 44×44。
   1画面に収める: 隊タブは街シェルの中身の高さいっぱいに広がり、ページはスクロールしない。
   区分の中身 (.pt-body) だけが、狭い画面で内側にスクロールする。
   ===================================================================== */

/* ---------- 骨組み ---------- */
#town-shell #town-screen > .pt-root { flex: 1 1 0; min-height: 0; }
.pt-root { display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--ink); }
.pt-root > * { flex-shrink: 0; }
.pt-root.m-town { overflow: hidden; margin: 0 -4px; }
.pt-root.m-town > .pt-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pt-root button { font-family: var(--font); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pt-px { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.pt-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pt-body > * { flex-shrink: 0; }
/* 館の主イレーヌを置く時: 区分の中身は中身の高さで止め、残りの高さを挿絵が受け取る。
   中身があふれた時 (is-over) は中身が全高を取って内側でスクロールし、挿絵は畳まれる */
.pt-root.m-town.has-keeper > .pt-body { flex-grow: 0; }
.pt-root.m-town.has-keeper > .pt-body.is-over { flex-grow: 1; }
.pt-root.m-town > .pt-body.is-over ~ .pt-keeper { flex: 0 0 0; }
.pt-root.m-town.has-keeper .pt-slot { min-height: 46px; padding-top: 3px; padding-bottom: 3px; }
.pt-root.m-town.has-keeper .pt-bagbar { min-height: 28px; }
/* 下部の門のための余白は街シェルに任せ、本文も挿絵もその上で止める。 */
/* 挿絵だけは画面の端まで (横は切らずに、縦だけ切る) */
@supports (overflow: clip) { .pt-root.m-town.has-keeper { overflow-x: visible; overflow-y: clip; } }

/* ---------- 館の主イレーヌ (挿絵 + 台詞の枠) ---------- */
.pt-root.m-town > .pt-keeper { flex: 1 1 0; min-height: 0; }
.pt-keeper { position: relative; container-type: size; margin: 0 -8px; overflow: hidden; }
.pt-kp-in { position: absolute; inset: 0; background: #0a080c; }
.pt-kp-art {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 44px); display: block;
  object-fit: cover; object-position: 30% 30%;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
/* 挿絵の下 44px は台詞の枠の受け皿 (闇)。上端は画面の地に溶かし、下端は枠の下で闇へ沈める */
.pt-kp-in::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #0a080c 0%, rgba(10,8,12,0) 16%),
    linear-gradient(0deg, #0a080c 0, #0a080c 44px, rgba(10,8,12,0) 104px);
}
.pt-kp-say {
  position: absolute; left: 10px; right: 10px; bottom: 28px; z-index: 2;
  display: block; min-height: 62px; padding: 14px 22px 9px 14px; text-align: left;
  font-family: var(--font); color: #ece2cc; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: var(--grain), linear-gradient(180deg, rgba(20,15,18,0.9), rgba(9,7,10,0.94));
  border: 1px solid #c9a24a; border-radius: 3px;
  box-shadow: inset 0 0 0 2px #0c090c, inset 0 0 0 3px rgba(201,162,74,0.45), 0 0 0 1px #000, 0 8px 22px rgba(0,0,0,0.75);
}
/* 枠の四隅の金具と左右の菱 */
.pt-kp-say::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--corners); opacity: 0.9;
}
.pt-kp-say::after {
  content: ""; position: absolute; inset: 50% -5px auto -5px; height: 8px; transform: translateY(-50%); pointer-events: none;
  background:
    linear-gradient(45deg, transparent 35%, #c9a24a 35% 65%, transparent 65%) left center / 8px 8px no-repeat,
    linear-gradient(45deg, transparent 35%, #c9a24a 35% 65%, transparent 65%) right center / 8px 8px no-repeat;
}
.pt-kp-say:active { filter: brightness(1.08); }
.pt-kp-who {
  position: absolute; left: 16px; top: 0; transform: translateY(-58%);
  padding: 3px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.3; white-space: nowrap;
  color: #f3d58b; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #221a1c, #110d10);
  border: 1px solid #c9a24a; border-radius: 2px;
  box-shadow: inset 0 0 0 2px #0c090c, inset 0 0 0 3px rgba(201,162,74,0.35), 0 2px 8px rgba(0,0,0,0.7);
}
.pt-kp-who::before, .pt-kp-who::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; background: #c9a24a; transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 0 1px #000;
}
.pt-kp-who::before { left: -4px; }
.pt-kp-who::after { right: -4px; }
.pt-kp-text { display: block; }
.pt-kp-l { display: block; font-size: 12.5px; line-height: 1.7; letter-spacing: 0.02em; text-shadow: 0 1px 0 #000; }
.pt-kp-next {
  position: absolute; right: 12px; bottom: 7px; font-size: 10px; color: #e8d08a; text-shadow: 0 0 6px rgba(232,208,138,0.6);
  animation: pt-kp-blink 1.2s ease-in-out infinite;
}
@keyframes pt-kp-blink { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.35; transform: translateY(2px); } }
/* 余白が少し足りない時: 挿絵を全高に広げ、台詞の枠は右へ寄せて顔を隠さない */
@container (max-height: 215px) {
  .pt-kp-art { height: 100%; object-position: 0% 30%; }
  .pt-kp-in::before { background: linear-gradient(180deg, #0a080c 0%, rgba(10,8,12,0) 16%), linear-gradient(0deg, rgba(10,8,12,0.9) 0, rgba(10,8,12,0) 40%); }
  .pt-kp-say { left: 47%; top: 18px; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  .pt-kp-who { left: 10px; padding-left: 10px; padding-right: 10px; letter-spacing: 0.08em; }
  .pt-kp-say .pt-kp-l { font-size: 12px; line-height: 1.6; letter-spacing: 0; }
}
/* さらに狭い時: 挿絵は背に退き、台詞の枠だけを上下いっぱいに。もっと狭ければ畳む */
@container (max-height: 150px) {
  .pt-kp-say { left: 10px; top: 12px; padding-top: 12px; }
  .pt-kp-say .pt-kp-l { font-size: 12.5px; line-height: 1.7; letter-spacing: 0.02em; }
}
@container (max-height: 104px) {
  .pt-kp-in { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pt-kp-next { animation: none; } }

/* ---------- イレーヌとの会話の場面 (初訪問の挨拶: src/ui/irene.js) ---------- */
.iv-scene {
  position: fixed; inset: 0; z-index: 88; overflow: hidden; outline: none; cursor: pointer;
  max-width: 520px; margin: 0 auto; background: #050307; color: var(--ink);
  animation: iv-in 0.5s ease both; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.iv-scene.out { animation: iv-out 0.4s ease forwards; pointer-events: none; }
@keyframes iv-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes iv-out { to { opacity: 0; } }
/* 挿絵: 奥に同じ絵をぼかして敷き (iv-amb)、手前の帯 (iv-art) を台詞の枠の上へ。ゆっくり引く */
.iv-amb { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; object-position: 30% 40%;
  filter: blur(10px) brightness(0.32) saturate(0.9); pointer-events: none; }
.iv-art {
  position: absolute; left: 0; right: 0; bottom: 118px; height: min(calc(100% - 150px), 112vw, 560px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%);
}
.iv-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 30% 32%; pointer-events: none;
  transform-origin: 30% 40%; animation: iv-push 14s ease-out both;
}
@keyframes iv-push { from { transform: scale(1.08); } to { transform: scale(1); } }
.iv-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(5,3,7,0.9) 0%, rgba(5,3,7,0.6) 120px, rgba(5,3,7,0) 220px),
    radial-gradient(60% 30% at 30% 45%, rgba(140,90,200,0.10), rgba(0,0,0,0) 70%);
}
.iv-skip {
  position: absolute; top: calc(var(--safe-top, 0px) + 10px); right: 10px; z-index: 3;
  min-width: 64px; min-height: 44px; padding: 0 14px; font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap;
  color: #cdbf9f; background: rgba(10,8,12,0.7); border: 1px solid rgba(201,162,74,0.45); border-radius: 2px; cursor: pointer;
}
.iv-stage {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 12px calc(var(--safe-bottom, 0px) + 22px);
}
.pt-kp-say.iv-say {
  position: relative; left: auto; right: auto; bottom: auto; width: 100%;
  min-height: 112px; padding: 20px 26px 16px 18px; cursor: pointer;
}
.iv-say .pt-kp-who { left: 18px; font-size: 13px; }
.iv-say .pt-kp-l { font-size: 14.5px; line-height: 1.85; letter-spacing: 0.03em; min-height: 1.85em; }
.iv-say .iv-unread { visibility: hidden; }
.iv-say .pt-kp-next { right: 14px; bottom: 10px; font-size: 11px; }
.iv-say .pt-kp-next.hidden { visibility: hidden; }
.iv-dots { display: flex; gap: 8px; min-height: 8px; }
.iv-dots i { width: 6px; height: 6px; transform: rotate(45deg); background: #3a3029; box-shadow: 0 0 0 1px #000; }
.iv-dots i.past { background: #8a6d2e; }
.iv-dots i.on { background: var(--accent-hi); box-shadow: 0 0 8px rgba(243,213,139,0.7); }
@media (prefers-reduced-motion: reduce) { .iv-art img { animation: none; } .iv-scene, .iv-scene.out { animation-duration: 0.12s; } }

.pt-note { font-size: 12px; line-height: 1.6; color: #9a8e78; padding: 0 2px; }
.pt-note.c { text-align: center; padding: 4px; }

/* ---------- 見出し (金の菱 + 罫) ---------- */
.pt-h {
  display: flex; align-items: center; gap: 8px; margin: 6px 2px 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent);
}
.pt-h::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; transform: rotate(45deg); background: linear-gradient(135deg, #f3d58b, #8a6d2e); box-shadow: 0 0 4px rgba(243,213,139,0.5); }
.pt-h::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(201,162,74,0.5), rgba(201,162,74,0)); }

/* ---------- 肖像の札 ---------- */
.pt-port {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; overflow: visible;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--glow, #3a3140) 22%, #120e13) 0%, #0b090c 72%);
  border: 1px solid #4a3d36; border-radius: 3px;
  box-shadow: var(--plate-edge), 0 0 10px color-mix(in srgb, var(--glow, #000) 22%, transparent);
  color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--t-tap) ease-out, box-shadow var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.pt-port.s48 { width: 48px; height: 48px; }
.pt-port.s52 { width: 52px; height: 52px; }
.pt-port.s64 { width: 64px; height: 64px; }
.pt-port-fr { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pt-port-fr canvas { filter: drop-shadow(0 1px 0 #000); }
.pt-port.sel { border-color: var(--accent-hi); box-shadow: 0 0 0 1px rgba(243,213,139,0.55), 0 0 16px rgba(243,213,139,0.32), var(--plate-edge); }
.pt-port.sel::after { /* 選んでいる印: 金の菱 */
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #fff1c4, #c9a24a); box-shadow: 0 0 6px rgba(243,213,139,0.8), 0 0 0 1px #000;
}
.pt-port.dead { filter: grayscale(0.9) brightness(0.62); }
.pt-port.hollow { border-style: dashed; }
.pt-port.hollow .pt-port-fr { filter: grayscale(1) brightness(0.35) contrast(1.4); opacity: 0.75; }
.pt-port.empty { border-style: dashed; border-color: #3a3029; background: rgba(8,6,9,0.6); box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
.pt-port-plus { font-size: 16px; color: #6e6457; }
.pt-port-dead { position: absolute; top: -1px; right: 2px; font-size: 12px; font-weight: 800; color: #e4554f; text-shadow: 0 1px 0 #000, 0 0 6px rgba(228,85,79,0.7); }
.pt-port-hp { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; background: #1a0d0d; border-radius: 1px; overflow: hidden; pointer-events: none; }
.pt-port-hp i { display: block; height: 100%; background: linear-gradient(90deg, #5fbf4a, #9ee07a); }
.pt-port-hp.low i { background: linear-gradient(90deg, #b3241c, #e4554f); animation: ui-pulse 1.2s ease-in-out infinite; }
.pt-port:active:not(.empty) { transform: scale(0.96); }

/* ---------- 砕けた人業の知らせ (1行) ---------- */
.pt-dead {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 2px 4px 2px 10px;
  background: var(--grain), linear-gradient(180deg, #2a1213, #160909); border: 1px solid #7a2a24; border-radius: 3px;
}
.pt-dead-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #f0c9bf; white-space: nowrap; overflow: hidden; }
.pt-dead-mk { flex: 0 0 auto; font-size: 16px; color: #e4554f; text-shadow: 0 0 8px rgba(228,85,79,0.7); }
.pt-dead-tx { overflow: hidden; text-overflow: ellipsis; }
.pt-dead-tx b { color: #ffe0d6; }
.pt-dead-tm { font-variant-numeric: tabular-nums; color: #ffb0a4; font-weight: 700; }
.pt-dead-b { width: auto; flex: 0 0 auto; padding: 4px 8px; font-size: 12.5px; gap: 6px; }

/* =====================================================================
   隊列ストリップ (1列: 前衛3 | 後衛3 | 控え)
   ===================================================================== */
.pt-form {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 6px 8px 5px;
  background: var(--corners), var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge);
}
.pt-fgrp { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pt-fgrp.back { padding-left: 6px; border-left: 1px solid rgba(201,162,74,0.18); }
.pt-fgrp-l { font-size: 10px; font-weight: 700; letter-spacing: 0.32em; line-height: 13px; color: #8a6d2e; padding-left: 2px; }
.pt-fgrp.front .pt-fgrp-l { color: #c9a24a; }
.pt-fgrp-in { display: flex; gap: 4px; }
.pt-slotp { width: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pt-slotp-n { max-width: 50px; font-size: 10px; line-height: 12px; color: #cdbf9f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-slotp-n.dim { color: #5e554c; }
.pt-form:not(.ro) .pt-port:not(.empty) { touch-action: none; }
.pt-port.lifted, .pt-port.lifting { transform: translateY(-3px) scale(1.06); border-color: #f3d58b; box-shadow: 0 0 0 1px #f3d58b, 0 0 22px rgba(243,213,139,0.55), 0 8px 14px rgba(0,0,0,0.7); }
.pt-port.target, .pt-bench.target { animation: pt-target 1.4s ease-in-out infinite; }
.pt-port.over, .pt-bench.over { border-color: #f3d58b !important; box-shadow: 0 0 0 2px #f3d58b, 0 0 20px rgba(243,213,139,0.6) !important; animation: none; }
@keyframes pt-target { 0%, 100% { box-shadow: 0 0 0 1px rgba(201,162,74,0.25), var(--plate-edge); } 50% { box-shadow: 0 0 0 1px rgba(243,213,139,0.75), 0 0 12px rgba(243,213,139,0.35); } }
.pt-bench {
  position: relative; margin-left: auto; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 50px; min-height: 44px; padding: 2px; color: #cdbf9f;
  background: var(--grain), linear-gradient(180deg, #221b20, #120e12); border: 1px solid #4a3d36; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.06), 0 2px 6px rgba(0,0,0,0.6); cursor: pointer;
}
.pt-bench-l { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; padding-left: 0.2em; }
.pt-bench-n { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--accent-hi); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(243,213,139,0.3); }
.pt-bench:active { transform: scale(0.97); }
/* 管理のシート: 人業 (控え) / 魂一覧 / 控えの結社 の3つを横に並べた札。
   顔の列の右に 210px 以上の余りがあれば同じ段で顔の列の高さいっぱいに、足りなければ次の段に全幅で並ぶ (flex-wrap) */
.pt-side { flex: 1 1 210px; margin-left: auto; align-self: stretch; display: flex; flex-direction: row; gap: 5px; min-height: 46px; }
.pt-side .pt-bench { margin-left: 0; flex: 1 1 0; width: auto; min-width: 0; min-height: 46px; padding: 4px 4px; gap: 2px; }
.pt-side .pt-bench-l { font-size: 12.5px; letter-spacing: 0.1em; padding-left: 0.1em; white-space: nowrap; }
.pt-side .pt-bench-n { font-size: 17px; line-height: 1.05; }
.pt-ghost {
  position: fixed; left: 0; top: 0; z-index: 400; width: 48px; height: 48px; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: #120e13; border: 1px solid #f3d58b; border-radius: 3px; opacity: 0.92;
  box-shadow: 0 0 22px rgba(243,213,139,0.5), 0 12px 22px rgba(0,0,0,0.8);
}
body.pt-dragging, body.pt-dragging * { cursor: grabbing !important; user-select: none !important; }
.pt-pickhint {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 4px 0 12px;
  font-size: 12.5px; line-height: 1.5; color: #f3d58b; background: rgba(44,35,24,0.55); border: 1px dashed rgba(243,213,139,0.5); border-radius: 3px;
}
.pt-pickhint-t { flex: 1 1 auto; min-width: 0; }
.pt-pickhint-x { flex: 0 0 auto; min-height: 44px; min-width: 64px; padding: 0 10px; color: var(--ink); background: var(--plate-hi); border: 1px solid #4a3d36; border-radius: 2px; cursor: pointer; font-size: 13px; }

/* =====================================================================
   人業の見出し (2行)
   ===================================================================== */
.pt-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 2px; }
.pt-head-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-head-l1 { display: flex; align-items: center; min-width: 0; height: 24px; }
.pt-head-name {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 17px; font-weight: 800; letter-spacing: 0.06em; color: #f5ecd6; text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 1px 0 #000;
}
.pt-head-edit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -6px -10px -6px; padding: 0; background: none; border: 0; color: #8a6d2e; cursor: pointer; }
.pt-head-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.pt-head-c { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 12px; margin-left: 4px; }
.pt-head-cls { color: var(--accent-hi); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.pt-head-tag { color: var(--ink-dim); font-size: 11px; }
.pt-head-l2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-hbar { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.pt-hbar-k { font-size: 9.5px; font-weight: 700; color: #8f8372; }
.pt-hbar-v { font-size: 11px; font-variant-numeric: tabular-nums; color: #d8ccb3; }
.pt-hbar .ui-bar { height: 5px; }
.pt-head.dead .pt-head-name { color: #b9a9a2; }
.pt-head-join { width: auto; flex: 0 0 auto; }
.pt-rescue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pt-repair-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; max-width: 100%; }
.pt-rescue .ui-btn { width: auto; flex: 0 0 auto; padding: 2px 8px; gap: 5px; font-size: 12.5px; }
.pt-rescue-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 3px; font-size: 12px; color: #e8c3b9; white-space: nowrap; }
.pt-rescue-mk { color: #e4554f; font-size: 14px; }
.pt-rescue-tm { color: #ffb0a4; font-variant-numeric: tabular-nums; font-size: 14px; }

/* ---------- 迷宮: 野営 (呪文・道具) の札 ---------- */
.pt-camp { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pt-camp-l { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; color: #46c08f; }
.pt-camp-in { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; touch-action: pan-x; }
.pt-camp-in::-webkit-scrollbar { display: none; }
.pt-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
  color: #cfeee0; background: var(--grain), linear-gradient(180deg, #14231d, #0b1410); border: 1px solid #2f6a55; border-radius: 3px; cursor: pointer;
}
.pt-chip.item { color: #e6dbc2; background: var(--grain), var(--plate-hi); border-color: #4a3d36; }
.pt-chip.short { opacity: 0.55; }
.pt-chip-c { font-size: 11px; font-weight: 500; color: #8fd6bd; font-variant-numeric: tabular-nums; }
.pt-chip.item .pt-chip-c { color: var(--accent-hi); }
.pt-chip-ic { display: inline-flex; }
.pt-chip-ic canvas { width: 20px; height: 20px; }
.pt-chip:active { transform: scale(0.97); }

/* ---------- 区分 + 最適装備 ---------- */
.pt-segbar { display: flex; align-items: stretch; gap: 6px; }
.pt-seg { flex: 1 1 auto; min-width: 0; padding: 2px; }
.pt-seg .ui-seg-b { letter-spacing: 0.24em; padding-left: 0.24em; }
.pt-auto {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 48px; padding: 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #cdbf9f;
  background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.08), 0 2px 6px rgba(0,0,0,0.6); cursor: pointer;
}
.pt-auto svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pt-auto.hot { color: var(--accent-hi); border-color: #8a6d2e; background: var(--grain), linear-gradient(180deg, #2c2318, #17120c); box-shadow: 0 0 0 1px rgba(201,162,74,0.25), 0 0 14px rgba(201,162,74,0.22); }
.pt-auto .ui-badge { position: absolute; top: -4px; right: -4px; }
.pt-auto:active { transform: scale(0.97); }

/* =====================================================================
   装備の区分: 8部位 (2列×4) + 隊の共有袋 (50枠)
   ===================================================================== */
.pt-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.pt-slot {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 7px;
  width: 100%; min-width: 0; min-height: 56px; padding: 5px 7px 5px 6px; text-align: left; color: var(--ink);
  background: var(--grain), var(--plate); border: 1px solid #2f2628; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.05), 0 1px 4px rgba(0,0,0,0.5); cursor: pointer;
  transition: transform var(--t-tap) ease-out, filter var(--t-tap) ease-out;
}
.pt-slot:active { transform: scale(0.98); filter: brightness(0.92); }
.pt-slot-ic, .pt-cand-ic, .pt-cur-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  background: #0b090c; border: 1px solid var(--edge, #3a302c); border-radius: 2px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.9), 0 0 6px color-mix(in srgb, var(--edge, #000) 30%, transparent);
}
.pt-slot-ic canvas, .pt-cand-ic canvas, .pt-cur-ic canvas { width: 24px; height: 24px; }
.pt-slot-ic.ghost { opacity: 0.28; border-style: dashed; }
.pt-slot-t { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.pt-slot-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; line-height: 1.25; }
.pt-slot-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: #8a6d2e; }
.pt-slot-n { font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-slot-n.dim { color: #5e554c; font-weight: 500; letter-spacing: 0.1em; }
.pt-slot-s { font-size: 10.5px; line-height: 1.3; color: #9a8e78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-up { font-size: 10.5px; font-weight: 700; color: var(--up); text-shadow: 0 0 6px rgba(127,214,138,0.5); white-space: nowrap; }
.pt-slot-cnt { font-size: 10.5px; color: #8f8372; font-variant-numeric: tabular-nums; }
.pt-slot.better { border-color: #3f5a3a; box-shadow: inset 2px 0 0 #7fd68a, 0 1px 4px rgba(0,0,0,0.5); }
.pt-slot.locked { border-color: #6b5426; box-shadow: inset 2px 0 0 #c9a24a, 0 1px 4px rgba(0,0,0,0.5); }
.pt-slot.cursed { border-color: #6a2622; box-shadow: inset 2px 0 0 #e4554f, 0 1px 4px rgba(0,0,0,0.5); }
.pt-slot.empty { background: rgba(10,8,11,0.55); }

.pt-bagbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-left: 2px; }
.pt-bagbar-t { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--accent); white-space: nowrap; }
.pt-bagbar-k { font-weight: 700; letter-spacing: 0.2em; }
.pt-bagbar-t b { color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.pt-bagbar-x { color: #ffd9a0; font-size: 11px; }
.pt-allauto {
  position: relative; flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: #cdbf9f; white-space: nowrap;
  background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-radius: 3px; cursor: pointer;
}
.pt-allauto.hot { color: var(--accent-hi); border-color: #8a6d2e; }
/* 所持の見出しの右: [全員を回復] [パーティの全員を最適装備] */
.pt-bagbar-acts { display: flex; align-items: stretch; justify-content: flex-end; gap: 6px; min-width: 0; flex: 0 1 auto; }
.pt-allheal { flex: 0 0 auto; }
.pt-allheal .nb { display: inline-block; white-space: nowrap; } /* 折る時は「全員を / 回復」で */
.pt-allheal.hot { color: #9fe0a8; border-color: #3f6a44; }
/* 中くらいの幅: 長い札は2行に折って、見出しと1段に収める */
@media (max-width: 519px) {
  .pt-bagbar-acts .pt-allauto { white-space: normal; line-height: 1.25; text-align: center; padding: 4px 10px; }
}
/* 札は区分の中身 (.pt-body: 内側スクロール = 横も切られる) の右端に接するので、赤丸は札の内側の角に留める */
.pt-allauto .ui-badge { position: absolute; top: -5px; right: 0; }
.pt-bag { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.pt-bcell {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; height: 44px; padding: 0;
  background: #0d0a0d; border: 1px solid var(--edge, #3a302c); border-radius: 2px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.9), 0 0 6px color-mix(in srgb, var(--edge, #000) 22%, transparent); cursor: pointer;
}
.pt-bcell.empty { border-style: dashed; border-color: #2a2226; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); cursor: default; }
.pt-bcell canvas { width: 24px; height: 24px; display: block; }
.pt-seal { position: absolute; top: 0; right: 3px; font-size: 12px; font-weight: 800; color: #ffd9a0; text-shadow: 0 0 4px #000, 0 1px 0 #000; }
.pt-seal.curse { font-size: 9.5px; color: #ff8a7a; }
.pt-new { position: absolute; top: 1px; left: 1px; padding: 0 2px; font-size: 7.5px; font-weight: 800; letter-spacing: 0.02em; line-height: 11px; color: #1a0e04; background: linear-gradient(180deg, #ffd27a, #ff9a3a); border-radius: 1px; box-shadow: 0 0 6px rgba(255,140,40,0.8); }
.pt-bup { position: absolute; bottom: 0; right: 3px; font-size: 10px; color: var(--up); text-shadow: 0 0 5px rgba(127,214,138,0.7), 0 1px 0 #000; }
.pt-bcell:active:not(.empty) { transform: scale(0.96); }
.pt-bagwrap { display: flex; flex-direction: column; gap: 8px; }
/* 狭い画面: 所持の札は4列×2段。見出し (所持・最適装備) はその左に縦に積み、高さを1段ぶん詰める */
@media (max-width: 379px) {
  .pt-bagwrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }
  .pt-bagwrap .pt-bagbar { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 4px; }
  .pt-bagwrap .pt-allauto { white-space: normal; line-height: 1.25; text-align: left; padding: 4px 8px; font-size: 12px; }
  .pt-bagwrap .pt-bagbar-acts { justify-content: stretch; gap: 4px; }
  .pt-bagwrap .pt-bagbar-acts .pt-allauto { flex: 1 1 0; min-height: 40px; padding: 3px 6px; font-size: 11px; text-align: center; }
  .pt-bag { grid-template-columns: repeat(4, 44px); gap: 4px; }
}

/* ---------- 最適装備の結果 (シート): 誰が何を装備し、能力がどう変わったか ---------- */
.pt-ae-sheet .ui-sheet-body { text-align: left; }
.pt-ae { display: flex; flex-direction: column; gap: 6px; }
.pt-ae-card { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: var(--grain), var(--plate); border: 1px solid #2f2628; border-radius: 3px; }
.pt-ae-top { display: flex; align-items: center; gap: 8px; }
.pt-ae-top .pt-port { width: 36px; height: 36px; flex: 0 0 auto; }
.pt-ae-tg { margin-left: auto; flex: 0 0 auto; min-height: 32px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-hi); background: rgba(138,109,46,0.18); border: 1px solid var(--accent); border-radius: 3px; cursor: pointer; }
.pt-ae-tg.on { color: #9a8e78; border-color: #4a3d33; background: rgba(0,0,0,0.25); }
.pt-ae-done { margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--up); }
.pt-ae-done:not([hidden]) + .pt-ae-tg { margin-left: 0; }
.pt-ae-card.applied { border-color: rgba(138,109,46,0.7); box-shadow: inset 0 0 0 1px rgba(138,109,46,0.25); }
.pt-ae-n { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-ae-list { display: flex; flex-direction: column; gap: 1px; }
.pt-ae-ln { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: baseline; gap: 6px; font-size: 12.5px; line-height: 1.4; }
.pt-ae-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: #8a6d2e; }
.pt-ae-tx { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.pt-ae-old { color: #7d7262; font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(228,85,79,0.6); }
.pt-ae-new { font-weight: 700; }
.pt-ae-ar { color: var(--accent); }
.pt-ae-none { color: #7d7262; }
.pt-ae-from { font-size: 11px; color: #9a8e78; }
.pt-ae-fx { margin: 3px 0 6px; padding: 5px 7px; border-left: 2px solid #8a6d2e; background: rgba(0,0,0,0.15); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.pt-ae-fxh { color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; }
.pt-ae-fxb + .pt-ae-fxb { margin-top: 4px; }
.pt-ae-fxk { color: #9a8e78; font-size: 10.5px; }
.pt-ae-fxb.before .pt-ae-fxl { color: #9a8e78; }
.pt-ae-fxb.after .pt-ae-fxl { color: var(--ink); }
.pt-ae-st { display: flex; flex-wrap: wrap; gap: 3px 10px; padding-top: 3px; border-top: 1px solid rgba(138,109,46,0.25); font-size: 12px; font-variant-numeric: tabular-nums; }
.pt-ae-s { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink); white-space: nowrap; }
.pt-ae-sk { font-size: 10.5px; font-weight: 700; color: #9a8e78; }
.pt-ae-sd { font-weight: 800; }
.pt-ae-s.up .pt-ae-sd { color: var(--up); }
.pt-ae-s.dn .pt-ae-sd { color: var(--down); }
.pt-ae-s.eq { color: var(--ink-faint, #7d7262); }

/* ---------- 装備候補 (シート) ---------- */
.pt-cand-sheet .ui-sheet-body, .pt-pick-sheet .ui-sheet-body, .pt-res-sheet .ui-sheet-body, .pt-item-sheet .ui-sheet-body,
.pt-sheet .ui-sheet-body, .sp-pick-sheet .ui-sheet-body { text-align: left; }
.pt-cand-sheet .ui-sheet-body, .sp-pick-sheet .ui-sheet-body, .pt-pick-sheet .ui-sheet-body { padding-bottom: 22px; }
/* 宿し技をえらぶ: 技の名の横に戦闘のスキル一覧と同じ札 (種別・属性・全体) */
.sp-pick-tags { margin-left: 8px; }
.sp-pick-tags .ui-tag { font-size: 11px; }
.sp-pick-owned { display: block; margin-top: 4px; color: #a6d9f2; font-size: 12px; font-weight: 500; white-space: normal; }
.ui-sheet[class*="pt-"] .ui-btn:focus:not(:focus-visible), .ui-sheet[class*="sp-"] .ui-btn:focus:not(:focus-visible) { outline: none; }
.ui-sheet[class*="pt-"] :focus-visible, .ui-sheet[class*="sp-"] :focus-visible, .pt-root :focus-visible { outline: 2px solid rgba(243,213,139,0.7); outline-offset: 2px; }
.pt-cur {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px 6px 10px; margin: 2px 0 10px;
  background: var(--grain), linear-gradient(180deg, rgba(44,35,24,0.6), rgba(20,16,12,0.6)); border: 1px solid #5a4724; border-radius: 3px;
}
.pt-cur.empty { border-color: #33292a; background: rgba(10,8,11,0.5); }
button.pt-cur-ic { width: 44px; height: 44px; cursor: pointer; }
.pt-cur-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-cur-k { font-size: 10.5px; letter-spacing: 0.2em; color: #8a6d2e; }
.pt-cur-n { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-cur-n.dim { color: #6e6457; font-weight: 500; }
.pt-cur-s { font-size: 11px; color: #9a8e78; }
.pt-cur .ui-btn { width: auto; flex: 0 0 auto; }
/* いまの装備 (図鑑と同じく 絵・性能・特殊効果・説明) */
.pt-cur.rich { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
.pt-cur-top { display: flex; align-items: center; gap: 12px; }
.pt-cur-art {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; padding: 0; cursor: pointer;
  background: radial-gradient(circle, color-mix(in srgb, var(--edge, #c9a24a) 22%, transparent), rgba(0,0,0,0) 68%), #0b090c;
  border: 1px solid var(--edge, #3a302c); border-radius: 3px;
}
.pt-cur-art canvas { width: 72px; height: 72px; image-rendering: pixelated; }
.pt-cur.rich .pt-cur-n { white-space: normal; font-size: 15px; line-height: 1.35; }
.pt-cur-c { font-size: 11.5px; color: var(--ink-dim); }
.pt-cur.rich .pt-cur-s { font-size: 12px; color: #e6dbc2; font-variant-numeric: tabular-nums; }
.pt-cur-fx, .wpc-is-fx, .pl-detail-fx {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; text-align: left;
  background: rgba(40,30,12,0.45); border: 1px solid #6a5226; border-radius: 2px;
}
.pt-cur-fxh, .wpc-is-fxh, .pl-detail-fxh { font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; color: var(--accent, #c9a24a); }
.pt-cur-fxl, .wpc-is-fxl, .pl-detail-fxl { font-size: 12.5px; line-height: 1.6; color: #f0e2bf; }
.wpc-is-fx { margin: 0 0 10px; }
.pt-cur-desc { font-size: 12px; line-height: 1.65; color: #a3967f; font-style: italic; }
.pt-cur-foot { display: flex; justify-content: flex-end; gap: 8px; }
.pt-cand-fx { font-size: 11px; color: #e8c779; }
.pt-list { display: flex; flex-direction: column; gap: 6px; }
/* 魂融合: 素材が多くても行を縮めず、説明と一覧を本文内でスクロールする。 */
.sp-fuse-sheet .pt-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.sp-fuse-sheet .ui-row { min-width: 0; min-height: 64px; }
.sp-fuse-sheet .ui-row-title { white-space: normal; overflow: visible; line-height: 1.6; }
.sp-fuse-sheet .ui-row-sub { line-height: 1.6; }
.sp-fuse-sheet .ui-sheet-line, .sp-fuse-sheet .pt-note { color: #cdbf9f; }
.sp-fuse-sheet .ui-row:has(.sp-lock-btn) { flex-wrap: wrap; }
.sp-fuse-sheet .ui-row:has(.sp-lock-btn) .ui-row-r { margin-left: auto; }
.pt-cand {
  display: flex; align-items: stretch; gap: 0; min-height: 60px; color: var(--ink);
  background: var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge);
}
.pt-cand > .pt-cand-ic { flex: 0 0 auto; align-self: center; width: 46px; height: 46px; margin: 0 0 0 7px; cursor: pointer; }
.pt-cand-main { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 8px; padding: 7px 10px; text-align: left; color: var(--ink); background: none; border: 0; cursor: pointer; }
.pt-cand.up { border-color: #3f5a3a; box-shadow: inset 2px 0 0 #7fd68a, var(--plate-edge); }
.pt-cand.down { opacity: 0.8; }
.pt-cand.full .pt-cand-main { opacity: 0.75; }
.pt-cand-main:active { filter: brightness(0.9); }
.pt-cand-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-cand-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pt-cand-n { min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 仲間が装備している品: 名と「（ロック中）」を切らずに折り返す (持ち主の札は右へ、狭ければ次の行へ) */
.pt-cand.worn .pt-cand-top { flex-wrap: wrap; row-gap: 2px; }
.pt-cand.worn .pt-cand-n { white-space: normal; overflow: visible; }
.pt-own { flex: 0 0 auto; margin-left: auto; padding: 0 6px; font-size: 10.5px; line-height: 17px; color: #cdbf9f; background: rgba(0,0,0,0.35); border: 1px solid #3a3029; border-radius: 2px; white-space: nowrap; }
.pt-own.me { color: #8f8372; }
.pt-own.res { color: #b4a2d8; border-color: #3d3352; }
.pt-own.worn { color: #e0c98a; border-color: #5a4a2a; }
.pt-cand-w { font-size: 11px; color: #e6a96b; }
.pt-cand-g { font-size: 16px; font-weight: 800; text-align: center; }
.pt-cand-g.up { color: var(--up); text-shadow: 0 0 8px rgba(127,214,138,0.6); }
.pt-cand-g.dn { color: var(--down); }
.pt-cand-g.eq { color: #6e6457; }
.pt-cand .ui-delta { font-size: 12px; }
.ui-row.t-dim { opacity: 0.62; }
.ui-row.dim { opacity: 0.5; }
.pt-mini { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #0b090c; border: 1px solid #3a3029; border-radius: 2px; }
.pt-orb { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow, #c9a24a) 26%, #0b090c), #0b090c 70%); border: 1px solid color-mix(in srgb, var(--glow, #c9a24a) 50%, #2a2226); }
.pt-pick-hp { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-dim); }
.pt-pick-hp .ui-bar { width: 64px; height: 4px; }

/* =====================================================================
   品 → 人業を選ぶ (UI.equipChooser / equipChooserEl)
   ===================================================================== */
.pt-ch { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pt-ch-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; }
.pt-ch-t { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; color: var(--accent-hi); }
.pt-ch-s { font-size: 10.5px; color: #8f8372; }
.pt-ch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; padding-top: 4px; }
.pt-ch-sep { grid-column: 1 / -1; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3em; color: #8a6d2e; border-bottom: 1px solid rgba(201,162,74,0.2); }
.pt-chc {
  position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 58px; padding: 6px 6px 6px 5px;
  text-align: left; color: var(--ink);
  background: var(--grain), var(--plate); border: 1px solid #3a3029; border-radius: 3px; box-shadow: var(--plate-edge); cursor: pointer;
  transition: transform var(--t-tap) ease-out, filter var(--t-tap) ease-out;
}
.pt-chc:active { transform: scale(0.97); }
.pt-chc-p { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #0b090c; border: 1px solid #3a3029; border-radius: 2px; }
.pt-chc-dead { position: absolute; top: -2px; right: 1px; font-size: 11px; color: #e4554f; text-shadow: 0 1px 0 #000; }
.pt-chc-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-chc-n { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-chc-d { display: flex; flex-direction: column; gap: 0; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.pt-chc-d .up { color: var(--up); } .pt-chc-d .dn { color: var(--down); } .pt-chc-d .eq { color: var(--ink-faint); font-weight: 500; }
/* いまの装備 (外れる品) と特殊効果の増減 (失う効果は送らずに常に見せる) */
.pt-chc-cur { display: flex; align-items: baseline; gap: 3px; min-width: 0; font-size: 10px; line-height: 1.3; overflow: hidden; white-space: nowrap; }
.pt-chc-cur-lab { flex: 0 0 auto; color: #8f8372; }
.pt-chc-cur-none { color: var(--ink-faint); }
.pt-chc-cur-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: none; }
.pt-chc-fx { display: flex; flex-wrap: wrap; gap: 0 5px; font-size: 10.5px; font-weight: 800; line-height: 1.3; }
.pt-chc-fx > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-chc-fx .up, .pt-chl-fx .up { color: var(--up); } .pt-chc-fx .dn, .pt-chl-fx .dn { color: var(--down); }
/* 変化が2行を超える札: 頁を重ねて同じ高さのまま送る (右下の点 = いまの頁) */
.pt-chc-pg { display: flex; flex-direction: column; }
.pt-chc-d.multi { display: grid; }
.pt-chc-d.multi .pt-chc-pg { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.28s ease-out, visibility 0s linear 0.28s; }
.pt-chc-d.multi .pt-chc-pg.on { opacity: 1; visibility: visible; transition: opacity 0.28s ease-out, visibility 0s; }
.pt-chc-dots { position: absolute; right: 5px; bottom: 4px; display: flex; gap: 3px; pointer-events: none; }
.pt-chc-dots i { width: 4px; height: 4px; transform: rotate(45deg); background: #4a3d36; }
.pt-chc-dots i.on { background: #c9a24a; box-shadow: 0 0 4px rgba(243,213,139,0.6); }
.pt-ch-all {
  flex: 0 0 auto; padding: 2px 8px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5;
  color: #f3d58b; background: #1a1418; border: 1px solid #6a5426; border-radius: 2px; cursor: pointer;
}
.pt-ch-all:active { transform: scale(0.97); }
/* 「すべての変化」シート: 1人1行、変化は折り返して全部並べる */
.pt-chl { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pt-chl-s { font-size: 10.5px; color: #8f8372; padding: 0 2px; }
.pt-chl-r {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px 6px 6px; font: inherit; text-align: left; color: var(--ink);
  background: var(--grain), var(--plate); border: 1px solid #3a3029; border-radius: 3px; box-shadow: var(--plate-edge); cursor: pointer;
}
.pt-chl-r:active { transform: scale(0.98); }
.pt-chl-r.best { border-color: #c9a24a; box-shadow: 0 0 0 1px rgba(243,213,139,0.45), var(--plate-edge); }
.pt-chl-t { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.pt-chl-n { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.pt-chl-best { padding: 0 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; line-height: 14px; border-radius: 2px; color: #1a0e04; background: linear-gradient(180deg, #f3d58b, #c9a24a); }
.pt-chl-d { display: flex; flex-wrap: wrap; gap: 1px 10px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.35; }
.pt-chl-d .up { color: var(--up); } .pt-chl-d .dn { color: var(--down); } .pt-chl-d .eq { color: var(--ink-faint); font-weight: 500; }
.pt-chl-new { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 8px; font-size: 12px; background: #120e11; border: 1px solid #4a3d36; border-radius: 3px; }
.pt-chl-new-lab, .pt-chl-cur-l-lab, .pt-chl-fx-lab { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #8f8372; }
.pt-chl-new-n { font-weight: 700; }
.pt-chl-new-fx { flex: 1 1 100%; font-size: 11px; color: #e6c98b; }
.pt-chl-cur { display: flex; flex-direction: column; gap: 1px; }
.pt-chl-cur-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 11px; line-height: 1.4; }
.pt-chl-cur-l-n { font-weight: 700; }
.pt-chl-cur-l-none { color: var(--ink-faint); }
.pt-chl-cur-fx { font-size: 10.5px; color: #e6c98b; }
.pt-chl-cur-fx.none { color: var(--ink-faint); }
.pt-chl-fx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; font-size: 11px; font-weight: 800; line-height: 1.35; }
.pt-chc-why { font-size: 11px; font-weight: 700; color: #e6a96b; }
.pt-chc.ng { opacity: 0.55; filter: grayscale(0.7); }
.pt-chc.best { border-color: #c9a24a; box-shadow: 0 0 0 1px rgba(243,213,139,0.45), 0 0 14px rgba(243,213,139,0.25), var(--plate-edge); }
.pt-chc-best, .pt-chc-own {
  position: absolute; top: -7px; right: 4px; padding: 0 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; line-height: 14px; border-radius: 2px;
}
.pt-chc-best { color: #1a0e04; background: linear-gradient(180deg, #f3d58b, #c9a24a); box-shadow: 0 0 8px rgba(243,213,139,0.6); }
.pt-chc-own { color: #cdbf9f; background: #1a1418; border: 1px solid #4a3d36; }

/* =====================================================================
   能力の区分
   ===================================================================== */
.pt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.pt-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 54px; padding: 4px; color: var(--ink);
  background: var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge); cursor: pointer;
}
.pt-stat.on { border-color: #8a6d2e; box-shadow: 0 0 0 1px rgba(201,162,74,0.3), 0 0 12px rgba(201,162,74,0.18); }
.pt-stat-k { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #8a6d2e; line-height: 1.2; }
.pt-stat-v { max-width: 100%; overflow-wrap: anywhere; font-size: 19px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: #f5ecd6; text-shadow: 0 1px 0 #000; }
.pt-stat-n { font-size: 9.5px; color: #8f8372; line-height: 1.2; }
.pt-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(160px, calc((100% - 20px) / 3))), 1fr)); gap: 3px 10px; min-height: 64px; padding: 8px 10px; background: rgba(10,8,11,0.5); border: 1px solid #2a2226; border-radius: 2px; align-content: center; }
.pt-info.x { display: block; border-left: 2px solid var(--accent); }
.pt-statx-h { font-size: 12.5px; font-weight: 700; color: var(--accent-hi); margin-bottom: 2px; }
.pt-statx-d { font-size: 12px; line-height: 1.55; color: #cdbf9f; }
.pt-statx-v { font-size: 11.5px; margin-top: 3px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.pt-fact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; padding: 3px 0; font-size: 12px; min-width: 0; }
.pt-fact-k { flex: 0 0 auto; white-space: nowrap; color: #8f8372; font-size: 11px; }
.pt-fact-v { margin-left: auto; max-width: 100%; min-width: 0; text-align: right; overflow-wrap: anywhere; color: #e6dbc2; font-weight: 700; font-variant-numeric: tabular-nums; }
.pt-stat-section { grid-column: 1 / -1; margin-top: 10px; margin-bottom: 3px; color: var(--ink-dim); font-size: 11px; font-weight: 700; }
.pt-fact.cap .pt-fact-v { color: #ffd85a; }
.pt-fact.bad .pt-fact-v { color: #ff8a7a; }
/* 図鑑の抵抗値: 体質で効きやすい (緑) / やや効きやすい / 効きにくい (橙) / 効かない (暗い) */
.pt-fact.res-weak .pt-fact-v { color: #8fe08a; }
.pt-fact.res-soft .pt-fact-v { color: #c4dca0; }
.pt-fact.res-strong .pt-fact-v { color: #e8a660; }
.pt-fact.res-imm .pt-fact-v { color: #8a7f74; }
.pt-chiprow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pt-chiprow-l { flex: 0 0 26px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: #8a6d2e; }
.pt-chiprow-in { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; padding: 1px 0; }
.pt-chiprow-in::-webkit-scrollbar { display: none; }
.pt-skill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: #e6dbc2; background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-radius: 2px; cursor: pointer;
}
.pt-skill-c { font-size: 11px; font-weight: 500; color: #8fb6ff; }
.pt-skill-tags .ui-tag { font-size: 9px; }
.pt-skill.pas { font-weight: 500; font-size: 12px; color: #cdbf9f; background: rgba(10,8,11,0.5); border-color: #33292a; }
.pt-skill.off { opacity: 0.5; border-style: dashed; }
.pt-skill-off { font-size: 9.5px; font-weight: 500; color: #a99a80; border: 1px solid #4a3d36; padding: 0 3px; border-radius: 2px; }
.pt-chiprow-b {
  flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: #e7c873; background: rgba(10,8,11,0.6); border: 1px solid #7a5f2a; border-radius: 2px; cursor: pointer;
}
/* 技の整理: 技名は上段、切り替えと並べ替えは下段。狭い画面でも名前を読める。 */
.pt-skm { display: flex; flex-direction: column; gap: 4px; }
.pt-skm-sum { font-size: 11.5px; color: #a99a80; padding: 0 2px 2px; }
.pt-skm-row { display: grid; grid-template-columns: minmax(64px, 1fr) minmax(64px, 1fr) 44px 44px; gap: 4px; min-width: 0; padding: 6px 0; }
.pt-skm-settings .pt-skm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-skm-tg {
  flex: 0 0 64px; min-height: 44px; font-size: 12px; font-weight: 700; border-radius: 2px; cursor: pointer;
  color: #8f8372; background: rgba(10,8,11,0.55); border: 1px dashed #4a3d36;
}
.pt-skm-tg.on { color: #10161a; background: linear-gradient(#e7c873, #b8912f); border: 1px solid #e7c873; }
.pt-skm-n {
  grid-column: 1 / -1; grid-row: 1; min-width: 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; text-align: left;
  font-size: 13px; font-weight: 700; color: #e6dbc2; background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-radius: 2px; cursor: pointer;
}
.pt-skm-nm { flex: 1 0 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.pt-skm-n .pt-skill-c { margin-left: auto; flex: 0 0 auto; }
.pt-skm-n .pt-skill-c.two { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; }
.pt-skill-ct { font-size: 9.5px; color: #7f9fd6; }
.pt-skm-n .pt-skill-tags { flex: 0 0 auto; }
.pt-skm-row.off .pt-skm-n { opacity: 0.45; border-style: dashed; }
.pt-skm-mv {
  flex: 0 0 44px; min-height: 44px; font-size: 14px; color: #e7c873; background: rgba(10,8,11,0.55); border: 1px solid #4a3d36; border-radius: 2px; cursor: pointer;
}
.pt-skm-mv:disabled { opacity: 0.25; cursor: default; }
/* 技の整理の「オート」札 (オン = 青緑。出さない技・迷宮の技は押せない) */
.pt-skm-tg.pt-skm-auto { flex-basis: 56px; }
.pt-skm-tg.pt-skm-auto.on { color: #0c1716; background: linear-gradient(#8fd9cc, #3f9c8e); border: 1px solid #8fd9cc; }
.pt-skm-tg.pt-skm-auto.na { opacity: 0.3; cursor: default; }
@media (max-width: 400px) {
  .pt-skm-tg { flex-basis: 54px; font-size: 11.5px; }
  .pt-skm-tg.pt-skm-auto { flex-basis: 50px; }
  .pt-skm-mv { flex-basis: 38px; }
}
/* 作戦 (能力の段の1行 / 作戦のシート) */
.pt-tactic {
  flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 10px; text-align: left;
  color: #e6dbc2; background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-left: 3px solid #3f9c8e; border-radius: 2px; cursor: pointer;
}
.pt-tactic-n { font-size: 13px; font-weight: 700; color: #8fd9cc; }
.pt-tactic-d { font-size: 11px; color: #a99a80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pt-tac { display: flex; flex-direction: column; gap: 6px; }
.pt-tac-b {
  display: flex; flex-direction: column; gap: 3px; min-height: 52px; padding: 8px 12px; text-align: left; cursor: pointer;
  color: #e6dbc2; background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-radius: 2px;
}
.pt-tac-b.on { border-color: #8fd9cc; box-shadow: inset 3px 0 0 #3f9c8e, 0 0 0 1px rgba(143,217,204,0.25); }
.pt-tac-n { font-size: 14px; font-weight: 700; color: #e7c873; }
.pt-tac-b.on .pt-tac-n { color: #8fd9cc; }
.pt-tac-b.on .pt-tac-n::after { content: "　― いまの命令"; font-size: 11px; font-weight: 500; color: #8fd9cc; }
.pt-tac-d { font-size: 12px; line-height: 1.5; color: #cdbf9f; }
.pt-tac-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.pt-tac-dn { font-size: 14px; font-weight: 700; color: #e6dbc2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tac-who .pt-tac-n { font-size: 12.5px; color: #8fd9cc; flex: 0 0 auto; }
.sp-head-link { cursor: pointer; border-radius: 8px; }
.sp-head-link:active { background: rgba(255,255,255,.04); }

/* =====================================================================
   控え・仕立て (シート。4体ずつの頁)
   ===================================================================== */
.pt-res { display: flex; flex-direction: column; gap: 6px; }
.pt-res-none { font-size: 12.5px; color: var(--ink-dim); text-align: center; padding: 10px; }
.pt-res-row { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge); }
.pt-res-top { display: flex; align-items: center; gap: 10px; }
.pt-res-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-res-n { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-res-c { font-size: 12px; color: var(--accent-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-res-s { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.pt-res-tm { color: #ffb0a4; }
.pt-res-look { width: auto; flex: 0 0 auto; }
.pt-res-sw { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pt-res-swl { flex: 1 0 100%; width: auto; text-align: left; font-size: 11px; letter-spacing: 0.08em; color: #a08a5e; }
.pt-swap::after { content: "⇄"; position: absolute; right: -2px; bottom: -3px; font-size: 10px; color: #f3d58b; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.pt-res-join {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 6px;
  color: #cdbf9f; background: rgba(8,6,9,0.6); border: 1px dashed #5a4a3a; border-radius: 3px; cursor: pointer; font-family: var(--font);
}
.pt-res-join span:first-child { font-size: 15px; line-height: 1; color: var(--accent-hi); }
.pt-res-join-l { font-size: 10.5px; letter-spacing: 0.1em; }
.pt-res-row.dead .pt-res-n { color: #b9a9a2; }
.pt-res-sw .ui-btn { width: auto; }
.pt-res-sheet .pt-note { margin-top: 6px; }

/* ---------- 名前の入力 ---------- */
.pt-name { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; text-align: left; }
.pt-name-d { font-size: 12.5px; color: var(--ink-dim); text-align: center; }
.pt-name-row { display: flex; gap: 8px; }
.pt-name-in {
  flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 14px;
  font-family: var(--font); font-size: 18px; font-weight: 700; letter-spacing: 0.1em; color: #f5ecd6;
  background: #0b090c; border: 1px solid #8a6d2e; border-radius: 3px; box-shadow: inset 0 0 10px rgba(0,0,0,0.9), 0 0 0 1px rgba(201,162,74,0.2); outline: none;
}
.pt-name-in:focus { border-color: #f3d58b; box-shadow: inset 0 0 10px rgba(0,0,0,0.9), 0 0 0 2px rgba(243,213,139,0.3); }
.pt-name-rnd { flex: 0 0 auto; min-width: 72px; min-height: 50px; padding: 0 10px; font-family: var(--font); font-size: 13px; font-weight: 700; color: #cdbf9f; background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-radius: 3px; cursor: pointer; }

/* ---------- 空 (人業がいない) ---------- */
.pt-empty { display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding: 22px 16px 16px; text-align: center; background: var(--corners), var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; }
.pt-empty-t { font-size: 18px; font-weight: 800; letter-spacing: 0.2em; color: var(--accent-hi); }
.pt-empty-s { font-size: 13px; line-height: 1.7; color: #b2a68f; }

/* ---------- 品の画面 ---------- */
.pt-item { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pt-item-top { display: flex; align-items: center; gap: 14px; }
.pt-item-art { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; background: radial-gradient(circle, color-mix(in srgb, var(--edge, #c9a24a) 22%, transparent), rgba(0,0,0,0) 68%), #0b090c; border: 1px solid var(--edge, #3a302c); border-radius: 3px; }
.pt-item-art canvas { width: 84px; height: 84px; }
.pt-item-top.compact { gap: 12px; }
.pt-item-top.compact .pt-item-art { width: 60px; height: 60px; }
.pt-item-top.compact .pt-item-art canvas { width: 48px; height: 48px; }
.pt-item-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-item-n { font-size: 17px; font-weight: 800; line-height: 1.35; }
.pt-item-c { font-size: 12px; color: var(--ink-dim); }
.pt-item-s { font-size: 12.5px; color: #e6dbc2; font-variant-numeric: tabular-nums; }
.pt-item-lines { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: rgba(10,8,11,0.5); border: 1px solid #2a2226; border-radius: 2px; }
.pt-item-l { font-size: 12.5px; line-height: 1.55; color: #d8ccb3; }
.pt-item-desc { font-size: 12px; line-height: 1.65; color: #a3967f; font-style: italic; }
.pt-item-sheet .ui-sheet-foot { grid-template-columns: 1fr 1fr; }
.pt-item-sheet .ui-sheet-foot .ui-btn.k-primary { grid-column: 1 / -1; }
.pt-item-sheet .ui-sheet-foot .ui-btn { min-height: 46px; font-size: 14px; }

/* ---------- 迷宮の隊シート (全高) ---------- */
.ui-sheet.pt-sheet { height: 94vh; height: 94dvh; max-height: 94dvh; }
.ui-sheet.pt-sheet .ui-sheet-body { padding: 0 12px 8px; }
.ui-sheet.pt-sheet .ui-sheet-foot { padding: 8px 16px 10px; }
.ui-sheet.pt-sheet .ui-sheet-foot .ui-btn { min-height: 46px; }
.ui-sheet.pt-sheet .ui-sheet-banner { margin-bottom: 2px; }

/* =====================================================================
   魂の区分 (soulpanel.js)
   ===================================================================== */
.sp-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 4px 14px;
  background:
    var(--corners), var(--grain),
    radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--glow, #c9a24a) 14%, transparent), rgba(0,0,0,0) 60%),
    var(--plate);
  border: 1px solid #3a3029; border-radius: 3px; box-shadow: var(--plate-edge), inset 3px 0 0 color-mix(in srgb, var(--glow, #c9a24a) 70%, #000);
}
.sp-card.empty { align-items: stretch; text-align: center; box-shadow: var(--plate-edge); padding-bottom: 12px; }
.sp-empty-t { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent-hi); }
.sp-empty-s { font-size: 12.5px; line-height: 1.65; color: #b2a68f; }
.sp-head { display: flex; align-items: center; gap: 10px; }
.sp-orb {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--glow, #c9a24a) 30%, #0b090c) 0%, #0b090c 70%);
  border: 1px solid color-mix(in srgb, var(--glow, #c9a24a) 55%, #2a2226); border-radius: 50%;
  box-shadow: 0 0 14px color-mix(in srgb, var(--glow, #c9a24a) 35%, transparent), inset 0 0 10px rgba(0,0,0,0.8);
}
.pt-list .sp-orb, .sp-srow .sp-orb { width: 44px; height: 44px; }
.sp-tile .sp-orb { width: 32px; height: 32px; }
.sp-head-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-name { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: 0.06em; text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 1px 0 #000; white-space: nowrap; }
.sp-card-k { font-size: 10px; font-weight: 500; letter-spacing: 0.24em; color: #8a6d2e; text-shadow: none; }
.sp-meta { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.sp-rank { padding: 0 5px; font-size: 10.5px; font-weight: 700; line-height: 17px; color: #1a0e04; background: linear-gradient(180deg, #f3d58b, #c9a24a); border-radius: 2px; }
.sp-title { color: #e6dbc2; overflow: hidden; text-overflow: ellipsis; }
.sp-rar { font-size: 10px; color: #8f8372; letter-spacing: 0.08em; }
.sp-rar.r-rare { color: #7fb6ff; } .sp-rar.r-epic { color: #c08cff; } .sp-rar.r-legend { color: #ffb070; }
.sp-level-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.sp-level-row > .ui-btn { flex: 0 0 auto; margin-left: auto; min-height: 44px; }
.sp-level-row > .sp-tile { flex: 0 0 auto; min-height: 44px; }
.sp-lv-n { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
.sp-lv-k { font-size: 11px; color: #8f8372; }
.sp-lv-n b { font-size: 26px; line-height: 1; font-weight: 800; color: #f5ecd6; text-shadow: 0 0 12px color-mix(in srgb, var(--glow, #c9a24a) 50%, transparent), 0 1px 0 #000; }
.sp-lv-cap { font-size: 12px; color: #8f8372; }
.sp-prog { display: flex; align-items: center; gap: 10px; }
.sp-prog .ui-bar { flex: 1 1 auto; height: 6px; }
.sp-prog-v { flex: 0 0 auto; font-size: 11px; color: #9fd4f5; font-variant-numeric: tabular-nums; }
.sp-prog-v.cap { color: var(--accent-hi); letter-spacing: 0.2em; }
.sp-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.sp-acts .ui-btn { min-width: 0; min-height: 50px; padding: 4px; gap: 4px; font-size: 12px; }
.sp-acts .ui-btn:only-child { grid-column: 1 / -1; }
.sp-short { align-self: center; font-size: 11.5px; line-height: 1.5; color: #b2a68f; }
.sp-note { font-size: 12px; line-height: 1.55; color: #b2a68f; }
.sp-next { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 44px; border-top: 1px solid rgba(201,162,74,0.14); padding-top: 2px; }
.sp-next-sk, .sp-next-rank { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 12px; background: none; border: 0; padding: 0; color: inherit; font-family: var(--font); }
.sp-next-sk { cursor: pointer; }
.sp-next-k { color: #8f8372; font-size: 10.5px; letter-spacing: 0.08em; }
.sp-next-v { color: #e6dbc2; font-weight: 700; }
.sp-next-sk .sp-next-v { text-decoration: underline; text-decoration-color: rgba(201,162,74,0.45); text-underline-offset: 3px; }
.sp-ember-b { width: auto; margin-left: auto; padding: 2px 8px; gap: 6px; font-size: 12.5px; }
.sp-ember-b .ui-btn-s { font-size: 10px; }
.sp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-row2 > :only-child { grid-column: 1 / -1; }
.sp-btn {
  display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 52px; padding: 4px 10px 4px 6px; text-align: left; color: var(--ink);
  background: var(--grain), var(--plate); border: 1px solid #3a3029; border-radius: 3px; box-shadow: var(--plate-edge); cursor: pointer;
}
.sp-btn:active:not(:disabled) { transform: scale(0.98); }
.sp-btn:disabled { cursor: default; }
.sp-btn-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-btn-l { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.sp-btn-s { font-size: 10.5px; color: #9a8e78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-fuse { padding-left: 12px; }
.sp-fuse.hot { border-color: #8a6d2e; box-shadow: 0 0 0 1px rgba(201,162,74,0.25), 0 0 12px rgba(201,162,74,0.15), var(--plate-edge); }
.sp-fuse.hot .sp-btn-l { color: var(--accent-hi); }
.sp-fuse.locked { opacity: 0.6; }
.sp-ic { display: inline-flex; flex: 0 0 auto; width: 32px; height: 32px; align-items: center; justify-content: center; color: var(--accent); }
.sp-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(201,162,74,0.4)); }
.sp-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* サブ魂1・2を2列で並べる。1つだけなら横いっぱいに */
.sp-more > :only-child { grid-column: 1 / -1; }
.sp-tile {
  position: relative; display: flex; align-items: stretch; min-width: 0; min-height: 54px;
  background: var(--grain), radial-gradient(80% 80% at 0% 50%, color-mix(in srgb, var(--glow, #3a3140) 12%, transparent), rgba(0,0,0,0) 70%), var(--plate);
  border: 1px solid #3a3029; border-radius: 3px; box-shadow: var(--plate-edge);
}
.sp-tile.locked, .sp-tile.empty { background: rgba(8,6,9,0.5); border-style: dashed; box-shadow: none; }
.sp-tile-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 10px; text-align: left; color: var(--ink); background: none; border: 0; min-height: 52px; }
button.sp-tile-main { cursor: pointer; }
.sp-tile-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: #8a6d2e; white-space: nowrap; }
.sp-tile-s { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #b2a68f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tile.locked .sp-tile-s { color: #7a7066; }
.sp-tile-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-tile-tx { min-width: 0; display: flex; flex-direction: column; }
.sp-tile-n { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* サブ魂の札: 借りる数が違っても見出しの高さをそろえる */
.sp-sub .sp-tile-main { justify-content: flex-start; }
.sp-sub .sp-tile-main > :last-child { margin-bottom: auto; }
.sp-tile-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.sp-tile-cnt { font-size: 10.5px; color: #8f8370; white-space: nowrap; }
/* 借りている技・パッシブ: 1つ1行。名前は途中で切らず、長ければ文節で折る。技 = 金・パッシブ = 紫 */
.sp-borrow { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; min-width: 0; }
.sp-bw { position: relative; padding-left: 10px; font-size: 11.5px; line-height: 1.35; color: #e0cf9e; white-space: normal; }
.sp-bw::before { content: ""; position: absolute; left: 1px; top: 0.5em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--accent, #c9a24a); }
.sp-bw.pas { color: #cdb8ec; }
.sp-bw.pas::before { background: #a98bd8; border-radius: 50%; transform: none; }
.sp-tile-sk { flex: 0 0 44px; min-height: 44px; color: var(--accent-hi); font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.25); border: 0; border-left: 1px solid #3a3029; cursor: pointer; }
.sp-lock-ic { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: #8a6d2e; stroke-width: 1.8; stroke-linecap: round; }
.sp-order-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sp-order-seats { font-size: 13px; font-weight: 700; color: var(--accent-hi); }
.sp-order-on { font-size: 12px; color: #9ee07a; margin-bottom: 6px; }
.sp-orow .ui-row-title { white-space: normal; }
.sp-orow .ui-row-sub { line-height: 1.5; }
.sp-orow.seated { border-color: #5a4724; box-shadow: inset 3px 0 0 #c9a24a, var(--plate-edge); }
.sp-orow.redundant { opacity: 0.7; }
.sp-orow .ui-row-r .ui-btn { width: auto; }

/* ---------- 魂を宿す (シート) ---------- */
.sp-plist { gap: 6px; }
.sp-sort { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ink-dim); font-size: 13px; }
.sp-sort-select { flex: 1; min-width: 0; min-height: var(--hit); padding: 6px 10px; font: inherit; color: var(--ink); background: var(--plate); border: 1px solid #665139; border-radius: 3px; }
.sp-srow { display: flex; align-items: stretch; gap: 6px; background: var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge); }
.sp-srow.cur { border-color: color-mix(in srgb, var(--glow, #c9a24a) 60%, #3a3029); box-shadow: inset 3px 0 0 var(--glow, #c9a24a), var(--plate-edge); }
.sp-srow.worn-main { --worn-color: #ebbd5b; --worn-tint: #4b371b; }
.sp-srow.worn-sub { --worn-color: #71c4ed; --worn-tint: #1b3b50; }
.sp-srow.worn-main, .sp-srow.worn-sub { border-color: var(--worn-color); background: var(--grain), linear-gradient(90deg, var(--worn-tint), transparent), var(--plate); box-shadow: inset 5px 0 0 var(--worn-color), var(--plate-edge); }
.sp-srow.taken .sp-srow-main { opacity: 0.85; }
.sp-srow-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px; text-align: left; color: var(--ink); font-family: var(--font); background: none; border: 0; cursor: pointer; }
.sp-srow-main:disabled { cursor: default; }
.sp-srow-main:active:not(:disabled) { filter: brightness(0.9); }
.sp-srow-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-srow-n { font-size: 14.5px; font-weight: 800; letter-spacing: 0.04em; }
.sp-srow-m { font-size: 11.5px; color: var(--ink-dim); }
.sp-srow-tag { font-size: 11px; color: #cdbf9f; }
.sp-srow-tag.cur { color: var(--accent-hi); }
.sp-srow-tag.warn, .sp-host-c.warn { color: #e8a25a; }
.sp-take { margin-bottom: 8px; padding: 8px 10px; background: rgba(120, 40, 20, 0.28); border: 1px solid #b0603a; border-radius: 2px; }
.sp-take-h { font-size: 13px; font-weight: 700; color: #f0b070; margin-bottom: 3px; }
.sp-take-t { font-size: 12px; color: var(--ink); line-height: 1.6; }
.sp-srow-tag.swap { color: #c8b6e8; }
.sp-srow .ui-delta { font-size: 11.5px; }
.sp-srow-side { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 8px 6px 0; }
.sp-srow-side .ui-btn { box-sizing: border-box; width: 128px; height: var(--hit); white-space: nowrap; }
.sp-srow-n .sp-srow-lk { width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; fill: none; stroke: #d9b45a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-lock-btn .ui-btn-ic { width: 14px; height: 14px; }
.sp-lock-btn.on { border-color: #8a6d2e; color: #e6c66e; }

/* 魂の候補は情報・能力変化・操作を分け、細い画面でも文字を折らない。 */
.sp-pick-sheet .sp-srow { flex-direction: column; gap: 0; }
.sp-pick-sheet .sp-srow-main { flex-wrap: wrap; }
.sp-pick-sheet .sp-srow-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 0 8px 7px; }
.sp-pick-sheet .sp-srow-side .ui-btn { width: 100%; min-width: 0; }
.sp-pick-sheet .sp-srow-t { flex: 1; }
.sp-picker-change { flex: 0 0 100%; display: flex; flex-direction: column; gap: 4px; padding-top: 5px; border-top: 1px solid #665139; }
.sp-picker-change-k { color: var(--ink-dim); font-size: 10px; font-weight: 500; }
.sp-picker-delta.ui-delta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sp-picker-delta > span { padding: 3px 4px; white-space: nowrap; overflow-x: auto; background: #0f0c1180; border-radius: 2px; }
@media (max-width: 560px) {
  .sp-pick-sheet .sp-srow { flex-direction: column; gap: 0; }
  .sp-pick-sheet .sp-srow-main { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 6px 8px; min-height: 0; padding: 8px 9px; }
  .sp-pick-sheet .sp-srow .sp-orb { width: 36px; height: 36px; }
  .sp-pick-sheet .sp-srow-t { gap: 3px; }
  .sp-pick-sheet .sp-srow-n, .sp-pick-sheet .sp-srow-m, .sp-pick-sheet .sp-srow-tag { display: block; white-space: nowrap; overflow-x: auto; max-width: 100%; line-height: 1.4; }
  .sp-pick-sheet .sp-srow-n { font-size: 13px; }
  .sp-pick-sheet .sp-srow-n .sp-left { display: none; }
  .sp-pick-sheet .sp-srow-m { font-size: 10.5px; }
  .sp-pick-sheet .sp-srow-tag { font-size: 10px; }
  .sp-pick-sheet .sp-picker-change { grid-column: 1 / -1; padding-top: 4px; }
  .sp-pick-sheet .sp-picker-delta { font-size: 11px; }
  .sp-pick-sheet .sp-srow-side .ui-btn { width: 100%; min-width: 0; padding: 4px; font-size: 11px; letter-spacing: 0; gap: 4px; }
  .sp-pick-sheet .sp-lock-btn .ui-btn-ic { width: 12px; height: 12px; flex-shrink: 0; }
}

/* ---------- 祝祭 (転職・ランクアップ) ---------- */
.sp-cel-art { position: relative; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; }
.sp-cel-art .pt-px { position: relative; z-index: 1; filter: drop-shadow(0 0 10px var(--sheet-accent, #c9a24a)); }
.sp-cel-rays {
  position: absolute; inset: -10px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--sheet-accent, #c9a24a) 36%, transparent) 0deg 8deg, transparent 8deg 26deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%); mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  animation: ru-spin 14s linear infinite;
}
.sp-ru { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sp-ru-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sp-ru-rk { font-size: 15px; font-weight: 700; color: var(--ink-dim); }
.sp-ru-rk.new { font-size: 22px; font-weight: 800; text-shadow: 0 0 16px currentColor; animation: ru-pulse 1.1s ease-in-out infinite; }
.sp-ru-ar { font-size: 18px; color: var(--accent); }
.sp-ru-job { font-size: 18px; font-weight: 800; text-shadow: 0 0 12px currentColor; }
.sp-ru-perks { display: grid; gap: 4px; width: 100%; }
.sp-ru-perk { display: flex; flex-wrap: wrap; min-width: 0; justify-content: space-between; gap: 10px; padding: 5px 10px; font-size: 13px; background: rgba(0,0,0,0.35); border: 1px solid #3a3029; border-radius: 2px; }
.sp-ru-pk { color: var(--ink-dim); }
.sp-ru-blk { margin-top: 7px; }
.sp-ru-perks.sp-ru-blk { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.sp-ru-perks.sp-ru-blk .sp-ru-perk { align-items: baseline; gap: 4px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.sp-ru-perks.sp-ru-blk .sp-ru-perk:only-child { grid-column: 1 / -1; }
.sp-ru-pv { font-weight: 800; display: inline-flex; flex-wrap: wrap; min-width: 0; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.sp-ru-old { color: var(--ink-dim); font-weight: 600; }
.sp-ru-to { color: var(--accent); font-weight: 600; }
.sp-ru-new { color: var(--accent-hi); }
/* 融合の結果: 桁数を保ち、幅が足りなければ項目・値の区切りで折り返す。 */
.sp-fz-sec { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.sp-fz-h { font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; color: var(--accent); text-align: left; }
.sp-fz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 3px; }
.sp-fz-st { display: flex; flex-wrap: wrap; min-width: 0; align-items: baseline; gap: 4px; padding: 3px 7px; font-size: 12px; background: rgba(0,0,0,0.35); border: 1px solid #3a3029; border-radius: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-fz-k { color: var(--ink-dim); font-weight: 700; min-width: 2.3em; text-align: left; }
.sp-fz-v { color: #e6dbc2; display: flex; flex-wrap: wrap; gap: 0 3px; flex: 1 1 auto; min-width: 0; text-align: left; }
.sp-fz-d { font-weight: 800; }
.sp-fz-d.up { color: #7fd38a; }
.sp-fz-d.dn { color: #e0726a; }
.sp-left { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; text-shadow: none; }
.sp-fz-gap { margin-top: 8px; }
.ui-row.sp-fz-off { opacity: 0.55; }
.sp-fz-none { grid-column: 1 / -1; font-size: 12px; color: var(--ink-dim); }
.sp-fz-learn { display: flex; flex-wrap: wrap; gap: 5px; }
.sp-fz-chip { min-height: 30px; padding: 3px 9px; font-family: var(--font); font-size: 12px; font-weight: 800; color: #f3e4b8; background: rgba(201,162,74,0.12); border: 1px solid #8a6d2e; border-radius: 2px; cursor: pointer; animation: ru-learn 0.5s ease-out both; }
.sp-fz-chip.ps { color: #cfe0f6; background: rgba(110,150,210,0.12); border-color: #4c6a92; }
.sp-fz-lead { font-size: 13px; font-weight: 700; color: #e6dbc2; }
.sp-fz-note { font-size: 11.5px; color: var(--ink-dim); }
.sp-cel-art.fz { width: 104px; height: 104px; }
.sp-cel-art.ru { width: 124px; height: 124px; }
.sp-cel-ru .sp-ru-row { margin-top: 2px; }
.sp-cel-ru .sp-ru-hint { padding: 5px 9px; font-size: 11.5px; line-height: 1.55; }
/* ランクアップ: 光の輪が弾け、2重の光条が逆に回り、魂の姿が跳ね上がる */
.sp-cel-ru.ui-sheet { box-shadow: 0 0 60px color-mix(in srgb, var(--sheet-accent, #c9a24a) 60%, transparent), 0 0 0 1px var(--sheet-accent, #c9a24a); animation: ru-card 0.9s ease-out both; }
.sp-cel-ru .ui-sheet-banner { font-size: 16px; text-shadow: 0 0 14px currentColor, 0 1px 0 #000; animation: ru-pulse 1.4s ease-in-out infinite; }
.sp-cel-art.ru .pt-px { animation: ru-rise 0.9s cubic-bezier(.2,1.5,.4,1) both; }
.sp-cel-rays.rev { inset: -24px; animation: ru-spin 22s linear infinite reverse; }
.sp-ru-burst { position: absolute; inset: 20px; border-radius: 50%; border: 3px solid var(--ru-accent, #c9a24a); box-shadow: 0 0 24px var(--ru-accent, #c9a24a); opacity: 0; animation: ru-burst 1.6s ease-out 0.15s 2; pointer-events: none; }
.sp-cel-ru .sp-ru-rk.new { animation: ru-stamp 0.6s cubic-bezier(.2,1.6,.4,1) 0.35s both, ru-pulse 1.1s ease-in-out 1s infinite; }
/* 札そのものは拡大しない (ページ分けの寸法取りが狂うため): 光って現れる */
@keyframes ru-card { 0% { opacity: 0; filter: brightness(2.6); } 35% { opacity: 1; filter: brightness(1.8); } 100% { opacity: 1; filter: none; } }
@keyframes ru-rise { 0% { transform: translateY(24px) scale(0.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ru-burst { 0% { transform: scale(0.4); opacity: 0.95; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ru-stamp { 0% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ru-learn { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.sp-ru-hint { font-size: 12px; line-height: 1.6; color: #e6dbc2; padding: 6px 10px; border: 1px dashed rgba(201,162,74,0.4); border-radius: 2px; text-align: left; }
.sp-cel .ui-sheet-foot { grid-template-columns: 1fr; }

/* ---------- 祝祭: レベルアップ (戦果シートの後 / 街で魂を強化) ---------- */
.sp-cel-lu.ui-sheet { box-shadow: 0 0 46px color-mix(in srgb, var(--sheet-accent, #ffd77a) 45%, transparent), 0 0 0 1px var(--sheet-accent, #ffd77a); animation: ru-card 0.7s ease-out both; }
.sp-cel-lu .ui-sheet-banner { font-size: 16px; letter-spacing: 0.22em; text-shadow: 0 0 14px currentColor, 0 1px 0 #000; animation: ru-pulse 1.6s ease-in-out infinite; }
.sp-cel-art.lu { width: 132px; height: 120px; overflow: visible; }
.sp-cel-art.lu.multi { width: 100%; max-width: 320px; height: 84px; }
.sp-cel-art.lu.multi .sp-cel-rays { inset: auto; left: calc(50% - 110px); top: calc(50% - 110px); width: 220px; height: 220px; }
.sp-cel-art.lu.multi .sp-ru-burst { inset: auto; left: calc(50% - 42px); top: calc(50% - 42px); width: 84px; height: 84px; }
.sp-lu-figs { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.sp-lu-figs .pt-px { animation: ru-rise 0.8s cubic-bezier(.2,1.5,.4,1) both; }
.sp-lu-figs .pt-px:nth-child(2) { animation-delay: 0.08s; } .sp-lu-figs .pt-px:nth-child(3) { animation-delay: 0.16s; }
.sp-lu-figs .pt-px:nth-child(4) { animation-delay: 0.24s; } .sp-lu-figs .pt-px:nth-child(5) { animation-delay: 0.32s; } .sp-lu-figs .pt-px:nth-child(6) { animation-delay: 0.4s; }
.sp-lu-spark { position: absolute; bottom: 10%; z-index: 2; width: 3px; height: 3px; background: var(--ru-accent, #ffd77a); box-shadow: 0 0 6px var(--ru-accent, #ffd77a); opacity: 0; pointer-events: none; animation: lu-spark 1.8s ease-out infinite; }
@keyframes lu-spark { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-90px) scale(0.4); opacity: 0; } }
.sp-lu-who { font-size: 13px; font-weight: 800; text-shadow: 0 0 10px currentColor; }
.sp-lu-lv { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; font-variant-numeric: tabular-nums; }
.sp-lu-old { font-size: 14px; font-weight: 700; color: var(--ink-dim); }
.sp-lu-ar { font-size: 15px; color: var(--accent); }
.sp-lu-new { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 800; color: var(--accent-hi); text-shadow: 0 0 16px currentColor; animation: ru-stamp 0.55s cubic-bezier(.2,1.6,.4,1) both, ru-pulse 1.3s ease-in-out infinite; }
.sp-lu-lvk { font-size: 0.6em; }
.sp-lu-lv.big .sp-lu-new { font-size: 34px; line-height: 1.05; }
.sp-lu-lv:not(.big) { justify-content: flex-start; gap: 5px; }
.sp-lu-lv:not(.big) .sp-lu-old { font-size: 12px; }
.sp-lu-lv:not(.big) .sp-lu-new { font-size: 19px; }
.sp-lu-gain { align-self: center; padding: 1px 6px; font-size: 11px; font-weight: 800; color: #1a1206; background: var(--accent-hi, #ffd77a); border-radius: 9px; animation: ru-stamp 0.4s ease-out both; }
.sp-lu-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 3px; width: 100%; }
/* 能力名と増加量の下に数値を置き、スマホでも桁を隠さない。 */
.sp-lu-st { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 4px; min-width: 0; padding: 4px 7px; font-size: 12.5px; background: linear-gradient(90deg, rgba(127,211,138,0.10), rgba(0,0,0,0.35) 60%); border: 1px solid #3a3029; border-radius: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; animation: lu-stat 0.45s ease-out both; }
@keyframes lu-stat { 0% { opacity: 0; transform: translateX(-8px); border-color: #7fd38a; } 60% { opacity: 1; border-color: #7fd38a; } 100% { opacity: 1; transform: none; } }
.sp-lu-k { color: var(--ink-dim); font-weight: 700; min-width: 2.3em; text-align: left; }
.sp-lu-v { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 3px; }
.sp-lu-v > span { flex: 0 0 auto; }
.sp-lu-was { color: var(--ink-dim); }
.sp-lu-to { color: var(--accent); }
.sp-lu-now { color: #f5ecd6; font-weight: 800; }
.sp-lu-d { grid-column: 2; grid-row: 1; text-align: right; font-weight: 800; color: #7fd38a; }
.sp-lu-chip { animation: ru-learn 0.5s ease-out both, lu-shine 1.6s ease-in-out infinite; }
@keyframes lu-shine { 0%,100% { box-shadow: 0 0 0 rgba(255,215,122,0); } 50% { box-shadow: 0 0 12px rgba(255,215,122,0.55); } }
.sp-lu-learn .sp-fz-h { color: var(--accent-hi); }
.sp-lu-subs { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-cel-lu:not(.multi) .sp-lu-subs { margin-top: 6px; justify-content: center; width: 100%; }
.sp-lu-sub { display: inline-flex; gap: 5px; padding: 2px 7px; font-size: 11.5px; background: rgba(120,90,170,0.14); border: 1px solid #4a3b63; border-radius: 2px; }
.sp-lu-subk { color: #c8b6e8; }
.sp-lu-subv { font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-lu-next { width: 100%; margin-bottom: 3px; padding: 5px 9px; font-family: var(--font); font-size: 12px; line-height: 1.5; color: #e6dbc2; text-align: left; background: rgba(0,0,0,0.3); border: 1px dashed rgba(201,162,74,0.45); border-radius: 2px; }
button.sp-lu-next { cursor: pointer; }
.sp-lu-next.cap { border-color: rgba(224,170,90,0.6); color: #f0cf8a; }
.sp-lu-next.sm { margin-top: 3px; padding: 2px 7px; font-size: 11px; }
.sp-lu-mem { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 7px 9px; text-align: left; background: linear-gradient(90deg, color-mix(in srgb, var(--glow, #c9a24a) 14%, transparent), rgba(0,0,0,0.35) 55%); border: 1px solid color-mix(in srgb, var(--glow, #c9a24a) 45%, #2a2226); border-radius: 3px; animation: lu-mem 0.5s ease-out both; }
@keyframes lu-mem { 0% { opacity: 0; transform: translateY(8px); filter: brightness(2); } 60% { opacity: 1; filter: brightness(1.4); } 100% { opacity: 1; transform: none; filter: none; } }
.sp-lu-mem .sp-orb { width: 44px; height: 44px; }
.sp-lu-mt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-lu-mh { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sp-lu-mn { font-size: 13.5px; color: #f5ecd6; white-space: nowrap; }
.sp-lu-ms { font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-lu-chips { display: flex; flex-wrap: wrap; gap: 3px 6px; font-size: 11.5px; font-weight: 800; color: #7fd38a; font-variant-numeric: tabular-nums; }
.sp-lu-mem .sp-lu-learn { margin-top: 2px; }
@media (max-height: 719px) {
  .sp-cel-art.lu { width: 110px; height: 88px; }
  .sp-cel-art.lu.multi { height: 56px; }
  .sp-lu-lv.big .sp-lu-new { font-size: 28px; }
  .sp-lu-st { padding: 2px 7px; }
  .sp-lu-mem { padding: 5px 8px; }
  .sp-lu-mem .sp-orb { width: 38px; height: 38px; }
  .sp-cel-lu .sp-ru-blk { margin-top: 5px; }
}

/* ---------- 狭い画面 (幅 360) ---------- */
@media (max-width: 379px) {
  .pt-form { padding: 6px 5px 5px; gap: 3px; }
  .pt-fgrp-in { gap: 2px; }
  .pt-fgrp.back { padding-left: 3px; }
  .pt-bench { width: 44px; }
  .pt-auto span { display: none; }
  .pt-auto { min-width: 48px; }
  .pt-ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-head-tag { display: none; }
}

/* ---------- 背の低い画面 (高さ 700 以下): 名札を畳み、部位の枠を詰める ---------- */
@media (max-height: 700px) {
  .pt-slotp-n { display: none; }
  .pt-form { padding-top: 4px; padding-bottom: 6px; }
  .pt-slot { min-height: 46px; padding-top: 2px; padding-bottom: 2px; }
  .pt-slots { gap: 3px; }
  .pt-root, .pt-body { gap: 6px; }
}

/* ---------- 視差を減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pt-port.target, .pt-bench.target, .pt-port-hp.low i, .sp-cel-rays, .sp-cel-art .pt-px, .sp-ru-rk.new, .sp-cel-ru.ui-sheet, .sp-cel-ru .ui-sheet-banner, .sp-ru-burst, .sp-fz-chip, .sp-cel-lu.ui-sheet, .sp-cel-lu .ui-sheet-banner, .sp-lu-figs .pt-px, .sp-lu-new, .sp-lu-gain, .sp-lu-st, .sp-lu-chip, .sp-lu-mem { animation: none !important; }
  .sp-lu-spark { display: none; }
  .sp-ru-burst { display: none; }
  .pt-port, .pt-slot, .pt-chc { transition-duration: 0.12s !important; }
  .pt-chc-d.multi .pt-chc-pg { transition: none !important; }
}

/* ---------- 背の低い画面: 魂・能力の区分も1画面に収める ---------- */
@media (max-height: 700px) {
  .sp-acts .ui-btn { min-height: 44px; }
  .sp-btn { min-height: 44px; padding-top: 2px; padding-bottom: 2px; }
  .sp-tile { min-height: 46px; }
  .sp-next { min-height: 44px; }
  .pt-stat { min-height: 50px; padding: 2px 4px; }
  .sp-head .sp-orb { width: 40px; height: 40px; }
  .sp-card { gap: 6px; padding-top: 8px; padding-bottom: 6px; }
}

.pt-stability { margin-top:2px; color:#aad3dc; }

/* サブ魂の選択から開く「魂を強化」のシート */
.sp-train-sheet .sp-train-h { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.sp-train-sheet .sp-train-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-train-sheet .sp-prog { margin-bottom: 8px; }

/* 控えの結社のタイル: 全員への上乗せは折り返して全部見せる */
.sp-order .sp-tile-s { white-space: normal; overflow: visible; text-overflow: clip; flex-wrap: wrap; line-height: 1.45; }

/* 魂一覧・魂の詳細・宿す先 */
.sp-sd-h { margin: 10px 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; color: #c9a24a; }
.sp-sd-tbl { display: grid; gap: 1px; font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-sd-r { display: grid; grid-template-columns: 3.4em repeat(3, minmax(0, 1fr)); gap: 6px; padding: 3px 6px; background: rgba(0,0,0,0.22); }
.sp-sd-r > span { text-align: right; color: var(--ink); }
.sp-sd-r > .k { text-align: left; color: #b2a68f; font-weight: 700; }
.sp-sd-r.h > span { font-size: 10.5px; color: #8a6d2e; font-weight: 700; }
.sp-sd-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-sd-chip { padding: 3px 7px; font-size: 11.5px; color: var(--ink); background: rgba(0,0,0,0.3); border: 1px solid #4a3d36; border-radius: 2px; cursor: pointer; }
.sp-sd-chip.ps { color: #c9b8e8; border-color: #4a3d5a; }
.sp-host { padding: 8px; background: rgba(0,0,0,0.22); border: 1px solid #33292a; border-radius: 3px; }
.sp-host-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sp-host-n { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sp-host-j { font-size: 11px; color: #b2a68f; }
.sp-host-s { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.sp-host-b { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; min-height: 44px; text-align: left; color: var(--ink); background: linear-gradient(180deg, #221b20, #120e12); border: 1px solid #4a3d36; border-radius: 3px; cursor: pointer; }
.sp-host-b:disabled { opacity: 0.45; cursor: default; }
.sp-host-b.cur { border-color: #8a6d2e; }
.sp-host-k { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #c9a24a; }
.sp-host-c { font-size: 11px; color: #b2a68f; }
.sp-sd-sheet .ui-sheet-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-sd-sheet .ui-sheet-foot > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }

/* ===== 面影の写し (肖像を押して顔を選ぶ。第三章の入口で解放) ===== */
.pt-port.pt-face-on { cursor: pointer; }
.pt-face-mark {
  position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1; color: #1a1209; background: linear-gradient(#f3d58b, #c9a24f);
  border: 1px solid #2a1f14; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.7); pointer-events: none;
}
.pt-om { display: flex; flex-direction: column; gap: 10px; }
.pt-om-top { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #3a3029; }
.pt-om-fig {
  flex: 0 0 auto; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(243,213,139,0.10), rgba(8,6,9,0.85) 70%); border: 1px solid #4a3d36; border-radius: 2px;
}
.pt-om-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pt-om-now { font-size: 13px; font-weight: 700; color: #e7c873; }
.pt-om-note { margin: 0; font-size: 11.5px; line-height: 1.6; color: #a99a80; }
.pt-om-row { display: flex; flex-direction: column; gap: 4px; }
.pt-om-job { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; }
.pt-om-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pt-om-t {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 60px; padding: 4px 2px; cursor: pointer;
  color: #cdbf9f; background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-radius: 2px;
}
.pt-om-tx .pt-om-t { width: 64px; }
.pt-om-t.on { border-color: var(--accent-hi); box-shadow: 0 0 0 1px rgba(243,213,139,0.55), 0 0 12px rgba(243,213,139,0.28); }
.pt-om-t.on .pt-om-r { color: var(--accent-hi); }
.pt-om-t:active:not(.lock) { transform: scale(0.96); }
.pt-om-t.lock { cursor: default; background: rgba(8,6,9,0.6); border-style: dashed; border-color: #3a3029; }
.pt-om-t.lock canvas { filter: brightness(0); opacity: 0.55; }
.pt-om-t.lock .pt-om-r { color: #6e6457; }
.pt-om-fr { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; pointer-events: none; }
.pt-om-r { font-size: 11px; line-height: 1.2; white-space: nowrap; }

/* ===== 留守居の修練 (第六章の結びで開く。控えの一覧の見出しの注) ===== */
.pt-res-rusui { font-size: 12px; color: #c8b78f; padding: 2px 2px 4px; line-height: 1.6; }
.pt-res-row.rusui { border-color: #7a6432; box-shadow: 0 0 0 1px rgba(243,213,139,0.25); }
.pt-res-rtag { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 10.5px; font-weight: 700; line-height: 1.6; vertical-align: 2px;
  color: #f3d58b; border: 1px solid #8a6d2e; border-radius: 3px; background: rgba(60, 44, 16, 0.7); letter-spacing: 0.08em; }
.pt-res-rbtn { flex: 1 0 100%; margin-top: 4px; }
/* 魂の詳細: 魂の名の行の右端に「職業図鑑を見る」 */
.sp-sd-sheet .sp-sd-t { flex: 1 1 auto; align-self: stretch; }
.sp-sd-nmrow { display: flex; align-items: center; gap: 8px; }
.sp-sd-nmrow .sp-srow-n { flex: 1 1 auto; min-width: 0; }
.sp-sd-nmrow .sp-sd-codex { flex: 0 0 auto; margin-left: auto; }

/* ---------- 人業の入れ替え (控えの札の入れ替え先・入れ替えのシート) ---------- */
.pt-res-tg { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pt-swap-t {
  display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 44px; padding: 2px 6px 2px 3px;
  color: var(--ink); background: rgba(8,6,9,0.6); border: 1px solid #4a3d36; border-radius: 3px; cursor: pointer; font-family: var(--font); text-align: left;
}
.pt-swap-t:active { transform: scale(0.97); }
.pt-swap-t.off { opacity: 0.45; cursor: not-allowed; }
.pt-swap-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pt-swap-pos { font-size: 10px; color: #a08a5e; letter-spacing: 0.06em; }
.pt-swap-n { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-sw-sheet .ui-sheet-body { display: flex; flex-direction: column; gap: 6px; }
.pt-sw-me { text-align: left; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid #5a4a3a; border-radius: 3px; background: rgba(243,213,139,0.06); }
.pt-sw-h { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-hi); }
.pt-sw-none { font-size: 12.5px; color: var(--ink-dim); padding: 6px 2px; }
.pt-sw-card {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 8px; text-align: left;
  color: var(--ink); background: var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge); cursor: pointer; font-family: var(--font);
}
.pt-sw-card:active { transform: scale(0.99); border-color: #8a6d2e; }
.pt-sw-card.off { opacity: 0.55; cursor: not-allowed; }
.pt-sw-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-sw-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pt-sw-pos { flex: 0 0 auto; font-size: 10.5px; padding: 0 5px; color: #f3d58b; border: 1px solid #6a5636; border-radius: 2px; }
.pt-sw-n { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-sw-c { font-size: 12px; color: var(--accent-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-sw-after { font-size: 12px; color: #cfe3b0; }
.pt-sw-after.ng { color: #e8a59a; }
.pt-sw-go { flex: 0 0 auto; font-size: 20px; color: #f3d58b; }
/* 品の画面 (誰に装備させる？) と「いまの装備と比べる」の特殊効果の行 */
.pt-ch-fx { margin: 0 0 10px; }
.pt-chl-cur-fx.line { padding-left: 1em; line-height: 1.5; }

/* 隊の共有袋: 50点を端末幅に合わせて並べる。操作は44px以上を確保する。 */
.pt-bagwrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pt-bagwrap .pt-bagbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-bagwrap .pt-bagbar-acts { flex-wrap: wrap; }
.pt-bagwrap .pt-bagbar-acts .pt-allauto { min-height: 44px; }
.pt-bagwrap .pt-bag { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: min(36dvh, 320px); overflow-y: auto; overscroll-behavior: contain; padding: 3px; scrollbar-width: thin; touch-action: pan-y; }
.pt-bagwrap .pt-bcell { width: 100%; min-width: 0; min-height: 72px; height: auto; flex-direction: column; gap: 5px; padding: 6px 3px; }
.pt-bagwrap .pt-bag > .pt-note { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .pt-bagwrap .pt-bag { grid-template-columns: repeat(6, minmax(0, 1fr)); max-height: min(40dvh, 380px); }
  .ui-sheet.pt-sheet { max-width: min(760px, calc(100vw - 32px)); }
  .pt-slots { gap: 8px; }
}
@media (min-width: 1000px) {
  .ui-sheet.pt-sheet { max-width: min(960px, calc(100vw - 64px)); height: min(90dvh, 900px); }
  .pt-sheet .pt-body:has(> .pt-bagwrap) { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 16px; }
  .pt-sheet .pt-body:has(> .pt-bagwrap) > .pt-note { grid-column: 1 / -1; }
  .pt-bagwrap .pt-bag { grid-template-columns: repeat(8, minmax(0, 1fr)); max-height: min(50dvh, 480px); }
}
/* マウスの画面で PC の配置 (desktop.css) にならない幅・高さでは、共通シートが 640px に収まる (styles.css)。
   そこで左右に分けると袋の列が 330px ほどになり 8列の品が44px を割るので、分けずに縦に並べる。 */
@media (min-width: 1000px) and (max-width: 1099px) and (hover: hover) and (pointer: fine),
       (min-width: 1000px) and (max-height: 599px) and (hover: hover) and (pointer: fine) {
  html.pc-input .pt-sheet .pt-body:has(> .pt-bagwrap) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .ui-sheet.pt-sheet { height: 96dvh; max-height: 96dvh; }
  .pt-bagwrap .pt-bag { max-height: 45dvh; }
  .pt-hero { min-height: 0; }
}

.pt-bcell-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; min-height: 2.6em; font-size: 10px; line-height: 1.3; color: var(--ink); }
.pt-bagwrap .pt-bcell:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
/* 館の選択・名前・メイン魂の詳細・区分を固定し、区分の中身をスクロールする。 */
.pt-mansion-head { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.pt-mansion-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.pt-mansion-title .pt-head-cls { font-size: 12px; white-space: nowrap; }
.pt-mansion-head > .ui-btn { flex: 0 0 auto; min-width: 64px; min-height: 44px; }
.pt-root.m-town > .pt-form { justify-content: center; }
.pt-mansion-manage { flex: 0 0 auto; margin-left: auto; min-width: 48px; padding: 4px 6px; }
.pt-mansion-links { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pt-mansion-links .pt-bench { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; width: auto; min-width: 64px; min-height: 44px; padding: 4px 6px; }
.pt-mansion-links .pt-bench-l { font-size: 12px; }
.pt-mansion-links .pt-bench-n { font-size: 11px; }
.pt-mansion-rename.pt-head-edit { flex: 0 0 44px; margin: 0; }
.pt-root.m-town > .sp-card { min-width: 0; }
.sp-head { align-items: flex-start; }
.sp-name { flex-wrap: wrap; white-space: normal; gap: 2px 6px; overflow-wrap: anywhere; }
.sp-left { margin-left: 0; white-space: normal; }
.sp-lv-n { align-self: center; }
.sp-meta { flex-wrap: wrap; white-space: normal; }
.sp-meta > * { min-width: 0; }
@media (max-width: 420px) {
  .pt-root.m-town { gap: 6px; }
  .pt-root.m-town > .pt-form { padding: 4px 2px 6px; gap: 4px; }
  .pt-root.m-town > .pt-form .pt-fgrp.back { padding-left: 4px; }
  .pt-root.m-town > .pt-form .pt-fgrp-in { gap: 3px; }
  .pt-root.m-town > .pt-form .pt-slotp-n { display: none; }
  .sp-card > .sp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .sp-card > .sp-head > .sp-orb { display: none; }
  .sp-card > .sp-head .sp-name { font-size: 15px; }
}

/* 詳細シートの管理ボタンは一列にまとめ、装備と袋の表示領域を確保する。 */
.pt-sheet .pt-form > .pt-side { flex-direction: row; flex-wrap: wrap; width: 100%; gap: 6px; }
.pt-sheet .pt-side .pt-bench { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 4px 10px; }
.pt-sheet .pt-slotp-n { display: none; }

/* 習得元の魂と職業を、技のまとまりごとに示す */
.sp-lu-learn-group { display: grid; gap: 5px; }
.sp-lu-learn-source { font-size: 11.5px; font-weight: 700; color: var(--ink-dim); text-align: left; }

/* 詳細見出しの最適装備はスマホでも文字を表示し、縦に並べる。 */
.pt-equip-actions { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.pt-equip-actions > .ui-btn { min-height: 44px; min-width: 78px; padding: 4px 8px; white-space: nowrap; }
.pt-ae-action { display: flex; align-items: center; gap: 6px; }
.pt-ae-action .pt-note { flex: 1; min-width: 0; }
.pt-ae-tg { min-height: 44px; }

@media (max-width: 360px) {
  .pt-root.m-town > .pt-form { flex-wrap: nowrap; gap: 2px; }
  .pt-root.m-town > .pt-form .pt-fgrp-in { gap: 1px; }
  .pt-root.m-town > .pt-form .pt-slotp { width: 36px; }
  .pt-root.m-town > .pt-form .pt-port { width: 36px; height: 44px; }
  .pt-mansion-head { gap: 3px; }
  .pt-mansion-links { gap: 3px; }
  .pt-mansion-links .pt-bench { min-width: 58px; padding: 4px 3px; }
  .pt-mansion-title .pt-head-name { font-size: 13px; }
}

/* 館の詳細は一つのスクロール領域。顔と名前と移動ボタンを上に残す。 */
.pt-mansion-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pt-mansion-nav > .ui-btn { min-height: 44px; }
.pt-overview-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pt-overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 0; padding: 0 2px; min-height: 44px; border-bottom: 1px solid #493a2b; color: var(--accent-hi); }
.pt-overview-heading h2 { margin: 0; font-size: 14px; }
.pt-overview-heading .pt-stability { width: auto; min-height: 44px; }
.pt-root.m-town.has-keeper > .pt-overview { flex: 1 1 auto; }
.pt-overview .sp-card { gap: 6px; padding: 8px 10px 6px; }
.sp-card > .sp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.sp-head-actions.sp-level-row { flex-direction: column; align-items: flex-end; gap: 2px; min-height: 0; }
.sp-head-actions > .ui-btn { min-height: 44px; padding: 2px 8px; }
.sp-head-actions .sp-lv-n b { font-size: 22px; }
.sp-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: 6px; }
.sp-acts > .sp-ember-b { width: 100%; margin-left: 0; padding: 4px; }
@media (max-width: 600px) {
  .sp-card > .sp-head { grid-template-columns: minmax(0, 1fr) auto; }
  .sp-card > .sp-head > .sp-orb { display: none; }
  .sp-meta { gap: 3px; font-size: 11px; }
  .sp-head-actions .sp-lv-n b { font-size: 20px; }
  .pt-overview .pt-stat { min-height: 56px; }
}

/* 魂名とLvは同じ行、交換は魂名とランクの2行に沿って右へ置く。 */
.sp-card > .sp-head { --soul-name-col: 2; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 2px; }
.sp-card > .sp-head > .sp-orb { grid-column: 1; grid-row: 1 / 4; }
.sp-card > .sp-head .sp-head-tx, .sp-card > .sp-head .sp-head-actions { display: contents; }
.sp-card > .sp-head .sp-card-k { grid-column: var(--soul-name-col); grid-row: 1; }
.sp-card > .sp-head .sp-name { grid-column: var(--soul-name-col); grid-row: 2; flex-wrap: nowrap; gap: 8px; min-width: 0; }
.sp-card > .sp-head .sp-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-card > .sp-head .sp-meta { grid-column: var(--soul-name-col); grid-row: 3; }
.sp-card > .sp-head .sp-name .sp-lv-n { align-self: baseline; gap: 0; }
.sp-card > .sp-head .sp-name .sp-lv-n b { font-size: 18px; }
.sp-card > .sp-head .sp-head-actions > .ui-btn,
.sp-card > .sp-head .sp-head-actions > .sp-tile { grid-column: calc(var(--soul-name-col) + 1); grid-row: 2 / 4; margin-left: 0; align-self: center; }
@media (max-width: 600px) {
  .sp-card > .sp-head { --soul-name-col: 1; grid-template-columns: minmax(0, 1fr) auto; }
  .sp-card > .sp-head .sp-head-actions > .ui-btn { padding: 2px 6px; font-size: 12px; }
}

.sp-locked-control { color: var(--ink-dim); border-style: dashed; }
.sp-more > .sp-locked-control { min-height: 54px; width: 100%; }

/* 隊列並べ替え: スマホでも前衛・後衛を三体ずつ並べる。 */
.pt-formation-sheet .ui-sheet-body { display: flex; flex-direction: column; gap: 14px; }
.pt-formation-hint { margin: 0; min-height: 2.8em; font-size: 13px; color: var(--ink-dim); }
.pt-formation-label { margin: 0 0 8px; font-size: 14px; color: var(--accent-hi); }
.pt-formation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pt-formation-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 116px; padding: 10px 4px; text-align: center; }
.pt-formation-card.selected { border: 2px solid var(--accent-hi); background: rgba(243,213,139,0.12); padding: 9px 3px; }
.pt-formation-card:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.pt-formation-name { width: 100%; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.pt-formation-job { max-width: 100%; font-size: 11px; color: var(--ink-dim); overflow-wrap: anywhere; }
.pt-formation-card.empty { border: 1px dashed #5a4a3a; border-radius: 3px; color: var(--ink-dim); font-size: 12px; }

/* 館の装備見出しの右端に、隊全員と選択中の人業の最適装備を並べる。 */
.pt-overview-heading .pt-equip-actions { margin-left: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; }
.pt-overview-heading .pt-equip-actions > .ui-btn { min-width: 0; white-space: normal; }

/* 保存編成は十枠を縦に並べ、画面内でスクロールする。 */
.pt-presets { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pt-preset, .pt-preset-detail { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line, #5a4a3a); border-radius: 5px; min-width: 0; overflow-wrap: anywhere; }
.pt-preset-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-preset-actions button { min-height: 44px; }
.pt-preset-faces { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-preset-face { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; max-width: 64px; }
.pt-preset-name { display: flex; flex-direction: column; gap: 10px; }
.pt-preset-preview .ui-sheet-body { display: flex; flex-direction: column; gap: 12px; }
.pt-preset-detail h3 { margin: 0; color: var(--accent-hi); font-size: 14px; }
.pt-preset-detail button { text-align: left; white-space: normal; }

/* 館の編成の入口は名前の横に保つ。 */
.pt-mansion-head { flex-wrap: wrap; }
.pt-mansion-head .pt-mansion-title { flex-basis: 90px; }
.pt-mansion-links .pt-mansion-manage { margin-left: 0; min-height: 44px; }
.gf-summary, .gf-picked, .gf-elements, .gf-groups, .gf-options { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gf-summary:empty, .gf-picked:empty { display: none; }
.gf-summary { margin: 4px 0; }
.gf-rule { align-self: center; font-size: 11px; color: var(--ink-dim); }
.gf-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gf-panel h3 { margin: 3px 0; font-size: 14px; color: var(--accent-hi); }
.gf-hint, .gf-result { margin: 0; font-size: 12px; color: var(--ink-dim); line-height: 1.7; }
.gf-result { color: var(--accent-hi); }
.gf-search { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #66543c; border-radius: 3px; background: #171614; color: var(--ink); font: inherit; font-size: 16px; }
.gf-mode { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; }
.gf-mode input { width: 20px; height: 20px; }
.gf-panel .ui-btn, .gf-summary .ui-btn { min-height: 44px; max-width: 100%; white-space: normal; }
.gf-sheet .ui-sheet-foot { flex-wrap: wrap; }
.gf-sheet .ui-sheet-foot .ui-btn { min-width: 80px; }
.pt-bagwrap > .gf-open { align-self: flex-start; }

/* 作戦と技の設定は一つの縦スクロール領域に収める。 */
.pt-tac-settings { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-tac-skills-head { margin: 10px 0 0; font-size: 15px; color: #e7c873; }
.pt-tac-top { flex-wrap: wrap; }

/* サブ魂は本体で詳細を開き、交換・借用技は下段のボタンで操作する。 */
.sp-sub { flex-direction: column; }
.sp-sub-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-sub-actions .sp-tile-sk { min-width: 44px; border-top: 1px solid #3a3029; }
.sp-sub-actions .sp-tile-sk:first-child { border-left: 0; }
.sp-sub .sp-tile-n { white-space: normal; overflow-wrap: anywhere; }
.sp-sub-growth { grid-template-columns: minmax(0, 1fr); padding: 6px; }

/* 効果の候補は名前と説明を組にし、タッチ操作でもその場で内容を読める。 */
.gf-options .gf-effect-option { flex: 1 1 240px; justify-content: flex-start; text-align: left; padding: 8px 10px; }
.gf-effect-option .ui-btn-t { align-items: flex-start; width: 100%; gap: 4px; }
.gf-effect-option .ui-btn-s { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; color: var(--ink-dim); }

/* 最適装備の武魂は、得るものを先に一つずつ表示する。 */
.pt-ae-st > .ui-delta { width:100%; }
.eq-bukon-change { display:flex; align-items:center; gap:6px; flex-basis:100%; min-width:0; }
.eq-bukon-change > .bk-gem { margin:0; }
.eq-bukon-change > span:last-child { min-width:0; overflow-wrap:anywhere; }

/* 武魂の引き継ぎは通常の装備操作の下に置く。 */
.pt-cand.has-inherit { flex-wrap: wrap; }
.pt-cand.has-inherit > .pt-cand-main { flex-basis: calc(100% - 60px); }
.pt-cand.has-inherit > .ui-btn { flex: 1 1 100%; margin: 0 7px 7px; }
.pt-own.gen-weak { color: #ff9ae2; border-color: currentColor; }
.pt-slot-s.gen-weak { color: #ff9ae2; }

/* 段数指定: 費用と実行は下に固定し、本文だけを縦にたぐる。 */
.sp-batch-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.sp-batch-count { box-sizing: border-box; width: 8em; min-width: 0; min-height: 44px; padding: 6px 10px; font: inherit; font-size: 16px; color: var(--ink); background: #100d12; border: 1px solid #7a6242; border-radius: 3px; }
.sp-batch-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.sp-batch-actions { display: grid; gap: 6px; min-width: 0; }
.sp-batch-actions .ui-btn { flex-wrap: wrap; min-width: 0; }
.sp-batch-actions :is(.ui-btn-t, .ui-btn-l, .ui-btn-s, .ui-cost) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.sp-batch-sheet .sp-note, .sp-batch-sheet .sp-short { overflow-wrap: anywhere; }