html,body{margin:0;height:100%;font-family:system-ui,Segoe UI,Roboto}
.bg{position:fixed;inset:0;background:radial-gradient(1200px 800px at 70% 20%,#2a2a6a 0,#0a0a1a 60%,#000 100%);}
.stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 60%,#fff,transparent),radial-gradient(2px 2px at 60% 10%,#fff,transparent),radial-gradient(1px 1px at 30% 80%,#fff,transparent);}
.wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#f4f4ff;text-align:center;padding:24px}
h1{font-size:56px;letter-spacing:2px;margin:10px 0}
.brand{color:#ffd86b;text-shadow:0 0 12px rgba(255,216,107,.5)}
.orb{width:220px;height:220px;border-radius:50%;background:
  radial-gradient(circle at 30% 30%,#7bd2ff,transparent 60%),
  radial-gradient(circle at 70% 70%,#ff7bf0,transparent 60%),
  radial-gradient(circle at 50% 50%,#ffffff22,#00000011);
  box-shadow:0 0 80px #7bd2ff66 inset, 0 0 40px #ff7bf055 inset, 0 0 120px #7bd2ff55;}
.card{width:min(720px,95vw);background:#0f0f2aee;border:1px solid #3b3b7a;border-radius:20px;padding:20px;margin-top:18px;backdrop-filter: blur(6px)}
textarea{width:90%;min-height:110px;font-size:18px;padding:14px;border-radius:12px;border:1px solid #3b3b7a;background:#0a0a1f;color:#eaeaff;resize:none}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0}
button{font-size:18px;padding:14px 22px;border-radius:999px;border:1px solid #7b7bff;background:#1a1a3a;color:#fff;cursor:pointer}
button.primary{background:#6a5acd}
button:disabled{opacity:.5;cursor:not-allowed}
.answer{font-size:24px;white-space:pre-wrap;text-align:left}
.pill{border:1px solid #4d4da8;border-radius:999px;padding:8px 12px;background:#121236;cursor:pointer}
.active{outline:2px solid #a17bff}
.tiny{font-size:12px;opacity:.75;margin-top:8px}

/* Avatar */
.oracle { width: 240px; height: 260px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); }
.avatar { position: relative; z-index: 3; display:flex; flex-direction:column; align-items:center; margin:8px 0 12px }
.scarf { fill:#2b2b78; opacity:.95 }
.sclera { fill:#fff }
.pupil { fill:#111; transition: transform .08s linear }
.lid { fill:none; stroke:#1c1c1c; stroke-width:3; stroke-linecap:round; }
.nose { fill:none; stroke:#9b6f57; stroke-width:2; stroke-linecap:round; opacity:.9 }
.brow { fill:none; stroke:#4a2b1e; stroke-width:4; stroke-linecap:round }
.blush { fill:#ff7aa2; opacity:.28 }
.mouth { fill:#8b1fa9; transition: rx .06s ease, ry .06s ease, transform .06s ease }
.teeth { fill:#fff; transition: opacity .08s ease }
.avatar-name { margin-top:6px; font-weight:600; opacity:.85; letter-spacing:.5px }

/* clipit natural (pleoapele se apropie) */
@keyframes blinkL {
  0%, 92%, 100% { d:path("M62,100 Q80,92 98,100") }
  95%           { d:path("M62,100 Q80,100 98,100") }
}
@keyframes blinkR {
  0%, 92%, 100% { d:path("M142,100 Q160,92 178,100") }
  95%           { d:path("M142,100 Q160,100 178,100") }
}
.lid { animation: blinkL 6s infinite }
#lidR { animation: blinkR 6s infinite }

/* în timp ce vorbește: legănat fin al capului */
.avatar.speaking .oracle { animation: headSway 2.8s ease-in-out infinite }
@keyframes headSway {
  0%,100% { transform: translateY(0) rotate(0deg) }
  50%     { transform: translateY(-1.5px) rotate(-0.6deg) }
}

.hidden {
  display: none !important;
}


.cloak {
  visibility: collapse;     /* invizibil dar păstrează spațiul */
  pointer-events: none;   /* nu pot fi apăsate */
}