:root{--paper:#f2e7d2;--paper-hi:#fffaf0;--ink:#484236;--muted:#817866;--brick:#ad4d34;--mustard:#d3a23e;--teal:#4f8279;--sage:#7c9366;--shadow:rgba(103,79,45,.2);--hud:98px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;background-image:radial-gradient(circle at 12% 0,rgba(211,162,62,.18),transparent 34%),radial-gradient(circle at 100% 95%,rgba(79,130,121,.14),transparent 40%)}button,textarea{font:inherit}.hidden{display:none!important}
.hud{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:8px;width:min(820px,100%);min-height:var(--hud);margin:auto;padding:max(10px,env(safe-area-inset-top)) 12px 10px;background:linear-gradient(var(--paper),rgba(242,231,210,.94));backdrop-filter:blur(8px)}.hud-brand{display:flex;flex-direction:column;justify-content:center;font-weight:950;color:var(--brick);letter-spacing:.08em}.hud-brand small{margin-top:5px;color:var(--muted);font-size:11px}.meter{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:9px 10px;border-radius:14px;background:var(--paper-hi);box-shadow:0 5px 15px var(--shadow)}.meter span{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap}.meter strong{margin-top:4px;font-size:clamp(14px,4vw,19px)}.presence strong{color:var(--teal)}.order strong{color:var(--mustard)}.energy strong{color:var(--brick)}
.classroom-wrap{position:relative;width:min(780px,calc(100% - 24px));height:min(32vh,300px);margin:0 auto 10px;border:7px solid var(--paper-hi);border-radius:22px;overflow:hidden;background:#d9c89e;box-shadow:0 12px 26px var(--shadow)}#classroom{display:block;width:100%;height:calc(100% - 30px);image-rendering:pixelated}.classroom-status{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding:6px 10px;background:rgba(72,66,54,.86);color:#fff9ec;font-size:11px;font-weight:850}.classroom-status span{display:flex;align-items:center;gap:6px}.classroom-status strong{color:#f3c75f;white-space:nowrap}.classroom-status b{font-size:15px}.legend-person{display:inline-block;width:10px;height:14px;background:linear-gradient(#f0caa0 0 35%,rgba(173,77,52,.3) 35%);box-shadow:0 0 0 1px rgba(255,255,255,.38)}.bubble{position:absolute;z-index:2;right:8%;top:12%;max-width:220px;padding:9px 12px;border:3px solid var(--ink);border-radius:14px;background:var(--paper-hi);font-size:13px;font-weight:850;box-shadow:5px 5px 0 rgba(72,66,54,.18);animation:bubbleIn .28s ease-out}@keyframes bubbleIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.stage{width:min(680px,calc(100% - 24px));margin:0 auto;padding:18px 0 max(28px,env(safe-area-inset-bottom))}.card{padding:22px clamp(18px,5vw,30px);border-radius:22px;background:rgba(255,250,240,.94);box-shadow:0 14px 30px var(--shadow)}.card.hero{margin-top:clamp(28px,6vh,70px);text-align:center}.eyebrow{margin:0 0 8px;color:var(--teal);font-size:12px;font-weight:950;letter-spacing:.16em}.title{margin:0;color:var(--brick);font-size:clamp(28px,8vw,50px);line-height:1.18;letter-spacing:.05em}.lead,.event,.note,.settlement-text{white-space:pre-line;line-height:1.85}.lead{margin:18px auto;max-width:520px}.event{font-size:clamp(17px,4.6vw,21px);font-weight:800}.note{padding:15px 17px;border-left:5px solid var(--mustard);background:#f8edcf;font-weight:700}.intro-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0;text-align:left}.intro-metrics div{padding:12px;border-radius:13px;background:#f3e2ba}.intro-metrics strong,.intro-metrics span{display:block}.intro-metrics strong{color:var(--brick);font-size:13px}.intro-metrics span{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.55}.intervention-explainer{display:grid;gap:5px;padding:13px 14px;border-left:5px solid var(--teal);background:#edf1df;text-align:left}.intervention-explainer strong{color:#496348}.intervention-explainer span{font-size:13px;line-height:1.6}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.hero>.actions{justify-content:center}.primary,.secondary{min-height:50px;border:0;border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer}.primary{background:var(--brick);color:#fffaf0;box-shadow:0 5px 0 #813a29}.secondary{background:#ead9b8;color:var(--ink)}.primary:active,.secondary:active{transform:translateY(2px)}
.options{display:grid;gap:10px;margin-top:16px}.option{position:relative;display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;min-height:54px;border:0;border-radius:15px;padding:12px 13px;background:#f3e2ba;color:var(--ink);text-align:left;box-shadow:0 4px 9px rgba(103,79,45,.14);cursor:pointer}.option-key{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brick);color:#fff;font-weight:950}.option-text{padding-top:3px;line-height:1.5;font-weight:750}.option-lock{grid-column:2;color:var(--brick);font-size:12px;font-weight:850}.option:disabled{cursor:not-allowed;opacity:.55;background:#ded5c3}.option:disabled .option-key{background:#8d867a}
.prediction-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.prediction-option{min-height:58px;border:2px solid #d6c49e;border-radius:14px;background:#fff9ec;color:var(--ink);font-weight:900;cursor:pointer}.selected-choice{padding:11px 13px;border-left:4px solid var(--teal);background:#edf1df;font-weight:850}.prediction-result{display:grid;grid-template-columns:1fr auto auto 1fr auto;gap:8px;align-items:center;margin:12px 0;padding:11px 13px;border-radius:13px;background:#edf1df;font-size:12px}.prediction-result strong{color:var(--brick);font-size:14px}.prediction-result i{font-style:normal;color:var(--teal);font-weight:950}
.scenario-chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.scenario-chips span,.option-tag{display:inline-block;border-radius:99px;padding:5px 9px;background:#e5edd8;color:#4f6e50;font-size:11px;font-weight:900}.option-tag{margin-bottom:5px;padding:3px 7px}.option-title{display:block;margin-bottom:4px;color:var(--brick);font-weight:950}.option-body{display:block;white-space:pre-line;font-size:15px;font-weight:650}.option-clue{display:block;margin-top:8px;padding:7px 9px;border-left:3px solid var(--teal);background:#edf1df;color:#496348;font-size:12px;font-weight:850}.hypothesis-options{margin-top:18px}.hypothesis-option{display:block;width:100%;padding:15px 16px;line-height:1.55}.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.ending-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0}.impact{padding:11px 9px;border-radius:12px;background:#f3e2ba;text-align:center}.impact span{display:block;color:var(--muted);font-size:11px;font-weight:850}.impact strong{display:block;margin-top:4px;font-size:19px}.impact.good strong{color:#3f6b4f}.impact.bad strong{color:#a8432a}.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.focus-grid.four{grid-template-columns:repeat(4,1fr)}.focus-card{padding:10px;border-radius:12px;background:#edf1df;text-align:center}.focus-card span{display:block;font-size:12px;font-weight:850}.focus-card strong{font-size:22px;color:var(--teal)}.student-impact{margin:12px 0;padding:11px 13px;border-left:4px solid var(--mustard);background:#fff9ec;color:var(--muted);font-size:14px;font-weight:750;line-height:1.6}.core-list{margin:12px 0 0;padding-left:21px;line-height:1.75}.boundary{padding:12px 14px;border:1px solid #d6c49e;border-radius:12px;background:#fff9ec;color:var(--muted);font-size:13px;line-height:1.65}.run-history{display:grid;gap:7px;margin:18px auto 0;padding:14px;border-radius:14px;background:#f3e2ba;text-align:left}.run-history strong{color:var(--brick)}.invoice{margin-top:14px;padding:16px;border:2px dashed var(--mustard);border-radius:15px;background:#fff9ec;line-height:1.7}.invoice strong{color:var(--brick);font-size:18px}.invoice p{margin:7px 0}.invoice b{color:var(--teal)}.yuan-reveal{margin-top:16px}.ending-title{margin:8px 0;color:var(--brick);font-size:clamp(34px,9vw,58px)}
.round-review{margin-top:22px;padding-top:20px;border-top:2px solid #dfcfaa}.round-review>h2{margin:0;color:var(--brick)}.round-review>p{margin:7px 0 13px;color:var(--muted);font-size:13px;line-height:1.6}.round-review details{margin:8px 0;border:1px solid #d6c49e;border-radius:12px;background:#fff9ec}.round-review summary{padding:12px 14px;font-weight:900;cursor:pointer}.review-content{padding:0 14px 14px}.round-review+.actions{justify-content:center}.feedback-line{display:flex;align-items:center;gap:10px;margin:12px 0;padding:11px 13px;border-radius:13px;background:#edf1df;color:#496348;font-weight:900}.fatigue{background:#f4d8c7;color:#8c3b28}.gates{display:grid;gap:9px;margin-top:18px}.gate{display:grid;grid-template-columns:1fr auto;align-items:center;min-height:58px;padding:12px 16px;border-radius:14px;background:#f3e2ba;opacity:0;transform:translateY(8px);animation:gateIn .45s forwards}.gate strong{font-size:22px;color:var(--brick)}@keyframes gateIn{to{opacity:1;transform:none}}.counter-table{width:100%;margin:14px 0;border-collapse:collapse}.counter-table th,.counter-table td{padding:9px;border-bottom:1px solid #dfcfaa;text-align:right}.counter-table th:first-child,.counter-table td:first-child{text-align:left}.quote{display:grid;min-height:46vh;place-items:center;text-align:center;font-size:clamp(32px,9vw,58px);font-weight:950;line-height:1.35;color:var(--brick);white-space:pre-line}.guess{width:100%;min-height:120px;margin-top:12px;padding:14px;border:2px solid #cfbf9d;border-radius:14px;background:#fffdf7;color:var(--ink);font-size:16px;line-height:1.6;resize:vertical}.error{margin:8px 0;color:var(--brick);font-size:13px;font-weight:850}.send-warning{position:fixed;z-index:30;left:50%;bottom:max(10px,env(safe-area-inset-bottom));translate:-50%;width:min(600px,92vw);padding:10px 14px;border-radius:13px;background:#f2d4c2;color:#813a29;font-size:13px;font-weight:850;box-shadow:0 7px 18px var(--shadow)}
.choice-classification{padding:10px 12px;border-left:4px solid var(--mustard);background:#f8edcf;font-size:13px;font-weight:850;line-height:1.55}
@media(max-width:560px){:root{--hud:88px}.hud{grid-template-columns:repeat(3,1fr)}.hud-brand{display:none}.meter{padding:8px 7px}.stage{padding-top:8px}.classroom-wrap{height:min(42vh,340px);min-height:285px}.card{padding:18px 16px}.card.hero{margin-top:3vh}.intro-metrics{grid-template-columns:1fr}.ending-grid{grid-template-columns:repeat(2,1fr)}.focus-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}
:focus-visible{outline:4px solid var(--teal);outline-offset:3px}
.carryover{margin:10px 0;padding:9px 12px;border-left:4px solid var(--teal);background:#edf1df;color:#496348;font-size:13px;font-weight:850;line-height:1.55}
.strategy-card,.blindspot{margin-top:16px;padding:16px;border-radius:15px;background:#fff9ec}.strategy-card h2,.blindspot h2{margin:0;color:var(--brick)}.strategy-card>p,.blindspot>p:last-child{line-height:1.7}.strategy-bars{display:grid;gap:9px;margin-top:12px}.strategy-bars>div{display:grid;grid-template-columns:72px 1fr 42px;gap:9px;align-items:center;font-size:12px;font-weight:850}.strategy-bars i{height:9px;overflow:hidden;border-radius:99px;background:#e2d7bd}.strategy-bars b{display:block;height:100%;border-radius:99px;background:var(--teal)}.strategy-bars strong{text-align:right;color:var(--brick)}.blindspot{border:2px solid #d6c49e;background:#f8edcf}.blindspot .eyebrow{margin-bottom:6px}
.reflection-card{margin-top:18px;padding:17px;border-radius:15px;background:#edf1df}.reflection-card h2{margin:0;color:#496348}.reflection-card>p{line-height:1.65}.reflection-form{display:grid;gap:10px}.reflection-form label{display:grid;gap:5px;font-size:13px;font-weight:850}.reflection-form select{width:100%;min-height:46px;padding:8px 10px;border:1px solid #b8b89d;border-radius:10px;background:#fffaf0;color:var(--ink)}
.meter{position:relative}.hud-delta{position:absolute;z-index:4;right:8px;top:50%;padding:4px 7px;border-radius:99px;background:#fffaf0;font-size:15px!important;font-weight:950!important;pointer-events:none;animation:hudDelta 1.15s ease-out forwards}.hud-delta.up{color:#3f6b4f}.hud-delta.down{color:#a8432a}.meter-up{animation:meterUp .55s ease-out}.meter-down{animation:meterDown .55s ease-out}@keyframes hudDelta{0%{opacity:0;transform:translateY(4px) scale(.8)}22%{opacity:1;transform:translateY(-18px) scale(1.15)}100%{opacity:0;transform:translateY(-36px) scale(1)}}@keyframes meterUp{50%{background:#dcebd7;box-shadow:0 0 0 4px rgba(79,130,121,.22)}}@keyframes meterDown{50%{background:#f4d8c7;box-shadow:0 0 0 4px rgba(173,77,52,.22)}}.compact-note{padding:12px 14px;line-height:1.65}.review-consequence{color:var(--muted);font-size:13px;line-height:1.6}
body.game-active{height:100dvh;overflow:hidden}body.game-active #app{height:100dvh;overflow:hidden}body.game-active .stage{display:flex;align-items:center;height:calc(100dvh - var(--hud));padding:10px 0;overflow:hidden}body.game-active .card{width:100%;max-height:100%;overflow:hidden}body.game-active:not([data-view="scene"]) .classroom-wrap{display:none!important}body.game-active[data-view="scene"] .classroom-wrap{height:clamp(118px,22dvh,180px);min-height:118px;margin-bottom:0}body.game-active[data-view="scene"] .stage{height:calc(100dvh - var(--hud) - clamp(118px,22dvh,180px));align-items:flex-start}body.game-active[data-view="choice"] .card{display:flex;flex-direction:column}body.game-active[data-view="choice"] .options{min-height:0;margin-top:8px;gap:7px}body.game-active[data-view="choice"] .option{padding:9px 11px}body.game-active[data-view="choice"] .option-body{font-size:14px;line-height:1.4}
@media(prefers-reduced-motion:reduce){.hud-delta{animation:none!important;opacity:1;transform:translateY(-22px)}.meter-up,.meter-down{animation:none!important}}