/*
  色の役割を分けている。
  --color-primary は「白文字を載せる背景」(ボタン・ヘッダー)専用で、ダークモードでも暗めの青を保つ。
  --color-link は「背景の上に載せる文字色」(リンク・見出し)で、ダークモードでは明るくする。
  以前は1つの変数を両方に使っており、ダークモードで白文字のボタンやヘッダーのコントラスト比が2:1前後まで落ちていた。
*/
:root {
    color-scheme: light;
    --color-bg: #eef1f8;
    --color-surface: #ffffff;
    --color-primary: #2b4bd1;
    --color-primary-hover: #223a9e;
    --color-header-from: #2b4bd1;
    --color-header-to: #1c3399;
    --color-link: #2b4bd1;
    --color-heading: #1c3399;
    --color-accent: #f2b705;
    --color-text: #1f2430;
    --color-text-muted: #5b6270;
    --color-border: #e2e5ee;
    --color-focus: #2b4bd1;
    --color-error: #c0392b;
    --color-error-bg: #fdecea;
    --color-win: #17794d;
    --color-win-bg: #e5f6ee;
    --color-lose: #c0392b;
    --color-lose-bg: #fdecea;
    --color-draw: #5b6270;
    --color-draw-bg: #eef0f4;
    --color-warn: #9a5b00;
    --color-warn-bg: #fff4e0;
    /* エリクサーの紫。白い数字を載せるため、ゲーム内の明るい紫より暗くしてコントラスト比を確保している。 */
    --color-elixir: #a32fb5;
    /* 水滴の縁の色。下に敷く面の色に合わせる必要があるので、白い面の上で使うときは使う側で上書きする。 */
    --color-elixir-outline: var(--color-bg);
    --radius: 12px;
    --shadow: 0 2px 10px rgba(31, 36, 48, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-bg: #161a23;
        --color-surface: #1f2430;
        --color-primary: #3451c7;
        --color-primary-hover: #2a44b0;
        --color-header-from: #223a9e;
        --color-header-to: #1c2f82;
        --color-link: #9db0ff;
        --color-heading: #b3c2ff;
        --color-accent: #f2b705;
        --color-text: #e7eaf2;
        --color-text-muted: #9aa3b5;
        --color-border: #2c3240;
        --color-focus: #9db0ff;
        --color-error: #ff9a8f;
        --color-error-bg: #3a2320;
        --color-win: #5fd8a0;
        --color-win-bg: #1d3a2d;
        --color-lose: #ff9a8f;
        --color-lose-bg: #3a2320;
        --color-draw: #9aa3b5;
        --color-draw-bg: #262b36;
        --color-warn: #ffc36b;
        --color-warn-bg: #3a2e1a;
        --color-elixir: #b23dc4;
        --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
    line-height: 1.6;
}

a {
    color: var(--color-link);
}

/* ブラウザ既定のフォーカスリングは要素ごとに見た目が揃わず、青いヘッダー上ではほぼ見えないため共通化する。 */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.site-header {
    background: linear-gradient(135deg, var(--color-header-from), var(--color-header-to));
    color: #fff;
    padding: 0.75rem 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.site-header :focus-visible {
    outline-color: #fff;
}

.site-header .brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
}

/* 装飾なので読み上げ対象から外す(content の "/" 以降が代替テキスト)。 */
.site-header .brand::before {
    content: "\1F451" / "";
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.site-nav a,
.lang-menu summary {
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    /* スマホで押しやすいよう、見た目の文字より広い範囲を押せるようにする。 */
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.site-nav a:hover,
.lang-menu summary:hover,
.lang-menu details[open] summary {
    background: rgba(255, 255, 255, 0.15);
}

/*
  言語メニュー。言語が増えてもヘッダーの幅が変わらないよう、閉じた状態では現在の言語だけを出す。
  一覧はヘッダーの下に重ねて出し、言語が多くなったらメニューの中でスクロールさせる。
*/
.lang-menu details {
    position: relative;
}

.lang-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.lang-menu summary::-webkit-details-marker {
    display: none;
}

.lang-menu-icon::before {
    content: "\1F310" / "";
}

/* 開閉できることが分かるよう、閉じているときは下向き、開いているときは上向きの矢印を出す。 */
.lang-menu summary::after {
    content: "\25BE" / "";
    font-size: 0.75rem;
}

.lang-menu details[open] summary::after {
    content: "\25B4" / "";
}

.lang-menu ul {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 10;
    min-width: 10rem;
    max-height: min(60vh, 22rem);
    overflow-y: auto;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.lang-menu li a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.lang-menu li a:hover {
    background: var(--color-bg);
}

/* ヘッダー内のフォーカス枠は白だが、一覧は明るい背景の上にあるため通常の色に戻す。 */
.lang-menu li a:focus-visible {
    outline-color: var(--color-focus);
}

.lang-menu li a[aria-current="true"] {
    font-weight: 700;
    color: var(--color-link);
}

.lang-menu li a[aria-current="true"]::after {
    content: " \2713" / "";
}

.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.site-footer {
    max-width: 860px;
    margin: 2rem auto 0;
    padding: 1rem 1rem 2rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.site-footer p {
    margin: 0;
}

/*
  デッキを左右に並べる対戦詳細画面用。860pxだとカード1枚あたりが窮屈になる。
  全画面を同じ幅に揃える案も試したが、1000pxでも「ゴブリンドリル」などのカード名が折り返したため、この画面だけ広げている。
*/
.container-wide {
    max-width: 1100px;
}

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--color-link);
    text-decoration: none;
    font-weight: 600;
}

.back-link:hover {
    text-decoration: underline;
}

.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.card h1 {
    margin-top: 0;
    font-size: 1.6rem;
    overflow-wrap: anywhere;
}

.card h2 {
    font-size: 1.15rem;
    margin-top: 0;
    color: var(--color-heading);
    border-left: 4px solid var(--color-accent);
    padding-left: 0.6rem;
    overflow-wrap: anywhere;
}

.card h3 {
    font-size: 0.95rem;
    margin-top: 1.25rem;
    color: var(--color-text-muted);
}

.card-action {
    margin-top: 1rem;
}

.clan-description {
    overflow-wrap: anywhere;
}

.tag-pill {
    display: inline-block;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-radius: 999px;
    padding: 0.15rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.search-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    flex: 1 1 220px;
}

.search-form input[type="text"],
.search-form input[type="search"] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
}

button, .btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

button:hover, .btn:hover {
    background: var(--color-primary-hover);
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-link);
    border: 1px solid var(--color-link);
}

.btn-secondary:hover {
    background: var(--color-bg);
}

.btn-small {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.stat-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.stat-grid li {
    background: var(--color-bg);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
}

.stat-grid .label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.stat-grid .value {
    font-size: 1.15rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.stat-grid .value a {
    color: var(--color-link);
    text-decoration: none;
}

.stat-grid .value a:hover {
    text-decoration: underline;
}

.stats-summary {
    font-size: 1.05rem;
    font-weight: 600;
}

/*
  ゲーム内と同じ4列×2行にする(auto-fitだとスマホで3・3・2に折り返す)。
  8列にするとPC幅でもカード名が折り返し、4列のまま全幅に広げると間延びするため、幅に上限を設ける。
  列は1frではなくminmax(0, 1fr)にする。1frだと列が中身の単語より縮まず、幅320pxでは「Esqueletos」などで4列が画面外にはみ出した。
*/
.current-deck .deck-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    max-width: 560px;
}

/* 右寄せのコピーボタンがデッキから離れないよう、デッキと同じ幅に収める。 */
.current-deck .deck-meta {
    max-width: 560px;
}

.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

thead th {
    text-align: left;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: 600;
    padding: 0.6rem 0.7rem;
    /* 列幅が狭いと見出しが縦に折り返してしまうため、折り返さず横スクロール(.table-scroll)側に委ねる。 */
    white-space: nowrap;
}

/* 桁の違いを見比べやすいよう、数値の列は右揃え・等幅数字にする。 */
th.num,
td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

thead th a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

thead th a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

/* 未ソートの列にも印を出し、見出しをクリックすれば並べ替えられることが分かるようにする。 */
thead th a.sort-none::after {
    content: " \21C5" / "";
    opacity: 0.45;
}

thead th a.sort-asc::after {
    content: " \25B2" / "";
}

thead th a.sort-desc::after {
    content: " \25BC" / "";
}

tbody td {
    padding: 0.6rem 0.7rem;
    border-top: 1px solid var(--color-border);
}

tbody td a {
    color: var(--color-link);
    text-decoration: none;
    font-weight: 600;
}

tbody td a:hover {
    text-decoration: underline;
}

tbody td a.btn {
    font-weight: 600;
}

tbody td a.btn:hover {
    text-decoration: none;
}

tbody tr:hover {
    background: var(--color-bg);
}

td.cell-action {
    text-align: right;
}

/* 対戦相手は名前と平均レベルを1組のspanで包んでいるため、aに限らず隣り合う要素の間に区切りを入れる。 */
.name-list > * + *::before {
    content: " / ";
    color: var(--color-text-muted);
    font-weight: 400;
}

.opponent-level {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.teammates {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-win {
    color: var(--color-win);
    background: var(--color-win-bg);
}

.badge-lose {
    color: var(--color-lose);
    background: var(--color-lose-bg);
}

.badge-draw {
    color: var(--color-draw);
    background: var(--color-draw-bg);
}

.inactive-badge {
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 999px;
    color: var(--color-warn);
    background: var(--color-warn-bg);
    font-weight: 600;
}

.notice {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.is-hidden {
    display: none;
}

.page-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-heading h1 {
    margin: 0;
}

.favorite-form {
    display: inline-flex;
}

.favorite-toggle {
    background: none;
    border: none;
    padding: 0.25rem;
    line-height: 0;
    cursor: pointer;
    color: var(--color-text-muted);
}

.favorite-toggle:hover {
    background: none;
    color: var(--color-accent);
}

.favorite-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.favorite-toggle.is-favorite {
    color: var(--color-accent);
}

.favorite-toggle.is-favorite svg {
    fill: currentColor;
}

.favorite-limit-notice {
    flex-basis: 100%;
    margin: 0;
}

.favorite-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.favorite-chip-row + .favorite-chip-row {
    margin-top: 0.75rem;
}

.favorite-chip-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.favorite-chip {
    display: inline-block;
    background: var(--color-bg);
    color: var(--color-link);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.favorite-chip:hover {
    background: var(--color-border);
}

.error-box {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* 「見つからない」など、システム障害ではない案内。エラーの赤ではなく中立的な色にする。 */
.notice-box {
    background: var(--color-surface);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.result-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.35rem 1rem;
    background: var(--color-bg);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.result-list .result-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.result-list .name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* liと同じ地色だとタグが沈むため、検索結果の中だけ背景を変える。 */
.result-list .tag-pill {
    background: var(--color-surface);
}

.result-list .result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.result-list .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.search-section + .search-section {
    margin-top: 1.75rem;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.pager-range {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.empty-state {
    background: var(--color-bg);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    color: var(--color-text-muted);
    text-align: center;
}

.deck-grid {
    display: grid;
    /* 固定4列+ブレークポイントだと481〜600px幅でカードが窮屈になるため、幅に応じて列数を決める。 */
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.deck-card {
    background: var(--color-bg);
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    /* カード名が1行/2行のどちらでも、その下のエリクサー・レベル表示が同じ行の隣カードと揃うよう、下端に寄せる。 */
    display: flex;
    flex-direction: column;
}

/* 絞り込みで付けた hidden を効かせる。上の display 指定はブラウザ標準の [hidden]{display:none} より強いので、打ち消しておく。 */
.deck-card[hidden] {
    display: none;
}

.deck-card img {
    width: 56px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 0.35rem;
}

/* エリクサーバッジを画像の角に重ねるための枠。画像と同じ幅にしないと、中央寄せされた画像の角からずれる。 */
.card-thumb {
    position: relative;
    width: 56px;
    max-width: 100%;
    margin: 0 auto;
}

.elixir-badge {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 22px;
    height: 26px;
    /* 画像へのリンクを塞がないようにする。 */
    pointer-events: none;
}

.elixir-badge svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--color-elixir);
    stroke: var(--color-elixir-outline);
    stroke-width: 1.6;
}

/* 水滴は下側がふくらんでいるので、数字は中心より下に置く。 */
.elixir-value {
    position: absolute;
    left: 0;
    right: 0;
    top: 46%;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-align: center;
}

/* エリクサーでの絞り込み。名前の入力欄と縦に並べるため、search-form の横並びから外して1行占有させる。 */
.elixir-filter {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    border: none;
    margin: 0;
    padding: 0;
}

.elixir-filter legend {
    /* legend は float した要素の隣に回り込まないため、通常の要素として並べ直す。 */
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.elixir-chip {
    appearance: none;
    min-width: 2.2rem;
    padding: 0.35rem 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.elixir-chip:hover {
    background: var(--color-surface);
    border-color: var(--color-elixir);
}

.elixir-chip[aria-pressed="true"] {
    background: var(--color-elixir);
    border-color: var(--color-elixir);
    color: #ffffff;
}

/* 絞り込みで数枚だけ残ったとき、auto-fit だと空いた列が詰められて1枚が横幅いっぱいに伸びるため、列を残す auto-fill にする。 */
.card-catalog {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
}

/* カード画像は詳細画面へのリンク。押せることが分かるよう、重ねたときだけ少し拡大する。 */
.card-link {
    display: block;
    border-radius: 6px;
}

.card-link img {
    transition: transform 0.12s ease-out;
}

.card-link:hover img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .card-link img {
        transition: none;
    }
}

/* 列幅より長い単語は途中で折り返す。ハイフネーションに対応した環境では単語の区切りにハイフンが入る。 */
.deck-card .card-name {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.deck-card .card-sub {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: auto;
}

/* 得意(good)は勝ち色、苦手(bad)は負け色。見出しを読まなくても強弱が伝わるようにする。 */
.deck-card.perf-good {
    box-shadow: inset 0 -3px 0 var(--color-win);
}

.deck-card.perf-bad {
    box-shadow: inset 0 -3px 0 var(--color-lose);
}

.deck-card.perf-good .perf-rate {
    color: var(--color-win);
    font-weight: 700;
}

.deck-card.perf-bad .perf-rate {
    color: var(--color-lose);
    font-weight: 700;
}

.support-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
}

.support-row .support-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.support-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-bg);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
}

.support-card img {
    width: 28px;
    height: auto;
    display: block;
}

.support-card .card-name {
    font-size: 0.78rem;
    font-weight: 600;
}

.support-card .card-sub {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.deck-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
}

.deck-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.deck-metric-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.deck-metric-value {
    font-size: 1rem;
    font-weight: 700;
}

/* 指標の数が変わってもボタンの位置が揺れないよう、行の右端に寄せる。 */
.deck-meta .deck-copy {
    margin-left: auto;
}

.matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.matchup .side {
    text-align: center;
}

.matchup .side .side-name {
    font-weight: 600;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

/* 2v2で、見ているプレイヤー本人がどちらかを分かるようにする。 */
.matchup .side .side-name.is-viewer {
    font-weight: 800;
    font-size: 1.1rem;
}

.matchup .side .side-name a {
    color: inherit;
    text-decoration: none;
}

.matchup .side .side-name a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

.matchup .vs {
    font-weight: 700;
    color: var(--color-text-muted);
}

.lead {
    margin-bottom: 1.25rem;
}

/*
  自分側を左列、相手側を右列に置く。--row はテンプレートで指定する行番号で、2v2の2人目どうしを同じ行に揃える
  (同じ行のパネルは高さも揃う)。左右を別々に縦積みすると、カード名の折り返し行数の違いで2段目の位置がずれていた。
*/
.decks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.decks .deck-panel-team {
    grid-column: 1;
    grid-row: var(--row);
}

.decks .deck-panel-opponent {
    grid-column: 2;
    grid-row: var(--row);
}

.decks .card {
    margin-bottom: 0;
    padding: 1.25rem;
}

.deck-panel h2 {
    font-size: 1.05rem;
}

/* 幅に余裕があるのでカード画像を大きめにする。 */
.deck-panel .deck-card img {
    width: 72px;
}

/* デッキは常に8枚なので、幅が半分になっても4列×2行(ゲーム内と同じ形)を保つ。 */
.deck-panel .deck-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    /*
      国名が長いとタブが押しつぶされて「グローバル」が2行に折り返したため、折り返さずに横スクロールさせる。
      下線を border にして各タブを -1px はみ出させると、スクロール領域から溢れて縦スクロールバーが出るため、内側の影で描く。
    */
    box-shadow: inset 0 -1px 0 var(--color-border);
    overflow-x: auto;
    overflow-y: hidden;
}

.tabs .tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.tabs .tab:hover {
    color: var(--color-link);
    background: none;
}

.tabs .tab.is-active {
    color: var(--color-link);
    border-bottom-color: var(--color-link);
}

.rank {
    display: inline-block;
    min-width: 1.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.country-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.country-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.country-form select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    max-width: 16rem;
}

.country-form button {
    padding: 0.45rem 1.1rem;
}

/* タブレット〜小型ノート。左右2カラムでは1枚あたりの幅が足りなくなるため縦積みに戻す。 */
@media (max-width: 760px) {
    .decks {
        grid-template-columns: 1fr;
    }

    /* 1列ではDOMの順(自分→味方→相手)に並べる。 */
    .decks .deck-panel-team,
    .decks .deck-panel-opponent {
        grid-column: auto;
        grid-row: auto;
    }

    .card, .decks .card {
        padding: 1.2rem 1.25rem;
    }
}

/* スマートフォン。横スクロールしていた表を1行=1カードの積み上げに切り替える。 */
@media (max-width: 600px) {
    .site-header {
        padding: 0.6rem 1rem;
    }

    /*
      スマホ幅ではヘッダーの折り返し方次第で言語メニューが左端に来るため、ボタンに右揃えの一覧だと画面の左外にはみ出す。
      一覧はヘッダーの左右いっぱいに広げる(topを指定しないので、縦位置はボタンの直下のまま)。
    */
    .site-header {
        position: relative;
    }

    .lang-menu details {
        position: static;
    }

    .lang-menu ul {
        top: auto;
        left: 1rem;
        right: 1rem;
        margin-top: 0.35rem;
    }

    /* PC幅と同じ160pxだと375px前後で2列に収まらず、7項目が縦1列に並んでいた。 */
    .stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .table-scroll {
        overflow-x: visible;
    }

    table {
        display: block;
        min-width: 0;
    }

    tbody, tr, td {
        display: block;
    }

    /* 各セルに項目名(data-label)が出るため、通常のヘッダ行は隠す。 */
    thead {
        display: none;
    }

    /* ソート可能な表だけはヘッダを残す。この画面での唯一のソート手段のため。 */
    .table-sortable thead {
        display: block;
        margin-bottom: 0.6rem;
    }

    .table-sortable thead tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    /* チップ全体を押せるよう、余白は th ではなくリンク側に持たせる。 */
    .table-sortable thead th {
        padding: 0;
        border-radius: 999px;
        font-size: 0.85rem;
        text-align: left;
    }

    .table-sortable thead th a {
        display: block;
        padding: 0.45rem 0.85rem;
    }

    tbody tr {
        background: var(--color-bg);
        border-radius: 8px;
        padding: 0.6rem 0.85rem;
        margin-bottom: 0.6rem;
    }

    tbody tr:hover {
        background: var(--color-bg);
    }

    tbody td {
        display: grid;
        grid-template-columns: 7.5rem 1fr;
        justify-items: start;
        gap: 0.75rem;
        padding: 0.15rem 0;
        border-top: none;
        /* 区切りの無い長い名前(キリル文字の1語など)が値の列から画面外へはみ出すため、途中で折り返させる。 */
        overflow-wrap: anywhere;
    }

    td.num {
        text-align: left;
    }

    /* 値の側の折り返し指定(anywhere)を引き継ぐと「oponent/e」のように項目名まで単語の途中で切れるため戻す。 */
    tbody td::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-size: 0.8rem;
        overflow-wrap: normal;
    }

    td.cell-action {
        display: block;
        text-align: left;
        padding-top: 0.4rem;
    }

    td.cell-action::before {
        content: none;
    }

    td.is-empty {
        display: none;
    }

    /*
      ランキングは「順位」を見出し付きの1行にすると冗長なので、順位と名前を1行目にまとめて大きく出す。
      残りの項目は2行目以降に項目名付きで並べる。
    */
    .table-ranking tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.75rem;
        align-items: baseline;
    }

    .table-ranking td {
        grid-column: 1 / -1;
    }

    .table-ranking td.cell-rank,
    .table-ranking td.cell-name {
        display: block;
        grid-column: auto;
    }

    .table-ranking td.cell-rank::before,
    .table-ranking td.cell-name::before {
        content: none;
    }

    .table-ranking td.cell-rank .rank {
        font-size: 1.15rem;
        min-width: 0;
    }

    .table-ranking td.cell-rank .rank::before {
        content: "#";
        color: var(--color-text-muted);
        font-weight: 400;
    }

    .table-ranking td.cell-name {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    /* 4列固定で1枚が60px前後になるため、カード名を小さくして折り返し行数を減らす(対戦詳細と使用中のデッキ)。 */
    .deck-panel .deck-card,
    .current-deck .deck-card {
        padding: 0.4rem 0.2rem;
    }

    .current-deck .deck-grid {
        gap: 0.35rem;
    }

    .deck-panel .deck-card .card-name,
    .current-deck .deck-card .card-name {
        font-size: 0.68rem;
        letter-spacing: -0.02em;
    }
}

@media (max-width: 480px) {
    .matchup {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .card, .decks .card {
        padding: 1.1rem;
    }

    /* 項目名の列が7.5remのままだと、幅320pxでは値の列が84pxしか残らず「Ranqueado」も途中で折り返した。 */
    tbody td {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: 0.5rem;
    }

    /* ボタンを右端に置くと名前の領域が狭くなるため、下段に回して全幅にする。 */
    .result-list li {
        grid-template-columns: 1fr;
    }

    .result-list .btn {
        grid-column: 1;
        grid-row: auto;
        text-align: center;
    }
}

/* カード詳細画面 */
.card-english-name {
    margin: -0.25rem 0 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.card-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.card-artwork {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.card-artwork img {
    width: 150px;
    max-width: 100%;
    height: auto;
    display: block;
}

.card-artwork figure {
    margin: 0;
    text-align: center;
}

.card-artwork figcaption {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.card-detail .stat-grid {
    flex: 1 1 260px;
}