/* The Clean overlay's start page: chat faces for the sample lines, legend colours. */

/* The overlay's chat faces, for sample lines drawn as the overlay draws them. */
@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;
}

/* Sample lines in the overlay's font, shadow and colours. */
.ex {
  display: flex; align-items: center;
  font-family: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed",
               Arial, sans-serif;
  font-size: 14px; line-height: 1.45; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  overflow: hidden;
}
/* Narrow phones: [Bob-YouTube] stays whole in a third of the card. */
@media (max-width: 380px) { .ex { font-size: 13px; } }
.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: 0 1px 2px rgba(0,0,0,0.85);
}
/* Values taken from modern/overlay.html, not re-picked by eye */
.c-emote    { color: #ff8040; font-style: italic; }
/* The raid warning and the guild lines. */
.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; }
/* General and Officer, two seats no role has by default. */
.c-general  { color: #ffc0c0; }
.c-officer  { color: #40c040; }