/* The site's look: Bootstrap's dark theme, in the game's colours. */

/* the game's name in the menu (Arial until it loads, or if it can't) */
@font-face {
  font-family: "Metropolitan";
  src: url("/static/fonts/Metropolitan.ttf") format("truetype");
  font-display: swap;
}

:root, [data-bs-theme=dark] {
  --bs-body-bg: #000;
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: #ccc;
  --bs-body-color-rgb: 204, 204, 204;
  --bs-body-font-family: monospace;
  --bs-font-monospace: monospace;
  --bs-body-line-height: normal;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: #777;
  --bs-tertiary-bg: #111;
  --bs-heading-color: #5ff;
  --bs-link-color: #5ff;
  --bs-link-color-rgb: 85, 255, 255;
  --bs-link-hover-color: #aff;
  --bs-link-hover-color-rgb: 170, 255, 255;
  --bs-border-color: #333;
  --bs-code-color: inherit;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}
body { line-height: normal; }
h1 { color: #5ff; font-size: 1.4em; }
h2 { color: #0aa; font-size: 1.1em; margin-top: 1.6em; }
a { color: #5ff; }
pre { border: 1px solid #333; padding: 10px; white-space: pre-wrap; font-size: 1em; }
code { color: inherit; font-size: 1em; }

/* the menu */
/* it stays at the top as the page scrolls, so it needs its own background */
.navbar {
  --bs-navbar-color: #5ff; --bs-navbar-hover-color: #5ff; --bs-navbar-active-color: #000;
  /* the game's name: white, as "Murderous Intentions Mud" is on Home */
  --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-padding-y: 4px;
  background: #000;
}
/* the name's flourishes reach well above and below its letters: its line
   is the font's own height, so the bar is tall enough for all of it */
.navbar-brand { font-family: "Metropolitan", Arial, sans-serif; font-size: 1.44em; line-height: normal; padding: 0;
  text-shadow: 0 1px 0 #bb0a1e; }
.navbar .nav-link { border: 1px solid #333; padding: 4px 12px; white-space: nowrap; }
.navbar .nav-link:hover { background: #033; }
.navbar .nav-link.active { background: #0aa; color: #000; }
.navbar-toggler { border-color: #333; }

/* forms */
.form-control, .form-select, .input-group-text { background-color: #111; color: #ccc; border-color: #444; }
.form-control:focus, .form-select:focus {
  background-color: #111; color: #ccc; border-color: #0aa; box-shadow: 0 0 0 .2rem rgba(0, 170, 170, .25);
}
.form-control::placeholder { color: #666; }
.form-label { color: #0aa; margin-bottom: 2px; }
.num { width: 7em; }
.input-group .num { flex: 0 0 7em; }
.btn-mim {
  --bs-btn-color: #5ff; --bs-btn-bg: #111; --bs-btn-border-color: #444;
  --bs-btn-hover-color: #5ff; --bs-btn-hover-bg: #033; --bs-btn-hover-border-color: #0aa;
  --bs-btn-active-color: #000; --bs-btn-active-bg: #0aa; --bs-btn-active-border-color: #0aa;
  --bs-btn-focus-shadow-rgb: 0, 170, 170;
}

/* tables */
.table {
  --bs-table-bg: #000; --bs-table-color: #ccc; --bs-table-border-color: #333;
  --bs-table-hover-bg: #022; --bs-table-hover-color: #ccc; width: auto;
}
.table thead th { color: #0aa; }
.lvl { text-align: center; }
.size { color: #777; }
.note { color: #ff5; }
.stats td:first-child { color: #0aa; }
#results { transition: opacity .15s; }
#results.loading { opacity: .4; }

/* home */
.greeting { display: inline-block; }
.greeting pre { border: 0; padding: 0; margin: 0; white-space: pre; }
.greeting pre.authors { margin-top: 1.5em; color: #999; }
/* the game's name: a box as wide as its letters were, the name centred on
   it (a flex box, so a name wider than the box spills out evenly both sides) */
.greeting .game-name { display: inline-flex; justify-content: center; white-space: nowrap; }
.greeting .game-name span { font-family: "Metropolitan", Arial, sans-serif; font-size: 2em;
  text-shadow: 0 1px 0 #bb0a1e; }
.clients { text-align: center; margin: 1em 0; }
.clients ul { list-style: none; padding: 0; margin: .5em 0; }
.clients li { margin: .2em 0; }
.clients p { color: #777; max-width: 60ch; margin: .5em auto; }

/* help */
.accordion {
  --bs-accordion-bg: #000; --bs-accordion-color: #ccc; --bs-accordion-border-color: #333;
  --bs-accordion-btn-color: #5ff; --bs-accordion-btn-bg: #000;
  --bs-accordion-active-color: #000; --bs-accordion-active-bg: #0aa;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-y: 5px; --bs-accordion-btn-padding-x: 10px;
  --bs-accordion-body-padding-y: 0; --bs-accordion-body-padding-x: 0;
}
.accordion-header { margin: 0; font-size: 1em; }
.accordion-button { font-family: monospace; font-size: 1em; }
.accordion-button:hover { background: #033; }
.accordion-button:not(.collapsed):hover { background: #0aa; }
.accordion-body pre { border: 0; margin: 0; }

/* logging in, the account, its notes */
.account-form { max-width: 26em; }
.form-check-input { background-color: #111; border-color: #444; }
.form-check-input:checked { background-color: #0aa; border-color: #0aa; }
.alert-danger { --bs-alert-bg: #200; --bs-alert-color: #f88; --bs-alert-border-color: #622; }
.alert-success { --bs-alert-bg: #020; --bs-alert-color: #8f8; --bs-alert-border-color: #262; }
.unread { color: #ff5; }
.crumbs { color: #777; margin-bottom: .5em; }
.note-head { color: #ccc; margin-bottom: .5em; }
.note-num { color: #ff5; }

/* an item, in its window */
.modal { --bs-modal-bg: #000; --bs-modal-color: #ccc; --bs-modal-border-color: #333; --bs-modal-header-border-color: #333; }
.modal-title { color: #5ff; font-size: 1.2em; }
.modal pre { margin: 0; }