/* ── 武将の札（編成の武将一覧・編成枠・保存編成・図鑑で共通に使う） ──
   武将の絵の上に、左上に陣営の紋章、右上にコスト、下に名前を重ねる。絵のない武将は陣営色の地に陣営の字を薄く出す。
   中の部品の大きさは「札の横幅に対する割合（cqw）」で決めているので、札をどの大きさで置いても全体の釣り合いが崩れない。
   札そのものの横幅は、置く側の画面で決める。 */
.fuda{
  --c1:#5e6378;--c2:#272a37;
  position:relative;aspect-ratio:4/5;container-type:inline-size;
  overflow:clip; /* hidden にすると一覧の中で札が潰れるため clip を使う */
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(180deg,var(--c1),var(--c2));
  border:1.5px solid #c9a24e;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.55);
}
/* 長押しで掴んで動かす部品なので、文字選択・画像の保存メニュー・画像だけのドラッグが出ないようにする */
.fuda{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fuda img{pointer-events:none;-webkit-user-drag:none}
.fuda.gi   {--c1:#2c55a0;--c2:#132955}
.fuda.shoku{--c1:#2f7350;--c2:#143a27}
.fuda.go   {--c1:#8f2f28;--c2:#46120f}
.fuda.gun  {--c1:#5e6378;--c2:#272a37}

.fuda .pic{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fuda .noimg{
  position:absolute;inset:0 0 20cqw;display:grid;place-items:center;
  font-weight:bold;font-size:55cqw;line-height:1;color:rgba(255,240,200,.16);
}
/* 紋章の画像は四角い灰色の下地付きなので、丸い紋章の部分だけを切り抜いて使う */
.fuda .mon{position:absolute;top:1cqw;left:1cqw;width:32cqw;height:32cqw;clip-path:circle(41% at 50% 50%)}
/* 群の紋章はもともと暗い色柄のため、他の陣営と同じくらい見えるよう明るくする */
.fuda.gun .mon{filter:brightness(1.9) saturate(1.3)}
.fuda .cs{
  position:absolute;top:4cqw;right:4cqw;width:24cqw;height:24cqw;border-radius:50%;
  display:grid;place-items:center;font-size:15cqw;font-weight:bold;line-height:1;color:#fbe7a6;
  background:radial-gradient(circle at 50% 35%,#3a2a12,#120c04);border:1px solid #d9b45e;
  box-shadow:0 1px 3px rgba(0,0,0,.8);
}
/* 名前の帯: 絵の下側を暗くして文字を読みやすくし、帯の下端に陣営色の線を引く。
   文字の大きさは名前の文字数（--n）に合わせ、長い名前でも帯からはみ出さないようにする */
.fuda .nm{
  position:absolute;left:0;right:0;bottom:0;padding:15cqw 2cqw 4cqw;text-align:center;white-space:nowrap;
  background:linear-gradient(180deg,transparent,rgba(5,7,12,.82) 50%);
  border-bottom:4cqw solid var(--c1);
  font-size:min(18cqw, calc(90cqw / var(--n, 2)));font-weight:bold;line-height:1.2;
}

/* 図鑑の登録の印（編成画面）: コストの下に縦に並べる。上から 凸数（金の丸）・秘蔵（紫の角印「秘」）・アニメ（青の丸に ▶）
   登録していないものは出さない（0凸は出さない） */
.fuda .marks{position:absolute;top:31cqw;right:4cqw;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2.5cqw}
.fuda .mk{
  width:22cqw;height:22cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-style:normal;font-weight:bold;line-height:1;border-radius:50%;
  border:1px solid #f0d488;box-shadow:0 1px 3px rgba(0,0,0,.85);
}
.fuda .mk.totu{color:#2a1d08;background:radial-gradient(circle at 50% 30%,#fbe39a,#c0902e)}
.fuda .mk.totu b{font-size:12cqw;line-height:.95}
.fuda .mk.totu small{font-size:6.5cqw;line-height:1}
.fuda .mk.hizo{border-radius:3cqw;font-size:13cqw;color:#fff3c4;text-shadow:0 1px 1px rgba(0,0,0,.8);
  background:linear-gradient(180deg,#9b4fd0,#4a1a78)}
.fuda .mk.anime{font-size:10cqw;padding-left:1.5cqw;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6);
  background:radial-gradient(circle at 50% 30%,#6fc6f5,#1d5f9c)}

/* 部隊の武将枠（銀龍の額）に入れた札: 額の内側の窓にぴったり収める */
.cardslot{position:relative}
.cardslot > .fuda{position:absolute;left:10.5%;right:10.5%;top:7.7%;bottom:8.9%;aspect-ratio:auto}

/* 兵種適性の印: 部隊の兵種を選ぶと、額の左下（龍のいない角）に S・A・B・C を色分けして出す */
.cardslot{container-type:inline-size}
.cardslot > .tekisei{
  position:absolute;left:0;bottom:0;z-index:2;width:27cqw;height:27cqw;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:15cqw;font-weight:bold;line-height:.9;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9);
  background:radial-gradient(circle at 50% 30%,var(--t1),var(--t2));
  border:1.5px solid #f0d488;box-shadow:0 2px 5px rgba(0,0,0,.7);
}
.cardslot > .tekisei small{font-size:6cqw;font-weight:bold;letter-spacing:.05em;line-height:1.1}
.tekisei.S{--t1:#ffc46a;--t2:#b8560f}
.tekisei.A{--t1:#c99af0;--t2:#6a2fa8}
.tekisei.B{--t1:#8cc4f5;--t2:#2a5f9e}
.tekisei.C{--t1:#a9b29f;--t2:#4d5546}

/* 兵種の印（編成・保存編成・図鑑の詳細で共通。common.js の heishuChip）: 兵種ごとに色を変えた丸に、金の縁と1文字
   大きさは置く側で --s（直径）を決める。文字の大きさは直径に合わせて決まる */
.hs-chip{
  --s:34px;flex-shrink:0;width:var(--s);height:var(--s);border-radius:50%;display:inline-grid;place-items:center;
  font-size:calc(var(--s) * .53);font-weight:bold;line-height:1;color:#fff3c4;text-shadow:0 1px 2px rgba(0,0,0,.85);
  background:radial-gradient(circle at 50% 30%,var(--c1),var(--c2) 78%);
  box-shadow:0 0 0 1.5px #e0bb66, inset 0 0 0 2px rgba(0,0,0,.28), inset 0 2px 1px rgba(255,255,255,.3);
}
.hs-chip.ki   {--c1:#e2694c;--c2:#6e1a0e}   /* 騎: 朱 */
.hs-chip.tate {--c1:#5d90e2;--c2:#16336e}   /* 盾: 藍 */
.hs-chip.yumi {--c1:#5fbd6f;--c2:#154a22}   /* 弓: 緑 */
.hs-chip.yari {--c1:#ab78de;--c2:#3f1c6e}   /* 槍: 紫 */
.hs-chip.heiki{--c1:#cfa766;--c2:#4f3712}   /* 器: 黄土 */
.hs-chip.none {--c1:#4a4f60;--c2:#1c1f2a;font-size:calc(var(--s) * .3);color:#b8b2a2}   /* 兵種をまだ選んでいない */

/* 部隊の兵種では使えない戦法: 戦法名を薄くし、上に赤い「兵種適合不可」の札を重ねる（編成・保存編成で共通） */
.skillslot{position:relative}
.skillslot .val.ng{color:#c9c2b0;opacity:.5}
.skillslot .ngmark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);pointer-events:none;
  font-size:9.5px;font-weight:bold;letter-spacing:.08em;line-height:1.5;white-space:nowrap;color:#fff;
  background:rgba(150,20,10,.9);border:1px solid #ffb3a6;padding:0 6px;box-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* 図鑑の行に置く小さな札: 名前とコストは行の中に別にあるので、絵と紋章だけにする */
.fuda.mini .cs,
.fuda.mini .marks,
.fuda.mini .nm{display:none}
.fuda.mini{border-width:1px;border-bottom:3px solid var(--c1)}
.fuda.mini .mon{width:42cqw;height:42cqw;top:auto;bottom:-2cqw;left:-2cqw}
.fuda.mini .noimg{inset:0}