/* ==========================================================
   英语光之世界 · Minecraft 像素风样式表
   设计语言：方块、厚边框、MC 按钮斜面、快捷栏、进度解锁
   ========================================================== */

/* 像素主字体（自托管，相对路径 —— 子路径部署同样生效） */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/press-start-2p.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1b2330;
  --panel: #c6c6c6;
  --panel-hi: rgba(255,255,255,.85);
  --panel-lo: rgba(70,70,70,.55);
  --slot: #8b8b8b;
  --slot-dark: #373737;

  --grass: #57a639;    --grass-hi: #7fcf58;   --grass-lo: #3d7a26;
  --gold: #e8a820;     --gold-hi: #f6c445;    --gold-lo: #a87812;
  --cyan: #2ea8b8;     --cyan-hi: #3ec8d8;    --cyan-lo: #1e7a88;
  --red: #c74856;      --red-hi: #e07080;     --red-lo: #8e2f3c;
  --purple: #8a5cd6;   --purple-hi: #a680ee;  --purple-lo: #5f3da0;
  --gray: #7a7a7a;     --gray-hi: #9a9a9a;    --gray-lo: #555;
  --emerald: #3edc81;
  --sky1: #6db6f5;     --sky2: #bfe6ff;

  --font-pixel: 'Press Start 2P', 'ZCOOL QingKe HuangYou', monospace;
  --font-cn: 'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 100%);
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 175px; /* 给快捷栏和地面留空间 */
  -webkit-font-smoothing: antialiased;
}

/* ============ 像素渲染 ============ */
.px, [data-pixel] { display: block; image-rendering: pixelated; }
.px svg { width: 100%; height: 100%; display: block; }

/* ============ 天空 · 像素云 ============ */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cloud {
  position: absolute; width: 110px; height: 32px; background: #fff; opacity: .9;
  animation: drift linear infinite;
}
.cloud::before { content: ''; position: absolute; left: 22px; top: -16px; width: 46px; height: 20px; background: #fff; }
.cloud::after  { content: ''; position: absolute; right: -24px; top: 6px; width: 32px; height: 26px; background: #fff; }
.c1 { top: 9%;  animation-duration: 75s; transform: scale(1.15); }
.c2 { top: 24%; animation-duration: 105s; animation-delay: -40s; transform: scale(.8); opacity: .75; }
.c3 { top: 46%; animation-duration: 90s;  animation-delay: -70s; transform: scale(1.35); opacity: .6; }
.c4 { top: 68%; animation-duration: 120s; animation-delay: -15s; transform: scale(.65); opacity: .5; }
@keyframes drift { from { left: -180px; } to { left: 110vw; } }

/* ============ 草方块地面 ============ */
.ground {
  position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 1;
  background:
    linear-gradient(180deg, #6abe30 0 22px, transparent 22px),
    repeating-linear-gradient(90deg, #8a5a32 0 32px, #7b4f2b 32px 64px);
  border-top: 5px solid #79c943;
  box-shadow: 0 -6px 0 rgba(0,0,0,.12);
}

/* ============ 顶部 HUD ============ */
.hud {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: #26221d;
  border-bottom: 5px solid #000;
  box-shadow: inset 0 -4px 0 rgba(255,255,255,.06), 0 4px 0 rgba(0,0,0,.25);
}
.hud-left { display: flex; align-items: center; gap: 14px; }
.hud-avatar {
  width: 58px; height: 58px; padding: 6px; cursor: pointer;
  background: var(--slot-dark);
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.14), inset -3px -3px 0 rgba(0,0,0,.5);
  transition: transform .12s;
}
.hud-avatar:hover { transform: scale(1.08) rotate(-3deg); }
.hud-avatar:active { transform: scale(.94); }

.hud-title h1 {
  font-family: var(--font-cn);
  font-size: 26px; line-height: 1.05; font-weight: 400;
  color: #fff; text-shadow: 3px 3px 0 #000;
}
.hud-title .en {
  font-family: var(--font-pixel); font-size: 8px; color: var(--gold-hi);
  letter-spacing: 1px; text-shadow: 2px 2px 0 #000;
}
.hud-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.hud-level { display: flex; align-items: center; gap: 8px; }
.lv-tag {
  font-family: var(--font-pixel); font-size: 10px; color: #fff;
  text-shadow: 2px 2px 0 #000;
}
.lv-tag b { color: var(--gold-hi); }

.xp-bar {
  position: relative; width: 170px; height: 20px;
  background: #111;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.1);
}
.xp-fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, #7ee34f 0 8px, #5bc437 8px 16px);
  transition: width .5s ease;
}
.xp-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-pixel); font-size: 7px; color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.hud-emerald {
  display: flex; align-items: center; gap: 7px;
  background: var(--slot-dark); border: 3px solid #000;
  padding: 5px 12px 5px 7px;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.12);
}
.px-em { width: 22px; height: 22px; }
.hud-emerald b { font-family: var(--font-pixel); font-size: 11px; color: #7dffb2; text-shadow: 2px 2px 0 #000; }

.hud-grade {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--slot-dark); border: 3px solid #000;
  padding: 5px 10px;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.12);
}
.hud-grade select {
  background: transparent; border: none; outline: none; cursor: pointer;
  color: #fff; font-family: var(--font-cn); font-size: 15px; font-weight: bold;
}
.hud-grade select option { color: #222; }

/* ============ 舞台 ============ */
.stage {
  position: relative; z-index: 10;
  max-width: 1080px; margin: 0 auto;
  padding: 26px 18px 40px;
}
.screen { display: none; }
.screen.active { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.screen-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.screen-head h2 {
  font-family: var(--font-cn); font-weight: 400; font-size: 32px;
  color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.55);
}
.btn-back {
  font-family: var(--font-cn); font-size: 16px; cursor: pointer;
  color: #fff; background: var(--gray);
  border: 3px solid #000; padding: 10px 18px;
  box-shadow: inset 3px 3px 0 var(--gray-hi), inset -3px -3px 0 var(--gray-lo);
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
  transition: transform .1s;
}
.btn-back:hover { background: #8a8a8a; }
.btn-back:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 rgba(0,0,0,.3); }

/* ============ MC 面板 ============ */
.panel {
  background: var(--panel);
  border: 4px solid var(--ink);
  box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo), 0 8px 0 rgba(0,0,0,.22);
  padding: 22px;
  margin-bottom: 18px;
}
.panel-title { font-family: var(--font-cn); font-size: 20px; margin-bottom: 14px; color: #3a3a3a; }
.tip-line { font-size: 15px; line-height: 1.8; color: #444; margin-bottom: 16px; font-weight: 500; }
.tip-line b { color: #1d6b12; }
.en-sub { font-family: var(--font-pixel); font-size: 8px; color: #777; margin-left: 6px; }
.hidden { display: none !important; }

/* ============ 按钮 ============ */
.btn {
  font-family: var(--font-cn); font-size: 17px; cursor: pointer;
  color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.45);
  border: 3px solid #000;
  padding: 12px 22px;
  background: var(--gray);
  box-shadow: inset 3px 3px 0 var(--gray-hi), inset -3px -3px 0 var(--gray-lo), 0 5px 0 rgba(0,0,0,.3);
  transition: transform .08s, box-shadow .08s, filter .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: inset 3px 3px 0 var(--gray-hi), inset -3px -3px 0 var(--gray-lo), 0 7px 0 rgba(0,0,0,.3); }
.btn:active { transform: translateY(4px); box-shadow: inset 3px 3px 0 rgba(0,0,0,.3), 0 1px 0 rgba(0,0,0,.3); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-green  { background: var(--grass);  box-shadow: inset 3px 3px 0 var(--grass-hi),  inset -3px -3px 0 var(--grass-lo),  0 5px 0 rgba(0,0,0,.3); }
.btn-green:hover  { box-shadow: inset 3px 3px 0 var(--grass-hi),  inset -3px -3px 0 var(--grass-lo),  0 7px 0 rgba(0,0,0,.3); }
.btn-blue   { background: var(--cyan);   box-shadow: inset 3px 3px 0 var(--cyan-hi),   inset -3px -3px 0 var(--cyan-lo),   0 5px 0 rgba(0,0,0,.3); }
.btn-blue:hover   { box-shadow: inset 3px 3px 0 var(--cyan-hi),   inset -3px -3px 0 var(--cyan-lo),   0 7px 0 rgba(0,0,0,.3); }
.btn-gold   { background: var(--gold);   box-shadow: inset 3px 3px 0 var(--gold-hi),   inset -3px -3px 0 var(--gold-lo),   0 5px 0 rgba(0,0,0,.3); }
.btn-gold:hover   { box-shadow: inset 3px 3px 0 var(--gold-hi),   inset -3px -3px 0 var(--gold-lo),   0 7px 0 rgba(0,0,0,.3); }
.btn-red    { background: var(--red);    box-shadow: inset 3px 3px 0 var(--red-hi),    inset -3px -3px 0 var(--red-lo),    0 5px 0 rgba(0,0,0,.3); }
.btn-red:hover    { box-shadow: inset 3px 3px 0 var(--red-hi),    inset -3px -3px 0 var(--red-lo),    0 7px 0 rgba(0,0,0,.3); }
.btn-purple { background: var(--purple); box-shadow: inset 3px 3px 0 var(--purple-hi), inset -3px -3px 0 var(--purple-lo), 0 5px 0 rgba(0,0,0,.3); }
.btn-purple:hover { box-shadow: inset 3px 3px 0 var(--purple-hi), inset -3px -3px 0 var(--purple-lo), 0 7px 0 rgba(0,0,0,.3); }
.btn-gray   { background: var(--gray); }
.btn-big { font-size: 20px; padding: 16px 34px; width: 100%; max-width: 400px; display: flex; margin: 0 auto; }
.btn-sm { font-size: 14px; padding: 8px 14px; }
.btn-round { width: 52px; height: 52px; padding: 0; font-size: 21px; border-radius: 0; flex-shrink: 0; }
.btn.recording { animation: recPulse 1s infinite; background: #d62828; }
@keyframes recPulse {
  0%,100% { box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), 0 0 0 0 rgba(255,60,60,.6); }
  50%     { box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), 0 0 0 14px rgba(255,60,60,0); }
}
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.btn-row.center { justify-content: center; }

/* ============ 首页 Hero ============ */
.hero { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.hero-avatar { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.hero-glow {
  position: absolute; inset: -14px;
  background: radial-gradient(circle, rgba(255,225,90,.55) 0%, transparent 62%);
  animation: glowPulse 2.4s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } }
.px-hero { position: relative; width: 100%; height: 100%; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 10px 0 rgba(0,0,0,.2)); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.px-pet { position: absolute; right: -12px; bottom: -6px; width: 40px; height: 40px; animation: bob 2.2s ease-in-out infinite .4s; }

.hero-bubble {
  flex: 1; min-width: 270px;
  background: var(--panel);
  border: 4px solid var(--ink);
  box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo), 0 8px 0 rgba(0,0,0,.22);
  padding: 22px 26px; position: relative;
}
.hero-bubble::before {
  content: ''; position: absolute; left: -22px; top: 44px;
  width: 0; height: 0;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
  border-bottom: 12px solid #fff;
}
.hero-bubble h2 { font-family: var(--font-cn); font-weight: 400; font-size: 26px; margin-bottom: 8px; color: #2c2c2c; }
.hero-bubble p { font-size: 15.5px; color: #555; font-weight: 600; line-height: 1.6; }

/* ============ 任务面板 ============ */
.quest-title {
  font-family: var(--font-cn); font-size: 24px; color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.5); margin-bottom: 16px;
}
.quest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-bottom: 28px; }
.quest {
  position: relative; cursor: pointer; text-align: left;
  border: 4px solid rgba(0,0,0,.65);
  padding: 22px 20px 20px;
  color: #fff;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: inset 4px 4px 0 rgba(255,255,255,.28), inset -4px -4px 0 rgba(0,0,0,.3), 0 8px 0 rgba(0,0,0,.3);
  transition: transform .12s, box-shadow .12s, filter .15s;
  font-family: var(--font-body);
}
.quest:hover { transform: translateY(-7px); filter: brightness(1.12); box-shadow: inset 4px 4px 0 rgba(255,255,255,.28), inset -4px -4px 0 rgba(0,0,0,.3), 0 14px 0 rgba(0,0,0,.3); }
.quest:active { transform: translateY(2px); box-shadow: inset 4px 4px 0 rgba(0,0,0,.3), 0 3px 0 rgba(0,0,0,.3); }

.q-listen   { background: var(--grass); }
.q-written  { background: var(--gold); }
.q-reading  { background: var(--cyan); }
.q-essay    { background: var(--red); }
.q-speaking { background: var(--purple); }
.q-translate{ background: var(--gray); }

.q-ico { font-size: 46px; line-height: 1.2; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
.q-name { font-family: var(--font-cn); font-size: 24px; font-weight: 400; text-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.q-en { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1px; opacity: .85; margin-top: -2px; }
.q-desc { font-size: 13px; font-weight: 600; opacity: .92; margin-top: 6px; line-height: 1.5; }

/* ============ 进度板 ============ */
.adv-board {
  background: var(--panel);
  border: 4px solid var(--ink);
  box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo), 0 8px 0 rgba(0,0,0,.22);
  padding: 20px;
}
.adv-head { font-family: var(--font-cn); font-size: 21px; color: #3a3a3a; margin-bottom: 14px; }
.adv-list { display: flex; gap: 10px; flex-wrap: wrap; }
.adv {
  display: flex; align-items: center; gap: 9px;
  background: var(--slot-dark); border: 3px solid #000;
  padding: 9px 15px;
  color: #ffd83d; font-weight: 700; font-size: 13.5px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.14);
}
.adv .adv-ico { font-size: 21px; }
.adv:not(.locked) { animation: advPop .45s cubic-bezier(.34,1.56,.64,1); }
.adv.locked { filter: grayscale(1); opacity: .45; color: #bbb; }
@keyframes advPop { 0% { transform: scale(.5) rotate(-8deg); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* 进度解锁 toast（右上角滑入） */
#adv-toasts { position: fixed; top: 86px; right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.adv-toast {
  display: flex; align-items: center; gap: 12px;
  background: #21201c; border: 4px solid #000;
  box-shadow: inset 0 0 0 3px #6b5a2a, 0 6px 0 rgba(0,0,0,.4);
  padding: 12px 20px;
  animation: toastIn .4s cubic-bezier(.22,1,.36,1);
  max-width: 320px;
}
.adv-toast .t1 { display: block; font-family: var(--font-cn); color: var(--gold-hi); font-size: 14px; }
.adv-toast .t2 { display: block; color: #fff; font-size: 15px; font-weight: 700; margin-top: 3px; }
.adv-toast .t-ico { font-size: 30px; }
.adv-toast.out { animation: toastOut .35s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(90px); } }

/* ============ 通用设置面板 ============ */
.level-pick, .topic-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.lv-btn, .topic-btn {
  font-family: var(--font-cn); font-size: 16px; cursor: pointer;
  color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.4);
  background: var(--gray); border: 3px solid #000;
  padding: 11px 20px;
  box-shadow: inset 3px 3px 0 var(--gray-hi), inset -3px -3px 0 var(--gray-lo);
  transition: transform .1s, filter .12s;
}
.lv-btn:hover, .topic-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.lv-btn.active, .topic-btn.active { background: var(--grass); box-shadow: inset 3px 3px 0 var(--grass-hi), inset -3px -3px 0 var(--grass-lo); }

/* ============ 音频面板 ============ */
.audio-panel { text-align: center; }
.audio-title { font-family: var(--font-cn); font-size: 23px; color: #2c2c2c; margin-bottom: 14px; }
.audio-controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.replay-count { font-family: var(--font-cn); font-size: 15px; color: #555; background: var(--slot-dark); color: #ffd83d; padding: 8px 14px; border: 3px solid #000; }
.audio-hint { margin-top: 14px; font-size: 13.5px; color: #777; font-weight: 600; }

/* ============ 题目卡 ============ */
.q-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 18px; }
.q-card {
  background: var(--panel);
  border: 4px solid var(--ink);
  box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo);
  padding: 18px 20px;
}
.q-num {
  display: inline-block; font-family: var(--font-pixel); font-size: 9px;
  background: var(--slot-dark); color: var(--gold-hi);
  border: 2px solid #000; padding: 5px 10px; margin-bottom: 12px;
}
.q-text { font-family: var(--font-cn); font-size: 20px; color: #262626; line-height: 1.55; margin-bottom: 4px; }
.q-cn { font-size: 13.5px; color: #777; font-weight: 600; margin-bottom: 12px; }
.q-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.opt-btn {
  font-family: var(--font-cn); font-size: 17px; cursor: pointer;
  background: var(--slot); color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  border: 3px solid #000;
  padding: 11px 14px; text-align: left;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.35);
  transition: transform .1s, filter .12s;
}
.opt-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.opt-btn.selected { background: var(--grass); box-shadow: inset 3px 3px 0 var(--grass-hi), inset -3px -3px 0 var(--grass-lo); }

.dict-input {
  width: 100%; margin-top: 4px;
  font-family: var(--font-cn); font-size: 19px;
  background: #e8e8e8; border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.18);
  padding: 12px 16px; outline: none; color: #262626;
}
.dict-input:focus { background: #fff; }

/* 连词成句 */
.order-zone { display: flex; flex-direction: column; gap: 12px; }
.order-line {
  min-height: 54px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--slot-dark); border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.4);
  padding: 8px 10px;
}
.order-line .placeholder { color: #8b8b8b; font-size: 14px; font-weight: 600; padding: 0 6px; }
.word-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.word-chip {
  font-family: var(--font-cn); font-size: 16.5px; cursor: pointer;
  background: #b8823c; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  border: 3px solid #000;
  padding: 8px 14px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.3), inset -2px -2px 0 rgba(0,0,0,.3);
  transition: transform .1s, filter .12s, opacity .15s;
}
.word-chip:hover { transform: translateY(-2px); filter: brightness(1.15); }
.word-chip.used { opacity: .25; pointer-events: none; }
.word-chip.in-line { background: var(--grass); }

/* 改错题 */
.fix-sentence { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.w-btn {
  font-family: var(--font-cn); font-size: 18px; cursor: pointer;
  background: #e0e0e0; color: #333;
  border: 3px solid #000;
  padding: 7px 12px;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 rgba(0,0,0,.2);
}
.w-btn.picked { background: var(--gold); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); }
.fix-label { font-size: 13.5px; color: #777; font-weight: 700; margin: 4px 0 10px; }

/* ============ 结果面板 ============ */
.score-hero {
  background: var(--gold);
  border: 4px solid #000;
  box-shadow: inset 4px 4px 0 var(--gold-hi), inset -4px -4px 0 var(--gold-lo), 0 8px 0 rgba(0,0,0,.25);
  padding: 26px 20px; text-align: center; margin-bottom: 16px;
}
.score-num { font-family: var(--font-pixel); font-size: 44px; color: #fff; text-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.score-num small { font-size: 16px; }
.stars-row { font-size: 34px; letter-spacing: 6px; margin: 10px 0; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.2)); }
.res-comment { font-family: var(--font-cn); font-size: 18px; color: #4a3200; line-height: 1.7; }
.res-sub { font-size: 14px; color: #6b4d00; font-weight: 700; margin-top: 6px; }

.res-item {
  background: var(--panel);
  border: 4px solid var(--ink);
  border-left: 10px solid var(--grass);
  box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo);
  padding: 14px 18px; margin-bottom: 12px;
}
.res-item.wrong { border-left-color: var(--red); }
.res-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #333; }
.res-tag {
  font-size: 12px; font-weight: 800; color: #fff;
  border: 2px solid #000; padding: 2px 9px;
  background: var(--grass); text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.res-item.wrong .res-tag { background: var(--red); }
.res-ans-ok { color: #1d6b12; }
.res-ans-no { color: #a02830; }
.res-explain {
  font-size: 14px; font-weight: 600; color: #555; line-height: 1.7;
  background: #e9e9e9; border: 2px solid #999; padding: 10px 14px;
}

/* 奥特曼老师说 */
.teacher-say {
  display: flex; gap: 14px; align-items: flex-start;
  background: #26221d;
  border: 4px solid #000;
  box-shadow: inset 0 0 0 3px rgba(246,196,69,.4), 0 6px 0 rgba(0,0,0,.35);
  padding: 18px 20px; margin: 16px 0;
}
.ts-avatar { width: 56px; height: 56px; flex-shrink: 0; }
.ts-text { color: #ffe9b0; font-size: 15px; line-height: 1.8; font-weight: 600; }
.ts-text .ts-name { display: block; font-family: var(--font-cn); color: var(--gold-hi); font-size: 16px; margin-bottom: 4px; }

/* ============ 阅读 ============ */
.passage-panel .audio-controls { margin-bottom: 16px; }
.passage {
  font-family: var(--font-cn); font-size: 19px; line-height: 2; color: #2c2c2c;
  background: #efefef; border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.1);
  padding: 18px 20px; margin-bottom: 12px;
  white-space: pre-wrap;
}
.voc {
  background: var(--cyan); color: #fff; cursor: pointer;
  padding: 1px 7px; margin: 0 2px;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 var(--cyan-hi), inset -2px -2px 0 var(--cyan-lo);
  font-weight: 700;
}
.voc:hover { filter: brightness(1.15); }
.passage-cn {
  font-size: 15px; line-height: 1.9; color: #666;
  background: #f4f4f4; border: 3px dashed #999;
  padding: 14px 18px; margin-bottom: 12px; font-weight: 600;
}
.word-row { display: flex; gap: 9px; flex-wrap: wrap; }
.vword-chip {
  font-family: var(--font-cn); font-size: 15px; cursor: pointer;
  background: var(--cyan); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  border: 3px solid #000; padding: 7px 13px;
  box-shadow: inset 2px 2px 0 var(--cyan-hi), inset -2px -2px 0 var(--cyan-lo);
}
.vword-chip:hover { filter: brightness(1.15); transform: translateY(-2px); }
.voc-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--slot-dark); border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.14);
  padding: 12px 18px; margin-top: 14px;
  animation: fadeIn .25s ease;
}
.vc-emoji { font-size: 28px; }
.vc-word { font-family: var(--font-cn); font-size: 21px; color: #fff; }
.vc-word span { font-size: 14px; color: #9fdfe8; margin-left: 8px; }
.vc-cn { font-size: 14px; color: #ffd83d; font-weight: 700; margin-top: 3px; }
.vc-body { flex: 1; }

.aloud-panel .aloud-sentence {
  font-family: var(--font-cn); font-size: 21px; color: #262626;
  background: #efefef; border: 3px solid #000;
  padding: 14px 18px; margin: 12px 0 4px; line-height: 1.6;
}
.aloud-cn { font-size: 13.5px; color: #888; font-weight: 600; margin-bottom: 4px; }

/* ============ 作文 ============ */
.essay-topic-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.essay-topic-title b { font-family: var(--font-cn); font-size: 28px; color: #7a2c38; }
.essay-topic-title span { font-size: 16px; color: #777; font-weight: 700; }
.essay-req { font-size: 15px; color: #555; line-height: 1.8; background: #efefef; border: 3px solid #000; padding: 12px 16px; font-weight: 600; }

.essay-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: #efefef; border: 3px solid #000;
  padding: 14px 16px; margin-bottom: 10px;
}
.step-badge {
  flex-shrink: 0; font-family: var(--font-cn); font-size: 15px;
  background: var(--red); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  border: 2px solid #000; padding: 4px 11px;
}
.step-body { flex: 1; }
.step-hint { font-size: 14px; color: #555; font-weight: 600; margin-bottom: 8px; line-height: 1.6; }
.starter-chip {
  font-family: var(--font-cn); font-size: 14.5px; cursor: pointer;
  background: var(--cyan); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  border: 2px solid #000; padding: 6px 11px;
  box-shadow: inset 2px 2px 0 var(--cyan-hi);
}
.starter-chip:hover { filter: brightness(1.15); }

.uword-chip {
  font-family: var(--font-cn); font-size: 15px; cursor: pointer;
  background: var(--purple); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  border: 3px solid #000; padding: 7px 13px;
  box-shadow: inset 2px 2px 0 var(--purple-hi), inset -2px -2px 0 var(--purple-lo);
}
.uword-chip:hover { filter: brightness(1.15); transform: translateY(-2px); }

#essay-input {
  width: 100%; margin-top: 16px;
  font-family: var(--font-cn); font-size: 19px; line-height: 1.8;
  background: #efefef; border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.12);
  padding: 16px 18px; outline: none; resize: vertical; color: #2c2c2c;
}
#essay-input:focus { background: #fff; }
.essay-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; flex-wrap: wrap; gap: 10px; }
.essay-meta span { font-family: var(--font-cn); font-size: 15px; color: #555; }

/* 作文批改结果 */
.strength-item, .fix-item { display: flex; gap: 10px; margin-bottom: 10px; font-size: 14.5px; line-height: 1.7; font-weight: 600; }
.strength-item { color: #1d6b12; }
.fix-item { color: #7a4a10; }
.upg-item { background: #efefef; border: 3px solid #000; padding: 12px 16px; margin-bottom: 10px; }
.upg-orig { font-size: 14px; color: #999; text-decoration: line-through; }
.upg-better { font-family: var(--font-cn); font-size: 17px; color: #1d6b12; margin-top: 4px; }
.model-panel { margin-top: 14px; }
.model-en { font-family: var(--font-cn); font-size: 17px; line-height: 1.8; color: #2c2c2c; background: #efefef; border: 3px solid #000; padding: 14px 16px; margin-bottom: 8px; }
.model-cn { font-size: 13.5px; color: #888; line-height: 1.7; font-weight: 600; }

/* ============ 说话 ============ */
.sub-tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.sub-tab {
  font-family: var(--font-cn); font-size: 17px; cursor: pointer;
  color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.4);
  background: var(--gray); border: 3px solid #000;
  padding: 11px 22px;
  box-shadow: inset 3px 3px 0 var(--gray-hi), inset -3px -3px 0 var(--gray-lo);
}
.sub-tab.active { background: var(--purple); box-shadow: inset 3px 3px 0 var(--purple-hi), inset -3px -3px 0 var(--purple-lo); }
.sub-tab:hover { filter: brightness(1.12); }

.sentence-bank { display: flex; gap: 9px; flex-wrap: wrap; }
.sent-chip {
  font-family: var(--font-cn); font-size: 14px; cursor: pointer;
  background: var(--slot); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  border: 3px solid #000; padding: 8px 13px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.3);
}
.sent-chip.active { background: var(--purple); box-shadow: inset 2px 2px 0 var(--purple-hi); }
.sent-chip:hover { filter: brightness(1.15); }

.talk-panel { text-align: center; }
.talk-sentence {
  font-family: var(--font-cn); font-size: 30px; color: #262626;
  margin: 10px 0 20px; line-height: 1.5;
}
.record-status { font-family: var(--font-cn); font-size: 15px; color: #666; margin-top: 12px; font-weight: 600; }
.record-status.listening { color: #c74856; }
.wave { display: none; justify-content: center; align-items: flex-end; gap: 5px; height: 40px; margin-top: 12px; }
.wave.on { display: flex; }
.wave span { width: 8px; height: 10px; background: var(--red); animation: waveUp .8s ease-in-out infinite; }
.wave span:nth-child(2) { animation-delay: .1s; } .wave span:nth-child(3) { animation-delay: .2s; }
.wave span:nth-child(4) { animation-delay: .3s; } .wave span:nth-child(5) { animation-delay: .4s; }
.wave span:nth-child(6) { animation-delay: .5s; } .wave span:nth-child(7) { animation-delay: .6s; }
.wave span:nth-child(8) { animation-delay: .7s; }
@keyframes waveUp { 0%,100% { height: 8px; } 50% { height: 38px; } }
.hear-result {
  margin-top: 14px; font-family: var(--font-cn); font-size: 16px; color: #555;
  background: #efefef; border: 3px dashed #999; padding: 10px 16px;
}
.hear-result b { color: #2ea8b8; font-size: 18px; }

.mini-fb { margin-top: 16px; text-align: left; }

/* 情景对话 */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.scene-card {
  cursor: pointer; font-size: 42px;
  background: var(--slot); border: 4px solid #000;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.35), 0 6px 0 rgba(0,0,0,.25);
  padding: 22px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .12s, filter .12s;
}
.scene-card span { font-family: var(--font-cn); font-size: 17px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.scene-card:hover { transform: translateY(-5px); filter: brightness(1.15); }

.chat-wrap {
  background: var(--panel);
  border: 4px solid var(--ink);
  box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo);
  display: flex; flex-direction: column;
  height: 64vh; min-height: 440px; overflow: hidden;
}
.chat-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--slot-dark); border-bottom: 4px solid #000;
  padding: 12px 18px;
}
.chat-role { font-family: var(--font-cn); font-size: 17px; color: var(--gold-hi); text-shadow: 1px 1px 0 #000; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: #d9d9d9; }

.msg { display: flex; gap: 10px; max-width: 88%; animation: fadeIn .28s ease; }
.msg.tutor { align-self: flex-start; }
.msg.student { align-self: flex-end; flex-direction: row-reverse; }
.msg-ava {
  width: 46px; height: 46px; flex-shrink: 0;
  background: var(--slot-dark); border: 3px solid #000;
  display: grid; place-items: center; font-size: 22px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.14);
}
.msg.student .msg-ava { background: #7a5636; }
.msg-bubble {
  background: #fff; border: 3px solid #000;
  box-shadow: inset 2px 2px 0 #fff, 3px 3px 0 rgba(0,0,0,.18);
  padding: 12px 16px; max-width: 100%;
}
.msg.student .msg-bubble { background: #cfe9b8; }
.msg-en { font-family: var(--font-cn); font-size: 18px; color: #222; margin-bottom: 4px; line-height: 1.5; }
.msg-cn { font-size: 13px; color: #888; font-weight: 600; line-height: 1.6; }

.m-line { font-size: 13.5px; font-weight: 700; line-height: 1.65; border-left: 5px solid; padding: 6px 11px; margin-top: 8px; }
.m-line.empathy { border-color: var(--cyan); background: #e8f6fa; color: #1a6d7a; }
.m-line.praise { border-color: var(--grass); background: #edf8e4; color: #2c6b12; }
.m-line.fix { border-color: var(--gold); background: #fdf3dd; color: #8a6410; }
.m-line.fix b { color: #1d6b12; }
.m-line.enc { border-color: var(--red); background: #fceef0; color: #a03440; }

.msg-tools { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.msg-tool {
  cursor: pointer; font-family: var(--font-cn); font-size: 12.5px;
  background: var(--slot); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  border: 2px solid #000; padding: 5px 11px;
}
.msg-tool:hover { filter: brightness(1.2); }

.typing { display: flex; gap: 5px; padding: 6px 2px; }
.typing span { width: 9px; height: 9px; background: var(--slot-dark); animation: typeB 1.1s infinite; }
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typeB { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-7px); opacity: 1; } }

.chat-words { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: #cfcfcf; border-top: 3px solid #000; }
.cword-chip {
  font-family: var(--font-cn); font-size: 12.5px;
  background: var(--slot-dark); color: #ffd83d;
  border: 2px solid #000; padding: 4px 11px; cursor: pointer;
}
.cword-chip b { color: #fff; font-size: 13.5px; }

.chat-input-bar { display: flex; gap: 9px; padding: 12px 14px; background: #cfcfcf; border-top: 3px solid #000; }
.chat-input-bar input {
  flex: 1; min-width: 0;
  font-family: var(--font-cn); font-size: 16px;
  background: #efefef; border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.15);
  padding: 11px 15px; outline: none; color: #262626;
}
.chat-input-bar input:focus { background: #fff; }

/* ============ 翻译 ============ */
.t-panel .dir-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.dir-btn {
  flex: 1; min-width: 170px; cursor: pointer;
  font-family: var(--font-cn); font-size: 15.5px;
  color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  background: var(--gray); border: 3px solid #000;
  padding: 12px 16px;
  box-shadow: inset 3px 3px 0 var(--gray-hi), inset -3px -3px 0 var(--gray-lo);
}
.dir-btn.active { background: var(--grass); box-shadow: inset 3px 3px 0 var(--grass-hi), inset -3px -3px 0 var(--grass-lo); }
#trans-input, .word-input {
  width: 100%;
  font-family: var(--font-cn); font-size: 19px;
  background: #efefef; border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.12);
  padding: 14px 16px; outline: none; color: #2c2c2c; resize: vertical;
}
.word-input { font-size: 23px; margin-bottom: 4px; }
#trans-input:focus, .word-input:focus { background: #fff; }

.trans-result-box {
  background: #efefef; border: 3px solid #000;
  padding: 18px 20px; margin: 14px 0;
}
.trans-en { font-family: var(--font-cn); font-size: 25px; color: #1a6d7a; line-height: 1.5; }
.trans-read { font-size: 14px; color: #a03440; font-weight: 700; margin-top: 8px; }
.trans-src { font-size: 13px; color: #999; font-weight: 600; margin-bottom: 8px; }
.bd-row { display: flex; gap: 12px; flex-wrap: wrap; background: #fff; border: 2px solid #000; padding: 8px 13px; margin-bottom: 7px; }
.bd-part { font-family: var(--font-cn); color: #1a6d7a; font-weight: 700; min-width: 90px; }
.bd-mean { font-size: 14px; color: #555; font-weight: 600; }

.wordcard { text-align: center; }
.wordcard-emoji { font-size: 60px; margin-bottom: 8px; }
.wordcard-word { font-family: var(--font-cn); font-size: 42px; color: #262626; }
.wordcard-phon { font-size: 17px; color: #5f3da0; font-weight: 700; margin: 6px 0; }
.wordcard-cn { font-family: var(--font-cn); font-size: 22px; color: #1d6b12; margin: 8px 0 4px; }
.wordcard-pos { display: inline-block; font-size: 12.5px; background: #efefef; border: 2px solid #999; color: #666; font-weight: 700; padding: 3px 11px; margin: 6px 0; }
.wordcard-read { font-size: 14px; color: #a03440; font-weight: 700; }
.wc-ex { background: #efefef; border: 2px solid #000; padding: 11px 15px; margin-bottom: 9px; text-align: left; }
.wc-ex-en { font-family: var(--font-cn); font-size: 17px; color: #1a6d7a; margin-bottom: 3px; }
.wc-ex-cn { font-size: 13px; color: #888; font-weight: 600; }

/* ============ 升级庆祝 ============ */
.levelup {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(10, 12, 20, .78);
  animation: fadeIn .3s;
}
.levelup-panel {
  text-align: center;
  background: #1e1a14; border: 5px solid var(--gold-hi);
  box-shadow: inset 0 0 0 4px #000, 0 0 60px rgba(246,196,69,.35);
  padding: 44px 66px;
  animation: luPop .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes luPop { 0% { transform: scale(.4) rotate(-6deg); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.lu-title { font-family: var(--font-pixel); font-size: 34px; color: var(--gold-hi); text-shadow: 4px 4px 0 #000; animation: luBlink 1s step-end infinite; }
@keyframes luBlink { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.lu-avatar { width: 130px; height: 130px; margin: 22px auto 14px; animation: bob 1.1s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(255,225,90,.75)); }
.lu-text { font-family: var(--font-cn); font-size: 24px; color: #fff; text-shadow: 2px 2px 0 #000; }
.lu-text b { color: var(--gold-hi); }
.lu-sub { font-size: 15px; color: #ffd83d; margin-top: 8px; font-weight: 700; }
.orb-fly {
  position: absolute; width: 14px; height: 14px;
  background: #7ee34f; border: 2px solid #14532d;
  animation: orbUp 1.3s ease-out forwards;
}
@keyframes orbUp { to { transform: translateY(-170px) scale(.2); opacity: 0; } }

/* ============ 加载 ============ */
.loading { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(20,24,34,.72); }
.loading-box { text-align: center; }
.loading-avatar { width: 96px; height: 96px; margin: 0 auto 16px; animation: bob 1.2s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255,225,90,.6)); }
.loading-text { font-family: var(--font-cn); font-size: 19px; color: #fff; text-shadow: 2px 2px 0 #000; margin-bottom: 16px; }
.loading-bar {
  width: 240px; height: 20px; margin: 0 auto;
  background: #111; border: 3px solid #000;
  position: relative; overflow: hidden;
}
.loading-bar i {
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: repeating-linear-gradient(90deg, #7ee34f 0 8px, #5bc437 8px 16px);
  animation: loadSlide 1.1s linear infinite;
}
@keyframes loadSlide { to { left: 100%; } }

/* ============ Toast ============ */
.toast {
  position: fixed; bottom: 150px; left: 50%; transform: translateX(-50%);
  z-index: 99;
  background: #21201c; color: #ffd83d;
  border: 3px solid #000; box-shadow: inset 0 0 0 2px #6b5a2a, 0 6px 0 rgba(0,0,0,.4);
  padding: 13px 26px;
  font-family: var(--font-cn); font-size: 15px;
  animation: toastB .3s cubic-bezier(.22,1,.36,1);
  max-width: 86vw; text-align: center;
}
@keyframes toastB { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============ 快捷栏 ============ */
.hotbar {
  position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  display: flex; gap: 4px;
  background: rgba(20,20,20,.82);
  border: 4px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.12), 0 5px 0 rgba(0,0,0,.35);
  padding: 5px;
}
.slot {
  width: 52px; height: 52px; cursor: pointer;
  background: var(--slot);
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.4);
  font-size: 25px;
  display: grid; place-items: center;
  transition: transform .1s, filter .12s;
}
.slot:hover { transform: translateY(-4px); filter: brightness(1.2); }
.slot.active { box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.4), 0 0 0 4px #fff; }

/* ============ 闯关地图（难度等级） ============ */
.tier-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tier-card {
  position: relative; cursor: pointer; text-align: center;
  background: var(--slot); color: #fff;
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.35);
  padding: 14px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-body);
  transition: transform .1s, filter .12s;
}
.tier-card:hover:not(.locked) { transform: translateY(-3px); filter: brightness(1.15); }
.tier-card.active { background: var(--grass); box-shadow: inset 3px 3px 0 var(--grass-hi), inset -3px -3px 0 var(--grass-lo), 0 0 0 4px #fff; }
.tier-card.locked { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
.tier-ico { font-size: 30px; line-height: 1.2; }
.tier-name { font-family: var(--font-cn); font-size: 16px; text-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.tier-desc { font-size: 10.5px; font-weight: 600; opacity: .9; line-height: 1.4; }
.tier-clear, .tier-next {
  font-size: 10px; font-weight: 800;
  background: var(--slot-dark); border: 2px solid #000;
  padding: 2px 8px; margin-top: 2px;
}
.tier-clear { color: #7dffb2; }
.tier-next { color: var(--gold-hi); animation: luBlink 1.2s step-end infinite; }

/* 任务卡上的关卡徽章 */
.q-tier {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  font-family: var(--font-pixel); font-size: 8px;
  background: rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.5);
  padding: 3px 7px; color: #fff; letter-spacing: 0;
}

/* 成就板可点击 */
.adv-board { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.adv-board:hover { transform: translateY(-2px); box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo), 0 12px 0 rgba(0,0,0,.25); }
.adv-hint { float: right; font-size: 12px; color: #8a7a4a; font-weight: 700; }

/* ============ 成就殿堂 ============ */
.gallery {
  position: fixed; inset: 0; z-index: 85;
  display: grid; place-items: center;
  background: rgba(15, 18, 28, .78);
  animation: fadeIn .25s ease;
  padding: 20px;
}
.gallery-panel {
  width: min(720px, 94vw); max-height: 84vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 4px solid var(--ink);
  box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo), 0 12px 0 rgba(0,0,0,.35);
  animation: luPop .4s cubic-bezier(.34,1.56,.64,1);
}
.gallery-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-cn); font-size: 22px; color: #3a3a3a;
  padding: 16px 20px; border-bottom: 3px solid #999;
}
.gallery-head b { font-size: 14px; color: #1d6b12; }
.gallery-list { overflow-y: auto; padding: 16px 18px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.gal-item {
  display: flex; align-items: center; gap: 14px;
  background: #efefef; border: 3px solid #000;
  padding: 12px 16px;
}
.gal-item.locked { filter: grayscale(1); opacity: .55; }
.gal-ico { font-size: 32px; width: 46px; text-align: center; flex-shrink: 0; }
.gal-body { flex: 1; }
.gal-name { font-family: var(--font-cn); font-size: 18px; color: #262626; }
.gal-desc { font-size: 12.5px; color: #777; font-weight: 600; margin-top: 2px; }
.gal-reward { font-size: 12px; font-weight: 800; color: #1d6b12; margin-top: 4px; }
.gal-state { font-size: 22px; color: #1d6b12; font-weight: 900; flex-shrink: 0; }
.gal-item.locked .gal-state { color: #aaa; }

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #3a3a3a; }
::-webkit-scrollbar-thumb { background: var(--grass); border: 3px solid #1b2330; }
::selection { background: #7ee34f; color: #10300a; }

/* ============ 响应式 ============ */
@media (max-width: 680px) {
  .hud { padding: 10px 12px; }
  .hud-title h1 { font-size: 20px; }
  .hud-title .en { font-size: 6px; }
  .hud-avatar { width: 46px; height: 46px; }
  .xp-bar { width: 120px; }
  .screen-head h2 { font-size: 25px; }
  .hero-avatar { width: 110px; height: 110px; }
  .hero-bubble h2 { font-size: 20px; }
  .quest-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .quest { padding: 16px 14px; }
  .q-ico { font-size: 34px; }
  .q-name { font-size: 19px; }
  .q-desc { font-size: 11.5px; }
  .talk-sentence { font-size: 23px; }
  .passage { font-size: 17px; }
  .score-num { font-size: 32px; }
  .lu-title { font-size: 22px; }
  .levelup-panel { padding: 30px 34px; }
  .lu-avatar { width: 96px; height: 96px; }
  .slot { width: 42px; height: 42px; font-size: 20px; }
  .hotbar { bottom: 70px; }
  body { padding-bottom: 150px; }
  .ground { height: 52px; }
  .msg { max-width: 94%; }
  .msg-ava { width: 38px; height: 38px; font-size: 18px; }
  .btn-big { font-size: 17px; padding: 14px 22px; }
  #adv-toasts { top: auto; bottom: 160px; right: 10px; }
}
@media (max-width: 420px) {
  .quest-grid { grid-template-columns: 1fr; }
  .hud-right { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}