/* ======================================================================
   小学英语语法手册  ·  共享样式
   设计语言：手账 / 贴纸笔记本风（参照孩子喜欢的思维导图卡片）
   核心信号：用「颜色」教结构 —— 蓝=谁 / 珊瑚=做什么 / 绿=什么 / 紫=是 / 黄=规则
   ====================================================================== */

:root{
  /* —— 纸张与墨水 —— */
  --paper:      #FBF6EB;   /* 暖白笔记本纸 */
  --paper-card: #FFFDF8;   /* 卡片纸面 */
  --ink:        #4A3F36;   /* 暖棕墨色（比纯黑柔和，像手绘描边）*/
  --ink-soft:   #9A8C7C;   /* 次要文字 */
  --line:       rgba(120,104,84,.16);
  --grid:       rgba(120,104,84,.05);

  /* —— 角色色板（教学法的核心：每种成分一个颜色）—— */
  --who:    #3E9BD6;  --who-bg:  #DCEFFB;  --who-sh:  rgba(62,155,214,.30);  /* 谁·主语 */
  --do:     #EE7D5B;  --do-bg:   #FBE0D5;  --do-sh:   rgba(238,125,91,.30);  /* 做什么·动词 */
  --what:   #45B988;  --what-bg: #D8F2E6;  --what-sh: rgba(69,185,136,.28);  /* 什么·宾语 */
  --be:     #9A78D4;  --be-bg:   #E9E0F8;  --be-sh:   rgba(154,120,212,.28); /* 是·be动词 */
  --rule:   #E2A413;  --rule-bg: #FBEFC9;  --rule-sh: rgba(226,164,19,.30);  /* 规则·标点 */

  /* —— 字体 —— */
  --font-display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
                  "Varela Round", "Quicksand", "PingFang SC", system-ui, sans-serif;
  --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
             "Source Han Sans SC", system-ui, sans-serif;
  --font-body: -apple-system, system-ui, "Segoe UI", "PingFang SC", sans-serif;

  --radius: 20px;
  --maxw: 760px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-cn);
  color:var(--ink);
  line-height:1.7;
  background-color:var(--paper);
  /* 淡淡的网格纸 + 角落水彩晕染（呼应参照图）*/
  background-image:
    radial-gradient(60% 50% at 88% -5%,  rgba(238,125,91,.10), transparent 70%),
    radial-gradient(55% 45% at -8% 8%,   rgba(62,155,214,.10), transparent 70%),
    radial-gradient(50% 40% at 50% 110%, rgba(69,185,136,.08), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 26px 26px, 26px 26px;
  background-attachment: fixed, fixed, fixed, scroll, scroll;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px 80px; }

/* —————————————————— 文字基础 —————————————————— */
h1,h2,h3{ line-height:1.25; margin:0; }
p{ margin:.6em 0; }
.en{ font-family:var(--font-display); letter-spacing:.2px; }
.lead{ font-size:1.05rem; color:var(--ink); }
.muted{ color:var(--ink-soft); }
b,strong{ color:var(--ink); }

/* 马克笔高亮（像参照图里被荧光笔划过的中文）*/
mark.hl{
  background:linear-gradient(180deg, transparent 52%, var(--rule-bg) 52%);
  padding:0 2px; color:inherit; border-radius:3px;
}

/* —————————————————— 顶部小导航 —————————————————— */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px;
  background:rgba(251,246,235,.82);
  backdrop-filter:saturate(1.4) blur(8px);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar a{ color:var(--ink); text-decoration:none; font-weight:700; }
.topbar .home{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-size:1rem;
}
.topbar .home .dot{ font-size:1.15rem; }
.topbar .crumb{ font-size:.85rem; color:var(--ink-soft); }

/* —————————————————— 封面 / 大标题 —————————————————— */
.hero{ text-align:center; padding:40px 0 8px; }
.hero .eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:.8rem; letter-spacing:2px; color:var(--do);
  background:var(--do-bg); padding:5px 14px; border-radius:999px;
  transform:rotate(-2deg);
}
.hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem, 7.5vw, 3.2rem); margin:.35em 0 .15em;
  letter-spacing:.5px;
}
.hero h1 .pop{ color:var(--do); }
.hero .sub{ color:var(--ink-soft); font-size:1.05rem; max-width:30ch; margin:0 auto; }

/* —————————————————— 卡片 —————————————————— */
.card{
  position:relative; background:var(--paper-card);
  border:2px solid var(--line); border-radius:var(--radius);
  padding:26px 22px 24px; margin:26px 0;
  box-shadow:0 10px 24px -16px rgba(74,63,54,.5);
}
/* 卡片顶部胶带（手账风，低调出现）*/
.card::before{
  content:""; position:absolute; top:-11px; left:50%;
  width:92px; height:22px; transform:translateX(-50%) rotate(-2.5deg);
  background:repeating-linear-gradient(45deg,
     var(--tape,var(--rule-bg)) 0 7px, rgba(255,255,255,.55) 7px 14px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:3px; opacity:.9;
}
.card.who  { --tape:var(--who-bg);  }
.card.do   { --tape:var(--do-bg);   }
.card.what { --tape:var(--what-bg); }
.card.be   { --tape:var(--be-bg);   }
.card.rule { --tape:var(--rule-bg); }

.card .step{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:800; font-size:.85rem;
  color:var(--ink-soft); margin-bottom:8px;
}
.card .step .n{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--c,var(--rule)); color:#fff; font-size:.95rem;
}
.card h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.4rem,5vw,1.85rem); margin-bottom:.1em;
}
.card h2 .zh{ font-family:var(--font-cn); }
.card .what-line{ color:var(--ink-soft); font-size:.95rem; margin-top:2px; }

/* 角色着色：把卡片主色注入子元素 */
.card.who  { --c:var(--who);  }
.card.do   { --c:var(--do);   }
.card.what { --c:var(--what); }
.card.be   { --c:var(--be);   }
.card.rule { --c:var(--rule); }
.card.who  h2 .key,.card.do h2 .key,.card.what h2 .key,
.card.be h2 .key,.card.rule h2 .key{ color:var(--c); }

/* —————————————————— 句子积木（招牌元素）—————————————————— */
.sentence{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px;
  justify-content:center; margin:16px 0 6px;
}
.brick{
  --c:#b8ab9a; --cbg:#efe9df; --csh:rgba(0,0,0,.12);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:58px; padding:8px 14px 7px;
  background:var(--cbg); border:2.5px solid var(--c);
  border-radius:14px; box-shadow:3px 3px 0 var(--csh);
}
.brick .role{ font-size:.68rem; font-weight:700; color:var(--c); white-space:nowrap; }
.brick .word{
  font-family:var(--font-display); font-weight:800;
  font-size:1.18rem; color:var(--ink); white-space:nowrap;
}
.brick.who  { --c:var(--who);  --cbg:var(--who-bg);  --csh:var(--who-sh);  }
.brick.do   { --c:var(--do);   --cbg:var(--do-bg);   --csh:var(--do-sh);   }
.brick.what { --c:var(--what); --cbg:var(--what-bg); --csh:var(--what-sh); }
.brick.be   { --c:var(--be);   --cbg:var(--be-bg);   --csh:var(--be-sh);   }

.glue{ font-family:var(--font-display); font-weight:800; font-size:1.3rem;
       color:var(--ink-soft); align-self:center; padding-bottom:6px; }

/* 句子下方的中文翻译 */
.trans{ text-align:center; color:var(--ink-soft); font-size:.98rem; margin:0 0 4px; }
.trans b{ color:var(--ink); }

/* —— 可点朗读的色块（点一下，念出它的语法成分）—— */
.brick.say-able,
.mini .b.say-able{ cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; }
.brick.say-able{ transition:transform .12s ease, box-shadow .12s ease; }
.brick.say-able:hover{ transform:translateY(-2px); }
.brick.say-able:active{ transform:scale(.95); }
.brick.speaking{ box-shadow:0 0 0 4px var(--c), 3px 3px 0 var(--csh); animation:brickpop .4s ease; }
@keyframes brickpop{ 0%{transform:scale(1)} 45%{transform:scale(1.09)} 100%{transform:scale(1)} }
.mini .b.say-able:active{ filter:brightness(.92); }
.mini .b.speaking{ box-shadow:0 0 0 2px currentColor; }
.say-able:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

/* 一组例句 */
.examples{ display:grid; gap:14px; margin-top:16px; }
.ex{
  background:var(--paper); border:1.5px dashed var(--line);
  border-radius:14px; padding:12px 10px;
}

/* —— 句子分两大区:主语 | 谓语,"+"是分界。每区下面一条横线 + 区名:
   主语区(蓝)托住主语;谓语区(橙,弱化)托住"动作词 + 宾语"整块。
   横线/区名用 ::before/::after 浮层画,不挤占排版,所以砖块照旧平排对齐。—— */
.sentence.sb{ align-items:flex-end; margin-bottom:36px; row-gap:34px; }   /* 给区名留出下方空间;窄屏换行时,行距留出"主语"区名的位置(列距仍 8px) */
.zone{ position:relative; display:inline-flex; align-items:flex-end; gap:8px; }
.zone::before{                       /* 区域横线 */
  content:""; position:absolute; left:2px; right:2px; bottom:-9px; height:3px;
  border-radius:3px; background:var(--ink-soft);
}
.zone::after{                        /* 区名 */
  position:absolute; left:0; right:0; bottom:-28px; text-align:center;
  font-family:var(--font-cn); font-weight:800; font-size:.72rem; color:var(--ink-soft);
}
.z-who::before{ background:var(--who); }
.z-who::after{ content:"主语"; color:var(--who); }
.z-pred::before{ background:var(--do); opacity:.5; }   /* 谓语弱化 */
.z-pred::after{ content:"谓语"; color:var(--do); opacity:.85; }
.task .z-who::after, .task .z-pred::after{ content:none; }   /* 题目里不显示区名,免泄题 */
/* 动作词:照旧占一个砖块位(为了对齐),但不显示词类标签(本关不教动词) */
.brick.pred-v{ --c:var(--do); --cbg:var(--do-bg); --csh:var(--do-sh); }
.brick.pred-v .role{ visibility:hidden; }

/* —————————————————— 小贴士 / 口诀 / 提醒 —————————————————— */
.tip{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--rule-bg); border:2px solid var(--rule);
  border-radius:16px; padding:14px 16px; margin:18px 0 2px;
}
.tip .ic{ font-size:1.5rem; line-height:1.4; }
.tip .body{ flex:1; }
.tip .body b{ color:var(--ink); }
.tip.do  { background:var(--do-bg);  border-color:var(--do);  }
.tip.who { background:var(--who-bg); border-color:var(--who); }

/* 一问两答对照（主格 / 宾格：先感觉，后小结） */
.qa{ display:flex; flex-direction:column; gap:9px; margin:18px auto 2px; max-width:460px; }
.qa-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper-card); border:2px solid var(--line);
  border-radius:14px; padding:10px 14px 10px 12px;
}
.qa-row.who { border-left:6px solid var(--who); }
.qa-row.what{ border-left:6px solid var(--what); }
.qa-row .q{ display:flex; flex-direction:column; line-height:1.18; font-weight:700; }
.qa-row .q .en{ font-style:normal; font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.qa-row .a{
  flex:none; font-family:var(--font-display); font-weight:800; font-size:1.1rem;
  padding:5px 16px; border-radius:999px; border:2px solid; white-space:nowrap;
}
.qa-row.who  .a{ color:var(--who);  background:var(--who-bg);  border-color:var(--who); }
.qa-row.what .a{ color:var(--what); background:var(--what-bg); border-color:var(--what); }
/* 小结口诀卡（先感觉、后一句话收口） */
.qa-key{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:7px 18px; max-width:460px; margin:13px auto 2px; padding:12px 18px;
  border-radius:16px; border:2px solid var(--line);
  background:linear-gradient(118deg, var(--who-bg) 0%, #FFFDF8 46%, var(--what-bg) 100%);
  box-shadow:0 8px 18px -13px rgba(74,63,54,.55);
}
.qa-key .lead{ font-family:var(--font-display); font-weight:800; color:var(--ink); white-space:nowrap; }
.qa-key .map{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; }
.qa-key .m{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); font-weight:600; font-size:.92rem; }
.qa-key .m b{ color:var(--ink); }
.qa-key .m .arr{ color:var(--ink-soft); font-weight:800; }
.qa-key .chip{
  font-family:var(--font-display); font-weight:800; font-size:1.06rem;
  min-width:50px; text-align:center; padding:3px 14px;
  border-radius:999px; border:2px solid; background:#fff;
}
.qa-key .m.who  .chip{ color:var(--who);  border-color:var(--who);  box-shadow:0 2px 0 var(--who-sh);  }
.qa-key .m.what .chip{ color:var(--what); border-color:var(--what); box-shadow:0 2px 0 var(--what-sh); }

/* 其它代词在句子里换装（she/her · they/them · it/it） */
.switch{ display:flex; flex-direction:column; gap:6px; max-width:460px; margin:4px auto 0; }
.switch .switch-lead{ text-align:center; color:var(--ink-soft); font-size:.86rem; font-weight:700; margin:6px 0 1px; }
.srow{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 9px;
  padding:7px 12px; border-radius:12px;
  background:var(--paper-card); border:1.5px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink);
}
.srow .who{ color:var(--who); }
.srow .what{ color:var(--what); }
.srow .to{ color:var(--ink-soft); font-weight:800; }
.srow .note{
  font-family:var(--font-cn); font-size:.74rem; font-weight:800; color:var(--what);
  background:var(--what-bg); border-radius:999px; padding:1px 9px;
}

/* 对 / 错 对照 */
.judge{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.judge > div{ border-radius:14px; padding:12px 14px; font-family:var(--font-display); font-weight:700; }
.judge .ok { background:var(--what-bg); border:2px solid var(--what); }
.judge .no { background:#FBE0D5; border:2px solid var(--do); }
.judge .tag{ display:block; font-family:var(--font-cn); font-size:.78rem; margin-bottom:3px; }
.judge .ok .tag{ color:var(--what); }
.judge .no .tag{ color:var(--do); }
.judge .no s{ opacity:.7; }

/* —————————————————— 见物能聊：思维导图场景 —————————————————— */
.scene{ display:grid; gap:14px; }
.scene .node{
  position:relative; background:var(--paper-card);
  border:2px solid var(--c,var(--who)); border-left-width:8px;
  border-radius:14px; padding:12px 14px;
}
.scene .node .en{ font-weight:800; font-size:1.1rem; }
.scene .node .zh{ color:var(--ink-soft); font-size:.95rem; }
.scene .node.who  { --c:var(--who);  }
.scene .node.do   { --c:var(--do);   }
.scene .node.be   { --c:var(--be);   }
.scene .node .mini{ margin-top:6px; }
.mini .b{ font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:8px;
          display:inline-block; margin-right:5px; }
.mini .b.who { color:var(--who);  background:var(--who-bg);  }
.mini .b.do  { color:var(--do);   background:var(--do-bg);   }
.mini .b.what{ color:var(--what); background:var(--what-bg); }
.mini .b.be  { color:var(--be);   background:var(--be-bg);   }
/* 见物能聊里:动作词纯橙文字,主语/宾语仍是色块(干净、与上面的区域横线一致) */
.mini .mv{ color:var(--do); font-weight:700; margin-right:5px;
  font-family:var(--font-display); font-size:.72rem; }

/* —————————————————— 练习 —————————————————— */
.quiz{ background:var(--paper-card); border:2px solid var(--line);
       border-radius:var(--radius); padding:22px; margin:26px 0; }
.quiz h3{ font-family:var(--font-display); font-size:1.2rem; margin-bottom:4px; }
.qitem{ border-top:1px dashed var(--line); padding:16px 0 4px; }
.qitem:first-of-type{ border-top:0; }
.qitem .q{ font-weight:700; margin-bottom:8px; }
.qitem .q .num{ color:var(--do); font-family:var(--font-display); margin-right:6px; }
details.answer{ margin-top:8px; }
details.answer summary{
  cursor:pointer; display:inline-block; font-family:var(--font-display);
  font-weight:700; font-size:.85rem; color:var(--what);
  background:var(--what-bg); padding:6px 14px; border-radius:999px;
  list-style:none;
}
details.answer summary::-webkit-details-marker{ display:none; }
details.answer[open] summary{ background:transparent; }
details.answer .a{ margin-top:8px; color:var(--ink); }

/* —————————————————— 目录（首页）—————————————————— */
.toc{ display:grid; gap:12px; margin-top:6px; }
.toc-item{
  display:flex; align-items:center; gap:14px;
  background:var(--paper-card); border:2px solid var(--line);
  border-radius:16px; padding:14px 16px; text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.toc-item .n{
  flex:none; display:grid; place-items:center; width:38px; height:38px;
  border-radius:12px; font-family:var(--font-display); font-weight:800;
  background:var(--c,var(--rule-bg)); color:#fff;
}
.toc-item .tt{ flex:1; }
.toc-item .tt .zh{ font-weight:700; }
.toc-item .tt .en{ display:block; font-size:.82rem; color:var(--ink-soft); }
.toc-item .go{ font-family:var(--font-display); font-weight:800; color:var(--ink-soft); }
.toc-item.ready{ cursor:pointer; }
.toc-item.ready:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -16px rgba(74,63,54,.7); border-color:var(--c,var(--do)); }
.toc-item.soon{ opacity:.62; }
.toc-item.soon .badge{
  font-family:var(--font-cn); font-size:.72rem; color:var(--ink-soft);
  border:1px dashed var(--line); padding:2px 9px; border-radius:999px;
}
/* 给目录项编号块上色（按角色循环）*/
.c-who{--c:var(--who)} .c-do{--c:var(--do)} .c-what{--c:var(--what)}
.c-be{--c:var(--be)} .c-rule{--c:var(--rule)}

/* —————————————————— 段落间小标题 —————————————————— */
.mini-h{
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  margin:20px 0 6px; display:flex; align-items:center; gap:8px;
}
.mini-h .pin{ font-size:1.05rem; }

/* —————————————————— 底部导航 / 页脚 —————————————————— */
.pager{ display:flex; gap:12px; margin:34px 0 8px; }
.pager a{
  flex:1; text-align:center; text-decoration:none; font-family:var(--font-display);
  font-weight:800; color:var(--ink); background:var(--paper-card);
  border:2px solid var(--line); border-radius:16px; padding:14px;
}
.pager a.next{ background:var(--do-bg); border-color:var(--do); color:var(--do); }
.pager a.disabled{ opacity:.45; pointer-events:none; }
.foot{ text-align:center; color:var(--ink-soft); font-size:.82rem; margin-top:40px; }

/* —————————————————— 入场动画 —————————————————— */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .toc-item.ready:hover{ transform:none; }
  .brick.say-able:hover{ transform:none; }
  .brick.speaking{ animation:none; }
  html{ scroll-behavior:auto; }
}
html{ scroll-behavior:smooth; }

/* —————————————————— 小屏微调 —————————————————— */
@media (max-width:480px){
  .judge{ grid-template-columns:1fr; }
  .brick{ min-width:50px; padding:7px 11px 6px; }
  .brick .word{ font-size:1.05rem; }
}

/* —— 表语 / 补语(主系表的"表语",第 4 关引入)—— */
:root{ --comp:#D9608A; --comp-bg:#FAE0EC; --comp-sh:rgba(217,96,138,.28); }
.card.comp{ --c:var(--comp); --tape:var(--comp-bg); }
.card.comp h2 .key{ color:var(--comp); }
.brick.comp{ --c:var(--comp); --cbg:var(--comp-bg); --csh:var(--comp-sh); }
.scene .node.comp{ --c:var(--comp); }
.mini .b.comp{ color:var(--comp); background:var(--comp-bg); }
.c-comp{ --c:var(--comp); }

/* —— 词汇展示色块(柔和贴纸风,多彩、装饰性;区别于"句子积木"的成分色)—— */
.brick.vocab{ border-color:rgba(120,104,84,.22); box-shadow:0 3px 9px -4px rgba(74,63,54,.45); }
.brick.vocab .word{ color:var(--ink); }
.brick.vocab.tint1{ background:var(--who-bg);  }
.brick.vocab.tint2{ background:var(--what-bg); }
.brick.vocab.tint3{ background:var(--do-bg);   }
.brick.vocab.tint4{ background:var(--be-bg);   }
.brick.vocab.tint5{ background:var(--comp-bg); }
.brick.vocab.tint6{ background:var(--rule-bg); }
.brick.vocab.speaking{ box-shadow:0 0 0 3px rgba(120,104,84,.4), 0 3px 9px -4px rgba(74,63,54,.45); }

/* ======================================================================
   闯关测试 + 福袋拼图（通用机制，由 app.js 数据驱动）
   答对一题 → 碎片飞入右下角福袋 → 点亮一块拼图；集齐见全貌。
   ====================================================================== */

/* —— 一道小题 —— */
.task{
  position:relative; background:var(--paper);
  border:1.5px dashed var(--line); border-radius:14px;
  padding:14px 16px 12px; margin:14px 0;
  transition:border-color .2s ease, background .2s ease;
}
.task .q{ font-weight:700; margin:0 0 10px; }
.task .q .en{ font-weight:800; }
.task .q .num{ color:var(--do); font-family:var(--font-display); font-weight:800; margin-right:6px; }
.scene .task{ margin:0; }
/* 题目里的句子积木：跟教学卡同款，被考的那块标 ? 并轻轻呼吸 */
.task .ask-cap{ text-align:center; color:var(--ink-soft); font-weight:700; font-size:.9rem; margin:8px 0 0; }
.task .sentence{ margin:8px 0 12px; }
/* 句末句号（标点不属于成分，放积木外、紧跟最后一块）*/
.sentence .end-dot{ font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  color:var(--ink); align-self:flex-end; padding-bottom:6px; margin-left:-2px; }
.brick.ask .role{ font-size:.98rem; }
.brick.ask{ animation:ask-pulse 1.3s ease-in-out infinite; }
@keyframes ask-pulse{ 0%,100%{ box-shadow:3px 3px 0 var(--csh) }
  50%{ box-shadow:0 0 0 5px var(--csh), 3px 3px 0 var(--csh) } }
.task .hl-who { color:var(--who);  font-weight:800; }
.task .hl-do  { color:var(--do);   font-weight:800; }
.task .hl-what{ color:var(--what); font-weight:800; }

/* 选项按钮 */
.opts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.opt{
  font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--ink);
  background:var(--paper-card); border:2.5px solid var(--line); border-radius:12px;
  padding:9px 18px; cursor:pointer; box-shadow:2px 2px 0 rgba(74,63,54,.12);
  transition:transform .1s ease, background .15s, border-color .15s, color .15s, opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.opt:hover{ transform:translateY(-2px); }
.opt:active{ transform:scale(.96); }
.opt.correct{ background:var(--what-bg); border-color:var(--what); color:var(--what); }
.opt.wrong{ background:var(--do-bg); border-color:var(--do); color:var(--do); animation:tk-shake .4s; }
.task.solved .opt{ cursor:default; }
.task.solved .opt:not(.correct){ opacity:.4; }
@keyframes tk-shake{ 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-6px)} }

/* 解出后的整题状态 + 角标 */
.task.solved{ border-style:solid; border-color:var(--what); background:var(--what-bg); }
.task.solved::after{
  content:"✓"; position:absolute; top:-12px; right:-10px;
  width:30px; height:30px; display:grid; place-items:center;
  background:var(--what); color:#fff; border-radius:50%; font-weight:900;
  box-shadow:0 3px 8px -2px var(--what-sh); animation:tk-pop .4s ease;
}
@keyframes tk-pop{ 0%{transform:scale(0)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }

.task .feedback{ margin:10px 0 0; font-family:var(--font-display); font-weight:800;
  font-size:.92rem; min-height:1.1em; }
.task .feedback.ok{ color:var(--what); }
.task .feedback.no{ color:var(--do); }

/* —— 排序题 —— */
.order-slots{
  display:flex; flex-wrap:wrap; gap:8px; min-height:46px; align-items:center; justify-content:center;
  margin:10px 0; padding:8px 10px; border-radius:12px;
  background:var(--paper-card); border:2px dashed var(--line);
}
.order-slots:empty::before{ content:"点下面的词，按顺序排进来…";
  color:var(--ink-soft); font-size:.85rem; font-weight:600; }
.order-slots.wrong{ animation:tk-shake .4s; border-color:var(--do); }
.order-pool{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.order-pool:empty{ display:none; }
.tok{
  font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--ink);
  background:var(--who-bg); border:2.5px solid var(--who); border-radius:12px;
  padding:8px 15px; cursor:pointer; box-shadow:2px 2px 0 var(--who-sh);
  -webkit-tap-highlight-color:transparent;
}
.tok:active{ transform:scale(.96); }
.order-slots .tok{ background:var(--paper-card); border-color:var(--ink-soft); box-shadow:none; }
.task.solved .order-slots .tok{ background:var(--what-bg); border-color:var(--what); }

/* —— 造句打卡 —— */
.pledge-btn{
  font-family:var(--font-display); font-weight:800; font-size:1rem; color:#fff;
  background:var(--do); border:none; border-radius:999px; padding:11px 22px;
  cursor:pointer; box-shadow:0 6px 14px -5px var(--do-sh); -webkit-tap-highlight-color:transparent;
}
.pledge-btn:active{ transform:scale(.97); }
.task.solved .pledge-btn{ background:var(--what); box-shadow:0 6px 14px -5px var(--what-sh); }
.task .hint{ margin:8px 0 0; }
.task .hint summary{ cursor:pointer; font-family:var(--font-display); font-weight:700;
  font-size:.82rem; color:var(--ink-soft); list-style:none; }
.task .hint summary::-webkit-details-marker{ display:none; }
.task .hint .a{ margin-top:6px; color:var(--ink); font-size:.92rem; }
/* 直接展示的示例（低调，不折叠）*/
.task .eg{ margin:8px 0 10px; color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
.task .eg .en{ color:var(--ink); font-weight:700; }

/* —— 可锁定区（练习区：前置题做完才解锁）—— */
.lockable{ position:relative; }
.lockable.locked > *:not(.zone-lock){ filter:blur(2.5px) saturate(.55); opacity:.5;
  pointer-events:none; user-select:none; }
.zone-lock{ display:none; }
.lockable.locked .zone-lock{
  display:grid; place-items:center; position:absolute; inset:0; z-index:5;
  border-radius:var(--radius); background:rgba(251,246,235,.35);
}
.zone-lock .box{
  text-align:center; font-family:var(--font-display); font-weight:800; color:var(--ink);
  background:var(--paper-card); border:2.5px solid var(--rule); border-radius:18px;
  padding:16px 22px; box-shadow:0 14px 30px -14px rgba(74,63,54,.55); max-width:80%;
}
.zone-lock .box .lk{ font-size:1.9rem; display:block; margin-bottom:4px; }
.zone-lock .box .sub{ font-size:.84rem; color:var(--ink-soft); font-weight:600; margin-top:5px; }

/* —— 右下角福袋 —— */
.lucky-bag{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  width:62px; padding:8px 4px 6px; cursor:pointer; font-family:var(--font-display);
  background:var(--rule-bg); border:2.5px solid var(--rule); border-radius:18px;
  box-shadow:0 8px 20px -8px var(--rule-sh); -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease;
}
.lucky-bag:active{ transform:scale(.94); }
.lucky-bag .ic{ font-size:1.75rem; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.lucky-bag .bag-count{ font-weight:900; font-size:.78rem; color:var(--rule); }
.lucky-bag.shake{ animation:bag-shake .5s; }
@keyframes bag-shake{ 0%,100%{transform:none}
  20%{transform:rotate(-9deg) scale(1.09)} 40%{transform:rotate(7deg) scale(1.1)}
  60%{transform:rotate(-5deg)} 80%{transform:rotate(3deg)} }
.lucky-bag.full{ background:var(--what-bg); border-color:var(--what); }
.lucky-bag.full .bag-count{ color:var(--what); }

/* —— 拼图弹层 —— */
.puzzle-pop{
  position:fixed; right:16px; bottom:90px; z-index:61; width:min(300px,86vw);
  background:var(--paper-card); border:2.5px solid var(--rule); border-radius:20px;
  padding:16px; box-shadow:0 22px 54px -18px rgba(74,63,54,.6); transform-origin:bottom right;
}
.puzzle-pop[hidden]{ display:none; }
.puzzle-pop.in{ animation:pp-up .25s ease; }
@keyframes pp-up{ from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1} }
.puzzle-pop .ttl{ font-family:var(--font-display); font-weight:800; text-align:center; margin:0 0 2px; }
.puzzle-pop .ttl .nm{ color:var(--do); }
.puzzle-pop .pp-sub{ text-align:center; color:var(--ink-soft); font-size:.8rem; margin:0 0 12px; }
.puzzle-pop .close{ position:absolute; top:6px; right:11px; border:none; background:none;
  font-size:1.4rem; color:var(--ink-soft); cursor:pointer; line-height:1; }
.puzzle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  aspect-ratio:1/1; background:var(--rule); padding:4px; border-radius:12px; transition:background .3s; }
.pcell{ position:relative; border-radius:6px; overflow:hidden; background-color:#F4ECDD;
  background-size:300% 300%; background-repeat:no-repeat; } /* background-image 由 app.js 设 inline */
.pcell .lock{ position:absolute; inset:0; display:grid; place-items:center;
  background:repeating-linear-gradient(45deg,#EFE6D2 0 8px,#E7DCC2 8px 16px);
  color:var(--ink-soft); font-family:var(--font-display); font-weight:900; font-size:1.3rem; }
.pcell.lit{ animation:cell-pop .5s ease; }
.pcell.lit .lock{ animation:cell-reveal .5s ease forwards; }
@keyframes cell-pop{ 0%{transform:scale(.85)} 55%{transform:scale(1.1)} 100%{transform:scale(1)} }
@keyframes cell-reveal{ to{ opacity:0; transform:scale(1.4); visibility:hidden } }
.puzzle-pop.done{ border-color:var(--what); }
.puzzle-pop.done .puzzle-grid{ background:var(--what); }
.puzzle-pop .pz-reset{
  display:block; margin:12px auto 0; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--ink-soft);
  background:var(--paper); border:1.5px solid var(--line); border-radius:999px; padding:6px 16px;
  -webkit-tap-highlight-color:transparent; transition:transform .1s ease;
}
.puzzle-pop .pz-reset:active{ transform:scale(.96); }

/* —— 飞入碎片 / bingo 浮字 / 撒花 —— */
.fly-bit{ position:fixed; z-index:80; font-size:1.6rem; pointer-events:none;
  transition:transform .8s cubic-bezier(.5,-0.35,.35,1), opacity .8s ease; }
.bingo-float{ position:absolute; left:50%; top:0; z-index:10; pointer-events:none; white-space:nowrap;
  font-family:var(--font-display); font-weight:900; color:var(--what);
  background:var(--paper-card); border:2px solid var(--what); border-radius:999px;
  padding:4px 14px; box-shadow:0 6px 16px -6px var(--what-sh); animation:bingo .95s ease forwards; }
@keyframes bingo{ 0%{transform:translate(-50%,-30%) scale(.5); opacity:0}
  25%{transform:translate(-50%,-95%) scale(1.1); opacity:1}
  100%{transform:translate(-50%,-170%) scale(1); opacity:0} }
.confetti{ position:fixed; inset:0; z-index:79; pointer-events:none; overflow:hidden; }
.confetti i{ position:absolute; top:-12px; font-size:1.1rem; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(104vh) rotate(540deg); opacity:.25 } }

@media (prefers-reduced-motion: reduce){
  .opt.wrong, .order-slots.wrong, .lucky-bag.shake, .pcell.lit, .pcell.lit .lock,
  .task.solved::after, .bingo-float, .puzzle-pop.in, .confetti i, .brick.ask{ animation:none; }
  .fly-bit{ transition:opacity .3s ease; }
}

/* ====================================================================
   隐藏款挑战：15 秒内全对 → 超级福袋 + 隐藏款金色蛋小黄
   ==================================================================== */
/* 福袋弹层里的「隐藏款挑战」入口（通关后才显示）*/
.pz-challenge{ display:none; width:100%; margin:10px 0 0; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:.92rem; color:#7A3E00;
  background:linear-gradient(145deg,#FFE08A,#F5B731); border:2px solid #E89A12; border-radius:14px;
  padding:11px; box-shadow:0 6px 16px -6px rgba(232,154,18,.6); -webkit-tap-highlight-color:transparent; }
.puzzle-pop.can-challenge .pz-challenge{ display:block; animation:super-glow 1.6s ease-in-out infinite; }
.pz-challenge:active{ transform:scale(.97); }

/* 超级福袋 */
.lucky-bag.super{ background:linear-gradient(145deg,#FFE08A,#F5B731); border-color:#E89A12;
  animation:super-glow 1.4s ease-in-out infinite; }
.lucky-bag.super .bag-count{ color:#8A4E00; }
@keyframes super-glow{ 0%,100%{ box-shadow:0 0 0 3px rgba(245,183,49,.35), 0 8px 22px -6px rgba(232,154,18,.6) }
  50%{ box-shadow:0 0 0 8px rgba(245,183,49,.16), 0 10px 30px -6px rgba(232,154,18,.85) } }

/* 倒计时 */
.timer{ position:fixed; top:56px; left:50%; transform:translateX(-50%); z-index:62;
  display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:900; font-size:1.15rem;
  color:#8A4E00; background:linear-gradient(145deg,#FFE7A0,#F7C23E); border:2.5px solid #E89A12;
  border-radius:999px; padding:8px 20px; box-shadow:0 8px 22px -6px rgba(232,154,18,.6); }
.timer.hurry{ color:#C0392B; border-color:#E74C3C; background:linear-gradient(145deg,#FFD2C2,#F79B7E);
  animation:timer-pulse .5s ease-in-out infinite; }
@keyframes timer-pulse{ 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.09)} }

/* 隐藏款金光 */
.puzzle-grid.secret{ background:linear-gradient(145deg,#F7C23E,#E89A12); }
.pcell.secret{ animation:secret-shine 1.7s ease-in-out infinite; }
@keyframes secret-shine{ 0%,100%{ filter:brightness(1) saturate(1.05) }
  50%{ filter:brightness(1.13) saturate(1.3) drop-shadow(0 0 5px rgba(255,200,40,.9)) } }

/* 挑战失败弹窗 */
.challenge-end{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:rgba(74,63,54,.45); }
.challenge-end .box{ background:var(--paper-card); border:2.5px solid var(--rule); border-radius:20px;
  padding:22px 24px; max-width:82%; text-align:center; box-shadow:0 24px 60px -16px rgba(0,0,0,.5); }
.challenge-end h3{ font-family:var(--font-display); font-size:1.3rem; margin:0 0 4px; }
.challenge-end p{ color:var(--ink-soft); margin:4px 0 16px; }
.challenge-end .btns{ display:flex; gap:10px; justify-content:center; }
.challenge-end button{ font-family:var(--font-display); font-weight:800; border-radius:999px;
  padding:10px 18px; cursor:pointer; border:2px solid var(--line); background:var(--paper); color:var(--ink); }
.challenge-end button.primary{ background:var(--do); border-color:var(--do); color:#fff; }

/* 挑战模式：只显示题目，讲解全藏 */
/* 挑战模式:只留挑战舞台 + 底部翻页导航(挑战完能直接翻关);其余讲解全藏 */
body.challenge-mode .wrap{ display:flex; flex-direction:column; }
body.challenge-mode .wrap > *:not(.challenge-stage):not(.pager){ display:none; }
body.challenge-mode .challenge-stage{ order:1; }
body.challenge-mode .pager{ order:2; margin-top:24px; }
.challenge-stage{ padding-top:6px; }
.challenge-stage .cs-tip{ text-align:center; font-family:var(--font-display); font-weight:800;
  color:var(--do); font-size:1.05rem; margin:10px 0 6px; }

/* 代词变身对(主格 → 宾格,点击读「X 变成 Y」)*/
.pron-list{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0; }
.pron-pair{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--paper-card); border:2px solid var(--line); border-radius:999px;
  padding:6px 14px; font-family:var(--font-display); -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease; }
.pron-pair:hover{ transform:translateY(-2px); }
.pron-pair:active{ transform:scale(.95); }
.pron-pair b{ font-weight:800; font-size:1.05rem; }
.pron-pair .who{ color:var(--who); }
.pron-pair .what{ color:var(--what); }
.pron-pair .arr{ color:var(--ink-soft); font-weight:800; }
.pron-pair.same .what{ color:var(--who); }            /* you/it 不变:宾格也蓝 */
.pron-pair.speaking{ box-shadow:0 0 0 3px var(--who); animation:brickpop .4s ease; }

@media (prefers-reduced-motion: reduce){
  .pz-challenge, .lucky-bag.super, .timer.hurry, .pcell.secret, .pron-pair.speaking{ animation:none; }
}