/* ===== Rizz Lab — app shell design system (Phase 5) ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --rl-bg:#0b0b10; --rl-bg2:#111119; --rl-card:#17171f; --rl-card2:#1e1e28; --rl-line:#2a2a36;
  --rl-ink:#eceaf2; --rl-ink2:#c7c4d4; --rl-muted:#928fa1;
  --rl-violet:#a855f7; --rl-rose:#e0568a; --rl-blue:#7aa2f7; --rl-good:#7bd88f; --rl-warn:#e6b45c; --rl-red:#e07a86;
  --rl-grad:linear-gradient(135deg,#e0568a 0%,#a855f7 100%);
  --rl-grad-soft:linear-gradient(135deg,rgba(224,86,138,.16),rgba(168,85,247,.16));
  --rl-r:18px; --rl-r2:13px; --rl-r3:10px;
  --rl-sh:0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45);
  --rl-sh2:0 10px 34px rgba(0,0,0,.55);
  --rl-top:52px; --rl-bot:66px; --rl-ease:cubic-bezier(.2,.8,.25,1);
  --rl-safe:env(safe-area-inset-bottom,0px);
}
/* hide any legacy top scroll-nav */
#gnav,#gfade,#gnavcss{display:none!important}

.rl-app{background:var(--rl-bg);color:var(--rl-ink);
  padding-top:calc(var(--rl-top) + env(safe-area-inset-top,0px));
  padding-bottom:calc(var(--rl-bot) + var(--rl-safe));
  background-image:radial-gradient(ellipse 90% 40% at 50% -10%,rgba(168,85,247,.10),transparent 55%),radial-gradient(ellipse 70% 40% at 90% 105%,rgba(224,86,138,.07),transparent 60%);
  background-attachment:fixed;}
.rl-uifont{font-family:'Inter',system-ui,-apple-system,sans-serif}

/* ---- top bar ---- */
.rl-topbar{position:fixed;top:0;left:0;right:0;height:calc(var(--rl-top) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  z-index:9000;display:flex;align-items:center;gap:10px;padding-left:14px;padding-right:12px;
  background:rgba(11,11,16,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rl-line)}
.rl-logo{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.12rem;color:#fff;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:6px}
.rl-logo .flame{filter:drop-shadow(0 0 6px rgba(224,86,138,.6))}
.rl-topspace{flex:1}
.rl-topchip{display:flex;align-items:center;gap:5px;background:var(--rl-card2);border:1px solid var(--rl-line);border-radius:999px;padding:5px 10px;font:700 .74rem/1 'Inter',sans-serif;color:var(--rl-ink);text-decoration:none}
.rl-topchip .lv{color:var(--rl-violet)} .rl-topchip .fl{color:var(--rl-rose)}
.rl-help{width:32px;height:32px;border-radius:50%;border:1px solid var(--rl-line);background:var(--rl-card2);color:var(--rl-ink2);font:700 .95rem/1 'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rl-help:active{transform:scale(.92)}

/* ---- bottom tab bar ---- */
.rl-bottombar{position:fixed;bottom:0;left:0;right:0;z-index:9000;display:flex;
  padding:6px 4px calc(6px + var(--rl-safe));background:rgba(13,13,19,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--rl-line)}
.rl-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--rl-muted);
  padding:5px 2px;border-radius:12px;transition:color .15s var(--rl-ease),transform .12s var(--rl-ease)}
.rl-tab .ic{font-size:1.28rem;line-height:1;transition:transform .18s var(--rl-ease)}
.rl-tab .lb{font:700 .62rem/1 'Inter',sans-serif;letter-spacing:.2px}
.rl-tab:active{transform:scale(.9)}
.rl-tab.active{color:#fff}
.rl-tab.active .ic{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 3px 8px rgba(168,85,247,.5))}
.rl-tab.active .lb{background:var(--rl-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- generic app components (opt-in via rl- classes) ---- */
.rl-wrap{max-width:640px;margin:0 auto;padding:14px 14px}
.rl-h1{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:#fff;margin:0}
.rl-sub{font:400 .82rem/1.4 'Inter',sans-serif;color:var(--rl-muted);margin:3px 0 0}
.rl-card{background:var(--rl-card);border:1px solid var(--rl-line);border-radius:var(--rl-r);padding:15px 16px;box-shadow:var(--rl-sh);animation:rl-up .3s var(--rl-ease) both}
.rl-card.tap{cursor:pointer;transition:transform .14s var(--rl-ease),border-color .14s}
.rl-card.tap:active{transform:scale(.985)}
.rl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;
  font:800 .95rem/1 'Inter',sans-serif;padding:14px 20px;cursor:pointer;transition:transform .12s var(--rl-ease),filter .15s,box-shadow .2s;color:#fff}
.rl-btn:active{transform:scale(.96)}
.rl-btn-primary{background:var(--rl-grad);box-shadow:0 8px 22px rgba(168,85,247,.34)}
.rl-btn-primary:active{box-shadow:0 4px 12px rgba(168,85,247,.3)}
.rl-btn-ghost{background:var(--rl-card2);color:var(--rl-ink);border:1px solid var(--rl-line)}
.rl-btn-block{display:flex;width:100%}
.rl-chip{display:inline-flex;align-items:center;gap:5px;background:var(--rl-card2);border:1px solid var(--rl-line);border-radius:999px;padding:5px 11px;font:700 .74rem/1 'Inter',sans-serif;color:var(--rl-ink2)}
.rl-grad-txt{background:var(--rl-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* xp / progress */
.rl-xpbar{height:11px;background:var(--rl-card2);border-radius:999px;overflow:hidden;border:1px solid var(--rl-line)}
.rl-xpfill{height:100%;background:var(--rl-grad);border-radius:999px;transition:width .6s var(--rl-ease)}

/* skeleton loader */
.rl-skel{background:linear-gradient(100deg,var(--rl-card) 30%,var(--rl-card2) 50%,var(--rl-card) 70%);background-size:200% 100%;animation:rl-shim 1.2s infinite;border-radius:var(--rl-r3)}
@keyframes rl-shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* tooltip / info */
.rl-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--rl-card2);border:1px solid var(--rl-line);color:var(--rl-muted);font:700 .62rem/1 'Inter',sans-serif;cursor:pointer;vertical-align:middle;margin-left:4px}
.rl-info:active{transform:scale(.85)}
.rl-tipmodal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rl-tipmodal.on{display:flex;animation:rl-fade .18s}
.rl-tipbox{background:var(--rl-card);border:1px solid var(--rl-line);border-radius:var(--rl-r);padding:18px 18px 14px;max-width:340px;box-shadow:var(--rl-sh2);animation:rl-pop .22s var(--rl-ease)}
.rl-tipbox h4{font-family:'Fraunces',serif;margin:0 0 6px;color:#fff;font-size:1.05rem}
.rl-tipbox p{font:400 .88rem/1.5 'Inter',sans-serif;color:var(--rl-ink2);margin:0 0 12px}
.rl-tipbox button{width:100%;border:0;border-radius:12px;background:var(--rl-card2);color:var(--rl-ink);font:700 .88rem 'Inter',sans-serif;padding:11px;cursor:pointer}

/* onboarding */
.rl-onb{position:fixed;inset:0;z-index:10001;display:flex;flex-direction:column;background:var(--rl-bg);
  background-image:radial-gradient(ellipse 100% 50% at 50% 0%,rgba(168,85,247,.18),transparent 60%),radial-gradient(ellipse 80% 40% at 50% 100%,rgba(224,86,138,.14),transparent 60%);
  padding:env(safe-area-inset-top,0) 0 calc(env(safe-area-inset-bottom,0) + 16px);animation:rl-fade .25s}
.rl-onb-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 28px}
.rl-onb-emoji{font-size:4.5rem;margin-bottom:14px;filter:drop-shadow(0 6px 18px rgba(168,85,247,.45));animation:rl-pop .5s var(--rl-ease)}
.rl-onb h2{font-family:'Fraunces',serif;font-size:1.7rem;color:#fff;margin:0 0 10px;letter-spacing:-.02em}
.rl-onb p{font:400 1rem/1.55 'Inter',sans-serif;color:var(--rl-ink2);margin:0;max-width:340px}
.rl-onb-dots{display:flex;gap:8px;justify-content:center;margin:18px 0}
.rl-onb-dot{width:8px;height:8px;border-radius:50%;background:var(--rl-line);transition:all .2s}
.rl-onb-dot.on{width:22px;background:var(--rl-grad)}
.rl-onb-foot{padding:0 24px;display:flex;flex-direction:column;gap:10px}
.rl-onb-skip{position:absolute;top:calc(env(safe-area-inset-top,0) + 14px);right:18px;background:none;border:0;color:var(--rl-muted);font:600 .85rem 'Inter',sans-serif;cursor:pointer;z-index:2}

/* confetti + level-up modal */
.rl-cf{position:fixed;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:10002;animation:rl-fall 1.1s ease-out forwards}
@keyframes rl-fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(160px) rotate(460deg)}}
.rl-lvl{position:fixed;inset:0;z-index:10001;display:none;align-items:center;justify-content:center;padding:26px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rl-lvl.on{display:flex;animation:rl-fade .2s}
.rl-lvlbox{background:var(--rl-card);border:1px solid var(--rl-line);border-radius:22px;padding:26px 22px;text-align:center;max-width:320px;box-shadow:var(--rl-sh2);animation:rl-pop .3s var(--rl-ease)}
.rl-lvlbox .big{font-size:3.2rem;margin-bottom:6px;filter:drop-shadow(0 4px 14px rgba(224,86,138,.5))}
.rl-lvlbox h3{font-family:'Fraunces',serif;color:#fff;font-size:1.4rem;margin:2px 0 4px}
.rl-lvlbox .rank{font:800 1rem 'Inter',sans-serif;margin:6px 0 12px}
.rl-lvlbox p{font:400 .9rem/1.5 'Inter',sans-serif;color:var(--rl-ink2);margin:0 0 14px}
.rl-lvlbox button{width:100%;border:0;border-radius:14px;background:var(--rl-grad);color:#fff;font:800 .95rem 'Inter',sans-serif;padding:13px;cursor:pointer}

/* toast (xp gains) */
.rl-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--rl-bot) + var(--rl-safe) + 12px);z-index:9500;
  background:var(--rl-card);border:1px solid var(--rl-line);border-radius:999px;padding:9px 16px;font:800 .82rem 'Inter',sans-serif;color:#fff;box-shadow:var(--rl-sh2);display:flex;align-items:center;gap:7px;animation:rl-toast 2.2s var(--rl-ease) forwards;pointer-events:none}
@keyframes rl-toast{0%{opacity:0;transform:translateX(-50%) translateY(14px)}12%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}

@keyframes rl-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rl-fade{from{opacity:0}to{opacity:1}}
@keyframes rl-pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@media(min-width:760px){.rl-wrap{max-width:680px}}

/* ===== premium components ===== */
/* accent / glass cards with faint glow */
.rl-card-accent{background:linear-gradient(150deg,var(--rl-card2),var(--rl-card));border:1px solid rgba(168,85,247,.28);
  box-shadow:var(--rl-sh2),0 0 0 1px rgba(168,85,247,.06),inset 0 1px 0 rgba(255,255,255,.03)}
.rl-card-glass{background:linear-gradient(150deg,rgba(30,30,40,.9),rgba(23,23,31,.9));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.06);box-shadow:var(--rl-sh2)}
/* staggered entrance for lists (set --i on children) */
.rl-stagger>*{animation:rl-up .4s var(--rl-ease) both;animation-delay:calc(var(--i,0)*45ms)}

/* stat tiles */
.rl-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:9px}
.rl-tile{background:var(--rl-card);border:1px solid var(--rl-line);border-radius:var(--rl-r2);padding:12px 10px;text-align:center;box-shadow:var(--rl-sh)}
.rl-tile .v{font:800 1.5rem/1 'Inter',sans-serif;color:#fff}
.rl-tile .k{font:600 .64rem/1.2 'Inter',sans-serif;color:var(--rl-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:5px}

/* signature score badge (count-up target) */
.rl-score{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;border-radius:16px;
  font-family:'Inter',sans-serif;position:relative;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.4);transition:background .5s var(--rl-ease)}
.rl-score .n{font-weight:800;font-size:1.5rem;color:#0b0b10;line-height:1}
.rl-score.pop{animation:rl-scorepop .5s var(--rl-ease)}
@keyframes rl-scorepop{0%{transform:scale(.7)}55%{transform:scale(1.12)}100%{transform:scale(1)}}

/* compatibility meter */
.rl-meter{height:14px;background:var(--rl-card2);border-radius:999px;overflow:hidden;border:1px solid var(--rl-line);position:relative}
.rl-meterfill{height:100%;border-radius:999px;width:0;transition:width .7s var(--rl-ease)}

/* segmented control */
.rl-seg{display:inline-flex;background:var(--rl-card2);border:1px solid var(--rl-line);border-radius:999px;padding:3px;gap:2px}
.rl-seg button{border:0;background:transparent;color:var(--rl-muted);font:700 .78rem 'Inter',sans-serif;padding:7px 13px;border-radius:999px;cursor:pointer;transition:color .15s,transform .12s}
.rl-seg button:active{transform:scale(.94)}
.rl-seg button.on{background:var(--rl-grad);color:#fff;box-shadow:0 3px 10px rgba(168,85,247,.32)}

/* toggle switch */
.rl-switch{width:44px;height:26px;border-radius:999px;background:var(--rl-card2);border:1px solid var(--rl-line);position:relative;cursor:pointer;transition:background .2s var(--rl-ease);flex:0 0 auto}
.rl-switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#c7c4d4;transition:transform .2s var(--rl-ease),background .2s}
.rl-switch.on{background:var(--rl-grad);border-color:transparent}
.rl-switch.on:after{transform:translateX(18px);background:#fff}

/* streak flame — gentle idle flicker */
.rl-flame{display:inline-block;transform-origin:center bottom;animation:rl-flick 2.4s ease-in-out infinite}
@keyframes rl-flick{0%,100%{transform:scale(1) rotate(-1deg)}25%{transform:scale(1.07) rotate(1deg)}50%{transform:scale(.97) rotate(-1deg)}75%{transform:scale(1.05) rotate(1.5deg)}}

/* bottom sheet modal */
.rl-sheet{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55)}
.rl-sheet.on{display:flex;animation:rl-fade .18s}
.rl-sheetbox{width:100%;max-width:520px;background:var(--rl-card);border:1px solid var(--rl-line);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + var(--rl-safe));box-shadow:var(--rl-sh2);animation:rl-sheetup .28s var(--rl-ease)}
.rl-sheetbox .grab{width:38px;height:4px;border-radius:999px;background:var(--rl-line);margin:0 auto 12px}
@keyframes rl-sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* typing indicator */
.rl-typing{display:inline-flex;gap:4px;align-items:center;padding:10px 14px}
.rl-typing span{width:7px;height:7px;border-radius:50%;background:var(--rl-muted);animation:rl-typedot 1.2s infinite}
.rl-typing span:nth-child(2){animation-delay:.18s}.rl-typing span:nth-child(3){animation-delay:.36s}
@keyframes rl-typedot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rl-flame{animation:none}
}