/* Plotlines shared tokens: pixel farm-sim */
:root {
  --sky: #7fc8f8;
  --sky-lt: #b9e3fb;
  --grass: #5fae3c;
  --grass-lt: #7cc95a;
  --grass-dk: #3f8a2a;
  --soil: #102a12;       /* text, outlines, pixel shadows */
  --soil-2: #3d5a40;     /* secondary text */
  --paper: #f4fbff;      /* panels and sections */
  --paper-2: #e3f3fd;    /* hover, inputs */
  --line: #b9d9ea;       /* quiet dividers */
  --sun: #ffe14d;        /* claims, primary actions */
  --sale: #ff4d4d;       /* for-sale signs */
  --danger: #d6334a;

  --pixel: "Silkscreen", ui-monospace, monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --bw: 3px;                              /* pixel border width */
  --shadow: 4px 4px 0 var(--soil);
  --shadow-sm: 3px 3px 0 var(--soil);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--soil);
  font: 400 16px/1.55 var(--sans);
}
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--soil); outline-offset: 2px; }
img[src$=".svg"] { image-rendering: pixelated; }

.wordmark {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 700 22px/1 var(--pixel); letter-spacing: 0;
}

.mono { font-family: var(--mono); }
.pixel { font-family: var(--pixel); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--bw) solid var(--soil); background: var(--paper); padding: 10px 18px;
  border-radius: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 700 15px/1.1 var(--pixel); box-shadow: var(--shadow-sm);
  transition: transform .06s, box-shadow .06s;
}
.btn:hover:not(:disabled) { background: #fff; }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--soil); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.flag { background: var(--sun); }
.btn.flag:hover:not(:disabled) { background: #fff07a; }
.btn.stake { background: var(--sale); color: #fff; }
.btn.stake:hover:not(:disabled) { background: #ff6b6b; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:active:not(:disabled) { transform: none; }
.btn.small { padding: 6px 11px; font-size: 13px; box-shadow: 2px 2px 0 var(--soil); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}