/* BRIDGE English — kid-friendly UI */
:root{
  --bg:#f4f7ff; --card:#ffffff; --ink:#17223b; --muted:#7b879c; --line:#e8edf7;
  --purple:#6c5ce7; --blue:#0984e3; --green:#00b894; --orange:#ff7a45;
  --pink:#e84393; --yellow:#fdcb6e; --red:#ff5b5b;
  --r:20px; --shadow:0 8px 26px rgba(23,34,59,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Baloo 2",-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px; line-height:1.5;
  padding-bottom:84px;
}
button{font-family:inherit}
.hidden{display:none !important}
.wrap{max-width:720px;margin:0 auto;padding:0 16px 24px}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;background:rgba(244,247,255,.92);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{font-size:26px}
.brand b{display:block;font-size:17px;letter-spacing:.5px}
.brand small{display:block;font-size:11px;color:var(--muted);letter-spacing:1.5px}
.topright{display:flex;gap:8px;align-items:center}
.chip{
  border:none;border-radius:999px;padding:7px 13px;font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:5px;cursor:pointer;background:#fff;box-shadow:var(--shadow)
}
.chip.xp{background:#fff7e6;color:#e08b00}
.chip.flame{background:#ffecec;color:#e8462d}
.chip.ghost{background:#fff;color:var(--muted)}

/* ---------- home ---------- */
.hello{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#6c5ce7,#8f7bff);
  color:#fff;border-radius:var(--r);padding:18px;margin:16px 0;box-shadow:0 10px 24px rgba(108,92,231,.25)}
.hello-emoji{font-size:44px}
.hello h1{margin:0;font-size:24px}
.hello p{margin:2px 0 0;opacity:.9;font-size:14px}
.sec-title{font-size:13px;letter-spacing:1.6px;color:var(--muted);margin:22px 0 10px;font-weight:800}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.card-soft{box-shadow:none}

.next-card{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(135deg,#ff9a6c,#ff7a45);color:#fff;box-shadow:0 10px 24px rgba(255,122,69,.3)}
.nc-label{font-size:12px;opacity:.9;letter-spacing:1px}
.nc-title{font-size:19px;font-weight:800}
.nc-sub{font-size:13px;opacity:.92}
.btn-go{border:none;background:#fff;color:var(--orange);border-radius:999px;
  padding:11px 20px;font-weight:800;font-size:15px;cursor:pointer;white-space:nowrap}

.ring-row{display:flex;align-items:center;gap:16px}
.ring{width:70px;height:70px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--green) calc(var(--p)*1%), #eceffa 0);font-weight:800;font-size:15px}
.ring span{width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center}
.ring-info b{font-size:17px}
.ring-info small{display:block;color:var(--muted)}
.tasks{list-style:none;margin:14px 0 0;padding:0}
.tasks li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px dashed var(--line);font-size:15px;cursor:pointer}
.tasks li:first-child{border-top:none}
.tasks li:active{opacity:.7}
.tasks li .go{margin-left:4px;font-size:13px;color:var(--muted)}
.tasks .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;color:#fff}
.tasks li.done .tick{background:var(--green);border-color:var(--green)}
.tasks li.done span.t{text-decoration:line-through;color:var(--muted)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{border:none;border-radius:18px;padding:16px;text-align:left;cursor:pointer;color:#fff;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px;transition:transform .15s}
.tile:active{transform:scale(.97)}
.tile span{font-size:26px}
.tile b{font-size:16px}
.tile small{opacity:.85;font-size:12px}
.t-purple{background:linear-gradient(135deg,#7c6cff,#6c5ce7)}
.t-blue{background:linear-gradient(135deg,#3fa9f5,#0984e3)}
.t-green{background:linear-gradient(135deg,#26dea5,#00b894)}
.t-orange{background:linear-gradient(135deg,#ffa06c,#ff7a45)}
.t-pink{background:linear-gradient(135deg,#ff8fb1,#ff5b8a)}
.t-teal{background:linear-gradient(135deg,#4fd1c5,#0fb9b1)}

/* ---------- worlds ---------- */
.world{display:flex;align-items:center;gap:14px;background:#fff;border-radius:18px;padding:14px 16px;
  margin-bottom:12px;box-shadow:var(--shadow);cursor:pointer;border-left:6px solid var(--c,#6c5ce7)}
.world:active{transform:scale(.99)}
.world .w-emoji{font-size:30px}
.world .w-title{font-weight:800;font-size:16px}
.world .w-zh{font-size:13px;color:var(--muted)}
.world .w-stat{margin-left:auto;text-align:right;font-size:12px;color:var(--muted)}
.world.locked{opacity:.55;filter:grayscale(.4)}
.mission{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:13px 15px;
  margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer}
.mission .m-no{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-weight:800;
  background:#eef1fb;color:var(--purple);flex:0 0 auto}
.mission.done .m-no{background:var(--green);color:#fff}
.mission .m-t{font-weight:700}
.mission .m-z{font-size:12.5px;color:var(--muted)}
.mission .m-go{margin-left:auto;color:var(--muted)}
.mission.boss .m-no{background:#fff2e5;color:var(--orange)}

/* ---------- learn ---------- */
.learn-bar{gap:12px}
.progress-line{flex:1;height:9px;background:#e8edf7;border-radius:99px;overflow:hidden}
.progress-line div{height:100%;width:0;background:linear-gradient(90deg,#6c5ce7,#00b894);transition:width .3s;border-radius:99px}
.stage-title{font-size:12px;letter-spacing:2px;color:var(--muted);text-align:center;margin:6px 0 12px;font-weight:800}

.wordcard{background:#fff;border-radius:26px;padding:26px 20px;text-align:center;box-shadow:var(--shadow)}
.wordcard .w-emoji{font-size:74px;line-height:1}
.wordcard .w-en{font-size:38px;font-weight:800;letter-spacing:1px;margin:6px 0 2px}
.wordcard .w-ipa{color:var(--muted);font-size:16px}
.wordcard .w-zh{font-size:26px;font-weight:700;color:var(--purple);margin:10px 0 4px}
.wordcard .w-pos{font-size:12px;color:var(--muted)}
.play{font-size:34px;border:none;background:#f1f3ff;border-radius:50%;width:64px;height:64px;cursor:pointer;margin:10px auto}
.play:active{transform:scale(.94)}
.pill{display:inline-block;background:#f1f3ff;color:var(--purple);border-radius:99px;padding:4px 12px;font-size:12.5px;margin:2px}
.sentbox{background:#f8faff;border:1px dashed var(--line);border-radius:16px;padding:14px;margin-top:12px;text-align:left}
.sentbox .en{font-size:19px;font-weight:700}
.sentbox .zh{color:var(--muted);font-size:14px}
.bigbtn{display:block;width:100%;border:none;border-radius:16px;padding:15px;font-size:17px;font-weight:800;
  cursor:pointer;margin-top:14px;color:#fff;background:linear-gradient(135deg,#7c6cff,#6c5ce7);box-shadow:0 8px 20px rgba(108,92,231,.28)}
.bigbtn.green{background:linear-gradient(135deg,#26dea5,#00b894);box-shadow:0 8px 20px rgba(0,184,148,.28)}
.bigbtn.ghost{background:#fff;color:var(--muted);box-shadow:var(--shadow)}
.bigbtn:active{transform:scale(.98)}

.q{font-size:22px;font-weight:800;text-align:center;margin:12px 0 16px}
.opts{display:grid;gap:10px}
.opt{border:2px solid var(--line);background:#fff;border-radius:16px;padding:14px 16px;font-size:16.5px;
  cursor:pointer;text-align:left;font-weight:600;transition:.15s}
.opt:active{transform:scale(.99)}
.opt.right{border-color:var(--green);background:#e9fff8}
.opt.wrong{border-color:var(--red);background:#ffecec}
.opt small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.listen-btn{display:block;margin:0 auto 16px;font-size:40px;border:none;background:#eef1ff;
  width:88px;height:88px;border-radius:50%;cursor:pointer}
.listen-btn:active{transform:scale(.95)}

.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0;min-height:56px}
.tiles .t{border:2px solid var(--line);background:#fff;border-radius:12px;padding:9px 13px;font-size:16px;font-weight:700;cursor:pointer}
.tiles .t.used{opacity:.35}
.slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:52px;
  border:2px dashed var(--line);border-radius:16px;padding:10px;margin-bottom:14px}
.slots .s{background:#f1f3ff;border-radius:12px;padding:9px 13px;font-weight:700;cursor:pointer}
.slots .s:active{transform:scale(.94)}
.slots .s.wrong{background:#ffecec;color:#c0392b;box-shadow:inset 0 0 0 2px var(--red)}
.slots .s.right{background:#e9fff8;box-shadow:inset 0 0 0 2px var(--green)}
.build-tools{display:flex;gap:8px;justify-content:center;margin:2px 0 12px;flex-wrap:wrap}
.minibtn{border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 13px;font-size:14px;font-weight:700;cursor:pointer}
.minibtn:active{transform:scale(.96)}
.hintbox{border-radius:14px;padding:10px 13px;font-size:14px;margin-top:10px;line-height:1.5}
.hintbox.bad{background:#ffecec;color:#c0392b}
.hintbox.good{background:#e9fff8;color:#0b8a6f}
.recres{min-height:22px;margin-top:10px;font-size:14px;color:var(--muted)}

.dlg{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.dlg .who{font-size:12px;letter-spacing:1.4px;color:var(--muted);font-weight:800}
.dlg .line{font-size:19px;font-weight:700;margin:2px 0}
.dlg .zh{color:var(--muted);font-size:14px}
.dlg.me{background:#f4f1ff}
.dlg.you{background:#eafaf6}

.result{text-align:center;padding:26px 16px}
.result .big{font-size:64px}
.result h2{margin:8px 0 4px;font-size:26px}
.result .xp{font-size:20px;font-weight:800;color:var(--orange)}
.mastery-bar{height:8px;background:#eceffa;border-radius:99px;overflow:hidden;margin-top:6px}
.mastery-bar i{display:block;height:100%;background:linear-gradient(90deg,#6c5ce7,#00b894)}

/* ---------- progress ---------- */
.skill{display:flex;align-items:center;gap:12px;margin:10px 0}
.skill .nm{width:88px;font-size:14px;font-weight:700}
.skill .bar{flex:1;height:12px;background:#eceffa;border-radius:99px;overflow:hidden}
.skill .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#6c5ce7,#00b894)}
.skill .vv{width:44px;text-align:right;font-weight:800;font-size:14px}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 4px}
.statgrid div{background:#f8faff;border-radius:14px;padding:12px;text-align:center}
.statgrid b{display:block;font-size:21px}
.statgrid small{color:var(--muted);font-size:12px}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-size:13px;display:flex;gap:6px;align-items:center}
.badge.locked{opacity:.4}

/* ---------- tabbar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  display:flex;z-index:30;padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.tabbar button{flex:1;border:none;background:none;color:var(--muted);font-size:11.5px;display:flex;
  flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px}
.tabbar button span{font-size:21px}
.tabbar button.on{color:var(--purple);font-weight:800}

/* ---------- parent ---------- */
.pinbox{text-align:center;padding:30px 16px}
.pinbox input{font-size:26px;letter-spacing:10px;text-align:center;padding:12px;width:180px;
  border:2px solid var(--line);border-radius:14px;outline:none}
.rep{background:#fff;border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.rep h3{margin:0 0 8px;font-size:15px}
.rep .kv{display:flex;justify-content:space-between;padding:5px 0;border-top:1px dashed var(--line);font-size:14px}
.rep .kv:first-of-type{border-top:none}
.weak{background:#fff4f4;border:1px solid #ffd6d6;border-radius:16px;padding:14px;margin-bottom:12px}
.weak b{color:#d63031}
.warn{background:#fff8e6;border:1px solid #ffe6a8;border-radius:14px;padding:12px;font-size:13.5px;margin-bottom:12px}
.wtable{width:100%;border-collapse:collapse;font-size:13.5px}
.wtable td{padding:6px 4px;border-top:1px solid var(--line)}

/* ---------- fx ---------- */
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:#17223b;color:#fff;
  padding:11px 18px;border-radius:99px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:99}
.toast.show{opacity:1;transform:translate(-50%,0)}
.fx{position:fixed;inset:0;pointer-events:none;z-index:98;overflow:hidden}
.fx i{position:absolute;top:-20px;font-size:22px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(360deg);opacity:.2}}
.pop{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

@media(min-width:760px){
  body{padding-bottom:20px}
  .tabbar{position:sticky;max-width:720px;margin:16px auto;border-radius:999px;border:1px solid var(--line);box-shadow:var(--shadow)}
}