/* ---------- Playground: VS card + Card Packs ----------
   Fan-facing card generators (see features/playground/vs-card.js and
   card-pack.js). VS Card is read-only/no-login; Card Packs is login-required
   (see .pg-packs-loggedout below) -- the only Playground surface with any
   tier gate. The card's own visual chrome (colors, gradients, clip shapes,
   fonts) lives entirely in the canvas drawing code (vs-card-render.js /
   trading-card-render.js), not here -- there is no parallel DOM/CSS card
   markup to style. This file only covers the picker/opener controls and the
   responsive canvas stage(s). */

/* Page width: the tools use the site's 1400px column like Shows / Roster; the landing hub keeps its
   narrower 1100px grid. showPlayground() stamps data-pgtab on the view so one token drives every section. */
#playgroundView { --pg-w: 1400px; }
#playgroundView[data-pgtab="hub"] { --pg-w: 1100px; }

/* The feature tabs sit in the SAME band as the page title (see .playground-head): the icon-only back
   button leads, then the tabs, right-aligned. */
.playground-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0; }
.playground-tab-icon { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; }
.playground-tab-icon .ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; }
.playground-tab-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 18px; border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.playground-tab-btn:hover { border-color: var(--coral); color: var(--text); }
.playground-tab-btn.is-active { background: var(--coral); border-color: var(--coral); color: var(--ink); }

.playground-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 26px 26px 6px; max-width: var(--pg-w, 1100px); margin: 0 auto; }
.playground-head-text { display: flex; flex-direction: column; gap: 4px; }
.playground-title { font-family: var(--title-font), "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: 42px; letter-spacing: -0.02em; margin: 0; }
/* Inside a tool the tab you are on already says what this is, so the title shrinks to match the tab
   row's height and the subtitle (still shown on the hub) is dropped -- one compact band, no dead space. */
#playgroundView:not([data-pgtab="hub"]) .playground-head { padding-top: 16px; padding-bottom: 10px; }
#playgroundView:not([data-pgtab="hub"]) .playground-title { font-size: 30px; }
#playgroundView:not([data-pgtab="hub"]) .playground-sub { display: none; }
@media (max-width: 600px) {
  .playground-head { padding-left: 14px; padding-right: 14px; }
  /* one swipeable row instead of three wrapped ones; the active tab is scrolled into view (vs-card.js) */
  .playground-tabs { flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
  .playground-tabs::-webkit-scrollbar { display: none; }
  .playground-tab-btn { flex: none; white-space: nowrap; }
}
.playground-sub { color: var(--muted); font-size: 15px; margin: 0; }

/* ---------- Playground: landing hub ----------
   The default view for bare /playground (see vs-card.js's showPlayground(),
   'hub' is what an empty/unknown ?tab= falls back to). Tiles reuse the same
   card shape as .roster-card (surface/border/radius-lg, offset shadow on
   hover) rather than inventing a new card idiom for one grid. */
.pg-hub-grid { max-width: 1100px; margin: 22px auto 0; padding: 0 26px 40px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
@media (max-width: 480px)  { .pg-hub-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 14px 32px; } }

.pg-hub-tile {
  font-family: inherit; text-align: left; cursor: pointer; position: relative;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pg-hub-tile:hover, .pg-hub-tile:focus-visible { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translate(-1px, -1px); outline: none; }
.pg-hub-tile-art { display: block; background: var(--surface-2); border-bottom: var(--bw) solid var(--border);
  aspect-ratio: 240 / 110; overflow: hidden; }
.pg-hub-tile-art svg { display: block; width: 100%; height: 100%; }
.pg-hub-tile-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 52px 18px 18px; }
.pg-hub-tile-title { font-family: var(--title-font), "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: 20px; letter-spacing: -0.01em; }
.pg-hub-tile-desc { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.pg-hub-tile-go { position: absolute; right: 14px; bottom: 16px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill);
  background: var(--surface-2); border: var(--bw) solid var(--border); color: var(--muted);
  transition: background .15s, color .15s, border-color .15s; }
.pg-hub-tile-go .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.pg-hub-tile:hover .pg-hub-tile-go, .pg-hub-tile:focus-visible .pg-hub-tile-go {
  background: var(--coral); border-color: var(--coral); color: var(--ink); }

.vscard-shape-pick { display: flex; gap: 8px; max-width: var(--pg-w, 1100px); margin: 18px auto 0; padding: 0 26px; flex-wrap: wrap; }
.vscard-shape-opt {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 18px; border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  text-transform: var(--btn-tt); letter-spacing: var(--btn-ls);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.vscard-shape-opt:hover { border-color: var(--coral); color: var(--text); }
.vscard-shape-opt.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.vscard-controls, .vscard-pickers, .vscard-multi-pickers { max-width: var(--pg-w, 1100px); margin: 0 auto; padding: 0 26px; }

.vscard-controls { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 18px; flex-wrap: wrap; }

.vscard-template-pick { display: flex; gap: 8px; }
.vscard-template-opt {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 20px; border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  text-transform: var(--btn-tt); letter-spacing: var(--btn-ls);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.vscard-template-opt:hover { border-color: var(--coral); color: var(--text); }
.vscard-template-opt.is-active { background: var(--coral); border-color: var(--coral); color: var(--ink); }

.vscard-pickers { display: flex; align-items: flex-start; gap: 24px; padding-top: 22px;
  flex-wrap: wrap; }
.vscard-side { flex: 1 1 320px; min-width: 260px; position: relative; }
.vscard-side-label { font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted); margin-bottom: 6px; }
.vscard-input-row { display: flex; gap: 8px; }
.vscard-person-input {
  flex: 1; font-family: inherit; font-size: 14px; padding: 9px 14px;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
}
.vscard-person-input:focus { outline: none; border-color: var(--coral); }
.vscard-dice-btn, .vscard-shuffle-btn, .vscard-reposition-btn {
  font-family: inherit; font-size: 13px; cursor: pointer;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.vscard-dice-btn .ic, .vscard-reposition-btn .ic { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.vscard-reposition-btn:hover:not(:disabled) { border-color: var(--coral); color: var(--coral); }
.vscard-reposition-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vscard-dice-btn { padding: 8px 12px; }
.vscard-dice-btn:hover:not(:disabled), .vscard-shuffle-btn:hover:not(:disabled) { border-color: var(--coral); color: var(--coral); }
.vscard-dice-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vscard-shuffle-btn { padding: 7px 16px; flex: 1; }
.vscard-shuffle-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vscard-photo-actions { display: flex; gap: 8px; margin-top: 8px; }
.vscard-reposition-btn { padding: 7px 12px; flex: 0 0 auto; }
.vscard-side-notice { margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; }

.vscard-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px;
  background: var(--surface); border: var(--bw) solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-sm); max-height: 260px; overflow-y: auto;
}
.vscard-suggest-item { padding: 8px 14px; font-size: 13.5px; cursor: pointer; }
.vscard-suggest-item:hover { background: color-mix(in srgb, var(--coral) 12%, transparent); }

.vscard-vs-divider { align-self: center; font-family: var(--title-font), sans-serif;
  font-weight: 700; font-size: 20px; color: var(--muted); padding-top: 30px; }

/* ---- Multi-competitor team columns (tag/6-man/custom shapes) ---- */
.vscard-multi-pickers { padding-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.vscard-teams { display: flex; gap: 24px; flex-wrap: wrap; }
.vscard-team { flex: 1 1 260px; min-width: 240px; border: var(--bw) solid var(--border);
  border-radius: 14px; padding: 14px; }
.vscard-team-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; }
.vscard-team-name { display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }
.vscard-team-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.vscard-team-remove { font-family: inherit; font-size: 12px; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 2px 6px; }
.vscard-team-remove:hover { color: var(--coral); }
.vscard-team-name-input {
  display: block; width: 100%; margin-bottom: 10px; box-sizing: border-box;
  font-family: inherit; font-size: 13px; padding: 7px 10px;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
}
.vscard-team-name-input:focus { outline: none; border-color: var(--coral); }

.vscard-slot { position: relative; margin-bottom: 10px; }
.vscard-slot:last-of-type { margin-bottom: 0; }
.vscard-slot-row { display: flex; gap: 4px; align-items: center; }
.vscard-slot-row .vscard-person-input { font-size: 13.5px; padding: 8px 10px; min-width: 0; }
.vscard-slot-row .vscard-dice-btn { padding: 7px 9px; font-size: 12px; flex: 0 0 auto; }
.vscard-slot-remove { font-family: inherit; font-size: 13px; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 4px 6px; flex: 0 0 auto; }
.vscard-slot-remove:hover { color: var(--coral); }
.vscard-slot-notice { margin-top: 4px; font-size: 11.5px; color: var(--muted); }

.vscard-team-add { margin-top: 4px; width: 100%; font-family: inherit; font-size: 12.5px;
  font-weight: 600; padding: 7px; border-radius: var(--radius-pill);
  border: var(--bw) dashed var(--border); background: none; color: var(--muted); cursor: pointer; }
.vscard-team-add:hover { border-color: var(--coral); color: var(--coral); }

.vscard-fields { display: flex; gap: 16px; flex-wrap: wrap; max-width: var(--pg-w, 1100px);
  margin: 22px auto 0; padding: 0 26px; }
.vscard-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 160px; }
.vscard-field label { font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted); }
.vscard-field input, .vscard-field select {
  font-family: inherit; font-size: 14px; padding: 9px 14px;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
}
.vscard-field input:focus, .vscard-field select:focus { outline: none; border-color: var(--coral); }
#vscardVenueOther { margin-top: 8px; }
.vscard-field-note { font-size: 11.5px; color: var(--muted); min-height: 1.2em; }

.vscard-stage { max-width: var(--pg-w, 1100px); margin: 24px auto 0; padding: 0 26px; }
.vscard-stage canvas {
  width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 1920 / 1080; height: auto; display: block;
  border-radius: 16px; border: var(--bw) solid var(--border); background: #14121A;
}

/* Phone-width heads-up: hidden everywhere else, and once dismissed. */
.pg-mobile-notice { display: none; }
@media (max-width: 820px) {
  .pg-mobile-notice {
    display: flex; align-items: center; gap: 12px; margin: 0 16px 14px; padding: 12px 14px;
    border: 1px solid var(--coral); border-radius: var(--radius);
    background: color-mix(in srgb, var(--coral) 10%, var(--surface));
    font-size: 13.5px; line-height: 1.45;
  }
  .pg-mobile-notice.is-dismissed { display: none; }
  .pg-mobile-notice-text { flex: 1; min-width: 0; }
}

/* The two newer tools sit in the same centred column as the VS Card's controls. */
#pgTierListTab, #pgTagTeamTab, #pgRankingTab { max-width: var(--pg-w, 1100px); margin: 0 auto; padding: 0 26px; box-sizing: border-box; }
#pgTagTeamTab .vscard-stage { padding: 0; margin-top: 8px; }
@media (max-width: 600px) { #pgTierListTab, #pgTagTeamTab, #pgRankingTab { padding: 0 14px; } }

/* ---------- Tier list ---------- */
.tl-board { scroll-margin-top: 118px; }
.tl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 4px; }
.tl-title-input { flex: 1 1 260px; min-width: 200px; font: 700 26px/1.2 var(--title-font, inherit), "Noto Sans JP", sans-serif;
  padding: 8px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tl-group { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
#tlLibBtn.is-open { background: var(--surface); color: var(--coral); border-color: var(--coral); }
.tl-optwrap { position: relative; }
.tl-options { position: absolute; z-index: 60; right: 0; top: calc(100% + 6px); min-width: 210px; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.tl-options.hidden { display: none; }
.tl-options-sep { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--border); }
.tl-options .btn-sm { justify-content: flex-start; }
.tt-suggest.hidden { display: none; }
.tt-suggest-item { text-align: left; padding: 9px 12px; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; }
.tt-suggest-item:hover { background: var(--surface); }
.tl-pool:empty::before { content: attr(data-empty); align-self: center; padding: 8px 10px; font-size: 13px; color: var(--muted); }
.tl-hint { margin: 8px 0 12px; min-height: 1.4em; }
.tl-hint.is-active { color: var(--coral); }
.tl-board { display: flex; flex-direction: column; gap: 6px; }
.tl-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 92px; }
.tl-label { display: flex; align-items: center; justify-content: center; padding: 4px; }
/* a textarea so a long name wraps; its font size is set from the length in tier-list.js (fitLabel) */
.tl-label-input { width: 100%; box-sizing: border-box; text-align: center; background: transparent; border: 0; outline: 0;
  font: 700 30px/1.1 "Barlow Condensed", "Noto Sans JP", sans-serif; text-transform: none; resize: none;
  overflow: hidden; overflow-wrap: anywhere; padding: 2px; display: block; }
.tl-label-input:focus { background: rgba(255,255,255,.25); border-radius: 6px; }
.tl-drop { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 8px; min-height: 76px; }
.tl-drop.is-over { background: color-mix(in srgb, var(--coral) 14%, transparent); outline: 2px dashed var(--coral); outline-offset: -4px; }
.tl-row-tools { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px; border-left: 1px solid var(--border); }
.tl-tool { width: 30px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; }
.tl-tool:hover:not(:disabled) { border-color: var(--coral); }
.tl-tool .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.tl-tool:disabled { opacity: .35; cursor: default; }
.tl-color { width: 30px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.tl-pool-wrap { position: sticky; bottom: 0; z-index: 15; margin-top: 12px; padding: 6px 0 8px;
  background: var(--bg, #0f0f16); border-top: 1px solid var(--border); }
.tl-pool-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.tl-pool-title { font-weight: 700; font-size: 16px; }
.tl-pool-tools { display: flex; gap: 8px; flex-wrap: wrap; }
/* Unranked is a compact shelf: small chips, and a height cap that leaves the tiers the room. */
.tl-pool { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 72px;
  max-height: clamp(110px, 20vh, 176px); overflow-y: auto; padding: 6px; gap: 4px; }
.tl-pool .tl-chip { width: 64px; }
.tl-pool .tl-chip-face { width: 54px; height: 54px; font-size: 20px; }
.tl-pool .tl-chip-name { font-size: 10.5px; }
@media (max-width: 480px) { .tl-pool-wrap { bottom: 64px; } }   /* clear the phone tab bar */
.tl-chip { position: relative; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px;
  background: none; border: 2px solid transparent; border-radius: 10px; color: var(--text); cursor: grab; font: inherit; }
.tl-chip:hover { background: var(--surface-2); }
.tl-chip.is-dragging { opacity: .35; }
.tl-chip.is-selected { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 16%, transparent); }
.tl-chip-face { width: 62px; height: 62px; border-radius: 8px; overflow: hidden; background: var(--ink); display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 24px; color: var(--muted); }
.tl-chip-face img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.tl-chip-name { max-width: 100%; font-size: 11px; line-height: 1.15; text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }

/* tile sizes -- these size the chips IN THE TIERS only (and match the exported PNG); Unranked
   always keeps its small chips so more of them fit. Square (default) and Wide are the large
   sizes; Small is the base chip above. */
.tl-shape-square .tl-board .tl-chip { width: 148px; }
.tl-shape-square .tl-board .tl-chip-face { width: 140px; height: 140px; font-size: 40px; }
.tl-shape-wide .tl-board .tl-chip { width: 198px; }
.tl-shape-wide .tl-board .tl-chip-face { width: 190px; height: 127px; font-size: 40px; }
.tl-shape-square .tl-board .tl-chip-name, .tl-shape-wide .tl-board .tl-chip-name { font-size: 12px; }

/* Natural: one fixed tile height, each tile as wide as its photo (the face box takes the ratio set inline
   from the card's size; people stay square). The caption is zero-width so it never widens its chip. */
.tl-shape-natural .tl-board .tl-chip { width: auto; }
.tl-shape-natural .tl-board .tl-chip-face { width: auto; height: 140px; font-size: 40px; }
.tl-shape-natural .tl-board .kind-person .tl-chip-face { width: 140px; }
.tl-shape-natural .tl-board .tl-chip-name { width: 0; min-width: 100%; font-size: 12px; }

/* selected-item actions + the drag-to-remove zone, both at the top of the sticky Unranked tray */
.tl-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 6px 8px;
  background: color-mix(in srgb, var(--coral) 14%, var(--surface)); border: 1px solid var(--coral); border-radius: var(--radius); }
.tl-actions.hidden { display: none; }
.tl-act-name { flex: 1 1 100px; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-act-remove:hover { border-color: #ff4d6a; color: #ff4d6a; }
/* an overlay on the tray's own header row, NOT an extra row: growing the sticky tray mid-drag would
   slide it over the very tiers you are dragging to */
.tl-trash { display: none; position: absolute; z-index: 3; left: 0; right: 0; top: 6px; height: 34px; box-sizing: border-box;
  align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--muted);
  background: var(--bg, #0f0f16); border: 2px dashed var(--border); border-radius: var(--radius); }
.tl-trash.is-over { color: #ff4d6a; border-color: #ff4d6a; background: color-mix(in srgb, #ff4d6a 14%, var(--bg, #0f0f16)); }
#pgTierListTab.is-dragging-chip .tl-trash { display: flex; }
#pgTierListTab.is-dragging-chip .tl-actions { display: none; }

/* hover-enlarge for photos (desktop mouse only; see tier-preview.js) */
.tl-hoverprev { position: fixed; z-index: 120; pointer-events: none; padding: 4px; background: var(--surface-2, #1d1c26);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.tl-hoverprev.hidden { display: none; }
.tl-hoverprev img { display: block; max-width: min(560px, 46vw); max-height: 72vh; border-radius: 7px; }

/* full-screen photo preview (touch tap in the picker; "Enlarge" on the board) */
.tl-lightbox { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center;
  background: rgba(8,7,12,.94); }
.tl-lightbox.hidden { display: none; }
.tl-lb-stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 12px 12px 84px; box-sizing: border-box; width: 100%; height: 100%; }
.tl-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.tl-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 64px; font-size: 38px; line-height: 1;
  color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 10px; cursor: pointer; }
.tl-lb-prev { left: 8px; } .tl-lb-next { right: 8px; }
.tl-lb-nav.hidden { display: none; }
.tl-lb-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(8,7,12,.9) 40%); }
.tl-lb-count { color: var(--muted); font-size: 13px; min-width: 52px; text-align: center; }
.tl-lb-toggle { min-width: 190px; min-height: 44px; font-size: 15px; }
.tl-lb-toggle.hidden { display: none; }
.tl-lb-toggle.is-on { background: var(--mint, #4de0b0); border-color: var(--mint, #4de0b0); color: var(--ink); }
.tl-lb-close { min-height: 44px; }
body.tl-lb-open { overflow: hidden; }
.tl-nocap .tl-chip-name { display: none; }
.tl-nocap .tl-chip { width: auto; }
.tl-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }

/* ---- the "Add items" panel ----
   Desktop: a column beside the board, sticky under the topbar and as tall as the screen, so the
   grid scrolls INSIDE it. Phone / small tablet: a bottom sheet over the lower half of the screen with
   the board (and the Unranked tray, lifted above the sheet) visible over it. */
.tl-layout { display: block; }
.tl-main { min-width: 0; }
@media (min-width: 900px) {
  .tl-layout.has-panel { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: start; }
}
.tl-lib { display: flex; flex-direction: column; min-height: 0; padding: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); }
.tl-lib.hidden { display: none; }
@media (min-width: 900px) {
  .tl-lib { position: sticky; top: 92px; max-height: calc(100vh - 108px); }
}
@media (max-width: 899px) {
  .tl-lib { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 46vh; min-height: 290px;
    border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -14px 34px rgba(0,0,0,.5);
    padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* room to scroll the last tiers clear of the sheet, and the tray rides just above it */
  body.tl-panel-open .tl-main { padding-bottom: 48vh; }
  body.tl-panel-open .tl-hint { display: none; }
  body.tl-panel-open .tl-pool-wrap { bottom: 46vh; }
  body.tl-panel-open .tl-pool { max-height: 84px; min-height: 60px; }
}
.tl-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tl-lib-tabs { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tl-lib-tab { padding: 6px 10px; white-space: nowrap; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; }
.tl-lib-tab.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }
.tl-lib-form { display: flex; align-items: center; gap: 6px; }
.tl-lib-form input[type="search"] { flex: 1 1 0; min-width: 0; padding: 8px 12px; color: var(--text); background: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.tl-lib-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.tl-lib-sub-row:not(:has(:not(.hidden))) { display: none; }
.tl-lib-group { flex-direction: row; align-items: center; gap: 6px; display: flex; font-size: 12px; color: var(--muted); }
.tl-lib-group.hidden { display: none; }
.tl-lib-showname { font-size: 14px; flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-lib-sub-row { flex-wrap: wrap; }
.tl-lib-pills { display: inline-flex; gap: 4px; }
.tl-lib-pill { padding: 4px 10px; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer; }
.tl-lib-pill.is-active { background: var(--surface-2); border-color: var(--coral); color: var(--coral); }
#tlLibByShow.is-on { border-color: var(--coral); color: var(--coral); }
.tl-lib-note { margin: 8px 0 0; min-height: 1.2em; }
.tl-lib-grid { flex: 1 1 auto; min-height: 120px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px;
  margin-top: 8px; overflow-y: auto; padding: 2px; align-content: start; }
.tl-lib-grid.is-matches { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tl-lib-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0; text-align: left; cursor: pointer;
  background: none; border: 2px solid transparent; border-radius: 10px; color: var(--text); font: inherit; }
.tl-lib-tile[draggable="true"] { cursor: grab; }
.tl-lib-tile:hover { border-color: var(--border); }
.tl-lib-tile.is-picked { border-color: var(--coral); }
.tl-lib-art { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--ink); }
.tl-lib-tile.kind-person .tl-lib-art { aspect-ratio: 1; }
.tl-lib-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-lib-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: none;
  align-items: center; justify-content: center; background: var(--coral); color: #fff; font-size: 13px; font-weight: 700; }
.tl-lib-tile.is-picked .tl-lib-tick { display: flex; }
.tl-lib-cap { display: flex; flex-direction: column; padding: 0 3px 4px; min-width: 0; }
.tl-lib-label { font-size: 12px; line-height: 1.25; font-weight: 600; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.tl-lib-sub { font-size: 11px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl-lib-more { margin-top: 8px; }

/* ---------- Tag Team Maker ---------- */
.tt-controls { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.4fr); gap: 24px; margin: 6px 0 18px; }
.tt-fields { display: flex; flex-direction: column; gap: 12px; }
.tt-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.tt-field input { padding: 9px 12px; font-size: 15px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); }
.tt-themes { display: flex; gap: 8px; }
.tt-theme { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.tt-theme.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.tt-slot { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tt-slot-num { width: 24px; text-align: center; font-weight: 700; color: var(--muted); }
.tt-slot-main { position: relative; flex: 1; min-width: 0; }
.tt-person-input { width: 100%; box-sizing: border-box; padding: 9px 12px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); }
.tt-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden; }
.tt-member-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tt-real-note { margin: 10px 0 0; color: var(--coral); }
.tt-real-note.hidden { display: none; }
@media (max-width: 820px) { .tt-controls { grid-template-columns: 1fr; } .tl-row { grid-template-columns: 70px 1fr auto; } }

.vscard-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px auto 40px; }
.vscard-actions .btn-ghost, .vscard-actions .btn-accent { display: inline-flex; align-items: center; gap: 7px; }
.vscard-actions .ic-act { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.vscard-save-note { text-align: center; margin: -24px auto 40px; }
body:not(.can-favorite) .vscard-save-btn { display: none !important; }

@media (max-width: 720px) {
  .vscard-vs-divider { display: none; }
}

/* ---------- Card Packs ---------- */

#pgPacksTab { max-width: var(--pg-w, 1100px); margin: 0 auto; padding: 22px 26px 40px; }

.pg-packs-loggedout { text-align: center; padding: 60px 20px; color: var(--muted); }

.pg-packs-open-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pg-packs-set-select {
  font-family: inherit; font-size: 13px; padding: 8px 12px;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
}
.pg-packs-set-select:disabled { opacity: 0.6; }

.pg-pack-reveal { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.pg-pack-card { position: relative; width: 160px; }
.pg-pack-card-canvas {
  width: 100%; aspect-ratio: 750 / 1050; height: auto; display: block; cursor: pointer;
  border-radius: 10px; border: var(--bw) solid var(--border); background: #111318;
}
.pg-pack-card-label { margin-top: 6px; font-size: 12.5px; text-align: center; color: var(--muted); }
.pg-pack-card-badge {
  position: absolute; top: -8px; right: -8px; background: var(--coral); color: var(--ink);
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill);
}
.pg-pack-card-number {
  position: absolute; top: -8px; left: -8px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill);
}

/* ---- Rarity treatment: rare = gold ring, ultra = prismatic gradient ring
   + glow. Shared token pair (--rarity-ring / --rarity-glow) so the pack
   reveal canvas border and the collection-grid cell border pick up the same
   look from one rule each, rather than duplicating the gradient twice. ---- */
.pg-pack-card.is-rare .pg-pack-card-canvas { border-color: #d4af37; box-shadow: 0 0 0 1px #d4af37; }
.pg-pack-card.is-ultra .pg-pack-card-canvas {
  border-color: transparent;
  box-shadow: 0 0 0 2px transparent, 0 0 16px rgba(190, 130, 255, 0.55);
  background-image: linear-gradient(#111318, #111318),
    linear-gradient(135deg, #ff7ad9, #7ad9ff, #ffe27a);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.pg-pack-card-rarity {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
}
.pg-pack-card-rarity.is-rare { background: #d4af37; color: #1a1500; }
.pg-pack-card-rarity.is-ultra {
  color: #fff; background: linear-gradient(135deg, #ff7ad9, #7ad9ff, #ffe27a);
}

.pg-collection-head { margin-top: 36px; }
.pg-collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px; margin-top: 12px; }
.pg-collection-item { display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative; padding: 8px; border-radius: 10px; background: var(--surface);
  border: var(--bw) solid var(--border); cursor: pointer; transition: border-color .15s; }
.pg-collection-item:hover { border-color: var(--coral); }
.pg-collection-item.is-rare { border-color: #d4af37; }
.pg-collection-item.is-ultra {
  border-color: transparent;
  box-shadow: 0 0 0 1px transparent, 0 0 10px rgba(190, 130, 255, 0.4);
  background-image: linear-gradient(var(--surface), var(--surface)),
    linear-gradient(135deg, #ff7ad9, #7ad9ff, #ffe27a);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.pg-collection-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.pg-collection-name { font-size: 11.5px; text-align: center; color: var(--text); }
.pg-collection-count { position: absolute; top: 4px; right: 4px; background: var(--ink);
  color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-pill); }

/* Missing-card placeholder (Collection tab binder view only) -- deliberately
   reveals nothing but the card's number (see db.card_binder's docstring):
   dim/desaturated, no image, not clickable (no cursor/hover treatment,
   unlike a real owned .pg-collection-item). aspect-ratio 1 keeps it the
   same footprint as an owned tile's image so the grid stays even. */
.pg-collection-item.is-missing {
  cursor: default; opacity: 0.55; align-items: center; justify-content: center;
  aspect-ratio: 1; background: var(--surface-2);
}
.pg-collection-item.is-missing:hover { border-color: var(--border); }
.pg-collection-missing-number { font-size: 13px; font-weight: 700; color: var(--muted); }

/* ---------- My Collection: binder view (features/playground/collection.js) ---------- */
.pg-binder-sets { max-width: var(--pg-w, 1100px); margin: 0 auto; padding: 22px 26px 40px;
  display: flex; flex-direction: column; gap: 32px; }
.pg-binder-set-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pg-binder-set-title { font-family: var(--title-font), sans-serif; font-size: 20px; }
.pg-binder-set-progress { font-size: 13px; color: var(--muted); }

/* Card photo shortlist: three panes (Picked / Suggestions / Browse), each a
   small grid of thumbs. Picked photos get a coral ring + checkmark; unpicked
   candidates are plain and dim slightly until hovered. Every cell also has a
   small 👁 preview button (opens the full rendered card in the lightbox --
   see card-preview.js) alongside whatever the main click does (pick/unpick,
   or remove in the Picked pane). */
.pf-card-picks-sublabel { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 16px; }
.pf-card-picks-browse-search { margin: 6px 0 8px; }
.pf-card-picks-browse-search input {
  flex: 1; font-family: inherit; font-size: 13px; padding: 7px 12px;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
}
.pf-card-picks-browse-search input:focus { outline: none; border-color: var(--coral); }
#cpLoadMoreBtn { display: block; margin: 10px auto 0; }

.pf-card-picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px; margin: 8px 0 4px; min-height: 20px; }
.pf-card-picks-picked { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.pf-card-pick { position: relative; aspect-ratio: 1; border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2); border: 2px solid transparent;
  cursor: pointer; opacity: 0.72; transition: opacity .15s, border-color .15s; }
.pf-card-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-card-pick:hover { opacity: 1; }
.pf-card-pick.is-picked { opacity: 1; border-color: var(--coral); cursor: default; }
.pf-card-pick-check { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center; line-height: 1; }
.pf-card-pick-check.hidden { display: none; }
.pf-card-pick-remove {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border: none;
  border-radius: 999px; background: rgba(20,18,26,0.75); color: #fff; font-size: 15px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pf-card-pick-remove:hover { background: var(--coral); color: var(--ink); }
.pf-card-pick-preview {
  position: absolute; bottom: 3px; right: 3px; width: 20px; height: 20px; border: none;
  border-radius: 999px; background: rgba(20,18,26,0.75); color: #fff; font-size: 11px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.pf-card-pick:hover .pf-card-pick-preview { opacity: 1; }
.pf-card-pick-preview:hover { background: var(--coral); }

/* ---------- Card preview lightbox ---------- */
/* A plain .modal (see core/modals.css / core/modals.js's generic
   backdrop+Escape wiring) sized to the card's own aspect ratio rather than
   the default 460px modal-card width. */
.cp-preview-card { max-width: 420px; background: transparent; border: none;
  box-shadow: none; padding: 0; text-align: center; }
/* Inside the card's own box (not poking outside it into the modal's flex
   padding) -- a close button positioned OUTSIDE its parent's bounds sat in
   the same screen region as the backdrop's full-viewport click-catcher and
   intermittently failed to receive the click. */
.cp-preview-card .modal-close { position: absolute; top: 8px; right: 8px;
  color: #fff; z-index: 2; background: rgba(20,18,26,0.55); border-radius: 999px;
  width: 30px; height: 30px; line-height: 1; }
#cardPreviewCanvas { width: 100%; aspect-ratio: 750 / 1050; height: auto; display: block;
  cursor: pointer; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); background: #111318; }
.cp-preview-hint { color: rgba(255,255,255,0.6); margin: 10px 0 0; font-size: 12.5px; }

/* ---------- Manage Cards ---------- */
/* can_curate-gated (see playground.html's {% if %} wrap). Two-column shape:
   a narrow sticky left column (sets), a flexible right column (the active
   set's curated card list + a single "+ Add cards" entry point instead of
   always-visible roster/show browser panels -- those live in the Add Cards
   modal below, .mc-add-*). Wider max-width than the other tabs (1400px)
   since the card list + thumbnails want the room. */
#pgManageCardsTab { max-width: 1400px; margin: 0 auto; padding: 22px 26px 40px; }
.mc-layout { display: flex; gap: 24px; align-items: flex-start; }

.mc-sets-col { flex: 0 0 260px; position: sticky; top: 16px; display: flex;
  flex-direction: column; gap: 10px; max-height: calc(100vh - 140px); }
.mc-new-set { display: flex; flex-direction: column; gap: 6px; }
.mc-new-set input {
  font-family: inherit; font-size: 13.5px; padding: 8px 12px;
  border-radius: var(--radius); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
}
.mc-new-set input:focus { outline: none; border-color: var(--coral); }

/* .ec-set-list/.ec-set-item etc. below are shared with the set-picker
   sidebar's row styling -- kept under their original name since nothing
   about the row shape itself changed, only the surrounding column. */
.ec-set-list { flex: 1; min-height: 0; display: flex; flex-direction: column;
  gap: 2px; overflow-y: auto; }
.ec-set-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: inherit; text-align: left; cursor: pointer;
  padding: 8px 12px; border-radius: 8px; border: none; background: none; color: var(--text);
}
.ec-set-item:hover { background: var(--surface-2); }
.ec-set-item.is-active { background: var(--coral); color: var(--ink); }
.ec-set-name { font-size: 13.5px; font-weight: 600; }
.ec-set-meta { font-size: 11px; color: var(--muted); }
.ec-set-item.is-active .ec-set-meta { color: var(--ink); opacity: 0.7; }

.mc-main-col { flex: 1; min-width: 0; }
.mc-set-empty { padding: 60px 20px; text-align: center; }
.mc-set-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.mc-set-title { font-family: var(--title-font), sans-serif; font-size: 26px; margin: 0; flex: 1 1 auto; }

/* ---------- Add Cards modal ---------- */
.mc-add-card { max-width: 640px; text-align: left; }
.mc-add-card h3 { font-family: var(--title-font), sans-serif; font-size: 20px; margin: 0 0 12px; }
.mc-add-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.mc-add-tab-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 16px; border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--muted);
}
.mc-add-tab-btn:hover { border-color: var(--coral); color: var(--text); }
.mc-add-tab-btn.is-active { background: var(--coral); border-color: var(--coral); color: var(--ink); }
#mcAddRosterPane, #mcAddShowPane { max-height: 60vh; overflow-y: auto; }

#mcShowSearch, #mcRosterSearch {
  width: 100%; font-family: inherit; font-size: 13px; padding: 7px 12px;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text); margin: 6px 0 8px;
}
#mcShowSearch:focus, #mcRosterSearch:focus { outline: none; border-color: var(--coral); }

.ec-show-results, .ec-match-list { display: flex; flex-direction: column; gap: 4px; }
.ec-show-item, .ec-match-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 8px; background: var(--surface-2);
}
.ec-show-item { border: none; width: 100%; text-align: left; cursor: pointer; color: var(--text); font-family: inherit; }
.ec-show-item:hover { background: var(--coral); color: var(--ink); }
.ec-show-name { font-size: 13.5px; font-weight: 600; }
.ec-show-meta { font-size: 11px; color: var(--muted); flex: none; }
.ec-show-item:hover .ec-show-meta { color: var(--ink); opacity: 0.75; }

.ec-show-panel { display: flex; flex-direction: column; gap: 10px; }
.ec-show-head h3 { font-family: var(--title-font), sans-serif; font-size: 20px; margin: 0 0 2px; }
.ec-match-type { font-size: 12.5px; font-weight: 600; }
.ec-match-sides { font-size: 12px; color: var(--muted); flex: 1; text-align: right; margin: 0 10px; }

.ec-card-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; }
.ec-card-section-heading { font-family: var(--title-font), sans-serif; font-size: 16px;
  margin: 14px 0 2px; color: var(--muted); }
.ec-card-section-heading:first-child { margin-top: 0; }
.ec-card-row { display: flex; align-items: center; gap: 12px; padding: 8px;
  border-radius: var(--radius); background: var(--surface-2); }
.ec-card-row.is-published { outline: 2px solid var(--coral); }
.ec-card-thumb { width: 140px; aspect-ratio: 1600 / 1120; height: auto; border-radius: 6px;
  cursor: pointer; background: #111318; flex: none; }
.ec-card-thumb.is-portrait { width: 90px; aspect-ratio: 750 / 1050; }
.ec-card-info { flex: 1; min-width: 0; }
.ec-card-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-card-sub { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.ec-card-controls { display: flex; align-items: center; gap: 6px; flex: none; }
.ec-card-number { width: 52px; font-family: inherit; font-size: 13px; padding: 6px 8px;
  border-radius: var(--radius); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text); }
.ec-card-rarity { font-family: inherit; font-size: 12.5px; padding: 6px 8px;
  border-radius: var(--radius); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text); }
.ec-published-badge { font-size: 11.5px; color: var(--coral); font-weight: 600; white-space: nowrap; }

.ec-roster-results { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.ec-roster-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; border-radius: 8px; background: var(--surface-2);
}
.ec-roster-name { font-size: 13px; }
.ec-roster-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); }

@media (max-width: 860px) {
  .mc-layout { flex-direction: column; }
  .mc-sets-col { position: static; flex: none; width: 100%; max-height: 320px; }
}

/* Landscape preview modal -- same generic .modal pickup as .cp-preview-card,
   sized to the event card's own 1600x1120 aspect ratio instead. */
.ec-preview-card { max-width: 640px; background: transparent; border: none;
  box-shadow: none; padding: 0; text-align: center; }
.ec-preview-card .modal-close { position: absolute; top: 8px; right: 8px;
  color: #fff; z-index: 2; background: rgba(20,18,26,0.55); border-radius: 999px;
  width: 30px; height: 30px; line-height: 1; }
#eventCardPreviewCanvas { width: 100%; aspect-ratio: 1600 / 1120; height: auto; display: block;
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); background: #111318; }

/* Photo picker modal (draft cards only) -- a normal light/dark modal card,
   not the transparent-canvas treatment the two preview modals use above. */
.ec-photo-picker-card { max-width: 720px; text-align: left; }
.ec-photo-picker-card h3 { font-family: var(--title-font), sans-serif; font-size: 20px; margin: 0 0 12px; }
.ec-photo-scope { display: flex; gap: 6px; margin-bottom: 12px; }
.ec-photo-scope-btn {
  font-family: inherit; font-size: 13px; padding: 6px 14px; cursor: pointer;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
}
.ec-photo-scope-btn.is-active { background: var(--coral); color: var(--ink); border-color: var(--coral); }
.ec-photo-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px; max-height: 60vh; overflow-y: auto;
}
.ec-photo-pick-cell {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 2px solid transparent;
  background: var(--surface-2); cursor: pointer; padding: 0;
}
.ec-photo-pick-cell:hover { border-color: var(--coral); }
.ec-photo-pick-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "This person's photo picks" expandable section, folded into the photo
   picker modal (was its own Cards Admin tab) -- collapsed by default so
   the primary "choose a photo for THIS card" grid above stays the focus. */
#ecPhotoPicksSection { margin-top: 18px; border-top: var(--bw) solid var(--border); padding-top: 12px; }
.ec-photo-picks-toggle {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 0;
}
.ec-photo-picks-toggle:hover { color: var(--coral); }
#ecPhotoPicksBody { margin-top: 10px; max-height: 50vh; overflow-y: auto; }

/* ---- Reposition (pan/zoom) modal ---- */
.vscard-reposition-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(20,18,26,0.6); padding: 24px;
}
.vscard-reposition-modal {
  background: var(--surface); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; max-width: 92vw;
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(20,18,26,0.35));
}
.vscard-reposition-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700; }
.vscard-reposition-close { font-family: inherit; font-size: 14px; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 2px 6px; }
.vscard-reposition-close:hover { color: var(--coral); }
.vscard-reposition-frame {
  border-radius: 10px; overflow: hidden; background: #14121A;
  border: var(--bw) solid var(--border); touch-action: none;
}
.vscard-reposition-frame canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.vscard-reposition-frame canvas:active { cursor: grabbing; }
.vscard-reposition-zoom { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.vscard-reposition-zoom input[type="range"] { flex: 1; }
.vscard-reposition-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Ranking ---------- */
#totSetup .tt-field { margin-bottom: 10px; }
#totSetup .tt-field > input { padding: 10px 14px; font-size: 17px; }
.tot-mode-opt {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer;
}
.tot-mode-opt:hover { border-color: var(--coral); }
.tot-mode-opt.is-active { background: var(--coral); border-color: var(--coral); color: var(--ink); font-weight: 600; }
.tot-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.tot-row-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-bottom: 8px; }
.tot-row-ctl .tt-field { margin-bottom: 0; }
.tot-add-main { position: relative; }
.tot-add-input { width: 100%; box-sizing: border-box; padding: 9px 12px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit; }
.tot-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden; }
.tot-suggest.hidden { display: none; }
.tot-suggest-item { text-align: left; padding: 9px 12px; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; }
.tot-suggest-item:hover { background: var(--surface); }
.tot-add { flex: 1 1 220px; min-width: 200px; max-width: 340px; }
.tot-pool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 8px; }
.tot-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.tot-chip {
  width: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--border); border-radius: 10px; color: var(--text); font: inherit;
  opacity: .45; filter: grayscale(.8);
}
.tot-chip:hover { opacity: .8; }
.tot-chip.is-on { opacity: 1; filter: none; border-color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--surface)); }
.tot-chip-face { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--ink); display: block; }
.tot-chip-face img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.tot-chip-name { max-width: 100%; font-size: 11.5px; line-height: 1.15; text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tot-estimate { text-align: center; margin: -8px 0 28px; }

.tot-prompt { margin: 22px 0 12px; text-align: center; font: 700 clamp(30px, 6vw, 52px)/1.05 var(--title-font, inherit), "Noto Sans JP", sans-serif;
  text-transform: uppercase; overflow-wrap: anywhere; }
.tot-progress { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 16px; }
.tot-progress-track { width: min(520px, 100%); height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.tot-progress-bar { height: 100%; width: 0; background: var(--coral); transition: width .25s ease; }
/* Size the pair to the window's height so both faces AND names show without scrolling: two 4:5 cards
   are 1.6 x (their common height) wide, plus the OR gap; 480px is roughly the chrome above and below. */
.tot-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 0 auto;
  max-width: clamp(440px, calc(1.6 * (100vh - 480px) + 84px), 900px); }
.tot-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; cursor: pointer;
  background: var(--surface); color: var(--text); font: inherit;
  border: var(--bw, 2px) solid var(--border); border-radius: 16px; transition: transform .12s ease, border-color .12s ease;
}
.tot-card:hover, .tot-card:focus-visible { border-color: var(--coral); transform: translateY(-3px); outline: none; }
.tot-card:active { transform: scale(.985); }
.tot-card-face { width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--ink); display: block; }
.tot-card-face img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.tot-card-name { font: 700 clamp(18px, 3.2vw, 28px)/1.1 "Barlow Condensed", "Noto Sans JP", sans-serif; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.tot-card-ja { font-size: 13px; color: var(--muted); }
.tot-or {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--butter); border: 3px solid var(--ink); box-sizing: border-box; color: var(--ink); font: 800 14px var(--title-font, inherit), sans-serif;
}
.tot-keys { text-align: center; margin: 12px 0 0; }
@media (max-width: 600px) {
  .tot-arena { grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
  .tot-or { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 34px; height: 34px; font-size: 12px; z-index: 2; }
  .tot-keys { display: none; }
  .tot-card-face { aspect-ratio: 1 / 1.1; }
}

.tot-winner { position: relative; max-width: 360px; margin: 8px auto 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tot-winner-face { width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--ink); border: var(--bw, 2px) solid var(--coral); display: block; }
.tot-winner-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tot-winner-crown { position: absolute; top: 10px; left: 10px; padding: 2px 16px; border-radius: 8px; background: var(--coral); color: var(--ink);
  font: 800 34px/1.25 var(--title-font, inherit), sans-serif; }
.tot-winner-name { font: 700 clamp(30px, 6vw, 46px)/1.05 "Barlow Condensed", "Noto Sans JP", sans-serif; text-transform: uppercase; text-align: center; }
.tot-winner-ja { color: var(--muted); }
.tot-list { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: flex; flex-direction: column; gap: 6px; }
.tot-row { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tot-row-rank { width: 44px; text-align: center; font: 700 22px var(--title-font, inherit), sans-serif; color: var(--coral); }
.tot-row-face { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--ink); flex: none; }
.tot-row-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tot-row-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
#totResultNote { text-align: center; }
.tot-save-row { margin-top: 0; }