/* Mentora: brand, journey map, XP / streak / badges, practice visuals, answer feedback, combo bar.
   Uses the console tokens from app.css (works in Warm Sand too). No sound-wave visuals by design. */
.brand{background:transparent!important;box-shadow:none!important;width:56px;height:56px;padding:0;border-radius:14px}
.brand svg{width:56px!important;height:56px!important;filter:drop-shadow(0 0 10px color-mix(in srgb,#ffb020 30%,transparent))}
.topbar{flex-wrap:wrap}
.tb-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--text);margin-inline-end:auto}
.tb-brand svg{width:40px;height:40px;flex:none}
.tb-brand b{font-size:22px;font-weight:800;letter-spacing:.01em}
@media (min-width:1201px){ .tb-brand{display:none} }

/* ---------- journey ---------- */
.journey{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.jr-hud{display:flex;gap:10px;flex-wrap:wrap}
.jr-chip{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);box-shadow:var(--shadow)}
.jr-chip svg{width:22px;height:22px;flex:none}
.jr-chip b{font-size:18px}
#jrStreak svg{animation:mt-flick 1.3s ease-in-out infinite;transform-origin:50% 90%}
@keyframes mt-flick{50%{transform:scale(1.08,.93)}}
.jr-xp{flex:1;min-width:220px}
.jr-xp .bar{flex:1;min-width:80px;height:10px}
.jr-map{display:flex;flex-direction:column;gap:6px}
.chap{border-top:1px solid var(--line);padding-top:10px}
.chap:first-child{border-top:0;padding-top:0}
.chap.later{opacity:.72}
.chap-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chap-h .mm-ic{width:34px;height:34px}
.chap-h .mm-ic svg{width:20px;height:20px}
.chap-m{margin-inline-start:auto}
.chap-scroll{direction:ltr;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:4px 0 6px;overscroll-behavior-x:contain;scrollbar-width:thin}
.chap-path{position:relative;margin-left:auto}
.chap-path>svg{position:absolute;inset:0;overflow:visible}
.mp-line{fill:none;stroke:var(--line2);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.mp-done{fill:none;stroke:var(--good);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--good) 55%,transparent))}
.mp-n{position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-family:var(--mono,inherit);font-weight:800;font-size:18px;
  border:3px solid var(--line2);background:var(--card2);color:var(--muted-t);transition:transform .15s}
.mp-n svg{width:20px;height:20px}
.mp-n.done{border-color:var(--good);background:var(--good-soft);color:var(--good-t)}
.mp-n.cur{border-color:var(--accent);background:var(--accent-fill);color:var(--on-accent);animation:mt-ping 1.8s infinite}
.mp-n.locked{opacity:.55}
a.mp-n:hover{transform:scale(1.07)}
.mp-st{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:1px;color:var(--warn);white-space:nowrap;font-family:inherit}
.mp-st i{font-style:normal;color:var(--line2)}
@keyframes mt-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
.jr-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bdg{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:12.5px;color:var(--muted-t)}
.bdg svg{width:56px;height:56px}
.bdg-r{fill:var(--line2)} .bdg-p{fill:var(--card2);stroke:var(--line2);stroke-width:3}
.bdg text{font-family:var(--mono,inherit);font-weight:800;font-size:16px;fill:var(--dim)}
.bdg.on{color:var(--text)} .bdg.on .bdg-p{fill:var(--accent-soft);stroke:var(--accent)} .bdg.on text{fill:var(--accent-t)} .bdg.on .bdg-r{fill:var(--good)}

/* ---------- practice visuals ---------- */
.pviz{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:12px;align-items:stretch}
.pv-staff{border:1px solid var(--line);border-radius:8px;background:var(--bg2);padding:4px;min-height:96px}
.pv-staff svg{width:100%;height:100%;display:block;direction:ltr}
.pv-staff line{stroke:var(--line2);stroke-width:1.2}
.pv-staff .pv-clef{fill:var(--muted-t);font-size:9px;font-family:inherit}
.pv-n ellipse{fill:var(--good)} .pv-n.n1 ellipse{fill:var(--accent)}
.pv-n .pv-stem{stroke:var(--good);stroke-width:1.6} .pv-n.n1 .pv-stem{stroke:var(--accent)}
.pv-n .pv-led{stroke:var(--muted-t)}
.pv-n .pv-acc{fill:var(--text);font-size:11px}
.pv-n{animation:mt-in .25s ease-out both}
@keyframes mt-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pv-keys{position:relative;direction:ltr;height:110px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);overflow:hidden;margin-top:0}
.vk{position:absolute;top:0;box-sizing:border-box;transition:background .12s,box-shadow .12s,transform .12s}
.vk.w{height:100%;background:linear-gradient(180deg,#dfe2e6,#f4f5f7 14%);border:1px solid #0a0c0f;border-radius:0 0 5px 5px}
.vk.b{height:60%;background:linear-gradient(180deg,#2a2f36,#0c0e11 70%);border-radius:0 0 4px 4px;z-index:2;box-shadow:0 3px 4px rgba(0,0,0,.45)}
.vk.on.n0{background:linear-gradient(180deg,#bff3dc,#3ddc97);box-shadow:0 0 18px #3ddc97;transform:translateY(2px)}
.vk.on.n1{background:linear-gradient(180deg,#ffe2a8,#ffb020);box-shadow:0 0 18px #ffb020;transform:translateY(2px)}
.pv-arcs{position:absolute;left:0;right:0;top:0;width:100%;height:40%;z-index:3;overflow:visible;pointer-events:none}
.pv-arc{fill:none;stroke:#ffc24d;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:mt-draw .5s ease-out forwards}
@keyframes mt-draw{to{stroke-dashoffset:0}}
.pv-lbl{position:absolute;top:2px;transform:translateX(-50%);z-index:4;font-family:var(--mono,inherit);font-weight:800;font-size:13px;color:#1a1206;background:#ffb020;border-radius:4px;padding:0 6px;opacity:0}
.pv-lbl.on{opacity:1;animation:mt-in .25s ease-out}

/* ---------- answer feedback ---------- */
.ans.right{animation:mt-pop .45s cubic-bezier(.2,1.6,.4,1)}
.ans.right::before{content:"";position:absolute;inset:-3px;border:2px solid var(--good);border-radius:inherit;animation:mt-ring 1s ease-out 2;pointer-events:none;opacity:0}
.ans.wrong,.pk.wrong,.sol.wrong{animation:mt-shake .4s ease 1}
.pk.right,.sol.right{animation:mt-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes mt-pop{0%{transform:scale(.92)}100%{transform:none}}
@keyframes mt-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.12,1.35)}}
@keyframes mt-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.feedback.ok,.feedback.no{animation:mt-in .25s ease-out}
.xp-float{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-family:var(--mono,inherit);font-weight:800;font-size:16px;color:var(--good-t);pointer-events:none;animation:mt-up 1.6s ease-out forwards;white-space:nowrap;z-index:5}
.feedback{position:relative}
@keyframes mt-up{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-40px)}}
.combo{display:flex;align-items:center;gap:10px;align-self:center;min-height:40px;padding:4px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card2);width:min(360px,100%)}
.combo b{font-size:18px;color:var(--accent-t)}
.combo .bar{flex:1;height:8px}
.combo.hot{border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 30%,transparent)}
.combo.bump b{animation:mt-pop .4s cubic-bezier(.2,1.6,.4,1)}

@media (max-width:640px){
  .pviz{grid-template-columns:minmax(0,1fr)}
  .pv-staff{min-height:0;height:84px}
  .pv-keys{height:84px}
  .jr-badges{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bdg svg{width:46px;height:46px}
  .bdg{font-size:11.5px}
  .jr-xp{min-width:0;flex-basis:100%}
}
@media (max-width:1200px) and (max-height:500px) and (orientation:landscape){ .pv-keys{height:70px} .pv-staff{height:70px;min-height:0} }
@media (prefers-reduced-motion:reduce){
  .pv-arc{stroke-dashoffset:0!important}
  .xp-float{display:none}
}
.mt-num{font-family:var(--mono,inherit);font-variant-numeric:tabular-nums}
.jr-later{border-top:1px solid var(--line);padding-top:6px}
.jr-later summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accent-t);font-weight:600}
.jr-later[open] summary{margin-bottom:6px}

/* anti-cheat: neutral "playing" indicator while a question is unanswered */
.pviz.pv-wait{grid-template-columns:minmax(0,1fr)}
.pviz.pv-wait .pv-staff{display:none}
.pv-pulse{display:flex;gap:8px;align-items:center;justify-content:center;height:100%;min-height:56px}
.pv-pulse i{width:10px;height:10px;border-radius:50%;background:var(--muted,#888);opacity:.35;transition:opacity .15s,transform .15s}
.pviz.pv-on .pv-pulse i{opacity:1;background:var(--accent);transform:scale(1.25)}
.pviz.pv-on .pv-pulse i:nth-child(2){transition-delay:.06s}.pviz.pv-on .pv-pulse i:nth-child(3){transition-delay:.12s}
.vk.lit{background:var(--accent-soft)}
@media (prefers-reduced-motion: reduce){.pv-pulse i{transition:none}}