/*
 * スロットで置き換える配置（docs/2026-11-05-detail-shuffle.md）。
 *
 * 画像の詳細の舞台（partials/shuffle-stage）と、脇の行の並び（partials/shuffle-pane）。
 * 並べ方（左に絵、右に脇。狭い画面では縦に積む）は詳細の .detail に任せる。
 * 色は app.css の札（--bg-elevated・--border-strong・--accent など）だけを使う。
 */

.shuffle-stage-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/*
 * 詳細の舞台は、はみ出しを隠し、中の絵に「幅いっぱい・高さなり」を当てている（app.css の .stage）。
 * ここではどちらも外す——位置調整のつまみが舞台のふちで切れ、元絵と層が割合の寸法から外れる
 */
.stage.is-shuffle {
    overflow: visible;
}

.stage .shuffle-picture,
.stage .shuffle-layer {
    max-width: none;
    max-height: none;
    object-fit: fill;
}

.stage .shuffle-picture {
    height: 100%;
}

.shuffle-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    user-select: none;
}

.shuffle-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.shuffle-picture[hidden] {
    display: none;
}

.shuffle-layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shuffle-layer {
    position: absolute;
    display: block;
    max-width: none;
    transform-origin: center center;
}

/* 選んでいる層だけは、つかめるようにし、赤く透かしてどれを選んでいるかを示す（ほかの層は絵の操作を邪魔しない） */
.shuffle-layer.is-selected {
    pointer-events: auto;
    cursor: move;
    background-color: rgba(255, 0, 0, 0.3);
}

.shuffle-pane {
    /* タグで絞る欄を、行の下に重ねて出すため */
    position: relative;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
}

.shuffle-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.shuffle-title {
    margin: 0;
    font-size: 1.1rem;
}

/* 使い方の窓を開く「i」。鍵・編集のボタンと同じ札の色で、丸く小さく */
.shuffle-help-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
}

.shuffle-help-open:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.shuffle-help-open:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* 使い方の窓（ブラウザの dialog）。外を押すか、閉じる・Esc で閉じる */
.shuffle-help {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
}

.shuffle-help::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.shuffle-help-body {
    padding: 18px 20px;
}

.shuffle-help-title {
    margin: 0 0 12px;
    font-size: 1rem;
}

.shuffle-help-actions {
    display: flex;
    justify-content: flex-end;
}

/* 未解析の絵のお知らせ。説明の文（.shuffle-note）より目立たせる */
.shuffle-notice {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-input);
    font-size: 0.88rem;
}

.shuffle-note {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.shuffle-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 1段目に鍵・編集・チェック・絞り込み、2段目に今の素材の名と ▲▼。詳細の脇は狭く、1段に並べると名が潰れ、▲▼ がはみ出す */
.shuffle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.shuffle-row:first-child {
    border-top: none;
}

.shuffle-lock,
.shuffle-select,
.shuffle-filter,
.shuffle-balloon,
.shuffle-remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
}

/*
 * 鍵を掛けた行（固定した行）は、押さなくても一目で分かるように、鍵を赤く塗り、行の地を黄色に寄せ、
 * 左に黄色の帯を立てる（2026-11-14）。色だけで分けると見落とすので、帯という形でも示す。
 * 色は暗い配色・明るい配色の両方で読めるよう、地に重ねる割合で決める
 */
.shuffle-row {
    --locked-red: #e5484d;
    --locked-yellow: #e8b100;
}

.shuffle-row.is-locked {
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--locked-yellow) 16%, transparent);
    box-shadow: inset 4px 0 0 var(--locked-yellow);
}

.shuffle-row.is-locked .shuffle-lock {
    border-color: var(--locked-red);
    background: var(--locked-red);
    color: #fff;
}

/* 選んでいる行（絵の上に枠が出て、↑↓ キーが効く行）は、選択ボタンを点けて示す。行そのものは光らせない */
.shuffle-select[aria-pressed='true'] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-input));
    color: var(--accent);
}

/* ↑↓ キーの効く行（最後に ▲▼ を押した行）は、▲▼ だけに色を付ける */
.shuffle-row.is-keyed .shuffle-arrow:not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-input));
    color: var(--accent);
}

/* タグで絞っている行は絞り込みのボタンを、吹き出しを選んでいる行は吹き出しのボタンを点ける */
.shuffle-filter[aria-pressed='true'],
.shuffle-balloon[aria-pressed='true'] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-input));
    color: var(--accent);
}

.shuffle-filter:disabled,
.shuffle-balloon:disabled,
.shuffle-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


.shuffle-remove {
    font-size: 1.1rem;
    line-height: 1;
}

/* 足した行の束を選ぶ欄。1段ぶんを使う（脇は狭く、1段目に並べると名が潰れる） */
.shuffle-category {
    flex: 1 1 100%;
    min-width: 0;
}

.shuffle-category select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
}

.shuffle-category select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.shuffle-add {
    margin: 8px 0 14px;
}

.shuffle-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.shuffle-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-right: auto;
    cursor: pointer;
}

/* チェックの枠は、暗い配色でも見えるように札の色を当てる */
.shuffle-check input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    border: 1px solid var(--border-strong);
}

.shuffle-material {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 素材を選ぶプルダウン。束を選ぶ欄と同じ顔 */
.shuffle-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    text-overflow: ellipsis;
}

.shuffle-name:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.shuffle-name:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.shuffle-arrows {
    flex: none;
    display: inline-flex;
    gap: 10px;
}

/* 鍵・編集・絞り込みのボタンと同じ四角にそろえる（.btn の丸く大きい形は、行の中では目立ちすぎる） */
.shuffle-arrow {
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-color: var(--border-strong);
    border-radius: 8px;
    font-size: 0.7rem;
}

.shuffle-arrow:disabled,
.shuffle-check input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* どこを押そうとしているのかを、色の輪で示す */
.shuffle-lock:focus-visible,
.shuffle-arrow:focus-visible,
.shuffle-float-btn:focus-visible,
.shuffle-check input[type='checkbox']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/*
 * 絵の右下に浮かせる「シャッフル！」と ♡。絵の明るさに埋もれないよう、影と少し透ける地を付ける。
 * 層（.shuffle-layers）より上に出す
 */
.shuffle-float {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
}

.shuffle-float-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

/*
 * 絵の下の帯（2026-11-13）。左に履歴の ◀ 番号 ▶、右に「自動」と「シャッフル！」。
 * 狭い幅では2段に折り返す
 */
.shuffle-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 720px;
    margin-top: 12px;
}

.shuffle-history,
.shuffle-bar-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shuffle-bar-main {
    margin-left: auto;
}

.shuffle-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.shuffle-bar-btn:hover:not(:disabled) {
    background: var(--bg-hover);
}

.shuffle-bar-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.shuffle-bar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.shuffle-random {
    padding: 0 22px;
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}

.shuffle-random:hover:not(:disabled) {
    background: var(--accent-hover);
}

/*
 * 「自動」（ふだんの画面）が点いている間は、赤みの橙で塗り、光らせる（いま動いていることが、ひと目で分かるように。2026-11-15）。
 * 止まっている間は、ほかのボタンと同じ形
 */
.shuffle-auto-live {
    --shuffle-live: #d9480f;
}

/* 下の .shuffle-auto[aria-pressed='true'] より強くする */
.shuffle-auto.shuffle-auto-live[aria-pressed='true'],
.shuffle-auto.shuffle-auto-live[aria-pressed='true']:hover:not(:disabled) {
    border-color: transparent;
    background: var(--shuffle-live);
    color: #fff;
    animation: shuffle-live-pulse 1s ease-in-out infinite;
}

@keyframes shuffle-live-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--shuffle-live) 55%, transparent);
    }

    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--shuffle-live) 0%, transparent), 0 0 18px 2px color-mix(in srgb, var(--shuffle-live) 45%, transparent);
    }
}

/* 自動が点いている間は、色を付けて点滅させる（動いていることが分かるように。セリフセットで送る画面の「自動」） */
.shuffle-auto[aria-pressed='true'] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
    animation: shuffle-auto-pulse 1s ease-in-out infinite;
}

@keyframes shuffle-auto-pulse {
    50% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shuffle-auto[aria-pressed='true'] {
        animation: none;
    }
}

.shuffle-history-pos {
    min-width: 4.5em;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* ♡ は丸く、印だけ。いいね済みの並びでは塗りつぶして色を付ける */
.shuffle-float-like {
    width: 44px;
    padding: 0;
    color: var(--text);
}

.shuffle-float-like svg {
    fill: none;
}

.shuffle-float-like[aria-pressed='true'] {
    color: #e5484d;
}

.shuffle-float-like[aria-pressed='true'] svg {
    fill: currentColor;
}

.shuffle-float-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* タグで絞る小さな欄。開いたボタンの行のすぐ下に重ねる */
.shuffle-filter-pop {
    position: absolute;
    right: 16px;
    z-index: 20;
    width: min(260px, calc(100% - 32px));
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--bg-elevated);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.shuffle-filter-pop[hidden] {
    display: none;
}

.shuffle-filter-title {
    margin: 0 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
}

.shuffle-filter-actions {
    display: flex;
    margin-bottom: 8px;
}

.shuffle-filter-actions .btn {
    padding: 4px 10px;
    font-size: 0.78rem;
}

.shuffle-filter-list {
    max-height: 240px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.shuffle-filter-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
    cursor: pointer;
}

.shuffle-filter-list input[type='checkbox'] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

/* セリフ1・2の並び（docs/2026-11-15-line-row-filter.md）。タグとの間を線で分ける */
.shuffle-filter-lines {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* 吹き出しを選ぶ欄（docs/2026-11-08-shuffle-balloon-pick.md §4）。形は絞り込みの欄と同じ */
.shuffle-balloon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shuffle-balloon-choice {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
    min-height: 64px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.shuffle-balloon-choice img {
    max-width: 48px;
    max-height: 40px;
    object-fit: contain;
}

.shuffle-balloon-choice[aria-pressed='true'] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-input));
    color: var(--accent);
}

.shuffle-balloon-choice:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* 画像も入れ替える画面（docs/2026-11-14-shuffle-images.md）の画像の行。ほかの行の上に、太い線で分けて置く */
.shuffle-image-rows {
    margin-bottom: 4px;
    border-bottom: 2px solid var(--border-strong);
}

.shuffle-image-row .shuffle-label {
    font-weight: 700;
}

/* 今の絵に置き場所の無い行。チェックが外れ、押せないことを薄くして示す */
.shuffle-row.is-unavailable .shuffle-check,
.shuffle-row.is-unavailable .shuffle-material {
    opacity: 0.45;
}

/* 管理画面で消した行（docs/2026-11-14-shuffle-area-add-remove.md）。画像の詳細では出さない */
.shuffle-row.is-removed {
    display: none;
}

/* セリフセットで送る画面（docs/2026-11-14-line-sets.md）のセットの選び */
.line-set-pick {
    display: flex;
    align-items: center;
    margin: 0 0 16px;
}

.line-set-pos {
    margin-left: 16px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}