/* GENERATED from ui/*.css; run python3 tools/sincronizar_ui.py. */
/* Canonical theme. Edit here, then run tools/sincronizar_ui.py. */
:root {
  --background: #0B1224;
  --surface: #141F38;
  --surface-raised: #1C2D4D;
  --surface-inset: #0B1224;
  --header: #00432D;
  --brand-background: #00623E;
  --accent: #2DC653;
  --link: #75DCA0;
  --link-hover: #A0EDBC;
  --nav-hover: #8FCBFF;
  --heading: #F3F6FC;
  --text: #D5DEED;
  --muted: #A7B5CC;
  --action: #FFE000;
  --action-hover: #FFEA4D;
  --on-action: #0B1224;
  --border: #304363;
  --border-subtle: #304363;
  --focus: #FFE000;
  --success: #75DCA0;
  --warning: #ffe49a;
  --error: #ffb8ac;
  --overlay: #0B1224F2;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-small: 6px; --radius: 12px; --radius-large: 20px;
  --header-height: 80px;
  /* Colors belonging to decorative game art, independent of interface semantics. */
  --art-red: #c3090a; --art-red-bright: #ea1e24; --art-red-dark: #8e0607;
  --art-green: #0b912a; --art-green-dark: #087b24; --art-yellow: #fbce02;
  --art-blue: #048ed6; --art-ink: #2a2a2a; --art-paper: #ffffff;
  --art-pink: #f8dfdc; --art-banner: #07588e; --art-race: #83ac55;
  --art-shadow: #0002; --art-black: #141414;
}

@font-face { font-family: Montserrat; src: url('montserrat.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { font-family: var(--font); color: var(--text); background: var(--background); color-scheme: dark; font-synthesis: none; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 280px; font: 500 16px/1.6 var(--font); color: var(--text); background: var(--background); }
a { color: var(--link); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { color: var(--link-hover); }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--heading); }
h1, h2, h3 { line-height: 1.15; font-weight: 900; letter-spacing: -.035em; overflow-wrap: anywhere; }
h1 { font-size: clamp(32px, 6vw, 56px); } h2 { font-size: clamp(24px, 4vw, 36px); }
p, li { overflow-wrap: anywhere; }
main { min-width: 0; }
pre { max-width: 100%; overflow-x: auto; padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 14px/1.7 monospace; }
code { overflow-wrap: anywhere; }
table { border-collapse: collapse; } td, th { border: 1px solid var(--border); padding: var(--space-3); text-align: left; }
input:not([type=checkbox]):not([type=radio]), select, textarea { max-width: 100%; min-width: 0; padding: var(--space-3); border: 2px solid var(--border); border-radius: var(--radius-small); background: var(--surface-inset); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--action); }
input:disabled, textarea:disabled, select:disabled { background: var(--surface); color: var(--muted); }
button, .gpb-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: 2px solid var(--action); border-radius: var(--radius); background: var(--action); color: var(--on-action); font-weight: 800; text-decoration: none; line-height: 1.35; }
button:hover { background: var(--action-hover); }
.gpb-button:hover { background: var(--action-hover); color: var(--on-action); border-color: var(--action-hover); }
button:disabled { background: var(--surface-raised); border-color: var(--border); color: var(--muted); cursor: default; }
.gpb-secondary { background: var(--surface); color: var(--heading); border-color: var(--border); }
.gpb-secondary:hover { background: var(--surface-raised); color: var(--heading); border-color: var(--border); }
.gpb-panel { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); }
.notice, .gpb-notice { padding: var(--space-4) var(--space-5); background: var(--surface-inset); border-left: 5px solid var(--warning); color: var(--text); }
.gpb-error, [data-tone=error] { color: var(--error); } .gpb-success, [data-tone=success] { color: var(--success); }
.gpb-skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 16px; background: var(--action); color: var(--on-action); font-weight: 800; transform: translateY(-180%); }
.gpb-skip:focus { transform: none; }
.gpb-skip:hover { background: var(--action-hover); color: var(--on-action); }
.gpb-header { position: sticky; top: 0; z-index: 30; background: var(--header); border-bottom: 1px solid var(--border-subtle); }
.gpb-header-inner { width: min(1360px, calc(100% - 40px)); min-height: var(--header-height); margin: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 10px; }
.gpb-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--action); text-decoration: none; flex-shrink: 0; }
.gpb-brand img { width: 44px; height: 44px; background: var(--brand-background); border-radius: var(--radius); }
.gpb-brand:hover { color: var(--action); }
.gpb-wordmark { display: flex; flex-direction: column; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -.025em; font-size: 24px; }
.gpb-wordmark span { font-size: 13px; line-height: 1.5; letter-spacing: .035em; }
.gpb-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; width: auto; }
.gpb-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 4px; color: var(--heading); font-size: 14px; font-weight: 700; text-decoration: none; }
.gpb-nav a[aria-current] { color: var(--action); text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 7px; }
.gpb-nav a:hover { color: var(--nav-hover); }
.gpb-menu { display: none; width: 48px; height: 48px; padding: 10px; background: transparent; border: 0; border-radius: var(--radius-small); flex-direction: column; gap: 5px; }
.gpb-menu:hover { background: var(--surface); }
.gpb-menu span { display: block; width: 28px; height: 4px; border-radius: 4px; background: var(--heading); }
.gpb-footer { margin-top: var(--space-7); padding: var(--space-6) 20px; background: var(--surface-inset); border-top: 1px solid var(--border-subtle); }
.gpb-footer-inner { max-width: 1180px; margin: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); }
.gpb-footer img { width: 100px; height: auto; }
.gpb-footer p { margin: 0; font-size: 13px; color: var(--muted); }
.gpb-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
@media(max-width:959px) { .gpb-header-inner { width: calc(100% - 32px); } .gpb-nav { width: 100%; } .gpb-menu:not([hidden]) { display: flex; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.wrap { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.eyebrow { color: var(--link); font-size: 13px; font-weight: 800; }

.gpb-accent-panel { background: var(--surface); color: var(--text); border-top: 4px solid var(--accent); }
.gpb-highlight { color: var(--action); }