/* =====================================================================
   Kiki 英语方块岛 · 像素 / 我的世界风主题
   设计语言：硬边框、无圆角、立体斜角、硬投影、方块像素云
   ===================================================================== */

:root{
  /* 方块调色板 */
  --line:#2B2B2B;
  --line-soft:#4A4A4A;

  --paper:#F5EDDD;
  --paper-2:#EADFC8;
  --panel:#FFFBF1;

  --grass:#7CC24A;
  --grass-d:#4E8B2A;
  --stone:#B9B9B9;
  --stone-d:#8E8E8E;
  --wood:#C99A63;
  --wood-d:#9E7442;
  --gold:#FFC93C;
  --gold-d:#D19B00;
  --diamond:#4FD6C4;
  --diamond-d:#2AA294;
  --lapis:#4A72D8;
  --lapis-d:#2F51A8;
  --redstone:#DC5A4C;
  --redstone-d:#A93B2F;
  --pink:#F58CB4;
  --pink-d:#C85F87;

  --ink:#2B2B2B;
  --ink-2:#6A6055;
  --ink-3:#9A8F80;

  --font-px:'Silkscreen','Press Start 2P','Microsoft YaHei','PingFang SC',sans-serif;
  --font-body:'Microsoft YaHei','PingFang SC','Hiragino Sans GB','Silkscreen',-apple-system,sans-serif;

  --shadow-hard:6px 6px 0 rgba(43,43,43,.85);
  --shadow-soft:4px 4px 0 rgba(43,43,43,.55);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:#8FD4FF;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;border:none;background:none;}
h1,h2,h3,p{margin:0;}
em{font-style:normal;}

/* ------------------------- 像素背景 ------------------------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#6FC5FF 0%,#9BDCFF 46%,#CFEEFF 78%,#E9F7D9 100%);}
.px-cloud{position:absolute;background:#fff;opacity:.92;
  box-shadow:0 0 0 4px rgba(43,43,43,.06);
  image-rendering:pixelated;}
.px-cloud::before,.px-cloud::after{content:"";position:absolute;background:#fff;}
.c1{width:120px;height:32px;top:7%;left:-140px;animation:slide 52s linear infinite;}
.c1::before{width:56px;height:32px;top:-28px;left:20px;}
.c1::after{width:40px;height:24px;top:-18px;left:76px;}
.c2{width:88px;height:24px;top:26%;left:-120px;animation:slide 74s linear infinite;animation-delay:-20s;}
.c2::before{width:40px;height:24px;top:-20px;left:14px;}
.c3{width:150px;height:36px;top:48%;left:-180px;animation:slide 90s linear infinite;animation-delay:-45s;}
.c3::before{width:64px;height:36px;top:-30px;left:26px;}
.c3::after{width:48px;height:28px;top:-22px;left:96px;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(130vw)}}

.bg-hill{position:absolute;bottom:64px;background:var(--grass);opacity:.55;}
.h1{width:340px;height:120px;left:-40px;box-shadow:0 0 0 4px rgba(43,43,43,.05);}
.h2{width:260px;height:88px;right:-30px;opacity:.42;}
.bg-ground{
  position:absolute;left:0;right:0;bottom:0;height:64px;
  background:
    repeating-linear-gradient(90deg, rgba(43,43,43,.16) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(0deg, rgba(43,43,43,.16) 0 2px, transparent 2px 32px),
    linear-gradient(180deg,var(--grass) 0 16px,var(--wood) 16px 100%);
  border-top:4px solid rgba(43,43,43,.35);
}

/* ------------------------- 通用方块 ------------------------- */
.block{
  background:var(--panel);
  border:4px solid var(--line);
  border-radius:0;
  box-shadow:
    inset -5px -5px 0 rgba(43,43,43,.12),
    inset 5px 5px 0 rgba(255,255,255,.75),
    var(--shadow-hard);
}
.block-wood{
  background:linear-gradient(180deg,var(--wood),var(--wood-d));
  border:4px solid var(--line);
  box-shadow:inset -5px -5px 0 rgba(0,0,0,.18), inset 5px 5px 0 rgba(255,255,255,.25), var(--shadow-hard);
}

/* ------------------------- 像素按钮 ------------------------- */
.px-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-px);font-size:14px;letter-spacing:.5px;
  color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.35);
  background:var(--grass);border:4px solid var(--line);
  padding:10px 16px;border-radius:0;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.22), inset 4px 4px 0 rgba(255,255,255,.32), 4px 4px 0 rgba(43,43,43,.8);
  transition:transform .07s linear;
  white-space:nowrap;
}
.px-btn:hover{filter:brightness(1.06);}
.px-btn:active{transform:translate(3px,3px);
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.22), inset 4px 4px 0 rgba(255,255,255,.32), 1px 1px 0 rgba(43,43,43,.8);}
.px-btn:disabled{filter:grayscale(.7) brightness(.95);cursor:not-allowed;transform:none;}
.px-btn.is-rec{background:var(--redstone);animation:blink .8s steps(2,end) infinite;}
.px-btn.mini{font-size:12.5px;padding:8px 12px;}
.px-btn.go{background:var(--diamond);color:#0E3A34;text-shadow:1px 1px 0 rgba(255,255,255,.35);}
.px-btn.gold{background:var(--gold);color:#4A3400;text-shadow:1px 1px 0 rgba(255,255,255,.35);}
.px-btn.lapis{background:var(--lapis);}
.px-btn.pink{background:var(--pink);}
.px-btn.ghost{background:var(--stone);color:#fff;}
.px-btn.stone{background:var(--stone-d);}

.px-select{
  font-family:var(--font-px);font-size:13px;
  background:#fff;border:4px solid var(--line);border-radius:0;
  padding:9px 10px;max-width:200px;
  box-shadow:inset -3px -3px 0 rgba(43,43,43,.10), 3px 3px 0 rgba(43,43,43,.6);
}
.px-chip{
  font-family:var(--font-px);font-size:13px;
  padding:9px 14px;background:#fff;border:4px solid var(--line);border-radius:0;
  box-shadow:inset -3px -3px 0 rgba(43,43,43,.10), 3px 3px 0 rgba(43,43,43,.6);
  transition:transform .07s;
}
.px-chip:hover{transform:translate(-1px,-1px);}
.px-chip.is-on{background:var(--grass);color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.3);}

.chk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-2);}
.chk input{width:16px;height:16px;accent-color:var(--grass);}

/* ------------------------- 顶栏 ------------------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:8px clamp(10px,2.6vw,22px);
  background:linear-gradient(180deg,#3E3E3E,#2B2B2B);
  border-bottom:4px solid #161616;
  box-shadow:0 6px 0 rgba(0,0,0,.18);
}
.brand{display:flex;align-items:center;gap:10px;text-align:left;}
.brand-av{
  display:inline-flex;padding:3px;background:#fff;border:3px solid #161616;
  animation:bob 2.6s steps(2,end) infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.brand-txt{display:flex;flex-direction:column;}
.brand-txt b{font-family:var(--font-px);font-size:15px;color:#fff;letter-spacing:.5px;
  text-shadow:2px 2px 0 rgba(0,0,0,.5);}
.brand-txt small{font-size:11px;color:#B9C4CF;}

.hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.hud-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-px);font-size:13px;
  background:#F5EDDD;border:3px solid #161616;border-radius:0;
  padding:5px 10px;color:#2B2B2B;
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
}
.hud-chip b{font-size:14px;}
.hud-chip i{font-style:normal;font-size:10.5px;color:#7A7166;}
.hud-chip.icon{padding:5px 9px;font-size:16px;}
.hud-chip.grade-chip{background:#FFE9A8;}
.hud-chip:hover{filter:brightness(1.05);}

/* ------------------------- 布局 ------------------------- */
#main{
  position:relative;z-index:1;
  max-width:1080px;margin:0 auto;
  padding:clamp(12px,2.2vw,22px) clamp(10px,2.6vw,22px) 96px;
}
.screen{display:none;}
.screen.is-active{display:block;animation:fadeUp .22s steps(4,end);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.sec-title{
  font-family:var(--font-px);font-size:15px;color:#123A55;
  margin:20px 0 10px;text-shadow:2px 2px 0 rgba(255,255,255,.8);
}
.cheer{
  margin:14px 0 4px;padding:11px 14px;
  background:rgba(255,255,255,.9);
  border:3px solid var(--line);border-left-width:10px;
  font-size:13.5px;font-weight:700;color:#4A5A68;
  box-shadow:var(--shadow-soft);
  animation:pop .3s steps(3,end);
}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ------------------------- 首页 ------------------------- */
.hero{display:flex;align-items:center;gap:clamp(12px,2.6vw,28px);
  padding:clamp(16px,2.6vw,26px);flex-wrap:wrap;
  background:linear-gradient(180deg,#FFFBF1,#F3E7CE);}
.hero-av{position:relative;flex:0 0 auto;}
.av-frame{
  display:inline-flex;padding:8px;background:#fff;border:4px solid var(--line);
  box-shadow:inset -4px -4px 0 rgba(43,43,43,.08), 5px 5px 0 rgba(43,43,43,.75);
  animation:bob 3s steps(2,end) infinite;
}
.av-badge{
  position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-px);font-size:10.5px;color:#4A3400;
  background:var(--gold);border:3px solid var(--line);padding:2px 8px;white-space:nowrap;
}
.hero-txt{flex:1 1 320px;min-width:0;}
.hero h1{font-family:var(--font-px);font-size:clamp(17px,2.8vw,24px);line-height:1.5;letter-spacing:.5px;}
.hero h1 em{background:var(--pink);color:#fff;padding:0 8px;display:inline-block;
  text-shadow:2px 2px 0 rgba(0,0,0,.28);transform:rotate(-1.5deg);}
.hero-sub{margin-top:12px;font-size:14.5px;line-height:1.75;color:#4A5A68;
  background:#fff;border:3px dashed var(--gold-d);padding:10px 14px;}
.grade-picker{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.gp-label{font-family:var(--font-px);font-size:12.5px;color:#123A55;}

.module-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));}
.module{
  position:relative;text-align:left;padding:16px 14px 14px;
  background:var(--panel);border:4px solid var(--line);border-radius:0;
  box-shadow:inset -5px -5px 0 rgba(43,43,43,.10), inset 5px 5px 0 rgba(255,255,255,.7), var(--shadow-soft);
  transition:transform .1s steps(2,end);
  overflow:hidden;
}
.module::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--acc,var(--grass));}
.module:hover{transform:translate(-3px,-3px);box-shadow:inset -5px -5px 0 rgba(43,43,43,.10), inset 5px 5px 0 rgba(255,255,255,.7), var(--shadow-hard);}
.module:active{transform:translate(2px,2px);}
.m-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;font-size:25px;
  background:var(--soft,#E9F7D9);border:3px solid var(--line);margin-bottom:9px;
  box-shadow:inset -3px -3px 0 rgba(43,43,43,.10);
}
.module b{display:block;font-family:var(--font-px);font-size:15px;letter-spacing:.4px;}
.module small{display:block;margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--ink-2);}
.m-tag{
  display:inline-block;margin-top:10px;font-family:var(--font-px);font-size:10.5px;
  color:#fff;background:var(--acc,var(--grass));padding:3px 8px;
  border:2px solid var(--line);
}
.m-talk{--acc:var(--lapis);--soft:#E4ECFF;}
.m-speak{--acc:var(--pink);--soft:#FFE7F0;}
.m-ear{--acc:var(--diamond);--soft:#DFF7F3;}
.m-read{--acc:var(--gold);--soft:#FFF6DC;}
.m-write{--acc:var(--redstone);--soft:#FFE6E2;}
.m-test{--acc:#8E6FD0;--soft:#EFE7FF;}
.m-fix{--acc:#5E9BDC;--soft:#E6F1FF;}
.m-star{--acc:var(--grass);--soft:#E9F7D9;}

/* ------------------------- 二级页头 ------------------------- */
.screen-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.back-btn{
  width:44px;height:44px;flex:0 0 auto;
  font-family:var(--font-px);font-size:18px;color:#fff;
  background:var(--stone-d);border:4px solid var(--line);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.2), 3px 3px 0 rgba(43,43,43,.7);
}
.back-btn:active{transform:translate(2px,2px);}
.screen-head h2{font-family:var(--font-px);font-size:clamp(15px,2.4vw,19px);flex:1 1 auto;letter-spacing:.4px;}
.head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

.panel{padding:clamp(14px,2.2vw,22px);min-height:260px;}
.panel-hint{font-size:13.5px;line-height:1.8;color:var(--ink-2);
  background:#F7F1E4;border-left:8px solid var(--gold);padding:10px 14px;}

/* ------------------------- Minecraft 经验条 ------------------------- */
.xp-track{
  height:20px;background:#1E1E1E;border:4px solid var(--line);
  margin-bottom:16px;box-shadow:inset 0 3px 0 rgba(0,0,0,.5);position:relative;overflow:hidden;
}
.xp-track > i{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,#7FE04A 0 6px,#63C232 6px 12px);
  transition:width .35s steps(6,end);
}

/* ------------------------- 对话 ------------------------- */
.chat-wrap{display:flex;flex-direction:column;height:min(70vh,640px);overflow:hidden;}
.chat-log{
  flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;
  background:
    repeating-linear-gradient(0deg, rgba(43,43,43,.035) 0 2px, transparent 2px 32px),
    repeating-linear-gradient(90deg, rgba(43,43,43,.035) 0 2px, transparent 2px 32px),
    #F8F4E9;
}
.msg{display:flex;gap:10px;max-width:88%;animation:fadeUp .2s steps(3,end);}
.msg .avatar{
  flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:3px solid var(--line);box-shadow:3px 3px 0 rgba(43,43,43,.45);
  font-family:var(--font-px);font-size:16px;color:#fff;overflow:hidden;
}
.msg .avatar svg{display:block;}
.msg .bubble{
  background:#fff;border:3px solid var(--line);padding:10px 13px;
  font-size:15px;line-height:1.72;word-break:break-word;
  box-shadow:4px 4px 0 rgba(43,43,43,.14);
}
.msg .bubble .zh{display:block;margin-top:7px;padding-top:7px;border-top:2px dashed #DDD5C4;
  font-size:12.5px;color:#7A7166;line-height:1.7;}
.msg.kiki .bubble{background:#FFFFFF;}
.msg.me{flex-direction:row-reverse;align-self:flex-end;}
.msg.me .avatar{background:var(--lapis);}
.msg.me .bubble{background:#E4F0FF;}
.msg .say-btn{
  margin-left:8px;font-size:14px;vertical-align:middle;
}
.say-btn{
  font-size:13.5px;vertical-align:middle;margin-left:6px;
  background:#F0EAD9;border:2px solid var(--line);padding:2px 8px;cursor:pointer;line-height:1.4;
}
.say-btn:hover{background:var(--gold);}
.say-btn:active{transform:translate(1px,1px);}
.typing span{display:inline-block;width:8px;height:8px;margin-right:5px;background:var(--lapis);
  animation:blink 1s steps(2,end) infinite;}
.typing span:nth-child(2){animation-delay:.16s}
.typing span:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

.chat-input{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px;background:var(--paper-2);border-top:4px solid var(--line);
}
.chat-input input[type=text]{
  flex:1 1 150px;min-width:110px;padding:12px 14px;
  background:#fff;border:3px solid var(--line);border-radius:0;outline:none;font-size:15px;
  box-shadow:inset 3px 3px 0 rgba(43,43,43,.07);
}
.mic-btn{
  width:52px;height:52px;flex:0 0 auto;font-size:22px;
  background:var(--pink);border:4px solid var(--line);color:#fff;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.2), 4px 4px 0 rgba(43,43,43,.7);
}
.mic-btn:active{transform:translate(2px,2px);}
.mic-btn.is-rec{background:var(--redstone);animation:blink .8s steps(2,end) infinite;}

/* ------------------------- 跟读 ------------------------- */
.read-list{display:flex;flex-direction:column;gap:14px;}
.read-card{
  border:4px solid var(--line);padding:14px;background:#fff;
  box-shadow:var(--shadow-soft);animation:fadeUp .22s steps(3,end);
}
.rc-top{display:flex;gap:12px;align-items:flex-start;}
.rc-num{
  flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-px);font-size:15px;color:#fff;background:var(--pink);border:3px solid var(--line);
}
.rc-en{flex:1 1 auto;font-size:19px;font-weight:800;line-height:1.5;}
.rc-zh{margin-top:5px;font-size:13px;color:var(--ink-2);}
.rc-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.px-mini{
  font-family:var(--font-px);font-size:12.5px;padding:8px 12px;
  background:#fff;border:3px solid var(--line);color:var(--ink);
  box-shadow:inset -3px -3px 0 rgba(43,43,43,.08), 3px 3px 0 rgba(43,43,43,.55);
}
.px-mini:hover{background:var(--paper);}
.px-mini:active{transform:translate(2px,2px);}
.px-mini.rec{background:var(--pink);color:#fff;}
.px-mini.is-rec{background:var(--redstone);color:#fff;animation:blink .8s steps(2,end) infinite;}
.score-row{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.score-num{font-family:var(--font-px);font-size:26px;}
.score-bar{flex:1 1 140px;height:18px;background:#1E1E1E;border:3px solid var(--line);}
.score-bar > i{display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,#7FE04A 0 6px,#63C232 6px 12px);transition:width .5s steps(6,end);}
.stars-line{font-size:19px;letter-spacing:2px;}
.word-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.wchip{padding:5px 10px;font-size:13.5px;font-weight:800;background:#EFE9DA;border:3px solid transparent;}
.wchip.hit{background:#DFF7D9;border-color:var(--grass-d);color:#2E5C12;}
.wchip.miss{background:#FFE0DC;border-color:var(--redstone);color:#A93B2F;}
.wchip.extra{background:#EDE4FF;border-color:#8E6FD0;color:#5A3FA1;}
.note{margin-top:8px;font-size:12.5px;color:var(--ink-2);}

/* ------------------------- 测验 ------------------------- */
.quiz-kind{
  display:inline-block;font-family:var(--font-px);font-size:11.5px;color:#fff;
  background:var(--lapis);padding:4px 10px;border:3px solid var(--line);margin-bottom:10px;
}
.quiz-q{font-size:18.5px;font-weight:800;line-height:1.8;margin-bottom:12px;}
.blank-slot{display:inline-block;min-width:80px;border-bottom:4px dotted var(--diamond-d);
  color:var(--diamond-d);text-align:center;}
.option-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.option{
  padding:14px;font-size:16px;font-weight:800;text-align:center;
  background:#fff;border:4px solid var(--line);
  box-shadow:inset -3px -3px 0 rgba(43,43,43,.08), 3px 3px 0 rgba(43,43,43,.6);
  transition:transform .08s;
}
.option:hover:not(:disabled){transform:translate(-2px,-2px);background:#FFFDF4;}
.option:disabled{cursor:default;}
.option.right{background:#DFF7D9;border-color:var(--grass-d);color:#2E5C12;}
.option.wrong{background:#FFE0DC;border-color:var(--redstone);color:#A93B2F;}
.speak-big{
  display:block;margin:6px auto 4px;width:130px;height:130px;font-size:50px;
  background:var(--lapis);border:5px solid var(--line);color:#fff;
  box-shadow:inset -6px -6px 0 rgba(0,0,0,.2), 6px 6px 0 rgba(43,43,43,.75);
}
.speak-big:active{transform:translate(3px,3px);}
.speak-big.playing{animation:blink .7s steps(2,end) infinite;}
.feedback{margin-top:12px;padding:12px 14px;font-size:14px;font-weight:700;line-height:1.75;
  border:3px solid var(--line);}
.feedback.ok{background:#E7FBE2;border-left-width:10px;}
.feedback.no{background:#FFECE9;border-left-width:10px;}
.feedback.info{background:#F2F6FF;border-left-width:10px;}
.feedback .why{display:block;margin-top:8px;padding-top:8px;border-top:2px dashed rgba(43,43,43,.18);
  font-weight:600;font-size:13px;color:#4A5A68;}
.result-summary{text-align:center;padding:18px;background:#FFF8E4;border:4px dashed var(--gold-d);}
.result-summary .big{font-family:var(--font-px);font-size:30px;color:var(--gold-d);}
.result-summary .tip{margin-top:10px;font-size:13.5px;line-height:1.8;color:#6A6055;font-weight:700;}

/* ------------------------- 阅读 ------------------------- */
.passage{
  font-size:16px;line-height:2;background:#fff;border:4px solid var(--line);
  padding:14px 16px;box-shadow:inset 4px 4px 0 rgba(43,43,43,.05);
}
.passage .sent{padding:1px 0;}
.passage-zh{margin-top:10px;font-size:13px;line-height:1.9;color:#7A7166;
  border-top:2px dashed #DDD5C4;padding-top:10px;}
.passage-zh[hidden]{display:none;}
.passage-title{font-family:var(--font-px);font-size:16px;margin-bottom:10px;}
.word-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.word-item{font-size:12.5px;padding:5px 10px;background:#EFF7E2;border:3px solid var(--grass-d);font-weight:700;}
.word-item i{font-style:normal;color:#5A6B48;}

/* ------------------------- 作文 ------------------------- */
.essay-topic{background:#FFF8E4;border:4px dashed var(--gold-d);padding:14px;margin-bottom:14px;}
.essay-topic .t-en{font-family:var(--font-px);font-size:15px;margin-bottom:6px;}
.essay-topic .t-zh{font-size:13.5px;color:#6A6055;line-height:1.8;}
.essay-topic .t-words{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;}
.essay-input{
  width:100%;min-height:150px;padding:14px;font-size:15.5px;line-height:1.9;resize:vertical;
  background:#fff;border:4px solid var(--line);border-radius:0;outline:none;
  box-shadow:inset 4px 4px 0 rgba(43,43,43,.05);
}
.essay-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;}
.word-count{font-family:var(--font-px);font-size:12.5px;color:var(--ink-2);}
.essay-btns{display:flex;gap:8px;flex-wrap:wrap;}

/* ------------------------- 结果卡 ------------------------- */
.fix-card{border:4px solid var(--line);background:#fff;box-shadow:var(--shadow-soft);margin-top:14px;}
.fix-row{padding:12px 14px;font-size:15px;line-height:1.75;}
.fix-row.old{background:#FFF3F1;}
.fix-row.new{background:#EFFBEA;}
.tag{display:inline-block;font-family:var(--font-px);font-size:10.5px;color:#fff;
  padding:3px 8px;margin-right:8px;vertical-align:2px;border:2px solid var(--line);}
.tag.t-old{background:var(--redstone);}
.tag.t-new{background:var(--grass);}
.err-item{display:flex;gap:10px;padding:11px 14px;background:#fff;border-top:3px solid var(--line);font-size:13.5px;line-height:1.75;}
.err-type{flex:0 0 auto;font-family:var(--font-px);font-size:10.5px;color:#fff;background:#8E6FD0;
  padding:3px 8px;height:fit-content;border:2px solid var(--line);}
.err-item .wrong{color:#A93B2F;text-decoration:line-through;}
.err-item .right{color:#2E5C12;font-weight:800;}
.praise-box{padding:14px;background:#FFF8E4;border:4px dashed var(--gold-d);
  font-size:14.5px;font-weight:800;color:#6B4E12;line-height:1.85;margin-top:14px;}
.score-big{font-family:var(--font-px);font-size:34px;color:var(--gold-d);}

/* ------------------------- 成长记录 ------------------------- */
.report-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.stat-card{padding:16px;text-align:center;background:#fff;border:4px solid var(--line);
  box-shadow:var(--shadow-soft);}
.stat-card b{display:block;font-family:var(--font-px);font-size:28px;color:var(--redstone-d);}
.stat-card span{font-size:12.5px;font-weight:700;color:var(--ink-2);}
.badge-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;}
.badge{width:110px;padding:12px 8px;text-align:center;background:#F2EDE0;border:4px dashed #C9BFA8;
  color:var(--ink-3);font-size:11.5px;font-weight:800;line-height:1.5;}
.badge .b-ico{display:block;font-size:26px;margin-bottom:5px;filter:grayscale(1);opacity:.4;}
.badge.on{background:#FFF8E4;border-color:var(--gold-d);color:#6B4E12;border-style:solid;}
.badge.on .b-ico{filter:none;opacity:1;}

/* ------------------------- 纠错 ------------------------- */
.correct-wrap{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.correct-wrap textarea{
  flex:1 1 320px;min-height:100px;padding:14px;font-size:15.5px;line-height:1.8;resize:vertical;
  background:#fff;border:4px solid var(--line);border-radius:0;outline:none;
  box-shadow:inset 4px 4px 0 rgba(43,43,43,.05);
}
.correct-tools{display:flex;flex-direction:column;gap:10px;align-items:center;}
.result-area{margin-top:16px;}

/* ------------------------- 弹窗 / 提示 ------------------------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(20,28,38,.55);padding:16px;}
.modal[hidden]{display:none;}
.modal-card{width:min(520px,100%);max-height:88vh;overflow:auto;padding:22px;}
.modal-card h3{font-family:var(--font-px);font-size:17px;margin-bottom:16px;}
.field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:800;color:var(--ink-2);}
.field input[type=text],.field select{
  padding:11px 12px;background:#fff;border:3px solid var(--line);border-radius:0;
  font-size:14.5px;outline:none;max-width:100%;
  box-shadow:inset 3px 3px 0 rgba(43,43,43,.06);
}
.field input[type=range]{accent-color:var(--grass);}
.field-note{font-size:11.5px;color:var(--ink-3);line-height:1.6;}
.modal-actions{display:flex;gap:10px;margin-top:6px;}
.modal-status{margin-top:12px;font-size:12.5px;color:var(--ink-3);line-height:1.7;}

.toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
  width:max-content;max-width:92vw;}
.toast{padding:10px 18px;background:#2B2B2B;color:#fff;border:3px solid #161616;
  font-size:13.5px;font-weight:800;box-shadow:var(--shadow-hard);
  animation:fadeUp .2s steps(3,end);white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;}

.loading{position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;background:rgba(255,251,241,.86);font-weight:800;color:#4A5A68;}
.loading[hidden]{display:none;}
.px-loader{
  width:52px;height:52px;border:4px solid var(--line);position:relative;
  background:var(--grass);
  animation:pxspin 1.2s steps(8,end) infinite;
}
@keyframes pxspin{to{transform:rotate(360deg)}}

.fx{position:fixed;inset:0;pointer-events:none;z-index:95;overflow:hidden;}
.fx-emoji{position:absolute;font-size:24px;animation:fxUp 1.5s steps(10,end) forwards;}
@keyframes fxUp{0%{opacity:0;transform:translateY(0)}25%{opacity:1}100%{opacity:0;transform:translateY(-220px)}}

/* ------------------------- 响应式 ------------------------- */
@media (max-width:680px){
  .brand-txt small{display:none;}
  .hud-chip i{display:none;}
  .hero{flex-direction:column;text-align:center;}
  .grade-picker{justify-content:center;}
  .module-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .module{padding:12px 10px;}
  .m-ico{width:42px;height:42px;font-size:21px;}
  .module b{font-size:13.5px;}
  .module small{font-size:11px;}
  .head-actions{width:100%;}
  .px-select{flex:1 1 auto;max-width:none;}
  .msg{max-width:95%;}
  #main{padding-bottom:110px;}
}
@media (max-width:430px){
  .module-grid{grid-template-columns:1fr;}
}

/* ------------------------- 闯关地图 ------------------------- */
.quest-stage{border:4px solid var(--line);background:var(--panel);box-shadow:var(--shadow-soft);padding:16px;margin-top:16px;}
.quest-stage.is-done{border-color:var(--gold-d);background:#FFF8E4;}
.qs-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.qs-ico{font-size:24px;}
.qs-head b{font-family:var(--font-px);font-size:16px;}
.qs-story{font-size:12.5px;font-weight:700;color:var(--ink-2);flex:1 1 auto;}
.qs-flag{background:var(--gold);border:3px solid var(--line);padding:3px 8px;font-size:12px;font-weight:800;}
.quest-nodes{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));}
.qnode{display:block;text-align:left;padding:12px;border:4px solid var(--line);background:#fff;
  box-shadow:4px 4px 0 rgba(43,43,43,.55);transition:transform .08s;}
.qnode b{display:block;font-size:13.5px;margin:6px 0 4px;}
.qnode small{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.5;}
.qnode .qn-ico{font-size:22px;}
.qnode.open{cursor:pointer;background:linear-gradient(180deg,#FFFFFF,#F2FFE9);}
.qnode.open:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(43,43,43,.55);background:linear-gradient(180deg,#FFFFFF,#E8FFD6);}
.qnode.open:active{transform:translate(3px,3px);box-shadow:1px 1px 0 rgba(43,43,43,.55);}
.qnode.done{background:#FFF6D6;border-color:var(--gold-d);}
.qnode.done small{color:#8A6A12;}
.qnode.locked{background:#EFEAE0;border-color:#B9AFA0;box-shadow:none;cursor:not-allowed;opacity:.75;}
.qnode.locked .qn-ico{filter:grayscale(1);}
.st-grass{border-left:10px solid var(--grass);}
.st-forest{border-left:10px solid var(--wood);}
.st-mount{border-left:10px solid var(--stone-d);}
.st-star{border-left:10px solid var(--lapis);}

/* 首页闯关入口卡片 */
.m-quest{background:linear-gradient(180deg,#FFF6D6,#FFE9A8);}
.m-quest .m-ico{background:var(--gold);}

/* ------------------------- 闯关横幅 ------------------------- */
.quest-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;max-width:min(92vw,720px);
  background:#FFF8E4;border:4px solid var(--line);box-shadow:var(--shadow-hard);
  padding:10px 14px;font-size:13.5px;font-weight:800;}
.quest-banner .qb-ico{font-size:20px;}
.quest-banner .qb-txt{flex:1 1 auto;line-height:1.5;}
@media (max-width:680px){
  .quest-banner{bottom:12px;padding:8px 10px;font-size:12px;}
}