/* ============================================================
   MAN VERSUS GOAT — THEME FILE
   ============================================================
   Everything visual lives here. Edit this file freely —
   nothing in here can break the site's functionality.
   See THEME.md for a plain-English guide.
   ============================================================ */

:root{
  /* ---- Palette ---------------------------------------- */
  --baize:#173a28;        /* page background base colour    */
  --baize-deep:#0f2a1c;   /* darker variant (reserved)      */
  --chalk:#f5f2e3;        /* card / paper colour            */
  --chalk-dim:#e7e3cf;    /* slightly darker paper          */
  --ink:#161310;          /* print black — text & borders   */
  --sky:#7cb5dd;          /* accent 1 (Argentina sky blue)  */
  --gold:#d3a938;         /* accent 2 (GOAT gold)           */
  --gold-deep:#b08a24;    /* darker gold for focus states   */
  --win:#2e7d46;          /* W — wins                       */
  --draw:#8a8a7a;         /* D — draws                      */
  --loss:#b8452f;         /* L — losses                     */
  --line:rgba(22,19,16,.18); /* hairline table rules        */

  /* ---- Masthead artwork (optional) ---------------------- */
  /* Two figure slots flank the wordmark:
       LEFT  = the Man  (clicking him shows a random player)
       RIGHT = the GOAT (clicking him jumps to the leaderboards)
     Drop the image files in this folder, then set e.g.
       --art-man-image:url('man.png');
       --art-man-width:90px;  --art-man-height:120px;
     Leave widths/heights at 0 to hide a slot.
     If your artwork includes the wordmark itself, hide the
     text title with:  --masthead-title-display:none;        */
  --art-man-image:none;
  --art-man-width:0;
  --art-man-height:0;
  --art-goat-image:none;
  --art-goat-width:0;
  --art-goat-height:0;
  --masthead-gap:18px;
  --masthead-title-display:block;

  /* ---- Background image (optional) --------------------- */
  /* To use custom artwork, drop the file in this folder and
     set it here, e.g.  --bg-image:url('bg.png');
     Leave as 'none' to keep the flat colour + stripes.     */
  --bg-image:none;
  --bg-size:cover;        /* cover | contain | e.g. 400px (tiled) */
  --bg-repeat:no-repeat;  /* no-repeat | repeat                   */
  --bg-position:center top;
  --bg-attachment:fixed;  /* fixed = artwork stays put on scroll  */

  /* ---- Mown-stripe overlay ----------------------------- */
  /* The faint vertical pitch stripes. To remove them
     entirely, set --stripes:none;                          */
  --stripes:repeating-linear-gradient(90deg,
      rgba(255,255,255,.022) 0 90px,
      rgba(0,0,0,.028) 90px 180px);
}

/* ---- Page background layers ---------------------------- */
body{
  background-color:var(--baize);
}
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:var(--baize);
  background-image:var(--bg-image);
  background-size:var(--bg-size);
  background-repeat:var(--bg-repeat);
  background-position:var(--bg-position);
  background-attachment:var(--bg-attachment);
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--stripes);
}