/* Copyright (C) 2021, David Garber */

body {
    background-color: #123f17;
    touch-action: manipulation;
    font-family: 'Times New Roman';
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body::-webkit-scrollbar {
    display: none;
}

body.wideScreen {
    margin: 0px;
}

#fullScreen {
    background-color: #123f17;
    touch-action: manipulation;
    position: relative;
    width: 100%;
    max-width: 925px;
    height: 95vh;
}

body.wideScreen #fullScreen.showKeyNav {
    margin-left: 10px;
    width: 99%;
}

#root {
    position: relative;
    width: 100%;
    height: 100%;
}

#root.wild {
    max-width: 1000px;
}

#toolbar {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20pt;
    cursor: pointer;
}

#footer {
    position: absolute;
    bottom: 5px;
    margin-top: -20px;
    color:white;
    width: 100%;
    text-align: center;
}

#deckArea {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 140px;
}

.wideScreen #deckArea {
    left: 18%;
    width: 82%;
}


.deck {
    position: absolute;
    left: 0px;
    height: 100%;
    margin-top: 0px;
}

.draw {
    position: absolute;
    left: 100px;
    height: 100%;
    margin-top: -10px;
    white-space:nowrap;
}

.small .draw {
    left: 80px;
}
.smaller .draw {
    left: 60px;
}

#optionsTR {
    position: absolute;
    text-align: right;
    right: 0px;
    top: 0px;
    margin-top: 10px;
    margin-right: 0px;
}

#optionsTL {
    position: absolute;
    text-align: left;
    left: 0px;
    top: 0px;
    margin-top: 10px;
}

.wideScreen #optionsTL {
    left: 18%;
}

.optionSvg {
    width: 100px;
    height: 60px;
}

.optionSvg ellipse.visible {
    stroke: #dddddd;
    stroke-width: 2pt;
    fill: transparent;
}

ellipse.transparent {
    fill: transparent;
}

.optionSvg text {
    fill: white;
    text-anchor: middle;
    user-select: none;
}

.disabled ellipse.transparent {
    fill: #333333aa;
}

.hidden {
    display: none;
}

.optionSvg.toggled text {
    fill: black;
}

.optionSvg.toggled ellipse.visible {
    fill: white;
}

#commands {
    position: absolute;
    right: 0px;
    top: 50%;
    text-align: right;
    font-family: Arial;
}

#doneArea {
    position: absolute;
    top: 136px;
    width: 98%;
    height: 100px;
    margin-top: -20px;
}

.small #doneArea {
    top: 110px;
    height: 80px;
    margin-top: -16px;
}
.smaller #doneArea {
    top: 90px;
    height: 60px;
    margin-top: -12px;
}
.wideScreen #doneArea {
    left: 0px;
    top: 5px;
    width: 18%;
}

#doneRow {
    width: 100%;
}

.doneCell {
    height: 100px;
    display: block;
    float: left;
    position: relative;
}
.wideScreen .doneCell {
    height: 15.5vh;
    display: block;
    float: none;
    min-height: 82px;
}

.doneBox {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
}

#stackArea {
    position: absolute;
    top: 246px;
    width: 99%;
    height: 412px; /* [(numStacks - 1) * 4] + [(numRanks - 1) * 30] + 118 */
    vertical-align: top;
}

.small #stackArea {
    top: 190px;
}
.smaller #stackArea {
    top: 160px;
}
.wideScreen #stackArea {
    top: 160px;
    width: 82%;
    left: 18%;
}

#stackTable {
    width: 100%;
}

.stackCell {
    position: relative;
}

.stackBox {
    position: absolute;
    display: block;
    height: 100%;
    top:0px;
}

.clickable {
    cursor: grab;
}

.droppable {
    cursor: pointer; 
}

.nodrop {
    cursor: not-allowed;
}

.depressed {
    transform: scale(1.1) translate(-1%, -1%);
}

.depressed.soft-depressed {
    transform: scale(1.02) translate(0,0);
}

.keyLabel {
    display: none;
}

.showKeyNav .keyLabel {
    display: block;
    font-family: Arial;
    font-size: 10pt;
    color: #24cbe3;
    position: absolute;
    left: -4px;
    top: -8px;
}

.doneCell .keyLabel {
    top: 20px;
}

.draw .keyLabel {
    top: 2px;
    left: 10px;
}

#debug {
    position: absolute;
    left: -5px;
    top: 550px;
    width: 100%;
    color: white;
    background-color: darkslategray;
    font-size: 9pt;
    font-family: sans-serif;
}

#debugStatus {
    position: absolute;
    top: 40pt;
}

#debugStatus th {
    color: lightskyblue;
    text-align: right;
}

#debugStatus td {
    color: yellow;
    padding-right: 20px;
}

#debugStatus .stale th {
    color: gray;
}

#debugStatus .stale td {
    color: lightgoldenrodyellow;
}

#debugStatus td.comment {
    color: pink;
}

#debugTrace {
    position: absolute;
    top: 100pt;
}