/* ============================================================
   LILITH — AAA Cinematic UI
   Photorealistic dark theme, glassmorphism, animated glitch
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
    width:100%; height:100%; overflow:hidden;
    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: #000; color:#e8e8ec; user-select:none;
}

/* ---------- SCREEN SYSTEM ---------- */
.screen {
    position:fixed; inset:0; display:none;
    animation: fadeIn .6s ease;
}
.screen.active { display:flex; }
@keyframes fadeIn { from {opacity:0; transform:scale(.98);} to {opacity:1; transform:scale(1);} }

/* ---------- ANIMATED VORTEX BG ---------- */
.bg-vortex, .conv-bg {
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(120,30,180,.35), transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(180,30,80,.30), transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(20,0,40,1), #000 80%);
    animation: vortex 30s linear infinite;
}
.conv-bg {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(80,20,120,.4), transparent 70%),
        linear-gradient(180deg, #0a0612 0%, #000 100%);
    animation: none;
}
@keyframes vortex {
    0% { filter:hue-rotate(0deg) brightness(.9); }
    50% { filter:hue-rotate(40deg) brightness(1.1); }
    100% { filter:hue-rotate(0deg) brightness(.9); }
}
.bg-vortex::after {
    content:''; position:absolute; inset:0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
    pointer-events:none;
}

/* ---------- MAIN MENU ---------- */
.menu-content {
    position:relative; z-index:2; margin:auto; text-align:center;
    padding:32px 40px 40px; max-width:760px;
}
.title-glitch {
    font-size: clamp(60px, 12vw, 140px);
    font-weight:900; letter-spacing:.15em;
    background: linear-gradient(180deg, #fff 0%, #b14dff 50%, #6a0dad 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow: 0 0 40px rgba(177,77,255,.6);
    position:relative; line-height:1;
}
.title-glitch::before, .title-glitch::after {
    content: attr(data-text); position:absolute; inset:0;
    background: linear-gradient(180deg, #fff, #b14dff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    opacity:.6; mix-blend-mode:screen;
}
.title-glitch::before { animation: glitch1 4s infinite; clip-path: inset(0 0 70% 0); }
.title-glitch::after  { animation: glitch2 5s infinite; clip-path: inset(70% 0 0 0); }
@keyframes glitch1 { 0%,100%{transform:translate(0);} 20%{transform:translate(-2px,1px);} 40%{transform:translate(2px,-1px);} }
@keyframes glitch2 { 0%,100%{transform:translate(0);} 25%{transform:translate(2px,2px);} 55%{transform:translate(-2px,-1px);} }

.subtitle {
    margin: 20px 0 22px; font-size:18px; letter-spacing:.2em;
    color:#b8a2d6; text-transform:uppercase;
}

.menu-hero {
    position:relative;
    width:min(100%, 440px);
    margin:0 auto 24px;
    border-radius:20px;
    overflow:hidden;
    pointer-events:none;
    box-shadow: 0 18px 42px rgba(0,0,0,.45);
    border:1px solid rgba(177,77,255,.18);
}
.menu-hero::after {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(6,0,14,.24));
}
.menu-hero img {
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
    object-position:center center;
}

.brain-stats {
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    margin: 30px 0;
}
.stat {
    background: rgba(30,15,50,.55); backdrop-filter: blur(14px);
    border:1px solid rgba(177,77,255,.3); border-radius:14px;
    padding:18px 8px;
    box-shadow: 0 4px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.stat span { display:block; font-size:32px; font-weight:800; color:#d8b4ff; }
.stat label { font-size:11px; color:#8a7ba8; letter-spacing:.15em; text-transform:uppercase; }

.menu-buttons { display:flex; flex-direction:column; gap:12px; margin-top:30px; }
.menu-btn {
    padding:16px 28px; font-size:15px; font-weight:700; letter-spacing:.2em;
    background: linear-gradient(180deg, rgba(80,30,140,.7), rgba(40,10,80,.8));
    color:#f0e6ff; border:1px solid rgba(177,77,255,.5); border-radius:10px;
    cursor:pointer; transition:.25s; text-transform:uppercase;
    box-shadow: 0 4px 20px rgba(120,30,180,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.menu-btn:hover { transform:translateY(-2px); box-shadow: 0 8px 30px rgba(177,77,255,.5); border-color:#d8b4ff; }
.menu-btn:active { transform:translateY(0); }
.menu-btn.primary { background: linear-gradient(180deg, #8a2be2, #4b0082); }
.menu-btn.danger  { background: linear-gradient(180deg, #8b1a2c, #4a0810); border-color:#ff4d6d; }

.warning { margin-top:25px; font-size:12px; color:#7a6890; letter-spacing:.1em; }
.credits {
    margin-top: 10px;
    font-size: 11px;
    color: rgba(216, 180, 255, 0.72);
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ---------- CONVERSATION SCREEN ---------- */
#conversationScreen { display:none; flex-direction:row; }
#conversationScreen.active { display:flex; }

.npc-stage {
    flex: 0 0 480px; position:relative; z-index:2;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at center, rgba(120,60,180,.22), transparent 48%),
        radial-gradient(circle at center, rgba(20,8,40,.86), transparent 72%);
}
#npcCanvas {
    display:block;
    width:min(100%, 520px);
    height:min(82vh, 720px);
    max-width:100%;
    filter: drop-shadow(0 24px 48px rgba(120,30,180,.42));
}
.npc-eye-stage {
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    --eye-glow: #9b7dff;
}
.npc-eye-stage .eye-socket {
    width:min(360px, 82%);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.09), rgba(0,0,0,0) 55%),
        radial-gradient(circle at 50% 50%, rgba(155,125,255,.14), rgba(0,0,0,0) 70%);
    box-shadow:
        0 18px 60px rgba(0,0,0,.55),
        0 0 70px color-mix(in srgb, var(--eye-glow) 28%, transparent);
    position:relative;
}
.npc-eye-stage .eye-socket::after {
    content:'';
    position:absolute;
    inset:-22%;
    border-radius:999px;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--eye-glow) 36%, transparent), transparent 62%);
    filter: blur(18px);
    opacity:.9;
    pointer-events:none;
}
#npcEye {
    width: 86%;
    height: 86%;
    object-fit: contain;
    border-radius: 999px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0 49%, transparent 51%);
    mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0 49%, transparent 51%);
    transform: translateX(-10px) translateY(2px) scale(1.18);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.55));
    animation: eyeLook 4.8s ease-in-out infinite;
    will-change: transform;
    pointer-events:none;
}
.npc-eye-stage.speaking #npcEye {
    animation-duration: 1.9s;
}
.npc-eye-stage.pulse #npcEye {
    animation-name: eyeLook, eyePulse;
    animation-duration: 4.8s, .12s;
    animation-timing-function: ease-in-out, ease-out;
    animation-iteration-count: infinite, 1;
}
@keyframes eyeLook {
    0%   { transform: translateX(-12px) translateY(2px) scale(1.18); }
    35%  { transform: translateX(10px)  translateY(-2px) scale(1.18); }
    60%  { transform: translateX(3px)   translateY(3px) scale(1.18); }
    100% { transform: translateX(-12px) translateY(2px) scale(1.18); }
}
@keyframes eyePulse {
    0%   { filter: drop-shadow(0 12px 24px rgba(0,0,0,.55)); }
    100% { filter: drop-shadow(0 16px 34px color-mix(in srgb, var(--eye-glow) 45%, rgba(0,0,0,.35))); }
}
.npc-name-plate {
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
    background: rgba(20,8,40,.75); backdrop-filter: blur(10px);
    border:1px solid rgba(177,77,255,.4); border-radius:10px;
    padding:10px 25px; text-align:center;
}
.npc-name-plate .name { font-size:22px; font-weight:800; letter-spacing:.3em; color:#e8d4ff; }
.npc-name-plate .status { font-size:11px; color:#9be6ff; margin-top:3px; letter-spacing:.15em; text-transform:uppercase; }

.chat-panel {
    flex:1; display:flex; flex-direction:column; z-index:2;
    background: rgba(10,5,20,.65); backdrop-filter: blur(18px);
    border-left:1px solid rgba(177,77,255,.2);
}
.chat-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; border-bottom:1px solid rgba(177,77,255,.15);
}
.header-btn {
    background:transparent; border:1px solid rgba(177,77,255,.4);
    color:#d8b4ff; padding:8px 16px; border-radius:8px; cursor:pointer;
    font-size:12px; letter-spacing:.15em; transition:.2s;
}
.header-btn:hover { background: rgba(177,77,255,.15); }
.mood-indicator, .iq-indicator { font-size:13px; color:#a89cc0; letter-spacing:.1em; }
.mood-indicator span:last-child, .iq-indicator span { color:#d8b4ff; font-weight:700; }

.chat-log {
    flex:1; overflow-y:auto; padding:20px 25px;
    scrollbar-width:thin; scrollbar-color:#6a0dad #1a0a2a;
}
.chat-log::-webkit-scrollbar { width:8px; }
.chat-log::-webkit-scrollbar-thumb { background:#6a0dad; border-radius:4px; }

.bubble {
    max-width:85%; margin:10px 0; padding:12px 18px; border-radius:18px;
    font-size:15px; line-height:1.5; animation: bubbleIn .35s ease;
    word-wrap:break-word;
}
@keyframes bubbleIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.bubble.user {
    margin-left:auto; background: linear-gradient(135deg, #2a1a4a, #1a0a3a);
    border:1px solid rgba(120,180,255,.3); color:#dceeff; border-bottom-right-radius:4px;
}
.bubble.npc {
    background: linear-gradient(135deg, #3a0a5a, #1a0530);
    border:1px solid rgba(220,100,255,.4); color:#f4e6ff; border-bottom-left-radius:4px;
    box-shadow: 0 4px 18px rgba(120,30,180,.25);
}
.bubble.system {
    margin: 8px auto; background:transparent; color:#7a6890;
    font-size:12px; text-align:center; font-style:italic; letter-spacing:.1em;
}
.typing-dots { display:inline-flex; gap:4px; padding:4px 0; }
.typing-dots span {
    width:7px; height:7px; background:#d8b4ff; border-radius:50%;
    animation: blink 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay:.2s; }
.typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%,80%,100%{opacity:.3;transform:scale(.8);} 40%{opacity:1;transform:scale(1.1);} }

.chat-input-area {
    display:flex; gap:10px; padding:16px 20px;
    border-top:1px solid rgba(177,77,255,.15);
}
#chatInput {
    flex:1; padding:14px 18px; font-size:15px; color:#fff;
    background: rgba(30,15,50,.6); border:1px solid rgba(177,77,255,.3);
    border-radius:10px; outline:none; transition:.2s;
}
#chatInput:focus { border-color:#d8b4ff; box-shadow: 0 0 0 3px rgba(177,77,255,.2); }
#btnSend {
    padding:0 28px; font-weight:700; letter-spacing:.2em;
    background: linear-gradient(180deg, #8a2be2, #4b0082);
    color:#fff; border:none; border-radius:10px; cursor:pointer; transition:.2s;
}
#btnSend:hover { box-shadow: 0 4px 18px rgba(177,77,255,.5); }
#btnSend:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- BRAIN VIEWER ---------- */
.brain-content {
    position:relative; z-index:2; margin:auto; padding:40px;
    max-width:1000px; width:95%; height:90vh; display:flex; flex-direction:column;
    background: rgba(15,8,30,.85); backdrop-filter: blur(20px);
    border:1px solid rgba(177,77,255,.3); border-radius:20px;
}
.brain-content h2 { font-size:32px; letter-spacing:.2em; margin-bottom:20px; color:#e8d4ff; text-align:center; }
.brain-tabs { display:flex; gap:8px; margin-bottom:15px; flex-wrap:wrap; }
.tab-btn {
    padding:10px 18px; background:rgba(40,20,70,.6); border:1px solid rgba(177,77,255,.3);
    color:#b8a2d6; border-radius:8px; cursor:pointer; font-size:13px; letter-spacing:.1em;
}
.tab-btn.active { background: rgba(177,77,255,.3); color:#fff; border-color:#d8b4ff; }
.brain-display {
    flex:1; overflow-y:auto; padding:20px; background:rgba(0,0,0,.4);
    border-radius:12px; font-size:13px; line-height:1.7; color:#c8b4e0;
    font-family: 'Consolas', 'Monaco', monospace; white-space:pre-wrap;
}
.brain-display::-webkit-scrollbar { width:8px; }
.brain-display::-webkit-scrollbar-thumb { background:#6a0dad; border-radius:4px; }

/* ---------- EXIT MODAL ---------- */
.modal {
    position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(8px);
    display:none; align-items:center; justify-content:center; z-index:100;
}
.modal.active { display:flex; }
.modal-content {
    background: linear-gradient(180deg, #1a0a3a, #0a0520);
    border:1px solid rgba(220,80,120,.5); border-radius:18px;
    padding:40px; max-width:420px; text-align:center;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.modal-content h3 { font-size:26px; color:#ffb4c8; margin-bottom:14px; letter-spacing:.1em; }
.modal-content p { color:#c8b4e0; margin-bottom:25px; line-height:1.6; }
.modal-content em { color:#ff9bb6; font-style:normal; font-weight:700; }
.modal-buttons { display:flex; gap:10px; }
.modal-buttons .menu-btn { flex:1; padding:14px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 850px) {
    #conversationScreen { flex-direction:column; }
    .npc-stage { flex: 0 0 320px; }
    #npcCanvas { height: 320px; width: 100%; }
    .brain-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .title-glitch { font-size:64px; }
    .menu-content { padding:20px; }
    .menu-hero { width:min(100%, 320px); margin-bottom:18px; }
    .menu-hero img { height:170px; }
}