*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #12121f;
  --panel:  #1a1a30;
  --border: #3a3a5c;
  --gold:   #c8a84b;
  --gold2:  #e0c060;
  --red:    #e05050;
  --blue:   #5088e0;
  --green:  #50c080;
  --text:   #d0d0e0;
  --dim:    #888898;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 16px; /* 全体の地の文字サイズ（14→16・カードはキャップで現状維持） */
}
/* カードは内部 em でサイズ調整しているので、親 font-size を固定キャップして見た目維持 */
.pref-card  { font-size: 14px; }
.skill-card { font-size: 13px; }

/* ─── モード選択（ホーム） ─── */
#mode-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  gap: 16px;
  /* タイトル画面の背景。assets/title-bg.png を敷き、文字が読めるよう薄い暗幕を重ねる。
     画像が無ければ暗幕（濃紺グラデ）だけ表示＝崩れない。 */
  background:
    linear-gradient(rgba(8,10,20,0.42), rgba(8,10,20,0.68)),
    url('assets/title-bg.png') center / cover no-repeat fixed,
    #0a0c14;
}
.mode-menu { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; }
.mode-btn { width: 100%; font-size: 1.0em; }

/* ─── 1対1 対戦設定（県をカードで選ぶ画面・スクロール可） ─── */
#setup-screen {
  display: none; position: fixed; inset: 0;
  /* background-attachment:fixed は使わない＝60枚カードをスクロールするたび全面再描画になり重い（teamsetup-screenと同方針）。 */
  background:
    linear-gradient(rgba(8,10,20,0.60), rgba(8,10,20,0.78)),
    url('assets/title-bg.png') center / cover no-repeat,
    #0a0c14;
  z-index: 55; overflow-y: auto; overflow-x: hidden; padding: 16px;
}
#setup-screen > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.solo-slots { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 10px auto; }
.solo-slot {
  border: 2px solid var(--border); border-radius: 10px; padding: 10px 14px;
  background: rgba(40,40,70,0.5); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color 0.15s, box-shadow 0.15s;
}
.solo-slot.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(212,175,55,0.5); }
.solo-slot-head { font-size: 1.05em; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.solo-slot-active-badge { font-size: 0.72em; color: #14142a; background: var(--gold); border-radius: 4px; padding: 1px 7px; font-weight: bold; }
.solo-slot-ctrl { display: flex; gap: 8px; }
.solo-slot-ctrl button { font-size: 0.85em; padding: 3px 10px; }
.solo-actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 12px auto; }
/* 1対1のカードグリッドは中央寄せ（図鑑は地方見出しがあるので左寄せのまま）。 */
#solo-grid.pref-region-grid { margin-top: 4px; justify-content: center; }
.setup-title {
  font-size: 1.9em;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.8);
}
select {
  width: 100%;
  padding: 9px 12px;
  margin: 4px 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0f0f20;
  color: var(--text);
  font-size: 0.88em;
  cursor: pointer;
  font-family: inherit;
}

button {
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.9em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
button:hover { background: #25254a; border-color: var(--gold); }
.btn-p { background: var(--gold); color: #111; font-weight: bold; border-color: var(--gold); }
.btn-p:hover { background: var(--gold2); }

/* ─── Battle ─── */
#battle-screen { display: none; flex-direction: column; justify-content: center; min-height: 100vh; padding: 10px; max-width: 920px; margin: 0 auto; position: relative; }
/* 戦闘画面の背景＝夕焼けの闘技場。画面全体に敷き、UIが読めるよう濃いめの暗幕を重ねる。
   ::before を z-index:-1 で中央列(920px)の裏・画面全体に展開（battle-screenが非表示の間は描画されない）。 */
#battle-screen::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(6,7,15,0.72), rgba(6,7,15,0.85)),
    url('assets/battle-bg.png') center / cover no-repeat;
  background-color: #0a0c14;
}

.top-bar {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 8px;
  margin-bottom: 10px;
  align-items: start;
}

/* 対戦中プレイヤーパネル：カードを左/右に寄せ、横に情報を並べてコンパクトに */
.pp {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  transition: border-color 0.2s;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
}
#pp1 { grid-template-columns: 1fr auto; }
.pp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp.active {
  border-color: var(--gold);
  box-shadow: 0 0 14px 2px rgba(212,175,55,0.55), inset 0 0 0 1px var(--gold);
  background: rgba(60,55,25,0.35);
}
.pp.inactive { opacity: 0.5; filter: saturate(0.6); }
/* 紅組 対 蒼組：左パネル(P0)=蒼／右パネル(P1)=紅 のチーム帯（手番の金枠とは別に常時表示） */
#pp0::after, #pp1::after { content: ''; position: absolute; top: 8px; bottom: 8px; width: 6px; border-radius: 3px; }
#pp0::after { left: 0;  background: linear-gradient(180deg, #7ab8ff, #3a6fd0); box-shadow: 0 0 8px rgba(80,140,230,0.7); }
#pp1::after { right: 0; background: linear-gradient(180deg, #ff8f8f, #d23a3a); box-shadow: 0 0 8px rgba(220,70,70,0.7); }
.turn-arrow {
  font-size: 1.7em; font-weight: bold; color: var(--gold); line-height: 1;
  margin-bottom: 2px; min-height: 1.1em;
  animation: arrowPulse 1.1s ease-in-out infinite;
}
.turn-arrow.left  { text-shadow: -6px 0 10px rgba(212,175,55,0.7); }
.turn-arrow.right { text-shadow:  6px 0 10px rgba(212,175,55,0.7); }
@keyframes arrowPulse { 0%,100%{opacity:0.55; transform:scale(1);} 50%{opacity:1; transform:scale(1.18);} }
.hand-row.align-right { justify-content: flex-end; }

/* ── 見える化：被弾フラッシュ・ダメージ数字・ゲージ点灯 ── */
.pp.fx-hit  { animation: fxHit 0.45s ease; }
.pp.fx-heal { animation: fxHeal 0.5s ease; }
@keyframes fxHit  { 0%{box-shadow:0 0 0 0 rgba(255,60,60,0);} 25%{box-shadow:0 0 18px 4px rgba(255,60,60,0.85); background:rgba(120,30,30,0.6);} 100%{box-shadow:0 0 0 0 rgba(255,60,60,0);} }
@keyframes fxHeal { 0%{box-shadow:0 0 0 0 rgba(60,220,120,0);} 25%{box-shadow:0 0 18px 4px rgba(60,220,120,0.7); background:rgba(30,90,50,0.5);} 100%{box-shadow:0 0 0 0 rgba(60,220,120,0);} }
.fx-float {
  position: absolute; left: 50%; top: 38%; transform: translateX(-50%);
  font-weight: bold; font-size: 2.0em; pointer-events: none; z-index: 5;
  text-shadow: 0 2px 6px #000; animation: fxFloat 1.05s ease-out forwards;
}
.fx-float.dmg  { color: #ff5a5a; }
.fx-float.heal { color: #5ae08a; }
.fx-float.miss { color: #aab; font-size: 1.3em; }
.fx-float.big  { font-size: 2.8em; color: #ffd24a; }
@keyframes fxFloat { 0%{opacity:0; transform:translate(-50%,10px) scale(0.7);} 18%{opacity:1; transform:translate(-50%,-2px) scale(1.1);} 70%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-46px) scale(1);} }
.pip.fx-pip { animation: fxPip 0.6s ease; }
@keyframes fxPip { 0%{transform:scale(1);} 40%{transform:scale(1.9); box-shadow:0 0 10px 3px var(--gold);} 100%{transform:scale(1);} }
/* ── 行動演出（攻撃の踏み込み／防御・回避・反撃の手応え） ── */
.pp.fx-atk0  { animation: fxAtk0 0.4s ease; }
.pp.fx-atk1  { animation: fxAtk1 0.4s ease; }
@keyframes fxAtk0 { 0%{transform:translateX(0);} 30%{transform:translateX(22px);} 100%{transform:translateX(0);} }
@keyframes fxAtk1 { 0%{transform:translateX(0);} 30%{transform:translateX(-22px);} 100%{transform:translateX(0);} }
.pp.fx-evade0 { animation: fxEvade0 0.45s ease; }
.pp.fx-evade1 { animation: fxEvade1 0.45s ease; }
@keyframes fxEvade0 { 0%{transform:translateX(0);opacity:1;} 35%{transform:translateX(-28px);opacity:0.5;} 100%{transform:translateX(0);opacity:1;} }
@keyframes fxEvade1 { 0%{transform:translateX(0);opacity:1;} 35%{transform:translateX(28px);opacity:0.5;} 100%{transform:translateX(0);opacity:1;} }
.pp.fx-guard   { animation: fxGuard 0.5s ease; }
.pp.fx-brace   { animation: fxGuard 0.5s ease; }
.pp.fx-counter { animation: fxCounter 0.5s ease; }
@keyframes fxGuard   { 0%{box-shadow:0 0 0 0 rgba(90,170,255,0);} 25%{box-shadow:0 0 18px 5px rgba(90,170,255,0.9); background:rgba(30,60,110,0.55);} 100%{box-shadow:0 0 0 0 rgba(90,170,255,0);} }
@keyframes fxCounter { 0%{box-shadow:0 0 0 0 rgba(255,180,60,0);} 25%{box-shadow:0 0 20px 6px rgba(255,180,60,0.9); background:rgba(110,70,20,0.55);} 100%{box-shadow:0 0 0 0 rgba(255,180,60,0);} }
.fx-float.def  { color:#7fb6ff; font-size:1.2em; }
.fx-float.crit { font-size:2.3em; color:#ffd24a; text-shadow:0 0 12px rgba(255,180,40,0.95); }
/* 決定打：盤面ゴールドフラッシュ */
#decisive-flash { position:fixed; inset:0; pointer-events:none; z-index:60; opacity:0;
  background:radial-gradient(circle, rgba(255,210,80,0.45), rgba(255,160,40,0.12) 60%, transparent 75%); }
#decisive-flash.on { animation: fxDecisive 0.7s ease; }
@keyframes fxDecisive { 0%{opacity:0;} 20%{opacity:1;} 100%{opacity:0;} }
/* ── 迫力エフェクト：画面シェイク／被弾の衝撃波／全画面フラッシュ ── */
.fx-shake     { animation: fxShake 0.5s ease; }
.fx-shake-big { animation: fxShakeBig 0.6s ease; }
@keyframes fxShake    { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-5px,3px)} 40%{transform:translate(5px,-3px)} 60%{transform:translate(-4px,2px)} 80%{transform:translate(3px,-2px)} }
@keyframes fxShakeBig { 0%,100%{transform:translate(0,0)} 12%{transform:translate(-11px,6px)} 26%{transform:translate(10px,-7px)} 40%{transform:translate(-9px,5px)} 54%{transform:translate(8px,-4px)} 70%{transform:translate(-5px,3px)} 85%{transform:translate(3px,-2px)} }
.fx-burst { position:absolute; left:50%; top:46%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; pointer-events:none; z-index:9;
  background:radial-gradient(circle, rgba(255,245,200,0.95) 0%, rgba(255,140,50,0.6) 45%, rgba(255,80,40,0.15) 65%, transparent 72%);
  animation: fxBurst 0.6s cubic-bezier(0.2,0.7,0.3,1) forwards; }
@keyframes fxBurst { 0%{transform:scale(0.2); opacity:0.2} 18%{opacity:1} 100%{transform:scale(4.4); opacity:0} }
.fx-screenflash { position:fixed; inset:0; z-index:62; pointer-events:none; background:rgba(255,255,255,0.72); animation: fxScreenFlash 0.38s ease-out forwards; }
@keyframes fxScreenFlash { 0%{opacity:0.95} 100%{opacity:0} }
/* ヒットストップ＝とどめの一瞬、暗いビネットを“保持”して時を止める（溜め→ドンで重く） */
.fx-hitstop { position:fixed; inset:0; z-index:59; pointer-events:none;
  background:radial-gradient(circle at center, transparent 28%, rgba(0,0,0,0.62) 100%);
  animation: fxHitstop 0.5s ease forwards; }
@keyframes fxHitstop { 0%{opacity:0} 12%{opacity:1} 62%{opacity:1} 100%{opacity:0} }
/* ── 決着の一拍：敗者が崩れ／勝者が輝き／中央バナー ── */
.pp.fx-defeated { animation: fxDefeated 1.25s ease forwards; }
@keyframes fxDefeated { 0%{filter:none; transform:translateY(0) rotate(0);} 14%{transform:translateY(-4px) rotate(1.2deg);} 100%{filter:grayscale(0.9) brightness(0.4); transform:translateY(15px) rotate(-2.5deg); opacity:0.48;} }
.pp.fx-victory  { animation: fxVictory 1.1s ease; }
@keyframes fxVictory { 0%,100%{box-shadow:none;} 30%{box-shadow:0 0 24px 7px rgba(255,210,80,0.85);} }
/* クリック受付レイヤー（決着中・透明だが画面全体のクリックを拾う＋下のUI誤操作を防ぐ） */
#finish-catch { position:fixed; inset:0; z-index:61; display:none; cursor:pointer; background:rgba(0,0,0,0.58); }
#finish-banner { position:fixed; top:46%; left:50%; transform:translate(-50%,-50%) scale(0.6);
  z-index:63; opacity:0; text-align:center; pointer-events:none; width:94%; line-height:1.15;
  /* 決め手カード・文字が盤面に溶けないよう、中央に暗いビネットを敷いて浮かせる */
  padding:24px 0; background:radial-gradient(ellipse 60% 75% at center, rgba(4,5,12,0.94) 0%, rgba(4,5,12,0.82) 48%, rgba(4,5,12,0) 76%); }
#finish-banner.show { animation: fbShow 0.55s ease forwards; }   /* フェードインして保持（クリックまで消えない） */
@keyframes fbShow { 0%{opacity:0; transform:translate(-50%,-50%) scale(0.6);} 65%{opacity:1; transform:translate(-50%,-50%) scale(1.14);} 100%{opacity:1; transform:translate(-50%,-50%) scale(1);} }
#finish-banner .fb-title { font-size:5em; font-weight:bold; color:#ffd24a; text-shadow:0 0 22px rgba(255,180,40,0.95), 0 3px 6px #000; }
#finish-banner .fb-sub { font-size:2.4em; font-weight:bold; color:#fff; text-shadow:0 0 10px rgba(0,0,0,0.8), 0 3px 6px #000; margin-top:10px; }
#finish-banner .fb-hint { font-size:1.2em; color:#cfe3ff; text-shadow:0 2px 4px #000; margin-top:18px; animation: fbHint 1.1s ease-in-out infinite; }
@keyframes fbHint { 0%,100%{opacity:0.4;} 50%{opacity:1;} }
/* 決着バナーの「決め手」＝勝因を一目で示すカード（とどめのカード／めくれた奥義） */
#finish-banner .fb-title { font-size:4.2em; }   /* 決め手カードと縦に共存するため少し小さく */
#finish-banner .fb-eyebrow { font-size:1.15em; color:#ffe6a0; letter-spacing:0.18em; margin-top:10px; text-shadow:0 2px 5px #000; }
#finish-banner .fb-card { display:inline-block; margin:6px auto 2px; text-align:left; pointer-events:none;
  transform:scale(0.92); transform-origin:center top; animation: fbCardPop 0.5s ease both; }
@keyframes fbCardPop { 0%{opacity:0; transform:scale(0.6) rotateY(80deg);} 60%{opacity:1; transform:scale(0.98) rotateY(0);} 100%{opacity:1; transform:scale(0.92);} }
#finish-banner .fb-card.skill-card { box-shadow:0 0 30px rgba(255,210,80,0.7), 0 6px 18px rgba(0,0,0,0.8); }
/* 奥義の決め手＝金の縦カード（伏せ札がめくれたイメージ） */
#finish-banner .fb-ult-card { width:150px; min-height:200px; padding:22px 12px; border-radius:12px; text-align:center;
  background:linear-gradient(160deg,#7a5e14 0%,#caa12e 55%,#8a6d18 100%); border:2px solid #ffe680; color:#23190a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
#finish-banner .fb-ult-card .fb-uc-mark { font-size:3.2em; line-height:1; text-shadow:0 0 14px rgba(255,255,255,0.8); }
#finish-banner .fb-ult-card .fb-uc-name { font-size:1.7em; font-weight:bold; letter-spacing:0.05em; }
#finish-banner .fb-ult-card .fb-uc-tag  { font-size:0.85em; opacity:0.85; }

/* ─── 演出強化(D3)：究極奥義の発動ビート＋ゲージ満タン(必殺解禁)の合図 ─── */
/* 究極奥義の発動：発動者パネルが電撃グロー＋大きな⚡技名（画面フラッシュは decisiveFlash を流用）。 */
.pp.fx-ult { animation: fxUlt 0.8s ease; }
@keyframes fxUlt {
  0%   { box-shadow:0 0 0 0 rgba(255,225,120,0); }
  20%  { box-shadow:0 0 26px 9px rgba(255,225,120,0.95); background:rgba(90,70,15,0.55); }
  55%  { box-shadow:0 0 16px 5px rgba(140,200,255,0.85); }
  100% { box-shadow:0 0 0 0 rgba(255,225,120,0); }
}
.fx-float.ult {
  font-size: 2.2em; font-weight: bold; color:#ffe680;
  text-shadow:0 0 16px rgba(255,200,60,0.95), 0 2px 5px #000; white-space:nowrap;
}
/* ゲージ満タン＝フィニッシャー解禁：ゲージ行がうっすら脈打ち、点灯ピップが発光、ラベルが金色に。 */
.gauge-row.gauge-full { animation: gaugeFull 1.3s ease-in-out infinite; }
.gauge-row.gauge-full .g-label { color: var(--gold2); font-weight: bold; }
.gauge-row.gauge-full .pip.on  { box-shadow:0 0 7px 1px var(--gold2); }
@keyframes gaugeFull { 0%,100%{ filter:none; } 50%{ filter:drop-shadow(0 0 5px rgba(224,192,96,0.9)); } }

/* ── カードの出入り：山札・捨て札・伏せ札を盤面に実カードで ── */
.card-field { display: flex; justify-content: space-between; align-items: flex-start; margin: 30px 6px 8px; }
.card-field.solo-field { justify-content: center; }   /* 自分の席だけ表示＝場が1つ＝中央に */
/* 自分の場：山札を左・捨て札を右・奥義を中央に振り分ける（盤面いっぱいに広げて左右へ寄せる） */
.card-field.solo-field .cf-side { flex: 1; max-width: none; width: 100%; justify-content: space-between; gap: 0; }
.card-field.solo-field #cf1 { flex-direction: row; }   /* 観る人がP2でも 山札左→奥義中央→捨て札右 を保つ */
/* 山札・捨て札は奥義より下げる（奥義＝中央の特別枠は高い位置のまま・両脇の札を手札寄りへ） */
.card-field.solo-field .cf-deck, .card-field.solo-field .cf-disc { margin-top: 44px; }
.cf-side    { display: flex; gap: 9px; align-items: flex-start; }
#cf1        { flex-direction: row-reverse; }
.cf-item    { display: flex; flex-direction: column; align-items: center; gap: 5px; }

/* 1枚のカード（手札カードと同じ枠の言語・裏面＝和風 紺×金） */
/* 山札・捨て札＝場のアイコン的な小カード。手札/県カードに大きさを寄せる必要はない（デザイン上わざと小さめ）。 */
.tcard {
  width: 54px; height: 76px; border-radius: 7px; position: relative; flex: 0 0 auto; box-sizing: border-box;
  border: 2px solid var(--gold);
  background: linear-gradient(160deg, #2b2660 0%, #211c46 55%, #161232 100%);
  box-shadow: 0 3px 9px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(224,192,96,0.22);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.3s, border-color 0.3s;
}
/* 裏面の中央紋 */
.tback-mark {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--gold2); color: var(--gold2);
  display: flex; align-items: center; justify-content: center; font-size: 1.2em;
  box-shadow: inset 0 0 8px rgba(224,192,96,0.35), 0 0 6px rgba(224,192,96,0.2);
}
.ct-badge {
  position: absolute; bottom: -7px; right: -7px;
  background: #14131f; border: 1.5px solid var(--gold); border-radius: 11px;
  min-width: 20px; padding: 1px 6px; font-size: 0.74em; line-height: 1.4; text-align: center;
  color: #fff; font-weight: bold; z-index: 4;
}
/* 山＝後ろにカードを重ねて厚みを出す */
.pile { position: relative; }
.pile .tcard { z-index: 2; }
.pile::before, .pile::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(160deg, #241f50, #15122e); border: 2px solid #8a7320;
}
.pile::before { transform: translate(4px, 4px); z-index: 1; }
.pile::after  { transform: translate(8px, 8px); z-index: 0; opacity: 0.65; }
.pile.empty .tcard { background: none; border-style: dashed; border-color: #4a4668; box-shadow: none; }
.pile.empty .tback-mark { opacity: 0.3; }
.pile.empty::before, .pile.empty::after { display: none; }

/* 伏せ札＝奥義。ひと回り大きく、満タンで金光、発動でめくれて金の表に */
.tcard.ult { width: 76px; height: 106px; }
.tcard.ult .tback-mark { width: 44px; height: 44px; font-size: 1.5em; }
.tcard.ult.ready { border-color: var(--gold2); animation: ultReady 1.3s ease-in-out infinite; }
.tcard.ult.ready .tback-mark { color: #fff; border-color: #fff; }
.tcard.ult.flipped { background: linear-gradient(160deg, #6a5414, #a8851f); border-color: #fff; animation: ultFlip 0.6s ease; }
.tcard.ult.flipped .tback-mark { color: #fff; border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.5); }
@keyframes ultReady { 0%,100%{ box-shadow: 0 3px 9px rgba(0,0,0,0.55), 0 0 8px 1px rgba(224,192,96,0.5); } 50%{ box-shadow: 0 3px 9px rgba(0,0,0,0.55), 0 0 18px 4px rgba(224,192,96,1); } }
@keyframes ultFlip  { 0%{transform:rotateY(0);} 50%{transform:rotateY(90deg);} 100%{transform:rotateY(0);} }

/* 手札を引いた瞬間：山札の位置から飛んできて、めくれて(rotateY 90→0)手札に並ぶ。
   renderHandが各カードに deal-fly と --dx/--dy(山札からの差分)を付与（新規ドロー時のみ）。
   fill=backwards：配り終え後は通常CSSへ戻す＝条件不足の薄表示(c-off/c-used)を上書きしない。 */
.hand-row { perspective: 1200px; }
/* 捨てる演出：手札のクローンを捨て札の山へ飛ばす浮遊カード（.skill-cardのposition:relativeに勝つ） */
.skill-card.card-ghost { position: fixed; margin: 0; z-index: 9999; pointer-events: none; will-change: transform, opacity; }
.skill-card.hand.deal-fly { animation: dealFly 0.42s cubic-bezier(0.2,0.7,0.3,1) backwards; transform-origin: center; }
@keyframes dealFly {
  from { transform: translate(var(--dx,0px), var(--dy,0px)) rotateY(90deg) scale(0.72); opacity: 0.2; }
  55%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

.pp-wincon { font-size: 0.88em; color: #9fd6b0; margin-top: 3px; line-height: 1.4; }
#pp1 .pp-wincon { color: #9fd6b0; }

.hp-track { height: 7px; background: #2a2a3f; border-radius: 4px; overflow: hidden; margin: 3px 0; }
.hp-fill  { height: 100%; border-radius: 4px; transition: width 0.4s, background 0.3s; }
.hp-hi    { background: var(--green); }
.hp-mid   { background: #e0a030; }
.hp-lo    { background: var(--red); }
.hp-num   { font-size: 0.95em; color: var(--dim); }

.gauge-row { display: flex; align-items: center; gap: 4px; margin: 5px 0; flex-wrap: wrap; }
.g-label  { font-size: 0.9em; color: var(--dim); white-space: nowrap; }
.pip      { width: 12px; height: 12px; border: 1px solid var(--border); border-radius: 2px; background: #222; }
.pip.on   { background: var(--gold); border-color: var(--gold); }

.wa-line  { font-size: 0.95em; color: var(--red); font-weight: bold; min-height: 1.2em; }
.sh-line  { font-size: 0.9em; color: var(--blue); min-height: 1.2em; }

/* ─── Status Tags ─── */
.status-row { display: flex; flex-wrap: wrap; gap: 3px; min-height: 20px; margin: 3px 0; }
.st-tag  { font-size: 0.82em; padding: 2px 6px; border-radius: 3px; font-weight: bold; }
.st-deb  { background: #3a1010; color: #ff8888; border: 1px solid #772222; }
.st-buf  { background: #103010; color: #88ee88; border: 1px solid #226622; }
.st-curse{ background: #1e0e3a; color: #cc88ff; border: 1px solid #6633aa; }

.vs-center { text-align: center; padding-top: 10px; }
.vs-label  { font-size: 1.5em; font-weight: bold; color: var(--gold); }
.rnd-label { font-size: 0.95em; color: var(--dim); margin-top: 4px; }

/* ─── Log ─── */
#log {
  background: #090912;
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 122px;          /* 約5行ぶん（窮屈で読めない→ゆとりを持たせる） */
  overflow-y: auto;
  padding: 7px 10px;
  font-size: 0.8em;
  line-height: 1.55;
  margin-top: 8px;
  margin-bottom: 4px;
  opacity: 0.82;
}
.l-sys  { color: var(--gold); }
.l-hit  { color: #ff8888; }
.l-miss { color: var(--dim); }
.l-dice { color: #88bbff; }
.l-g    { color: #88dd99; }
.l-def  { color: #88aaff; }
.l-wa   { color: var(--red); font-weight: bold; }
.l-ip   { color: #ff3333; font-weight: bold; font-size: 1.1em; }

/* ─── Hand ─── */
/* 手札の上の説明テキストは出さない（ルール既知なら不要・知らなくても何となく分かる）。
   その分の縦スペースを詰め、場（山札/捨て札/奥義）を下＝手札寄りに置ける。 */
.hand-label { display: none; }
/* 手札置き場：高さを固定したトレイ。空（捨てた後・相手の手番）でも高さが変わらないので
   下のボタン・ログがせり上がらない。5枚を1段に収めるためカードは少し小さめにする。 */
.hand-row   {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 10px;
  min-height: 266px; align-items: center; justify-content: flex-start;
  background: rgba(10,12,24,0.45); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 8px; box-sizing: border-box;
}
/* 全カード同じ大きさ（5:7の統一ルール）：幅はトレイ幅に応じて均等伸縮（最大170px）、
   高さは固定。内容量に関係なく形が揃い、捨てても/相手の手番でもトレイ高さは一定。
   内容が多い砲撃なども収まるよう手札カードは文字をわずかに詰める。はみ出しは隠す。 */
.hand-row .skill-card.hand { flex: 1 1 0; min-width: 0; max-width: 170px; height: 252px; min-height: 252px; overflow: hidden; font-size: 0.85em; }

/* ─── Card List ─── */
#cardlist-screen {
  display: none;
  position: fixed;
  inset: 0;
  /* カード一覧の背景＝淡い和の絵を活かす薄い暗幕（和紙感を残す）。金文字の見出しは背景を濃くするのでなく
     各見出し/バーに暗い帯を敷いて読ませる（スタイルカードの .cl-style-title と同方式）。 */
  background:
    linear-gradient(rgba(10,12,22,0.32), rgba(10,12,22,0.32)),
    url('assets/cardlist-bg.png') center / cover no-repeat fixed,
    #0a0c14;
  z-index: 60;
  overflow-y: auto;
  padding: 16px;
}
.cl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: sticky;
  top: 0;
  background: rgba(0,0,0,0.95);
  padding: 8px 0;
  z-index: 1;
}
.cl-header h2 { color: var(--gold); font-size: 1.4em; }
.cl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}
.cl-tab {
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim);
  font-size: 0.95em;
  cursor: pointer;
  font-family: inherit;
}
.cl-tab.active, .cl-tab:hover { border-color: var(--gold); color: var(--gold); }
.cl-section { display: none; }
.cl-section.active { display: block; }
.cl-style-title {
  font-size: 1.2em;
  color: var(--gold);
  font-weight: bold;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding: 4px 10px 5px;
  background: rgba(12,14,24,0.62);   /* 淡い背景でも金文字が読めるよう暗い帯 */
  border-radius: 6px 6px 0 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.cl-gimmick {
  font-size: 0.95em;
  color: #88dd99;
  margin-bottom: 10px;
  line-height: 1.5;
  background: rgba(12,14,24,0.55);   /* 淡い背景でも緑文字が読めるよう暗い帯 */
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}
.cl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, 170px);
  justify-content: center;
  gap: 10px; margin-bottom: 10px;
}
/* ── 戦闘スタイルカード（W3⑤・共通カード型／W3++: TCG比率5:7=170×238pxで全箇所完全統一・文字大・流派アイコン） ── */
.skill-card {
  width: 170px;
  min-height: 238px;
  background: linear-gradient(160deg, #1f1f3a 0%, #14142a 100%);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.9em; box-sizing: border-box;
  position: relative;
}
.skill-card.atk { border-color: #8a4040; }
.skill-card.def { border-color: #4060a0; }
.skill-card.skl { border-color: #408a55; }
.skill-card .sk-head { display: flex; align-items: center; gap: 6px; }
.skill-card .sk-cost {
  font-size: 1.55em; font-weight: bold; color: var(--gold);
  background: rgba(0,0,0,0.55);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; flex: 0 0 auto;
  border: 1px solid var(--gold);
}
.skill-card .sk-type {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-weight: bold; flex: 1 1 0;
  padding: 4px 4px; border-radius: 6px;
  line-height: 1;
}
.skill-card .sk-type .sk-type-icon  { font-size: 1.85em; line-height: 1; }
.skill-card .sk-type .sk-type-label { font-size: 0.85em; margin-top: 3px; letter-spacing: 0.04em; opacity: 0.85; }
.skill-card .sk-type.atk { color: #ff9b88; background: rgba(80,30,30,0.5); border: 1px solid #6a3a3a; }
.skill-card .sk-type.def { color: #88c0ff; background: rgba(30,40,80,0.5); border: 1px solid #3a4a7a; }
.skill-card .sk-type.skl { color: #99e0a8; background: rgba(30,60,40,0.5); border: 1px solid #3a6a4a; }
/* 流派アイコンバッジ（右上） */
.skill-card .sk-style-badge {
  position: absolute; top: 5px; right: 5px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3em; line-height: 1;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border);
  border-radius: 50%;
  z-index: 2;
}
.skill-card .sk-name {
  font-weight: bold; font-size: 1.3em; color: var(--gold);
  text-align: center; padding: 5px 0; line-height: 1.2;
  letter-spacing: 0.04em;
  border-top: 1px solid #33335a; border-bottom: 1px solid #33335a;
}
.skill-card .sk-stats { background: rgba(0,0,0,0.3); border-radius: 4px; padding: 5px 4px; text-align: center; }
.skill-card .sk-hit  { font-size: 1.15em; font-weight: bold; line-height: 1.2; }
.skill-card .sk-hit.hit-hi  { color: #66dd66; }
.skill-card .sk-hit.hit-mid { color: #ddcc44; }
.skill-card .sk-hit.hit-lo  { color: #ff7755; }
.skill-card .sk-dmg  { font-size: 1.05em; color: #ffa94d; margin-top: 3px; line-height: 1.2; }
.skill-card .sk-dmg.pierce { color: #ff6b6b; }
.skill-card .sk-effects { font-size: 1.0em; color: #cfd2e8; padding: 2px 4px; line-height: 1.5; }
.skill-card .sk-effects > div { padding: 1px 0; }
.skill-card .sk-cond { font-size: 0.95em; color: #e09040; padding: 5px 4px 1px; border-top: 1px dashed #33335a; line-height: 1.4; }
.skill-card .sk-cond::before { content: "条件 "; opacity: 0.7; }
/* 手札版（対戦中の手札・クリック可・全箇所と同サイズ170×238） */
.skill-card.hand {
  cursor: pointer; user-select: none;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.skill-card.hand:hover:not(.c-used):not(.c-off) {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: 0 4px 8px rgba(212,175,55,0.35);
}
.skill-card.hand.c-used { opacity: 0.28; pointer-events: none; }
.skill-card.hand.c-off  { opacity: 0.42; cursor: default; }
.skill-card .sk-why { color: var(--red); font-size: 0.95em; padding: 4px 4px 1px; font-weight: bold; border-top: 1px dashed #663030; }

/* ─── Card List top-level section tabs ─── */
.cl-sectabs {
  display: flex; gap: 6px; margin-bottom: 14px;
}
.cl-sectab {
  padding: 8px 20px; border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--panel); color: var(--dim);
  font-size: 1.05em; cursor: pointer; font-family: inherit;
}
.cl-sectab.active, .cl-sectab:hover { border-color: var(--gold); color: var(--gold); background: #1a1a30; }

/* ─── Prefecture list ─── */
#pref-list-body { display: none; }
#pref-list-body.active { display: block; }
#style-list-body { display: none; }
#style-list-body.active { display: block; }
#stats-list-body { display: none; }
#stats-list-body.active { display: block; }
.pref-region-title {
  font-size: 1.15em; color: var(--gold); font-weight: bold;
  border-bottom: 1px solid var(--border); margin: 16px 0 10px;
  /* 淡い和紙背景でも金の見出しが読めるよう暗い帯を敷く（.cl-style-titleと同方式） */
  background: rgba(12,14,24,0.62); padding: 5px 12px; border-radius: 6px 6px 0 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.pref-table {
  width: 100%; border-collapse: collapse; font-size: 0.78em;
}
.pref-table th {
  background: #14142a; color: var(--dim); font-weight: normal;
  padding: 4px 7px; text-align: right; border-bottom: 1px solid #2a2a45;
}
.pref-table th:first-child { text-align: left; }
.pref-table td {
  padding: 4px 7px; text-align: right; border-bottom: 1px solid #1e1e38;
  color: var(--text);
}
.pref-table td:first-child { text-align: left; font-weight: bold; }
.pref-table td.style-cell { color: #a0c0e0; text-align: left; }
.pref-table td.sanmi-cell { color: #c9a8e0; text-align: left; white-space: nowrap; }
.pref-table td.wuxing-cell { color: #8fd0a8; text-align: left; white-space: nowrap; }

/* ── 団体戦 編成画面 ── */
/* position:fixed は viewport 全幅・最大高さで配置し、横スクロール抑止。中身を 920px に絞る */
#teamsetup-screen {
  display: none; position: fixed; inset: 0;
  /* 編成画面の背景。実際の背景画像は team-blue / team-red クラスで出し分ける（下の2規則）。
     applyTeamSetupTheme() が開始時に必ずどちらかを付与するので、ここは付与前の暗い地色フォールバックのみ
     （専用の teamsetup-bg.png は存在しない＝旧コードの死に参照だったので画像参照を外した）。 */
  background:
    linear-gradient(rgba(8,9,18,0.52), rgba(8,9,18,0.68)),
    #0a0c14;
  z-index: 60; overflow-y: auto; overflow-x: hidden; padding: 16px;
}
/* ↓将来の拡張用（今は未使用）。蒼組/紅組の編成画面を別画像にしたくなったら下を使い、
   編成開始時に teamsetup-screen に team-blue / team-red を付与すれば切り替わる。 */
#teamsetup-screen.team-blue { background-image: linear-gradient(rgba(6,10,26,0.50), rgba(6,10,26,0.68)), url('assets/teamsetup-bg-blue.png'); }
#teamsetup-screen.team-red  { background-image: linear-gradient(rgba(26,8,12,0.50), rgba(26,8,12,0.68)), url('assets/teamsetup-bg-red.png'); }
#teamsetup-screen > * { max-width: 920px; margin-left: auto; margin-right: auto; }
.ts-hint { font-size: 0.92em; color: #c7cdda; line-height: 1.55; margin-bottom: 12px;
  background: rgba(10,12,22,0.62); padding: 8px 12px; border-radius: 8px; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.ts-label { font-size: 1.05em; color: var(--gold); margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-team-area { background: rgba(40,40,70,0.5); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
/* 5枠(170px)＋4リンク＋gap で約1020px必要。ts-team-area だけ全幅まで拡張して新潟がはみ出さないように */
#teamsetup-screen > .ts-team-area { max-width: 1080px; }
.ts-team-row { display: flex; gap: 6px; flex-wrap: wrap; min-height: 92px; align-items: stretch; }
.ts-slot { flex: 1 1 0; min-width: 110px; border: 1px dashed var(--border); border-radius: 6px; padding: 6px; position: relative; }
.ts-slot.filled { border-style: solid; border-color: #6a6aaa; background: rgba(60,60,100,0.4); }
.ts-slot .ts-pos { font-size: 0.7em; color: var(--gold); }
.ts-slot .ts-cname { font-weight: bold; font-size: 0.82em; margin: 2px 0; }
.ts-slot .ts-meta { font-size: 0.66em; color: var(--dim); line-height: 1.4; }
.ts-slot .ts-ctrl { display: flex; gap: 3px; margin-top: 4px; }
.ts-slot .ts-ctrl button { font-size: 0.7em; padding: 1px 5px; }
.ts-link { align-self: center; font-size: 0.9em; color: #8fd0a8; white-space: nowrap; font-weight: bold; padding: 0 2px; }
.ts-link.none { color: #444; font-weight: normal; }
.ts-fusion { color: #6ad0ff; }
.ts-preview { font-size: 0.95em; color: #cde; margin-top: 8px; line-height: 1.55; }
.ts-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ts-mini { font-size: 0.9em; padding: 5px 12px; }
.ts-cpu-label { font-size: 0.9em; color: #cdd6e6; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
/* 北海道：プールの振興局カード下のメイン/合体候補タグ */
.ts-hok-tag { font-size: 0.78em; text-align: center; color: var(--dim); margin-top: 4px; }
.ts-hok-tag.main { color: var(--gold); font-weight: bold; }
/* 北海道合体の別枠ボックス（青枠＋見出しで「ここは普通の県と違う合体カード」と一目で分かるように）。
   #ts-pool は grid なので grid-column:1/-1 で全幅1枠を占有し、先頭に独立表示する。 */
.ts-hok-box {
  grid-column: 1 / -1;
  border: 2px dashed #5a8ec0; border-radius: 10px;
  background: rgba(20,40,70,0.40); padding: 10px 12px; margin-bottom: 8px;
}
.ts-hok-box-head { color: #9cdcff; font-weight: bold; font-size: 1.02em; margin-bottom: 8px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ts-hok-box-sub { color: #c2cee0; font-weight: normal; font-size: 0.8em; }
.ts-hok-grid { display: grid; grid-template-columns: repeat(auto-fill, 170px); justify-content: center; gap: 10px; }
.ts-sort-label { font-size: 0.95em; color: var(--dim); display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.ts-sort-select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 6px; font-family: inherit; font-size: 0.95em;
  cursor: pointer;
}
.ts-sort-select:hover { border-color: var(--gold); }
.ts-pool { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-cand {
  width: 120px; border: 1px solid var(--border); border-radius: 6px; padding: 6px;
  cursor: pointer; font-size: 0.72em; background: rgba(30,30,50,0.6);
}
.ts-cand:hover { border-color: var(--gold); }
.ts-cand.selected { border-color: #6a6aaa; background: rgba(60,60,100,0.5); opacity: 0.5; }
.ts-cand.fusion { border-color: #3a7aaa; background: rgba(30,60,90,0.6); }
.ts-cand .ts-cname { font-weight: bold; font-size: 1.05em; margin-bottom: 2px; }
.ts-cand .ts-meta { color: var(--dim); line-height: 1.45; }
/* ── 県カード（共通コンポ・W3①／W3++: TCG標準比率5:7=170×238pxで全箇所統一） ── */
.pref-card {
  width: 170px;
  min-height: 238px;
  background: linear-gradient(160deg, #1f1f3a 0%, #14142a 100%);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 9px 7px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 4px;
  position: relative; box-sizing: border-box;
}
.pref-card.selectable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; }
.pref-card.selectable:hover { border-color: var(--gold); box-shadow: 0 0 6px rgba(224,192,96,0.45); transform: translateY(-1px); }
.pref-card.selected { border-color: var(--gold); box-shadow: 0 0 8px rgba(224,192,96,0.6); opacity: 0.55; }
.pref-card.fusion { border-color: #3a7aaa; background: linear-gradient(160deg, #1e3a5a 0%, #102035 100%); }
/* 龍カード（特殊・レイドボス）：金赤の縁取りで別格感 */
.pref-card.dragon-card { border: 2px solid #d4a23a; background: linear-gradient(160deg, #2a1838 0%, #1a1228 60%, #2a1020 100%); box-shadow: 0 0 10px rgba(212,162,58,0.35); }
.pref-card.dragon-card .pc-special-badge {
  position: absolute; top: -1px; right: -1px;
  font-size: 0.62em; font-weight: bold; color: #1a1228;
  background: linear-gradient(135deg, #f0c860, #d4a23a);
  padding: 2px 7px; border-radius: 0 7px 0 8px; letter-spacing: 0.03em;
  z-index: 2;
}
.pref-card .pc-pos { font-size: 0.95em; color: var(--gold); text-align: center; font-weight: bold; letter-spacing: 0.12em; padding-bottom: 2px; }
.pref-card .pc-name {
  font-weight: bold; font-size: 1.55em; color: var(--gold); letter-spacing: 0.04em;
  line-height: 1.2; text-align: center; padding: 5px 22px 6px;
  border-bottom: 1px solid #33335a; border-radius: 4px 4px 0 0;
  margin: -2px -4px 0; /* カード幅いっぱいに帯を広げる */
  background: rgba(0,0,0,0.28);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.pref-card .pc-comps { font-size: 0.92em; color: #6ad0ff; text-align: center; line-height: 1.3; margin-top: 2px; min-height: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pref-card .pc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 4px; }
.pref-card .pc-sub   { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pref-card .pc-stat  {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 2px; background: rgba(0,0,0,0.28); border-radius: 4px;
  line-height: 1;
  min-width: 0; overflow: hidden; /* 3桁数値でも幅をはみ出さない */
}
.pref-card .pc-stat .pc-label { font-size: 0.78em; color: var(--dim); letter-spacing: 0.06em; }
.pref-card .pc-stat .pc-num   {
  font-size: 1.55em; font-weight: bold; margin-top: 3px;
  font-variant-numeric: tabular-nums; /* 等幅数字 */
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.pref-card .pc-stat.hp  .pc-num { color: #ff6b6b; }
.pref-card .pc-stat.atk .pc-num { color: #ffa94d; }
.pref-card .pc-stat.def .pc-num { color: #74c0fc; }
.pref-card .pc-sub .pc-stat .pc-num { font-size: 1.25em; }
.pref-card .pc-sub .pc-stat.ini .pc-num { color: #69db7c; }
.pref-card .pc-sub .pc-stat.sp  .pc-num { color: #d0a8ff; }
.pref-card .pc-attrs { display: flex; justify-content: space-around; gap: 2px; padding-top: 6px; border-top: 1px solid #33335a; margin-top: 4px; }
/* 図鑑：都道府県カード詳細パネル（カードクリックで開く） */
.pref-card[onclick] { cursor: pointer; }
.pd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
.pd-panel { background: #16162a; border: 1px solid #44446a; border-radius: 12px; padding: 22px; max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.pd-close { position: absolute; top: 12px; right: 14px; background: #2a2a44; color: #ddd; border: 1px solid #44446a; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 0.9em; }
.pd-close:hover { background: #3a3a5a; }
#pref-detail-body { display: flex; gap: 22px; flex-wrap: wrap; }
.pd-card { flex: 0 0 170px; }
.pd-info { flex: 1; min-width: 220px; }
.pd-title { margin: 0 0 10px; font-size: 1.5em; color: #ffd966; }
.pd-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #2a2a44; font-size: 0.95em; }
.pd-k { color: #9a9ac0; white-space: nowrap; }
.pd-sec { margin-top: 14px; margin-bottom: 4px; font-weight: bold; color: #ffd966; font-size: 0.95em; }
.pd-todo { opacity: 0.45; }
.pd-formula { flex: 1; text-align: right; font-size: 0.86em; color: #b8c4d8; line-height: 1.4; }
.pd-motif { flex: 1; text-align: right; font-size: 0.9em; color: #e0d8b8; line-height: 1.5; }
.pd-note { color: #8a8ab0; font-size: 0.92em; }
.pd-flip-btn { background: #2a4a6a; color: #cde; border: 1px solid #4a8aaa; border-radius: 6px; padding: 5px 14px; cursor: pointer; font-size: 0.95em; margin-bottom: 10px; }
.pd-flip-btn:hover { background: #3a5a7a; }
.pd-face { font-size: 0.6em; color: #6ad0ff; vertical-align: 0.2em; }
.pref-card .pc-attr  { display: flex; flex-direction: column; align-items: center; line-height: 1; flex: 1; }
.pref-card .pc-attr .pc-icon { font-size: 2.0em; }
.pref-card .pc-attr .pc-lbl  { font-size: 0.82em; color: var(--dim); margin-top: 3px; }
.pref-card .pc-fusion-mark { font-size: 0.7em; margin-left: 5px; color: #6ad0ff; vertical-align: 0.15em; }
.pref-card .pc-flip-mark { font-size: 0.7em; margin-left: 4px; color: #6ad0ff; vertical-align: 0.15em; }
.pref-card .pc-ctrl { display: flex; gap: 3px; margin-top: 4px; justify-content: center; }
.pref-card .pc-ctrl button { font-size: 0.78em; padding: 1px 6px; min-width: 28px; }
.pref-card.slot-empty {
  border-style: dashed; background: rgba(30,30,55,0.4);
  align-items: center; justify-content: center;
  color: var(--dim); font-size: 0.85em;
  min-height: 238px; /* カード入っても高さが変わらないよう固定 */
}
.pref-card.slot-empty .pc-empty-msg { color: var(--dim); font-size: 0.95em; }
/* ★お気に入り＋🏠マイ県 トグルボタン（カード一覧で使用・編成プールでは★だけ表示） */
.pref-card .pc-actions {
  position: absolute; top: 4px; left: 4px;
  display: flex; gap: 3px; z-index: 2;
}
.pref-card .pc-actions button {
  background: rgba(0,0,0,0.78); border: 1px solid #555;
  color: #aaa; font-size: 0.95em; padding: 0 5px;
  border-radius: 4px; cursor: pointer; line-height: 1.35;
  opacity: 0.62; filter: grayscale(0.45);
}
.pref-card .pc-actions button:hover { border-color: var(--gold); color: var(--gold); opacity: 0.95; filter: grayscale(0); }
/* 裏返しボタン＝カード右上の角（★🏠と分離・県名と被らない・両面カードのみ） */
.pref-card .pc-flip-corner {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  background: rgba(18,46,78,0.9); border: 1px solid #5aa0c8;
  color: #9cdcff; font-size: 1.05em; line-height: 1.3;
  padding: 0 5px; border-radius: 4px; cursor: pointer;
}
.pref-card .pc-flip-corner:hover { background: #2a6a9a; color: #fff; }
.pref-card .pc-flip-corner.on { background: #2a6a9a; color: #fff; border-color: #8cf; }
.pref-card .pc-actions button.on   { color: var(--gold); border-color: var(--gold); background: rgba(60,40,0,0.6); opacity: 1; filter: grayscale(0); }
.pref-card .pc-home-mark { color: var(--gold); font-size: 0.85em; margin-left: 3px; }
.pref-card .pc-home-bonus { font-size: 0.5em; color: var(--gold); margin-left: 1px; vertical-align: super; font-weight: bold; }
.pref-card.home { border-color: var(--gold); box-shadow: 0 0 4px rgba(212,175,55,0.35); }
/* 地方別の県名帯カラー（北→南で 寒色→暖色 のグラデーション。緯度順に色温度が連続） */
.pref-card.r-hokkaido .pc-name { background: linear-gradient(180deg, #1e5290 0%, #0d2a52 100%); border-bottom-color: #5a8ec0; } /* 深い青（雪・氷） */
.pref-card.r-tohoku   .pc-name { background: linear-gradient(180deg, #2c6890 0%, #143850 100%); border-bottom-color: #5aa0c8; } /* 青 */
.pref-card.r-kanto    .pc-name { background: linear-gradient(180deg, #2c8088 0%, #144048 100%); border-bottom-color: #5ab8c0; } /* 青緑（ティール） */
.pref-card.r-chubu    .pc-name { background: linear-gradient(180deg, #2e8048 0%, #14401e 100%); border-bottom-color: #5ab878; } /* 緑（山岳） */
.pref-card.r-kinki    .pc-name { background: linear-gradient(180deg, #788c28 0%, #404818 100%); border-bottom-color: #b8c860; } /* 黄緑 */
.pref-card.r-chugoku  .pc-name { background: linear-gradient(180deg, #b08820 0%, #604810 100%); border-bottom-color: #e0b850; } /* 黄・からし */
.pref-card.r-shikoku  .pc-name { background: linear-gradient(180deg, #c46818 0%, #683008 100%); border-bottom-color: #f0944c; } /* 橙 */
.pref-card.r-kyushu   .pc-name { background: linear-gradient(180deg, #c8341e 0%, #6a1408 100%); border-bottom-color: #f06848; } /* 赤（火山・南国） */
/* 龍カードは枠線が2px(他は1px)で文字領域が約4px狭く、「北海道の龍」5文字＋字間が折り返していた。
   フォントサイズは他カードと同じ(帯のデザイン統一)まま、左右paddingを詰め＋nowrapで1行に収める。 */
.pref-card.dragon-card .pc-name { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
/* カード一覧 グリッド（W3++: 全箇所同じ170pxカード固定・中央寄せ） */
.pref-region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 170px);
  justify-content: center;
  gap: 10px; margin: 4px 0 16px;
}
.fav-filter-bar {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0; font-size: 1.0em;
  /* 金の件数表示が和紙背景でも読めるよう暗い帯を敷く */
  background: rgba(12,14,24,0.55); padding: 8px 12px; border-radius: 8px; flex-wrap: wrap;
}
.fav-filter-bar .fav-count { color: var(--gold); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.fav-filter-bar button { padding: 5px 14px; font-size: 1.0em; }
.fav-filter-bar button.on { background: var(--gold); color: #14142a; font-weight: bold; }
.pref-region-empty { font-size: 0.95em; color: var(--dim); margin: 4px 0 14px; }
.pp-card-slot { display: flex; }
#pp0 .pp-card-slot { justify-content: flex-start; }
#pp1 .pp-card-slot { justify-content: flex-end; }
/* プールはグリッドに（W3++: 170px固定・中央寄せ） */
#ts-pool.ts-pool { display: grid; grid-template-columns: repeat(auto-fill, 170px); justify-content: center; gap: 10px; }
/* 編成スロット行＝5枠＋4リンク（170px固定／先鋒～大将ラベルはカード外） */
/* 5枠は170px固定で並べるため狭い画面では横にあふれる。チーム枠だけ横スクロール可にして
   全枠(先鋒〜大将)へ到達できるようにする（親 #teamsetup-screen は overflow-x:hidden でクリップしていた）。
   縦スクロールは #teamsetup-screen 側（overflow-y:auto）が担当。 */
#ts-team.ts-team-row { display: flex; gap: 4px; flex-wrap: nowrap; align-items: flex-start; min-height: 268px; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
/* チーム枠の横スクロールバーをテーマ（暗い地＋金の脈）に合わせて細身に。OS既定の白い帯が急に出る違和感を消す。 */
#ts-team.ts-team-row { scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.55) rgba(0,0,0,0.28); }
#ts-team.ts-team-row::-webkit-scrollbar { height: 8px; }
#ts-team.ts-team-row::-webkit-scrollbar-track { background: rgba(0,0,0,0.28); border-radius: 6px; }
#ts-team.ts-team-row::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(90,90,140,0.7), rgba(212,175,55,0.6));
  border-radius: 6px; border: 1px solid rgba(0,0,0,0.25);
}
#ts-team.ts-team-row::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, rgba(120,120,170,0.85), var(--gold)); }
#ts-team.ts-team-row > .ts-slot-wrap { flex: 0 0 170px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#ts-team.ts-team-row > .ts-slot-wrap > .pref-card { width: 170px; }
#ts-team.ts-team-row > .ts-link { flex: 0 0 auto; align-self: center; margin-top: 30px; }
.ts-slot-pos {
  text-align: center; font-size: 1.0em; color: var(--gold);
  font-weight: bold; letter-spacing: 0.18em;
  padding: 4px 0; background: rgba(60,40,0,0.35);
  border: 1px solid rgba(212,175,55,0.4); border-radius: 5px;
  line-height: 1.1;
}
.ts-slot-ctrl { display: flex; gap: 4px; justify-content: center; }
.ts-slot-ctrl button { font-size: 0.78em; padding: 2px 8px; min-width: 30px; }
#teamresult-screen #tr-board { font-size: 0.85em; line-height: 1.8; margin: 12px 0; }
.pref-table td.slot-cell { color: #e0c060; font-weight: bold; }
.pref-table tr:hover td { background: #1a1a30; }
.pref-sanmi-legend {
  font-size: 0.95em; color: var(--text); background: #14142a;
  border: 1px solid #2a2a45; border-radius: 6px;
  padding: 10px 14px; margin: 6px 0 14px; line-height: 1.7;
}
.pref-sanmi-legend b { color: var(--gold); }

/* ─── Action bar ─── */
.action-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-badge {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.82em;
}
/* コスト残＝常時必要な情報。大きめのバッジで分かりやすく。 */
.action-bar { justify-content: space-between; margin-top: 4px; }
.sp-badge { font-size: 1.0em; padding: 8px 16px; }
.sp-badge .sp-val { font-size: 1.5em; }
.sp-badge .sp-sep { opacity: 0.6; margin: 0 1px; }
.sp-val { color: var(--gold); font-weight: bold; }
/* ターン終了＝常時必要な主操作。大きく金で目立たせる。 */
.btn-end { font-size: 1.1em; font-weight: bold; padding: 11px 26px; box-shadow: 0 2px 8px rgba(212,175,55,0.35); }
/* 「✕ やめる」＝対戦中の操作とは別物なので、戦闘画面の左上隅へ控えめに置く（確認ダイアログ付き）。 */
.btn-quit { position: absolute; top: 8px; left: 8px; z-index: 30;
  font-size: 0.78em; padding: 4px 10px; color: var(--dim); opacity: 0.7;
  background: rgba(8,10,20,0.6); border-color: rgba(255,255,255,0.18); }
.btn-quit:hover { color: #ff8a8a; border-color: #ff8a8a; opacity: 1; background: rgba(8,10,20,0.85); }
/* 効果音オン/オフ＝右上隅に控えめに */
.btn-mute { position: absolute; top: 8px; right: 8px; z-index: 30;
  font-size: 0.95em; padding: 4px 9px; line-height: 1; color: var(--text); opacity: 0.7;
  background: rgba(8,10,20,0.6); border-color: rgba(255,255,255,0.18); }
.btn-mute:hover { opacity: 1; border-color: var(--gold); background: rgba(8,10,20,0.85); }

/* ─── Overlays ─── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.93);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 50;
  text-align: center;
  padding: 24px;
}
.overlay h2 { font-size: 1.6em; color: var(--gold); }
.overlay p  { color: var(--dim); font-size: 0.88em; }
/* 1対1の結果画面は後ろのバトル画面が透けて見えるよう、共通overlayより薄い暗幕にする。 */
#result-screen { background: rgba(4,6,12,0.78); }
#result-screen h1 { font-size: 2.8em; color: var(--gold); letter-spacing: 0.1em; text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
#result-screen h2 { font-size: 1.3em; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
#res-detail { font-size: 0.82em; color: var(--dim); max-width: 400px; line-height: 1.6; }
#res-detail .res-kimari { font-size: 1.12em; color: var(--gold); margin-bottom: 8px; font-weight: bold; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.res-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ─── あそびかた・ルールページ（ホームから開く） ─── */
#rule-screen { justify-content: flex-start; align-items: stretch; overflow-y: auto; text-align: left; gap: 12px; }
#rule-body { max-width: 760px; margin: 0 auto; width: 100%; }
.rule-sec { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; line-height: 1.7; font-size: 0.95em; }
.rule-sec h3 { color: var(--gold); margin-bottom: 6px; font-size: 1.1em; }
.rule-sec b { color: var(--gold); }
.rule-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.rule-table th, .rule-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.rule-table th { color: var(--gold); background: rgba(0,0,0,0.3); }

/* ─── Stats panel ─── */
.stats-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  max-width: 480px;
}
.stats-panel h3 {
  color: var(--gold);
  font-size: 0.95em;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stats-panel .stats-total { color: var(--dim); font-size: 0.78em; font-weight: normal; }
.stats-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.stats-tab {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.78em;
  background: #0f0f20;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--dim);
  cursor: pointer;
}
.stats-tab.active { color: var(--gold); border-color: var(--gold); }
.stats-table { width: 100%; font-size: 0.78em; border-collapse: collapse; }
.stats-table th, .stats-table td {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid #2a2a45;
}
.stats-table th { color: var(--dim); font-weight: normal; }
.stats-table td:first-child, .stats-table th:first-child { text-align: left; color: var(--text); }
.stats-table .wr { color: var(--gold2); }
.stats-empty { color: var(--dim); font-size: 0.82em; text-align: center; padding: 12px 0; }
.stats-reset {
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  font-size: 0.72em;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.stats-reset:hover { color: var(--red); border-color: var(--red); }