/* =========================================================
   core-altered-cards — Plugin stylesheet
   Loaded on all plugin pages via plugin.json assets.css.
   Uses CSS variables from css/style.css :root for all
   theme-overridable visual values (backgrounds, borders).
   Themes override by redefining the variables in :root.
   ========================================================= */

/* ---- Card filter controls (shared: cards.php, deckbuilder.php, decks.php) ---- */
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-row--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
.filter-row--scroll::-webkit-scrollbar { height: 3px; }
.filter-row--scroll::-webkit-scrollbar-track { background: transparent; }
.filter-row--scroll::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 2px; }
@media (hover: hover) {
    .filter-row--scroll::-webkit-scrollbar-thumb { background: transparent; transition: background .2s; }
    .filter-row--scroll:hover::-webkit-scrollbar-thumb { background: var(--neutral-300); }
}
@media (hover: none) {
    .filter-row--scroll { scrollbar-width: none; -ms-overflow-style: none; }
    .filter-row--scroll::-webkit-scrollbar { display: none; }
}
.filter-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: .06em;
    min-width: 56px;
    flex-shrink: 0;
}
.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--neutral-200);
    background: transparent;
    color: var(--neutral-600);
    font-size: .82rem;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.filter-toggle.active { background: var(--primary-400); border-color: var(--primary-400); color: #fff; }
.filter-toggle-soon { opacity: .45; cursor: not-allowed; }
.filter-toggle img { width: 18px; height: 18px; object-fit: contain; }

/* ---- Set quick-filter image buttons ---- */
.filter-toggle.set-qf-btn {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 82px;
    height: 60px;
    flex: 0 0 82px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-clip: padding-box;
    background-color: var(--neutral-200);
    border: 2px solid transparent;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    color: #fff;
    white-space: normal;
    transition: border-color .15s;
}
.filter-toggle.set-qf-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.62);
    transition: background .2s;
    pointer-events: none;
}
.filter-toggle.set-qf-btn:hover::before { background: rgba(0,0,0,.35); }
.filter-toggle.set-qf-btn.active { background-color: var(--neutral-200); border-color: var(--primary-400); color: #fff; }
.filter-toggle.set-qf-btn.active::before { background: rgba(0,0,0,.08); }
[data-theme="dark"] .filter-toggle.set-qf-btn { background-color: var(--neutral-700, #374151); }
[data-theme="dark"] .filter-toggle.set-qf-btn.active { background-color: var(--neutral-700, #374151); border-color: var(--primary-400); color: #fff; }
.set-qf-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 2px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.set-qf-inner i { font-size: 1.1rem; line-height: 1; }
.set-qf-inner > span { font-size: .6rem; font-weight: 700; line-height: 1.2; text-align: center; }

.ts-filters-row {
    display: grid;
    gap: 10px;
    margin-bottom: .5rem;
}

/* ---- TomSelect overrides ---- */
.ts-wrapper.multi .ts-control { background:var(--sand-50);border:1px solid var(--sand-200);border-radius:6px;padding:3px 6px;min-height:31px;cursor:pointer;gap:4px; }
.ts-wrapper.multi .ts-control:focus-within { border-color:var(--primary-400);box-shadow:0 0 0 .2rem rgba(201,168,76,.2); }
.ts-wrapper.multi .ts-control .item { background:var(--primary-400);border:none;color:var(--neutral-800);font-size:.78rem;font-weight:600;border-radius:4px;padding:1px 6px; }
.ts-wrapper.multi .ts-control .item .remove { color:var(--neutral-800);border-left:1px solid rgba(0,0,0,.15);margin-left:4px;padding-left:4px; }
/* !important needed: tom-select.bootstrap5.css loads after this file and overwrites single background */
.ts-wrapper.single .ts-control { background:var(--sand-50)!important;background-image:none!important;border:1px solid var(--sand-200);border-radius:6px;padding:3px 6px;min-height:31px;cursor:pointer;gap:4px; }
.ts-wrapper.single .ts-control:focus-within { border-color:var(--primary-400);box-shadow:0 0 0 .2rem rgba(201,168,76,.2); }
.ts-wrapper.single .ts-control .item { background:none;border:none;color:var(--neutral-700);font-size:.88rem;font-weight:normal;border-radius:0;padding:0; }
.ts-wrapper .ts-control input { cursor:pointer;width:0!important;flex:0!important;padding:0!important; }
.ts-dropdown { background:var(--sand-50);border:1px solid var(--sand-200);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15); }
.ts-dropdown .option { color:var(--neutral-700);padding:6px 10px;font-size:.85rem; }
.ts-dropdown .option:hover,.ts-dropdown .option.active { background:var(--sand-100);color:var(--neutral-800); }
.ts-dropdown .option.selected { background:rgba(201,168,76,.15); }

/* =========================================================
   Generic tab toggle  (.ac-tab-toggle + .btn-toggle)
   Used in: collection.php, deck.php, deckbuilder.php
   ========================================================= */
.ac-tab-toggle { display:flex; gap:6px; margin-bottom:.75rem; }
.ac-tab-toggle .btn-toggle { padding:5px 14px; border-radius:6px; font-size:.82rem; font-weight:600; border:1px solid var(--neutral-300); background:transparent; color:var(--neutral-500); cursor:pointer; transition:background .12s,color .12s,border-color .12s; }
.ac-tab-toggle .btn-toggle.active { background:var(--primary-400); border-color:var(--primary-400); color:#fff; }

/* =========================================================
   Iframe page  (iframe.php)
   ========================================================= */
#iframe-wrap { position:relative; width:100%; height:calc(100vh - var(--navbar-height,64px)); overflow:hidden; }
#iframe-wrap iframe { display:block; width:100%; height:100%; border:none; }
#iframe-bar { display:flex; align-items:center; gap:10px; padding:6px 16px; background:var(--sand-100); border-bottom:1px solid var(--sand-300); font-size:.78rem; color:var(--neutral-500); }
#iframe-bar a { color:var(--primary-500); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
#iframe-bar a:hover { text-decoration:underline; }
#iframe-loader { position:absolute; inset:0; background:var(--sand-50); display:flex; align-items:center; justify-content:center; z-index:10; flex-direction:column; gap:12px; color:var(--neutral-500); font-size:.9rem; }

/* =========================================================
   Card detail page  (card.php)
   ========================================================= */
.card-view-img-wrap { position:sticky; top:80px; text-align:center; }
.card-view-img { max-width:300px; width:100%; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.card-view-img-wrap altered-card { display:block; max-width:300px; margin:0 auto; border-radius:10px; overflow:hidden; }
.card-stat-row { display:flex; align-items:center; gap:.5rem; padding:.5rem 0; border-bottom:1px solid var(--sand-200); font-size:.9rem; }
.card-stat-row:last-child { border-bottom:none; }
.card-stat-label { color:var(--neutral-500); min-width:140px; font-size:.85rem; flex-shrink:0; }
.card-stat-val { font-weight:600; color:var(--neutral-800); }
.power-pip { display:inline-flex; align-items:center; gap:.3rem; background:var(--sand-200); border-radius:.4rem; padding:.15rem .55rem; font-size:.88rem; font-weight:700; }
.card-section-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--neutral-400); margin-bottom:.5rem; }
.effect-hl { color:#C37424; }
/* Bootstrap nav-tabs override for card detail page */
.nav-tabs { border-bottom:2px solid var(--sand-200); gap:.2rem; flex-wrap:nowrap; }
.nav-tabs .nav-item { flex:1 1 0; min-width:0; }
.nav-tabs .nav-link { display:block; width:100%; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--neutral-500); background:transparent; border:2px solid transparent; border-radius:.5rem .5rem 0 0; padding:.45rem .6rem; font-size:.85rem; font-weight:600; margin-bottom:-2px; transition:color .15s,background .15s; }
.nav-tabs .nav-link:hover:not(.active) { color:var(--neutral-700); background:var(--sand-100); border-color:var(--sand-200) var(--sand-200) transparent; }
.nav-tabs .nav-link.active { color:var(--neutral-800); background:var(--sand-50); border-top:2px solid var(--primary-400); border-left:2px solid var(--sand-200); border-right:2px solid var(--sand-200); border-bottom:2px solid var(--sand-50); }

/* Skeleton loading placeholders */
.card-skeleton { background:var(--sand-200); border-radius:4px; animation:card-skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes card-skeleton-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* =========================================================
   Cards browser  (cards.php)
   ========================================================= */
.cards-grid { display:grid; grid-template-columns:repeat(var(--cards-cols,4),1fr); gap:10px; }
@media (max-width:575px) { .cards-grid { grid-template-columns:repeat(var(--cards-mobile-cols,2),1fr); gap:6px; } }
.card-img-wrap { position:relative; cursor:pointer; min-width:0; overflow:hidden; background:url('img/ALT_OFFICIAL_CARDBACK.png') center/cover no-repeat var(--neutral-100); border-radius:8px; }
.card-img-wrap img, .card-img-wrap altered-card { display:block; width:100%; border-radius:8px; overflow:hidden; }
.card-img-wrap img { aspect-ratio:63.5/88; object-fit:cover; background:transparent; transition:transform .15s ease; }
.card-img-wrap altered-card { aspect-ratio:63.5/88; }
.card-img-wrap:hover img, .card-img-wrap:hover altered-card { transform:scale(1.03); }
.card-item { min-width:0; }
.card-name { font-size:.82rem; font-weight:600; text-align:center; margin-bottom:2px; color:var(--neutral-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2px; }
.card-coll-badge { position:absolute; bottom:5px; left:5px; background:var(--overlay-badge-bg); color:#fff; font-size:.65rem; font-weight:700; border-radius:5px; padding:1px 4px; pointer-events:none; z-index:2; transition:opacity .15s; }
.card-img-wrap:hover .card-coll-badge { opacity:0; }
.card-coll-bar { position:absolute; bottom:0; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:6px; background:var(--overlay-bar-bg); padding:4px 6px; border-radius:0 0 8px 8px; opacity:0; pointer-events:none; transition:opacity .15s; }
.card-img-wrap:hover .card-coll-bar { opacity:1; pointer-events:auto; }
.card-coll-btn { border:none; background:var(--overlay-btn-bg); color:#fff; border-radius:4px; width:22px; height:22px; font-size:1rem; line-height:1; cursor:pointer; flex-shrink:0; padding:0; display:flex; align-items:center; justify-content:center; }
.card-coll-btn:hover:not(:disabled) { background:rgba(255,255,255,.35); }
.card-coll-btn:disabled { opacity:.4; cursor:default; }
.card-coll-qty { color:#fff; font-weight:700; font-size:.8rem; min-width:1.4em; text-align:center; }
.card-coll-bar-icon { color:rgba(255,255,255,.7); font-size:.7rem; flex-shrink:0; }
/* Digital-ownership badge: read-only copy count (key icon), always visible (no hover fade, no edit bar). */
.card-own-badge { position:absolute; bottom:5px; left:5px; background:var(--overlay-badge-bg); color:#fff; font-size:.65rem; font-weight:700; border-radius:5px; padding:1px 4px; pointer-events:none; z-index:3; }

/* =========================================================
   Decks list page  (decks.php)
   ========================================================= */
.deck-search-wrap { position:relative; display:inline-flex; align-items:center; }
.deck-search-wrap .deck-search-icon { position:absolute; left:8px; color:var(--neutral-300); font-size:.8rem; pointer-events:none; }
.deck-search-wrap input { padding-left:26px; }
.decks-tabs, .card-tabs { display:flex; border-bottom:2px solid var(--sand-200); }
.decks-tab, .card-tab { display:flex; align-items:center; gap:6px; background:none; border:none; border-bottom:3px solid transparent; padding:9px 20px; font-size:.9rem; font-weight:600; color:var(--neutral-500); cursor:pointer; margin-bottom:-2px; transition:color .15s,border-color .15s; }
.decks-tab.active, .card-tab.active { color:var(--primary-500); border-bottom-color:var(--primary-400); }
.decks-tab:hover:not(.active), .card-tab:hover:not(.active) { color:var(--neutral-700); }
@media (max-width:991px) {
    .decks-tabs { position:fixed; bottom:0; left:0; right:0; z-index:1000; background:var(--mobile-nav-bg,var(--sand-50,#fff)); border-top:1px solid var(--mobile-nav-border,var(--sand-200)); border-bottom:none; box-shadow:0 -2px 8px rgba(0,0,0,.08); height:50px; margin-bottom:0 !important; padding-bottom:env(safe-area-inset-bottom,0px); }
    .decks-tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; font-size:.72rem; border-bottom:none; border-top:3px solid transparent; margin-bottom:0; }
    .decks-tab i { font-size:1.1rem; margin-right:0 !important; }
    .decks-tab.active { border-bottom-color:transparent; border-top-color:var(--primary-400); }
    .decks-page { padding-bottom:58px; }
    .deck-filter-collapsible { display:none; }
    .deck-filter-collapsible.expanded { display:block; }
}
.deck-filter-toggle { background:none; border:1px solid var(--neutral-300); border-radius:6px; padding:4px 8px; color:var(--neutral-500); cursor:pointer; line-height:1; }
.deck-filter-toggle i { transition:transform .2s; }
.deck-filter-toggle[aria-expanded="true"] i { transform:rotate(180deg); }

/* =========================================================
   Deck detail page  (deck.php)
   ========================================================= */
.deck-cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:576px) { .deck-cards-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px) { .deck-cards-grid { grid-template-columns:repeat(4,1fr); } }
@media (min-width:1200px) { .deck-cards-grid { grid-template-columns:repeat(5,1fr); } }
.deck-card-wrap { position:relative; background:url('img/ALT_OFFICIAL_CARDBACK.png') center/cover no-repeat var(--neutral-100); border-radius:8px; cursor:pointer; }
.deck-card-qty { position:absolute; top:6px; right:6px; background:var(--overlay-qty-bg); color:#fff; font-size:.88rem; font-weight:700; padding:3px 9px; border-radius:5px; border:1px solid rgba(255,255,255,.25); pointer-events:none; z-index:1; }
.deck-card-img { display:block; width:100%; border-radius:8px; overflow:hidden; aspect-ratio:63.5/88; object-fit:cover; background:transparent; }
.deck-card-wrap altered-card { display:block; width:100%; border-radius:8px; overflow:hidden; aspect-ratio:63.5/88; }
.deck-type-section { margin-bottom:1.5rem; }
.deck-type-header { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--neutral-400); margin-bottom:.5rem; display:flex; align-items:center; gap:6px; }
.decklist-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--neutral-100); cursor:pointer; }
.decklist-row:last-child { border-bottom:none; }
.decklist-row:hover .decklist-name { color:var(--primary-600); text-decoration:underline; }
.decklist-qty { font-size:.82rem; font-weight:700; color:var(--neutral-500); min-width:22px; }
.decklist-cost { font-size:.78rem; font-weight:600; background:var(--neutral-100); border-radius:4px; padding:1px 6px; min-width:22px; text-align:center; color:var(--neutral-600); }
.decklist-faction { display:flex; align-items:center; width:16px; flex-shrink:0; }
.decklist-faction img { width:16px; height:16px; object-fit:contain; }
.decklist-name { font-size:.9rem; color:var(--neutral-700); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.decklist-stats { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.decklist-stat { display:flex; align-items:center; gap:2px; font-size:.75rem; font-weight:600; color:var(--neutral-500); min-width:28px; justify-content:flex-end; line-height:1; }
.decklist-stat i, .decklist-stat img { vertical-align:middle; }
.decklist-stat img { width:13px; height:13px; object-fit:contain; flex-shrink:0; }
.deck-stats-col { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:576px) { .deck-stats-col { grid-template-columns:1fr; } }
.deck-stat-card { background:var(--sand-100); border-radius:10px; padding:12px 14px; }
.deck-stat-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--neutral-400); margin-bottom:8px; }
.stat-bar-row { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.stat-bar-label { font-size:.74rem; color:var(--neutral-500); min-width:20px; text-align:center; }
.stat-bar-track { flex:1; background:var(--neutral-100); border-radius:3px; height:10px; overflow:hidden; }
.stat-bar-fill { height:100%; border-radius:3px; background:var(--primary-400); }
.stat-bar-val { font-size:.72rem; color:var(--neutral-400); min-width:22px; text-align:right; }
.vcurve-counts { display:flex; gap:3px; margin-bottom:2px; }
.vcurve-counts span { flex:1; text-align:center; font-size:.6rem; color:var(--neutral-500); line-height:1; min-height:.75rem; }
.vcurve-bars { display:flex; align-items:flex-end; gap:3px; height:48px; }
.vcurve-bar { flex:1; border-radius:2px 2px 0 0; min-height:0; }
.vcurve-labels { display:flex; gap:3px; margin-top:3px; }
.vcurve-labels span { flex:1; text-align:center; font-size:.6rem; color:var(--neutral-400); line-height:1; }

/* =========================================================
   Deck builder  (deckbuilder.php)
   ========================================================= */
#db-hero-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:576px) { #db-hero-grid { grid-template-columns:repeat(3,1fr); } }
.db-layout { display:grid; grid-template-columns:1fr 360px; gap:16px; align-items:start; }
.db-panel-left  { min-width:0; }
.db-panel-right { position:sticky; top:80px; height:calc(100vh - 80px); overflow-y:auto; padding-bottom:1.5rem; }
@media (max-width:991px) {
    .db-layout { display:block; }
    .db-panel-right { position:static; }
    .db-tab-pane { display:none; }
    .db-tab-pane.active { display:block; }
}
@media (min-width:992px) {
    .db-mobile-tabs { display:none !important; }
    .db-tab-pane { display:block !important; }
}
@media (max-width:991px) {
    .db-mobile-tabs { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:1000; background:var(--mobile-nav-bg,var(--sand-50,#fff)); border-top:1px solid var(--mobile-nav-border,var(--sand-200)); box-shadow:0 -2px 8px rgba(0,0,0,.08); height:50px; padding-bottom:env(safe-area-inset-bottom,0px); }
    .db-mobile-tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; cursor:pointer; font-weight:600; font-size:.72rem; border:none; background:none; border-top:3px solid transparent; color:var(--neutral-500); transition:color .15s,border-color .15s; }
    .db-mobile-tab i { font-size:1.1rem; }
    .db-mobile-tab.active { border-top-color:var(--primary-400); color:var(--primary-500); }
    .db-layout { padding-bottom:58px; }
}
.cards-grid-db { display:grid; grid-template-columns:repeat(var(--db-cols,3),1fr); gap:8px; }
@media (max-width:575px) { .cards-grid-db { grid-template-columns:repeat(2,1fr); } }
.db-card-wrap { position:relative; cursor:pointer; min-width:0; overflow:hidden; background:url('img/ALT_OFFICIAL_CARDBACK.png') center/cover no-repeat var(--neutral-100); border-radius:7px; }
.db-card-img { display:block; width:100%; border-radius:7px; overflow:hidden; aspect-ratio:63.5/88; object-fit:cover; background:transparent; transition:transform .12s; }
.db-card-wrap altered-card { display:block; width:100%; border-radius:7px; overflow:hidden; aspect-ratio:63.5/88; transition:transform .12s; }
.db-card-wrap:hover .db-card-img, .db-card-wrap:hover altered-card { transform:scale(1.04); }
.db-card-qty-badge { position:absolute; top:5px; right:5px; background:var(--overlay-qty-bg); color:#fff; font-size:.8rem; font-weight:700; padding:2px 8px; border-radius:4px; border:1px solid rgba(255,255,255,.25); pointer-events:none; }
.db-card-name { font-size:.72rem; font-weight:600; text-align:center; margin-bottom:2px; color:var(--neutral-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2px; }
.db-card-add-overlay { position:absolute; inset:0; background:var(--overlay-add-bg); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s; border-radius:7px; }
.db-card-wrap:hover .db-card-add-overlay { opacity:1; }
.db-card-add-overlay span { background:rgba(255,255,255,.92); color:#111; font-size:.75rem; font-weight:700; padding:4px 12px; border-radius:20px; }
.db-card-btn-group { position:absolute; bottom:5px; right:5px; }
.deck-list-item { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--neutral-100); min-width:0; }
.deck-list-item:last-child { border-bottom:none; }
.deck-list-qty { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.deck-list-qty button { width:22px; height:22px; border-radius:50%; border:1px solid var(--neutral-200); background:var(--sand-50); color:var(--neutral-600); font-size:.85rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .1s; }
.deck-list-qty button:hover { background:var(--neutral-100); }
.deck-list-qty .qty-num { min-width:18px; text-align:center; font-size:.82rem; font-weight:700; color:var(--neutral-700); }
.deck-list-name { flex:1; min-width:0; font-size:.82rem; color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deck-list-gem { width:13px; height:13px; object-fit:contain; flex-shrink:0; }
.db-card-coll-badge { position:absolute; bottom:5px; left:5px; background:var(--overlay-badge-bg); color:#fff; font-size:.65rem; font-weight:700; border-radius:5px; padding:1px 4px; pointer-events:none; z-index:2; }
.deck-list-stockwarn { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:#f59e0b; color:#fff; font-size:.55rem; flex-shrink:0; margin-left:2px; }
.deck-list-violation { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:#ef4444; color:#fff; font-size:.6rem; font-weight:800; flex-shrink:0; margin-left:auto; cursor:help; }
.deck-list-banned    { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; flex-shrink:0; margin-left:2px; color:#ef4444; font-size:.65rem; cursor:help; }
.deck-list-suspended { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; flex-shrink:0; margin-left:2px; color:#f59e0b; font-size:.65rem; cursor:help; }
.hero-banner { border-radius:8px; overflow:hidden; background:var(--neutral-100); min-height:72px; display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; transition:opacity .15s; }
.hero-banner:hover { opacity:.85; }
.db-deck-tab { background:none; border:none; border-bottom:2px solid transparent; padding:6px 12px; font-size:.78rem; font-weight:700; color:var(--neutral-400); cursor:pointer; margin-bottom:-1px; transition:color .12s,border-color .12s; }
.db-deck-tab.active { color:var(--primary-500); border-bottom-color:var(--primary-400); }
.db-stat-section-title { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--neutral-400); margin-bottom:6px; }
.db-stat-bar-row { display:flex; align-items:center; gap:5px; margin-bottom:5px; }
.db-stat-bar-lbl { font-size:.72rem; color:var(--neutral-500); min-width:20px; text-align:center; }
.db-stat-bar-track { flex:1; background:var(--neutral-100); border-radius:3px; height:8px; overflow:hidden; }
.db-stat-bar-fill { height:100%; border-radius:3px; background:var(--primary-400); transition:width .2s; }
.db-stat-bar-val { font-size:.7rem; color:var(--neutral-400); min-width:20px; text-align:right; }
.db-vcurve-counts { display:flex; gap:3px; margin-bottom:2px; }
.db-vcurve-counts span { flex:1; text-align:center; font-size:.6rem; color:var(--neutral-500); line-height:1; min-height:.75rem; }
.db-vcurve-bars { display:flex; align-items:flex-end; gap:3px; height:44px; }
.db-vcurve-bar { flex:1; border-radius:2px 2px 0 0; min-height:0; transition:height .2s; }
.db-vcurve-labels { display:flex; gap:3px; margin-top:3px; margin-bottom:12px; }
.db-vcurve-labels span { flex:1; text-align:center; font-size:.6rem; color:var(--neutral-400); line-height:1; }
.db-deckgrid-card { position:relative; cursor:pointer; border-radius:7px; overflow:hidden; transition:transform .12s; }
.db-deckgrid-card:hover { transform:scale(1.04); }
.db-deckgrid-card img { display:block; width:100%; aspect-ratio:63.5/88; object-fit:cover; border-radius:7px; }
.db-deckgrid-card altered-card { display:block; width:100%; aspect-ratio:63.5/88; overflow:hidden; border-radius:7px; }
.db-deckgrid-qty { position:absolute; top:3px; right:3px; background:var(--overlay-qty-bg); color:#fff; font-size:.65rem; font-weight:700; padding:1px 5px; border-radius:3px; pointer-events:none; border:1px solid rgba(255,255,255,.2); }
.db-deckgrid-type { font-size:.65rem; font-weight:700; color:var(--neutral-400); text-transform:uppercase; letter-spacing:.05em; padding:8px 0 3px; }
.db-decklist-row { display:flex; align-items:center; gap:6px; padding:4px 0; border-bottom:1px solid var(--neutral-100); font-size:.8rem; cursor:pointer; }
.db-decklist-row:last-child { border-bottom:none; }
.db-decklist-row:hover { background:var(--sand-100); }
.db-decklist-qty { font-weight:700; color:var(--neutral-700); min-width:18px; text-align:center; flex-shrink:0; }
.db-decklist-cost { color:var(--neutral-400); min-width:14px; text-align:center; flex-shrink:0; font-size:.75rem; }
.db-decklist-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--neutral-700); }
.db-decklist-stats { display:flex; align-items:center; gap:3px; color:var(--neutral-500); font-size:.72rem; flex-shrink:0; white-space:nowrap; }

/* =========================================================
   Inline-style replacement classes
   All values use CSS variables where theme-overridable.
   ========================================================= */

/* Lightbox / fixed overlay — JS controls display via inline style */
.ac-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--card-lightbox-bg, rgba(0,0,0,.82));
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ac-lightbox-inner {
    max-width: 420px;
    width: 88vw;
    cursor: default;
    position: relative;
}

/* Hero modal panel */
.db-hero-panel {
    background: var(--modal-panel-bg, var(--sand-50));
    border: 1px solid var(--panel-border, var(--sand-200));
    border-radius: 12px;
    padding: 20px;
    max-width: 700px;
    width: 94vw;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    cursor: default;
}
.db-hero-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--neutral-500);
}
.db-hero-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.db-hero-loading {
    text-align: center;
    padding: 20px;
    color: var(--neutral-400);
}

/* Bootstrap modal overrides — use panel background from theme */
.db-modal-content { border: none; border-radius: 1rem; overflow: hidden; }
.db-modal-header  { border-bottom: 1px solid var(--panel-border, var(--sand-300)); padding: .6rem 1rem; }
.db-modal-body    { background: var(--modal-panel-bg, var(--sand-50)); }
.db-modal-footer  { border-top: 1px solid var(--panel-border, var(--sand-300)); background: var(--modal-panel-bg, var(--sand-50)); }

/* Guest banner (deckbuilder) */
.db-guest-banner {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: .84rem;
    line-height: 1.45;
    color: #92400e;
}
.db-guest-link { color: #b45309; font-weight: 600; }

/* Deck panel tabs row */
.db-tabs-row {
    display: flex;
    border-bottom: 1px solid var(--panel-border, var(--sand-200));
    gap: 0;
    margin-bottom: 0;
}

/* Autosave status */
.db-autosave-status {
    font-size: .72rem;
    text-align: center;
    min-height: 1.1em;
    color: var(--neutral-400);
    margin-top: .3rem;
    opacity: 0;
    transition: opacity 1s;
}

/* Card count / rarity row (deckbuilder sidebar) */
.db-card-count { font-size: .78rem; font-weight: 700; color: var(--neutral-600); }
.db-rarity-row  { font-size: .8rem; }

/* Info/help banner (deckbuilder) */
.db-info-banner { font-size: .78rem; color: var(--neutral-600); }

/* Search/deck view pane (deckbuilder, hidden by default) */
.db-search-pane { padding-top: .75rem; }
.db-stats-pane  { padding-top: .5rem; margin-bottom: .75rem; }

/* State panes: loading / empty / error (card-search.php) */
.ac-state-pane { text-align: center; padding: 32px 0; color: var(--neutral-400); }
.ac-state-icon { font-size: 2rem; opacity: .3; display: block; margin-bottom: .75rem; }

/* Filter count badge */
.cs-filter-count {
    background: var(--primary-400);
    color: var(--neutral-800);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: .7rem;
    font-weight: 700;
    margin-left: 3px;
}

/* ============================================================
   Card search — tabbed layout
   ============================================================ */

/* ---- Search tabs ---- */
.cs-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--sand-200);
}
.cs-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--neutral-500);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: -2px;
    transition: background .12s, color .12s, border-color .12s;
}
/* Tabs sit flush on top of the search card: drop the card's top rounding and
   border so the active tab connects seamlessly (no gap, no doubled line). */
.cs-tabs + .card-altered {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.cs-tab i { font-size: .9em; }
.cs-tab:hover:not(.active):not([disabled]) { color: var(--neutral-700); background: var(--sand-100); }
.cs-tab.active {
    color: var(--neutral-800);
    background: var(--sand-50);
    border-color: var(--sand-200);
    border-bottom: 2px solid var(--sand-50);
    box-shadow: inset 0 3px 0 var(--primary-400);
}
.cs-tab-soon { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .cs-tab.active { background: var(--neutral-800, #1f2937); border-bottom-color: var(--neutral-800, #1f2937); }
@media (max-width: 575px) {
    .cs-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .cs-tabs::-webkit-scrollbar { display: none; }
    .cs-tab { padding: 5px 11px; font-size: .8rem; white-space: nowrap; }
}

/* ---- Compact rarity buttons + separators ---- */
.cs-rarities { display: inline-flex; align-items: center; gap: 8px; }
.cs-sep { width: 1px; align-self: stretch; background: var(--neutral-300, #dee2e6); margin: 0 4px; flex-shrink: 0; }
.filter-toggle--compact { padding: 4px 8px; font-weight: 700; }

/* ---- Promo toggle (switch) + panel ---- */
.cs-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: .85rem; color: var(--neutral-600); }
.cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-switch-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--neutral-300); transition: background .15s; flex-shrink: 0; }
.cs-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.cs-switch input:checked + .cs-switch-track { background: var(--primary-400); }
.cs-switch input:checked + .cs-switch-track .cs-switch-thumb { transform: translateX(16px); }
.cs-switch input:focus-visible + .cs-switch-track { box-shadow: 0 0 0 .2rem rgba(201,168,76,.3); }
.cs-promo-panel {
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed var(--sand-300, #cbb994);
    border-radius: 8px;
    background: var(--sand-100);
}
.promo-qf-btn { font-size: .78rem; }
.promo-qf-btn i { width: 14px; text-align: center; }

/* ---- Advanced accordion ---- */
/* "Manage" pill that lives inside the collection / ownership tab button. Hidden
   until that tab is active, then revealed as a small clickable pill. */
.cs-tab-manage { display: none; }
.cs-tab.active .cs-tab-manage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid var(--primary-400);
    border-radius: 999px;
    color: var(--primary-400);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.cs-tab.active .cs-tab-manage:hover { background: var(--primary-400); color: #fff; }
.cs-tab-manage i { font-size: .9em; }
@media (max-width: 575px) {
    .cs-tab.active .cs-tab-manage { padding: 1px 6px; }
    .cs-tab-manage .cs-tab-manage-txt { display: none; }
}
.cs-adv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 2px;
    background: transparent;
    border: none;
    color: var(--neutral-600);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.cs-adv-toggle:hover { color: var(--neutral-800); }
.cs-adv-chevron { font-size: .75em; transition: transform .15s; }
.cs-adv-toggle.open .cs-adv-chevron { transform: rotate(90deg); }
.cs-advanced {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--sand-200);
    border-radius: 8px;
    background: var(--sand-50);
}
.cs-check { font-size: .85rem; color: var(--neutral-600); cursor: pointer; }
.cs-adv-head { margin-bottom: 0; }
/* Two-up fields inside the accordion (keyword + subtype); collapses to one column */
.cs-adv-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-adv-grid > div { flex: 1; min-width: 180px; }

/* ---- Numeric (text-expression) inputs ---- */
.cs-num-input { width: 100px; }
@media (max-width: 575px) { .cs-num-input { width: 92px; } }

/* ---- Results control bar (count + sort + cols) ---- */
.cs-controlbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-controlbar-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.cs-count { font-size: .85rem; color: var(--neutral-500); min-height: 1.2em; }
.cs-control-label { font-size: .8rem; color: var(--neutral-500); }

/* ---- Search/Reset actions (inline on the advanced-search row, pushed right) ---- */
.cs-actions { margin-left: auto; }

/* Mobile: rarity filters drop to their own line under the factions */
@media (max-width: 575px) {
    .cs-faction-row { flex-wrap: wrap; overflow-x: visible; }
    .cs-faction-row .cs-rarities { flex-basis: 100%; margin-top: 6px; }
    .cs-faction-row .cs-rarities .cs-sep { display: none; }
}

/* Deck header (deck.php) */
.deck-hdr-title { font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1.2; }
.deck-hdr-meta  { font-size: .85rem; color: rgba(255,255,255,.8); margin-top: 2px; }
.deck-hdr-on-bg { color: rgba(255,255,255,.7); font-size: .875rem; }
.deck-hdr-banner--hero { cursor: pointer; }
.deck-hdr-banner--hero .deck-hdr-meta { transition: color .15s, text-decoration-color .15s; }
.deck-hdr-banner--hero:hover .deck-hdr-meta {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, .75);
}
.deck-hdr-banner--hero:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
}
.js-deck-illegal {
    cursor: pointer;
    font-size: .72rem;
    transition: transform .15s, box-shadow .15s, filter .15s;
    filter: brightness(1.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .4), 0 0 0 3px rgba(239, 68, 68, .45), 0 2px 8px rgba(0, 0, 0, .22);
}
.js-deck-illegal:hover {
    transform: scale(1.06);
    filter: brightness(1.18);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .65), 0 0 0 3px rgba(239, 68, 68, .65), 0 2px 12px rgba(0, 0, 0, .32);
}
.deck-badge-on-img { background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.deck-badge-no-img { background: rgba(255,255,255,.85); border: 1px solid rgba(0,0,0,.12); color: #444; }

/* Community deck cards — view / upvote stat pills */
.deck-stat-pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.deck-stat-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(35, 8, 14, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
button.deck-stat-pill {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.deck-stat-pill i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1;
}
.deck-stat-pill > span {
    min-width: 1ch;
    line-height: 1;
}
.deck-stat-pill--upvote {
    position: relative;
    z-index: 2;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.deck-stat-pill--upvote:hover:not(:disabled) {
    background: rgba(168, 32, 54, 0.92);
    border-color: rgba(255, 190, 200, 0.75);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
    transform: scale(1.04);
}
.deck-stat-pill--upvote:disabled {
    opacity: .75;
    cursor: wait;
}
.deck-stat-pill--upvote.deck-stat-pill--upvoted {
    background: rgba(120, 24, 38, 0.58);
    border-color: rgba(255, 210, 218, 0.35);
}
.deck-stat-pill--upvote.deck-stat-pill--upvoted:hover:not(:disabled) {
    background: rgba(200, 44, 68, 0.95);
    border-color: rgba(255, 220, 228, 0.85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
    transform: scale(1.04);
}

/* Collection info panels (collection.php) — left border accent strips */
.coll-card-success { border-left: 3px solid #22c55e; }
.coll-card-primary { border-left: 3px solid var(--primary-400); }
.coll-card-warning { border-left: 3px solid var(--bs-warning, #ffc107); }
.coll-card-neutral { border-left: 3px solid var(--neutral-300); }

/* ── Starting hand tester ─────────────────────────────────────────────── */
.hand-test-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: 14px; }
/* playground toggle — green so it stays visible in light and dark themes */
.pt-toggle{ border:1px solid #2f7d57; color:#2f7d57; background:transparent; }
.pt-toggle:hover{ background:rgba(47,125,87,.14); color:#2f7d57; }
.pt-toggle.active{ background:#2f7d57; border-color:#2f7d57; color:#fff; }
.pt-toggle.active:hover{ background:#27684a; border-color:#27684a; color:#fff; }

/* 6-card hand fits on one row on wide screens (overrides the 5-col .deck-cards-grid rule). */
@media (min-width: 1200px) {
    .hand-cards-grid { grid-template-columns: repeat(6, 1fr); }
}

.hand-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sand-200);
    font-size: .85rem;
    color: var(--neutral-600);
}
.hand-summary:empty { display: none; }
.hand-summary .hand-stat b { color: var(--neutral-800); font-weight: 700; }

@keyframes handCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hand-card-anim { animation: handCardIn .32s ease both; }

@media (prefers-reduced-motion: reduce) {
    .hand-card-anim { animation: none; }
}

/* ── Hand-odds (stats + calculators) ──────────────────────────────────── */
.hand-odds{margin-top:32px;font-size:.9rem}
.ho-calc{margin-top:26px}
.ho-sec{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--neutral-400);margin-bottom:9px}
.ho-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ho-card{display:flex;flex-direction:column;gap:3px;background:var(--sand-100);border:1px solid var(--sand-200);border-radius:10px;padding:11px 13px;position:relative;overflow:hidden}
.ho-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sand-300)}
.ho-card .ho-l{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--neutral-500);line-height:1.15;min-height:2.3em;display:flex;align-items:flex-start}
.ho-card .ho-v{min-height:1.85rem;display:flex;align-items:flex-end}
.ho-card .ho-v-n{font-size:1.75rem;font-weight:800;color:var(--neutral-800);line-height:1.05}
.ho-card .ho-v-n[data-bs-toggle]{cursor:help}
.ho-card .ho-s{font-size:.7rem;color:var(--neutral-400);line-height:1.2;min-height:2.4em}
.ho-card .ho-x{font-size:.68rem;font-style:italic;color:var(--neutral-400);line-height:1.25;margin-top:3px}
.ho-bar{height:6px;background:var(--sand-200);border-radius:4px;overflow:hidden;margin:2px 0}
.ho-bar>i{display:block;height:100%;background:var(--neutral-400);border-radius:4px}
.ho-bar-empty{background:transparent}
.ho-card-wide{grid-column:1 / -1}
.ho-comp .ho-l{min-height:0;margin-bottom:2px}
.ho-comp-body{display:flex;align-items:center;gap:26px;margin-top:6px}
.ho-donut{width:96px;height:96px;border-radius:50%;flex:none;-webkit-mask:radial-gradient(circle,transparent 44%,#000 45%);mask:radial-gradient(circle,transparent 44%,#000 45%)}
.ho-comp-legend{flex:1;display:flex;flex-wrap:wrap;justify-content:space-around;gap:10px 20px}
.ho-comp-item{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--neutral-700)}
.ho-comp-dot{width:11px;height:11px;border-radius:50%;flex:none}
.ho-comp-lbl{white-space:nowrap}
.ho-comp-n{font-size:1.35rem;font-weight:800;margin-left:4px}
.ho-calc-head{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 30px;font-size:.92rem;color:var(--neutral-700);background:var(--sand-100);border:1px solid var(--sand-200);border-radius:10px;padding:12px 18px;margin-bottom:14px}
.ho-calc-deck{display:inline-flex;align-items:center;gap:7px}
.ho-calc-deck i{color:var(--neutral-400)}
.ho-calc-deck b{font-weight:800;color:var(--neutral-900)}
.ho-calc-draw{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.ho-drawn{width:60px;border:1px solid var(--sand-300);border-radius:8px;padding:5px 8px;text-align:center;font-weight:800;font-size:1rem;color:var(--neutral-900);background:#fff}
.ho-drawn:focus{outline:none;border-color:var(--primary-400)}
.ho-ab{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.ho-ab>span{font-size:.78rem;font-weight:700;color:var(--neutral-500);width:14px}
.ho-ab>.ts-wrapper{flex:1}
.ho-opt{display:flex;align-items:center;gap:9px}
.ho-thumb{width:34px;height:47px;object-fit:cover;border-radius:4px;flex:none;background:var(--sand-200)}
.ho-thumb-uniq{display:inline-block;overflow:hidden}
.ho-opt-l{font-size:.82rem;line-height:1.2}
.ho-item{background:var(--sand-200);border-radius:4px;padding:1px 7px;background-size:cover!important;background-position:right center!important;color:var(--neutral-800);font-weight:600;font-size:.8rem}
.ho-optgroup-h{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--neutral-500);padding:6px 9px 3px;border-top:1px solid var(--sand-200)}
.hand-odds-x{display:flex;gap:16px;align-items:flex-start;margin-top:18px}
.ncalc{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--sand-50);border:1px solid var(--sand-200);border-radius:12px;padding:16px;min-height:320px}
.nc-head{text-align:center;font-size:.9rem;font-weight:600;color:var(--neutral-600)}
.nc-bars{margin:10px 0}
.nc-bar{display:flex;align-items:center;gap:9px;font-size:.82rem;margin:6px 0}
.nc-bar-l{width:34px;white-space:nowrap;font-weight:700;color:var(--neutral-600);text-align:right;flex:none}
.nc-bar-track{flex:1;height:10px;background:var(--sand-200);border-radius:5px;overflow:hidden}
.nc-bar-track>i{display:block;height:100%;width:0;background:#2f7d57;border-radius:5px;transition:width .15s}
.nc-bar-v{width:42px;text-align:right;font-weight:700;color:var(--neutral-700);flex:none}
.nc-mid{text-align:center;font-size:.8rem;color:var(--neutral-500);margin:6px 0}
.nc-foot{text-align:center;font-size:.84rem;color:var(--neutral-600);margin-top:auto;padding-top:12px}
.nc-ratio{text-align:center;font-size:.78rem;color:var(--neutral-500);min-height:1.1em;margin-top:3px}
@media (max-width:820px){ .hand-odds-x{flex-direction:column;align-items:stretch} }
/* ── Playtest sandbox ─────────────────────────────────────────────────── */
.pt-phase-hint{font-size:.8rem;color:var(--neutral-600);margin-left:10px}
.pt-table{display:flex;gap:12px}
/* playground collapse/expand: animate the height (grid-rows) so the hand glides
   instead of jumping, plus a fade + upward drift ("back under the toolbar") */
.pt-table-wrap{display:grid;grid-template-rows:1fr;opacity:1;margin-bottom:14px;overflow:hidden;transition:grid-template-rows .34s ease,opacity .26s ease,margin-bottom .34s ease}
.pt-table-wrap > .pt-table{min-height:0;transition:transform .3s ease}
.pt-root.pt-simple .pt-table-wrap{grid-template-rows:0fr;opacity:0;margin-bottom:0}
.pt-root.pt-simple .pt-table-wrap > .pt-table{transform:translateY(-14px)}
@media (prefers-reduced-motion: reduce){ .pt-table-wrap,.pt-table-wrap > .pt-table{transition:none} }
.pt-zone{border:1px solid var(--sand-300);border-radius:10px;padding:10px;background:rgba(0,0,0,.02)}
.pt-zone-label{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--neutral-500);margin-bottom:8px}
.pt-board{flex:1 1 auto;min-height:220px;position:relative}
.pt-aside{flex:0 0 auto;display:flex;flex-direction:column;gap:10px}
.pt-resources-row{display:flex;gap:14px;align-items:flex-start;justify-content:flex-end}
.pt-mana{position:absolute;bottom:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:#2f7d57;color:#fff;border-radius:16px;padding:5px 12px;font-weight:700;cursor:pointer;user-select:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pt-mana-count{background:rgba(255,255,255,.25);border-radius:10px;padding:0 8px}
.pt-hand-actions{margin:10px 0}
/* keep the hand a droppable target even when empty (so board cards can return) */
#hand-cards{min-height:130px}
#hand-cards:empty{border:2px dashed var(--sand-300);border-radius:10px}

/* card flip */
.pt-card{perspective:700px;background:transparent;user-select:none;-webkit-user-select:none}
.pt-flip{position:relative;width:100%;aspect-ratio:63.5/88;transform-style:preserve-3d;transition:transform .4s ease;pointer-events:none}
.pt-card.pt-flipped .pt-flip{transform:rotateY(180deg)}
.pt-face{position:absolute;inset:0;border-radius:8px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pt-front{background:transparent}
.pt-back{transform:rotateY(180deg);background:url('img/ALT_OFFICIAL_CARDBACK.png') center/cover no-repeat var(--neutral-100)}
.pt-loupe{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;cursor:pointer;padding:0}

/* fly-out to mana */
@keyframes ptToMana{to{opacity:0;transform:translateY(40px) scale(.6)}}
.pt-to-mana{animation:ptToMana .3s ease forwards}

/* list modal */
.ac-list-panel{background:var(--sand-50);border-radius:12px;max-width:460px;width:92%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.ac-list-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--sand-200);font-weight:700}
.ac-list-body{overflow:auto;padding:8px 12px}
.ac-list-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--sand-100)}
.ac-list-thumb{width:34px;height:47px;object-fit:cover;border-radius:4px;flex:0 0 auto;display:block;overflow:hidden}
.ac-list-name{flex:1;font-size:.85rem}

@media (max-width:720px){
  /* Hand-only mode (playground toggled off): fan the 6 cards, hide the playground bits */
  .pt-root.pt-simple .pt-table-wrap,
  .pt-root.pt-simple .pt-hand-actions,
  .pt-root.pt-simple #pt-phase-hint{ display:none !important; }
  .pt-root.pt-simple #hand-cards.hand-cards-grid{ display:flex; flex-wrap:nowrap; justify-content:center; gap:0; overflow:visible; }
  .pt-root.pt-simple #hand-cards .pt-card{ width:88px; flex:0 0 auto; margin-right:-34px; touch-action:auto; }
  .pt-root.pt-simple #hand-cards .pt-card:last-child{ margin-right:0; }

  /* Playground ON (mobile): vertical layout + compact resources; tap action-sheet, no drag */
  .pt-root:not(.pt-simple) .pt-table{ flex-direction:column; gap:10px; }
  .pt-root:not(.pt-simple) .pt-board{ min-height:118px; }
  .pt-root:not(.pt-simple) .pt-resources-row{ justify-content:flex-start; gap:12px; }
  .pt-root:not(.pt-simple) .pt-deck-pile,
  .pt-root:not(.pt-simple) .pt-discard-pile{ width:84px; height:118px; }
  .pt-root:not(.pt-simple) .pt-discard-pile .deck-card-img,
  .pt-root:not(.pt-simple) .pt-discard-pile altered-card{ width:84px; height:118px; }
  .pt-root:not(.pt-simple) #hand-cards.hand-cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .pt-root:not(.pt-simple) .pt-board-cards .pt-card{ width:58px; }
  .pt-root:not(.pt-simple) .pt-board-cards.pt-overlap .pt-card{ width:58px; margin-right:-28px; }

  /* mobile always uses the action sheet → per-card buttons hidden (hand + board) */
  .pt-root .pt-loupe,
  .pt-root .pt-tomana{ display:none !important; }
}
/* Mobile action sheet (tap-to-act, replaces drag on touch) */
.pt-sheet-backdrop{position:fixed;inset:0;z-index:1080;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.pt-sheet-backdrop.pt-sheet-open{opacity:1}
.pt-sheet{width:100%;max-width:480px;background:var(--sand-50);border-radius:14px 14px 0 0;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;transform:translateY(100%);transition:transform .22s ease;box-shadow:0 -4px 20px rgba(0,0,0,.25)}
.pt-sheet-backdrop.pt-sheet-open .pt-sheet{transform:none}
.pt-sheet-btn{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;border:none;border-radius:10px;background:var(--sand-100);color:var(--neutral-800);font-size:.95rem;font-weight:600;text-align:left;cursor:pointer}
.pt-sheet-btn i{width:18px;text-align:center;color:var(--neutral-500)}
.pt-sheet-btn:active{background:var(--sand-200)}
.pt-sheet-cancel{background:transparent;color:var(--neutral-500);font-weight:500;justify-content:center}
.pt-sheet-cancel i{display:none}
@media (prefers-reduced-motion: reduce){ .pt-sheet-backdrop,.pt-sheet{transition:none} }
/* Playground toggled off (desktop): hand-only view, tap = zoom */
.pt-root.pt-simple .pt-hand-actions,
.pt-root.pt-simple #pt-phase-hint{ display:none !important; }
.pt-root.pt-simple #hand-cards .pt-loupe,
.pt-root.pt-simple #hand-cards .pt-tomana{ display:none; }
@media (prefers-reduced-motion: reduce){
  .pt-flip{transition:none}
  .pt-to-mana{animation:none;opacity:0}
}

/* ── Étape 3: deck pile + draw buttons + to-mana icon + draw animation ─── */
#pt-deck{position:relative}
.pt-deck-pile{position:relative;width:132px;height:184px;border-radius:8px;
  background:url('img/ALT_OFFICIAL_CARDBACK.png') center/cover no-repeat var(--neutral-100);
  box-shadow:2px 2px 0 var(--neutral-300),4px 4px 0 var(--neutral-200);margin:4px 0 8px}
.pt-deck-count{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.72);color:#fff;font-size:.72rem;font-weight:700;border-radius:5px;padding:1px 6px}
/* click the deck to draw a card; a "Draw" hint appears on hover (play phase only) */
.pt-play #pt-deck{cursor:pointer}
.pt-deck-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-weight:700;font-size:.85rem;border-radius:8px;opacity:0;transition:opacity .15s;pointer-events:none}
.pt-play #pt-deck:hover .pt-deck-hint,.pt-play #pt-deck:focus-visible .pt-deck-hint{opacity:1}
.pt-deck.pt-empty{cursor:default}
.pt-deck.pt-empty .pt-deck-hint{display:none}
.pt-tomana{position:absolute;bottom:6px;right:6px;z-index:2;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:#2f7d57;color:#fff;display:none;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;padding:0}
.pt-play #hand-cards .pt-tomana{display:flex}
@keyframes ptDrawIn{from{opacity:0;transform:translateY(-24px) scale(.85)}to{opacity:1;transform:none}}
.pt-draw-anim{animation:ptDrawIn .3s ease both}
@media (prefers-reduced-motion: reduce){ .pt-draw-anim{animation:none} }

/* ── Étape 4: board, discard, drag visuals ─────────────────────────────── */
.pt-board-cards{display:flex;flex-wrap:wrap;gap:6px;min-height:96px}
.pt-board-cards .pt-card{width:70px}
.pt-board-cards.pt-overlap{flex-wrap:nowrap;overflow:hidden}
.pt-board-cards.pt-overlap .pt-card{width:70px;margin-right:-34px}
.pt-board-more{font-size:.7rem;margin-left:8px}
.pt-discard{position:relative}
.pt-discard-pile{position:relative;width:132px;height:184px;border-radius:8px;background:rgba(0,0,0,.04)}
.pt-discard-pile .deck-card-img,.pt-discard-pile altered-card{display:block;width:132px;height:184px;border-radius:8px;overflow:hidden}
.pt-discard-pile.pt-stacked{box-shadow:2px 2px 0 var(--neutral-300),4px 4px 0 var(--neutral-200)}
.pt-discard-count{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.72);color:#fff;font-size:.72rem;font-weight:700;border-radius:5px;padding:1px 6px}
.pt-card{touch-action:none}
.pt-dragging{z-index:50;opacity:.92;cursor:grabbing}
.pt-drop-hover{outline:2px dashed var(--primary-400);outline-offset:-3px;border-radius:10px}

/* ── Opening hand stats — detailed blocks ─────────────────────────────── */
.ohs-section{margin-top:28px}
/* Stat cards size to their own content (a single expanded "see details" no longer stretches
   its row-mates); .ohs-head keeps a fixed height so headers + the hr line stay aligned. */
.ohs-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:start}
/* row 1 = three cards (span 2 of 6); row 2 = two cards filling the width (span 3 of 6) */
.ohs-grid > .ohs-block{grid-column:span 2}
.ohs-grid > .ohs-block:nth-child(n+4){grid-column:span 3}
@media (max-width:1100px){ .ohs-grid{grid-template-columns:1fr 1fr} .ohs-grid > .ohs-block,.ohs-grid > .ohs-block:nth-child(n+4){grid-column:auto} }
.ohs-block-comp{display:flex;flex-direction:column}
/* Compact donut + legend. Small enough to fit the card's base height (and stay side-by-side in
   the builder's narrow 3-col column); wraps to a tidy stack only if the column gets really tight. */
.ohs-block-comp .ho-comp-body{flex:1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:6px}
.ohs-block-comp .ho-comp-legend{flex:0 1 auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.ohs-block-comp .ho-donut{width:62px;height:62px}
.ohs-block-comp .ho-comp-item{font-size:.82rem;gap:6px}
.ohs-block-comp .ho-comp-n{font-size:1rem;margin-left:2px}
/* Deck detail page is full-width — give the composition card a roomier donut + legend. */
#deck-hand-view .ohs-block-comp .ho-comp-body{gap:16px 26px}
#deck-hand-view .ohs-block-comp .ho-donut{width:96px;height:96px}
#deck-hand-view .ohs-block-comp .ho-comp-item{font-size:.9rem;gap:8px}
#deck-hand-view .ohs-block-comp .ho-comp-n{font-size:1.35rem;margin-left:4px}
/* Mobile: cards stack full-width, so the composition gets room for the bigger donut + legend too. */
@media (max-width:820px){
    .ohs-block-comp .ho-comp-body{gap:16px 26px}
    .ohs-block-comp .ho-donut{width:96px;height:96px}
    .ohs-block-comp .ho-comp-item{font-size:.9rem;gap:8px}
    .ohs-block-comp .ho-comp-n{font-size:1.35rem;margin-left:4px}
}
/* Deck builder: the starting-hand block sits in the main content pane (full width). */
#db-search-pane-hand .hand-odds{margin-top:0}
/* All cards share a base height so a row looks even when collapsed; min-height (not a fixed
   height) lets a single expanded "see details" grow on its own without stretching its row-mates. */
.ohs-block{background:var(--sand-50);border:1px solid var(--sand-200);border-radius:12px;padding:16px;min-height:260px}
.ohs-b-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--primary-500);margin-bottom:4px}
.ohs-b-sub{font-size:.85rem;color:var(--neutral-600);line-height:1.35;margin-bottom:10px;min-height:2.6em}
.ohs-head{min-height:112px;display:flex;flex-direction:column;justify-content:center}
.ohs-highlights{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.ohs-hl{flex:1;min-width:130px;background:var(--sand-100);border:1px solid var(--sand-200);border-radius:10px;padding:11px 13px}
.ohs-hl-l{font-size:.82rem;color:var(--neutral-600)}
.ohs-hl-v{font-size:1.7rem;font-weight:800;color:var(--neutral-800);line-height:1.15;margin:1px 0}
.ohs-hl--warn .ohs-hl-v{color:var(--primary-500)}
.ohs-hl-note{font-size:.74rem;color:var(--neutral-500);line-height:1.3}
.ohs-big-v{font-size:2rem;font-weight:800;color:var(--neutral-800);line-height:1}
.ohs-hl-v [data-bs-toggle],.ohs-big-v [data-bs-toggle]{cursor:help}
.ohs-big-note{font-size:.85rem;color:var(--neutral-600);line-height:1.35;margin:6px 0 0}
.ohs-toggle{display:flex;align-items:center;gap:7px;width:100%;margin-top:12px;padding:11px 0 0;border:none;border-top:1px solid var(--sand-200);background:none;color:var(--neutral-500);font-size:.82rem;font-weight:600;cursor:pointer}
.ohs-caret{font-size:.68rem;transition:transform .15s}
.ohs-toggle[aria-expanded="false"] .ohs-caret{transform:rotate(180deg)}
.ohs-d-label{font-size:.8rem;color:var(--neutral-500);margin:10px 0 8px}
.ohs-bars{display:flex;flex-direction:column;gap:7px}
.ohs-bar{display:flex;align-items:center;gap:10px;font-size:.82rem}
.ohs-bar-l{width:62px;flex:none;color:var(--neutral-600)}
.ohs-bars--wide .ohs-bar-l{width:132px}
.ohs-bar-t{flex:1;height:9px;background:var(--sand-200);border-radius:5px;overflow:hidden}
.ohs-bar-t>i{display:block;height:100%;background:#2f7d57;border-radius:5px}
.ohs-bar--warn .ohs-bar-t>i{background:var(--primary-400)}
.ohs-bar-v{width:48px;flex:none;text-align:right;font-weight:600;color:var(--neutral-700)}
@media (max-width:820px){ .ohs-grid{grid-template-columns:1fr} }