/* PvP inline spinner */
    @keyframes pvp-spin { to { transform: rotate(360deg); } }
    .pgo-pvp-accordion summary::-webkit-details-marker { display: none; }
    .pvp-inline-iv-a::-webkit-inner-spin-button, .pvp-inline-iv-a::-webkit-outer-spin-button,
    .pvp-inline-iv-d::-webkit-inner-spin-button, .pvp-inline-iv-d::-webkit-outer-spin-button,
    .pvp-inline-iv-s::-webkit-inner-spin-button, .pvp-inline-iv-s::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .pvp-inline-gauge-val::-webkit-inner-spin-button, .pvp-inline-gauge-val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

    /* === 図鑑切り替えナビゲーション === */
    .pgo-dex-nav {
        text-align: center;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .pgo-dex-nav::-webkit-scrollbar {
        height: 6px;
    }

    .pgo-dex-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .pgo-dex-nav::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 3px;
    }

    .pgo-dex-nav-btn {
        display: inline-block;
        flex-shrink: 0;
        padding: 5px 14px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s;
        border: 1.5px solid #cbd5e0;
        background: transparent;
        color: #4a5568;
        line-height: 1.4;
        cursor: pointer;
    }

    .pgo-dex-nav-btn:hover {
        background: #ebf8ff;
        border-color: #4299e1;
        color: #2b6cb0;
    }

    .pgo-dex-nav-btn.active {
        background: #4299e1;
        color: #fff;
        border-color: #4299e1;
        pointer-events: none;
        opacity: 0.85;
    }

    .pgo-dex-nav-btn.page-link {
        border-color: #48bb78;
        color: #276749;
        background: #f0fff4;
    }

    .pgo-dex-nav-btn.page-link:hover {
        background: #c6f6d5;
        border-color: #38a169;
        color: #22543d;
    }

    :root {
        --type-1: #9fa19f;
        --type-2: #ff7f0f;
        --type-3: #4592c4;
        --type-4: #4caf50;
        --type-5: #f4d23c;
        --type-6: #74cec0;
        --type-7: #ce4069;
        --type-8: #ab6ac8;
        --type-9: #d97746;
        --type-10: #8fa8dd;
        --type-11: #f97176;
        --type-12: #91c12f;
        --type-13: #c5b78c;
        --type-14: #5269ac;
        --type-15: #0a6dc4;
        --type-16: #5b5466;
        --type-17: #5a8ea2;
        --type-18: #ec8fe6;
        --pgo-primary: #3b82f6;
        --pgo-danger: #ef4444;
        --pgo-bg: #f8fafc;
    }

    #pgo-app-root {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        font-family: "Helvetica Neue", Arial, sans-serif;
        color: #333;
        box-sizing: border-box;
    }

    .pgo-app-controls-wrapper {
        background: #fff;
        padding: 15px 20px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        margin-bottom: 25px;
        position: sticky;
        top: 10px;
        z-index: 50;
    }

    /* === Header & Button Styles (Updated) === */
    .pgo-app-header-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Search Box */
    .pgo-search-box {
        position: relative;
        flex: 1;
        min-width: 240px;
        max-width: 400px;
    }

    .pgo-search-box .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        pointer-events: none;
    }

    #pgo-search-input {
        width: 100%;
        padding: 10px 35px 10px 38px;
        border: 1px solid #ddd;
        border-radius: 25px;
        font-size: 16px;
        outline: none;
        transition: 0.2s;
        box-sizing: border-box;
        height: 44px;
        background: #f9f9f9;
    }

    #pgo-search-input:focus {
        border-color: var(--pgo-primary);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .search-clear-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: #eee;
        border: none;
        color: #777;
        cursor: pointer;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 16px;
        transition: 0.2s;
    }

    .search-clear-btn:hover {
        background: #ddd;
        color: #333;
    }

    /* ★ Unified Pill Button Style */
    .pgo-btn-pill {
        background: #fff;
        border: 1px solid #ddd;
        height: 44px;
        /* 検索バーと高さを合わせる */
        padding: 0 18px;
        border-radius: 25px;
        /* 丸み */
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: #555;
        font-size: 14px;
        font-weight: 700;
        transition: all 0.2s ease;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
        box-sizing: border-box;
    }

    .pgo-btn-pill:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        background: #fdfdfd;
        border-color: #ccc;
    }

    .pgo-btn-pill .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Specific Button Colors */
    /* Favorites */
    #pgo-btn-fav.is-active {
        background: #fff8e1;
        border-color: #ffc107;
        color: #d48806;
    }

    #pgo-btn-fav.is-active .dashicons {
        color: #ffb300;
    }

    /* Filter */
    #pgo-panel-toggle.is-open {
        background: #f0f7ff;
        border-color: #3b82f6;
        color: #0056b3;
    }

    .toggle-arrow {
        font-size: 10px;
        margin-left: 2px;
        transition: transform 0.2s;
    }

    #pgo-panel-toggle.is-open .toggle-arrow {
        transform: rotate(180deg);
    }

    /* Reset */
    .pgo-btn-pill.btn-reset {
        color: #d32f2f;
        border-color: #ffcdd2;
        background: #fff;
    }

    .pgo-btn-pill.btn-reset:hover {
        background: #ffebee;
        border-color: #ef9a9a;
    }

    /* Battle Link */
    .pgo-btn-pill.btn-battle {
        color: #fff;
        background: #3b82f6;
        border-color: #3b82f6;
    }

    .pgo-btn-pill.btn-battle:hover {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

    .toggle-arrow {
        font-size: 10px;
        margin-left: 5px;
        transition: transform 0.2s;
    }

    .pgo-btn-toggle.is-open .toggle-arrow {
        transform: rotate(180deg);
    }

    .pgo-advanced-panel {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #eee;
        animation: pgoSlideDown 0.3s ease-out;
    }

    .pgo-divider {
        border: 0;
        border-top: 1px solid #eee;
        margin: 15px 0;
    }

    .pgo-filter-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .pgo-filter-label {
        font-size: 12px;
        font-weight: 700;
        color: #888;
        width: 60px;
        padding-top: 6px;
        text-transform: uppercase;
    }

    .pgo-btn-group,
    .pgo-gen-group,
    .pgo-tag-group,
    .pgo-type-group {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .pgo-sort-btn,
    .pgo-state-btn {
        border: 1px solid #eee;
        background: #fff;
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
        color: #555;
        transition: 0.1s;
        user-select: none;
    }

    .pgo-sort-btn:hover,
    .pgo-state-btn:hover {
        background: #f1f5f9;
    }

    .pgo-sort-btn.is-active {
        background: #0f172a;
        color: #fff;
        border-color: #0f172a;
    }

    .pgo-state-btn.is-active {
        background: var(--pgo-primary);
        color: #fff;
        border-color: var(--pgo-primary);
    }

    .pgo-state-btn.is-exclude {
        background: var(--pgo-danger);
        color: #fff;
        border-color: var(--pgo-danger);
        text-decoration: line-through;
    }

    /* META League Buttons */
    .pgo-meta-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pgo-meta-btn {
        padding: 6px 14px;
        border: 2px solid #cbd5e1;
        border-radius: 6px;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        color: #555;
        transition: 0.15s;
        user-select: none;
    }

    .pgo-meta-btn:hover {
        background: #f1f5f9;
    }

    /* METAリーグ別カラー */
    .pgo-meta-btn[data-league="super"] { color: #1565c0; border-color: #90caf9; }
    .pgo-meta-btn[data-league="super"].is-active { background: #1565c0; color: #fff; border-color: #1565c0; box-shadow: 0 2px 8px rgba(21,101,192,.3); }
    .pgo-meta-btn[data-league="hyper"] { color: #f9a825; border-color: #fff176; }
    .pgo-meta-btn[data-league="hyper"].is-active { background: #f9a825; color: #fff; border-color: #f9a825; box-shadow: 0 2px 8px rgba(249,168,37,.3); }
    .pgo-meta-btn[data-league="master"] { color: #7b1fa2; border-color: #ce93d8; }
    .pgo-meta-btn[data-league="master"].is-active { background: #7b1fa2; color: #fff; border-color: #7b1fa2; box-shadow: 0 2px 8px rgba(123,31,162,.3); }

    .pgo-meta-btn.is-loading {
        opacity: 0.6;
        pointer-events: none;
    }

    /* Meta Ranking Sort Button */
    .pgo-sort-btn.sort-meta {
        background: linear-gradient(135deg, #f59e0b, #ef4444);
        color: #fff;
        border-color: #ef4444;
        display: none;
    }
    .pgo-sort-btn.sort-meta.is-active {
        background: linear-gradient(135deg, #f59e0b, #ef4444);
        color: #fff;
        border-color: #ef4444;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

    /* Size Sort Buttons */
    .pgo-sort-btn.pgo-sort-size { color: #0288d1; border-color: #4FC3F7; }
    .pgo-sort-btn.pgo-sort-size.is-active { background: #0288d1; color: #fff; border-color: #0288d1; box-shadow: 0 2px 8px rgba(2,136,209,.3); }

    /* Meta Rank Badge */
    .pgo-rank-badge {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 900;
        z-index: 3;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        line-height: 1;
    }
    .pgo-rank-badge.rank-gold {
        background: linear-gradient(135deg, #ffd700, #ffb300);
        color: #7a5800;
        border: 2px solid #e6a800;
    }
    .pgo-rank-badge.rank-silver {
        background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
        color: #555;
        border: 2px solid #aaa;
    }
    .pgo-rank-badge.rank-bronze {
        background: linear-gradient(135deg, #e8a065, #cd7f32);
        color: #5a3510;
        border: 2px solid #b8702e;
    }
    .pgo-rank-badge.rank-top10 {
        background: linear-gradient(135deg, #ffe0b2, #ffb74d);
        color: #7a4100;
        border: 2px solid #ff9800;
    }

    /* Card background tint for meta ranking */
    .pgo-card.meta-rank-1 {
        background: linear-gradient(135deg, #fffde7, #fff9c4);
        border-color: #ffd54f;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.25);
    }
    .pgo-card.meta-rank-2 {
        background: linear-gradient(135deg, #fafafa, #f0f0f0);
        border-color: #bdbdbd;
        box-shadow: 0 4px 12px rgba(180, 180, 180, 0.2);
    }
    .pgo-card.meta-rank-3 {
        background: linear-gradient(135deg, #fff3e0, #ffe0b2);
        border-color: #cd7f32;
        box-shadow: 0 4px 12px rgba(205, 127, 50, 0.2);
    }
    .pgo-card.meta-rank-top10 {
        background: linear-gradient(135deg, #fff8f0, #fff3e0);
        border-color: #ffcc80;
    }

    .pgo-type-btn {
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .pgo-type-btn img {
        width: 16px;
        height: 16px;
    }

    .pgo-filter-actions {
        text-align: right;
        margin-top: 10px;
    }

    .pgo-reset-btn {
        font-size: 12px;
        color: #888;
        background: none;
        border: none;
        text-decoration: underline;
        cursor: pointer;
    }

    .pgo-copy-btn {
        background: #4caf50;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: bold;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: 0.2s;
    }

    .pgo-copy-btn:hover {
        background: #43a047;
        transform: translateY(-1px);
    }

    .pgo-copy-area-close {
        position: absolute;
        top: 0;
        right: 0;
        background: #eee;
        border: none;
        color: #888;
        cursor: pointer;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        font-size: 18px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s;
    }
    .pgo-copy-area-close:hover {
        background: #ddd;
        color: #333;
    }

    .pgo-load-btn {
        background: #333;
        color: #fff;
        border: none;
        padding: 10px 30px;
        border-radius: 30px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.2s;
    }

    .pgo-load-btn:hover {
        background: #555;
    }

    .pgo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    .pgo-card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 10px;
        cursor: pointer;
        transition: 0.2s;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pgo-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        border-color: #a0cfff;
    }

    .pgo-card-left {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .pgo-modal-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        border: none;
        background: transparent;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .pgo-modal-close:hover,
    .pgo-modal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    /* New Modal Styles for TA/BS/MD */
    .pgo-ta-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10001;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .pgo-ta-modal-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    .pgo-ta-modal-card {
        background: #fff;
        width: 95vw;
        max-width: 1200px;
        height: 90vh;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }

    .pgo-ta-modal-overlay.open .pgo-ta-modal-card {
        transform: translateY(0);
    }

    .pgo-ta-modal-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        background: #f8f8f8;
        flex-shrink: 0;
    }

    .pgo-ta-modal-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pgo-ta-modal-title .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    .pgo-ta-close {
        background: none;
        border: none;
        font-size: 28px;
        color: #888;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .pgo-ta-close:hover {
        color: #333;
    }

    .pgo-ta-modal-body {
        flex: 1;
        padding: 0;
        overflow: hidden;
    }

    .pgo-iframe-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        /* 初期は非表示、JSで制御 */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        z-index: 10;
        color: #666;
        font-weight: bold;
        border-radius: 0 0 8px 8px;
    }

    .pgo-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #eee;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        animation: pgo-spin 1s linear infinite;
        margin-bottom: 10px;
    }

    @keyframes pgo-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .pgo-ta-modal-body iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0 0 8px 8px;
        display: block;
    }

    .pgo-card-img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        margin-bottom: 5px;
    }

    .pgo-card-no {
        font-size: 10px;
        color: #999;
        margin-bottom: 2px;
    }

    .pgo-card-name {
        font-weight: 700;
        font-size: 13px;
        line-height: 1.2;
        margin-bottom: 6px;
        color: #333;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pgo-card-types {
        display: flex;
        gap: 3px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .pgo-card-right {
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Wrap the stat rows in a grid so they align nicely */
    .pgo-card-stats {
        display: grid;
        grid-template-columns: max-content 1fr max-content;
        gap: 4px 8px;
        /* row gap, column gap */
        align-items: center;
        width: 100%;
    }

    .pgo-stat-row {
        display: contents;
        /* Allows children to participate in the parent's grid */
    }

    .pgo-stat-label {
        font-size: 10px;
        font-weight: 700;
        color: #888;
        white-space: nowrap;
        /* Prevent wrapping for long languages */
    }

    .pgo-stat-bar-bg-sm {
        height: 5px;
        background: #f0f0f0;
        border-radius: 3px;
        overflow: hidden;
        width: 100%;
    }

    .pgo-stat-bar-fill-sm {
        height: 100%;
        border-radius: 3px;
    }

    .pgo-stat-val {
        font-size: 10px;
        text-align: right;
        color: #555;
        white-space: nowrap;
    }

    .fill-atk {
        background: #ff5252;
    }

    .fill-def {
        background: #66bb6a;
    }

    .fill-hp {
        background: #42a5f5;
    }

    .pgo-card-star {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 18px;
        color: #e0e0e0;
        cursor: pointer;
        z-index: 2;
        transition: 0.2s;
    }

    .pgo-card-star:hover {
        transform: scale(1.2);
    }

    .pgo-card-star.is-active {
        color: #ffc107;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .pgo-type-pill-sm {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: inline-block;
    }

    .pgo-type-pill-sm img {
        width: 100%;
        height: 100%;
    }

    .pgo-type-badge {
        --pgo-bg: rgba(0, 0, 0, .05);
        --pgo-bd: rgba(0, 0, 0, .18);
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .2rem .5rem;
        border-radius: 99px;
        background: var(--pgo-bg);
        border: 1px solid var(--pgo-bd);
        font-size: 12px;
        font-weight: 700;
        color: #111;
    }

    .pgo-type-icon {
        width: 16px;
        height: 16px;
        display: block;
    }

    .pgo-type-badge {
        background: color-mix(in srgb, var(--type-color, #6b7280) 22%, #fff);
        border-color: color-mix(in srgb, var(--type-color, #6b7280) 55%, #0000);
    }

    .pgo-type-badge[data-typeid="1"],
    .type-1 {
        --type-color: var(--type-1);
    }

    .pgo-type-badge[data-typeid="2"],
    .type-2 {
        --type-color: var(--type-2);
    }

    .pgo-type-badge[data-typeid="3"],
    .type-3 {
        --type-color: var(--type-3);
    }

    .pgo-type-badge[data-typeid="4"],
    .type-4 {
        --type-color: var(--type-4);
    }

    .pgo-type-badge[data-typeid="5"],
    .type-5 {
        --type-color: var(--type-5);
    }

    .pgo-type-badge[data-typeid="6"],
    .type-6 {
        --type-color: var(--type-6);
    }

    .pgo-type-badge[data-typeid="7"],
    .type-7 {
        --type-color: var(--type-7);
    }

    .pgo-type-badge[data-typeid="8"],
    .type-8 {
        --type-color: var(--type-8);
    }

    .pgo-type-badge[data-typeid="9"],
    .type-9 {
        --type-color: var(--type-9);
    }

    .pgo-type-badge[data-typeid="10"],
    .type-10 {
        --type-color: var(--type-10);
    }

    .pgo-type-badge[data-typeid="11"],
    .type-11 {
        --type-color: var(--type-11);
    }

    .pgo-type-badge[data-typeid="12"],
    .type-12 {
        --type-color: var(--type-12);
    }

    .pgo-type-badge[data-typeid="13"],
    .type-13 {
        --type-color: var(--type-13);
    }

    .pgo-type-badge[data-typeid="14"],
    .type-14 {
        --type-color: var(--type-14);
    }

    .pgo-type-badge[data-typeid="15"],
    .type-15 {
        --type-color: var(--type-15);
    }

    .pgo-type-badge[data-typeid="16"],
    .type-16 {
        --type-color: var(--type-16);
    }

    .pgo-type-badge[data-typeid="17"],
    .type-17 {
        --type-color: var(--type-17);
    }

    .pgo-type-badge[data-typeid="18"],
    .type-18 {
        --type-color: var(--type-18);
    }

    .pgo-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(3px);
    }

    .pgo-modal-content {
        background: #fff;
        width: 90%;
        max-width: 850px;
        max-height: 90vh;
        border-radius: 12px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        animation: pgoFadeIn 0.2s ease-out;
    }

    .pgo-modal-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: #f0f0f0;
        border: none;
        font-size: 24px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 5;
        color: #555;
    }

    .pgo-modal-body {
        padding: 30px;
    }

    .pgo-detail-header {
        display: flex;
        gap: 30px;
        margin-bottom: 30px;
        align-items: flex-start;
    }

    .pgo-detail-img-wrap {
        width: 180px;
        text-align: center;
    }

    .pgo-detail-img {
        width: 100%;
        height: 180px;
        object-fit: contain;
    }

    .pgo-img-switcher {
        display: flex;
        gap: 5px;
        justify-content: center;
        margin-top: 10px;
    }

    .pgo-img-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid #ddd;
        background: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: 0.2s;
    }

    .pgo-img-btn:hover,
    .pgo-img-btn.is-active {
        border-color: #3b82f6;
        background: #f0f9ff;
    }

    .pgo-detail-info {
        flex: 1;
    }

    .pgo-detail-title {
        font-size: 28px;
        margin: 0 0 10px;
        font-weight: bold;
    }

    .pgo-stat-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
        font-size: 14px;
    }

    .pgo-stat-table th {
        width: 100px;
        color: #666;
        font-weight: normal;
        padding: 8px;
        border-bottom: 1px solid #eee;
        text-align: left;
    }

    .pgo-stat-table td {
        padding: 8px;
        border-bottom: 1px solid #eee;
    }

    .pgo-stat-bar-bg {
        background: #eee;
        height: 8px;
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
    }

    .pgo-stat-bar-fill {
        height: 100%;
        background: #4caf50;
    }

    /* ===== サイズセクション ===== */
    .pgo-size-section {
        background: #fafbfc;
        border: 1px solid #e8ecf0;
        border-radius: 10px;
        padding: 16px 18px;
        margin-top: 18px;
    }
    .pgo-size-section .pgo-section-title {
        margin-top: 0;
        font-size: 15px;
        color: #5a6a7a;
        border-bottom: 1px solid #e0e6ec;
        padding-bottom: 8px;
        margin-bottom: 14px;
    }
    .pgo-size-basic {
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-bottom: 16px;
    }
    .pgo-size-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .pgo-size-label {
        font-size: 11px;
        font-weight: 600;
        color: #8899aa;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .pgo-size-value {
        font-size: 22px;
        font-weight: 800;
        color: #2d3a4a;
    }
    .pgo-size-unit {
        font-size: 13px;
        font-weight: 600;
        color: #8899aa;
        margin-left: 2px;
    }
    .pgo-size-bounds {
        margin-top: 4px;
    }
    .pgo-size-bounds-labels {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        font-weight: 700;
        color: #7a8a9a;
        margin-bottom: 4px;
        padding: 0 2px;
    }
    .pgo-size-bar-container {
        display: flex;
        height: 22px;
        border-radius: 11px;
        overflow: hidden;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    }
    .pgo-size-bar-seg {
        transition: width 0.3s ease;
        min-width: 2px;
    }
    .pgo-size-bar-xxs {
        background: linear-gradient(135deg, #4FC3F7, #29B6F6);
    }
    .pgo-size-bar-xs {
        background: linear-gradient(135deg, #4DB6AC, #26A69A);
    }
    .pgo-size-bar-m {
        background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
    }
    .pgo-size-bar-xl {
        background: linear-gradient(135deg, #FFB74D, #FFA726);
    }
    .pgo-size-bar-xxl {
        background: linear-gradient(135deg, #E57373, #EF5350);
    }
    .pgo-size-bounds-vals {
        display: flex;
        justify-content: space-between;
        font-size: 9px;
        color: #99aabb;
        margin-top: 4px;
        padding: 0 1px;
    }
    .pgo-size-mega-note {
        margin-top: 10px;
        font-size: 11px;
        color: #7a5aa5;
        background: #f3eefa;
        padding: 6px 10px;
        border-radius: 6px;
        font-weight: 600;
    }

    .pgo-section-title {
        font-size: 18px;
        border-bottom: 2px solid #eee;
        padding-bottom: 5px;
        margin: 25px 0 15px;
        font-weight: bold;
        color: #444;
    }

    .pgo-weak-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .weak-label {
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
        color: #fff;
        margin-right: 5px;
        font-weight: bold;
        min-width: 60px;
        text-align: center;
    }

    .weak-label.x2 {
        background: #d32f2f;
    }

    .weak-label.x1 {
        background: #f57c00;
    }

    .pgdb-moves-box {
        display: block !important;
    }

    .pgdb-move-row {
        display: grid;
        grid-template-columns: 130px 1fr 100px 80px;
        gap: 15px;
        align-items: center;
        border-bottom: 1px dashed #e5e7eb;
        padding: 10px 0;
        font-size: 14px;
    }

    .pgdb-move-name {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pgdb-gauge {
        display: flex;
        gap: 4px;
        align-items: center;
        width: 100px;
        height: 8px;
    }

    .pgdb-gauge .seg {
        flex: 1;
        height: 100%;
        border-radius: 4px;
        background: #e5e7eb;
        box-shadow: inset 0 0 0 1px #d1d5db;
    }

    .pgdb-gauge .seg.is-on {
        background: var(--type-color);
        box-shadow: 0 0 4px var(--type-color);
    }

    .pgdb-badge-dps {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #0b1b2e;
        color: #fff;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 13px;
        min-width: 60px;
    }

    .pgdb-badge-dps.is-stab {
        background: #5e2a00;
    }

    .pgo-type-attacker-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background-color: #f0f7ff;
        color: #0056b3;
        border: 1px solid #cce5ff;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .pgo-type-attacker-link:hover {
        background-color: #0056b3;
        color: #ffffff;
        text-decoration: none;
    }

    .pgo-evo-box {
        background: #f9f9f9;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #eee;
        margin-bottom: 20px;
    }

    .pgo-evo-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
        font-size: 14px;
    }

    .pgo-evo-row:last-child {
        margin-bottom: 0;
    }

    .evo-label {
        background: #666;
        color: #fff;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 3px;
    }

    .pgo-related-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    .pgo-related-item {
        width: 90px;
        text-align: center;
        cursor: pointer;
        padding: 8px;
        border: 1px solid transparent;
        border-radius: 6px;
        transition: 0.2s;
    }

    .pgo-related-item:hover {
        border-color: #ddd;
        background: #f9f9f9;
    }

    .pgo-related-img {
        width: 70px;
        height: 70px;
        object-fit: contain;
        margin-bottom: 4px;
        display: block;
        margin: 0 auto;
    }

    .pgo-related-name {
        font-size: 12px;
        color: #333;
        line-height: 1.2;
        display: block;
    }

    .pgo-fav-btn-large {
        background: #fff;
        color: #888;
        border: 1.5px solid #ddd;
        padding: 6px 14px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 8px;
        transition: all 0.2s;
        width: 100%;
        justify-content: center;
    }

    .pgo-fav-btn-large:hover {
        border-color: #f0c040;
        color: #b8860b;
        background: #fffcf0;
    }

    .pgo-fav-btn-large.is-active {
        background: #fff8e1;
        color: #f59e0b;
        border-color: #f59e0b;
        font-weight: 600;
    }

    .pgo-counter-btn {
        width: 100%;
        border: none;
        padding: 10px;
        border-radius: 6px;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        margin-top: 5px;
        transition: 0.2s;
        display: block;
    }

    .pgo-counter-btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .pgo-counter-btn.x2 {
        background: #d32f2f;
    }

    .pgo-counter-btn.x1 {
        background: #f57c00;
    }

    .pgo-toast {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: #333;
        color: #fff;
        padding: 12px 24px;
        border-radius: 30px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transition: 0.3s;
        z-index: 2147483647;
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 14px;
    }

    .pgo-toast.in {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .pgo-toast-undo {
        background: none;
        border: none;
        color: #ffc107;
        font-weight: bold;
        cursor: pointer;
        padding: 0;
        text-decoration: underline;
    }

    @keyframes pgoFadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pgoSlideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Accordion for Languages */
    .pgo-lang-accordion {
        width: 100%;
        margin-top: 15px;
        background: #f9f9f9;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #eee;
        text-align: left;
    }

    .pgo-lang-accordion summary {
        padding: 10px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #555;
        cursor: pointer;
        background: #fff;
        border-bottom: 1px solid #eee;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

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

    .pgo-lang-accordion summary::after {
        content: '▼';
        font-size: 10px;
        transition: transform 0.2s;
    }

    .pgo-lang-accordion[open] summary::after {
        transform: rotate(180deg);
    }

    .pgo-lang-accordion[open] summary {
        border-bottom: 1px solid #ddd;
    }

    .pgo-lang-list {
        padding: 10px 15px;
        margin: 0;
        font-size: 13px;
        max-height: 250px;
        overflow-y: auto;
    }

    .pgo-lang-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px dashed #e0e0e0;
    }

    .pgo-lang-row:last-child {
        border-bottom: none;
    }

    .pgo-lang-row .lang-prop {
        color: #777;
        font-size: 12px;
    }

    .pgo-lang-row .lang-val {
        font-weight: 600;
        color: #333;
    }

    /* Type Effectiveness Table */
    .pgo-eff-table {
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 10px;
    }

    .pgo-eff-row {
        display: flex;
        border-bottom: 1px solid #ddd;
        min-height: 40px;
        background: #fff;
    }

    .pgo-eff-row:last-child {
        border-bottom: none;
    }

    .pgo-eff-label-wrap {
        width: 130px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: bold;
        padding: 5px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        text-align: center;
    }

    .pgo-eff-label {
        font-size: 13px;
        line-height: 1.2;
    }

    .pgo-eff-mult {
        font-size: 11px;
        opacity: 0.9;
        margin-top: 2px;
    }

    .pgo-eff-types {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 10px;
        gap: 5px;
    }

    .pgo-eff-none {
        color: #999;
        font-size: 13px;
        font-style: italic;
    }

    /* Gradient Colors */
    .eff-x256 .pgo-eff-label-wrap {
        background: linear-gradient(135deg, #e53935, #c62828);
    }

    .eff-x16 .pgo-eff-label-wrap {
        background: linear-gradient(135deg, #fb8c00, #ef6c00);
    }

    .eff-x06 .pgo-eff-label-wrap {
        background: linear-gradient(135deg, #fdd835, #fbc02d);
        color: #fff;
    }

    .eff-x039 .pgo-eff-label-wrap {
        background: linear-gradient(135deg, #7cb342, #558b2f);
    }

    .eff-x024 .pgo-eff-label-wrap {
        background: linear-gradient(135deg, #43a047, #2e7d32);
    }

    /* Accordion for Hidden Power */
    .pgo-hp-accordion {
        width: 100%;
        margin-top: 10px;
        background: #f9f9f9;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #eee;
        text-align: left;
    }

    .pgo-hp-accordion summary {
        padding: 8px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #555;
        cursor: pointer;
        background: #fff;
        border-bottom: 1px solid #eee;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pgo-hp-accordion summary::-webkit-details-marker {
        display: none;
    }

    .pgo-hp-accordion summary::after {
        content: '▼';
        font-size: 10px;
        transition: transform 0.2s;
    }

    .pgo-hp-accordion[open] summary::after {
        transform: rotate(180deg);
    }

    .pgo-hp-accordion[open] summary {
        border-bottom: 1px solid #ddd;
    }

    .pgo-hp-list {
        margin: 0;
        font-size: 13px;
        max-height: 250px;
        overflow-y: auto;
    }

    .pgo-hp-list .pgdb-move-row {
        border-bottom: 1px dashed #e0e0e0;
        background: #fafafa;
    }

    .pgo-hp-list .hp-dim {
        color: #777;
    }

    /* === PvPモード切り替えトグル === */
    .pgo-mode-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 8px;
        vertical-align: middle;
    }
    .pgo-mode-label {
        font-size: 12px;
        font-weight: 600;
        color: #666;
        user-select: none;
    }
    .pgo-mode-label-pvp {
        color: #999;
    }
    .pgo-mode-toggle.is-pvp .pgo-mode-label:first-child { color: #999; }
    .pgo-mode-toggle.is-pvp .pgo-mode-label-pvp { color: #e74c3c; font-weight: 700; }
    .pgo-toggle-switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 22px;
        cursor: pointer;
    }
    .pgo-toggle-switch input { opacity: 0; width: 0; height: 0; }
    .pgo-toggle-slider {
        position: absolute;
        inset: 0;
        background: #ccc;
        border-radius: 22px;
        transition: background 0.3s;
    }
    .pgo-toggle-slider::before {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.3s;
    }
    .pgo-toggle-switch input:checked + .pgo-toggle-slider {
        background: #e74c3c;
    }
    .pgo-toggle-switch input:checked + .pgo-toggle-slider::before {
        transform: translateX(18px);
    }

    /* === PvPカード SP%バー === */
    .pgo-pvp-stats {
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-top: 4px;
    }
    .pgo-sp-row {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 10px;
    }
    .pgo-sp-league {
        width: 20px;
        font-weight: 700;
        text-align: right;
        flex-shrink: 0;
    }
    .pgo-sp-league-ll { color: #e91e8a; }
    .pgo-sp-league-gl { color: #3498db; }
    .pgo-sp-league-ul { color: #f1c40f; }
    .pgo-sp-league-ml { color: #9b59b6; }
    .pgo-sp-bar-bg {
        flex: 1;
        height: 10px;
        background: #e8e8e8;
        border-radius: 5px;
        overflow: hidden;
    }
    .pgo-sp-bar-fill {
        height: 100%;
        border-radius: 5px;
        transition: width 0.3s;
    }
    .pgo-sp-bar-fill-ll { background: linear-gradient(90deg, #e91e8a, #f06bba); }
    .pgo-sp-bar-fill-gl { background: linear-gradient(90deg, #3498db, #5dade2); }
    .pgo-sp-bar-fill-ul { background: linear-gradient(90deg, #f1c40f, #f4d03f); }
    .pgo-sp-bar-fill-ml { background: linear-gradient(90deg, #9b59b6, #bb8fce); }
    .pgo-sp-pct {
        width: 38px;
        text-align: right;
        font-weight: 600;
        color: #555;
        flex-shrink: 0;
    }
    .pgo-sp-val {
        width: 72px;
        text-align: right;
        color: #888;
        font-size: 9px;
        flex-shrink: 0;
    }
    .pgo-pvp-no-data {
        font-size: 10px;
        color: #bbb;
        text-align: center;
        padding: 10px 0;
    }

    /* PvPソートボタン */
    .pgo-sort-btn-pvp {
        display: inline-block;
        padding: 4px 10px;
        font-size: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #f9f9f9;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        font-weight: 600;
    }
    .pgo-sort-btn-pvp:hover { background: #eee; }
    .pgo-sort-btn-pvp.is-active { background: #555; color: #fff; border-color: #444; }
    /* リーグ別カラー */
    .pgo-sort-btn-pvp[data-sort="sp_little"] { color: #c2185b; border-color: #f48fb1; }
    .pgo-sort-btn-pvp[data-sort="sp_little"].is-active { background: #c2185b; color: #fff; border-color: #c2185b; }
    .pgo-sort-btn-pvp[data-sort="sp_great"] { color: #1565c0; border-color: #90caf9; }
    .pgo-sort-btn-pvp[data-sort="sp_great"].is-active { background: #1565c0; color: #fff; border-color: #1565c0; }
    .pgo-sort-btn-pvp[data-sort="sp_ultra"] { color: #f9a825; border-color: #fff176; }
    .pgo-sort-btn-pvp[data-sort="sp_ultra"].is-active { background: #f9a825; color: #fff; border-color: #f9a825; }
    .pgo-sort-btn-pvp[data-sort="sp_master"] { color: #7b1fa2; border-color: #ce93d8; }
    .pgo-sort-btn-pvp[data-sort="sp_master"].is-active { background: #7b1fa2; color: #fff; border-color: #7b1fa2; }
    /* PvP META ソートボタン */
    .pgo-sort-btn-pvp.sort-meta { color: #e65100; border-color: #ffab91; }
    .pgo-sort-btn-pvp.sort-meta.is-active { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; border-color: #ef4444; box-shadow: 0 2px 8px rgba(239,68,68,.3); }