/* 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; }
/* the menu as btn-outline-light buttons: Bootstrap's .nav-link would clear their colours */
.navbar .nav-link.btn-outline-light { background-color: var(--bs-btn-bg); color: var(--bs-btn-color); border-color: var(--bs-btn-border-color); }
.navbar .nav-link.btn-outline-light:hover { background-color: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); }
/* the page you're on: a plain btn-light, the same under the mouse */
.navbar .nav-link.btn-outline-light.active, .navbar .nav-link.btn-outline-light.active:hover {
  background-color: var(--bs-light); border-color: var(--bs-light); 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; }
.unread-mark { color: #f00; }	/* the game's <FF00>*{x */
.crumbs { color: #777; margin-bottom: .5em; }
.note-head { color: #ccc; margin-bottom: .5em; }
.note-num { color: #ff5; }

/* Play Now: the game fills the window, the line to type in underneath */
#play { display: flex; flex-direction: column; height: calc(100vh - 100px); min-height: 320px; }
#play-bar { display: flex; align-items: center; gap: 12px; color: #777; margin-bottom: 6px; min-height: 31px; }
#play-main { flex: 1; display: flex; min-height: 200px; }
#terminal { flex: 1; min-width: 0; min-height: 200px; border: 1px solid #333; padding: 4px; background: #000; overflow: hidden; }
#play-split { flex: none; width: 8px; cursor: col-resize; background: #111; }
#play-split:hover, #play-split:focus { background: #0aa; outline: none; }
#play-chat { flex: none; width: 34%; min-width: 200px; display: flex; flex-direction: column; border: 1px solid #333; background: #000; }
#play-chat[hidden], #play-split[hidden] { display: none; }
#chat-tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-bottom: 1px solid #333; }
.chat-tab { background: #111; color: #5ff; border: 1px solid #333; font: 15px monospace; padding: 2px 10px; }
.chat-tab:hover { background: #033; }
.chat-tab.active { background: #033; border-color: #0aa; color: #fff; }
.chat-tab.hot { color: #f80; border-color: #f80; }
#chat-lines { flex: 1; overflow-y: auto; padding: 4px 6px; font: 13px/1.35 monospace; color: #ccc; white-space: pre-wrap; overflow-wrap: anywhere; }
#chat-lines a { color: #5ff; }
.chat-time { color: #555; }
.chat-empty { color: #555; }
/* on a phone: no chat (nor its button), and of the bars just health */
@media (max-width: 767.98px) {
  #play-split, #play-chat, #play-chat-open { display: none !important; }
  #play-vitals .vbar:not(#vb-hp) { display: none; }
}
#play-input { margin: 6px 0 0; }
#play-line { font-family: monospace; }
#play-vitals { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
#play-vitals[hidden] { display: none; }
.vbar { position: relative; flex: 1 1 8em; height: 20px; background: #111; border: 1px solid #333; overflow: hidden; }
.vbar[hidden] { display: none; }
.vbar .vfill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transition: width .3s; }
.vbar span { position: relative; display: block; text-align: center; font: 12px/18px monospace; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; white-space: nowrap; }
#vb-hp .vfill { background: #a00; }
#vb-mana .vfill { background: #05a; }
#vb-moves .vfill { background: #070; }
#vb-tnl .vfill { background: #870; }
#vb-align .vfill { background: #555; }
#vb-enemy { flex-basis: 100%; }
#vb-enemy .vfill { background: #702; }
#play-keys, #play-vars, #play-settings, #play-aliases, #play-triggers { border: 1px solid #333; padding: 8px; margin-bottom: 6px; color: #ccc; max-height: 45vh; overflow-y: auto; }
#play-keys-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 4px 12px; }
#play-keys-list label { display: flex; align-items: center; gap: 6px; margin: 0; }
#play-keys-list span { width: 5.5em; flex: none; color: #5ff; }
#play-keys-list input { font-family: monospace; }
.var-row { display: grid; grid-template-columns: 10em minmax(8em, 1fr) minmax(6em, 1fr) auto; gap: 6px; align-items: center; margin-bottom: 4px; }
.var-row input { font-family: monospace; min-width: 0; }
.var-show { font-family: monospace; color: #ccc; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.play-help-list dt { color: #5ff; font-family: monospace; font-weight: normal; }
.play-help-list dd { margin: 0 0 .6em 1.5em; }
.trigger-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.trigger-row .trigger-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trigger-row .trigger-off { color: #777; }
.trigger-code { font-family: monospace; }
textarea.trigger-code { white-space: pre; overflow-x: auto; }
@media (max-width: 767.98px) {
  .var-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; }
  .var-row .var-show { display: none; }
}

/* 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; }