:root{
  --ink:#1D1D1F; --ink2:#4A4A4F; --muted:#6E6E73; --bg:#F4F5F8;
  --blue:#0A84FF; --red:#FF453A; --amber:#FF9F0A; --green:#30D158;
  --green-ink:#248A3D; --red-ink:#D70015;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.blob{position:fixed;border-radius:50%;pointer-events:none;z-index:0}
.blob-a{left:-90px;top:60px;width:300px;height:300px;background:radial-gradient(circle,rgba(120,190,255,.55) 0%,rgba(120,190,255,0) 70%);animation:drift1 14s ease-in-out infinite}
.blob-b{right:-110px;top:320px;width:340px;height:340px;background:radial-gradient(circle,rgba(200,170,255,.5) 0%,rgba(200,170,255,0) 70%);animation:drift2 17s ease-in-out infinite}
.blob-c{left:20px;bottom:-120px;width:320px;height:320px;background:radial-gradient(circle,rgba(255,196,170,.5) 0%,rgba(255,196,170,0) 70%);animation:drift3 12s ease-in-out infinite}

.app{position:relative;z-index:1;max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}

.glass{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 34px rgba(30,40,70,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.glass-btn{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 2px 10px rgba(30,40,70,.06),inset 0 1px 0 rgba(255,255,255,.9)}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.eyebrow{font-size:12px;font-weight:600;color:var(--muted)}
.brand{font-size:24px;font-weight:700;letter-spacing:-.02em}
.eyebrow.kept{letter-spacing:.18em;font-weight:800;color:var(--ink)}
.tagline{font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.pill{font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;white-space:nowrap}
.icon-btn{border:none;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;min-height:40px}

.hero{position:relative;border-radius:30px;padding:14px;display:flex;align-items:flex-end;gap:10px;min-height:170px}
.hero .liqui{width:120px;height:120px;flex-shrink:0}
.bubble{border-radius:18px;padding:10px 13px;display:flex;flex-direction:column;gap:2px;flex:1}
.bubble .who{font-size:11px;font-weight:600;color:var(--blue)}
.bubble .say{font-size:14px;font-weight:500;line-height:1.38}

.section-title{font-size:13px;font-weight:600;color:var(--muted);margin:6px 4px 0}
.levels{display:flex;flex-direction:column;gap:10px}
.level{display:flex;align-items:center;gap:12px;text-align:left;border-radius:22px;padding:12px 14px;min-height:72px;border:1px solid rgba(255,255,255,.9)}
.level[disabled]{cursor:default;opacity:.62}
.level .num{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:16px;flex-shrink:0;background:rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(30,40,70,.08)}
.level .num.done{background:var(--green);color:#fff}
.level .meta{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.level .name{font-size:15px;font-weight:600}
.level .sub{font-size:12.5px;color:var(--muted)}
.level .right{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.level .stars{color:var(--amber);letter-spacing:1px}

.progress-head{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
.progress{height:10px;border-radius:999px;overflow:hidden}
.progress-fill{height:100%;border-radius:999px;transition:width .4s,background .4s}

.scene{position:relative;border-radius:30px;overflow:hidden;height:300px;flex-shrink:0}
.scene svg.stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:400px;height:auto}
.scene .bubble{position:absolute;left:12px;right:12px;top:12px}

.card{border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:9px}
.card h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.card p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.options{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:11px 14px;min-height:46px;border-radius:16px;border:1px solid rgba(255,255,255,.9);font-size:13.5px;font-weight:500;line-height:1.35}
.opt.wrong{border-color:rgba(255,69,58,.45);color:#B3261E}
.result{border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.result.ok{background:rgba(48,209,88,.14)} .result.bad{background:rgba(255,69,58,.12)}
.result .rt{font-weight:700;font-size:14px}
.result.ok .rt{color:var(--green-ink)} .result.bad .rt{color:var(--red-ink)}
.result .rx{font-size:13px;line-height:1.45;color:#3A3A3C}
.primary{border:none;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;padding:15px;min-height:52px;width:100%}
.spacer{flex:1}
.intro h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.intro .kicker{font-size:13px;font-weight:600;color:var(--red)}
.intro p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.intro{display:flex;flex-direction:column;gap:8px;padding:0 4px}
.facts{font-size:12px;line-height:1.5;color:var(--muted);padding:0 4px}
.facts a{color:var(--blue)}
.noscript{padding:24px;font-family:var(--font)}

/* Klar + scene animation */
.float{animation:float 3s ease-in-out infinite}
.m-alarmed{animation:jitter .25s linear infinite;transform-box:fill-box;transform-origin:center}
.m-happy{animation:bounce .8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.m-curious{animation:tilt 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.m-calm{transform-box:fill-box}
.blink{animation:blink 4.2s infinite;transform-box:fill-box;transform-origin:center}
.blink2{animation-delay:-.12s}
.rp1{animation:ripple 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
.rp2{animation:ripple 1.6s ease-out infinite .8s;transform-box:fill-box;transform-origin:center}
.bm1{animation:beam .85s ease-in infinite}.bm2{animation:beam .85s ease-in infinite .28s}.bm3{animation:beam .85s ease-in infinite .56s}
.hover{animation:hover 3.2s ease-in-out infinite}
.pop{animation:pop .4s ease-out both;transform-box:fill-box;transform-origin:center}

@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,40px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,-20px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-36px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes jitter{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes bounce{0%,100%{transform:scale(1,1)}30%{transform:scale(1.08,.92)}60%{transform:scale(.95,1.06)}}
@keyframes tilt{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-3deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes ripple{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes beam{0%{transform:translate(0,0) scale(.6);opacity:0}12%{opacity:1}100%{transform:translate(138px,-30px) scale(1);opacity:0}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .blob,.float,.m-alarmed,.m-happy,.m-curious,.blink,.rp1,.rp2,.bm1,.bm2,.bm3,.hover,.pop{animation:none}
}

.opt .key{flex-shrink:0;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(30,40,70,.12);margin-top:-1px}
.play-grid{display:flex;flex-direction:column;gap:12px}

/* ---------- desktop / tablet browser ---------- */
@media (min-width: 900px){
  .app{max-width:1120px;padding:32px 40px 40px;gap:18px}
  .brand{font-size:30px}
  .screen-end{max-width:720px}
  .screen-end .spacer{flex:0 0 8px}
  .screen-map .hero{min-height:240px;padding:24px 28px}
  .screen-map .hero .liqui{width:190px;height:190px}
  .screen-map .bubble .say{font-size:17px}
  .screen-map .levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .screen-intro .hero .liqui,.screen-end .hero .liqui{width:160px;height:160px}
  .play-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:stretch}
  .scene{height:auto;min-height:520px}
  .scene svg.stage{max-width:620px}
  .scene .bubble .say{font-size:16px}
  .card{padding:22px;gap:12px}
  .card h2{font-size:24px}
  .card p{font-size:15px}
  .opt{font-size:15px;padding:14px 16px;min-height:54px}
  .result .rx{font-size:14.5px}
  .primary{max-width:420px;align-self:center}
  .screen-play .primary{max-width:none}
  .blob-a{width:520px;height:520px}.blob-b{width:560px;height:560px}.blob-c{width:520px;height:520px}
}
@media (min-width: 1300px){
  .screen-map .levels{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (hover: none){ .opt .key{display:none} }

/* intro briefing */
.intro-grid{display:flex;flex-direction:column;gap:14px}
.brief{display:flex;flex-direction:column;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px}
.chip{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 4px rgba(30,40,70,.06);color:var(--ink2)}
.chip-star{color:var(--amber)}
.path{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:none}
.path-item{display:block}
.path-item .path-step{width:100%;font:inherit;color:inherit;cursor:pointer}
.path-step:hover{background:rgba(255,255,255,.9)}
.path-step{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.9)}
.path-num{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.9);flex-shrink:0}
.step-icon{width:26px;height:26px;color:var(--blue);flex-shrink:0}
.path-name{font-size:14.5px;font-weight:600}
.screen-intro .primary{margin-top:4px}
@media (min-width: 900px){
  .intro-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:stretch}
  .intro-hero{flex-direction:column;align-items:center;text-align:left;min-height:0;justify-content:center;gap:22px;padding:32px 28px}
  .intro-hero .liqui{width:240px!important;height:240px!important}
  .intro-hero .bubble{width:100%;flex:0 0 auto}
  .intro-hero .bubble .say{font-size:17px}
  .path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;position:relative}
  .path-step{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 8px 12px}
  .path-name{font-size:13px;line-height:1.25}
  .step-icon{width:32px;height:32px}
  .screen-intro .primary{max-width:none;align-self:stretch}
}

/* floating Klar on the attack path */
.path{position:relative}
.path-guide{position:absolute;left:0;top:0;width:52px;height:52px;pointer-events:none;z-index:2;filter:drop-shadow(0 6px 10px rgba(30,40,70,.18));will-change:transform}
.path-step{transition:box-shadow .35s,background .35s,transform .35s}
.path-step.lit{background:rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(10,132,255,.55),0 8px 22px rgba(10,132,255,.18);transform:translateY(-2px)}
.path-step.lit .step-icon{color:var(--red)}
.path-step.seen .path-num{background:rgba(10,132,255,.14);color:var(--blue)}
.path-caption{margin:-2px 4px 0;font-size:13px;font-weight:600;color:var(--ink2);min-height:18px}
@media (min-width: 900px){
  .path{margin-top:40px}
  .path-guide{width:60px;height:60px}
}

/* step detail panel */
.path-detail{border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;border:1px solid rgba(255,255,255,.9)}
.pd-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.pd-title{font-size:15px;font-weight:700}
.pd-tech{font-size:11.5px;font-weight:700;color:#5B2E86;background:#F1E7FF;padding:4px 9px;border-radius:999px}
.pd-label{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.pd-text{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.pd-hint{font-size:12.5px;font-weight:600;color:var(--blue);margin-top:4px}
@media (min-width: 900px){
  .path-item .path-step{height:100%}
}

/* Klar: livelier reactions */
.klar-wrap{transform-box:fill-box;transform-origin:50% 100%}
.fx-celebrate{animation:celebrate .9s cubic-bezier(.3,1.4,.5,1) 1}
.fx-squish{animation:squish .6s ease-in-out 1}
@keyframes celebrate{0%{transform:translateY(0) scale(1,1) rotate(0)}15%{transform:translateY(4px) scale(1.12,.86)}45%{transform:translateY(-34px) scale(.92,1.1) rotate(-8deg)}70%{transform:translateY(-10px) scale(1.02,.98) rotate(6deg)}85%{transform:translateY(2px) scale(1.08,.92)}100%{transform:translateY(0) scale(1,1) rotate(0)}}
@keyframes squish{0%,100%{transform:scale(1,1)}20%{transform:scale(1.18,.78) translateX(-4px)}40%{transform:scale(.9,1.1) translateX(4px)}60%{transform:scale(1.06,.94) translateX(-3px)}80%{transform:scale(.98,1.02) translateX(2px)}}
.burst circle{opacity:0;transform-box:fill-box;transform-origin:center}
.fx-celebrate .burst circle{animation:burst .85s ease-out 1}
.fx-celebrate .b-1{--bx:-46px;--by:-40px}.fx-celebrate .b-2{--bx:44px;--by:-46px}.fx-celebrate .b-3{--bx:-58px;--by:2px}
.fx-celebrate .b-4{--bx:56px;--by:-6px}.fx-celebrate .b-5{--bx:-20px;--by:-64px}.fx-celebrate .b-6{--bx:24px;--by:-60px}
@keyframes burst{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(1)}}
[data-role="eyes"]{transition:transform .12s ease-out}
@media (prefers-reduced-motion:reduce){.fx-celebrate,.fx-squish,.fx-celebrate .burst circle{animation:none}}

/* ---- Klar interactivity: glossary terms, hints, heat-driven mood ---- */
.term{color:var(--blue);text-decoration:underline dotted;text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:help;border-radius:4px}
.term:hover,.term:focus-visible{background:rgba(10,132,255,.1);outline:none}
.opt.wrong .term{color:#B3261E}
.bubble.defining .who{color:#7A4DD8}
.bubble.defining .say{font-weight:600}
.hint-btn{margin-top:10px;align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--blue);padding:8px 12px;border-radius:12px;border:1px dashed rgba(10,132,255,.4)}
.hint-btn:disabled{color:var(--muted);border-style:solid;opacity:.8}
.klar-wrap{cursor:pointer}
.m-worried{animation:sway 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
@keyframes sway{0%,100%{transform:rotate(-2deg) translateX(0)}50%{transform:rotate(2deg) translateX(1px)}}
/* jitter speeds up and widens as the breach spreads (--heat is 0..1, set on the stage) */
.stage .m-alarmed{animation-duration:calc(.42s - .3s * var(--heat,.5))}
.stage .float{animation-duration:calc(3s - 1.6s * var(--heat,0))}
[data-role="sweat"] ellipse{animation:sweat 1.6s ease-in infinite;transform-box:fill-box;transform-origin:center}
[data-role="sweat"] .sw2{animation-delay:-.6s}
[data-role="sweat"] .sw3{animation-delay:-1.1s}
@keyframes sweat{0%{transform:translateY(-6px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(26px) scale(1);opacity:0}}
@media (prefers-reduced-motion: reduce){ .m-worried,[data-role="sweat"] ellipse{animation:none} }

/* ---- Breach Map pass: tighter hero, next-up card, season progress, clearer level hierarchy ---- */
.screen-map .topbar{align-items:flex-end}
.screen-map .topbar .pill{margin-bottom:6px}
.screen-map .hero{min-height:0;align-items:center}
.hero-body{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.next-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border-radius:18px;padding:12px 14px;border:1.5px solid rgba(10,132,255,.35)}
.next-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.next-name{font-size:16px;font-weight:700;letter-spacing:-.01em}
.next-sub{font-size:12.5px;color:var(--muted)}
.next-go{margin-top:6px;font-size:13px;font-weight:700;color:var(--blue)}
.season-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:6px 4px 0}
.season-head .section-title{margin:0;color:var(--ink);font-size:14px}
.season-progress{display:flex;align-items:center;gap:8px}
.season-count{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.season-bar{width:72px;height:6px;border-radius:999px;background:rgba(30,40,70,.1);overflow:hidden;display:inline-block}
.season-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--green);transition:width .5s ease}
.level .name{color:var(--ink)}
.level .sub{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.level .teaser{font-size:13px;color:var(--ink2);line-height:1.3}
.level .right.play{color:var(--blue)}
.level.next{border-color:rgba(10,132,255,.55);box-shadow:0 0 0 3px rgba(10,132,255,.14),0 2px 10px rgba(30,40,70,.06)}
.level.next .num{background:var(--blue);color:#fff}
.level.locked{opacity:.5;box-shadow:none;background:rgba(255,255,255,.4)}
.level.locked .num{background:rgba(255,255,255,.6);box-shadow:none;color:var(--muted)}
.level.locked .name,.level.locked .teaser{color:var(--muted)}
.facts.privacy{display:flex;align-items:center;gap:6px}
.facts .lock{width:14px;height:14px;flex-shrink:0;color:var(--muted)}
@media (min-width: 900px){
  .screen-map .hero{padding:20px 28px}
  .hero-body{flex-direction:row;align-items:stretch;gap:14px}
  .hero-body .bubble{flex:1.4}
  .next-card{flex:1;justify-content:center;padding:16px 18px}
  .next-name{font-size:18px}
  .season-head .section-title{font-size:16px}
  .season-bar{width:120px}
  .level .name{font-size:16px}
  .level .teaser{font-size:13.5px}
}
@media (min-width: 1300px){
  .app{max-width:1240px}
  .screen-map .levels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .level.next{grid-column:1 / -1}
}
.bubble.defining{cursor:pointer;border-color:rgba(122,77,216,.35);box-shadow:0 0 0 3px rgba(122,77,216,.12),0 2px 10px rgba(30,40,70,.06)}
.bubble.defining .say{font-weight:500}