/* =========================================================
   Pocket Busyo — styles.css
   ========================================================= */

/* ---------- タイトル画面 ---------- */
#titleScreen{
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  transition: opacity 0.6s ease;
}
#titleScreen.fade-out{
  opacity:0; pointer-events:none;
}
/* タイトル画面 — 言語 / サウンド ボタン（SFCレトロ風） */
.btn-lang-title,
.btn-audio-title{
  position:absolute; top:14px; z-index:10002;
  background: rgba(0,0,0,0.80);
  color:#fff;
  border:2px solid rgba(200,168,90,0.7);
  border-radius:8px;
  padding:8px 16px;
  font-size: 15px;
  font-weight:700;
  letter-spacing:0.06em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  cursor:pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.btn-lang-title{ left:14px; }
.btn-audio-title{ right:14px; }
.btn-lang-title:hover,
.btn-audio-title:hover{
  background: rgba(200,168,90,0.3);
  border-color: rgba(200,168,90,1);
}
.btn-lang-title:active,
.btn-audio-title:active{ transform: scale(0.95); }
/* 音ON時 — 金色ハイライト */
.btn-audio-title.active{
  color:#ffdd44;
  border-color:rgba(255,204,0,0.8);
  text-shadow: 0 0 8px rgba(255,204,0,0.4), 0 2px 6px rgba(0,0,0,0.9);
}
/* タイトル画像の比率（3:2）を維持するコンテナ */
#titleInner{
  position:relative;
  /* 画面に収まる最大サイズを計算（画像比率 3:2 = 1.5:1） */
  width:  min(100vw, calc(100vh * 1.5));
  height: min(100vh, calc(100vw / 1.5));
}
#titleBg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:0;
}
#titleBg img{
  width:100%; height:100%;
  display:block;
}
/* ロゴ — 画面上辺から固定距離、サイズは画面に連動
   横幅が狭くなるほど下に滑らかに移動（wide=70px → narrow=140px） */
#titleLogo{
  position:fixed; z-index:10001;
  top: clamp(30px, -10vw + 20vh, 140px); left:0; width:100%;
  display:flex; justify-content:center;
  animation: titleLogoFloat 2.5s ease-in-out infinite;
}
#titleLogo img{
  width: 90vw;
  max-width: calc(100vh * 1.35);
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.8))
          drop-shadow(0 0 40px rgba(200,168,90,0.4));
  mix-blend-mode: screen;
}
/* タイトルメニュー — 固定サイズ・画面中央下 */
#titleMenu{
  position:fixed; z-index:10001;
  bottom: 40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width: 380px;
}
.title-btn{
  display:block; width:100%;
  padding: 10px 0;
  border:2px solid rgba(200,168,90,0.7);
  border-radius:8px;
  background: rgba(0,0,0,0.75);
  color:#fff;
  font-size: 15px;
  font-weight:700;
  letter-spacing:0.08em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  cursor:pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.title-btn:hover{
  background: rgba(200,168,90,0.3);
  border-color: rgba(200,168,90,1);
}
.title-btn:active{ transform: scale(0.97); }
.title-btn:disabled{
  opacity:0.35; cursor:default;
  border-color: rgba(255,255,255,0.2);
}
.title-btn:disabled:hover{
  background: rgba(0,0,0,0.75);
  border-color: rgba(255,255,255,0.2);
}
/* マニュアルリンク */
.title-manual-link{
  display:inline-block;
  margin-top:4px;
  font-size:13px;
  color:rgba(200,168,90,0.8);
  text-decoration:none;
  letter-spacing:0.05em;
}
.title-manual-link:hover{
  color:rgba(200,168,90,1);
  text-decoration:underline;
}
/* セーブスロットピッカー */
#titleSlotPicker{
  width:100%;
  display:flex; flex-direction:column; gap:8px;
  background: rgba(0,0,0,0.88);
  border: 2px solid rgba(200,168,90,0.6);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.7);
}
#titleSlotPicker .slot-picker-title{
  color: rgba(200,168,90,1);
  font-size: 14px;
  font-weight:700;
  text-align:center;
  letter-spacing:0.1em;
  margin-bottom: 2px;
}
.title-slot-btn{
  display:block; width:100%;
  padding: 10px;
  border:2px solid rgba(200,168,90,0.5);
  border-radius:8px;
  background: rgba(30,20,10,0.9);
  color:#ddd;
  font-size: 13px;
  text-align:left;
  cursor:pointer;
  transition: background 0.2s, border-color 0.2s;
}
.title-slot-btn:hover{
  background: rgba(200,168,90,0.25);
  border-color: rgba(200,168,90,0.9);
}
.title-slot-btn .slot-label{
  font-weight:700; color:#fff; font-size: 14px;
}
.title-slot-btn .slot-summary{
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 3px; line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title-slot-btn.slot-empty{
  opacity:0.4; cursor:default;
  border-color: rgba(255,255,255,0.15);
}
.title-slot-btn.slot-empty:hover{
  background: rgba(30,20,10,0.9);
  border-color: rgba(255,255,255,0.15);
}
#titleSlotBack{
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:8px;
  padding: 8px 0;
  width:100%;
  cursor:pointer;
  transition: background 0.2s, color 0.2s;
}
#titleSlotBack:hover{
  color:#fff;
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
}
@keyframes titleLogoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@keyframes titleBlink{
  0%,100%{ opacity:1; }
  50%{ opacity:0.3; }
}

/* ---------- 基本トークン ---------- */
/* ★ SFC風ピクセルフォント（PixelMplus12） — 戻すときはこのブロックと body の font を元に戻す */
@font-face {
  font-family: 'PixelMplus12';
  src: url('https://cdn.leafscape.be/PixelMplus/PixelMplus12-Regular_web.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PixelMplus12';
  src: url('https://cdn.leafscape.be/PixelMplus/PixelMplus12-Bold_web.woff2') format('woff2');
  font-weight: bold;
  font-display: swap;
}

:root{
  --bg:#1a1208;
  --bg-sub:#2a1f0e;
  --fg:#e8d5a3;
  --muted:#a08c5a;
  --line:#8b7532;

  --hp:#4caf50;
  --danger:#c62828;

  --r:6px;
  --shadow:0 1px 2px rgba(0,0,0,.08);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --pixel: 'PixelMplus12', monospace;

  /* 武将録/控えの間計算系 */
  --thumb:100px;
  --card:116px;
  --gap:6px;
  --panel-pad:6px;
  --panel-bd:1px;
  --panes-gap:12px;
  --left-cols:3;
  --right-cols:6;

  --left-min:  calc(var(--left-cols)*var(--card)
                + (var(--left-cols) - 1)*var(--gap)
                + 2*var(--panel-pad) + 2*var(--panel-bd));
  --right-min: calc(var(--right-cols)*var(--card)
                + (var(--right-cols) - 1)*var(--gap)
                + 2*var(--panel-pad) + 2*var(--panel-bd));

  --box-h: 814px;
  --box-extra: 32px;
  --page-max: 1000px;

  /* フィールド：画像/HP 共通幅 */
  --enc-w:200px;

  /* ===== 信長の野望風ボタントークン ===== */
  --teams-primary:#8b2500;
  --teams-primary-hov:#a03000;
  --teams-primary-act:#6e1d00;

  --teams-subtle-bg:#2a1f0e;
  --teams-subtle-hov:#3d2e16;
  --teams-subtle-act:#4a3820;

  --teams-stroke:#8b7532;
  --teams-focus:#c4a44a;

  --teams-success:#2e7d32;
  --teams-success-hov:#388e3c;
  --teams-success-act:#1b5e20;

  --teams-danger:#c62828;
  --teams-danger-hov:#b71c1c;

  --btn-h:36px;
  --btn-r:6px;
  --btn-pad-x:14px;
  --btn-pad-y:8px;
  --btn-font:13px/1.2 var(--pixel);

  /* 武将録ダイアログの下端余白とヘッダー高さ */
  --dex-bottom-gap: 80px;
  --dex-head-h: 52px;

  /* 武将録テキスト枠 */
  --dex-field-font: 11px;
  --dex-field-line: 1.3;
  --dex-field-pad-y: 0;
  --dex-field-pad-x: 0;
  --dex-field-gap:   2px;
  --dex-small-font:  11px;
  --dex-small-indent: 0;

  /* Teams風共通ボタン */
  --th-btn-bg: #8b2500;
  --th-btn-fg: #fff;
  --th-btn-bg-hover: #a03000;
  --th-btn-bg-active:#6e1d00;
  --th-btn-outline:#c4a44a;
  --th-ring: 0 0 0 2px rgba(196,164,74,.3);
}

*{box-sizing:border-box}
html,body{height:100%;overflow:auto}
body{
  margin:0; padding:0; background:var(--bg); color:var(--fg);
  /* ★ SFC風: PixelMplus12 → 元に戻すときは下のfontを上のコメントアウト行に差し替え */
  /* font:14px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif; */
  font:14px/1.6 var(--pixel);
}

/* ---------- 絵文字サイズ ---------- */
.emoji{font-size:1.3em;vertical-align:-0.1em;line-height:1;margin-right:0.1em}
button .emoji,.cta .emoji,.btn-ghost .emoji{margin-right:-0.4em;display:inline-block;width:1.3em;height:1.3em;overflow:hidden;vertical-align:-0.1em;position:relative;left:-0.15em;top:0.15em}
#btnItem .emoji{margin-right:-0.6em}

/* ---------- 共通UI ---------- */
.panel{
  background:var(--bg-sub);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:0 2px 8px rgba(0,0,0,.3);padding:10px;margin:12px 0;
}
.panel:last-child{margin-bottom:0!important}
#assignPanel{margin-bottom:0!important}
.panel h2.bar{
  margin:0 0 8px;display:flex;align-items:center;gap:8px;
  justify-content:space-between;font-size:18px;font-weight:700;flex-wrap:nowrap;
}
.row{display:flex;align-items:center;gap:8px}
.center{display:flex;align-items:center;justify-content:center}
.m0{margin:0}.mt-8{margin-top:8px}.muted{color:var(--muted)}.mono{font-family:var(--mono)}
.hdr,.panel{max-width:var(--page-max);margin-inline:auto;width:100%}

/* =========================================================
   ヘッダー：ロゴは残り幅に連続フィット／ボタンは縦4で固定＆非折返し
   ========================================================= */
.hdr{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:nowrap;
  padding:16px 20px;background:var(--bg-sub);
  border:2px solid var(--line);border-radius:var(--r);
  margin-top:12px;
}
.logo-wrap{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;
}
#logo{
  display:block;width:100%;height:auto;object-fit:contain;
}
.hdr-actions{
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;justify-content:flex-start;
  flex:0 0 80px;
}
/* PC: ヘッダー内を表示、下部を非表示 */
.hdr-actions--bottom{ display:none; }
.hdr-actions > button{
  width:100%;min-width:0;white-space:nowrap;
  background: #3a3a3c !important;
  color: #e5e5ea !important;
  border-color: #48484a !important;
}
.hdr-actions > button:hover:not(:disabled){
  background: #48484a !important;
}
.hdr-actions > button:active:not(:disabled){
  background: #2c2c2e !important;
}

/* =========================================================
   Teams/Fluent 風ボタン（全ボタン統一）
   ========================================================= */
button,
input[type="button"],
input[type="submit"],
.btn,
.btn-ghost,
.cta,
[role="button"]{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--btn-h);padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-r);
  background:var(--teams-subtle-bg);color:var(--fg);border:1px solid var(--teams-stroke);
  font:var(--btn-font);text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
button:hover:not(:disabled),.btn:hover:not(:disabled),.btn-ghost:hover:not(:disabled),.cta:hover:not(:disabled),[role="button"]:hover:not(:disabled){background:var(--teams-subtle-hov)}
button:active:not(:disabled),.btn:active:not(:disabled),.btn-ghost:active:not(:disabled),.cta:active:not(:disabled),[role="button"]:active:not(:disabled){background:var(--teams-subtle-act)}
button:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible,.cta:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--teams-focus);outline-offset:2px}
button:disabled,.btn:disabled,.btn-ghost:disabled,.cta:disabled,[role="button"][aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Filled（主） */
.cta,[data-variant="primary"]{background:var(--teams-primary);border-color:transparent;color:#fff}
.cta:hover:not(:disabled),[data-variant="primary"]:hover:not(:disabled){background:var(--teams-primary-hov)}
.cta:active:not(:disabled),[data-variant="primary"]:active:not(:disabled){background:var(--teams-primary-act)}

/* 成功（緑） */
.cta--green,[data-variant="success"]{background:var(--teams-success);border-color:transparent;color:#fff}
.cta--green:hover:not(:disabled),[data-variant="success"]:hover:not(:disabled){background:var(--teams-success-hov)}
.cta--green:active:not(:disabled),[data-variant="success"]:active:not(:disabled){background:var(--teams-success-act)}

/* 危険（赤） */
.btn-danger,[data-variant="danger"]{background:var(--teams-danger);border-color:transparent;color:#fff}
.btn-danger:hover:not(:disabled),[data-variant="danger"]:hover:not(:disabled){background:var(--teams-danger-hov)}

/* アイコンボタン（✕など） */
.icon-btn,.close-x,#dexX,#officeX,#boxX,#spellX{
  width:28px;height:28px;padding:0;min-height:28px;border-radius:6px;border:1px solid transparent;
  background:transparent;color:var(--fg);box-shadow:none;display:inline-flex;align-items:center;justify-content:center;
  font:14px/1 var(--pixel);
}
.icon-btn:hover,.close-x:hover,#dexX:hover,#officeX:hover,#boxX:hover,#spellX:hover{background:var(--teams-subtle-hov)}
.icon-btn:active,.close-x:active,#dexX:active,#officeX:active,#boxX:active,#spellX:active{background:var(--teams-subtle-act)}
.icon-btn:focus-visible,.close-x:focus-visible,#dexX:focus-visible,#officeX:focus-visible,#boxX:focus-visible,#spellX:focus-visible{outline:2px solid var(--teams-focus);outline-offset:2px}

/* =========================================================
   フィールド（3カラム：画像 / 本文 / 指標）
   ========================================================= */
.field-grid{
  display:grid;gap:16px;align-items:start;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"img side stats";
}
.field-left{ width:var(--enc-w); }
#fieldPanel .center{ grid-area:img; display:flex !important; justify-content:flex-start !important; align-items:flex-start !important; text-align:left !important; }
/* --- エンカウンター画像: 6px 家カラー縁 --- */
.enc-wrap{
  position:relative;
  display:inline-block;
  width:var(--enc-w);
  border:3px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  container-type:inline-size;
}
.encounter-img{
  width:var(--enc-w);height:var(--enc-w);object-fit:contain;
  border:none;border-radius:0;background:transparent !important;
  display:block;position:relative;z-index:2;
}
/* エンカウンター用 ::before（黒背景の上・imgの下にエフェクト） */
.enc-wrap.enc-boss::before,
.enc-wrap.enc-bigboss::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:0;
  pointer-events:none;
}
/* 大名 — キラン光エフェクト（.kiran-overlay 要素で実現） */
/* 征夷大将軍 — はみ出した::afterをクリップ */
.enc-wrap.enc-bigboss{ overflow:hidden; }
/* 征夷大将軍 — メラメラ炎オーラ（::before = box-shadow 明滅） */
.enc-wrap.enc-bigboss::before{
  box-shadow:
    inset 0 0 25px rgba(180,30,0,0.35),
    inset 0 0 60px rgba(140,0,0,0.25),
    inset 0 0 100px rgba(80,0,0,0.15);
  animation: enc-bb-glow 1.1s ease-in-out infinite alternate;
}
@keyframes enc-bb-glow{
  0%{
    box-shadow:
      inset 0 0 25px rgba(180,30,0,0.35),
      inset 0 0 60px rgba(140,0,0,0.25),
      inset 0 0 100px rgba(80,0,0,0.15);
  }
  100%{
    box-shadow:
      inset 0 0 60px rgba(255,120,0,1),
      inset 0 0 110px rgba(255,40,0,0.8),
      inset 0 0 160px rgba(200,0,0,0.5);
  }
}

/* ===== 武将画像ビネット背景（家カラー＋黒グラデーション） ===== */
.thumb-wrap,
.enc-wrap,
.dex-img-wrap,
.rank-img-wrap {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--fc, #333) 55%, #fff) 0%,
    color-mix(in srgb, var(--fc, #333) 85%, #fff) 50%,
    var(--fc, #333) 100%);
}

/* ===== 武将画像ラッパー用パターンオーバーレイ（::after） ===== */

/* ★ コンテナクエリ（cqi単位のため） */
.thumb-wrap, .dex-img-wrap, .rank-img-wrap { container-type: inline-size; }
/* ★ 模様は全て画像の下に表示 */
.thumb-wrap[data-pat]::after,
.enc-wrap[data-pat]::after,
.dex-img-wrap[data-pat]::after,
.rank-img-wrap[data-pat]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  border-radius: inherit;
}
/* ★ 画像を模様より手前に */
.thumb-wrap img,
.enc-wrap img,
.dex-img-wrap img { position: relative; z-index: 1; }
/* --- 模様パターン（%指定で画像サイズに連動） --- */
.thumb-wrap[data-pat="stripe-h"]::after, .enc-wrap[data-pat="stripe-h"]::after, .dex-img-wrap[data-pat="stripe-h"]::after, .rank-img-wrap[data-pat="stripe-h"]::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 12%, #fff 12%, #fff 18%);
}
.thumb-wrap[data-pat="stripe-v"]::after, .enc-wrap[data-pat="stripe-v"]::after, .dex-img-wrap[data-pat="stripe-v"]::after, .rank-img-wrap[data-pat="stripe-v"]::after {
  background: repeating-linear-gradient(90deg, transparent, transparent 12%, #fff 12%, #fff 18%);
}
.thumb-wrap[data-pat="stripe-d"]::after, .enc-wrap[data-pat="stripe-d"]::after, .dex-img-wrap[data-pat="stripe-d"]::after, .rank-img-wrap[data-pat="stripe-d"]::after {
  background: repeating-linear-gradient(45deg, transparent, transparent 12%, #fff 12%, #fff 18%);
}
.thumb-wrap[data-pat="stripe-r"]::after, .enc-wrap[data-pat="stripe-r"]::after, .dex-img-wrap[data-pat="stripe-r"]::after, .rank-img-wrap[data-pat="stripe-r"]::after {
  background: repeating-linear-gradient(-45deg, transparent, transparent 12%, #fff 12%, #fff 18%);
}
.thumb-wrap[data-pat="dots"]::after, .enc-wrap[data-pat="dots"]::after, .dex-img-wrap[data-pat="dots"]::after, .rank-img-wrap[data-pat="dots"]::after {
  background: radial-gradient(circle, #fff 40%, transparent 40%);
  background-size: 12% 12%;
}
.thumb-wrap[data-pat="cross"]::after, .enc-wrap[data-pat="cross"]::after, .dex-img-wrap[data-pat="cross"]::after, .rank-img-wrap[data-pat="cross"]::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 12%, #fff 12%, #fff 18%),
              repeating-linear-gradient(90deg, transparent, transparent 12%, #fff 12%, #fff 18%);
}
.thumb-wrap[data-pat="checker"]::after, .enc-wrap[data-pat="checker"]::after, .dex-img-wrap[data-pat="checker"]::after, .rank-img-wrap[data-pat="checker"]::after {
  background: conic-gradient(#fff 25%, transparent 25% 50%, #fff 50% 75%, transparent 75%);
  background-size: 25% 25%;
}
/* zigzag（ジグザグ模様） */
.thumb-wrap[data-pat="zigzag"]::after, .enc-wrap[data-pat="zigzag"]::after, .dex-img-wrap[data-pat="zigzag"]::after, .rank-img-wrap[data-pat="zigzag"]::after {
  background:
    linear-gradient(135deg, #fff 25%, transparent 25%) -7.5% 0,
    linear-gradient(225deg, #fff 25%, transparent 25%) -7.5% 0,
    linear-gradient(315deg, #fff 25%, transparent 25%),
    linear-gradient(45deg, #fff 25%, transparent 25%);
  background-size: 15% 15%;
}

/* ===== サムネイル・図鑑用ランク装飾（thumb-wrap に適用） ===== */
/* ラッパーに黒背景、::before でエフェクト、img は透明（人物が最前面） */
.busyo-boss,
.busyo-bigboss{ background: linear-gradient(to bottom,
  color-mix(in srgb, var(--fc, #333) 55%, #fff) 0%,
  color-mix(in srgb, var(--fc, #333) 85%, #fff) 50%,
  var(--fc, #333) 100%); }
.busyo-boss::before,
.busyo-bigboss::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
}
.busyo-boss>img,
.busyo-bigboss>img{ position:relative; z-index:2; background:transparent !important; }
/* 大名 — キラン光エフェクト（.kiran-overlay DOM要素で実現） */
.kiran-overlay{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  overflow:hidden;
}
.kiran-overlay::before{
  content:'';
  position:absolute;
  top:0;left:-60%;
  width:28%;height:100%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.45) 35%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.45) 65%,
    transparent 100%
  );
  transform:skewX(-20deg);
  animation: boss-kiran 4s ease-in-out infinite;
}
@keyframes boss-kiran{
  0%,70%,100%{ left:-60%; opacity:0; }
  5%{ opacity:1; }
  35%{ left:120%; opacity:1; }
  40%{ left:120%; opacity:0; }
}
.busyo-bigboss{ overflow:hidden; }
/* 征夷大将軍 — メラメラ炎オーラ（サムネイル ::before） */
.busyo-bigboss::before{
  box-shadow:
    inset 0 0 12px rgba(180,30,0,0.3),
    inset 0 0 30px rgba(140,0,0,0.2),
    inset 0 0 50px rgba(80,0,0,0.1);
  animation: thumb-bb-glow 1.1s ease-in-out infinite alternate;
}
@keyframes thumb-bb-glow{
  0%{
    box-shadow:
      inset 0 0 12px rgba(180,30,0,0.3),
      inset 0 0 30px rgba(140,0,0,0.2),
      inset 0 0 50px rgba(80,0,0,0.1);
  }
  100%{
    box-shadow:
      inset 0 0 35px rgba(255,120,0,0.95),
      inset 0 0 65px rgba(255,40,0,0.7),
      inset 0 0 90px rgba(200,0,0,0.4);
  }
}

.field-side{ grid-area:side; min-width:0; }
#fieldStats{ grid-area:stats; justify-self:end; align-self:start; width:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
#gameDateDisplay{font-size:18px;font-weight:700;color:var(--fg);margin-bottom:0;white-space:nowrap}

/* 茶器絵文字ランク別カラー */
.chaki-icon{display:inline-block}
.chaki-r1{filter:none}
.chaki-r2{filter:sepia(0.5) hue-rotate(180deg)}
.chaki-r3{filter:sepia(0.8) hue-rotate(300deg) saturate(1.5)}
.chaki-r4{filter:sepia(1) hue-rotate(350deg) saturate(2)}
.chaki-r5{filter:sepia(1) hue-rotate(10deg) saturate(3) brightness(1.2)}

.field-side .name{font-weight:700;font-size:16px;margin:0;line-height:1.2}
.attr-skill{display:flex;flex-direction:column;gap:1px;margin-bottom:1px}
.attr{display:block;font-size:12px;color:var(--fg);line-height:1.4;white-space:pre-wrap}
.skill{display:block;font-size:12px;color:var(--muted);line-height:1.4;white-space:pre-wrap}

.hpRow{display:flex;align-items:center;gap:8px}
.stat{position:relative;height:12px;background:#0d0a04;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat i{position:absolute;inset:0 auto 0 0;background:var(--hp);display:block}
.stat-overlay{display:none}
.hpW{width:220px}.hpTxt{min-width:48px;text-align:right}

/* 左カラムの HP を画像幅いっぱいに */
.field-left .hpRow{ width:100%; }
.field-left .hpRow .hpW{ width:100% !important; flex:1 1 auto; min-width:0; }

/* ログ */
.log{
  height:98px;overflow:auto;background:#0d0a04;border:2px solid var(--line);
  border-radius:var(--r);padding:4px 8px 6px;font-size:13px;white-space:pre-wrap;color:var(--fg)
}
.log p{margin:0;white-space:inherit}

/* 右端の指標（縦配置） */
#fieldStats .metric{ border:none; background:transparent; box-shadow:none; padding:0; margin:0; width:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:1px; font-size:13px; color:var(--fg); }
#fieldStats .metric .item{ white-space:nowrap }

/* 城画像表示時はHP行を非表示 */
.field-left:has(.enc-castle) .hpRow{ display:none !important; }

/* 探索中（画像なし／hidden等）は左列を消して2カラム化 */
/* ※ネストした:has()はブラウザ非対応のため、単純な:has()を使用 */
.field-left:has(#encImg[hidden]),
.field-left:has(#encImg[src=""]),
.field-left:has(#encImg:not([src])),
.field-left:has(#encImg[style*="display:none"]){ display:none !important; }
.field-grid:has(#encImg[hidden]),
.field-grid:has(#encImg[src=""]),
.field-grid:has(#encImg:not([src])),
.field-grid:has(#encImg[style*="display:none"]){
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas: "side stats" !important;
}

/* フィールドのボタンは主ボタン（濃色） */
#fieldPanel .row button{
  background:var(--teams-primary);color:#fff;border-color:transparent;
}
#fieldPanel .row button:hover{background:var(--teams-primary-hov)}
#fieldPanel .row button:active{background:var(--teams-primary-act)}

/* =========================================================
   出陣武将情報
   ========================================================= */
.team{width:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.chip{
  position:relative;
  border:2px solid var(--line);border-radius:var(--r);background:#000;
  padding:6px 6px 4px;box-shadow:0 2px 6px rgba(0,0,0,.3);width:var(--card);min-width:var(--card);flex:0 0 var(--card);
  display:flex;flex-direction:column;
}
.chip.active{outline:2px solid var(--teams-focus);border-color:#a0c3ff}
.thumb-wrap{position:relative;margin:0 auto 1px;width:var(--thumb);border:3px solid var(--line);border-radius:var(--r);overflow:hidden}
.chip .thumb{width:100%;height:var(--thumb);object-fit:cover;display:block;background:transparent !important;position:relative;z-index:2}
.thumb-hp-wrap{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:94%;z-index:4;padding:3px 5px;background:rgba(26,18,8,.85);border-radius:8px;border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.4);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);box-sizing:border-box}
.thumb-hp-wrap .stat{height:8px}
.chip .nm{display:block;font-weight:700;font-size:13px;margin:2px 0 -4px;text-align:left}
.nm-lv{font-weight:700;font-size:13px;text-align:left;margin:0}
.busho-params{margin:2px 0 2px}
.stats{display:grid;grid-template-columns:1fr;gap:1px;font-size:12px;color:var(--muted);margin:0}
.loyalty-gauge{margin-top:1px !important}
.chip .row{display:flex;gap:6px}.chip .row button{flex:1}
.show-mobile{display:none!important}
.mobile-stats{display:none!important}

/* 名前の前に武勲の証アイコンを出すスタイル */
.chip .badge-yaruki{
  font-size: 12px;
  margin-right: 0px;
}
.chip .gunshi-mark{
  font-size: 11px;
  color: #c8a84e;
  font-weight: 700;
  margin-right: 2px;
}
.chip .nm-mobile .gunshi-mark{
  font-size: 9px;
  margin-right: 1px;
}

/* 進化ボタン */
.chip .btns2{
  margin-top:4px;
}
.chip .btns2 button{
  width:100%;
}

/* ★ 参戦中パネル */
.chip.team-active{
  border:3px solid #FF66AA;
  box-shadow:0 0 0 4px rgba(255,102,170,.3), 0 0 12px rgba(255,102,170,.2);
  background: #2a0a0a;
}
.active-label{
  position:absolute;top:-2px;left:-2px;right:-2px;z-index:3;
  text-align:center;font-size:17px;font-weight:700;
  color:#fff;background:rgba(255,102,170,.85);
  border-radius:var(--r) var(--r) 0 0;
  padding:0;letter-spacing:1px;line-height:1.3;
}
/* ★ 参戦交代フラッシュ＋浮き上がり */
@keyframes switch-flash{
  0%  {transform:scale(1);    box-shadow:0 0 0 4px rgba(255,102,170,.3), 0 0 12px rgba(255,102,170,.2)}
  30% {transform:scale(1.05); box-shadow:0 0 0 8px rgba(255,102,170,.6), 0 0 30px rgba(255,102,170,.5)}
  100%{transform:scale(1);    box-shadow:0 0 0 4px rgba(255,102,170,.3), 0 0 12px rgba(255,102,170,.2)}
}
.chip.switch-flash{
  animation: switch-flash .4s ease-out;
}
.chip-faction{
  display:block;font-weight:700;font-size:13px;
  text-align:left;
  margin:2px 0 -4px;
}
/* ★ スタンバイパネル（タップで交代可能） */
.chip.team-standby{
  cursor:pointer;
  opacity:0.75;
  transition:opacity 0.15s, box-shadow 0.15s;
}
.chip.team-standby:hover{
  opacity:1;
  box-shadow:0 0 0 3px rgba(255,255,255,.2), 0 2px 8px rgba(0,0,0,.4);
}

/* タイトル右のボタン（城下町／控えの間／武将録／統計）＝金茶フラット */
#assignPanel h2.bar .cta, #assignPanel h2.bar .btn-ghost, #assignPanel h2.bar > button{
  background:#4a3a1a !important;
  border:1px solid #8b7532 !important;
  color:#e8d5a3;font-weight:600;margin-left:8px;
}
#assignPanel h2.bar .cta:hover, #assignPanel h2.bar .btn-ghost:hover, #assignPanel h2.bar > button:hover{
  background:#5a4820 !important;
}
#assignPanel h2.bar .cta:active, #assignPanel h2.bar .btn-ghost:active, #assignPanel h2.bar > button:active{
  background:#3a2a10 !important;
}

/* =========================================================
   武将録
   ========================================================= */
dialog{border:2px solid var(--line);border-radius:var(--r);padding:0;background:var(--bg-sub);color:var(--fg)}
#spell .panel{border:none;box-shadow:none;margin:0}
dialog::backdrop{background:rgba(0,0,0,.55)}

/* 武将録ダイアログ：外枠はスクロールさせず、内側だけスクロール */
#dex{
  max-width:920px;width:min(96vw,920px);
  margin:4vh auto;
  max-height: calc(100vh - var(--dex-bottom-gap));
  overflow: hidden;
}
#dex .body{
  padding:0 12px 10px 14px;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;
  max-height: calc(100vh - var(--dex-bottom-gap) - var(--dex-head-h));
}
#dex .grid{display:grid;grid-template-columns:repeat(5,164px);gap:8px;justify-content:center;padding-bottom:12px}
#dex .cell{width:164px;padding:6px;border:2px solid var(--line);border-radius:var(--r);background:var(--bg-sub);text-align:center}
.dex-img-wrap{position:relative;width:150px;height:150px;margin:0 auto;border:3px solid var(--line);border-radius:var(--r);overflow:hidden}
#dex .cell img{width:100%;height:100%;object-fit:cover;display:block;background:transparent !important;position:relative;z-index:2}

/* 武将録テキスト枠（基本スタイル：文字サイズ等は下部の変数定義で上書き） */
#dex .nameedit,
#dex .spells{
  border:none;
  background:transparent;color:var(--fg);
  white-space:pre-wrap;
  height:auto;
}
#dex .nameedit{font-size:13px;font-weight:700}
.dex-home-name{}
.dex-id-num{}
#dex small{
  display:block;margin-top:var(--dex-field-gap);color:var(--fg);
  font-size:var(--dex-small-font);
  line-height:1.3;
}
.dex-param-fit{white-space:nowrap;overflow:hidden}
.dex-sep{border:none;border-top:1px solid var(--line);margin:3px 0 1px}
/* 武将録エピソード */
.dex-episode{
  font-size:12px; line-height:1.4; color:var(--gold);
  margin-top:4px; padding:4px 5px;
  background:rgba(200,168,90,0.08);
  border-radius:4px;
  border-left:2px solid rgba(200,168,90,0.4);
}
.dex-episode-locked{
  color:#888; font-style:italic;
  background:rgba(128,128,128,0.08);
  border-left-color:rgba(128,128,128,0.3);
}
#spellList button{min-height:var(--btn-h);padding:var(--btn-pad-y) var(--btn-pad-x)}

/* =========================================================
   控えの間管理
   ========================================================= */
#box{
  --panes-gap:5px;
  max-width:none !important; padding:0;
  width:min(calc(var(--left-min) + var(--right-min) + var(--panes-gap) + var(--box-extra)), calc(100vw - 16px)) !important;
  max-height:calc(100vh - 40px);
  overflow:hidden;
}
#box .panel{
  display:flex;flex-direction:column;
  max-width:none !important;margin:0 !important;
  max-height:calc(100vh - 40px);overflow:hidden;
}
#box h2.bar{
  flex:0 0 auto;
  position:sticky;top:0;z-index:10;
  background:var(--bg-sub);
  padding:8px 4px 8px 0;
  border-bottom:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0;
  justify-content:flex-start;
  gap:8px;
}
#boxFeatureGroup{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#box .titlebar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg-sub);border-radius:var(--r) var(--r) 0 0;margin:0;
}
#box .titlebar h2{margin:0;font-size:14px;font-weight:700}
#box .titlebar .close-x{line-height:1}

/* 控えの間 .body：2カラムグリッド（!important でインライン上書き） */
#box .body{
  display:grid !important;
  grid-template-columns:max-content max-content !important;
  gap:var(--panes-gap) !important;
  align-items:start;
  height:var(--box-h) !important;
  flex:1 1 auto;
  overflow-y:auto;overflow-x:hidden;
  padding:10px 0 10px 0;
}

/* 左右の .list 共通 */
.list{
  border:2px solid var(--line);border-radius:var(--r);background:var(--bg-sub);padding:14px;
  overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;
}
.list h3{margin:0 0 6px}

/* 左パネル（出陣武将） */
#box .body > .list:first-child{
  padding:6px;
  width:max-content;
  justify-self:start;
  scrollbar-gutter:auto;
  background:#5c3000;
  border:3px solid #e09000;
}

/* 右パネル（控えの間武将） */
#box .body > .list:last-child{
  padding:6px;
  scrollbar-gutter:auto;
  background:#002050;
  border:3px solid #1080e0;
}

/* カードグリッド（!important でインライン上書き） */
#boxTeam{display:grid !important;grid-template-columns:repeat(3,var(--card)) !important;gap:var(--gap) !important;justify-content:flex-start}
#boxSto{display:grid !important;grid-template-columns:repeat(6,var(--card)) !important;gap:var(--gap) !important;justify-content:flex-start}
/* ★ フィルタ再描画時のスクロールアンカリング抑止 */
#box .body{overflow-anchor:none}
#boxTeam,#boxSto,.box-filter-bar,.box-filter-row{overflow-anchor:none}
.mini{
  position:relative;
  border:2px solid var(--line);border-radius:var(--r);background:var(--bg-sub);
  padding:6px 6px 4px;box-shadow:0 2px 6px rgba(0,0,0,.3);width:var(--card);min-width:var(--card);
  display:flex;flex-direction:column;
}
.mini .thumb-wrap{position:relative;margin:0 auto 1px;width:var(--thumb);border:3px solid var(--line);border-radius:var(--r);overflow:hidden}
.mini .thumb{width:100%;height:var(--thumb);object-fit:cover;display:block}
.mini .thumb-hp-wrap{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:94%;z-index:4;padding:3px 5px;background:rgba(26,18,8,.85);border-radius:8px;border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.4);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);box-sizing:border-box}
.mini .thumb-hp-wrap .stat{height:8px}
.mini .nm{display:block;font-weight:700;font-size:13px;margin:2px 0 -4px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .nm-lv{font-weight:700;font-size:13px;text-align:left;margin:0;white-space:nowrap}
.mini .chip-faction{display:block;font-weight:700;font-size:13px;text-align:left;margin:2px 0 -4px;white-space:nowrap}
.mini .busho-params{margin:2px 0 2px;white-space:nowrap;font-size:12px}
.mini .stats{display:grid;grid-template-columns:1fr;gap:1px;font-size:12px;color:var(--muted);margin:0}
.mini .stats div{white-space:nowrap}
.mini .loyalty-gauge{margin-top:1px !important}
.mini .show-mobile{display:none!important}
.mini .mobile-stats{display:none!important}
.mini button{width:100%;margin-top:4px}
.box-btns-top button{min-height:28px;padding:3px 8px;font-size:12px}
.mini .attrspell{font-size:12px;line-height:1.3;white-space:normal;word-break:break-all}
.mini-sep{border:none;border-top:1px solid var(--line);margin:3px 0 1px}
.mini-info{min-width:0}

/* ゴミ箱アイコン（お別れ） */
.mini .thumb-wrap{overflow:visible!important}
.trash-icon{
  position:absolute;top:2px;right:-2px;z-index:3;
  cursor:pointer;font-size:20px;line-height:1;
  background:transparent;
  padding:1px 2px;
  opacity:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
  transition:filter .15s;
}
.trash-icon:hover{filter:drop-shadow(0 1px 4px rgba(255,50,50,.8))}

/* 控えの間ボタン：出陣（赤茶）／控えの間へ（青） */
#box .mini button[data-act="assign"],
#box .mini button[data-act="toTeam"]{
  background:var(--teams-primary);color:#fff;border-color:transparent;
}
#box .mini button[data-act="assign"]:hover,
#box .mini button[data-act="toTeam"]:hover{background:var(--teams-primary-hov)}
#box .mini button[data-act="assign"]:active,
#box .mini button[data-act="toTeam"]:active{background:var(--teams-primary-act)}

#box .mini button[data-act="toBox"],
#box .mini button[data-act="swap"]{
  background:#1565c0;color:#fff;border-color:transparent;
}
#box .mini button[data-act="toBox"]:hover,
#box .mini button[data-act="swap"]:hover{background:#1976d2}
#box .mini button[data-act="toBox"]:active,
#box .mini button[data-act="swap"]:active{background:#0d47a1}

#box .mini button[data-act="remove"],
#box .mini button[data-act="goodbye"]{
  background:var(--teams-danger);color:#fff;border-color:transparent;
}
#box .mini button[data-act="remove"]:hover,
#box .mini button[data-act="goodbye"]:hover{background:var(--teams-danger-hov)}

/* 出奔間近の警告 */
#box .mini.desertion-warning{
  background:#3a1a1a;
  border:2px solid #e57373;
  animation:desertion-pulse 2s ease-in-out infinite;
}
@keyframes desertion-pulse{
  0%,100%{background:#3a1a1a}
  50%{background:#4a2020}
}
/* メイン画面の控えの間ボタン警告
   ★ #assignPanel h2.bar .cta が background/border に !important を使っているため、
     通常の animation keyframes では上書きできない。
     box-shadow inset で色オーバーレイを実現し、詳細度の競合を回避する。 */
/* 注意レベル：出奔カウンター進行中（黄色点滅） */
#assignPanel h2.bar .desertion-btn-warning,
.desertion-btn-warning{
  animation:desertion-btn-caution 2s ease-in-out infinite !important;
  border-color:#fdd835 !important;
  opacity:1 !important;
  transition:none !important;
}
@keyframes desertion-btn-caution{
  0%,100%{box-shadow:inset 0 0 0 0 transparent}
  50%{box-shadow:inset 0 0 40px 40px rgba(249,168,37,0.65)}
}
/* 危険レベル：出奔まで残り5回以下（赤点滅・速い） */
#assignPanel h2.bar .desertion-btn-critical,
.desertion-btn-critical{
  animation:desertion-btn-pulse 1s ease-in-out infinite !important;
  border-color:#e57373 !important;
  opacity:1 !important;
  transition:none !important;
}
@keyframes desertion-btn-pulse{
  0%,100%{box-shadow:inset 0 0 0 0 transparent}
  50%{box-shadow:inset 0 0 40px 40px rgba(229,115,115,0.7)}
}

/* 恩賞モード選択可能 */
#box .mini.reward-selectable{
  outline:2px dashed #ffa726;
  outline-offset:-2px;
  cursor:pointer;
}
#box .mini.reward-selectable:hover{
  background:#3d2e16;
}

/* --- アイテムポップアップ --- */
.item-popup{
  background:var(--bg-sub);border:2px solid var(--line);border-radius:var(--r);
  padding:8px 12px;margin-bottom:8px;
}
.item-popup-header{
  display:flex;justify-content:space-between;align-items:center;
  font-weight:700;font-size:15px;margin-bottom:6px;
}
.item-popup-list{display:flex;flex-direction:column;gap:4px;}
.item-popup-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);cursor:pointer;text-align:left;color:var(--fg);
  justify-content:flex-start;
}
.item-popup-row:hover{background:var(--teams-primary);color:#fff;}
.item-emoji{font-size:1.4em;}
.item-info{display:flex;flex-direction:column;gap:2px;}
.item-name{font-weight:700;font-size:14px;}
.item-desc{font-size:11px;color:var(--muted);}
.item-popup-row:hover .item-desc{color:rgba(255,255,255,0.8);}

/* --- アイテムモード：武将パネル装飾 --- */
#box .mini.item-selectable{
  outline:2px dashed #42a5f5;
  outline-offset:-2px;
  cursor:pointer;
}
#box .mini.item-selectable:hover{
  background:#1a2a3d;
}
#box .mini.item-equipped{
  outline:2px solid #ffd54f;
  outline-offset:-2px;
  cursor:pointer;
  background:rgba(255,213,79,0.1);
}
#box .mini.item-equipped:hover{
  background:rgba(255,213,79,0.2);
}

/* =========================================================
   城下町
   ========================================================= */
#office{max-width:560px;width:92%}
#office .panel,#nameQuiz .panel{border:none;box-shadow:none;margin:0}
#office .log{height:70px}
/* 城下町ダイアログ：外枠はスクロールさせず、内側(.body)だけスクロール */
#office{
  max-height: 85vh;
  overflow: hidden;
}
#office .body{
  overflow-x:hidden; overflow-y:auto;
  max-height: calc(85vh - 80px);
  -webkit-overflow-scrolling:touch;
}

/* =========================================================
   レスポンシブ（縦積み変更はしない：ヘッダーは常に1行＝ロゴが縮む）
   ========================================================= */
@media (max-width:1100px){ #dex .grid{grid-template-columns:repeat(4,164px)} }
@media (max-width:900px){
  #dex .grid{grid-template-columns:repeat(3,164px)}
  /* 控えの間：横並び維持、ダイアログ内で横スクロール */
  #box{ width:calc(100vw - 16px) !important }
  #box .body{
    grid-template-columns:max-content minmax(var(--right-min),max-content) !important;
    height:auto !important;
    max-height:calc(100vh - 100px);
    overflow-x:auto;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================================
   追加：トグル/交代/出陣（保険でID/Nameも拾う）
   ========================================================= */
button[data-act="assign"],button[id*="assign"],button[name*="assign"]{
  background:#1565c0;color:#fff;border-color:transparent;
}
button[data-act="assign"]:hover,button[id*="assign"]:hover,button[name*="assign"]:hover{background:#1976d2}
button[data-act="assign"]:active,button[id*="assign"]:active,button[name*="assign"]:active{background:#0d47a1}

button[aria-pressed="true"],
[role="button"][aria-pressed="true"],
button[data-act="swap"],button[id*="swap"],button[name*="swap"]{
  background:var(--teams-primary);color:#fff;border-color:transparent;
}
button[aria-pressed="true"]:hover,
button[data-act="swap"]:hover,button[id*="swap"]:hover,button[name*="swap"]:hover{background:var(--teams-primary-hov)}
button[aria-pressed="true"]:active,
button[data-act="swap"]:active,button[id*="swap"]:active,button[name*="swap"]:active{background:var(--teams-primary-act)}

/* =========================================================
   メインボタン共通：領地探索・天下統一
   ========================================================= */
#btnExplore, #btnMap{
  color: #fff;
  font-size: 1.15em;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 8px;
  letter-spacing: 0.05em;
  /* ★ 両ボタンを完全に同じサイズに固定（font-size 違いの影響を無効化） */
  box-sizing: border-box;
  width: 130px;
  min-width: 130px;
  height: 36px;
  /* 絵文字 🗾 は .emoji 個別オーバーライドで overflow:visible 化 */
  padding: 0 8px;
  line-height: 1.2;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s, background 0.12s;
  text-align: center;
  white-space: nowrap;
}
#btnExplore{ background: var(--teams-primary); box-shadow: 0 3px 8px rgba(139,37,0,0.35); }
#btnMap{ background: linear-gradient(135deg, #1a5c8e, #0e3d6b); border-color: #0a2f52; box-shadow: 0 3px 8px rgba(14,61,107,0.35); font-size: 1.0em; }
#btnExplore:hover{ background: var(--teams-primary-hov); box-shadow: 0 4px 12px rgba(139,37,0,0.5); transform: translateY(-1px); }
#btnMap:hover{ background: linear-gradient(135deg, #2471a8, #1a5c8e); box-shadow: 0 4px 12px rgba(14,61,107,0.5); transform: translateY(-1px); }
#btnExplore:active{ background: var(--teams-primary-act); transform: translateY(1px); box-shadow: 0 1px 4px rgba(139,37,0,0.3); }
#btnMap:active{ transform: translateY(1px); box-shadow: 0 1px 4px rgba(14,61,107,0.3); }

/* === フィールドのボタンを2カラム目で折り返し、食い込み防止 === */
.field-side { min-width: 0; }
.field-side .row { flex-wrap: wrap; }

/* フィールドボタン：内容幅に縮めて必要なら折り返し */
.field-side .row{ gap: 8px; }
#btnName, #btnAtk, #btnSpl, #btnBall, #btnRun{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap;
  max-width: 100%;
}
#fieldPanel .row #btnName:not(:disabled){
  background:#e65100;border-color:#bf360c;color:#fff;font-weight:700;
  box-shadow: 0 0 8px 2px rgba(230,81,0,0.6), 0 0 16px 4px rgba(230,81,0,0.3);
  animation: name-glow 1.5s ease-in-out infinite;
}
#fieldPanel .row #btnName:not(:disabled):hover{background:#bf360c}
#fieldPanel .row #btnName:not(:disabled):active{background:#a52900}
@keyframes name-glow{
  0%,100%{ box-shadow: 0 0 8px 2px rgba(230,81,0,0.6), 0 0 16px 4px rgba(230,81,0,0.3); }
  50%{ box-shadow: 0 0 16px 6px rgba(255,100,0,0.8), 0 0 32px 12px rgba(255,100,0,0.5); }
}

/* 中央カラムが狭くなったら 2列（50%ずつ）に自動改行 */
@media (max-width: 640px){
  #btnName, #btnAtk, #btnSpl, #btnBall, #btnRun{
    flex: 1 1 calc(50% - 8px) !important;
  }
}

/* 右の指標カラム */
#fieldStats{
  width: auto;
  flex: 0 0 auto;
  justify-self: end;
  text-align: right;
}

/* （控えの間管理の右パネル設定は上で統合済み） */

/* 出陣武将情報のタイトル行：ボタン間の隙間を狭くする */
#assignPanel .bar-right{ gap:8px !important; }
#assignPanel .bar-right > button{ margin-left:0 !important; }
#assignPanel h2.bar > button+button{ margin-left:4px !important; }

/* 参加中ボタンを強調表示（色＋太枠） */
#team .btns2 button[data-act="active"][aria-pressed="true"]{
  background: var(--teams-success) !important;
  color:#fff !important;
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px var(--bg-sub),
    0 0 0 5px rgba(46,125,50,.4);
}
#team .btns2 button[data-act="active"]:not([aria-pressed="true"]){
  background: var(--teams-subtle-bg);
  color: var(--fg);
  border:1px solid var(--teams-stroke);
}

/* 名前・属性・奥義の入力枠：変数によるサイズ指定 */
#dex .nameedit,
#dex .spells{
  font-size: var(--dex-field-font);
  line-height: var(--dex-field-line);
  padding: var(--dex-field-pad-y) var(--dex-field-pad-x);
  margin-top: var(--dex-field-gap);
  min-height: 0;
}

/* 一番上（名前枠）の余白も詰める＋番号＋名前は大きめ表示 */
#dex .cell .nameedit{ margin-top: var(--dex-field-gap); font-size: 13px; font-weight: 700; }

/* 「出陣/控えの間 / Lv.X」などの所有場所表示（small） */
#dex .cell small{
  font-size: var(--dex-small-font);
  line-height: 1.3;
  padding-left: var(--dex-small-indent);
}

/* ===== Teams風 共通ボタン（変数は :root に統合） ===== */
.th-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font: 500 14px/1.2 var(--pixel);
  padding:.6rem .9rem;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--th-btn-bg);
  color:var(--th-btn-fg);
  box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.06));
  cursor:pointer; user-select:none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
.th-btn:hover{ background:var(--th-btn-bg-hover); }
.th-btn:active{ background:var(--th-btn-bg-active); transform: translateY(1px); }
.th-btn:focus-visible{ outline:none; box-shadow: var(--th-ring); }

/* バリエーション */
.th-btn--outline{
  background:var(--bg-sub); color:var(--fg); border-color:var(--line);
}
.th-btn--outline:hover{ background:var(--teams-subtle-hov); border-color:var(--line); }
.th-btn--outline:active{ background:var(--teams-subtle-act); }

.th-btn--ghost{
  background:transparent; color:var(--fg); border-color:transparent;
}
.th-btn--ghost:hover{ background:var(--teams-subtle-hov); }
.th-btn--ghost:active{ background:var(--teams-subtle-act); }

/* サイズ（必要なら） */
.th-btn--sm{ padding:.45rem .7rem; font-size:13px; border-radius:10px; }
.th-btn--lg{ padding:.75rem 1.1rem; font-size:15px; border-radius:14px; }

/* アイコン余白（テキストの左右にSVGやiタグがある場合） */
.th-btn > .icon{ display:inline-flex; width:1em; height:1em; }

/* ====== 城下町ダイアログ内のレイアウト微調整 ====== */
#office .actions, #office .shop{
  display:flex; flex-wrap:wrap; gap:8px;
}
#office .actions .th-btn, #office .shop .th-btn{
  min-width: 140px;
}
#office .price{
  color: var(--muted,#605e5c);
  font-size: 12px;
  margin-left: 4px;
}

/* ===== はなしかける（トリビア4択クイズ）ダイアログ ===== */
#nameQuiz{
  overflow:hidden !important;
}
#nameQuiz .bar .bar-title{
  font-size: 14px;
  padding-left: 12px;
}
#nameQuiz .panel,
#nameQuiz .body{
  overflow:hidden;
  max-width:100%;
  box-sizing:border-box;
}
#nameQuiz .body{
  padding:10px 12px 12px;
}
#nameQuizText{
  overflow-wrap:break-word;
  word-break:break-word;
  font-weight: 700;
  font-size: 15px;
  color: #fff !important;
}
.quiz-hint{
  margin:0 0 8px;
  padding:6px 10px;
  background:rgba(200,168,78,0.15);
  border-left:3px solid #c8a84e;
  border-radius:4px;
  color:#c8a84e;
  font-size:13px;
  line-height:1.5;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}
.quiz-hint-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #c8a84e;
  flex-shrink:0;
}
.quiz-hint-text{
  flex:1;
  min-width:0;
}
#nameQuizChoices{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  margin-top:4px;
  max-width:100%;
}
#nameQuizChoices button{
  width:100%;
  min-width:0;
  max-width:100%;
  text-align:center;
  min-height:48px;
  word-break:break-word;
  overflow-wrap:break-word;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
  padding:6px 8px;
}

@media (max-width: 640px){
  /* ▼ モバイル: フィールド・タブボタン低背化 */
  #btnAtk,#btnSpl,#btnName,#btnBall,#btnRun{
    min-height:auto!important;padding:5px 5px!important;font-size:13px!important;line-height:1.2!important;
  }
  #btnOffice,#btnBox,#btnPokedex,#btnStats{
    min-height:auto!important;padding:3px 8px!important;font-size:13px!important;line-height:1.2!important;
  }
  #btnExplore,#btnMap{
    min-height:auto!important;height:36px!important;padding:0 4px!important;line-height:1.2!important;overflow:visible!important;
  }
  /* ▼ モバイル: コンテンツが画面内に収まるときはスクロール無効 */
  html,body{overflow-y:auto;overscroll-behavior-y:none}
  /* ▼ モバイル: パネル間マージン・グリッドgap縮小 */
  .panel{margin:4px 0!important;padding:6px!important}
  #fieldPanel{margin-top:0!important}
  .panel h2.bar{margin:0 0 4px!important}
  .field-grid{gap:4px!important}
  .mt-8{margin-top:4px!important}
  /* ▼ モバイル: 日付・指標列コンパクト化 */
  #fieldStats{gap:1px!important}
  #gameDateDisplay{font-size:16px!important;margin-bottom:4px!important;line-height:1!important}
  #fieldStats .metric{font-size:12px}
  /* ▼ モバイル: 出陣武将ヘッダー折り返し防止 */
  #assignPanel h2.bar{flex-wrap:nowrap}
  #assignPanel .bar-title{flex:0 0 auto;font-size:16px}
  #assignPanel .bar-right{gap:4px!important;flex-wrap:nowrap}
  #assignPanel .bar-right>button{font-size:11px!important;padding:3px 6px!important;margin-left:0!important;white-space:nowrap}
  /* ▼ モバイル: 控えの間ヘッダーボタン統一（汎用セレクタ）
     ★ 新しいボタンを追加したら必ずここにも追加すること！
     ※ 上の #box h2.bar> 子セレクタにも同様に追加が必要 */
  #btnFuse,#btnReward,#btnItem,#btnItemBack,#btnFuseExec,.fuse-action-btn,.fuse-cancel-btn,.item-back-btn{font-size:12px!important;padding:4px 5px!important;white-space:nowrap;min-height:auto!important;line-height:1.3!important;box-sizing:border-box!important}
  /* ▼ モバイル: 控えの間ダイアログ */
  #box:not([open]){display:none!important}
  #box[open]{margin:4px auto!important;height:calc(100dvh - 8px)!important;height:calc(100vh - 80px)!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;padding:0!important}
  @supports (height:100dvh){#box[open]{height:calc(100dvh - 8px)!important}}
  #box[open]>form{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;height:100%!important;margin:0!important}
  #box[open] .panel{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;max-height:none!important}
  #box[open] h2.bar{flex:0 0 auto!important;position:relative!important;z-index:10!important}
  #box[open] .body{flex:1 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
    grid-template-columns:1fr!important;grid-template-rows:auto auto!important;padding:4px 0!important;gap:6px!important;align-items:stretch!important}
  #box .body>.list:first-child{width:100%!important;grid-column:1!important;grid-row:1!important}
  #box .body>.list:last-child{grid-column:1!important;grid-row:2!important}
  #box .body>.list{padding:6px!important;overflow:visible!important;max-height:none!important}
  #box[open] h2.bar{flex-wrap:wrap;font-size:13px;gap:4px}
  /* ★ 控えの間ヘッダーバー内ボタンの子セレクタ（モバイル縮小用）
     新しいボタンを追加したら必ずここにも追加すること！
     （#box h2.bar> の子セレクタなので、IDを明示しないと適用されない）
     ※ 下の汎用セレクタ(#btnFuse,#btnReward,...)にも同様に追加が必要 */
  #box h2.bar>#btnFuse,#box h2.bar>#btnReward,#box h2.bar>#btnItem,#box h2.bar>#btnItemBack,#box h2.bar>#btnFuseExec{font-size:11px!important;padding:8px 5px!important;min-height:32px}
  #box h2.bar>#boxX{margin-left:auto;margin-right:-4px}
  /* ▼ モバイル: 控えの間 横型カードレイアウト */
  #boxTeam,#boxSto{grid-template-columns:1fr!important}
  .mini{
    display:grid!important;
    grid-template-columns:auto auto 1fr;
    grid-template-rows:1fr;
    width:100%!important;min-width:0!important;
    gap:0 6px!important;
    padding:4px 6px!important;
    align-items:stretch;
  }
  /* ボタン：1列目・縦書き・カード全高 */
  .mini .box-btns-top{
    grid-column:1;grid-row:1;
    margin:0!important;
    display:flex;align-items:stretch;align-self:stretch;
    height:100%;
  }
  .mini .box-btns-top button{
    writing-mode:vertical-rl!important;
    white-space:nowrap;
    width:auto!important;height:auto!important;
    min-height:0;padding:6px 3px!important;margin:0!important;
    font-size:11px!important;letter-spacing:1px;
    box-sizing:border-box;
    flex:1;
    display:flex;align-items:center;justify-content:center;
  }
  .mini .box-btns-top .fuse-label{
    writing-mode:vertical-rl!important;
    white-space:nowrap;
    width:auto!important;height:auto!important;
    min-height:0;padding:6px 3px!important;
    font-size:11px!important;letter-spacing:1px;
    box-sizing:border-box;
    margin:0!important;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
  }
  /* サムネ：2列目 */
  .mini .thumb-wrap{
    grid-column:2;grid-row:1;
    width:64px!important;margin:0!important;
    align-self:center;
  }
  .mini .thumb{height:64px!important}
  /* 情報：3列目 */
  .mini .mini-info{
    grid-column:3;grid-row:1;
    min-width:0;
    display:flex;flex-direction:column;gap:0;
    justify-content:center;
  }
  /* 控えの間モバイル: デスクトップ用非表示、モバイル用表示 */
  .mini .hide-mobile{display:none!important}
  .mini .show-mobile{display:block!important}
  .mini .mobile-stats{display:block!important;font-size:11px;color:var(--muted);line-height:1.4;margin:0}
  .mini .mobile-stats>div{white-space:nowrap}
  .mini .nm-mobile{font-weight:700;font-size:12px;margin:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini .nm-faction{font-size:12px;font-weight:400;color:var(--muted)}
  /* 忠誠ゲージ＋奥義を横並び */
  .mini .loyalty-spell-row{display:flex!important;align-items:center;gap:6px;margin-top:1px}
  .mini .loyalty-spell-row .loyalty-gauge{flex:0 0 60px;margin:0!important}
  .mini .loyalty-spell-row .attrspell{flex:1 1 0;min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
  .mini .loyalty-gauge{margin-top:1px!important}
  .mini .mini-sep{display:none}
  .mini .attrspell{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* ▼ モバイル: 武将パネル間の隙間縮小 */
  .team{gap:6px!important}
  /* ▼ モバイル: 武将パネル コンパクト化（chipのみ。miniは常にPC表示） */
  .chip .hide-mobile{display:none!important}
  .chip .show-mobile{display:block!important}
  .chip .mobile-stats{display:block!important;font-size:10px;color:var(--muted);line-height:1.3;margin:0}
  .chip .mobile-stats>div{white-space:nowrap}
  .chip .mobile-stats .mobile-params{color:#aaa}
  .chip .nm-lv.show-mobile{white-space:nowrap}
  .chip .loyalty-gauge{display:none!important}
  .chip .nm-mobile{font-weight:700;font-size:12px;margin:2px 0 -2px;text-align:left;white-space:nowrap}
  .chip .nm-faction{font-size:10px;font-weight:400;color:var(--muted)}
  .chip .stat-overlay{
    display:block;position:absolute;inset:0;
    text-align:center;font-size:9px;font-weight:700;
    line-height:10px;color:#fff;
    text-shadow:0 0 2px #000,0 0 4px #000;
    z-index:1;letter-spacing:.5px;
  }
  /* ▼ 写真サイズを 96px に固定（敵・味方共通） */
  :root{
    --enc-w: 92px;
    --thumb: 92px;
  }
  .encounter-img{
    border-width: 1px !important;
  }

  /* ヘッダー：モバイルではロゴのみ・ボタンは下部へ移動済み */
  .hdr{
    padding: 0!important;
    margin: 0!important;
    gap: 0!important;
    border: none!important;
    box-shadow: none!important;
    background: transparent!important;
    display: none!important;
  }
  .logo-wrap{
    display: none!important;
  }
  .hdr-actions--top{ display:none!important; }
  .hdr-actions--bottom{
    display:flex!important;
    flex: 1 1 100%!important;
    flex-direction: row!important;
    justify-content: center!important;
    gap: 4px!important;
    padding: 0;
    margin: 4px 0 0;
  }
  .hdr-actions > *{ margin: 0; }

  /* ボタンそのものを“低背”に */
  .hdr-actions button,
  .hdr-actions .btn-ghost,
  .hdr-actions .cta{
    padding: 2px 6px;
    line-height: 1.05;
    min-height: 0;
    height: auto;
    font-size: 12px;
    border-radius: 6px;
    box-shadow: none;
    background: #3a3a3c !important;
    color: #e5e5ea !important;
    border-color: #48484a !important;
  }
  .hdr-actions button:hover:not(:disabled),
  .hdr-actions .btn-ghost:hover:not(:disabled),
  .hdr-actions .cta:hover:not(:disabled){
    background: #48484a !important;
  }
  .hdr-actions button:active:not(:disabled),
  .hdr-actions .btn-ghost:active:not(:disabled),
  .hdr-actions .cta:active:not(:disabled){
    background: #2c2c2e !important;
  }

  /* フィールド：3列（画像 | 名前・属性 | 指標）＋ログ・ボタンは全幅 */
  /* 行3(1fr)が画像の余り高さを吸収 → 行1,2は内容ぴったり */
  .field-grid{
    grid-template-columns: var(--enc-w) minmax(0,1fr) auto !important;
    grid-template-rows: auto auto 1fr auto auto !important;
    grid-template-areas: none !important;
    row-gap: 0px !important;
    column-gap: 8px !important;
    align-items: start !important;
  }
  /* field-side を展開して子要素をグリッド直下に */
  .field-side{
    display: contents !important;
  }
  /* 画像：左列、行1-3（行3で余り高さ吸収） */
  .field-left{
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
  }
  /* 名前：列2 行1 */
  #encName{
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    align-self: start !important;
  }
  /* メインボタン（領地探索・進軍マップ）をスマホでは縦並び */
  #mainBtnRow{
    flex-direction: column !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    margin-top: 0 !important;
  }
  /* 属性・奥義：列2 行2 */
  .attr-skill{
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 0 1px !important;
    align-self: start !important;
  }
  /* 指標：列3 行1-5、ボタン行まで拡張 */
  #fieldStats{
    grid-area: unset !important;
    grid-column: 3 !important;
    grid-row: 1 / 6 !important;
    width: max-content !important;
    flex: 0 0 auto !important;
    align-self: start !important;
  }
  #fieldStats .metric{
    gap: 2px !important;
  }
  #chakiStats{
    display: flex;
    flex-direction: column;
    gap: 2px !important;
  }
  /* ログ：列1-2（指標列を除く）、行4、コンパクト化 */
  #log{
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    height: 80px !important;
  }
  /* ボタン：列1-2（指標列を除く）、行5 */
  .field-side > .row{
    grid-column: 1 / 3 !important;
    grid-row: 5 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #btnAtk, #btnSpl, #btnName, #btnBall, #btnRun{
    flex: 0 0 auto !important;
  }
  #mainBtnRow{
    flex-wrap: wrap !important;
  }
  #btnExplore, #btnMap{
    flex: 0 0 auto !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }

  /* 画像非表示時（待機中）：2列に切替、名前・属性を列1に */
  .field-grid:has(#encImg[hidden]),
  .field-grid:has(#encImg:not([src])){
    grid-template-columns: 1fr auto !important;
    grid-template-areas: none !important;
  }
  .field-grid:has(#encImg[hidden]) #encName,
  .field-grid:has(#encImg:not([src])) #encName{
    grid-column: 1 !important;
  }
  .field-grid:has(#encImg[hidden]) .attr-skill,
  .field-grid:has(#encImg:not([src])) .attr-skill{
    grid-column: 1 !important;
  }
  .field-grid:has(#encImg[hidden]) #fieldStats,
  .field-grid:has(#encImg:not([src])) #fieldStats{
    grid-column: 2 !important;
    grid-row: 1 / 6 !important;
    align-self: start !important;
  }
  .field-grid:has(#encImg[hidden]) #log,
  .field-grid:has(#encImg:not([src])) #log{
    grid-column: 1 !important;
  }
  .field-grid:has(#encImg[hidden]) .field-side > .row,
  .field-grid:has(#encImg:not([src])) .field-side > .row{
    grid-column: 1 !important;
  }

  .hpRow{ margin-top: 6px; }

  /* ▼ モバイル: 武将録 */
  #dex .bar{flex-wrap:wrap;gap:4px}
  #dex .bar .bar-title{flex:0 0 auto}
  #dex .bar #btnDexSort,
  #dex .bar #btnDexInit,
  #dex .bar #btnDexExport,
  #dex .bar #btnDexImport{font-size:10px;padding:2px 5px;min-height:20px}
  #dex .bar .bar-right{margin-left:auto}
  #dex .grid{grid-template-columns:repeat(3,1fr)!important;justify-content:center}
  #dex .cell{width:auto}
  .dex-img-wrap{width:100%!important;height:auto!important;aspect-ratio:1}
  #dex .cell img{width:100%;height:100%;aspect-ratio:1}

  /* ▼ モバイル: 城下町 */
  #office{width:96%;max-width:none}
  /* ▼ モバイル: 統計 */
  #stats{width:96%}
  #statsOverall{grid-template-columns:repeat(2,1fr)!important}
  #statsMemberRanking table{font-size:11px}
}

/* フィールド左：HPラベルと数値を非表示にし、バーだけ表示 */
.field-left .hpRow > div:first-child,
.field-left #hpTxt{
  display: none !important;
}

/* ラベル・数値を消した分、バーをフル幅に拡張 */
.field-left #hpBar{
  width: 100%;
}

/* ▼ フィールド左：HPバーを相手写真の下部に重ねる（オーバーレイ） */
.field-left{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: relative !important;
  align-items: flex-start !important;
}

/* HPバー本体だけ表示＆画像の上にオーバーレイ（中央寄せ） */
.field-left .hpRow{
  position: absolute !important;
  bottom: 12px;
  width: 85% !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  padding: 6px 10px !important;
  z-index: 2;
  pointer-events: none;
  background: rgba(26,18,8,.85) !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

/* 器の中身 */
.field-left .hpRow .hpW,
.field-left .hpRow div.hpW{
  width: 100% !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* ▼ モバイル：HPバーをイラスト下部に重ねる（出陣武将と同じサイズ） */
@media(max-width:640px){
  .field-left .hpRow{
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    padding: 3px 5px !important;
    border-radius: 8px !important;
  }
  .field-left .hpRow .hpW .stat,
  .field-left .hpRow .stat{
    height: 8px !important;
  }
}

.chip .stat-sep {
  margin: 4px 0 6px;
  border: none;
  border-top: 1px solid var(--line);
}

/* 出陣武将情報パネルの「属性 1 行」だけ文字サイズを少し小さくする */
.team .chip > small {
  font-size: 12px;
  line-height: 1.3;
}

/* 武将録の「戦国武将録」の文字の位置調整 */
.bar-title{
  padding-left: 18px;
}

/* 武将録ヘッダーボタン共通 */
#btnDexSort,
#btnDexInit,
#btnDexExport,
#btnDexImport{
  margin-top: -2px;
  min-height: 24px;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 1.2;
}
#btnDexSort{ margin-left: 4px; }


/* 控えの間管理画面のソートボタンの位置調整 */
#btnBoxSort{
  margin-top: -2px;   /* 上下の位置を調整 */
  min-height: 24px;   /* 高さの下限を小さく */
  padding: 2px 10px;  /* 上下の余白を減らす */
  font-size: 12px;    /* 文字サイズも少し小さくするなら */
  line-height: 1.2;
}




/* 出陣武将情報・城下町の見出しだけ左に寄せる */
#assignPanel .bar-title,
#office .bar-title{
  padding-left: 0;
  margin-left: 4px;
}



/* === 共通確認ダイアログ === */
#th-confirm::backdrop{
  background: transparent;
}

#th-confirm.th-modal{
  border: none;
  padding: 0;
  max-width: 380px;
  width: 92vw;
  background: transparent;
}
#th-confirm .panel{
  margin: 0;
}
#th-confirm .body{
  padding: 12px 16px 16px;
}

/* ===== 忠誠度システム ===== */
/* 出陣武将カードの忠誠度バー */
.friendship-bar {
  width: 100%;
  height: 6px;
  background: #0d0a04;
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}

.friendship-bar-fill {
  height: 100%;
  background: #ccc;
  transition: width 0.3s ease, background 0.3s ease;
}

.friendship-rank {
  font-size: 11px;
  font-weight: 700;
  color: #FF69B4;
  margin-top: 2px;
}

/* 進化関連スタイル */
.evolved-card {
  border: 2px solid #FFD700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.evolved-name::before {
  content: "★";
  color: #FFD700;
  margin-right: 4px;
  font-weight: 700;
}

/* 進化エフェクト */
@keyframes evolve-flash {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.8) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
  100% { filter: brightness(1); }
}

@keyframes evolve-scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.evolving {
  animation: evolve-flash 0.6s ease-out, evolve-scale 0.6s ease-out;
}

/* ===== 統計ダイアログ ===== */
#stats {
  max-width: 800px;
  width: 94%;
  padding: 0;
}

#stats::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.stats-item {
  background: var(--bg);
  padding: 6px 8px 2px;
  border-radius: 6px;
  border: 1px solid var(--line);
  text-align: center;
}

.stats-label {
  font-weight: 700;
  margin-bottom: -2px;
  font-size: 12px;
  color: var(--muted);
}

.stats-value {
  font-size: 14px;
  font-weight: 700;
  color: #c4a44a;
}

/* ===== 同一人物カード合成機能のスタイル ===== */
/* 合成対象候補カードのハイライト（同一IDが2枚以上） */
.fuse-candidate {
  border: 2px solid #FFB81D;
  box-shadow: 0 0 8px rgba(255, 184, 29, 0.5);
  cursor: pointer;
}

/* ベースカードとして選択されたカード */
.fuse-base {
  border: 3px solid #ffd54f;
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.7), inset 0 0 8px rgba(255, 213, 79, 0.15);
  background-color: rgba(255, 213, 79, 0.12);
}

/* 素材カードとして選択されたカード */
.fuse-material {
  border: 3px solid #66bb6a;
  box-shadow: 0 0 14px rgba(102, 187, 106, 0.6), inset 0 0 6px rgba(102, 187, 106, 0.15);
  background-color: rgba(102, 187, 106, 0.12);
}

/* 合成ラベル共通 */
.fuse-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.fuse-label-base {
  background: #ffd54f;
  color: #3e2723;
}
.fuse-label-material {
  background: #66bb6a;
  color: #1b5e20;
}

/* 合成モード時のボタン */
.fuse-action-btn,
.fuse-cancel-btn {
  font-weight: 600;
  color: #fff !important;
  border-color: transparent !important;
}
.fuse-action-btn {
  background: #1565c0;
}

.fuse-action-btn:hover {
  background: #1976d2;
}

.fuse-action-btn:active {
  background: #0d47a1;
}

.fuse-cancel-btn {
  background: var(--teams-danger);
}

.fuse-cancel-btn:hover {
  background: var(--teams-danger-hov);
}

.fuse-cancel-btn:active {
  background: #8e1a1a;
}

.item-back-btn {
  background: #1565c0 !important;
  color: #fff !important;
  border-color: transparent !important;
  font-size: 13px;
  padding: 5px 10px;
  line-height: 1.3;
  font-weight: 600;
}
/* アイテムをやめる と アイテム選択に戻る の高さを揃える */
#btnItem.fuse-cancel-btn,
#btnItemBack.item-back-btn {
  height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.item-back-btn:hover {
  background: #1976d2 !important;
}
.item-back-btn:active {
  background: #0d47a1 !important;
}

/* 素材選択用チェックボックス */
.fuse-material-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid #2e7d32;
  border-radius: 3px;
  background-color: var(--bg);
  margin-right: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #2e7d32;
}

.fuse-material-checkbox.checked {
  background-color: #2e7d32;
  color: #fff;
}

/* 合成ベースカードの情報表示 */
.fuse-base-info {
  background: linear-gradient(135deg, rgba(196,164,74,0.15), rgba(196,164,74,0.05));
  border: 2px solid #c4a44a;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.fuse-base-info strong {
  color: #c4a44a;
  font-weight: 700;
  font-size: 14px;
}

/* 合成モード：素材選択不可カード（非表示ではなく半透明で区別） */
.fuse-disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* ===== セーブスロット ===== */
.save-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  gap: 8px;
}
.save-slot-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.save-slot-num {
  font-weight: 700;
  font-size: 12px;
  color: var(--fg);
}
.save-slot-summary {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}
.save-slot-date {
  font-size: 10px;
  color: var(--muted);
}
.save-slot-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.save-slot-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  min-width: 0 !important;
}
.save-slot-load {
  background: #2e7d32 !important;
  border-color: transparent !important;
}
.save-slot-load:hover {
  background: #388e3c !important;
}
.save-slot-del {
  font-size: 12px !important;
  padding: 4px 6px !important;
  color: var(--muted) !important;
}

/* =========================================================
   小画面レスポンシブ対応
   ========================================================= */



/* ========= チュートリアル・オーバーレイ ========= */
#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tutFadeIn .3s ease;
}
@keyframes tutFadeIn { from{opacity:0} to{opacity:1} }
@keyframes tutSlideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

#tutorial-card {
  background: var(--bg-sub);
  border: 2px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  color: var(--fg);
  width: 92%;
  max-width: 420px;
  overflow: hidden;
  animation: tutSlideUp .35s ease;
}
#tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #3d1a00, #5a2800);
  color: #e8d5a3;
  font-size: 13px;
  font-weight: 700;
}
#tutorial-skip {
  background: rgba(232,213,163,.15);
  border: none;
  color: #e8d5a3;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
}
#tutorial-skip:hover { background: rgba(232,213,163,.25); }

#tutorial-body {
  padding: 24px 20px 16px;
  text-align: center;
}
#tutorial-icon {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}
#tutorial-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #c4a44a;
}
#tutorial-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  white-space: pre-line;
}

.tutorial-manual-link {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 16px;
  background: rgba(139,37,0,0.3);
  color: #e8d5a3;
  border: 1px solid var(--line);
  border-radius: 20px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: background .2s;
}
.tutorial-manual-link:hover {
  background: rgba(139,37,0,0.5);
}

#tutorial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
#tutorial-dots {
  display: flex;
  gap: 6px;
}
#tutorial-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a3820;
  transition: background .2s;
}
#tutorial-dots .dot.active {
  background: #c4a44a;
}
#tutorial-prev { font-size: 13px; min-width: 70px; }
#tutorial-next { font-size: 13px; min-width: 70px; padding: 6px 16px; }

/* モバイル調整 */
@media (max-width: 500px) {
  #tutorial-card { width: 96%; }
  #tutorial-icon { font-size: 40px; }
  #tutorial-title { font-size: 16px; }
  #tutorial-desc { font-size: 13px; }
}

/* =========================================================
   天下統一マップ — スタイル
   ========================================================= */

/* 勢力選択グリッド */
.faction-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  max-height: 65vh;
  overflow-y: auto;
  padding: 4px;
}
.faction-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--bg-sub);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
}
.faction-desc {
  width: 100%;
  font-size: 9px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.2;
  margin-top: -2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faction-btn:hover {
  border-color: var(--fc, #c4a44a);
  background: var(--teams-subtle-hov);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.faction-btn:active {
  transform: translateY(0);
}
.faction-color {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 勢力クリア済みマーク（2段階） */
.faction-cleared {
  border-color: var(--gold, #c4a44a);
  background: rgba(196,164,74,0.08);
}
.faction-cleared-full {
  border-color: #ffd700;
  background: rgba(255,215,0,0.12);
}
.faction-clear-mark {
  font-size: 13px;
  flex-shrink: 0;
  margin-left: 0;
  line-height: 1;
}
.faction-clear-mark.full {
  font-size: 14px;
}
.faction-clear-progress {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--gold, #c4a44a);
  text-align: center;
  font-weight: 600;
  min-height: 0;
}
.faction-clear-progress:empty {
  display: none;
}

/* 勢力選択ダイアログ */
#factionDlg::backdrop { background: rgba(0,0,0,0.6); }

/* ===== 天下統一マップ（全画面） ===== */
/* マップ画面表示中はbodyスクロールを抑制 */
body.map-open{overflow:hidden}

.map-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  justify-content: flex-start;
}
.map-screen-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 0;
  background: var(--bg-sub);
  border: 2px solid var(--line);
  border-radius: 10px;
  margin: 6px auto 0;
  flex-shrink: 0;
  color: var(--fg);
  width: var(--map-status-w, calc(100% - 12px));
  max-width: calc(100% - 12px);
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: visible;
}
.map-screen-header .bar-title { color: var(--fg); flex-shrink: 0; }
#mapTurn, #mapConquest { color: var(--fg); flex-shrink: 0; }
@media (min-width: 641px) {
  .map-screen-header .bar-title { font-size: 18px; font-weight: 700; }
  #mapTurn, #mapConquest { font-size: 16px; font-weight: 700; }
  /* ★ PC画面のみ: 領地探索 → 天下統一 の順に並び替え */
  #mainBtnRow #btnExplore { order: 1; }
  #mainBtnRow #btnMap     { order: 2; }
}
.map-screen-header small { color: var(--muted); font-size: 11px; }
.map-close-btn {
  appearance: none;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.map-close-btn:hover { background: var(--teams-subtle-hov); }
.map-close-btn:active { background: var(--teams-subtle-act); }
.map-territory-bar {
  height: 12px;
  display: flex;
  overflow: hidden;
  background: #0d0a04;
  flex-shrink: 0;
  margin: 4px auto 0;
  border-radius: 6px;
  border: 2px solid var(--line);
  width: var(--map-status-w, calc(100% - 12px));
  max-width: calc(100% - 12px);
  box-sizing: border-box;
}
.map-territory-bar span {
  transition: width 0.5s ease;
}
.map-svg-wrap {
  flex: 0 1 768px;      /* 地図原寸高さまで使うが、足りなければ縮む */
  min-height: 0;
  overflow: auto;
  position: relative;
  touch-action: none;
  user-select: none;
  cursor: grab;
  /* スクロールバーを非表示にしつつスクロール可能に */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}
.map-svg-wrap::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.map-svg-wrap.dragging { cursor: grabbing; }

/* --- 内部コンテナ（拡大画像を包む） --- */
.map-inner {
  position: relative;
  /* width/height は JS で動的設定 */
}

#mapSvg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: none;
}
.tile-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  background: #2a3a4a;
}
/* (tile-layer::after の content:none は不要のため削除) */
/* ズームボタン（現在非表示） */
.map-zoom-controls { display: none; }
.map-zoom-btn { display: none; }

/* タイル種類切り替え */
.map-tile-select {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 4px;
  z-index: 10;
}
.map-tile-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-sub);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  color: var(--fg);
  white-space: nowrap;
}
.map-tile-btn.active {
  background: var(--teams-primary);
  color: #fff;
  border-color: var(--teams-primary);
}
.map-tile-btn:hover { opacity: 0.8; }

/* --- マーカーオーバーレイ（HTML方式） --- */
.marker-overlay {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}
.map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.1s;
  width: 48px;
  height: 48px;
}
.map-marker.off-reach { cursor: default; opacity: 0.55; }
.map-marker-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px 2px rgba(0,0,0,0.5);
}
.map-marker-circle.capital { border: none; }
.map-marker-circle.own {
  border: 3px solid #FFD700;
  box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.7), 0 0 16px 4px rgba(255, 215, 0, 0.3);
  animation: own-pulse 2s ease-in-out infinite;
}
@keyframes own-pulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.7), 0 0 16px 4px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.9), 0 0 24px 8px rgba(255, 215, 0, 0.5); }
}
.map-marker-circle.empty {
  background: #e0e0e0 !important;
  border: none;
}
/* パターンオーバーレイ: ::after で模様を重ねる */
.map-marker-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
}
/* パターン 8種（太線・広間隔） */
.map-marker-circle[data-pat="stripe-h"]::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 12px, #fff 12px, #fff 18px);
}
.map-marker-circle[data-pat="stripe-v"]::after {
  background: repeating-linear-gradient(90deg, transparent, transparent 12px, #fff 12px, #fff 18px);
}
.map-marker-circle[data-pat="stripe-d"]::after {
  background: repeating-linear-gradient(45deg, transparent, transparent 12px, #fff 12px, #fff 18px);
}
.map-marker-circle[data-pat="stripe-r"]::after {
  background: repeating-linear-gradient(-45deg, transparent, transparent 12px, #fff 12px, #fff 18px);
}
.map-marker-circle[data-pat="dots"]::after {
  background: radial-gradient(circle 4px, #fff 3px, transparent 4px);
  background-size: 18px 18px;
}
.map-marker-circle[data-pat="cross"]::after {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 14px, #fff 14px, #fff 20px),
    repeating-linear-gradient(90deg, transparent, transparent 14px, #fff 14px, #fff 20px);
}
.map-marker-circle[data-pat="checker"]::after {
  background:
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
}
.map-marker-circle[data-pat="zigzag"]::after {
  background:
    linear-gradient(135deg, #fff 25%, transparent 25%) -10px 0,
    linear-gradient(225deg, #fff 25%, transparent 25%) -10px 0,
    linear-gradient(315deg, #fff 25%, transparent 25%),
    linear-gradient(45deg, #fff 25%, transparent 25%);
  background-size: 20px 20px;
}
.map-marker-name-inner {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  position: relative;
  z-index: 2;
  line-height: 1;
  margin-bottom: 0px;
  margin-top: 1px;
}
.map-marker-castle {
  font-size: 16px;
  line-height: 1;
  position: relative;
  z-index: 2;
  margin-top: 0px;
  margin-bottom: 2px;
  filter: grayscale(1) brightness(1.1);
}
.map-marker-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
}
.map-marker-label-bottom {
  top: 100%;
  margin-top: -2px;
}
.map-marker-label-top {
  bottom: 100%;
  margin-bottom: -2px;
}
.map-marker-name {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px #000;
}
.map-marker-faction {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px #000;
}
.map-marker-faction.own-faction {
  color: #FFD700;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px #000;
}
.map-marker.glow .map-marker-circle {
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.5), 0 0 12px 4px rgba(255,255,255,0.2);
  animation: adj-pulse 1.8s ease-in-out infinite;
}
@keyframes adj-pulse {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(255,255,255,0.5), 0 0 12px 4px rgba(255,255,255,0.2); }
  50%      { box-shadow: 0 0 10px 4px rgba(255,255,255,0.8), 0 0 20px 8px rgba(255,255,255,0.4); }
}
.map-marker:hover .map-marker-circle { opacity: 0.8; }
.map-log {
  flex-shrink: 0;
  height: 96px;
  overflow-y: auto;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.5;
  background: var(--bg-sub);
  border: 2px solid var(--line);
  border-radius: 10px;
  width: var(--map-status-w, calc(100% - 12px));
  max-width: calc(100% - 12px);
  box-sizing: border-box;
  margin: 6px auto 6px;
}
.map-log .map-log-line { padding: 1px 0; }
.map-log .map-log-attack { color: #ff6b6b; }
.map-log .map-log-destroy { color: #ff4444; font-weight: 700; }
.map-log .map-log-expand { color: #66dd88; }
.map-confirm {
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-sub);
  color: var(--fg);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 14px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 9010;
  min-width: 220px;
  text-align: center;
}

/* ハイライトアニメーション */
@keyframes map-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.map-glow {
  animation: map-glow-pulse 1.5s ease-in-out infinite;
}

/* 天下統一クリア演出 */
@keyframes unification-glow {
  0% { box-shadow: 0 0 0 0 rgba(255,215,0,0.6); }
  50% { box-shadow: 0 0 30px 10px rgba(255,215,0,0.4); }
  100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
}
.unification-complete {
  animation: unification-glow 2s ease-in-out 3;
}

/* ===== 朝廷アイコン（征夷大将軍再戦） ===== */
.map-court-marker { cursor: pointer; z-index: 20; }
.map-court-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #f5f0f0 50%, #e8d0d0 100%);
  border: 3px solid #c00;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 0 12px 4px rgba(200,0,0,0.4), 0 0 24px 8px rgba(200,0,0,0.2);
  animation: court-pulse 2s ease-in-out infinite;
}
.map-court-icon { font-size: 20px; line-height: 1; }
.map-court-label {
  font-size: 9px; font-weight: 700; color: #900;
  line-height: 1; margin-top: 1px;
}
@keyframes court-pulse {
  0%,100% { box-shadow: 0 0 12px 4px rgba(200,0,0,0.4), 0 0 24px 8px rgba(200,0,0,0.2); }
  50%     { box-shadow: 0 0 20px 8px rgba(200,0,0,0.6), 0 0 40px 16px rgba(200,0,0,0.4); }
}

/* ★ プレイヤー現在地マーカー（マップ上） */
.map-player-marker {
  position: absolute;
  transform: translate(-50%, -100%); /* 足元が領地座標に合うように */
  z-index: 25;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.map-player-icon {
  width: 72px; height: 72px;
  background: url('../assets/walk_sprite.png') no-repeat 0 0;
  background-size: 288px 72px; /* 4フレーム×72px */
  image-rendering: pixelated;
}
.map-player-icon.walking {
  animation: walk-sprite 0.6s steps(4) infinite;
}
@keyframes walk-sprite {
  from { background-position: 0 0; }
  to   { background-position: -288px 0; }
}

/* ★ 現在地ラベル（フィールド画面） */
.current-loc-label {
  font-size: 13px;
  color: #e0d6a0;
  margin-top: 2px;
  margin-bottom: 2px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

/* ===== 攻城戦バナー ===== */
#siegeBanner {
  background: linear-gradient(135deg, #3d1a00, #5a2800);
  color: #e8d5a3;
  padding: 10px 16px;
  border-radius: var(--r);
  margin: 0 auto 8px;
  max-width: var(--page-max);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(26,35,126,0.3);
}
#siegeBanner .siege-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
#siegeBanner .siege-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
#siegeBanner .siege-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: transparent;
  transition: background 0.3s;
}
#siegeBanner .siege-dot.done {
  background: #4caf50;
  border-color: #4caf50;
}
#siegeBanner .siege-dot.current {
  background: #ff9800;
  border-color: #ff9800;
  animation: siege-pulse 1s ease-in-out infinite;
}
@keyframes siege-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,152,0,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(255,152,0,0.3); }
}

/* ===== 滅亡ポップアップ ===== */
.destroy-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: destroy-fade-in 0.8s ease-out;
}
@keyframes destroy-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.destroy-popup-overlay.fade-out {
  animation: destroy-fade-out 0.6s ease-in forwards;
}
.destroy-popup-overlay.fade-out .destroy-popup {
  animation: destroy-slide-out 0.6s ease-in forwards;
}
@keyframes destroy-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes destroy-slide-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.85) translateY(15px); }
}
.destroy-popup {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 2px solid #e94560;
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(233, 69, 96, 0.4), 0 0 60px rgba(233, 69, 96, 0.15);
  max-width: 360px;
  width: 88%;
  animation: destroy-slide-in 1.0s ease-out;
}
@keyframes destroy-slide-in {
  from { opacity: 0; transform: scale(0.85) translateY(30px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.destroy-popup-icon {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}
.destroy-popup-title {
  font-size: 22px;
  font-weight: 900;
  color: #e94560;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
}
.destroy-popup-detail {
  font-size: 14px;
  color: #eee;
  line-height: 1.6;
  margin-bottom: 18px;
}
.destroy-popup-btn {
  background: #e94560;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.destroy-popup-btn:hover {
  background: #c0392b;
}

/* ★ AI滅亡ポップアップ（青紫系で区別） */
.destroy-popup--ai {
  background: linear-gradient(135deg, #1a1a2e 0%, #1b2838 50%, #1a3a4a 100%);
  border-color: #5b8fb9;
  box-shadow: 0 8px 40px rgba(91, 143, 185, 0.35), 0 0 60px rgba(91, 143, 185, 0.12);
}
.destroy-popup--ai .destroy-popup-title {
  color: #7ec8e3;
  text-shadow: 0 0 10px rgba(126, 200, 227, 0.5);
}
.destroy-popup--ai .destroy-popup-btn {
  background: #5b8fb9;
}
.destroy-popup--ai .destroy-popup-btn:hover {
  background: #4a7a9e;
}

/* ========== エンディングロール ========== */
.ending-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  opacity: 0;
  animation: ending-fade-in 2s ease-out forwards;
}
@keyframes ending-fade-in {
  to { opacity: 1; }
}
.ending-scroll-container {
  position: absolute;
  top: 100%;
  width: 90%;
  max-width: 480px;
  text-align: center;
  color: #e8e8e8;
  font-family: var(--pixel);
  line-height: 1.8;
}
.ending-scroll-container.scrolling {
  animation: ending-scroll var(--scroll-duration, 60s) linear forwards;
}
@keyframes ending-scroll {
  to { transform: translateY(var(--scroll-distance, -3000px)); }
}
.ending-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  margin-bottom: 160px;
  letter-spacing: 8px;
}
.ending-prologue {
  font-size: 20px;
  color: #ccc;
  line-height: 2.4;
  letter-spacing: 2px;
  margin-bottom: 300px;
}
.ending-section-sub {
  font-size: 14px;
  color: #999;
  margin: -16px 0 20px;
  letter-spacing: 1px;
}
.ending-stat-cat-title {
  font-size: 22px;
  color: #ffd54f;
  margin: 24px 0 8px;
  padding: 4px 12px;
  border-left: 3px solid #ffd54f;
  letter-spacing: 1px;
  font-weight: bold;
}
.ending-rank-top {
  margin-top: 28px;
  padding: 10px 8px;
  border: 1px solid #ffd700;
  border-radius: 8px;
  background: rgba(255, 215, 0, 0.08);
}
.ending-rank-top .ending-rank-num {
  color: #ffd700;
  font-size: 24px;
}
.ending-rank-top .ending-rank-name {
  color: #fff;
  font-size: 20px;
}
.ending-rank-top img {
  width: 88px;
  height: 88px;
}
.ending-verdict-title {
  font-size: 36px;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
  margin: 24px 0 16px;
  letter-spacing: 6px;
}
.ending-verdict-desc {
  font-size: 18px;
  color: #ccc;
  line-height: 2;
  letter-spacing: 1px;
  margin-bottom: 40px;
}
.ending-epilogue {
  font-size: 22px;
  color: #e8e8e8;
  line-height: 2.4;
  letter-spacing: 3px;
  margin: 400px 0 300px;
}
.ending-section-title {
  font-size: 24px;
  color: #87ceeb;
  margin: 300px 0 24px;
  letter-spacing: 3px;
}
.ending-rank-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-size: 18px;
  color: #ccc;
}
.rank-img-wrap{
  position:relative;
  display:inline-block;
  width:72px;height:72px;
  border-radius:6px;
  overflow:hidden;
  border:3px solid var(--line);
}
.rank-img-wrap>img{ position:relative; z-index:2; background:transparent !important; }
.ending-rank-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.ending-rank-num {
  width: 48px;
  text-align: right;
  color: #888;
  font-size: 20px;
  font-weight: 700;
}
.ending-rank-name {
  flex: 1;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ending-clan {
  color: #888;
  font-size: 14px;
  margin-right: 2px;
}
.ending-rank-count {
  width: 60px;
  text-align: right;
  color: #ffd700;
  font-weight: 700;
  font-size: 18px;
}
.ending-stat-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px 0;
  font-size: 20px;
}
.ending-stat-label {
  color: #888;
  text-align: right;
  width: 150px;
}
.ending-stat-value {
  color: #fff;
  text-align: left;
  width: 120px;
  font-weight: 700;
}
.ending-final-msg {
  font-size: 28px;
  color: #ffd700;
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
  margin: 80px 0 60px;
  line-height: 2.2;
  letter-spacing: 3px;
}
.ending-congrats {
  font-size: 24px;
  color: #fff;
  margin: 40px 0 20px;
  letter-spacing: 6px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}
/* ― 完 ― 中央バーン表示 */
.ending-fin-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.ending-fin-center.show {
  opacity: 1;
  pointer-events: auto;
}
.ending-fin-text {
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 16px;
  text-shadow: 0 0 40px rgba(255,255,255,0.8), 0 0 80px rgba(255,215,0,0.5);
  transform: scale(3);
  opacity: 0;
  animation: none;
}
.ending-fin-center.show .ending-fin-text {
  animation: fin-bang 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes fin-bang {
  0%   { transform: scale(3); opacity: 0; }
  40%  { transform: scale(0.9); opacity: 1; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.ending-fin-sub {
  font-size: 14px;
  color: #999;
  margin-top: 32px;
  opacity: 0;
  animation: none;
}
.ending-fin-center.show .ending-fin-sub {
  animation: fin-fade-in 1s ease-out 1.5s forwards;
}
/* ending-fin-close のフェードインは .ending-btn-group で一括制御 */
@keyframes fin-fade-in {
  to { opacity: 1; }
}
.ending-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  opacity: 0;
}
.ending-fin-center.show .ending-btn-group {
  animation: fin-fade-in 1s ease-out 2s forwards;
}
.ending-fin-close {
  font-size: 16px;
  color: #ffd700;
  background: none;
  border: 1px solid #ffd700;
  padding: 10px 40px;
  width: 280px;
  min-height: auto;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  letter-spacing: 2px;
  transition: background 0.3s, color 0.3s;
  font-family: var(--pixel);
}
.ending-fin-close:hover {
  background: #ffd700;
  color: #000;
}
.ending-sub-msg {
  font-size: 14px;
  color: #999;
  margin: 0 0 60px;
}
.ending-close-btn {
  font-size: 16px;
  color: #ffd700;
  background: none;
  border: 1px solid #ffd700;
  padding: 10px 40px;
  cursor: pointer;
  letter-spacing: 2px;
  margin-bottom: 120px;
  transition: background 0.3s, color 0.3s;
}
.ending-close-btn:hover {
  background: #ffd700;
  color: #000;
}
.ending-overlay.fade-out {
  animation: ending-fade-out 1.5s ease-in forwards;
}
@keyframes ending-fade-out {
  to { opacity: 0; }
}

/* ---------- クイズ フロート○× (SVG) ---------- */
.floating-mark{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.3);
  pointer-events:none;
  z-index:9999;
  opacity:0;
  animation:float-mark 1.2s ease-out forwards;
  filter:drop-shadow(0 0 16px rgba(0,0,0,0.5));
}
.floating-mark svg{ width:200px; height:200px; }
@keyframes float-mark{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(0.3); }
  15% { opacity:1; transform:translate(-50%,-50%) scale(1.15); }
  30% { transform:translate(-50%,-50%) scale(1); }
  70% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.3); }
}

/* ヒントカード (hints.js) は廃止済み — ログメッセージ＋ガイドに統合 */

/* =========================================================
   アクションガイド（tutorial.js）
   ========================================================= */
.guide-arrow{
  position:absolute;
  z-index:10002;
  pointer-events:auto;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s, transform .3s;
}
.guide-arrow--visible{
  opacity:1;
  transform:translateY(0);
}
.guide-arrow--enter{ opacity:0; transform:translateY(8px); }
.guide-arrow--exit{
  animation:guide-out .3s ease-in forwards;
}
@keyframes guide-out{
  to{ opacity:0; transform:translateY(-8px); }
}
.guide-arrow--fixed{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:320px;
  max-width:calc(100vw - 8%);
}
.guide-arrow--fixed.guide-arrow--visible{
  transform:translate(-50%, -50%);
}
.guide-arrow--fixed.guide-arrow--top-left{
  top:20%;
  left:24%;
}
.guide-arrow--fixed.guide-arrow--top-left.guide-arrow--visible{
  transform:translate(-50%, -50%);
}
.guide-arrow--fixed.guide-arrow--map-top-left{
  top:30%;
  left:50%;
  width:320px;
  max-width:calc(100vw - 8%);
  transform:translate(-50%, -50%);
}
.guide-arrow--fixed.guide-arrow--map-top-left.guide-arrow--visible{
  transform:translate(-50%, -50%);
}
.guide-arrow--fixed.guide-arrow--center{
  top:50%;
  left:50%;
  width:320px;
  max-width:calc(100vw - 8%);
  transform:translate(-50%, -50%);
}
.guide-arrow--fixed.guide-arrow--center.guide-arrow--visible{
  transform:translate(-50%, -50%);
}

.guide-arrow__content{
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg, #1a3a1a 0%, #2d5a2d 100%);
  border:2px solid #5a8f5a;
  border-radius:10px;
  padding:10px 14px 10px 14px;
  box-shadow:0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  color:#e8f0e8;
  font-size:13px;
  line-height:1.5;
}
.guide-arrow__emoji{
  font-size:20px;
  flex-shrink:0;
  animation:guide-bounce 1.5s ease-in-out infinite;
}
@keyframes guide-bounce{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-4px); }
}
.guide-arrow--above .guide-arrow__emoji{
  animation-name:guide-bounce-down;
}
@keyframes guide-bounce-down{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(4px); }
}
.guide-arrow--left .guide-arrow__content{
  flex-direction:row-reverse;
}
.guide-arrow--left .guide-arrow__emoji{
  animation-name:guide-bounce-right;
}
@keyframes guide-bounce-right{
  0%,100%{ transform:translateX(0); }
  50%    { transform:translateX(4px); }
}
.guide-arrow__text{
  flex:1;
}
.guide-arrow__content--emoji-top{
  flex-direction:column;
  align-items:center;
}
.guide-arrow__dismiss{
  position:absolute;
  top:-10px;
  right:-10px;
  width:22px; height:22px;
  min-width:22px; min-height:22px;
  box-sizing:border-box;
  padding:0;
  margin:0;
  border-radius:50%;
  background:#5a3a3a;
  color:#e8d5a3;
  border:1px solid #8a6a6a;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  aspect-ratio:1/1;
}
.guide-arrow__dismiss:hover{ background:#8a4a4a; }

/* ▼ モバイル: ガイド矢印を上の行・左寄せ表示 */
@media (max-width: 640px){
  .guide-arrow--above .guide-arrow__content,
  .guide-arrow--below .guide-arrow__content{
    flex-direction:column;
    align-items:flex-start;
  }
  .guide-arrow__content--emoji-top{
    align-items:center!important;
  }
  .guide-arrow__content--keep-row{
    flex-direction:row!important;
    align-items:center!important;
  }
  .guide-arrow--fixed{
    width:270px;
    max-width:calc(100vw - 8%);
  }
  .guide-arrow__content{
    font-size:12px;
  }
}

/* ガイドターゲットのパルスエフェクト */
.guide-target-pulse{
  position:relative;
  z-index:10;
  animation:guide-target-glow 2s ease-in-out infinite;
}
@keyframes guide-target-glow{
  0%,100%{ box-shadow:0 0 0 3px rgba(90,180,90,.5), 0 0 12px rgba(90,180,90,.2); }
  50%    { box-shadow:0 0 0 5px rgba(90,180,90,.8), 0 0 20px rgba(90,180,90,.4); }
}


/* チュートリアルロック用オーバーレイ */
.guide-lock-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.35);
  z-index:10000;
  cursor:not-allowed;
}

/* ガイドスキップ確認ダイアログ */
.guide-skip-confirm{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.6);
  z-index:10010;
  display:flex;
  align-items:center;
  justify-content:center;
}
.guide-skip-confirm__box{
  background:linear-gradient(135deg, #1a1a0e 0%, #2a2a14 100%);
  border:2px solid #c4a44a;
  border-radius:12px;
  padding:20px 28px;
  text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  max-width:min(380px, 90vw);
}
.guide-skip-confirm__text{
  color:#e8d5a3;
  font-size:15px;
  margin:0 0 8px;
  line-height:1.5;
}
.guide-skip-confirm__note{
  color:#a0a080;
  font-size:11px;
  margin:0 0 14px;
  line-height:1.4;
  white-space:nowrap;
}
.guide-skip-confirm__btns{
  display:flex;
  gap:12px;
  justify-content:center;
}
.guide-skip-confirm__yes,
.guide-skip-confirm__no{
  padding:8px 24px;
  border-radius:8px;
  font-size:14px;
  cursor:pointer;
  border:1px solid #8a6a4a;
}
.guide-skip-confirm__yes{
  background:#5a3a1a;
  color:#f0d080;
}
.guide-skip-confirm__yes:hover{ background:#7a5a2a; }
.guide-skip-confirm__no{
  background:#2a3a2a;
  color:#a8e8a8;
  border-color:#5a8a5a;
}
.guide-skip-confirm__no:hover{ background:#3a5a3a; }

/* ---------- あそびかた選択メニュー ---------- */
.howtoplay-menu{
  position:fixed;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px;
  background:rgba(20,16,10,.95);
  border:1px solid #8a7a5a;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  min-width:160px;
}
.howtoplay-menu__item{
  display:block;
  width:100%;
  padding:10px 14px;
  background:transparent;
  color:#e8d8a8;
  border:1px solid transparent;
  border-radius:6px;
  font-size:14px;
  text-align:left;
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
}
.howtoplay-menu__item:hover,
.howtoplay-menu__item:focus{
  background:rgba(138,122,90,.3);
  border-color:#8a7a5a;
}

/* ---------- 合成ヒントポップアップ ---------- */
.fusion-hint-overlay{
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:9000; pointer-events:auto;
}
.fusion-hint-popup{
  position:absolute;
  background:linear-gradient(135deg,#1a0a2e 0%,#2d1b4e 100%);
  border:2px solid #9c6aff;
  border-radius:12px;
  padding:14px 16px;
  color:#e8d8ff;
  font-size:13px;
  line-height:1.6;
  max-width:260px;
  box-shadow:0 4px 24px rgba(100,40,200,0.45), 0 0 8px rgba(156,106,255,0.3);
  animation:fusionHintIn 0.4s ease-out;
  z-index:9001;
}
@keyframes fusionHintIn{
  from{opacity:0;transform:translateY(8px) scale(0.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.fusion-hint-popup::after{
  content:'';
  position:absolute;
  bottom:-8px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:8px solid #9c6aff;
}
.fusion-hint-title{
  font-weight:bold;
  font-size:14px;
  color:#d4aaff;
  margin-bottom:6px;
}
.fusion-hint-body{
  margin-bottom:10px;
}
.fusion-hint-close{
  display:block;
  margin:0 auto;
  background:#6a3abf;
  color:#fff;
  border:1px solid #9c6aff;
  border-radius:6px;
  padding:5px 18px;
  font-size:13px;
  cursor:pointer;
  transition:background 0.2s;
}
.fusion-hint-close:hover{ background:#7e4edb; }
.fusion-hint-pulse{
  animation:fusionBtnPulse 1.2s ease-in-out infinite;
}
@keyframes fusionBtnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(156,106,255,0.5);}
  50%{box-shadow:0 0 12px 4px rgba(156,106,255,0.7);}
}

/* ===== 勢力確認ダイアログ ===== */
#factionConfirmDlg::backdrop{ background:rgba(0,0,0,0.65); }
#factionConfirmBar{ border-bottom:3px solid var(--fc, var(--line)); }
.fc-roster{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  gap:6px;
}
.fc-busho-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4px 2px;
  border-radius:6px;
  background:var(--bg);
  border:1px solid var(--line);
  font-size:11px;
  line-height:1.2;
  text-align:center;
  overflow:hidden;
}
.fc-busho-card img{
  width:48px; height:48px;
  object-fit:cover;
  border-radius:4px;
  image-rendering:pixelated;
  background:#222;
}
.fc-busho-name{
  margin-top:2px;
  word-break:break-all;
  max-width:68px;
}
.fc-busho-spell{
  font-size:10px;
  color:var(--text-sub);
}

/* ========== 控えの間フィルタ PC/モバイル切り替え ========== */
/* デフォルト(PC): PC用を表示、モバイル用を非表示 */
.box-filter-mobile-only { display: none !important; }
.box-filter-pc-only { display: inline-flex !important; }
@media(max-width:640px){
  .box-filter-mobile-only { display: inline-flex !important; }
  .box-filter-mobile-only.box-filter-bar { display: none !important; }
  .box-filter-mobile-only.box-filter-bar.box-filter-bar--open { display: flex !important; }
  .box-filter-pc-only { display: none !important; }
}

/* ========== 控えの間フィルタバー ========== */
.box-filter-bar{
  background:var(--teams-card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
  margin-bottom:6px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.box-filter-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
/* フィルタバー内の全コントロール共通サイズ */
.box-filter-select,
#btnBoxSort,
.box-filter-toggle,
#btnBoxFilter,
#btnBoxFilterClear,
#btnBoxFilterClearMobile{
  font-size:0.8em;
  height:22px;
  min-height:22px;
  max-height:22px;
  padding:0 6px;
  margin:0;
  box-sizing:border-box;
  line-height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
}
.box-filter-select,
#btnBoxSort{
  flex:0 1 auto;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--bg);
  color:var(--text);
}
.box-filter-toggle{
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
  background:var(--bg);
  color:var(--text);
  transition:background .15s,color .15s;
}
.box-filter-toggle[data-state="1"]{
  background:var(--teams-primary);
  color:#fff;
  border-color:var(--teams-primary);
}
.box-filter-toggle[data-state="2"]{
  background:#6d4c41;
  color:#fff;
  border-color:#6d4c41;
}
.box-filter-active{
  background:var(--teams-primary) !important;
  color:#fff !important;
}
@media(max-width:640px){
  .box-filter-select{ font-size:0.7em; }
  .box-filter-chip{ font-size:0.7em; padding:2px 4px; }
}

/* ========================================
   ランキング機能（ゲームUIスタイル統一）
   ======================================== */

/* エンディング画面のランキングボタン（ending-fin-closeベース） */
.ending-ranking-btn {
  display: block;
  width: 80%;
  max-width: 280px;
  margin: 8px auto;
  padding: 10px 16px;
  font-size: 0.92em;
  font-weight: 700;
  font-family: var(--pixel);
  border: 2px solid var(--teams-stroke);
  border-radius: var(--btn-r);
  cursor: pointer;
  background: var(--teams-subtle-bg);
  color: #e5c97a;
  transition: background 0.15s, border-color 0.15s;
}
.ending-ranking-btn:hover { background: var(--teams-subtle-hov); border-color: #c4a44a; }
.ending-ranking-btn:active { background: var(--teams-subtle-act); }
.ending-fin-close.ending-ranking-reg:disabled { opacity: 0.45; cursor: default; }

/* モーダル共通 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10200;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-dialog {
  background: #1a1206;
  border: 2px solid var(--teams-stroke);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), inset 0 1px 0 rgba(200,168,90,0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--fg);
}

/* 登録モーダル */
.ranking-reg-overlay { z-index: 10200; }
.ranking-reg-dialog {
  width: min(96vw, 400px) !important;
  gap: 10px !important;
  padding: 16px 12px !important;
  overflow: hidden;
}
.ranking-reg-title {
  font-size: 1.1em; margin: 0; font-weight: 700;
  font-family: var(--pixel); color: #e5c97a;
  border-bottom: 1px solid var(--teams-stroke);
  padding-bottom: 8px;
}
.ranking-reg-desc { font-size: 0.82em; color: #a89060; margin: 0; line-height: 1.4; }
.ranking-nickname-row { display: flex; gap: 6px; align-items: center; }
.ranking-nickname-input {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 8px 10px; font-size: 0.95em; font-family: var(--pixel);
  background: #0e0a04; color: #e5d8b0;
  border: 2px solid var(--teams-stroke); border-radius: var(--btn-r);
  outline: none;
  transition: border-color 0.2s;
}
.ranking-nickname-input:focus { border-color: #c4a44a; box-shadow: 0 0 0 3px rgba(196,164,74,0.25); }
.ranking-nickname-input::placeholder { color: #5a4a28; }
.ranking-kbd-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  padding: 0; font-size: 0.9em;
  background: var(--teams-subtle-bg); color: #c4a44a;
  border: 1px solid var(--teams-stroke); border-radius: var(--btn-r);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ranking-kbd-btn:hover { background: var(--teams-subtle-hov); }
.ranking-reg-msg { font-size: 0.82em; min-height: 1.2em; color: #a89060; font-family: var(--pixel); }
.ranking-reg-msg.error { color: #ff6b6b; font-weight: 600; }
.ranking-reg-msg.success { color: #6dbf67; font-weight: 600; }
.ranking-reg-actions { display: flex; gap: 8px; justify-content: center; }

/* アニメーション */
.ranking-reg-overlay .ranking-reg-dialog,
.ranking-view-overlay .ranking-view-dialog {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ranking-reg-overlay.is-open .ranking-reg-dialog,
.ranking-view-overlay.is-open .ranking-view-dialog {
  opacity: 1; transform: translateY(0);
}

/* 閲覧モーダル */
.ranking-view-overlay {
  z-index: 10200 !important;
  align-items: flex-start !important;
  padding: 16px 0 !important;
  overflow-y: auto !important;
}
.ranking-view-dialog {
  width: min(98vw, 640px) !important;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  gap: 8px !important;
  padding: 16px 10px !important;
}
.ranking-view-title {
  font-size: 1.1em; margin: 0; font-weight: 700; text-align: center;
  font-family: var(--pixel); color: #e5c97a;
  border-bottom: 1px solid var(--teams-stroke);
  padding-bottom: 8px;
}
.ranking-view-actions { display: flex; justify-content: center; margin-top: 8px; }

/* ソートバー */
.ranking-sort-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center; width: 100%; margin-bottom: 4px;
}
.ranking-sort-btn {
  padding: 1px 7px !important; font-size: 0.70em !important;
  line-height: 1.2 !important;
  min-height: auto !important;
  font-family: var(--pixel) !important;
  font-weight: normal !important; border: 1px solid var(--teams-stroke) !important;
  border-radius: 20px !important;
  background: #1a1206 !important; color: #a89060 !important;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ranking-sort-btn:hover { background: var(--teams-subtle-hov) !important; color: #e5c97a !important; }
.ranking-sort-btn.active {
  background: var(--teams-primary) !important;
  border-color: #6e1d00 !important;
  color: #fff !important;
}

/* テーブル */
.ranking-table-wrap { width: 100%; overflow-x: auto; }
.ranking-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.70em; min-width: 500px;
  font-family: var(--pixel);
}
.ranking-table thead th {
  background: #3a1a00; color: #e5c97a;
  padding: 5px 4px; font-weight: normal;
  border-bottom: 2px solid var(--teams-stroke);
  white-space: nowrap; text-align: center;
}
.ranking-table tbody tr { border-bottom: 1px solid #2a1f0e; }
.ranking-table tbody tr:hover { background: #2a1f0e !important; }
.ranking-table td { padding: 5px 4px; text-align: center; white-space: nowrap; color: #c8b87a; }
.ranking-row-even { background: #110d04; }
.ranking-empty { text-align: center; padding: 20px; color: #6a5a3a; font-family: var(--pixel); }
.ranking-loading { text-align: center; color: #6a5a3a; font-size: 0.85em; padding: 16px 0; font-family: var(--pixel); }
.rk-rank { font-weight: 700; font-size: 1.1em; color: #e5c97a; }
.rk-nick { font-weight: 700; text-align: left; max-width: 100px; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.rk-days { font-weight: 700; color: #ff9c4a; }
.rk-date { color: #6a5a3a; }
.rk-title { color: #c4a44a; }

/* カスタムソフトキーボード */
.soft-kbd {
  margin-top: 6px; display: flex; flex-direction: column;
  gap: 3px; user-select: none; overflow: hidden; width: 100%; max-width: 100%;
}
.soft-kbd-row { display: flex; justify-content: center; gap: 2px; width: 100%; }
.soft-kbd-key {
  flex: 1 1 0; min-width: 0; height: 30px;
  border: 1px solid #4a3820; border-radius: 3px;
  background: #1a1206; color: #c8b87a;
  font-size: 0.75em; font-family: var(--pixel);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; box-sizing: border-box;
  transition: background 0.1s;
}
.soft-kbd-key:active { background: #3d2e16; }
.soft-kbd-key:focus {
  outline: 2px solid #c4a44a; outline-offset: -1px;
  box-shadow: 0 0 0 2px rgba(196,164,74,0.3); z-index: 1; position: relative;
}
.soft-kbd-key.wide { flex: 1.4 1 0; font-size: 0.68em; }
.soft-kbd-key.space { flex: 3 1 0; }
.soft-kbd-mode-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 2px; }
.soft-kbd-mode-btn {
  padding: 2px 7px; border: 1px solid #4a3820; border-radius: 4px;
  background: #1a1206; color: #a89060;
  font-size: 0.70em; cursor: pointer; font-family: var(--pixel);
  transition: background 0.1s;
}
.soft-kbd-mode-btn.active { background: var(--teams-primary); color: #fff; border-color: #6e1d00; }
.soft-kbd-mode-btn:focus {
  outline: 2px solid #c4a44a; outline-offset: 0px;
  box-shadow: 0 0 0 2px rgba(196,164,74,0.3); z-index: 1; position: relative;
}

/* =========================================================
   御前問答 (Gozen Mondou) イベント
   ========================================================= */
.gozen-dialog {
  border-radius: 12px;
  border: 2px solid #5c6bc0;
  padding: 16px;
  max-width: 370px;
  width: 92%;
  background: var(--bg, #1a1a2e);
  color: var(--fg, #eee);
  font-size: 14px;
  max-height: 85vh;
  overflow-y: auto;
}
.gozen-dialog::backdrop { background: rgba(0,0,0,0.65); }
.gozen-header { text-align: center; margin-bottom: 12px; }
.gozen-title {
  font-weight: 700; font-size: 17px; color: #9fa8da; margin-bottom: 4px;
}
.gozen-subtitle {
  font-size: 0.85em; color: #aaa; line-height: 1.5;
}
.gozen-member-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px; margin: 4px 0;
  border-radius: 8px; border: 1px solid #5c6bc0;
  background: rgba(92,107,192,0.08);
  color: #eee; cursor: pointer; font-size: 13px;
  transition: background 0.15s;
}
.gozen-member-btn:hover:not(:disabled) { background: rgba(92,107,192,0.2); }
.gozen-skip-btn {
  width: 100%; margin-top: 10px; padding: 8px;
  border-radius: 8px; border: 1px solid #666;
  background: #333; color: #aaa; cursor: pointer; font-size: 13px;
}
/* クイズ出題ダイアログ */
.gozen-quiz-progress {
  font-size: 13px; color: #9fa8da; font-weight: 700; margin-bottom: 2px;
}
.gozen-quiz-member {
  font-size: 12px; color: #aaa;
}
.gozen-chiri-hint {
  font-size: 11px; color: #81c784; margin-top: 4px;
}
.gozen-question {
  font-size: 14px; line-height: 1.6; margin: 12px 0;
  padding: 10px; border-radius: 8px;
  background: rgba(92,107,192,0.06); border: 1px solid rgba(92,107,192,0.15);
  word-break: break-all;
  overflow-wrap: break-word;
}
.gozen-choices { display: flex; flex-direction: column; gap: 6px; }
.gozen-choice-btn {
  width: 100%; padding: 10px 12px; text-align: left;
  border-radius: 8px; border: 1px solid #5c6bc0;
  background: rgba(92,107,192,0.06);
  color: #eee; cursor: pointer; font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
  word-break: break-all;
  overflow-wrap: break-word;
}
.gozen-choice-btn:hover:not(:disabled) { background: rgba(92,107,192,0.18); }
/* 結果ダイアログ */
.gozen-result-dialog { max-width: 520px; }
.gozen-result-summary {
  font-size: 15px; margin-top: 6px; color: #ddd;
}
.gozen-correct-count { color: #ffd700; font-size: 1.3em; font-weight: 700; }
.gozen-result-list {
  max-height: 45vh; overflow-y: auto; margin: 12px 0;
  padding: 0;
}
/* 結果テーブル */
.gozen-result-table {
  width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.5;
}
.gozen-result-table th {
  background: rgba(92,107,192,0.15); color: #9fa8da;
  padding: 6px 4px; font-weight: 700; text-align: left;
  border-bottom: 2px solid rgba(92,107,192,0.3);
  white-space: nowrap;
}
.gozen-result-table td {
  padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.gozen-rt-no { width: 24px; text-align: center; color: #9fa8da; font-weight: 700; }
.gozen-rt-result { width: 28px; text-align: center; }
.gozen-rt-q { min-width: 100px; word-break: break-all; overflow-wrap: break-word; }
.gozen-rt-sel { min-width: 70px; font-weight: 600; word-break: break-all; overflow-wrap: break-word; }
.gozen-rt-ans { min-width: 70px; color: #4caf50; word-break: break-all; overflow-wrap: break-word; }
.gozen-row-correct td { background: rgba(76,175,80,0.05); }
.gozen-row-wrong td   { background: rgba(244,67,54,0.05); }
.gozen-chiri-result {
  text-align: center; font-size: 15px; line-height: 1.6;
  padding: 12px 8px; margin: 8px 0;
  border-radius: 8px; background: rgba(92,107,192,0.08);
  border: 1px solid rgba(92,107,192,0.2);
}
.gozen-ok-btn {
  display: block; width: 100%; padding: 10px;
  border-radius: 8px; border: 1px solid #5c6bc0;
  background: #5c6bc0; color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 700;
  margin-top: 8px;
}

/* ============================================================
   軍師ポップアップ
   ============================================================ */
.gunshi-popup {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  width: 90%;
  max-width: 420px;
  background: rgba(26, 18, 8, 0.95);
  border: 1px solid var(--fg);
  border-radius: var(--r);
  padding: 10px 14px;
  z-index: 9020;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  font-family: var(--pixel);
}
.gunshi-popup--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0s;
}
/* マップ画面用: 上部表示 */
.gunshi-popup--top {
  bottom: auto;
  top: 150px;  /* PC */
  transform: translateX(-50%) translateY(-120%);
}
.gunshi-popup--top.gunshi-popup--visible {
  transform: translateX(-50%) translateY(0);
}
.gunshi-popup--return {
  bottom: auto;
  top: 40px;
  transform: translateX(-50%) translateY(-120%);
}
.gunshi-popup--return.gunshi-popup--visible {
  transform: translateX(-50%) translateY(0);
}
.gunshi-popup-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gunshi-thumb {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.gunshi-popup-header {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.gunshi-popup-body {
  font-size: 14px;
  color: var(--fg);
  white-space: pre-wrap;
  line-height: 1.4;
}

/* スマホ対応 */
@media (max-width: 640px) {
  .gunshi-popup {
    width: 94vw;
    bottom: 8px;
    padding: 8px 10px;
  }
  .gunshi-popup--top {
    bottom: auto;
    top: 100px;  /* スマホ */
  }
  .gunshi-popup--return {
    /* 右上起点、右端から8px隙間 */
    bottom: auto;
    top: 8px;
    left: auto;
    right: 8px;
    width: 142px;
    max-width: 142px;
    /* 右端外から左へスライドイン */
    transform: translateX(calc(100% + 8px));
  }
  .gunshi-popup--return.gunshi-popup--visible {
    transform: translateX(0);
  }
  .gunshi-popup--return .gunshi-popup-inner {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 6px;
    align-items: center;
  }
  .gunshi-popup--return .gunshi-thumb {
    width: 36px;
    height: 36px;
    grid-row: 1;
    grid-column: 1;
  }
  .gunshi-popup--return .gunshi-popup-content {
    display: contents;          /* 子要素をgridに直接参加させる */
  }
  .gunshi-popup--return .gunshi-popup-header {
    grid-row: 1;
    grid-column: 2;
    font-size: 9px;
    text-align: left;
    align-self: start;
  }
  .gunshi-popup--return .gunshi-popup-body {
    grid-row: 2;
    grid-column: 1 / -1;       /* 全幅 */
    font-size: 10px;
    text-align: left;
    line-height: 1.3;
    margin-top: 2px;
  }
  .gunshi-thumb {
    width: 36px;
    height: 36px;
  }
  .gunshi-popup-header {
    font-size: 11px;
  }
  .gunshi-popup-body {
    font-size: 13px;
  }
}