/* asset-picker.css — the shared "pick an image asset" pattern.
   Used by IIDX QPro, jubeat Emblem and SDVX Appeal Card / stamps. One live
   composite stage on the left, the slots and a thumbnail browser on the right.
   Hovering a thumbnail previews it on the stage; clicking commits it locally,
   and nothing is written until Save. Load after components.css. */

.asset-editor {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 880px) {
  .asset-editor { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Stage: the composite the game will actually draw ------------------ */

.asset-stage-col { position: sticky; top: calc(var(--topbar-height) + var(--space-md)); display: grid; gap: var(--space-sm); }

.asset-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  background-color: var(--surface-bg-sunken);
  background-image:
    linear-gradient(45deg, var(--border-color-light) 25%, transparent 25%, transparent 75%, var(--border-color-light) 75%),
    linear-gradient(45deg, var(--border-color-light) 25%, transparent 25%, transparent 75%, var(--border-color-light) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  overflow: hidden;
}
.asset-stage.wide { aspect-ratio: 16 / 9; }

.asset-stage .layer { position: absolute; inset: 0; display: grid; place-items: center; }
.asset-stage .layer > * { max-width: 100%; max-height: 100%; }
.asset-stage .layer.ghost { outline: 2px dashed var(--game-accent); outline-offset: -6px; }

/* Each slot sits at its own size on the stage so a stack of five reads as a
   stack rather than as one square painted five times. */
.asset-stage .layer-bg      > * { width: 100%; height: 100%; border-radius: 0; }
.asset-stage .layer-main    > * { width: 46%; height: 46%; }
.asset-stage .layer-ornament > * { width: 88%; height: 88%; opacity: .9; }
.asset-stage .layer-effect  > * { width: 66%; height: 66%; opacity: .8; }
.asset-stage .layer-bubble  { place-items: start end; padding: 14%; }
.asset-stage .layer-bubble  > * { width: 30%; height: 18%; }
.asset-stage .layer-body    > * { width: 62%; height: 84%; align-self: end; }
.asset-stage .layer-head    > * { width: 34%; height: 34%; margin-bottom: 40%; }
.asset-stage .layer-hair    > * { width: 40%; height: 30%; margin-bottom: 52%; }
.asset-stage .layer-face    > * { width: 22%; height: 16%; margin-bottom: 40%; }
.asset-stage .layer-hand    > * { width: 78%; height: 26%; margin-top: 34%; }
.asset-stage .layer-card    > * { width: 78%; height: 78%; }

/* A game that composites a real rig -- IIDX's seventeen QPro layers, jubeat's
   five emblem layers -- brings its own stage instead of the generic stack
   above. Those offsets live in components.css, read out of the game's own art
   rather than approximated here, so all the picker adds is the outline that
   marks a part being previewed rather than worn. */
.asset-stage-own { display: grid; justify-items: start; }
.asset-stage-own.ghost > * { outline: 2px dashed var(--game-accent); outline-offset: 3px; }

.asset-stage-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--text-muted); font-size: var(--font-size-sm);
}

.asset-stage-caption {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  font-size: var(--font-size-sm); color: var(--text-secondary);
}
.asset-stage-caption b { color: var(--text-primary); }
.asset-stage-caption .muted { color: var(--text-muted); }

.asset-save-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* ---- Slot rail: what is set right now --------------------------------- */

.asset-slots { display: grid; gap: 6px; margin-bottom: var(--space-md); }

.asset-slot {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  width: 100%;
  padding: 6px;
  text-align: left;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
  background: var(--surface-bg);
  color: inherit;
  font: inherit;
  height: auto;
  border-radius: var(--radius);
  cursor: pointer;
}
.asset-slot:hover { background: var(--interactive-bg-hover); }
.asset-slot.current { border-color: var(--game-accent); box-shadow: inset 3px 0 0 var(--game-accent); }
.asset-slot .slot-thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-bg-sunken); display: grid; place-items: center; }
.asset-slot .slot-thumb img { width: 100%; height: 100%; object-fit: contain; }
.asset-slot .slot-label { display: block; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.asset-slot .slot-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-slot .slot-name.unset { font-weight: 400; color: var(--text-muted); }
.asset-slot .slot-actions { display: flex; align-items: center; gap: 4px; }

/* ---- Browser: the grid that replaces one-at-a-time guessing ----------- */

.asset-browser { border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-bg); overflow: hidden; }

.asset-browser-head {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-width) solid var(--border-color);
  background: var(--surface-bg-alt);
}
.asset-browser-head h3 { margin: 0; font-size: var(--font-size-base); }
.asset-browser-head .count { color: var(--text-muted); font-size: var(--font-size-sm); font-weight: 400; }
.asset-browser-head .spacer { flex: 1; }

.asset-filters {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-width) solid var(--border-color-light);
}
.asset-filters .filter-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.asset-filters input[type="search"] { min-width: 12em; flex: 1 1 12em; }
.asset-filters .seg { display: flex; border: var(--border-width) solid var(--interactive-border); border-radius: var(--radius); overflow: hidden; }
.asset-filters .seg button {
  padding: 3px 10px; border: 0; background: var(--interactive-bg); color: var(--text-secondary);
  font: inherit; font-size: var(--font-size-sm); height: 26px; border-radius: 0; cursor: pointer;
}
.asset-filters .seg button + button { border-left: var(--border-width) solid var(--interactive-border); }
.asset-filters .seg button:hover { background: var(--interactive-bg-hover); }
.asset-filters .seg button.on { background: var(--control-fill); color: var(--control-fill-text); }

.rarity-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.rarity-chip {
  padding: 2px 8px; border: var(--border-width) solid var(--pill-border); border-radius: 999px;
  background: var(--pill-bg); color: var(--text-secondary);
  font-size: var(--font-size-xs); line-height: 1.6; height: auto; cursor: pointer;
}
.rarity-chip.on { border-color: var(--game-accent); color: var(--game-accent); background: var(--surface-bg); font-weight: 600; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--space-sm);
  padding: var(--space-md);
  max-height: 520px;
  overflow-y: auto;
}
.asset-grid.banner { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.asset-card {
  position: relative;
  display: grid; gap: 4px;
  padding: 6px;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
  background: var(--surface-bg);
  color: inherit; font: inherit; text-align: left;
  height: auto;
  cursor: pointer;
}
.asset-card:hover { border-color: var(--interactive-focus-ring); background: var(--interactive-bg-hover); }
.asset-card.selected { border-color: var(--game-accent); box-shadow: 0 0 0 1px var(--game-accent); }
.asset-card.selected::after {
  content: "✓"; position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--game-accent); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
}
.asset-card.unowned { opacity: .55; }
.asset-card .thumb { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-bg-sunken); display: grid; place-items: center; }
.asset-grid.banner .asset-card .thumb { aspect-ratio: 16 / 5; }
.asset-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.asset-card .name {
  font-size: var(--font-size-xs); line-height: 1.35; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.asset-card .stars { font-size: 10px; letter-spacing: .06em; color: var(--status-warning-main); }
.asset-card .stars.top { color: var(--game-accent); }

.asset-empty { padding: var(--space-xl) var(--space-md); text-align: center; color: var(--text-muted); font-size: var(--font-size-sm); }