:root {
    /* === Brand tokens === */
    --color-primary: #9ec8ff;
    /* 淡いブルー */
    --color-primary-hover: #8abaff;
    /* ホバー用：やや濃い */
    --color-text-on-primary: #0b1d33;
    /* 読みやすい濃色 */

    --color-secondary: #f2a5a5;
    /* 解除/削除：控えめレッド */
    --color-secondary-hover: #eb8e8e;
    --color-text-on-secondary: #2b0a0a;

    /* === Grayscale === */
    --gray-50: #f5f5f5;
    --gray-200: #e0e0e0;
    --gray-300: #d0d0d0;

    --gray-600: #9c9c9c;
    --gray-700: #b0b0b0;
    /* プライマリボタン基調 */
    --text-main: #222;

    /* === Table / rows === */
    --row-sv: #E0F7FA;
    --row-home: #E8F5E9;
    --row-both: #F5F5F5;
    --table-header-bg: #dcdcdc;
    /* 最終値を統合 */
    --table-header-sorted-bg: #c7c7c7;

    /* === Buttons (generic base) === */
    --btn-primary-bg: var(--gray-700);
    --btn-primary-bd: var(--gray-700);
    --btn-primary-bg-hover: var(--gray-600);
    --btn-font-size: 12px;


    /* === Flash === */
    --flash-success-bg: #e6ffed;
    --flash-success-fg: #2d7a2d;
    --flash-success-bd: #9ae6b4;
    --flash-error-bg: #ffe6e6;
    --flash-error-fg: #b22222;
    --flash-error-bd: #f5a9a9;
    --flash-info-bg: #e6f0ff;
    --flash-info-fg: #2255a2;
    --flash-info-bd: #a9c4f5;

    /* === Toast === */
    --toast-success: #81c784;
    /* legacy solid color */
    --toast-info: #455a64;
    --toast-success-bg: rgba(103, 194, 58, 0.18);
    /* translucent */
    --toast-error-bg: rgba(245, 108, 108, 0.16);
    --toast-text: #0f172a;

    /* === Layout === */
    --site-header-height: 60px;
    /* 固定ヘッダ高（メディアクエリで調整） */
}

/* レイアウト */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.topNav {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: #f5f5f5;
}

.container {
    padding: 16px;
}

/* ヘッダー */
.site-header {
    margin-bottom: 12px;
}

.site-nav {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-nav .left a,
.site-nav .right a {
    text-decoration: none;
}

.site-nav .right .user-name {
    margin-right: 10px;
    font-weight: 600;
}

.site-nav .right .linklike {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.site-nav .right .linklike:hover {
    opacity: 0.8;
}

/* タブ */

/* Tabs container */
.tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 0 0 4px 0;
    border-bottom: 1px solid #ddd;
}

/* Generic tab button/link (要素型は問わない：a, button, div 等) */
.tabs [data-tab],
.tabs .tab-btn,
.tabs [role="tab"] {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #f5f5f5;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    user-select: none;
}

/* Hover/Focus */
.tabs [data-tab]:hover,
.tabs .tab-btn:hover,
.tabs [role="tab"]:hover,
.tabs [data-tab]:focus,
.tabs .tab-btn:focus,
.tabs [role="tab"]:focus {
    outline: none;
    background: #eeeeee;
}

/* Active state（class でも ARIA でも反応） */
.tabs [data-tab].active,
.tabs .tab-btn.active,
.tabs [role="tab"][aria-selected="true"] {
    background: #ffffff;
    font-weight: 600;
    border-color: #999;
    box-shadow: 0 -2px 0 #333 inset;
}

/* Panels – JS 制御が基本だが既定も用意 */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Dex tabs：CSP対応（インライン禁止） */

/* Dex tabs：アクティブ強調 */
#dexTabs a[role="tab"].tab-active {
    font-weight: 700;
}

/* Dex tabs：間隔 */
.tabs--dex {
    margin-bottom: 12px;
}

.tab-gap {
    margin-left: 12px;
}

/* CSP対応：インライン禁止の置き換え */
.jsRegForm {
    display: inline;
}

.jsRegForm.ml-6 {
    margin-left: 6px;
}

/* 表（ポケモン一覧） */
.pkTable {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.pkTable th,
.pkTable td {
    border: 1px solid #ddd;
    padding: 2px 8px;
    font-size: 13px;
}

.pkTable th {
    text-align: left;
}

/* ボタン */
/* デフォルト（primary） */
button {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--btn-font-size);
    color: #333;
}

/* 非活性 */
button:disabled,
button[disabled] {
    background: #f0f0f0 !important;
    border-color: #ccc !important;
    color: #aaa !important;
    cursor: not-allowed !important;
    opacity: 1;
}

/* flash message */
.flash {
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 6px;
    font-size: 14px;
}


/*
 * Toast position (仕様準拠): 画面右上・非スタック・最新のみ表示
 * - 右上固定: container を右上寄せ（例: top: 12px; right: 12px）
 * - 中央寄せは仕様から撤回（2025-09-03 更新）
 */
.toast-area {
    position: fixed;
    top: calc(var(--site-header-height) + 8px);
    right: 12px;
    z-index: 9999;
}

.toast {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 13px;
    /* デフォルトで見える状態に戻す。フェードは hide クラスで実施 */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Auto-hide timing: fade out after ~3.5s */
.toast.hide {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 固定ヘッダー + 薄い影 */
.pkTable-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* ヘッダー固定時に内容より上 */
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* ===== Polishing: headings / filter bar / hover & focus ===== */

/* Section headings (h2): tighten spacing slightly for table sections */
h2 {
    font-size: 18px;
    margin: 16px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Filter bar for Box type filter */
.pkFilterBar {
    margin: 8px 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.pkFilterBar label {
    font-size: 14px;
}

.pkFilterBar select {
    font-size: 14px;
    padding: 2px 6px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: #fff;
}

.pkFilterBar .btn--xs {
    /* keep compact; align to select height */
    line-height: 1.3;
}

/* Sticky header should paint background to avoid bleed when scrolling */
.pkTable-sticky thead th {
    background: var(--table-header-bg);
}

/* Row hover to improve readability (subtle) */

/* Better focus ring for keyboard users */
.pkTable a:focus,
.pkTable button:focus,
.pkFilterBar select:focus,
.pkFilterBar .btn--xs:focus {
    outline: 2px solid #6aa7ff;
    outline-offset: 2px;
}

/* Disabled buttons inside tables appear consistent */
.pkTable button[disabled] {
    opacity: 0.7;
}

/* 表内ボタンを小さく */
.pkTable button {
    padding: 2px 6px;
    font-size: inherit;
    line-height: 1.2;
}

/* 追加の極小ボタンサイズ（表以外でも使用可） */
button.btn--xs,
.pkTable button.btn--xs {
    padding: 2px 6px;
    font-size: inherit;
    line-height: 1.2;
}


/* variables consolidated in the top-level :root */

/* ヘッダー／ナビの調整 */
.site-header {
    background: var(--gray-200);
    border-bottom: 1px solid var(--gray-300);
}

.site-nav .left a,
.site-nav .right a,
.site-nav .right .linklike {
    color: var(--text-main);
}

/* Flash：変数で上書き */
.flash.success {
    background-color: var(--flash-success-bg);
    color: var(--flash-success-fg);
    border-color: var(--flash-success-bd);
}

.flash.error {
    background-color: var(--flash-error-bg);
    color: var(--flash-error-fg);
    border-color: var(--flash-error-bd);
}

.flash.info {
    background-color: var(--flash-info-bg);
    color: var(--flash-info-fg);
    border-color: var(--flash-info-bd);
}

/* テーブルヘッダ：変数使用 */
.pkTable th {
    background: var(--table-header-bg);
}

.pkTable thead th.sorted {
    background: var(--table-header-sorted-bg);
}

/* ソート中強調（`.is-sorted` と ARIA 属性の両対応） */
.pkTable thead th.is-sorted,
.pkTable thead th[aria-sort="ascending"],
.pkTable thead th[aria-sort="descending"] {
    background: var(--table-header-sorted-bg);
    font-weight: 600;
}

/* 行背景：変数使用 */
.rowSv {
    background: var(--row-sv);
}

.rowHome {
    background: var(--row-home);
}

.rowBoth {
    background: var(--row-both);
}

/* ボタン：変数使用（非破壊） */
button {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bd);
}

button:hover {
    background: var(--btn-primary-bg-hover);
}


/* トースト：変数使用 */

.toast.info {
    background: var(--toast-info);
}

/* パーティ&ボックス テーブル：列幅統一 */
#partyTable .pkTable th:nth-child(1),
#partyTable .pkTable td:nth-child(1),
#boxTable .pkTable th:nth-child(1),
#boxTable .pkTable td:nth-child(1) {
    /* 地方図鑑 No */
    width: 10%;
    min-width: 100px;
}

#partyTable .pkTable th:nth-child(2),
#partyTable .pkTable td:nth-child(2),
#boxTable .pkTable th:nth-child(2),
#boxTable .pkTable td:nth-child(2) {
    /* 名称 */
    width: 15%;
    min-width: 120px;
}

#partyTable .pkTable th:nth-child(3),
#partyTable .pkTable td:nth-child(3),
#boxTable .pkTable th:nth-child(3),
#boxTable .pkTable td:nth-child(3) {
    /* タイプ */
    width: 10%;
    min-width: 80px;
}

#partyTable .pkTable th:nth-child(4),
#partyTable .pkTable td:nth-child(4),
#boxTable .pkTable th:nth-child(4),
#boxTable .pkTable td:nth-child(4) {
    /* 種族値 (HP/攻/防/特攻/特防/速) */
    width: 18%;
    min-width: 150px;
}

#partyTable .pkTable th:nth-child(5),
#partyTable .pkTable td:nth-child(5),
#boxTable .pkTable th:nth-child(5),
#boxTable .pkTable td:nth-child(5) {
    /* 合計 */
    width: 8%;
    min-width: 60px;
    text-align: center;
}

#partyTable .pkTable th:nth-child(6),
#partyTable .pkTable td:nth-child(6),
#boxTable .pkTable th:nth-child(6),
#boxTable .pkTable td:nth-child(6) {
    /* 進化先（条件） */
    width: 22%;
    min-width: 180px;
}

#partyTable .pkTable th:nth-child(7),
#partyTable .pkTable td:nth-child(7),
#boxTable .pkTable th:nth-child(7),
#boxTable .pkTable td:nth-child(7) {
    /* 操作 */
    width: 17%;
    min-width: 140px;
    white-space: normal;
}

/* 二重送信防止用の無効化クラス（JSが付与） */
.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* === UI polish add-ons: badges & sorted column clarity === */

/* Compact count badges for headings (e.g., パーティー / ボックス件数) */
.pkBadge {
    display: inline-block;
    padding: 0 6px;
    min-width: 22px;
    line-height: 1.6;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    background: #eef2ff;
    /* soft indigo */
    border: 1px solid #c7d2fe;
    /* matching border */
    color: #1f2937;
    /* near-black for readability */
}

/* Sorted column cells: subtle background to guide the eye */
.pkTable td.is-sorted {
    background: #fafcff;
    /* very light blue */
}

/* Sort caret spacing & readability */
.pkTable .sort-caret {
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.8;
}

/* === Fixed global header (navigation) === */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Ensure header paints over content */
    background: var(--gray-200);
    border-bottom: 1px solid var(--gray-300);
}

/* Adjust header position when environment indicator is present */
.env-indicator+.toast-area~.fixed-header {
    top: 40px;
}

/* Prevent content from hiding behind the fixed header */
body {
    padding-top: var(--site-header-height);
}

/* Optional: reduce top padding on very small screens if header is shorter */
@media (max-width: 480px) {
    :root {
        --site-header-height: 54px;
    }
}

/* === UI improvement #1: Zebra rows & operation column spacing === */

/* Zebra rows: apply only when the row is not already status-highlighted and not hovered */
.pkTable tbody tr:nth-child(even):not(.rowSv):not(.rowHome):not(.rowBoth) {
    background: #fcfcfc;
    /* ultra-light gray */
}

/* Keep hover stronger than zebra (explicitly restating to ensure precedence) */

/* Operation column: compact layout (assumes last column is 操作) */
.pkTable td:last-child {
    white-space: nowrap;
    /* keep buttons on one line when possible */
}

.pkTable td:last-child button {
    margin-right: 4px;
    /* tighter spacing between buttons */
}

.pkTable td:last-child button:last-child {
    margin-right: 0;
}

/* When using forms wrapping buttons, reduce default form margin (if any) */
.pkTable td:last-child form {
    display: inline;
    /* inline forms so buttons sit side-by-side */
    margin: 0;
    /* remove unintended gaps */
}

/* パーティのタイプカバレッジ：未カバータイプを薄色に */
.pkBadge.is-missing {
    opacity: 0.45;
}

/* Action cell: keep buttons on one line with subtle gaps */
.cell-actions {
    white-space: nowrap;
}

.cell-actions .btn {
    margin-inline: 2px;
}

/* ========== Buttons polish (2025-09-05) ========== */
/* 基本方針：
   - primary: 明るめブルー、hover/active/focus を強化
   - secondary: 解除用に赤系でコントラスト確保（目立ちすぎない淡色ベース）
   - disabled: 一律でカースル/透過/クリック無効化を統一
   - 既存 .btn の定義は変更しない（修飾クラスのみで調整）
*/

/* primary */
.btn--primary {
    background-color: var(--color-primary);
    border: 1px solid #60a5fa;
    /* 既存のborderは維持可 */
    color: var(--color-text-on-primary);
    transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

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

.btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35);
    /* lighter focus ring */
}

/* secondary */
.btn--secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-on-secondary);
    border: 1px solid #e57373;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

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

.btn--secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.15);
}

/* quiet: 非強調のリンク風ボタン（解除/削除などの低頻度操作に使用） */
.btn--quiet {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: #666;
    text-decoration: none;
    box-shadow: none;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease, text-decoration-color 120ms ease;
    font-size: inherit;
}

.btn--quiet:hover,
.btn--quiet:active {
    background: transparent;
    color: #333;
    text-decoration: underline;
}

.btn--quiet:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.15);
}

/* quiet + xs: さらに控えめな密度に（テーブル内） */
.btn--quiet.btn--xs {
    padding: 2px 6px;
    line-height: 1.2;
    font-size: inherit;
}

/* quiet disabled */
.btn--quiet:disabled,
.btn--quiet[disabled],
.btn--quiet.is-disabled {
    color: #aaa;
    border-color: transparent;
    text-decoration: none;
    cursor: not-allowed;
    filter: grayscale(10%);
    opacity: 0.55;
}

/* disabled（全ボタン共通） */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(10%);
}

/* xs ボタン: 固定高さを持たせず自然体の行高に */
.btn.btn--xs {
    line-height: inherit;
}

/* === Table header tuning (2025-09-05): subtle weight & background contrast === */
/* (final values are defined in top-level :root) */
/* Give non-sorted headers a modest weight; sorted stays bolder via existing rule */
.pkTable th {
    font-weight: 500;
    /* default ~Medium */
    letter-spacing: 0.01em;
    /* tiny spacing improves readability */
}

/* toast */
.toast.success {
    background: var(--toast-success-bg);
    color: var(--toast-text);
}

.toast.error {
    background: var(--toast-error-bg);
    color: var(--toast-text);
}

/* === Toast icons (2025-09-05): add type-specific symbols via CSS only === */
/* Add left padding to make room for the icon */
.toast {
    padding-left: 32px;
    position: relative;
}

/* Base icon placeholder */
.toast::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    color: currentColor;
    /* follow toast text color */
    opacity: 0.95;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

/* Type-specific glyphs (accessible: decorative only) */
.toast.success::before {
    content: "✔";
}

.toast.info::before {
    content: "ℹ";
}

.toast.error::before {
    content: "⚠";
}

.evoRow {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.evoRow .evoName {
    margin-right: 2px;
    /* small space before condition text */
}

.evoRow .evoCond {
    margin-left: 2px;
    white-space: nowrap;
}

.miniIconWrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.miniIconButton {
    display: inline-flex;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.miniIconButton:focus-visible {
    outline: 2px solid var(--focus-outline, #1f6feb);
    outline-offset: 2px;
}

.miniIconButton:hover .miniIconWrap {
    transform: scale(1.02);
}

.miniIcon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.pkNameWrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pkNameText {
    display: inline-flex;
    align-items: center;
}

.evo-badge {
    font-size: 12px;
    line-height: 1;
    margin-left: 6px;
    opacity: 0.9;
    vertical-align: middle;
}

.evo-badge.is-registered {
    color: var(--toast-success);
}


.evo-badge.is-unregistered {
    color: #888;
}

/* === Evolution UI (registered target muted) ============================= */
/* When an evolution target is already registered, de-emphasize the row
   and show a quiet action button (template provides .evoRow--muted). */
.evoRow--muted {
    opacity: 0.95;
    /* keep readable but slightly subdued as a group */
}

.evoRow--muted .evoName {
    opacity: 0.65;
    /* text lighter */
    font-weight: normal;
    /* remove bold emphasis */
}

/* Ensure quiet buttons inside muted rows keep a visible border and subdued text */
.pkTable .evoRow--muted .btn--quiet {
    border-color: var(--gray-300);
    color: #666;
}

.pkTable .evoRow--muted .btn--quiet:hover,
.pkTable .evoRow--muted .btn--quiet:active {
    color: #333;
    text-decoration: underline;
}

/* === Evolution UI (conditions match name styling; unregistered emphasized) === */
/* Registered evolution target: de-emphasize the whole row text (name + condition) */
.evoRow--muted {
    color: #666;
    /* dim both name and condition equally */
    font-weight: normal;
}

/* Keep badge readable but subdued in muted rows */
.evoRow--muted .evo-badge {
    opacity: 0.7;
}

/* Emphasize when the evolution target is NOT registered
   (relies on presence of .evo-badge.is-unregistered in the row) */
.evoRow:has(.evo-badge.is-unregistered) {
    color: #111;
    /* stronger text color for name + condition */
    font-weight: 600;
    /* slightly bolder overall */
}

/* Name can be a touch bolder for scanability when unregistered */
.evoRow:has(.evo-badge.is-unregistered) .evoName {
    font-weight: 700;
}

/* Keep action buttons clearly actionable when unregistered */
.evoRow:has(.evo-badge.is-unregistered) .btn--primary {
    border-color: #3b82f6;
    /* slightly stronger border */
}

/* === Party coverage (opponent-defense view) tweaks === */
/* Coverage row container (HTML currently has inline style; class kept for maintainability) */
/* Coverage row container (HTML currently has inline style; class kept for maintainability) */
.pkCoverage__row {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    align-items: start;
}

/* Narrow screens: keep badges readable with 2 columns minimum */
@media (max-width: 520px) {
    .pkCoverage__row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
    }
}

/* Wide screens: allow slightly wider cells for fewer wraps */
@media (min-width: 1024px) {
    .pkCoverage__row {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* Badge layout: keep icon and text aligned */
.pkCoverage__row .pkBadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 10.5px;
    padding: 0 3px;
    line-height: 1.2;
}

/* === Overrides to ensure .btn--quiet sizing applies inside tables (2025-09-10) === */
/* Inside tables, .pkTable button was overriding font-size; raise specificity */
.pkTable .btn--quiet {
    font-size: inherit;
}

/* Ensure quiet xs keeps compact line-height even after .btn.btn--xs sets 20px */
.btn--quiet.btn--xs,
.pkTable .btn--quiet.btn--xs {
    padding: 2px 6px;
    line-height: 1.2;
}

/* ============================================
   Mobile layout adjustments (2025-09-10)
   - Improve usability on small screens
   - Non-destructive (no DOM changes required)
   ============================================ */

/* Medium-small screens: tighten paddings and allow tab/filters to wrap */
@media (max-width: 640px) {
    .container {
        padding: 10px;
    }

    .site-nav {
        padding: 6px 8px;
    }

    .site-nav .left a,
    .site-nav .right a {
        font-size: 13px;
    }

    /* Tabs: allow horizontal scrolling when labels overflow */
    .tabs {
        gap: 6px;
        padding-bottom: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabs [role="tab"],
    .tabs [data-tab],
    .tabs .tab-btn {
        padding: 6px 10px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Filter bar: stack neatly */
    .pkFilterBar {
        gap: 6px;
        padding: 6px;
    }

    .pkFilterBar label {
        font-size: 13px;
    }

    .pkFilterBar select {
        font-size: 13px;
    }
}

/* Small phones/tablet portrait: optimize header/label wrapping */
@media (max-width: 600px) {

    /* Allow header labels and cell text to wrap early without overflow */
    .pkTable th,
    .pkTable td {
        white-space: normal;
        /* permit wraps */
        word-break: keep-all;
        /* keep Japanese words intact when possible */
    }

    /* Slightly compact table text and paddings compared to desktop */
    .pkTable th,
    .pkTable td {
        font-size: 12.5px;
        padding: 5px 6px;
        line-height: 1.35;
    }

    /* Keep action-cell buttons compact and avoid overflow */
    .pkTable td:last-child {
        white-space: normal;
        /* allow wrapping when narrow */
    }

    .pkTable td:last-child form {
        display: inline-block;
        margin: 1px 2px;
    }
}

/* Phones: compact table, make it horizontally scrollable without breaking layout */
@media (max-width: 480px) {
    :root {
        --site-header-height: 52px;
    }

    .container {
        padding: 8px;
    }

    h2 {
        font-size: 16px;
        margin: 12px 0 6px;
    }

    /* Tabs a bit smaller */
    .tabs [role="tab"],
    .tabs [data-tab],
    .tabs .tab-btn {
        padding: 6px 8px;
        font-size: 12.5px;
    }

    /* Filter bar: full-width controls with clear affordance */
    .pkFilterBar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .pkFilterBar label {
        font-size: 12.5px;
    }

    .pkFilterBar select {
        width: 100%;
        padding: 4px 6px;
    }

    .pkFilterBar .btn--xs {
        align-self: flex-end;
    }

    /* Mobile table without horizontal scroll: fixed layout + wrapping */
    .pkTable {
        display: table;
        /* back to normal table */
        width: 100%;
        table-layout: fixed;
        /* distribute widths */
        overflow-x: visible;
        /* no horizontal scroll */
    }

    .pkTable th,
    .pkTable td {
        white-space: normal;
        /* allow wrapping */
        word-break: break-word;
        /* wrap long Japanese/alpha strings */
    }

    /* Compact numeric columns (No/合計) */
    .pkTable th:nth-child(1),
    .pkTable td:nth-child(1),
    .pkTable th:nth-child(2),
    .pkTable td:nth-child(2),
    .pkTable th:nth-last-child(3),
    .pkTable td:nth-last-child(3) {
        /* heuristics: works for both Paldea/National layouts where 合計 is near the end */
        width: 12%;
        text-align: center;
    }

    /* 名称はやや広め */
    .pkTable th:nth-child(3),
    .pkTable td:nth-child(3) {
        width: 22%;
    }

    /* タイプ・種族値は中くらい */
    .pkTable th:nth-child(4),
    .pkTable td:nth-child(4) {
        width: 16%;
    }

    .pkTable th:nth-child(5),
    .pkTable td:nth-child(5) {
        width: 18%;
    }

    /* 進化先（条件）は改行許容 */
    .pkTable th:nth-last-child(2),
    .pkTable td:nth-last-child(2) {
        width: 20%;
    }

    /* 操作列はボタンが詰まりすぎない程度に */
    .pkTable th:last-child,
    .pkTable td:last-child {
        width: 22%;
        white-space: normal;
        /* allow wrap in action cell */
    }

    /* Slightly tighter table text on phones */
    .pkTable th,
    .pkTable td {
        padding: 4px 6px;
        font-size: 12px;
        line-height: 1.35;
    }

    /* Evolution badges: keep smaller to reduce wrapping */
    .evo-badge {
        font-size: 11px;
    }

    /* Coverage badges: slightly smaller */
    .pkCoverage__row .pkBadge {
        font-size: 10px;
        line-height: 1.15;
    }

    /* Compact cell sizing */
    .pkTable th,
    .pkTable td {
        padding: 4px 6px;
        font-size: 12px;
    }

    .pkTable td {
        line-height: 1.35;
    }

    /* Buttons inside table: extra small to save space */
    .pkTable button {
        padding: 2px 5px;
        font-size: inherit;
    }

    .pkTable .btn--xs {
        padding: 1px 5px;
        font-size: inherit;
        line-height: 1.1;
    }

    .btn--quiet.btn--xs,
    .pkTable .btn--quiet.btn--xs {
        padding: 1px 5px;
        line-height: 1.1;
    }

    /* Prevent button text from spilling out on small screens */
    .pkTable button,
    .pkTable .btn,
    .pkTable .btn--primary,
    .pkTable .btn--secondary,
    .pkTable .btn--quiet {
        display: inline-block;
        /* allow wrapping */
        max-width: 100%;
        /* constrain within cell */
        white-space: normal;
        /* enable wraps */
        overflow-wrap: anywhere;
        /* break long words/continuous Japanese text */
        word-break: break-word;
        /* fallback */
        box-sizing: border-box;
        /* include padding within width */
        line-height: 1.2;
        /* compact but readable when wrapping */
    }

    /* Action cell: keep each button on its own wrapping context */
    .pkTable td:last-child form {
        display: inline-block;
        /* already set above; reaffirm for consistency */
        vertical-align: top;
    }

    /* Action cell: allow wrap if needed on very narrow screens */
    .pkTable td:last-child {
        white-space: normal;
    }

    .pkTable td:last-child form {
        display: inline-block;
        margin: 1px 2px;
    }

    /* Evolution badges: smaller to avoid wrapping too often */
    .evo-badge {
        font-size: 11px;
    }

    /* Coverage badges: slightly smaller */
    .pkCoverage__row .pkBadge {
        font-size: 10px;
        line-height: 1.15;
    }

    /*
       Hide detailed base stats on phones (show only "合計")
       - Paldea tab: the "種族値" column is the 5th
       - National tab: the "種族値" column is the 4th
    */
    #tabPaldea .pkTable th:nth-child(5),
    #tabPaldea .pkTable td:nth-child(5),
    #tabNational .pkTable th:nth-child(4),
    #tabNational .pkTable td:nth-child(4) {
        display: none;
    }

    /* Paldea tab on phones: hide the "全国図鑑No" (2nd column) */
    #tabPaldea .pkTable th:nth-child(2),
    #tabPaldea .pkTable td:nth-child(2) {
        display: none;
    }

    /* Party / Box tables: hide base stats on phones
        - If templates add a semantic class `.col-base-stats` to the stats column, this will be robust.
        - As a heuristic fallback, also hide the 5th column when tables have no class hooks and match the common layout.
    */
    /* Preferred: semantic hook */
    .pkTable th.col-base-stats,
    .pkTable td.col-base-stats {
        display: none;
    }




    /* Heuristic fallback for Party/Box pages: stats column is typically the 5th */
    #partyTable th:nth-child(4),
    #partyTable td:nth-child(4),
    #boxTable th:nth-child(4),
    #boxTable td:nth-child(4) {
        display: none;
    }
}

body.icon-preview-open {
    overflow: hidden;
}

.icon-preview[hidden] {
    display: none !important;
}

.icon-preview {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
}

.icon-preview__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.icon-preview__backdrop:hover,
.icon-preview__backdrop:focus-visible {
    background: transparent;
}

.icon-preview__dialog {
    position: relative;
    z-index: 2001;
    background: #0f172a;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    max-width: min(90vw, 640px);
    max-height: min(90vh, 640px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.icon-preview__image {
    max-width: min(70vw, 512px);
    max-height: min(60vh, 512px);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.6);
    image-rendering: crisp-edges;
}

.icon-preview__label {
    color: #f8fafc;
    font-size: 0.95rem;
}

.icon-preview__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    border: none;
    background: rgba(15, 23, 42, 0.6);
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.icon-preview__close:hover {
    background: rgba(15, 23, 42, 0.9);
}

.icon-preview__close:focus-visible {
    outline: 2px solid var(--focus-outline, #1f6feb);
    outline-offset: 2px;
}

/* === Weakness recommendation accordion === */
.pkRecommend {
    border: 1px solid var(--gray-300);
    background: #f8fbff;
    border-radius: 8px;
    margin: 12px 0 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pkRecommend__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
}

.pkRecommend__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
}

.pkRecommend__toggle:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.pkRecommend__toggleIcon {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.pkRecommend__summary {
    flex: 1;
    min-width: 160px;
    font-size: 13px;
    color: var(--gray-600);
}

.pkRecommend__summaryText {
    display: inline-block;
    padding: 4px 6px;
    background: #f0f0f8;
    border-radius: 4px;
}

.pkRecommend__clearForm {
    margin-left: auto;
}

.pkRecommend__panel {
    border-top: 1px solid var(--gray-300);
    padding: 12px 14px 16px;
    background: #ffffff;
}

.pkRecommend__form {
    margin-bottom: 14px;
}

.pkRecommend__fieldset {
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 10px 12px 12px;
}

.pkRecommend__fieldset legend {
    font-size: 13px;
    font-weight: 600;
    padding: 0 6px;
}

.pkRecommend__types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px 12px;
    margin-top: 10px;
}

.pkRecommend__type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.pkRecommend__actions {
    margin-top: 12px;
}

.pkRecommend__results {
    display: grid;
    gap: 12px;
}

.pkRecommend__coverageTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fbfdff;
}

.pkRecommend__coverageTable th,
.pkRecommend__coverageTable td {
    border: 1px solid var(--gray-300);
    padding: 6px 8px;
    text-align: center;
}


.pkRecommend__coverageCell.is-ok {
    background: #f1fbf3;
    font-weight: 600;
    color: #1b7a1b;
}

.pkRecommend__coverageCell.is-missing {
    background: #fff5f5;
    font-weight: 600;
    color: #a33a3a;
}

.pkRecommend__missing {
    margin: 0;
    font-size: 13px;
    color: #a35300;
}

.pkRecommend__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pkRecommend__item {
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 10px 12px;
    background: #ffffff;
    display: grid;
    gap: 6px;
}

.pkRecommend__item.is-unavailable {
    border-color: #f0a0a0;
    background: #fff5f5;
}


.pkRecommend__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.pkRecommend__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.pkRecommend__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.pkRecommend__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}


.pkRecommend__summaryBox {
    display: grid;
    gap: 4px;
}

.pkRecommend__metaRow {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-600);
}

.pkRecommend__coverageRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.pkRecommend__coverageTitle {
    font-weight: 600;
    min-width: 120px;
}

.pkRecommend__badgeRow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}


.pkRecommend__itemHead {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
    font-weight: 600;
}

.pkRecommend__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--gray-600);
}

.pkRecommend__covers {
    font-size: 12px;
}

.pkRecommend__warning {
    margin: 0;
    font-size: 12px;
    color: #a33a3a;
    font-weight: 600;
}

.pkRecommend__empty {
    margin: 0;
    font-size: 13px;
    color: var(--gray-600);
}

@media (max-width: 680px) {
    .pkRecommend__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pkRecommend__clearForm {
        margin-left: 0;
    }
}

.pkRecommend__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.pkRecommend__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Environment Indicator (Local Development Only) */
.env-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #ffffff;
    text-align: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-family: monospace;
}

.env-indicator__text {
    display: inline-block;
    text-transform: uppercase;
}