* {
    font-family: "Pixelated MS Sans Serif";
    -webkit-font-smoothing: none;
    font-size: 11px;
    color: whitesmoke;
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-style: normal;
    font-weight: 400;
    src: url(./fonts/ms_sans_serif.woff2) format("woff2")
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-style: normal;
    font-weight: 700;
    src: url(./fonts/ms_sans_serif_bold.woff2) format("woff2")
}

@font-face {
    font-family: "RCT";
    font-style: normal;
    font-weight: 400;
    src: url(./fonts/rct2.woff2) format("woff2")
}

@font-face {
    font-family: "Comset Bold";
    font-style: normal;
    font-weight: 400;
    src: url(./fonts/comset-bold.woff2) format("woff2")
}

@font-face {
    font-family: "Comic Sans MS Pixel rus eng";
    font-style: normal;
    font-weight: 400;
    src: url(./fonts/comic-sans-ms-pixel-rus-eng.ttf) format("ttf")
}

.warning { 
    color: red;
}

.hidden {
    display: none;
}

.hidden {
    color: blue;
}

.flannge {
    color: blue;
}

#pigBlanket{
    min-height: auto;
    padding: 4px;
}

main {
    width: 194px;
    height: 254px;
    padding: 8px;
    box-sizing: border-box;
	image-rendering: pixelated;
    font-size: 14px;
    font-smooth: never;
    -webkit-font-smoothing : none;
    -moz-osx-font-smoothing: grayscale;
    border: 1px outset whitesmoke;
    background-color: lightgray;
    scrollbar-color: lightgray gray;
    background-image: url(./images/wood.png);
}
section {
    background-image: url(./images/green3.png);
    box-shadow: inset 3px 4px 15px -4px rgba(0,0,0,0.65);
    padding: 8px;
    min-height: auto;
    margin: -2px;
    border-radius: 4px;
}
.sectionWrapper {
    /* padding:4px; */
    border-radius: 4px;
    border-width: 4px;
    border-style: solid;
    border-image: url(./images/border4.png) 4;
    /* box-shadow: inset -1px -1px rgba(255, 255, 255, 0.5), inset 1px 1px rgba(0, 0, 0, 0.5), inset -2px -2px rgba(255, 255, 255, 0.5), inset 2px 2px rgba(0, 0, 0, 0.5); */
}
h1 {
    /* font-family: "Pixelated MS Sans Serif";
    font-size: 11px; */
    font-family: "Comset Bold";
    font-size: 16px;
    font-weight: normal;
    line-height: 18px;
    margin-bottom: 8px;
}

label, input, p, label, button, table {
    margin: 0;
    margin-top: 4px;
}

table, td, th {
    border: solid 1px rgba(255,255,255,0.6);
    border-collapse: collapse;
    padding: 2px 4px;
}

tbody tr:nth-child(even) td:first-of-type, tbody tr:nth-child(odd) td, thead tr:nth-child(odd) th:first-of-type, thead tr:nth-child(even) th {
    background-color: black;
}

tbody tr:nth-child(odd) td:first-of-type, tbody tr:nth-child(even) td, thead tr:nth-child(even) th:first-of-type, thead tr:nth-child(odd) th {
    background-color: darkred;
}

button {
    margin-top: 8px;
}

input {
    width: 183px;
}

input, button {
    color: black;
}

.flex {
    display: flex;
    flex-direction: row;
}

.smallImg {
    width: 40px;
    margin-right: 4px;
}

input[type=text], input[type=name], input[type=number] {
    width: 100%;
    outline: none;
    border: none;
    background-color: #fff;
    box-shadow: inset -1px -1px #9d9b91, inset 1px 1px #5c5a52, inset -2px -2px #c4c2b8, inset 2px 2px #363531;
    box-sizing: border-box;
    padding:6px 8px;
}


button.gameButton {
    background-color: silver;
    border: 2px whitesmoke outset;
    outline: 1px dimgray solid;
    font-family: "Pixelated MS Sans Serif";
    font-weight: 700;
    color: MediumVioletRed;
    padding: 2px 4px;
    margin-left: 1px;
}
button.gameButton:hover {
    cursor: pointer;
	background-color: gainsboro;
}
button.gameButton:active {
    border: 2px silver inset;
}
button.gameButton:disabled {
    background-color: darkgray;
    border: 2px gainsboro outset;
    color: DarkMagenta;
    filter: saturate(0);
}
button.gameButton:disabled:hover, button:disabled:active {
    cursor:not-allowed;
}

#playerSummary {
    overflow-y: auto;
    max-height: 160px;
}

.tableWrapper {
    max-height: 160px;
    overflow-y: auto;
    overflow-x: clip;
}

.gameMenu {
    display: flex;
    flex-direction: row;
    margin: 0px 2px;
    justify-content: space-between;
}

button.metalButton {
    outline: none;
    border: none;
    background: lightgray;
    box-shadow: inset -1px -1px #363531, inset 1px 1px #fffdf0, inset -2px -2px #5c5a52, inset 2px 2px #f5f1d7, 2px 2px 12px -5px rgba(0,0,0,0.58);;
    padding: 6px 8px;
    background-image: linear-gradient(139deg, rgba(255,255,255,0.04) 2%, rgba(255,255,255,0.2) 8%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0.3) 39%, rgba(255,255,255,0) 81%, rgba(255,255,255,0.5013644366197183) 84%, rgba(255,255,255,0) 100%), -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255, 255,0.2) 80%), url(./images/gold.png);
    filter: saturate(3);
}

.altGameButton {
    padding: 4px 0;
}

.gameMenu button {
    padding: 10px 4px;
    width: 58px;
}
.gameMenu button img {
    margin: -6px;
}

button.metalButton:hover {
    cursor: pointer;
	filter: saturate(3) brightness(1.1)
}
button.metalButton img {
    filter: saturate(0.33);
}
button.metalButton:active:enabled {
    box-shadow: inset -1px -1px #fffdf0, inset 1px 1px #363531, inset -2px -2px #f5f1d7, inset 2px 2px #5c5a52;
}
button.metalButton:disabled {
    background-color: darkgray;
    filter: grayscale(1);
}
button.metalButton:disabled:hover, .gameMenu:disabled:active {
    cursor:not-allowed;
}

.topMargin {
    margin-top: 4px;
}

marquee {
    background-color: black;
    margin: -2px;
    margin-bottom: -4px;
    font-size: 14px;
    border-radius: 4px;
    padding: 2px;
}

.scores .score {
    flex-grow: 1;
}
.shadowWrapper {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
    width:23px;
}
.counterDigit {
    height: 11px;
    width: 7px;
    object-fit: cover;
    object-position: 0px -12px;
    transition: object-position 1s;

}

.counter {
    padding: 1px;
    display: inline-flex;
    gap: 1px;
    background-color: #222222;
    width: 23px;
    height: 11px;
    position:relative;
    bottom: -1px;
}

.counter::after {
    box-shadow: inset 0px 4px 3px -2px rgb(0 0 0 / 50%), inset 0px -4px 4px -1px rgb(0 0 0 / 50%), inset 0px 0px 2px 0 rgb(0 0 0 / 75%);
    content: '';
    display: block;
    height: 12px;
    position: absolute;
    width: 23px;
}

#midGameScores {
    position: absolute;
    top: 232px;
    left: 1px;
    background-image: url(./images/wood.png);
    border-radius: 4px;
    border-width: 4px;
    border-style: solid;
    border-image: url(./images/bevelBorder.png) 4;
    border-bottom-style: none;
    width: 184px;
    height: 17px;
    box-shadow: 0px -4px 10px -4px rgb(0 0 0 / 50%);
    overflow: hidden;
    transition: top ease 0.8s, height ease 0.8s;
}

#expandScores {
    width: 100%;
    margin-top: 0px;
    cursor: pointer;
    color: gold;
    background: none;
    border: none;
    border-bottom: 1px solid gold;
}