/* Skin Pack Studio card — see skin-pack-studio.js. Reuses the page's
   retro "cartridge" tokens (--retro-*) and .retro-btn / .cat-chip /
   .retro-title-input from game_uploader.html's own <style> block. */

.sps-top { display: grid; gap: 6px; margin-bottom: 14px; }
.sps-label { font-weight: 700; font-size: 13px; margin-top: 4px; }
.sps-input, .sps-prompt {
  width: 100%; font: inherit; font-size: 13px; color: var(--text);
  background: var(--bg1); border: 2px solid var(--border); border-radius: 0;
  padding: 7px 9px;
}
.sps-input:focus, .sps-prompt:focus { outline: none; border-color: var(--border-strong); }

.sps-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sps-chip {
  font: inherit; font-size: 12px; padding: 3px 9px; cursor: pointer; border-radius: 0;
  background: var(--panel2); color: var(--retro-text); border: 2px solid var(--retro-slot-lo);
}
.sps-chip:hover { background: var(--retro-slot-hi); }

.sps-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sps-progress {
  flex: 1 1 140px; height: 12px; min-width: 120px;
  background: #0c1f1b; border: 2px solid var(--retro-border);
}
.sps-progress-fill { height: 100%; width: 0; background: #6ef2c9; transition: width .3s; }
.sps-status { min-height: 18px; margin: 2px 0 0; }

.sps-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start;
}
@media (max-width: 860px) { .sps-body { grid-template-columns: minmax(0, 1fr); } }

.sps-rows { display: grid; gap: 6px; min-width: 0; }
.sps-group {
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin: 8px 0 0;
}
.sps-group:first-child { margin-top: 0; }

.sps-row {
  display: grid; grid-template-columns: auto 52px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--panel2); border: 1px solid var(--border);
  transition: border-color .15s, opacity .15s;
}
.sps-row:hover { border-color: var(--border-strong); }
.sps-row.off { opacity: .45; }
.sps-row.busy { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(180,83,9,.12); }

.sps-thumb {
  width: 48px; height: 48px; image-rendering: pixelated;
  border: 2px solid var(--retro-border);
  background: repeating-conic-gradient(#eef6f4 0% 25%, #ffffff 0% 50%) 50% / 12px 12px;
}
.sps-thumb.wide { width: 52px; height: 42px; }

.sps-row-main { display: grid; gap: 4px; min-width: 0; }
.sps-row-head { display: flex; align-items: center; gap: 8px; }
.sps-mini-chip { min-width: 0; padding: 2px 7px; font-size: 10px; box-shadow: 2px 2px 0 var(--retro-border); }
.sps-prompt { padding: 4px 7px; font-size: 12px; }

.sps-pill { font-size: 11px; color: var(--muted); }
.sps-pill.queued { color: var(--muted); }
.sps-pill.busy { color: var(--accent2); font-weight: 700; }
.sps-pill.done { color: var(--good); font-weight: 700; }
.sps-pill.error { color: var(--bad); font-weight: 700; cursor: help; }

.sps-lock.active { background: var(--retro-hi); border-color: var(--retro-border); }

.sps-side {
  position: sticky; top: 12px; display: grid; gap: 8px;
  background: var(--retro-bg); border: 2px solid var(--retro-border); padding: 12px;
  box-shadow: inset 2px 2px 0 var(--retro-hi), inset -2px -2px 0 var(--retro-lo);
}
.sps-side .hint { color: var(--retro-text); }
.sps-scene-tabs { display: flex; gap: 6px; }
.sps-scene-tabs .retro-btn.active { background: var(--retro-glow); border-color: var(--retro-border); }
.sps-scene {
  width: 100%; aspect-ratio: 160 / 128; image-rendering: pixelated; display: block;
  border: 3px solid var(--retro-border); background: #0c1f1b;
}

/* Phone width: checkbox / thumbnail / buttons on one line, the prompt
   gets its own full-width line underneath so it's actually readable. */
@media (max-width: 560px) {
  .sps-row { grid-template-columns: auto 52px minmax(0, 1fr) auto auto; }
  .sps-row-main { grid-column: 1 / -1; order: 5; }
}