:root {
    --stat-font: var(--crt-font), monospace;
    --msg-font: var(--crt-font), monospace;
    --lbl-font: var(--crt-font), monospace;
    --action-font: var(--crt-font), monospace;
}

body {
    margin: 0px;
    overflow: hidden;
    text-size-adjust: none;
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#lobby {
    margin: 4px;
}

#left_column {
    line-height: 1em;
}

#right_column {
    display: inline-block;
    vertical-align: top;
    position: absolute;
    right: 0px;
    top: 0px;
}

.colour_black { color: black; }
.colour_blue { color: blue; }
.colour_green { color: green; }
.colour_cyan { color: cyan; }
.colour_red { color: red; }
.colour_magenta { color: magenta; }
.colour_brown { color: brown; }
.colour_lightgray { color: lightgray; }
.colour_darkgray { color: darkgray; }
.colour_lightblue { color: lightblue; }
.colour_lightgreen { color: lightgreen; }
.colour_lightcyan { color: lightcyan; }
.colour_lightred { color: #EE9090; }
.colour_lightmagenta { color: #EE90EE; }
.colour_yellow { color: yellow; }
.colour_white { color: white; }

#stats {
    display: inline-block;
    position: static;
    color: var(--color-7); /* lightgray */
    font-family: var(--stat-font);
}

#stats_titleline, #stats_species_god {
    color: var(--color-14); /* yellow */
}
#stats_piety {
    color: var(--color-14); /* yellow */
}
#stats_piety.penance {
    color: var(--color-4); /* red */
}
#stats_piety.monk {
    color: var(--color-8); /* darkgray */
}
#stats_wizmode {
    color: var(--color-1); /* blue */
}
.stats_caption {
    color: var(--color-6); /* brown */
}

.degenerated_stat {
    color: var(--color-14); /* yellow */
}
.zero_stat {
    color: var(--color-12); /* lightred */
}
.low_stat {
    color: var(--color-4); /* red */
}
.boosted_stat {
    color: var(--color-9); /* lightblue */
}

.degenerated_defense {
    color: var(--color-4); /* red */
}
.boosted_defense {
    color: var(--color-9); /* lightblue */
}
#game #stats_weapon .corroded_weapon {
    color: var(--color-4); /* red */
}
#game #stats_offhand_weapon .corroded_weapon {
    color: var(--color-4); /* red */
}

.bar span {
    display: inline-block;
    height: 100%;
}

/* Some of these values are also hard coded to cell_renderer.js */
#stats_hp_bar {
    background-color: var(--color-8); /* darkgray */
}
#stats_hp_bar_full {
    background-color: var(--color-10); /* lightgreen */
}
#stats_hp_bar_decrease {
    background-color: var(--color-4); /* red */
}
#stats_hp_bar_poison {
    background-color: var(--color-14); /* yellow */
}
#stats_hp_bar_increase {
    background-color: var(--color-2); /* green */
}

#stats_mp_bar {
    background-color: var(--color-8); /* darkgray */
}
#stats_mp_bar_full {
    background-color: var(--color-9); /* lightblue */
}
#stats_mp_bar_decrease {
    background-color: var(--color-5); /* magenta */
}
#stats_mp_bar_increase {
    background-color: var(--color-1); /* blue */
}

#stats_doom_bar {
    background-color: var(--color-8); /* darkgray */
}
#stats_doom_bar_full {
    background-color: var(--color-5); /* lightblue */
}
#stats_doom_bar_decrease {
    background-color: var(--color-5); /* magenta */
}
#stats_doom_bar_increase {
    background-color: var(--color-13); /* blue */
}

/* default color when showing "Silenced" */
#stats_noise_status {
    color: #FF00FF; /* magenta */
}

/* default bar background color */
#stats_noise_bar {
    background-color: #2F2F2F; /* dark slate gray */
}

/* default bar change color */
#stats_noise_bar_decrease {
    background-color: var(--color-8); /* darkgray */
}

/* clear the bar entirely */
#stats_noise[data-level="blank"] #stats_noise_bar,
#stats_noise[data-level="blank"] #stats_noise_bar_full {
    background-color: #000000; /* black */
}

/* noise number is printed here in wizmode */
#stats_noise_num {
    color: #D3D3D3; /* default gray */
    width: 0;
}
#stats_noise[data-shownum] #stats_noise_num {
    width: 2em;
}

/* use attribute selectors to adjust the bar and number (wizmode) color depending on `data-level`. */
#stats_noise[data-level="quiet"] #stats_noise_bar_full {
    background-color: #D3D3D3; /* lightgray */
}
#stats_noise[data-level="quiet"] #stats_noise_num {
    color: #D3D3D3;
}
#stats_noise[data-level="loud"] #stats_noise_bar_full {
    background-color: #FFD700; /* gold */
}
#stats_noise[data-level="loud"] #stats_noise_num {
    color: #FFD700;
}
#stats_noise[data-level="veryloud"] #stats_noise_bar_full {
    background-color: #FF0000; /* red */
}
#stats_noise[data-level="veryloud"] #stats_noise_num {
    color: #FF0000;
}
#stats_noise[data-level="superloud"]  #stats_noise_bar_full {
    background-color: #FF00FF; /* magenta */
}
#stats_noise[data-level="superloud"] #stats_noise_num {
    color: #FF00FF;
}

/* make the bar go to eleven on superloud sounds. */
#stats_noise_bar { width: 82%; }
#stats_noise[data-level="superloud"] #stats_noise_bar {
    width: 100%;
}

/* shrink the bar to the right in wizmode (if `data-shownum` is set). */
#stats_noise_inter { width: 61%; }
#stats_noise[data-shownum] #stats_noise_inter {
     width: 45%;
}

#stats_weapon_letter
{
    float: left;
    display: block;
    margin-right:0.5em;
}

#stats_weapon
{
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

#stats_offhand_weapon_letter
{
    float: left;
    display: block;
    margin-right:0.5em;
}

#stats_offhand_weapon
{
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

#stats_status_lights_tooltip
{
    position: absolute;
    z-index: 100;

    border: 5px solid black;
    background-color: #040204;
    outline: 2px solid #7d623c;
    margin: 10px;
}

#message_pane {
    width: 100%;
    font-family: var(--msg-font);
}
#messages_container {
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
}
#messages {
    line-height: 1.4em;
    width: 100%;
}
.prefix_glyph.command_marker {
    color: var(--color-8); /* darkgray */
}
.prefix_glyph.turn_marker {
    color: var(--color-7); /* lightgray */
}
.game_message {
    white-space: pre-wrap;
}

#minimap_block {
    display: block;
}

#minimap, #minimap_overlay {
    position: absolute;
}


#tooltip {
    position: absolute;
    background: rgba(40, 40, 40, 0.5);
    padding: 5px;
    border: 1px solid lightgray;
}


/* monster list */
#monster_list {
    display: inline-block;
    overflow-x: hidden;
    font-family: var(--lbl-font);
}

#monster_list .group {
    display: block;
}

#monster_list .picture {
    display: inline;
    vertical-align: middle;
}

#monster_list .name {
    vertical-align: middle;
}

#monster_list .trivial {
    color: var(--color-8); /* darkgray */
}
#monster_list .easy {
    color: var(--color-7); /* lightgray */
}
#monster_list .tough {
    color: var(--color-14); /* yellow */
}
#monster_list .nasty {
    color: var(--color-12); /* lightred */
}

#monster_list .friendly {
    color: var(--color-2); /* green */
}

#monster_list .good_neutral,
#monster_list .neutral {
    color: var(--color-6); /* brown */
}

#monster_list .health {
    display: inline-block;
    vertical-align: middle;
}

#monster_list .uninjured {
    background-color: var(--color-2); /* green */
}

#monster_list .lightly_damaged {
    background-color: var(--color-2); /* green */
}

#monster_list .moderately_damaged {
    background-color: var(--color-6); /* brown */
}

#monster_list .heavily_damaged {
    background-color: var(--color-6); /* brown */
}

#monster_list .severely_damaged {
    background-color: var(--color-5); /* magenta */
}

#monster_list .almost_dead {
    background-color: var(--color-4); /* red */
}

#monster_list .ellipse {
    float: right;
}

/* scroller */
.scroller-shade {
    position: absolute;
    width: 100%;
    height: 12px;
    pointer-events: none;
}
.scroller-shade.top {
    top: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 2, 4, 0.784)), to(rgba(4, 2, 4, 0.001)));
    background: -webkit-linear-gradient(rgba(4, 2, 4, 0.784), rgba(4, 2, 4, 0.001));
    background: -o-linear-gradient(rgba(4, 2, 4, 0.784), rgba(4, 2, 4, 0.001));
    background: linear-gradient(rgba(4, 2, 4, 0.784), rgba(4, 2, 4, 0.001));
}
.scroller-shade.bot {
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 2, 4, 0.001)), to(rgba(4, 2, 4, 0.784)));
    background: -webkit-linear-gradient(rgba(4, 2, 4, 0.001), rgba(4, 2, 4, 0.784));
    background: -o-linear-gradient(rgba(4, 2, 4, 0.001), rgba(4, 2, 4, 0.784));
    background: linear-gradient(rgba(4, 2, 4, 0.001), rgba(4, 2, 4, 0.784));
}
.simplebar-scroll-content {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}
.simplebar-content > :first-child {
    margin-top: 0 !important;
}
.simplebar-content > :last-child {
    margin-bottom: 0 !important;
}
.simplebar-track.vertical > .simplebar-scrollbar {
    width: 2px;
    border-left: 4px solid #040204;
    border-right: 5px solid #040204;
    background: #7d623c;
    opacity: 1 !important;
    left: 0;
    right: 0;
    cursor: pointer;
}
.simplebar-track {
    background: #040204;
}
.simplebar-track.vertical::before {
        position: absolute;
        top: 0;
        left: 4px;
        right: 5px;
        bottom: 0;
        background: #292929;
        content: ' ';
}
.simplebar-track .simplebar-scrollbar::before,
.simplebar-track.horizontal {
    display: none;
}
[data-simplebar="init"] {
    margin-right: -20px; /* matched in simplebar.js */
    padding-right: 20px; /* matched in simplebar.js */
}
.scroller-lhd {
    visibility: hidden;
    position: absolute;
}

/* paneset */
.paneset {
    display: -ms-inline-grid;
    display: inline-grid;
    min-height: 0;
}
.paneset > .pane {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    visibility: hidden;
}
.paneset > .pane.current {
    visibility: visible;
}

.paneset > .pane:not(.current) .simplebar-track {
    visibility: unset !important;
}

/* menus */
.menu {
    line-height: 1.2em;
    min-width: 40em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: inherit;
    font-family: var(--crt-font);
}

.menu_title {
    white-space: pre;
    margin-bottom: 5px;
}

.menu_more {
    white-space: pre;
    margin-top: 5px;
}

.menu_contents {
    overflow: hidden;
}

.menu_contents ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu_contents li {
    white-space: pre;
    padding: 1px;
    border: 1px solid rgba(255, 255, 255, 0.001);
}

.menu_contents li.hovered {
    background: rgba(255,255,255,0.15);
    cursor: pointer;
    color: white;
}

.menu_contents li.selectable:active {
    background: black;
    border: 1px solid #222;
}

.menu_contents li.placeholder {
    color: darkgray;
}

.menu_prompt {
    min-width: 20em;
}

.menu .title_prompt {
    height: 1em;
    border: 0;
    padding: 0px 2px 0px 2px;
    margin: 0px 0px 0px 4px;
    font-family: var(--crt-font);
    font-size: 16px;
}

#input_dialog {
    line-height: 1.2em;
    min-width: 20em; /* can override this with a tag-specific class */
    white-space: pre;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.input_skill_target input {
    max-width: 5em;
}

:root {
    --color-0: #000000; /* black */
    --color-1: #005afa; /* blue */
    --color-2: #4e9a06; /* green */
    --color-3: #06989a; /* cyan */
    --color-4: #b30009; /* red */
    --color-5: #cd21cb; /* magenta */
    --color-6: #8f5902; /* brown */
    --color-7: #babdb6; /* lightgray */
    --color-8: #555753; /* darkgray */
    --color-9: #5e78ff; /* lightblue */
    --color-10: #8ae234; /* lightgreen */
    --color-11: #34e2e2; /* lightcyan */
    --color-12: #ef2929; /* lightred */
    --color-13: #fd59fa; /* lightmagenta */
    --color-14: #fce94f; /* yellow */
    --color-15: #eeeeec; /* white */
}

#game .fg0 { color: var(--color-0); } /* black */
#game .fg1 { color: var(--color-1); } /* blue */
#game .fg2 { color: var(--color-2); } /* green */
#game .fg3 { color: var(--color-3); } /* cyan */
#game .fg4 { color: var(--color-4); } /* red */
#game .fg5 { color: var(--color-5); } /* magenta */
#game .fg6 { color: var(--color-6); } /* brown */
#game .fg7 { color: var(--color-7); } /* lightgray */
#game .fg8 { color: var(--color-8); } /* darkgray */
#game .fg9 { color: var(--color-9); } /* lightblue */
#game .fg10 { color: var(--color-10); } /* lightgreen */
#game .fg11 { color: var(--color-11); } /* lightcyan */
#game .fg12 { color: var(--color-12); } /* lightred */
#game .fg13 { color: var(--color-13); } /* lightmagenta */
#game .fg14 { color: var(--color-14); } /* yellow */
#game .fg15 { color: var(--color-15); } /* white */

#game .bg0 { background-color: var(--color-0); } /* black */
#game .bg1 { background: var(--color-1); } /* blue */
#game .bg2 { background: var(--color-2); } /* green */
#game .bg3 { background: var(--color-3); } /* cyan */
#game .bg4 { background: var(--color-4); } /* red */
#game .bg5 { background: var(--color-5); } /* magenta */
#game .bg6 { background: var(--color-6); } /* brown */
#game .bg7 { background: var(--color-7); } /* lightgray */
#game .bg8 { background: var(--color-8); } /* darkgray */
#game .bg9 { background: var(--color-9); } /* lightblue */
#game .bg10 { background: var(--color-10); } /* lightgreen */
#game .bg11 { background: var(--color-11); } /* lightcyan */
#game .bg12 { background: var(--color-12); } /* lightred */
#game .bg13 { background: var(--color-13); } /* lightmagenta */
#game .bg14 { background: var(--color-14); } /* yellow */
#game .bg15 { background: var(--color-15); } /* white */

.menu_txt:not(.menu_crt_shrink) {
    width: 80ch;
}

.progress-bar {
    max-width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-direction: column;
    width: 100%; /* for IE11 */
    max-height: inherit;
}

.progress-bar > .bar-text {
    margin-top: 1em;
    margin-bottom: 1em;
    white-space: pre;
}

.describe-generic {
    max-width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* for IE11 */
    max-height: inherit;
}
.describe-generic > .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.describe-generic > .header > canvas {
    margin-right: 10px;
}
.describe-generic > .body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.describe-feature {
    max-width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* for IE11 */
    max-height: inherit;
}
.describe-feature-feat {
    margin: 20px 0;
}
.describe-feature-feat > .header {
    margin: 0;
}
.describe-feature-feat > .header > canvas {
    margin-right: 10px;
}
.describe-feature-feat > .body {
    margin-top: 15px;
    font-size: 0.9em;
    white-space: pre-wrap;
}

.describe-feature .actions span[data-hotkey]:hover {
    background: #555;
}

.describe-item {
    max-width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* for IE11 */
    max-height: inherit;
}
.describe-item > .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px;
}
.describe-item > .header > canvas {
    margin-right: 10px;
}
.describe-item > .body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    white-space: pre-wrap;
}
.describe-item > .actions {
    margin-top: 15px;
    color: cyan;
}
.describe-item > .actions span[data-hotkey]:hover {
    background: #555;
}

.describe-spell {
    max-width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* for IE11 */
    max-height: inherit;
}
.describe-spell > .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px;
}
.describe-spell > .header > canvas {
    margin-right: 10px;
}
.describe-spell > .body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.describe-spell > .actions {
    margin-top: 15px;
    color: cyan;
}

.describe-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* for IE11 */
    max-height: inherit;
}
.describe-card {
    margin: 20px 0;
}
.describe-card > .header {
    margin: 0;
}
.describe-card > .body {
    margin-top: 15px;
    font-size: 0.9em;
}
.describe-card > .body > :first-child {
    margin-top: 0 !important;
}
.describe-card > .body > :last-child {
    margin-bottom: 0 !important;
}

.describe-god {
    width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: inherit;
}
.describe-god > .header {
    margin-bottom: 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.describe-god > .header > canvas {
    margin-right: 10px;
}
.describe-god > .body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.describe-god > .footer {
    margin-top: 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.describe-god td {
    padding: 0;
}
.describe-god .god-favour td:nth-child(2) {
    white-space: pre;
}
.describe-god .god-powers > .power {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.describe-god .god-powers > .power > :first-child {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
}
.describe-god .god-powers > .power > :last-child {
    white-space: pre;
}
.describe-god .desc, .describe-god .god-favour, .describe-god .god-powers {
    margin: 1em 0;
}
.describe-god > body, .describe-god > .body .pane {
    width: 80ch; /* for IE11 */
}
.describe-god .body .tbl {
    white-space: pre;
}

.describe-monster {
    width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: inherit;
}
.describe-monster > .header {
    margin-bottom: 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.describe-monster > .header > canvas {
    margin-right: 10px;
}
.describe-monster > .body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.describe-monster > .footer {
    margin-top: 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.formatted-scroller {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    white-space: pre;
    max-height: inherit;
}
.formatted-scroller > .body .highlight {
    background: rgba(255,255,0,0.196);
    width: 100%;
    display: block;
}

.formatted-scroller > .header {
    margin-bottom: 10px;
}

.formatted-scroller > .more {
    margin-top: 15px;
}

.spellset ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.4em 0;
}
.spellset li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.spellset li > span:nth-child(2) {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.msgwin-get-line {
    max-width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* for IE11 */
}
.msgwin-get-line > .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.msgwin-get-line > .body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1.1em;
    line-height: 1.1em;
}

/* Use crisp (nearest-neighbor) upscaling on HiDPI screens to avoid blurriness. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    canvas {
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: crisp-edges;
    }
}

#ui-stack {
    z-index: 3000;
    font-family: var(--crt-font);
}

.ui-popup-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.7);
}

.ui-popup {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
}

/* progressively indent nested popups: four levels deel is probably enough */
.ui-popup + .ui-popup { padding-top: 20px; }
.ui-popup + .ui-popup + .ui-popup { padding-top: 40px; }
.ui-popup + .ui-popup + .ui-popup + .ui-popup { padding-top: 60px; }

.ui-popup.centred {
    padding-top: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ui-popup-outer {
    margin: 50px;
    max-height: calc(95vh - 100px);

    padding: 20px;
    background-color: #040204;
    border: 1px solid black;
    outline: 2px solid #7d623c;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 0;
    position: relative;
}

.ui-popup-inner {
    position: relative; /* positioned so that it renders on top of bg */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: calc(95vh - 100px - 46px); /* for IE11 */
}
.ui-popup-inner:after {
    display: block;
    content: "";
    clear:both;
}

#game .ui-popup-inner .bg0 {
    background-color: transparent;
}

.hidden, .templates {
    display: none !important;
}

#ui-stack:not([data-display-mode="tiles"]) .glyph-mode-hidden {
    display: none !important;
}

.newgame-choice {
     display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.newgame-choice .header
{
    margin-bottom: 15px;
    white-space: pre;
    display: flex;
    align-items: center;
    flex: 1 0 auto;
}

.newgame-choice .header > canvas
{
    margin-right: 10px;
}

.newgame-choice > .body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.newgame-choice .grid
{
    display: grid;
    list-style: none;
    min-height: 0;
    flex: 1 1 auto;
}
.newgame-choice .sub-items
{
    flex: 1 0 auto;
}

.newgame-choice .grid .button {
    background: #040204;
    white-space: pre;
    padding: 1px;
    border: 1px solid rgba(255, 255, 255, 0.001);
}

@media screen and (max-height: 780px) {
    .newgame-choice .grid .button canvas {
        margin: -1px 0;
    }
    .ui-popup-outer {
        margin: 20px;
        max-height: calc(95vh - 40px);
    }
    .ui-popup-inner {
        max-height: calc(95vh - 40px - 46px);
    }
}

.newgame-choice .grid .button.selected
{
    background: black;
    border: 1px solid #222;
}

.newgame-choice .grid .button.selected.hlc-7 { border: 1px solid var(--color-7); } /* lightgrey */
.newgame-choice .grid .button.selected.hlc-1 { border: 1px solid var(--color-1); } /* blue */
.newgame-choice .grid .button.selected.hlc-2 { border: 1px solid var(--color-2); } /* green */

.newgame-choice .grid .button.selected:hover {
    cursor: pointer;
}

.newgame-choice .grid .button:active
{
    background: black;
    border: 1px solid #222 !important;
}

.newgame-choice .grid .button
{
    display: flex;
    align-items: center;
    padding-right: 1em;
}

.newgame-choice .grid .button > span
{
    margin-left: 6px;
}

#ui-stack[data-display-mode="tiles"] .newgame-choice .grid .label {
    align-self: end;
    margin-bottom: 0.75em;
    margin-left: 2px;
}

#ui-stack[data-display-mode="tiles"] .newgame-choice .grid .label::before {
    content: " ";
    display: inline-block;
    margin-left: 32px;
}

.newgame-choice .descriptions
{
    margin: 15px 0;
    max-width: 70ch;
    flex: 1 0 auto;
}

.game-over {
    max-width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* for IE11 */
    max-height: inherit;
}
.game-over > .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.game-over > .header > canvas {
    margin-right: 10px;
}
.game-over > .body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    white-space: pre-wrap;
}

.seed-selection {
    max-width: 80ch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* for IE11 */
    max-height: inherit;
}

.seed-selection > .header {
    margin-bottom: 15px;
}

.seed-selection p {
    margin: 20px 0;
}

.seed-selection .seed-input {
    line-height: 1.2em;
    white-space: pre;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#ui-stack .button-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    margin-top: 10px;
}

#ui-stack .button-bar > button:last-child {
    margin-right: 0;
}

#ui-stack input {
    background: #1D1B15;
    color: #babdb6;
    border: 1px solid #7d623c;
}

#ui-stack button:hover {
    border: 1px solid #7d623c;
    background: #111;
}

#ui-stack button.style-focused:hover,
#ui-stack button.style-focused,
#ui-stack input.style-focused,
#ui-stack button:hover:focus,
#ui-stack button:focus,
#ui-stack input:focus {
    background: #1e1e1e;
    border: 1px solid #b88d19;
    outline: none;
}

#ui-stack button,
#ui-stack input[type=checkbox],
#ui-stack label {
    cursor: pointer;
}

#ui-stack label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#ui-stack input[type=checkbox] {
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 10px 0 0;
}
#ui-stack input[type=checkbox]:after {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAH0lEQVR4AWOoTbIhG1FDMwOJYBBqHtU8qnlU88CVJACP6Z8xWMGK0wAAAABJRU5ErkJggg==');
    width: 20px;
    height: 20px;
    content: ' ';
    display: block;
}
#ui-stack input[type=checkbox]:hover:after,
#ui-stack input[type=checkbox]:focus:after,
#ui-stack input.style-focused[type=checkbox]:after
{
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAH0lEQVR4AWPY0StJNqKGZgYSwSDUPKp5VPOo5oErSQCXb8ThkznLHAAAAABJRU5ErkJggg==');
}
#ui-stack input[type=checkbox]:checked:after {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAgMAAADw5/WeAAAADFBMVEV9YjwAAAC4jRnZuhDmQF8EAAAANUlEQVR4AWNABqyhoaEB6GQkmMwCkytBZNhSIFkaNRVI/s0CqalfCSLjl4LI8KlwvZgkEgAAnsAYOzDliTAAAAAASUVORK5CYII=');
}
#ui-stack input[type=checkbox]:hover:checked:after,
#ui-stack input[type=checkbox]:focus:checked:after,
#ui-stack input.style-focused[type=checkbox]:checked:after
{
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAgMAAADw5/WeAAAACVBMVEW4jRkAAADZuhDLYpq6AAAANElEQVR4AWNABqyhoaEB6GQgmHQAk4wgMoQVSKYGiALJlQ4gNVmMIDKKFUSGicL1YpJIAACbBRPEM0MirwAAAABJRU5ErkJggg==');
}

#ui-stack button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #040204;
    border: 1px solid transparent;
    margin: 0 10px;
    color: #babdb6;
    padding: 4px 8px;
    font-family: var(--crt-font);
    cursor: pointer;
}

/* action panel */
#action-panel {
    position: absolute;
    left: 0px;
    top: 0px;
    border: 2px solid #7d623c;
    border-radius: 3px;
    font-family: var(--action-font);
}

#action-panel-tooltip
{
    position: absolute;
    display: table;
    left: 0px;
    right: 0px;
    border: 1px solid #7d623c;
    background: rgba(0, 0, 0, 0.85);
    font-size: small;
    padding: 5px;
}

/* makes the hidden panel or its placeholder immune to $.show() */
.action-panel.hidden {
    display: none !important;
}

#action-panel-placeholder {
    position: absolute;
    left: 5px;
    top: 5px;
    border: 1px solid #7d623c;

    background: rgba(0, 0, 0, 0.85);
    width: 1em;
    text-align: center;
    font-size: small;
    padding: 5px;
}

#action-panel-placeholder a {
    text-decoration: none;
}

#action-panel-settings {
    position: absolute;
    background: black;
    color: #babdb6;
    border: 2px solid #7d623c;
    padding: 2px;
    font-size: 16px;
    font-family: var(--main-font);
}

#action-panel-settings fieldset {
    border-width: 1px;
    margin: 0px 2px 2px 2px;
    padding: 5px 5px 10px 5px;
}

#action-panel-settings fieldset legend
{
    margin: 0px;
    padding: 0px;
    border-bottom: 0px;
}

#action-panel-settings button,input {
    display: inline;
    color: black;
}

fieldset.option {
    display: flex;
    justify-content: space-around;
}

div.settings-buttons {
    display: flex;
}

#action-panel-settings input[type=number] {
    width: 100px;
    font: 14px monospace;
}

#action-panel-settings input[type=number]:invalid {
    border: 2px solid red;
}

fieldset.option button {
    margin-left: 4px;
    min-width: 30%;
}

#settings-note {
    inline-size: 180px;
    display: inline-block;
    font-size: smaller;
    padding: 0.5em;
}

div.settings-buttons button {
    width: 50%;
    margin: 2px;
}

#mobile_input {
    position: relative;
    height: 0px;
    bottom: 25px;
}

#mobile_input input {
    background: rgba(0, 0, 0, 0.5);
    color: #A2A2A280;
    text-align: center;
    padding: 5px;
    border: 1px solid #62626280;
    height: 13px;
    caret-color: transparent;
}

#mobile_input input:focus {
    outline: none;
}