/* A verbatim copy of world/public/theme.css (the Free Bots design system; THEME.md there), served at /race/theme.css. Do not edit here: copy it again. */
/* Free Bots candy theme: the design system.
 *
 * Tokens and a handful of components, shared by the world, the Arcade, the games and the race.
 * Light pastel surfaces, saturated candy accents for anything you can press, dark plum text,
 * big radii and glossy pill buttons. Every text/background pair below meets WCAG AA (4.5:1);
 * the numbers are in THEME.md. Token names are stable: add new ones, never rename.
 *
 * Load it with <link rel="stylesheet" href="/world/theme.css">. The world's own skin (every panel
 * of the map, gated by html.candy so ?theme=old can switch it off) is candy.css, which theme.js
 * loads; a game page only needs this file.
 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:ital,wght@0,500;0,600;0,700;0,800;0,900;1,600&display=swap');

:root {
  /* ---- text ---- */
  --fb-ink: #22324a;          /* body text, 13.3:1 on white */
  --fb-ink-soft: #506179;     /* secondary text, 6.4:1 on white, 5.8:1 on --fb-surface-3 */
  --fb-ink-faint: #93a3b8;    /* disabled, dividers, never body text */
  --fb-on-accent: #22324a;    /* text on any candy base colour (5.6:1 or better) */
  --fb-on-deep: #ffffff;      /* text on any -deep colour (5.4:1 or better) */

  /* ---- surfaces ---- */
  --fb-bg: #f2f8ff;                                                   /* page background */
  --fb-bg-grad: linear-gradient(160deg, #dff1ff 0%, #e6f6ff 45%, #e3f8ec 100%);
  --fb-surface: #ffffff;      /* cards and panels */
  --fb-surface-2: #fffaf2;    /* cream: an inner card, an input */
  --fb-surface-3: #eef4fb;    /* lavender tint: a row on hover, a sunk well */
  --fb-glass: rgba(255, 255, 255, 0.92);   /* a card over the 3D map */
  --fb-line: #dbe6f2;         /* hairlines */
  --fb-line-strong: #c4d3e6;  /* card borders */

  /* ---- candy families: -soft (tint to fill behind text), base (buttons, bars), -deep (text, icons on white) ---- */
  --fb-mint-soft: #d4f8ea;     --fb-mint: #5fdcaa;     --fb-mint-deep: #0b7a52;
  --fb-pink-soft: #d6f5f7;     --fb-pink: #5fd0dc;     --fb-pink-deep: #0e6f7a;
  --fb-lemon-soft: #fff5c2;    --fb-lemon: #ffd84a;    --fb-lemon-deep: #7d5b00;
  --fb-lavender-soft: #e3e9ff; --fb-lavender: #9fb2ff; --fb-lavender-deep: #3b50c2;
  --fb-peach-soft: #ffe6d3;    --fb-peach: #ffb07a;    --fb-peach-deep: #a4480f;
  --fb-sky-soft: #dcf0ff;      --fb-sky: #6cc4ff;      --fb-sky-deep: #15609f;
  --fb-coral-soft: #ffdcd8;    --fb-coral: #ff8578;    --fb-coral-deep: #b3291f;

  /* ---- roles ---- */
  --fb-primary: var(--fb-pink);       --fb-primary-deep: var(--fb-pink-deep);
  --fb-go: var(--fb-mint);            --fb-go-deep: var(--fb-mint-deep);
  --fb-money: var(--fb-lemon);        --fb-money-deep: var(--fb-lemon-deep);
  --fb-info: var(--fb-sky);           --fb-info-deep: var(--fb-sky-deep);
  --fb-accent: var(--fb-lavender);    --fb-accent-deep: var(--fb-lavender-deep);
  --fb-danger: var(--fb-coral);       --fb-danger-deep: var(--fb-coral-deep);
  --fb-live: #ff6b5c;                 /* the "live" dot; never text */

  /* ---- shape ---- */
  --fb-r-xs: 8px;
  --fb-r-sm: 12px;
  --fb-r: 18px;
  --fb-r-lg: 26px;
  --fb-r-pill: 999px;
  --fb-border: 2px;

  /* ---- depth: soft plum shadows, a glossy top highlight, a candy rim under buttons ---- */
  --fb-shadow-sm: 0 2px 6px rgba(30, 60, 110, 0.14);
  --fb-shadow: 0 6px 18px rgba(30, 60, 110, 0.16), 0 1px 3px rgba(30, 60, 110, 0.10);
  --fb-shadow-lg: 0 16px 40px rgba(30, 60, 110, 0.22), 0 3px 8px rgba(30, 60, 110, 0.12);
  --fb-gloss: inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(24, 40, 70, 0.12);
  --fb-rim: 0 3px 0 rgba(24, 40, 70, 0.18);
  --fb-focus: 0 0 0 3px #ffffff, 0 0 0 6px var(--fb-lavender-deep);

  /* ---- type ---- */
  --fb-font-display: 'Fredoka', 'Baloo 2', ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  --fb-font-ui: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fb-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;   /* keys, addresses, code only */

  /* ---- motion ---- */
  --fb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fb-ease: cubic-bezier(0.25, 0.8, 0.35, 1);
  --fb-dur: 160ms;
}

/* ---- Candy Dark (mode.js; THEME.md "Dark"): the same system at night. Deep plum surfaces, the same
   candy accents; -soft becomes a dark tint of its colour, -deep a light one (it is the text colour),
   the base colours stay as they are and keep their plum text. Same names, so every component, the
   race, the games and mode.js's dark twins follow. Every text pair is AA; the numbers are in THEME.md. */
html.candy.dark {
  color-scheme: dark;
  --fb-ink: #eef4ff;          /* 14.0:1 on --fb-surface */
  --fb-ink-soft: #b9c7e0;     /* 9.2:1 on --fb-surface, 7.4:1 on --fb-surface-3 */
  --fb-ink-faint: #7486a8;    /* decorative */
  --fb-on-accent: #22324a;    /* plum on a candy base, as by day */
  --fb-on-deep: #121a2e;      /* text on a (now light) -deep fill */

  --fb-bg: #121a2e;
  --fb-bg-grad: linear-gradient(160deg, #0f1a33 0%, #152241 45%, #11283b 100%);
  --fb-surface: #1b2743;
  --fb-surface-2: #213050;
  --fb-surface-3: #283a5e;
  --fb-glass: rgba(27, 39, 67, 0.92);
  --fb-line: #2e4068;
  --fb-line-strong: #3f5689;

  --fb-mint-soft: #143f35;     --fb-mint-deep: #7eeec3;
  --fb-pink-soft: #123f45;     --fb-pink-deep: #8ee9f2;
  --fb-lemon-soft: #3d3312;    --fb-lemon-deep: #ffe070;
  --fb-lavender-soft: #26306a; --fb-lavender-deep: #b9c4ff;
  --fb-peach-soft: #492816;    --fb-peach-deep: #ffbf94;
  --fb-sky-soft: #12345a;      --fb-sky-deep: #8fd2ff;
  --fb-coral-soft: #4c1d26;    --fb-coral-deep: #ffa093;

  --fb-shadow-sm: 0 2px 6px rgba(5, 2, 16, 0.4);
  --fb-shadow: 0 6px 18px rgba(5, 2, 16, 0.45), 0 1px 3px rgba(5, 2, 16, 0.3);
  --fb-shadow-lg: 0 16px 40px rgba(5, 2, 16, 0.55), 0 3px 8px rgba(5, 2, 16, 0.35);
  --fb-gloss: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  --fb-rim: 0 3px 0 rgba(5, 2, 16, 0.4);
  --fb-focus: 0 0 0 3px #121a2e, 0 0 0 6px var(--fb-lavender-deep);
}

/* ================= components: usable on any page, no html.candy needed ================= */

/* A glossy candy button. Colour with a modifier; the default is bubblegum pink. */
.fb-btn {
  --b: var(--fb-pink); --b-soft: var(--fb-pink-soft);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 18px;
  border: var(--fb-border) solid rgba(24, 40, 70, 0.10); border-radius: var(--fb-r-pill);
  background: linear-gradient(180deg, var(--b-soft) 0%, var(--b) 62%);
  color: var(--fb-on-accent);
  font: 700 15px/1.1 var(--fb-font-display); letter-spacing: 0.01em;
  box-shadow: var(--fb-gloss), var(--fb-rim), var(--fb-shadow-sm);
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--fb-dur) var(--fb-ease-bounce), box-shadow var(--fb-dur) var(--fb-ease), filter var(--fb-dur);
}
.fb-btn:hover { transform: translateY(-2px); filter: saturate(1.1) brightness(1.03); text-decoration: none }
.fb-btn:active { transform: translateY(2px) scale(0.97); box-shadow: var(--fb-gloss), 0 1px 0 rgba(24, 40, 70, 0.18) }
.fb-btn:focus-visible { outline: none; box-shadow: var(--fb-gloss), var(--fb-rim), var(--fb-focus) }
.fb-btn[disabled], .fb-btn.is-off { filter: grayscale(0.7); opacity: 0.6; cursor: default; transform: none }
.fb-btn--mint { --b: var(--fb-mint); --b-soft: var(--fb-mint-soft) }
.fb-btn--lemon { --b: var(--fb-lemon); --b-soft: var(--fb-lemon-soft) }
.fb-btn--lavender { --b: var(--fb-lavender); --b-soft: var(--fb-lavender-soft) }
.fb-btn--peach { --b: var(--fb-peach); --b-soft: var(--fb-peach-soft) }
.fb-btn--sky { --b: var(--fb-sky); --b-soft: var(--fb-sky-soft) }
.fb-btn--coral { --b: var(--fb-coral); --b-soft: var(--fb-coral-soft) }
.fb-btn--white { --b: #ffffff; --b-soft: #ffffff; border-color: var(--fb-line-strong) }
.fb-btn--sm { min-height: 30px; padding: 4px 12px; font-size: 13px }
.fb-btn--lg { min-height: 52px; padding: 12px 26px; font-size: 19px }
.fb-btn--round { width: 44px; min-width: 44px; padding: 0 }

/* A card: white, rounded, a soft shadow, a lavender edge. */
.fb-card {
  background: var(--fb-surface); color: var(--fb-ink);
  border: var(--fb-border) solid var(--fb-line-strong); border-radius: var(--fb-r-lg);
  box-shadow: var(--fb-shadow);
}
.fb-card--glass { background: var(--fb-glass); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4) }

/* A pill: a counter or a status, e.g. "529 online". */
.fb-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; min-height: 30px;
  background: var(--fb-surface); color: var(--fb-ink);
  border: var(--fb-border) solid var(--fb-line-strong); border-radius: var(--fb-r-pill);
  font: 700 13px/1 var(--fb-font-ui); box-shadow: var(--fb-shadow-sm);
}
/* A chip: a small tinted label. */
.fb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--fb-r-pill); background: var(--fb-lavender-soft); color: var(--fb-lavender-deep); font: 800 12px/1.6 var(--fb-font-ui) }
.fb-chip--mint { background: var(--fb-mint-soft); color: var(--fb-mint-deep) }
.fb-chip--pink { background: var(--fb-pink-soft); color: var(--fb-pink-deep) }
.fb-chip--lemon { background: var(--fb-lemon-soft); color: var(--fb-lemon-deep) }
.fb-chip--peach { background: var(--fb-peach-soft); color: var(--fb-peach-deep) }
.fb-chip--sky { background: var(--fb-sky-soft); color: var(--fb-sky-deep) }
.fb-chip--coral { background: var(--fb-coral-soft); color: var(--fb-coral-deep) }

/* A title in the display face. */
.fb-title { font: 700 22px/1.15 var(--fb-font-display); color: var(--fb-ink); letter-spacing: 0.005em }
/* A chunky icon tile: an emoji or an inline SVG on a candy square. */
.fb-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: linear-gradient(180deg, #fff 0%, var(--fb-lemon-soft) 100%); box-shadow: var(--fb-gloss), var(--fb-shadow-sm); font-size: 18px; line-height: 1 }
/* A live dot that breathes. */
.fb-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fb-live); box-shadow: 0 0 0 3px rgba(255, 92, 138, 0.25); animation: fb-breathe 1.6s ease-in-out infinite }

/* The page background for a document page (the gallery, the almanac, a game lobby). */
.fb-page { min-height: 100vh; margin: 0; background: var(--fb-bg-grad) fixed, var(--fb-bg); color: var(--fb-ink); font: 500 15px/1.5 var(--fb-font-ui) }

@keyframes fb-breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.25) } }
@keyframes fb-pop { 0% { transform: scale(0.85); opacity: 0 } 70% { transform: scale(1.03); opacity: 1 } 100% { transform: scale(1) } }
@keyframes fb-wobble { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-6deg) } 75% { transform: rotate(6deg) } }

/* Candy Dark: the components' few fixed colours. A candy button keeps its glossy light top (its soft
   step is dark now), a white one is a plum one, an icon tile glows lemon. */
html.candy.dark .fb-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--b) 42%, #fff) 0%, var(--b) 62%); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(24, 40, 70, 0.14), var(--fb-rim), var(--fb-shadow-sm) }
html.candy.dark .fb-btn--white { --b: var(--fb-surface-3); background: linear-gradient(180deg, var(--fb-surface-3) 0%, var(--fb-surface-2) 100%); color: var(--fb-ink); border-color: var(--fb-line-strong); box-shadow: var(--fb-gloss), var(--fb-rim) }
html.candy.dark .fb-icon { background: linear-gradient(180deg, var(--fb-surface-3) 0%, var(--fb-lemon-soft) 100%) }
html.candy.dark .fb-card--glass { background: var(--fb-glass) }

@media (prefers-reduced-motion: reduce) {
  .fb-btn, .fb-btn:hover, .fb-btn:active { transition: none; transform: none }
  .fb-live-dot { animation: none }
}