* {
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    background-color: #000;
    color: white;
    font-family: BIZUDMincho;
    font-size: 18px;
}

img {
    image-rendering: crisp-edges;
}

button {
    transition: background 0.15s, transform 0.15s;
}

button:hover {
    background-color: #111115;
    cursor: pointer;
}

button:active {
    transform: scale(98%);
}

#app {
    display: flex;
    height: 100vh;
}

#complete-screen {
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 64px;
}

#complete-screen.hidden {
    display: none;
}

.complete-button {
    font-family: BIZUDMincho;
    width: 100px;
    background-color: #000;
    border: 2px solid white;
    color: white;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    transition: background 0.15s;
}

#left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#right {
    width: 200px;
    height: 100%;
    background-color: #000;
}

.main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.character-panel {
    width: 760px;
    /* height: 500px; */
    background-color: #000;
    background-image: url(img/noise.png);
    border: 2px solid #222228;
    padding: 12px;
    display: flex;
}

.character-panel-left {
    width: 350px;
    height: 488px;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    border: 2px solid #222228;
    padding: 8px;
}

.character-image {
    width: 100%;
    margin-bottom: 12px;
    border: 2px solid #222228;
}

.character-name {
    font-family: ArchivoEB;
    font-size: 30px;
    width: 100%;
    text-align: center;
    background: linear-gradient(to right, #000000 0%, #0e0e11 30%, #0e0e11 70%, #000000 100%);
    margin-bottom: 18px;
    padding: 4px 0;
}

.character-income-text {
    margin-bottom: auto;
    font-size: 13px;
    text-align: center;
}

.character-income {
    font-weight: bold;
    font-size: 19px;
}

.faun-value {
    font-weight: bold;
}

.character-quote {
    color: #aaa;
    font-style: italic;
    width: 304px;
    text-align: justify;
    font-size: 16px;
    border-style: solid;
    border-width: 2px 0;
    padding: 18px 8px;
    border-color: #222228
}

.character-quote.options {
    text-align: center;
}

.character-action {
    margin-top: auto;
    font-family: BIZUDMincho;
    width: 100%;
    background-color: #000;
    border: 2px solid white;
    color: white;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    transition: background 0.15s;
}

.character-action:hover {
    background-color: #111115;
}

.character-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    flex-grow: none;
    height: 100%;
}

.character-button {
    font-family: BIZUDMincho;
    width: 200px;
    background-color: #000;
    border: 2px solid white;
    color: white;
    height: 95px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
    transition: background 0.15s, filter 0.15s;
}

.options.character-button {
    font-size: 22px;
    align-items: center;
    justify-content: center;
}

#hard-reset-button {
    color: red;
    border-color: red;
}

.myrs.character-button {
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 40px;
}



.button-level {
    font-weight: bold;
}

.button-level-text {
    margin-bottom: auto;
}

.button-effect {
    font-weight: bold;
}

.button-cost-text {
    margin-top: auto;
}

.button-cost {
    font-weight: bold;
}

.myrs.character-button .button-desc {
    margin-right: 12px;
}


.myrs.character-button .button-cost-text {
    margin-top: 0;
    margin-left: auto;
    width: 110px;
    text-align: right;
}

.myrs.character-button .button-level-text {
    margin-bottom: 0;
    width: 150px;
    text-align: right;
}

.myrs.character-button .button-effect-text {
    width: 90px;
    text-align: right;
}

.faun.character-button {
    position: relative;
    text-shadow: 0 0 5px black;
    pointer-events: none;
}

.faun.character-button .button-desc {
    margin-top: auto;
    font-size: 16px;
    font-weight: bold;
    color: #5dff5d;
}

.faun.character-button .button-level {
    font-size: 13px;
}

.button-passed, .button-length {
    font-weight: bold;
    font-size: 12px;
}

.faun.character-button .button-desc, .faun.character-button .button-level-text, .faun.character-button .button-effect-text {
    z-index: 2;
}

.faun.character-button .button-progress {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    bottom: 0;
    background-color: #0f2b0f;
    transition: background-color 0.15s;
}

.faun.character-button.ready {
    color: black;
    pointer-events: all;
}

.faun.character-button.ready .button-desc {
    color: black;
}

.faun.character-button.ready:hover {
    border-color: black;
    filter: invert();
}

.faun.character-button.ready .button-progress {
    background-color: white;
}

.atraia.character-button .button-desc {
    margin-top: auto;
    font-size: 13px;
}

.atraiax.character-button .button-desc {
    margin-top: auto;
    font-size: 13px;
}

.character-button.cant-afford {
    pointer-events: none;
    filter: brightness(50%);
}

.atraia.character-button.bought {
    background-color: white;
    color: black;
    text-shadow: 0 0 2px #000;
    pointer-events: none;
}

.atraia.character-button.cant-afford.bought {
    pointer-events: none;
    filter: brightness(100%);
}


#currency-container {
    width: 670px;
    height: 160px;
    background-color: #000;
    background-image: url(img/noise.png);
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 2px solid #222228;
    border-bottom: none;
    justify-content: center;
    flex-wrap: wrap;
}

.currency {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 50px;
    border: 2px solid white;
    border-bottom: 6px solid white;
    background-color: #000;
}

.currency.power {
    border-color: #5d90ff;
}

.currency.power .currency-label {
    color: #5d90ff;
}

.currency.stars {
    border-color: #995dff;
}

.currency.stars .currency-label {
    color: #995dff;
}

.currency.lasers {
    border-color: #ff5d5d;
}

.currency.lasers .currency-label {
    color: #ff5d5d;
}

.currency.orange {
    border-color: #ff8e5d;
}

.currency.orange .currency-label {
    color: #ff8e5d;
}

.currency.phyta {
    border-color: #5dff5d;
}

.currency.phyta .currency-label {
    color: #5dff5d;
}

.currency.infinite-sets {
    border-color: #fff4a8;
    width: 100%;
}

.currency.infinite-sets .currency-label {
    color: #fff4a8;
}

.currency-value {
    font-size: 18px;
    font-weight: bold;
}

.currency-label {
    font-size: 14px;
}

#nav-bar {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 4px;
    height: 100%;
    background-color: #000;
    background-image: url(img/noise.png);
    border-left: 2px solid #222228;
}

.nav-bar-item {
    border: 2px solid #222228;
    background-color: #000;
    padding: 6px;
    padding-right: 18px;
    width: 270px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 32px;
    font-family: ArchivoEB;
    filter: brightness(100%) saturate(70%);
    transition: filter 0.15s, transform 0.15s;
    margin-right: 2px;
    color: white;
    
}

.nav-image {
    position: absolute;
    margin-right: -18px;
    width: 100%;
    height: 100%;
    align-self: center;
    justify-content: center;
}

.nav-label {
    z-index: 5;
    text-shadow: 0 0 15px black;
}



.nav-bar-item:hover {
    transform: translateX(-12px);
    filter: brightness(120%) saturate(100%);
    background-color: #000;
}

span.fait {
    color: #995dff;
    font-weight: bold;
}

span.tohno {
    color: #ff5d5d;
    font-weight: bold;
}

span.myrs {
    color: #5d90ff;
    font-weight: bold;
}

span.orange {
    color: #ff8e5d;
    font-weight: bold;
}

span.faun {
    color: #5dff5d;
    font-weight: bold;
}

span.atraia {
    color: #fff4a8;
    font-weight: bold;
}

.nav-bar-item.fait {
    border-color: #995dff;
}

.nav-bar-item.tohno {
    border-color: #ff5d5d;
}

.nav-bar-item.myrs {
    border-color: #5d90ff;
}

.nav-bar-item.orange {
    border-color: #ff8e5d;
}

.nav-bar-item.faun {
    border-color: #5dff5d;
}

.nav-bar-item.atraia {
    border-color: #fff4a8;
    z-index: 3;
}

.nav-bar-item.atraia:hover {
    filter: invert();
}

#secret {
    margin-bottom: auto;
}

#options-nav {
    margin-top: auto;
}

.hidden {
    display: none;
}


@font-face {
    font-family: BIZUDMincho;
    src: url('fonts/BIZUDMincho-Regular.ttf');
}

@font-face {
    font-family: BIZUDPMincho;
    src: url('fonts/BIZUDPMincho-Regular.ttf');
}

@font-face {
    font-family: ArchivoEB;
    src: url('fonts/Archivo_Expanded-Black.ttf');
}