:root{
  /* base ui */
  --bg:#efe6d6;
  --panel:#fbf5ea;
  --panel-2:#f3e9d7;
  --line:#e2d3ba;
  --ink:#3a2f27;
  --muted:#9a8a76;

  /* brand / accent */
  --accent:#c9724a;
  --accent-fg:#fff7ef;
  --good:#5f9e6a;
  --bad:#c0553f;

  /* sky / background wash */
  --sky-top:#f7dcc2;
  --sky-bottom:#f3ead9;

  /* low-poly facet pairs: lit (sun face) + dark (shadow face) */
  --grass-lit:#8fbf74;
  --grass-dark:#5f9a58;
  --water-lit:#6fb7c4;
  --water-dark:#4a8f9e;
  --soil-lit:#c79a63;
  --soil-dark:#a2754a;
  --roof-lit:#d97f57;
  --roof-dark:#b1583a;
  --wood-lit:#b7855a;
  --wood-dark:#8a5d3a;
  --stone-lit:#c9c0b0;
  --stone-dark:#9d9284;
  --leaf-lit:#79b168;
  --leaf-dark:#4f8749;
  --sail-lit:#f4ece0;
  --sail-dark:#d9cdb8;
  --contact-shadow:rgba(58,47,39,.12);

  /* fonts */
  --font-sans:"Poppins",system-ui,sans-serif;
  --font-display:"Fredoka",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* type scale */
  --text-xs:.72rem;
  --text-sm:.85rem;
  --text-base:1rem;
  --text-lg:1.25rem;
  --text-xl:1.6rem;
  --text-2xl:2.1rem;

  /* spacing */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-6:1.5rem;

  /* radius + shadow */
  --radius:.7rem;
  --radius-lg:1.1rem;
  --shadow-sm:0 2px 6px rgba(58,47,39,.10);
  --shadow-md:0 8px 24px rgba(58,47,39,.16);
  --shadow-accent:0 4px 14px rgba(201,114,74,.35);
}

html,body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);}

.hud-stat{display:flex;align-items:center;gap:.5rem;padding:.25rem .6rem;border-radius:.6rem;background:var(--panel-2);border:1px solid var(--line);}
.hud-ico{width:1.7rem;height:1.7rem;border-radius:.45rem;display:grid;place-items:center;color:#fff;font-size:.9rem;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);}
.hud-val{font-weight:700;font-size:1.1rem;line-height:1;font-family:var(--font-display);letter-spacing:.01em;}
.hud-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}

.pal-btn{cursor:pointer;border:2px solid var(--line);border-radius:.7rem;background:var(--panel-2);padding:.5rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:all .12s ease;min-width:72px;flex-shrink:0;}
.pal-btn:hover{border-color:var(--accent);transform:translateY(-1px);}
.pal-btn:active{transform:scale(.95);}
.pal-btn.active{border-color:var(--accent);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-accent);}
.pal-btn.active .pal-cost{color:var(--accent-fg);}
.pal-name{font-weight:600;font-size:.8rem;font-family:var(--font-display);}
.pal-cost{font-size:.7rem;color:var(--muted);font-weight:600;}
canvas{image-rendering:auto;}

/* Mobile palette bar */
.palette-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.palette-scroll::-webkit-scrollbar{display:none;}

/* On desktop: restore normal sizing */
@media (min-width:1024px){
  .pal-btn{min-width:0;flex-shrink:1;}
  .pal-btn[data-key="bulldoze"]{grid-column:span 2;}
}

/* Small screens: tighter buttons, hide cost label */
@media (max-width:1023px){
  .pal-btn{padding:.4rem .45rem;min-width:66px;}
  .pal-cost{display:none;}
  .pal-name{font-size:.72rem;}
  .hud-stat{padding:.2rem .45rem;}
  .hud-val{font-size:.95rem;}
}