:root{
  --bg:#1c1a17;--panel:#26231e;--line:#3a3630;--grd:#6f5b3e;--grd2:#5a4a33;
  --ink:#efe9dd;--sub:#b3a890;--p:#6fb1e0;--e:#e08a6f;--cp:#d8b84a;--hp:#7bc77b;
  /* タイポグラフィ基本 (全自己ホスト・外部通信なし): 見出し=しっぽり明朝 / 本文・UI=Noto Sans JP / 英字ロゴ=Cinzel */
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --font-head:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-logo:"Cinzel","Shippori Mincho",serif;
}
/* ===== 自己ホストフォント (assets/fonts/*.woff2) ===== */
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/nsjp-400.woff2") format("woff2")}
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/nsjp-700.woff2") format("woff2")}
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/shippori-700.woff2") format("woff2")}
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/shippori-800.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/cinzel-600.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/cinzel-700.woff2") format("woff2")}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);
  -webkit-tap-highlight-color:transparent}
/* 見出しは明朝 (しっぽり明朝)。 本文/UI は Noto Sans JP を継承。 */
h1,h2,h3,.home-title,.modal-title,.deck-title,.ds-title,.so-title,.titlebanner .tb-main{font-family:var(--font-head)}
.wrap{max-width:520px;margin:0 auto;padding:10px 10px 28px}
h1{font-size:15px;letter-spacing:.04em;margin:4px 2px 2px;font-weight:700}
.tag{font-size:11px;color:var(--sub);margin:0 2px 8px}
.screen{display:none} .screen.on{display:block}
/* start */
.hero{background:linear-gradient(180deg,#2b2722,#231f1a);border:1px solid var(--line);border-radius:12px;
  padding:18px 16px;margin:8px 0;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hero p{font-size:12px;color:var(--sub);line-height:1.7;margin:6px 0 0}
.diff{display:flex;gap:8px;margin:14px 0 4px}
.diff button{flex:1;background:#201d19;border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:10px;font-size:13px;cursor:pointer;transition:all .15s}
.diff button:hover{border-color:var(--grd);background:#272320}
.diff button.on{border-color:var(--cp);color:var(--cp);font-weight:700;
  background:#2a2417;box-shadow:0 0 8px rgba(216,184,74,.25)}
.startbtns{display:flex;gap:8px;margin-top:14px}
.install-hint{font-size:11px;color:var(--sub);margin-top:10px;text-align:center;line-height:1.5}
/* メニュー(Home): WIREFRAME 確定案。 背景プレースホルダ(menu_bg.png)の上に主動線/カプセル/隅メニューをCSSで配置。
   本素材(背景)は後差し。 一枚絵オーバーレイ方式から CSS レイアウトへ刷新。 */
/* 自前のタイトルロゴを持つので、メニュー表示中は上部の小見出しを隠す */
.wrap:has(#scStart.on) > h1, .wrap:has(#scDeck.on) > h1, .wrap:has(#scCampaign.on) > h1, .wrap:has(#scReward.on) > h1{display:none}
.home{position:relative;border-radius:12px;overflow:hidden;margin:8px 0;padding:18px 16px 16px;
  background:#15120f url("ui/common/menu_bg.webp") center/cover no-repeat;
  box-shadow:0 6px 20px rgba(0,0,0,.45);min-height:62vh;display:flex;flex-direction:column;gap:14px}
.home-logo{text-align:center;margin:6px 0 2px;max-width:calc(100% - 110px)}
.home-title{font-size:23px;font-weight:800;letter-spacing:.04em;color:var(--ink);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.home-sub{font-family:var(--font-logo);font-weight:600;font-size:14px;letter-spacing:.32em;color:var(--cp);opacity:.92;margin-top:4px}
.home-main{display:flex;flex-direction:column;gap:12px;margin-top:auto}
/* 一枚絵プレート方式のメニューボタン。 文字は素材に焼き込み済 (.vh で読み上げ用テキストのみ保持)。 */
.hbtn{display:block;width:100%;border:0;background:none;padding:0;cursor:pointer;line-height:0;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));transition:transform .1s,filter .15s}
.hbtn .hbtn-img{display:block;width:100%;height:auto;pointer-events:none}
.hbtn:hover{transform:translateY(-2px);filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)) brightness(1.06)}
.hbtn:active{transform:translateY(0)}
.hbtn:focus-visible{outline:2px solid var(--cp);outline-offset:3px;border-radius:8px}
.hbtn[disabled]{pointer-events:none}
.hbtn-capsule{width:68%;margin-left:auto;margin-right:auto}
/* 隅の設定/ヘルプは小さい正方形プレートで右上に配置 (絶対配置) */
.home-corner{position:absolute;top:12px;right:12px;display:flex;gap:8px;margin:0;z-index:3}
.hbtn-sm{border:0;background:none;padding:0;cursor:pointer;line-height:0;width:42px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));transition:transform .1s,filter .15s}
.hbtn-sm .hbtn-img{display:block;width:100%;height:auto;pointer-events:none}
.hbtn-sm:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) brightness(1.08)}
.hbtn-sm:active{transform:translateY(0)}
.hbtn-sm:focus-visible{outline:2px solid var(--cp);outline-offset:3px;border-radius:8px}
/* スクリーンリーダー用に保持する非表示テキスト */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== PC(広い画面): メニュー/デッキ編成/討伐ロードを「バトル画面」と同じ footprint に統一 =====
   バトルは .bstage(1920×1080) をビューポートに等倍スケールしたフルスクリーン 16:9 ステージ。
   ここでは menu/deck/campaign の .wrap を同じ「16:9・ビューポート中央レターボックス」にして、
   画面遷移しても見かけの幅・高さが変わらないようにする。 他画面 (設定/ヘルプ等) は 520px のまま。 */
@media (min-width:760px){
  body.deck-on, body.campaign-on, body.reward-on, body:has(#scStart.on){overflow:hidden}
  body.deck-on .wrap,
  body.campaign-on .wrap,
  body.reward-on .wrap,
  .wrap:has(#scStart.on){
    position:fixed; inset:0; margin:auto; max-width:none; padding:0;
    width:min(100vw, calc(100vh * 16 / 9));
    height:min(100vh, calc(100vw * 9 / 16));
    display:flex; flex-direction:column}
  /* 表示中スクリーンをステージいっぱいに伸ばす */
  .wrap:has(#scStart.on) #scStart.on,
  body.deck-on #scDeck.on,
  body.reward-on #scReward.on,
  body.campaign-on #scCampaign.on{
    flex:1; min-height:0; margin:0; display:flex; flex-direction:column}
  #scReward.on{margin:0; border-radius:0; padding:14px 18px}

  /* --- メニュー: 16:9 枠を満たし背景画像(menu_bg)を全面表示。主動線は下部、隅メニューは右上 --- */
  .home{flex:1; min-height:0; height:auto; margin:0; border-radius:0;
    padding:32px 44px 38px; gap:22px; justify-content:flex-end}
  /* PCでは背景(menu_bg.png)に焼き込まれたタイトルが見えるので、 HTMLタイトルは隠して二重表示を防ぐ */
  .home-logo{display:none}
  .home-main{flex-direction:row; gap:22px; margin-top:auto;
    width:88%; max-width:1080px; margin-left:auto; margin-right:auto}
  .home-main .hbtn{flex:1 1 0; min-width:0}
  #toCapsule{width:100%; max-width:500px; margin:4px auto 0}
  .home-corner{top:18px; right:22px; gap:10px}
  .hbtn-sm{width:50px}

  /* --- デッキ編成: ステージを満たす (縦は元から 100vh 設計) --- */
  #scDeck.on{margin:0; border-radius:0; padding:10px 14px}
  .deck{height:100%}

  /* --- 討伐ロード: ステージを満たし、ステージ一覧だけをスクロール --- */
  #scCampaign.on{margin:0; border-radius:0; padding:18px 22px}
  body.campaign-on #scCampaign .hero{flex:1; min-height:0; display:flex; flex-direction:column; margin:0}
  body.campaign-on #campaignList{flex:1; min-height:0; overflow:auto}
}

/* 難易度ポップアップ(モーダル)。 デッキ画面と同じ一枚絵(9スライス)素材で統一。 */
.modal-scrim{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(16,14,12,.62);backdrop-filter:blur(1.5px)}
.modal-scrim[hidden]{display:none}
/* 枠はユニット一覧/ヒーロー詳細と同じ革地フレーム(detail_frame)。 */
.modal-card{width:100%;max-width:420px;border:16px solid transparent;border-radius:0;
  border-image:url('img/ui/detail_frame.webp') 84 fill/16px stretch;
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
/* ヘッダ帯はデッキ上部と同じ革地プレート(header_plate)。 タイトルが窮屈にならないよう内側に余白。 */
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:13px solid transparent;border-radius:0;margin:-4px -6px 10px;padding:4px 14px;
  border-image:url('img/ui/header_plate.webp') 56 fill/13px stretch}
.modal-title{font-size:16px;font-weight:800;color:#f0e6cf;text-shadow:0 1px 2px rgba(0,0,0,.6);line-height:1.3}
.modal-sub{font-family:ui-monospace,monospace;font-size:10px;color:#c9bfa8;margin-top:3px}
.modal-x{border:6px solid transparent;border-radius:0;background:none;color:#c9bfa8;
  width:30px;height:28px;cursor:pointer;font-size:13px;line-height:1;
  border-image:url('img/ui/cat_normal.webp') 56 fill/6px stretch}
.modal-x:hover{border-image-source:url('img/ui/cat_selected.webp');color:#dce8f5}
/* 「作戦終了 → 行動開始」 確認ポップアップ。 革枠 + 発光する剣エンブレム + ポップイン演出で
   native confirm を置き換える。 スクリムは modal-scrim を流用 (hidden 属性で開閉)。 */
.endplan-scrim{z-index:60;background:rgba(12,10,8,.66);backdrop-filter:blur(2px);
  animation:endplanFade .18s ease-out}
.endplan-card{position:relative;width:100%;max-width:360px;padding:30px 26px 24px;text-align:center;
  border:16px solid transparent;border-radius:0;
  border-image:url('img/ui/detail_frame.webp') 84 fill/16px stretch;
  box-shadow:0 16px 44px rgba(0,0,0,.6);animation:endplanPop .26s cubic-bezier(.2,1.3,.35,1)}
.endplan-emblem{font-size:40px;line-height:1;margin-bottom:10px;color:#ffe08a;
  text-shadow:0 0 10px rgba(255,200,90,.9),0 0 22px rgba(255,170,60,.55);
  animation:endplanEmblem 1.6s ease-in-out infinite}
.endplan-title{font-family:var(--font-head);font-size:22px;font-weight:800;color:#f2e6c6;
  letter-spacing:.06em;text-shadow:0 2px 4px #000;margin-bottom:6px}
.endplan-msg{font-size:14px;color:#d7ccb2;margin-bottom:20px;line-height:1.5}
.endplan-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.endplan-btns .bbtn{min-width:130px;font-size:17px;padding:13px 20px;min-height:46px}
@keyframes endplanFade{from{opacity:0}to{opacity:1}}
@keyframes endplanPop{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes endplanEmblem{0%,100%{text-shadow:0 0 8px rgba(255,200,90,.7),0 0 16px rgba(255,170,60,.4);transform:scale(1)}
  50%{text-shadow:0 0 14px rgba(255,220,120,1),0 0 30px rgba(255,180,70,.7);transform:scale(1.08)}}
.diff-cards{display:flex;flex-direction:column;gap:6px;padding:0 2px}
/* 各難易度カード: カテゴリタブ/ユニット枠と同じプレート(cat_normal→選択でcat_selected)。 */
.diff-cards button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:11px solid transparent;border-radius:0;background:none;color:#c9bfa8;
  cursor:pointer;transition:filter .12s}
.diff-cards button{border-image:url('img/ui/cat_normal.webp') 56 fill/11px stretch}
.diff-cards button:hover{border-image-source:url('img/ui/cat_selected.webp');color:#dce8f5}
.diff-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.diff-ic .uicon{width:22px;height:22px;vertical-align:0}
.diff-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.diff-cards button b{font-size:14px}
.diff-stars{font-size:9px;letter-spacing:-1px;color:#e6c655}
.diff-cards button small{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--sub)}
.diff-cards button:hover small{color:#bcd0f2}
/* ===== deck = カプセル (案A: 横画面・左リスト/右ヒーロー/下ストリップ) ===== */
/* 長押し (詳細シート表示) でスマホの文字選択・コピーメニューが起動しないよう抑制。
   一覧・デッキ枠・詳細シートは操作面なので文字選択させない (継承で子要素にも効く)。 */
#ulist, .deck-slots, #deckHero, #deckPresets{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.deck{display:flex;flex-direction:column;gap:8px;height:calc(100vh - 40px)}
/* ヘッダ帯: 一枚絵プレート(01)。 */
.deck-top{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  border:13px solid transparent;border-radius:0;padding:4px 14px;
  border-image:url('img/ui/header_plate.webp') 56 fill/13px stretch}
.deck-back{width:34px;height:30px;border:6px solid transparent;border-radius:0;
  border-image:url('img/ui/cat_normal.webp') 56 fill/6px stretch;
  background:none;color:#c9bfa8;font-size:18px;cursor:pointer;line-height:1}
.deck-back:hover{border-image-source:url('img/ui/cat_selected.webp');color:#dce8f5}
.deck-title{font-size:16px;font-weight:800}
.deck-stage{font-size:11px;color:var(--cp);margin-left:4px}

.deck-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(324px,500px) 1fr;gap:10px}
/* ユニット一覧の外枠: ヒーロー詳細と同じ一枚絵(11)で統一。 fill で枠本来の革地を中央まで描画。 */
.deck-listwrap{display:flex;flex-direction:column;gap:6px;min-height:0;
  border:16px solid transparent;border-radius:0;
  border-image:url('img/ui/detail_frame.webp') 84 fill/16px stretch;padding:4px 6px}
.deck-controls{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
/* 検索窓＋並び替えを同一行に。 並び替えも検索窓と同じ一枚絵(05)枠で統一。 */
.deck-searchrow{display:flex;gap:5px;align-items:stretch}
/* 検索枠: 一枚絵プレート(05)。 高さ圧縮のため枠/余白を薄く。 */
.deck-search{flex:1;min-width:0;border:6px solid transparent;border-radius:0;
  border-image:url('img/ui/search_box.webp') 56 fill/6px stretch;
  background:none;color:var(--ink);padding:2px 10px 2px 26px;font-size:12px}
.deck-search::placeholder{color:#9c9484}
.deck-chips{display:flex;gap:4px;flex-wrap:wrap}
/* カテゴリタブ: 一枚絵プレート(07)を border-image(9スライス)で。 通常=暗/選択中=青。 高さ圧縮。 */
.deck-chips button,.cat-btn{padding:2px 10px;border:6px solid transparent;border-radius:0;
  border-image:url('img/ui/cat_normal.webp') 56 fill/6px stretch;
  background:none;color:#c9bfa8;font-size:11px;font-weight:700;cursor:pointer;line-height:1.4}
.deck-chips button.on,.cat-btn:hover{border-image-source:url('img/ui/cat_selected.webp');color:#dce8f5}
.cat-btn-del{color:var(--e)} .cat-btn-empty{color:var(--sub)}
/* プリセット: 読込ボタン本体 + 右上角に重なる丸い×バッジ (別ボタンに見えない「このプリセットを消す」UI)。 */
.ds-preset-pair{position:relative;display:inline-block}
.ds-preset-pair .ds-preset-load{padding-right:16px}
.ds-preset-del{position:absolute;top:-5px;right:-5px;z-index:2;width:17px;height:17px;padding:0;
  display:flex;align-items:center;justify-content:center;border:1px solid #1a0f0f;border-radius:50%;
  background:var(--e);color:#fff;font-size:12px;font-weight:700;line-height:1;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.6)}
.ds-preset-del:hover{filter:brightness(1.25)}
/* UI アイコンセット (一枚絵, 緑クロマキー除去済み)。 inline-block 背景でテキストに添える。 */
.uicon{display:inline-block;width:1.25em;height:1.25em;vertical-align:-0.28em;flex:0 0 auto;
  background-size:contain;background-repeat:no-repeat;background-position:center}
.uicon-search{background-image:url('img/ui/icons/search.webp')}
.uicon-caret{background-image:url('img/ui/icons/caret.webp')}
.uicon-refresh{background-image:url('img/ui/icons/refresh.webp')}
.uicon-trash{background-image:url('img/ui/icons/trash.webp')}
.uicon-hp{background-image:url('img/ui/icons/heart.webp')}
.uicon-str{background-image:url('img/ui/icons/sword.webp')}
.uicon-cp{background-image:url('img/ui/icons/target.webp')}
.uicon-speed{background-image:url('img/ui/icons/boot.webp')}
.uicon-swords{background-image:url('img/ui/icons/swords.webp')}
.uicon-melee{background-image:url('img/ui/icons/sword.webp')}
.uicon-ranged{background-image:url('img/ui/icons/bow.webp')}
.uicon-heal{background-image:url('img/ui/icons/sparkle.webp')}
.uicon-place{background-image:url('img/ui/icons/shield.webp')}
/* 検索枠の虫眼鏡 / ソートの▽ を枠内に重ねる (border-image の上に出すため別要素+絶対配置) */
.search-wrap{position:relative;flex:1;min-width:0;display:flex}
.search-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none;z-index:2}
.sort-wrap{position:relative;display:inline-flex;flex:0 0 auto}
.sort-caret{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:12px;height:12px;pointer-events:none;z-index:2}
.deck-sort{flex:0 0 auto;border:6px solid transparent;border-radius:0;
  border-image:url('img/ui/search_box.webp') 56 fill/6px stretch;
  background:none;color:var(--ink);padding:2px 24px 2px 8px;font-size:12px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none}
.deck-sort option{background:#15120f;color:var(--ink)}
/* 昇順/降順トグル: ソート枠と同じプレートで、▲/▼ を切り替える正方ボタン。 */
.deck-sortdir{flex:0 0 auto;border:6px solid transparent;border-radius:0;
  border-image:url('img/ui/search_box.webp') 56 fill/6px stretch;
  background:none;color:var(--ink);padding:0 6px;min-width:30px;font-size:12px;
  font-weight:700;cursor:pointer;line-height:1}
.deck-sortdir:hover{color:#dce8f5}
.ulist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
/* ユニット枠: カテゴリタブと同じ一枚絵プレート(07)。 通常=暗/ホバー・選択中=青。 */
.drow{display:flex;align-items:center;gap:9px;padding:3px 7px;cursor:pointer;
  border:11px solid transparent;border-radius:0;
  border-image:url('img/ui/cat_normal.webp') 56 fill/11px stretch}
.drow.sel{border-image-source:url('img/ui/cat_selected.webp')}
.drow.in .drow-name{color:#ffd76b}
.drow.locked{opacity:.5}
/* 一覧アバター: カプセルが主役なので大きく目立たせる (旧30px→46px)。 */
.drow-av{flex:0 0 auto;width:46px;height:46px;border-radius:9px;display:flex;overflow:hidden;
  align-items:center;justify-content:center;font-size:24px;background:#15120f;border:1.5px solid var(--line)}
.drow-av.silh{filter:grayscale(1) brightness(.6)}
.caps-img{display:block;flex:0 0 auto}
.drow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.drow-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow-stars{font-size:9px;letter-spacing:-1px}
.drow-cp{flex:0 0 auto;font-family:ui-monospace,monospace;font-size:10px;color:var(--p);
  border:1px solid #2f4660;border-radius:5px;padding:1px 6px;background:#16202c}
.drow-cnt{flex:0 0 auto;width:30px;text-align:right;font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:700;color:#6b6357}
.drow-cnt.has{color:var(--hp)}
.drow-add{flex:0 0 auto;width:26px;height:26px;border-radius:7px;border:1px solid var(--p);
  background:#16202c;color:var(--p);font-size:16px;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.drow-add:hover:not(:disabled){background:var(--p);color:#0c1014}
.drow-add:disabled{opacity:.3;cursor:default}
.drow-rem{flex:0 0 auto;width:26px;height:26px;border-radius:7px;border:1px solid #7a8aa0;
  background:#16202c;color:#9fb0c4;font-size:16px;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.drow-rem:hover:not(:disabled){background:#7a8aa0;color:#0c1014}
.drow-rem:disabled{opacity:.3;cursor:default}

/* 右ヒーロー詳細 (左=立ち絵 / 右=名前〜フレーバー / 下=所持・追加フッター)。 枠は一枚絵(11)。
   fill で枠本来の革地を中央まで描画。 */
.deck-hero{border:22px solid transparent;border-radius:0;
  border-image:url('img/ui/detail_frame.webp') 84 fill/22px stretch;
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.deck-hero .hero-empty{margin:auto;color:var(--sub);font-size:13px}
.hero-body{flex:1;min-height:0;display:flex;gap:12px;padding:12px}
/* 立ち絵は箱を画像比 (600x750=4/5) に合わせ、 その幅ぶんだけ左カラムが占有する。
   固定 52% をやめて画像実寸に縮めることで、 余った横幅はステータス側 (.hero-right) に回る。
   高さ基準で幅が決まる (0.8×高さ)。 上限 380px までは伸ばす。 */
.hero-left{flex:0 1 auto;max-width:380px;min-height:0;display:flex;align-items:center;justify-content:center}
.hero-art{flex:0 1 auto;height:100%;width:auto;aspect-ratio:4/5;max-width:100%;max-height:100%;
  min-height:0;border-radius:10px;background:#15120f;border:1px solid var(--line);overflow:hidden}
.hero-art.place{background-position:center;background-size:contain;background-repeat:no-repeat}
/* カード全身イラスト(600x750=縦長)は cover だと縦長コンテナで左右が切れるため contain で全体を見せる
   (背景色が額縁になる)。 上寄せで顔が切れないようにする。 */
.hero-art.detail{background-size:contain;background-position:center top;background-repeat:no-repeat}
.hero-art.emoji{display:flex;align-items:center;justify-content:center;font-size:90px}
.hero-art.silh{filter:brightness(0) opacity(.45)}
.hero-right{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column}
/* 中身は縦中央寄せ。 margin:auto なのでオーバーフロー時も上端が切れずスクロールできる。 */
.hero-rbody{margin:auto 0;display:flex;flex-direction:column;gap:8px}
.hero-namebar{flex:0 0 auto}
.hero-name{font-size:19px;font-weight:800;color:var(--cp)}
.hero-stars{font-size:12px;margin-left:6px;letter-spacing:-1px}
.hero-no{display:block;font-family:ui-monospace,monospace;font-size:10px;color:var(--sub);margin-top:2px}
.hero-no .uicon{width:13px;height:13px;vertical-align:-0.22em;margin:0 3px 0 1px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:0 0 auto}
.hero-stats>div{border:6px solid transparent;border-radius:0;
  border-image:url('img/ui/cat_normal.webp') 56 fill/6px stretch;
  background:none;padding:4px 0;text-align:center;font-size:10px;color:#c9bfa8}
.hero-stats>div span{display:inline-flex;align-items:center;justify-content:center;gap:3px}
.hero-stats>div span .uicon{width:13px;height:13px;vertical-align:middle}
.hero-stats>div b{display:block;font-size:16px;color:var(--ink);margin-top:2px}
.hero-stats>div b small{font-size:9px;color:var(--cp);font-weight:400}
.hero-ab .hero-lbl{font-size:11px;font-weight:700;color:var(--cp);margin-bottom:3px}
.hero-ab ul{margin:0;padding-left:18px;font-size:12px;line-height:1.55}
.hero-ab li.muted{color:var(--sub);list-style:none;margin-left:-18px}
.hero-lore{font-size:11.5px;color:var(--sub);line-height:1.5;
  border-left:2px solid var(--line);padding-left:9px}
/* フッターは1行なので縦は詰められるだけ詰め、 その分を本文 (フレーバー) の表示高さに回す。 */
.hero-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:5px 12px;border-top:1px solid var(--line)}
.hero-foot .hero-own{font-size:12px;color:var(--ink);font-weight:700}
.hero-foot .hero-limit{color:var(--accent,#c0392b);font-weight:700}
.hero-foot .go{margin-left:auto}

/* 下デッキストリップ: ヒーロー詳細と同じ一枚絵(11)で統一。 fill で枠本来の革地を中央まで描画。
   高さ圧縮のため border-width / padding / gap を薄く。 */
.deck-strip{flex:0 0 auto;border:13px solid transparent;border-radius:0;
  border-image:url('img/ui/detail_frame.webp') 84 fill/13px stretch;
  padding:4px 12px;display:flex;flex-direction:column;gap:5px}
.deck-striphead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ds-title{font-size:13px;font-weight:800;color:var(--p)} .ds-title b{color:var(--ink)}
.ds-presets{display:flex;flex-wrap:wrap;gap:4px;font-size:11px}
/* プリセットのプルダウン枠: PC では details を「無いもの」として扱い (display:contents)、
   中の #deckPresets を従来どおり striphead に直接並べる。 summary は隠す。
   スマホ縦だけ折りたたみ式に切り替える (下のメディアクエリで上書き)。 */
.ds-presets-dd{display:contents}
.ds-presets-sum{display:none}
.ds-sp{flex:1}
/* 高さ圧縮: スロットを最大46pxの正方に抑えて中央寄せ(狭幅では縮む)。 */
.deck-slots{display:grid;grid-template-columns:repeat(20,minmax(0,54px));gap:4px;justify-content:center}
.dslot{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:15px;overflow:hidden}
/* 充填枠: 設置済みカード(16 青ネオン枠)を土台に、 その上へカプセル絵を直接載せる。 */
.dslot.filled{background:url('img/ui/deck_slot_filled.webp') center/cover no-repeat;
  cursor:pointer;transition:filter .12s}
.dslot.filled:hover{filter:brightness(1.15)}
/* 卵の背景サイズ/位置は capsuleStripStyle が per-key ズーム込みで % 指定する (CSS では固定しない)。
   ここでは要素サイズ (枠の 76%) だけ固定する。 */
.dslot.filled .caps-img{width:90%!important;height:90%!important}
/* 空き枠: 一枚絵(16 デッキスロット＋カード・正方版)。正方なので cover で枠いっぱい。
   充填枠と濃さを揃えるため opacity は使わず原色のまま。 */
.dslot.empty{background:url('img/ui/deck_slot_plus.webp') center/cover no-repeat;
  font-size:0;cursor:pointer;transition:filter .12s}
.dslot.empty:hover{filter:brightness(1.15)}

/* レア度カラー (1=基本 … 5=伝説): リスト/ヒーローのスター・アバター枠に反映 */
.drow-stars.r1,.hero-stars.r1{color:#8f8f8f}
.drow-stars.r2,.hero-stars.r2{color:#7bc77b}
.drow-stars.r3,.hero-stars.r3{color:#6fb1e0}
.drow-stars.r4,.hero-stars.r4{color:#c34bd6}
.drow-stars.r5,.hero-stars.r5{color:#d8b84a}
.drow-av.r2{border-color:#3c6b3c}.drow-av.r3{border-color:#356a96}
.drow-av.r4{border-color:#7c3a8c}.drow-av.r5{border-color:#8c7320}

.reward-card .ci,.card .ci{font-size:26px;line-height:1.1}

/* ===== リザルト (WIREFRAME.md 6番): バナー＋左カプセル＋右詳細。 他画面と同じ革地UI素材で統一 ===== */
.result{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
/* バナー: デッキ上部と同じ革地プレート(header_plate)。 勝敗で WIN/LOSE 文字色だけ出し分け。 */
.result-banner{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:13px solid transparent;border-radius:0;
  border-image:url('img/ui/header_plate.webp') 56 fill/13px stretch;
  padding:6px clamp(20px,3.5vw,56px)}
.result-banner .rb-main{display:flex;align-items:baseline;gap:14px;min-width:0}
.rb-title{font-family:var(--font-logo);font-size:34px;font-weight:700;letter-spacing:.08em;line-height:1.1;
  color:#e7dcc2;text-shadow:0 2px 3px rgba(0,0,0,.6)}
.result-banner[data-tone="win"] .rb-title{color:var(--hp)}
.result-banner[data-tone="lose"] .rb-title{color:var(--e)}
.result-banner[data-tone="draw"] .rb-title{color:var(--cp)}
.rb-cond{font-size:13px;font-weight:700;color:#e7dcc2;text-shadow:0 1px 2px rgba(0,0,0,.6);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 試合サマリ: ターン数＋CP(味方/敵を色で明示) */
.rb-stats{flex:0 0 auto;display:flex;align-items:center;gap:16px;
  font-size:12px;color:#cdbf9a;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap}
.rb-stats .rb-cp{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.rb-stats .rb-cp b{font-size:15px}
.rb-stats .rb-you b{color:var(--p)}
.rb-stats .rb-enemy b{color:var(--e)}
.rb-stats .rb-vs{color:#8a8170}
.rb-stats .rb-turn b{color:#e7dcc2;font-size:14px}

/* 本体2カラム: 左=獲得カプセル / 右=詳細 */
.result-cols{flex:1;min-height:0;display:flex;gap:14px}
/* 左パネル: ユニット一覧/詳細と同じ革地フレーム(detail_frame) */
.result-caps{flex:0 0 40%;max-width:430px;min-height:0;display:flex;flex-direction:column;gap:10px;
  border:16px solid transparent;border-radius:0;
  border-image:url('img/ui/detail_frame.webp') 84 fill/16px stretch}
/* 見出し帯: 青ヘッダプレート */
.rc-head{flex:0 0 auto;align-self:flex-start;border:7px solid transparent;border-radius:0;
  border-image:url('img/ui/panel_header_blue.webp') 30 fill/7px stretch;
  padding:1px 14px;font-size:13px;font-weight:700;color:#e7f0fb;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* 獲得カプセルは中央寄せ (枚数が少なくても左上に偏らない)。 はみ出す時は safe で上端を死守。 */
/* 横スクロールを避けるため最大2列に固定 (3個なら上2・下1)。 幅は2枚ぶんに制限して中央寄せ。
   衝撃波が枠外へ出るので overflow-x はクリップして横スクロールを出さない。 */
.rc-grid{flex:1;min-height:0;align-self:center;width:min(100%,330px);
  display:flex;flex-wrap:wrap;justify-content:center;align-content:safe center;
  gap:12px;overflow-x:clip;overflow-y:auto;padding:10px 4px}
.rc-empty{margin:auto;text-align:center;color:var(--sub);font-size:12px;line-height:1.7}
/* カプセル枠 (スロット): 最初から表示。 カテゴリ枠と同じプレート(cat_normal→選択でcat_selected) */
.rcap{flex:0 0 144px;width:144px;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  border:8px solid transparent;border-radius:0;
  border-image:url('img/ui/cat_normal.webp') 56 fill/8px stretch;
  background:none;color:var(--ink);cursor:pointer;transition:transform .1s,filter .1s}
.rcap:hover{transform:translateY(-2px);filter:brightness(1.08)}
.rcap.sel{border-image:url('img/ui/cat_selected.webp') 56 fill/8px stretch}
.rcap.pending{cursor:default}
/* カプセル画像を主役に大きく */
.rcap-img{width:116px;height:116px;display:flex;align-items:center;justify-content:center;font-size:74px}
.rcap-img .caps-img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
/* 空きスロット中は中身を隠す (枠だけ置いておく) */
.rcap.pending .rcap-img,.rcap.pending .rcap-name,.rcap.pending .rcap-stars,
.rcap.pending .rcap-new,.rcap.pending .rcap-x{opacity:0}
/* 「ズン……」演出: 枠は固定のまま、カプセル単体が上から落ちて着地で潰れて弾む */
.rcap.filled .rcap-img{animation:capDropIn .72s cubic-bezier(.22,.6,.25,1) both}
.rcap.filled .rcap-name,.rcap.filled .rcap-stars,
.rcap.filled .rcap-new,.rcap.filled .rcap-x{animation:capLabelIn .34s ease .42s both}
@keyframes capDropIn{
  0%{opacity:0;transform:translateY(-120px) scale(1.5)}
  14%{opacity:1}
  56%{transform:translateY(0) scale(1.45)}       /* ゆっくり落下して着地 */
  70%{transform:translateY(0) scale(.8,1.2)}     /* 着地の潰れ */
  84%{transform:translateY(0) scale(1.08,.93)}   /* 弾み返し */
  100%{transform:translateY(0) scale(1)}
}
@keyframes capLabelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* 着地の衝撃波 (足元のリング)。 fill しないので終了後は base(opacity:0) に戻りはみ出さない。 */
.rcap::after{content:"";position:absolute;left:50%;bottom:10px;width:84px;height:18px;opacity:0;
  transform:translateX(-50%) scale(.2);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(216,184,74,.55),rgba(216,184,74,0) 70%)}
.rcap.filled::after{animation:capShock .72s ease-out}
@keyframes capShock{0%,58%{opacity:0;transform:translateX(-50%) scale(.2)}
  72%{opacity:.85;transform:translateX(-50%) scale(.95)}
  100%{opacity:0;transform:translateX(-50%) scale(2.8)}}
@media (prefers-reduced-motion:reduce){
  .rcap.filled .rcap-img,.rcap.filled .rcap-name,.rcap.filled .rcap-stars,
  .rcap.filled .rcap-new,.rcap.filled .rcap-x{animation-duration:.01s;animation-delay:0s}
  .rcap.filled::after{display:none}
  /* 戦闘演出の動き酔い配慮: 画面を揺らすシェイクと、 無限ループのパルス系を止める。
     ダメージ数字・着弾バースト等の「一発で情報を伝える」 演出は残す (消すと盤面が読めなくなるため)。
     停止しても各要素は基底スタイルで静止表示されるので、 卵・攻撃対象・選択中の視認性は保たれる。 */
  .boardwrap.shake-sm,.boardwrap.shake-md,.boardwrap.shake-lg{animation:none}
  .hatching{animation:none}
  .gcell.strike{animation:none}
  .planaura,.planmark-img{animation:none}
}
.rcap-name{font-size:11px;line-height:1.2;text-align:center;color:var(--ink);font-weight:700}
.rcap-stars{font-size:10px;letter-spacing:-1px}
.rcap-new{position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:1;
  padding:1px 8px;border-radius:8px;background:#b03a2a;color:#fff;
  font-family:ui-monospace,monospace;font-size:8px;font-weight:700;letter-spacing:.5px;
  box-shadow:0 1px 3px rgba(0,0,0,.5)}
.rcap-x{position:absolute;top:7px;right:8px;z-index:1;font-family:ui-monospace,monospace;
  font-size:11px;font-weight:700;color:var(--cp);text-shadow:0 1px 2px #000}
/* 右詳細: deck-hero をそのまま流用 (.result-detail で枠だけ確保) */
.result-detail{flex:1;min-width:0}
/* 大ウインドウで縦に伸びて立ち絵の左右が切れないよう、 4:5 (素材600×750) を維持して縦中央寄せ。 */
.result-detail .hero-left{flex:0 0 auto;align-self:center;width:min(42%,320px);max-width:320px}
.result-detail .hero-art{flex:0 0 auto;width:100%;height:auto;aspect-ratio:4/5;max-height:100%}

/* 下部ボタン: デッキ画面と同じ素材 (もう一度=btn_primary / メニュー=cat_normal) */
.result-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.result-foot .go{flex:0 0 auto;min-width:160px;border:11px solid transparent;border-radius:0;
  background:none;box-shadow:none;color:#e7f0fb;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap;
  border-image:url('img/ui/btn_primary.webp') 56 fill/11px stretch}
.result-foot .go:hover{filter:brightness(1.1)}
.result-foot .go.ghost{min-width:140px;color:#e7dcc2;
  border-image:url('img/ui/cat_normal.webp') 56 fill/11px stretch}
.result-foot .go.ghost:hover{background:none;filter:brightness(1.1)}

/* スマホ縦: 1カラムに畳む (520px wrap のまま) */
@media (max-width:759px){
  #scReward{padding:0}
  .result{gap:10px}
  .result-banner{flex-wrap:wrap;gap:6px 14px}
  .result-cols{flex-direction:column}
  .result-caps{flex:0 0 auto;max-width:none;max-height:42vh}
  .result-detail{flex:0 0 auto;min-height:300px}
  .rb-title{font-size:28px}
  .result-foot .go,.result-foot .go.ghost{min-width:0;flex:1}
}

/* battle */
.side{display:flex;justify-content:space-between;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;margin:5px 0;font-size:13px}
.side .nm{font-weight:700}.side.P .nm{color:var(--p)}.side.E .nm{color:var(--e)}
.stat{display:flex;gap:14px;font-variant-numeric:tabular-nums}
.stat b{color:var(--cp)}.stat i{color:var(--hp);font-style:normal}
.phase{text-align:center;font-size:12px;color:var(--sub);margin:6px 0 2px;min-height:16px}
/* ===== 原作風: フィールド主体の単一ウィンドウ ===== */
.gamewin{max-width:600px;margin:6px auto;border:2px solid #0b0907;border-radius:8px;
  overflow:hidden;background:#0b0907;box-shadow:0 8px 28px rgba(0,0,0,.55)}
.menubar{display:flex;align-items:center;gap:6px;padding:4px 7px;font-size:12px;
  background:linear-gradient(#3c372f,#2a2620);border-bottom:1px solid #0b0907}
.menubar .mb-name{color:#cdbf9a;font-weight:700;font-size:11px;margin-right:4px}
.mb-btn{background:#211d18;color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:4px 10px;font-size:12px;cursor:pointer}
.mb-btn.go{background:var(--cp);color:#241f10;border:0;font-weight:800}
.mb-btn:active{transform:translateY(1px)}
.mb-sp{flex:1}
.mb-clock{font-size:12px;font-weight:700;color:#ffe;font-variant-numeric:tabular-nums;
  cursor:pointer;padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.25);min-width:46px;text-align:center}

/* 原作パース盤面: 背景画像 (奥行きグリッド込み) + SVG オーバーレイ */
.boardwrap{position:relative;width:100%;aspect-ratio:640/480;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%, #3b4a66 0%, #232c3e 55%, #161c28 100%)}
/* CP / タワー (フィールド左上にオーバーレイ。原作は computer/demo を左に重ねる) */
.cpov{position:absolute;top:5px;left:6px;display:flex;flex-direction:column;gap:3px;z-index:3}
.cprow{font-size:11px;font-weight:700;color:#fff;background:rgba(10,8,6,.55);
  border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:2px 7px;
  text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums;white-space:nowrap}
.cprow .nm{font-size:9px;padding:0 4px;border-radius:3px;margin-right:2px}
.cprow.com .nm{background:#9c4a3a;color:#ffd9cf}.cprow.you .nm{background:#3a5a8c;color:#cfe0ff}
.cprow b{color:var(--cp)}.cprow i{font-style:normal;color:var(--hp)}
.cprow .tw{opacity:.85;margin-left:4px}
.phaseov{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:11px;
  color:#ffe;text-shadow:0 1px 3px #000,0 0 4px #000;pointer-events:none;z-index:2}
.hintov{position:absolute;left:8px;right:8px;bottom:60px;text-align:center;font-size:10px;
  color:#fff;background:rgba(10,8,6,.5);border-radius:6px;padding:2px 7px;
  text-shadow:0 1px 2px #000;pointer-events:none;z-index:3;line-height:1.4}
.hintov:empty{display:none}
.logov{display:none}  /* 原作にテキストログは無いので隠す (engine の log() は no-op 同然) */
/* 手札: フィールド直下にカプセルを横並び (フィールドと干渉しない sibling 配置) */
.handov{position:relative;display:flex;gap:4px;justify-content:center;
  flex-wrap:nowrap;overflow-x:auto;padding:5px 6px 4px;margin-top:4px;
  -webkit-overflow-scrolling:touch}
.handov .card{flex:0 0 auto;width:62px;min-width:62px;padding:6px 4px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,18,14,.88);border:1px solid var(--line)}
.handov .card.sel{border-color:var(--cp);box-shadow:0 0 0 1px var(--cp)}
.handov .card .ci{font-size:32px;line-height:1.1}
#boardsvg{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
/* セル多角形 (クリック判定 + 枠) */
.gcell{fill:#ffffff;fill-opacity:.001;stroke:rgba(170,200,255,.22);stroke-width:1;
  cursor:pointer;pointer-events:all}
.gcell.sm{fill:rgba(216,184,74,.28);stroke:var(--cp);stroke-width:1.5}  /* 召喚可能マス */
/* 移動範囲 (緑) / 攻撃範囲 (赤) の縁取り。 発光する縁 (drop-shadow) + ゆっくりした脈動で
   「光っている枠」 に見せる。 塗りは控えめにして、 光る縁を主役にする。 */
.gcell.mv{fill:rgba(105,200,110,.22);stroke:#8bffab;stroke-width:2.6;
  filter:drop-shadow(0 0 3px rgba(120,255,160,.85));animation:rangeGlowMv 1.5s ease-in-out infinite}
.gcell.at{fill:rgba(220,90,80,.22);stroke:#ff9384;stroke-width:2.6;
  filter:drop-shadow(0 0 3px rgba(255,110,92,.85));animation:rangeGlowAt 1.5s ease-in-out infinite}
@keyframes rangeGlowMv{0%,100%{filter:drop-shadow(0 0 2px rgba(120,255,160,.45));stroke-opacity:.8}
  50%{filter:drop-shadow(0 0 6px rgba(120,255,160,1));stroke-opacity:1}}
@keyframes rangeGlowAt{0%,100%{filter:drop-shadow(0 0 2px rgba(255,110,92,.45));stroke-opacity:.8}
  50%{filter:drop-shadow(0 0 6px rgba(255,110,92,1));stroke-opacity:1}}
/* 移動予定マス (= 攻撃しない目印)。 攻撃範囲の赤とはっきり区別するため、 緑の点線縁取り +
   ゆるい発光にする (自マス待機も別マスへの移動も同じ緑点線)。 塗りはごく薄く。 */
.gcell.mvdest{fill:rgba(105,200,110,.10);stroke:#8bffab;stroke-width:2.6;stroke-dasharray:6 4;
  filter:drop-shadow(0 0 3px rgba(120,255,160,.85));animation:rangeGlowMv 1.5s ease-in-out infinite}
/* 盤外への攻撃指定用の透明クリック領域 (縁取りは出さない)。 */
.offcell{fill:#000;fill-opacity:.001;stroke:none;cursor:pointer;pointer-events:all}
/* 火球 (ranged_strike) で撃てる全マスの縁取り。 通常攻撃(.at の赤塗り)と区別する
   ため、 塗りは薄く・縁を炎色(橙)の点滅破線にして「どこでも撃てる」 を強調する。 */
.gcell.strike{fill:rgba(255,140,40,.12);stroke:#ff8c28;stroke-width:2.4;stroke-dasharray:4 3;animation:strikepulse 1s ease-in-out infinite}
@keyframes strikepulse{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1}}
/* 立ち絵に覆われるマス (ユニットがいる) の縁取りリング。 立ち絵層の上に重ねるため
   塗りなし・縁だけ。 クリックは下の .gcell に通すので pointer-events は無効化。 */
.hlring{fill:none;pointer-events:none;stroke-width:2.5}
.hlring.mv{stroke:#8bffab;filter:drop-shadow(0 0 3px rgba(120,255,160,.85));animation:rangeGlowMv 1.5s ease-in-out infinite}
.hlring.at{stroke:#ff9384;filter:drop-shadow(0 0 3px rgba(255,110,92,.85));animation:rangeGlowAt 1.5s ease-in-out infinite}
.hlring.strike{stroke:#ff8c28;stroke-dasharray:4 3;animation:strikepulse 1s ease-in-out infinite}
.hlring.mvdest{stroke:#8bffab;stroke-dasharray:6 4;filter:drop-shadow(0 0 3px rgba(120,255,160,.85));animation:rangeGlowMv 1.5s ease-in-out infinite}
.gcell.hit{animation:cellhit .4s ease-out}
@keyframes cellhit{0%{fill:rgba(255,80,60,.6)}100%{fill:rgba(255,80,60,0)}}
.spr{pointer-events:none}
.sprshadow{pointer-events:none}
/* 死体 (撃破済み・撃破スプライト完走待ち): その場で徐々に透けて消える (移動/拡縮はしない)。
   render.js が dying ユニット 1 体ぶんの描画を <g class="corpse"> で包む。 序盤は見え、
   後半でスッと薄れて 0 に (forwards で透明を保持 → 次 render で除去)。 */
.corpse{pointer-events:none;animation:corpseFade .45s ease-in .25s forwards}
@keyframes corpseFade{0%{opacity:1}100%{opacity:0}}
/* 立ち絵 (遠近で上方に浮く) のアイコン位置に重ねる透明クリック領域。
   自マスの data-rc を持ち、見えているユニットを確実にそのマスとしてクリックさせる。 */
.sprhit{fill:#000;fill-opacity:.001;pointer-events:all;cursor:pointer}
.hptext{pointer-events:none;font:700 13px sans-serif;fill:#fff;
  paint-order:stroke;stroke:#000;stroke-width:3px;text-anchor:middle}
.orbname{pointer-events:none;fill:#fff;font-weight:700;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:#000;stroke-width:2.5px}
/* 召喚ターンのカプセル (羽化中): ゆらぎ＋脈動で「中で動いている」 感を出す */
.hatching{transform-box:fill-box;transform-origin:center;animation:hatch 1.1s ease-in-out infinite}
@keyframes hatch{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.06) rotate(1.5deg)}}
/* 手札カード: カプセルシート1コマ目を図像にする (background-position 0 0 = 先頭コマ) */
.capcard{background-repeat:no-repeat;background-position:0 0;width:100%;aspect-ratio:1/1}
.hatchcrack{pointer-events:none;fill:none;stroke:#fff;stroke-width:1.4;opacity:.85;
  stroke-linejoin:round;stroke-linecap:round}
/* タワーは立ち絵 (tower_ally / tower_enemy)、コア/設置物 (結晶型) は別シルエットで区別 */
.towerimg{filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}
.placebody{stroke:#fff;stroke-width:1.5;opacity:.92}
.placebody.p{fill:rgba(80,140,200,.6)}.placebody.e{fill:rgba(200,100,80,.6)}
.placeglow{fill:rgba(255,255,255,.55);stroke:none}
.placelbl{fill:#fff;font-weight:700;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:#000;stroke-width:2px}
/* 作戦タイム: 指示済みユニットの足元リング (赤=攻撃指示済 / 緑=移動のみ)。
   行動タイムでは出さない (どれが攻撃するか伏せる方が読み合いになる)。 */
.planaura{pointer-events:none;fill:none;stroke-width:2.5;
  transform-box:fill-box;transform-origin:center;animation:planAuraPulse 1.1s ease-in-out infinite}
.planaura.mv{stroke:#7be08a;filter:drop-shadow(0 0 6px rgba(100,220,120,.85))}
.planaura.atk{stroke:#ff7a66;filter:drop-shadow(0 0 7px rgba(255,80,60,.9))}
@keyframes planAuraPulse{
  0%,100%{opacity:.55;transform:scale(.92)}
  50%{opacity:1;transform:scale(1.08)}
}
/* 作戦タイム: 指示マスに置く大型マーカー (金彫金の画像 assets/img/ui/marks/) + ユニットから伸びる細線 */
.planmark-img{pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
  animation:planpulse 1.2s ease-in-out infinite}
/* 攻撃先の交差剣・攻撃なしバッジは素材が暗めなので明るく持ち上げる (filter は上書きなので drop-shadow ごと再指定) */
.planmark-img.atk,.planmark-img.noatk{filter:brightness(1.3) saturate(1.12) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
/* 巻き込み範囲 (薙ぎ払い/貫通) の交差剣は主対象より一回り小さく淡くして区別する (縮小は render 側) */
.planmark-img.splash{opacity:.8}
@keyframes planpulse{0%,100%{opacity:.85}50%{opacity:1}}
.planline{pointer-events:none;fill:none;stroke-width:2;stroke-dasharray:6,5;opacity:.75}
.planline.mv{stroke:#69c86e}.planline.atk{stroke:#ff7a66}
/* 行動タイム: 攻撃線とヒットフラッシュ (1 フレーム表示) */
.fxline{pointer-events:none;fill:none;stroke-width:6;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(255,180,120,.85));animation:fxflash .22s ease-out}
.fxline.slash{stroke:#ff5a3a}
.fxline.shoot{stroke:#ffd66e;stroke-dasharray:10,5}
.fxline.heal{stroke:#7fffa0;stroke-dasharray:4,4}
@keyframes fxflash{0%{opacity:0;stroke-width:2}40%{opacity:1;stroke-width:10}100%{opacity:.55;stroke-width:5}}
.fxhit{pointer-events:none;fill:rgba(255,80,40,.45);stroke:#fff;stroke-width:2;
  transform-box:fill-box;transform-origin:center;animation:fxhit .35s ease-out}
.fxhit.heal{fill:rgba(120,255,150,.45)}
.fxhit.shoot{fill:rgba(255,210,90,.45)}
/* 羽化フラッシュ: 殻が割れて光が広がる */
.fxline.hatch{display:none}
.fxhit.hatch{fill:rgba(255,240,180,.65);stroke:#fff;stroke-width:3;
  filter:drop-shadow(0 0 8px rgba(255,220,140,.9))}
/* ダメージ/回復のフローティング数字 (大きく出して引き寄せる) */
.dmgpop{pointer-events:none;font:900 30px sans-serif;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:#000;stroke-width:4px;
  transform-box:fill-box;transform-origin:center;
  animation:dmgpop .9s ease-out forwards}
.dmgpop.p{fill:#5db6ff}                                /* 味方(P)が与えたダメージ = 青 */
.dmgpop.e{fill:#ff8a76}                                /* 敵(E)が与えたダメージ = 赤 */
.dmgpop.heal{fill:#7fffa0}                             /* 回復 = 緑 */
.dmgpop.combo{font-size:24px;animation-name:dmgpopCombo;animation-delay:.30s;
  animation-duration:.8s;opacity:0}
@keyframes dmgpop{
  0%{transform:translateY(14px) scale(.3);opacity:0}
  20%{transform:translateY(-2px) scale(1.3);opacity:1}
  100%{transform:translateY(-40px) scale(1);opacity:0}
}
@keyframes dmgpopCombo{
  0%{transform:translateY(0) scale(.4);opacity:0}
  30%{transform:translateY(-10px) scale(1.25);opacity:1}
  100%{transform:translateY(-38px) scale(1);opacity:0}
}
/* 空振り: 線も着弾点もグレーで薄く、 「素振り」 感を出す */
.fxline.miss-slash{stroke:#aab;stroke-dasharray:4,5;filter:none;opacity:.7}
.fxline.miss-shoot{stroke:#bbc;stroke-dasharray:8,4;filter:none;opacity:.65}
.fxline.miss-heal{stroke:#9dc9a8;stroke-dasharray:4,4;filter:none;opacity:.6}
.fxhit.miss-slash,.fxhit.miss-shoot,.fxhit.miss-heal{fill:rgba(200,200,220,.18);stroke:#dde;stroke-dasharray:3,3}
@keyframes fxhit{0%{opacity:0;transform:scale(.25)}50%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.7)}}

/* ===== ユニット・トークン (画像 assets/img/<key>.png 未配置時のプレースホルダ描画) =====
   卵(殻)と成体トークンを別シルエットにし、 成体は役割色の縁＋種族アイコンで種類を見分ける。 */
.egg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.eggspot{fill:rgba(110,98,78,.4);pointer-events:none}
.egglbl{pointer-events:none;fill:#6a5b3e;font-weight:800;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:2.5px}
.tokenring{pointer-events:none;filter:drop-shadow(0 0 3px rgba(0,0,0,.4))}
.tokenbody{filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.tokenicon{pointer-events:none;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:rgba(0,0,0,.4);stroke-width:.8px}
.namelbl{pointer-events:none;fill:#fff;font-weight:700;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:#000;stroke-width:2.5px}
.placeicon{pointer-events:none;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:.8px}

/* ===== 攻撃・衝撃エフェクト (オノマトペ / 星バースト / 召喚・爆発リング) ===== */
.onoma{pointer-events:none;font-weight:900;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:#000;stroke-width:3px;font-size:19px;
  transform-box:fill-box;transform-origin:center;animation:onomaPop .55s ease-out forwards}
.onoma.slash,.onoma.melee{fill:#fff36b}
.onoma.shoot,.onoma.ranged{fill:#9be1ff}
.onoma.boom{fill:#ffb14a}
.onoma.kill{fill:#fff;font-size:24px}
.onoma.pop.p{fill:#bfe0ff}.onoma.pop.e{fill:#ffcdbf}
.onoma.boom.p,.onoma.boom.e{fill:#ffb14a}
.onoma.big{font-size:28px;stroke-width:4px}
.onoma.miss{fill:#cfd3dc;font-size:14px;opacity:.85}
@keyframes onomaPop{
  0%{opacity:0;transform:translateY(8px) scale(.4) rotate(-8deg)}
  30%{opacity:1;transform:translateY(0) scale(1.25) rotate(-3deg)}
  60%{transform:translateY(-2px) scale(1) rotate(0)}
  100%{opacity:0;transform:translateY(-16px) scale(1.05)}
}
.impactstar{pointer-events:none;transform-box:fill-box;transform-origin:center;
  animation:impactStar .4s ease-out forwards}
.impactstar.p{fill:rgba(93,182,255,.85);stroke:#fff;stroke-width:1.5}   /* 味方の与ダメージ衝撃 = 青 (数字と統一) */
.impactstar.e{fill:rgba(255,138,118,.85);stroke:#fff;stroke-width:1.5}
.impactstar.big{stroke-width:2.2}
.impactstar.kill{fill:rgba(208,208,220,.82);stroke:#fff;stroke-width:1.5;animation-duration:.5s}
.impactstar.boom{fill:rgba(255,150,40,.92);stroke:#ffe08a;stroke-width:2.5;animation-duration:.55s}
@keyframes impactStar{
  0%{opacity:0;transform:scale(.2) rotate(0)}
  40%{opacity:1;transform:scale(1.1) rotate(12deg)}
  100%{opacity:0;transform:scale(1.5) rotate(22deg)}
}
.summonring,.summonring2{pointer-events:none;fill:none;stroke-width:3;
  transform-box:fill-box;transform-origin:center}
.summonring.p,.summonring2.p{stroke:#7fc0ff}
.summonring.e,.summonring2.e{stroke:#ffae90}
.summonring{animation:ringExpand .6s ease-out forwards}
.summonring2{animation:ringExpand .6s ease-out .12s forwards;opacity:0}
@keyframes ringExpand{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(3.2)}}
.boomring{pointer-events:none;fill:none;stroke:#ffd27a;stroke-width:4;
  transform-box:fill-box;transform-origin:center;animation:boomRing .55s ease-out forwards}
@keyframes boomRing{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(4)}}

/* 画面シェイク: 命中(小)・大ダメージ(中)・爆発(大) で強度を変える */
.boardwrap.shake-sm{animation:shakeSm .22s ease-in-out}
.boardwrap.shake-md{animation:shakeMd .3s ease-in-out}
.boardwrap.shake-lg{animation:shakeLg .42s ease-in-out}
@keyframes shakeSm{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,1px)}}
@keyframes shakeMd{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,2px)}80%{transform:translate(3px,-1px)}}
@keyframes shakeLg{0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,3px) rotate(-.4deg)}30%{transform:translate(7px,-3px) rotate(.4deg)}45%{transform:translate(-6px,3px)}60%{transform:translate(6px,-2px) rotate(.3deg)}80%{transform:translate(-3px,1px)}}

/* バトル画面: 盤面 (gamewin) の横にユニット詳細パネルを並べる横並びレイアウト */
.battlearea{display:flex;gap:10px;align-items:flex-start;justify-content:center}
.battlearea .gamewin{flex:0 1 600px;margin:6px 0;min-width:0}
/* バトル中だけ本体カラムを広げてパネル分の横幅を確保 */
body.battle-on .wrap{max-width:840px}
/* デッキ編成(案A)はスマホ縦では本体カラムを拡幅 (PC は上の 16:9 フルスクリーン規則が優先) */
@media (max-width:759.98px){ body.deck-on .wrap{max-width:1100px} }

/* ユニット詳細パネル (旧ホバーツールチップ。 盤面の横に常設ドック) */
.utt{flex:0 0 210px;align-self:stretch;margin:6px 0;padding:10px 12px;
  background:rgba(18,16,14,.96);border:1px solid var(--cp);border-radius:8px;
  color:var(--ink);font-size:12px;line-height:1.5;
  box-shadow:0 4px 14px rgba(0,0,0,.6);overflow-y:auto}
.utt .utt-empty{color:var(--sub);font-size:11px;line-height:1.7}
/* 狭い画面: 盤面の下にパネルを回す (スマホは長押しで更新) */
@media(max-width:880px){
  .battlearea{flex-direction:column;align-items:center}
  body.battle-on .wrap{max-width:600px}
  .utt{flex:none;width:100%;max-width:600px;align-self:auto;margin:0 0 6px;max-height:none}
}
/* 名前+ステータスの本体と、正面立ち絵を横並びにする見出し */
.utt .utt-head{display:flex;gap:10px;align-items:flex-start}
.utt .utt-head-body{flex:1 1 auto;min-width:0}
.utt .utt-portrait{flex:0 0 auto;border-radius:8px;border:1px solid var(--line);
  background-color:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.utt .nm{font-weight:800;font-size:13px;color:var(--cp);margin-bottom:3px}
.utt .row{display:flex;gap:8px;color:var(--sub);margin-bottom:2px}
.utt .row b{color:#fff;font-weight:700}
.utt .row b.buffed{color:#5db4ff}/* コア発動中の補正後ステータス (青字) */
.utt .ab{margin-top:4px;border-top:1px dashed var(--line);padding-top:4px;color:#c8e0ff}
.utt .ab li{margin:1px 0 1px 12px;list-style:disc;color:#c8e0ff}
/* 名前横の (YOU)/(COM): 汎用 .side (プレイヤー情報行) の枠/背景を打ち消してインライン表示 */
.utt .nm .side{display:inline;background:none;border:0;padding:0;margin:0;border-radius:0;font-size:11px}
.utt .side.p{color:#6fb1e0}.utt .side.e{color:#e08a6f}
.utt .lore{margin-top:5px;border-top:1px dashed var(--line);padding-top:5px;
  color:#d9cdb0;font-size:10px;line-height:1.55}
/* 背景に焼き込まれた右パネル (HP/Str/Speed/CPoint) に値を流し込む */
.panelval{pointer-events:none;font:700 15px sans-serif;fill:#fff;text-anchor:end;
  paint-order:stroke;stroke:#000;stroke-width:2px}
.hand{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0}
.card{flex:1 1 0;min-width:60px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:5px 4px;cursor:pointer;text-align:center;
  transition:transform .2s, opacity .2s}
.card:active{transform:translateY(1px)}
.card.sel{border-color:var(--cp);box-shadow:0 0 0 1px var(--cp)}
.card.no{opacity:.4;cursor:not-allowed}
.card.draw-in{position:relative;animation:drawIn 2.4s ease-out 1 both}
@keyframes drawIn{
  0%{transform:translateY(26px) scale(.7) rotate(-6deg);opacity:0;box-shadow:none}
  15%{transform:translateY(-4px) scale(1.08) rotate(2deg);opacity:1;
       box-shadow:0 0 0 2px var(--hp),0 0 22px 6px rgba(123,199,123,.9)}
  25%{transform:translateY(0) scale(1) rotate(0)}
  40%{box-shadow:0 0 0 1px var(--hp),0 0 8px 1px rgba(123,199,123,.45)}
  60%{box-shadow:0 0 0 2px var(--hp),0 0 22px 6px rgba(123,199,123,.9)}
  80%{box-shadow:0 0 0 1px var(--hp),0 0 8px 1px rgba(123,199,123,.45)}
  100%{transform:translateY(0) scale(1) rotate(0);opacity:1;box-shadow:none}
}
/* CP 不足の新カードは登場演出は見せつつ、 終了時に .4 へ収束させてグレーアウトを維持する。
   drawIn は fill:both で 100% の opacity:1 を保持し続け .card.no(.4) を上書きしてしまうため、
   .no 専用キーフレーム drawInNo で終端を .4 にして「支払い不可」を正しく示す。 */
.card.no.draw-in{animation-name:drawInNo}
@keyframes drawInNo{
  0%{transform:translateY(26px) scale(.7) rotate(-6deg);opacity:0;box-shadow:none}
  15%{transform:translateY(-4px) scale(1.08) rotate(2deg);opacity:1;
       box-shadow:0 0 0 2px var(--hp),0 0 22px 6px rgba(123,199,123,.9)}
  25%{transform:translateY(0) scale(1) rotate(0)}
  40%{box-shadow:0 0 0 1px var(--hp),0 0 8px 1px rgba(123,199,123,.45)}
  60%{box-shadow:0 0 0 2px var(--hp),0 0 22px 6px rgba(123,199,123,.9)}
  80%{box-shadow:0 0 0 1px var(--hp),0 0 8px 1px rgba(123,199,123,.45);opacity:1}
  100%{transform:translateY(0) scale(1) rotate(0);opacity:.4;box-shadow:none}
}
.card.draw-in::before{
  content:"NEW";position:absolute;top:-7px;right:-5px;z-index:2;
  background:var(--hp);color:#0d1a0d;font-size:9px;font-weight:800;
  padding:1px 5px;border-radius:6px;letter-spacing:.5px;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  animation:newBadgePop 2.4s ease-out 1 both}
@keyframes newBadgePop{
  0%{transform:scale(0) rotate(-30deg);opacity:0}
  10%{transform:scale(1.2) rotate(-12deg);opacity:1}
  15%{transform:scale(1) rotate(-8deg)}
  60%{transform:scale(1.15) rotate(-12deg)}
  85%{transform:scale(1) rotate(-8deg);opacity:1}
  100%{transform:scale(.6) rotate(-8deg);opacity:0}
}
.card .cn{font-size:11px;font-weight:700}
.card .meta{font-size:9px;color:var(--sub);margin-top:2px}
.card .c{color:var(--cp)}
.bar{display:flex;gap:8px;margin:8px 0}
button.go{flex:1;background:linear-gradient(180deg,#e6c655,#cba636);color:#241f10;border:0;border-radius:9px;
  padding:11px;font-size:14px;font-weight:800;cursor:pointer;
  box-shadow:0 3px 0 #93781f,0 5px 10px rgba(0,0,0,.3);transition:filter .15s,transform .06s}
button.go:hover{filter:brightness(1.06)}
/* デッキ画面のバトル開始ボタンは一枚絵プレート(btn_primary 青)。 共通 .go は変えずここだけ上書き。 */
#startBattle.go{border:11px solid transparent;border-radius:0;
  background:none;box-shadow:none;color:#e7f0fb;text-shadow:0 1px 2px rgba(0,0,0,.6);
  white-space:nowrap;
  border-image:url('img/ui/btn_primary.webp') 56 fill/11px stretch}
#startBattle.go:hover{filter:brightness(1.1)}
#startBattle.go:disabled{filter:grayscale(.6) brightness(.7);cursor:default}
/* 「＋ デッキに追加」は控えめなヘッダ帯プレート(06)。 主張しすぎないよう小さめに。 */
#heroAdd.go{flex:0 0 auto;border:7px solid transparent;border-radius:0;
  background:none;box-shadow:none;color:#e7f0fb;text-shadow:0 1px 2px rgba(0,0,0,.6);
  padding:2px 12px;font-size:12px;
  border-image:url('img/ui/panel_header_blue.webp') 30 fill/7px stretch}
#heroAdd.go:hover{filter:brightness(1.12)}
#heroAdd.go:disabled{filter:grayscale(.6) brightness(.7);cursor:default}
button.go:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
button.go:active{transform:translateY(2px);box-shadow:0 1px 0 #93781f}
button.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;font-size:12px;cursor:pointer;transition:all .15s}
button.ghost:hover{border-color:var(--grd);background:#2a2620}
.log{background:#141210;border:1px solid var(--line);border-radius:8px;font-size:11px;
  color:var(--sub);padding:8px 10px;height:92px;overflow:auto;line-height:1.5;margin-top:8px}
.log .me{color:var(--p)}.log .en{color:var(--e)}.log .sys{color:var(--cp)}
.hint{font-size:11px;color:var(--sub);text-align:center;margin-top:6px;min-height:15px}
.win{position:fixed;inset:0;background:rgba(10,9,8,.88);display:none;align-items:center;
  justify-content:center;flex-direction:column;gap:14px;z-index:9}
.win.show{display:flex} .win h2{font-size:26px;margin:0}

/* ===== 試合中に呼び出せる試合ログ モーダル ===== */
.logmodal{position:fixed;inset:0;background:rgba(10,9,8,.82);display:none;
  align-items:center;justify-content:center;z-index:15;padding:16px}
.logmodal.show{display:flex}
.logmodal-box{width:min(560px,94vw);max-height:82vh;display:flex;flex-direction:column;
  background:#1a1815;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);overflow:hidden}
.logmodal-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700;
  font-size:14px;color:#cdbf9a;background:#211d18}
.logmodal-body{overflow:auto;padding:10px 12px;font-size:12px;line-height:1.7;
  background:#141210}
.logmodal-body .me{color:var(--p)}.logmodal-body .en{color:var(--e)}
.logmodal-body .sys{color:var(--cp)}
.logmodal-empty{color:var(--sub);text-align:center;padding:24px;font-size:12px}

/* ===== タイトル/演出 (オリジナル, CSS) ===== */
.titlebanner{margin:10px 0 6px;padding:22px 10px;border-radius:14px;text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, #2f3e5c, #161c28);
  border:1px solid #3a4660;box-shadow:inset 0 0 40px rgba(110,150,220,.25)}
.titlebanner .tb-main{font-size:34px;font-weight:900;letter-spacing:.12em;
  background:linear-gradient(#cfe3ff,#6f9ad6);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.titlebanner .tb-sub{font-size:13px;color:var(--sub);letter-spacing:.3em;margin-top:4px}
.go-text{font-size:clamp(84px,15vw,156px);font-weight:900;font-style:italic;letter-spacing:.02em;
  color:#ffe9a8;-webkit-text-stroke:3px #6b4e16;
  text-shadow:0 0 30px rgba(255,210,90,.6),0 8px 24px rgba(0,0,0,.7)}
/* WIN / LOSE グラフィック (mozi.bmp 切り出し) */
.resultart{display:block;max-width:78%;max-height:140px;object-fit:contain;margin:0 auto 6px}
/* デッキ編成の背景に selectback (中央が暗いので軽めのオーバーレイで画を活かす) */
#scDeck.on{background:linear-gradient(rgba(20,18,21,.55),rgba(20,18,21,.72)),
  url("img/selectback.webp") center/cover no-repeat;
  border-radius:12px;padding:8px;margin:4px 0}
/* リザルトの背景: デッキ編成と同じカプセル保管庫 (selectback) を「大枠」として敷き、
   その上にヘッダー/獲得カプセル枠/詳細枠が乗る構図にする。 */
#scReward.on{background:linear-gradient(rgba(18,15,12,.5),rgba(18,15,12,.66)),
  url("img/selectback.webp") center/cover no-repeat}
/* 討伐ロードのマップ背景 (campaign_bg は装飾枠込み・中央が暗い) */
/* スマホ縦のみ拡幅 (PC は上の 16:9 フルスクリーン規則が優先) */
@media (max-width:759.98px){ body.campaign-on .wrap{max-width:920px} }
#scCampaign.on{background:linear-gradient(rgba(18,15,12,.42),rgba(18,15,12,.66)),
  url("img/campaign_bg.webp") center/cover no-repeat;
  border-radius:12px;padding:14px 18px;margin:4px 0}
/* 「Go!」スプラッシュ */
.gosplash{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  pointer-events:none;z-index:120}
.gosplash.show{display:flex;animation:goSplash 1s ease-out forwards}
@keyframes goSplash{
  0%{opacity:0;transform:scale(.4) rotate(-8deg)}
  25%{opacity:1;transform:scale(1.05) rotate(-2deg)}
  70%{opacity:1;transform:scale(1) rotate(-2deg)}
  100%{opacity:0;transform:scale(1.15) rotate(0)}
}
/* 作戦タイム開始の合図 (青系・短め) */
.plansplash{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  pointer-events:none;z-index:120}
.plansplash.show{display:flex;animation:planSplash 1s ease-out forwards}
.plan-box{display:flex;flex-direction:column;align-items:center;gap:6px}
.plan-flag{font-size:clamp(88px,14vw,148px);line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
  animation:planFlag 1s ease-out}
.plan-text{font-size:clamp(44px,8vw,76px);font-weight:900;letter-spacing:.08em;
  color:#dff0ff;-webkit-text-stroke:2px #2a4a78;text-shadow:0 4px 16px rgba(0,0,0,.7)}
@keyframes planSplash{
  0%{opacity:0;transform:translateY(-30px) scale(.85)}
  22%{opacity:1;transform:translateY(0) scale(1)}
  78%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(0) scale(1.05)}
}
/* 旗が「はためく」 ような軽い揺れ */
@keyframes planFlag{
  0%{transform:rotate(-12deg) scale(.6)}
  30%{transform:rotate(6deg) scale(1.05)}
  55%{transform:rotate(-4deg) scale(1)}
  100%{transform:rotate(0) scale(1)}
}

/* 山札の切り直しスプラッシュ (山札が一巡したタイミングの可視化・金系) */
.reshufflesplash{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  pointer-events:none;z-index:120}
.reshufflesplash.show{display:flex;animation:reshuffleSplash 1.2s ease-out forwards}
.reshufflesplash .rs-box{display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(20,17,12,.78);border:1px solid var(--cp);border-radius:14px;padding:18px 30px;
  box-shadow:0 8px 30px rgba(0,0,0,.55)}
.reshufflesplash .rs-main{font-size:38px;font-weight:900;letter-spacing:.06em;
  color:var(--cp);text-shadow:0 4px 14px rgba(0,0,0,.6)}
.reshufflesplash .rs-sub{font-size:15px;color:var(--sub);letter-spacing:.18em}
/* 陣営で色分け (敵=赤枠・赤字 / あなた=青枠・青字)。取り違え防止。 */
.reshufflesplash.rs-enemy .rs-box{border-color:var(--e);box-shadow:0 8px 30px rgba(224,138,111,.35),0 8px 30px rgba(0,0,0,.55)}
.reshufflesplash.rs-enemy .rs-main{color:var(--e)}
.reshufflesplash.rs-enemy .rs-sub{color:var(--e)}
.reshufflesplash.rs-player .rs-box{border-color:var(--p);box-shadow:0 8px 30px rgba(111,177,224,.35),0 8px 30px rgba(0,0,0,.55)}
.reshufflesplash.rs-player .rs-main{color:var(--p)}
.reshufflesplash.rs-player .rs-sub{color:var(--p)}
@keyframes reshuffleSplash{
  0%{opacity:0;transform:scale(.7) rotate(-4deg)}
  20%{opacity:1;transform:scale(1.04) rotate(2deg)}
  75%{opacity:1;transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(1.08) rotate(0)}
}

/* ===== 設定画面 / デバッグ画面 ===== */
.setrow{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:12px}
.setlbl{flex:0 0 110px;color:var(--sub);font-size:11px}
.setval{flex:1;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.setnum{font-variant-numeric:tabular-nums;color:var(--cp);font-weight:700;min-width:30px;text-align:right}
.seg{background:#201d19;border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:6px 10px;font-size:11px;cursor:pointer;transition:all .15s}
.seg:hover{border-color:var(--cp)}
.seg.on{background:var(--cp);color:#241f10;border-color:var(--cp);font-weight:700}
.setval input[type=range]{flex:1;accent-color:var(--cp);min-width:80px}
#simResult{font-family:"SF Mono","Menlo","Consolas",monospace;line-height:1.4}

/* ============================================================
   討伐ロード: 真鍮プレート(9slice) + 装飾スクロールバー
   素材は緑(クロマキー)抜き済み。 assets/ui/common/ 配下。
   パスは本CSS(assets/)基準なので "ui/common/..."。
   ============================================================ */

/* 背景(campaign_bg.png)を活かすため、 討伐ロードのヒーロー枠・カード地を消す */
body.campaign-on #scCampaign .hero{
  background:none; border:none; border-radius:0; box-shadow:none; padding:0;
}

/* 左上固定の「もどる」ボタン (カプセル画面の deck-back と同じ見た目) */
#scCampaign .hero{position:relative}
.cmp-back{position:absolute; left:12px; top:14px; z-index:5}

/* --- ヘッダープレート (01) --- */
.cmp-title{
  border:16px solid transparent;
  border-image:url('ui/common/01_header_title_plate.png') 62 46 fill / 15px 22px stretch;
  min-height:44px; margin:0 0 10px; padding:2px 12px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:19px; font-weight:800; color:var(--cp);
  text-shadow:0 2px 6px rgba(0,0,0,.85);
}
/* 見出し直下の説明文は背景に直書きになるので可読性を補強 */
body.campaign-on #scCampaign .cmp-desc{
  color:#d8cdb8; text-shadow:0 1px 4px rgba(0,0,0,.9);
}

/* --- ステージ行プレート (38=通常 / 39=挑戦可) --- */
.cmp-row{
  position:relative; cursor:pointer; color:var(--ink);
  border:15px solid transparent;
  border-image:url('ui/common/38_stage_plate_9slice.png') 58 48 fill / 14px 22px stretch;
  padding:7px 14px 9px;
}
.cmp-row + .cmp-row{ margin-top:8px }
.cmp-row.next{
  border-image:url('ui/common/39_stage_plate_active_9slice.png') 50 40 fill / 13px 20px stretch;
}
.cmp-row.locked{ cursor:not-allowed; filter:grayscale(.65) brightness(.62); }

/* --- 装飾スクロールバー (track=レール / thumb=つまみ / button=矢印) --- */
*::-webkit-scrollbar{ width:18px; height:18px }
*::-webkit-scrollbar-track{
  border:5px solid transparent;
  border-image:url('ui/common/scrollbar_track.png') 56 18 fill / 5px stretch;
  background:rgba(0,0,0,.22);
}
*::-webkit-scrollbar-thumb{
  border:7px solid transparent;
  border-image:url('ui/common/scrollbar_thumb.png') 64 26 fill / 7px 6px stretch;
  min-height:48px;
}
/* single-button レイアウト: 上端=上ボタン(decrement) / 下端=下ボタン(increment)。
   :single-button ベースに display:block を当てるのが肝(両端1個ずつになる) */
*::-webkit-scrollbar-button:single-button{
  display:block; background-repeat:no-repeat;
  background-position:center; background-size:contain;
}
*::-webkit-scrollbar-button:single-button:vertical:decrement{
  height:16px; background-image:url('ui/common/scrollbar_button.png');
}
*::-webkit-scrollbar-button:single-button:vertical:increment{
  height:16px; background-image:url('ui/common/scrollbar_button_down.png');
}
*::-webkit-scrollbar-corner{ background:transparent }

/* ============================================================
   スマホ縦画面 (portrait) 対応 — 共通土台 + デッキ/メニュー/討伐
   ------------------------------------------------------------
   PC (@media min-width:760px の 16:9 レターボックス) には一切触れず、
   狭幅 (<=759px) のときだけ縦向けの上書きを足す。
   バトル画面の縦再レイアウトは assets/battle-ui.css 側に持つ。
   ============================================================ */
/* シート (ボトムシート) 部品の既定はどの画面でも非表示。 縦メディア内でのみ出す。 */
.msheet-close{ display:none; }
.msheet-backdrop{ display:none; }

@media (max-width:759px){
  /* セーフエリア (ノッチ/ホームバー) を本体カラムの左右下に確保 */
  .wrap{ padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right)); }

  /* ---- 共通: ボトムシートの閉じるボタン (見た目だけ。 表示可否は各画面で制御) ---- */
  .msheet-close{ align-items:center; gap:4px;
    border:1px solid rgba(255,255,255,.22); border-radius:8px;
    background:rgba(20,17,13,.92); color:#e7dcc2; font-size:13px; font-weight:700;
    padding:8px 14px; min-height:40px; cursor:pointer; }
  .msheet-close:active{ transform:translateY(1px); }

  /* ================= デッキ編成 ================= */
  .deck{ height:100dvh; }
  /* 2カラム (リスト｜詳細) を 1カラムに畳む。 詳細は下からのシート化 */
  .deck-body{ grid-template-columns:1fr; }
  .deck-listwrap{ min-height:0; min-width:0; }
  /* 検索行/種別チップは狭幅で折り返す (横スクロールを出さない) */
  .deck-searchrow{ flex-wrap:wrap; }
  .deck-search{ min-width:120px; }
  .deck-sort{ flex:1 1 auto; min-width:0; }
  .deck-chips{ flex-wrap:wrap; }
  /* 保険: デッキ全体で横スクロールを出さない */
  .deck, .deck-body, .deck-strip{ max-width:100%; overflow-x:hidden; }
  /* 右ヒーロー詳細 → 画面下からせり出すボトムシート。
     #rewardDetail も .deck-hero を持つため、 デッキの #deckHero だけに限定する。 */
  #deckHero{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60;
    max-height:80vh; margin:0; border-radius:14px 14px 0 0;
    transform:translateY(103%); transition:transform .25s ease;
    padding-bottom:env(safe-area-inset-bottom); }
  body.deck-sheet-open #deckHero{ transform:translateY(0); }
  /* 閉じるボタンはシートを開いている間だけ画面右上に固定表示
     (deck-hero は innerHTML 差し替えされるので枠外に置く)。 */
  body.deck-sheet-open #deckSheetClose{ display:inline-flex; position:fixed; z-index:62;
    right:12px; top:max(12px,env(safe-area-inset-top)); }
  /* 背景は暗転のみ。 タップは下の一覧/ボタンへ通す (pointer-events:none)。
     閉じるのは「シート外タップ (main.js) / ✕ ボタン」。 */
  #deckBackdrop{ display:none; }
  body.deck-sheet-open #deckBackdrop{ display:block; position:fixed; inset:0;
    background:rgba(0,0,0,.45); z-index:59; pointer-events:none; }
  /* 下デッキストリップ: 高さを節約。 20枠を 2段 (10列) に折り返す */
  .deck-strip{ padding:5px 10px; gap:4px; }
  .deck-slots{ grid-template-columns:repeat(10,minmax(0,1fr)); }
  .dslot{ max-width:44px; }
  .deck-striphead{ gap:6px; }
  .ds-title{ font-size:12px; }
  /* おまかせ補充/クリアは小さめに */
  #fillDefault.cat-btn, #clearDeck.cat-btn{ font-size:11px; padding:4px 8px; }
  /* バトル開始ボタンは大きすぎたので小型化 (全幅→内容幅の主ボタン) */
  #startBattle.go{ flex:0 0 auto; order:0; min-width:0; padding:6px 16px; font-size:13px;
    white-space:nowrap; margin-left:auto; }

  /* プリセットを折りたたみ式プルダウンに (下部の高さ節約) */
  .ds-presets-dd{ display:block; position:relative; }
  .ds-presets-sum{ display:inline-flex; align-items:center; gap:4px; cursor:pointer;
    list-style:none; padding:4px 10px; font-size:11px; font-weight:700; color:#c9bfa8;
    border:6px solid transparent; border-radius:0;
    border-image:url('img/ui/cat_normal.webp') 56 fill/6px stretch; }
  .ds-presets-sum::-webkit-details-marker{ display:none; }
  .ds-presets-dd[open] .ds-presets-sum{ border-image-source:url('img/ui/cat_selected.webp'); color:#dce8f5; }
  /* 開いたらプリセット群を summary の下にフロート表示 (レイアウトを押し広げない) */
  .ds-presets-dd[open] .ds-presets{ position:absolute; left:0; top:calc(100% + 4px); z-index:5;
    min-width:180px; max-width:70vw; padding:8px; gap:6px;
    background:rgba(20,17,13,.98); border:1px solid rgba(120,90,50,.5); border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.55); }

  /* ================= メニュー (Home) ================= */
  /* 縦持ち専用背景 (menu_bg_portrait.webp) を画面全体に敷く。
     wrap を縦フレックス化して #scStart→.home を縦いっぱい (100dvh) に伸ばし、
     下部に出ていた黒い余白をなくす。 */
  .wrap:has(#scStart.on){ min-height:100dvh; display:flex; flex-direction:column; padding:0; }
  .wrap:has(#scStart.on) > #scStart.on{ flex:1; display:flex; flex-direction:column; }
  .home{ flex:1; min-height:0; margin:0; border-radius:0; box-sizing:border-box;
    padding:max(16px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));
    gap:12px; justify-content:flex-start;
    background-image:url("ui/common/menu_bg_portrait.webp"); }
  /* タイトルは縦背景に焼き込み済みなので HTML ロゴは隠す (PC と同じ方式) */
  .home-logo{ display:none; }
  /* 主動線3ボタンは背景下部の空きスペースへ下寄せ (基本定義の margin-top:auto を継承)。
     全幅だと1つ1つが大きすぎるので幅を絞り、中央寄せで縦に並べる。 */
  .home-main{ align-items:center; gap:10px; }
  .home-main .hbtn{ width:64%; max-width:250px; }
  /* カプセルは主動線より一回り小さく最下段に据える */
  .hbtn-capsule{ width:47%; max-width:184px; margin-top:2px; }
  /* 隅ボタン: ヘルプは左上へ移し、設定だけ右上に残す
     (右上に2つ並ぶと縦背景のタイトルプレートに被るため)。
     HTML順は 設定→ヘルプ なので row-reverse で ヘルプ=左端/設定=右端 になる */
  .home-corner{ left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right));
    justify-content:space-between; flex-direction:row-reverse; }
  /* 隅の設定/ヘルプのタップ領域を確保 */
  .hbtn-sm{ width:46px; }

  /* ================= 討伐ロード ================= */
  /* 通常フロー (縦スクロール) で成立。 見出し/戻るのタップ領域を確保 */
  #scCampaign #campaignList{ -webkit-overflow-scrolling:touch; }
}

/* ===== オンライン対戦 (あいことば) ===== */
.online-connect{display:flex;flex-direction:column;gap:10px}
.online-sec{display:flex;flex-direction:column;gap:6px}
/* .online-sec の display:flex は UA の [hidden]{display:none} を上書きしてしまうため、
   hidden 属性のセクション (非表示のあいことば表示/入力/待機) は明示的に隠す。 */
.online-sec[hidden]{display:none}
.online-label{font-size:11px;font-weight:700;color:#d8cdb2}
/* ホストに表示する短いあいことば: 読み上げ/手打ちしやすい大きめ表示 */
.online-phrase{width:100%;box-sizing:border-box;text-align:center;
  font-size:22px;font-weight:800;letter-spacing:.08em;color:#f4d879;
  background:rgba(12,11,9,.72);border:1px solid #a08b54;border-radius:6px;padding:12px 8px;
  user-select:all;-webkit-user-select:all}
.online-phrase-input{width:100%;box-sizing:border-box;text-align:center;
  font-size:18px;font-weight:700;letter-spacing:.06em;
  color:#f0e6cf;background:rgba(12,11,9,.72);border:1px solid #5a5245;border-radius:6px;padding:10px 8px}
.online-phrase-input:focus{outline:none;border-color:#a08b54}
.online-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
/* マッチング待機: あいことばなしで相手探し中を示すシンプルな表示 */
.online-match{align-items:center;text-align:center;gap:10px;padding:10px 8px}
.online-match-spinner{font-size:34px;line-height:1;animation:online-pulse 1.4s ease-in-out infinite}
@keyframes online-pulse{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
.online-note{font-size:11px;color:var(--sub);line-height:1.6;margin:8px 2px 0}
/* 相手待ちオーバーレイ: 盤面がうっすら見える薄めのスクリム */
.netwait-scrim{background:rgba(16,14,12,.38);backdrop-filter:none}
.netwait-card{max-width:300px;text-align:center;font-size:14px;font-weight:700;color:#f0e6cf;
  padding:10px 6px;animation:netwaitPulse 1.6s ease-in-out infinite}
@keyframes netwaitPulse{0%,100%{opacity:1}50%{opacity:.55}}