/*
  色の役割を分けている。
  --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-on-accent: #1f2430;
    --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-evolution: #8a3fd1;
    --color-evolution-bg: #f1e6fb;
    --color-hero: #b07c00;
    --color-hero-bg: #fbf0d2;
    --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;
        --color-evolution: #b98af0;
        --color-evolution-bg: #2b2238;
        --color-hero: #e5b53a;
        --color-hero-bg: #352d1b;
        --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);
    /*
      欧文・キリル文字はOSのUIフォントで、和文は後ろの和文フォントで出す。
      以前は和文フォントを先頭にしていたため、Windowsでは英語などの画面もYu Gothicの欧文で表示されていた。
    */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
    line-height: 1.6;
}

/*
  日本語は、長音符や小書きの仮名で行を始めない(「バーサーカ/ー」を防ぐ)、文節の切れ目で折り返す(Chrome 119以降。
  対応していないブラウザは無視して従来どおり折り返す)。
*/
:root:lang(ja) {
    line-break: strict;
    word-break: auto-phrase;
}

/*
  韓国語(言語を足すときのための準備)。韓国語のフォントを和文フォントより先に当てる(和文フォントにはハングルが無いか、
  あっても字形が揃わない。漢字も韓国語の字形になる)。ハングルは既定では文字ごとに折り返されるので、単語の途中で折り返さない。
*/
:root:lang(ko) body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo",
        "Noto Sans KR", "Malgun Gothic", sans-serif;
    word-break: keep-all;
}

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;
}

.brand-logo {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.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" / "";
}

/* 着地した言語がブラウザの言語と違うときの「〇〇語で表示」。ヘッダーの最後の段に1行で出す。 */
.lang-suggestion {
    flex: 1 0 100%;
    order: 2;
    margin: 0;
    font-size: 0.9rem;
}

.lang-suggestion a {
    color: #fff;
    font-weight: 700;
}

/* 開閉できることが分かるよう、閉じているときは下向き、開いているときは上向きの矢印を出す。 */
.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;
    /* 10言語(1項目およそ41px)が一度に見える高さ。画面が低い端末のときだけ一覧の中でスクロールさせる。 */
    max-height: min(80vh, 30rem);
    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;
}

.site-footer p + p {
    margin-top: 0.4rem;
}

/* プライバシーポリシーのような読ませる文章。項目の区切りが分かるよう、見出しの上と箇条の間を空ける。 */
.policy h2 {
    margin-top: 1.75rem;
}

.policy ul {
    padding-left: 1.25rem;
}

.policy li + li {
    margin-top: 0.6rem;
}

.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;
}

/* 集計方法などの注記。本文を先に読めるよう、カードの末尾に区切り線を引いてまとめる。 */
.card-notes {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.card-notes .notice {
    margin: 0.3rem 0;
    font-size: 0.8rem;
}

/* トップページの見出しと説明。何のサイトかを最初に伝える。 */
.page-intro {
    margin: 0.25rem 0 1.5rem;
}

.page-intro h1 {
    margin: 0 0 0.4rem;
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--color-heading);
}

.page-intro p {
    margin: 0;
    font-size: 0.95rem;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
}

.profile-clan {
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.profile-clan:hover {
    text-decoration: underline;
}

.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;
}

.search-form select {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
}

.search-form-requery {
    margin-bottom: 1.5rem;
}

/* プレイヤー情報画面の上の1行の検索欄。スマホ幅でもボタンを入力欄の横に置き、2行にしない。 */
.search-bar {
    flex-wrap: nowrap;
    align-items: stretch;
    margin-bottom: 1rem;
}

/* 検索欄のすぐ下に、欄の説明として寄せて出す。 */
.search-bar-hint {
    margin: -0.6rem 0 1rem;
}

.search-bar label {
    flex: 1 1 auto;
    min-width: 0;
}

.search-bar input {
    flex: 1 1 auto;
}

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;
}

/* 順位の下に添えるレーティングなど、値の補足。 */
.stat-grid .sub,
.stat-highlights .sub {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* プレイヤーの強さが一目で分かる項目。下の stat-grid-compact より大きく出す。 */
.stat-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.stat-highlights li {
    background: var(--color-bg);
    border-top: 3px solid var(--color-accent);
    border-radius: 10px;
    padding: 0.7rem 1rem 0.8rem;
}

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

.stat-highlights .value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.stat-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

.stat-grid-compact li {
    padding: 0.45rem 0.8rem;
}

.stat-grid-compact .value {
    font-size: 1rem;
}

/* プレイヤー情報画面の「前回見たときからの変化」。項目は横に流し、増減だけを太字と色で目立たせる。 */
/* 「これは自分」。プレイヤー情報画面の見出しのすぐ下に小さく置く。登録済みなら「自分のページ」と出す。 */
.me-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0.25rem 0 0.75rem;
}

.me-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-link);
}

.me-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* トップページの「自分の成績」。 */
.me-card .me-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.since-last {
    margin-top: 0.75rem;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    background: var(--color-bg);
    font-size: 0.85rem;
}

.since-last-heading {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.since-last-when {
    margin-left: 0.3em;
    font-weight: 400;
}

.since-last-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.since-last-items .delta {
    font-weight: 700;
}

.since-last-items .up .delta {
    color: var(--color-win);
}

.since-last-items .down .delta {
    color: var(--color-lose);
}

/* カードコレクション。割合はバーで見せ、正確な数は文言で添える。 */
.collection-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem 1.5rem;
}

.collection-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 0.75rem;
    margin-bottom: 0.3rem;
}

.collection-rarity {
    font-size: 0.9rem;
    font-weight: 700;
}

.collection-count {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.progress {
    height: 8px;
    background: var(--color-bg);
    border-radius: 999px;
    overflow: hidden;
}

.progress > span {
    display: block;
    width: var(--percent, 0%);
    height: 100%;
    background: var(--color-link);
    border-radius: inherit;
}

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

/* 勝率は勝敗数と区切りが分かるよう、少し離して枠で囲む。 */
.stats-summary .stats-rate {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--color-bg);
    font-size: 0.95rem;
    white-space: nowrap;
}

/*
  ゲーム内と同じ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;
}

.current-deck .card-thumb {
    width: 72px;
}

/*
  得意/苦手カード。全幅に伸びると3枚が間延びするため、使用中のデッキと同じ大きさのタイルにそろえる。
  後ろにある .deck-grid の auto-fit に負けて、1枚だけのときに横幅いっぱいに伸びていたので、2つのクラスで指定する。
*/
.deck-grid.perf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    max-width: 560px;
}

.perf-grid .deck-card img {
    width: 72px;
}

.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;
}

/* クランのメンバー一覧の順位。スマホ幅では列を隠して名前の前に出す(member-rank)。 */
td.cell-rank {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.member-rank {
    display: none;
}

/* 上位のクランはトロフィーがほぼ全員14,000で並ぶので、世界上位1000人に入っているメンバーに世界順位を添える。 */
.world-rank-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    color: var(--color-hero);
    background: var(--color-hero-bg);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

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);
}

/*
  対戦履歴。1戦を2行にまとめ、勝敗は左端の色帯でも示す。
  勝敗の文言は言語によって長さが違う(「Niederlage」など)ので、subgridで全行の列幅をそろえ、対戦相手の位置がずれないようにする。
*/
.battle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    row-gap: 0.5rem;
}

.battle-item {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.45rem 0.75rem 0.45rem 0.7rem;
    background: var(--color-bg);
    border-left: 4px solid var(--color-draw);
    border-radius: 8px;
}

.battle-item.battle-win {
    border-left-color: var(--color-win);
}

.battle-item.battle-lose {
    border-left-color: var(--color-lose);
}

.battle-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.battle-crowns {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.battle-win .battle-crowns {
    color: var(--color-win);
}

.battle-lose .battle-crowns {
    color: var(--color-lose);
}

.battle-body {
    min-width: 0;
}

.battle-opponents {
    overflow-wrap: anywhere;
}

.battle-opponents a,
.battle-sub a {
    font-weight: 600;
    text-decoration: none;
}

.battle-opponents a:hover,
.battle-sub a:hover {
    text-decoration: underline;
}

/*
  対戦履歴の自分と相手のデッキ。「自分」「相手」の見出しの幅をそろえて2段に並べる。1枚は最大30pxで、
  行の幅が足りなければ8枚が1行に収まるまで縮める(スマホ幅では30pxのままだと右端の「詳細」ボタンに重なった)。
  2v2の相手2人分は折り返して並べる。
*/
.battle-decks {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 0.2rem 0.4rem;
    margin-top: 0.3rem;
}

.battle-deck-label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.battle-deck-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    min-width: 0;
}

.battle-deck {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 30px));
    gap: 2px;
    max-width: 100%;
}

.battle-deck a {
    display: block;
    min-width: 0;
}

.battle-deck img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.battle-deck img.form-evolution {
    box-shadow: 0 0 0 2px var(--color-evolution);
}

.battle-deck img.form-hero {
    box-shadow: 0 0 0 2px var(--color-hero);
}

.battle-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.battle-sub > * + *::before {
    content: "\00B7" / "";
    margin-right: 0.5rem;
}

/* 前回見たとき以降の対戦の印(sinceLastScript が付ける)。印のすぐ後ろには区切りの点を入れない。 */
.battle-new {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #1a1a1a;
    font-weight: 700;
}

.battle-sub > .battle-new + *::before {
    content: none;
}

.battle-sub .teammates {
    display: inline;
    font-size: inherit;
}

/* 1戦でのトロフィー(レーティング)の増減。数字だけを勝敗と同じ色で目立たせる。 */
.trophy-change strong {
    font-weight: 700;
}

.trophy-change.up strong {
    color: var(--color-win);
}

.trophy-change.down strong {
    color: var(--color-lose);
}

.matchup .side .trophy-change,
.matchup .side .side-leak {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.matchup .side .side-leak strong {
    color: var(--color-text);
    font-weight: 700;
}

.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);
}

/* クラン対戦の、今週まだ攻撃していないメンバーの名前。区切りの「/」で詰めて折り返す。 */
.war-not-attacked a {
    font-weight: 600;
}

.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);
}

/* トッププレイヤーのデッキ画面。100人分を並べるので、PC幅では8枚を1列に詰め、カード名は画像に任せて省く。 */
.top-deck .deck-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.4rem;
}

.top-deck .deck-grid .card-name {
    display: none;
}

/* ランキングの動き画面。順位・レーティングの増減は、勝敗と同じ色で示す。 */
.movements-summary {
    font-weight: 600;
}

.movement {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.movement.up {
    color: var(--color-win);
}

.movement.down {
    color: var(--color-lose);
}

.movement.same {
    color: var(--color-text-muted);
    font-weight: 400;
}

.movement.new {
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 999px;
    color: var(--color-warn);
    background: var(--color-warn-bg);
    font-size: 0.82rem;
}

.movements-days {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

@media (max-width: 600px) {
    .top-deck .deck-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.top-deck-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.top-deck-rank {
    font-weight: 700;
}

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

/* プロ・クリエイターの肩書き。一覧とプレイヤー情報画面で同じ見た目にする。 */
.pro-badge {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--color-hero-bg);
    color: var(--color-text);
    font-size: 0.82rem;
}

.pro-badge-name {
    font-weight: 700;
}

.pro-kind {
    font-weight: 700;
    color: var(--color-hero);
}

.pro-link {
    text-decoration: none;
}

.pro-link:hover .pro-badge {
    text-decoration: underline;
}

.pro-name {
    font-weight: 700;
}

.pro-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.8rem;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
}

.pro-ingame {
    color: var(--color-text-muted);
}

/* カード詳細画面では1枚のカードの中に数人分を並べるので、区切り線で分ける。 */
.top-deck-item + .top-deck-item {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.win-rate-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.win-rate-divider::before,
.win-rate-divider::after {
    content: "";
    flex: 1;
    border-top: 2px solid var(--color-border);
}

.popular-deck-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.win-rate-deck-best {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.similar-decks {
    max-width: 560px;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    background: var(--color-bg);
    font-size: 0.9rem;
}

.similar-decks a {
    white-space: nowrap;
}

.similar-decks-note {
    color: var(--color-text-muted);
}

/*
  今シーズンの順位の推移。描画域の上下に8pxの余白を取り、線が端で切れないようにする(目盛りも同じ余白で合わせる)。
  位置の変数(--pos・--x・--y)は単位なしの%。
*/
.rank-history-best {
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.rank-chart {
    --inset: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 180px auto;
    column-gap: 0.5rem;
    margin: 0 0.5rem 0.25rem 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.rank-chart-y {
    position: relative;
    min-width: 2.5em;
}

.rank-chart-y span {
    position: absolute;
    right: 0;
    top: calc(var(--inset) + (100% - 2 * var(--inset)) * var(--pos) / 100);
    transform: translateY(-50%);
    white-space: nowrap;
}

.rank-chart-plot {
    position: relative;
    touch-action: pan-y;
    outline-offset: 4px;
}

.rank-chart-plot svg {
    position: absolute;
    top: var(--inset);
    left: 0;
    width: 100%;
    height: calc(100% - 2 * var(--inset));
    overflow: visible;
}

.rank-chart-grid {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.rank-chart-line {
    fill: none;
    stroke: var(--color-link);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.rank-chart-dot {
    position: absolute;
    left: calc(100% * var(--x) / 100);
    top: calc(var(--inset) + (100% - 2 * var(--inset)) * var(--y) / 100);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-link);
    box-shadow: 0 0 0 2px var(--color-surface);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.rank-chart-end {
    position: absolute;
    right: 0;
    top: calc(var(--inset) + (100% - 2 * var(--inset)) * var(--y) / 100);
    transform: translateY(calc(-100% - 8px));
    padding: 0 4px;
    border-radius: 4px;
    /* 幅の狭い画面では線の上に重なるので、背景で線を隠して読めるようにする */
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
    color: var(--color-text);
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

.rank-chart-end.below {
    transform: translateY(8px);
}

.rank-chart-crosshair {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% * var(--x) / 100);
    width: 1px;
    background: var(--color-text-muted);
    pointer-events: none;
}

.rank-chart-tip {
    position: absolute;
    top: 0;
    transform: translateY(calc(-100% - 6px));
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: var(--color-text-muted);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.rank-chart-tip strong {
    color: var(--color-text);
    font-size: 0.85rem;
}

.rank-chart-x {
    position: relative;
    grid-column: 2;
    height: 1.6em;
}

.rank-chart-x span {
    position: absolute;
    top: 0.3em;
    left: calc(100% * var(--pos) / 100);
    transform: translateX(-50%);
    white-space: nowrap;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.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;
    position: relative;
}

/*
  お気に入りの案内の吹き出し。☆の真下に出して矢印で☆を指す。--hint-shift はJSが画面からはみ出す分だけ入れる横のずれで、
  矢印は逆方向にずらして☆を指したままにする。上下の揺れ(transform)と位置合わせ(translate)は別のプロパティにして打ち消し合わないようにしている。
*/
.favorite-hint {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    translate: calc(-50% + var(--hint-shift, 0px)) 0;
    z-index: 10;
    width: max-content;
    max-width: min(16rem, calc(100vw - 2rem));
    padding: 0.5rem 0.85rem;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    animation: favorite-hint-in 0.35s ease-out, favorite-hint-float 2.4s ease-in-out 0.35s infinite;
    transition: opacity 0.25s;
}

.favorite-hint::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: calc(50% - var(--hint-shift, 0px));
    translate: -50% 0;
    border: 7px solid transparent;
    border-bottom-color: var(--color-accent);
}

.favorite-hint.is-leaving {
    opacity: 0;
}

@keyframes favorite-hint-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes favorite-hint-float {
    50% {
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .favorite-hint {
        animation: none;
        transition: none;
    }
}

.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 .result-profile {
    gap: 0.2rem 0.9rem;
    color: var(--color-text);
}

.result-list .result-rank {
    font-weight: 700;
    color: var(--color-link);
}

.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;
}

.card-thumb img {
    width: 100%;
}

/* 進化(限界突破)・ヒーローで使ったカード。 */
.deck-card.form-evolution {
    background: var(--color-evolution-bg);
    box-shadow: inset 0 0 0 2px var(--color-evolution);
}

.deck-card.form-hero {
    background: var(--color-hero-bg);
    box-shadow: inset 0 0 0 2px var(--color-hero);
}

/* ゲーム内の水滴に寄せて、グラデーション・濃い紫の縁・ツヤを描いた画像にしている。縁が濃いので、下に敷く面の色を問わず輪郭が出る。 */
.elixir-badge {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 25px;
    height: 29px;
    background: url("/images/elixir-drop-c43d4341d686de49a4667035db2b87a2.svg") center / 100% 100% no-repeat;
    /* 画像へのリンクを塞がないようにする。 */
    pointer-events: none;
}

/*
  数字は水滴の形の重心(丸い部分の中心より少し上)に合わせる。丸い部分の中心に置くと、上がとがっている分だけ下に寄って見えた。
  水滴の明るい部分に白い数字が溶けないよう、濃い紫で縁取る(ゲーム内の数字と同じ見せ方)。
*/
.elixir-value {
    position: absolute;
    left: 0;
    right: 0;
    top: 33%;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    text-shadow:
        1px 0 0 #3d0750, -1px 0 0 #3d0750, 0 1px 0 #3d0750, 0 -1px 0 #3d0750,
        1px 1px 0 #3d0750, -1px 1px 0 #3d0750, 1px -1px 0 #3d0750, -1px -1px 0 #3d0750;
}

/* デッキ画面のカードの絞り込み(最大8枚)。選択欄を1つずつ縦に並べ、右に外す「×」を置く。 */
.deck-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 28rem;
}

.deck-filter-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.deck-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.deck-filter-row[hidden],
.deck-filter-add[hidden] {
    display: none;
}

.deck-filter-row select {
    flex: 1 1 auto;
    min-width: 0;
}

/* 「×」の無い欄も、右端を「×」のある欄にそろえる(「×」の幅+間隔)。 */
.deck-filter-row:not(:has(.deck-filter-remove)) select {
    margin-right: 3rem;
}

.deck-filter-remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    text-decoration: none;
}

.deck-filter-remove:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.deck-filter-actions {
    display: flex;
    gap: 0.5rem;
}

/* エリクサーでの絞り込み。名前の入力欄と縦に並べるため、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;
}

/* 使用率順のカード一覧。順位と使用率を名前の下に並べ、幅が足りなければ折り返す。 */
.deck-card .card-usage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.3rem;
    font-variant-numeric: tabular-nums;
}

.deck-card .card-usage .usage-rank {
    color: var(--color-text);
    font-weight: 700;
}

/* 順位・使用率の行に収まるかは言語と幅で変わるので、増減は常に次の行にそろえる。 */
.deck-card .card-usage .rank-change {
    flex-basis: 100%;
}

/* 得意(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;
}

.perf-counters {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
}

/* カード詳細画面の得意/苦手なカード。.card h2 は上の余白が0なので、2つ目の見出しが前の表に詰まらないようにする。 */
.matchups-list + .matchups-list {
    margin-top: 1.5rem;
}

/* 消費漏れの表。行の見出し(誰の値か)が長いので、数値の列は詰めて右に寄せる。 */
.leak-table {
    min-width: 0;
    max-width: 560px;
}

.leak-table tbody th {
    font-weight: 400;
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-top: 1px solid var(--color-border);
}

.leak-table .leak-top {
    color: var(--color-text-muted);
}

.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;
}

/* 対戦詳細の「前の対戦」「次の対戦」。片方しか無いときも、新しい方は右端に置く。 */
.battle-nav {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.battle-nav-newer {
    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: var(--color-link);
    text-decoration: none;
}

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

.score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.score-sep {
    color: var(--color-text-muted);
    font-weight: 400;
}

/*
  自分側を左列、相手側を右列に置く。--row はテンプレートで指定する行番号で、2v2の2人目どうしを同じ行に揃える
  (同じ行のパネルは高さも揃う)。左右を別々に縦積みすると、カード名の折り返し行数の違いで2段目の位置がずれていた。
  本文の幅(860px)では1枚あたりが窮屈なので、この部分だけ左右に1100pxまで張り出す。画面全体を広げると、
  戻るリンクや見出しの位置が他の画面とずれるため。
*/
.decks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    margin-inline: calc((100% - min(1100px - 2rem, 100vw - 2rem)) / 2);
}

.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;
}

.duel-round + .duel-round {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.duel-round-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.duel-round-score {
    font-weight: 700;
}

.duel-round-heading .side-leak {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.duel-round-heading .side-leak strong {
    color: var(--color-text);
}

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

/*
  デッキは常に8枚なので、幅が半分になっても4列×2行(ゲーム内と同じ形)を保つ。
  1frだと列が画像の枠(72px)より縮まず、スマホ幅で画面の右にはみ出すため minmax(0, 1fr) にする。
*/
.deck-panel .deck-grid {
    grid-template-columns: repeat(4, minmax(0, 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;
}

/* 別のURLへ移るタブ(カード一覧の並び順)はリンクで作るので、リンクの下線を消してボタンのタブと見た目を揃える。 */
.tabs a.tab {
    text-decoration: 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;
}

/* 個人ランキングの24時間の順位の変化。上がった・下がったは対戦の勝ち負けと同じ色にする。 */
.rank-change {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text-muted);
}

.rank-change.up {
    color: var(--color-win);
}

.rank-change.down {
    color: var(--color-lose);
}

.rank-change.new {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-link);
}

.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;
        margin-inline: 0;
    }

    /* 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.5rem 1rem 0.35rem;
    }

    /*
      メニューを折り返すとヘッダーが4段(約180px)になり、最初に見える範囲の4分の1を占めていた。
      1段目にロゴと言語、2段目にメニューを1行で並べ、入りきらない分は横にスクロールさせる。
    */
    .site-nav {
        order: 1;
        flex: 1 0 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        margin: 0 -1rem;
        padding: 0.15rem 0.75rem;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    /* マウスでは横にスワイプできないので、つかめるスクロールバーを出す(ホイールで動かすのはlayout.htmlのスクリプト)。 */
    @media (hover: hover) and (pointer: fine) {
        .site-nav {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
        }

        .site-nav::-webkit-scrollbar {
            display: block;
            height: 6px;
        }

        .site-nav::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.55);
            border-radius: 3px;
        }
    }

    /* 右に続きがあるときだけ右端を薄くし、横にスクロールできることを示す(has-moreはlayout.htmlのスクリプトが付ける)。 */
    .site-nav.has-more {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }

    .site-nav a {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.35rem 0.65rem;
    }

    .page-intro h1 {
        font-size: 1.3rem;
    }

    .deck-grid.perf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stat-highlights .value {
        font-size: 1.35rem;
    }

    .stat-grid-compact {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    /*
      対戦履歴は対戦相手の欄を広く取る。勝敗の文字は言語によって長い(「Niederlage」)ので見た目からは外して読み上げ用に残し、
      勝敗の色を付けたクラウン数で示す(数字の大小で勝敗が分かるので、色だけに頼らない)。詳細ボタンは「›」だけにする。
    */
    .battle-item {
        column-gap: 0.6rem;
        padding: 0.45rem 0.5rem 0.45rem 0.6rem;
    }

    .battle-result .badge,
    .battle-detail-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .battle-crowns {
        font-size: 1.05rem;
    }

    .battle-detail {
        padding: 0.35rem 0.7rem;
    }

    .battle-detail::after {
        content: "\203A" / "";
        font-size: 1.2rem;
        line-height: 1;
    }

    /*
      スマホ幅ではヘッダーの折り返し方次第で言語メニューが左端に来るため、ボタンに右揃えの一覧だと画面の左外にはみ出す。
      一覧はヘッダーの左右いっぱいに広げる(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;
    }

    td.cell-rank {
        display: none;
    }

    .member-rank {
        display: inline;
        margin-right: 0.35rem;
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
    }

    /*
      ランキングは1件を2行にまとめる。1行目に順位と名前を大きく出し、残りの項目は2行目に項目名付きで横に流す
      (1項目を1行にすると、1000件のランキングでスマホ幅の画面が14万pxを超えていた)。
      名前の幅を1行目の残り全部にして、残りの項目が1行目に回り込まないようにしている。
    */
    .table-ranking tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.75rem;
        row-gap: 0.1rem;
    }

    .table-ranking td {
        display: inline-flex;
        align-items: baseline;
        gap: 0.3rem;
        padding: 0;
    }

    .table-ranking td.is-empty {
        display: none;
    }

    .table-ranking td.cell-rank {
        display: block;
        flex: 0 0 auto;
        min-width: 3.5rem;
    }

    .table-ranking td.cell-name {
        display: block;
        flex: 1 1 calc(100% - 4.25rem);
    }

    .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;
    }

    /* 1行目は順位と名前だけにするため、変化は2行目の最後に回す。 */
    .table-ranking td.cell-change {
        order: 1;
    }

    /* 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;
    }

    /* 列が少ない表は、上のカード型をやめて表のまま出す(1行に収まり、行数の多い一覧でも見渡せるため)。 */
    .table-compact {
        display: table;
        width: 100%;
    }

    .table-compact thead {
        display: table-header-group;
    }

    .table-compact tbody {
        display: table-row-group;
    }

    .table-compact tr,
    .table-compact tbody tr {
        display: table-row;
        background: none;
        padding: 0;
        margin: 0;
    }

    .table-compact th,
    .table-compact tbody td {
        display: table-cell;
        padding: 0.4rem 0.35rem;
        border-top: 1px solid var(--color-border);
    }

    /* この幅では横スクロールをやめているため、長い見出しは折り返さないと画面外にはみ出す。 */
    .table-compact thead th {
        white-space: normal;
    }

    .table-compact td.num,
    .table-compact th.num {
        text-align: right;
    }

    .table-compact tbody td::before {
        content: none;
    }
}

@media (max-width: 480px) {
    .score {
        font-size: 1.9rem;
    }

    .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;
}

/*
  カード詳細画面のステータス。レベル16とレベル11をラジオボタン(見えない)で切り替え、選んだ方の値だけを出す。
  切り替えはタブ(.tabs .tab)と同じ見た目にする。
*/
.stats-body .stats-level11,
#stats-level11:checked ~ .stats-body .stats-level16 {
    display: none;
}

#stats-level11:checked ~ .stats-body .stats-level11 {
    display: inline;
}

#stats-level16:checked ~ .stats-level-switch label[for="stats-level16"],
#stats-level11:checked ~ .stats-level-switch label[for="stats-level11"] {
    color: var(--color-link);
    border-bottom-color: var(--color-link);
}

/* ラジオボタン自体は見えないので、キーボードで選んでいるときは切り替えのタブに枠を出す */
#stats-level16:focus-visible ~ .stats-level-switch label[for="stats-level16"],
#stats-level11:focus-visible ~ .stats-level-switch label[for="stats-level11"] {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.stats-body h3 {
    margin: 1.25rem 0 0.5rem;
}

.stats-lead {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* バランス調整。カードの画像と変更の内容を横に並べる。 */
.balance-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.balance-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-top: 1px solid var(--color-border);
}

.balance-item:first-child {
    border-top: none;
}

.balance-item .card-link {
    flex: 0 0 3.5rem;
}

.balance-item .card-link img {
    width: 100%;
    height: auto;
}

/* ドイツ語の長い項目名(Produktionsgeschwindigkeit)がスマホ幅ではみ出さないよう、語の途中でも折り返す。 */
.balance-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.balance-title {
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.balance-title .badge {
    margin-left: 0.3rem;
}

.balance-form {
    color: var(--color-evolution);
    background: var(--color-evolution-bg);
}

.kind-nerf .balance-kind {
    color: var(--color-lose);
    background: var(--color-lose-bg);
}

.kind-buff .balance-kind {
    color: var(--color-win);
    background: var(--color-win-bg);
}

.kind-rework .balance-kind,
.kind-fix .balance-kind {
    color: var(--color-draw);
    background: var(--color-draw-bg);
}

.balance-lines {
    margin: 0;
    padding-left: 1.1rem;
}

.balance-usage {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* 種類ごとの使用率の変化のまとめ。カードの一覧より先に結論が読めるよう、見出しの下に置く。 */
.balance-digest {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.8rem 0.6rem 1.8rem;
    background: var(--color-bg);
    border-radius: 8px;
}

/*
  クラロワクイズ(/quiz)。はじめ・問題・結果の画面を hidden で切り替えるので、ボタンなどの display 指定に負けないよう強く効かせる。
*/
.quiz [hidden] {
    display: none !important;
}

.quiz-round {
    margin: -0.25rem 0 0.25rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.quiz-lead {
    margin: 0.4rem 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.quiz-sizes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.quiz-size {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.9rem 0.5rem;
}

.quiz-size-count {
    font-size: 1.3rem;
    font-weight: 800;
}

.quiz-size-status {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .quiz-sizes {
        grid-template-columns: minmax(0, 1fr);
    }

    .quiz-size {
        flex-direction: row;
        justify-content: space-between;
        padding: 0.75rem 1rem;
    }
}

.quiz-play-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.quiz-practice {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--color-warn-bg);
    color: var(--color-warn);
    font-size: 0.8rem;
    font-weight: 700;
}

.quiz-progress {
    height: 6px;
    margin: 0.5rem 0 1rem;
    border-radius: 999px;
    background: var(--color-bg);
    overflow: hidden;
}

.quiz-progress-bar {
    height: 100%;
    background: var(--color-primary);
    transition: width 0.2s;
}

/* スマホでも、カード・選択肢・「次へ」が1画面に収まるよう、カードの画像は幅に合わせて小さくする。 */
.quiz-card {
    margin: 0;
    text-align: center;
}

.quiz-card-image {
    width: clamp(104px, 30vw, 140px);
    height: auto;
}

.quiz-card-name {
    margin-top: 0.4rem;
    font-size: 1.2rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.quiz-prompt {
    margin: 0.25rem 0 0.75rem;
    text-align: center;
    color: var(--color-text-muted);
}

/* 並べ替えにはカード名の大きな見出しが無いので、問題文を見出しの代わりにする。 */
.quiz-prompt.is-order {
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 800;
}

.quiz-choices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    max-width: 26rem;
    margin: 0 auto;
}

.quiz-choice {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 4rem;
    padding: 0.5rem 0;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    color: var(--color-text);
}

.quiz-choice:hover {
    background: var(--color-bg);
}

.quiz-choice:disabled {
    cursor: default;
}

.quiz-choice.is-correct {
    border-color: var(--color-win);
    background: var(--color-win-bg);
}

.quiz-choice.is-wrong {
    border-color: var(--color-lose);
    background: var(--color-lose-bg);
}

/* エリクサーの選択肢は、カード画像の水滴バッジ(.elixir-badge・.elixir-value)を大きくした見た目にする。 */
.quiz-choice-elixir .quiz-choice-value {
    display: block;
    width: 40px;
    height: 46px;
    padding-top: 14px;
    background: url("/images/elixir-drop-c43d4341d686de49a4667035db2b87a2.svg") center / 100% 100% no-repeat;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    text-shadow:
        1px 0 0 #3d0750, -1px 0 0 #3d0750, 0 1px 0 #3d0750, 0 -1px 0 #3d0750,
        1px 1px 0 #3d0750, -1px 1px 0 #3d0750, 1px -1px 0 #3d0750, -1px -1px 0 #3d0750;
}

/*
  ヒットポイントの並べ替え。行を指で動かせるよう、行の上では画面のスクロールと文字の選択を止める(touch-action・user-select)。
  位置の番号(1〜4)は行ではなく位置に付くよう、CSSのカウンターで振る。
*/
.quiz-order {
    max-width: 26rem;
    margin: 0 auto;
}

.quiz-order-end {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.quiz-order-list {
    counter-reset: quiz-order;
    margin: 0.25rem 0;
    padding: 0;
    list-style: none;
}

.quiz-order-item {
    counter-increment: quiz-order;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.quiz-order-item::before {
    content: counter(quiz-order);
    min-width: 1.2em;
    color: var(--color-text-muted);
    font-weight: 800;
    text-align: center;
}

.quiz-order-item img {
    width: 40px;
    height: auto;
    pointer-events: none;
}

.quiz-order-label {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.quiz-order-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.quiz-order-condition {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.quiz-order-handle {
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
}

.quiz-order-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.quiz-order-item.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.quiz-order-item.is-dragging {
    position: relative;
    z-index: 1;
    cursor: grabbing;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.quiz-order-list.is-answered .quiz-order-item {
    cursor: default;
}

.quiz-order-item.is-correct {
    border-color: var(--color-win);
    background: var(--color-win-bg);
}

.quiz-order-item.is-wrong {
    border-color: var(--color-lose);
    background: var(--color-lose-bg);
}

.quiz-order-howto {
    margin: 0.4rem 0 0;
    text-align: center;
}

/* 呪文の問題の候補。並べ替えの行と同じ形で、押すと左の四角に印が付く(画面のスクロールは止めない)。 */
.quiz-pick {
    max-width: 26rem;
    margin: 0 auto;
}

.quiz-pick-list {
    margin: 0.25rem 0;
    padding: 0;
    list-style: none;
}

.quiz-pick-button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0 0 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-weight: 400;
    text-align: left;
}

.quiz-pick-button:hover {
    background: var(--color-bg);
}

.quiz-pick-button:disabled {
    cursor: default;
}

.quiz-pick-button img {
    width: 40px;
    height: auto;
}

.quiz-pick-check {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    color: #ffffff;
    font-weight: 800;
    line-height: 1.2rem;
    text-align: center;
}

.quiz-pick-button.is-selected {
    border-color: var(--color-primary);
}

.quiz-pick-button.is-selected .quiz-pick-check {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.quiz-pick-button.is-selected .quiz-pick-check::before {
    content: "✓";
}

.quiz-pick-button.is-correct {
    border-color: var(--color-win);
    background: var(--color-win-bg);
}

.quiz-pick-button.is-wrong {
    border-color: var(--color-lose);
    background: var(--color-lose-bg);
}

.quiz-pick-result {
    flex: none;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.quiz-pick-howto {
    margin: 0.4rem 0 0;
    text-align: center;
}

.quiz-feedback {
    min-height: 1.6em;
    margin: 0.75rem 0 0.25rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
}

.quiz-feedback.is-correct {
    color: var(--color-win);
}

.quiz-feedback.is-wrong {
    color: var(--color-lose);
}

.quiz-note {
    margin: 0 0 0.25rem;
    text-align: center;
    color: var(--color-text-muted);
}

.quiz-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
}

.quiz-next {
    min-width: 10rem;
}

.quiz-quit {
    display: block;
    margin: 1rem auto 0;
    padding: 0.25rem;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
}

.quiz-quit:hover {
    background: none;
    color: var(--color-link);
}

.quiz-score {
    margin: 0.5rem 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
}

.quiz-perfect {
    text-align: center;
    color: var(--color-win);
    font-weight: 800;
}

.quiz-grid {
    text-align: center;
    white-space: pre-line;
    line-height: 1.3;
    font-size: 1.1rem;
}

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

.quiz-wrong-list li {
    text-align: center;
    font-size: 0.85rem;
}

.quiz-wrong-list a {
    display: block;
    color: var(--color-link);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.quiz-wrong-list a:hover {
    text-decoration: underline;
}

.quiz-wrong-list img {
    display: block;
    width: 64px;
    height: auto;
    margin: 0 auto 0.25rem;
}

.quiz-wrong-detail {
    display: block;
    color: var(--color-text-muted);
}

/*
  間違えた問題は1問を1段にする(エリクサーも横に詰めず縦に並べる)。どの段も一覧の列を subgrid で受け継ぎ、
  エリクサーのタイルは左端の列に、並べ替えの正しい順の4枚は左から4列に置いて、左端をそろえる
  (中央寄せにすると左端がそろわずガタガタに見えた)。列が4つに満たないスマホ幅では、並べ替えの4枚は折り返す。
  subgrid が使えないブラウザでは、前の行の4列になる。
*/
.quiz-wrong-list > li {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-columns: subgrid;
    row-gap: 0.25rem;
}

.quiz-wrong-choice > * {
    grid-column: 1;
}

.quiz-wrong-cards {
    display: contents;
}

.quiz-wrong-order .quiz-wrong-detail,
.quiz-wrong-spell .quiz-wrong-detail {
    grid-column: 1 / -1;
    text-align: left;
}

.quiz-wrong-value {
    display: block;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.quiz-wrong-condition {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.35;
}

/* 4列とも短いので、表の最小幅(横スクロールさせるためのもの)を外す。 */
.quiz-stats-table {
    min-width: 0;
}

.quiz-stats-table tbody th {
    font-weight: 400;
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-top: 1px solid var(--color-border);
}