/* ----------------------------------------- */
/*  Root                                     */
/* ----------------------------------------- */
:root {
  --color-text-light-highlight: #f0f0e0;
  --color-text-light-heading: #c9c7b8;
  --color-text-light-primary: #b5b3a4;
  --color-text-dark-primary: #191813;
  --color-text-dark-secondary: #4b4a44;
  --color-text-dark-header: #23221d;
  --color-text-dark-inactive: #7a7971;
  --color-text-hyperlink: #ff6400;
  --color-text-light-0: #fff;
  --color-text-light-1: #eee;
  --color-text-light-2: #ddd;
  --color-text-light-3: #ccc;
  --color-text-light-4: #bbb;
  --color-text-light-5: #aaa;
  --color-text-light-6: #999;
  --color-text-light-7: #888;
  --color-text-dark-1: #111;
  --color-text-dark-2: #222;
  --color-text-dark-3: #444;
  --color-text-dark-4: #555;
  --color-text-dark-5: #666;
  --color-text-dark-6: #777;
  --color-border-light-1: #ddd;
  --color-border-light-2: #999;
  --color-border-dark-1: #111;
  --color-border-dark-2: #222;
  --color-border-dark-3: #333;
  --color-border-dark-4: #444;
  --color-border-dark-5: #666;
  --color-shadow-primary: #ff0000;
  --color-shadow-highlight: #ff6400;
  --color-shadow-dark: #000;
  --color-underline-inactive: #7a7971;
  --color-underline-active: #44191A;
  --color-underline-header: #782e22;
  --color-border-light-highlight: #f0f0e0;
  --color-border-light-primary: #b5b3a4;
  --color-border-light-secondary: #c9c7b8;
  --color-border-light-tertiary: #7a7971;
  --color-border-dark: #000;
  --color-border-dark-primary: #191813;
  --color-border-dark-secondary: #23221d;
  --color-border-dark-tertiary: #4b4a44;
  --color-border-highlight: #ff6400;
  --color-border-highlight-alt: #ff0000;
  --color-bg-btn-minor-inactive: #c9c7b8;
  --color-bg-btn-minor-active: #b5b3a4;
  --color-bg-option: #dad8cc;
  --color-checkbox-checked: #666;
  --color-ownership-none: #5500ff;
  --color-ownership-observer: #7a7971;
  --color-ownership-owner: #b5b3a4;
  --z-index-canvas: 0;
  --z-index-app: 30;
  --z-index-ui: 60;
  --z-index-window: 100;
  --z-index-tooltip: 9999;
  --sidebar-width: 300px;
  --sidebar-header-height: 32px;
  --sidebar-item-height: 48px;
  --hotbar-height: 52px;
  --hotbar-width: 578px;
  --macro-size: 50px;
  --players-width: 200px;
  --form-field-height: 26px;
  --font-primary: "Signika", sans-serif;
  --font-mono: monospace;
  --font-awesome: "Font Awesome 6 Pro";
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-48: 3rem;
  --line-height-12: 0.75rem;
  --line-height-16: 1rem;
  --line-height-20: 1.25rem;
  --line-height-30: 1.875rem;
  --color-level-info: #5c87b9;
  --color-level-warning: #b18404;
  --color-level-error: #750003;
  --color-level-success: #266c3c;
}
/* ----------------------------------------- */
/*  Fonts                                    */
/* ----------------------------------------- */
@font-face {
  font-family: 'Signika';
  src: url('../fonts/signika/signika-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Signika';
  src: url('../fonts/signika/signika-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Modesto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/modesto-condensed/modesto-condensed.woff2') format('woff2');
}
@font-face {
  font-family: 'Modesto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/modesto-condensed/modesto-condensed-bold.woff2') format('woff2');
}
/* ----------------------------------------- */
/* Font Awesome Free Compatibility
/* ----------------------------------------- */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 900;
  src: url("../fonts/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 400;
  src: url("../fonts/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 300;
  src: url("../fonts/fontawesome/webfonts/fa-light-300.woff2") format("woff2"), url("../fonts/fontawesome/webfonts/fa-light-300.ttf") format("truetype");
}
/* ---------------------------------------- */
/*  Text                                    */
/* ---------------------------------------- */
/* Headers */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5rem;
  padding: 0;
  font-weight: normal;
}
h1 {
  font-size: 2em;
  border-bottom: 2px solid var(--color-underline-header);
}
h2 {
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-underline-header);
}
h3 {
  font-size: 1.25em;
  border-bottom: 1px solid var(--color-underline-header);
}
:is(h1, h2, h3, h4, h5, h6).noborder {
  border: none;
}
/* Links */
a {
  cursor: pointer;
}
a[href] {
  color: var(--color-text-hyperlink);
}
a:hover {
  text-shadow: 0 0 8px var(--color-shadow-primary);
}
a.content-link,
a.inline-roll {
  background: #DDD;
  padding: 1px 4px;
  border: 1px solid var(--color-border-dark-tertiary);
  border-radius: 2px;
  white-space: nowrap;
  word-break: break-all;
}
a.content-link i,
a.inline-roll i {
  color: var(--color-text-dark-inactive);
  margin-right: 0.25em;
}
a.content-link.playing i:before,
a.inline-roll.playing i:before {
  content: "\f0c8";
}
a.content-link.disabled,
a.inline-roll.disabled {
  cursor: default;
  color: var(--color-text-dark-inactive);
  border-color: var(--color-border-light-primary);
}
a.content-link.disabled:hover,
a.inline-roll.disabled:hover {
  text-shadow: unset;
}
a.content-link.broken {
  background: rgba(255, 0, 0, 0.05);
  border: 1px dashed red;
}
a.inline-roll.gmroll {
  background: #e8e8ef;
  border-color: #545469;
}
a.inline-roll.blindroll {
  background: #f5eaf5;
  border-color: #6b476b;
}
/* Paragraph */
p {
  margin: 0.5em 0;
}
p:empty {
  min-height: 1rem;
}
/* Images */
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
::selection {
  background: #82817d;
  color: var(--color-text-light-0);
}
/* Standard Lists */
ul,
ol {
  margin: 0.5em 0;
  padding: 0 0 0 1.5em;
}
/* Definition Lists */
dl {
  margin: 0.5em 0;
}
dt {
  font-weight: bold;
}
dd {
  padding-left: 5px;
  margin: 3px 0;
}
/* HR separators */
hr {
  border: none;
  border-top: 1px solid var(--color-border-light-primary);
  border-bottom: 1px solid var(--color-border-light-highlight);
}
/* Buttons */
button[hidden] {
  display: none;
}
/* Blockquote */
blockquote {
  margin: 0.5em 0 0.5em 10px;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--color-border-light-tertiary);
  font-style: italic;
}
blockquote em {
  font-style: normal;
}
/* Secret Sections */
section.secret {
  padding: 0 5px;
  background: rgba(53, 0, 121, 0.05);
  border-top: 1px solid var(--color-border-dark-5);
  border-bottom: 1px solid var(--color-border-dark-5);
}
section.secret.revealed {
  background: rgba(0, 53, 0, 0.05);
}
section.secret button.reveal {
  width: unset;
  line-height: unset;
  padding: 0 16px;
  margin-top: 8px;
  font-size: var(--font-size-13);
  border-style: dashed;
}
/* Info Tooltip Icons */
i.tip {
  font-size: var(--font-size-12);
  color: var(--color-text-dark-5);
}
/* Reference */
span.reference {
  display: inline-block;
  padding: 0.25rem;
  color: #c5dbe3;
  border: 1px solid #def7ff;
  border-radius: 3px;
}
#tooltip .toolclip p,
.locked-tooltip .toolclip p {
  text-align: left;
}
#tooltip .toolclip h4,
.locked-tooltip .toolclip h4 {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#tooltip .toolclip p.faint,
.locked-tooltip .toolclip p.faint {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-light-heading);
}
#tooltip .toolclip video,
.locked-tooltip .toolclip video {
  max-width: 300px;
  height: 300px;
}
/* ---------------------------------------- */
/* Tables                                   */
/* ---------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.05);
  border-top: 1px solid var(--color-border-light-tertiary);
  border-bottom: 1px solid var(--color-border-light-tertiary);
  margin: 0.5em 0;
}
table thead {
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-text-light-highlight);
  text-shadow: 1px 1px var(--color-shadow-dark);
  border-bottom: 1px solid var(--color-border-dark);
}
table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.2);
}
table td:first-child {
  padding-left: 2px;
}
table td,
table th {
  padding: 0.25em 0;
}
/* ----------------------------------------- */
/* Scrollbar
/* ----------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  box-shadow: 0 0 1px #999 inset;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  outline: none;
  border-radius: 3px;
  background: #782e22;
  border: 1px solid var(--color-border-highlight);
}
:root {
  scrollbar-width: thin;
  scrollbar-color: #782e22 #111;
}
/* ----------------------------------------- */
/* Images
/* ----------------------------------------- */
img {
  box-sizing: border-box;
  border: 1px solid var(--color-border-dark);
  border-radius: 2px;
  max-width: 100%;
}
img.noborder {
  border: none;
  box-shadow: none;
  outline: none;
}
figure {
  margin: 1rem 0;
}
figure img {
  display: block;
  margin: 0 auto;
}
figure figcaption {
  margin-top: 0.5rem;
  padding: 0 1rem;
  text-align: center;
  font-weight: bold;
}
body {
  height: calc(100vh - 16px);
  margin: 0;
  padding: 2px 4px 2px 2px;
  overflow-y: auto;
  font-family: var(--font-primary);
  font-size: var(--font-size-14);
}