/* ============================================================
   科学我为王 V3 · 商用级视觉
   ============================================================ */
:root{
  --ink:#2d2317; --paper:#f7ecd4; --paper2:#efe0bd; --gold:#c9962e; --gold2:#f3d27a;
  --magic:#6b4fd8; --magic2:#9b7bff; --danger:#c0392b; --ok:#2e8b57;
  --rN:#8f97a8; --rR:#4f8f5f; --rSR:#8a56c9; --rSSR:#d09a1f; --rUR:#d8489b;
  --shadow:0 8px 28px rgba(30,20,5,.35);
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--font);background:#1c1410;color:var(--ink);overflow:hidden;user-select:none}
#app{position:relative;width:100%;height:100%;max-width:1024px;margin:0 auto;background:#241a12}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.screen.on{display:flex;animation:scrIn .45s ease both}
@keyframes scrIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hidden{display:none!important}
.dim{opacity:.75;font-size:13px}
h1,h2{font-weight:800}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.btn{border-radius:14px;padding:10px 22px;font-size:16px;font-weight:700;letter-spacing:1px;
  transition:transform .15s,box-shadow .15s;box-shadow:var(--shadow)}
.btn:active{transform:scale(.96)}
.btn.big{font-size:20px;padding:14px 44px}
.btn-gold{background:linear-gradient(180deg,#f7d879,#d99a26 60%,#b97e14);color:#4a2f05;
  border:2px solid #ffe9a8;text-shadow:0 1px 0 #ffe9a8}
.btn-magic{background:linear-gradient(180deg,#a98bff,#6b4fd8);color:#fff;border:2px solid #cdbcff}
.btn-ghost{background:rgba(255,248,230,.12);color:#f4e8c8;border:1px solid rgba(255,248,230,.4)}
.btn-ghost.sm{padding:4px 12px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------------- 标题屏 ---------------- */
#scr-title{align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 50% -10%,#3d2a5e,#1c1410 70%)}
.title-sky{position:absolute;inset:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;animation:floatOrb 9s ease-in-out infinite}
.orb-a{width:60px;height:60px;left:12%;top:20%;background:radial-gradient(circle at 35% 35%,#b7f7e1,#2e8b7f)}
.orb-b{width:36px;height:36px;right:16%;top:14%;background:radial-gradient(circle at 35% 35%,#ffd9f0,#c05fa8);animation-delay:2s}
.orb-c{width:28px;height:28px;left:22%;bottom:18%;background:radial-gradient(circle at 35% 35%,#ffe9a8,#c9962e);animation-delay:4s}
@keyframes floatOrb{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.title-card{position:relative;text-align:center;padding:30px 40px;border-radius:22px;
  background:linear-gradient(160deg,rgba(45,32,20,.85),rgba(28,18,10,.9));
  border:1px solid rgba(243,210,122,.5);box-shadow:0 0 60px rgba(201,150,46,.25)}
.title-glyph{font-size:44px;filter:drop-shadow(0 0 12px #f3d27a)}
.game-title{font-size:44px;color:#f7e6b5;letter-spacing:6px;text-shadow:0 3px 0 #7a5410,0 0 26px rgba(243,210,122,.6);margin:6px 0 2px}
.game-en{color:#c9b98f;letter-spacing:5px;font-size:15px;text-transform:uppercase}
.game-sub{color:#a8916a;margin:10px 0 22px;font-size:15px;letter-spacing:2px}
.title-btns{display:flex;gap:14px;justify-content:center;align-items:center;flex-direction:column}
.title-rates{max-width:420px;margin:18px auto 0;font-size:11px;color:#8f7d5c;line-height:1.6}
.title-heroes{position:absolute;inset:0;pointer-events:none}
.title-heroes img{position:absolute;bottom:0;height:52%;filter:drop-shadow(0 0 22px rgba(0,0,0,.5));animation:heroIdle 3.4s ease-in-out infinite}
#th-a{left:4%}
#th-b{right:4%;animation-delay:1.7s}
@keyframes heroIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------------- 选主角 ---------------- */
#scr-hero{align-items:center;justify-content:center;gap:8px;overflow:auto;
  background:linear-gradient(180deg,#2b2036,#241a12)}
#scr-hero h2{color:#f7e6b5;font-size:24px;margin:6px 0 0}
.hero-row{display:flex;gap:22px;margin:8px 0}
.hero-pick{background:rgba(255,248,230,.07);border:2px solid rgba(255,248,230,.2);border-radius:20px;
  padding:14px 18px;text-align:center;cursor:pointer;transition:all .2s;width:250px}
.hero-pick.sel{border-color:var(--gold2);box-shadow:0 0 30px rgba(243,210,122,.45);background:rgba(243,210,122,.12);transform:translateY(-6px)}
.hp-frame{width:190px;height:236px;margin:0 auto;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#6d5aa8,#2c2244 75%);display:flex;align-items:center;justify-content:center}
.hp-frame img{width:92%;height:96%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));animation:heroIdle 3.4s ease-in-out infinite}
.hp-name{color:#ffe9a8;font-size:20px;font-weight:800;margin-top:10px}
.hp-desc{color:#c9b98f;font-size:13px;margin-top:4px}

/* ---------------- 剧情 ---------------- */
#scr-story{background:#100b16}
.story-bg{position:absolute;inset:0;
  background:radial-gradient(900px 500px at 50% 20%,#3b2a63,#100b16 75%);opacity:.9}
.story-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(2px 2px at 12% 22%,#ffe9a8,transparent 60%),
             radial-gradient(2px 2px at 76% 12%,#b7f7e1,transparent 60%),
             radial-gradient(1.6px 1.6px at 58% 38%,#ffd9f0,transparent 60%),
             radial-gradient(1.6px 1.6px at 30% 52%,#fff,transparent 60%);
  opacity:.6;animation:twinkle 3s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:.75}}
.story-layer{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.story-actor{position:absolute;bottom:150px;height:62%;object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(120,90,255,.45));transition:transform .5s cubic-bezier(.3,1.3,.5,1),opacity .5s}
.story-actor.enter{animation:actorIn .7s cubic-bezier(.3,1.3,.5,1) both}
.story-actor.left{transform:translateX(-16%) scale(.96)}
.story-actor.right{transform:translateX(16%) scale(.96)}
.story-actor.talk{transform:translateY(-10px) scale(1.02)}
.story-actor.idle{animation:actorBreathe 3.2s ease-in-out infinite}
.story-actor.exit{opacity:0;transform:translateY(30px)}
@keyframes actorIn{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes actorBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.story-box{position:relative;z-index:2;margin:auto auto 26px;width:min(92%,780px);min-height:120px;
  background:linear-gradient(180deg,rgba(38,28,52,.94),rgba(24,17,36,.96));
  border:1.5px solid rgba(243,210,122,.55);border-radius:18px;padding:18px 22px 26px;box-shadow:var(--shadow);cursor:pointer}
.story-speaker{position:absolute;top:-16px;left:20px;background:linear-gradient(180deg,#f3d27a,#c9962e);
  color:#4a2f05;font-weight:800;padding:4px 16px;border-radius:12px;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.story-text{color:#f4ecd8;font-size:17px;line-height:1.8;min-height:56px;letter-spacing:.4px}
.story-next{position:absolute;right:18px;bottom:8px;color:#f3d27a;font-size:12px;animation:nextBlink 1.2s ease-in-out infinite}
@keyframes nextBlink{0%,100%{opacity:.3}50%{opacity:1}}
.story-choices{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;gap:18px;background:rgba(10,6,18,.55)}
.story-choices.on{display:flex}
.story-choice{background:linear-gradient(180deg,#f7ecd4,#e6d3a8);border:2px solid #c9962e;color:#4a2f05;
  font-size:17px;font-weight:700;padding:16px 28px;border-radius:16px;max-width:280px;box-shadow:var(--shadow);
  animation:choiceIn .4s cubic-bezier(.3,1.4,.5,1) both;transition:transform .15s}
.story-choice:hover{transform:scale(1.05)}
@keyframes choiceIn{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
#st-skip{position:absolute;top:14px;right:14px;z-index:4}

/* ---------------- HUD ---------------- */
#hud{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;gap:8px;align-items:center;
  padding:8px 12px;background:linear-gradient(180deg,rgba(20,13,8,.92),rgba(20,13,8,.55) 80%,transparent)}
.hud-btn{background:rgba(255,248,230,.12);border:1px solid rgba(255,248,230,.35);color:#f4e8c8;
  border-radius:10px;padding:5px 12px;font-size:13px;font-weight:700}
.hud-btn.act{background:linear-gradient(180deg,#f3d27a,#c9962e);color:#4a2f05;border-color:#ffe9a8}
.hud-res{margin-left:auto;background:rgba(0,0,0,.4);border:1px solid rgba(243,210,122,.4);color:#ffe9a8;
  border-radius:10px;padding:5px 12px;font-size:13px;font-weight:800}
.hud-res + .hud-res{margin-left:0}

/* ---------------- 大地图 ---------------- */
#scr-map{background:#141d2e}
.map-title{position:absolute;top:46px;left:0;right:0;text-align:center;z-index:5;color:#f7e6b5;
  font-size:22px;font-weight:800;letter-spacing:4px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.map-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:52px 8px 30px}
#worldmap{width:100%;height:100%;max-height:calc(100vh - 120px)}
.map-gate-tip{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#e8b7d6;font-size:13px}

/* SVG 地图元素 */
.terrain-sea{fill:url(#gsea)}
.terrain-land{fill:url(#gland);stroke:#8a6d4a;stroke-width:2.5}
.terrain-forest{fill:#3f6b3a;opacity:.85}
.terrain-forest2{fill:#35592f;opacity:.9}
.terrain-mountain{fill:#6e5f4e;stroke:#4c4033;stroke-width:2}
.terrain-snowcap{fill:#e8e3d5}
.terrain-lava{fill:#e2552b;opacity:.9}
.terrain-volcano{fill:#54423a;stroke:#332620;stroke-width:2}
.terrain-desert{fill:#d9b577;opacity:.85}
.terrain-water{fill:#3f7fae;opacity:.85}
.terrain-bamboo{fill:#4d7a3e;opacity:.9}
.terrain-glow{fill:#5fd8c8;opacity:.55;filter:url(#soft)}
.terrain-river{fill:none;stroke:#4f9ec4;stroke-width:5;stroke-linecap:round;opacity:.8}
.map-road{fill:none;stroke:#e8d9ae;stroke-width:5;stroke-linecap:round;stroke-dasharray:1 12;opacity:.9}
.map-road-under{fill:none;stroke:#8a6d4a;stroke-width:8;stroke-linecap:round;opacity:.55}
.map-village{fill:#f0e2bd;stroke:#8a6d4a;stroke-width:2}
.map-village-label{fill:#5a4a30;font-size:11px;text-anchor:middle;font-family:var(--font)}
.map-node{cursor:pointer}
.map-node .node-halo{animation:halo 2.6s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.25;r:40}50%{opacity:.5;r:46}}
.map-node .node-ring{stroke-width:5}
.map-node.locked{cursor:not-allowed;filter:saturate(.25) brightness(.8)}
.map-node.current .node-ring{animation:currentPulse 1.6s ease-in-out infinite}
@keyframes currentPulse{0%,100%{stroke-width:5}50%{stroke-width:9}}
.map-node.cleared .node-ring{stroke:#7fc98f}
.node-label{fill:#f7ecd4;font-size:17px;font-weight:800;text-anchor:middle;paint-order:stroke;stroke:rgba(20,12,6,.85);stroke-width:4px;font-family:var(--font)}
.node-prog{fill:#ffe9a8;font-size:12px;text-anchor:middle;paint-order:stroke;stroke:rgba(20,12,6,.8);stroke-width:3px;font-family:var(--font)}
.map-final-glow{animation:gateGlow 2s ease-in-out infinite}
@keyframes gateGlow{0%,100%{opacity:.3}50%{opacity:.8}}
.map-hero{animation:heroBob 2s ease-in-out infinite}
@keyframes heroBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------------- 秘境关卡页 ---------------- */
#scr-realm{background:linear-gradient(180deg,#2a2030,#1c1410);padding-top:56px}
.realm-head{display:flex;align-items:center;gap:14px;padding:12px 18px}
.realm-head h2{color:#f7e6b5;font-size:24px}
.rm-prog{margin-left:auto;color:#ffe9a8;font-weight:800}
.lesson-list{flex:1;overflow-y:auto;padding:6px 18px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.lesson-card{position:relative;background:linear-gradient(160deg,#f7ecd4,#e8d5a8);border-radius:16px;
  padding:12px 14px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);border:2px solid transparent;transition:transform .15s}
.lesson-card:active{transform:scale(.97)}
.lesson-card .lc-ava{width:64px;height:64px;border-radius:14px;object-fit:contain;float:left;margin-right:10px;
  background:radial-gradient(circle at 50% 35%,#fff,#d9c793);border:2px solid #c9962e}
.lesson-card .lc-name{font-weight:800;font-size:16px;color:#4a2f05}
.lesson-card .lc-title{font-size:12px;color:#7a5f34;margin-top:2px}
.lesson-card .lc-state{clear:both;padding-top:8px;font-size:12px;font-weight:800}
.lesson-card.done{border-color:#7fc98f;background:linear-gradient(160deg,#e9f5e4,#d3e8c8)}
.lesson-card.done .lc-state{color:#2e8b57}
.lesson-card.next{border-color:#c9962e;box-shadow:0 0 22px rgba(243,210,122,.5)}
.lesson-card.locked{filter:grayscale(.8) brightness(.9);cursor:not-allowed}
.lesson-card .lc-glyph{width:64px;height:64px;border-radius:14px;float:left;margin-right:10px;
  display:flex;align-items:center;justify-content:center;font-size:36px;
  background:radial-gradient(circle at 50% 35%,#fff,#d9c793);border:2px solid #c9962e}
.realm-guardian{padding:10px 18px 18px;color:#c9b98f;font-size:13px}

/* ---------------- 知识点关卡 ---------------- */
#scr-lesson{background:linear-gradient(180deg,#33284a,#1c1410);padding-top:56px}
.lesson-top{display:flex;align-items:center;gap:14px;padding:10px 16px}
.ls-stages{display:flex;gap:8px}
.ls-stages span{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:800;
  background:rgba(255,248,230,.1);color:#c9b98f;border:1px solid rgba(255,248,230,.2)}
.ls-stages span.on{background:linear-gradient(180deg,#f3d27a,#c9962e);color:#4a2f05}
.ls-stages span.ok{background:#2e8b57;color:#fff;border-color:#7fc98f}
.ls-guardian{display:flex;align-items:center;gap:12px;padding:8px 18px}
.ls-guardian img{width:86px;height:86px;object-fit:contain;border-radius:18px;
  background:radial-gradient(circle at 50% 35%,#6d5aa8,#2c2244 78%);border:2px solid rgba(243,210,122,.5);
  animation:heroIdle 3.4s ease-in-out infinite}
.ls-guardian-bubble{flex:1;background:rgba(255,248,230,.1);border:1px solid rgba(243,210,122,.35);
  color:#f4ecd8;border-radius:14px;padding:10px 14px;font-size:14px;line-height:1.7;min-height:56px}
.ls-body{flex:1;overflow-y:auto;padding:10px 18px 10px}
.know-title{color:#ffe9a8;font-weight:800;font-size:18px;margin-bottom:10px}
.know-text{background:rgba(255,248,230,.08);border-left:4px solid #c9962e;border-radius:0 12px 12px 0;
  color:#f4ecd8;padding:12px 14px;font-size:15px;line-height:1.8;margin-bottom:16px}
.quiz-q{color:#fff;font-size:18px;font-weight:800;margin:4px 0 14px;line-height:1.6}
.quiz-opt{display:block;width:100%;text-align:left;background:linear-gradient(180deg,#f7ecd4,#e8d5a8);
  color:#4a2f05;font-size:16px;font-weight:700;border-radius:14px;padding:13px 16px;margin-bottom:10px;
  border:2px solid transparent;box-shadow:0 3px 10px rgba(0,0,0,.3);transition:transform .12s}
.quiz-opt:active{transform:scale(.97)}
.quiz-opt.good{background:linear-gradient(180deg,#bfe8c4,#8fd49a);border-color:#2e8b57}
.quiz-opt.bad{background:linear-gradient(180deg,#f3b8b0,#e59a90);border-color:#c0392b;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.judge-row{display:flex;gap:16px;justify-content:center;margin-top:10px}
.judge-btn{width:130px;padding:18px 0;font-size:20px;border-radius:18px;font-weight:800;color:#fff;box-shadow:var(--shadow)}
.judge-btn.t{background:linear-gradient(180deg,#6fcf7f,#2e8b57)}
.judge-btn.f{background:linear-gradient(180deg,#ef8080,#c0392b)}
.flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin:0 auto}
.flip-card{aspect-ratio:3/4;perspective:700px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s}
.flip-card.open .flip-inner,.flip-card.matched .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.flip-back{background:linear-gradient(160deg,#6b4fd8,#3a2a80);border:2px solid #9b7bff;color:#ffe9a8;font-size:26px}
.flip-front{background:linear-gradient(160deg,#f7ecd4,#e8d5a8);transform:rotateY(180deg);
  font-size:12px;font-weight:800;color:#4a2f05;text-align:center;padding:6px;flex-direction:column;gap:4px}
.flip-front img{width:80%;height:64%;object-fit:contain}
.flip-card.matched .flip-front{outline:3px solid #2e8b57}
.ls-feedback{min-height:66px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 18px 14px}
.fb-msg{font-size:18px;font-weight:800;padding:8px 20px;border-radius:14px;animation:choiceIn .35s both}
.fb-msg.good{background:#2e8b57;color:#fff}
.fb-msg.bad{background:rgba(192,57,43,.9);color:#fff}
.fb-why{font-size:13px;color:#f4ecd8;opacity:.85;max-width:520px;line-height:1.6}
.lesson-clear{position:absolute;inset:0;background:rgba(12,8,18,.88);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;z-index:10;animation:scrIn .4s both}
.lesson-clear h3{color:#ffe9a8;font-size:30px;text-shadow:0 0 20px rgba(243,210,122,.6)}
.lesson-clear .lc-keys{font-size:20px;color:#fff}
.lesson-clear .lc-spark{font-size:44px;animation:floatOrb 3s ease-in-out infinite}

/* ---------------- 卡牌 ---------------- */
.gcard{position:relative;width:150px;height:218px;border-radius:14px;overflow:hidden;flex-shrink:0;
  box-shadow:0 6px 18px rgba(0,0,0,.5);background:#111}
.gcard .g-frame{position:absolute;inset:0;border-radius:14px;border:3px solid #666;z-index:2;pointer-events:none}
.gcard .g-inner{position:absolute;inset:5px;border-radius:10px;z-index:3;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#4d4468,#181226 80%)}
.gcard .g-portrait{width:100%;height:66%;object-fit:contain;object-position:center 22%;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.gcard .g-plate{position:absolute;left:4px;right:4px;bottom:4px;height:30%;border-radius:8px;
  background:linear-gradient(180deg,rgba(20,12,24,.2),rgba(10,6,14,.92) 45%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:4}
.gcard .g-name{color:#fff;font-weight:800;font-size:14px;text-shadow:0 1px 3px #000}
.gcard .g-en{color:rgba(255,255,255,.65);font-size:9px;letter-spacing:.5px;text-transform:capitalize}
.gcard .g-stars{color:#ffd76a;font-size:10px;letter-spacing:2px;z-index:2}
.gcard .g-gem{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:16px;height:16px;
  border-radius:50%;border:2px solid rgba(255,255,255,.7);z-index:5;box-shadow:0 0 8px currentColor}
.gcard .g-shine{position:absolute;top:-60%;left:-80%;width:60%;height:220%;z-index:6;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:rotate(18deg);animation:gshine 3.2s ease-in-out infinite}
@keyframes gshine{0%{left:-80%}55%,100%{left:130%}}
.gcard.rN .g-frame{border-color:#9aa0b5;background:linear-gradient(160deg,#c8cdd8,#6e7482)}
.gcard.rN .g-gem{background:#aab1c2;color:#aab1c2}
.gcard.rR .g-frame{border-color:#5fae72;background:linear-gradient(160deg,#9fd8ab,#2e6b42)}
.gcard.rR .g-gem{background:#5fae72;color:#5fae72}
.gcard.rSR .g-frame{border-color:#a06ce0;background:linear-gradient(160deg,#cfa6ff,#5f3694)}
.gcard.rSR .g-gem{background:#a06ce0;color:#a06ce0;box-shadow:0 0 12px #a06ce0}
.gcard.rSSR .g-frame{border-color:#ffce4f;background:linear-gradient(160deg,#ffe9a8,#b97e14)}
.gcard.rSSR .g-gem{background:#ffce4f;color:#ffce4f;box-shadow:0 0 14px #ffce4f}
.gcard.rSSR .g-inner{background:radial-gradient(circle at 50% 32%,#7a5a18,#241704 80%)}
.gcard.rUR .g-frame{border-color:#ff7ac8;background:conic-gradient(from 0deg,#ff7ac8,#7ac8ff,#7affc8,#ffe97a,#ff7ac8);
  animation:urSpin 4s linear infinite}
@keyframes urSpin{to{transform:rotate(1turn)}}
.gcard.rUR .g-inner{background:radial-gradient(circle at 50% 32%,#63234e,#1a0a18 80%)}
.gcard.rUR .g-gem{background:#ff7ac8;color:#ff7ac8;box-shadow:0 0 16px #ff7ac8}
.gcard.rUR .g-shine{animation-duration:2.2s;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.85),rgba(160,220,255,.5) 50%,transparent 80%)}
.gcard .g-new{position:absolute;top:8px;left:8px;z-index:7;background:#e5399b;color:#fff;font-size:10px;
  font-weight:800;padding:2px 8px;border-radius:8px;box-shadow:0 0 10px #e5399b}
.gcard.big{width:230px;height:334px}
.gcard.big .g-name{font-size:19px}
.gcard.big .g-en{font-size:11px}

/* ---------------- 抽卡舞台 ---------------- */
#scr-gacha{align-items:center;justify-content:center;background:radial-gradient(800px 500px at 50% 30%,#2a1f45,#100b16 75%)}
.gacha-hud{position:absolute;top:60px;left:0;right:0;display:flex;justify-content:center;gap:14px;color:#ffe9a8;font-weight:800;font-size:14px}
.gacha-pack{position:relative;width:240px;height:320px;border-radius:20px;cursor:pointer;
  background:linear-gradient(160deg,#8a2be2 0%,#4b1a7a 55%,#2a0f4a 100%);
  border:3px solid #c9a6ff;box-shadow:0 0 60px rgba(138,43,226,.5),inset 0 0 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  animation:packFloat 2.6s ease-in-out infinite;transition:transform .2s}
@keyframes packFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
.gacha-pack:active{transform:scale(.95)}
.gacha-pack .pk-circle{position:absolute;inset:14px;border:2px dashed rgba(255,233,168,.65);border-radius:16px;
  animation:spin 14s linear infinite}
.gacha-pack .pk-circle::after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,233,168,.4);border-radius:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.gacha-pack .pk-emblem{font-size:64px;filter:drop-shadow(0 0 18px #f3d27a)}
.gacha-pack .pk-name{color:#ffe9a8;font-size:22px;font-weight:800;letter-spacing:4px}
.gacha-pack .pk-sub{color:#c9b0ff;font-size:13px}
.gacha-pack .pk-seal{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#f3d27a,#c9962e);color:#4a2f05;font-weight:800;font-size:12px;
  padding:6px 18px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.gacha-rays{position:absolute;width:900px;height:900px;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,233,168,.16) 8deg 16deg,transparent 16deg 24deg);
  border-radius:50%;animation:none}
.gacha-rays.burst{opacity:1;animation:raysBurst 1.6s ease-out both}
@keyframes raysBurst{0%{transform:scale(.1) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1.15) rotate(70deg);opacity:0}}
.gacha-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:30}
.gacha-flash.go{animation:flashGo .7s ease-out both}
@keyframes flashGo{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.gacha-hand{position:absolute;bottom:12%;left:0;right:0;text-align:center;color:#c9b0ff;font-size:15px;animation:nextBlink 1.4s infinite}
.gacha-cards{display:flex;gap:18px;z-index:5}
.gacha-card{width:150px;height:218px;perspective:900px;cursor:pointer}
.gc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.2,.5,1)}
.gacha-card.dealt .gc-inner{animation:dealIn .55s cubic-bezier(.3,1.3,.55,1) both;animation-delay:var(--d,0s)}
@keyframes dealIn{from{opacity:0;transform:translateY(90px) rotate(6deg) scale(.7)}to{opacity:1;transform:none}}
.gacha-card.flipped .gc-inner{transform:rotateY(180deg)}
.gc-face{position:absolute;inset:0;backface-visibility:hidden}
.gc-back{border-radius:14px;background:
  radial-gradient(circle at 50% 42%,#8a2be2,#3a1a6e 62%,#1d0d3a);
  border:3px solid #c9a6ff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.gc-back::after{content:"⚗️";font-size:52px;filter:drop-shadow(0 0 14px #f3d27a)}
.gc-back::before{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(255,233,168,.6);border-radius:10px}
.gc-front{transform:rotateY(180deg)}
.gacha-banner{position:absolute;top:20%;left:0;right:0;text-align:center;z-index:25;pointer-events:none}
.gacha-banner .gb-text{display:inline-block;font-size:30px;font-weight:900;letter-spacing:6px;color:#fff;
  padding:10px 38px;border-radius:14px;animation:bannerIn .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes bannerIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.gacha-banner.sr .gb-text{background:linear-gradient(90deg,rgba(138,43,226,.9),rgba(90,40,180,.9));box-shadow:0 0 30px #a06ce0}
.gacha-banner.ssr .gb-text{background:linear-gradient(90deg,rgba(217,154,38,.95),rgba(160,110,10,.95));box-shadow:0 0 40px #ffce4f}
.gacha-banner.ur .gb-text{background:linear-gradient(90deg,#e5399b,#8a2be2,#2ba6e5,#e5b539);
  box-shadow:0 0 60px rgba(255,122,200,.9);animation:hueShift 2s linear infinite}
@keyframes hueShift{to{filter:hue-rotate(360deg)}}
.gacha-focus{position:absolute;inset:0;z-index:28;display:flex;align-items:center;justify-content:center;
  background:rgba(8,5,14,.85);animation:scrIn .4s both}
.gacha-focus .gf-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.gacha-focus .gf-name{color:#ffe9a8;font-size:24px;font-weight:900;text-shadow:0 0 18px rgba(243,210,122,.7)}
.gacha-focus .gf-sub{color:#c9b98f;font-size:14px;max-width:340px;text-align:center;line-height:1.7}
.gacha-actions{position:absolute;bottom:40px;left:0;right:0;display:flex;justify-content:center;gap:14px;z-index:6}
.confetti{position:absolute;top:-12px;width:9px;height:14px;z-index:26;pointer-events:none;opacity:.95;animation:confFall linear both}
@keyframes confFall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}
.dust-shop{position:absolute;top:96px;right:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:6}
.dust-shop .btn{font-size:13px;padding:8px 14px}

/* ---------------- 图鉴 ---------------- */
#scr-book{background:linear-gradient(180deg,#2a2030,#1c1410);padding-top:56px}
.book-head{display:flex;align-items:baseline;gap:16px;padding:12px 18px}
.book-head h2{color:#f7e6b5;font-size:24px}
.book-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,150px);gap:16px;
  padding:8px 18px 24px;justify-content:center}
.book-slot{position:relative;cursor:pointer}
.book-slot.locked .gcard{filter:grayscale(1) brightness(.55)}
.book-slot .bs-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;z-index:8;color:rgba(255,255,255,.75)}

/* ---------------- 最终挑战 ---------------- */
#scr-final{background:radial-gradient(900px 600px at 50% 20%,#3a1030,#100b16 75%);align-items:center;padding-top:70px}
.final-head{text-align:center;color:#f7e6b5}
.final-head h2{font-size:28px;text-shadow:0 0 22px rgba(229,57,155,.6)}
.final-head p{color:#e8b7d6;font-size:14px;margin-top:6px}
.final-q{width:min(92%,640px);background:rgba(255,248,230,.08);border:1px solid rgba(255,122,200,.4);
  border-radius:18px;padding:20px;margin:14px auto}
.final-q .quiz-q{color:#fff}
.final-prog{display:flex;gap:6px;justify-content:center;margin:10px 0}
.final-prog i{width:16px;height:8px;border-radius:4px;background:rgba(255,255,255,.18)}
.final-prog i.ok{background:#7fc98f}
.final-prog i.no{background:#e59a90}
.final-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:rgba(10,6,16,.9);z-index:10;animation:scrIn .5s both}
.final-result h2{color:#ffe9a8;font-size:32px}
.final-result p{color:#e8d5a8;max-width:420px;text-align:center;line-height:1.8}

/* ---------------- 弹层/吐司 ---------------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.modal-bg{position:absolute;inset:0;background:rgba(8,5,14,.75)}
.modal-body{position:relative;z-index:2;background:linear-gradient(160deg,#f7ecd4,#e8d5a8);border-radius:20px;
  padding:22px;width:min(92%,560px);max-height:86vh;overflow-y:auto;box-shadow:var(--shadow);color:var(--ink)}
.md-name{font-size:24px;font-weight:900}
.md-rarity{display:inline-block;font-size:12px;font-weight:800;padding:2px 12px;border-radius:10px;color:#fff;margin-left:10px;vertical-align:middle}
.md-quote{font-size:14px;color:#7a5f34;margin:10px 0;font-style:italic}
.md-flex{display:flex;gap:16px;align-items:flex-start}
.md-portrait{width:150px;flex-shrink:0}
.md-desc{font-size:14px;line-height:1.8}
.md-know{margin-top:12px;background:rgba(74,47,5,.07);border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.7}
.md-know b{color:#8a5a10}
.md-stats{display:flex;gap:8px;margin-top:10px}
.md-stats span{background:#4a2f05;color:#ffe9a8;font-size:12px;font-weight:800;border-radius:10px;padding:3px 12px}
.md-src{font-size:11px;color:#8a7a58;margin-top:10px;word-break:break-all}
#toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%) translateY(30px);z-index:80;
  background:rgba(20,14,8,.95);color:#ffe9a8;border:1px solid rgba(243,210,122,.5);border-radius:14px;
  padding:10px 22px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:all .3s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(201,150,46,.5);border-radius:4px}

/* 抽卡重复卡星尘提示 */
.gacha-card .g-dup{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  z-index:8;background:rgba(138,86,201,.92);color:#fff;font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.5);white-space:nowrap}

/* V3.1: 24 课紧凑列表 + 知识来源 */
.lesson-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px;-webkit-overflow-scrolling:touch}
.lesson-card .lc-ava{width:52px;height:52px}
.lesson-card .lc-glyph{width:52px;height:52px;font-size:26px}
.lesson-card .lc-name{font-size:14px}
.lesson-card .lc-title{font-size:11.5px;line-height:1.45;min-height:32px}
.know-src{margin-top:8px;font-size:11px;color:#a8926a;font-style:italic}

/* ============ V3.2 ============ */

/* 课程页：知识内容主视觉（大幅知识卡） */
.know-hero{background:linear-gradient(160deg,#fff6dd,#ffe3a0);border:3px solid #c9962e;
  border-radius:18px;padding:16px 18px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  position:relative;overflow:hidden}
.know-hero::after{content:"";position:absolute;top:-40%;right:-20%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,233,168,.7),transparent 70%);pointer-events:none}
.know-hero .kh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.know-hero .kh-badge{background:linear-gradient(180deg,#f3d27a,#c9962e);color:#4a2f05;font-weight:900;
  font-size:13px;padding:4px 14px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.know-hero .kh-unit{color:#8a5a10;font-weight:800;font-size:14px}
.know-hero .kh-text{font-size:20px;font-weight:800;color:#3a2506;line-height:1.85;letter-spacing:.5px}
.know-hero .know-src{color:#a08454}
/* 二三层：知识回顾条 */
.know-strip{background:rgba(255,233,168,.13);border:1.5px solid rgba(243,210,122,.55);color:#ffe9a8;
  font-size:14px;line-height:1.7;border-radius:12px;padding:10px 14px;margin-bottom:14px}
.lc-dust{font-size:13px;color:#c9b98f;margin-top:4px}

/* 挑战序号徽章 */
.ch-no{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ch-no .ch-num{width:27px;height:27px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(180deg,#f3d27a,#c9962e);color:#4a2f05;font-weight:900;font-size:15px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35);
  border:1.5px solid #ffe9a8}
.ch-no .ch-lab{color:#ffe9a8;font-weight:800;font-size:13.5px;letter-spacing:1px;
  text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* HUD 标签更紧凑 */
.hud-btn{padding:5px 10px;font-size:12.5px}

/* 语言菜单 */
.lang-menu{display:flex;flex-direction:column;gap:10px}
.lang-opt{background:#fff8e6;border:2px solid #c9962e;color:#4a2f05;text-align:center;font-size:17px}
.lang-opt.sel{background:linear-gradient(180deg,#f7d879,#d99a26);box-shadow:0 0 18px rgba(243,210,122,.7)}

/* 卡牌详情：1-10 数值条 */
.md-stat{position:relative;flex:1;background:#4a2f05;color:#ffe9a8;font-size:12px;font-weight:800;
  border-radius:10px;padding:4px 12px 5px;overflow:hidden}
.md-stat i{position:relative;z-index:2;font-style:normal;margin-right:6px}
.md-stat em{position:relative;z-index:2;font-style:normal;float:right}
.md-stat em small{font-size:9px;opacity:.6}
.md-stat b{position:absolute;left:0;top:0;bottom:0;z-index:1;opacity:.45}

/* 图鉴：按稀有度分组 */
.book-group{margin-bottom:6px}
.bg-head{display:flex;align-items:center;gap:12px;padding:8px 4px;position:sticky;top:0;
  background:linear-gradient(180deg,#2a2030 75%,transparent);z-index:5}
.bg-name{color:#fff;font-size:14px;font-weight:900;padding:3px 14px;border-radius:10px;letter-spacing:1px}
.bg-count{color:#ffe9a8;font-size:13px;font-weight:800}
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,150px);gap:14px;justify-content:center;padding:4px 0 10px}

/* 地图节点立体底座 */
.node-pedestal{animation:none}
#worldmap g.filter-raise{transform:translateY(-4px)}