@charset "utf-8";

/* Base Reset & Layout */
body { margin: 0; padding: 0; overflow: hidden; background-color: #000003; font-family: 'Inter', sans-serif; touch-action: none; }
canvas { display: block; transition: opacity 2.5s ease-in; opacity: 0; }

/* Typography */
.lv1 { color: #9B87F5; font-size: 1.6rem; font-weight: 300; letter-spacing: 4px; margin-bottom: 15px; }
.lv2 { color: #FFFFFF; font-size: 1.1rem; font-weight: 400; margin-bottom: 12px; line-height: 1.4; display: block; }
.lv3 { color: #AAAAAA; font-size: 0.9rem; font-weight: 300; line-height: 1.8; margin: 0 0 20px 28px; list-style: none; padding-left: 0; }
.lv3 li { margin-bottom: 8px; position: relative; }
.lv3 li::before { content: '•'; color: #9B87F5; position: absolute; left: -15px; }
.version-tag { background: rgba(155, 135, 245, 0.2); padding: 3px 10px; border-radius: 6px; font-size: 0.7rem; margin-right: 12px; border: 1px solid rgba(155, 135, 245, 0.3); font-family: monospace; }

/* Loading Screen */
#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000005; display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 100;
    transition: opacity 0.5s ease-out, background 0.5s ease;
    pointer-events: none !important; opacity: 1;
}
#loading-screen.active { opacity: 1; pointer-events: auto; }
#loading-screen.hidden { opacity: 0; pointer-events: none; }

.loader-bar-container { width: 200px; height: 2px; background: rgba(155, 135, 245, 0.1); margin-top: 20px; border-radius: 2px; overflow: hidden; z-index: 101; }
#loader-bar { width: 0%; height: 100%; background: #9B87F5; box-shadow: 0 0 15px #9B87F5; transition: width 0.3s; }
#loader-text { color: #9B87F5; font-size: 0.8rem; letter-spacing: 3px; font-weight: 200; margin-top: 15px; z-index: 101; }

/* Glassmorphism UI */
.glass-btn, .glass-panel {
    color: #fff; cursor: pointer; pointer-events: auto;
    background: rgba(155, 135, 245, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(155, 135, 245, 0.3); text-shadow: 0 0 15px rgba(155, 135, 245, 0.8); z-index: 10;
}
.glass-btn:hover { background: rgba(155, 135, 245, 0.25); border-color: rgba(155, 135, 245, 0.8); box-shadow: 0 0 45px rgba(155, 135, 245, 0.5); }

/* Main Buttons */
.overlay { position: absolute; bottom: 12%; width: 100%; text-align: center; pointer-events: none; }
#dive-trigger { display: inline-block; font-size: clamp(0.9rem, 4vw, 1.3rem); letter-spacing: 5px; font-weight: 200; padding: 15px 40px; border-radius: 50px; animation: float 4s ease-in-out infinite; transition: all 0.4s; }
#info-trigger { position: absolute; top: 5%; right: 5%; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-style: italic; font-family: serif; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
body.diving .overlay, body.diving #info-trigger, body.diving #loading-screen { opacity: 0; pointer-events: none; }

/* Language Dropdown */
#lang-wrapper { position: absolute; top: 5%; left: 5%; z-index: 20; width: 50px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
#lang-trigger { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 1px; transition: all 0.3s; }
#lang-dropdown {
    position: absolute; top: 55px; left: 0; width: 140px;
    background: rgba(15, 15, 25, 0.9); border-radius: 12px; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transform-origin: top left;
    list-style: none; padding: 0; margin: 0;
}
#lang-wrapper.active #lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
#lang-wrapper.active #lang-trigger { background: rgba(155, 135, 245, 0.4); box-shadow: 0 0 20px rgba(155, 135, 245, 0.6); }

.lang-option { padding: 12px 20px; font-size: 0.9rem; font-weight: 300; letter-spacing: 1px; color: #aaa; cursor: pointer; transition: all 0.2s; border-bottom: 1px solid rgba(155, 135, 245, 0.1); }
.lang-option:last-child { border-bottom: none; }
.lang-option:hover { background: rgba(155, 135, 245, 0.2); color: #fff; padding-left: 25px; }
.lang-option.selected { color: #9B87F5; font-weight: 600; background: rgba(155, 135, 245, 0.05); }
.lang-option.selected::after { content: '●'; float: right; font-size: 0.6rem; margin-top: 4px; }
.lang-option.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; background: rgba(0,0,0,0.2); }
.lang-option.disabled::after { content: '🔒'; float: right; font-size: 0.7rem; filter: grayscale(1); }

/* Modal System */
#modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; z-index: 20; transition: all 0.5s ease;
}
#modal-overlay.active { opacity: 1; visibility: visible; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

.modal-content {
    position: relative; width: 85%; max-width: 600px; max-height: 70vh;
    background: rgba(15, 15, 25, 0.9); border: 1px solid rgba(155, 135, 245, 0.4);
    border-radius: 24px; padding: 40px 30px; color: #fff; overflow-y: auto; text-align: left;
    transform: scale(0.9); transition: all 0.5s cubic-bezier(0.15, 0.85, 0.35, 1);
}
#modal-overlay.active .modal-content { transform: scale(1); }
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-track { background: rgba(20, 20, 30, 0.5); }
.modal-content::-webkit-scrollbar-thumb { background: #9B87F5; border-radius: 10px; box-shadow: 0 0 10px rgba(155, 135, 245, 0.5); }

#modal-close { position: sticky; float: right; top: -20px; right: -10px; width: 32px; height: 32px; border-radius: 50%; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; z-index: 21; }

.collapsible { cursor: pointer; display: flex; align-items: center; padding: 12px 0; user-select: none; }
.collapsible::before { content: '▶'; font-size: 0.6rem; margin-right: 12px; transition: transform 0.4s; color: #9B87F5; }
.collapsible.open::before { transform: rotate(90deg); }
.collapse-content { height: 0; overflow: hidden; opacity: 0; }

/* Modal Loader */
#modal-loader {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(15, 15, 25, 0.95); z-index: 50; transition: opacity 0.4s ease;
}
.spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(155, 135, 245, 0.2); border-radius: 50%; border-top-color: #9B87F5;
    animation: spin 1s ease-in-out infinite; margin-bottom: 15px;
}
@keyframes spin { to { transform: rotate(360deg); } }
#modal-content-body { opacity: 0; transition: opacity 0.5s ease; }
#modal-content-body.loaded { opacity: 1; }

/* Responsive */
@media screen and (max-width: 768px) {
    .modal-content { width: 94%; max-width: none; padding: 30px 20px; }
    .lv1 { font-size: 1.4rem; }
}