/* ui.css — komponen UI pixel bersama (landing + game) */
:root {
  --ink: #22151a;
  --paper: #fff6e2;
  --paper-2: #f2e2bf;
  --paper-3: #e3cd9c;
  --wood: #7a4e2c;
  --wood-2: #9b693c;
  --gold: #ffcf5a;
  --gold-2: #f0a92e;
  --teal: #103a4c;
  --dusk: #1b3b42;
  --dusk-2: #24525a;
  --ember: #e0663a;
  --leaf: #7bbf5a;
  --rose: #ff8fb1;
  --muted: #7a6a58;
  --px: 4px;
  --font-px: "Pixelify Sans", ui-monospace, monospace;
  --font-body: "Work Sans", system-ui, sans-serif;
}

/* bingkai pixel: sudut terpotong tanpa gambar */
.px {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink),
    var(--px) 0 0 0 var(--ink),
    inset 0 calc(var(--px) * -1) 0 0 var(--paper-3),
    inset 0 var(--px) 0 0 #fffdf6;
  margin: var(--px);
}
.px.dark {
  background: var(--dusk);
  color: var(--paper);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink),
    var(--px) 0 0 0 var(--ink),
    inset 0 calc(var(--px) * -1) 0 0 #12292e,
    inset 0 var(--px) 0 0 var(--dusk-2);
}

.btn {
  --bg: var(--paper);
  --lo: var(--paper-3);
  --hi: #ffffff;
  font: 600 16px/1 var(--font-px);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  padding: 12px 18px 14px;
  margin: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow:
    0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
    inset 0 -4px 0 0 var(--lo), inset 0 4px 0 0 var(--hi);
  transition: transform 0.06s steps(1), filter 0.12s;
  image-rendering: pixelated;
}
.btn img { width: 18px; height: 18px; image-rendering: pixelated; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset 0 4px 0 0 var(--lo); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.primary { --bg: var(--gold); --lo: var(--gold-2); --hi: #fff1b8; }
.btn.ember { --bg: var(--ember); --lo: #b24a26; --hi: #ff9a6e; color: #fff6e2; }
.btn.leaf { --bg: var(--leaf); --lo: #4f9140; --hi: #b4e68e; }
.btn.big { font-size: 22px; padding: 16px 26px 18px; }
.btn:focus-visible { outline: 3px dashed var(--gold); outline-offset: 6px; }

.muted { color: var(--muted); }
.pixel { image-rendering: pixelated; }

[hidden] { display: none !important; }

/* font pixel punya ligatur "fi" yang terbaca seperti "A" → matikan di semua elemen */
*, *::before, *::after { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0; }