@font-face { 
    font-family: "TexGyre"; 
    src: url("/resources/fonts/tg-adventor.otf") format("opentype"); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "Eurostile"; 
    src: url("/resources/fonts/eurostile.ttf") format("truetype"); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "ITCAvantGarde"; 
    src: url("/resources/fonts/itcbold.otf") format("opentype"); 
    font-weight: normal; 
    font-style: normal; 
} 

* { 
    box-sizing: border-box; 
} 

body { 
    background: black; 
    color: #D6C000; 
    font-family: "TexGyre", sans-serif; 
    padding: 0; 
    margin: 0; 
    line-height: 1.4; 
    letter-spacing: 0.5px; 
    height: 100dvh; 
    width: 100%; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.audio-notice { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100dvh; 
    background: #000000; 
    z-index: 9999; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
} 

.notice-content { 
    max-width: 500px; 
    width: 100%; 
    background: #050d03; 
    border: 2px solid #137500; 
    padding: 10px; 
    margin: auto; 
} 

.notice-inner { 
    border: 1px dashed #137500; 
    padding: 30px 20px; 
    background: #000000; 
} 

.notice-title { 
    font-family: "Eurostile", "ITCAvantGarde", sans-serif; 
    color: #D6C000; 
    font-size: 1.5rem; 
    margin-top: 0; 
    margin-bottom: 20px; 
    letter-spacing: 3px; 
    text-align: center; 
} 

.notice-msg { 
    font-family: monospace; 
    color: #ffffff; 
    font-size: 0.9rem; 
    line-height: 1.6; 
    margin-bottom: 30px; 
    text-align: center; 
} 

.notice-btn { 
    font-family: "ITCAvantGarde", sans-serif; 
    font-size: 1.1rem; 
    color: #000000; 
    background: #D6C000; 
    border: none; 
    outline: none; 
    padding: 10px 40px; 
    cursor: pointer; 
    letter-spacing: 1px; 
    display: block; 
    margin: 0 auto; 
} 

.notice-btn:hover { 
    background: #ffffff; 
    color: #000000; 
    box-shadow: 2px 2px 0 rgba(214, 192, 0, 0.8); 
} 

#audio-modal.hidden, 
div.audio-notice.hidden,
.nav-btn.hidden { 
    display: none; 
} 

.interactive-container { 
    max-width: 1000px; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.image-frame { 
    background: #030D02; 
    border: 1px solid #D6C000; 
    padding: 20px; 
    margin-bottom: 10px; 
    text-align: center; 
    position: relative; 
    min-height: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.image-frame .image-wrapper { 
    position: relative; 
    display: block; 
    overflow: hidden; 
    width: 100%; 
    max-width: 1530px; 
    aspect-ratio: 1530 / 1152; 
    margin: 0 auto; 
} 

.image-frame .image-wrapper img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: block; 
    z-index: 1; 
    object-fit: contain; 
    -webkit-user-drag: none; 
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    pointer-events: none; 
} 

.image-frame .image-wrapper::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    pointer-events: none; 
    background-image: url("/resources/img/assets/static.gif"); 
    background-repeat: repeat; 
    background-position: center; 
    image-rendering: pixelated; 
    image-rendering: crisp-edges; 
    opacity: 0; 
    visibility: hidden; 
} 

.caption-area { 
    text-align: center; 
    margin: 5px auto 10px auto; 
    font-family: "TexGyre", monospace; 
    color: #c4b888; 
    font-size: 0.9rem; 
    line-height: 1.4; 
    height: 55px; 
    flex-shrink: 0; 
    max-width: 760px; 
} 

.nav-buttons { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 48px; 
    margin: 5px auto 20px auto; 
    flex-shrink: 0; 
    width: 100%; 
    max-width: 760px; 
} 

.nav-btn, .center-btn { 
    background: transparent; 
    border: none; 
    color: #D6C000; 
    padding: 12px 24px; 
    font-family: monospace; 
    font-size: 1rem; 
    cursor: pointer; 
    letter-spacing: 0; 
    text-decoration: underline; 
    text-decoration-style: dotted; 
    flex-shrink: 0; 
} 

#prev-btn { text-align: right; } 
#center-btn { text-align: center; } 
#next-btn { text-align: left; } 

.nav-buttons.two-button-layout { 
    justify-content: space-between; 
    max-width: 520px; 
} 

.nav-buttons.two-button-layout #prev-btn { text-align: left; } 
.nav-buttons.two-button-layout #next-btn { text-align: right; } 

#prev-btn.hidden ~ #center-btn.hidden ~ #next-btn { 
    margin: 0 auto; 
    text-align: center; 
} 

.nav-btn:hover, .center-btn:hover { 
    color: #CCCCCC; 
} 

.nav-btn:disabled { 
    opacity: 0.3; 
    cursor: not-allowed; 
    text-decoration: none; 
} 

.nav-btn:disabled:hover { 
    opacity: 0.3; 
    background: transparent; 
    color: #D6C000; 
} 

/* BUTTONNNNN */

.bottom-nav-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.08s, visibility 0.08s;
}

.bottom-nav-trigger {
    background: #000000;
    border: 2px solid #137500;
    color: #137500;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font: bold 1.2rem monospace;
    outline: none;
    z-index: 10;
    text-shadow: 0 0 3px rgba(19, 117, 0, 0.4);
    box-sizing: border-box;
    transition: background 0.08s, border-color 0.08s, color 0.08s, text-shadow 0.08s;
}

.bottom-nav-trigger:hover {
    background: #000000;
    color: #178a00;
    border-color: #178a00;
    text-shadow: 0 0 6px rgba(19, 117, 0, 0.7);
}

.bottom-nav-capsule {
    background: #000000;
    border: 2px solid #137500;
    width: 44px;
    height: auto;
    max-height: 0;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    margin-bottom: 0;
    z-index: 5;
    box-sizing: border-box;
    padding: 0;
    transition: max-height 0.08s, opacity 0.08s, margin-bottom 0.08s, visibility 0.08s, padding 0.08s;
}

.menu-item-unicode {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.menu-item-unicode img {
    width: 20px;
    height: 20px;
}

.bottom-nav-container.expanded .bottom-nav-trigger {
    border-color: #137500;
    color: #137500;
    text-shadow: 0 0 3px rgba(19, 117, 0, 0.4);
}

.bottom-nav-container.expanded .bottom-nav-capsule {
    max-height: 300px;
    padding: 16px 0;
    opacity: 1;
    visibility: visible;
    margin-bottom: 16px;
}

.bottom-nav-container.vanished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#stillthere {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    z-index: 999;
    cursor: pointer;
    display: none;
    background: transparent;
}

#stillthere.active {
    display: block;
    pointer-events: auto;
}

@media (min-width: 681px) and (max-width: 1024px), (min-width: 681px) and (max-height: 850px) { 
    html, body, .interactive-container, .image-frame, .caption-area, .nav-buttons { 
        height: auto; 
    } 

    html, body, .interactive-container { 
        min-height: 100dvh; 
    } 

    body { 
        overflow-y: auto; 
    } 

    .interactive-container { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: flex-start; 
        padding: 25px 15px; 
    } 

    .image-frame { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        width: 100%; 
        max-width: 720px; 
        margin: 20px auto 15px auto; 
        flex-shrink: 0; 
    } 

    .image-frame .image-wrapper { 
        width: 100%; 
        aspect-ratio: 1530 / 1152; 
    } 

    .image-frame .image-wrapper img { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        object-fit: contain; 
    } 

    .caption-area { 
        width: 100%; 
        max-width: 720px; 
        margin: 0 auto 10px auto; 
        overflow-y: visible; 
        flex-shrink: 0; 
    } 

    .nav-buttons { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        flex-wrap: wrap; 
        gap: 16px; 
        margin: 5px auto 25px auto; 
        width: 100%; 
        max-width: 760px; 
        flex-shrink: 0; 
    } 

    .nav-buttons .nav-btn { 
        padding: 12px 24px; 
        font-size: 1rem; 
        flex: 0 1 auto; 
        text-align: center; 
    } 

    #prev-btn, #center-btn, #next-btn { text-align: center; } 
    #prev-btn { order: 1; } 
    #center-btn { order: 2; } 
    #next-btn { order: 3; } 

    .nav-buttons.two-button-layout { 
        flex-direction: row; 
        justify-content: center; 
        gap: 48px; 
    } 

    .nav-buttons.two-button-layout .nav-btn { 
        width: auto; 
        flex: 0 1 auto; 
    } 

    .nav-buttons.two-button-layout #prev-btn { text-align: left; order: unset; } 
    .nav-buttons.two-button-layout #next-btn { text-align: right; order: unset; } 
} 

@media (max-width: 680px) { 
    html, body, .interactive-container, .caption-area, .image-frame .image-wrapper { 
        height: auto; 
    } 

    html, body, .interactive-container { 
        min-height: 100dvh; 
    } 

    body { 
        overflow-y: auto; 
    } 

    .interactive-container { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: flex-start; 
        padding: 15px; 
    } 

    .image-frame { 
        position: relative; 
        padding: 10px; 
        width: 90vw; 
        max-width: 360px; 
        margin: 20px auto 10px auto; 
        flex-shrink: 0; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    } 

    .image-frame .image-wrapper { 
        width: 100%; 
        aspect-ratio: 1530 / 1152; 
    } 

    .image-frame .image-wrapper img { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        object-fit: contain; 
    } 

    .caption-area { 
        width: 90%; 
        max-width: 380px; 
        text-align: center; 
        margin: 5px auto 15px auto; 
        flex-shrink: 0; 
    } 

    .nav-buttons { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 15px; 
        width: 100%; 
        max-width: 380px; 
        margin: 5px auto 25px auto; 
    } 

    .nav-buttons .nav-btn { 
        flex: 0 0 auto; 
        width: 100%; 
        padding: 8px 12px; 
        font-size: 0.8rem; 
        text-align: center; 
    } 

    .nav-buttons #prev-btn { order: 1; text-align: center; } 
    .nav-buttons #center-btn { order: 2; text-align: center; } 
    .nav-buttons #next-btn { order: 3; text-align: center; } 

    .nav-buttons.two-button-layout { 
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: center; 
    } 

    .nav-buttons.two-button-layout .nav-btn { 
        flex: 1 1 40%; 
        max-width: 100%; 
        white-space: nowrap; 
    } 
     
    .nav-buttons.two-button-layout #prev-btn, 
    .nav-buttons.two-button-layout #next-btn, 
    .nav-buttons.two-button-layout #prev-btn:only-child, 
    .nav-buttons.two-button-layout #next-btn:only-child { 
        text-align: center; 
    } 
}