/* ════════════════════════════════════════════════════════════════
   cards-engine.css — unified card engine styles (all games)
   Themed via CSS variables injected per game:
     --ce-primary  --ce-accent  --ce-surface  --ce-panel
     --ce-border   --ce-text    --ce-muted
   ════════════════════════════════════════════════════════════════ */

.ce-root {
  background: var(--ce-surface, #0d1117);
  color: var(--ce-text, #e6edf3);
  min-height: 100vh;
  padding-bottom: 80px;
}
.ce-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ── Deck summary bar (builder) — classic-style sticky top menu ──
   Always-visible: name + save/download + counts + complete + Builder toggle.
   Pinned above the pool's search head and the deck panel; its live height is
   mirrored into --ce-summary-h so both dock right below it (one page scroll). */
.ce-summary {
  position: sticky; top: 0; z-index: 60;
  background: var(--ce-surface, #0d1117);
  border-bottom: 1px solid var(--ce-border, #30363d);
  padding: 8px 0 6px;
}
.ce-summary__row {
  display: flex; align-items: center; gap: 8px;
}
.ce-summary__row + .ce-summary__row { margin-top: 5px; }
.ce-summary__name {
  flex: 1 1 auto; min-width: 0;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  border-radius: 8px; color: var(--ce-text, #e6edf3);
  font-size: .95rem; font-weight: 800; padding: 7px 10px; outline: none;
}
.ce-summary__name:focus { border-color: var(--ce-accent, #58a6ff); }
.ce-summary__btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ce-border, #30363d);
  background: var(--ce-panel, #161b22); color: var(--ce-text, #e6edf3);
  font-size: .85rem; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.ce-summary__btn.save { background: var(--ce-accent, #00abe4); border-color: var(--ce-accent, #00abe4); color: #fff; }
.ce-summary__btn:disabled { opacity: .5; cursor: default; }
.ce-summary__counts {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; font-size: .78rem; font-weight: 700; color: var(--ce-text, #e6edf3);
}
.ce-summary__counts .ce-sum-issues {
  flex-basis: 100%; font-size: .7rem; font-weight: 700; color: #d97706;
}
.ce-summary__counts .ce-sum-issues:empty { display: none; }

/* ── Pool head (toolbar + filter panel) — NOT sticky (owner request:
   only the summary bar pins; search/filter scrolls with the page). ── */
.ce-stickyhead {
  position: static;
  background: var(--ce-surface, #0d1117);
  display: flex; flex-direction: column;
}

/* ── Toolbar ── */
.ce-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--ce-border, #30363d);
}
.ce-searchwrap {
  position: relative; flex: 1 1 260px; min-width: 200px;
}
.ce-searchwrap i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ce-muted, #8b949e); font-size: .85rem; pointer-events: none;
}
.ce-q {
  width: 100%; padding: 9px 12px 9px 34px;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  border-radius: 8px; color: var(--ce-text, #e6edf3);
  font-size: .9rem; outline: none;
  transition: border-color .15s;
}
.ce-q:focus { border-color: var(--ce-accent, #58a6ff); }
.ce-q::placeholder { color: var(--ce-muted, #8b949e); }

.ce-filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 8px;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  color: var(--ce-text, #e6edf3); font-size: .85rem; cursor: pointer;
  transition: border-color .15s;
}
.ce-filter-toggle:hover { border-color: var(--ce-accent, #58a6ff); }
.ce-filter-count { color: var(--ce-accent, #58a6ff); font-weight: 700; }

/* Builder ON/OFF pill (classic-style). ON = accent, OFF = grey browse mode */
.ce-bmode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; border: none;
  background: var(--ce-accent, #58a6ff); color: #fff;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.ce-bmode:hover { opacity: .85; }
.ce-bmode__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; display: inline-block;
}
.ce-bmode.off { background: #475569; }
.ce-bmode.off:hover { background: #334155; opacity: 1; }

.ce-sort {
  padding: 9px 10px; border-radius: 8px;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  color: var(--ce-text, #e6edf3); font-size: .85rem; cursor: pointer;
}
.ce-count {
  margin-left: auto; font-size: .8rem; color: var(--ce-muted, #8b949e);
  white-space: nowrap;
}

/* ── Filter bar (inside sticky head — visible no matter how deep
      the user has scrolled when they hit the Filters button) ── */
.ce-filterbar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 16px;
  padding: 14px;
  margin: 10px 0;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  border-radius: 12px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
/* display:grid above would defeat the hidden attribute's UA rule —
   restore correct toggle behavior */
.ce-filterbar[hidden] { display: none; }
.ce-f--multi { grid-column: 1 / -1; }
.ce-f__label {
  display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--ce-muted, #8b949e); margin-bottom: 6px;
}
.ce-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-chip {
  --chip-c: var(--ce-accent, #58a6ff);
  padding: 5px 12px; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ce-border, #30363d);
  color: var(--ce-text, #e6edf3);
  font-size: .8rem; cursor: pointer;
  transition: all .12s;
}
.ce-chip:hover { border-color: var(--chip-c); }
.ce-chip.on {
  background: var(--chip-c); border-color: var(--chip-c);
  color: #fff; font-weight: 700;
}
.ce-f__select, .ce-f__text {
  width: 100%; padding: 7px 10px; border-radius: 7px;
  background: var(--ce-surface, #0d1117);
  border: 1px solid var(--ce-border, #30363d);
  color: var(--ce-text, #e6edf3); font-size: .85rem; outline: none;
}
.ce-f__select:focus, .ce-f__text:focus { border-color: var(--ce-accent, #58a6ff); }
/* ── Dual-handle range slider (Piltover-style) ── */
.ce-dualrange { position: relative; height: 40px; padding-top: 18px; }
.ce-dualrange__label {
  position: absolute; top: 0; right: 0;
  font-size: .72rem; color: var(--ce-muted, #8b949e);
  font-family: ui-monospace, monospace;
}
.ce-dualrange__label.on { color: var(--ce-accent, #58a6ff); font-weight: 700; }
.ce-dualrange__track {
  position: absolute; left: 0; right: 0; top: 26px; height: 4px;
  background: var(--ce-border, #30363d); border-radius: 999px;
}
.ce-dualrange__fill {
  position: absolute; top: 0; height: 100%;
  background: var(--ce-accent, #58a6ff); border-radius: 999px;
}
.ce-dualrange input[type="range"] {
  position: absolute; left: 0; right: 0; top: 18px; width: 100%;
  margin: 0; height: 20px;
  -webkit-appearance: none; appearance: none;
  background: none; pointer-events: none; outline: none;
}
.ce-dualrange input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ce-text, #e6edf3);
  border: 3px solid var(--ce-accent, #58a6ff);
  cursor: grab; pointer-events: auto;
  transition: transform .1s;
}
.ce-dualrange input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ce-dualrange input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.ce-dualrange input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ce-text, #e6edf3);
  border: 3px solid var(--ce-accent, #58a6ff);
  cursor: grab; pointer-events: auto;
}
.ce-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; cursor: pointer; color: var(--ce-text, #e6edf3);
  padding-top: 4px;
}
.ce-toggle input { width: 16px; height: 16px; accent-color: var(--ce-accent, #58a6ff); }
.ce-clear {
  align-self: end; justify-self: start;
  padding: 7px 14px; border-radius: 7px;
  background: transparent; border: 1px dashed var(--ce-border, #30363d);
  color: var(--ce-muted, #8b949e); font-size: .8rem; cursor: pointer;
}
.ce-clear:hover { color: var(--ce-text, #e6edf3); border-color: var(--ce-muted, #8b949e); }

/* ── Card grid ── */
.ce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  padding: 18px 0;
}
.ce-card {
  margin: 0; cursor: pointer; border-radius: 10px; overflow: hidden;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  transition: transform .12s, border-color .12s, box-shadow .12s;
  outline: none;
}
.ce-card:hover, .ce-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--ce-accent, #58a6ff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.ce-card img { width: 100%; display: block; aspect-ratio: 63/88; object-fit: cover; }
.ce-card__noimg {
  aspect-ratio: 63/88; display: flex; align-items: center; justify-content: center;
  padding: 10px; text-align: center; font-size: .75rem;
  color: var(--ce-muted, #8b949e);
  background: repeating-linear-gradient(45deg,
    var(--ce-panel, #161b22), var(--ce-panel, #161b22) 10px,
    var(--ce-surface, #0d1117) 10px, var(--ce-surface, #0d1117) 20px);
}
.ce-card__cap {
  padding: 5px 8px; font-size: .65rem; text-align: center;
  color: var(--ce-muted, #8b949e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ce-loading, .ce-empty, .ce-error {
  grid-column: 1 / -1; text-align: center; padding: 60px 0;
  color: var(--ce-muted, #8b949e); font-size: .95rem;
}
.ce-error a { color: var(--ce-accent, #58a6ff); }
.ce-sentinel { height: 1px; }

/* ── Builder layout (grid + deck panel) ── */
.ce-body--builder {
  display: grid; grid-template-columns: 1fr 6px 300px; gap: 8px;
  align-items: start;
}
.ce-split {
  position: relative; align-self: stretch;
  width: 6px; min-height: 120px; margin-top: 14px;
  border-radius: 3px; cursor: col-resize;
  background: var(--ce-border, #30363d);
  transition: background .12s;
  touch-action: none;
}
.ce-split:hover, .ce-split.dragging { background: var(--ce-accent, #58a6ff); }
/* ── Mobile tab bar (builder) — Piltover-style view switcher ── */
.ce-mobiletabs { display: none; }

@media (max-width: 860px) {
  .ce-split { display: none; }
  .ce-mobiletabs { display: none !important; }

  /* Owner request: ONE page scrollbar (not an inner-scrolling pane). The deck
     pins to the top of the viewport while the gallery flows beneath it and the
     whole page scrolls — so adding/removing a card is always visible. The deck
     keeps a capped height with its own internal scroll when the list is long. */
  .ce-body--builder {
    display: flex; flex-direction: column; gap: 0;
    align-items: stretch;          /* panes fill the full width (was: start → empty right) */
  }

  /* TOP — deck, pinned to viewport top; opaque so the gallery scrolls under it.
     Selector is .ce-body--builder .ce-deck (not bare .ce-deck) so it outranks
     the desktop base .ce-deck block, which appears LATER in the file and would
     otherwise win on top/margin/max-height (media queries add no specificity). */
  /* Only the summary bar pins (owner request). The deck is NOT sticky — it
     sits above the gallery and scrolls off with the page; the full decklist
     shows (no inner-scroll cap). */
  .ce-body--builder .ce-deck {
    order: -1; position: static;
    margin: 0 0 8px; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--ce-panel, #161b22);
  }
  .ce-deck__tabs { display: flex; }                       /* Deck / Stats toggle stays */
  .ce-deck__hint { display: none; }                       /* hint not needed on mobile */
  .ce-deck__list, .ce-deck__stats {
    flex: 1; min-height: 0; max-height: none; overflow-y: auto;
  }
  /* dense thumbnails — a touch bigger than before per request */
  .ce-deck__grid:not(.ce-deck__grid--fixed) {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 4px;
  }
  .ce-deck__cellqty { min-width: 16px; height: 16px; padding: 0 4px; font-size: .6rem; }

  /* BOTTOM — gallery in normal flow; the page (not the pane) scrolls. The
     search/filter head stays sticky, but docked right BELOW the pinned deck
     (--ce-deck-h mirrors the deck's live height via JS). z-index below the
     deck so the deck always wins if they ever touch. */
  .ce-main { min-height: 0; }
  .ce-stickyhead { position: static; }

  /* Small screens: smaller pool thumbnails → more cards per row. */
  .ce-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px; padding: 10px 0;
  }

  .ce-footer { display: none; }   /* legal text not needed in the builder */
}
.ce-deck {
  /* Only the summary bar is sticky (owner request) — the deck panel itself
     scrolls with the page, so the full decklist isn't pinned. */
  position: static;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  border-radius: 12px;
  margin-top: 14px;
  display: flex; flex-direction: column;
}
.ce-deck__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--ce-border, #30363d);
}
.ce-deck__title {
  font-size: .9rem; font-weight: 800; color: var(--ce-text, #e6edf3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ce-deck__title i { color: var(--ce-accent, #58a6ff); margin-right: 4px; }
.ce-deck__status {
  flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; cursor: help; white-space: nowrap;
}
.ce-deck__status.ok   { background: rgba(22,163,74,.18);  color: #4ade80; border: 1px solid rgba(74,222,128,.45); }
.ce-deck__status.warn { background: rgba(245,158,11,.16); color: #fbbf24; border: 1px solid rgba(251,191,36,.45); }
.ce-deck__list { flex: 1; overflow-y: auto; padding: 6px 8px; }
.ce-deck__empty { padding: 28px 12px; text-align: center; font-size: .8rem; color: var(--ce-muted, #8b949e); }
.ce-deck__row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 7px; cursor: pointer;
  font-size: .8rem; color: var(--ce-text, #e6edf3);
  transition: background .1s;
}
.ce-deck__rowimg {
  flex-shrink: 0; width: 34px; height: 47px;
  border-radius: 4px; object-fit: cover;
  border: 1px solid var(--ce-border, #30363d);
  background: var(--ce-surface, #0d1117);
}
.ce-deck__rowimg--none {
  display: inline-block;
  background: repeating-linear-gradient(45deg,
    var(--ce-panel, #161b22), var(--ce-panel, #161b22) 5px,
    var(--ce-surface, #0d1117) 5px, var(--ce-surface, #0d1117) 10px);
}
.ce-deck__row:hover { background: rgba(248, 81, 73, .12); }
.ce-deck__row:hover .ce-deck__rowdel { opacity: 1; }
.ce-deck__rowqty {
  flex-shrink: 0; min-width: 22px; text-align: center;
  font-weight: 800; color: var(--ce-accent, #58a6ff);
  font-family: ui-monospace, monospace;
}
.ce-deck__rowcost {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ce-surface, #0d1117);
  border: 1px solid var(--ce-border, #30363d);
  font-size: .68rem; font-weight: 700;
}
.ce-deck__rowname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-deck__rowdel { flex-shrink: 0; opacity: 0; color: #f85149; font-size: .7rem; transition: opacity .1s; }
.ce-deck__hint {
  padding: 8px 14px; font-size: .68rem; color: var(--ce-muted, #8b949e);
  border-top: 1px solid var(--ce-border, #30363d);
}

/* ── Deck panel tabs + toolbar (status chip lives in the tab row) ── */
.ce-deck__tabs {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--ce-border, #30363d);
}
.ce-deck__tabs .ce-deck__status { margin-left: auto; margin-right: 10px; }
.ce-dtab {
  flex: 0 0 auto; padding: 10px 16px; border: none; cursor: pointer;
  background: transparent; color: var(--ce-muted, #8b949e);
  font-size: .8rem; font-weight: 700;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.ce-dtab.on { color: var(--ce-accent, #58a6ff); border-bottom-color: var(--ce-accent, #58a6ff); }
.ce-dtab:hover { color: var(--ce-text, #e6edf3); }

/* Deck sort lives in the tabs row, right of the status chip (its own
   toolbar row was removed to reclaim vertical space). */
.ce-deck__tabs .ce-dsort { margin-right: 10px; flex-shrink: 0; }
.ce-dsort[hidden] { display: none; }
.ce-dsort {
  border: 1px solid var(--ce-border, #30363d);
  background: var(--ce-panel, #161b22); color: var(--ce-text, #e6edf3);
  border-radius: 6px; padding: 3px 6px; font-size: .72rem; cursor: pointer;
  max-width: 110px;
}

/* ── Deck zones (Partner / Case / Main) ── */
.ce-deck__zone { margin-bottom: 10px; }
/* Inline zones (Partner + Case).
   Desktop: the deck panel is a narrow sidebar, so they sit side-by-side in
   a row ON TOP of the main deck (classic layout).
   Mobile (<860px, media block below): they move into a narrow LEFT column
   with the main deck beside them, keeping the pinned panel short:
     PARTNER | MAIN DECK
     CASE    |            */
.ce-deck__zoneside { display: flex; gap: 8px; margin-bottom: 10px; }
.ce-deck__zoneside > .ce-deck__zone { flex: 1; min-width: 0; }
.ce-deck__zonemain { min-width: 0; }

/* NOTE: this media block must stay BELOW the base zone rules above — same
   specificity, so source order decides (this file bit us on that before). */
@media (max-width: 860px) {
  .ce-deck__zonecols { display: flex; gap: 8px; align-items: flex-start; }
  .ce-deck__zoneside {
    flex: 0 0 96px; flex-direction: column; margin-bottom: 0;
  }
  .ce-deck__zonemain { flex: 1; }
  /* Compact zone headers so "PARTNER 1/1" fits the 96px column */
  .ce-deck__zoneside .ce-deck__zonehd { padding: 4px 6px; gap: 4px; font-size: .6rem; }
  .ce-deck__zoneside .ce-deck__zonecount { padding: 0 5px; font-size: .62rem; }
  .ce-deck__zoneside .ce-deck__zoneempty { padding: 10px 4px; font-size: .62rem; }
}
.ce-deck__zonehd {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; margin: 0 2px 4px;
  border-radius: 6px; background: rgba(255, 255, 255, .04);
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ce-text, #e6edf3);
}
.ce-deck__zonelabel { flex: 1; }
.ce-deck__zonecount {
  font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 10px; font-size: .72rem;
}
.ce-deck__zonecount.ok   { color: #22c55e; background: rgba(34, 197, 94, .14); }
.ce-deck__zonecount.warn { color: #f59e0b; background: rgba(245, 158, 11, .14); }
.ce-deck__zoneempty {
  margin: 2px; padding: 14px 10px; text-align: center;
  font-size: .74rem; color: var(--ce-muted, #8b949e);
  border: 1px dashed var(--ce-border, #30363d); border-radius: 8px;
}

/* ── Deck grid view ── */
/* Deck thumbnails: small + dense, auto-fitting the panel width (the manual
   column selector was removed). */
.ce-deck__grid {
  display: grid; gap: 6px; padding: 2px;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
/* Inline single-card zones (Partner/Case): one compact thumbnail, capped
   so the special slots don't dwarf the main deck below (a full half-row
   card forced constant scrolling to reach the deck list). */
.ce-deck__grid--fixed { grid-template-columns: minmax(0, 88px); }
.ce-deck__cell {
  position: relative; margin: 0; cursor: pointer;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--ce-border, #30363d);
  transition: transform .1s, border-color .1s;
}
.ce-deck__cell:hover { transform: translateY(-2px); border-color: #f85149; }
.ce-deck__cell img { width: 100%; display: block; aspect-ratio: 63/88; object-fit: cover; }
.ce-deck__cellnoimg {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 63/88; padding: 4px; text-align: center;
  font-size: .55rem; color: var(--ce-muted, #8b949e);
  background: var(--ce-surface, #0d1117);
}
.ce-deck__cellqty {
  position: absolute; bottom: 3px; right: 3px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ce-accent, #58a6ff); color: #fff;
  font-size: .7rem; font-weight: 800;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

/* ℹ button in deck panel (rows + grid cells) */
.ce-deck__info {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: .78rem; font-style: italic; font-weight: 800; font-family: serif;
  display: flex; align-items: center; justify-content: center;
  opacity: .6; transition: opacity .12s, background .12s;
}
.ce-deck__row:hover .ce-deck__info,
.ce-deck__cell:hover .ce-deck__info { opacity: 1; }
.ce-deck__info:hover { background: var(--ce-accent, #58a6ff); border-color: #fff; }
.ce-deck__cell .ce-deck__info {
  position: absolute; top: 3px; right: 3px;
}

/* ── Deck stats ── */
.ce-deck__stats { flex: 1; overflow-y: auto; padding: 12px; }
.ce-statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 8px; }
.ce-text__label {
  font-size: .62rem; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ce-accent, #58a6ff);
  margin-bottom: 4px;
}
.ce-statcard {
  background: var(--ce-surface, #0d1117);
  border: 1px solid var(--ce-border, #30363d);
  border-radius: 10px; padding: 10px 6px; text-align: center;
}
.ce-statcard__v { font-size: 1.25rem; font-weight: 800; color: var(--ce-text, #e6edf3); }
.ce-statcard__k {
  font-size: .58rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ce-muted, #8b949e); margin-top: 2px;
}
.ce-statsec { margin-top: 14px; }
.ce-statsec__t {
  font-size: .7rem; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ce-muted, #8b949e); margin-bottom: 8px;
}
.ce-curve {
  display: flex; align-items: flex-end; gap: 4px; height: 110px;
  background: var(--ce-surface, #0d1117);
  border: 1px solid var(--ce-border, #30363d);
  border-radius: 10px; padding: 10px 8px 6px;
}
.ce-curve__col { flex: 1; display: flex; flex-direction: column; height: 100%; }
.ce-curve__qty {
  font-size: .6rem; text-align: center; color: var(--ce-muted, #8b949e);
  height: 14px; flex-shrink: 0;
}
.ce-curve__bar {
  flex: 1; display: flex; flex-direction: column-reverse;
  border-radius: 3px; overflow: hidden;
}
.ce-curve__seg { width: 100%; min-height: 2px; }
.ce-curve__x {
  font-size: .6rem; text-align: center; color: var(--ce-muted, #8b949e);
  height: 14px; flex-shrink: 0; font-family: ui-monospace, monospace;
}
/* Donut sections flow into a responsive grid so several share a row instead
   of each taking a full-width line (auto-fit: 3-up on wide/tablet, 1-up on a
   narrow phone). margin-top is zeroed because the grid gap handles spacing. */
.ce-statdonuts {
  display: grid; gap: 6px 16px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ce-statdonuts .ce-statsec { margin-top: 0; }
.ce-donutwrap { display: flex; align-items: center; gap: 12px; }
.ce-donut { width: 92px; height: 92px; flex-shrink: 0; }
.ce-donut__total { font-size: 22px; font-weight: 800; fill: var(--ce-text, #e6edf3); }
.ce-donut__legend { flex: 1; font-size: .72rem; color: var(--ce-text, #e6edf3); }
.ce-donut__legend div { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.ce-donut__legend b { margin-left: auto; color: var(--ce-muted, #8b949e); }
.ce-donut__dot {
  width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; display: inline-block;
}

/* Card qty badge + info button (builder mode) */
.ce-card { position: relative; }
.ce-card__qty {
  position: absolute; top: 6px; left: 6px;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  display: none; align-items: center; justify-content: center;
  background: var(--ce-accent, #58a6ff); color: #fff;
  font-size: .8rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.ce-card__qty.on { display: flex; }
.ce-card__info {
  position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); cursor: pointer;
  background: rgba(0, 0, 0, .65); color: #fff;
  font-size: 1rem; font-style: italic; font-weight: 800; font-family: serif;
  opacity: .65; transition: opacity .12s, background .12s, transform .12s;
  display: flex; align-items: center; justify-content: center;
}
.ce-card:hover .ce-card__info { opacity: 1; }
.ce-card__info:hover {
  background: var(--ce-accent, #58a6ff);
  border-color: #fff; transform: scale(1.1);
}
@media (max-width: 860px) {
  .ce-card__info { opacity: .85; }  /* no hover on touch — keep visible */
}

/* ── Modal ── */
.ce-modal { position: fixed; inset: 0; z-index: 1000; }
.ce-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(2px);
}
.ce-modal__frame {
  /* position:relative lifts the whole frame (panel + nav buttons)
     above the absolutely-positioned backdrop — without it the
     static nav buttons paint UNDER the backdrop: invisible, and
     clicks hit the backdrop (closing the modal). */
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  max-width: 992px; margin: 4vh auto; padding: 0 10px;
}
.ce-modal__panel {
  position: relative; flex: 1; min-width: 0;
  max-height: 92vh; overflow-y: auto;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.ce-modal__close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: none;
  color: var(--ce-text, #e6edf3); font-size: 1rem; cursor: pointer;
}
.ce-modal__close:hover { background: rgba(255, 255, 255, .16); }
.ce-modal__nav {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ce-panel, #161b22);
  border: 1px solid var(--ce-border, #30363d);
  color: var(--ce-text, #e6edf3); font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, transform .1s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.ce-modal__nav:hover:not(:disabled) {
  background: var(--ce-accent, #58a6ff);
  border-color: var(--ce-accent, #58a6ff);
  color: #fff; transform: scale(1.08);
}
.ce-modal__nav:disabled { opacity: .22; cursor: default; }
@media (max-width: 720px) {
  .ce-modal__frame {
    flex-direction: column; gap: 0;
    margin: 0; max-width: none; padding: 0;
  }
  .ce-modal__nav {
    position: fixed; bottom: 14px; z-index: 3;
  }
  .ce-modal__prev { left: calc(50% - 56px); }
  .ce-modal__next { right: calc(50% - 56px); }
}

.ce-modal__body {
  display: grid; grid-template-columns: 320px 1fr; gap: 22px;
  padding: 24px;
}
@media (max-width: 720px) {
  .ce-modal__body {
    grid-template-columns: 1fr;
    /* the prev/next buttons float at bottom:14px (44px tall) — reserve
       room so the last block (card text / FAQ) can scroll clear of them
       instead of sitting permanently hidden underneath. */
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 24px);
  }
  .ce-modal__panel { max-height: 100vh; border-radius: 0; }
  .ce-modal__nav { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
.ce-modal__img img { width: 100%; border-radius: 10px; }
.ce-card__noimg--big { border-radius: 10px; font-size: 1rem; }
.ce-modal__code {
  font-size: .75rem; color: var(--ce-muted, #8b949e); font-family: ui-monospace, monospace;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Staff-only edit link to the Django admin change page */
.ce-edit {
  font-family: inherit; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; text-decoration: none;
  color: var(--ce-accent, #58a6ff);
  border: 1px solid color-mix(in srgb, var(--ce-accent, #58a6ff) 45%, transparent);
  background: color-mix(in srgb, var(--ce-accent, #58a6ff) 12%, transparent);
  transition: filter .15s;
}
.ce-edit:hover { filter: brightness(1.25); }
.ce-modal__name { font-size: 1.3rem; font-weight: 800; margin: 4px 0 2px; color: var(--ce-text, #e6edf3); }
.ce-modal__jp { font-size: .85rem; color: var(--ce-muted, #8b949e); margin-bottom: 8px; }

.ce-stats { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.ce-stat { display: flex; gap: 10px; font-size: .85rem; }
.ce-stat__k {
  flex: 0 0 100px; color: var(--ce-muted, #8b949e);
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; padding-top: 2px;
}
.ce-stat__v {
  color: var(--ce-text, #e6edf3);
  /* Set / Origin names can be long ("CT-P01 Detective Trump Card
     (Joker)"). As a full-width row the value wraps after the label
     instead of distorting a paired grid cell. */
  flex: 1; min-width: 0; overflow-wrap: anywhere;
}

.ce-text {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: var(--ce-surface, #0d1117);
  border: 1px solid var(--ce-border, #30363d);
  font-size: .85rem; line-height: 1.7; color: var(--ce-text, #e6edf3);
  white-space: normal;
}
.ce-flavor {
  margin-top: 8px; padding: 0 14px; font-size: .8rem; font-style: italic;
  color: var(--ce-muted, #8b949e); line-height: 1.6;
}

/* ── Haikyu keyword badges inside the card modal ──
   format_hcard_text bakes .hk-* badges sized for the legacy Haikyu card
   page (16–17px text, 2px borders). In the compact modal they dwarf the
   body text (.ce-text ≈ .85rem). Scale them with em so they sit inline
   with surrounding text. Scoped to .ce-modal__info → the legacy Haikyu
   page keeps its original sizing. */
.ce-modal__info .hk-onplay,
.ce-modal__info .hk-attack,
.ce-modal__info .hk-receive,
.ce-modal__info .hk-block,
.ce-modal__info .hk-toss,
.ce-modal__info .hk-serve,
.ce-modal__info .hk-draw,
.ce-modal__info .hk-shutdown,
.ce-modal__info .hk-turn,
.ce-modal__info .hk-receive-phase,
.ce-modal__info .hk-onhand {
  font-size: .95em;
  padding: 1px 5px;
  border-width: 1px;
  line-height: 1.5;
}
.ce-modal__info .hk-skill-power {
  font-size: .9em;
  padding: 0 5px;
}

/* Glossary-driven keyword highlight (all games, self-service). Themed by
   the per-game modal accent. .kw-badge = inline [keyword N]; .kw-def =
   the -keyword- footer definition. */
.ce-modal__info .kw-badge {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: .9em; font-weight: 700; padding: 1px 8px;
  border-radius: 999px; white-space: nowrap;
  color: var(--ce-accent, #58a6ff);
  background: color-mix(in srgb, var(--ce-accent, #58a6ff) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ce-accent, #58a6ff) 40%, transparent);
}
.ce-modal__info .kw-badge__n { font-weight: 800; }
/* Keyword definition / reminder text. Unify the glossary class (.kw-def)
   with the legacy hardcoded ones (.hk-expl dark #332f2f was unreadable on
   the dark modal; .hk-obtian likewise) so both look the same and are
   legible: derive from the modal text colour, dimmed (theme-safe), a touch
   larger than before. */
.ce-modal__info .kw-def,
.ce-modal__info .hk-expl,
.ce-modal__info .hk-obtian {
  display: block;
  margin-top: 4px;
  font-size: .9em;
  font-style: italic;
  line-height: 1.6;
  color: var(--ce-text, #e6edf3);
  opacity: .82;
}
.ce-dual {
  margin-top: 16px; padding: 14px; border-radius: 10px;
  border: 1px dashed var(--ce-accent, #58a6ff);
}
.ce-dual__badge {
  font-size: .7rem; font-weight: 800; color: var(--ce-accent, #58a6ff);
  letter-spacing: .6px; margin-bottom: 4px;
}
.ce-dual__name { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }

/* ── Modal: grouped stat rows + colored stat chips + FAQ ──
   Paired rows are a strict 2-column grid and labels keep the SAME
   fixed width as single rows, so all four value columns align:
       COLOR   Blue        LEVEL   3
       AP      2,000       LP      1
       TRAIT   นักคาราเต้ / …
       SET     Promo       RARITY  PR                              */
.ce-statrow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
}
.ce-statrow .ce-stat { display: flex; min-width: 0; }

/* Colored value inside a stat row (modal "chip" manifest).
   Owner feedback 2026-06-12: pill backgrounds broke row alignment —
   render as colored bold text instead. */
.ce-vchip {
  --vchip: var(--ce-accent, #58a6ff);
  color: var(--vchip);
  font-weight: 800;
}

.ce-mchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.ce-mchip {
  --mchip: var(--ce-accent, #58a6ff);
  display: inline-flex; align-items: center; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--mchip);
  font-size: .78rem; line-height: 1;
}
.ce-mchip__k {
  background: var(--mchip); color: #fff;
  padding: 5px 8px; font-weight: 700; letter-spacing: .3px;
}
.ce-mchip__v {
  padding: 5px 10px; font-weight: 800;
  color: var(--ce-text, #e6edf3);
  background: var(--ce-surface, #0d1117);
  font-family: ui-monospace, monospace;
}

.ce-faq {
  margin-top: 12px; border-radius: 8px;
  border: 1px solid var(--ce-border, #30363d);
  background: var(--ce-surface, #0d1117);
}
.ce-faq summary {
  padding: 10px 14px; cursor: pointer; font-size: .82rem; font-weight: 700;
  color: var(--ce-accent, #58a6ff); user-select: none;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.ce-faq summary::-webkit-details-marker { display: none; }
.ce-faq summary::after {
  content: '▾'; margin-left: auto; transition: transform .15s;
  color: var(--ce-muted, #8b949e);
}
.ce-faq[open] summary::after { transform: rotate(180deg); }
.ce-faq__body {
  padding: 0 14px 12px; font-size: .85rem; line-height: 1.7;
  color: var(--ce-text, #e6edf3);
  border-top: 1px dashed var(--ce-border, #30363d);
  padding-top: 10px;
}
.ce-faq__count {
  background: var(--ce-accent, #58a6ff); color: #fff;
  border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800;
}
.ce-faq__header {
  font-size: .72rem; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--ce-muted, #8b949e);
  margin: 10px 0 6px;
}
.ce-faq__item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--ce-border, #30363d);
}
.ce-faq__item:last-child { border-bottom: none; padding-bottom: 2px; }
.ce-faq__q, .ce-faq__a {
  display: flex; gap: 10px; align-items: flex-start;
}
.ce-faq__q { margin-bottom: 6px; font-weight: 600; }
.ce-faq__a { color: var(--ce-text, #e6edf3); }
.ce-faq__badge {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: #fff; margin-top: 1px;
}
.ce-faq__badge--q { background: var(--ce-accent, #58a6ff); }
.ce-faq__badge--a { background: #15803d; }
.ce-faq__note {
  margin: 6px 0 0 32px; font-size: .75rem; font-style: italic;
  color: var(--ce-muted, #8b949e);
}

/* ── Legal notices ── */
.ce-legal {
  margin-top: 10px; font-size: .68rem; line-height: 1.5;
  color: var(--ce-muted, #8b949e); opacity: .85;
}
.ce-legal--trans { font-style: italic; }
.ce-footer {
  padding: 18px 0 26px; text-align: center;
  font-size: .68rem; line-height: 1.7;
  color: var(--ce-muted, #8b949e); opacity: .8;
  border-top: 1px solid var(--ce-border, #30363d);
}