/* ============================================================
   ui.css — Sprout Valley design system
   ============================================================
   Pixel frames from the Farm RPG UI kit (cut by tools/build_ui_skin.py
   into static/img/ui/skin/, 2x nearest-neighbour) + a clean, readable
   text face. Every frame is a CSS border-image 9-slice: the numbers in
   border-image-slice are skin pixels (source px × 2) and match
   border-width, so the art is never resampled.

   Components (all prefixed sv-): panel, btn, iconbtn, slot, card,
   tabs, input, select, toggle, bar, badge, tag, price, empty, toast,
   modal, tooltip, kv. Builders for them live in static/js/ui.js.
   ============================================================ */

@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('/static/fonts/nunito-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('/static/fonts/nunito-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('/static/fonts/nunito-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('/static/fonts/nunito-800.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-weight: 400; font-display: swap; src: url('/static/fonts/pixelify-400.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-weight: 600; font-display: swap; src: url('/static/fonts/pixelify-600.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-weight: 700; font-display: swap; src: url('/static/fonts/pixelify-700.woff2') format('woff2'); }

:root {
  /* kit palette (sampled from the sprites) */
  --ink: #1c0a18;            /* sprite outlines */
  --text: #3a1d14;           /* body text on paper */
  --text-soft: #7a4a36;
  --text-faint: #a8775c;
  --paper: #ffd2a1;
  --paper-light: #ffe4c4;
  --paper-pale: #f7dbc6;
  --peach: #d9a88a;
  --tan: #e6965b;
  --wood: #ae4924;
  --wood-light: #c46120;
  --wood-dark: #8a3625;
  --wood-darker: #4a2123;
  --green: #a4c93c;
  --green-dark: #509129;
  --green-ink: #174438;
  --teal: #2eafc7;
  --teal-dark: #1a3473;
  --gold: #eea841;
  --gold-light: #ffcd59;
  --amber: #ff9d0e;
  --salmon: #ffb8a8;
  --red: #e0453d;
  --red-ink: #5e0c0c;
  --sky: #78ebcf;

  --font: 'Nunito', system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Pixelify Sans', 'Nunito', sans-serif;

  --skin: '/static/img/ui/skin';
  --radius: 0;               /* corners come from the sprites */
  --gap: 10px;
  --shadow: 0 6px 0 rgba(28, 10, 24, .28);
  --shadow-float: 0 10px 28px rgba(20, 8, 16, .45);
  --t-fast: .12s;
  --t: .2s;

  --cursor: url('/static/img/ui/skin/icon-cursor.png') 4 2, default;
  --cursor-hand: url('/static/img/ui/skin/icon-cursor-hand.png') 10 4, pointer;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: var(--font); font-size: 15px; line-height: 1.4; color: var(--text);
  -webkit-font-smoothing: antialiased;
  cursor: var(--cursor);
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button, a, select, label, summary, [role="button"], .sv-clickable { cursor: var(--cursor-hand); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold-light); color: var(--text); }
.hidden { display: none !important; }
.sv-num { font-variant-numeric: tabular-nums; }
.sv-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
  color: var(--text);
}

/* Scrollbars in the kit's colours */
.sv-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--wood) transparent; }
.sv-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.sv-scroll::-webkit-scrollbar-thumb { background: var(--wood); border: 2px solid var(--paper); }
.sv-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- panel ---------- */
.sv-panel {
  border: 8px solid transparent;
  border-image: url('/static/img/ui/skin/panel.png') 8 fill / 8px stretch;
  padding: 10px 12px;
  color: var(--text);
}
.sv-panel--stamp {
  border-width: 14px;
  border-image: url('/static/img/ui/skin/panel-stamp.png') 14 fill / 14px round;
}
.sv-panel--float { filter: drop-shadow(0 6px 0 rgba(28, 10, 24, .3)); }

/* ---------- buttons ---------- */
.sv-btn {
  --btn: brown;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 10px; margin: 0;
  border-style: solid; border-color: transparent;
  border-width: 6px 6px 10px 6px;
  border-image: url('/static/img/ui/skin/btn-brown.png') 6 6 10 6 fill / 6px 6px 10px 6px stretch;
  background: none;
  color: #fff4e6; font-weight: 800; font-size: 14px; line-height: 1;
  text-shadow: 0 2px 0 rgba(28, 10, 24, .45);
  white-space: nowrap; user-select: none;
  transition: transform var(--t-fast), filter var(--t-fast);
}
a.sv-btn { text-decoration: none; }
.sv-btn:hover { filter: brightness(1.08); }
.sv-btn:active, .sv-btn.is-pressed { transform: translateY(2px); filter: brightness(.95); }
.sv-btn:disabled, .sv-btn.is-disabled { filter: grayscale(.8) brightness(.95); opacity: .65; cursor: var(--cursor); transform: none; }
.sv-btn:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
.sv-btn img { width: 16px; height: 16px; }
.sv-btn--sm { min-height: 28px; padding: 0 6px; font-size: 13px; }
.sv-btn--lg { min-height: 44px; padding: 0 18px; font-size: 16px; }
.sv-btn--block { display: flex; width: 100%; }

.sv-btn--green  { border-image-source: url('/static/img/ui/skin/btn-green.png');  color: var(--green-ink); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.sv-btn--lime   { border-image-source: url('/static/img/ui/skin/btn-lime.png');   color: var(--green-ink); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.sv-btn--teal   { border-image-source: url('/static/img/ui/skin/btn-teal.png'); }
.sv-btn--gold   { border-image-source: url('/static/img/ui/skin/btn-gold.png');   color: var(--red-ink); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.sv-btn--amber  { border-image-source: url('/static/img/ui/skin/btn-amber.png');  color: var(--red-ink); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.sv-btn--peach  { border-image-source: url('/static/img/ui/skin/btn-peach.png');  color: var(--text); text-shadow: none; }
.sv-btn--tan    { border-image-source: url('/static/img/ui/skin/btn-tan.png');    color: var(--text); text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.sv-btn--salmon { border-image-source: url('/static/img/ui/skin/btn-salmon.png'); color: var(--red-ink); text-shadow: none; }
.sv-btn--pink   { border-image-source: url('/static/img/ui/skin/btn-pink.png');   color: #720033; text-shadow: none; }
.sv-btn--orange { border-image-source: url('/static/img/ui/skin/btn-orange.png'); }

/* square icon key (toolbar, HUD) */
.sv-iconbtn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border-style: solid; border-color: transparent; border-width: 6px 6px 10px 6px;
  border-image: url('/static/img/ui/skin/sq-tan.png') 6 6 10 6 fill / 6px 6px 10px 6px stretch;
  background: none; position: relative;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.sv-iconbtn:hover { filter: brightness(1.07); }
.sv-iconbtn:active { transform: translateY(2px); }
.sv-iconbtn img { width: 32px; height: 32px; margin-top: 2px; }
.sv-iconbtn.is-active { border-image-source: url('/static/img/ui/skin/sq-gold.png'); }

/* ---------- inventory slot ---------- */
.sv-slot {
  position: relative; display: grid; place-items: center;
  width: 64px; height: 64px; padding: 0;
  border-style: solid; border-color: transparent; border-width: 8px 8px 10px 8px;
  border-image: url('/static/img/ui/skin/card-peach.png') 8 8 10 8 fill / 8px 8px 10px 8px stretch;
  background: none; color: var(--text);
  transition: transform var(--t-fast), filter var(--t-fast);
}
.sv-slot:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sv-slot img.sv-slot__art { width: 36px; height: 36px; object-fit: contain; }
.sv-slot--empty { border-image-source: url('/static/img/ui/skin/card-peach-down.png'); border-width: 8px; border-image-slice: 8 fill; border-image-width: 8px; opacity: .55; }
.sv-slot__qty {
  position: absolute; right: -4px; bottom: -6px;
  min-width: 20px; padding: 0 4px; text-align: center;
  font: 800 12px/18px var(--font); color: #fff4e6;
  background: var(--wood-dark); border: 2px solid var(--ink);
  font-variant-numeric: tabular-nums;
}
.sv-slot__stars { position: absolute; left: -2px; top: -4px; font-size: 11px; line-height: 1; letter-spacing: -1px; }
.sv-slot__stars.q2 { color: #c7d3e0; text-shadow: 0 1px 0 var(--ink); }
.sv-slot__stars.q3 { color: var(--gold-light); text-shadow: 0 1px 0 var(--ink); }
.sv-slot__stars.q4 { color: #c78bff; text-shadow: 0 1px 0 var(--ink); }
.sv-slot.is-selected::after {
  content: ''; position: absolute; inset: -12px -12px -14px -12px; pointer-events: none;
  border: 12px solid transparent;
  border-image: url('/static/img/ui/skin/select-corners-gold.png') 12 / 12px stretch;
  animation: sv-pulse 1.2s ease-in-out infinite;
}
@keyframes sv-pulse { 50% { transform: scale(1.05); } }

.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, 64px); gap: 12px 10px; }

/* ---------- cards (list rows, shop items) ---------- */
.sv-card {
  display: flex; align-items: center; gap: 12px;
  border-style: solid; border-color: transparent; border-width: 8px 8px 10px 8px;
  border-image: url('/static/img/ui/skin/card-peach.png') 8 8 10 8 fill / 8px 8px 10px 8px stretch;
  padding: 4px 6px; min-height: 64px;
}
.sv-card--light { border-image-source: url('/static/img/ui/skin/card-salmon.png'); }
.sv-card--flat { border-image: url('/static/img/ui/skin/card-peach-down.png') 8 fill / 8px stretch; border-width: 8px; }
.sv-card.is-disabled { filter: saturate(.4); opacity: .7; }
.sv-card__art { width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.sv-card__art img { width: 40px; height: 40px; object-fit: contain; }
.sv-card__body { flex: 1; min-width: 0; }
.sv-card__title { font-weight: 800; font-size: 15px; line-height: 1.2; }
.sv-card__sub { font-size: 13px; color: var(--text-soft); }
.sv-card__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.sv-list { display: flex; flex-direction: column; gap: 8px; }
.sv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* ---------- tabs ---------- */
.sv-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sv-tab {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 8px; margin: 0;
  border-style: solid; border-color: transparent; border-width: 6px 6px 10px 6px;
  border-image: url('/static/img/ui/skin/btn-tan.png') 6 6 10 6 fill / 6px 6px 10px 6px stretch;
  background: none; font-weight: 800; font-size: 14px; color: var(--text);
}
.sv-tab img { width: 16px; height: 16px; }
.sv-tab:hover { filter: brightness(1.06); }
.sv-tab.is-active { border-image-source: url('/static/img/ui/skin/btn-peach.png'); transform: translateY(2px); }

/* pill switch for a choice or filter inside a page (UI.segmented) */
.sv-seg { display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(90, 58, 26, .16); box-shadow: inset 0 2px 0 rgba(28, 10, 24, .12); }
.sv-seg__opt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 0; padding: 0 12px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-weight: 800; font-size: 13px; color: var(--text-soft);
}
.sv-seg__opt img { width: 14px; height: 14px; }
.sv-seg__opt:hover { color: var(--text); }
.sv-seg__opt.is-active { background: #fff4e6; color: var(--text); box-shadow: 0 2px 0 rgba(28, 10, 24, .25); }

/* ---------- form controls ---------- */
.sv-input, .sv-select {
  min-height: 34px; padding: 4px 6px;
  border: 6px solid transparent;
  border-image: url('/static/img/ui/skin/card-peach-down.png') 8 fill / 6px stretch;
  background: none; color: var(--text); font-weight: 600;
}
.sv-input::placeholder { color: var(--text-faint); font-weight: 400; }
.sv-input:focus, .sv-select:focus { outline: none; border-image-source: url('/static/img/ui/skin/card-salmon-down.png'); }
.sv-select { appearance: none; padding-right: 26px; background: url('/static/img/ui/skin/icon-minus.png') no-repeat right 4px center / 0; }
.sv-field { display: flex; flex-direction: column; gap: 4px; }
.sv-field > span { font-weight: 800; font-size: 13px; color: var(--text-soft); }

.sv-toggle {
  appearance: none; width: 64px; height: 32px; margin: 0; flex: none;
  background: url('/static/img/ui/skin/toggle-off.png') no-repeat center / contain;
}
.sv-toggle:checked { background-image: url('/static/img/ui/skin/toggle-on.png'); }
.sv-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }

.sv-range { appearance: none; height: 12px; background: var(--wood-darker); border: 2px solid var(--ink); }
.sv-range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: var(--paper); border: 2px solid var(--ink); }

/* ---------- bars ---------- */
.sv-bar {
  position: relative; height: 16px;
  border: 4px solid transparent; border-right-width: 14px;
  border-image: url('/static/img/ui/skin/bar-frame.png') 4 14 4 4 fill / 4px 14px 4px 4px stretch;
}
.sv-bar__fill {
  height: 100%; width: 0; transition: width var(--t);
  background: linear-gradient(var(--sky) 0 2px, var(--teal) 2px 100%);
}
.sv-bar--xp .sv-bar__fill { background: linear-gradient(#ffe48a 0 2px, var(--gold) 2px 100%); }
.sv-bar--energy .sv-bar__fill { background: linear-gradient(#d3eb41 0 2px, var(--green-dark) 2px 100%); }

/* ---------- small bits ---------- */
.sv-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  font: 800 12px/1 var(--font); color: #fff;
  background: var(--red); border: 2px solid var(--ink);
}
.sv-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; font-size: 12px; font-weight: 800;
  background: var(--paper-pale); border: 2px solid var(--wood-dark); color: var(--wood-dark);
}
.sv-tag--green { background: #e3f0b8; border-color: var(--green-dark); color: var(--green-ink); }
.sv-tag--red { background: #ffd9d2; border-color: #b8423b; color: var(--red-ink); }
.sv-tag--teal { background: #d4f4ef; border-color: var(--teal-dark); color: var(--teal-dark); }
.sv-tag--gold { background: #fff0c4; border-color: #b7741b; color: #6b3b06; }
.sv-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sv-price::before { content: ''; width: 16px; height: 16px; background: url('/static/img/ui/skin/icon-coin.png') center / 16px no-repeat; }
.sv-price--big { font-size: 18px; }
.sv-price--big::before { width: 24px; height: 24px; background-size: 24px; }
.sv-empty { display: grid; place-items: center; gap: 8px; padding: 36px 12px; text-align: center; color: var(--text-soft); }
.sv-empty img { width: 48px; height: 48px; opacity: .8; }
.sv-section { display: flex; flex-direction: column; gap: 8px; }
.sv-section + .sv-section { margin-top: 18px; }
.sv-section__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--wood-dark);
}
.sv-section__title::after { content: ''; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--tan) 0 6px, transparent 6px 10px); }
.sv-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; }
.sv-kv dt { color: var(--text-soft); font-weight: 700; }
.sv-kv dd { margin: 0; font-weight: 800; }
.sv-note {
  padding: 8px 10px; font-size: 13px; color: var(--text-soft);
  background: rgba(255, 255, 255, .35); border-left: 4px solid var(--tan);
}
.sv-row { display: flex; align-items: center; gap: 8px; }
.sv-spacer { flex: 1; }

/* ---------- toasts ---------- */
.sv-toast {
  display: flex; align-items: center; gap: 8px;
  border: 8px solid transparent;
  border-image: url('/static/img/ui/skin/panel.png') 8 fill / 8px stretch;
  padding: 2px 6px; min-width: 200px; max-width: 360px;
  font-weight: 700; font-size: 14px;
  filter: drop-shadow(0 4px 0 rgba(28, 10, 24, .3));
  animation: sv-toast-in .25s ease-out;
}
.sv-toast img { width: 24px; height: 24px; flex: none; }
.sv-toast img.sv-toast__item { object-fit: contain; image-rendering: pixelated; }
.sv-toast--success { border-image-source: url('/static/img/ui/skin/card-lime.png'); color: var(--green-ink); }
.sv-toast--error { border-image-source: url('/static/img/ui/skin/card-salmon.png'); color: var(--red-ink); }
.sv-toast--gold { border-image-source: url('/static/img/ui/skin/card-gold.png'); color: var(--red-ink); }
.sv-toast.is-leaving { animation: sv-toast-out .25s ease-in forwards; }
@keyframes sv-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes sv-toast-out { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- modal ---------- */
.sv-modal-backdrop {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(28, 10, 24, .45);
  animation: sv-fade .15s ease-out;
}
.sv-modal {
  display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: min(86vh, 760px);
  filter: drop-shadow(0 10px 0 rgba(28, 10, 24, .35));
  animation: sv-pop .18s ease-out;
}
.sv-modal__head {
  display: flex; align-items: center; gap: 10px;
  border-style: solid; border-color: transparent; border-width: 8px 8px 10px 8px;
  border-image: url('/static/img/ui/skin/card-brown.png') 8 8 10 8 fill / 8px 8px 10px 8px stretch;
  padding: 0 4px; min-height: 52px; margin-bottom: -6px; position: relative; z-index: 1;
  color: #fff4e6;
}
.sv-modal__head .sv-title { color: #fff4e6; font-size: 20px; text-shadow: 0 2px 0 rgba(28, 10, 24, .5); flex: 1; }
.sv-modal__head img.sv-modal__icon { width: 32px; height: 32px; }
.sv-modal__body { flex: 1; min-height: 0; overflow: auto; }
.sv-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; }
.sv-close {
  width: 34px; height: 34px; padding: 0; flex: none;
  border-style: solid; border-color: transparent; border-width: 6px 6px 10px 6px;
  border-image: url('/static/img/ui/skin/sq-salmon.png') 6 6 10 6 fill / 6px 6px 10px 6px stretch;
  background: none;
  display: grid; place-items: center;
}
.sv-close::before { content: ''; width: 16px; height: 16px; background: url('/static/img/ui/skin/icon-cross.png') center / 16px no-repeat; margin-top: 2px; }
.sv-close:active { transform: translateY(2px); }
@keyframes sv-fade { from { opacity: 0; } }
@keyframes sv-pop { from { opacity: 0; transform: scale(.96) translateY(6px); } }

/* ---------- tooltip ---------- */
.sv-tooltip {
  position: fixed; z-index: 2000; pointer-events: none;
  max-width: 260px; padding: 0 4px;
  border: 8px solid transparent;
  border-image: url('/static/img/ui/skin/panel.png') 8 fill / 8px stretch;
  font-size: 13px; color: var(--text);
  filter: drop-shadow(0 4px 0 rgba(28, 10, 24, .3));
}
.sv-tooltip b { display: block; font-size: 14px; }