* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font: 400 1.05rem/1.55 var(--pixel);
  color: var(--text);
  background: #241b17;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: none;
}
button, input, select, textarea { font: inherit; color: inherit; background: none; }
button { cursor: pointer; }
svg { display: block; }
:focus-visible { outline: var(--u) solid var(--gold); outline-offset: 2px; }

#world {
  position: fixed; inset: 0;
  display: block;
  touch-action: none;
  outline: none;
  image-rendering: pixelated;
}

/* ---------- Pixel frames (nine-slice) ---------- */
.px, .pbtn, .slot, .key, .field input, .field select, .field textarea, .choice span, .count div {
  border-style: solid;
  border-width: calc(var(--u) * 4);
  border-image: var(--f-paper) 4 fill / calc(var(--u) * 4) stretch;
}
.px-sand { border-image-source: var(--f-sand); }
.px-wood { border-image-source: var(--f-wood); color: var(--wood-text); }

/* Buttons: wood by default, paper for secondary actions. Pressing swaps the bevel. */
.pbtn {
  --u: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 2px 14px;
  border-image-source: var(--f-wood);
  color: var(--wood-text);
  font-weight: 600; font-size: 1.05rem; line-height: 1.1; text-decoration: none;
  text-align: center;
}
.pbtn:hover { border-image-source: var(--f-wood-hi); }
.pbtn:active { border-image-source: var(--f-wood-down); transform: translateY(2px); }
.pbtn:disabled { cursor: progress; border-image-source: var(--f-wood-down); opacity: 0.8; }
.pbtn-paper { border-image-source: var(--f-paper); color: var(--text); }
.pbtn-paper:hover { border-image-source: var(--f-sand); }
.pbtn-paper:active { border-image-source: var(--f-paper-down); }
.pbtn-square { width: 48px; min-height: 48px; height: 48px; padding: 0; }