/* ============================================================
   StreetQuants v2 — onboarding, voice, league, settings, illustrations
   ============================================================ */

/* ---------- onboarding wizard ---------- */
.onb{position:fixed;inset:0;background:var(--paper);z-index:300;display:flex;flex-direction:column}
.onb-top{height:90px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.onb-top .x-close{position:absolute;right:22px;top:24px}
.onb-bar{width:min(420px,70%);height:16px;background:#e0e5f3;border-radius:9px;overflow:hidden}
.onb-bar i{display:block;height:100%;background:var(--mint);border-radius:9px;transition:width .4s cubic-bezier(.22,1,.36,1)}
.onb-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 24px;overflow-y:auto}
.onb-art{width:100%;display:grid;place-items:center;margin-bottom:6px}
.onb-art svg{width:170px;height:170px;animation:bob 3s ease-in-out infinite}
.onb-title{font-size:clamp(24px,3vw,32px);font-weight:900;text-align:center;max-width:560px}
.onb-sub{color:var(--ink-soft);font-weight:700;text-align:center;max-width:520px;margin-top:10px;line-height:1.5}
.onb-opts{display:flex;flex-direction:column;gap:12px;margin-top:26px;width:min(480px,100%)}
.onb-opts .choice{padding:16px 18px}
.onb-opts .choice .big-emoji{font-size:30px}
.onb-foot{padding:18px 24px 30px;display:flex;justify-content:center;flex-shrink:0}
.onb-foot .btn{width:min(480px,100%)}
.onb-hint{font:700 12px var(--font);color:#a7adc4;letter-spacing:.04em;text-transform:uppercase;margin-top:10px}

/* goal picker */
.goal-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.goal-card{width:150px;background:#fff;border:2px solid #dfe3f0;border-bottom-width:4px;border-radius:18px;padding:18px 10px;text-align:center;cursor:pointer;transition:all .12s}
.goal-card:hover{border-color:#b9c6f2;background:#f8faff}
.goal-card.sel{border-color:var(--mint);background:#eafff5;box-shadow:inset 0 0 0 1px var(--mint)}
.goal-card .gi{font-size:34px}
.goal-card .gv{font:900 19px var(--font);margin-top:8px}
.goal-card .gl{font:700 11.5px var(--font);color:var(--ink-soft);margin-top:3px}

/* voice demo chips */
.voice-demo{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.vchip{border:2px solid #dfe3f0;background:#fff;border-radius:12px;padding:10px 16px;font:800 13px var(--font);cursor:pointer;color:var(--ink);box-shadow:0 3px 0 #dfe3f0}
.vchip:active{transform:translateY(3px);box-shadow:none}

/* ---------- splash / big screens ---------- */
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:30px}
.splash .logo-art{width:190px;height:190px}
.splash h1{font-size:clamp(34px,5vw,52px);letter-spacing:-.02em}
.splash .tag{margin-top:6px}
.splash .hero-btns{display:flex;flex-direction:column;gap:12px;margin-top:34px;width:min(400px,90%)}
.splash .fine{color:#a7adc4;font:700 12.5px var(--font);margin-top:18px}

/* ---------- settings screen ---------- */
.set-row{display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:10px;box-shadow:0 2px 0 var(--line)}
.set-row .si{font-size:24px;width:34px;text-align:center}
.set-row .st{flex:1}
.set-row .st b{display:block;font-size:15px}
.set-row .st span{font-size:12.5px;color:var(--ink-soft);font-weight:700}
.switch{position:relative;width:58px;height:32px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .tr{position:absolute;inset:0;background:#d7dcf0;border-radius:16px;transition:.2s;cursor:pointer}
.switch .tr::after{content:'';position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.switch input:checked + .tr{background:var(--mint)}
.switch input:checked + .tr::after{transform:translateX(26px)}
.set-row select{font:800 14px var(--font);border:2px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;color:var(--ink);outline:none}
.set-row select:focus{border-color:var(--blue)}
.set-row input[type=range]{flex:1.2}
.set-sec{font:900 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:22px 0 10px}

/* ---------- league ---------- */
.lg-top{display:flex;gap:12px;align-items:center;background:linear-gradient(140deg,#58cc02,#17b8c4);border-radius:20px;padding:18px 22px;color:#fff;box-shadow:var(--shadow)}
.lg-top .em{font-size:40px}
.lg-top .tt{flex:1}
.lg-top .tt b{font-size:19px}
.lg-top .tt span{display:block;font-weight:700;font-size:13px;opacity:.9}
.lg-top .cd{font:800 13px var(--mono);background:rgba(255,255,255,.2);border-radius:10px;padding:8px 12px}
.lg-zone{display:flex;align-items:center;gap:8px;font:800 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:#1d875c;margin:16px 0 8px}
.lg-zone.dem{color:var(--red-d)}
.lg-list{background:var(--card);border:2px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.lg-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1.5px solid var(--line-soft)}
.lg-row:last-child{border-bottom:none}
.lg-row.me{background:#f0fff8}
.lg-row .rk{width:30px;font:900 16px var(--mono);color:var(--ink-soft);text-align:center}
.lg-row.top .rk{color:#d98e00}
.lg-row .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--paper);border:2px solid var(--line)}
.lg-row .nm{flex:1;font-weight:800;font-size:14.5px}
.lg-row .nm small{display:block;font-weight:700;color:var(--ink-soft);font-size:11.5px}
.lg-row .xp{font:800 15px var(--mono);color:var(--ink)}
.lg-row .xp::after{content:' XP';font-size:10px;color:var(--ink-soft)}
.lg-row.dem{opacity:.55}

/* ---------- speak button ---------- */
.speak-btn{width:44px;height:44px;border-radius:50%;border:2px solid #d7e0fb;background:#fff;color:var(--blue);cursor:pointer;display:grid;place-items:center;font-size:19px;box-shadow:0 3px 0 #d7e0fb;flex-shrink:0}
.speak-btn:hover{background:#f0f5ff}
.speak-btn:active{transform:translateY(3px);box-shadow:none}
.speak-btn.speaking{background:var(--blue);color:#fff;animation:pulse 1s infinite}
.speak-btn.off{opacity:.35}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,131,255,.5)}50%{box-shadow:0 0 0 8px rgba(79,131,255,0)}}

/* ---------- character line (lesson intro) ---------- */
.char-line{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(150deg,#eef4ff,#f4efff);border:2px solid #dfe5fb;border-radius:20px;padding:16px 18px}
.char-line .cavatar{width:64px;height:64px;flex-shrink:0;animation:bob 2.6s ease-in-out infinite}
.char-line .ctext{flex:1;font-weight:800;color:#2c3257;line-height:1.45;font-size:15.5px;padding-top:4px}
.char-line .ctext .mono{background:#fff;border:1.5px solid var(--line);border-radius:6px;padding:0 5px;font-size:13px}
.char-line .say-again{margin-top:8px;background:none;border:none;color:var(--blue);font:800 12px var(--font);cursor:pointer;letter-spacing:.04em;text-transform:uppercase;padding:0}
.char-line .say-again:hover{text-decoration:underline}

/* ---------- START pill on open nodes ---------- */
.start-pill{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--mint);color:#fff;font:900 12px var(--font);letter-spacing:.08em;padding:8px 16px;border-radius:12px;z-index:36;box-shadow:0 3px 0 var(--mint-xd);animation:bob 1.4s ease-in-out infinite;pointer-events:none}
.start-pill::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--mint)}

/* ---------- nav badges ---------- */
.bnav .bdg{position:absolute;top:6px;right:calc(50% - 26px);background:var(--pink);color:#fff;font:900 10px var(--font);min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.bnav button{position:relative}

/* ---------- quest XP chip color ---------- */
.quest .qr{min-width:44px;text-align:right}

/* ---------- illustration helpers ---------- */
.illo{display:block;width:100%;height:auto}
.mascot-line .face svg,.char-line .cavatar svg{width:100%;height:100%}
.face-svg{width:46px;height:46px}
.face-svg svg{width:100%;height:100%}