/* xflag palette, applied over an app's own stylesheet.
 *
 * Load this AFTER the app's css. It only reassigns custom properties the app
 * already uses, so nothing here depends on its markup or class names, and
 * removing the one link tag puts the app back exactly as it was.
 *
 * Devanagari and Slate both shipped their own dark palettes, warm brown and
 * indigo respectively. The job is to bring them onto the same neutrals and the
 * same flame accent as xflag.ai, not to invert anything.
 */

/* Devanagari follows the operating system and honours data-theme. The site is
   dark everywhere now, so pin it: each selector below covers one of the three
   cases its own stylesheet sets up. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: dark;

  /* neutrals */
  --bg: #0a0b0e;
  --card: #101218;
  --sunken: #15181f;
  --hard: #07080a;
  --ink: #f4f5f7;
  --muted: #8c939e;
  --line: #1e212a;

  /* accent: crimson into amber, as on the homepage */
  --accent: #ff5a3c;
  --accent-ink: #2a0d06;
  --accent-soft: #3a1710;
  --accent-deep: #ffb547;
  --hard-accent: #8a2f1c;
  --hi: #ffb547;
  --hi-bg: #33251a;
  --hi-line: #4d3822;
  --ne: #ff5a3c;

  /* the hero wash at the top of a page */
  --hero-a: #14161d;
  --hero-b: #1a141c;
  --hero-line: #262a35;

  /* callout panels */
  --note-bg: #111a25;
  --note-line: #1f2d3f;
  --note-rail: #5a8fd6;
  --warm-bg: #241a10;
  --warm-line: #3b2c18;
  --warm-rail: #ffb547;
  --ne-bg: #2a1512;
  --ne-line: #40201b;

  /* right and wrong keep their own meaning: green and red have to stay
     legible as green and red, so only the tone moves */
  --good: #3ddc84;
  --good-soft: #0f2a1a;
  --good-ink: #7ee0a3;
  --bad: #ff6b6b;
  --bad-soft: #2e1618;
  --bad-ink: #ffa9ab;

  --shadow: 0 1px 0 #0c0d11, 0 10px 30px rgba(0, 0, 0, .55);

  /* Slate uses its own names for the same ideas. */
  --panel: #101218;
  --panel2: #171a22;
  --accent2: #5aa9ff;
  --purple: #a78bfa;
  --pink: #ff6fae;
  --green: #3ddc84;
  --red: #ff6b6b;
}

/* The apps set their own body font. Match the site so the type does not change
   as somebody moves between pages. */
body {
  font-family: "Karla", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
h1, h2, h3 {
  font-family: "Khand", "Mukta", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.015em;
}

/* A slim way back to the rest of the site.
 *
 * Fixed rather than in the document flow. Bagh-Chal and Call Break set
 * display:flex on the body, so an in-flow strip became a flex sibling and got
 * laid out beside the game instead of above it. Taking it out of flow means it
 * works whatever the app does with its own layout; the padding below reserves
 * the space it covers, and :has scopes that to pages that actually have it.
 */
.xf-home {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  box-sizing: border-box;
  display: flex; align-items: center; gap: .5rem;
  height: 34px;
  padding: 0 clamp(.75rem, 3vw, 1.25rem);
  background: #0a0b0e;
  border-bottom: 1px solid #1e212a;
  text-decoration: none;
  font: 500 .8rem/1 "Karla", ui-sans-serif, system-ui, sans-serif;
  color: #8c939e;
}
.xf-home svg { width: 17px; height: 17px; display: block; flex: none; }
.xf-home b { font-family: "Khand", sans-serif; font-size: 1.05rem; color: #f4f5f7; font-weight: 700; }
.xf-home span { margin-left: auto; opacity: .75; }
.xf-home:hover span, .xf-home:hover b { color: #ff5a3c; }
@media (max-width: 460px) { .xf-home span { display: none; } }

/* Reserve the space the fixed strip covers, only where it exists. */
body:has(> .xf-home) { padding-top: 34px; }
html:has(> body > .xf-home) { scroll-padding-top: 34px; }