/* DANKGAME — the house sheet every page on dankgame.com links first.
   ─────────────────────────────────────────────────────────────────────────────
   THE IDENTITY IS "THE FRONT LINE". Every battle here is two armies on mirrored
   ground: blue deploys down the left edge, red down the right, and the rock is
   reflected across a centre line so the ground never decides it. That one fact is
   the design: a blue-to-red band that meets at a brass notch — the centre line —
   runs under the header of every page, frames the battlefield painting, and divides
   the headline from what follows it. Everything else is deliberately quiet.

   TYPE is self-hosted, OFL, licence files beside the fonts in /assets/fonts/:
     Grenze        — a roman cut with blackletter bones: war-banner, not wedding
                     invitation. Headlines, the wordmark, and the numbers that matter.
     Alegreya Sans — humanist, from the same calligraphic family tree, and narrow
                     enough that a phone keeps both battle buttons on its first screen.
   No font, stylesheet or script on this site comes from another host.

   COLOUR is a small token set with two themes. The BOARD is always night — the
   painted fields, the chain grid and the lane tracks are drawn dark in both themes,
   the way a game board is a physical object on whatever table it sits on. */

@font-face{font-family:"Grenze";src:url("/assets/fonts/grenze-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url("/assets/fonts/alegreya-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url("/assets/fonts/alegreya-sans-400i.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url("/assets/fonts/alegreya-sans-700.woff2") format("woff2");
  font-weight:600 800;font-style:normal;font-display:swap}

:root{
  --font-display:"Grenze",ui-serif,Georgia,serif;
  --font-body:"Alegreya Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* NIGHT (default): iron-black with a violet cast, bone ink, brass. */
  --bg:#0f0e13; --bg-lift:#15131a;
  --panel:#1a1820; --panel2:#24212b; --edge:#353140; --rule:#27242e;
  --ink:#f1eadc; --ink-2:#d2c9b8; --dim:#a39b8c; --faint:#7d7668;
  --gold:#e8b34f; --gold-dim:#8e6a2a; --gold-fill:#e3ad47; --gold-fill-2:#c48a2c; --on-gold:#1f1606;
  --blue:#5b8fc9; --red:#c0524a; --ok:#86b171;
  --blue-ink:#8db5e6; --red-ink:#e58a80;
  --board:#0c0e11;
  --radius:10px;
  --cut:10px;          /* the chamfer on every slab: a clipped corner, not a rounded one */
  --line-band:linear-gradient(90deg,var(--blue) 0 calc(50% - 7px),var(--gold) calc(50% - 7px) calc(50% + 7px),var(--red) calc(50% + 7px) 100%);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    /* DAY: undyed canvas of a field tent, walnut ink, the brass darkened until it
       reads as text (4.8:1 on --bg) while the button slabs keep the bright metal. */
    --bg:#f3eee5; --bg-lift:#ebe4d7;
    --panel:#fbf8f2; --panel2:#efe8dc; --edge:#d4c9b7; --rule:#e2d9ca;
    --ink:#1d1916; --ink-2:#3b342d; --dim:#62594d; --faint:#8a8072;
    --gold:#8a5a0a; --gold-dim:#c9a25b; --gold-fill:#e3ad47; --gold-fill-2:#c48a2c; --on-gold:#1f1606;
    --blue:#3a6fae; --red:#b0453c; --ok:#3f7a2c;
    --blue-ink:#2d5d99; --red-ink:#a33a31;
    color-scheme:light;
  }
}

/* The front line itself, as a reusable mark. Zero layout cost wherever it is used as
   a pseudo-element: it is absolutely positioned, so nothing measured moves. */
.frontline{height:3px;background:var(--line-band);border:0;margin:0}

/* Visible keyboard focus, everywhere, in both themes. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}