/* ============ Lumi 英语冒险岛 · 设计系统 ============ */

/* ---------- 字体（全部本地托管，无第三方请求） ---------- */
@font-face{font-family:Fredoka;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/fredoka-500-latin.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fredoka-600-latin.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/fredoka-700-latin.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-400-latin.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/nunito-600-latin.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-700-latin.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/nunito-800-latin.woff2) format("woff2")}

:root{
  /* 奶油底 */
  --cream:#FFF6EA;
  --cream-2:#FFFBF4;
  --cream-3:#F7E9D6;
  /* 墨色（深紫） */
  --ink:#2A1745;
  --ink-2:#5B4A78;
  --ink-3:#7C6B96;
  /* 橙黄冒险 */
  --sun:#FFD166;
  --tang:#FF8A3D;
  --tang-deep:#A94E08;
  /* 区块色 */
  --teal:#149381;   --teal-bg:#E2F6F1;   --teal-ink:#0A6355;
  --purple:#6C3FD1; --purple-bg:#EEE8FF; --purple-ink:#4A219B;
  --pink:#E23C72;   --pink-bg:#FFE7EF;   --pink-ink:#A81B4D;
  --green:#4C9E2F;  --green-bg:#E8F6DD;  --green-ink:#33691D;
  --deep:#33175E;   --deep-2:#22103F;

  --r-lg:30px; --r-md:22px; --r-sm:16px; --r-pill:999px;
  --shadow-sm:0 2px 0 rgba(42,23,69,.08);
  --shadow-md:0 10px 26px -14px rgba(42,23,69,.42);
  --shadow-pop:0 18px 44px -20px rgba(42,23,69,.5);
  --font-display:"Fredoka","Nunito","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Nunito","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --dur:.18s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1000px 460px at 88% -140px,#FFE7C2 0%,rgba(255,231,194,0) 62%),
    radial-gradient(760px 420px at -180px 12%,#EFF7EE 0%,rgba(239,247,238,0) 60%),
    var(--cream);
  color:var(--ink);
  font:400 clamp(16px,.55vw + 14.6px,18px)/1.66 var(--font-body);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.22;margin:0;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
b{font-weight:800}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:#EADFF3;padding:.1em .38em;border-radius:6px}

:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:8px}
/* 深紫底上的控件改用浅色描边，保证焦点环与背景有足够分离度 */
.sidenav__list a[aria-current="true"]:focus-visible,.wordcard :focus-visible{outline-color:var(--sun)}
main:focus{outline:none}

.skip-link{
  position:absolute;left:12px;top:-70px;z-index:60;background:var(--deep);color:#FFF6EA;
  padding:.7rem 1.15rem;border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:700;text-decoration:none;
  transition:top var(--dur)
}
.skip-link:focus-visible{top:0}

/* ---------- 按钮 ---------- */
.btn{
  --bg:var(--cream-2);--fg:var(--ink);--bd:rgba(42,23,69,.16);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  border-radius:var(--r-pill);padding:.68em 1.4em;font-weight:800;font-size:.98em;
  cursor:pointer;text-decoration:none;box-shadow:0 3px 0 rgba(42,23,69,.14);
  transition:transform var(--dur),box-shadow var(--dur),filter var(--dur)
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(42,23,69,.14)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(42,23,69,.16)}
.btn--primary{--bg:var(--deep);--fg:#FFF7E8;--bd:#4B2A80}
.btn--star{--bg:var(--sun);--fg:#4A2504;--bd:#DEA62E}
.btn--onDark{--bg:rgba(255,246,234,.14);--fg:#FFF6EA;--bd:rgba(255,246,234,.5);box-shadow:none}
.btn--onDark:hover{box-shadow:0 6px 0 rgba(0,0,0,.22)}
.btn--quiet{--bg:#FFF;--fg:var(--ink);--bd:rgba(42,23,69,.2)}
.btn--danger{--bg:#FFF;--fg:#9B1C1C;--bd:#E4A6A6}
.btn--lg{padding:.82em 1.7em;font-size:1.06em}
.linklike{background:none;border:0;border-bottom:2px dotted currentColor;padding:0;color:var(--teal-ink);font:inherit;font-weight:800;cursor:pointer}
.iconbtn{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:#FFF;border:2px solid rgba(42,23,69,.16);font-size:18px;line-height:1;cursor:pointer
}
.iconbtn:hover{background:var(--cream-3)}

.bar{display:block;height:12px;border-radius:var(--r-pill);background:rgba(42,23,69,.13);overflow:hidden}
.bar--lg{height:18px}
.bar__fill{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--tang),var(--sun));transition:width .35s ease}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,251,244,.94);
  backdrop-filter:blur(8px);
  border-bottom:2px solid #EEDCC2;
}
.topbar__inner{
  max-width:1290px;margin:0 auto;padding:.7rem clamp(14px,3vw,28px);
  display:flex;align-items:center;gap:clamp(12px,2.4vw,26px);flex-wrap:wrap
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex:none}
.brand__mark{filter:drop-shadow(0 3px 6px rgba(51,23,94,.28))}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font:700 25px/1 var(--font-display);color:var(--deep);letter-spacing:.01em}
.brand__tag{font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:.14em}

.topbar__tools{display:flex;align-items:center;gap:clamp(10px,1.8vw,20px);margin-left:auto;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.search{flex:1 1 240px;min-width:0;position:relative}
.search__label{display:block;font-size:12px;font-weight:800;color:var(--ink-2);letter-spacing:.05em;margin-bottom:3px}
.search__box{position:relative;display:flex;align-items:center}
.search__icon{position:absolute;left:14px;color:var(--ink-3);pointer-events:none}
.search input{
  width:100%;font:inherit;font-size:.95em;color:var(--ink);
  background:#FFF;border:2px solid #E4D3BA;border-radius:var(--r-pill);
  padding:.6em 2.9em .6em 2.7em
}
.search input::placeholder{color:#93827A}
.search input::-webkit-search-cancel-button{display:none}
.search__clear{
  position:absolute;right:8px;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cream-3);color:var(--ink);font-weight:800
}
.search__clear::before{content:"✕";font-size:14px}
.search__status{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:3px;min-height:0}
.search__status:empty{display:none}

.topbar__stats{display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);flex:none}
.stat{
  display:flex;align-items:center;gap:.45rem;background:#FFF;border:2px solid #EEDCC2;
  border-radius:var(--r-pill);padding:.34rem .8rem .34rem .5rem;box-shadow:var(--shadow-sm)
}
.stat__icon{display:grid;place-items:center;width:28px;height:28px;flex:none}
.stat__text{display:flex;flex-direction:column;line-height:1.12;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.stat__text b{font-family:var(--font-display);font-size:17px;color:var(--ink);font-weight:700}
.topbar__avatar{display:flex;align-items:center;gap:.5rem;padding-left:.3rem}
.avatar{width:44px;height:44px;flex:none;border-radius:50%;box-shadow:0 0 0 3px #FFF,0 0 0 5px var(--sun)}
.avatar__meta{display:flex;flex-direction:column;line-height:1.15;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.avatar__name{font-size:14.5px;font-weight:800;color:var(--ink)}

/* ---------- 骨架 ---------- */
.shell{max-width:1290px;margin:0 auto;padding:clamp(16px,2.4vw,30px) clamp(14px,3vw,28px) 40px;
  display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(18px,2.4vw,30px);align-items:start}

.sidenav{position:sticky;top:96px;display:grid;gap:14px}
.sidenav__title{font:800 12px/1 var(--font-body);letter-spacing:.16em;color:var(--ink-3);padding-left:6px}
.sidenav__list{display:grid;gap:5px}
.sidenav__list a{
  display:flex;align-items:center;gap:.6rem;padding:.62rem .8rem;border-radius:var(--r-sm);
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.95em;border:2px solid transparent;
  transition:background var(--dur),border-color var(--dur)
}
.sidenav__list a:hover{background:#FFF5E4;border-color:#F0DCBD}
.sidenav__list a[aria-current="true"]{background:var(--deep);color:#FFF6EA;border-color:var(--deep)}
.dot{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.dot--orange{background:var(--tang)}.dot--teal{background:var(--teal)}
.dot--purple{background:var(--purple)}.dot--pink{background:var(--pink)}.dot--green{background:var(--green)}

main{display:grid;gap:clamp(20px,2.8vw,34px);min-width:0}

/* ---------- 每日冒险横幅 ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(118deg,#FFC24A 0%,#FF9E2C 46%,#FF8A3D 100%);
  border:3px solid #F0A93B;border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,40px);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(14px,2.6vw,32px);align-items:center;
  box-shadow:var(--shadow-pop)
}
.hero__glow{position:absolute;inset:auto -60px -90px auto;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.6),rgba(255,255,255,0) 70%);z-index:-1}
.hero__body{display:grid;gap:.85rem;color:#4A2504;min-width:0}
.hero__eyebrow{display:flex;align-items:center;gap:.55rem;font-size:13px;font-weight:800;letter-spacing:.05em;color:#5A2C07}
.hero__title{font-size:clamp(27px,3.9vw,44px);color:#3D1C05;text-wrap:balance}
.hero__title-accent{position:relative;white-space:nowrap}
.hero__title-accent::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.05em;height:.3em;
  background:rgba(255,255,255,.62);border-radius:var(--r-pill);z-index:-1}
.hero__desc{font-size:clamp(15px,1.1vw,17.5px);line-height:1.62;color:#55290A;max-width:48ch}
.hero__meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:13.5px;font-weight:700;color:#5A2C07}
.hero__meta li{background:rgba(255,255,255,.55);border:1.5px solid rgba(107,58,8,.22);border-radius:var(--r-pill);padding:.32em .85em}
.hero__meta b{font-family:var(--font-display);font-size:1.08em}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.35rem}
.hero__art{justify-self:center;width:min(100%,238px)}
.hero__art svg{width:100%;height:auto;filter:drop-shadow(0 12px 20px rgba(120,54,4,.24))}

/* ---------- 区块通用 ---------- */
.block{display:grid;gap:clamp(12px,1.7vw,20px);scroll-margin-top:118px}
.block__head{display:grid;gap:.3rem}
.block__head h2{font-size:clamp(21px,2.3vw,28px);color:var(--deep)}
.block__sub{font-size:14px;color:var(--ink-2)}
.empty{background:#FFF;border:2px dashed #DFC9A6;border-radius:var(--r-md);padding:1.4rem;text-align:center;color:var(--ink-2);font-weight:700}

/* ---------- 课程卡 ---------- */
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(12px,1.6vw,18px)}
@media (min-width:860px){.courses{grid-template-columns:repeat(2,minmax(0,1fr))}}
.course{
  --c:var(--teal);--cbg:var(--teal-bg);--ci:var(--teal-ink);
  position:relative;display:grid;gap:.7rem;overflow:hidden;
  background:var(--cbg);border:2.5px solid color-mix(in srgb,var(--c) 34%,#fff);
  border-radius:var(--r-md);padding:1.15rem 1.15rem 1.25rem;
  box-shadow:var(--shadow-md);transition:transform var(--dur)
}
.course:hover{transform:translateY(-3px)}
.course::after{content:"";position:absolute;right:-46px;top:-46px;width:130px;height:130px;border-radius:50%;
  background:color-mix(in srgb,var(--c) 20%,transparent)}
.course__top{display:flex;align-items:flex-start;gap:.7rem;position:relative;z-index:1}
.course__icon{width:52px;height:52px;flex:none;border-radius:18px;background:#FFF;display:grid;place-items:center;
  border:2px solid color-mix(in srgb,var(--c) 32%,#fff)}
.course__titles{min-width:0}
.course__en{font:700 11.5px/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:800}
.course__zh{font-family:var(--font-display);font-size:20px;color:var(--ci);margin-top:2px}
.course__desc{font-size:13.6px;line-height:1.55;color:var(--ink-2);position:relative;z-index:1}
.course__words{display:flex;flex-wrap:wrap;gap:.34rem;position:relative;z-index:1}
.course__words li{background:rgba(255,255,255,.85);border:1.5px solid color-mix(in srgb,var(--c) 26%,#fff);
  color:var(--ci);border-radius:var(--r-pill);padding:.2em .66em;font-size:12.5px;font-weight:700}
.course__prog{display:grid;gap:.3rem;position:relative;z-index:1}
.course__prog-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:800;color:var(--ci)}
.course__prog .bar{background:rgba(255,255,255,.8)}
.course__prog .bar__fill{background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,#FFD166))}
.course__foot{display:flex;align-items:center;gap:.5rem;position:relative;z-index:1;margin-top:.1rem}
.course__btn{--bg:var(--c);--fg:#fff;--bd:color-mix(in srgb,var(--c) 78%,#000);flex:1 1 auto;font-size:.94em;padding:.62em 1em}
.course--teal{--c:var(--teal);--cbg:var(--teal-bg);--ci:var(--teal-ink)}
.course--purple{--c:var(--purple);--cbg:var(--purple-bg);--ci:var(--purple-ink)}
.course--pink{--c:var(--pink);--cbg:var(--pink-bg);--ci:var(--pink-ink)}
.course--green{--c:var(--green);--cbg:var(--green-bg);--ci:var(--green-ink)}
/* 实心彩色按钮上的文字加深，保证可读对比 */
.course--teal .course__btn{--bg:#0B6A5C;--bd:#084C42}
.course--purple .course__btn{--bg:#4A219B;--bd:#331373}
.course--pink .course__btn{--bg:#A81B4D;--bd:#7E0F38}
.course--green .course__btn{--bg:#33691D;--bd:#22490F}
.course__badge{font:800 11.5px/1 var(--font-body);color:var(--ci);background:rgba(255,255,255,.9);
  border:1.5px solid color-mix(in srgb,var(--c) 30%,#fff);border-radius:var(--r-pill);padding:.36em .6em;white-space:nowrap}
[hidden]{display:none !important}

/* ---------- 每日单词（深紫面板） ---------- */
.wordcard{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(14px,2vw,24px);
  background:linear-gradient(145deg,var(--deep) 0%,var(--deep-2) 100%);
  border:3px solid #4B2A80;border-radius:var(--r-lg);padding:clamp(20px,2.8vw,32px);color:#FFF6EA;
  box-shadow:var(--shadow-pop);position:relative;overflow:hidden
}
.wordcard::before{content:"";position:absolute;left:-40px;bottom:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,209,102,.3),transparent 68%)}
.wordcard__main{display:grid;gap:.55rem;align-content:start;position:relative}
.wordcard__date{font-size:12.5px;font-weight:800;letter-spacing:.1em;color:#C9B2EE}
.wordcard__word{font-size:clamp(34px,5.4vw,58px);color:#FFF;line-height:1.06}
.wordcard__ipa{font-family:var(--font-display);font-weight:500;font-size:clamp(16px,1.7vw,20px);color:var(--sun)}
.wordcard__zh{font-size:17px;font-weight:800;color:#FFEFD1}
.wordcard__eg{font-size:15px;line-height:1.6;color:#E4D7F8;max-width:46ch}
.wordcard__eg b{color:#FFF;font-family:var(--font-display);font-weight:700}
.wordcard__example-zh{display:block;font-size:13.5px;color:#BCA4E4;margin-top:.15rem}
.wordcard__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.wordcard__status{font-size:13.5px;color:#FFE9A8;min-height:1.4em;font-weight:700}
.wordcard__tip{position:relative;background:rgba(255,255,255,.09);border:2px solid rgba(255,246,234,.3);
  border-radius:var(--r-md);padding:1.05rem;align-self:start}
.wordcard__tip h4{font-size:15.5px;color:var(--sun);margin-bottom:.5rem}
.wordcard__tip ol{display:grid;gap:.6rem;counter-reset:t}
.wordcard__tip li{display:grid;gap:.14rem;font-size:14px;line-height:1.55;color:#F1E8FF;padding-left:1.9rem;position:relative;counter-increment:t}
.wordcard__tip li::before{content:counter(t);position:absolute;left:0;top:0;width:23px;height:23px;border-radius:50%;
  background:var(--sun);color:#4A2504;font:700 12.5px/23px var(--font-display);text-align:center}
.wordcard__tip b{color:#FFF}

/* ---------- 字母小游戏 ---------- */
.lettergame{background:#FFF;border:2.5px solid #EEDCC2;border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px);box-shadow:var(--shadow-md)}
.lettergame__prompt{font-size:clamp(17px,2vw,22px);font-family:var(--font-display);font-weight:600;color:var(--deep)}
.lettergame__prompt b{display:inline-block;font-size:1.32em;color:var(--pink);background:var(--pink-bg);
  border-radius:12px;padding:0 .28em;border:2px solid #F0A9BF}
.lettergame__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:1.1rem 0}
.tile{
  min-height:104px;display:grid;place-items:center;cursor:pointer;
  font:700 clamp(30px,4.6vw,46px)/1 var(--font-display);
  background:var(--cream-2);color:var(--deep);border:3px solid #E4D3BA;border-radius:var(--r-md);
  box-shadow:0 4px 0 rgba(42,23,69,.12);transition:transform var(--dur),background var(--dur),border-color var(--dur)
}
.tile:hover:not(:disabled){transform:translateY(-3px);background:#FFF3DE;border-color:var(--sun)}
.tile:disabled{cursor:default}
.tile--right{background:var(--green-bg);border-color:var(--green);color:var(--green-ink)}
.tile--wrong{background:var(--pink-bg);border-color:var(--pink);color:var(--pink-ink)}
.lettergame__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.lettergame__progress{font-size:14px;font-weight:700;color:var(--ink-2)}
.lettergame__feedback{font-size:15px;font-weight:800;margin-top:.2rem;min-height:1.5em}

/* ---------- 星星奖励 ---------- */
.rewards{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(14px,1.8vw,20px);align-items:start}
.rewards__level{background:#FFF;border:2.5px solid #EEDCC2;border-radius:var(--r-lg);padding:clamp(18px,2.3vw,26px);display:grid;gap:.7rem;box-shadow:var(--shadow-md)}
.rewards__lv{font-family:var(--font-display);font-size:clamp(22px,2.7vw,30px);color:var(--deep)}
.rewards__lv b{color:var(--tang-deep)}
.rewards__stars{font-family:var(--font-display);font-size:clamp(34px,5vw,50px);line-height:1;color:var(--tang-deep);display:flex;align-items:baseline;gap:.3em}
.rewards__stars span{font:700 14px/1 var(--font-body);color:var(--ink-2)}
.rewards__hint{font-size:13.5px;color:var(--ink-2);font-weight:700}
.rewards__counters{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.3rem}
.rewards__counters p{background:var(--cream);border:2px solid #F0DCBD;border-radius:var(--r-sm);padding:.6rem .4rem;
  display:grid;text-align:center;gap:.1rem}
.rewards__counters b{font-family:var(--font-display);font-size:22px;color:var(--deep)}
.rewards__counters span{font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.3}
.rewards__reset{border-top:2px dashed #EEDCC2;padding-top:.9rem;display:grid;gap:.45rem}
.rewards__reset .btn{justify-self:start}
.rewards__reset-note{font-size:12.6px;color:var(--ink-3);line-height:1.5}

.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.badge{display:grid;gap:.3rem;background:#FFF;border:2.5px solid #EEDCC2;border-radius:var(--r-md);padding:.95rem;
  align-content:start;transition:transform var(--dur)}
.badge--on{background:linear-gradient(150deg,#FFF4DA,#FFE7AE);border-color:#E9B84E;box-shadow:var(--shadow-md)}
.badge--off{opacity:.72;background:var(--cream-2)}
.badge__icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--deep)}
.badge--off .badge__icon{background:#B9AACB}
.badge__name{font-family:var(--font-display);font-size:16px;color:var(--ink);line-height:1.2}
.badge--off .badge__name{color:var(--ink-2)}
.badge__desc{font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.badge__state{font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--green-ink)}
.badge--off .badge__state{color:var(--ink-3)}

/* ---------- 练习弹窗 ---------- */
.quiz{
  width:min(560px,calc(100vw - 24px));max-height:min(88vh,780px);overflow:auto;
  padding:clamp(18px,3vw,26px);border:3px solid var(--deep);border-radius:var(--r-lg);
  background:var(--cream-2);color:var(--ink);box-shadow:0 30px 70px -24px rgba(34,16,63,.6)
}
.quiz::backdrop{background:rgba(34,16,63,.62);backdrop-filter:blur(2px)}
.quiz__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.quiz__kicker{font:800 12.5px/1 var(--font-body);letter-spacing:.12em;color:var(--tang-deep);
  background:#FFECC6;border:1.5px solid #E9B84E;border-radius:var(--r-pill);padding:.5em .85em}
.quiz__step{font-size:13.5px;font-weight:800;color:var(--ink-2);margin:.85rem 0 .4rem}
.quiz .bar{margin-bottom:1.15rem}
.quiz__q{font-size:clamp(20px,3vw,27px);color:var(--deep);margin-bottom:.5rem;text-wrap:balance}
.quiz__q em{font-style:normal;font-family:var(--font-display);color:var(--tang-deep)}
.quiz__q-visual{display:none}
.swatch{width:46px;height:46px;border-radius:14px;border:3px solid #FFF;box-shadow:0 0 0 2.5px rgba(42,23,69,.22)}
.quiz__q-visual:not(:empty){display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;padding:.5rem 0 .2rem}
.quiz__visual-note{font-size:14px;font-weight:800;color:var(--ink-2)}
.quiz--confirm{width:min(460px,calc(100vw - 24px))}
.quiz__options{display:grid;gap:.6rem}
.quiz__options[data-cols="2"]{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.opt{
  display:flex;align-items:center;gap:.7rem;text-align:left;width:100%;cursor:pointer;
  background:#FFF;border:2.5px solid #E4D3BA;border-radius:var(--r-md);padding:.75rem .95rem;
  font-weight:800;font-size:1.02em;box-shadow:0 3px 0 rgba(42,23,69,.1);
  transition:transform var(--dur),border-color var(--dur),background var(--dur)
}
.opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--sun)}
.opt:disabled{cursor:default}
.opt__key{width:28px;height:28px;flex:none;border-radius:9px;background:var(--cream-3);display:grid;place-items:center;
  font-family:var(--font-display);font-size:14px;color:var(--ink-2)}
.opt__chip{width:26px;height:26px;flex:none;border-radius:8px;border:2px solid rgba(42,23,69,.25)}
.opt--right{background:var(--green-bg);border-color:var(--green)}
.opt--right .opt__key{background:var(--green);color:#fff}
.opt--wrong{background:var(--pink-bg);border-color:var(--pink)}
.opt--wrong .opt__key{background:var(--pink);color:#fff}
.quiz__feedback{font-size:15px;font-weight:800;min-height:1.5em;margin-top:.9rem;line-height:1.5}
.quiz__feedback--right{color:var(--green-ink)}
.quiz__feedback--wrong{color:var(--pink-ink)}
.quiz__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.quiz__score{font-size:13.5px;font-weight:800;color:var(--ink-2)}
.quiz__done{text-align:center;display:grid;gap:.6rem;padding:1.2rem 0 .4rem}
.quiz__done-emoji{font-family:var(--font-display);font-size:56px;line-height:1;color:var(--tang-deep)}
.quiz__done-title{font-size:clamp(22px,3.4vw,30px);color:var(--deep)}
.quiz__done-text{font-size:15px;color:var(--ink-2);line-height:1.6}
.quiz__done-list{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.2rem}
.quiz__done-list li{background:#FFF;border:2px solid #E4D3BA;border-radius:var(--r-pill);padding:.32em .8em;font-size:13px;font-weight:800;color:var(--ink-2)}
.quiz__done-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:.7rem}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:70;
  display:flex;align-items:center;gap:.5rem;background:var(--deep);color:#FFF6EA;
  border:2px solid #6C3FD1;border-radius:var(--r-pill);padding:.65rem 1.15rem;font-weight:800;font-size:15px;
  box-shadow:var(--shadow-pop);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none
}
.toast--show{opacity:1;transform:translate(-50%,0)}
.toast__icon{color:var(--sun);font-size:18px}

/* ---------- 页脚 ---------- */
.footer{border-top:2px solid #EEDCC2;background:#FFFBF4;margin-top:20px}
.footer__inner{max-width:1290px;margin:0 auto;padding:clamp(16px,2.4vw,26px) clamp(14px,3vw,28px)}
.footer__inner p{font-size:13px;color:var(--ink-3);line-height:1.6;max-width:80ch}

/* ---------- 动画 ---------- */
@keyframes pop{0%{transform:scale(.9);opacity:.5}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pop{animation:pop .28s ease-out}
.shake{animation:shake .3s ease-out}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .btn:hover,.course:hover,.tile:hover:not(:disabled),.opt:hover:not(:disabled){transform:none}
}

/* ================= 响应式重排（允许纵向滚动，不裁切内容） ================= */
@media (max-width:1080px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidenav{position:static;grid-template-columns:minmax(0,1fr);gap:10px}
  .sidenav__title{display:none}
  .sidenav__list{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .sidenav__list li{flex:none}
  .sidenav__list a{white-space:nowrap;background:#FFF;border-color:#EEDCC2;padding:.5rem .9rem;border-radius:var(--r-pill)}
  .sidenav__list a[aria-current="true"]{background:var(--deep);border-color:var(--deep)}
}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero__art{order:-1;width:min(66%,220px)}
  .wordcard{grid-template-columns:minmax(0,1fr)}
  .rewards{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:720px){
  .topbar__inner{padding-block:.6rem}
  .brand__tag{display:none}
  .topbar__tools{order:3;width:100%;flex-basis:100%}
  .search{flex-basis:100%}
  .topbar__stats{margin-left:0;width:100%;justify-content:space-between}
  .stat__text{flex-direction:row;align-items:baseline;gap:.25em}
  .avatar__meta{display:none}
  .block{scroll-margin-top:210px}
}

@media (max-width:430px){
  .courses{grid-template-columns:minmax(0,1fr)}
  .lettergame__tiles{grid-template-columns:repeat(2,1fr)}
  .rewards__counters{grid-template-columns:1fr 1fr}
}