*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0e151f;font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:#fff}#gameRoot,#webglHost{position:fixed;inset:0}canvas{display:block}#hud{position:fixed;inset:0;pointer-events:none}.topbar{position:absolute;left:18px;right:18px;top:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.brand{font-size:22px;font-weight:900;letter-spacing:.5px;text-shadow:0 3px 10px #000}.brand span{font-size:14px;color:#cdd8e8;font-weight:600}.bars{display:flex;gap:10px}.bar{width:156px;height:34px;border:1px solid rgba(255,255,255,.25);background:rgba(10,16,24,.62);border-radius:10px;padding:5px 8px;box-shadow:0 8px 30px rgba(0,0,0,.25)}.bar b{display:block;font-size:12px;color:#f1f6ff;margin-bottom:3px}.bar i{display:block;height:8px;width:60%;border-radius:99px;background:linear-gradient(90deg,#ffd56d,#ff7e67)}#message{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);min-width:520px;max-width:880px;text-align:center;padding:12px 18px;border-radius:18px;background:rgba(15,20,29,.76);border:1px solid rgba(255,255,255,.20);font-size:18px;font-weight:800;text-shadow:0 2px 6px #000;box-shadow:0 12px 35px rgba(0,0,0,.35)}#banner{position:absolute;left:50%;top:82px;transform:translateX(-50%);font-size:36px;font-weight:1000;color:#ffd56d;text-shadow:0 4px 0 #5b2400,0 8px 26px rgba(0,0,0,.65);opacity:0;transition:.18s}#banner.show{opacity:1;transform:translateX(-50%) scale(1.04)}#sidePanel{position:absolute;right:18px;top:74px;width:240px;padding:14px 16px;border-radius:18px;background:rgba(12,18,28,.72);border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 35px rgba(0,0,0,.35);font-size:15px;line-height:1.8}#controls{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:10px;pointer-events:auto}#controls button,#startBtn{border:0;border-radius:14px;background:linear-gradient(#ffe28a,#ffc349);color:#281a08;font-weight:900;box-shadow:0 6px 0 #9c6b17,0 13px 25px rgba(0,0,0,.35);cursor:pointer}#controls button{padding:11px 16px;font-size:15px}#controls button:active,#startBtn:active{transform:translateY(3px);box-shadow:0 3px 0 #9c6b17,0 7px 18px rgba(0,0,0,.35)}#menu{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(42,71,104,.62),rgba(4,8,14,.82));display:flex;align-items:center;justify-content:center;pointer-events:auto}.menuCard{width:min(720px,86vw);padding:36px;border-radius:30px;text-align:center;background:rgba(15,21,31,.88);border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 90px rgba(0,0,0,.55)}.menuCard h1{font-size:58px;line-height:1;margin:0 0 8px;color:#ffd56d;text-shadow:0 5px 0 #673a00}.menuCard h2{font-size:24px;margin:0 0 16px}.menuCard p{color:#d7e2f1;font-size:17px;line-height:1.6}.menuCard .hint{font-size:14px;color:#aebfd6}#startBtn{margin:18px auto;padding:17px 58px;font-size:26px;display:inline-block}@media(max-width:800px){.bars{display:none}#message{min-width:auto;width:92%;font-size:15px}.brand span{display:block}.topbar{right:10px;left:10px}#sidePanel{display:none}#controls{width:96%;overflow:auto;justify-content:flex-start}.menuCard h1{font-size:42px}}

#reportPanel{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(4,8,14,.62);backdrop-filter:blur(3px);pointer-events:auto;z-index:20}
#reportPanel.show{display:flex}
.reportCard{position:relative;width:min(760px,92vw);max-height:82vh;overflow:auto;padding:28px 30px;border-radius:24px;background:linear-gradient(180deg,rgba(22,31,45,.96),rgba(10,16,24,.96));border:1px solid rgba(255,255,255,.22);box-shadow:0 28px 90px rgba(0,0,0,.65)}
.reportCard h2{margin:0 0 12px;color:#ffd56d;font-size:30px;text-shadow:0 3px 0 #5b2400}
.reportCard .scoreLine{margin:8px 0;font-size:17px;font-weight:800;color:#edf5ff}
.reportCard .chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.reportCard .chips span{padding:6px 10px;border-radius:999px;background:rgba(255,213,109,.15);border:1px solid rgba(255,213,109,.35);font-weight:800;color:#ffe9a8}
.reportCard ol{padding-left:22px;margin:12px 0 0}
.reportCard li{margin:10px 0;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);line-height:1.5}
.reportCard li b{display:block;color:#fff;font-size:16px}.reportCard li span{color:#cfe0f5}.reportCard .small{color:#9db1c8;font-size:13px}#closeReport{position:absolute;right:16px;top:14px;width:36px;height:36px;border:0;border-radius:50%;background:#ffd56d;color:#241400;font-size:24px;font-weight:900;cursor:pointer}

#guidePanel{position:absolute;left:18px;top:92px;width:300px;min-height:86px;padding:14px 16px;border-radius:18px;background:rgba(12,18,28,.70);border:1px solid rgba(255,255,255,.20);box-shadow:0 12px 35px rgba(0,0,0,.32);font-size:14px;line-height:1.55;pointer-events:none}
#guidePanel b{display:block;color:#ffd56d;font-size:16px;margin-bottom:6px}
#guidePanel span{color:#e5eefc;font-weight:700}
.reportCard .checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.reportCard .checklist div{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-weight:800}
.reportCard .checklist div.done{background:rgba(95,210,129,.14);border-color:rgba(95,210,129,.35);color:#caffd7}
.reportCard .checklist div.todo{color:#aebdd0}
@media(max-width:800px){#guidePanel{display:none}}

/* Formal HUD polish */
.topbar{padding:12px 14px;border-radius:20px;background:linear-gradient(180deg,rgba(12,18,28,.76),rgba(12,18,28,.42));border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 45px rgba(0,0,0,.38);backdrop-filter:blur(8px)}
.brand{display:flex;flex-direction:column;gap:4px}.brand:before{content:"固定斜视角·人物完整连接版 V3.1.3";display:inline-block;width:max-content;padding:3px 8px;border-radius:999px;background:rgba(255,213,109,.18);border:1px solid rgba(255,213,109,.34);font-size:12px;color:#ffe7a2;text-shadow:none;letter-spacing:1px}
#sidePanel{background:linear-gradient(180deg,rgba(13,21,34,.88),rgba(8,13,22,.72));backdrop-filter:blur(8px)}
#reactionPanel{position:absolute;right:18px;top:268px;width:240px;min-height:178px;padding:14px 16px;border-radius:20px;background:linear-gradient(180deg,rgba(16,25,39,.90),rgba(8,13,22,.74));border:1px solid rgba(255,255,255,.20);box-shadow:0 18px 46px rgba(0,0,0,.40);pointer-events:none;text-align:center}
#reactionPanel .rpTitle{font-size:13px;letter-spacing:2px;color:#9fb5d2;font-weight:900;margin-bottom:6px}
#reactionPanel .rpFace{font-size:48px;line-height:1.05;margin:3px auto 4px;text-shadow:0 5px 20px rgba(0,0,0,.55)}
#reactionPanel .rpName{font-size:18px;font-weight:1000;color:#ffd56d;margin-bottom:6px;text-shadow:0 2px 0 #5b2400}
#reactionPanel .rpText{font-size:14px;line-height:1.45;color:#e8f1ff;font-weight:700;text-align:left;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
#controls{padding:10px 12px;border-radius:22px;background:rgba(7,11,18,.46);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px)}
#controls button{background:linear-gradient(180deg,#fff0a8,#ffc246);border:1px solid rgba(255,255,255,.28);box-shadow:0 5px 0 #8c5d11,0 12px 22px rgba(0,0,0,.38);white-space:nowrap}
#message{background:linear-gradient(180deg,rgba(16,25,39,.86),rgba(8,13,22,.76));border-color:rgba(255,213,109,.22)}
#guidePanel{background:linear-gradient(180deg,rgba(16,25,39,.86),rgba(8,13,22,.70));backdrop-filter:blur(8px)}
.menuCard{background:linear-gradient(180deg,rgba(18,28,43,.94),rgba(8,13,22,.92));border-color:rgba(255,213,109,.20)}
@media(max-width:800px){#reactionPanel{display:none}.topbar{padding:10px}.brand:before{display:none}}


/* 斜向下正式演出视角：减少调试感，增强可读性 */
body{background:#09111c;}
.topbar{left:18px;right:auto;min-width:430px;max-width:calc(100vw - 36px);align-items:center;gap:18px;padding:12px 16px;background:linear-gradient(180deg,rgba(9,18,31,.90),rgba(9,18,31,.62));border:1px solid rgba(255,219,126,.20)}
.brand{font-size:24px;line-height:1.1}.brand span{font-size:13px;color:#bdd0e9}.brand:before{content:"固定斜视角·人物完整连接版 V3.1.3"}
.bars{position:fixed;right:18px;top:14px;background:linear-gradient(180deg,rgba(9,18,31,.86),rgba(9,18,31,.58));border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:10px;box-shadow:0 12px 36px rgba(0,0,0,.35)}
.bar{width:132px;background:rgba(255,255,255,.055)}
#sidePanel{right:18px;top:88px;width:230px;padding:13px 15px;border-color:rgba(255,219,126,.18)}
#reactionPanel{right:18px;top:292px;width:230px;min-height:170px;border-color:rgba(255,219,126,.18)}
#guidePanel{left:18px;top:102px;width:310px;background:linear-gradient(180deg,rgba(9,18,31,.78),rgba(9,18,31,.55));border-color:rgba(255,219,126,.14)}
#message{bottom:88px;width:min(760px,76vw);min-width:0;font-size:16px;border-radius:16px;padding:11px 16px;background:linear-gradient(180deg,rgba(8,16,29,.82),rgba(7,12,21,.74));}
#controls{bottom:18px;gap:8px;padding:9px 10px;max-width:calc(100vw - 36px);overflow:auto;background:rgba(5,9,16,.58)}
#controls button{font-size:14px;padding:10px 13px;border-radius:12px;box-shadow:0 4px 0 #8c5d11,0 10px 18px rgba(0,0,0,.32)}
#banner{top:78px;font-size:32px}.menuCard h1{font-size:54px}.menuCard{border-color:rgba(255,219,126,.24)}
@media(max-width:1000px){.bars{display:none}.topbar{right:18px}.brand span{display:block}#sidePanel,#reactionPanel{display:none}#message{width:94%;bottom:82px}#controls{justify-content:flex-start}}

/* 真实运行闭环：HUD独立定位，消除 fixed 元素被 backdrop-filter 建立包含块后错位的问题 */
.brand:before{content:"固定斜视角·人物完整连接版 V3.1.3"}
.bars{position:absolute;right:18px;left:auto;top:14px;z-index:6}
.topbar{z-index:6;max-width:calc(100vw - 500px)}
#guidePanel{top:124px;z-index:5}
#sidePanel{top:88px;z-index:5}
#reactionPanel{top:350px;z-index:5}
#message{z-index:7}
#controls{z-index:8}
@media(max-width:1180px){.bars{display:none}.topbar{max-width:calc(100vw - 36px)}#sidePanel,#reactionPanel{display:none}}

/* Narrow-screen fix: keep dynamic comedy banner below the title card. */
@media(max-width:1180px){#banner{top:118px;font-size:28px;max-width:54vw;text-align:center;white-space:nowrap}}
@media(max-width:800px){#banner{top:112px;font-size:24px;max-width:92vw}}
/* Tablet positioning: the hidden stat bars free the upper-right corner for event banners. */
@media (min-width:801px) and (max-width:1180px){
  #banner{left:auto;right:24px;top:30px;transform:none;max-width:52vw;text-align:right;white-space:nowrap}
  #banner.show{transform:scale(1.04)}
}

/* Full compliance UI fixes */
#sidePanel{line-height:1.55;font-size:14px;padding:12px 14px}
#sidePanel .techRow{margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.09);font-size:12px;line-height:1.4;color:#aebfd6}
#reactionPanel{top:318px}
@media(min-width:1181px){#sidePanel{max-height:214px;overflow:hidden}#reactionPanel{top:318px}}
@media(max-width:800px){
  #banner{left:50%!important;right:auto!important;top:132px!important;max-width:92vw;text-align:center;white-space:normal;transform:translateX(-50%)!important}
  #banner.show{transform:translateX(-50%) scale(1.04)!important}
}

/* v3.1角色视觉重制：画面更聚焦人物，减少测试场景感 */
.brand:before{content:"固定斜视角·人物完整连接版 V3.1.3"}
#webglHost:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 48%,rgba(3,8,15,.16) 100%);z-index:1}
#hud{z-index:2}
.menuCard{max-width:760px}.menuCard h1{letter-spacing:2px}.menuCard h2{color:#f3e6c6}.menuCard p{max-width:650px;margin-left:auto;margin-right:auto}
#reactionPanel .rpFace{font-size:54px}
/* v3.1 compact-screen final spacing: reserve two-row control bar height. */
@media(max-width:800px){
  #message{bottom:110px}
  #controls{bottom:12px}
}


/* v3.2.0 固定3/4交互视角 HUD */
.brand:before{content:"固定3/4交互视角·互动增强版 V3.2.0" !important}
#focusPanel{position:absolute;left:18px;top:222px;width:310px;min-height:112px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(16,25,39,.88),rgba(8,13,22,.74));border:1px solid rgba(255,213,109,.18);box-shadow:0 12px 35px rgba(0,0,0,.32);font-size:14px;line-height:1.5;pointer-events:none;z-index:5}
#focusPanel .fpTitle{display:block;color:#8fb8ff;font-size:13px;letter-spacing:2px;font-weight:900;margin-bottom:6px}
#focusPanel .fpName{font-size:20px;font-weight:1000;color:#ffd56d;text-shadow:0 2px 0 #5b2400;margin-bottom:6px}
#focusPanel .fpMeta{color:#e5eefc;font-weight:700;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
@media(max-width:1180px){#focusPanel{display:none}}


/* v3.3.0 最终固定3/4交互视角版 */
.brand:before{content:"最终固定3/4交互视角版 V3.3.0" !important}
#focusBubble{position:absolute;left:0;top:0;transform:translate(-50%,-100%);min-width:122px;max-width:220px;padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(17,29,48,.95),rgba(8,14,24,.86));border:1px solid rgba(255,213,109,.32);box-shadow:0 10px 26px rgba(0,0,0,.35);text-align:center;pointer-events:none;z-index:9;transition:opacity .12s ease, transform .12s ease;opacity:1}
#focusBubble.hidden{opacity:0;transform:translate(-50%,-94%) scale(.96)}
#focusBubbleName{font-size:16px;font-weight:1000;color:#ffd56d;text-shadow:0 2px 0 #5b2400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#focusBubbleHint{margin-top:4px;font-size:12px;font-weight:800;color:#e8f1ff;letter-spacing:.5px}
#focusBubble:after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:16px;height:16px;background:linear-gradient(135deg,rgba(8,14,24,.95),rgba(17,29,48,.95));border-right:1px solid rgba(255,213,109,.32);border-bottom:1px solid rgba(255,213,109,.32);rotate:45deg}


/* v3.4.1 混乱分级失控与AI救场 */
.brand:before{content:"混乱分级失控·AI救场版 V3.4.1" !important}
.bar b{display:flex;justify-content:space-between;align-items:center}.bar b em{font-style:normal;color:#ffd56d;font-size:12px}
.chaosBar i{background:linear-gradient(90deg,#65c77a,#f2c14e,#f05d54)}
.chaosBar.danger{border-color:rgba(255,81,72,.72);box-shadow:0 0 0 2px rgba(255,81,72,.16),0 10px 32px rgba(255,45,35,.28);animation:chaosPulse .7s ease-in-out infinite alternate}
.chaosBar.danger b,.chaosBar.danger b em{color:#ff847b}
@keyframes chaosPulse{from{transform:translateY(0)}to{transform:translateY(-2px)}}
#aiState{color:#82f0d0;font-weight:900}#roundTime{color:#ffd56d;font-weight:900}#aiRescues{color:#82f0d0;font-weight:900}
#roundPanel{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,7,13,.74);backdrop-filter:blur(8px);pointer-events:auto;z-index:40}
#roundPanel.show{display:flex}
.roundCard{width:min(620px,90vw);padding:34px 38px;border-radius:30px;text-align:center;background:linear-gradient(180deg,rgba(25,38,57,.98),rgba(8,14,24,.98));border:1px solid rgba(255,255,255,.22);box-shadow:0 34px 110px rgba(0,0,0,.72)}
.roundCard.fail{border-color:rgba(255,91,80,.52)}.roundCard.win{border-color:rgba(95,222,153,.52)}
.roundBadge{display:inline-block;padding:6px 13px;border-radius:999px;background:rgba(255,213,109,.16);border:1px solid rgba(255,213,109,.35);color:#ffe7a2;font-weight:900;letter-spacing:2px}
.roundCard h2{font-size:42px;margin:14px 0 10px;color:#ffd56d;text-shadow:0 4px 0 #5b2400}.roundCard.fail h2{color:#ff766c;text-shadow:0 4px 0 #65170f}.roundCard.win h2{color:#7ee2a4;text-shadow:0 4px 0 #164d2c}
.roundCard p{font-size:18px;line-height:1.7;color:#e6effb}.roundStats{margin:18px auto;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.07);font-weight:800;line-height:1.8;color:#d9e7f7}
#roundRestart{border:0;border-radius:15px;padding:14px 36px;background:linear-gradient(#ffe28a,#ffc349);color:#281a08;font-size:20px;font-weight:1000;box-shadow:0 6px 0 #9c6b17;cursor:pointer}
@media(min-width:1181px){#sidePanel{max-height:300px;overflow:visible}#reactionPanel{top:414px}}


/* v3.4.1 分阶段群体失控系统 */
.brand:before{content:"混乱分级失控·AI救场版 V3.4.1" !important}
#chaosStage{font-weight:1000;color:#8fe4ad}
body.chaos-stage-1 #chaosStage{color:#ffe18a}
body.chaos-stage-2 #chaosStage{color:#ffc064}
body.chaos-stage-3 #chaosStage{color:#ff8f69}
body.chaos-stage-4 #chaosStage,body.chaos-stage-5 #chaosStage{color:#ff6f68;text-shadow:0 0 16px rgba(255,62,48,.65)}
body.chaos-stage-2 #webglHost:after{background:radial-gradient(circle at 50% 45%,transparent 42%,rgba(77,28,7,.16) 100%)}
body.chaos-stage-3 #webglHost:after{background:radial-gradient(circle at 50% 45%,transparent 38%,rgba(105,23,13,.25) 100%)}
body.chaos-stage-4 #webglHost:after,body.chaos-stage-5 #webglHost:after{background:radial-gradient(circle at 50% 44%,transparent 32%,rgba(130,10,8,.38) 100%);animation:criticalVignette .55s ease-in-out infinite alternate}
@keyframes criticalVignette{from{opacity:.72}to{opacity:1}}
.chaosBar.warning{border-color:rgba(255,193,75,.65);box-shadow:0 0 0 2px rgba(255,193,75,.13),0 10px 32px rgba(255,151,35,.18)}
.chaosBar.critical{border-color:rgba(255,81,72,.86);box-shadow:0 0 0 3px rgba(255,81,72,.20),0 10px 38px rgba(255,35,25,.40);animation:chaosCritical .35s ease-in-out infinite alternate}
@keyframes chaosCritical{from{transform:scale(1)}to{transform:scale(1.025)}}
.roundCard.fail{background:linear-gradient(180deg,rgba(62,20,22,.98),rgba(16,7,11,.98));border-color:rgba(255,91,80,.68)}
.roundCard.fail .roundBadge{background:rgba(255,84,72,.18);border-color:rgba(255,84,72,.42);color:#ffb0a9}