:root {
    color-scheme: dark;
    --game-width: 100vw;
    --max-console-width: 900px;
    --max-game-width: 900px;
    --fontsize: 24px;
    --color-input:  #fff;
    --color-inputpost: #888;
    --more-prompt: "Más... ";
    --color-0: #000;
    --color-1: #00f;
    --color-2: #f00;
    --color-3: #f0f;
    --color-4: #8f8;
    --color-5: #8ff;
    --color-6: #ff8;
    --color-7: #ccc;
}

* {
    box-sizing: border-box;
}

html {
    font-family: Noto Sans;
    font-weight: 400;
}

#fader {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--game-width);
    height: 100vh;

    background-color: #000;
    transition: opacity 1s linear;
    pointer-events: none;
}

.charset5 { font-family: Kalam }

body {
    padding: 0;
    border: 0;
    margin: 0;

    display: flex;
    flex-direction: row-reverse;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    align-items: center;
    justify-content: space-around;
}

.container {
    padding: 20px 5px;
    border-radius: 20px;
}

.game-container {
    position: relative;
    width: calc(var(--game-width) - 40px);
    max-width: var(--max-game-width);
    height: 100vh;
    display: flex;
    flex-direction: row;
    gap: 10px;
    user-select: none;
    align-items: center;
    justify-content: stretch;
}

.game-container .container {
    position: fixed;
    width: 100%;
    max-width: calc( min( var(--game-width) - 40px, var(--max-game-width) ) );
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    user-select: none;
}

.container .console-container {
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
    align-self: start;
}

.container .console {
    width: 100%;
    max-width: var(--max-console-width);
    overflow-y: auto;
    user-select: text;
    cursor: text;
    min-height: 0;
}

.container .console-protected {
    max-width: var(--max-console-width);
    width: 100%;
    user-select: text;
    cursor: text;
}

.container .console-protected:not(:empty) {
    margin-bottom: 4px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: dashed 1px #444;
}

.container .console::-webkit-scrollbar {
    width: 0px;
}

.container .console span {
    white-space: pre-wrap;
}

#input-area {
    visibility: hidden;
}

.container .input {
    min-height: 30px;
    max-height: 30px;
    max-width: var(--max-console-width);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}

.container .input input {
    border: 0;
    background: transparent;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0;
    margin: 0;
    outline: none;
}

.input::first-letter {
    text-transform: uppercase;
}

.picture-container {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.location-image {
    flex-shrink: 0;
    max-height: 50vh;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.input-copy {
    margin-top: 7px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    max-height: 30px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.input-copy:first-letter {
    text-transform: uppercase;
}
.input-copy .text {
    flex-grow: 1;
}

.anykey-container {
    display: none;
    max-width: var(--max-console-width);
    width: 100%;
    position: relative;
}
.anykey {
    visibility: hidden;
    right: 0;
    position: absolute;

    animation: blink 1s infinite;
}

@keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Popup ---------- */

.popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    display: hidden;
}

.popup-inner {
    min-width: 400px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    background-color: #000;
    border: 1px solid #444;
    border-radius: 10px;
    box-shadow: 0 0 10px #000;

}

.popup-title {
    font-size: 24px;
    font-weight: 600;
    background: #444;
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 10px 20px;
    color: #fff;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

.popup-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    padding-top: 20px;
}

.popup-buttons button {
    padding: 10px 20px;
    width: 150px;
    font-size: 18px;
    font-weight: 600;
    background-color: #444;
    color: #fff;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
}

.popup-buttons button:hover {
    background-color: #222;
}

.popup-buttons button:active {
    background-color: #000;
}

.popup-buttons button.disabled {
    opacity: 0.5;
    color: #888;
    border-color: #666;
    cursor: not-allowed;
}

.save-slot {
    position: relative;
    display: block;
    height: 80px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    font-size: 16px;
    cursor: pointer;
    /* border-top: 1px dashed #222; */
}

.save-slot.selected {
    background-color: #131 !important;
    color: #fff;
}

.save-slot:hover {
    background-color: #222;
    color: #fff;
}

.save-slot:first-child {
    border-top: 0;
}

.save-slot-title {
    width: auto;
    position: absolute;
    left: 180px;
    top: 15px;
    font-weight: 600;
    font-size: 18px;
}

.save-slot-description {
    width: auto;
    position: absolute;
    left: 180px;
    top: 45px;
    font-size: 14px;

    /* Ellipsis trunc */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 200px);
}

.save-slot-image {
    position: absolute;
    left: 30px;
    top: 10px;
    width: 120px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #444;
}

/* ---------- Text FX ---------- */

mark {
    background-color: unset;
}

.bright { filter: brightness(1.5); font-weight: bold; }
.flash { animation: flash steps(1) 1s infinite; }
@keyframes flash {
    0%  { filter: invert() }
    50% { filter: none }
}

.console, .input {
    text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 6px #000, 0 0 8px #000;
}

/* ---------- Default game theme ---------- */

.game-container {
    font-family: var(--font0);
    font-size: var(--fontsize);
}
.game-container .input {
    color: var(--color-input);
}
.game-container .input input {
    font-family: var(--font1);
    font-size: var(--fontsize);
    color: var(--color-input);
}
.game-container .input-copy * {
    font-family: var(--font1);
    color: var(--color-inputpost) !important;
}
.game-container .anykey {
    font-family: var(--font1);
    color: var(--color-input);
}
.game-container .more::before {
    content: var(--more-prompt);
    font-family: var(--font0);
    font-size: var(--fontsize);
    color: var(--color-input);
}

.paper0 { background-color: transparent }
.paper1 { background-color: #00f; }
.paper2 { background-color: #f00; }
.paper3 { background-color: #f0f; }
.paper4 { background-color: #8f8; }
.paper5 { background-color: #8ff; }
.paper6 { background-color: #ff8; }
.paper7 { background-color: #fff; }
.ink0 { color: #444; }
.ink1 { color: #00f; }
.ink2 { color: #f00; }
.ink3 { color: #f0f; }
.ink4 { color: #8f8; }
.ink5 { color: #8ff; }
.ink6 { color: #ff8; }
.ink7 { color: #ccc; }