/* LingoVenture — bright, chunky, simple. One font, flat cards with a solid "3D" bottom edge. */
:root{
  --font:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ink:#1d2747; --ink2:#4b5675; --muted:#8a92a8;
  --bg:#fffaf2; --card:#fff; --line:#eee6d8; --line2:#e2d8c6; --soft:#f6f1e7;
  --coral:#ff6b4a; --coral-d:#e04e2e;
  --sun:#ffc83a; --sun-d:#e6a400;
  --green:#2ec27e; --green-d:#1f9d62; --green-s:#e3f8ee;
  --teal:#18b4c6; --teal-d:#0e93a3; --teal-s:#e2f6f8;
  --purple:#7b5cff; --purple-d:#5a3ddc; --purple-s:#efeaff;
  --pink:#ff6fae; --blue:#3b8cff; --red:#ff5a5f; --red-s:#ffecec;
  --r:22px; --edge:0 4px 0 var(--line2);
  --c1:#ff6b4a; --c2:#18b4c6; --c3:#ffb020; --c4:#2ec27e; --c5:#7b5cff; --c6:#3b8cff; --c7:#ff6fae; --c8:#1d2747;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font);font-weight:600;color:var(--ink2);background:var(--bg);font-size:16.5px;line-height:1.5;min-height:100vh;
  background-image:radial-gradient(circle at 10% -10%,#e5f4ff 0,transparent 45%),radial-gradient(circle at 100% 0,#fff0d6 0,transparent 40%)}
h1,h2,h3{font-family:var(--font);color:var(--ink);margin:0 0 .35em;line-height:1.12;letter-spacing:-.01em;font-weight:900}
h1{font-size:clamp(1.8rem,4vw,2.5rem)} h2{font-size:clamp(1.3rem,2.4vw,1.6rem)} h3{font-size:1.12rem;font-weight:800}
p{margin:0 0 .8em} a{color:var(--teal-d);text-decoration-thickness:2px;text-underline-offset:3px}
img{max-width:100%} b,strong{color:var(--ink);font-weight:800}
.wrap{max-width:1120px;margin:0 auto;padding:22px 16px 110px}
main>*{margin-bottom:24px}
.muted{color:var(--muted)} .small{font-size:.88rem} .center{text-align:center} .grow{flex:1;min-width:0} .nowrap{white-space:nowrap}
.row{display:flex;align-items:center} .gap{gap:12px;flex-wrap:wrap} .wrapline{flex-wrap:wrap;margin:10px 0}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.kicker,.eyebrow,.unit-kicker{font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--teal-d);margin-bottom:6px}
.lead{font-size:1.1rem;color:var(--ink2);max-width:38em}
.page-head{margin-bottom:16px} .page-head h1,.page-head h2{margin-bottom:4px} .page-head p{margin:0}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.section-head h2{margin:0}
.big-emoji{font-size:30px;line-height:1}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,250,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.topbar-in{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-mark{width:42px;height:42px;border-radius:14px;background:var(--sun);display:grid;place-items:center;font-size:22px;box-shadow:0 3px 0 var(--sun-d)}
.logo-word{font-weight:900;font-size:1.35rem;color:var(--ink);letter-spacing:-.02em}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:14px;text-decoration:none;color:var(--ink2);font-weight:800;border:2px solid transparent}
.nav a:hover{background:var(--soft)}
.nav a.on{background:var(--teal-s);color:var(--teal-d);border-color:#bfeaf0}
.chips{display:flex;align-items:center;gap:8px;margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:12px;font-weight:900;color:var(--ink);text-decoration:none;background:#fff;border:2px solid var(--line);font-size:.95rem;white-space:nowrap}
.chip.streak{color:var(--muted)} .chip.streak.lit{color:#ff7a00;border-color:#ffd9a8;background:#fff6ea}
.chip.xp{color:#c98a00;border-color:#ffe29a;background:#fffaea}
.chip.gift.ready{animation:wiggle 1.4s infinite;border-color:var(--sun);background:#fff6d6}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-size:22px;cursor:pointer;list-style:none;flex-shrink:0;box-shadow:0 3px 0 var(--sun-d)}
.avatar::-webkit-details-marker{display:none}
.avatar.sm{width:36px;height:36px;font-size:19px;cursor:default;box-shadow:none;background:var(--soft)}
.avatar.xs{width:28px;height:28px;font-size:15px;cursor:default;box-shadow:none;background:var(--soft)}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:52px;background:#fff;border:2px solid var(--line);border-radius:18px;box-shadow:0 12px 30px rgba(29,39,71,.12);min-width:230px;padding:8px;z-index:40}
.menu-pop a,.menu-pop button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font:800 .95rem var(--font);background:none;border:0;cursor:pointer}
.menu-pop a:hover,.menu-pop button:hover{background:var(--soft)}
.menu-head{padding:8px 12px 10px;border-bottom:2px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column}
.menu-head span{color:var(--muted);font-size:.85rem}
.bottomnav{display:none}

/* ---------- basics ---------- */
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--edge)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .grid2.tight{gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tag{display:inline-block;background:var(--teal-s);color:var(--teal-d);border-radius:999px;padding:3px 11px;font-weight:900;font-size:.8rem;white-space:nowrap}
.tag.good{background:var(--green-s);color:var(--green-d)} .tag.warn{background:#fff1dc;color:#c06a00}
.notice{background:#fff6e6;border:2px solid #ffdca6;color:#8a4d00;border-radius:16px;padding:12px 16px;margin-bottom:16px;font-weight:800}
.notice.ok{background:var(--green-s);border-color:#b8ecd2;color:#13784a}
.notice.warn{background:#fff1dc;border-color:#ffd59a;color:#8a4d00}
.empty{text-align:center;color:var(--muted);padding:26px 0}
.meter{height:16px;background:var(--soft);border-radius:999px;overflow:hidden;margin:10px 0}
.meter.big{height:20px}
.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#7ee0a8);border-radius:999px;transition:width .6s}
code{background:var(--soft);border-radius:8px;padding:2px 8px;font-weight:900;color:var(--ink);letter-spacing:.08em}

/* buttons: solid, chunky, press-down */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--coral);color:#fff;border:0;border-radius:16px;padding:12px 20px;font:900 1rem var(--font);letter-spacing:.02em;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--coral-d);transition:transform .06s,box-shadow .06s,filter .15s;text-transform:uppercase}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--coral-d)}
.btn.big{padding:15px 26px;font-size:1.05rem;border-radius:18px} .btn.sm{padding:8px 13px;font-size:.82rem;border-radius:12px;box-shadow:0 3px 0 var(--coral-d)}
.btn.wide{width:100%}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--line2);box-shadow:0 4px 0 var(--line2)}
.btn.green{background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.btn.gold{background:var(--sun);color:#5a3d00;box-shadow:0 4px 0 var(--sun-d)}
.btn.teal{background:var(--teal);box-shadow:0 4px 0 var(--teal-d)}
.btn[disabled],.btn.disabled{background:#e9e4da;color:#a49d90;box-shadow:0 4px 0 #d8d0c2;cursor:not-allowed;pointer-events:none}
.icon-btn{border:2px solid var(--line);background:#fff;border-radius:12px;width:40px;height:40px;font-size:18px;cursor:pointer;margin-left:4px;box-shadow:0 2px 0 var(--line2)}
.icon-btn:hover{background:var(--soft)} .icon-btn.live{background:#ffe6df;border-color:var(--coral)}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0;font:800 .9rem var(--font)}
.seg{display:flex;gap:4px;background:#fff;border:2px solid var(--line);padding:4px;border-radius:14px;flex-wrap:wrap}
.seg a,.seg button{padding:6px 12px;border-radius:10px;text-decoration:none;color:var(--ink2);font:800 .88rem var(--font);border:0;background:none;cursor:pointer}
.seg a.on,.seg button.on{background:var(--ink);color:#fff}
.seg .sep{width:2px;background:var(--line);margin:2px 3px}

/* ---------- learn path ---------- */
.learn{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
.side{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
.continue{grid-column:1 / -1;display:flex;gap:18px;align-items:center;background:linear-gradient(120deg,#fff 30%,#fff4e4);margin-bottom:0}
.continue h1{font-size:clamp(1.5rem,3.2vw,2rem)}
.continue-mascot{width:110px;height:110px;flex-shrink:0;border-radius:50%;background:#e4f5fb;padding:8px;animation:bob 3s ease-in-out infinite}
.unit{margin-bottom:26px}
.unit-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-radius:20px;color:#fff;background:var(--uc);box-shadow:0 4px 0 rgba(0,0,0,.15)}
.unit-head h2{color:#fff;margin:0}
.unit-head .unit-kicker{color:rgba(255,255,255,.85);margin-bottom:2px}
.unit-boss{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.2);border-radius:16px;padding:6px 12px;min-width:84px}
.unit-boss span{font-size:30px;line-height:1.1} .unit-boss small{font-weight:900;font-size:.7rem;text-align:center;line-height:1.1}
.c1{--uc:var(--c1)} .c2{--uc:var(--c2)} .c3{--uc:var(--c3)} .c4{--uc:var(--c4)} .c5{--uc:var(--c5)} .c6{--uc:var(--c6)} .c7{--uc:var(--c7)} .c8{--uc:var(--c8)}
.path{list-style:none;margin:0;padding:44px 0 6px;display:flex;flex-direction:column;align-items:center;gap:14px}
.node{position:relative;display:flex;flex-direction:column;align-items:center;transform:translateX(var(--x));width:220px}
.node-btn{width:74px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;text-decoration:none;color:#fff;background:var(--uc);box-shadow:0 7px 0 rgba(0,0,0,.18);transition:transform .08s,box-shadow .08s}
a.node-btn:active{transform:translateY(6px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.node.open .node-btn{background:#fff;color:var(--uc);border:4px solid var(--uc);box-shadow:0 7px 0 var(--line2)}
.node.done .node-btn{background:var(--sun);color:#7a5200;box-shadow:0 7px 0 var(--sun-d)}
.node.locked .node-btn{background:#ebe5d9;color:#b7ae9e;box-shadow:0 7px 0 #d9d0c0;font-size:22px}
.node.boss .node-btn{width:92px;height:86px;font-size:40px;border-radius:30px}
.node.boss.open .node-btn{background:var(--purple-s);border-color:var(--purple)}
.node.boss.done .node-btn{background:var(--sun)}
.node.cur .node-btn{background:var(--uc);color:#fff;border:0;box-shadow:0 7px 0 rgba(0,0,0,.2),0 0 0 8px color-mix(in srgb,var(--uc) 22%,transparent);animation:pulse 1.8s infinite}
.node.cur.boss .node-btn{background:var(--purple);color:#fff}
.node-tip{position:absolute;top:-36px;background:#fff;border:2px solid var(--line);color:var(--uc);font-weight:900;font-size:.82rem;letter-spacing:.08em;padding:4px 12px;border-radius:10px;animation:bob 1.6s ease-in-out infinite;z-index:2}
.node-tip::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:#fff}
.node-label{margin-top:12px;text-align:center;font-size:.86rem;color:var(--ink2);line-height:1.25;max-width:220px}
.node.cur{margin-top:26px}
.node-label b{display:block;color:var(--ink);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.node.locked .node-label{opacity:.55}
.stars{display:block;color:var(--sun-d);letter-spacing:2px;font-size:1rem}
.stars.big{font-size:1.5rem;display:inline-block}
.side-card h3{margin:0}
.goal{display:flex;gap:16px;align-items:center}
.ring{--p:0;width:86px;height:86px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--soft) 0)}
.ring span{width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:900;font-size:1.3rem;color:var(--ink);line-height:1}
.ring small{font-size:.7rem;color:var(--muted);display:block}
.dq{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:2px dashed var(--line)}
.dq-ic{width:42px;height:42px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:21px;flex-shrink:0}
.dq.done .dq-ic{background:var(--green-s)}
.dq-t{font-weight:800;color:var(--ink);font-size:.95rem;margin-bottom:5px}
.dq.big .dq-ic{width:52px;height:52px;font-size:26px}
.bar{position:relative;height:16px;border-radius:999px;background:var(--soft);overflow:hidden}
.bar span{display:block;height:100%;background:var(--sun);border-radius:999px;transition:width .5s}
.dq.done .bar span{background:var(--green)}
.bar em{position:absolute;inset:0;text-align:center;font-style:normal;font-size:.7rem;font-weight:900;color:var(--ink);line-height:16px}
.chest{display:flex;gap:12px;align-items:center;margin-top:12px;padding:12px;border-radius:16px;background:var(--soft)}
.chest-ic{font-size:30px}
.chest.ready{background:#fff4cc;border:2px solid var(--sun)} .chest.ready .chest-ic{animation:wiggle 1.2s infinite}
.chest.big{padding:16px}
.tala{display:flex;gap:12px;align-items:center;background:var(--teal-s);border-color:#c9edf2}
.tala img{width:70px;height:70px;flex-shrink:0}
.speech{position:relative;background:#fff;border-radius:16px;padding:10px 14px;margin:0;font-weight:800;color:var(--ink)}

/* ---------- placement ---------- */
.place{max-width:680px;margin:90px auto 40px;text-align:center;padding:30px 26px 26px;position:relative}
.place-mascot{width:130px;height:130px;margin:-90px auto 6px;display:block;border-radius:50%;background:#e4f5fb;padding:10px;border:4px solid #fff;animation:bob 3s ease-in-out infinite}
.place .lead{margin:0 auto 20px}
.place-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.place-opts form{display:contents}
.pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border-radius:20px;border:2px solid var(--line2);background:#fff;box-shadow:0 5px 0 var(--line2);cursor:pointer;font:inherit;color:var(--ink);transition:transform .06s}
.pick:hover{border-color:var(--teal)} .pick:active{transform:translateY(5px);box-shadow:none}
.pick-ic{font-size:40px} .pick b{font-size:1.1rem} .pick small{color:var(--muted)}

/* ---------- lesson ---------- */
.lesson-hero{position:relative;background:linear-gradient(120deg,#fff 40%,#eaf7fb)}
.lesson-hero.is-boss{background:linear-gradient(120deg,#fff 30%,var(--purple-s))}
.back{display:inline-block;font-weight:900;text-decoration:none;color:var(--muted);margin-bottom:10px}
.lesson-hero-in{display:flex;gap:18px;align-items:center}
.lesson-face{width:96px;height:96px;flex-shrink:0;border-radius:28px;background:#e4f5fb;display:grid;place-items:center;font-size:54px;padding:6px}
.is-boss .lesson-face{background:var(--purple);box-shadow:0 5px 0 var(--purple-d)}
.cando{display:inline-block;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 14px;font-weight:800;color:var(--ink);margin:0 0 6px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:8px}
.step-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border-radius:18px;border:2px solid var(--line2);background:#fff;box-shadow:0 4px 0 var(--line2);text-decoration:none;color:var(--ink);font:inherit;cursor:pointer}
.step-tile span{font-size:28px} .step-tile small{color:var(--muted);font-weight:700}
.step-tile.go{background:var(--coral);border-color:var(--coral);box-shadow:0 4px 0 var(--coral-d);color:#fff}
.step-tile.go b,.step-tile.go small{color:#fff}
.step-tile.ok{background:var(--green-s);border-color:#b8ecd2} .step-tile.ok small{color:var(--green-d)}
.step-tile.ok b::after{content:" ✓";color:var(--green-d)}
.step-tile.half{background:#fff6e6;border-color:#ffd9a3}
.step-tile:active{transform:translateY(4px);box-shadow:none}
.vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.word{padding:16px;display:flex;flex-direction:column;gap:1px}
.word .tl{font-weight:900;font-size:1.3rem;color:var(--ink)}
.word .pron{font-size:.8rem;color:var(--teal-d);font-weight:800}
.word .en{color:var(--ink2)} .word .note{font-size:.8rem;color:var(--muted);margin-top:4px}
.word-actions{margin-top:auto;padding-top:10px;display:flex;justify-content:flex-end}
.tip{background:#fffbe6;border-color:#f6e3a1;box-shadow:0 4px 0 #efd98a}
.phrases{list-style:none;padding:0;margin:0}
.phrases li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:2px dashed var(--line)}
.phrases li div{display:flex;flex-direction:column}
.taglish{background:var(--purple-s);border-color:#ddd3ff;box-shadow:0 4px 0 #cfc2ff}
.dialogue .lines{display:flex;flex-direction:column;gap:10px}
.line{display:flex;gap:10px;align-items:flex-start;max-width:86%}
.line.rB{align-self:flex-end;flex-direction:row-reverse}
.who{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--teal);color:#fff;flex-shrink:0}
.rB .who{background:var(--coral)}
.bub{background:var(--teal-s);border-radius:18px;padding:10px 16px;display:flex;flex-direction:column}
.rB .bub{background:#ffece6}
.bub .tl{color:var(--ink);cursor:pointer} .bub .en{font-size:.9rem;color:var(--muted)}
.dialogue.no-en .bub .en{display:none}
.line.hidden-mine .bub .tl{filter:blur(6px);user-select:none} .line.hidden-mine .bub .tl:hover{filter:none}
.line.speaking .bub{outline:3px solid var(--sun)}
.culture{background:#fff0f6;border-color:#ffd3e6;box-shadow:0 4px 0 #ffc0dc}
.bosscard,.big-boss{background:var(--purple-s);border-color:#d8ccff;box-shadow:0 4px 0 #c6b6ff}
.big-boss h3{margin-top:16px}
.role{background:#fff;border-radius:16px;padding:12px 14px;border:2px solid #ddd3ff} .role p{margin:.3em 0 0}
.checklist{list-style:none;padding:0;margin:0 0 12px}
.checklist li{padding:6px 0}
.checklist input{width:22px;height:22px;vertical-align:middle;accent-color:var(--green)}
.win{background:#fff;border-radius:14px;padding:10px 14px;border:2px solid #ddd3ff}
.quizcard{background:linear-gradient(120deg,#fff,#fff1ec);border-color:#ffd3c6;box-shadow:0 4px 0 #ffc0ae}
.quiz-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.quiz-cta h2{margin:0 0 4px} .quiz-cta p{margin:0}
.quiz-ic{font-size:44px}
.quiz-btns{display:flex;gap:10px;flex-wrap:wrap}
details.ai{margin-top:16px;background:var(--soft);border-radius:16px;padding:12px 16px}
details.ai summary{cursor:pointer;font-weight:900;color:var(--ink)}
details.ai textarea{width:100%;margin:8px 0;font:600 .86rem var(--font);border:2px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.pager{display:flex;justify-content:space-between}
.sticky-cta{display:none}

/* ---------- quiz player (full screen) ---------- */
body.playing{overflow:hidden}
.play{position:fixed;inset:0;z-index:60;background:#fff;display:flex;flex-direction:column}
.play[hidden]{display:none}
.play-top{display:flex;align-items:center;gap:14px;max-width:760px;width:100%;margin:0 auto;padding:18px 16px 6px}
.play-x{border:0;background:none;font-size:26px;color:var(--muted);cursor:pointer;line-height:1;padding:4px}
.play-bar{flex:1;height:18px;background:var(--soft);border-radius:999px;overflow:hidden}
.play-bar span{display:block;height:100%;background:var(--green);border-radius:999px;transition:width .35s;box-shadow:inset 0 -5px 0 rgba(0,0,0,.08)}
.play-combo{font-weight:900;color:#ff7a00;min-width:56px;text-align:right}
.play-body{flex:1;overflow-y:auto;max-width:760px;width:100%;margin:0 auto;padding:18px 16px 30px}
.q-prompt{font-weight:900;font-size:1.35rem;color:var(--ink);margin-bottom:14px}
.q-card{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.q-card img{width:84px;height:84px;flex-shrink:0}
.q-bubble{position:relative;border:2px solid var(--line);border-radius:18px;padding:14px 18px;font-weight:900;font-size:clamp(1.25rem,3.4vw,1.7rem);color:var(--ink);background:#fff}
.q-bubble small{display:block;font-size:.95rem;color:var(--muted);font-weight:700}
.q-bubble::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-9px;border:9px solid transparent;border-right-color:var(--line);border-left:0}
.big-play{width:96px;height:96px;border-radius:26px;border:0;background:var(--teal);color:#fff;font-size:42px;box-shadow:0 6px 0 var(--teal-d);cursor:pointer}
.big-play:active{transform:translateY(5px);box-shadow:none}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{position:relative;background:#fff;border:2px solid var(--line2);border-radius:18px;padding:16px 16px 16px 48px;text-align:left;font:800 1.05rem var(--font);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--line2);transition:transform .05s}
.opt kbd{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:8px;border:2px solid var(--line2);display:grid;place-items:center;font:900 .75rem var(--font);color:var(--muted)}
.opt:hover{background:#fafbff} .opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line2)}
.opt.sel{border-color:var(--teal);background:var(--teal-s);box-shadow:0 4px 0 var(--teal)}
.opt.right{border-color:var(--green);background:var(--green-s);box-shadow:0 4px 0 var(--green)}
.opt.wrong{border-color:var(--red);background:var(--red-s);box-shadow:0 4px 0 var(--red)}
.q-input{width:100%;font:800 1.25rem var(--font);padding:16px 18px;border:2px solid var(--line2);border-radius:18px;background:var(--soft);color:var(--ink)}
.q-input:focus{outline:none;border-color:var(--teal);background:#fff}
.built{display:flex;flex-wrap:wrap;gap:8px;min-height:64px;padding:10px 0;border-bottom:2px solid var(--line);border-top:2px solid var(--line);margin-bottom:16px}
.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile{background:#fff;border:2px solid var(--line2);border-radius:14px;padding:10px 15px;font:800 1.05rem var(--font);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--line2)}
.tile.used{background:var(--soft);color:transparent;box-shadow:none;pointer-events:none}
.play-foot{border-top:2px solid var(--line);background:#fff;transition:background .2s}
.play-foot-in{max-width:760px;margin:0 auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.play-foot.right{background:var(--green-s);border-color:#b8ecd2} .play-foot.wrong{background:var(--red-s);border-color:#ffc9cb}
.fb{display:flex;align-items:center;gap:12px}
.fb-ic{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:28px;flex-shrink:0}
.fb b{font-size:1.25rem;display:block} .right .fb b{color:var(--green-d)} .wrong .fb b{color:#d43b40}
.fb span{color:var(--ink2);font-weight:800}
.wrong .btn{background:var(--red);box-shadow:0 4px 0 #cf3a3f}
.right .btn{background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.end{text-align:center;padding-top:20px}
.end img{width:150px;height:150px;animation:bob 2.4s ease-in-out infinite}
.end h1{font-size:clamp(2rem,6vw,2.8rem)}
.end .stars{font-size:2.6rem;letter-spacing:6px;margin:4px 0 12px}
.end-stats{display:flex;justify-content:center;gap:12px;margin:18px 0;flex-wrap:wrap}
.end-stat{border:2px solid var(--line);border-radius:18px;min-width:120px;overflow:hidden}
.end-stat b{display:block;font-size:1.6rem;padding:10px} .end-stat small{display:block;background:var(--ink);color:#fff;font-weight:900;font-size:.72rem;letter-spacing:.1em;padding:4px;text-transform:uppercase}
.end-stat.xp small{background:var(--sun);color:#5a3d00} .end-stat.acc small{background:var(--green)} .end-stat.combo small{background:var(--coral)}
.review-list{list-style:none;padding:0;margin:16px 0;text-align:left}
.review-list li{padding:10px 14px;border-radius:14px;margin-bottom:6px;background:var(--red-s);display:flex;justify-content:space-between;gap:10px;align-items:center}
.review-list .ans{font-weight:900;color:var(--ink)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:80;width:100%;height:100%}

/* ---------- quests ---------- */
.culture-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cpick input{position:absolute;opacity:0}
.cpick span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border:2px solid var(--line2);border-radius:18px;box-shadow:0 4px 0 var(--line2);cursor:pointer;text-align:center;height:100%}
.cpick i{font-style:normal;font-size:30px} .cpick b{color:var(--green-d)} .cpick small{font-size:.75rem;color:var(--muted);line-height:1.2}
.cpick input:checked+span{border-color:var(--green);background:var(--green-s);box-shadow:0 4px 0 var(--green)}
.cpick input:focus-visible+span{outline:3px solid var(--teal)}
.bosses{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bosscard2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 12px;border-radius:22px;background:#fff;border:2px solid var(--line);box-shadow:var(--edge);text-decoration:none;color:var(--ink2)}
.boss-face{width:76px;height:76px;border-radius:24px;background:var(--purple-s);display:grid;place-items:center;font-size:44px;margin-bottom:4px}
.bosscard2.open .boss-face{background:var(--purple);box-shadow:0 5px 0 var(--purple-d)}
.bosscard2.won .boss-face{background:var(--sun);box-shadow:0 5px 0 var(--sun-d)}
.bosscard2.locked{opacity:.6;pointer-events:none}
.boss-week{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--purple-d)}
.bosscard2 small{font-size:.82rem;line-height:1.3;margin-bottom:6px}
.history summary{cursor:pointer}
.hist{list-style:none;padding:0;margin:12px 0 0}
.hist li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:2px dashed var(--line)}

/* ---------- league ---------- */
.podium{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin:10px 0 24px}
.pod{display:flex;flex-direction:column;align-items:center;gap:2px;width:150px}
.pod-av{width:66px;height:66px;border-radius:50%;background:#fff;border:3px solid var(--line);display:grid;place-items:center;font-size:34px;margin-bottom:4px}
.pod.p1 .pod-av{width:84px;height:84px;font-size:44px;border-color:var(--sun)}
.pod.me .pod-av{border-color:var(--teal)}
.pod-xp{font-weight:900;color:#c98a00}
.pod-block{width:100%;border-radius:18px 18px 0 0;display:grid;place-items:center;font-size:34px;margin-top:6px;color:#fff}
.p1 .pod-block{height:120px;background:var(--sun);box-shadow:inset 0 -8px 0 var(--sun-d)}
.p2 .pod-block{height:86px;background:#c6cde0;box-shadow:inset 0 -8px 0 #a9b2c9}
.p3 .pod-block{height:64px;background:#f2b27a;box-shadow:inset 0 -8px 0 #d99257}
.board{list-style:none;padding:0;margin:0}
.board li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px}
.board li:nth-child(odd){background:#fbf8f2}
.board li.me{background:var(--teal-s);outline:2px solid #bfeaf0}
.rank{width:28px;text-align:center;font-weight:900;color:var(--ink)}
.verify{background:#f2fcf6;border-color:#b8ecd2;box-shadow:0 4px 0 #9ddfbd}
.verify-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:2px dashed #c9eedb;flex-wrap:wrap}
.sq-row{display:flex;align-items:center;gap:10px;padding:8px 0;flex-wrap:wrap}
.feed{list-style:none;padding:0;margin:0}
.feed li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:2px dashed var(--line);font-size:.92rem}

/* ---------- badges ---------- */
.medals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.medal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:22px 12px;border-radius:22px;background:#fff;border:2px solid var(--line);box-shadow:var(--edge)}
.medal-disc{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:#efeae0;margin-bottom:8px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}
.medal-disc span{font-size:44px;filter:grayscale(1);opacity:.45}
.medal small{color:var(--muted);font-size:.82rem;line-height:1.3}
.medal.got .medal-disc span{filter:none;opacity:1}
.medal.got .medal-disc{background:var(--mc);box-shadow:inset 0 -7px 0 rgba(0,0,0,.15),0 0 0 6px color-mix(in srgb,var(--mc) 25%,transparent)}
.t1{--mc:var(--sun)} .t2{--mc:var(--teal)} .t3{--mc:var(--coral)} .t4{--mc:var(--purple)} .t5{--mc:var(--green)} .t6{--mc:var(--pink)}

/* ---------- forms, auth, squad, profile ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:800;color:var(--ink)}
.form label small{font-weight:600;color:var(--muted)}
input[type=text],input:not([type]),input[type=password],input[type=email]{font:700 1rem var(--font);padding:13px 15px;border:2px solid var(--line2);border-radius:14px;background:var(--soft);width:100%;color:var(--ink)}
input:focus{outline:none;border-color:var(--teal);background:#fff}
.form label.check{flex-direction:row;align-items:center;gap:10px}
.form label.check input{width:22px;height:22px;accent-color:var(--teal)}
.auth{max-width:460px;margin:30px auto}
.avatars{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0}
.avatars legend{font-weight:800;color:var(--ink);margin-bottom:6px}
.avatars input{position:absolute;opacity:0}
.avatars span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-size:23px;border:2px solid var(--line2);cursor:pointer;box-shadow:0 3px 0 var(--line2)}
.avatars input:checked+span{border-color:var(--teal);background:var(--teal-s);box-shadow:0 3px 0 var(--teal)}
.code-box{background:var(--sun);border-radius:16px;padding:8px 16px;text-align:center;display:flex;flex-direction:column;box-shadow:0 4px 0 var(--sun-d)}
.code-box strong{font-size:1.5rem;letter-spacing:.14em;color:#5a3d00}
.code-box span{color:#7a5200}

/* ---------- landing ---------- */
.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:28px;border-radius:32px;padding:clamp(26px,5vw,52px);background:linear-gradient(120deg,#fff4de 0%,#e7f7f6 55%,#c9ecf4 100%);border:2px solid #dff0f2;box-shadow:0 5px 0 #cfe6ea}
.hero h1{font-size:clamp(2.4rem,6vw,3.8rem);line-height:1.02;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--coral)}
.landing-hero{grid-template-columns:1.25fr .9fr}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.trust span{background:#fff;border:2px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:800;font-size:.88rem;color:var(--ink)}
.login-card{position:relative;padding-top:62px}
.login-card h2{text-align:center}
.login-mascot{position:absolute;top:-56px;left:50%;transform:translateX(-50%);width:110px;height:110px;border-radius:50%;background:#e4f5fb;padding:8px;border:4px solid #fff;animation:bob 3s ease-in-out infinite}
.step .ico{width:56px;height:56px;border-radius:18px;background:var(--teal-s);display:grid;place-items:center;font-size:28px;margin-bottom:10px}
.sample{align-items:center}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat span{font-size:32px;display:block;margin-bottom:6px} .feat p{margin:0}
.why{background:linear-gradient(120deg,#fff,#eaf7fb)}
.course-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.course-chip{display:flex;gap:12px;align-items:center}
.course-chip.soon{opacity:.7;border-style:dashed}
.faq details{margin-bottom:10px;padding:16px 20px}
.faq summary{cursor:pointer;font-weight:900;color:var(--ink)} .faq details p{margin:10px 0 0}
.cta{background:linear-gradient(110deg,#fff4de,#c9ecf4)}

.toast{visibility:hidden;position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(150%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:18px;font-weight:800;transition:transform .3s;z-index:90;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.show{visibility:visible;transform:translateX(-50%) translateY(0)}
.foot{text-align:center;color:var(--muted);font-size:.88rem;margin-top:36px}


/* ---------- missions & immersion ---------- */
.play-sub{max-width:760px;width:100%;margin:0 auto;padding:0 16px;min-height:22px}
.play-stage{display:inline-block;font-weight:900;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d);background:var(--teal-s);border-radius:999px;padding:3px 12px}
.play-body.center{display:flex;align-items:center;justify-content:center}
.q-prompt small{display:block;font-size:.95rem;color:var(--muted);font-weight:700;margin-top:2px}
.stage-card{text-align:center;max-width:520px}
.stage-ic{font-size:72px;line-height:1;margin-bottom:10px;animation:bob 2.6s ease-in-out infinite}
.stage-card h1{font-size:clamp(2rem,6vw,2.8rem)}
.info-card{max-width:620px;margin:0 auto;text-align:center;background:var(--soft);border-radius:24px;padding:26px}
.info-card .stage-ic{font-size:56px}
.info-card .checklist{text-align:left;max-width:460px;margin:12px auto}
.word-big{text-align:center;border:2px solid var(--line);border-radius:28px;padding:28px 20px;max-width:520px;margin:6px auto 0;box-shadow:var(--edge)}
.word-big .tl{font-size:clamp(2.2rem,8vw,3.2rem);font-weight:900;color:var(--ink);line-height:1.05}
.word-big .pron{color:var(--teal-d);font-weight:800;margin-top:4px}
.word-big .en{font-size:1.25rem;font-weight:800;margin:8px 0 4px}
.word-big .note{color:var(--muted);font-size:.92rem;margin-bottom:14px}
.center-row{justify-content:center;margin-top:12px}
.mic-result{min-height:44px;margin-top:12px;text-align:center;font-weight:800}
.good-t{color:var(--green-d)} .mid-t{color:#c48000} .bad-t{color:#d43b40}
.q-face{width:84px;height:84px;flex-shrink:0;border-radius:26px;background:var(--purple-s);display:grid;place-items:center;font-size:50px}
.q-who{display:block;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--purple-d);margin-bottom:2px}
.hint{margin:-8px 0 16px;color:var(--muted);font-weight:700}
.hint summary{cursor:pointer;font-size:.88rem}
.mission-box{background:#fff6e0;border:2px solid #ffe0a0;border-radius:18px;padding:14px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:4px}
.mission-box b{font-size:1.15rem}
.mission-box .kicker{color:#b06e00;margin:0}
.mission-box .kicker small{display:inline;margin-left:6px;color:#c9953a}
.type-row{display:flex;gap:8px;align-items:center}
.mic-btn{width:56px;height:56px;font-size:24px;border-radius:16px;flex-shrink:0}
.big-mic{width:110px;height:110px;border-radius:50%;border:0;background:var(--coral);color:#fff;font-size:50px;box-shadow:0 7px 0 var(--coral-d);cursor:pointer;display:block;margin:10px auto 0}
.big-mic.live,.mic-btn.live,.btn.live{animation:pulse 1s infinite;background:var(--red);color:#fff}
.speak-zone{text-align:center}
.lines-box{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.lines-box.blur .bub .tl{filter:blur(7px);user-select:none}
.lines-box.no-en .bub .en{display:none}
.match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match>div{display:flex;flex-direction:column;gap:10px}
.mt{width:100%;text-align:center;min-height:58px}
.mt.sel{border-color:var(--teal);background:var(--teal-s);box-shadow:0 4px 0 var(--teal)}
.mt.matched{border-color:var(--green);background:var(--green-s);color:var(--green-d);box-shadow:none;opacity:.6}
.play-foot.close{background:#fff6e0;border-color:#ffe0a0}
.close .fb b{color:#b06e00}
.close .btn{background:var(--sun);color:#5a3d00;box-shadow:0 4px 0 var(--sun-d)}
.fb div{display:flex;flex-direction:column;gap:2px}
.fb .bd{font-size:.85rem;color:var(--ink2)} .fb .bd i{font-style:normal;font-weight:900;color:var(--ink)}
.report{background:var(--soft);border-radius:20px;padding:16px 18px;margin-top:18px;text-align:left}
.report.left{max-width:620px;margin:18px auto 0}
.place-opts.three{grid-template-columns:repeat(3,1fr)}
.place-how{background:var(--teal-s);border-radius:18px;padding:14px 16px;text-align:left;font-size:.95rem;margin-top:4px}
.trail{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.trail li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 8px}
.trail-ic{font-size:30px} .trail b{font-size:.9rem;line-height:1.15} .trail small{font-size:.74rem;color:var(--muted);line-height:1.25}
.weekly .wq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
/* talk */
.cast-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.cast{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;text-decoration:none;color:var(--ink);padding:10px 6px;border-radius:18px;border:2px solid var(--line);background:#fff;box-shadow:0 3px 0 var(--line2)}
.cast.on{border-color:var(--purple);background:var(--purple-s);box-shadow:0 3px 0 var(--purple)}
.cast.locked{opacity:.5;pointer-events:none}
.cast-face{font-size:34px} .cast b{font-size:.78rem;line-height:1.15} .cast small{font-size:.68rem;color:var(--muted)}
.chat{display:flex;flex-direction:column;min-height:60vh;padding:0;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:2px solid var(--line);background:var(--purple-s)}
.chat-face{font-size:40px}
.chat-scene{margin:0;padding:10px 18px;background:#fffbea;border-bottom:2px solid var(--line)}
.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;max-height:56vh}
.msg{max-width:82%;padding:10px 14px;border-radius:18px;line-height:1.4}
.msg.them{background:var(--purple-s);border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--teal);color:#fff;border-bottom-right-radius:6px;align-self:flex-end;font-weight:800}
.msg.fix{background:#fff6e0;border:2px dashed #ffd27a;align-self:flex-end;font-size:.92rem}
.msg.sys{align-self:center;color:var(--muted);font-size:.9rem}
.msg details{margin-top:4px;color:var(--ink2)}
.dots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--purple);margin:0 2px;animation:bob 1s infinite}
.dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}
.chat-form{display:flex;gap:8px;padding:12px 14px;border-top:2px solid var(--line);align-items:center}
.chat-form input{flex:1}
.chat-help{padding:0 18px 12px}
.prompt-box{width:100%;font:600 .9rem var(--font);border:2px solid var(--line);border-radius:14px;padding:10px;margin:8px 0}
@media (max-width:760px){.place-opts.three{grid-template-columns:1fr}.weekly .wq-grid{grid-template-columns:1fr}.q-face{width:64px;height:64px;font-size:38px}}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pop{animation:pop .35s ease-out} .shake{animation:shake .3s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .learn{grid-template-columns:1fr}
  .side{position:static;display:grid;grid-template-columns:1fr 1fr}
  .path-col{order:2}
  .side .tala{display:none}
  .nav-lb{display:none}
}
@media (max-width:760px){
  .nav{display:none}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:2px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 0;border-radius:14px;text-decoration:none;color:var(--muted);font-size:24px;border:2px solid transparent}
  .bottomnav small{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
  .bottomnav a.on{background:var(--teal-s);color:var(--teal-d);border-color:#bfeaf0}
  .grid2,.grid3,.features,.hero,.landing-hero{grid-template-columns:1fr}
  .side{display:none}
  .bosses,.medals{grid-template-columns:1fr 1fr}
  .logo-word{display:none}
  .chip{padding:5px 8px;font-size:.88rem}
  .chips .chip:first-child{display:none}
  .continue{flex-direction:column;text-align:center}
  .continue-mascot{width:90px;height:90px}
  .node{transform:translateX(calc(var(--x)*.7))}
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:70px;padding:0 16px;z-index:25}
  .wrap{padding-bottom:170px}
  .login-card{margin-top:50px}
  .podium{gap:6px} .pod{width:31%}
}
@media (max-width:520px){
  .opts{grid-template-columns:1fr}
  .place-opts{grid-template-columns:1fr}
  .card{padding:18px}
  .line{max-width:100%}
  .culture-picks{grid-template-columns:1fr 1fr 1fr}
  .lesson-face{width:72px;height:72px;font-size:40px;border-radius:22px}
  .q-card img{width:64px;height:64px}
}

/* ---------- modal, tour, real-world quests ---------- */
.modal-wrap{position:fixed;inset:0;z-index:70;background:rgba(29,39,71,.45);display:grid;place-items:center;padding:16px}
.modal{background:#fff;border-radius:26px;padding:26px;max-width:480px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.25);border:2px solid var(--line)}
.modal h2{margin-bottom:8px}
.modal-ic{font-size:56px;text-align:center;line-height:1;margin-bottom:8px}
.modal .center{text-align:center}
.modal-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.note-box{width:100%;font:700 1rem var(--font);border:2px solid var(--line2);border-radius:14px;padding:12px;background:var(--soft);margin-bottom:14px;color:var(--ink)}
.note-box:focus{outline:none;border-color:var(--teal);background:#fff}
.tour{position:fixed;inset:0;z-index:75}
.tour.center{background:rgba(29,39,71,.55);display:grid;place-items:center;padding:16px}
.tour-hole{position:fixed;border-radius:18px;box-shadow:0 0 0 9999px rgba(29,39,71,.55);transition:all .25s;pointer-events:none;outline:3px solid var(--sun)}
.tour-card{position:fixed;width:min(360px,calc(100vw - 24px));background:#fff;border-radius:22px;padding:18px;box-shadow:0 16px 40px rgba(0,0,0,.25);border:2px solid var(--line)}
.tour.center .tour-card{position:relative;width:min(420px,100%)}
.tour-top{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.tour-top img{width:52px;height:52px;flex-shrink:0}
.tour-top b{display:block;color:var(--ink);font-size:1.1rem}
.tour-card p{margin:0 0 14px}
.realworld{background:linear-gradient(120deg,#fff 40%,#eefaf3);border-color:#c9eedb;box-shadow:0 4px 0 #b4e6cb}
.rq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 8px}
.rq{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:18px;padding:14px}
.rq .grow p{margin:2px 0 8px}
.rq-ic{font-size:34px;line-height:1}
.rq-meta{display:flex;gap:6px;flex-wrap:wrap}
.rq.done{background:var(--green-s);border-color:#b8ecd2}
.rq.pending{background:#fff8ea;border-color:#ffdca6}
.rq .btn,.rq>.tag{align-self:center;flex-shrink:0}
@media (max-width:760px){.rq-grid{grid-template-columns:1fr}.rq{flex-wrap:wrap}.rq .btn{width:100%}}
/* immersion: English hidden until you tap the prompt */
.imm .q-prompt small,.imm .mission-box .kicker small{display:none}
.imm .q-prompt{cursor:help}
.imm .q-prompt::after{content:" 👁";font-size:.8rem;opacity:.35}
.imm .q-prompt.peeked small{display:block}
.imm .q-prompt.peeked::after{content:""}
.compare{display:flex;gap:8px;justify-content:center;margin:8px 0;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat{padding:18px}
.stat strong{display:block;font-size:2rem;font-weight:900;color:var(--ink);line-height:1.1}
.stat span{color:var(--muted);font-weight:700;font-size:.9rem}
.race-title{margin:8px 0 0}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat strong{font-size:1.6rem}}
.invited{display:flex;gap:12px;align-items:center;background:var(--teal-s);border-radius:18px;padding:12px 14px;margin-bottom:14px}
.invited-av{font-size:34px}
.invite-head{display:flex;gap:14px;align-items:flex-start}
.invite-head h2{margin:0}
.invite-ic{font-size:40px}
.share-row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- dashboard ---------- */
.dash-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(110deg,#fff4de 0%,#e7f7f6 60%,#c9ecf4 100%);border-color:#dff0f2;margin-bottom:16px;flex-wrap:wrap}
.dash-hello{display:flex;gap:14px;align-items:center}
.dash-hello h1{font-size:clamp(1.5rem,3.6vw,2.2rem);margin:0}
.dash-hello p{margin:2px 0 0}
.dash-mascot{width:84px;height:84px;flex-shrink:0;animation:bob 3s ease-in-out infinite}
.wave{display:inline-block;animation:wiggle 2s infinite;transform-origin:70% 70%}
.countdown{background:#fff;border:2px solid var(--line);border-radius:20px;padding:10px 18px;display:flex;align-items:center;gap:10px;box-shadow:var(--edge)}
.countdown b{font-size:2.2rem;font-weight:900;color:var(--coral);line-height:1}
.countdown span{font-size:.8rem;font-weight:800;color:var(--ink2);line-height:1.2}
.stats.six{grid-template-columns:repeat(6,1fr)}
.stat strong small{font-size:1rem;color:var(--muted)}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.dash-main,.dash-side{display:flex;flex-direction:column;gap:16px}
.dash-next{background:linear-gradient(120deg,#fff 40%,#fff1ec);border-color:#ffd3c6;box-shadow:0 4px 0 #ffc0ae}
.dash-next h2{font-size:clamp(1.4rem,3vw,1.9rem)}
.dash-next .stars{margin-bottom:8px}
.goal-row{display:flex;gap:16px;align-items:center}
.week-mini{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.week-mini .bar span{background:var(--purple)}
.dash-boss,.dash-talk{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink2)}
.dash-boss{background:var(--purple-s);border-color:#d8ccff;box-shadow:0 4px 0 #c6b6ff}
.dash-boss .boss-face{background:var(--purple);box-shadow:0 5px 0 var(--purple-d)}
.dash-boss.won .boss-face{background:var(--sun);box-shadow:0 5px 0 var(--sun-d)}
.dash-talk{background:var(--teal-s);border-color:#c9edf2;box-shadow:0 4px 0 #b4e4ec}
.dash-talk .boss-face{background:var(--teal);box-shadow:0 5px 0 var(--teal-d)}
.dash-boss b,.dash-talk b{display:block;font-size:1.1rem}
.dash-boss .kicker,.dash-talk .kicker{margin-bottom:2px}
.dash-real{display:flex;gap:14px;align-items:center;background:var(--green-s);border-color:#b8ecd2;box-shadow:0 4px 0 #9ddfbd}
.wod{background:#fffbea;border-color:#f6e3a1;box-shadow:0 4px 0 #efd98a}
.wod-tl{font-size:1.8rem;font-weight:900;color:var(--ink);display:flex;align-items:center;gap:6px}
.wod-en{font-weight:800;margin:4px 0}
.wod .pron{color:var(--teal-d);font-weight:800}
@media (max-width:980px){.dash-grid{grid-template-columns:1fr}.stats.six{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.stats.six{grid-template-columns:1fr 1fr}.goal-row{flex-direction:column;align-items:stretch}.goal-row .ring{align-self:center}.dash-mascot{width:60px;height:60px}}
@media (max-width:520px){
  .stats.six{grid-template-columns:repeat(3,1fr);gap:8px}
  .stats.six .stat{padding:10px 8px;text-align:center}
  .stats.six .stat strong{font-size:1.15rem}
  .stats.six .stat span{font-size:.68rem;line-height:1.2;display:block}
  .bottomnav small{font-size:.6rem;letter-spacing:0}
  .dash-hero{padding:16px}
  .countdown{padding:6px 12px}.countdown b{font-size:1.6rem}
}
.hear-res{display:flex;flex-direction:column;align-items:center;gap:6px}
.hear-pct{font-size:.85rem;background:var(--soft);border-radius:999px;padding:2px 8px;margin-left:4px;color:var(--ink)}
.hear-words{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:1.2rem;font-weight:900}
.hw{padding:2px 10px;border-radius:10px}
.hw.ok{background:var(--green-s);color:var(--green-d)}
.hw.no{background:var(--red-s);color:#d43b40;text-decoration:underline wavy}
.hear-tip{background:#fff6e0;border:2px solid #ffe0a0;border-radius:14px;padding:8px 12px;font-size:.92rem;max-width:460px}
.toast .hear-tip{color:var(--ink)}
.toast .hear-res .muted{color:#c9cfe0}
.toast{pointer-events:auto}
.hw.close{background:#fff3d1;color:#a46a00}
.voice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.speed-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.voice-opt input{position:absolute;opacity:0}
.voice-opt span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:2px solid var(--line2);border-radius:16px;box-shadow:0 3px 0 var(--line2);cursor:pointer;text-align:center}
.voice-opt i{font-style:normal;font-size:30px} .voice-opt small{color:var(--muted)}
.voice-opt input:checked+span{border-color:var(--teal);background:var(--teal-s);box-shadow:0 3px 0 var(--teal)}
@media (max-width:520px){.voice-grid{grid-template-columns:1fr 1fr}}