/* ============================================================================
   ZENKO — PIXEL UI DESIGN SYSTEM · tokens.css
   The shared stylesheet every card links. Locked palette + pixel fonts +
   base pixel-component classes. FULLY PIXEL: hard offset shadows (no blur),
   chunky 0-2px corners, image-rendering: pixelated.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  /* ── Core surfaces & ink ─────────────────────────────────────────────── */
  --wood: #6e4a2b;
  --wood-dark: #4a2f1a;
  --parchment: #f3e4c8;
  --parchment-edge: #e2c79c;
  --parchment-dim: #ead7b0;
  --gold: #f6c945;
  --gold-deep: #c79a2e;
  --ink: #3a2a23;
  --ink-dark: #2a1c12;
  --green: #8fce4f;
  --green-deep: #5e9433;
  --pink: #f4a9c0;
  --pink-deep: #d97b9b;
  --blue: #6bb6e8;
  --blue-deep: #3f88be;
  --danger: #e04a3f;
  --danger-deep: #a82e26;
  --purple: #7a4fb0;
  --purple-deep: #543184;

  /* ── Element colors ──────────────────────────────────────────────────── */
  --el-terra: #8b5a2b;
  --el-flora: #00c864;
  --el-aqua: #0096ff;
  --el-aero: #c8e6ff;
  --el-ignis: #ff5000;
  --el-void: #9b5de5;
  --el-lux: #f6c945;

  /* ── Rarity (creature tile borders) ──────────────────────────────────── */
  --rar-common: #969696;
  --rar-uncommon: #00c800;
  --rar-rare: #0064ff;
  --rar-epic: #9600ff;
  --rar-legendary: #ff9600;
  --rar-mythical: #ff00ff;

  /* ── Material tiers ──────────────────────────────────────────────────── */
  --mat-glimmer: #f6c945;  /* T1 Glimmer Dust */
  --mat-shard: #0096ff;    /* T2 Mana Shard */
  --mat-astral: #9600ff;   /* T3 Astral Core */
  --mat-catalyst: #e04a3f; /* T4 Gem Catalyst (rare) */

  /* ── Drop-rate badge colors (gacha transparency) ─────────────────────── */
  --rate-rare: #f6c945;     /* < 5%  → gold */
  --rate-uncommon: #c9c9c9; /* 5-20% → silver */
  --rate-common: #969696;   /* > 20% → grey */

  /* ── Pixel geometry ──────────────────────────────────────────────────── */
  --px: 1px;
  --corner: 2px;             /* max chunky corner radius */
  --hi: inset 0 2px 0 #fff6; /* baked top highlight */
  --lo: inset 0 -2px 0 #0003;/* baked bottom shade */
}

/* ── Reset / base ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
img, svg {
  image-rendering: pixelated;
  display: block;
}

body {
  font-family: 'VT323', 'VT323', monospace;
  color: var(--ink);
  /* warm wood backdrop with a subtle checker to evoke the reference board */
  background:
    repeating-conic-gradient(#5d3f24 0% 25%, #65462a 0% 50%) 0 0 / 24px 24px,
    #5d3f24;
  -webkit-font-smoothing: none;
  font-smooth: never;
  line-height: 1.45;
}

/* Helper: pixel font for headers/labels/numbers */
.pixel {
  font-family: 'VT323', monospace;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
/* Helper: body pixel font for prose */
.prose {
  font-family: 'VT323', 'VT323', monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Card-preview shell (used by every preview file, not part of the kit) ─ */
.dsPreview {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 18px;
}
.dsTitle {
  font-family: 'VT323', monospace;
  font-size: 12px;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink-dark);
  text-align: center;
}
.dsSub {
  font-family: 'VT323', monospace;
  font-size: 11px;
  color: #f3e4c8cc;
  text-align: center;
  margin-top: -10px;
}
.dsRow { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: center; }
.dsCol { display: flex; flex-direction: column; gap: 14px; }
.dsLabel { font-family: 'VT323', monospace; font-size: 8px; color: #f3e4c8; opacity: .8; }

/* ============================================================================
   .panel — the screen container. 9-slice look faked with layered hard borders.
   ============================================================================ */
.panel {
  position: relative;
  background: var(--parchment);
  border: 4px solid var(--wood);
  border-radius: var(--corner);
  padding: 16px;
  color: var(--ink);
  /* hard pixel bevel: dark outer row + baked inner highlight, NO blur */
  box-shadow:
    0 0 0 2px var(--wood-dark),
    0 6px 0 0 var(--wood-dark),
    inset 0 0 0 2px var(--parchment-edge),
    inset 0 3px 0 #fff5;
}
/* dashed inner frame line baked into the panel (the reference's journal edge) */
.panel::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed var(--parchment-edge);
  border-radius: var(--corner);
  pointer-events: none;
}
.panel > * { position: relative; z-index: 1; }

/* panel header bar */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -6px -6px 12px;
  padding: 8px 10px;
  background: var(--wood);
  border: 2px solid var(--wood-dark);
  border-radius: var(--corner);
  box-shadow: var(--hi);
}
.panel-head .pixel { color: var(--parchment); font-size: 11px; text-shadow: 0 2px 0 var(--wood-dark); }

/* ============================================================================
   .card / .section — parchment-dim sub-panels (lore, drops, monster rows…)
   ============================================================================ */
.card {
  position: relative;
  background: var(--parchment-dim);
  border: 2px solid var(--wood);
  border-radius: var(--corner);
  padding: 12px;
  box-shadow: inset 0 0 0 2px #fff4, inset 0 -3px 0 #0002, 0 2px 0 var(--wood-dark);
}
.card.dashed::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--wood);
  opacity: .35;
  border-radius: var(--corner);
  pointer-events: none;
}

/* ============================================================================
   .pill — section header pill (pink banner w/ pixel title), see 6.jpg
   ============================================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'VT323', monospace;
  font-size: 9px;
  color: var(--ink);
  background: var(--pink);
  border: 2px solid var(--wood);
  border-radius: var(--corner);
  padding: 6px 12px;
  text-shadow: 0 1px 0 #fff7;
  box-shadow: var(--hi), 0 2px 0 var(--pink-deep);
}
.pill.gold  { background: var(--gold);  box-shadow: var(--hi), 0 2px 0 var(--gold-deep); }
.pill.green { background: var(--green); box-shadow: var(--hi), 0 2px 0 var(--green-deep); }
.pill.blue  { background: var(--blue);  box-shadow: var(--hi), 0 2px 0 var(--blue-deep); }
.pill.wood  { background: var(--wood);  color: var(--parchment); box-shadow: var(--hi), 0 2px 0 var(--wood-dark); }

/* ============================================================================
   .btn — pixel buttons. Hard offset shadow = pixel bevel; :active sinks 1px.
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'VT323', monospace;
  font-size: 10px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--wood-dark);
  border-radius: var(--corner);
  padding: 10px 16px;
  cursor: pointer;
  text-shadow: 0 1px 0 #fff7;
  box-shadow: var(--hi), 0 4px 0 var(--gold-deep), 0 4px 0 1px var(--wood-dark);
  transition: none;
  user-select: none;
}
.btn:hover { filter: brightness(1.08); }
.btn:active,
.btn.is-pressed {
  transform: translateY(3px);
  box-shadow: var(--hi), 0 1px 0 var(--gold-deep), 0 1px 0 1px var(--wood-dark);
}
.btn.green {
  background: var(--green); color: var(--ink-dark);
  box-shadow: var(--hi), 0 4px 0 var(--green-deep), 0 4px 0 1px var(--wood-dark);
}
.btn.green:active, .btn.green.is-pressed {
  box-shadow: var(--hi), 0 1px 0 var(--green-deep), 0 1px 0 1px var(--wood-dark);
}
.btn.secondary {
  background: var(--parchment-dim); color: var(--ink);
  box-shadow: var(--hi), 0 4px 0 var(--parchment-edge), 0 4px 0 1px var(--wood-dark);
}
.btn.secondary:active, .btn.secondary.is-pressed {
  box-shadow: var(--hi), 0 1px 0 var(--parchment-edge), 0 1px 0 1px var(--wood-dark);
}
.btn[disabled], .btn.is-disabled {
  cursor: not-allowed;
  filter: grayscale(.7) brightness(.92);
  color: #00000066;
  text-shadow: none;
  box-shadow: 0 4px 0 #8a8a8a, 0 4px 0 1px var(--wood-dark);
  pointer-events: none;
}
.btn.big { font-size: 12px; padding: 14px 20px; }
.btn.block { display: flex; width: 100%; }

/* ============================================================================
   .bar — pixel progress bars. Dark track + hard-segment fill + tick overlay.
   ============================================================================ */
.bar {
  position: relative;
  height: 16px;
  background: var(--ink-dark);
  border: 2px solid var(--wood-dark);
  border-radius: var(--corner);
  overflow: hidden;
  box-shadow: inset 0 2px 0 #0006;
}
.bar .fill {
  height: 100%;
  background: var(--gold);
  box-shadow: var(--hi);
  /* hard 4px tick segments baked into the fill (pixel bar look) */
  background-image:
    linear-gradient(var(--gold), var(--gold)),
    repeating-linear-gradient(90deg, #0000 0 6px, #0002 6px 8px);
  image-rendering: pixelated;
}
.bar .fill.green  { background-color: var(--green);  background-image: linear-gradient(var(--green),var(--green)),  repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
.bar .fill.gold   { background-color: var(--gold);   background-image: linear-gradient(var(--gold),var(--gold)),    repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
.bar .fill.amber  { background-color: #f29d3c;       background-image: linear-gradient(#f29d3c,#f29d3c),            repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
.bar .fill.red    { background-color: var(--danger); background-image: linear-gradient(var(--danger),var(--danger)),repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
.bar .fill.blue   { background-color: var(--blue);   background-image: linear-gradient(var(--blue),var(--blue)),    repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
.bar .fill.pink   { background-color: var(--pink);   background-image: linear-gradient(var(--pink),var(--pink)),    repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
.bar .fill.purple { background-color: var(--purple); background-image: linear-gradient(var(--purple),var(--purple)),repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
/* centered value text overlaid on a bar */
.bar .bar-val {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'VT323', monospace; font-size: 8px;
  color: #fff; text-shadow: 0 1px 0 #000a, 1px 0 0 #000a;
}
.bar.tall { height: 22px; }

/* ============================================================================
   .chip — currency / stat chips (gold, gems, shards, stamina)
   ============================================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'VT323', monospace;
  font-size: 10px;
  color: var(--ink);
  background: var(--parchment-dim);
  border: 2px solid var(--wood);
  border-radius: var(--corner);
  padding: 5px 9px 5px 6px;
  box-shadow: var(--hi), 0 2px 0 var(--wood-dark);
  white-space: nowrap;
}
.chip .chip-ico { width: 16px; height: 16px; flex: 0 0 16px; }
.chip.dark { background: var(--wood); color: var(--parchment); }
.chip.sm { font-size: 8px; padding: 4px 7px 4px 5px; }

/* ============================================================================
   .tile — square slot with a 2px rarity-colored inner border (creature tiles)
   ============================================================================ */
.tile {
  position: relative;
  width: 56px; height: 56px;
  background: var(--parchment-dim);
  border: 2px solid var(--wood);
  border-radius: var(--corner);
  box-shadow: inset 0 0 0 2px #fff4, 0 2px 0 var(--wood-dark);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tile .tile-inner {
  position: absolute; inset: 3px;
  border: 2px solid var(--rar-common);
  border-radius: 1px;
  pointer-events: none;
}
.tile img { width: 80%; height: 80%; object-fit: contain; }
.tile.r-common    .tile-inner { border-color: var(--rar-common); }
.tile.r-uncommon  .tile-inner { border-color: var(--rar-uncommon); }
.tile.r-rare      .tile-inner { border-color: var(--rar-rare); }
.tile.r-epic      .tile-inner { border-color: var(--rar-epic); }
.tile.r-legendary .tile-inner { border-color: var(--rar-legendary); }
.tile.r-mythical  .tile-inner { border-color: var(--rar-mythical); }
.tile.empty {
  background: var(--ink-dark);
  color: var(--parchment-edge);
  box-shadow: inset 0 3px 0 #0006, 0 2px 0 var(--wood-dark);
  font-family: 'VT323', monospace; font-size: 16px;
}
.tile.empty .tile-inner { border-style: dashed; border-color: var(--wood); }

/* ============================================================================
   .ribbon-tab — notched cloth bookmark down the right edge (4/6.jpg)
   ============================================================================ */
.ribbon-rail { display: flex; flex-direction: column; gap: 6px; }
.ribbon-tab {
  display: flex; align-items: center; gap: 7px;
  font-family: 'VT323', monospace; font-size: 8px;
  color: #fff; text-shadow: 0 1px 0 #0007;
  background: var(--pink);
  border: 2px solid var(--wood-dark);
  border-left-width: 4px;
  padding: 8px 10px 8px 8px;
  /* notched fishtail end on the right */
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
  box-shadow: var(--hi);
  margin-left: -2px;
  cursor: pointer;
}
.ribbon-tab .rib-ico { width: 16px; height: 16px; }
.ribbon-tab.active { margin-left: -10px; filter: brightness(1.12); padding-right: 16px; }
.ribbon-tab.c-pink   { background: var(--pink); }
.ribbon-tab.c-blue   { background: var(--blue); }
.ribbon-tab.c-green  { background: var(--green); }
.ribbon-tab.c-gold   { background: var(--gold); color: var(--ink); text-shadow: 0 1px 0 #fff7; }
.ribbon-tab.c-purple { background: var(--purple); }

/* ============================================================================
   .icon-tab — square pixel section tab (top row); active = green
   ============================================================================ */
.icon-tab-row { display: flex; gap: 8px; }
.icon-tab {
  width: 48px; height: 44px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 3px;
  background: var(--parchment-dim);
  border: 2px solid var(--wood-dark);
  border-radius: var(--corner);
  box-shadow: var(--hi), 0 3px 0 var(--wood-dark);
  cursor: pointer;
  font-family: 'VT323', monospace; font-size: 6px; color: var(--ink);
}
.icon-tab .it-ico { width: 22px; height: 22px; }
.icon-tab:hover { filter: brightness(1.06); }
.icon-tab.active {
  background: var(--green); color: var(--ink-dark);
  transform: translateY(2px);
  box-shadow: var(--hi), 0 1px 0 var(--green-deep);
}

/* ── element & rate badges ─────────────────────────────────────────────── */
.el-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'VT323', monospace; font-size: 7px;
  color: #fff; text-shadow: 0 1px 0 #0008;
  padding: 3px 6px; border: 2px solid var(--wood-dark); border-radius: var(--corner);
  box-shadow: var(--hi);
}
.el-terra { background: var(--el-terra); }
.el-flora { background: var(--el-flora); }
.el-aqua  { background: var(--el-aqua); }
.el-aero  { background: var(--el-aero); color: var(--ink); text-shadow: 0 1px 0 #fff8; }
.el-ignis { background: var(--el-ignis); }
.el-void  { background: var(--el-void); }
.el-lux   { background: var(--el-lux); color: var(--ink); text-shadow: 0 1px 0 #fff8; }

.rate-badge {
  font-family: 'VT323', monospace; font-size: 7px;
  padding: 3px 6px; border: 2px solid var(--wood-dark); border-radius: var(--corner);
  color: var(--ink-dark); box-shadow: var(--hi);
}
.rate-badge.rare     { background: var(--rate-rare); }
.rate-badge.uncommon { background: var(--rate-uncommon); }
.rate-badge.common   { background: var(--rate-common); }

/* ── tiny pixel hearts (happiness) via CSS shape ───────────────────────── */
.heart {
  width: 12px; height: 11px; display: inline-block;
  background: var(--danger);
  -webkit-mask:
    radial-gradient(circle at 3px 3px, #000 2.5px, #0000 0) 0 0/6px 6px,
    radial-gradient(circle at 3px 3px, #000 2.5px, #0000 0) 6px 0/6px 6px,
    linear-gradient(#000,#000) 1px 3px/10px 5px,
    conic-gradient(from -45deg at 6px 9px, #000 90deg, #0000 0) 0 0/12px 11px;
  -webkit-mask-repeat: no-repeat;
}
.heart.empty { background: #00000033; }

/* ============================================================================
   BATCH 2 ADDITIONS — extend, never break the classes above.
   Inventory · Profile · Index · Marketplace · Breeding.
   ============================================================================ */

/* ── .zk-chip — the $ZENKO token chip (teal coin, distinct from gold/gems) ── */
.zk-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'VT323', monospace; font-size: 9px;
  color: var(--ink-dark);
  background: #5fd0c4;
  border: 2px solid var(--wood-dark); border-radius: var(--corner);
  padding: 4px 8px 4px 6px;
  text-shadow: 0 1px 0 #fff7;
  box-shadow: var(--hi), 0 2px 0 #2f8f86;
  white-space: nowrap;
}
.zk-tag svg { width: 15px; height: 15px; flex: 0 0 15px; }
.zk-tag.big { font-size: 11px; padding: 6px 11px 6px 8px; }

/* ── .slot-grid / .inv-slot — book inventory grid (4.jpg) ──────────────────── */
.slot-grid { display: grid; gap: 8px; }
.inv-slot {
  position: relative; aspect-ratio: 1/1; min-width: 0;
  background: var(--parchment-dim);
  border: 2px solid var(--wood); border-radius: var(--corner);
  box-shadow: inset 0 0 0 2px #fff4, 0 2px 0 var(--wood-dark);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  cursor: pointer;
}
.inv-slot::after {
  content: ""; position: absolute; inset: 3px;
  border: 1px dashed var(--wood); opacity: .35; border-radius: 1px; pointer-events: none;
}
.inv-slot svg, .inv-slot img { width: 62%; height: 62%; object-fit: contain; z-index: 1; }
.inv-slot.empty { background: var(--ink-dark); box-shadow: inset 0 3px 0 #0006, 0 2px 0 var(--wood-dark); }
.inv-slot.empty::after { border-color: var(--wood); }
.inv-slot.sel {
  background: var(--green);
  box-shadow: inset 0 0 0 2px #fff6, 0 0 0 2px var(--green-deep), 0 2px 0 var(--green-deep);
}
.inv-slot .count {
  position: absolute; right: 2px; bottom: 1px; z-index: 2;
  font-family: 'VT323', monospace; font-size: 7px; color: #fff;
  text-shadow: 0 1px 0 #000a, 1px 0 0 #000a, -1px 0 0 #000a;
}
.inv-slot .tier-dot { position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border: 1px solid var(--wood-dark); z-index: 2; }

/* ── .index-cell — Pokédex cell: collected sprite or dark silhouette ───────── */
.index-cell {
  position: relative; width: 50px; height: 50px;
  background: var(--parchment-dim);
  border: 2px solid var(--wood); border-radius: var(--corner);
  box-shadow: inset 0 0 0 2px #fff4, 0 2px 0 var(--wood-dark);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.index-cell .ic-inner { position: absolute; inset: 3px; border: 2px solid var(--rar-common); border-radius: 1px; pointer-events: none; }
.index-cell img { width: 84%; height: 84%; object-fit: contain; }
.index-cell.r-common .ic-inner    { border-color: var(--rar-common); }
.index-cell.r-uncommon .ic-inner  { border-color: var(--rar-uncommon); }
.index-cell.r-rare .ic-inner      { border-color: var(--rar-rare); }
.index-cell.r-epic .ic-inner      { border-color: var(--rar-epic); }
.index-cell.r-legendary .ic-inner { border-color: var(--rar-legendary); }
.index-cell.r-mythical .ic-inner  { border-color: var(--rar-mythical); }
/* uncollected = dark locked tile, silhouette only */
.index-cell.locked { background: var(--ink-dark); box-shadow: inset 0 3px 0 #0006, 0 2px 0 var(--wood-dark); }
.index-cell.locked img { filter: brightness(0) opacity(.42); }
.index-cell.locked .ic-inner { border-style: dashed; border-color: var(--wood); }
.index-cell.locked .qmark {
  position: absolute; z-index: 2; font-family: 'VT323', monospace;
  font-size: 13px; color: var(--parchment-edge); opacity: .55;
}

/* ── .listing-card — marketplace P2P listing ──────────────────────────────── */
.listing-card {
  width: 132px;
  background: var(--parchment); border: 2px solid var(--wood); border-radius: var(--corner);
  box-shadow: var(--hi), 0 3px 0 var(--wood-dark);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.listing-card .lc-top { display: flex; justify-content: center; }
.listing-card .lc-name { font-family: 'VT323', monospace; font-size: 7px; color: var(--ink); text-align: center; }
.listing-card .lc-seller { font-family: 'VT323', monospace; font-size: 8px; color: var(--wood); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing-card .lc-price { display: flex; justify-content: center; }
.listing-card .lc-buy { font-size: 8px; padding: 7px 6px; width: 100%; }

/* ── .pdoll — profile paper-doll preview frame (6.jpg) ─────────────────────── */
.pdoll {
  position: relative; width: 116px; height: 132px; flex: 0 0 116px;
  background: linear-gradient(#cdeaf8, #a9d8ef);
  border: 3px solid var(--wood-dark); border-radius: var(--corner);
  box-shadow: inset 0 0 0 2px #fff5, 0 3px 0 var(--wood-dark);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pdoll img { width: 86%; height: 86%; object-fit: contain; }

/* ── achievement badge pill (round trophy chip) ───────────────────────────── */
.ach {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  width: 48px;
}
.ach .ach-ico {
  width: 40px; height: 40px;
  background: var(--gold); border: 2px solid var(--wood-dark); border-radius: var(--corner);
  box-shadow: var(--hi), 0 2px 0 var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
}
.ach .ach-ico svg { width: 24px; height: 24px; }
.ach .ach-ico.locked { background: #9a8f7a; box-shadow: var(--hi), 0 2px 0 #6e655400; filter: grayscale(.6); }
.ach .ach-lbl { font-family: 'VT323', monospace; font-size: 7px; color: var(--wood); text-align: center; }

/* ── inline element-dot for compact lists ─────────────────────────────────── */
.el-dot { width: 10px; height: 10px; border: 1px solid var(--wood-dark); border-radius: 1px; display: inline-block; flex: 0 0 10px; }

/* utility */
.muted { color: var(--wood); }
.tiny { font-size: 7px; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ============================================================================
   BATCH 3 ADDITIONS — extend, never break the classes above.
   Egg Shop · Nest · Style/Wardrobe · Settings.  Pixel toggle + slider + stepper.
   ============================================================================ */

/* ── .toggle — chunky pixel on/off switch (no smooth track, hard knob) ─────── */
.toggle {
  position: relative; width: 46px; height: 24px; flex: 0 0 46px;
  background: var(--ink-dark);
  border: 2px solid var(--wood-dark); border-radius: var(--corner);
  box-shadow: inset 0 2px 0 #0006; cursor: pointer; user-select: none;
}
.toggle .knob {
  position: absolute; top: 1px; left: 1px; width: 18px; height: 18px;
  background: var(--parchment-dim); border: 2px solid var(--wood-dark); border-radius: 1px;
  box-shadow: var(--hi), 0 2px 0 #0004;
}
.toggle .tlabel {
  position: absolute; top: 0; bottom: 0; right: 6px;
  display: flex; align-items: center;
  font-family: 'VT323', monospace; font-size: 6px; color: var(--parchment-edge);
}
.toggle.on { background: var(--green-deep); }
.toggle.on .knob { left: auto; right: 1px; background: var(--gold); }
.toggle.on .tlabel { right: auto; left: 6px; color: #fff; text-shadow: 0 1px 0 #0007; }

/* ── .stepper — − [value] + numeric pixel stepper (volume, counts) ─────────── */
.stepper { display: inline-flex; align-items: center; gap: 0; }
.stepper .sbtn {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-family: 'VT323', monospace; font-size: 11px; color: var(--ink);
  background: var(--gold); border: 2px solid var(--wood-dark); border-radius: var(--corner);
  box-shadow: var(--hi), 0 3px 0 var(--gold-deep); cursor: pointer; user-select: none;
}
.stepper .sbtn:active { transform: translateY(2px); box-shadow: var(--hi), 0 1px 0 var(--gold-deep); }
.stepper .sval {
  min-width: 44px; height: 24px; margin: 0 6px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'VT323', monospace; font-size: 9px; color: var(--ink);
  background: var(--parchment); border: 2px solid var(--wood); border-radius: var(--corner);
  box-shadow: inset 0 2px 0 #0001;
}

/* ── .pslider — segmented pixel slider (hard notch track + chunky handle) ──── */
.pslider {
  position: relative; height: 18px; flex: 1; min-width: 0;
  background: var(--ink-dark); border: 2px solid var(--wood-dark); border-radius: var(--corner);
  box-shadow: inset 0 2px 0 #0006; overflow: hidden;
}
.pslider .pfill {
  height: 100%; background: var(--gold); box-shadow: var(--hi);
  background-image:
    linear-gradient(var(--gold), var(--gold)),
    repeating-linear-gradient(90deg, #0000 0 6px, #0002 6px 8px);
}
.pslider .pfill.green { background-color: var(--green); background-image: linear-gradient(var(--green),var(--green)), repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
.pslider .pfill.blue  { background-color: var(--blue);  background-image: linear-gradient(var(--blue),var(--blue)),  repeating-linear-gradient(90deg,#0000 0 6px,#0002 6px 8px); }
.pslider .phandle {
  position: absolute; top: -3px; width: 12px; height: 22px; transform: translateX(-50%);
  background: var(--parchment-dim); border: 2px solid var(--wood-dark); border-radius: 1px;
  box-shadow: var(--hi), 0 2px 0 #0004;
}

/* ── .set-row — a labeled settings row (label · control) ───────────────────── */
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--parchment-edge);
}
.set-row:last-child { border-bottom: none; }
.set-row .sl { font-family: 'VT323', monospace; font-size: 8px; color: var(--ink); }
.set-row .ss { font-family: 'VT323', monospace; font-size: 9px; color: var(--wood); }
.set-row .sctl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.set-row .sctl.wide { flex: 1; max-width: 180px; }