/* ============ Токены (палитра + типографика из макета MiniApp) ============ */
:root{
  --bg-top:#1A1230; --bg-bottom:#0E0A1E;
  --panel-a:#2a1e4e; --panel-b:#150f2e; --back-a:#241A44;
  --gold:#E8B44A; --gold-soft:#F2D48F;
  --text:#F5F0FF;
  --lav:#CBBFE8; --text-dim:#8E7CC3; --text-dim2:#6A5F8A;
  --lika:#E8A08A; --vera:#7A2E3C; --ada:#7FA893;
  --accent:var(--lika); --accent-soft:var(--gold-soft);

  --dur-fast:200ms; --dur-base:350ms; --dur-slow:500ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.65,.05,.36,1);

  --r-lg:20px; --r-md:16px; --r-sm:12px;
  --pad:18px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --tabbar-h:66px;

  --font-display:"Playfair Display",Georgia,serif;
  --font-hand:"Cormorant","Playfair Display",Georgia,serif;
  --font-text:"Inter","Manrope",-apple-system,BlinkMacSystemFont,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-text); color:var(--text);
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  background-attachment:fixed; overflow:hidden; overscroll-behavior:none;
}

/* фон: звёздное поле (canvas) + тёплое свечение сверху под акцент персонажа */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.7;pointer-events:none}
#glow{
  position:fixed;left:50%;top:-12%;width:120vw;height:52vh;transform:translateX(-50%);
  z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(60% 60% at 50% 0%,
    rgba(232,160,138,.45), transparent 70%);
  filter:blur(8px);
}

/* ============ Экраны ============ */
#app{position:fixed;inset:0;z-index:1}
.screen{
  position:absolute;inset:0;
  padding:calc(var(--safe-top) + 22px) var(--pad)
          calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             visibility 0s linear var(--dur-base);
}
.screen--active{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* ============ Нижняя навигация ============ */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  height:calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  display:flex;background:rgba(14,10,30,.82);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(232,180,74,.14);
}
.tab{
  flex:1;background:none;border:none;color:var(--text-dim);
  font-family:var(--font-text);font-size:11px;letter-spacing:.2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:color var(--dur-fast) var(--ease-out);
}
.tab__ic{font-size:21px;line-height:1;filter:grayscale(.5) opacity(.75);
  transition:filter var(--dur-fast),transform var(--dur-fast)}
.tab--active{color:var(--gold-soft)}
.tab--active .tab__ic{filter:none;transform:translateY(-1px)}

/* ============ Типографика ============ */
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:.2px}
.h-hero{font-size:28px;font-weight:700}
.h-sec{font-size:20px;margin:8px 0 2px}
.muted{color:var(--text-dim)}
.italic{font-family:var(--font-hand);font-style:italic;font-size:1.08em;color:var(--lav)}

/* ============ Кнопки ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-text);font-size:16px;font-weight:600;
  padding:16px 22px;border-radius:14px;border:none;cursor:pointer;
  color:#2a1030;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  box-shadow:0 10px 26px rgba(232,160,138,.35),
             inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast),filter var(--dur-fast);
}
.btn:active{transform:scale(.975);filter:brightness(1.03)}
.btn--ghost{
  background:none;color:var(--text);
  border:1px solid rgba(232,160,138,.4);box-shadow:none;
}
.btn--ghost:active{background:rgba(232,160,138,.08)}
.btn--block{display:flex;width:100%}

/* ============ Карточки (градиент + рамка + свечение, как в макете) ============ */
.card-tile{
  position:relative;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  border:1px solid rgba(232,180,74,.16);
  border-radius:var(--r-md);padding:16px 17px;
  box-shadow:0 14px 34px rgba(0,0,0,.38);
}
.card-tile::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(245,240,255,.06);
}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:10px 16px;border-radius:999px;font-size:14px;cursor:pointer;
  background:linear-gradient(170deg,rgba(42,30,78,.6),rgba(21,15,46,.6));
  border:1px solid rgba(232,180,74,.2);
  color:var(--text);transition:all var(--dur-fast) var(--ease-out);
}
.chip--on,.chip:active{
  background:linear-gradient(90deg,rgba(232,160,138,.28),rgba(242,212,143,.18));
  border-color:var(--accent);color:#fff;
}

.field{
  width:100%;padding:15px 16px;border-radius:14px;
  background:rgba(21,15,46,.7);border:1px solid rgba(232,180,74,.2);
  color:var(--text);font-family:var(--font-text);font-size:16px;resize:none;
}
.field::placeholder{color:var(--text-dim2)}
.field:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,160,138,.18)}

.pill{font-size:13px;padding:4px 13px;border-radius:999px;
  background:rgba(245,240,255,.06);border:1px solid rgba(232,180,74,.22);color:var(--text-dim)}
.pill--on{background:linear-gradient(90deg,rgba(232,160,138,.30),rgba(242,212,143,.2));border-color:var(--accent);color:#fff}

.stack>*+*{margin-top:14px}
.center{text-align:center}
.spinner-dim{color:var(--text-dim);font-size:14px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  #starfield{display:none}
}