/* BG Bully UI kit: tokens, type roles and buttons. Spec and do/don't rules: docs/ui-style-guide.md.
   Not loaded by the game yet. The rollout swaps the theme sheets over to these tokens once Mike approves.
   Faces come from fonts.css (self-hosted OFL fonts); load it first. Button plates are PixelLab art built by
   scripts/build-ui-buttons.py and stretched with border-image, so they fit any label without distortion. */


:root{
  /* Colour. Surfaces stay dark; the saturated colours are accents, glints and labels, never big fills. */
  --bb-ink:#05080c;           /* outlines, hard shadows, text stroke */
  --bb-night:#0c110d;         /* page behind panels */
  --bb-panel:#13171f;         /* panels and cards */
  --bb-raised:#1f2620;        /* rows, wells, inputs */
  --bb-line:#4d5a3a;          /* dividers inside panels */
  --bb-text:#eef1dc;          /* body and labels (never pure white) */
  --bb-text-soft:#b9c6bb;     /* secondary copy */
  --bb-text-dim:#7f8b80;      /* hints, disabled labels */
  --bb-lime:#ceff24;          /* primary action, self, rewards */
  --bb-magenta:#ff3993;       /* danger, enemy team, loss */
  --bb-orange:#ff8a29;        /* warnings, burst, timers running out */
  --bb-cyan:#75eced;          /* info, ally team, focus ring */
  --bb-yellow:#ffe46b;        /* hazard stripes, gold, crits */
  --bb-ally:#80eaff;--bb-enemy:#ff72b1;--bb-self:#d4ff42;

  /* Type families. Bangers and Bungee have one weight: never bold them (font-synthesis is off). */
  --bb-font-display:'Bully Display','Bully Bangers',Impact,sans-serif;
  --bb-font-label:'Bully Label','Bully Bangers',Impact,sans-serif;
  --bb-font-number:'Bully Number','Bully Label',Impact,sans-serif;
  --bb-font-body:'Bully Body','Bully Label',sans-serif;

  /* Type scale: size/line-height. Nothing below 11px; body copy never below 12.5px. */
  --bb-display-xl:48px/1 var(--bb-font-display);
  --bb-display-l:34px/1.05 var(--bb-font-display);
  --bb-display-m:26px/1.1 var(--bb-font-display);
  --bb-display-s:20px/1.1 var(--bb-font-display);
  --bb-label-l:16px/1.1 var(--bb-font-label);
  --bb-label-m:13px/1.15 var(--bb-font-label);
  --bb-label-s:11px/1.2 var(--bb-font-label);
  --bb-body-l:500 16px/1.5 var(--bb-font-body);
  --bb-body-m:500 14px/1.45 var(--bb-font-body);
  --bb-body-s:600 12.5px/1.4 var(--bb-font-body);
  --bb-number-xl:28px/1 var(--bb-font-number);
  --bb-number-m:18px/1 var(--bb-font-number);
  --bb-number-s:13px/1 var(--bb-font-number);

  /* Text over busy art: a 2px stamped outline plus a hard drop. Body copy sits on panels instead. */
  --bb-stroke-2:-2px -2px 0 var(--bb-ink),0 -2px 0 var(--bb-ink),2px -2px 0 var(--bb-ink),2px 0 0 var(--bb-ink),2px 2px 0 var(--bb-ink),0 2px 0 var(--bb-ink),-2px 2px 0 var(--bb-ink),-2px 0 0 var(--bb-ink);
  --bb-stroke-drop:var(--bb-stroke-2),4px 4px 0 var(--bb-ink);
  --bb-stamp:2px 2px 0 var(--bb-ink);

  /* Space (4px grid), corners and shadows. Hard edges only: no blur, no gradients on surfaces. */
  --bb-space-1:4px;--bb-space-2:8px;--bb-space-3:12px;--bb-space-4:16px;--bb-space-5:24px;--bb-space-6:32px;
  --bb-notch:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px);
  --bb-drop:3px 4px 0 var(--bb-ink);
  --bb-rim:inset 0 2px 0 #d2e58c40,inset -2px -3px 0 #03070b;
}

/* ---- Type roles ---- */
.bb-display-xl,.bb-display-l,.bb-display-m,.bb-display-s{margin:0;color:var(--bb-text);letter-spacing:.04em;text-transform:uppercase;font-synthesis:none}
.bb-display-xl{font:var(--bb-display-xl);text-shadow:var(--bb-stroke-drop)}
.bb-display-l{font:var(--bb-display-l);text-shadow:var(--bb-stroke-drop)}
.bb-display-m{font:var(--bb-display-m);text-shadow:var(--bb-stroke-2),3px 3px 0 var(--bb-ink)}
.bb-display-s{font:var(--bb-display-s);text-shadow:var(--bb-stamp)}
.bb-label-l,.bb-label-m,.bb-label-s{margin:0;color:var(--bb-text);text-transform:uppercase;font-synthesis:none}
.bb-label-l{font:var(--bb-label-l);letter-spacing:.03em}
.bb-label-m{font:var(--bb-label-m);letter-spacing:.04em}
.bb-label-s{font:var(--bb-label-s);letter-spacing:.06em}
.bb-body-l,.bb-body-m,.bb-body-s{margin:0;color:var(--bb-text);font-variant-numeric:tabular-nums}
.bb-body-l{font:var(--bb-body-l)}.bb-body-m{font:var(--bb-body-m)}.bb-body-s{font:var(--bb-body-s);color:var(--bb-text-soft)}
.bb-body-l b,.bb-body-m b,.bb-body-s b{font-weight:800;color:var(--bb-lime)}
.bb-number-xl,.bb-number-m,.bb-number-s{margin:0;color:var(--bb-text);font-synthesis:none}
.bb-number-xl{font:var(--bb-number-xl);text-shadow:var(--bb-stroke-2),3px 3px 0 var(--bb-ink)}
.bb-number-m{font:var(--bb-number-m);text-shadow:var(--bb-stamp)}
.bb-number-s{font:var(--bb-number-s)}
/* Straight on the art (HUD, banners, map labels): labels and numbers take the full stroke. Sentences go on a panel. */
.bb-on-art :is(.bb-label-l,.bb-label-m,.bb-label-s,.bb-number-m,.bb-number-s),.bb-on-art.bb-label-s{text-shadow:var(--bb-stroke-2),3px 3px 0 var(--bb-ink)}

/* ---- Buttons ----
   One plate per variant and state. 2x pixel scale everywhere: plates slice 10px (12px at the sides) of
   source art into 20px/24px borders, chips slice 5px into 10px. The centre is flattened art, so it can stretch. */
.bb-btn{
  --art:url('assets/ui/plate-lime-normal.png');--art-hover:url('assets/ui/plate-lime-hover.png');--art-down:url('assets/ui/plate-lime-pressed.png');
  --label:var(--bb-lime);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--bb-space-2);
  box-sizing:border-box;min-height:52px;min-width:96px;padding:2px 32px 4px 36px;margin:0;
  border:0 solid transparent;border-image:var(--art) 10 12 fill / 20px 24px / 0 round;
  image-rendering:pixelated;background:none;border-radius:0;
  font:var(--bb-label-l);letter-spacing:.03em;text-transform:uppercase;color:var(--label);text-shadow:var(--bb-stamp);
  filter:drop-shadow(3px 3px 0 var(--bb-ink));cursor:pointer;user-select:none;font-synthesis:none;
  -webkit-tap-highlight-color:transparent;
}
.bb-btn:hover:not(:disabled),.bb-btn.is-hover{border-image-source:var(--art-hover)}
.bb-btn:active:not(:disabled),.bb-btn.is-pressed{border-image-source:var(--art-down);transform:translate(2px,2px);filter:drop-shadow(1px 1px 0 var(--bb-ink))}
.bb-btn:focus-visible,.bb-btn.is-focus{outline:3px solid var(--bb-cyan);outline-offset:3px}
.bb-btn:disabled,.bb-btn.is-disabled{border-image-source:url('assets/ui/plate-disabled.png');color:var(--bb-text-dim);text-shadow:none;cursor:not-allowed;filter:none}
/* Toggles and tabs: "on" reads as a lit, pushed-in key. */
.bb-btn[aria-pressed=true],.bb-btn[aria-selected=true],.bb-btn.is-selected{border-image-source:var(--art-down);transform:translate(2px,2px);filter:drop-shadow(1px 1px 0 var(--bb-ink));text-shadow:var(--bb-stamp),0 0 8px var(--label)}

.bb-btn--secondary{--art:url('assets/ui/plate-steel-normal.png');--art-hover:url('assets/ui/plate-steel-hover.png');--art-down:url('assets/ui/plate-steel-pressed.png');--label:var(--bb-text)}
.bb-btn--danger{--art:url('assets/ui/plate-magenta-normal.png');--art-hover:url('assets/ui/plate-magenta-hover.png');--art-down:url('assets/ui/plate-magenta-pressed.png');--label:#ff79b6}
.bb-btn--warn{--art:url('assets/ui/plate-orange-normal.png');--art-hover:url('assets/ui/plate-orange-hover.png');--art-down:url('assets/ui/plate-orange-pressed.png');--label:#ffa75a}
.bb-btn--info{--art:url('assets/ui/plate-cyan-normal.png');--art-hover:url('assets/ui/plate-cyan-hover.png');--art-down:url('assets/ui/plate-cyan-pressed.png');--label:var(--bb-cyan)}

/* The one big call to action per screen (ENTER THE BATTLE, START MATCH): hazard rim, comic lettering. */
.bb-btn--cta{
  --art:url('assets/ui/hazard-lime-normal.png');--art-hover:url('assets/ui/hazard-lime-hover.png');--art-down:url('assets/ui/hazard-lime-pressed.png');
  min-height:68px;padding:4px 40px 8px;font:var(--bb-display-m);letter-spacing:.05em;
  text-shadow:var(--bb-stroke-2),3px 3px 0 var(--bb-ink);
}
.bb-btn--cta:disabled,.bb-btn--cta.is-disabled{border-image-source:url('assets/ui/hazard-disabled.png')}

/* Compact: chips, tabs, toggles, filters. Thin rim art; still 44px tall on touch screens. */
.bb-btn--sm{
  --art:url('assets/ui/chip-steel-normal.png');--art-hover:url('assets/ui/chip-steel-hover.png');--art-down:url('assets/ui/chip-steel-pressed.png');--label:var(--bb-text);
  min-height:40px;min-width:0;padding:2px 18px 3px;border-image:var(--art) 5 fill / 10px / 0 round;font:var(--bb-label-m);letter-spacing:.04em;
}
.bb-btn--sm.bb-btn--primary{--art:url('assets/ui/chip-lime-normal.png');--art-hover:url('assets/ui/chip-lime-hover.png');--art-down:url('assets/ui/chip-lime-pressed.png');--label:var(--bb-lime)}
.bb-btn--sm.bb-btn--danger{--art:url('assets/ui/chip-magenta-normal.png');--art-hover:url('assets/ui/chip-magenta-hover.png');--art-down:url('assets/ui/chip-magenta-pressed.png');--label:#ff79b6}
.bb-btn--sm.bb-btn--warn{--art:url('assets/ui/chip-orange-normal.png');--art-hover:url('assets/ui/chip-orange-hover.png');--art-down:url('assets/ui/chip-orange-pressed.png');--label:#ffa75a}
.bb-btn--sm.bb-btn--info{--art:url('assets/ui/chip-cyan-normal.png');--art-hover:url('assets/ui/chip-cyan-hover.png');--art-down:url('assets/ui/chip-cyan-pressed.png');--label:var(--bb-cyan)}
.bb-btn--sm:disabled,.bb-btn--sm.is-disabled{border-image-source:url('assets/ui/chip-disabled.png')}
@media (pointer:coarse){.bb-btn--sm{min-height:44px}}

/* Icon buttons: square riveted frame, icon or glyph centred in the well. Always give them an aria-label. */
.bb-icon-btn{
  --art:url('assets/ui/icon-lime-normal.png');--art-hover:url('assets/ui/icon-lime-hover.png');--art-down:url('assets/ui/icon-lime-pressed.png');--label:var(--bb-lime);
  width:52px;height:52px;min-width:0;min-height:0;padding:0;border-image:var(--art) 9 fill / 18px / 0 stretch;font:var(--bb-label-l);
}
.bb-icon-btn img,.bb-icon-btn svg{width:24px;height:24px;image-rendering:pixelated}
.bb-icon-btn:disabled,.bb-icon-btn.is-disabled{border-image-source:url('assets/ui/icon-disabled.png')}

/* Segmented row of tabs or toggles: keys sit shoulder to shoulder. */
.bb-segment{display:inline-flex;flex-wrap:wrap;gap:var(--bb-space-1)}

/* ---- Surfaces the buttons sit on ---- */
.bb-panel{background:var(--bb-panel);border:3px solid var(--bb-ink);box-shadow:var(--bb-rim),var(--bb-drop);padding:var(--bb-space-4);color:var(--bb-text)}
.bb-kicker{display:inline-block;justify-self:start;align-self:start;padding:3px 10px 4px;background:var(--bb-ink);color:var(--bb-lime);font:var(--bb-label-s);letter-spacing:.08em;text-transform:uppercase;clip-path:var(--bb-notch)}
.bb-input{box-sizing:border-box;min-height:44px;padding:8px 12px;background:var(--bb-raised);color:var(--bb-text);border:3px solid var(--bb-ink);box-shadow:inset 2px 2px 0 #000a;font:var(--bb-body-m);border-radius:0}
.bb-input::placeholder{color:var(--bb-text-dim)}
.bb-input:focus-visible{outline:3px solid var(--bb-cyan);outline-offset:2px}