/* Buttons are carved from stone (default) or wood (primary). Texture is pure CSS + an inline SVG noise. */
:root {
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --stone: #6f6a62;
  --stone-light: #8d877c;
  --stone-dark: #46423c;
  --wood: #7a4a24;
  --wood-light: #a36a37;
  --wood-dark: #3e2410;
}

.btn {
  --face: var(--stone);
  --face-light: var(--stone-light);
  --face-dark: var(--stone-dark);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-4);
  border: 2px solid #1a1612;
  border-radius: var(--radius);
  background:
    var(--noise),
    radial-gradient(ellipse at 30% 20%, var(--face-light), transparent 60%),
    linear-gradient(180deg, var(--face), var(--face-dark));
  background-blend-mode: multiply, normal, normal;
  color: #f4ead2;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 3px 0 #0a0807,
    0 5px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 80ms, box-shadow 80ms, filter 120ms;

  &:hover:not(:disabled) { filter: brightness(1.15); color: var(--color-gold-bright); }

  &:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow:
      inset 0 3px 6px rgba(0, 0, 0, 0.6),
      inset 0 0 0 1px rgba(0, 0, 0, 0.25),
      0 0 0 #0a0807;
  }

  &:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 2px; }
  &:disabled { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }
}

/* Wooden plank with faint grain and a gold rim */
.btn--primary {
  --face: var(--wood);
  --face-light: var(--wood-light);
  --face-dark: var(--wood-dark);

  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-color: #2a1809;
  background:
    repeating-linear-gradient(92deg, transparent 0 18px, rgba(0, 0, 0, 0.07) 19px 20px),
    linear-gradient(180deg, var(--face-light), var(--face) 45%, var(--face-dark));
  background-blend-mode: normal, normal;
  color: var(--color-gold-bright);
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 160, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(217, 169, 60, 0.55),
    0 3px 0 #0a0807,
    0 5px 6px rgba(0, 0, 0, 0.5);
}

/* Green-veined stone for buying, red-clay stone for selling */
.btn--buy {
  --face: #3f6b45;
  --face-light: #6aa171;
  --face-dark: #1f3a24;
}

.btn--sell {
  --face: #8a3a30;
  --face-light: #b8604f;
  --face-dark: #4a1b16;
}

/* Short chevron button for nudging a value up or down */
.btn--caret {
  min-height: 1.5rem;
  height: 1.5rem;
  padding: 0;

  &::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
  }

  &.btn--up::before { transform: translateY(2px) rotate(-135deg); }
  &.btn--down::before { transform: translateY(-2px) rotate(45deg); }
}

.btn--small { padding: 0 var(--space-3); min-width: 2.5rem; }

.input {
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-field);
  font: inherit;
  color: inherit;

  &:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 1px; }
}

.card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.flash {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  list-style: none;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

.flash--notice { border-color: var(--color-profit); color: var(--color-profit); }
.flash--alert { border-color: var(--color-loss); color: var(--color-loss); }

.stats {
  display: flex;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);

  & div { flex: 1; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-card); }
  & dt { font-size: 0.8rem; color: var(--color-muted); }
  & dd { margin: 0; font-size: 1.25rem; font-weight: bold; color: var(--color-gold-bright); }
}

/* A small ornament under page titles */
h1::after {
  content: "";
  display: block;
  width: 6rem;
  height: 2px;
  margin-top: var(--space-2);
  background: linear-gradient(90deg, var(--color-gold), transparent);
}

.good-icon {
  display: inline-block;
  width: 1.6em;
  text-align: center;
  font-size: 1.3em;
  vertical-align: middle;
}