.efpd-gacha-odds__config {
    display: none;
}

.efpd-gacha-odds {
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid var(--efpd-border);
    border-radius: 0.75rem;
    background: var(--efpd-surface);
}

.efpd-gacha-odds__lead,
.efpd-gacha-odds__note,
.efpd-gacha-odds__featured-label,
.efpd-gacha-odds__featured-hint,
.efpd-gacha-odds__empty {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--efpd-muted);
}

.efpd-gacha-odds__featured-label {
    font-weight: 800;
    color: var(--efpd-text);
}

.efpd-gacha-odds__featured-hint {
    margin-top: 0.15rem;
    font-size: 0.72rem;
}

.efpd-gacha-odds__controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.7rem;
    margin-top: 0.85rem;
}

.efpd-gacha-odds__controls label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--efpd-muted);
}

.efpd-gacha-odds input,
.efpd-gacha-odds select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--efpd-border);
    border-radius: 0.45rem;
    font-size: 0.85rem;
    color: var(--efpd-text);
    background: var(--efpd-surface);
}

.efpd-gacha-odds__players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
    gap: 0.9rem 0.6rem;
    /* カードのホバー（translateY(-4px)）とリングが overflow:auto で切れないよう内側に逃がす */
    padding: 0.4rem 0.3rem;
    margin-top: 0.65rem;
    /*
     * このカード一覧が収録選手一覧そのものなので、大半のガチャ（11〜14人）は
     * 折りたたまずに全部見えるだけの高さを取る。列数が減るほど行数は増えるため、
     * 実際に何行見せるかは fitPlayerRows() が行の下端を測って決める。
     */
    max-height: 32rem;
    overflow: auto;
    /* 末尾の項目が枠の途中で見切れるため、スクロール可能であることが常に分かるようにする */
    scrollbar-width: thin;
    scrollbar-color: var(--efpd-border) transparent;
}

/*
 * スマホでは内側スクロールを作らない。画面の大半を占める高さのスクロール領域を
 * 記事内に置くと、指の縦スワイプがページではなく枠内に吸われて記事を読み進められなくなる。
 * 高さの上限を外すぶんページは長くなるが、ここは収録選手一覧そのものなので許容する。
 */
@media (max-width: 767px) {
    .efpd-gacha-odds__players {
        max-height: none;
        overflow: visible;
    }
}

.efpd-gacha-odds__players::-webkit-scrollbar {
    width: 7px;
}

.efpd-gacha-odds__players::-webkit-scrollbar-track {
    background: transparent;
}

.efpd-gacha-odds__players::-webkit-scrollbar-thumb {
    background: var(--efpd-border);
    border-radius: 4px;
}

.efpd-gacha-odds__player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

/* カード＝目玉のON/OFF。カード幅ぴったりに縮めて、チェックマークを角に合わせる */
.efpd-gacha-odds__toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

/*
 * チェックボックスは見た目だけ消す。display:none にすると Tab / Space が効かなくなる。
 * 上の `.efpd-gacha-odds input`（詳細度 0,1,1）に width:100% 等を上書きされないよう、
 * ここは必ず2クラス以上のセレクタで書くこと。
 */
.efpd-gacha-odds .efpd-gacha-odds__checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.efpd-gacha-odds__player .efpd-player-card {
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 未選択（目玉から外している）カードは沈める */
.efpd-gacha-odds__checkbox:not(:checked) ~ .efpd-player-card {
    filter: grayscale(0.85) opacity(0.5);
}

.efpd-gacha-odds__checkbox:checked ~ .efpd-player-card {
    box-shadow:
        0 0 0 2px var(--efpd-surface),
        0 0 0 4px #f2b21c,
        0 6px 18px rgba(23, 43, 77, 0.25);
}

.efpd-gacha-odds__checkbox:focus-visible ~ .efpd-player-card {
    outline: 2px solid #31364b;
    outline-offset: 3px;
}

/* 選択中のチェックマーク。カードは overflow:hidden なので label 側に置く */
.efpd-gacha-odds__toggle::after {
    content: "✓";
    position: absolute;
    top: -0.35rem;
    right: -0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #f2b21c;
    color: #1c1a10;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.efpd-gacha-odds__toggle:has(.efpd-gacha-odds__checkbox:checked)::after {
    opacity: 1;
    transform: scale(1);
}

/* 選手名＝詳細ページへのリンク。カード（=目玉の切り替え）とは役割が違うので、
   リンクだと分かる見た目にしておく */
.efpd-gacha-odds__player-name {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--efpd-text);
    text-decoration: underline;
    text-decoration-color: var(--efpd-muted);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a.efpd-gacha-odds__player-name:hover,
a.efpd-gacha-odds__player-name:focus-visible {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

a.efpd-gacha-odds__player-name:focus-visible {
    outline: 2px solid #31364b;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* 収録選手がいないガチャでは名前がリンクにならないため、下線も出さない */
span.efpd-gacha-odds__player-name {
    text-decoration: none;
}

.efpd-gacha-odds__result {
    margin-top: 0.9rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.55rem;
    background: var(--efpd-surface-muted);
}

.efpd-gacha-odds__headline {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.efpd-gacha-odds__expect {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--efpd-muted);
}

.efpd-gacha-odds__dist {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}