:root{
  --deep:#07171f; --gold:#e3c073; --gold-2:#c9a24a;
  --cream:#f3ead8; --soft:#cdd8dd; --muted:#93a7b0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--cream); background:var(--deep); overflow-x:hidden;
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:26px 16px;
}

/* атмосферный фон — фото блогера, затемнённое и размытое */
.bg{position:fixed;inset:0;z-index:-6;background:url("../assets/blogger.jpg") center/cover no-repeat;
  filter:blur(20px) brightness(.32) saturate(1.15);transform:scale(1.1)}
.bg-tint{position:fixed;inset:0;z-index:-5;
  background:radial-gradient(900px 600px at 50% 0%, rgba(227,192,115,.16), transparent 60%),
             linear-gradient(180deg, rgba(7,23,31,.6), rgba(5,16,22,.94))}

/* ★ звёздное поле — мерцает */
.stars{position:fixed;inset:0;z-index:-4;opacity:.7;animation:twinkle 6s ease-in-out infinite alternate;
  background-repeat:repeat;background-size:520px 520px;
  background-image:
    radial-gradient(1.4px 1.4px at 40px 60px, #ffe9b8 60%, transparent),
    radial-gradient(1.6px 1.6px at 180px 120px, #fff3d6 60%, transparent),
    radial-gradient(1.2px 1.2px at 320px 40px, var(--gold) 60%, transparent),
    radial-gradient(1.8px 1.8px at 260px 260px, #fff 60%, transparent),
    radial-gradient(1.3px 1.3px at 90px 340px, var(--gold) 60%, transparent),
    radial-gradient(1.5px 1.5px at 420px 200px, #ffe9b8 60%, transparent),
    radial-gradient(1.2px 1.2px at 470px 420px, #fff 60%, transparent),
    radial-gradient(1.6px 1.6px at 140px 470px, var(--gold) 60%, transparent)}
@keyframes twinkle{from{opacity:.35}to{opacity:.9}}

/* ✶ сакральная геометрия — цветок жизни, медленно вращается */
.mandala{position:fixed;left:50%;top:46%;width:820px;height:820px;transform:translate(-50%,-50%);
  z-index:-3;opacity:.10;pointer-events:none;animation:spin 140s linear infinite;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='820' height='820' viewBox='0 0 820 820'><g fill='none' stroke='%23e3c073' stroke-width='1.1'><circle cx='410' cy='410' r='120'/><circle cx='410' cy='290' r='120'/><circle cx='410' cy='530' r='120'/><circle cx='306' cy='350' r='120'/><circle cx='514' cy='350' r='120'/><circle cx='306' cy='470' r='120'/><circle cx='514' cy='470' r='120'/><circle cx='410' cy='410' r='240'/><circle cx='410' cy='410' r='300'/></g></svg>")}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* золотые «подводные» блики */
.spark{position:fixed;border-radius:50%;filter:blur(60px);opacity:.32;z-index:-2;
  animation:drift 20s ease-in-out infinite alternate}
.spark.s1{width:360px;height:360px;left:-60px;top:8%;background:radial-gradient(circle,var(--gold),transparent 70%)}
.spark.s2{width:420px;height:420px;right:-90px;bottom:6%;background:radial-gradient(circle,#2f7d8c,transparent 70%);animation-delay:-7s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,-24px) scale(1.15)}}

/* ☾ плывущие эзотерические символы */
.glyphs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glyph{position:absolute;color:var(--gold);opacity:.16;text-shadow:0 0 18px rgba(227,192,115,.5);
  animation:float 16s ease-in-out infinite}
.glyph:nth-child(1){left:8%;top:16%;font-size:40px;animation-delay:0s}
.glyph:nth-child(2){right:10%;top:22%;font-size:30px;animation-delay:-3s}
.glyph:nth-child(3){left:14%;bottom:18%;font-size:34px;animation-delay:-6s}
.glyph:nth-child(4){right:12%;bottom:14%;font-size:44px;animation-delay:-9s}
.glyph:nth-child(5){left:48%;top:8%;font-size:26px;animation-delay:-4s}
.glyph:nth-child(6){right:22%;top:52%;font-size:24px;animation-delay:-11s}
.glyph:nth-child(7){left:6%;top:54%;font-size:28px;animation-delay:-7s}
.glyph:nth-child(8){right:40%;bottom:8%;font-size:22px;animation-delay:-2s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0);opacity:.10}50%{transform:translateY(-22px) rotate(8deg);opacity:.24}}

.app{width:100%;max-width:600px;position:relative;z-index:1}

/* тёмная стеклянная карточка */
.card{overflow:hidden;
  background:linear-gradient(180deg, rgba(13,38,50,.84), rgba(8,24,33,.9));
  border:1px solid rgba(227,192,115,.4);border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(227,192,115,.15);
  backdrop-filter:blur(4px);animation:rise .5s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* герой — фото блогера; на каждой странице */
.hero{position:relative;height:260px}
.hero.slim{height:132px}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 38%, rgba(8,24,33,.75) 80%, rgba(8,24,33,1) 100%)}
.hero .cap{position:absolute;left:24px;bottom:14px}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.6)}

.body{padding:18px 28px 30px}

h1{font-family:'Playfair Display',serif;font-weight:600;font-size:30px;line-height:1.14;margin:0 0 4px;color:#fff}
h1 .g{color:var(--gold);font-style:italic}

.q-text{color:var(--soft);font-size:16px;line-height:1.5;margin:14px 0}

.progress{height:6px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;margin-bottom:16px}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .3s}

.option{display:block;width:100%;text-align:left;padding:15px 16px;margin:10px 0;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(227,192,115,.25);color:var(--cream);
  font-size:15px;cursor:pointer;transition:.15s}
.option:hover{border-color:var(--gold);background:rgba(227,192,115,.1);transform:translateY(-1px)}

.btn{position:relative;display:block;width:100%;text-align:center;padding:17px;border:0;border-radius:15px;
  font-family:'Manrope';font-weight:700;font-size:17px;color:#231a08;cursor:pointer;overflow:hidden;text-decoration:none;
  background:linear-gradient(90deg,#e3c073,#caa049,#e3c073);background-size:200% 100%;
  box-shadow:0 12px 34px rgba(201,162,74,.45);animation:shine 4.5s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.btn:hover{transform:translateY(-2px)}

.hint,.no-tg{display:block;text-align:center;color:var(--muted);font-size:13px;margin-top:12px}
.no-tg{text-decoration:underline;cursor:pointer}

.result-emoji{font-size:44px;text-align:center}
.result-name{font-family:'Playfair Display',serif;font-size:28px;text-align:center;color:#fff;margin:4px 0 2px}
.result-block{color:var(--gold);font-weight:700}