/* ============================================================
   敲敲英语 · Memphis Pop / Sugar Rush 视觉系统
   ------------------------------------------------------------
   奶油底 + 高饱和撞色块 + 墨黑粗描边 + 硬投影
   规则：不用渐变、不用发光、不用半透明磨砂；
        所有色块都要 2-4px 墨黑边，阴影一律是实心偏移块。
   ============================================================ */
:root{
  --cream:#FFF8EE;   /* 奶油白页面底 */
  --cream2:#FFE9C7;  /* 浅奶油卡片底 */
  --white:#fff;
  --ink:#1A1A2E;     /* 墨黑：正文 + 描边 */
  --ink2:#5C5C7A;    /* 灰紫：注释 */
  --pink:#FF3DA5;    /* 泡泡糖粉 */
  --blue:#00B8D9;    /* 电光蓝 */
  --yellow:#FFD93D;  /* 鲜黄 */
  --mint:#00C896;    /* 薄荷绿 */
  --coral:#FF6B4A;   /* 珊瑚红 */
  --sh-xs:2px 2px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);
  --sh:5px 5px 0 var(--ink);
  --sh-lg:9px 9px 0 var(--ink);
  --display:Impact,Haettenschweiler,"Arial Black","PingFang SC","Microsoft YaHei",sans-serif;
  --body:Arial,"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--cream); color:var(--ink); overflow:hidden; font-family:var(--body);
  background-image:radial-gradient(var(--cream2) 1.6px,transparent 1.7px);
  background-size:22px 22px;
}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:99}
#catcher{position:fixed;opacity:0;left:-9999px;width:1px;height:1px}

.app{display:flex;height:100vh}

/* ---------- 侧边栏 ---------- */
.sidebar{
  width:266px;flex:none;background:var(--white);border-right:3px solid var(--ink);
  display:flex;flex-direction:column;padding:18px 14px;
}
.brand{
  display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;
  letter-spacing:.04em;margin-bottom:22px;padding:0 4px
}
.logo{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--pink);color:var(--white);font-family:var(--display);font-size:22px;
  border:2.5px solid var(--ink);box-shadow:var(--sh-xs);transform:rotate(-4deg)
}
.side-label{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  background:var(--ink);color:var(--cream);padding:3px 9px;border-radius:4px;margin:0 0 10px 4px
}
.course-nav{
  display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto;
  padding:2px 6px 10px 2px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent
}
.course-nav::-webkit-scrollbar{width:8px}
.course-nav::-webkit-scrollbar-thumb{background:var(--ink);border-radius:0}
.course-nav::-webkit-scrollbar-track{background:var(--cream2)}
.course-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;flex:none;
  cursor:pointer;background:var(--white);border:2px solid var(--ink);transition:.12s ease-out;
}
.course-item:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-sm)}
.course-item.active{background:var(--pink);box-shadow:var(--sh-sm);transform:translate(-2px,-2px)}
.course-item.active .nm,.course-item.active .ds{color:var(--white)}
.course-item .ic{
  width:30px;height:30px;flex:none;display:grid;place-items:center;font-size:16px;
  border:2px solid var(--ink);border-radius:8px;background:var(--cream2)
}
/* 图标底色按 5 色循环，撞色但不喧宾夺主 */
.course-item:nth-child(5n+1) .ic{background:var(--yellow)}
.course-item:nth-child(5n+2) .ic{background:var(--blue)}
.course-item:nth-child(5n+3) .ic{background:var(--mint)}
.course-item:nth-child(5n+4) .ic{background:var(--coral)}
.course-item:nth-child(5n+5) .ic{background:var(--cream2)}
.course-item.active .ic{background:var(--white)}
.course-item>span:nth-child(2){min-width:0;flex:1}
.course-item .nm{display:block;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-item .ds{display:block;font-size:10.5px;color:var(--ink2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-item .pg{
  margin-left:auto;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink);background:var(--cream);border:1.5px solid var(--ink);
  border-radius:999px;padding:1px 6px
}
.course-item.active .pg{background:var(--yellow)}
.side-foot{display:flex;flex-direction:column;gap:8px;padding-top:14px;margin-top:12px;border-top:3px solid var(--ink)}
.ghost-btn,.pill-btn{
  background:var(--white);border:2px solid var(--ink);color:var(--ink);font-family:var(--body);
  font-weight:700;padding:8px 12px;border-radius:9px;font-size:12.5px;cursor:pointer;
  box-shadow:var(--sh-xs);transition:.1s ease-out
}
.ghost-btn:hover,.pill-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-sm);background:var(--yellow)}
.ghost-btn:active,.pill-btn:active{transform:translate(2px,2px);box-shadow:none}

/* ---------- 主区 ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;background:var(--white);border-bottom:3px solid var(--ink)
}
.crumb{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;letter-spacing:.02em}
.crumb .dot{color:var(--pink)}
#groupTitle{
  background:var(--yellow);border:2px solid var(--ink);border-radius:999px;
  padding:2px 11px;font-size:12.5px;font-weight:700
}
#progressText{color:var(--ink2);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.stats{display:flex;gap:12px}
.stat{
  text-align:center;min-width:66px;padding:5px 9px;border:2px solid var(--ink);
  border-radius:10px;background:var(--cream);box-shadow:var(--sh-xs)
}
.stat b{
  display:block;font-family:var(--display);font-size:21px;line-height:1.05;letter-spacing:.02em;
  font-variant-numeric:tabular-nums
}
.stat span{font-size:9.5px;font-weight:700;color:var(--ink2);letter-spacing:.08em}
.stat:nth-child(1) b{color:var(--blue)}
.stat:nth-child(2) b{color:var(--mint)}
.stat:nth-child(3) b{color:var(--pink)}
.stat:nth-child(4) b{color:var(--coral)}

.progress-bar{height:10px;background:var(--cream2);flex:none;border-bottom:3px solid var(--ink)}
#progressFill{
  display:block;height:100%;width:0;background:var(--pink);
  border-right:3px solid var(--ink);transition:width .4s cubic-bezier(.2,.9,.2,1)
}

/* ---------- 小节导航条 ---------- */
.group-bar{
  flex:none;display:flex;gap:8px;padding:11px 26px;overflow-x:auto;
  background:var(--cream2);border-bottom:3px solid var(--ink);scrollbar-width:none
}
.group-bar::-webkit-scrollbar{display:none}
.gchip{
  flex:none;display:flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--body);
  background:var(--white);border:2px solid var(--ink);color:var(--ink);font-weight:700;
  padding:6px 12px;border-radius:999px;font-size:12.5px;white-space:nowrap;transition:.1s ease-out
}
.gchip:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-xs)}
.gchip i{
  font-style:normal;font-size:10px;font-variant-numeric:tabular-nums;
  background:var(--cream2);border-radius:999px;padding:1px 5px
}
.gchip.on{background:var(--yellow);box-shadow:var(--sh-sm);transform:translate(-1px,-1px)}
.gchip.on i{background:var(--white)}

.stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:26px 24px;position:relative;overflow:auto
}

/* ---------- Memphis 装饰碎片 ---------- */
.deco{position:absolute;pointer-events:none;z-index:0;display:block}
.deco.dots{
  left:26px;top:34px;width:76px;height:56px;
  background-image:radial-gradient(var(--pink) 3.4px,transparent 3.6px);background-size:19px 19px
}
.deco.zig{
  right:38px;top:52px;width:34px;height:52px;background:var(--yellow);
  border:0;clip-path:polygon(62% 0,10% 52%,44% 52%,20% 100%,90% 40%,52% 40%);
  filter:drop-shadow(2px 2px 0 var(--ink))
}
.deco.tri{
  left:52px;bottom:64px;width:46px;height:42px;background:var(--mint);
  clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(14deg);
  filter:drop-shadow(2px 2px 0 var(--ink))
}
.deco.checker{
  right:26px;bottom:40px;width:72px;height:36px;
  background-image:
    linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%),
    linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%);
  background-size:18px 18px;background-position:0 0,9px 9px
}
.deco.wave{
  left:38px;bottom:150px;width:118px;height:26px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='118' height='26' viewBox='0 0 118 26'><path d='M2 18 Q 16 2 30 18 T 58 18 T 86 18 T 114 18' fill='none' stroke='%2300B8D9' stroke-width='5' stroke-linecap='round'/></svg>") no-repeat
}
@media (max-width:1100px){.deco{display:none}}

/* ---------- 场景卡 ---------- */
.scene{
  position:relative;z-index:1;width:min(520px,72vw);height:min(212px,28vh);border-radius:16px;
  display:grid;place-items:center;overflow:hidden;flex:none;
  background:var(--c1,#FF3DA5);border:3px solid var(--ink);box-shadow:var(--sh-lg);
  animation:sceneIn .34s cubic-bezier(.2,.9,.25,1)
}
@keyframes sceneIn{from{opacity:0;transform:translate(6px,10px)}to{opacity:1;transform:none}}
/* 漂移的硬边色块（替代原来的发光） */
.scene-glow{
  position:absolute;width:104px;height:104px;border-radius:50%;
  background:var(--c2,#FFD93D);border:3px solid var(--ink);
  animation:drift 11s ease-in-out infinite alternate
}
@keyframes drift{from{transform:translate(-172px,-52px) rotate(0)}to{transform:translate(172px,40px) rotate(20deg)}}
/* 底部棋盘条带 */
.scene::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:14px;
  background-image:
    linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%),
    linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%);
  background-color:var(--cream);background-size:14px 14px;background-position:0 0,7px 7px;
  border-top:3px solid var(--ink)
}
.scene-emoji{
  font-size:82px;position:relative;z-index:2;
  animation:float 3.4s ease-in-out infinite;filter:drop-shadow(4px 4px 0 rgba(26,26,46,.28))
}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.prop{position:absolute;z-index:2;font-size:32px;filter:drop-shadow(3px 3px 0 rgba(26,26,46,.25))}
.p1{left:10%;bottom:22%;animation:float 4.2s ease-in-out infinite .4s}
.p2{right:10%;top:14%;animation:float 3.8s ease-in-out infinite .9s}

/* ---------- 中文提示（马克笔高亮） ---------- */
.zh{
  position:relative;z-index:1;font-size:20px;font-weight:800;letter-spacing:.02em;
  padding:2px 8px;background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 94%,transparent 94%)
}

/* ---------- 语法拆解 ---------- */
.chunks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.chunk{
  background:var(--white);border:2px solid var(--ink);border-radius:10px;
  padding:6px 12px;text-align:center;transition:.14s ease-out
}
.chunk.on{transform:translate(-2px,-2px);box-shadow:var(--sh-xs)}
.chunk:nth-child(5n+1).on{background:var(--pink)}
.chunk:nth-child(5n+2).on{background:var(--blue)}
.chunk:nth-child(5n+3).on{background:var(--yellow)}
.chunk:nth-child(5n+4).on{background:var(--mint)}
.chunk:nth-child(5n+5).on{background:var(--coral)}
.chunk .cw{font-size:13.5px;font-weight:700}
.chunk .cl{font-size:10.5px;color:var(--ink2);margin-top:2px}
.chunk.on .cw,.chunk.on .cl{color:var(--ink)}

/* ---------- 打字区 ---------- */
.typing{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;align-items:flex-end;
  max-width:900px;padding:20px 26px;border-radius:16px;
  background:var(--white);border:3px solid var(--ink);box-shadow:var(--sh);min-height:92px
}
.typing.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.word{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer}
.word .letters{
  display:flex;font-size:33px;font-weight:700;letter-spacing:.5px;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace
}
.word .bar{height:5px;width:100%;min-width:16px;border-radius:2px;background:var(--cream2);transition:.2s}
.word.active .bar{background:var(--pink)}
.word.done .bar{background:var(--mint)}
.ch{color:#A5A5BE;transition:color .1s,transform .1s;position:relative}
.ch.done{color:var(--ink)}
.ch.cur{color:var(--pink)}
.ch.cur::after{
  content:'';position:absolute;left:-2px;right:-2px;bottom:-5px;height:4px;
  background:var(--pink);animation:blink .9s steps(1) infinite
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.12}}
.ch.bad{color:var(--coral);animation:pop .22s}
@keyframes pop{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.typing.finished{background:var(--mint)}
.typing.finished .ch{color:var(--ink)}

.hint-row,.settings-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1
}
.tip{font-size:11.5px;font-weight:700;color:var(--ink2)}

.done-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-4deg) scale(.6);
  font-family:var(--display);font-size:52px;letter-spacing:.04em;color:var(--ink);
  background:var(--yellow);border:4px solid var(--ink);box-shadow:var(--sh-lg);
  padding:10px 26px;border-radius:14px;opacity:0;pointer-events:none;z-index:3
}
.done-badge.show{animation:badge 1.1s cubic-bezier(.2,.9,.25,1)}
@keyframes badge{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-4deg) scale(.5)}
  22%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1.12)}
  70%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-54%) rotate(-4deg) scale(1.05)}
}
.stage.win .scene{box-shadow:9px 9px 0 var(--mint),0 0 0 3px var(--ink)}

/* ---------- 分段控件 ---------- */
.seg{display:flex;background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:3px;box-shadow:var(--sh-xs)}
.seg button{
  background:transparent;border:0;color:var(--ink2);font-family:var(--body);font-size:12.5px;
  font-weight:700;padding:5px 13px;border-radius:999px;cursor:pointer;transition:.12s
}
.seg button.on{background:var(--blue);color:var(--white);border:2px solid var(--ink);padding:3px 11px}
.pill-btn.toggle.off{opacity:.5;text-decoration:line-through}

/* ---------- 隐藏英文（盲打模式） ---------- */
.typing.hide-en .ch:not(.done){color:transparent}
.typing.hide-en .ch:not(.done)::before{
  content:'·';position:absolute;inset:0;display:grid;place-items:center;
  color:#A5A5BE;font-weight:700
}
.chunks.hide-en .cw{filter:blur(7px);opacity:.6;user-select:none}
.zh.hidden{visibility:hidden}

/* 逐词发音时当前词跳一下 */
.word.speaking .letters{animation:spk .5s ease}
@keyframes spk{0%{transform:translateY(0)}35%{transform:translateY(-6px)}100%{transform:translateY(0)}}

@media (max-width:820px){
  .sidebar{display:none}
  .stats{gap:6px}
  .stat{min-width:54px;padding:4px 6px}
  .stat b{font-size:17px}
  .word .letters{font-size:25px}
  .topbar{padding:0 14px}
  .group-bar{padding:9px 14px}
}