/* BATTLE FLAGS 4.0 — design tokens (linguagem de videogame: cores chapadas, bordas fortes, profundidade física) */
:root {
  --bf-bg0: #07111F; --bf-bg1: #0A1728; --bf-bg2: #101F35; --bf-bg3: #16294a;
  --bf-blue: #168BFF; --bf-blue2: #006DFF; --bf-red: #FF355D; --bf-red2: #DD1748; --bf-yellow: #FFD326; --bf-yellow2: #FFB900;
  --bf-green: #42DF72; --bf-green2: #1fb556; --bf-purple: #9856FF; --bf-purple2: #6f2fe0; --bf-white: #FFFFFF; --bf-ink: #06101c;
  --bf-text: #eef3ff; --bf-muted: #9fb0cc; --bf-line: rgba(112, 170, 255, .55); --bf-line-strong: #2f6fd8;
  --bf-r-sm: 12px; --bf-r: 18px; --bf-r-lg: 24px;
  --bf-display: 'Teko', 'Anton', 'Barlow Condensed', Impact, sans-serif;
  --bf-cond: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --bf-body: 'Rubik', system-ui, sans-serif;
  --bf-shadow: 0 6px 0 rgba(0, 0, 0, .45), 0 14px 28px rgba(0, 0, 0, .35);
  --bf-shadow-sm: 0 3px 0 rgba(0, 0, 0, .45), 0 8px 16px rgba(0, 0, 0, .3);
  --bf-inner: inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 -3px 0 rgba(0, 0, 0, .35);
  --bf-tex: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, rgba(0, 0, 0, 0) 2px 8px);
  --bf-t-fast: 140ms; --bf-t: 240ms; --bf-t-slow: 380ms; --bf-ease: cubic-bezier(.2, .9, .3, 1.2); --bf-ease-out: cubic-bezier(.16, 1, .3, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
/* superfícies e texto utilitários */
.bf-surface { background: linear-gradient(180deg, var(--bf-bg2), var(--bf-bg1)); border: 3px solid var(--bf-line); border-radius: var(--bf-r); box-shadow: var(--bf-shadow), var(--bf-inner); position: relative; }
.bf-surface::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bf-tex); pointer-events: none; }
.bf-display { font-family: var(--bf-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: .9; }
.bf-cond { font-family: var(--bf-cond); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.bf-yellow { color: var(--bf-yellow); } .bf-blue { color: var(--bf-blue); } .bf-red { color: var(--bf-red); } .bf-green { color: var(--bf-green); } .bf-purple { color: var(--bf-purple); } .bf-muted { color: var(--bf-muted); }
.bf-stroke { -webkit-text-stroke: 2px var(--bf-ink); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0, 0, 0, .5); }