/* ============================================================
   BASE — colours, type, buttons. All fonts are system fonts so
   nothing is downloaded (the game works fully offline).
   ============================================================ */
:root {
  --cream: #fff8ec;
  --paper: #fffdf7;
  --ink: #3d3550;
  --ink-soft: #6e6585;
  --wood: #b07a45;
  --wood-dark: #7a5230;
  --sky: #8fd0f0;
  --mint: #7fd3a8;
  --rose: #f39ac0;
  --gold: #f5c542;
  --warn: #e0705a;
  --shadow: 0 6px 20px rgba(40, 40, 80, 0.18);
  --radius: 16px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #8fd0f0; color: var(--ink);
  font-family: var(--font); font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
canvas#game { position: fixed; inset: 0; display: block; touch-action: none; cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0.2em 0 0.4em; line-height: 1.2; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.85rem; margin: 0.8em 0 0.3em; color: var(--ink-soft); }
.small { font-size: 0.82rem; }
.muted { color: var(--ink-soft); }
.ok { color: #3a9a5a; }
.warn { color: var(--warn); }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.empty { color: var(--ink-soft); font-style: italic; padding: 8px 0; }
input.text, select, input.rename {
  font: inherit; padding: 10px 12px; border-radius: 12px; border: 2px solid #e4d8c4; background: #fff; color: var(--ink); width: 100%;
}
input.rename { padding: 4px 8px; }
input[type=range] { width: 100%; accent-color: var(--wood); }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--wood); }

/* ---- buttons ---- */
.btn {
  font: inherit; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(#8fc9a0, #5fae7a); border: none; border-radius: 999px;
  padding: 10px 18px; min-height: 44px; box-shadow: 0 3px 0 #3f8a5a; transition: transform 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #3f8a5a; }
.btn:disabled { filter: grayscale(0.8) opacity(0.55); cursor: default; transform: none; }
.btn.small { padding: 6px 12px; min-height: 36px; font-size: 0.85rem; }
.btn.big { font-size: 1.15rem; padding: 14px 26px; width: 100%; }
.btn.gold { background: linear-gradient(#ffd86a, #f0b030); box-shadow: 0 3px 0 #b07a10; color: #5a3a00; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 3px 0 #e0d4c0; border: 2px solid #eadfcc; }
.btn.danger { color: var(--warn); }
.icon-btn { font-size: 1.25rem; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 253, 247, 0.9); box-shadow: var(--shadow); cursor: pointer; }

.chip { display: inline-block; padding: 2px 9px; margin: 2px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: color-mix(in srgb, var(--c) 45%, white); border: 2px solid var(--c); color: #3d3550; }
.fx { margin: 4px 0; }
.fx.big .chip { font-size: 0.9rem; padding: 4px 11px; }