/* ── 武将の詳細（図鑑・編成で共通の部品。js/detail.js の openDetail(武将名) で下からせり上がる板） ──
   図鑑＝行の武将の絵をタップ、編成＝枠の武将を長押しして動かさずに離すと開く */
.dt-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.dt-bg.open{opacity:1;pointer-events:auto}
.dt-sheet{
  position:fixed;left:50%;bottom:0;z-index:61;width:100%;max-width:430px;height:90dvh;
  display:flex;flex-direction:column;
  transform:translate(-50%,100%);visibility:hidden;transition:transform .25s ease, visibility 0s .25s;
  background:radial-gradient(500px 300px at 50% 0%, rgba(80,110,180,.18), transparent 60%), linear-gradient(180deg,#1a2234,#0c111d);
  border:1.5px solid #93794a;border-bottom:none;border-radius:12px 12px 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.7);
}
.dt-sheet.open{transform:translate(-50%,0);visibility:visible;transition:transform .25s ease}
.dt-close{
  position:absolute;top:8px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;color:#f0d488;
  background:radial-gradient(circle at 50% 35%,#3a2a12,#120c04);border:1px solid #d9b45e;
}
.dt-body{flex:1;min-height:0;overflow-y:auto;padding:14px 12px calc(16px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:12px}

/* 上の段: 左に武将の絵（金の額縁）、右に名前と基本情報。
   右の欄は絵と同じ高さにぴったり収める。文字や印の大きさは段の横幅に合わせて伸び縮みさせる（cqw = 段の横幅の1%）ので、
   どの画面の幅でも絵との釣り合いが変わらない */
.dt-hero{container-type:inline-size;display:flex;gap:3.2cqw;align-items:stretch}
.dt-pic{
  position:relative;flex:0 0 48%;aspect-ratio:1/1;padding:5px;
  background:linear-gradient(140deg,#8a6a2a,#f4e2a0 25%,#6e4c14 50%,#f4e2a0 75%,#8a6a2a);
  box-shadow:0 0 0 1px #3a2a10, 0 8px 20px rgba(0,0,0,.7), 0 0 18px rgba(240,212,136,.25);
}
.dt-pic .in{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7)}
.dt-pic img{display:block;width:100%;height:100%;object-fit:cover}
/* 絵のない武将は陣営の色の地に陣営の字を大きく薄く出す */
.dt-pic .noimg{width:100%;height:100%;display:grid;place-items:center;font-size:90px;font-weight:bold;color:rgba(255,240,200,.16);
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.14), transparent 70%), linear-gradient(180deg,var(--c1),var(--c2))}
.dt-pic.gi{--c1:#2c55a0;--c2:#132955}.dt-pic.shoku{--c1:#2f7350;--c2:#143a27}.dt-pic.go{--c1:#8f2f28;--c2:#46120f}.dt-pic.gun{--c1:#5e6378;--c2:#272a37}
/* 額縁の四隅の飾り（金の小さな菱形） */
.dt-pic::before,.dt-pic::after,.dt-pic .in::before,.dt-pic .in::after{content:"";position:absolute;z-index:1;width:9px;height:9px;transform:rotate(45deg);
  background:linear-gradient(135deg,#fff3c4,#b98b35);box-shadow:0 0 4px rgba(240,212,136,.8)}
.dt-pic::before{top:-3px;left:-3px}.dt-pic::after{bottom:-3px;right:-3px}
.dt-pic .in::before{top:-8px;right:-8px}.dt-pic .in::after{bottom:-8px;left:-8px}
.dt-info{flex:1;min-width:0;display:flex;flex-direction:column}
.dt-nm{display:flex;align-items:center;gap:1.6cqw;padding-right:32px}   /* 右上の×ボタンと重ならないよう右をあける */
.dt-name{font-size:min(7.6cqw, calc((33.6cqw - 28px) / var(--w, 2)));font-weight:bold;line-height:1.1;letter-spacing:.04em;white-space:nowrap}
/* 陣営は名前の右に印だけを大きく出す */
.dt-jin{flex:0 0 auto;width:9cqw;height:9cqw;clip-path:circle(41% at 50% 50%);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.dt-jin.gun{filter:brightness(1.9) saturate(1.3)}
.dt-kana{font-size:2.9cqw;line-height:1.3;color:#9d8f6b;letter-spacing:.08em;margin:.6cqw 0 1cqw}
/* 表は5行。残りの高さを5行で等分する（秘蔵とアニメ版は1行に並べる） */
.dt-tbl{flex:1;display:flex;flex-direction:column;font-size:3.3cqw;line-height:1.25}
.dt-tbl tbody{flex:1;display:flex;flex-direction:column}
.dt-tbl tr{flex:1 1 0;display:flex;align-items:center;gap:1.4cqw;min-height:0}
.dt-tbl tr+tr{border-top:1px dashed rgba(232,199,106,.22)}
.dt-tbl th{flex:0 0 3.4em;text-align:left;font-weight:normal;color:#b8a77a;white-space:nowrap}
.dt-tbl td{color:#e8e2d2;min-width:0}
.dt-tbl td.own{white-space:nowrap;font-size:3.1cqw}   /* 「所持・5凸・秘蔵・アニメ」が1行に収まる大きさ */
.dt-tbl .cost{display:inline-grid;place-items:center;width:5.8cqw;height:5.8cqw;border-radius:50%;font-weight:bold;color:#fbe7a6;font-size:3.4cqw;
  background:radial-gradient(circle at 50% 35%,#3a2a12,#120c04);border:1px solid #d9b45e}
.dt-tbl .dim{color:#68708a}
.dt-tbl .nw{white-space:nowrap}

/* 見出しと、紙（古文書風）の札。紙の上の文字は墨色 */
.dt-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:bold;letter-spacing:.15em;margin-bottom:6px}
.dt-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(217,185,94,.8),transparent)}
.dt-paper{
  --sumi:#2a1d08;color:var(--sumi);
  background:
    radial-gradient(130% 160% at 50% 30%, rgba(255,251,235,.55), transparent 55%),
    radial-gradient(160% 220% at 0% 0%, rgba(122,86,30,.16), transparent 42%),
    radial-gradient(160% 220% at 100% 100%, rgba(122,86,30,.20), transparent 42%),
    linear-gradient(180deg,#ecdcae,#e0cb92 55%,#d0b876);
  border:2px solid #a8813c;
  box-shadow:inset 0 0 0 1px rgba(90,60,15,.35), inset 0 0 16px rgba(105,72,22,.28), 0 3px 8px rgba(0,0,0,.5);
  padding:9px 11px;
}

/* 兵種適性: 5つの兵種の丸印に S・A・B・C の札を重ねる（色は編成画面の適性の印と同じ） */
.dt-apt{display:flex;justify-content:space-between;gap:4px}
.dt-apt .a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#6b4a15}
.dt-apt .m{position:relative;width:40px;height:40px}
.dt-apt .m .hs-chip{--s:40px;box-shadow:0 0 0 1.5px #b98b35, inset 0 0 0 2px rgba(0,0,0,.28), inset 0 2px 1px rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.4)}
.dt-apt .r{position:absolute;right:-6px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:bold;line-height:1;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 1px 3px rgba(0,0,0,.6)}
.dt-apt .r.S{--t1:#ffc46a;--t2:#b8560f}.dt-apt .r.A{--t1:#c99af0;--t2:#6a2fa8}.dt-apt .r.B{--t1:#8cc4f5;--t2:#2a5f9e}.dt-apt .r.C{--t1:#a9b29f;--t2:#4d5546}

/* 固有戦法 */
.dt-sp .top{display:flex;align-items:center;gap:7px}
.dt-sp .ty{font-size:10px;line-height:1.6;padding:0 6px;border-radius:3px;color:#fff;background:var(--tc);white-space:nowrap}
.dt-sp .nm{flex:1;min-width:0;font-size:17px;font-weight:bold;letter-spacing:.04em;line-height:1.3}
.dt-sp .rk{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:bold;line-height:1;color:#2a1d08;border:1px solid rgba(90,60,15,.5)}
.dt-sp .rk.S{background:linear-gradient(180deg,#fbe39a,#c0902e)}.dt-sp .rk.A{background:linear-gradient(180deg,#e6c8f0,#8d62a8)}.dt-sp .rk.B{background:linear-gradient(180deg,#9fd0f0,#4f7fa8)}
.dt-sp .meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:#6b4a15;margin:5px 0 6px;padding-bottom:5px;border-bottom:1px dashed rgba(122,86,30,.45)}
.dt-sp .meta b{color:var(--sumi)}
.dt-sp .ef{font-size:12.5px;line-height:1.75}
.dt-sp .none{font-size:11.5px;color:#7a5a25;line-height:1.6}

/* ステータス: レベルの操作バーと、5つの値（棒グラフ・数値・1レベルごとの伸び） */
.dt-lv{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed rgba(122,86,30,.45)}
.dt-lv .lvnum{flex-shrink:0;min-width:64px;text-align:center;font-weight:bold;line-height:1;padding:5px 6px;border-radius:4px;
  color:#f6e3a2;background:#2b241a;border:1px solid #a8813c;box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
.dt-lv .lvnum small{font-size:10px;margin-right:2px;color:#d8c68c}
.dt-lv .lvnum b{font-size:19px}
.dt-lv button{flex-shrink:0;background:none;border:none;padding:0;width:28px;height:28px;cursor:pointer;border-radius:50%;overflow:hidden}
.dt-lv button img{display:block;width:100%;height:100%;transform:scale(1.15)}
.dt-lv button:active{transform:translateY(1px)}
.dt-lv input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;min-width:0;height:8px;border-radius:4px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,#c0902e 0%,#f0d488 var(--p),#5b4a2c var(--p));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,248,220,.5);
}
.dt-lv input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#fff3c4,#c0902e 70%);border:1.5px solid #6e4c14;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.dt-lv input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#fff3c4,#c0902e 70%);border:1.5px solid #6e4c14;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.dt-st{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:6px 8px}
.dt-st .lb{font-size:12px;font-weight:bold;letter-spacing:.1em}
.dt-st .bar{height:9px;border-radius:5px;background:rgba(90,60,15,.18);box-shadow:inset 0 1px 2px rgba(0,0,0,.25);overflow:hidden}
.dt-st .bar i{display:block;height:100%;width:var(--w);border-radius:5px;background:linear-gradient(180deg,var(--b1),var(--b2));transition:width .15s}
.dt-st .v{min-width:56px;text-align:right;font-size:15px;font-weight:bold;font-variant-numeric:tabular-nums}
.dt-st .g{min-width:46px;text-align:right;font-size:10px;color:#7a5a25;white-space:nowrap}
.dt-st .bu  {--b1:#e5735f;--b2:#a3301f}
.dt-st .chi {--b1:#6fa8e8;--b2:#2a5f9e}
.dt-st .tou {--b1:#7cc489;--b2:#2e7a3c}
.dt-st .soku{--b1:#c99af0;--b2:#6a2fa8}
.dt-st .mi  {--b1:#f2a2c4;--b2:#b04a7a}
.dt-note{font-size:10.5px;color:#7a5a25;line-height:1.6;margin-top:7px}