:root{
  --bg1:#1a0b2e;
  --bg2:#2d1b4e;
  --purple:#8e5cf7;
  --purple-light:#c9a7ff;
  --gold:#ffd166;
  --pink:#ff6fa5;
  --text:#f3ecff;
  --card-bg:rgba(30, 15, 55, 0.65);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  min-height:100%;
  background: radial-gradient(ellipse at top, var(--bg2), var(--bg1) 70%);
  color:var(--text);
  font-family:'Quicksand', sans-serif;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
}

/* ---------- background stars ---------- */
.stars{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.star{
  position:absolute;
  width:2px;
  height:2px;
  background:#fff;
  border-radius:50%;
  opacity:0.7;
  animation:twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:0.2; transform:scale(1);}
  50%{opacity:1; transform:scale(1.6);}
}

.sparkles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.sparkle-float{
  position:absolute;
  font-size:1.2rem;
  opacity:0.5;
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  from{ transform:translateY(110vh) rotate(0deg); opacity:0; }
  10%{ opacity:0.6; }
  90%{ opacity:0.6; }
  to{ transform:translateY(-10vh) rotate(360deg); opacity:0; }
}

/* ---------- layout ---------- */
.app{
  position:relative;
  z-index:2;
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.orb-mini{
  font-size:2rem;
  filter:drop-shadow(0 0 12px var(--purple-light));
}
.brand h1{
  font-family:'Cinzel Decorative', serif;
  font-size:1.6rem;
  margin:0;
  color:var(--gold);
  letter-spacing:1px;
}
.brand h1 span{
  display:block;
  font-family:'Quicksand', sans-serif;
  font-size:0.85rem;
  color:var(--purple-light);
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
}

.progress{
  display:flex;
  gap:8px;
}
.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  transition:all 0.3s ease;
}
.dot.active{
  background:var(--gold);
  box-shadow:0 0 10px var(--gold);
  transform:scale(1.25);
}

/* ---------- card ---------- */
.card{
  position:relative;
  width:100%;
  min-height:420px;
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px;
  padding:36px 28px;
  backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,0.45), inset 0 0 60px rgba(142,92,247,0.08);
  overflow:hidden;
}

.step{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  animation:fadeIn 0.5s ease;
}
.step.active{
  display:flex;
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

.orb-big{
  font-size:4.2rem;
  filter:drop-shadow(0 0 22px var(--purple));
}
.orb-big.spin{
  animation:spin 6s linear infinite, pulse 2s ease-in-out infinite;
}
.orb-big.glow{
  animation:pulse 1.6s ease-in-out infinite;
}
.orb-small{
  font-size:2.4rem;
  filter:drop-shadow(0 0 14px var(--purple-light));
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@keyframes pulse{
  0%,100%{ filter:drop-shadow(0 0 18px var(--purple)); transform:scale(1); }
  50%{ filter:drop-shadow(0 0 34px var(--gold)); transform:scale(1.06); }
}

h2{
  margin:0;
  font-family:'Cinzel Decorative', serif;
  font-size:1.3rem;
  color:var(--gold);
}

p{
  margin:0;
  line-height:1.5;
  color:var(--text);
  opacity:0.92;
}

.question{
  font-size:1.15rem;
  font-weight:700;
  color:var(--purple-light);
}
.big-question{
  font-size:1.6rem;
  color:var(--gold);
  text-shadow:0 0 20px rgba(255,209,102,0.5);
}
.hint{
  font-size:0.85rem;
  opacity:0.6;
  font-style:italic;
}

.result-text{
  font-size:1.2rem;
  font-weight:700;
  color:var(--pink);
}

/* ---------- buttons ---------- */
.btn{
  border:none;
  border-radius:999px;
  padding:14px 30px;
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover{
  transform:translateY(-2px) scale(1.03);
}
.btn:active{
  transform:translateY(0) scale(0.97);
}

.btn-primary{
  background:linear-gradient(135deg, var(--purple), var(--pink));
  color:#fff;
  box-shadow:0 8px 24px rgba(142,92,247,0.45);
  margin-top:6px;
}

.answers{
  display:flex;
  gap:16px;
  margin-top:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn-yes{
  background:linear-gradient(135deg, #33d17a, #17a2b8);
  color:#fff;
  box-shadow:0 8px 20px rgba(51,209,122,0.35);
}
.btn-no{
  background:rgba(255,255,255,0.08);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.25);
}

.final-answers{
  position:relative;
  width:100%;
  min-height:120px;
  margin-top:10px;
}
.big-yes{
  font-size:1.15rem;
  padding:18px 40px;
  background:linear-gradient(135deg, var(--gold), var(--pink));
  color:#3a1a00;
  box-shadow:0 10px 30px rgba(255,209,102,0.45);
}
.runaway{
  position:relative;
  transition:transform 0.18s ease;
}
.runaway.escaping{
  position:fixed;
  z-index:50;
}

.footer{
  position:relative;
  z-index:2;
  font-size:0.8rem;
  opacity:0.55;
  text-align:center;
}

/* ---------- centered remark popup ---------- */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(8,3,18,0.8);
  backdrop-filter:blur(2px);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.overlay.show{
  opacity:1;
  pointer-events:auto;
}

.evicka-toast{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0.85);
  background:linear-gradient(135deg, rgba(45,27,78,0.98), rgba(30,15,55,0.98));
  border:1px solid rgba(255,255,255,0.2);
  padding:28px 34px;
  border-radius:20px;
  color:var(--gold);
  font-weight:700;
  font-size:1.2rem;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease, transform 0.3s ease;
  text-align:center;
  max-width:80vw;
  box-shadow:0 25px 70px rgba(0,0,0,0.55);
}
.evicka-toast.show{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

/* ---------- floating hearts on result ---------- */
.hearts{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
  overflow:hidden;
}
.heart-piece{
  position:absolute;
  top:-40px;
  font-size:1.4rem;
  animation:fall linear forwards;
}
@keyframes fall{
  to{ transform:translateY(110vh) rotate(360deg); opacity:0.2; }
}

@media (max-width:480px){
  .card{ padding:28px 18px; min-height:380px; }
  .brand h1{ font-size:1.3rem; }
}