/* Design tokens. One source of truth for colour, type, space and motion —
   before this, styles were ad hoc across two clients and drifted.

   The palette is warm charcoal rather than near-black. Pure #0a0d12 under a
   green felt reads heavy and slightly funereal; lifting the ground two steps
   and warming it lets the felt be the only saturated thing on the screen,
   which is what you actually want people looking at. Dark stays — this is a
   game played in a bar at night, on an OLED phone, at 4% battery. */
:root{
  --ink:#12151a; --ink-2:#171b22;
  --panel:#1b212a; --panel-2:#252d38; --panel-3:#333d4b;
  --line:rgba(244,241,234,.08);
  --paper:#f4f1ea; --muted:rgba(244,241,234,.62); --faint:rgba(244,241,234,.38);
  --amber:#ffc44d; --amber-2:#efa41f; --amber-ink:#231703;
  --mint:#46e0a4; --rose:#ff7a8a;
  --felt:#0f7049; --felt-lo:#0a5334; --wood:#5c3819;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;

  --f-ui:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-num:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --t-fast:.14s; --t-med:.24s;
  --shadow:0 8px 28px rgba(0,0,0,.42);

  /* Smallest thing a thumb may be asked to hit. Every interactive element in
     the product is measured against this, not eyeballed. */
  --tap:44px;
  /* Notch, home indicator, rounded corners. Zero on anything that has none. */
  --sa-t:env(safe-area-inset-top,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);
  font:500 15px/1.35 var(--f-ui);overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
/* iOS Safari reports 100vh as the tallest the viewport ever gets, so a
   full-height layout hides its own bottom bar behind the URL chrome. dvh fixes
   it where it exists; --app-h is set from visualViewport where it does not. */
body{position:fixed;inset:0;overflow:hidden}

button{font:inherit;cursor:pointer;border:0;color:var(--paper);background:var(--panel-2);
  border-radius:var(--r-md);transition:background var(--t-fast),transform var(--t-fast),opacity var(--t-fast);
  touch-action:manipulation}
button:active{transform:translateY(1px);background:var(--panel-3)}
button:disabled{opacity:.32;cursor:default;transform:none}
.btn-primary{background:linear-gradient(180deg,#ffd977,var(--amber-2));color:var(--amber-ink);
  font-weight:800;letter-spacing:.03em}
.btn-primary:active{background:linear-gradient(180deg,#ffcf5e,#dd950f)}
.lead{font-weight:800;letter-spacing:-.01em}
.sub{font-size:12.5px;color:var(--muted);font-weight:500}
.pill{border-radius:var(--r-pill);background:var(--panel);padding:5px 12px;font-size:13px;font-weight:700}
/* Money is the drama. Nothing else on a screen should out-weigh it. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em}

:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Someone who has asked their phone to stop moving things has asked for a
   reason. Everything still happens — it just arrives instead of travelling. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}