@font-face {
    font-family: codeBold;
    src: url("fonts/code_bold.otf");
}
@font-face {
    font-family: codeLight;
    src: url("fonts/code_light.otf");
}

html {
    cursor: default !important;
}

@media screen and (min-height: 800px) {
    body { font-size: 1.25em; }
}

@media screen and (min-device-height: 500px) and (max-device-height: 799px) {
    body { font-size: 1em; }
}

@media screen and (min-device-height: 200px) and (max-device-height: 499px) {
    body { font-size: .75em; }
}

body {
    background: #444;
    margin: 0;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    font-family: monospace;
}

.hidden {
    display: none !important;
}

.on_top {
    z-index: 1000;
}

.flex_center {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.half_outline {
    outline-style: solid;
    outline-color: black;
}

.half_width {
    width: 50%;
    float: left;
}

.half_font {
    font-size: .5em;
}

.double_font {
    font-size: 2em;
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .9);
    z-index: 5000;
    color: white;
}

#overlay .page_wrap {
    margin: 0 auto;
    height: 75vh;
    width: 75vh;
    font-size: 1em;
    background-color: rgba(169, 169, 169, 1);
    outline: solid white .5em;
}

#overlay .page_wrap::after {
    content: "Click to continue";
    width: 100%;
    height: 1.5em;
    display: inline-block;
    text-align: center;
    transform: translateY(-1.5em);
    font-style: italic;
}

#overlay .page_wrap .page {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 70, 1);
    display: none;
    overflow: hidden;
    overflow-y: scroll;
}

#overlay h1 {
    height: 10%;
    margin: 0 !important;
}

#overlay .page div.main {
    height: 90%;
    display: inline-block;
    width: 100%;
}

#overlay h1, #overlay h2 {
    text-align: center;
    text-decoration: underline;
    margin: .5em 0;
}

#overlay li {
    padding: .3em 0;
}

#overlay p {
    padding: .5em 1em;
}

#overlay button {
    outline-color: white;
}

#overlay .page.options form {
    font-size: 1.25em;
    text-align: center;
    margin-top: 45%;
    transform: translateY(-60%);
}

#overlay .page.options button {
    width: auto;
    padding: .5em 1em;
    display: inline-block;
}

#overlay .page.options input[type=text] {
    margin: 0 1em;
}

#overlay .page.options button[type=submit] {
    width: 50%;
}

#overlay .page.waiting h1 {
    height: auto;
}

#overlay .page.game_over.checkmate h1::after { content: "Checkmate!"; }
#overlay .page.game_over.resign h1::after { content: "Game Over"; }
#overlay .page.game_over.checkmate .resigned { display: none; }

#overlay .page.game_over, #overlay .page.waiting {
    text-align: center;
}

#overlay .page.game_over button {
    width: 80%;
    margin: 0 auto;
}

#overlay .winner, #overlay .how {
    text-transform: capitalize;
}

#overlay .page_wrap[page="1"] .page:nth-child(1),
#overlay .page_wrap[page="2"] .page:nth-child(2),
#overlay .page_wrap[page="3"] .page:nth-child(3),
#overlay .page_wrap[page="4"] .page:nth-child(4),
#overlay .page_wrap[page="5"] .page:nth-child(5) { 
    display: inline-block !important; 
}

#game_board {
    position: absolute;
    display: inline-block;
    background-color: black;
    outline-color: black;
    outline-style: solid;
}

#game_board td { /* NO Z-INDEX ALLOWED */
    border-color: rgba(0,0,0,0);
    border-style: solid;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#game_board tr::before {
    position: absolute;
    top: .25em;
    left: .25em;
    content: attr(row);
    font-size: .25em;
    z-index: 10;
}

#game_board td[col_letter]::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: attr(col_letter);
    font-size: .25em;
    z-index: 10;
}

#game_board td > div {
    width: 100%;
    height: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#game_board * {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
}

#game_board tr:nth-child(even) td:nth-child(even),
#game_board tr:nth-child(odd) td:nth-child(odd) {
    background-color: rgba(169, 169, 169, 1);
}

#game_board tr:nth-child(odd) td:nth-child(even),
#game_board tr:nth-child(even) td:nth-child(odd) {
    background-color: rgba(70, 130, 180, 1);
}

#game_board.images_enabled td > div {
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: bottom;
}

#game_board.images_enabled td[piece="P"] > div {
    background-size: 60%;
}

table:not(.images_enabled) [color=w] > div { color: white; }
table:not(.images_enabled) [color=b] > div { color: black; }
table.images_enabled [piece][color=b] > div {
    -moz-filter: invert(100%);
    -webkit-filter: invert(100%);
}

#game_board.hints_enabled td.highlight {
    border-style: solid;
    border-color: rgba(0, 255, 0, 0.5);
}

#game_board.hints_enabled td.hover {
    background-color: rgba(0, 0, 255, 1) !important;
}

#game_board.hints_enabled td.last_move:not(.hover) {
    background-color: rgba(255, 165, 0, 1) !important; /*orange*/
}

#game_board.hints_enabled td.possible {
    border-width: 0px;
}

#game_board.hints_enabled td.possible > div {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-color: rgba(0, 255, 0, 0.5);
    border-radius: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#game_board.hints_enabled td.possible.kill > div {
    border-color: rgba(255, 0, 0, 0.5) !important;
}

#game_board.hints_enabled td.possible.debug > div {
   border-color: rgba(0, 0, 0, 0);
}

#game_board.hints_enabled td.highlight.possible > div {
    border-width: 0px;
}

div.runner {
    width: 100%;
    position: absolute;
    color: rgba(255, 255, 255, 1);    
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .25);
}

#top_wrap .title {
    font-family: codeBold;
    display: inline-block;
    letter-spacing: .25em;
    text-transform: uppercase;
}

#bottom_wrap {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

#bottom_wrap > div:first-child { margin-left: 3em; }
#bottom_wrap > div:last-child { margin-right: 3em; }

div.side {
    position: absolute;
    text-align: center;
}

.side > * {
    width: 80%;
    margin: 0 auto;
    font-size: 1em;
}

.side div.buttons {
    height: 50%;
}

.side .buttons .inner {
    width: 100%
}

button {
    width: 100%;
    padding: .75em 0;
    background-color: rgba(169, 169, 169, 1);
    border: none;
    display: block;
}

button.enabled { background-color: rgba(0, 255, 0, 1); }
button.enabled::after { content: " ON"; }
button.disabled { background-color: rgba(255, 0, 0, 1); }
button.disabled::after { content: " OFF"; }

button:disabled {
    color: black;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .75);
}

button:not(:disabled):hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .5); /* homemade darken style */
}

button:active {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .5),
                inset 0 0 0 5px rgba(255, 255, 255, 1)
                !important;
}

.side > div.table {
    display: block;
    background-color: gray;
}

.side table {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: gray;
    list-style: none;
    border-collapse: collapse;
}

.side table td {
    border: 1px solid black;
    margin: 0;
}

.side table tr.header {
    background-color: darkgray;
}

#game_board[turn=w] ~ #left_wrap #game_info td.turn {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
}

#game_board[turn=b] ~ #left_wrap #game_info td.turn {
    background-color: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}

#game_info td.turn.check:not(.sac)::after { content: "Check"; }
#game_info td.turn.sac::after { content: "Sac"; }

#game_info td, #sac_countdown td {
    padding: .5em;
}

#move_table_wrap {
    overflow: hidden;
    overflow-y: scroll;
    height: 40%;
}

#move_table {
    height: auto;
}

#move_table td.highlight {
    outline: solid 3px rgba(255, 255, 0, 1);
    outline-offset: -4px;
}

#material_list_wrap {
    height: 30%;
}

#material_list_table tr.header {
    height: 15%;
}

#material_list_table tr.area {
    height: 75%;
    vertical-align: top;
}

#material_list_table tr.area td {
    width: 50%;
}

#material_list_table tr.area td > div {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: left;
    width: 25%;
    height: 25%;
}

#material_list_table tr.area td > div > div {
    height: 100%;
    width: 100%;
}

#sac_countdown_wrap {
    height: 20%;
}

#sac_countdown .number::before {
    content: attr(value);
}

#sac_countdown .number[value='0'] {
    background-color: red;
}