/* ══════════════════════════════════════════════════════════════════════
   The WoW overlay's start page: its colours and typefaces, and the
   sample lines drawn the way the overlay draws them. The page itself is
   shared/page.css.
   ══════════════════════════════════════════════════════════════════════ */

/* The chat faces the overlay bundles, because the sample lines below claim
   to render a line the way the overlay renders it. Liberation Sans Narrow
   stands in for Arial Narrow where a PC has no Office, at the same widths;
   Roboto Condensed behind it for the odd glyph. Same files, cached forever
   by vercel.json, and neither is fetched where Arial Narrow exists. */
@font-face {
  font-family: 'Liberation Sans Narrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Liberation Sans Narrow'),
       url('../fonts/LiberationSansNarrow-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-condensed-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* The overlay's own label face, for the headings: the page and the thing
   it produces then speak the same alphabet. Same file, already cached
   forever by vercel.json, so it costs a returning visitor nothing. */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212,
                 U+FEFF, U+FFFD;
}

:root {
  --bg:       #0b0a08;
  --panel:    #16150f;
  --sunken:   #0a0906;
  --line:     #3a3421;
  --line-lit: #5c5232;
  --gold:     #e8c840;
  --gold-dim: #a98f2e;
  --gold-hi:  #f7e39a;
  --serif:    'Marcellus', Georgia, "Times New Roman", serif;
  /* One stand-in for a stream scene, used twice: under the overlay in the
     hero and behind the preview when "Stream-like background" is ticked. */
  --scene:    radial-gradient(70% 90% at 78% 14%, rgba(46, 104, 110, 0.55), transparent 62%),
              radial-gradient(60% 45% at 88% 100%, rgba(150, 100, 45, 0.38), transparent 70%),
              linear-gradient(160deg, #1d2f3f 0%, #3d3024 55%, #14181f 100%);
  --text:     #d8d3c4;
  --muted:    #8a8372;
  --warn:     #e0a53c;
  /* Red means one thing on this page: the "New" badge - see .badge-new,
     which says why it is meant to come off again. The red box it used to
     share the colour with (the OBS size no longer matching) is gone, and
     so is its --danger. */
  --danger-text: #ff9b8f;
  /* A toggle that is on: the platform buttons. */
  --on:      #5fd35f;
  --on-rgb:  95, 211, 95;
  --on-text: #dcffd4;
  --on-bg:   linear-gradient(180deg, #223a1c 0%, #15260f 100%);

  /* The named colours as numbers, for where the page thins them out. */
  --gold-rgb:     232, 200, 64;
  --gold-dim-rgb: 169, 143, 46;
  --warn-rgb:     224, 165, 60;
  --line-rgb:     58, 52, 33;

  --gold-lo:    #b58f26;
  --title:      #f0e9d6;
  --faint:      #55503f;
  --raised:     #1d1b14;
  --on-primary: #1c1605;
  --button:     linear-gradient(180deg, #2e2a1a 0%, #1a1710 100%);
  --pressed:    linear-gradient(180deg, #4a4222 0%, #2b2715 100%);
  --chosen:     linear-gradient(180deg, #211e12 0%, #14130d 100%);
  --primary:    linear-gradient(180deg, #f3d86b 0%, #d9b43a 48%, #b08c24 100%);
  /* Warm light from the top left, where the words are; cool from the top
     right, where the scene sits. A single centred glow read as a spotlight
     on an empty stage. */
  --glow:
    radial-gradient(900px 560px at 14% -8%, rgba(232, 200, 64, 0.13), transparent 70%),
    radial-gradient(760px 520px at 90% 4%,  rgba(40, 110, 120, 0.17), transparent 70%);
}

/* Rendered the way the overlay renders it: same font, same shadow, same
   colours, so this is a sample rather than a description of one. */
.ex {
  display: flex; align-items: center;
  font-family: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed",
               Arial, sans-serif;
  font-size: 14px; line-height: 1.5; white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
  overflow: hidden;
}
.ex img { height: 13px; margin-right: 4px; flex-shrink: 0; }
/* Sample lines of a platform that is off stay hidden. */
.ex[hidden] { display: none; }

/* Drawn like a line in the overlay too. */
.legend .chan {
  font-family: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed",
               Arial, sans-serif;
  font-size: 15.5px; white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
}
/* Values taken from overlay.html, not re-picked by eye */
.c-emote    { color: #ff8040; font-style: italic; }
/* The two event lines. Neither is a channel, so neither is a colour from the
   table above: raid orange-red is the game's own raid warning, and the guild
   yellow is what it uses for somebody joining and for somebody coming on. */
.c-raidwarn { color: #ff4700; }
.c-guildev  { color: #ffff00; }
.c-whisper  { color: #ff80ff; }
.c-yell     { color: #ff4040; }
.c-raidlead { color: #ff7f00; }
.c-party    { color: #aaaaff; }
.c-guild    { color: #40ff40; }
.c-say      { color: #ffffff; }