* { margin: 0; }
body {
    height: 100vh;
    user-select: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    background-color: #333;
}

#canvas {
    border-left: 2px solid black;
    position: absolute;
    transform: translateX(0);
    transition-duration: 300ms;
}
#canvas:hover { transform: translateX(-50%); }
#foreground {
    border-left: 2px solid black;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
}

#main1 {
    display: grid;
    grid-template-rows: max-content max-content 1fr;
    border-right: 2px solid black;
    margin-right: -2px;
    /* min-width: max-content; */
    /* width: min-content; */
}
#main2 {
    display: grid;
    grid-template-rows: max-content 1fr;
}
#cash-mana {
    display: grid;
    grid-template-columns: 1fr max-content;
    padding-right: 0.5rem;
}
#cash-mana h3 {
    font-size: 1.5rem;
    padding: 0.5rem 0.7rem;
    padding-bottom: 0;
    color: white;
}
#main1 #sections {
    padding: 1rem;
    display: grid;
    grid-template-rows: max-content 1fr;
    gap: 1rem;
    position: relative;
}
.section {
    display: none;
}
#tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    border-bottom: 2px solid black;
    padding: 0.5rem;
    padding-bottom: 0;
}
.tab {
    float: left;
    /* width: max-content; */
    text-align: center;
    font-weight: bold;
    padding: 0 1rem;
    padding-top: 8px;
    padding-bottom: 2px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #171717;
    color: white;
}
.in-sect {
    background-color: #333;
    color: white;
    transform: translateY(2px);
    border: 2px solid black;
    border-bottom: none;
}
#click {
    height: 7rem;
    width: calc(100% - 2rem);
    background-color: cornflowerblue;
    position: absolute;
    bottom: 1rem;
    display: grid;
    align-items: center;
    text-align: center;
}
#click:hover { background-color: #5880ca; }
#click:active { background-color: #4b6dac; }

#upgr-orbs .btn, #upgr-idle .btn {
    /* background-color: lightgrey; */
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;

    display: none;
    grid-template-columns: 1fr max-content;
}
#upgr-idle .btn {
    background-color: #70e970;
    display: grid;
}
#upgr-orbs  .btn:hover, #upgr-idle  .btn:hover { opacity: 0.9; }
#upgr-orbs .btn:active, #upgr-idle .btn:active { opacity: 0.8; }

#upgr-idle .btn .btn-tip {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);

    padding: 1rem 1.2rem;
    background-color: #9bff9b;
    width: calc(100% - 2rem - 7px);
    transition-duration: 0.3s;
}
#upgr-idle .btn:hover > .btn-tip {
    transform: translateY(0);
}


#prestige .two-piece {
    display: grid; 
    padding: 1rem;
    grid-template-columns: max-content 1fr;
}
#prestige .two-piece h3 {
    padding: 1rem;
}
#prestige .btn {
    /* position: relative; */
    padding: 0.5rem;
    background-color: #8ceeff;
    display: grid;
    grid-template-columns: 1fr max-content;
    margin-bottom: 1rem;
    opacity: 1;
}
#prestige .btn .tip {
    position: absolute;
    background-color: #8ceeff;
    width: calc(100% - 2rem - 1px);
    padding: 1rem;
    border-left: 1px solid white;
    bottom: 0;
    left: 0;
    pointer-events: none;
    transition-duration: 0.3s;
    font-weight: bold;

    transform: translateY(100%);
}
#prestige .btn:hover > .tip {
    transform: translateY(0);
}
#prestige .btn h3 {
    padding: 0.5rem;
}
#prestige .btn h3:first-child {
    min-width: max-content;
}

#prestige .btn:hover { background-color: #85ffff; }
#prestige .btn:active { background-color: #afffff; }

#console {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5rem 0.7rem;
    background-color: #121212;
    color: white;
    width: 60%;
    height: max-content;
    max-height: 99vh;
    display: none;
    overflow-y: scroll;
    border-top: 2px solid purple;
    border-right: 2px solid purple;
} 
#console h3 {
    width: 100%;
    font-weight: normal;
}

#stats h3 {
    color: #efffc3;
}

#debug { padding: 0.5rem; }
#debug h3 {
    color: #d3d3d3;
    padding: 0.5rem 0.7rem 0 0.7rem;
}
#settings {
    padding: 1rem;
}
#settings .btn {
    background-color: #aaa;
    padding: 0.5rem 0.7rem;
    font-weight: bold;
    font-size: 1.2rem;
}
#settings .btn:hover {
    background-color: #999;
}

#settings .btn-title:nth-of-type(1) { padding-top: 0; }
#settings .btn-title {
    text-align: center;
    padding: 0.8rem;
    color: white;
    font-size: 1.3rem;
}
#settings .split-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 0;
}
#settings .split-5:hover { background-color: #aaa; }
#settings .split-5 h3 {
    font-size: 1rem;
    text-align: center;
    padding: 0.5rem 0.7rem;
    min-width: max-content;
}
#settings .split-5 h3:nth-of-type(1) { background-color: #ccc; }
#settings .split-5 h3:hover {
    background-color: #999;
}

#achievements {
    padding: 1rem;
}
.achieve {
    padding: 1rem 1.2rem;
    display: grid;
    grid-template-columns: 1fr max-content;
    background-color: #ccc;
    color: black;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}
.achieve .txt {
}
.achieve .perc {

}
.achieve .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 0%;
    background-color: #00b900;
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 10%, 100% 10%, 100% 90%, 0 90%, 0 100%, 100% 100%, 100% 0%);
}

.modal-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000aa;

    display: grid;
    justify-items: center;
    align-items: center;

    display: none;
}
.modal-wrapper .modal {
    background-color: ivory;
}
#offline-modal {
    width: 30rem;
    text-align: center;
    padding: 4rem 1rem;
    color: white;
    background-color: #333;
}
#offline-modal h2 {
    font-size: 2rem;
    padding-bottom: 0.5rem;
}
#offline-modal h3 {
    font-size: 1.5rem;
}