/* ═══════════════════════════════════════════════════════════
   Stardew Valley Save Editor  ·  appearance.css
   Appearance tab: app cards, skin, color pickers, stepper,
   clothes row, boots grid
   ═══════════════════════════════════════════════════════════ */

/* ── App grid & cards ────────────────────────────────────────── */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.app-card {
  background: var(--glass2);
  backdrop-filter: var(--blur);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius);
  padding: 15px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.app-card:hover {
  border-color: var(--border);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.app-card.wide { grid-column: 1 / -1; }
.app-card-label {
  font-size: 7px;
  color: var(--parchment2);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  opacity: 0.85;
}
.app-hint {
  font-size: 6px;
  color: #7a6040;
  margin-top: 8px;
  line-height: 2;
}
.app-hint a { color: var(--gold); text-decoration: none; }
.app-hint a:hover { text-decoration: underline; }

/* ── Skin swatches ───────────────────────────────────────────── */
.skin-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.skin-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
  image-rendering: pixelated;
}
.skin-swatch:hover { transform: scale(1.22); }
.skin-swatch.selected {
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow), 0 0 0 3px var(--gold-dim);
}

/* ── Color row ───────────────────────────────────────────────── */
.color-row { display: flex; align-items: center; gap: 12px; }
.color-row input[type="color"] {
  width: 54px;
  height: 42px;
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  padding: 3px;
  transition: border-color 0.25s;
}
.color-row input[type="color"]:hover { border-color: var(--border); }
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 4px; }
.color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-preview {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border2);
}

/* ── Stepper (appearance tab only) ──────────────────────────── */
.stepper { display: flex; align-items: stretch; }
.step-input {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-align: center;
  padding: 9px 6px;
  background: rgba(0,0,0,0.35);
  border: 1.5px solid var(--border2);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--gold);
  width: 80px;
  flex-shrink: 0;
  transition: border-color 0.25s, box-shadow 0.25s, color 0.15s;
  -moz-appearance: textfield;
}
.step-input::-webkit-inner-spin-button,
.step-input::-webkit-outer-spin-button { display: none; }
.step-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.step-input.pop { animation: value-pop 0.28s var(--ease-spring) both; }
.step-btns {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.step-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 0 12px;
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1.5px solid var(--border2);
  color: var(--parchment2);
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.step-btn.step-up   { border-radius: 0 var(--radius-sm) 0 0; border-bottom: none; }
.step-btn.step-down { border-radius: 0 0 var(--radius-sm) 0; }
.step-btn:hover  { background: rgba(60,122,80,0.35); color: var(--gold); border-color: var(--border); }
.step-btn:active { filter: brightness(1.4); }

/* ── Clothes row ─────────────────────────────────────────────── */
.clothes-row {
  display: grid;
  grid-template-columns: 118px 1fr 118px;
  gap: 12px;
  align-items: end;
}
.clothes-row .field input[type="color"] {
  height: 42px;
  padding: 3px;
  cursor: pointer;
  background: none;
  font-size: 0;
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
}
.clothes-row .field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.clothes-row .field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }

/* ── Boots grid ──────────────────────────────────────────────── */
.boots-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }