/* ============================================================
   MC English World · 重制版样式系统（v2）
   保留 Minecraft 像素基因，升级为现代精致版
   设计原则：高对比易读 · 大按钮好点 · 移动端优先 · 零功能改动
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 主色：墨绿（对齐 henhaoxue.com）。grass 旧名映射为墨绿以兼容现有引用 */
  --green:#287f70;        --green-hover:#206d60;  --green-light:#edf4f1;
  --grass:#287f70;        --grass-dk:#206d60;      --grass-lt:#8FE07C;
  --diamond:#49E8D6;      --diamond-dk:#22B3A4;
  --lapis:#3B7BE8;        --lapis-dk:#2557B8;
  --gold:#E6B23E;         --gold-dk:#C2912A;
  --redstone:#E0494A;     --redstone-dk:#B03234;
  --amethyst:#9B5BE0;     --amethyst-dk:#7A3FBE;
  --emerald:#2FBF71;      --coal:#3A3A44;
  --stone:#3A3A44;        --stone-lt:#5B5B68;
  --deepslate:#16161C;

  /* 中性文字层级（黑透明度，贴合线上四级） */
  --ink:rgba(0,0,0,.88);        /* 主文字 */
  --ink-2:rgba(0,0,0,.72);      /* 次级文字 */
  --ink-3:rgba(0,0,0,.56);      /* 弱化文字 */
  --ink-4:rgba(0,0,0,.46);      /* 最弱文字 */

  /* 表面与描边（极淡，贴合线上 5% 描边 / 0.5px 分隔线） */
  --quartz:#FFFFFF;       /* 卡片白 */
  --quartz-2:#F5F8F6;     /* 卡片内次级面（极淡绿白） */
  --line:rgba(0,0,0,.06);       /* 卡片细描边 */
  --line-2:rgba(0,0,0,.12);     /* 次级描边 / 导航描边 */
  --divider:rgba(0,0,0,.08);    /* 0.5px 分隔线 */
  --on-dark:#F4F2EA;
  --on-dark-2:#B9B6AD;

  /* 立体感：极柔外投影（明亮现代，无硬边） */
  --bevel: inset 0 1px 0 rgba(255,255,255,.85);
  --drop: 0 8px 22px rgba(20,40,30,.07);
  --drop-sm: 0 3px 10px rgba(20,40,30,.06);
  --drop-lg: 0 16px 36px rgba(20,40,30,.10);

  /* 尺寸（大圆角、细描边、留白，对齐线上 12–20px） */
  --r: 14px;              /* 全局圆角 */
  --r-card: 20px;         /* 大卡片圆角 */
  --bd: 1.5px;            /* 标准描边 */
  --bd-lg: 2px;
  --gap: 18px;
  --maxw: 1180px;
  --nav-h: 64px;
}

/* ---------- 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  font-size:15px; line-height:1.7; font-weight:400;
  color:var(--ink);
  background-color:#FFFFFF;
  min-height:100vh;
  padding:0 14px 96px;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
ul,ol{padding-left:1.15em}
::selection{background:var(--green);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto}

/* 自定义滚动条（桌面） */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#eef1ef}
::-webkit-scrollbar-thumb{background:#c9d5d5;border:2px solid #eef1ef}
::-webkit-scrollbar-thumb:hover{background:#aebcb8}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;font-family:inherit;font-weight:600;font-size:15px;line-height:1.3;
  cursor:pointer;border:1.5px solid transparent;padding:11px 20px;color:#fff;
  background:var(--green);border-radius:12px;box-shadow:0 2px 8px rgba(40,127,112,.25);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
  user-select:none;white-space:nowrap;
}
.btn:hover{filter:brightness(1.06);box-shadow:0 4px 14px rgba(40,127,112,.30)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 4px rgba(40,127,112,.25)}
.btn-green{background:var(--green);color:#fff}
.btn-blue{background:var(--lapis)}
.btn-gold{background:var(--gold);color:#4A3200}
.btn-stone{background:var(--coal);color:#fff}
.btn-red{background:var(--redstone)}
.btn-dark{background:var(--coal)}
.btn.sm{font-size:12.5px;padding:6px 11px;border-radius:9px;box-shadow:none}
.btn.on{outline:3px solid var(--green);outline-offset:-5px}
.btn.ghost{background:var(--quartz);color:var(--green);border-color:var(--green-light)}
.btn.used{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}

input[type=range]{width:112px;accent-color:var(--gold);cursor:pointer}
textarea{
  font-family:inherit;font-size:15px;line-height:1.7;padding:11px 13px;
  border:var(--bd) solid var(--line);background:var(--quartz);color:var(--ink);
  resize:vertical;width:100%;max-width:560px;box-shadow:var(--bevel);border-radius:var(--r);
}
select,input[type=text],input[type=search]{
  font-family:inherit;font-size:13.5px;padding:7px 10px;
  border:2px solid var(--line);background:var(--quartz);color:var(--ink);
  border-radius:var(--r);box-shadow:var(--bevel);
}
input[type=search],input[type=text]{min-width:200px}
.chk{display:flex;align-items:center;gap:6px;cursor:pointer}
.center{text-align:center}
.mt{margin-top:12px}

/* ---------- 顶部导航 ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:.5px solid var(--divider);
  margin:0 -14px 18px;padding:11px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.topbar .brand{
  font-size:19px;font-weight:800;letter-spacing:.3px;white-space:nowrap;line-height:1.2;
  color:var(--ink);
}
.topbar .brand span{color:var(--diamond-dk)}
.topbar .brand em{
  font-style:normal;font-size:11.5px;color:var(--ink-3);
  display:block;font-weight:400;letter-spacing:0;line-height:1.4;
}
.topnav{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.topnav a{
  font-size:13.5px;font-weight:600;padding:7px 13px;
  border:1.5px solid transparent;background:transparent;color:var(--ink-2);
  border-radius:10px;
  transition:background .12s ease, color .12s ease;
}
.topnav a:hover{background:var(--green-light);color:var(--green);transform:none}
.topnav a.cur{
  background:var(--green);color:#fff;
}
.topnav a .n{font-size:10.5px;opacity:.7;font-weight:400}

/* ---------- 首页 Hero ---------- */
.hero{
  padding:32px 0 12px;margin-bottom:var(--gap);
  background:transparent;border:0;box-shadow:none;border-radius:0;
}
.hero-grid{display:flex;gap:30px;align-items:center}
.hero-left{flex:1 1 460px;min-width:0}
.hero-right{flex:0 0 380px;max-width:44%}
.hero-icons{
  background:linear-gradient(160deg,var(--green-light),#fff);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--drop);padding:16px;display:flex;flex-direction:column;gap:14px;
  overflow:hidden;justify-content:center;align-self:stretch;min-height:360px;
}
.icon-track{display:flex;gap:14px;width:max-content;animation:iconFlow 24s linear infinite}
.icon-track.rev{animation-direction:reverse;animation-duration:30s}
.icon-track img{
  width:56px;height:56px;flex:none;object-fit:contain;
  background:#fff;border:1px solid var(--divider);border-radius:14px;padding:7px;
  box-shadow:0 2px 6px rgba(20,40,30,.06);
}
.hero-icons:hover .icon-track{animation-play-state:paused}
@keyframes iconFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero h1{
  font-size:clamp(32px,4.4vw,50px);font-weight:650;letter-spacing:normal;line-height:1.28;color:var(--ink);
}
.hero h1 span{color:var(--green)}
.hero .sub{
  margin:12px 0 0;max-width:520px;font-size:15px;font-weight:400;
  color:var(--ink-2);line-height:1.95;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 14px}
.hero-cta .btn{font-size:15px;padding:13px 22px}
.hero .pill{
  display:inline-block;background:rgba(255,255,255,.75);border:2px solid rgba(0,0,0,.12);
  padding:4px 12px;font-size:12.5px;margin:3px;border-radius:2px;color:var(--ink-2);
}
.hero .mt{margin-top:18px}
.hero-stats{margin-bottom:var(--gap)}
.statrow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px;margin-top:18px;
}
.stat{
  background:#F1F5ED;border:var(--bd) solid var(--line);
  padding:11px 8px;border-radius:var(--r);box-shadow:var(--bevel);
}
.stat b{display:block;font-size:27px;color:var(--green);line-height:1.2}
.stat span{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.stat small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}

/* ---------- 网格与卡片 ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--gap)}
.sec-card{
  display:flex;flex-direction:column;
  background:var(--quartz);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--drop);
  padding:22px 22px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.sec-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,40,30,.10)}
.sec-card .no{
  align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.5px;
  background:var(--green-light);color:var(--green);padding:3px 10px;border-radius:8px;
}
.sec-card .ttl{font-size:21px;font-weight:700;margin:11px 0 3px;line-height:1.35}
.sec-card .en{font-size:11.5px;color:var(--green);font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.sec-card p{font-size:13.5px;color:var(--ink-2);line-height:1.85;margin:9px 0}
.sec-card ul{margin:8px 0 0 18px;font-size:13px;color:var(--ink-2);line-height:1.95}
.sec-card .go{margin-top:auto;padding-top:13px}

/* ---------- 板块容器 ---------- */
.panel{
  background:var(--quartz);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--drop);padding:18px 18px;margin-bottom:var(--gap);
}
.panel-h{
  font-size:19px;font-weight:700;color:var(--ink);
  background:var(--green-light);
  border-left:6px solid var(--green);
  padding:11px 14px;margin:-18px -18px 16px;
}
.panel-h small{
  display:block;font-size:11.5px;font-weight:400;opacity:.82;margin-top:3px;line-height:1.65;
}
.sec-h{
  font-weight:700;font-size:15px;color:var(--green);
  margin:15px 0 9px;border-bottom:1px solid var(--divider);padding-bottom:5px;
}
.toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:#F1F1EC;border:var(--bd) solid var(--line);
  padding:10px;margin-bottom:13px;border-radius:var(--r);box-shadow:var(--bevel);
}
.toolbar label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink)}
.countinfo{font-size:12.5px;color:var(--ink-3)}
.empty{color:var(--ink-3);font-size:13.5px;padding:14px;text-align:center}

/* 学习路径（首页三步） */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps li{
  position:relative;background:var(--quartz-2);border:2px solid #DCD8C8;border-radius:var(--r);
  padding:13px 14px 13px 15px;font-size:13.5px;line-height:1.9;color:#41414E;
  border-left:6px solid var(--grass);
  transition:transform .1s ease;
}
.steps li:hover{transform:translateY(-2px);background:#FFF}
.steps li b{display:block;font-size:14.5px;font-weight:800;color:var(--grass-dk);margin-bottom:4px}
.steps li:nth-child(2){border-left-color:var(--lapis)}
.steps li:nth-child(2) b{color:var(--lapis-dk)}
.steps li:nth-child(3){border-left-color:var(--gold-dk)}
.steps li:nth-child(3) b{color:#A8780F}
.note{
  margin-top:13px;font-size:12.5px;line-height:1.85;color:var(--ink-2);
  background:#F4F1E7;border-left:5px solid var(--gold);padding:9px 12px;border-radius:var(--r);
}

/* ---------- FAQ 手风琴（明亮柔和） ---------- */
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;font-size:15.5px;font-weight:700;color:var(--ink);
  padding:14px 4px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink-3);flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{font-size:14px;line-height:1.9;color:var(--ink-2);margin:0 4px 16px}

/* ---------- 标签条 ---------- */
.tabrow{
  display:flex;gap:8px;overflow-x:auto;padding:7px;margin-bottom:13px;
  background:var(--quartz-2);border:var(--bd) solid var(--line);border-radius:var(--r);
  scrollbar-width:thin;
}
.tabrow button{
  flex:0 0 auto;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;
  border:2px solid var(--line);background:var(--quartz);color:var(--ink);
  padding:7px 13px;white-space:nowrap;border-radius:2px;
  box-shadow:0 2px 0 var(--line);
  transition:background .12s ease;
}
.tabrow button:hover{background:#ECEAE0}
.tabrow button .wk{display:block;font-size:10.5px;font-weight:400;opacity:.7;color:var(--ink-3)}
.tabrow button.cur{background:var(--grass);color:#0E2A0A;outline:3px solid var(--gold);outline-offset:-5px}
.tabrow.light{background:var(--quartz-2);border-color:var(--line)}
.tabrow.light button{background:var(--quartz);color:var(--ink);box-shadow:0 2px 0 var(--line)}
.tabrow.light button.cur{background:var(--grass);color:#0E2A0A}

/* ---------- 分类瓦片 ---------- */
.catbarW{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cattile{
  cursor:pointer;border:var(--bd) solid var(--line);background:var(--quartz);color:var(--ink);
  padding:8px 10px 7px;font-weight:700;border-radius:var(--r);
  box-shadow:0 3px 0 var(--line);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:86px;line-height:1.2;
  transition:transform .08s ease, background .12s ease;
}
.cattile:hover{transform:translateY(-2px);background:#FFF}
.cattile .ico{font-size:20px;line-height:1.1;height:26px;display:flex;align-items:center}
.cattile .ico img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated}
.cattile .cn{font-size:13px;font-weight:700;white-space:nowrap}
.cattile .en{
  font-size:8.5px;font-weight:700;letter-spacing:.6px;color:var(--grass-dk);
  white-space:nowrap;text-transform:uppercase;
}
.cattile .n{font-size:10px;opacity:.6;font-weight:400}
.cattile.on{outline:3px solid var(--gold);outline-offset:-5px;background:#F0FAEA}
.cattile.on .en{color:var(--grass-dk)}

.subbarW{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.subtile{
  cursor:pointer;border:2px solid var(--line);background:var(--quartz-2);color:#3A3A46;
  padding:5px 11px;font-size:12.5px;font-weight:700;border-radius:2px;
  display:flex;align-items:center;gap:6px;transition:background .12s ease;
}
.subtile:hover{background:#FFF}
.subtile .en{font-size:8.5px;font-weight:700;color:#867A55;letter-spacing:.4px;text-transform:uppercase}
.subtile img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.subtile.on{background:var(--grass);color:#0E2A0A}
.subtile.on .en{color:#DDF2D0}

/* ---------- 单词卡 ---------- */
.wgridW{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:13px}
.wcardW{
  background:var(--quartz);border:var(--bd) solid var(--line);padding:13px 14px 11px;
  border-radius:var(--r);box-shadow:var(--drop-sm);position:relative;cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease;
}
.wcardW:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(20,40,30,.10)}
.wcardW .top{display:flex;align-items:flex-start;gap:12px}
.wcardW .ic{
  width:66px;height:66px;flex:0 0 66px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#F3F5EC,#E4E8D8);border:2px solid #C3C9AC;border-radius:var(--r);
  font-size:42px;line-height:1;
  box-shadow:inset 0 0 0 2px #FFF, inset 0 -3px 0 rgba(0,0,0,.05);
}
.wcardW .ic img{width:58px;height:58px;object-fit:contain;image-rendering:pixelated}
.wcardW .en{font-size:19px;font-weight:800;line-height:1.25;letter-spacing:.2px;color:var(--ink)}
.wcardW .ph{color:var(--lapis-dk);font-size:12.5px;font-weight:600;margin-top:2px}
.wcardW .zh{font-size:15.5px;font-weight:700;margin:4px 0 0;color:#2E2E38}
.wcardW .sent{
  font-size:13px;color:#42424F;margin-top:10px;line-height:1.65;
  padding-top:9px;border-top:2px dotted #DCD8C8;
}
.wcardW .det{margin-top:6px;font-size:11.5px;color:var(--ink-2);line-height:1.7}
.wcardW .det div:before{content:"▪ ";color:var(--grass-dk)}
.wcardW .cbadge{
  font-size:10.5px;background:#EEF3E4;border:1px solid #C3C9AD;padding:2px 8px;
  color:#5C6349;display:inline-block;margin-top:9px;border-radius:2px;
}
.wcardW .flag{position:absolute;top:8px;right:10px;font-size:13px;letter-spacing:2px}
.wcardW .ops,.wcardW .cardops{margin-top:9px}

.ic.big{
  width:150px;height:150px;flex:0 0 150px;margin:0 auto;
  background:linear-gradient(180deg,#F3F5EC,#E4E8D8);border:var(--bd) solid #C3C9AC;
  border-radius:var(--r);font-size:96px;
  box-shadow:inset 0 0 0 3px #FFF, 0 3px 0 rgba(0,0,0,.1);
}
.ic.big img{width:132px;height:132px;object-fit:contain;image-rendering:pixelated}
.wgridW.hide .wcardW .zh,
.wgridW.hide .wcardW .sent,
.wgridW.hide .wcardW .det,
.wgridW.hide .wcardW .cbadge{visibility:hidden}
.wgridW.hide .wcardW.rev .zh,
.wgridW.hide .wcardW.rev .sent,
.wgridW.hide .wcardW.rev .det,
.wgridW.hide .wcardW.rev .cbadge{visibility:visible}

/* ---------- 句子卡 ---------- */
.card{
  background:var(--quartz);border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--drop-sm);padding:12px 14px;margin-bottom:10px;
  transition:box-shadow .12s ease;
}
.card:hover{box-shadow:0 12px 24px rgba(20,40,30,.10)}
.card .en{font-size:18px;font-weight:700;line-height:1.55;cursor:pointer;color:var(--ink)}
.card .zh{color:var(--ink-2);font-size:13.5px;line-height:1.7;margin:6px 0 9px}
.card.hi{background:#FFFBE3;box-shadow:0 0 0 3px var(--gold)}
.ops{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* 单词详情弹窗底部的三音色选择行 */
.modal-in .vrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  background:#FBF6E6;border:2px dashed var(--line);border-radius:12px;padding:9px 12px}
.modal-in .vrow .vlabel{font-weight:800;color:var(--ink);font-size:14px}
.modal-in .vrow .vtip{font-size:12px;color:var(--ink-3)}
.modal-in .vrow .vsel{margin-left:0}
@media(max-width:640px){.modal-in .vrow .vtip{display:none}}
.idx{color:var(--ink-3);font-size:12px;font-weight:700;margin-right:6px}
.tag{
  display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;
  border:2px solid var(--line);margin-right:6px;color:#fff;border-radius:2px;
}
.t-ex{background:var(--lapis)} .t-gp{background:#E08A1E} .t-mis{background:var(--amethyst)}
.t-vocab{background:#1F7A99} .t-dlg{background:var(--emerald)} .t-book{background:var(--amethyst)}
.t-台词{background:var(--lapis)} .t-游戏常用{background:#E08A1E} .t-生活常用{background:var(--emerald)}
.t-ingame{background:#E08A1E}

/* ---------- 对话 / 聊天 ---------- */
.row{
  background:var(--quartz);border:var(--bd) solid var(--line);border-radius:var(--r);
  padding:10px 13px;margin-bottom:9px;
}
.row.q{border-left:8px solid var(--lapis)}
.row.a{border-left:8px solid var(--grass)}
.row.you{border-left:8px solid var(--gold)}
.row.friend{border-left:8px solid var(--diamond)}
.row .who{font-size:12px;font-weight:700;color:var(--ink-2)}
.row .en{font-size:17px;font-weight:700;margin:4px 0;cursor:pointer;line-height:1.5;color:var(--ink)}
.row .cn{font-size:13px;color:var(--ink-2);line-height:1.65}
.row .cue{font-size:11.5px;color:var(--redstone);margin-top:4px}
.row.hi{background:#FFFBE3;box-shadow:0 0 0 3px var(--gold)}
.row.hidden .en{filter:blur(7px)}
.row.hidden.rev .en{filter:none}
.chatbox{background:#EDECE5;border:var(--bd-lg) solid var(--line);padding:11px;border-radius:var(--r)}
.chatbox .row{background:var(--quartz-2);box-shadow:none;margin-bottom:7px}

/* ---------- 绘本 / 口语书 ---------- */
.bookimg{
  width:100%;max-width:460px;display:block;margin:0 auto 11px;
  border:var(--bd-lg) solid var(--line);background:#D8D8D8;min-height:100px;border-radius:var(--r);
}
.bkbox{
  background:var(--quartz);border:var(--bd) solid var(--line);border-radius:var(--r);
  padding:14px;font-size:16px;line-height:2.05;color:var(--ink);
}
.bkbox .sent{cursor:pointer;padding:2px 4px;border-radius:2px;transition:background .15s ease}
.bkbox .sent:hover{background:#EFEFE6}
.bkbox .sent.hi{background:#FFF3B8;box-shadow:0 0 0 2px var(--gold)}
.bkt{
  background:#EFF8E4;border:3px dashed var(--grass-dk);border-radius:var(--r);
  padding:11px;margin-top:11px;font-size:14px;line-height:1.85;color:var(--grass-dk);
}
.keys{
  background:#FFF6DE;border:var(--bd) solid var(--gold-dk);border-radius:var(--r);
  padding:11px;font-size:13px;color:#6B4A00;margin-top:11px;line-height:1.95;
}
.keys b{color:#8A5B00}

/* ---------- 攻略 ---------- */
.guidebody{
  background:var(--quartz);border:var(--bd) solid var(--line);border-radius:var(--r);
  padding:16px;font-size:14px;line-height:1.85;color:#2A2A34;
}
.guidebody h3{font-size:18px;font-weight:800;margin-bottom:9px;color:var(--ink)}
.guidebody h4{
  font-size:15px;font-weight:800;margin:13px 0 6px;color:var(--grass-dk);
  border-left:5px solid var(--grass);padding-left:9px;
}
.guidebody p{margin:7px 0;color:#3A3A46}
.guidebody table{border-collapse:collapse;width:100%;font-size:12.5px;margin-top:9px}
.guidebody th,.guidebody td{border:1px solid #C2C2CC;padding:6px 8px;text-align:left;vertical-align:top}
.guidebody th{background:#EFEADA;font-weight:700;color:var(--ink)}
.guidebody tr:nth-child(even) td{background:#F8F6EF}

/* ---------- 小游戏 ---------- */
.gamewrap{display:grid;grid-template-columns:210px 1fr;gap:var(--gap);align-items:start}
.gmenu{display:flex;flex-direction:column;gap:8px}
.gmenu button{
  font-family:inherit;text-align:left;cursor:pointer;
  border:var(--bd) solid var(--line);background:var(--quartz);color:var(--ink);
  padding:10px 12px;font-weight:700;font-size:13.5px;border-radius:var(--r);
  box-shadow:0 3px 0 var(--line);
  transition:transform .08s ease, background .12s ease;
}
.gmenu button:hover{transform:translateX(2px);background:#FFF}
.gmenu button small{display:block;font-size:11px;font-weight:400;color:var(--ink-3);margin-top:2px}
.gmenu button.on{background:var(--grass);color:#0E2A0A}
.gmenu button.on small{color:#DDF2D0}
.stage{
  background:var(--quartz);border:var(--bd-lg) solid var(--line);border-radius:var(--r-card);
  padding:20px;color:var(--ink);min-height:330px;
  box-shadow:var(--drop), var(--bevel);
}
.stage .qhead{font-size:12.5px;font-weight:700;color:var(--grass-dk);letter-spacing:.8px;text-transform:uppercase}
.stage .zh{color:var(--ink-2);font-size:14px}
.big{font-size:26px;font-weight:800;line-height:1.6;margin:13px 0;color:var(--ink)}
.blur{filter:blur(9px);transition:filter .35s ease}
.blur.rev{filter:none}
.pool,.answer{
  display:flex;flex-wrap:wrap;gap:8px;min-height:56px;padding:10px;
  border:3px dashed #A8A8B4;background:#F8F8F4;margin-bottom:10px;border-radius:var(--r);
}
.answer{border-color:var(--grass);background:#EFF8E4}
.word{
  background:var(--line-2);color:#fff;border:var(--bd) solid var(--line);border-radius:2px;
  box-shadow:0 3px 0 var(--line);padding:8px 12px;font-weight:700;font-size:15px;
  cursor:pointer;user-select:none;transition:transform .08s ease;
}
.word:hover{transform:translateY(-2px)}
.word.done{background:var(--grass);color:#0E2A0A}
.blank{
  display:inline-block;min-width:82px;border-bottom:4px solid var(--grass-dk);
  font-weight:800;color:var(--grass-dk);text-align:center;
}
.opts{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
.opts button{
  font-family:inherit;cursor:pointer;text-align:left;flex:1 1 240px;
  border:var(--bd) solid var(--line);background:#FFF;color:var(--ink);
  padding:12px 15px;font-weight:700;font-size:15.5px;line-height:1.5;
  border-radius:var(--r);box-shadow:0 4px 0 var(--line);
  transition:transform .08s ease, background .12s ease;
}
.opts button:hover{background:#F2FAEB;transform:translateY(-2px)}
.opts button.ok{background:#DCF3C6;border-color:var(--grass-dk);color:var(--grass-dk)}
.opts button.bad{background:#FAD9D5;border-color:var(--redstone);color:var(--redstone-dk)}
.opts button .sub{display:block;font-size:12.5px;font-weight:400;color:var(--ink-2);margin-top:2px}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:11px}
.pickgrid button{
  font-family:inherit;cursor:pointer;border:var(--bd) solid var(--line);background:#FFF;
  padding:11px;border-radius:var(--r);box-shadow:0 4px 0 var(--line);
  transition:transform .08s ease;
}
.pickgrid button:hover{transform:translateY(-2px)}
.pickgrid button img{width:46px;height:46px;object-fit:contain;image-rendering:pixelated;display:block;margin:0 auto 7px}
.pickgrid button .e{font-size:24px;display:block;margin-bottom:5px}
.pickgrid button .t{font-size:14px;font-weight:700;color:var(--ink)}
.pickgrid button.ok{background:#DCF3C6}
.pickgrid button.bad{background:#FAD9D5}

/* ---------- 看图说词 Describer ---------- */
.cluebox{
  background:#FFFBE3;border:var(--bd) solid var(--gold);border-radius:var(--r);
  box-shadow:0 4px 0 rgba(0,0,0,.12);
  padding:19px 22px;font-size:21px;font-weight:700;line-height:1.6;color:var(--ink);
  margin:4px 0 8px;text-align:center;
}
.picgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:13px;margin-top:8px}
.picopt{
  font-family:inherit;cursor:pointer;border:var(--bd) solid var(--line);background:#FFF;
  padding:15px 11px 11px;border-radius:var(--r);box-shadow:0 4px 0 var(--line);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:transform .08s ease, box-shadow .08s ease;
}
.picopt:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--line)}
.picopt .ic{
  width:86px;height:86px;flex:0 0 86px;margin:0;
  background:linear-gradient(180deg,#F3F5EC,#E4E8D8);border:2px solid #C3C9AC;border-radius:var(--r);
  font-size:58px;box-shadow:inset 0 0 0 2px #FFF, 0 2px 0 rgba(0,0,0,.08);
}
.picopt .ic img{width:74px;height:74px;object-fit:contain;image-rendering:pixelated}
.picopt .picname{font-size:13.5px;font-weight:700;color:var(--ink-2);line-height:1.3;word-break:break-word}
.picopt.ok{background:#DCF3C6;border-color:var(--grass-dk)}
.picopt.ok .picname{color:var(--grass-dk)}
.picopt.bad{background:#FAD9D5;border-color:var(--redstone)}
.picopt.locked{cursor:default;opacity:.55;transform:none}
.picopt.gone{visibility:hidden}
.fb{font-weight:800;margin-top:13px;font-size:17px;min-height:26px}
.fb.ok,.ok{color:var(--grass-dk)}
.fb.bad,.bad{color:var(--redstone-dk)}
.scorebar{
  display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;align-items:center;
  background:linear-gradient(180deg,#EFF3EA,#E3EBD9);
  border:var(--bd) solid var(--grass-dk);border-radius:var(--r);
  padding:10px 14px;color:var(--ink);margin-bottom:13px;
}
.scorebar b{color:var(--grass-dk)}

/* ---------- 听写对比反馈 ---------- */
.diff{
  font-size:26px;font-weight:800;letter-spacing:2px;line-height:1.8;margin:11px 0;
  word-break:break-all;text-align:center;
}
.diff span{white-space:pre}
.diff .ok{color:var(--grass-dk);background:#DCF3C6;border-radius:3px;padding:0 2px}
.diff .bad{color:#fff;background:var(--redstone);border-radius:3px;text-decoration:line-through;padding:0 2px}
.diff .miss{color:var(--redstone-dk);background:#FAD9D5;border-radius:3px;padding:0 2px}
.diff .extra{color:#fff;background:#8A8A99;border-radius:3px;text-decoration:line-through;padding:0 2px}
.diffline{font-size:17px;font-weight:700;line-height:2;margin:8px 0;word-break:break-word}
.diffline .ok{color:var(--grass-dk)}
.diffline .bad{color:var(--redstone-dk);text-decoration:line-through}
.diffline .miss{color:var(--redstone-dk)}
.diffline .extra{color:#8A8A99;text-decoration:line-through}
.diffline b{color:var(--ink-2);font-size:13px;font-weight:700;margin-right:5px}

/* ---------- 单日标题头（亲子对话 / 绘本） ---------- */
.dayhead{
  background:linear-gradient(180deg,#EFF3EA,#E3EBD9);
  color:var(--ink);padding:9px 13px;font-weight:800;font-size:15px;line-height:1.5;
  border-left:8px solid var(--gold);margin-bottom:12px;border-radius:var(--r);
  box-shadow:var(--drop-sm);
}
.dayhead small{
  display:block;font-size:11.5px;font-weight:400;opacity:.85;margin-top:3px;line-height:1.6;
}

/* ---------- 底部状态栏 ---------- */
.statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  background:linear-gradient(180deg,#FFFFFF,#F5F5F0);
  border-top:var(--bd) solid var(--line-2);
  display:flex;justify-content:center;gap:22px;align-items:center;
  padding:10px 12px;font-size:13.5px;flex-wrap:wrap;color:var(--ink-2);
  box-shadow:0 -4px 14px rgba(0,0,0,.10);
}
.statusbar b{color:var(--grass-dk)}
.pager{text-align:center;margin:15px 0}
/* ---------- 联系我（左文右码） ---------- */
.contact{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--quartz);border:1.5px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 10px 24px rgba(20,40,30,.06), var(--bevel);
  padding:24px 26px;margin-bottom:var(--gap);
}
.contact-copy{flex:1 1 320px;min-width:260px}
.contact-copy .eyebrow{margin-bottom:8px}
.contact-copy h2{font-size:22px;font-weight:800;color:var(--ink);margin:0 0 8px;line-height:1.4}
.contact-copy p{font-size:14.5px;line-height:1.95;color:var(--ink-2);margin:0 0 10px}
.contact-copy .contact-tip{
  display:inline-block;background:var(--green-light);color:var(--green);
  font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;
}
.contact-qr{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--quartz);border:1.5px solid var(--line);border-radius:var(--r);
  padding:12px 12px 10px;box-shadow:0 4px 12px rgba(20,40,30,.08);
}
.contact-qr img{width:148px;height:148px;display:block;border-radius:6px}
.contact-qr span{font-size:12.5px;color:var(--ink-3);font-weight:600}
@media(max-width:560px){
  .contact{flex-direction:column;text-align:center;gap:18px}
  .contact-copy{flex:1 1 auto}
  .contact-qr img{width:168px;height:168px}
}

.footer{
  text-align:center;font-size:12.5px;color:var(--ink-3);
  padding:20px 8px 8px;line-height:1.95;
}

/* ---------- 详情弹窗 ---------- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.76);z-index:60;
  display:none;align-items:center;justify-content:center;padding:16px;
}
.modal.show{display:flex}
.modal-in{
  background:var(--quartz);color:var(--ink);
  border:var(--bd-lg) solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--drop-lg), var(--bevel);
  max-width:620px;width:100%;max-height:88vh;overflow:auto;padding:22px;position:relative;
}
.modal-in .mh{
  display:flex;align-items:center;gap:16px;
  border-bottom:var(--bd) solid var(--grass);padding-bottom:13px;
}
.modal-in .mh .ic{
  width:94px;height:94px;flex:0 0 94px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#F3F5EC,#E4E8D8);border:var(--bd) solid #C3C9AC;
  border-radius:var(--r);font-size:58px;line-height:1;
  box-shadow:inset 0 0 0 3px #FFF, inset 0 -3px 0 rgba(0,0,0,.05);
}
.modal-in .mh .ic img{width:82px;height:82px;object-fit:contain;image-rendering:pixelated}
.modal-in .mh h3{font-size:29px;font-weight:800;line-height:1.2;color:var(--ink)}
.modal-in .mh .ph{color:var(--lapis-dk);font-size:13.5px}
.modal-in .mzh{font-size:18px;font-weight:800;margin:11px 0 5px}
.modal-in .msent{
  background:#FFF;border:var(--bd) solid var(--line);border-radius:var(--r);
  padding:12px;font-size:16px;font-weight:600;line-height:1.75;cursor:pointer;
}
.modal-in .mdet{
  background:#FFF;border:var(--bd) solid var(--line);border-radius:var(--r);
  padding:12px;font-size:13px;line-height:1.85;margin-top:11px;
}
.modal-in .mdet div:before{content:"▪ ";color:var(--grass-dk)}
.modal-in .x{
  position:absolute;top:12px;right:15px;font-size:26px;font-weight:800;
  cursor:pointer;color:var(--line);background:var(--quartz-2);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);border-radius:var(--r);line-height:1;
}
.modal-in .x:hover{background:var(--redstone);color:#fff}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .gamewrap{grid-template-columns:1fr}
  .gmenu{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .gmenu button{flex:0 0 auto}
  .hero h1{font-size:32px}
  .opts button{flex-basis:100%}
}
@media(max-width:820px){
  .hero-grid{flex-direction:column-reverse;gap:18px}
  .hero-right{max-width:100%;flex:0 0 auto;width:100%}
  .hero-cta{margin:18px 0 12px}
  .hero-cta .btn{flex:1 1 auto;text-align:center}
}

@media(max-width:560px){
  body{padding:0 10px 104px;font-size:14.5px}
  .topbar{padding:8px 11px;margin:0 -10px 14px}
  .topbar .brand{font-size:16.5px}
  .topnav a{font-size:12px;padding:6px 10px}
  .hero{padding:24px 13px 20px}
  .hero h1{font-size:26px;text-shadow:2px 2px 0 var(--grass-dk),4px 4px 0 rgba(0,0,0,.4)}
  .hero .sub{font-size:13.5px;line-height:1.85}
  .statrow{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
  .stat b{font-size:22px}
  .grid3{grid-template-columns:1fr;gap:12px}
  .wgridW{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
  .wcardW{padding:10px 11px 9px}
  .wcardW .top{flex-direction:column;align-items:center;text-align:center;gap:7px}
  .wcardW .ic{width:54px;height:54px;flex:0 0 54px}
  .wcardW .ic img{width:48px;height:48px}
  .wcardW .en{font-size:16px}
  .wcardW .zh{font-size:14px}
  .card .en{font-size:16.5px}
  .big{font-size:20px}
  input[type=search],input[type=text]{min-width:0;width:100%}
  .toolbar{gap:8px}
  .panel{padding:12px}
  .panel-h{margin:-12px -12px 12px;font-size:17px}
  .statusbar{gap:11px;font-size:12px;padding:8px 8px}
  .stage{padding:13px}
  .picgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
  .diff{font-size:20px;letter-spacing:1px}
  .modal-in{padding:14px}
  .modal-in .mh{gap:11px}
  .modal-in .mh .ic{width:70px;height:70px;flex:0 0 70px;font-size:44px}
  .modal-in .mh .ic img{width:60px;height:60px}
  .modal-in .mh h3{font-size:22px}
}

/* ---------- 无障碍：降低动效 ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   首页落地页（对齐 henhaoxue.com 现代风）
   ============================================================ */
.eyebrow{font-size:14px;font-weight:600;color:var(--green);margin:0 0 14px;letter-spacing:.3px}
.hero .lead{font-size:17px;line-height:1.8;color:var(--ink-2);margin:16px 0 0;max-width:520px;font-weight:400}
.hero-note{margin:14px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.7}

.home-topics{padding:52px 0 12px}
.home-heading{text-align:center;max-width:720px;margin:0 auto 30px}
.home-heading h2{font-size:28px;font-weight:700;line-height:1.4;margin:0}
.home-heading>p{font-size:16px;color:var(--ink-3);margin:10px 0 0;line-height:1.8}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.topic{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--quartz);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--drop);transition:transform .14s ease, box-shadow .14s ease;
}
.topic:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,40,30,.10)}
.topic-art{
  aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;
  font-size:74px;background:linear-gradient(155deg,var(--green-light),#fff);
}
.topic-copy{padding:20px 22px;display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0}
.topic .meta{font-size:13px;color:var(--ink-3);margin:0 0 6px}
.topic h3{font-size:20px;font-weight:700;margin:0 0 8px;line-height:1.4}
.topic .desc{font-size:14.5px;line-height:1.8;color:var(--ink-2);margin:0 0 16px}
.topic-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;color:var(--green);font-weight:600;font-size:15px}
.topic:hover .topic-link{color:var(--green-hover)}
.topic-art img{width:100%;height:100%;object-fit:contain;padding:22px;box-sizing:border-box}

.home-scenes{padding:16px 0 4px}
.scene-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:30px}
.scene-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--quartz);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--drop);transition:transform .14s ease, box-shadow .14s ease;
}
.scene-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,40,30,.10)}
.scene-art{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--green-light)}
.scene-copy{padding:18px 20px;display:flex;flex-direction:column;gap:9px}
.scene-card h3{font-size:18px;font-weight:700;margin:0;line-height:1.4}
.scene-card .lead{font-size:14px;line-height:1.8;color:var(--ink-2);margin:0}
.scene-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.scene-tags span{font-size:12px;font-weight:600;background:var(--green-light);color:var(--green);padding:3px 10px;border-radius:999px;white-space:nowrap}

.home-trials{background:var(--green-light);border-radius:var(--r-card);padding:26px 22px;margin:34px 0}
.home-trials .stat{background:#fff;border-color:var(--divider)}
.home-trials .stat b{color:var(--green)}

@media(max-width:820px){
  .hero-grid{flex-direction:column;align-items:stretch}
  .hero-right{flex:none;max-width:none;width:100%}
  .hero-icons{min-height:230px;padding:12px;gap:11px}
  .icon-track img{width:46px;height:46px;padding:6px}
}
@media(max-width:700px){
  .home-topics{padding:36px 0 8px}
  .home-heading h2{font-size:24px}
  .scene-art{aspect-ratio:16/9}
  .home-trials{padding:18px 14px;margin:24px 0}
}