/* Combine builds upon the installed Checklist stylesheet. */
.garam-combine-page .combine-hero {
    display: flex !important; flex-direction: column; align-items: center;
    justify-content: center; gap: 0;
}
.garam-combine-page .combine-hero .checklist-title { display: block; text-align: center; }
.garam-combine-page .combine-hero em { color: var(--check-accent); font-style: italic; }
.garam-combine-page .checklist-filter-panel { position: relative; z-index: 4; }
.garam-combine-page .combine-filters { grid-template-columns: repeat(5, minmax(0,1fr)); }
.garam-combine-page .combine-select {
    display: block; width: 100%; min-width: 0; height: 45px;
    padding: 10px 12px; margin: 0;
    border: 1px solid var(--garam-c-b7d8ed,#b7d8ed);
    border-radius: 13px; font: inherit; font-size: 14px;
    background: var(--check-soft); color: var(--check-ink);
}
.garam-combine-page .combine-results-heading { position: relative; z-index: 1; }
#combineSelectionSummary { margin: 0; font-size: 14px; font-weight: 800; color: var(--check-accent); }
.garam-combine-page .combine-card-tile { transition: border-color .18s, box-shadow .18s, transform .18s; }
.garam-combine-page .combine-card-tile.is-selected {
    border-color: var(--check-accent);
    box-shadow: 0 0 0 2px var(--check-accent);
}
.garam-combine-page .combine-card-select { position: relative; overflow: visible; text-align: left; border-radius: 13px; }
.garam-combine-page .combine-card-select:focus-visible { outline: 3px solid var(--check-accent); outline-offset: 2px; }
.garam-combine-page .combine-selected-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 25px; background: color-mix(in srgb, var(--check-accent) 53%, transparent);
    color: #fff; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 900; font-size: clamp(14px,1.65vw,21px);
    text-shadow: 0 2px 5px rgb(0 0 0 / 55%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s, visibility .16s;
}
.garam-combine-page .combine-card-tile.is-selected .combine-selected-overlay { opacity: 1; visibility: visible; }
.garam-combine-page .combine-card-tile.is-selected .checklist-card-photo { box-shadow: inset 0 0 0 3px var(--check-accent); }
.garam-combine-page .combine-card-code {
    font-size: 11px; font-weight: 700; color: var(--check-muted); overflow-wrap: anywhere;
}
.combine-signin { padding: 50px 24px; max-width: 600px; margin: 0 auto; text-align: center; background: var(--check-soft); border: 1px solid var(--check-border); border-radius: 24px; }
.combine-signin h2 { margin: 0; }
.combine-signin p { color: var(--check-muted); }
/* The selected-card drawer matches the Marketplace cart and lives directly under <body>. */
.combine-fab, .combine-drawer, .combine-modal {
    --combine-fab-accent: var(--garam-theme-ui-accent, var(--garam-theme-accent,#087cce));
    --combine-drawer-width: min(440px, calc(100vw - 78px));
}
/* Floating button keeps its existing closed position on ultrawide screens.
   When opened, it follows the drawer to the actual RIGHT EDGE of the viewport. */
body .combine-fab {
    position: fixed; z-index: 300140;
    right: 22px; bottom: max(22px, env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 58px; min-width: 58px; border: 1px solid var(--garam-c-bbdef5,#bbdef5);
    border-radius: 17px; padding: 11px 13px;
    box-shadow: 0 10px 32px rgb(0 0 0 / 24%);
    background: var(--garam-dark-panel, #fff); color: var(--combine-fab-accent);
    font: inherit; font-weight: 850; cursor: pointer;
    transition: right .36s cubic-bezier(.2,.8,.2,1), background .2s,
        transform .18s, box-shadow .2s;
}
.combine-fab:hover { transform: translateY(-3px); }
.combine-fab:active { transform: scale(.96); }
.combine-fab:focus-visible { outline: 3px solid var(--combine-fab-accent); outline-offset: 4px; }
.combine-fab-icon { font-size: 25px; line-height: 1; }
.combine-fab-text { display: none; }
.combine-fab-counter { font-size: 12px; font-variant-numeric: tabular-nums; }
.combine-fab-x { display: none; font-size: 38px; font-weight: 300; line-height: 1; }
.combine-fab.is-ready:not(.is-open) {
    background: var(--combine-fab-accent); color: #fff; border-color: var(--combine-fab-accent);
    box-shadow: 0 12px 36px color-mix(in srgb,var(--combine-fab-accent) 46%, transparent);
    animation: combine-fab-pop .75s ease-in-out 2;
}
.combine-fab.is-ready:not(.is-open) .combine-fab-text { display: inline; }
.combine-fab.is-ready:not(.is-open) .combine-fab-counter { background: rgb(255 255 255 / 20%); padding: 4px 7px; border-radius: 8px; }
.combine-fab.is-open { right: calc(var(--combine-drawer-width) + 10px); min-width: 58px; }
.combine-fab.is-open .combine-fab-icon,
.combine-fab.is-open .combine-fab-text,
.combine-fab.is-open .combine-fab-counter { display: none; }
.combine-fab.is-open .combine-fab-x { display: block; }
.combine-fab.is-busy { cursor: wait; opacity: .65; }
@keyframes combine-fab-pop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (min-width:1900px) {
    body .combine-fab:not(.is-open) { right: max(22px, calc((100vw - 1600px) / 2 + 24px)); }
}
body .combine-drawer-backdrop {
    position: fixed; inset: 0; z-index: 300100;
    background: rgb(10 10 10 / 40%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .36s, visibility .36s;
}
body .combine-drawer-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
body .combine-drawer {
    --combine-drawer-ink: var(--garam-dark-text, #142438);
    --combine-drawer-muted: var(--garam-dark-muted, #617489);
    --combine-drawer-panel: var(--garam-dark-panel, #fff);
    --combine-drawer-raised: var(--garam-dark-raised, #f3f7fa);
    --combine-drawer-border: var(--garam-dark-border, #d9e6f0);
    position: fixed; z-index: 300120; top: 0; right: 0; bottom: 0;
    width: var(--combine-drawer-width); display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top);
    background: var(--combine-drawer-panel); color: var(--combine-drawer-ink);
    border-left: 1px solid var(--combine-drawer-border);
    box-shadow: -25px 0 65px rgb(12 27 43 / 19%);
    transform: translateX(103%); visibility: hidden; pointer-events: none;
    transition: transform .36s cubic-bezier(.2,.8,.2,1), visibility .36s;
}
body .combine-drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.combine-drawer-header {
    padding: clamp(18px,3vw,27px); display: flex; justify-content: space-between; align-items: center;
    gap: 10px; border-bottom: 1px solid var(--combine-drawer-border);
}
.combine-drawer-header h2 { margin: 0; font-size: clamp(19px,2vw,27px); font-weight: 850;
    letter-spacing: -.04em; color: var(--combine-drawer-ink); }
.combine-drawer-header button { width: 35px; height: 35px; flex: 0 0 35px;
    border: 0; border-radius: 10px; font: inherit; font-size: 23px; cursor: pointer;
    background: var(--combine-drawer-raised); color: var(--combine-drawer-ink); }
.combine-drawer-section-heading { padding: 18px 19px 0; display: flex; justify-content: space-between; align-items: center; gap: 9px;
    font-size: 11px; font-weight: 900; letter-spacing: .12em; color: var(--combine-fab-accent); }
.combine-drawer-items { overflow-y: auto; min-height: 0; flex: 1; padding: 15px 18px;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.combine-drawer-row { display: grid; grid-template-columns: 66px minmax(0,1fr) 28px;
    align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--combine-drawer-border); }
.combine-drawer-thumb { width: 66px; height: 92px; object-fit: contain;
    background: var(--combine-drawer-raised); border-radius: 12px; }
.combine-drawer-info { min-width: 0; }
.combine-drawer-info strong { display: block; color: var(--combine-drawer-ink); font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combine-drawer-info small { display: block; color: var(--combine-drawer-muted); font-size: 10px;
    margin: 5px 0 8px; overflow: hidden; text-overflow: ellipsis; }
.combine-drawer-instance { color: var(--combine-fab-accent); font-size: 13px; font-weight: 850; }
.combine-drawer-remove { align-self: start; font-size: 23px; border: 0; padding: 2px; cursor: pointer;
    background: transparent; color: var(--combine-drawer-muted); }
.combine-drawer-empty { white-space: pre-line; color: var(--combine-drawer-muted);
    text-align: center; font-size: 14px; line-height: 1.6; margin: 70px 10px; }
.combine-drawer-footer { padding: 19px 24px max(20px,env(safe-area-inset-bottom));
    border-top: 1px solid var(--combine-drawer-border); background: var(--combine-drawer-panel); }
.combine-drawer-footer > p { margin: 0 0 14px; font-size: 13px; font-weight: 700;
    color: var(--combine-drawer-muted); }
.combine-drawer-generate { display: block; width: 100%; min-height: 52px;
    background: var(--combine-fab-accent); border: 0; border-radius: 12px;
    color: #fff; font: inherit; font-weight: 850; font-size: 15px; cursor: pointer;
    transition: filter .2s, transform .15s, opacity .2s; opacity: .7; }
.combine-drawer-generate.is-ready { opacity: 1; box-shadow: 0 7px 21px color-mix(in srgb,var(--combine-fab-accent) 25%, transparent); }
.combine-drawer-generate:hover { filter: brightness(1.06); }
.combine-drawer-generate:disabled { cursor: wait; opacity: .55; }
.combine-drawer-note { display: block; margin-top: 10px; font-size: 10px; line-height: 1.5;
    color: var(--combine-drawer-muted); text-align: center; }
/* The confirmation modal overlays the fixed site header and drop FAB. */
.combine-modal {
    position: fixed; inset: 0; z-index: 300200; display: flex; justify-content: center; align-items: center;
    padding: 18px; background: rgb(10 10 10 / 56%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s, visibility .2s;
}
.combine-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.combine-modal-panel {
    --check-accent: var(--garam-theme-ui-accent, var(--garam-theme-accent,#087cce));
    --combine-panel-border: var(--garam-c-bbdef5,#bbdef5);
    width: min(100%, 740px); max-height: min(92dvh, 920px); overflow: auto;
    padding: clamp(19px,3vw,29px); border-radius: 25px;
    background: var(--garam-dark-panel, #fff); color: var(--garam-dark-text, var(--garam-c-123c5c,#123c5c));
    border: 1px solid var(--combine-panel-border);
    box-shadow: 0 28px 90px rgb(0 0 0 / 34%);
    transform: translateY(12px) scale(.99); transition: transform .2s;
}
.combine-modal.is-open .combine-modal-panel { transform: translateY(0) scale(1); }
.combine-modal-heading { display: flex !important; flex-direction: column !important; align-items: stretch;
    gap: 7px; width: 100%; }
.combine-modal-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.combine-modal-heading h2 { margin: 4px 0 11px; font-size: clamp(23px,3.4vw,35px);
    letter-spacing: -.04em; color: inherit; text-align: center; }
.combine-modal-kicker { color: var(--check-accent); font-size: 11px; font-weight: 850; letter-spacing: .09em; }
.combine-modal-close { min-width: 37px; height: 37px; border-radius: 11px; cursor: pointer; font-size: 23px; color: inherit;
    background: var(--garam-dark-raised, var(--garam-c-f0f9ff,#f0f9ff)); border: 1px solid var(--combine-panel-border); }
.combine-modal-panel > p { font-size: 14px; line-height: 1.5; }
.combine-modal-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 24px; }
.combine-modal-chips .garam-modal-chip, .combine-code-chip {
    display: inline-flex; align-items: center; border-radius: 10px; padding: 8px 11px;
    background: var(--garam-dark-raised, var(--garam-c-e5f5ff,#e5f5ff));
    color: var(--garam-dark-text, var(--garam-c-155a8d,#155a8d));
    font-size: 12px; font-weight: 850; border: 1px solid var(--combine-panel-border);
}
.combine-distribution-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.combine-distribution-heading h3 { margin: 0 0 12px; color: inherit; font-size: 16px; }
.combine-distribution-heading > span { color: var(--garam-dark-muted,#527f99); font-size: 12px; font-weight: 700; }
.combine-distribution { display: flex; width: 100%; height: 29px; border-radius: 10px; overflow: hidden; background: #d9d9df; }
.combine-distribution-segment { flex: 0 0 auto; transition: width .25s; border-right: 1px solid rgb(255 255 255 / 65%); }
.combine-distribution-segment:last-child { border-right: none; }
.combine-distribution-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin: 16px 0; }
.combine-distribution-key { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12px; }
.combine-distribution-key i { display: inline-block; flex: 0 0 11px; width: 11px; height: 11px; border-radius: 4px; }
.combine-modal-panel .combine-modal-note { font-size: 12px; color: var(--garam-dark-muted, var(--garam-c-527f99,#527f99)); }
.combine-modal-status { color: var(--check-accent); font-size: 13px; font-weight: 700; }
.combine-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 11px; margin-top: 21px; }
.combine-modal-actions[hidden], .combine-result[hidden], .combine-modal-status[hidden] { display: none !important; }
.combine-modal-actions .checklist-button, .combine-result .checklist-button {
    min-height: 43px; padding: 11px 18px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.combine-result { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 3px; text-align: center; }
.combine-reveal-glow { display: flex; justify-content: center; align-items: center; width: min(265px,70vw); border-radius: 21px; padding: 12px;
    background: color-mix(in srgb,var(--check-accent) 17%,transparent); opacity: .3; transform: rotateY(90deg) scale(.75);
    transition: opacity .7s, transform .7s cubic-bezier(.2,.85,.25,1.1); }
.combine-result.is-revealed .combine-reveal-glow { opacity: 1; transform: rotateY(0) scale(1); }
.combine-reveal-glow img { width: 100%; aspect-ratio: 188/279; object-fit: contain; border-radius: 15px; }
.combine-result h3 { margin: 8px 0 0; font-size: clamp(21px,4vw,28px); }
.combine-result p { margin: 0; font-size: 13px; }
.combine-result .checklist-button { margin-top: 10px; }
@media(max-width:950px) { .garam-combine-page .combine-filters { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:740px) { .garam-combine-page .combine-hero { padding: 32px 10px 38px; } }
@media(max-width:540px) {
    .garam-combine-page .combine-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .garam-combine-page .combine-hero .checklist-title { font-size: clamp(36px,7vw,53px); }
    .combine-modal { padding: 10px; }
    .combine-modal-panel { border-radius: 19px; }
    body .combine-fab:not(.is-open) { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
    body .combine-fab.is-open { right: calc(var(--combine-drawer-width) + 7px); bottom: max(14px, env(safe-area-inset-bottom)); }
}
/* Preserve the original compact header layout on mobile only.
   Desktop keeps the kicker and close button side by side,
   with the main title centered on the following row. */
@media (max-width: 700px) {
    .combine-modal-heading {
        position: relative;
        display: block !important;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        padding-right: 49px;
    }
    .combine-modal-topline {
        display: block;
    }
    .combine-modal-heading .combine-modal-close {
        position: absolute;
        top: 0;
        right: 0;
    }
    .combine-modal-heading h2 {
        text-align: left;
        margin: 6px 0 0;
    }
}

/* Onix/Ash: specifically color the body-portaled dialog and FAB. */
html[data-garam-mode="dark"] body .combine-fab:not(.is-ready) {
    background: var(--garam-dark-panel,#23242a); color: var(--garam-dark-text,#f3f4f7);
    border-color: var(--garam-dark-border,#45464d);
}

html[data-garam-mode="dark"] body .combine-drawer {
    --combine-drawer-ink: var(--garam-dark-text,#f3f4f7);
    --combine-drawer-muted: var(--garam-dark-muted,#a5a8b2);
    --combine-drawer-panel: var(--garam-dark-panel,#23242a);
    --combine-drawer-raised: var(--garam-dark-raised,#34353c);
    --combine-drawer-border: var(--garam-dark-border,#45464d);
}
html[data-garam-mode="dark"] body .combine-fab.is-open {
    background: var(--garam-dark-panel,#23242a); color: var(--garam-theme-ui-accent,#b4b6c0);
    border-color: var(--garam-dark-border,#45464d);
}
html[data-garam-mode="dark"] .combine-modal-panel {
    background: var(--garam-dark-panel,#23242a); color: var(--garam-dark-text,#f3f4f7);
    border-color: var(--garam-dark-border,#45464d);
}
html[data-garam-mode="dark"] .garam-combine-page .combine-select {
    background: var(--garam-dark-raised,#34353c); color: var(--garam-dark-text,#f3f4f7);
    border-color: var(--garam-dark-border,#45464d);
}
@media(prefers-reduced-motion:reduce) {
    .combine-fab.is-ready, .combine-result .combine-reveal-glow { animation: none; transition: none; transform: none; opacity: 1; }
    .combine-fab, .combine-drawer, .combine-drawer-backdrop { transition: none !important; }
}

/* After /combine succeeds, replace the confirmation with the new card reveal. */
.combine-modal.is-complete .combine-modal-panel > p,
.combine-modal.is-complete .combine-modal-chips,
.combine-modal.is-complete .combine-distribution-heading,
.combine-modal.is-complete .combine-distribution,
.combine-modal.is-complete .combine-distribution-legend { display: none !important; }
.combine-modal.is-complete .combine-result { padding-top: 6px; }
.combine-modal.is-complete .combine-reveal-glow { width: min(235px,55vw); }

/* Reuse the existing text surfaces for selection errors, with no floating toast. */
.garam-combine-page #combineSelectionSummary.is-combine-message {
    color: #b83248;
    font-weight: 800;
}
body .combine-drawer #combineDrawerHint.is-combine-message {
    color: #db5367;
    font-weight: 800;
}

/* Inventory-identical pagination controls for both Combine and its Check dialog. */
.garam-combine-page .garam-pagination, body .combine-check-modal .garam-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-top: 24px;
}
.garam-combine-page .garam-button, body .combine-check-modal .garam-button {
    display: inline-flex; justify-content: center; align-items: center; gap: 7px;
    min-height: 42px; padding: 9px 15px; border-radius: 13px;
    font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background .15s, transform .15s;
}
.garam-combine-page .garam-button:active, body .combine-check-modal .garam-button:active { transform: translateY(1px); }
.garam-combine-page .garam-button-outline, body .combine-check-modal .garam-button-outline {
    border: 1px solid var(--garam-c-a9cfea,#a9cfea);
    background: var(--garam-dark-panel,#fff);
    color: var(--garam-dark-text,var(--garam-c-155a8d,#155a8d));
}
.garam-combine-page .garam-button-outline:hover:not(:disabled),
body .combine-check-modal .garam-button-outline:hover:not(:disabled) {
    background: var(--garam-dark-raised,var(--garam-c-e5f5ff,#e5f5ff));
}
.garam-combine-page .garam-button:disabled, body .combine-check-modal .garam-button:disabled {
    opacity: .43; cursor: default;
}
#combinePageDisplay, #combineCheckPageDisplay {
    min-width: 90px; text-align: center;
    color: var(--garam-dark-text,var(--garam-c-155a8d,#155a8d)); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Only visible with no Group, Idol, Era, or Rarity filter. */
.garam-combine-page .combine-check-panel {
    margin-top: 18px; padding: 21px 24px; border-radius: 22px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    background: var(--garam-dark-panel,#fff);
    border: 1px solid var(--check-border);
    box-shadow: 0 12px 27px rgba(21,99,153,.11);
}
.garam-combine-page .combine-check-panel[hidden] { display: none !important; }
.combine-check-panel-copy { flex: 1; min-width: 220px; }
.combine-check-panel-copy h2 {
    margin: 0 0 5px; font-weight: 850; font-size: clamp(16px, 2vw, 20px);
    letter-spacing: -.025em; color: var(--check-ink);
}
.combine-check-panel-copy p { margin: 0; font-size: 13px; color: var(--check-muted); }
.garam-combine-page .combine-check-panel #combineCheckButton { flex-shrink: 0; min-width: 95px; }
/* The check dialog is directly under body and covers the global header/footer. */
body .combine-check-modal {
    --combine-check-ink: var(--garam-dark-text,var(--garam-c-123c5c,#123c5c));
    --combine-check-muted: var(--garam-dark-muted,var(--garam-c-527f99,#527f99));
    --combine-check-bg: var(--garam-dark-panel,#fff);
    --combine-check-raised: var(--garam-dark-raised,var(--garam-c-f0f9ff,#f0f9ff));
    --combine-check-border: var(--garam-dark-border,var(--garam-c-bbdef5,#bbdef5));
    --check-accent: var(--garam-theme-ui-accent,var(--garam-theme-accent,#087cce));
    position: fixed; inset: 0; z-index: 300250; padding: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgb(10 10 10 / 56%); opacity: 0; visibility: hidden;
    pointer-events: none; transition: opacity .2s ease, visibility .2s ease;
    color: var(--combine-check-ink); font-family: inherit;
}
body .combine-check-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
body .combine-check-modal *, .garam-combine-page .combine-check-panel * { box-sizing: border-box; }
body .combine-check-dialog {
    width: min(750px, 100%); max-height: min(850px, calc(100dvh - 36px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--combine-check-bg); color: var(--combine-check-ink);
    border: 1px solid var(--combine-check-border); border-radius: 23px;
    padding: clamp(17px,3vw,28px); box-shadow: 0 25px 80px rgb(0 0 0 / 24%);
}
.combine-check-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.combine-check-dialog-heading { flex: 1; min-width: 0; }
.combine-check-dialog-heading h2 { margin: 8px 0 0; font-weight: 850; font-size: clamp(23px,4vw,32px); letter-spacing: -.035em; }
.combine-check-dialog-description { margin: 11px 0 18px; color: var(--combine-check-muted); font-size: 13px; line-height: 1.5; }
/* Desktop only: kicker and close on top, centered title in its own row.
   Use display:contents so the existing mobile markup and layout stay intact. */
@media (min-width: 701px) {
    body .combine-check-dialog-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 15px;
        row-gap: 7px;
    }
    body .combine-check-dialog-heading { display: contents; }
    body .combine-check-dialog-header .combine-modal-kicker {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    body .combine-check-dialog-header #combineCheckClose {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    body .combine-check-dialog-header #combineCheckTitle {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 0;
        text-align: center;
    }
}

.combine-check-options { display: flex; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 18px; }
.combine-check-option { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 750; }
.combine-check-option input { width: 17px; height: 17px; accent-color: var(--check-accent); cursor: pointer; }
.combine-check-status { min-height: 22px; margin: 0 0 12px; color: var(--check-accent); font-size: 13px; font-weight: 750; }
.combine-check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.combine-check-item { min-width: 0; padding: 15px; border-radius: 15px;
    border: 1px solid var(--combine-check-border); background: var(--combine-check-raised); }
.combine-check-item-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.combine-check-item-info { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.combine-check-item-info strong { font-size: 14px; overflow-wrap: anywhere; }
.combine-check-rarity { font-size: 12px; color: var(--combine-check-muted); font-weight: 750; }
.combine-check-count { padding: 6px 9px; border-radius: 10px; flex-shrink: 0;
    background: var(--check-accent); color: #fff; font-size: 13px; font-weight: 850; }
.combine-check-eras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.combine-check-era-chip { border-radius: 8px; padding: 6px 8px; font-size: 11px; font-weight: 700;
    background: var(--combine-check-bg); border: 1px solid var(--combine-check-border);
    color: var(--combine-check-ink); }
.combine-check-empty { grid-column: 1 / -1; text-align: center; border: 1px dashed var(--combine-check-border);
    border-radius: 12px; padding: 25px; font-size: 13px; color: var(--combine-check-muted); }
@media(max-width:700px) {
    .garam-combine-page .combine-check-panel { align-items: stretch; padding: 18px; gap: 12px; }
    .garam-combine-page .combine-check-panel #combineCheckButton { width: 100%; }
    .combine-check-list { grid-template-columns: 1fr; }
    body .combine-check-modal { padding: 10px; }
    body .combine-check-dialog { border-radius: 18px; max-height: calc(100dvh - 20px); }
}
@media(max-width:540px) {
    .garam-combine-page .garam-pagination, body .combine-check-modal .garam-pagination { gap: 6px; }
    .garam-combine-page .garam-pagination .garam-button,
    body .combine-check-modal .garam-pagination .garam-button { padding: 9px 11px; }
    #combinePageDisplay, #combineCheckPageDisplay { min-width: 64px; }
}
html[data-garam-mode="dark"] .garam-combine-page .combine-check-panel,
html[data-garam-mode="dark"] body .combine-check-dialog {
    background: var(--garam-dark-panel,#23242a);
    color: var(--garam-dark-text,#f3f4f7);
    border-color: var(--garam-dark-border,#45464d);
}
html[data-garam-mode="dark"] .garam-combine-page .combine-check-panel-copy h2 {
    color: var(--garam-dark-text,#f3f4f7);
}
html[data-garam-mode="dark"] body .combine-check-modal {
    --combine-check-ink: var(--garam-dark-text,#f3f4f7);
    --combine-check-muted: var(--garam-dark-muted,#a5a8b2);
    --combine-check-bg: var(--garam-dark-panel,#23242a);
    --combine-check-raised: var(--garam-dark-raised,#34353c);
    --combine-check-border: var(--garam-dark-border,#45464d);
}

/* Centered same-idol warning; no scrim, no page dimming, and no blocked page interactions. */
body .combine-idol-alert {
    position: fixed;
    inset: 0;
    z-index: 300350;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    background: transparent !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
body .combine-idol-alert.is-open { opacity: 1; visibility: visible; }
body .combine-idol-alert-panel {
    display: flex;
    align-items: center;
    gap: 13px;
    width: min(100%, 470px);
    max-width: 100%;
    padding: 18px 17px;
    border: 2px solid #ef4444;
    border-radius: 18px;
    background: #fff0f1;
    color: #b91c1c;
    box-shadow: 0 16px 45px rgb(127 29 29 / 18%);
    pointer-events: auto;
    box-sizing: border-box;
    transform: translateY(9px) scale(.97);
    transition: transform .2s ease;
}
body .combine-idol-alert.is-open .combine-idol-alert-panel {
    transform: translateY(0) scale(1);
}
body .combine-idol-alert-symbol {
    flex: 0 0 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
    font-family: inherit;
}
body .combine-idol-alert-panel p {
    flex: 1;
    margin: 0;
    color: inherit;
    font-size: clamp(14px, 2.7vw, 16px);
    line-height: 1.4;
    font-weight: 800;
}
body .combine-idol-alert-close {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: rgb(220 38 38 / 9%);
    color: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}
body .combine-idol-alert-close:hover,
body .combine-idol-alert-close:focus-visible { background: rgb(220 38 38 / 18%); }
html[data-garam-mode="dark"] body .combine-idol-alert-panel {
    background: #371b20;
    border-color: #ef6868;
    color: #ffa7a7;
}
@media (max-width: 700px) {
    body .combine-idol-alert-panel { padding: 15px 13px; gap: 10px; border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    body .combine-idol-alert, body .combine-idol-alert-panel { transition: none; }
}