* { box-sizing: border-box; }

body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Courier New', Courier, monospace; background-color: #000; }

#intro-screen { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; transform-origin: center center; }
#intro-screen::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.02) 100%); pointer-events: none; z-index: 9000; }

#wave-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 65, 0.05) 3px, rgba(0, 255, 65, 0.05) 4px); pointer-events: none; z-index: 2; animation: waveMove 10s linear infinite; transition: opacity 1.5s ease; }
@keyframes waveMove { 0% { background-position: 0 0; } 100% { background-position: 0 100vh; } }
#intro-text { color: #00FF41; font-size: 22px; text-shadow: 0 0 8px #00FF41; z-index: 10; text-align: center; min-height: 30px; letter-spacing: 1px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.dot-blink { animation: blink 0.8s infinite; }
#intro-loading { width: 350px; height: 15px; border: 1px solid #00FF41; margin-top: 30px; box-shadow: 0 0 10px rgba(0, 255, 65, 0.5); z-index: 10; padding: 2px; }
#loading-bar-inner { width: 0%; height: 100%; background-color: #00FF41; box-shadow: 0 0 15px #00FF41; }

#tunnel-effect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0) rotate(0deg); width: 200vw; height: 200vw; border-radius: 50%; z-index: 1; pointer-events: none; background: repeating-conic-gradient(from 0deg, #000 0deg 20deg, #001a33 20deg 40deg, #003322 40deg 60deg, #000 60deg 80deg); opacity: 0; mask-image: radial-gradient(circle, transparent 5%, black 60%); -webkit-mask-image: radial-gradient(circle, transparent 5%, black 60%); }
.tunnel-active { animation: vortexZoom 4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes vortexZoom { 0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; } 20% { opacity: 0.7; } 70% { opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(2.5) rotate(1080deg); opacity: 0; } }

#eclipse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 380px; height: 380px; border-radius: 50%; background-color: #000; box-shadow: 0 0 50px rgba(0, 255, 65, 0.3), 0 0 100px rgba(0, 255, 65, 0.1), inset -12px 12px 20px rgba(255, 255, 255, 0.7); z-index: 15; opacity: 0; transition: opacity 2s ease-in-out, transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.eclipse-visible { opacity: 1 !important; }
.shift-up-eclipse { transform: translate(-50%, calc(-50% - 15vh)) !important; }

#ukronik-logo { font-size: 80px; color: #fff; font-weight: bold; text-shadow: 0 0 20px rgba(0,255,65,0.8), 0 0 50px rgba(0,255,65,0.5); z-index: 20; letter-spacing: 20px; text-transform: uppercase; opacity: 0; transform: scale(0.5); transition: opacity 2s ease-out, transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.logo-visible { opacity: 1 !important; transform: scale(1) !important; }
.shift-up-logo { transform: scale(1) translateY(-15vh) !important; }

#main-menu-options { position: absolute; top: 65%; display: flex; flex-direction: column; gap: 25px; opacity: 0; transition: opacity 1.5s ease-in; z-index: 30; }
.menu-visible { opacity: 1 !important; }

.menu-btn { background: transparent; border: 1px solid rgba(0, 255, 65, 0.5); color: #00FF41; font-family: 'Courier New', Courier, monospace; font-size: 20px; padding: 15px 50px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 0 10px rgba(0, 255, 65, 0.1), inset 0 0 5px rgba(0, 255, 65, 0.1); outline: none; }
.menu-btn:hover { background: rgba(0, 255, 65, 0.15); border: 1px solid #00FF41; box-shadow: 0 0 20px rgba(0, 255, 65, 0.8), inset 0 0 20px rgba(0, 255, 65, 0.4); text-shadow: 0 0 8px #00FF41; transform: scale(1.02); }


/* ============================================== */
/* LE NEXUS (PAGE DES RÉALITÉS)                   */
/* ============================================== */
#nexus-screen { 
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; 
    background-color: #000; z-index: 8000; 
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; 
    padding-top: 50px; overflow-y: auto; overflow-x: hidden;
}

/* Le tunnel infini en arrière-plan du Nexus */
#nexus-tunnel-bg {
    position: absolute; top: 50%; left: 50%; width: 250vw; height: 250vw;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg, #000 0%, #001a33 5%, #003322 10%, #000 15%);
    animation: spinInfiniteTunnel 40s linear infinite;
    mask-image: radial-gradient(circle, transparent 15%, black 60%);
    -webkit-mask-image: radial-gradient(circle, transparent 15%, black 60%);
    z-index: 1; /* Derrière tout le contenu */
    opacity: 0.7;
    pointer-events: none;
}
@keyframes spinInfiniteTunnel { 
    100% { transform: translate(-50%, -50%) rotate(360deg); } 
}

/* Les Textes du Nexus */
.nexus-header { text-align: center; margin-bottom: 50px; z-index: 10; }
.nexus-title { 
    color: #00FF41; font-family: 'Courier New', monospace; letter-spacing: 15px; 
    font-size: 45px; text-shadow: 0 0 15px rgba(0,255,65,0.6); margin: 0 0 10px 0; 
}
.nexus-subtitle {
    color: #888; font-family: 'Courier New', monospace; font-size: 14px; 
    letter-spacing: 2px; text-transform: uppercase; margin: 0;
}

/* La Grille */
.nexus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; width: 90%; z-index: 10; }
.reality-card { border: 1px solid #333; border-radius: 8px; overflow: hidden; background: #111; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.8); }
.reality-card:hover { border-color: rgba(0, 255, 65, 0.4); box-shadow: 0 0 20px rgba(0, 255, 65, 0.1); transform: translateY(-5px); }
.reality-image { width: 100%; height: 220px; background-color: #050505; background-size: cover; background-position: center; position: relative; transition: transform 0.4s ease; }
.reality-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; opacity: 0; transition: opacity 0.4s ease; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.reality-card.active .reality-image { transform: scale(1.05); }
.reality-card.active .reality-overlay { opacity: 1; pointer-events: auto; }
.reality-title { text-align: center; color: #fff; padding: 20px 0; font-family: 'Courier New', monospace; letter-spacing: 2px; text-transform: uppercase; border-top: 1px solid #333; }
.reality-card.active .reality-title { color: #00FF41; border-color: rgba(0, 255, 65, 0.4); }

/* Cartes verrouillées (Inconnues) */
.locked-card { border-color: #222; box-shadow: none; cursor: not-allowed; }
.locked-card:hover { border-color: #222; box-shadow: none; transform: none; }
.locked-card .reality-image { 
    background-image: repeating-linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%, #111), repeating-linear-gradient(45deg, #111 25%, #1a1a1a 25%, #1a1a1a 75%, #111 75%, #111); 
    background-position: 0 0, 10px 10px; background-size: 20px 20px; opacity: 0.3; filter: grayscale(100%); 
}
.locked-card .reality-title { color: #555; border-color: #222; }
.nexus-btn { background: #000; border: 1px solid #00FF41; color: #00FF41; font-family: 'Courier New', monospace; font-size: 14px; padding: 10px 20px; cursor: pointer; text-transform: uppercase; transition: all 0.2s; }
.nexus-btn:hover { background: #00FF41; color: #000; }
.info-btn { border-color: #aaa; color: #aaa; margin-top: -5px; padding: 5px 15px; font-size: 12px; }
.info-btn:hover { background: #aaa; color: #000; }

/* Modal Information Nexus */
.nexus-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.nexus-modal.active { opacity: 1; pointer-events: auto; }
.modal-content { background: #050505; border: 1px solid #00FF41; box-shadow: 0 0 30px rgba(0, 255, 65, 0.2); width: 90%; max-width: 600px; padding: 40px; position: relative; transform: translateY(20px); transition: transform 0.4s ease; }
.nexus-modal.active .modal-content { transform: translateY(0); }
.close-modal { position: absolute; top: 15px; right: 20px; background: transparent; border: none; color: #fff; font-size: 30px; cursor: pointer; transition: color 0.3s; }
.close-modal:hover { color: #00FF41; }
.modal-title { color: #00FF41; font-family: 'Courier New', monospace; letter-spacing: 2px; text-transform: uppercase; margin-top: 0; margin-bottom: 25px; border-bottom: 1px solid rgba(0,255,65,0.3); padding-bottom: 15px; }
.modal-desc { color: #ccc; font-size: 1.1rem; line-height: 1.6; }
.modal-desc strong { color: #fff; }
.info-btn:hover { background: #aaa; color: #000; }

/* ============================================== */
/* STYLES DE LA CARTE                             */
/* ============================================== */
#map { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; }
#map::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 400; pointer-events: none; }
#ui-container { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 1000; width: 700px; max-width: 90%; background: rgba(15, 20, 25, 0.85); border: 1px solid #444; border-radius: 8px; padding: 20px; color: #e0e0e0; box-shadow: 0 10px 40px rgba(0,0,0,0.8); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 15px; }
#story-log { max-height: 250px; overflow-y: auto; font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; gap: 10px; }
#story-log p { margin: 0; }
.system-msg { color: #888; font-style: italic; }
.player-msg { color: #4CAF50; font-weight: bold; }
.input-area { display: flex; align-items: center; border-top: 1px solid #333; padding-top: 15px; }
.prompt-symbol { color: #4CAF50; margin-right: 10px; font-weight: bold; }
#action-input { flex-grow: 1; background: transparent; border: none; color: #fff; font-family: inherit; font-size: 16px; outline: none; }
#action-input::placeholder { color: #666; }