@charset "UTF-8";
/* ---- The game's materials, SHARED -------------------------------------------
   This file is part of the game's own stylesheet (style.css @imports it) AND
   is published verbatim, with the files beside it, to
   https://assets.wartabletactics.com/brand/ on every production deploy
   (scripts/publish-brand.ts, DEPLOY.md § Brand). The community site hotlinks
   it, so the game stays the one source of the look and a change here reaches
   the forum within the cache window with no deploy of its own.

   The contract is the TOKEN NAMES: renaming or dropping one here breaks a
   consumer silently. Add freely; rename with care. Keep this file to custom
   properties on :root -- no selectors, and no url() to a bundled asset (the
   plate's PNG is wired in plate.css, which only the published copy uses). */

/* ---- Materials ------------------------------------------------------------
   The menus are made of three things: PARCHMENT (the sheets, cards and
   folders), LEATHER (the skirmish board) and BRASS (.hud-brass, further down).
   The grain of the first two is procedural — an SVG of fractal noise, inline
   as a data: URL, tiled over a plain colour — so no texture is fetched and
   the same speckle serves every sheet. Each is a transparent overlay: the
   colour under it is the element's own, so one grain suits cream paper and
   manila alike. `--torn` is a slightly ragged rectangle for a sheet's edge. */
:root {
  --tex-parchment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.22  0 0 0 0 0.05  0.55 0 0 0 -0.2'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.19  0 0 0 0 0.05  0.42 0 0 0 -0.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.07' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.02  0 0 0 0 0.01  0 0 0 0 0  0.95 0 0 0 -0.25'/%3E%3C/filter%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.11' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.72  0 0 0 0 0.45  0.55 0 0 0 -0.28'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.3 0 0 0 -0.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --torn: polygon(0% 0.59%, 7.14% 0.27%, 14.29% 0.57%, 21.43% 0.9%, 28.57% 0.61%, 35.71% 0.61%, 42.86% 0.16%, 50% 0.79%, 57.14% 0.64%, 64.29% 0.74%, 71.43% 0.67%, 78.57% 0.3%, 85.71% 0.71%, 92.86% 0.17%, 99.48% 0%, 99.79% 7.14%, 99.81% 14.29%, 99.29% 21.43%, 99.22% 28.57%, 99.24% 35.71%, 99.9% 42.86%, 99.58% 50%, 99.34% 57.14%, 99.67% 64.29%, 99.75% 71.43%, 99.67% 78.57%, 99.17% 85.71%, 99.22% 92.86%, 100% 99.62%, 92.86% 99.61%, 85.71% 99.26%, 78.57% 99.84%, 71.43% 99.86%, 64.29% 99.71%, 57.14% 99.66%, 50% 99.55%, 42.86% 99.12%, 35.71% 99.58%, 28.57% 99.32%, 21.43% 99.8%, 14.29% 99.61%, 7.14% 99.21%, 0.74% 100%, 0.28% 92.86%, 0.48% 85.71%, 0.76% 78.57%, 0.63% 71.43%, 0.1% 64.29%, 0.53% 57.14%, 0.08% 50%, 0.62% 42.86%, 0.36% 35.71%, 0.63% 28.57%, 0.23% 21.43%, 0.34% 14.29%, 0.36% 7.14%);
  --torn-rough: polygon(0% 0.92%, 10% 0.43%, 20% 0.89%, 30% 1.39%, 40% 0.95%, 50% 0.94%, 60% 0.24%, 70% 1.24%, 80% 0.99%, 90% 1.16%, 98.96% 0%, 99.53% 10%, 98.89% 20%, 99.73% 30%, 99.19% 40%, 99.67% 50%, 99.71% 60%, 98.9% 70%, 98.78% 80%, 98.82% 90%, 100% 99.84%, 90% 99.34%, 80% 98.98%, 70% 99.49%, 60% 99.61%, 50% 99.48%, 40% 98.71%, 30% 98.78%, 20% 99.41%, 10% 99.4%, 1.15% 100%, 0.24% 90%, 0.22% 80%, 0.45% 70%, 0.53% 60%, 0.71% 50%, 1.36% 40%, 0.65% 30%, 1.05% 20%, 0.32% 10%);
  /* LEATHER as one definition, so every board is the same hide: the grain
     (pores, highlights, a fine tooth) tiled over a warm brown that is lit
     from the top-left and worn darker at the foot; a row of thread along
     each edge inside a raised welt; a brass bolt through each corner. The
     layers are painted from the top: bolts, stitches, grain, then the hide.
     Used by .hud-menu-panel and .dossier-spread. */
  --rivet-img: radial-gradient(circle at 35% 30%, #fae1a8, #a77b42 40%, #332113 70%, #0d0906 80%, transparent 88%);
  --stitch: repeating-linear-gradient(90deg, #d6b07a 0 7px, transparent 7px 13px);
  --stitch-v: repeating-linear-gradient(180deg, #d6b07a 0 7px, transparent 7px 13px);
  --leather-image:
    var(--rivet-img), var(--rivet-img), var(--rivet-img), var(--rivet-img),
    var(--stitch), var(--stitch), var(--stitch-v), var(--stitch-v),
    var(--tex-leather),
    radial-gradient(ellipse at 25% 0%, rgba(255, 210, 150, 0.16), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 0, 0, 0.45), transparent 55%),
    linear-gradient(165deg, #6a4226, #4a2b17 50%, #33200f);
  --leather-size:
    13px 13px, 13px 13px, 13px 13px, 13px 13px,
    calc(100% - 64px) 2px, calc(100% - 64px) 2px, 2px calc(100% - 64px), 2px calc(100% - 64px),
    300px 300px,
    auto, auto, auto;
  --leather-position:
    left 12px top 12px, right 12px top 12px, left 12px bottom 12px, right 12px bottom 12px,
    center top 18px, center bottom 18px, left 18px center, right 18px center,
    0 0,
    0 0, 0 0, 0 0;
  --leather-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  --leather-shadow:
    inset 0 2px 0 rgba(255, 225, 190, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 9px rgba(0, 0, 0, 0.1),
    inset 0 0 0 10px rgba(0, 0, 0, 0.35),
    inset 0 0 0 11px rgba(255, 220, 180, 0.08),
    inset 0 0 70px rgba(0, 0, 0, 0.6);
  /* The GREEN PLATE: the report's dark olive-green with a light rule inside
     its edge — what a pick, a status and a folder's action are set on. */
  --plate-green:
    linear-gradient(180deg, rgba(255, 245, 220, 0.07), transparent 45%),
    linear-gradient(180deg, #4d5d40, #3a4a30 70%, #33422b);
  --plate-green-shadow:
    inset 0 0 0 1px rgba(239, 230, 205, 0.28),
    inset 0 0 0 2px rgba(0, 0, 0, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.35);
  /* The paper palette: aged parchment, cream, manila, their inks. */
  --parchment: #e4d5ae;
  --cream: #efe4c6;
  --manila: #c9b581;
  --paper-edge: #a08a5c;
  --ink: #2b2417;
  --ink-soft: #5a4d33;
  --stamp-red: #a03325;
}