/* Design tokens and the page itself. Every colour in the project comes from a
   variable declared here — do not hard-code a hex value in another stylesheet. */

:root{
  --dark:#100E0C;
  --dark2:#191512;
  --bone:#E8E1D3;
  --red:#B4271F;
  --blue:#2E5E8E;
  --rope:#7A6E5D;
  --amber:#F2B33D;

  /* Money. Earnings are the amber the rest of the game already spends on
     things worth looking at; deductions are the red corner's red, pulled up a
     little so it stays legible as small type on a dark card. The two have to be
     tellable apart at a glance in a list that is counting itself up, which is
     also why the purse lines carry a + or a - as well as a colour — colour
     alone is the one cue some players do not have. */
  --coin:#F2B33D;
  --coin-up:#8FCB6B;
  --coin-down:#E8503F;

  /* The token. One cold colour in a game made entirely of warm ones, spent on
     exactly one thing: the piece of kit a $GLASSJAW holder is owed. It is the
     same cyan the Neon Visor is built from, which is deliberate — it already
     exists in the world, so the tile does not look like it came from a
     different game. Never used for anything else, because the moment a second
     control is this colour the first one stops meaning anything. */
  --glass:#2BE8FF;

  --display:"Haettenschweiler","Arial Narrow Bold","Impact","Franklin Gothic Bold",sans-serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--dark);color:var(--bone);font-family:var(--ui);overflow:hidden}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- shared ---------- */
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;z-index:20}
button{font-family:var(--ui);cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* What a pad has landed on. See src/ui/padnav.js — a selection the player
   cannot see is the whole feature failing quietly. */
button.padfocus{outline:2px solid var(--amber);outline-offset:2px;box-shadow:0 0 0 4px rgba(242,179,61,.18)}