/* BAGWORK design tokens. One display font, one UI font, four main colours.
   Loaded after style.css and street.css, so the shared components below win. Games read the same variables. */
:root {
  /* the four main colours */
  --ink: #0b1020;            /* night navy: page, panels (tints below) */
  --paper: #f4f1e8;          /* text */
  --gold: #FFC83D;           /* money and the primary action */
  --cyan: #3BE8FF;           /* secondary accent: focus, selection, progress */
  /* tints of those (not new colours) */
  --base: var(--ink);
  --surface: #141c33;
  --raised: #1f2a4a;
  --text: var(--paper);
  --muted: #9ea7c2;
  --line: rgba(244, 241, 232, .1);
  --gold-deep: #b07a00;
  --cyan-deep: #1796a8;
  --danger: #FF4D6D;         /* errors and losses only */
  --amber: var(--gold);

  /* type */
  --display: "Lilita One", "DM Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand: var(--display);

  /* spacing, radius, elevation */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --bar-h: 64px;             /* hub header */
  --gbar-h: 40px;            /* in-game bar */
}

/* ---------- buttons: one family everywhere ---------- */
.play, .ghost, .refill, .dock, .btn {
  border-radius: var(--r); font-family: var(--body); font-weight: 700; letter-spacing: 0;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.play { background: var(--gold); color: var(--ink); border: 0; padding: var(--s3) var(--s6); font-size: 18px; box-shadow: 0 4px 0 var(--gold-deep); cursor: pointer; }
.play[disabled] { opacity: .5; cursor: not-allowed; }
.play:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--gold-deep), 0 12px 26px rgba(255, 200, 61, .25); }
.play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }
.play.small { font-size: 15px; padding: var(--s2) var(--s5); border-radius: var(--r); box-shadow: 0 3px 0 var(--gold-deep); }
.ghost { background: transparent; border: 1.5px solid rgba(244, 241, 232, .28); color: var(--text); cursor: pointer; padding: calc(var(--s3) - 1.5px) var(--s5); font-size: 15px; }
.ghost:hover { background: rgba(244, 241, 232, .07); border-color: rgba(244, 241, 232, .5); }
.refill { border-radius: var(--r-pill); padding: 6px var(--s3); font-size: 13px; background: var(--raised); color: var(--text); }
.refill:hover { background: #2a3760; }
.x { background: var(--raised); border-radius: var(--r-pill); }
dialog { border-radius: var(--r-lg); }
.toast { border-radius: var(--r); border-left-color: var(--cyan); }
.menu { border-radius: var(--r); }
:focus-visible { outline-color: var(--cyan); border-radius: var(--r-sm); }

/* ---------- the in-game bar: same brand, balance and level on every game screen ---------- */
#gbar { position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: calc(var(--gbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--s4) 0;
  display: none; align-items: center; justify-content: space-between; gap: var(--s3); pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 16, 32, .94), rgba(11, 16, 32, .8)); border-bottom: 1px solid var(--line);
  font: 600 13px/1 var(--body); color: var(--text); }
body.gbar-on #gbar { display: flex; }
#gbar .gb-brand { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
#gbar .gb-brand b { font: 400 19px/1 var(--display); color: var(--gold); letter-spacing: .5px; }
#gbar .gb-brand span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gbar .gb-right { display: flex; align-items: center; gap: var(--s2); }
#gbar .gb-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s3); border-radius: var(--r-pill); background: rgba(31, 42, 74, .85); border: 1px solid var(--line); }
#gbar .gb-pill .money { font: 400 16px/1 var(--display); color: var(--gold); }
#gbar .gb-pill i { display: block; width: 44px; height: 5px; border-radius: var(--r-pill); background: var(--ink); overflow: hidden; }
#gbar .gb-pill i b { display: block; height: 100%; width: 0; background: var(--cyan); }
#gbar .gb-practice { color: var(--cyan); }
/* push each game's top HUD row below the bar (margin works on absolutely positioned boxes) */
body.gbar-on :is(.hud-left, #board, .bs-top, .bs-new, #bk .bk-top, .party .bh-top, .party .bh-corner, .party .bh-cam, .party .bh-settings, .party .bh-feed) { margin-top: var(--gbar-h); }
@media (max-width: 520px) { #gbar .gb-brand span, #gbar .gb-pill i { display: none; } :root { --gbar-h: 34px; } }