/* ============================================================
   CET-6 通关大师 · 韩系精致公主风  styles.css
   ============================================================ */

:root{
  --pink:#ff9ec7; --pink-light:#ffd9ec; --pink-deep:#ff7bb5;
  --blue:#a8d8f0; --blue-light:#d8effa;
  --mint:#b2eadb; --mint-light:#e3f8f1;
  --gold:#ffd166; --gold-deep:#f5b93c;
  --lavender:#d7c8f5; --lavender-light:#efe9fb;
  --cream:#fffaf5;
  --ink:#7a6b80; --ink-strong:#4a3a4d; --ink-soft:#a99aad;
  --card:#ffffff; --glass:rgba(255,255,255,.72);
  --shadow:0 12px 30px rgba(255,158,199,.22), 0 4px 10px rgba(180,140,170,.12);
  --shadow-sm:0 4px 14px rgba(255,158,199,.18);
  --radius:24px;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}

html,body{height:100%;}
body{
  font-family:var(--sans);
  color:var(--ink-strong);
  background:
    radial-gradient(circle at 20% 12%, rgba(255,158,199,.18) 0 2px, transparent 2.5px),
    radial-gradient(circle at 72% 28%, rgba(168,216,240,.20) 0 2px, transparent 2.5px),
    radial-gradient(circle at 40% 68%, rgba(178,234,219,.18) 0 2px, transparent 2.5px),
    radial-gradient(circle at 88% 80%, rgba(255,209,102,.16) 0 2px, transparent 2.5px),
    linear-gradient(160deg,#fff3f8 0%,#f3f7ff 45%,#effbf7 100%);
  background-size:220px 220px,260px 260px,300px 300px,280px 280px,auto;
  background-attachment:fixed;
  display:flex; justify-content:center;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#app{
  width:100%; max-width:480px; min-height:100vh; min-height:100dvh;
  position:relative;
  padding:
    calc(env(safe-area-inset-top,0px) + 16px)
    16px
    calc(env(safe-area-inset-bottom,0px) + 16px);
}

/* ---------- 屏幕切换 ---------- */
.screen{display:none; flex-direction:column; gap:16px; animation:screenIn .45s cubic-bezier(.22,.9,.36,1);}
.screen.active{display:flex;}
@keyframes screenIn{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:none;}}

/* ---------- 通用按钮 ---------- */
.btn{
  border:none; cursor:pointer; font-family:var(--sans);
  border-radius:999px; font-weight:700; font-size:16px;
  padding:14px 22px; transition:transform .18s ease, box-shadow .18s ease;
  letter-spacing:.5px;
}
.btn:active{transform:scale(.96);}
.btn-primary{
  background:linear-gradient(135deg,var(--pink) 0%,var(--pink-deep) 100%);
  color:#fff; box-shadow:0 8px 20px rgba(255,123,181,.4);
}
.btn-primary:hover{box-shadow:0 10px 26px rgba(255,123,181,.5); transform:translateY(-1px);}
.btn-ghost{
  background:var(--glass); color:var(--pink-deep);
  border:1.5px solid rgba(255,158,199,.5);
  backdrop-filter:blur(8px);
}
.btn.big{width:100%; font-size:18px; padding:16px;}
.btn-icon{
  width:40px; height:40px; border-radius:14px; border:none; cursor:pointer;
  background:var(--glass); color:var(--ink-strong); font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); box-shadow:var(--shadow-sm);
}

/* ---------- 首页 ---------- */
#screen-home{align-items:stretch; min-height:calc(100vh - 32px);}
.home-top{display:flex; justify-content:space-between; align-items:flex-start;}
.brand{display:flex; gap:12px; align-items:center;}
.brand-logo{
  width:46px; height:46px; border-radius:16px; font-size:24px;
  background:linear-gradient(135deg,var(--pink-light),#fff);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
.brand h1{font-size:22px; letter-spacing:.5px; background:linear-gradient(135deg,var(--pink-deep),#c77dff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.brand-sub{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.resource-bar{display:flex; gap:8px;}
.res-chip{
  display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700;
  background:var(--glass); border:1px solid rgba(255,209,102,.6); border-radius:999px;
  padding:7px 12px; color:#b8860b; backdrop-filter:blur(8px); box-shadow:var(--shadow-sm);
}
.res-chip b{color:#a8730a;}

/* 主角英雄区 */
.hero{position:relative; height:210px; display:flex; align-items:center; justify-content:center; margin:6px 0 2px;}
.hero-ring{
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--pink-light) 70%);
  box-shadow:0 0 0 10px rgba(255,255,255,.5), 0 14px 34px rgba(255,158,199,.32);
  display:flex; align-items:center; justify-content:center;
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero-avatar,.hero-battle{position:relative;}

/* 原创可爱角色：圆脸小英雄 */
.avatar-body{
  width:96px; height:96px; border-radius:44% 44% 48% 48%;
  background:linear-gradient(160deg,#ffe0ef,#ffc3dd);
  position:relative; box-shadow:inset -6px -8px 12px rgba(255,123,181,.25);
}
.avatar-body.sm{width:72px; height:72px;}
.avatar-face{position:absolute; inset:0; display:flex; justify-content:center; align-items:center;}
.eye{
  position:absolute; top:34%; width:9px; height:13px; border-radius:50%; background:#4a3a4d;
  animation:blink 4s infinite;
}
.eye-l{left:26%;} .eye-r{right:26%;}
@keyframes blink{0%,94%,100%{transform:scaleY(1);}96%{transform:scaleY(.1);}}
.mouth{position:absolute; top:56%; left:50%; transform:translateX(-50%); width:16px; height:9px; border-bottom:3px solid #ff7bb5; border-radius:0 0 16px 16px;}
.blush{position:absolute; top:52%; width:12px; height:7px; border-radius:50%; background:rgba(255,123,181,.5);}
.blush-l{left:16%;} .blush-r{right:16%;}
.avatar-bow{position:absolute; top:-14px; right:-10px; font-size:24px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.12));}

.float-star{
  position:absolute; font-size:22px; animation:floatStar 3s ease-in-out infinite;
  animation-delay:var(--d); opacity:.9; filter:drop-shadow(0 2px 3px rgba(0,0,0,.1));
}
.float-star:nth-child(2){left:12%; top:22%;}
.float-star:nth-child(3){right:10%; top:30%;}
.float-star:nth-child(4){left:22%; bottom:14%;}
@keyframes floatStar{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-14px) rotate(12deg);}}

/* 等级胶囊 */
.level-pill{
  display:flex; gap:12px; align-items:center; background:var(--card);
  border-radius:var(--radius); padding:14px 18px; box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.7);
}
.lv-num{
  width:52px; height:52px; border-radius:18px; flex:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800;
  box-shadow:0 6px 14px rgba(245,185,60,.4);
}
.lv-info{flex:1;}
.lv-bar{height:10px; border-radius:999px; background:#f4ecf3; overflow:hidden;}
.lv-bar i{display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--pink),var(--gold)); transition:width .6s ease;}
.lv-text{font-size:12px; color:var(--ink-soft); margin-top:6px; display:block;}

.home-cta{display:flex; flex-direction:column; gap:10px; margin-top:auto;}
.foot{text-align:center; font-size:12px; color:var(--ink-soft); padding-top:4px;}

/* ---------- 二级页顶栏 ---------- */
.sub-top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.sub-top h2{font-size:20px; flex:1; text-align:center; letter-spacing:1px;}

/* ---------- 关卡选择 ---------- */
.level-grid{display:flex; flex-direction:column; gap:14px;}
.level-card{
  position:relative; border-radius:var(--radius); padding:18px; cursor:pointer;
  color:#fff; box-shadow:var(--shadow); overflow:hidden;
  display:flex; align-items:center; gap:14px;
  transition:transform .2s ease, box-shadow .2s ease;
  border:2px solid rgba(255,255,255,.55);
}
.level-card:active{transform:scale(.97);}
.level-card.locked{filter:grayscale(.35); opacity:.75;}
.level-icon{
  width:58px; height:58px; border-radius:18px; flex:none; font-size:30px;
  background:rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.level-info{flex:1;}
.level-name{font-size:17px; font-weight:800; letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,.12);}
.level-desc{font-size:12px; opacity:.92; margin-top:4px; line-height:1.4;}
.level-meta{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
.level-tag{font-size:11px; background:rgba(255,255,255,.32); border-radius:999px; padding:3px 9px; backdrop-filter:blur(4px);}
.level-stars{font-size:13px; letter-spacing:1px; text-shadow:0 1px 2px rgba(0,0,0,.15);}
.lock-badge{position:absolute; top:12px; right:14px; font-size:20px;}

/* 各关配色（画风切换） */
.theme-pink{background:linear-gradient(135deg,#ffb7d5,#ff8fb8);}
.theme-blue{background:linear-gradient(135deg,#bcdff4,#8cc7ec);}
.theme-mint{background:linear-gradient(135deg,#bcebdd,#8fdcC4);}
.theme-lav{background:linear-gradient(135deg,#d9ccf7,#b69cee);}
.theme-gold{background:linear-gradient(135deg,#ffdf9e,#ffc65c);}
.theme-boss{background:linear-gradient(135deg,#6b5b7e,#4a3a5d);}

/* ---------- 战斗界面 ---------- */
#screen-battle{gap:12px; min-height:calc(100vh - 32px);}
.battle-bg{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 50% 20%, rgba(255,255,255,.6), transparent 60%);}
.hud{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.hud-mid{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;}
.hud-score{font-size:14px; font-weight:800; color:var(--pink-deep);}
.hud-timer{font-size:14px; font-weight:800; color:var(--ink-strong);}
.hud-timer.urgent{color:#ff5a7a; animation:pulse .6s infinite;}
@keyframes pulse{50%{transform:scale(1.12);}}

/* 血条 */
.battle-stage{background:var(--glass); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.6);}
.hp-bar{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.hp-name{font-size:13px; font-weight:800; width:44px; flex:none;}
.hp-track{flex:1; height:14px; border-radius:999px; background:#f4e7ef; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.08);}
.hp-track i{display:block; height:100%; width:100%; border-radius:999px; transition:width .35s ease; background:linear-gradient(90deg,#ffb7d5,#ff7bb5);}
.hp-track.mon i{background:linear-gradient(90deg,#8cc7ec,#5aa7d6);}
.hp-num{font-size:12px; font-weight:800; color:var(--ink-soft); width:36px; text-align:right;}

/* 竞技场 */
.arena{position:relative; height:190px; display:flex; align-items:center; justify-content:space-between; padding:0 8px; overflow:hidden;}
.monster{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .2s;}
.mon-body{
  width:88px; height:88px; border-radius:46% 46% 42% 42%;
  background:var(--mint); position:relative; transition:background .3s;
  box-shadow:inset -6px -8px 12px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.1);
}
.mon-face{position:absolute; inset:0; display:flex; justify-content:center; align-items:center;}
.mon-mouth{position:absolute; top:58%; left:50%; transform:translateX(-50%); width:20px; height:8px; border-bottom:3px solid rgba(0,0,0,.5); border-radius:0 0 20px 20px;}
.mon-horn{position:absolute; top:-12px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:16px solid var(--gold);}
.mon-hp{width:90px; height:12px; border-radius:999px; background:#f0e7ee; overflow:hidden;}
.mon-hp i{display:block; height:100%; width:100%; border-radius:999px; background:linear-gradient(90deg,#ffdf9e,#ffc65c); transition:width .35s ease;}
.mon-name{font-size:12px; font-weight:800; color:var(--ink-soft);}

.hero-battle{animation:idle 2.2s ease-in-out infinite;}
@keyframes idle{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* 攻击 / 受伤动画 */
.monster.hurt{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-8px);}50%{transform:translateX(8px);}75%{transform:translateX(-5px);}}
.hero-battle.attack{animation:lunge .45s ease;}
@keyframes lunge{0%{transform:translateX(0);}40%{transform:translateX(90px) scale(1.1);}100%{transform:translateX(0);}}
.monster.hit-flash .mon-body{filter:brightness(1.35) saturate(1.4);}
.hero-battle.hurt{animation:heroShake .4s;}
@keyframes heroShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}50%{transform:translateX(6px);}75%{transform:translateX(-4px);}}

.battle-log{min-height:20px; text-align:center; font-size:13px; color:var(--ink-soft); font-weight:600;}

/* ---------- 题目区 ---------- */
.question-wrap{flex:1; display:flex; flex-direction:column; gap:12px;}
.q-card{
  background:var(--card); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.7);
  animation:qIn .35s cubic-bezier(.22,.9,.36,1);
}
@keyframes qIn{from{opacity:0; transform:translateY(14px) scale(.98);}to{opacity:1; transform:none;}}
.q-tag{display:inline-block; font-size:12px; font-weight:700; color:#fff; border-radius:999px; padding:4px 12px; margin-bottom:12px;}
.q-tag.vocab{background:linear-gradient(135deg,var(--pink),var(--pink-deep));}
.q-tag.listen{background:linear-gradient(135deg,#7fc0e8,#4a9fd6);}
.q-tag.read{background:linear-gradient(135deg,#b69cee,#8f6bd8);}
.q-tag.write{background:linear-gradient(135deg,var(--mint),#5fc9a8);}
.q-tag.cloze{background:linear-gradient(135deg,#ffd166,#f5b93c);}
.q-tag.syn{background:linear-gradient(135deg,#ffab7e,#ff8a5c);}
.q-tag.boss{background:linear-gradient(135deg,#6b5b7e,#4a3a5d);}

.q-prompt{font-size:19px; font-weight:800; line-height:1.5; margin-bottom:6px;}
.q-word{font-size:26px; font-weight:800; letter-spacing:.5px;}
.q-phonetic{font-size:15px; color:var(--ink-soft); margin:4px 0 2px;}
.q-hint{font-size:13px; color:var(--ink-soft); margin-bottom:12px;}

/* 选项 */
.options{display:flex; flex-direction:column; gap:10px;}
.opt{
  display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  border:1.5px solid #f3e2ee; border-radius:18px; padding:14px 16px;
  background:linear-gradient(135deg,#fff,#fff6fb); font-size:15px; font-weight:600; color:var(--ink-strong);
  transition:transform .15s, border-color .15s, background .15s; line-height:1.4;
}
.opt:active{transform:scale(.98);}
.opt .opt-key{width:26px; height:26px; flex:none; border-radius:9px; background:var(--pink-light); color:var(--pink-deep); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;}
.opt.correct{border-color:#5fc9a8; background:linear-gradient(135deg,#e9fbf4,#d2f5e7); color:#2d8a68;}
.opt.wrong{border-color:#ff8fa3; background:linear-gradient(135deg,#fff0f3,#ffe0e7); color:#c93a55; animation:shake .35s;}
.opt.disabled{pointer-events:none;}

/* 播放按钮 */
.listen-btn{
  display:flex; align-items:center; gap:8px; border:none; cursor:pointer; font-family:var(--sans);
  background:linear-gradient(135deg,#7fc0e8,#4a9fd6); color:#fff; font-size:15px; font-weight:700;
  border-radius:999px; padding:12px 20px; box-shadow:0 6px 16px rgba(74,159,214,.35); margin-bottom:14px;
}
.listen-btn:active{transform:scale(.96);}

/* 阅读短文 */
.passage{
  max-height:180px; overflow-y:auto; background:var(--cream); border-radius:16px;
  padding:14px; font-size:14px; line-height:1.75; color:var(--ink-strong); margin-bottom:12px;
  border:1px solid #f3e2ee; -webkit-overflow-scrolling:touch;
}
.passage h4{font-size:14px; margin-bottom:6px; color:var(--pink-deep);}
.passage-trans{
  background:var(--mint-light); border-radius:14px; padding:12px; font-size:13px;
  line-height:1.7; color:#5a7a6a; margin-bottom:12px; border:1px dashed rgba(95,201,168,.4);
}
.passage-trans b{display:block; margin-bottom:4px; font-size:12px; color:#3d8a6a;}

/* 写译输入 */
.write-input{
  width:100%; border:1.5px solid #d8eee6; border-radius:16px; padding:14px; font-size:15px;
  font-family:var(--sans); resize:none; min-height:88px; color:var(--ink-strong); background:#fff;
  transition:border-color .15s; line-height:1.6;
}
.write-input:focus{outline:none; border-color:var(--mint); box-shadow:0 0 0 4px rgba(178,234,219,.3);}
.write-submit{
  margin-top:12px; width:100%; border:none; cursor:pointer; font-family:var(--sans);
  background:linear-gradient(135deg,var(--mint),#5fc9a8); color:#fff; font-size:16px; font-weight:700;
  border-radius:999px; padding:14px; box-shadow:0 6px 16px rgba(95,201,168,.35);
}
.write-submit:active{transform:scale(.97);}

/* 解析面板 */
.explain-panel{
  margin-top:14px; background:linear-gradient(135deg,#fff8ee,#fff3f8); border-radius:16px;
  padding:14px; border:1px solid rgba(255,209,102,.4); animation:qIn .3s ease;
}
.explain-panel .ex-title{font-size:13px; font-weight:800; color:#b8860b; margin-bottom:6px;}
.explain-panel .ex-text{font-size:14px; line-height:1.65; color:var(--ink-strong);}
.explain-panel .ex-extra{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,158,199,.3); font-size:13px; line-height:1.6; color:var(--ink);}
.explain-panel .ex-extra b{color:var(--pink-deep);}
.next-btn{
  margin-top:12px; width:100%; border:none; cursor:pointer; font-family:var(--sans);
  background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff; font-size:16px; font-weight:700;
  border-radius:999px; padding:14px; box-shadow:0 6px 16px rgba(255,123,181,.35);
}
.next-btn:active{transform:scale(.97);}

/* ---------- 结算 ---------- */
#screen-result{align-items:center; justify-content:center; min-height:calc(100vh - 32px);}
.result-card{
  width:100%; background:var(--card); border-radius:28px; padding:28px 22px; text-align:center;
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.8); animation:popIn .5s cubic-bezier(.34,1.4,.64,1);
}
@keyframes popIn{from{opacity:0; transform:scale(.85);}to{opacity:1; transform:scale(1);}}
.result-stars{font-size:46px; letter-spacing:8px; margin-bottom:8px;}
.result-stars .dim{filter:grayscale(1); opacity:.35;}
.result-card h2{font-size:24px; margin-bottom:6px; background:linear-gradient(135deg,var(--pink-deep),#c77dff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.result-sub{font-size:14px; color:var(--ink-soft); margin-bottom:18px; line-height:1.6;}
.result-rewards{display:flex; gap:10px; justify-content:center; margin-bottom:22px;}
.reward{
  flex:1; max-width:130px; background:linear-gradient(135deg,#fff6fb,#f0f6ff); border-radius:18px; padding:14px 8px;
  border:1px solid #f0e2ec;
}
.reward .r-icon{font-size:24px;}
.reward .r-val{font-size:20px; font-weight:800; color:var(--ink-strong); margin-top:4px;}
.reward .r-label{font-size:11px; color:var(--ink-soft);}
.result-actions{display:flex; flex-direction:column; gap:10px;}

/* ---------- 成就 ---------- */
.profile-body{display:flex; flex-direction:column; gap:14px;}
.pf-hero{
  background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff; border-radius:var(--radius);
  padding:22px; text-align:center; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.pf-hero .pf-avatar{font-size:52px; margin-bottom:6px;}
.pf-hero .pf-name{font-size:20px; font-weight:800;}
.pf-hero .pf-title{font-size:13px; opacity:.9; margin-top:4px;}
.pf-stats{display:flex; gap:10px; margin-top:16px;}
.pf-stat{flex:1; background:rgba(255,255,255,.22); border-radius:16px; padding:12px 6px; backdrop-filter:blur(4px);}
.pf-stat .s-val{font-size:20px; font-weight:800;}
.pf-stat .s-label{font-size:11px; opacity:.9;}
.pf-section{background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.7);}
.pf-section h3{font-size:15px; margin-bottom:12px; color:var(--pink-deep); letter-spacing:.5px;}
.pf-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed #f3e2ee; font-size:14px;}
.pf-row:last-child{border-bottom:none;}
.pf-row .k{color:var(--ink-soft);}
.pf-row .v{font-weight:800;}
.reset-btn{
  margin-top:8px; width:100%; border:1px solid #ffc4c4; background:#fff5f5; color:#d64a5a;
  border-radius:14px; padding:12px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--sans);
}

/* ---------- 飘字 + 特效层 ---------- */
#fxLayer{position:fixed; inset:0; pointer-events:none; z-index:999; max-width:480px; margin:0 auto;}
.fx-float{
  position:absolute; font-size:26px; font-weight:900; letter-spacing:1px;
  animation:floatUp 1s ease-out forwards; text-shadow:0 2px 4px rgba(0,0,0,.12);
}
.fx-float.good{color:#ff6fa5;}
.fx-float.bad{color:#7f8da0;}
.fx-float.gold{color:#f5a623;}
@keyframes floatUp{0%{opacity:0; transform:translateY(0) scale(.7);}20%{opacity:1; transform:translateY(-12px) scale(1.1);}100%{opacity:0; transform:translateY(-70px) scale(1);}}
.fx-particle{position:absolute; width:8px; height:8px; border-radius:50%; animation:particleFly .7s ease-out forwards;}
@keyframes particleFly{0%{opacity:1; transform:translate(0,0) scale(1);}100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(.2);}}
.fx-damage{position:absolute; font-size:30px; animation:floatUp 1s ease-out forwards;}

/* 响应式：小屏微调 */
@media (max-width:380px){
  .brand h1{font-size:19px;}
  .q-prompt{font-size:17px;}
  .hero{height:180px;}
  .hero-ring{width:160px; height:160px;}
}