/* ============================================================
   wiki.css — ハイパーミリオネア 攻略Wiki 共通スタイル
     ビルドツールなしの素のCSS。公式サイト（website/index.html）の
     ダークトーン×ゴールドアクセントを踏襲し、CSS変数名も揃える。
     スマホファースト（+ 600px / 900px / 1200px でブレイク）。
   ============================================================ */

:root{
  /* 公式サイト website/index.html :root から流用（同一値） */
  --font-display:"Orbitron","Hiragino Kaku Gothic ProN",sans-serif;
  --bg:#0d0b08;
  --bg-card:#171310;
  --bg-card2:#1e1913;
  --gold:#d4a843;
  --gold-bright:#f0c860;
  --gold-dim:#8a6f35;
  --cyan:#39d0d8;
  --text:#e8e0d0;
  --text-dim:#a89878;
  --border:#3a3020;
  /* Wiki 固有: スート色 */
  --suit-spade:#c9d4e0;
  --suit-heart:#e05a5a;
  --suit-diamond:#e0a84a;
  --suit-club:#6ac07a;
  /* Wiki 固有: レアリティ色 */
  --rarity-n:#8f9298;
  --rarity-r:#5aa8d8;
  --rarity-sr:#b47ae0;
  --rarity-ssr:#f0c860;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold-bright);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.wrap{max-width:100%;margin:0 auto;padding:0 16px}
@media (min-width:900px){.wrap{max-width:1180px}}

/* ===== ヘッダー ===== */
.site-header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#141009 0%,var(--bg) 100%);
}
.site-header .wrap{padding-block:18px 14px}
.site-title{
  font-family:var(--font-display);
  font-size:20px;letter-spacing:.06em;
  color:var(--gold-bright);
  line-height:1.3;
}
.site-title small{
  display:block;
  font-family:inherit;
  font-size:11px;letter-spacing:.2em;
  color:var(--gold-dim);
  margin-top:2px;
}
.site-nav{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:13px}
.site-nav a{color:var(--text-dim)}
.site-nav a:hover{color:var(--gold-bright)}
@media (min-width:900px){.site-title{font-size:26px}}

/* ===== 広告枠 ===== */
.ad-slot{
  margin:20px auto;
  min-height:90px;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);
  border-radius:8px;
  color:#4a4030;
  font-size:11px;letter-spacing:.14em;
}

/* ===== ページ見出し ===== */
.page-head{padding-block:22px 6px}
.page-head h1{
  font-family:var(--font-display);
  font-size:19px;letter-spacing:.04em;
  color:var(--gold-bright);
}
.page-head p{margin-top:8px;font-size:13px;color:var(--text-dim)}
@media (min-width:900px){.page-head h1{font-size:24px}}

/* ===== コントロール（フィルタ・検索・ソート） ===== */
.controls{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  margin-block:14px 6px;
  display:flex;flex-direction:column;gap:12px;
}
.ctrl-row{display:flex;flex-direction:column;gap:6px}
.ctrl-label{
  font-size:11px;letter-spacing:.14em;
  color:var(--gold-dim);
  font-weight:bold;
}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  background:var(--bg-card2);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:999px;
  padding:6px 13px;
  font-size:13px;
  line-height:1.2;
  transition:border-color .15s,color .15s,background .15s;
}
.chip:hover{border-color:var(--gold-dim);color:var(--text)}
.chip[aria-pressed="true"]{
  background:rgba(212,168,67,.14);
  border-color:var(--gold);
  color:var(--gold-bright);
  font-weight:bold;
}
.chip .s-spade{color:var(--suit-spade)}
.chip .s-heart{color:var(--suit-heart)}
.chip .s-diamond{color:var(--suit-diamond)}
.chip .s-club{color:var(--suit-club)}

.ctrl-inline{display:flex;flex-wrap:wrap;gap:12px}
.ctrl-inline .ctrl-row{flex:1 1 200px}
.field{
  background:var(--bg-card2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:9px 11px;
  font-size:14px;
  font-family:inherit;
  width:100%;
}
.field:focus{outline:none;border-color:var(--gold)}
select.field{appearance:none;background-image:none}

.result-bar{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding-block:10px;
  font-size:12px;color:var(--text-dim);
}
.result-count strong{color:var(--gold-bright);font-size:15px}
.btn-reset{
  background:none;border:1px solid var(--border);color:var(--text-dim);
  border-radius:6px;padding:4px 10px;font-size:12px;
}
.btn-reset:hover{border-color:var(--gold-dim);color:var(--text)}

/* ===== 表示切り替えトグル（カード / リスト） ===== */
.view-toggle{display:flex;gap:6px;margin-left:auto}
.view-toggle .chip{padding:6px 12px;font-size:12.5px;white-space:nowrap}
.view-toggle .chip[aria-pressed="true"]{
  background:rgba(212,168,67,.14);
  border-color:var(--gold-bright);
  color:var(--gold-bright);
  font-weight:bold;
}

/* ===== リスト表示（テーブル） ===== */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg-card)}
.character-table{width:100%;border-collapse:collapse;font-size:13px}
.character-table th,
.character-table td{padding:8px 10px;border-bottom:1px solid #251e14;text-align:left;white-space:nowrap}
.character-table thead th{
  position:sticky;top:0;z-index:1;
  background:var(--bg-card2);
  color:var(--gold-dim);
  font-size:11px;letter-spacing:.1em;font-weight:bold;
  border-bottom:1px solid var(--border);
  cursor:pointer;user-select:none;
}
.character-table thead th:hover{color:var(--gold-bright)}
.character-table thead th[aria-sort]{color:var(--gold-bright)}
/* ソート矢印（▲昇順 / ▼降順）。未ソート列には出さない */
.sort-arrow{font-size:9px;margin-left:4px;opacity:.9}
.character-table tbody tr{cursor:pointer;transition:background .12s}
.character-table tbody tr:hover{background:rgba(212,168,67,.07)}
.character-table tbody tr:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.row-thumb{
  /* グローバルの img{max-width:100%} がセル幅（padding込み）で効いて縮むため打ち消す。 */
  width:48px;height:48px;max-width:none;flex:none;
  border-radius:6px;object-fit:cover;
  border:1px solid var(--border);background:#100d09;
}
/* 48px + 左右padding(10px×2) 分を確保する */
.col-thumb{width:68px;min-width:68px}
.col-num{text-align:right;font-family:var(--font-display)}
.character-table .row-name{color:var(--text);font-weight:bold;white-space:normal;overflow-wrap:anywhere;min-width:9em}
.character-table .row-suit{font-size:15px}
.character-table .s-spade{color:var(--suit-spade)}
.character-table .s-heart{color:var(--suit-heart)}
.character-table .s-diamond{color:var(--suit-diamond)}
.character-table .s-club{color:var(--suit-club)}
.character-table .skill-badge{margin-top:0}
.badge-ver-inline{font-size:10px;color:var(--text-dim);letter-spacing:.06em;font-weight:normal}

/* スマホ（600px未満）: ATK/DEF/HP を隠し、スキル列はバッジのみに短縮 */
.col-stat{display:none}
.skill-name-text{display:none}
@media (min-width:600px){
  .col-stat{display:table-cell}
  .skill-name-text{display:inline}
}

/* ===== カードグリッド（スマホ3列 / タブレット4列 / PC5〜6列） =====
   キャラ画像は低解像度版（長辺200px・実寸 112〜200 × 200）を配信しているため、
   画像枠が大きいと引き伸ばされてボケる。列数を1段階ずつ増やし、さらに
   --card-max-w でカード幅に上限をかけて拡大表示を防ぐ。
   ※ 画像枠は aspect-ratio 3/4 なので「枠の高さ = 幅 × 4/3」。原画の高さが 200px
     なので、幅 150px までなら高さ 200px 以内に収まり拡大が起きない（= 上限の根拠）。 */
:root{ --card-max-w:150px }
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  justify-items:center; /* セルよりカードが狭いときに中央寄せ */
}
@media (min-width:600px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
@media (min-width:900px){.grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
@media (min-width:1200px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  text-align:left;
  color:inherit;
  padding:0;
  width:100%;
  max-width:var(--card-max-w); /* 画像の拡大表示を防ぐ上限 */
  display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.card-art{
  position:relative;
  aspect-ratio:3/4;
  max-width:100%;
  background:linear-gradient(160deg,#1b1610,#0f0c08);
}
.card-art img{width:100%;height:100%;object-fit:cover}
.card-badges{
  position:absolute;top:6px;left:6px;right:6px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:4px;
  pointer-events:none;
}
.badge{
  font-size:10px;font-weight:bold;line-height:1;
  padding:3px 5px;border-radius:5px;
  background:rgba(8,6,4,.82);
  border:1px solid var(--border);
}
.badge-suit{font-size:13px}
.badge-rarity{font-family:var(--font-display);letter-spacing:.04em}
.r-N{color:var(--rarity-n)}
.r-R{color:var(--rarity-r)}
.r-SR{color:var(--rarity-sr)}
.r-SSR{color:var(--rarity-ssr)}
.badge-ver{
  position:absolute;bottom:6px;right:6px;
  font-size:10px;letter-spacing:.08em;
  color:var(--text-dim);
  background:rgba(8,6,4,.82);
  border:1px solid var(--border);
  border-radius:5px;padding:3px 5px;
}

.card-body{padding:7px 8px 9px;display:flex;flex-direction:column;gap:5px;flex:1}
.card-name{
  font-size:11px;font-weight:bold;line-height:1.3; /* 12.5px から縮小 */
  color:var(--text);
  overflow-wrap:anywhere;
}
.card-rank{font-size:9.5px;color:var(--text-dim)} /* 11px から縮小 */
.card-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;margin-top:auto;
}
.stat{
  background:var(--bg-card2);
  border-radius:5px;
  padding:3px 1px;
  text-align:center;
}
.stat dt{font-size:8px;letter-spacing:.04em;color:var(--gold-dim)}          /* 9px から縮小 */
.stat dd{font-family:var(--font-display);font-size:11px;color:var(--text)}  /* 12.5px から縮小 */
/* ===== パッシブスキルのタイミングバッジ（v2.0: 30種・3タイミング） ===== */
/* 色はアプリ内カットイン（TIMING_STYLE）と同一。⚡勝利時 / 🎯提出時 / 🔥敗北時 */
.skill-badge{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:10px;
  font-weight:bold;
  margin-top:4px;
  line-height:1.5;
  overflow-wrap:anywhere;
  background:rgba(8,6,4,.45);
}
.skill-badge--onWin  { color:#00e5ff; border:1px solid #00e5ff }
.skill-badge--onPlay { color:#ffd700; border:1px solid #ffd700 }
.skill-badge--onLose { color:#ff4444; border:1px solid #ff4444 }
/* カード内は幅が狭いので少し詰める */
.card .skill-badge{ font-size:10px; padding:2px 6px; align-self:flex-start; max-width:100% }

/* タイミングフィルタのチップ（選択時はそのタイミングの色で光らせる） */
.chip[data-timing="onWin"][aria-pressed="true"]  { background:rgba(0,229,255,.14); border-color:#00e5ff; color:#00e5ff }
.chip[data-timing="onPlay"][aria-pressed="true"] { background:rgba(255,215,0,.14); border-color:#ffd700; color:#ffd700 }
.chip[data-timing="onLose"][aria-pressed="true"] { background:rgba(255,68,68,.14); border-color:#ff4444; color:#ff4444 }

/* ===== モーダルのスキル欄 ===== */
.skill-box .skill-name-en{
  display:block;font-size:11.5px;color:var(--text-dim);
  margin-top:2px;letter-spacing:.02em;
}
.skill-meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;
  margin-top:9px;font-size:11.5px;color:var(--text-dim);
}
.skill-meta b{ color:var(--text);font-weight:bold }

.card-skill{
  font-size:10.5px;color:var(--cyan);
  line-height:1.4;
  overflow-wrap:anywhere;
}

.empty{
  padding:40px 16px;text-align:center;
  color:var(--text-dim);font-size:14px;
}

/* ===== 詳細モーダル ===== */
.modal{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,3,2,.82);
  padding:0;
}
/* 著者スタイルの display:flex はUA既定の [hidden]{display:none} より強いため、明示的に打ち消す。 */
.modal[hidden]{display:none}
@media (min-width:600px){.modal{align-items:center;padding:20px}}
.modal-panel{
  background:var(--bg-card);
  border:1px solid var(--gold-dim);
  border-radius:12px 12px 0 0;
  width:100%;max-width:620px;
  max-height:92vh;overflow-y:auto;
  position:relative;
}
@media (min-width:600px){.modal-panel{border-radius:12px}}
.modal-close{
  position:sticky;top:0;margin-left:auto;
  display:block;
  background:rgba(8,6,4,.9);border:1px solid var(--border);
  color:var(--text);border-radius:0 0 0 8px;
  width:44px;height:38px;font-size:18px;line-height:1;
  z-index:2;
}
.modal-close:hover{color:var(--gold-bright);border-color:var(--gold-dim)}
.modal-body{padding:0 16px 22px;margin-top:-38px}
.modal-head{display:flex;gap:12px;align-items:flex-start;padding-top:46px}
.modal-art{
  width:112px;flex:0 0 112px;
  aspect-ratio:3/4;max-width:100%;
  border:1px solid var(--border);border-radius:8px;overflow:hidden;
  background:#100d09;
}
.modal-art img{width:100%;height:100%;object-fit:cover}
.modal-title h2{
  font-size:17px;line-height:1.4;color:var(--gold-bright);
  overflow-wrap:anywhere;
}
.modal-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.modal-meta .badge{background:var(--bg-card2)}
.modal-desc{
  margin-top:14px;font-size:13px;color:var(--text-dim);
  overflow-wrap:anywhere;
}

.modal-section{margin-top:18px}
.modal-section h3{
  font-size:11px;letter-spacing:.14em;color:var(--gold-dim);
  border-bottom:1px solid var(--border);
  padding-bottom:5px;margin-bottom:9px;
}
.stat-table{width:100%;border-collapse:collapse;font-size:13px}
.stat-table th,.stat-table td{
  padding:6px 8px;border-bottom:1px solid #251e14;text-align:right;
}
.stat-table th:first-child,.stat-table td:first-child{text-align:left;color:var(--gold-dim);font-size:11px;letter-spacing:.08em}
.stat-table thead th{color:var(--text-dim);font-size:11px;font-weight:normal}
.stat-table td{font-family:var(--font-display)}
.stat-table .col-active{color:var(--gold-bright)}
.stat-table .mod{font-family:inherit;font-size:10px;color:var(--text-dim);margin-left:3px}

.skill-box{
  background:var(--bg-card2);
  border:1px solid var(--border);
  border-left:3px solid var(--cyan);
  border-radius:0 8px 8px 0;
  padding:10px 12px;
}
.skill-box .skill-name{font-size:13.5px;font-weight:bold;color:var(--cyan)}
.skill-box p{margin-top:5px;font-size:12.5px;color:var(--text-dim);overflow-wrap:anywhere}
.concept-box{
  background:var(--bg-card2);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;margin-top:8px;
}
.concept-box .concept-name{font-size:13px;font-weight:bold;color:var(--gold-bright)}
.concept-box .concept-kw{font-size:11px;color:var(--gold-dim);margin-left:6px}
.concept-box p{margin-top:5px;font-size:12px;color:var(--text-dim);overflow-wrap:anywhere}
.tag-list{display:flex;flex-wrap:wrap;gap:5px}
.tag{
  font-size:10.5px;letter-spacing:.06em;
  background:var(--bg-card2);border:1px solid var(--border);
  color:var(--text-dim);border-radius:999px;padding:3px 9px;
}
.note{margin-top:10px;font-size:11px;color:#6f6450;line-height:1.6}

/* ===== フッター ===== */
.site-footer{
  margin-top:34px;border-top:1px solid var(--border);
  padding-block:20px 30px;
  font-size:12px;color:var(--text-dim);
}
.site-footer .wrap{display:flex;flex-direction:column;gap:8px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:14px}