:root{
  --sky:#a9d3ff;--sky2:#dff0ff;
  --evening:#ffcc88;--night:#0a1030;
  --grass:#2d7d3e;--dirt:#6b4b2a;--dirt2:#7c5731;
  --ui:#0b0f14;--card:#151d25;--ink:#eaf2ff;--muted:#9fb0c5;--gold:#f0c35a;
  --rock:#b9b2a4;--cart:#c79b62;--wheel:#2a2a2a;--tree:#2b6d2d;--tree2:#1d4d1e;
}
html,body{margin:0;background:#0a0f14;color:var(--ink);font:14px/1.4 ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial}
.wrap{max-width:980px;margin:32px auto;padding:0 16px}
.btn{display:inline-block;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid #1f2a36;color:var(--ink);text-decoration:none}
.btn:hover{outline:2px solid rgba(240,195,90,.25)}
.hud{display:flex;gap:10px;align-items:center;margin:10px 0 12px}
.hud .pill{padding:6px 10px;border:1px solid #263341;background:#121821;border-radius:999px;color:var(--muted)}
.canvas-frame{background:#0e1620;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);padding:12px}
canvas{display:block;border-radius:10px;background:linear-gradient(to bottom,var(--sky) 0%,var(--sky2) 38%, var(--dirt) 38%, var(--dirt2) 100%)}
.badge{font-weight:700;color:var(--gold)}
/* Pixel-knight sprite via CSS drawn in canvas (consistent colors) */
.knight-colors{--k-helm:#b7c7e6;--k-plate:#d7e3ff;--k-shadow:#3a4356;--k-gold:#e9c86a;--k-cape:#213149}