:root {
	--resultScreenSize: min(100vmax, 768px);
}

body {
    margin: 0;

	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

p {
	margin:0;
}

canvas {
    display: block;
}

#clickable-area {
    position: absolute;
    width: 50vh;
    height: 50vh;
    top: 32.5vh;
    left: calc(50vw - 22vh);
    margin: auto;
    cursor: pointer;
}

#clickable-area rect {
    opacity: 0
}

#settings-toggle {
    position: absolute;
	z-index: 0;
    width: auto;
	padding-left: 5rem;
	padding-right: 5rem;
    height: 5vh;
    top: 1vh;
    left: auto;
    right: 1vh;
    bottom: auto;
    margin: auto;
    cursor: pointer;
}

#settings-toggle svg {
    position: absolute;
	left: 0;
	z-index: -1;
    width: 100%;
    height: 100%;
}

#settings-toggle svg rect {
    fill: #2A2A2A;
}

#settings-text {
    /* position: absolute; */
    /* width: 100%;*/
    height: 100%;
    color: #A0A0A0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: ocr-a-std, monospace;
}

#settings-panel {
    position: absolute;
	width: 576px;
    max-width: 100vw;
    height: 94%;

    right: 0;
    bottom: 0;
    margin: auto;
}

#tablet {
    position: absolute;
    width: 100%;
    height: 100%;
	pointer-events: none;
}

.inner-tablet-holder {
	padding: 5%;
	height: 100%;
    box-sizing: border-box;
}

#inner-tablet {
    height: 100%;
	overflow: auto;
}

#ascii-art {
    position: relative;
    width: 30%;
    height: auto;
    float: right;
    margin: 5%;
}

#result-screen {
    position: absolute;
    width: 100%;
    height: 100%;
}

#game-buttons {
    display: flex;
    gap:10px;
    flex-wrap: wrap;
}

#game-button-template {
	display: none;
}

.game {
    border-style: dashed;
    border-color: green;
    border-width: 1px;
    display: flex;
    justify-content: space-between;
    padding: 2px;
    z-index: 2;
    position: relative;
}

.game-button {
    border-style: solid;
    border-color: green;
    border-width: 1px;
    display: flex;
    justify-content: space-between;
    padding: 2px;
    z-index: 2;
    position: relative;
    cursor: pointer;
}

.game p {
	flex: 1 1 auto;
        vertical-align: middle;
        margin: 0;
	padding-right: 2rem;
        color: lime;
        font-family: ocr-a-std, monospace;
}

.game-button p {
	flex: 1 1 auto;
        vertical-align: middle;
        margin: 0;
        color: lime;
        font-family: ocr-a-std, monospace;
	padding-left: 10px;
	padding-right: 10px;
}

.game-checkbox {
        vertical-align: middle;
	flex: 0 0 2vh;
        width: 2vh;
        height: 2vh;
        cursor: pointer;
}

#result-screen-center {
    position: absolute;
    width: var(--resultScreenSize);
    height: var(--resultScreenSize);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 0;
}

.result-screen-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	z-index: -1;
    margin: auto;
    width: 100%;
    height: 100%;
}

#result-screen-logo {
    height: auto !important;
    width: 70% !important;
	margin-bottom: 2rem;
	max-height: 300px;
	min-height: 200px;
    object-fit: contain;
    object-position: center;
    /* margin: 0 auto auto auto !important; */
}

#button-container {
    display: flex;
    justify-content: center;
	gap: 1.5rem;
    padding: 2px;
    /* z-index: 2; */
    position: relative;
    /* height: 2vh; */
}

#result-screen-title {
	font-family: 'Trebuchet MS', sans-serif;
    font-size: 3rem;
    line-height: 1.2em;
    letter-spacing: .1em;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: .1em 0 BLACK, 0 -.1em BLACK, -.1em 0 BLACK, 0 .1em BLACK, .1em .1em BLACK, -.1em .1em BLACK, .1em -.1em BLACK, -.1em -.1em BLACK;
    margin-bottom: .5em;
    text-align: center;
}

.result-button {
    vertical-align: middle;
    width: 40%;
    height: 5vh;
    border-style: solid;
    border-color: green;
    border-width: 1px;
    cursor: pointer;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
}

.result-button > * {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.result-button svg {
    width: 100%;
    height: 100%;
}

.result-button p {
    width: 100%;
    height: 100%;
    color: #A0A0A0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: ocr-a-std, monospace;
}

#remove-button {

}

#ignore-button {

}

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}