/* LifeQuest — thème dark gamifié, mobile-first */
:root {
  --bg: #0F0F1A; --bg2: #17172A; --card: #1D1D33; --card2: #252542;
  --text: #EDEDF7; --muted: #9B9BB4; --line: #2E2E4E;
  --accent: #6C5CE7; --accent2: #A29BFE; --gold: #FDCB6E;
  --green: #00B894; --red: #E17055; --pink: #E84393;
  --radius: 16px; --shadow: 0 8px 32px rgba(0,0,0,.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh; padding-bottom: 76px;
}
a { color: var(--accent2); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
input, select, textarea { font-family: inherit; }

/* ─── Layout ─── */
.wrap { max-width: 680px; margin: 0 auto; padding: 16px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; position:sticky; top:0; z-index:40;
  background: rgba(15,15,26,.85); backdrop-filter: blur(12px); border-bottom:1px solid var(--line); }
.topbar .logo { font-weight:800; font-size:19px; letter-spacing:-.5px; }
.topbar .logo span { background: linear-gradient(135deg,var(--accent),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.streak-chip { display:flex; align-items:center; gap:5px; background:var(--card); border:1px solid var(--line); border-radius:99px; padding:5px 12px; font-weight:700; font-size:14px; }

.tabbar { position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex; justify-content:space-around;
  background: rgba(23,23,42,.92); backdrop-filter: blur(14px); border-top:1px solid var(--line); padding:6px 0 max(6px, env(safe-area-inset-bottom)); }
.tabbar a { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); font-size:10px; font-weight:600; padding:4px 12px; border-radius:12px; }
.tabbar a.active { color:var(--text); }
.tabbar a .ico { font-size:21px; }
.tabbar a.active .ico { transform: scale(1.14); }

/* ─── Cards & UI ─── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.card.click { cursor:pointer; transition: transform .12s, border-color .12s; }
.card.click:active { transform: scale(.98); }
.card.click:hover { border-color: var(--accent); }
h1 { font-size:26px; letter-spacing:-.5px; margin-bottom:4px; }
h2 { font-size:19px; margin: 18px 0 10px; }
h3 { font-size:16px; }
.muted { color:var(--muted); font-size:14px; }
.small { font-size:12.5px; }
.row { display:flex; align-items:center; gap:12px; }
.grow { flex:1; min-width:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; padding:13px 22px;
  font-weight:700; font-size:15px; background:var(--card2); color:var(--text); transition: transform .1s, filter .15s; width:100%; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg,var(--accent),#8E7CF8); box-shadow: 0 6px 20px rgba(108,92,231,.4); }
.btn.gold { background: linear-gradient(135deg,#F0A500,var(--gold)); color:#1a1a05; }
.btn.ghost { background:transparent; border:1px solid var(--line); }
.btn.sm { padding:8px 14px; font-size:13.5px; width:auto; border-radius:10px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

input, textarea, select { width:100%; background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  color:var(--text); padding:13px 15px; font-size:15px; margin-bottom:10px; }
input:focus, textarea:focus { outline:none; border-color:var(--accent); }
label { font-size:13px; color:var(--muted); font-weight:600; display:block; margin-bottom:5px; }

/* ─── XP / niveaux ─── */
.xpbar { height:10px; background:var(--bg2); border-radius:99px; overflow:hidden; position:relative; }
.xpbar > div { height:100%; border-radius:99px; background: linear-gradient(90deg,var(--accent),var(--pink)); transition: width .9s cubic-bezier(.22,1,.36,1); }
.lvl-ring { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; flex-shrink:0; background: conic-gradient(var(--ring-color,var(--accent)) calc(var(--pct,0)*1%), var(--bg2) 0); position:relative; }
.lvl-ring::before { content:''; position:absolute; inset:4px; background:var(--card); border-radius:50%; }
.lvl-ring span { position:relative; z-index:1; }
.lvl-big { font-size:44px; font-weight:900; letter-spacing:-2px; line-height:1; }
.tier-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); }

/* ─── Chemin de niveaux ─── */
.path { display:flex; flex-direction:column; gap:0; margin:14px 0; }
.path-node { display:flex; gap:14px; }
.path-rail { display:flex; flex-direction:column; align-items:center; width:36px; flex-shrink:0; }
.path-dot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;
  background:var(--bg2); border:2px solid var(--line); color:var(--muted); flex-shrink:0; }
.path-dot.done { background:var(--green); border-color:var(--green); color:#fff; }
.path-dot.current { background: linear-gradient(135deg,var(--accent),var(--pink)); border-color:transparent; color:#fff; box-shadow:0 0 18px rgba(108,92,231,.6); animation: pulse 1.8s infinite; }
.path-line { width:3px; flex:1; min-height:22px; background:var(--line); }
.path-line.done { background:var(--green); }
.path-body { flex:1; padding-bottom:20px; min-width:0; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

.challenge-card { background: linear-gradient(145deg,var(--card),var(--card2)); border:1px solid var(--accent); border-radius:var(--radius); padding:18px; box-shadow: var(--shadow); }
.locked { opacity:.45; filter:grayscale(.4); }

/* ─── Badges ─── */
.badge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.badge-item { text-align:center; padding:14px 6px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.badge-item .ico { font-size:32px; display:block; margin-bottom:6px; }
.badge-item.locked { opacity:.3; }
.badge-item .nm { font-size:11px; font-weight:700; }

/* ─── Avatars ─── */
.avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.avatar.lg { width:76px; height:76px; font-size:38px; }

/* ─── Modal & toast ─── */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); z-index:90; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px 22px; max-width:400px; width:100%; text-align:center; animation: pop .35s cubic-bezier(.34,1.56,.64,1); max-height:86vh; overflow-y:auto; }
@keyframes pop { from { transform:scale(.7); opacity:0 } to { transform:scale(1); opacity:1 } }
#toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--card2); border:1px solid var(--line);
  color:var(--text); padding:12px 20px; border-radius:14px; font-weight:600; font-size:14px; opacity:0; transition:.3s; z-index:100; pointer-events:none; box-shadow:var(--shadow); max-width:88vw; text-align:center; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:95; }

/* ─── Level-up overlay ─── */
.levelup-num { font-size:80px; font-weight:900; background:linear-gradient(135deg,var(--gold),#fff); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.1; }
.badge-pop { font-size:64px; animation: badgespin .8s cubic-bezier(.34,1.56,.64,1); display:inline-block; }
@keyframes badgespin { from { transform:scale(0) rotate(-180deg) } to { transform:scale(1) rotate(0) } }

/* ─── Pub ─── */
.ad-slot { background:repeating-linear-gradient(45deg,var(--bg2),var(--bg2) 12px,var(--card) 12px,var(--card) 24px);
  border:1px dashed var(--line); border-radius:var(--radius); min-height:90px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:12px; margin-bottom:12px; }

/* ─── Landing ─── */
.hero { text-align:center; padding:56px 20px 30px; }
.hero h1 { font-size:36px; line-height:1.15; letter-spacing:-1px; }
.hero h1 span { background:linear-gradient(135deg,var(--accent2),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--muted); font-size:17px; margin:14px auto 26px; max-width:440px; }
.feature-emo { font-size:36px; }

/* ─── Divers ─── */
.chip { display:inline-flex; align-items:center; gap:5px; background:var(--bg2); border:1px solid var(--line); border-radius:99px; padding:4px 12px; font-size:12.5px; font-weight:600; color:var(--muted); }
.chip.sensitive { color:var(--pink); border-color:var(--pink); }
.divider { height:1px; background:var(--line); margin:16px 0; }
.center { text-align:center; }
.q-option { display:block; width:100%; text-align:left; background:var(--bg2); border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:14px 16px; margin-bottom:8px; font-size:14.5px; transition:.12s; }
.q-option:hover, .q-option.sel { border-color:var(--accent); background:var(--card2); }
.leader-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.leader-row:last-child { border:none; }
.rank { width:28px; font-weight:800; color:var(--muted); text-align:center; }
.rank.top { color:var(--gold); }
.empty { text-align:center; padding:40px 20px; color:var(--muted); }
.empty .emo { font-size:44px; display:block; margin-bottom:10px; }
@media (min-width:720px) { .hero h1 { font-size:46px; } }