/* Zuma Deluxe: the stone-garden palette. shell.css carries the pixel chrome, so
   this page only restates the tokens for a dark HUD and styles the swap control. */
:root {
  --ink: #e9eef5;
  --ink-dim: #9fb0c4;
  --page: #141a22;
  --chrome: #3b4f68;
  --chrome-lit: #6f8dab;
  --chrome-edge: #16212e;
  --chrome-shadow: #0d131a;
  --field: #12202e;
  --field-ink: #dceaf8;
  --field-dim: #8fa8c4;
  --good: #4f9c6c;
  --done: #123024;
  --done-ink: #bdf0d0;
}
#game-canvas { background: #101820 }

/* The swap is a thumb control, not a menu row: it sits in the corner of the board
   and shows the reserve beside the loaded marble, so swapping is readable at a glance. */
.swap {
  position: fixed;
  z-index: 9;
  right: calc(10px + var(--right-safe));
  bottom: calc(10px + var(--bottom-safe));
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 8px 10px;
  background: #101820;
  border: 3px solid var(--chrome-edge);
  clip-path: var(--notch);
  box-shadow: inset 0 3px var(--chrome-lit);
  color: var(--field-ink);
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.swap:active { transform: translateY(2px) }
.swap-balls { display: flex; align-items: center; gap: 5px }
/* 22 and 15 are the two crops app.js takes out of assets/reserve.png. */
.swap-balls i { width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; image-rendering: pixelated }
.swap-balls i:first-child { width: 15px; height: 15px; opacity: .8 }