:root {
  --ink: #1a1336;
  --ink-soft: #5b5470;
  --g1: #7c3aed;
  --g2: #ec4899;
  --g3: #fb923c;
  --gold: #ffd93d;
  --glass: rgba(255, 255, 255, 0.95);
  --glass-line: rgba(255, 255, 255, 0.6);
  --shadow: 0 18px 50px -18px rgba(40, 8, 60, 0.55);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100dvh;
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* background */
.bg {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(135deg, #4c1d95, #be185d 50%, #ea580c);
  background-size: 220% 220%;
  animation: gradient 18s ease infinite;
  overflow: hidden;
}
@keyframes gradient { 0%{background-position:0% 30%} 50%{background-position:100% 70%} 100%{background-position:0% 30%} }
.blob { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(72px); opacity: .5; will-change: transform; }
.b1 { background:#ff4d8d; top:-22vmax; left:-16vmax; animation: d1 20s ease-in-out infinite; }
.b2 { background:#22d3ee; bottom:-26vmax; right:-16vmax; animation: d2 24s ease-in-out infinite; }
.b3 { background:#a78bfa; top:24%; right:-20vmax; opacity:.38; animation: d3 28s ease-in-out infinite; }
@keyframes d1 { 50%{transform:translate(8vmax,10vmax) scale(1.15)} }
@keyframes d2 { 50%{transform:translate(-10vmax,-8vmax) scale(1.1)} }
@keyframes d3 { 50%{transform:translate(-6vmax,12vmax) scale(.9)} }
.grain { position:absolute; inset:0; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

#fx { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 50; pointer-events: none; }

.wrap {
  position: relative; min-height: 100dvh; max-width: 600px; margin: 0 auto;
  padding: 28px 22px calc(34px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center;
}
.screen { display: flex; flex-direction: column; gap: 18px; animation: screenIn .35s ease both; }
@keyframes screenIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* intro */
.badge {
  align-self: flex-start; padding: 9px 15px; font-size: 14px; font-weight: 700; color:#fff;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  border-radius: 100px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.title {
  font-family: "Unbounded", sans-serif; font-weight: 900;
  font-size: clamp(46px, 14vw, 80px); line-height: .96; letter-spacing: -.02em; margin: 0; color:#fff;
  text-shadow: 0 6px 30px rgba(30,0,40,.35);
}
.grad { background: linear-gradient(92deg,#fff36b,#ffd93d 45%,#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { font-size: 17.5px; line-height: 1.5; color: rgba(255,255,255,.94); margin: 0; max-width: 34ch; text-shadow: 0 2px 14px rgba(30,0,40,.25); }
.sub b { color:#fff; }
.rules { display:flex; flex-direction:column; gap:7px; margin:4px 0 0; padding:0; }
.rules span { font-size:15px; font-weight:600; color:rgba(255,255,255,.92); }
.cta {
  align-self: flex-start; margin-top: 6px; padding: 19px 34px;
  font-family: "Unbounded", sans-serif; font-size: 19px; font-weight: 800; color: var(--ink);
  background:#fff; border:none; border-radius:100px; cursor:pointer; box-shadow: var(--shadow);
  transition: transform .12s cubic-bezier(.3,1.4,.5,1), opacity .2s ease; animation: pulse 2.6s ease-in-out infinite;
}
.cta:hover { transform: translateY(-3px) scale(1.03); }
.cta:active { transform: scale(.97); }
.cta:disabled { opacity:.55; cursor:default; animation:none; }
@keyframes pulse { 0%,100%{box-shadow:0 18px 50px -18px rgba(40,8,60,.55),0 0 0 0 rgba(255,255,255,.5)} 50%{box-shadow:0 18px 50px -18px rgba(40,8,60,.55),0 0 0 14px rgba(255,255,255,0)} }
.fund { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 18px; padding: 16px 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fund-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14.5px; font-weight:600; color:rgba(255,255,255,.92); }
.fund-top b { font-family:"Unbounded",sans-serif; font-weight:800; font-size:20px; color:#fff; white-space:nowrap; }
.fund-bar { height:10px; margin-top:10px; background:rgba(0,0,0,.25); border-radius:100px; overflow:hidden; }
.fund-fill { height:100%; width:0%; background:linear-gradient(90deg,#34d399,#ffd93d); border-radius:100px; transition:width .8s cubic-bezier(.4,0,.2,1); }
.fund-note { margin:10px 0 0; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.78); }
.counter { font-size: 15px; color: rgba(255,255,255,.9); margin: 2px 0 0; font-weight: 600; }
.counter span { font-weight: 800; color:#fff; }

/* decision */
.pot-label { margin:0; text-align:center; font-size:14px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.pot {
  text-align:center; font-family:"Unbounded",sans-serif; font-weight:900;
  font-size: clamp(44px, 13vw, 72px); line-height:1; margin:2px 0 6px;
  background: linear-gradient(120deg,#fff36b,#ffd93d 60%,#fff); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 6px 30px rgba(255,200,0,.25);
}
.decide-q { text-align:center; font-family:"Unbounded",sans-serif; font-weight:700; font-size: clamp(22px,6vw,30px); line-height:1.15; color:#fff; margin: 4px 0 6px; text-shadow:0 4px 22px rgba(30,0,40,.3); }
.choices { display:flex; flex-direction:column; gap:13px; }
.choice {
  display:flex; flex-direction:column; align-items:center; gap:3px; padding: 22px 18px;
  border:none; border-radius:22px; cursor:pointer; box-shadow: var(--shadow);
  transition: transform .12s cubic-bezier(.3,1.4,.5,1), filter .15s ease;
}
.choice:hover { transform: translateY(-4px) scale(1.02); }
.choice:active { transform: scale(.98); }
.choice.trust { background: linear-gradient(135deg,#34d399,#10b981); color:#06281d; }
.choice.betray { background: linear-gradient(135deg,#fb7185,#e11d48); color:#3b0712; }
.ch-emoji { font-size: 40px; line-height:1; }
.ch-title { font-family:"Unbounded",sans-serif; font-weight:800; font-size:24px; }
.ch-desc { font-size:14.5px; font-weight:600; opacity:.8; }

/* reveal */
#reveal { min-height: 50dvh; justify-content:center; }
.reveal-box { text-align:center; display:flex; flex-direction:column; gap:18px; align-items:center; }
.rv-line { font-family:"Unbounded",sans-serif; font-weight:700; font-size: clamp(22px,6vw,30px); color:#fff; margin:0; text-shadow:0 4px 22px rgba(30,0,40,.35); }
.rv-dots { display:flex; gap:12px; font-size:48px; color:var(--gold); line-height:.4; }
.rv-dots span { animation: blink 1.1s infinite both; }
.rv-dots span:nth-child(2){animation-delay:.2s} .rv-dots span:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,100%{opacity:.25;transform:translateY(0)} 50%{opacity:1;transform:translateY(-8px)} }

/* result */
.r-card {
  text-align:center; padding: 34px 24px 28px; background: var(--glass);
  border: 1px solid var(--glass-line); border-radius: 28px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: popIn .5s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes popIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
.r-emoji { font-size: 64px; line-height:1; }
.r-title { margin: 10px 0 6px; font-family:"Unbounded",sans-serif; font-weight:800; font-size: clamp(24px,6.5vw,34px); color: var(--ink); }
.r-line { margin: 0 0 14px; font-size: 17px; line-height:1.45; color: var(--ink-soft); }
.r-pay { font-family:"Unbounded",sans-serif; font-weight:900; font-size: clamp(28px,8vw,44px); background: linear-gradient(120deg,var(--g1),var(--g2) 55%,var(--g3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.r-card.good { box-shadow: 0 18px 60px -16px rgba(16,185,129,.6); }
.r-card.bad { box-shadow: 0 18px 60px -16px rgba(225,29,72,.55); }
.r-card.evil { box-shadow: 0 18px 60px -16px rgba(124,58,237,.55); }

.share { margin-top: 6px; }
.share-label { font-size: 15.5px; font-weight: 700; color: rgba(255,255,255,.96); margin: 0 0 12px; text-align:center; }
.share-row { display:flex; gap: 11px; }
.share-btn { flex:1; padding: 16px 10px; font-size:16px; font-weight:800; text-align:center; text-decoration:none; color:#fff; border:none; border-radius:16px; cursor:pointer; box-shadow: var(--shadow); transition: transform .12s cubic-bezier(.3,1.4,.5,1); }
.share-btn:hover { transform: translateY(-3px); }
.share-btn:active { transform: scale(.97); }
.share-btn.tg { background:#2aabee; }
.share-btn.vk { background:#0077ff; }
.share-btn.copy { background:#fff; color: var(--ink); }
.link-btn { align-self:center; background:none; border:none; color: rgba(255,255,255,.92); font-size:15px; font-weight:600; text-decoration:underline; cursor:pointer; padding:6px; }

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }