:root {
  --bg:#150f2b; --bg2:#1d1442; --card:#241a4d; --card2:#2c2059;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --fg:#f6f3ff; --muted:#b6acd8; --faint:#8c83b0;
  --pink:#ff5d8f; --pink-d:#ee3f76; --purple:#9b6bff; --teal:#34d6c0; --gold:#ffce4a; --sky:#56c2ff;
  --ok:#46d39f;
  --display:"Fredoka", ui-rounded, system-ui, sans-serif;
  --body:"Nunito", system-ui, -apple-system, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { margin:0; font-family:var(--body); color:var(--fg);
  background:#0b0814 radial-gradient(80% 60% at 50% -10%, #2a1a55, #0b0814 70%);
  display:grid; place-items:center; }
img { -webkit-user-drag:none; user-select:none; }
button { font-family:var(--display); cursor:pointer; border:none; background:none; color:inherit; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

/* Phone frame */
#phone { position:relative; width:min(100vw,440px); height:min(100dvh,940px); overflow:hidden;
  background:var(--bg) url(/game/bg/bg-gradient-purple.webp) center/cover; color:var(--fg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8); }
@media (min-width:480px){ #phone { border-radius:34px; height:min(96dvh,900px); border:1px solid var(--line); } }

.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.avatar{ border-radius:50%; object-fit:cover; background:rgba(255,255,255,.06); }
.avatar.sm{ width:38px; height:38px; } .avatar.md{ width:58px; height:58px; } .avatar.lg{ width:96px; height:96px; }

/* Overlays */
.overlay{ position:absolute; inset:0; z-index:30; display:none; flex-direction:column;
  align-items:center; justify-content:center; padding:26px; text-align:center; }
.overlay.show{ display:flex; }
#splash{ background:var(--bg) url(/game/bg/bg-pulse-purple.webp) center/cover; gap:14px; z-index:60; }
.splash-icon{ width:118px; height:118px; border-radius:28px; box-shadow:0 20px 50px -16px rgba(255,93,143,.7);
  animation:pop .6s cubic-bezier(.34,1.56,.64,1) both, beat 1.6s ease-in-out 1.2s infinite; }
.splash-word{ font-family:var(--display); font-weight:700; font-size:38px; letter-spacing:.3px; }
.splash-tag{ color:var(--muted); font-weight:700; }

/* Identity */
#identity{ background:var(--bg) url(/game/bg/bg-grid-violet.webp) center/cover; }
.id-card{ width:100%; }
.id-card h1{ font-family:var(--display); font-size:30px; margin:0 0 4px; }
.id-list{ display:grid; gap:12px; margin-top:22px; }
.id-row{ display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:12px 14px; text-align:left; transition:transform .2s, border-color .2s; }
.id-row:active{ transform:scale(.98); } .id-row:hover{ border-color:var(--pink); }
.id-row .nm{ font-family:var(--display); font-weight:600; font-size:18px; }
.id-row .go{ margin-left:auto; color:var(--pink); font-family:var(--display); font-weight:700; }

/* App layout */
#app{ position:absolute; inset:0; display:flex; flex-direction:column; }
#topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px;
  background:linear-gradient(#150f2bcc,#150f2b00); }
.me{ display:flex; align-items:center; gap:10px; }
.me-name{ font-family:var(--display); font-weight:600; font-size:16px; line-height:1; }
.me-sub{ font-size:12px; color:var(--muted); }
.chip-premium{ background:linear-gradient(135deg,var(--gold),#ff9e3d); color:#3a2400; font-weight:700;
  border-radius:999px; padding:7px 13px; font-size:13px; box-shadow:0 8px 18px -8px rgba(255,158,61,.8); }

.view{ flex:1; overflow-y:auto; padding:8px 16px 18px; -webkit-overflow-scrolling:touch; }
.view::-webkit-scrollbar{ display:none; }
.view.anim{ animation:viewin .28s ease; }
@keyframes viewin{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }
.sec-title{ font-family:var(--display); font-weight:600; font-size:14px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin:14px 2px 10px; }
.h-hero{ font-family:var(--display); font-weight:700; font-size:24px; margin:6px 2px 2px; }
.streak-pill{ display:inline-flex; align-items:center; gap:6px; margin:2px 2px 4px; padding:5px 11px 5px 7px;
  background:rgba(255,206,74,.14); border:1px solid rgba(255,206,74,.4); border-radius:999px;
  color:var(--gold); font-family:var(--display); font-weight:600; font-size:13px; }
.streak-pill img{ width:18px; height:18px; }

/* Tab bar */
#tabbar{ display:flex; background:#140e2bee; border-top:1px solid var(--line);
  padding:8px 8px calc(8px + var(--safe-b)); }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--faint);
  font-family:var(--display); font-weight:600; font-size:11px; position:relative; padding:4px 0; }
.tab img{ width:26px; height:26px; opacity:.55; transition:transform .2s, opacity .2s; }
.tab.active{ color:var(--fg); } .tab.active img{ opacity:1; transform:translateY(-2px) scale(1.08); }
.tab .badge{ position:absolute; top:0; right:50%; margin-right:-22px; width:9px; height:9px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 2px #140e2b; }

/* People cards (home) */
.person{ display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:22px; padding:12px 14px; margin-bottom:12px; }
.person .av-wrap{ position:relative; }
.dot{ position:absolute; bottom:1px; right:1px; width:13px; height:13px; border-radius:50%;
  background:var(--faint); border:2.5px solid var(--card); }
.dot.on{ background:var(--ok); } .dot.on::after{ content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--ok); opacity:.6; animation:ring 2s ease-out infinite; }
.person .info{ flex:1; min-width:0; }
.person .nm{ font-family:var(--display); font-weight:600; font-size:17px; }
.person .st{ font-size:12.5px; color:var(--muted); }
.person .st.hot{ color:var(--pink); font-weight:700; }
.person.incoming{ border-color:var(--pink); background:linear-gradient(120deg, rgba(255,93,143,.16), var(--card));
  box-shadow:0 0 0 1px rgba(255,93,143,.3), 0 12px 26px -16px rgba(255,93,143,.7); animation:nudge 2.4s ease-in-out infinite; }
.pulse-btn.back{ box-shadow:0 0 0 3px rgba(255,93,143,.35); animation:beat 1s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(2px) } }
.pulse-btn{ width:64px; height:64px; border-radius:50%; position:relative; flex:none;
  background-size:cover; transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
.pulse-btn:active{ transform:scale(.9); }
.pulse-btn.sent{ animation:beat 1.1s ease-in-out infinite; }
.pulse-btn .ripple{ position:absolute; inset:0; border-radius:50%; border:3px solid var(--pink); opacity:0; }
.pulse-btn.go .ripple{ animation:ripple .7s ease-out; }

/* Generic cards / buttons */
.card{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:16px; }
.btn{ font-family:var(--display); font-weight:600; border-radius:16px; padding:14px 18px; font-size:16px;
  width:100%; transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .2s; }
.btn:active{ transform:scale(.97); }
.btn.primary{ background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff;
  box-shadow:0 14px 30px -12px rgba(255,93,143,.7); }
.btn.ghost{ background:rgba(255,255,255,.06); border:1px solid var(--line2); color:var(--fg); }
.btn.gold{ background:linear-gradient(135deg,var(--gold),#ff9e3d); color:#3a2400; }
.btn.row{ width:auto; }

.empty{ text-align:center; color:var(--muted); padding:40px 20px; }
.empty img{ width:84px; height:84px; opacity:.9; margin-bottom:10px; }

/* Echo sheet */
#echo.sheet{ justify-content:flex-end; padding:0; background:rgba(8,5,18,.72); z-index:40;
  backdrop-filter:blur(3px); }
.echo-card{ width:100%; background:var(--bg2) url(/game/bg/bg-grid-violet-2.webp) center/cover;
  border-radius:28px 28px 0 0; border-top:1px solid var(--line2); padding:22px 20px calc(24px + var(--safe-b));
  animation:slideup .4s cubic-bezier(.16,1,.3,1); max-height:92%; overflow-y:auto; }
.echo-head{ text-align:center; margin-bottom:14px; }
.echo-burst{ width:96px; height:96px; margin:0 auto 6px; display:block; animation:pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.echo-title{ font-family:var(--display); font-weight:700; font-size:24px; }
.echo-prompt{ font-family:var(--display); font-weight:600; font-size:20px; text-align:center; margin:14px 6px 18px; line-height:1.25; }
.opts{ display:grid; gap:12px; }
.opt{ font-family:var(--display); font-weight:600; font-size:18px; padding:16px; border-radius:18px;
  background:var(--card2); border:1px solid var(--line2); color:var(--fg); text-align:center;
  transition:transform .15s, background .2s, border-color .2s; }
.opt:active{ transform:scale(.97); }
.opt.sel{ background:linear-gradient(135deg,var(--pink),var(--purple)); border-color:transparent; color:#fff; }
.opt.dim{ opacity:.5; }
.wait{ text-align:center; padding:20px 8px; }
.wait .pulse-line{ width:140px; margin:6px auto 0; opacity:.95; animation:beat 1.4s ease-in-out infinite; }
.reveal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 6px; }
.reveal-cell{ background:var(--card2); border:1px solid var(--line2); border-radius:18px; padding:14px 10px; text-align:center;
  animation:pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.reveal-cell .who{ font-size:12px; color:var(--muted); font-weight:700; margin-bottom:8px; }
.reveal-cell .ans{ font-family:var(--display); font-weight:700; font-size:18px; }
.reveal-cell img.shot{ width:100%; border-radius:12px; aspect-ratio:1; object-fit:cover; }
.match-line{ text-align:center; font-family:var(--display); font-weight:600; color:var(--gold); margin:10px 0; }
.coin-earned{ display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0 2px;
  font-family:var(--display); font-weight:700; color:var(--gold); animation:pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.coin-earned img{ width:20px; height:20px; }
.tip{ background:rgba(86,194,255,.12); border:1px solid rgba(86,194,255,.35); border-radius:18px;
  padding:12px 14px; font-size:13.5px; color:var(--fg); margin:4px 0 8px; line-height:1.45; }
.tip b{ color:var(--sky); font-family:var(--display); }
.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti i{ position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:fall linear forwards; }
.selfie-pick{ display:grid; gap:10px; }
.selfie-pick label{ display:block; }
.file-in{ display:none; }
.cam-wrap{ width:100%; aspect-ratio:1; border-radius:20px; overflow:hidden; background:#000; border:1px solid var(--line2); margin-bottom:12px; }
.cam-wrap video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.shot-preview{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:20px; transform:scaleX(-1);
  border:1px solid var(--line2); margin-bottom:12px; animation:pop .4s cubic-bezier(.34,1.56,.64,1) both; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row2 .btn{ width:auto; }

/* Rewards */
.reward-hero{ text-align:center; background:var(--card) url(/game/bg/bg-sky-peach.webp) right -40px bottom -10px/180px no-repeat;
  border:1px solid var(--line); border-radius:24px; padding:18px; margin:8px 0 6px; }
.coins{ font-family:var(--display); font-weight:700; font-size:30px; display:inline-flex; align-items:center; gap:8px; }
.coins img{ width:30px; height:30px; }
.shop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.shop-item{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:14px; text-align:center; }
.shop-item img{ width:60px; height:60px; object-fit:contain; }
.shop-item .lbl{ font-family:var(--display); font-weight:600; margin-top:6px; }
.shop-item .price{ display:inline-flex; align-items:center; gap:5px; color:var(--gold); font-weight:700; font-size:13px; margin-top:2px; }
.shop-item .price img{ width:16px; height:16px; }

/* Profile */
.profile-head{ text-align:center; padding:14px 0 6px; }
.profile-head .avatar{ box-shadow:0 14px 30px -12px rgba(0,0,0,.6); }
.profile-name{ font-family:var(--display); font-weight:700; font-size:24px; margin-top:8px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:12px 6px; text-align:center; }
.stat .n{ font-family:var(--display); font-weight:700; font-size:22px; }
.stat .l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.avatar-pick{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.avatar-pick img{ width:54px; height:54px; border-radius:50%; border:2px solid transparent; transition:transform .15s, border-color .2s; }
.avatar-pick img:active{ transform:scale(.92); }
.avatar-pick img.sel{ border-color:var(--pink); transform:scale(1.05); }

/* Paywall */
#paywall.modal{ background:rgba(8,5,18,.8); z-index:50; backdrop-filter:blur(4px); }
.pay-card{ width:100%; background:var(--bg2); border:1px solid var(--line2); border-radius:26px; padding:22px;
  animation:pop .4s cubic-bezier(.34,1.56,.64,1) both; }
.pay-card h2{ font-family:var(--display); font-weight:700; font-size:26px; text-align:center; margin:6px 0; }
.perk{ display:flex; align-items:center; gap:10px; margin:8px 2px; color:var(--fg); }
.perk img{ width:26px; height:26px; }

/* Toast */
.toast{ position:absolute; left:50%; bottom:88px; transform:translateX(-50%) translateY(20px);
  background:#fff; color:#1c1340; font-weight:700; font-family:var(--display); padding:11px 18px; border-radius:14px;
  box-shadow:0 16px 30px -10px rgba(0,0,0,.5); opacity:0; transition:.3s; z-index:70; pointer-events:none; max-width:84%; text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@keyframes pop{ from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none} }
@keyframes beat{ 0%,100%{transform:scale(1)} 45%{transform:scale(1.12)} 60%{transform:scale(1.04)} }
@keyframes ring{ 0%{transform:scale(.7); opacity:.7} 100%{transform:scale(1.9); opacity:0} }
@keyframes ripple{ 0%{transform:scale(.6); opacity:.8} 100%{transform:scale(2.1); opacity:0} }
@keyframes slideup{ from{transform:translateY(100%)} to{transform:none} }
@keyframes fall{ to{ transform:translateY(120%) rotate(540deg); } }