:root{
  --ink:#172337;--muted:#627083;--paper:#fffdfa;--line:#dce2e8;--accent:#2f6f8f;
  --detective:#274b67;--magic:#6e4a73;--museum:#66522f;--forest:#315d49;
  --safe-top:max(12px,env(safe-area-inset-top));--safe-bottom:max(14px,env(safe-area-inset-bottom));
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:#eef2f3} body.large{font-size:118%}
button,input,select{font:inherit} button{touch-action:manipulation} button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f0a43a;outline-offset:3px}
.app{min-height:100dvh;display:flex;flex-direction:column;background:linear-gradient(#f6f8f8,#e9eeee)}
.topbar{min-height:58px;padding:var(--safe-top) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:12px;background:#152438;color:white;box-shadow:0 1px 10px #0002;z-index:5}
.brand{font-weight:700;letter-spacing:.03em}.top-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.mini{border:1px solid #ffffff55;background:#ffffff12;color:#fff;border-radius:10px;min-height:38px;padding:7px 10px}.mini:hover{background:#ffffff22}.mini.dev{border-color:#f0c67599}.sync-dot{width:9px;height:9px;border-radius:50%;background:#e0b44e;display:inline-block}.sync-dot.ok{background:#54b981}.sync-dot.error{background:#d86a62}
.main{flex:1;display:flex;align-items:stretch;justify-content:center;padding:20px max(14px,env(safe-area-inset-right)) calc(24px + var(--safe-bottom)) max(14px,env(safe-area-inset-left))}.screen{width:min(1040px,100%);min-height:calc(100dvh - 104px);position:relative}
.card{background:var(--paper);border:1px solid #d9dfe1;border-radius:18px;box-shadow:0 10px 35px #20304413;padding:clamp(22px,4vw,48px);min-height:72dvh;position:relative;overflow:hidden}.card.compact{min-height:58dvh}.card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--accent)}
.story.detective{--accent:var(--detective)}.story.magic{--accent:var(--magic)}.story.museum{--accent:var(--museum)}.story.forest{--accent:var(--forest)}
.story-art{height:190px;border-radius:16px;margin:-10px -10px 28px;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(160deg,#dfe9ed,#f7f1e3)}.story-art.detective{background:linear-gradient(145deg,#20384c,#668398)}.story-art.magic{background:linear-gradient(145deg,#493a5e,#ad7d90)}.story-art.museum{background:linear-gradient(145deg,#5b4c34,#b8a177)}.story-art.forest{background:linear-gradient(145deg,#244b3b,#74a37d)}
.story-art .scene-emoji{font-size:78px;filter:drop-shadow(0 8px 12px #0004)}
.story-title{font-size:clamp(30px,5vw,48px);margin:0 0 20px}.story-text{font-size:clamp(18px,2.5vw,24px);line-height:1.9;max-width:780px;margin:0 auto 20px;text-align:center}.subtle{color:var(--muted);font-size:14px}.arrow{position:absolute;right:clamp(18px,4vw,42px);bottom:clamp(18px,4vw,38px);width:62px;height:52px;border-radius:15px;border:0;background:#1f536e;color:white;font-size:30px;box-shadow:0 6px 16px #17384c33}.arrow:active{transform:translateY(1px)}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.setup-item{border:1px solid var(--line);border-radius:15px;padding:18px;background:#fff}.setup-item.full{grid-column:1/-1}.setup-item b{display:block;margin-bottom:12px}.slider-row{display:flex;align-items:center;gap:12px}.slider-row input{flex:1}.pill{background:#edf3f6;border-radius:999px;padding:5px 10px;min-width:58px;text-align:center}.button-row{display:flex;gap:10px;flex-wrap:wrap}.btn{border:0;background:#245f7b;color:white;min-height:46px;border-radius:12px;padding:10px 16px}.btn.secondary{background:#eef2f3;color:#213244;border:1px solid #cfd7db}.btn:disabled{opacity:.42}.voice-row{display:grid;grid-template-columns:1fr auto;gap:10px}.setup-note{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.55}
.map-road{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px 90px;padding:20px 8px 90px}.map-road::before{content:"";position:absolute;left:50%;top:0;bottom:20px;width:60px;transform:translateX(-50%);border-radius:30px;background:repeating-linear-gradient(#cbbd9f 0 26px,#b9aa8e 26px 28px);opacity:.68}.scene-node{z-index:1;border:1px solid #ccd4d7;background:#f2f4f4;border-radius:18px;padding:20px;text-align:center;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative}.scene-node:nth-child(even){transform:translateY(65px)}.scene-node .icon{font-size:52px}.scene-node.current{background:#fff;box-shadow:0 10px 25px #1b304025;border-color:#748f9b}.scene-node.current::after{content:"即将进入";position:absolute;top:10px;right:10px;font-size:12px;padding:4px 8px;border-radius:999px;background:#173b51;color:#fff}.scene-node.done{background:#f5faf6;border-color:#a8c2ae}.scene-node.locked{opacity:.5}.scene-node button{margin-top:8px}.scene-name{font-size:20px;font-weight:700}
.practice-corner{position:absolute;left:20px;top:18px;font-weight:700;font-size:18px}.trial-card{min-height:76dvh;display:flex;align-items:center;justify-content:center;padding:20px}.trial-stage{width:min(780px,100%);min-height:60dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}.audio-symbol{width:126px;height:126px;border-radius:30px;border:1px solid #cbd5da;background:#f7f9f9;display:grid;place-items:center;font-size:60px;animation:breathe 1.2s ease-in-out infinite}.audio-symbol.playing::after{content:"";position:absolute}.response-icon{width:160px;height:160px;border-radius:34px;border:2px solid #b8c4c9;background:white;display:grid;place-items:center;font-size:82px;box-shadow:0 8px 25px #20333d18}.response-icon:active{transform:scale(.98)}.safe-icon{width:190px;height:190px;border:0;border-radius:38px;background:#4a5c69;color:white;font-size:95px;box-shadow:inset 0 0 0 5px #ffffff55,0 12px 30px #1d273035}.safe-icon:active{transform:scale(.985)}
.feedback{font-size:clamp(28px,6vw,46px);font-weight:750;text-align:center}.feedback.good{color:#31704c}.feedback.bad{color:#a24c44}.choice-row{display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));gap:clamp(12px,3vw,24px);width:min(720px,100%)}.icon-choice{min-height:148px;border:2px solid #d4dade;border-radius:18px;background:#fff;padding:12px;display:grid;place-items:center}.icon-choice svg{width:100px;height:100px}.icon-choice.selected{border-color:#285f7d;background:#edf4f7;transform:translateY(-2px)}
.instrument-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.instrument-card{border:1px solid #d7dddf;background:#fff;border-radius:16px;padding:15px;min-height:165px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.instrument-card svg{width:96px;height:96px}.instrument-name{font-weight:650}.instrument-card.playing{border-color:#4e7b92;background:#eef5f7}
.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,20px);width:min(680px,100%)}.shape-btn{min-height:145px;border:2px solid #d5dcdf;border-radius:18px;background:#fff;display:grid;place-items:center}.shape-btn.selected{background:#e9f1f4;border-color:#2f6f8f}.shape{width:76px;height:76px;display:block}.shape.circle{border-radius:50%;background:#e36a58}.shape.square{background:#e2a63b}.shape.triangle{width:0;height:0;border-left:42px solid transparent;border-right:42px solid transparent;border-bottom:76px solid #4a7c9d}.shape.star{background:#8f67a6;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 92%,50% 70%,21% 92%,32% 56%,2% 35%,39% 35%)}
.answer-tools{display:flex;gap:12px;justify-content:center}.round-tool{width:58px;height:50px;border:1px solid #c8d1d5;border-radius:13px;background:#fff;font-size:25px}.round-tool.primary{background:#255f7b;color:#fff;border-color:#255f7b}.sequence-dots{min-height:30px;display:flex;gap:8px}.sequence-dots span{width:12px;height:12px;background:#466d82;border-radius:50%}
.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:min(760px,100%)}.color-btn{height:126px;border:5px solid #fff;border-radius:18px;box-shadow:0 0 0 1px #cbd2d5,0 6px 16px #00000010}.color-btn.selected{filter:brightness(.68);box-shadow:0 0 0 4px #172337,0 8px 20px #0002;transform:translateY(-3px)}.red{background:#d95145}.blue{background:#3978b8}.yellow{background:#e9bd3d}.green{background:#55a168}.purple{background:#8861a7}
.tone-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(560px,100%)}.tone-btn{height:122px;border-radius:25px;border:4px solid #fff;box-shadow:0 0 0 1px #aaa;font-size:0}.tone-btn.red{background:#d94b43}.tone-btn.blue{background:#3a70b5}.tone-btn:active{filter:brightness(.8)}
.distractor{width:min(500px,82vw);height:235px;position:relative;overflow:hidden;border-radius:22px;background:#f4f4f1;isolation:isolate}.distractor .obj{position:absolute;left:50%;top:50%;width:100px;height:100px;transform:translate(-50%,-50%)}.distractor.circle .obj{border-radius:50%}.distractor.square .obj{border-radius:8px}.distractor.triangle .obj{clip-path:polygon(50% 0,100% 100%,0 100%)}.distractor.star .obj{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 92%,50% 70%,21% 92%,32% 56%,2% 35%,39% 35%)}.distractor.ring .obj{border-radius:50%;background:transparent!important;border:12px solid currentColor}.rotate .obj{animation:rot 2s linear infinite}.scale .obj{animation:scale 1.1s ease-in-out infinite}.move .obj{animation:move 1.3s ease-in-out infinite}.jump .obj{animation:jump .9s ease-in-out infinite}.flip .obj{animation:flip 1s linear infinite}.shake .obj{animation:shake .35s linear infinite}.breathe .obj{animation:scale 1.6s ease-in-out infinite}.drift .obj{animation:drift 2s ease-in-out infinite}.pulse .obj{animation:pulse .75s ease-in-out infinite}.spiral .obj{animation:rot .9s linear infinite}.stripe{background:repeating-linear-gradient(90deg,#d9534f 0 14px,#3978b8 14px 28px);animation:stripe .6s linear infinite}.wave{background:repeating-radial-gradient(ellipse at 50% 50%,#87939a 0 8px,#e7ebed 9px 17px)}.particles::before{content:"✦  ·  ✧   ·   ✦  ·  ✧  ·  ✦";position:absolute;inset:20px;font-size:34px;word-spacing:28px;animation:drift 2s ease-in-out infinite;color:#d49851}.blackwhite{background:repeating-linear-gradient(90deg,#222 0 18px,#fff 18px 36px);animation:flash .32s steps(1) infinite}.glow{box-shadow:inset 0 0 60px #9b78b6aa}.afterimage .obj{box-shadow:26px 0 #e6bd5266,52px 0 #e6bd5233}.twist{background:repeating-radial-gradient(ellipse at 45% 50%,#adb4bb 0 5px,#eef0f0 7px 14px);animation:rot 1.5s linear infinite}.hotcold{background:linear-gradient(120deg,#dc665d,#f1d079,#63a5bf,#706daf);background-size:250% 250%;animation:bgmove 1.8s ease infinite}.alternate{animation:alt .55s steps(1) infinite}
.info-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px}.field input,.field select{min-height:46px;border:1px solid #bcc8cd;border-radius:10px;padding:9px 11px;background:#fff}.field.full{grid-column:1/-1}.submit{margin-top:18px}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.result-list{display:grid;gap:10px}.result-line{display:flex;justify-content:space-between;border-bottom:1px solid #e2e6e8;padding:10px 0}.radar-box{display:grid;place-items:center}.radar-box canvas{width:min(440px,100%);height:auto}.achievement{margin-top:20px;padding:18px;border-radius:15px;background:#f1f5f5;line-height:1.8}.export-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#172337;color:white;padding:10px 15px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes breathe{50%{transform:scale(1.04)}}@keyframes rot{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes scale{50%{transform:translate(-50%,-50%) scale(1.4)}}@keyframes move{50%{left:78%}}@keyframes jump{50%{top:27%}}@keyframes flip{to{transform:translate(-50%,-50%) rotateY(360deg)}}@keyframes shake{25%{transform:translate(-54%,-50%)}75%{transform:translate(-46%,-50%)}}@keyframes drift{50%{transform:translate(-35%,-35%)}}@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.3);filter:brightness(1.6)}}@keyframes stripe{to{background-position:28px 0}}@keyframes flash{50%{filter:invert(1)}}@keyframes bgmove{50%{background-position:100% 50%}}@keyframes alt{50%{filter:hue-rotate(160deg)}}
@media(max-width:760px){.topbar{align-items:flex-start}.brand{padding-top:8px}.top-actions{gap:5px}.mini{min-height:36px;padding:6px 8px;font-size:13px}.main{padding-top:12px}.card{border-radius:14px;padding:22px 16px;min-height:76dvh}.setup-grid,.report-grid,.info-form{grid-template-columns:1fr}.setup-item.full,.field.full{grid-column:auto}.map-road{grid-template-columns:1fr;gap:14px;padding-bottom:25px}.map-road::before{display:none}.scene-node:nth-child(even){transform:none}.scene-node{min-height:112px}.choice-row{grid-template-columns:repeat(3,1fr);gap:8px}.icon-choice{min-height:116px;padding:6px}.icon-choice svg{width:76px;height:76px}.instrument-grid{grid-template-columns:repeat(2,1fr)}.shape-grid{grid-template-columns:repeat(2,1fr)}.shape-btn{min-height:112px}.color-grid{grid-template-columns:repeat(5,1fr);gap:6px}.color-btn{height:94px;border-radius:12px}.trial-stage{min-height:68dvh}.audio-symbol{width:108px;height:108px}.response-icon{width:145px;height:145px}.safe-icon{width:168px;height:168px}.story-art{height:150px}.arrow{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:8}}
@media(min-width:761px) and (max-width:1100px){.main{padding-inline:20px}.card{min-height:68dvh}}

/* ========================================================================== 
   卡通游戏化视觉层
   说明：只覆盖表现层，不改变题目、时序、计分与数据记录。
   ========================================================================== */
:root{
  --sky:#dff3ff;
  --sky2:#f7fbff;
  --cream:#fff8e8;
  --navy:#23415b;
  --detective2:#6e9fbe;
  --magic2:#b58ac1;
  --museum2:#d0ad68;
  --forest2:#7ab38a;
  --sun:#ffd870;
  --coral:#e87862;
  --bluebtn:#4b8bb5;
  --shadow:0 10px 24px rgba(35,65,91,.14);
}
html,body{background:#dceef5}
body{
  background:
    radial-gradient(circle at 9% 9%,rgba(255,255,255,.96) 0 38px,transparent 39px),
    radial-gradient(circle at 15% 9%,rgba(255,255,255,.92) 0 28px,transparent 29px),
    radial-gradient(circle at 89% 16%,rgba(255,255,255,.92) 0 34px,transparent 35px),
    linear-gradient(180deg,#dff4ff 0%,#f7fcff 48%,#edf7ef 100%);
}
.app{
  position:relative;
  background:
    linear-gradient(180deg,rgba(219,243,255,.94) 0%,rgba(249,253,255,.96) 46%,rgba(238,248,239,.98) 100%);
}
.app::before,.app::after{
  content:"";position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:none;
}
.app::before{width:56vw;height:22vw;min-height:190px;left:-18vw;bottom:-8vw;background:#b9dfac;box-shadow:35vw 7vw 0 #c8e5b8}
.app::after{width:54vw;height:18vw;right:-20vw;bottom:-7vw;background:#a9d59f;opacity:.92}
.topbar{
  background:linear-gradient(180deg,#244865,#1d3c56);
  border-bottom:3px solid rgba(255,216,112,.85);
  box-shadow:0 4px 15px rgba(20,45,64,.18);
}
.brand{font-weight:900;letter-spacing:.05em;text-shadow:0 1px 0 rgba(255,255,255,.12)}
.brand::before{content:"♪";display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;background:#ffd66d;color:#31516b;box-shadow:inset 0 -2px 0 #d8a83e}
.mini{border-radius:999px;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34);font-weight:700}
.mini:hover{background:rgba(255,255,255,.22)}
.mini.dev{background:#fff0b8;color:#28455c;border-color:#f2cf6c}
.main{position:relative;z-index:1}
.screen{z-index:1}
.card{
  background:
    radial-gradient(circle at 13px 13px,rgba(241,215,153,.18) 0 2px,transparent 2.5px) 0 0/28px 28px,
    linear-gradient(180deg,#fffdf8,#fffaf0);
  border:2px solid rgba(70,97,117,.15);
  border-radius:28px;
  box-shadow:0 12px 0 rgba(88,117,95,.07),0 18px 40px rgba(41,73,91,.13);
}
.card::before{height:7px;border-radius:28px 28px 0 0}
.card::after{content:"♫";position:absolute;right:22px;top:18px;color:rgba(67,98,119,.09);font-size:48px;font-weight:900;pointer-events:none}
.story-title{font-weight:950;letter-spacing:.02em;color:#294760;text-align:center;text-shadow:0 2px 0 #fff}
.story-text{color:#35495c;font-weight:600}
.story-art{
  min-height:205px;height:auto;padding:22px;border:3px solid rgba(255,255,255,.62);box-shadow:inset 0 -12px 0 rgba(0,0,0,.05),0 7px 18px rgba(36,64,83,.12);
  isolation:isolate;
}
.story-art::before{content:"";position:absolute;left:-8%;right:-8%;bottom:-37%;height:68%;border-radius:50%;background:rgba(255,255,255,.22);z-index:-1}
.story-art::after{content:"♪  ♫  ♪";position:absolute;right:18px;top:14px;color:rgba(255,255,255,.58);font-size:25px;letter-spacing:7px;transform:rotate(-5deg)}
.story-art.detective{background:linear-gradient(155deg,#2d536e,#719bb4 58%,#f1c36d)}
.story-art.magic{background:linear-gradient(155deg,#604d78,#a379ad 58%,#e6c4d8)}
.story-art.museum{background:linear-gradient(155deg,#7d6740,#caa968 58%,#f2dba8)}
.story-art.forest{background:linear-gradient(155deg,#315c47,#72aa78 58%,#bde0a2)}
.story-art .scene-emoji{font-size:92px;filter:drop-shadow(0 8px 0 rgba(36,49,58,.17)) drop-shadow(0 11px 15px rgba(20,36,48,.18));animation:cartoonFloat 3.2s ease-in-out infinite}
.story.detective .story-title{color:#234d69}.story.magic .story-title{color:#684d78}.story.museum .story-title{color:#725927}.story.forest .story-title{color:#315b43}
.arrow{
  width:68px;height:58px;border-radius:21px;background:linear-gradient(180deg,#5ca0c8,#3d7ca5);border:3px solid #fff7d9;
  box-shadow:0 5px 0 #2f6383,0 10px 20px rgba(39,74,97,.2);font-weight:950;transition:.12s transform,.12s box-shadow;
}
.arrow:hover{transform:translateY(-2px);box-shadow:0 7px 0 #2f6383,0 13px 22px rgba(39,74,97,.18)}
.arrow:active{transform:translateY(3px);box-shadow:0 2px 0 #2f6383,0 5px 12px rgba(39,74,97,.18)}
.btn{
  border:2px solid #315d79;border-radius:16px;background:linear-gradient(180deg,#5b98bd,#3d7da5);box-shadow:0 4px 0 #2f6484;color:#fff;font-weight:850;transition:.12s transform,.12s box-shadow;
}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #2f6484}.btn.secondary{background:#fffdf6;color:#36516a;border-color:#b9c7cf;box-shadow:0 3px 0 #d5dfe4}.btn:disabled{box-shadow:none}
/* 调试页：像游戏开始前的“耳机检查站”，不增加额外标题 */
.setup-grid{position:relative}.setup-grid::before{content:"🎧";position:absolute;right:12px;top:-12px;font-size:54px;opacity:.13;transform:rotate(10deg)}
.setup-item{background:rgba(255,255,255,.88);border:2px solid #d9e4e8;border-radius:20px;box-shadow:0 5px 0 rgba(67,98,118,.06)}
.setup-item b{color:#31516a}.pill{background:#e8f5fb;border:1px solid #bfdce8;color:#35627d;font-weight:800}
input[type="range"]{accent-color:#4f91b7}
/* 场景地图：固定顺序，仍然保持冒险地图感 */
.map-road{padding:26px 12px 100px;gap:26px 98px}
.map-road::before{width:72px;background:repeating-linear-gradient(180deg,#e0c998 0 25px,#c9b27e 25px 29px);border:4px solid rgba(113,91,51,.12);box-shadow:inset 0 0 0 6px rgba(255,255,255,.18)}
.scene-node{
  min-height:170px;border:3px solid rgba(53,79,96,.14);border-radius:24px;background:linear-gradient(180deg,#fffdf7,#f4f7f2);box-shadow:0 7px 0 rgba(66,91,75,.08);overflow:visible;
}
.scene-node::before{content:"";position:absolute;left:50%;top:-18px;transform:translateX(-50%);width:76px;height:34px;background:#d9775f;clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 2px 0 #aa5948)}
.scene-node .icon{font-size:62px;filter:drop-shadow(0 5px 0 rgba(30,58,74,.12));transition:.2s transform}.scene-node.current .icon{animation:mapBounce 1.6s ease-in-out infinite}.scene-node.current{background:linear-gradient(180deg,#fffef8,#edf7fb);border-color:#6da3bd;box-shadow:0 9px 0 rgba(57,107,132,.12),0 13px 28px rgba(49,84,104,.12)}
.scene-node.current::after{background:#f3c967;color:#3f4b55;font-weight:850;box-shadow:0 2px 0 #d4a63b}.scene-node.done{background:linear-gradient(180deg,#fbfff8,#eef8ed);border-color:#8cbc8d}.scene-node.done::after{content:"✓";position:absolute;right:12px;top:10px;background:#5f9b6d;color:#fff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-weight:900}
.scene-node.locked{opacity:.48;filter:saturate(.7)}
.scene-name{font-weight:900;color:#324d62}
/* 练习与正式页：保持干净，但控件有“玩具卡牌”触感 */
.trial-card{background:linear-gradient(180deg,#fffdf7,#f8fbf6);border-radius:28px}
.trial-card::after{content:""}
.practice-corner{left:18px;top:16px;background:#fff0a7;color:#574b2a;border:2px solid #dfbd51;border-radius:999px;padding:7px 14px;box-shadow:0 3px 0 #c99f33;font-weight:900}
.trial-stage{gap:28px}
.audio-symbol{position:relative;background:linear-gradient(180deg,#fff,#eef7fb);border:3px solid #b9d4e2;border-radius:38px;box-shadow:0 7px 0 #d6e8f0,0 12px 24px rgba(56,91,110,.12);font-size:62px}
.audio-symbol::before{content:"♪";position:absolute;right:-16px;top:-13px;font-size:30px;color:#e4a941;animation:notePop 1.4s ease-in-out infinite}
.response-icon{border:4px solid #ead7a2;border-radius:42px;background:linear-gradient(180deg,#fffefa,#fff5da);box-shadow:0 8px 0 #eadfbf,0 14px 28px rgba(80,68,40,.12)}
.response-icon:hover{transform:translateY(-2px)}.response-icon:active{transform:translateY(4px);box-shadow:0 3px 0 #eadfbf}
.safe-icon{background:linear-gradient(180deg,#527184,#3b5566);border:5px solid #d8b95c;box-shadow:inset 0 0 0 5px rgba(255,255,255,.22),0 9px 0 #29404f,0 16px 30px rgba(25,43,55,.22)}
.safe-icon:hover{transform:translateY(-2px)}.safe-icon:active{transform:translateY(5px);box-shadow:inset 0 0 0 5px rgba(255,255,255,.22),0 4px 0 #29404f}
.feedback{position:relative;padding:18px 24px;border-radius:25px;background:#fffdf6;border:3px solid #dfd7bd;box-shadow:0 7px 0 rgba(112,91,44,.08)}
.feedback::before{content:"✦";margin-right:10px;color:#e8b448}.feedback.good{color:#34744d;border-color:#a8d5ae;background:#f4fff3}.feedback.bad{color:#a34e47;border-color:#e1b2ac;background:#fff5f3}
.choice-row{gap:clamp(14px,3vw,28px)}
.icon-choice,.instrument-card,.shape-btn{border:3px solid #d9e1e2;border-radius:24px;background:linear-gradient(180deg,#fffefc,#f8f7ef);box-shadow:0 6px 0 #e1e6e5;transition:.14s transform,.14s filter,.14s box-shadow}
.icon-choice:hover,.instrument-card:hover,.shape-btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 #e1e6e5}.icon-choice:active,.instrument-card:active,.shape-btn:active{transform:translateY(3px);box-shadow:0 3px 0 #e1e6e5}
.icon-choice.selected,.instrument-card.playing,.shape-btn.selected{border-color:#5790ad;background:#eaf6fb;box-shadow:0 5px 0 #bdd8e5;filter:saturate(1.15)}
.instrument-name{color:#42576a;font-weight:850}
.shape{filter:drop-shadow(0 5px 0 rgba(41,63,77,.12))}.shape.circle{background:#e76e5c}.shape.square{background:#e6ac45}.shape.triangle{border-bottom-color:#4f83aa}.shape.star{background:#9b6eaf}
.round-tool{border:3px solid #d8e0df;border-radius:18px;background:#fffdf8;box-shadow:0 4px 0 #e2e6e4;font-weight:900}.round-tool.primary{background:#4e8dad;border-color:#3e7795;box-shadow:0 4px 0 #2e6380}.round-tool:active{transform:translateY(3px);box-shadow:none}
.sequence-dots span{width:14px;height:14px;background:#e6b64d;border:2px solid #fff;box-shadow:0 0 0 1px #be9236}
.color-btn{border:6px solid #fffef7;border-radius:22px;box-shadow:0 0 0 2px #d4d9d7,0 7px 0 #d9ddda,0 12px 22px rgba(45,62,67,.1);transition:.13s transform,.13s filter,.13s box-shadow}.color-btn:hover{transform:translateY(-3px)}.color-btn.selected{filter:brightness(.72) saturate(1.25);box-shadow:0 0 0 5px #324b5e,0 8px 0 #c7cbc8;transform:translateY(-3px) scale(1.04)}
.tone-btn{border-radius:30px;border:6px solid #fffef8;box-shadow:0 0 0 2px #c9d0d1,0 8px 0 rgba(68,82,86,.18),0 14px 26px rgba(40,61,70,.12)}.tone-btn:active{transform:translateY(5px);box-shadow:0 0 0 2px #c9d0d1,0 3px 0 rgba(68,82,86,.18)}
.distractor{border:4px solid #fff;background-color:#f4f7f2;box-shadow:0 7px 0 #dfe8de,0 12px 24px rgba(39,61,47,.1)}
/* 结果页：继续是游戏报告，不显示心理学维度标签 */
.result-line{padding:12px 14px;border:2px solid #e2e5df;border-radius:14px;background:#fffdf7}.result-line b{color:#315e78}.achievement{background:#fff4cf;border:2px solid #ead18a;box-shadow:0 5px 0 rgba(184,145,57,.08)}
.radar-box{background:linear-gradient(180deg,#f9fdff,#f5faf3);border:2px solid #dae5e5;border-radius:22px;padding:14px}.export-row{justify-content:center}
/* 小屏幕保持卡通，但不会让正式作答控件拥挤 */
@media(max-width:760px){
  body{background:linear-gradient(180deg,#e0f4ff,#fbfdff 50%,#eff8ef)}
  .app::before{width:88vw;height:36vw;left:-35vw;bottom:-12vw}.app::after{width:85vw;height:31vw;right:-38vw;bottom:-10vw}
  .topbar{border-bottom-width:2px}.brand{font-size:15px}.brand::before{width:24px;height:24px;margin-right:5px}
  .card{border-radius:22px;padding:22px 15px;box-shadow:0 8px 0 rgba(72,100,82,.06),0 13px 26px rgba(41,73,91,.1)}
  .story-art{min-height:155px;padding:14px;margin:-7px -5px 24px}.story-art .scene-emoji{font-size:74px}.story-title{font-size:30px}.story-text{font-size:18px;line-height:1.78}
  .scene-node{border-radius:20px}.scene-node::before{top:-13px;width:58px;height:27px}.scene-node .icon{font-size:54px}
  .practice-corner{font-size:15px;padding:6px 11px}
  .audio-symbol{width:112px;height:112px;border-radius:32px}.response-icon{width:146px;height:146px;border-radius:36px}.safe-icon{width:168px;height:168px;border-radius:36px}
  .instrument-card,.shape-btn,.icon-choice{border-radius:20px}.color-btn{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
@keyframes cartoonFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes mapBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes notePop{0%,100%{transform:translateY(2px) rotate(-10deg);opacity:.45}50%{transform:translateY(-7px) rotate(8deg);opacity:1}}

/* 依据《题目设计3.0 (1)》的页面呈现规则：未标黄的被试文本使用纯白背景。
   黄色高亮内容仅作为程序实现要求，不作为被试文本或指导语直接渲染。 */
body,.app,.main{background:#fff!important}
.script-card{
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  min-height:72dvh;
}
.script-card::before,.script-card::after{display:none!important}
.script-card .story-title{
  color:#111!important;
  text-shadow:none!important;
  font-weight:700!important;
}
.script-card .story-text{
  color:#111!important;
  font-weight:400!important;
  background:#fff!important;
}
.script-card .feedback{
  background:#fff!important;
  box-shadow:none!important;
  border:0!important;
}
.script-card .feedback::before{display:none!important}
/* 文本说明页不再使用彩色情景横幅；卡通元素保留在地图、图标和正式交互控件中。 */
.script-card .story-art{display:none!important}
@media(max-width:760px){
  body,.app,.main{background:#fff!important}
  .script-card{padding:28px 18px!important}
}

/* ===== 最新统一视觉：保留清爽文字页，但不再使用纯白底 =====
   页面正文仍直接呈现，不加多余横幅；全站使用同一套柔和浅色画布与暖白内容卡。 */
:root{
  --canvas-a:#edf7f8;
  --canvas-b:#f7f4ea;
  --canvas-c:#eef6ed;
  --panel-soft:#fffdf8;
  --panel-line:#d9e6e5;
}
html,body{background:#edf7f8!important}
body,.app,.main{
  background:
    radial-gradient(circle at 12% 9%,rgba(143,202,220,.24) 0 10%,transparent 28%),
    radial-gradient(circle at 88% 88%,rgba(171,207,163,.20) 0 10%,transparent 30%),
    linear-gradient(145deg,var(--canvas-a) 0%,#f8faf6 48%,var(--canvas-b) 100%)!important;
}
.app{position:relative;isolation:isolate}
.app::before,.app::after{
  content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(1px);opacity:.55
}
.app::before{width:240px;height:240px;left:-90px;top:120px;background:rgba(136,197,214,.22)}
.app::after{width:300px;height:300px;right:-130px;bottom:30px;background:rgba(174,207,158,.20)}
.main{background:transparent!important}
.card,.script-card{
  background:rgba(255,253,248,.95)!important;
  border:1px solid var(--panel-line)!important;
  box-shadow:0 12px 34px rgba(46,78,91,.10)!important;
  border-radius:24px!important;
}
.script-card::before{display:block!important;background:linear-gradient(90deg,#82b9c8,#e3c675,#8fbd91)!important;height:4px!important}
.script-card::after{display:none!important}
.script-card .story-title{color:#24384a!important}
.script-card .story-text{color:#253747!important;background:transparent!important}
.script-card .feedback{background:rgba(255,255,255,.60)!important;border:1px solid #e4e9e5!important;border-radius:20px!important;padding:20px 24px!important}

/* 欢迎页：只用统一视觉做轻量氛围，不改变文档文字。 */
.welcome-card{
  min-height:72dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.welcome-card::after{
  display:block!important;
  content:"";
  position:absolute;
  width:360px;height:360px;
  right:-140px;top:-170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,178,199,.22),rgba(111,178,199,0) 70%);
  pointer-events:none;
}
.welcome-copy{position:relative;z-index:1;max-width:780px;padding:24px 12px 56px}
.welcome-copy .story-title{font-size:clamp(34px,6vw,58px);margin-bottom:26px}
.welcome-copy .story-text{font-size:clamp(20px,3vw,27px);line-height:1.9;margin:0 auto}
.welcome-motif{position:absolute;inset:0;pointer-events:none;opacity:.20;color:#4d829a;font-weight:900}
.welcome-motif span{position:absolute;font-size:clamp(34px,6vw,64px);animation:welcomeFloat 5s ease-in-out infinite}
.welcome-motif span:nth-child(1){left:10%;top:18%;transform:rotate(-12deg)}
.welcome-motif span:nth-child(2){right:12%;top:27%;animation-delay:.7s;transform:rotate(8deg)}
.welcome-motif span:nth-child(3){left:18%;bottom:18%;animation-delay:1.2s;transform:rotate(14deg)}
@keyframes welcomeFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* 调试页、地图、故事页同一底色体系，不出现突兀的纯白画布。 */
.setup-item,.scene-node,.trial-card,.instrument-card,.icon-choice,.shape-btn,.round-tool{
  background:rgba(255,255,255,.78)!important;
}
.map-road::before{opacity:.72}
@media(max-width:760px){
  body,.app,.main{
    background:linear-gradient(155deg,#eaf6f8 0%,#fbfaf4 54%,#eef7ed 100%)!important;
  }
  .card,.script-card{border-radius:20px!important}
  .welcome-copy{padding:16px 6px 64px}
  .welcome-motif span:nth-child(1){left:5%;top:15%}
  .welcome-motif span:nth-child(2){right:6%;top:23%}
  .welcome-motif span:nth-child(3){left:8%;bottom:18%}
}

/* ===== 最终界面修订：更精致的卡通小游戏视觉，同时保持正式作答区域清晰 ===== */
:root{
  --ui-ink:#26384a;
  --ui-muted:#6f7d87;
  --ui-line:#d6e3e5;
  --ui-paper:#fffdf8;
  --ui-shadow:0 18px 48px rgba(45,72,84,.12);
  --ui-blue:#6aa9c6;
  --ui-gold:#e6be66;
  --ui-green:#8cb99a;
  --ui-purple:#a78ab2;
}
html,body{min-height:100%;background:#eef7f5!important}
body{
  color:var(--ui-ink);
  background:
    radial-gradient(circle at 10% 14%,rgba(114,184,210,.20) 0 10%,transparent 26%),
    radial-gradient(circle at 88% 17%,rgba(232,199,116,.18) 0 9%,transparent 24%),
    radial-gradient(circle at 84% 88%,rgba(137,190,153,.18) 0 11%,transparent 27%),
    linear-gradient(145deg,#edf8f8 0%,#f8faf4 45%,#f7f1e7 100%)!important;
}
.app,.main{background:transparent!important}
.app::before{width:260px;height:260px;left:-130px;top:18vh;background:rgba(105,174,200,.15);filter:blur(4px)}
.app::after{width:340px;height:340px;right:-170px;bottom:-40px;background:rgba(147,192,155,.14);filter:blur(5px)}

.topbar{
  min-height:64px;
  background:rgba(255,253,248,.88)!important;
  color:var(--ui-ink)!important;
  border-bottom:1px solid rgba(110,145,157,.16);
  box-shadow:0 7px 26px rgba(43,70,82,.08)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;color:#315466;letter-spacing:.04em}
.brand::before{content:"♪";width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#79b7cf,#5b97b4);color:#fff;box-shadow:0 4px 0 #4f8199;font-size:19px}
.mini{background:#fff!important;color:#46606d!important;border:1px solid #d6e1e3!important;border-radius:13px!important;box-shadow:0 3px 0 rgba(92,121,132,.08);font-weight:750}
.mini:hover{background:#f4fafb!important}.mini:active{transform:translateY(2px);box-shadow:none}.mini.dev{border-color:#e2cf9b!important;color:#725d29!important;background:#fffaf0!important}

.main{padding-top:26px!important}.screen{width:min(1060px,100%)}
.flow-screen{animation:screenIn .28s cubic-bezier(.2,.7,.2,1) both}
.timed-screen{animation:none!important}
@keyframes screenIn{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}

.card,.script-card{
  border:1px solid rgba(126,157,165,.18)!important;
  background:rgba(255,253,248,.96)!important;
  box-shadow:var(--ui-shadow)!important;
  border-radius:30px!important;
}
.script-card{padding:clamp(28px,5vw,58px)!important}
.script-card::before{height:5px!important;border-radius:30px 30px 0 0;background:linear-gradient(90deg,#76b1c7,#e4bf68,#91b89a)!important}
.story-title{color:#294052!important;font-weight:900!important;letter-spacing:.01em;line-height:1.2}
.story-text{max-width:820px!important;color:#334756!important;font-weight:500!important;line-height:1.9!important}

/* 情景说明页保持统一结构，但每个场景有低干扰的卡通气氛 */
.script-card.detective{background:linear-gradient(145deg,rgba(255,253,248,.98),rgba(239,248,252,.98))!important}
.script-card.magic{background:linear-gradient(145deg,rgba(255,253,248,.98),rgba(249,242,251,.98))!important}
.script-card.museum{background:linear-gradient(145deg,rgba(255,253,248,.98),rgba(252,247,235,.98))!important}
.script-card.forest{background:linear-gradient(145deg,rgba(255,253,248,.98),rgba(241,249,241,.98))!important}
.script-card.detective::after,.script-card.magic::after,.script-card.museum::after,.script-card.forest::after{
  display:block!important;position:absolute;right:28px;top:26px;pointer-events:none;opacity:.12;font-size:74px;line-height:1;filter:saturate(.85)
}
.script-card.detective::after{content:"🔎"}.script-card.magic::after{content:"🎻"}.script-card.museum::after{content:"🏛️"}.script-card.forest::after{content:"🍃"}

.welcome-card{min-height:76dvh!important;background:linear-gradient(145deg,rgba(255,253,248,.98),rgba(241,250,249,.98))!important}
.welcome-card .welcome-copy{padding-bottom:70px}.welcome-card .story-title{color:#2f5568!important}.welcome-card .story-text{color:#3a5360!important}
.welcome-motif{opacity:.18!important;color:#548da7!important}.welcome-motif span{filter:drop-shadow(0 5px 10px rgba(62,105,126,.12))}

.arrow{
  right:clamp(22px,4vw,46px);bottom:clamp(22px,4vw,42px);
  width:70px;height:58px;border-radius:21px!important;
  background:linear-gradient(180deg,#72afca,#4d8fae)!important;
  border:3px solid rgba(255,255,255,.92)!important;
  box-shadow:0 6px 0 #3e7894,0 12px 24px rgba(55,99,120,.18)!important;
}
.arrow:hover{transform:translateY(-2px)}.arrow:active{transform:translateY(4px);box-shadow:0 2px 0 #3e7894!important}

/* 地图更像轻量冒险路线，但仍按固定顺序进入 */
.map-road{gap:30px 104px;padding:28px 16px 104px}
.map-road::before{width:76px;border:4px solid rgba(133,108,59,.10);background:repeating-linear-gradient(180deg,#ead3a0 0 26px,#d2b982 26px 30px)!important;box-shadow:inset 0 0 0 7px rgba(255,255,255,.18)}
.scene-node{min-height:180px;border-radius:27px!important;background:linear-gradient(180deg,#fffefa,#f5f8f3)!important;border:2px solid rgba(77,106,117,.14)!important;box-shadow:0 8px 0 rgba(75,102,92,.07),0 16px 28px rgba(39,68,79,.08)!important}
.scene-node::before{top:-19px;width:78px;height:36px;background:linear-gradient(145deg,#db8269,#c96755)!important;filter:drop-shadow(0 3px 0 rgba(120,66,54,.18))}
.scene-node .icon{font-size:66px!important;filter:drop-shadow(0 7px 8px rgba(52,76,85,.12))}
.scene-node.current{border-color:#79aac0!important;background:linear-gradient(180deg,#fffefa,#edf7fb)!important;box-shadow:0 9px 0 rgba(82,142,169,.10),0 20px 35px rgba(54,94,112,.12)!important}
.scene-node.current::after{background:#f3c96e!important;color:#4b4b42!important;border:1px solid rgba(146,111,33,.10);box-shadow:0 3px 0 rgba(171,127,36,.15)!important}
.scene-node.done{border-color:#99c2a1!important;background:linear-gradient(180deg,#fffefa,#eef8ef)!important}.scene-name{font-size:21px!important;color:#355267!important}

/* 练习/正式作答：清晰、精致，不增加会干扰反应的装饰 */
.trial-card{min-height:78dvh!important;background:linear-gradient(180deg,rgba(255,254,250,.98),rgba(248,251,247,.98))!important;border-radius:30px!important;box-shadow:var(--ui-shadow)!important}
.trial-stage{min-height:62dvh!important;gap:30px!important}
.practice-corner{background:#fff0b9!important;color:#66532a!important;border-color:#e2c36c!important;box-shadow:0 4px 0 rgba(188,151,57,.18)!important;letter-spacing:.04em}
.audio-symbol{width:132px;height:132px;border-radius:40px!important;background:linear-gradient(180deg,#ffffff,#edf7fa)!important;border:3px solid #bfdce8!important;box-shadow:0 8px 0 #d8eaf0,0 16px 28px rgba(61,103,121,.12)!important}
.audio-symbol::before{right:-12px;top:-14px;color:#e1af45!important;font-size:32px!important}
.response-icon{width:168px;height:168px;border-radius:46px!important;background:linear-gradient(180deg,#fffefb,#fff4d9)!important;border-color:#ecd89b!important;box-shadow:0 9px 0 #ecdfbd,0 18px 32px rgba(92,77,38,.12)!important}
.safe-icon{width:196px;height:196px;border-radius:44px!important;background:linear-gradient(180deg,#5a7789,#395768)!important;border:6px solid #e0c56d!important;box-shadow:inset 0 0 0 5px rgba(255,255,255,.18),0 10px 0 #2d4757,0 18px 34px rgba(35,61,75,.20)!important}

.feedback{font-weight:900!important;letter-spacing:.02em}.auto-feedback .trial-stage{min-height:55dvh}.auto-next-hint{display:flex;gap:8px;height:18px;align-items:center;justify-content:center;opacity:.48}.auto-next-hint span{width:8px;height:8px;border-radius:50%;background:#6e93a4;animation:autoDot 1s ease-in-out infinite}.auto-next-hint span:nth-child(2){animation-delay:.14s}.auto-next-hint span:nth-child(3){animation-delay:.28s}@keyframes autoDot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.auto-story{min-height:62dvh!important;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.auto-story .auto-next-hint{margin-top:20px}

.btn{min-height:48px;border-radius:16px!important;background:linear-gradient(180deg,#68a4c0,#4787a6)!important;border:2px solid #3e7894!important;box-shadow:0 4px 0 #376d86!important;font-weight:850!important}.btn.secondary{background:#fffdf7!important;color:#415968!important;border-color:#c8d7db!important;box-shadow:0 3px 0 #dde7e9!important}
.button-row{justify-content:center;gap:14px!important}

/* 乐器：六种图标、六种音频严格按同一 stim 键绑定；视觉上也进一步区分 */
.instrument-grid{gap:18px!important}.instrument-card,.icon-choice{background:linear-gradient(180deg,#fffefa,#f7faf5)!important;border-width:2px!important;box-shadow:0 7px 0 rgba(75,99,89,.08),0 13px 24px rgba(51,76,85,.08)!important}
.instrument-card{min-height:180px!important;border-radius:25px!important}.instrument-card svg{width:108px!important;height:108px!important}.instrument-name{font-size:17px;color:#3f5766!important}
.instrument-option{min-height:165px!important;border-radius:25px!important;position:relative;overflow:hidden}.instrument-option svg{width:112px!important;height:112px!important;position:relative;z-index:1}
.instrument-piano{background:linear-gradient(180deg,#fffefa,#eef4f7)!important}.instrument-violin{background:linear-gradient(180deg,#fffefa,#fbf1ec)!important}.instrument-guitar{background:linear-gradient(180deg,#fffefa,#f8f0df)!important}.instrument-guzheng{background:linear-gradient(180deg,#fffefa,#f5f0e2)!important}.instrument-erhu{background:linear-gradient(180deg,#fffefa,#edf5f3)!important}.instrument-pipa{background:linear-gradient(180deg,#fffefa,#f5edf7)!important}
.instrument-option.selected{border-color:#5c95ad!important;box-shadow:0 6px 0 #c4dce6,0 13px 24px rgba(46,89,108,.12)!important}
.instrument-choices{width:min(760px,100%)!important}
.trial-orbit{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.16}.trial-orbit span{position:absolute;color:#735b9a;font-size:28px}.trial-orbit span:first-child{left:17%;top:27%;animation:floatNote 2.4s ease-in-out infinite}.trial-orbit span:last-child{right:18%;bottom:27%;animation:floatNote 2.8s ease-in-out infinite reverse}@keyframes floatNote{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-8px) rotate(8deg)}}

.shape-btn{min-height:152px!important;border-radius:25px!important;background:linear-gradient(180deg,#fffefa,#f8faf6)!important}.shape-btn.selected{background:#e8f3f6!important;border-color:#5e96ad!important;box-shadow:0 6px 0 #c9dfe7!important}.shape{width:82px;height:82px}.round-tool{border-radius:18px!important;min-width:60px;height:54px!important}
.color-btn{height:134px!important;border-radius:24px!important}.color-btn.selected{transform:translateY(-4px) scale(1.045)!important}
.tone-btn{height:130px!important;border-radius:31px!important}.distractor{height:245px!important;border-radius:26px!important;background:#f5f7f2!important}

.result-line{background:rgba(255,255,255,.72)!important;border-color:#dce6e4!important;border-radius:16px!important}.achievement{border-radius:18px!important}.radar-box{background:linear-gradient(180deg,#f8fcfd,#f6faf4)!important;border-radius:24px!important}

@media(max-width:760px){
  .main{padding:16px 12px calc(18px + var(--safe-bottom))!important}.topbar{min-height:58px}.top-actions{gap:5px}.mini{padding:6px 8px;min-height:35px;font-size:13px}.mini.dev{display:none}
  .card,.script-card{border-radius:24px!important;padding:24px 16px!important}.script-card::before{border-radius:24px 24px 0 0!important}.script-card.detective::after,.script-card.magic::after,.script-card.museum::after,.script-card.forest::after{font-size:52px;right:16px;top:18px}
  .story-title{font-size:30px!important;padding-right:46px}.story-text{font-size:18px!important;line-height:1.82!important}.welcome-copy .story-title{padding-right:0!important}.welcome-card{min-height:74dvh!important}.welcome-copy{padding:12px 4px 64px!important}
  .map-road{gap:22px 34px!important;padding:20px 0 88px!important}.map-road::before{width:48px!important}.scene-node{min-height:155px!important;padding:16px 10px!important}.scene-node:nth-child(even){transform:translateY(56px)!important}.scene-node .icon{font-size:52px!important}.scene-name{font-size:16px!important}.scene-node.current::after{font-size:10px!important}
  .trial-card{padding:18px 12px!important}.practice-corner{left:13px;top:12px}.audio-symbol{width:112px;height:112px}.response-icon{width:150px;height:150px}.safe-icon{width:172px;height:172px}.trial-stage{gap:24px!important}
  .instrument-grid{grid-template-columns:repeat(2,1fr)!important}.instrument-card{min-height:155px!important}.instrument-card svg{width:88px!important;height:88px!important}.instrument-name{font-size:15px}.choice-row{gap:12px!important}.instrument-option{min-height:135px!important}.instrument-option svg{width:86px!important;height:86px!important}
  .shape-grid{grid-template-columns:repeat(2,1fr)!important}.shape-btn{min-height:130px!important}.color-grid{gap:8px!important}.color-btn{height:104px!important}.distractor{height:215px!important}.tone-btn{height:112px!important}
  .arrow{width:64px;height:54px;right:18px;bottom:18px}
}

/* ===== 本轮视觉与流程精修 ===== */
.story-scene-mark,.choice-scene-mark{
  width:92px;height:92px;border-radius:28px;display:grid;place-items:center;
  margin:0 auto 20px;position:relative;overflow:hidden;
  box-shadow:0 8px 0 rgba(62,88,99,.08),0 18px 32px rgba(49,77,89,.10);
  border:2px solid rgba(255,255,255,.92);
}
.story-scene-mark::after,.choice-scene-mark::after{
  content:"";position:absolute;inset:7px;border-radius:21px;border:1px solid rgba(255,255,255,.75);pointer-events:none;
}
.story-scene-mark.detective,.choice-scene-mark.detective{background:linear-gradient(145deg,#d9f0f8,#f7e5b4)}
.story-scene-mark.magic,.choice-scene-mark.magic{background:linear-gradient(145deg,#eee1f6,#f8e8ef)}
.story-scene-mark.museum,.choice-scene-mark.museum{background:linear-gradient(145deg,#faefcf,#f6dfb8)}
.story-scene-mark.forest,.choice-scene-mark.forest{background:linear-gradient(145deg,#e3f3df,#d5ecd9)}
.story-scene-mark .scene-icon-svg,.choice-scene-mark .scene-icon-svg{width:76px;height:76px;position:relative;z-index:1}
.story-copy{position:relative;z-index:1;max-width:860px;margin:0 auto;text-align:center}
.story-copy .instrument-grid,.story-copy .shape-grid,.story-copy .color-grid,.story-copy .tone-actions{margin-top:28px;text-align:initial}
.script-card{overflow:hidden}
.script-card::after{opacity:.07!important}

/* 地图改用独立矢量场景图标，减少系统 emoji 的廉价感 */
.scene-node .icon{width:88px;height:88px;display:grid;place-items:center}
.scene-node .scene-icon-svg{width:88px;height:88px;filter:drop-shadow(0 8px 10px rgba(41,68,81,.12))}
.scene-node.current .scene-icon-svg{animation:mapBounce 1.8s ease-in-out infinite}

/* 试听与作答图标统一成矢量贴纸风 */
.ui-glyph{display:block;width:84px;height:84px}
.audio-symbol .ui-glyph{width:88px;height:88px}
.response-icon .ui-glyph{width:122px;height:122px}
.safe-icon .ui-glyph{width:144px;height:144px}
.response-icon,.safe-icon{display:grid;place-items:center}
.safe-icon{padding:0}

/* 乐器卡牌：固定六套造型与配色，避免小提琴/二胡、古筝/琵琶视觉混淆 */
.instrument-card,.instrument-option{
  position:relative;isolation:isolate;overflow:hidden;
}
.instrument-card::before,.instrument-option::before{
  content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-42px;top:-48px;
  background:rgba(255,255,255,.52);z-index:0;
}
.instrument-card::after,.instrument-option::after{
  content:"";position:absolute;left:14px;right:14px;bottom:10px;height:8px;border-radius:50%;
  background:rgba(57,78,86,.07);filter:blur(4px);z-index:0;
}
.instrument-svg{position:relative;z-index:1;filter:drop-shadow(0 7px 7px rgba(66,74,73,.12))}
.instrument-card.playing .instrument-svg{animation:instrumentPulse .72s ease-in-out infinite alternate}
@keyframes instrumentPulse{to{transform:translateY(-4px) scale(1.025)}}
.instrument-name{position:relative;z-index:1;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(75,96,103,.10)}
.instrument-piano{--inst-accent:#5f8399}.instrument-violin{--inst-accent:#c77b58}.instrument-guitar{--inst-accent:#d19a53}.instrument-guzheng{--inst-accent:#b99254}.instrument-erhu{--inst-accent:#6f9c8e}.instrument-pipa{--inst-accent:#a77cab}
.instrument-card:hover,.instrument-option:hover{border-color:var(--inst-accent)!important}
.instrument-option.selected{outline:4px solid color-mix(in srgb,var(--inst-accent) 45%,white);outline-offset:-7px}

/* 单题反馈保持自动跳转，但视觉更像小游戏反馈而不是普通白底文字 */
.feedback-screen{
  min-height:68dvh!important;display:grid;place-items:center;
  background:linear-gradient(145deg,#f7fcfd,#fffaf0 52%,#f2f8ee)!important;
  overflow:hidden;position:relative;
}
.feedback-screen::before,.feedback-screen::after{
  content:"";position:absolute;border-radius:50%;filter:blur(1px);opacity:.45;pointer-events:none;
}
.feedback-screen::before{width:250px;height:250px;background:#dceff6;left:-100px;top:-90px}
.feedback-screen::after{width:280px;height:280px;background:#f4e5b9;right:-120px;bottom:-120px}
.feedback-pop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px}
.feedback-medal{
  width:104px;height:104px;border-radius:36px;display:grid;place-items:center;color:#fff;font-size:58px;font-weight:1000;
  border:5px solid rgba(255,255,255,.9);box-shadow:0 9px 0 rgba(55,82,88,.10),0 18px 35px rgba(45,71,79,.14);
  animation:feedbackPop .28s cubic-bezier(.2,.85,.3,1.2) both;
}
.feedback-pop.good .feedback-medal{background:linear-gradient(145deg,#75b78a,#4d9870)}
.feedback-pop.bad .feedback-medal{background:linear-gradient(145deg,#df8a7a,#bd655c)}
.feedback-screen .feedback{font-size:clamp(25px,5vw,38px)!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
@keyframes feedbackPop{from{opacity:0;transform:scale(.72) rotate(-8deg)}to{opacity:1;transform:none}}

/* 阶段结束页：与前置指导页明显区分，使用彩色情景奖励卡 + 右下角箭头 */
.reward-card{
  min-height:74dvh!important;display:grid;place-items:center;text-align:center;overflow:hidden;position:relative;
  color:#273b48!important;border:0!important;isolation:isolate;
}
.reward-card::before{content:"";position:absolute;inset:0;z-index:-3}
.reward-detective::before{background:linear-gradient(145deg,#dff4fb 0%,#fff4cf 58%,#f9e4b0 100%)}
.reward-magic::before{background:linear-gradient(145deg,#eee4f7 0%,#fdeef1 54%,#f4ddbd 100%)}
.reward-museum::before{background:linear-gradient(145deg,#fff2c9 0%,#fffaf0 48%,#ebd7a0 100%)}
.reward-forest::before{background:linear-gradient(145deg,#e2f4df 0%,#f8fff2 48%,#d1eabf 100%)}
.reward-card::after{content:"";position:absolute;z-index:-2;width:480px;height:480px;border-radius:50%;right:-180px;top:-190px;background:rgba(255,255,255,.35)}
.reward-emblem{
  width:132px;height:132px;border-radius:44px;display:grid;place-items:center;margin-bottom:24px;
  background:rgba(255,255,255,.72);border:5px solid rgba(255,255,255,.95);
  box-shadow:0 10px 0 rgba(67,91,92,.09),0 22px 45px rgba(48,77,83,.13);
  animation:rewardLift .55s cubic-bezier(.15,.8,.25,1.1) both;
}
.reward-emblem span{font-size:66px;filter:drop-shadow(0 5px 6px rgba(65,70,58,.12))}
.reward-copy{max-width:760px;padding:10px 28px 76px;position:relative;z-index:2}
.reward-kicker{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.62);border:1px solid rgba(73,98,104,.12);font-weight:850;letter-spacing:.14em;color:#647681;margin-bottom:15px}
.reward-copy h1{font-size:clamp(35px,6vw,58px);margin:0 0 18px;font-weight:1000;color:#294253;letter-spacing:.01em}
.reward-copy p{font-size:clamp(18px,2.6vw,24px);line-height:1.8;margin:0;color:#3f5562;font-weight:650}
.reward-confetti i{position:absolute;width:12px;height:24px;border-radius:5px;opacity:.72;animation:confettiFloat 4s ease-in-out infinite}
.reward-confetti i:nth-child(1){left:12%;top:18%;background:#6fb2cb;transform:rotate(22deg)}
.reward-confetti i:nth-child(2){left:21%;bottom:18%;background:#e4bd5b;animation-delay:.5s;transform:rotate(-25deg)}
.reward-confetti i:nth-child(3){right:15%;top:22%;background:#8dbb8f;animation-delay:.9s;transform:rotate(35deg)}
.reward-confetti i:nth-child(4){right:25%;bottom:16%;background:#be8daf;animation-delay:1.3s;transform:rotate(-15deg)}
.reward-confetti i:nth-child(5){left:42%;top:11%;background:#da866f;animation-delay:1.6s;transform:rotate(45deg)}
.reward-confetti i:nth-child(6){right:42%;bottom:9%;background:#73a8c3;animation-delay:2s;transform:rotate(-38deg)}
@keyframes rewardLift{from{opacity:0;transform:translateY(18px) scale(.82)}to{opacity:1;transform:none}}
@keyframes confettiFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.reward-arrow{background:linear-gradient(180deg,#4f91ad,#3e7893)!important}

/* 练习结束/阶段选择也与普通说明页区分 */
.choice-card{min-height:66dvh!important;display:grid;place-items:center;text-align:center;background:linear-gradient(145deg,#fffdf7,#f2f8f7)!important;position:relative;overflow:hidden}
.choice-card .choice-copy{max-width:760px;width:100%;position:relative;z-index:1}
.choice-card .feedback{font-size:clamp(21px,4vw,31px)!important;background:transparent!important;border:0!important;box-shadow:none!important;margin-bottom:26px}
.choice-card .button-row{margin-top:6px}
.choice-scene-mark{margin-bottom:0;position:absolute;top:34px;left:50%;transform:translateX(-50%);opacity:.28;filter:saturate(.75)}
.choice-card .choice-copy{padding-top:74px}

/* 更柔和的页面进入衔接；计时页仍不做入场动画，避免影响反应时 */
.flow-screen .story-scene-mark,.flow-screen .choice-scene-mark{animation:markIn .34s cubic-bezier(.2,.75,.25,1) both}
@keyframes markIn{from{opacity:0;transform:translateY(7px) scale(.94)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .story-scene-mark{width:76px;height:76px;border-radius:23px;margin-bottom:16px}.story-scene-mark .scene-icon-svg{width:64px;height:64px}
  .scene-node .icon,.scene-node .scene-icon-svg{width:68px;height:68px}
  .ui-glyph{width:72px;height:72px}.audio-symbol .ui-glyph{width:76px;height:76px}.response-icon .ui-glyph{width:106px;height:106px}.safe-icon .ui-glyph{width:126px;height:126px}
  .reward-card{min-height:72dvh!important}.reward-emblem{width:108px;height:108px;border-radius:34px}.reward-emblem span{font-size:54px}.reward-copy{padding:8px 16px 76px}.reward-copy h1{font-size:34px}.reward-copy p{font-size:18px}
  .feedback-medal{width:88px;height:88px;border-radius:29px;font-size:48px}
  .instrument-card::before,.instrument-option::before{width:96px;height:96px}.instrument-svg{filter:drop-shadow(0 5px 6px rgba(66,74,73,.11))}
}


/* final submission status */
.submit-panel{margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.submit-status{font-size:14px;padding:9px 13px;border-radius:12px;background:#f2f5f6;color:#4d626c;border:1px solid #dbe4e7}
.submit-status.ok{background:#eef8f1;color:#2f6f47;border-color:#cfe6d6}
.submit-status.error{background:#fff3f1;color:#a8473e;border-color:#f0d0ca}
.submit-status.local{background:#fff8e9;color:#7a6123;border-color:#eadba8}