:root{--game-bg:#1a2332;--hud-bg:#0f1624eb;--hud-border:#ffffff14;--hud-text:#e8e0d4;--hud-muted:#8a9bb0;--accent-teal:#4ecdc4;--accent-gold:#ffd93d;--accent-coral:#ff6b6b;--accent-lavender:#a78bfa;--accent-sage:#86efac;--accent-sky:#67e8f9;--card-bg:#141e30f5;--card-border:#ffffff1a;--radius:12px;--radius-sm:8px;--shadow:0 8px 32px #0006;--font:"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--game-bg);width:100%;height:100%;color:var(--hud-text);font-family:var(--font);overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit;background:0 0;border:none}#gameShell{width:100vw;height:100vh;position:relative;overflow:hidden}#gameCanvas{background:var(--game-bg);width:100%;height:100%;display:block}.hud-top{background:var(--hud-bg);border-bottom:1px solid var(--hud-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:10;align-items:center;gap:16px;padding:10px 18px;display:flex;position:absolute;top:0;left:0;right:0}.hud-brand{align-items:center;gap:8px;margin-right:8px;display:flex}.hud-logo{border:2px solid var(--accent-teal);width:34px;height:34px;color:var(--accent-teal);border-radius:50%;place-items:center;font-size:16px;font-weight:800;display:grid}.hud-title{white-space:nowrap;font-size:15px;font-weight:700}.hud-stats{gap:14px;margin-right:8px;display:flex}.hud-stat{flex-direction:column;align-items:center;display:flex}.hud-stat-label{color:var(--hud-muted);text-transform:uppercase;letter-spacing:1px;font-size:10px}.hud-stat-value{color:var(--accent-gold);font-size:14px;font-weight:700}.hud-scores{flex:1;gap:10px;display:flex}.hud-score{align-items:center;gap:6px;display:flex}.score-icon{color:var(--accent-teal);font-size:12px}.score-bar{background:#ffffff14;border-radius:3px;width:60px;height:6px;overflow:hidden}.score-fill{background:linear-gradient(90deg, var(--accent-teal), var(--accent-sky));border-radius:3px;height:100%;transition:width .6s}.score-num{color:var(--accent-teal);min-width:22px;font-size:11px;font-weight:700}.hud-controls{align-items:center;gap:8px;display:flex}.hud-btn{border-radius:var(--radius-sm);border:1px solid var(--hud-border);background:#ffffff0f;place-items:center;width:34px;height:34px;font-size:14px;transition:background .15s,transform .15s;display:grid}.hud-btn:hover{background:#ffffff1f;transform:translateY(-1px)}.speed-control{color:var(--hud-muted);align-items:center;gap:6px;font-size:11px;display:flex}.speed-control input[type=range]{width:60px;accent-color:var(--accent-teal)}.hud-bottom{background:var(--hud-bg);border-top:1px solid var(--hud-border);border-radius:var(--radius) var(--radius) 0 0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:10;padding:10px 20px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.hud-actions{gap:8px;display:flex}.action-btn{border-radius:var(--radius-sm);border:1px solid var(--hud-border);background:#ffffff0f;align-items:center;gap:5px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.action-btn:hover{border-color:var(--accent-teal);background:#4ecdc426;transform:translateY(-2px);box-shadow:0 4px 12px #4ecdc433}.action-icon{font-size:16px}.game-menu{background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:10;flex-direction:column;gap:6px;padding:8px;display:flex;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.menu-btn{border-radius:var(--radius-sm);background:#ffffff0a;border:1px solid #0000;place-items:center;width:40px;height:40px;font-size:16px;transition:all .2s;display:grid}.menu-btn:hover{border-color:var(--accent-teal);background:#4ecdc41f;transform:scale(1.1)}.event-toasts{z-index:15;pointer-events:none;flex-direction:column;gap:6px;max-width:340px;display:flex;position:absolute;top:70px;right:16px}.toast-item{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);pointer-events:auto;padding:10px 14px;font-size:13px;line-height:1.5;animation:.3s toastIn,.3s 4s forwards toastOut}.toast-item.support{border-left:3px solid var(--accent-sage)}.toast-item.conflict{border-left:3px solid var(--accent-coral)}.toast-item.propose{border-left:3px solid var(--accent-gold)}@keyframes toastIn{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translate(40px)}}.scenario-bar{background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:10;align-items:center;gap:8px;padding:8px 14px;display:flex;position:absolute;top:64px;left:50%;transform:translate(-50%)}#scenarioInput{border:1px solid var(--hud-border);border-radius:var(--radius-sm);width:300px;color:var(--hud-text);background:#ffffff0f;outline:none;padding:7px 12px;font-size:13px}#scenarioInput:focus{border-color:var(--accent-teal);box-shadow:0 0 0 2px #4ecdc426}.scenario-btn{background:var(--accent-teal);color:#0a1628;border-radius:var(--radius-sm);padding:7px 16px;font-size:13px;font-weight:700}.scenario-btn:hover{background:#3fc5bc}.scene-presets{gap:4px;display:flex}.preset-chip{border-radius:var(--radius-sm);border:1px solid var(--hud-border);background:#ffffff0f;padding:5px 10px;font-size:11px}.preset-chip:hover{border-color:var(--accent-teal);background:#4ecdc41f}.detail-panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius) 0 0 var(--radius);z-index:12;width:360px;padding:20px;transition:right .35s cubic-bezier(.4,0,.2,1);position:absolute;top:64px;bottom:80px;right:-380px;overflow-y:auto;box-shadow:-8px 0 32px #0000004d}.detail-panel.open{right:0}.detail-close{background:#ffffff0f;border-radius:50%;place-items:center;width:30px;height:30px;font-size:18px;display:grid;position:absolute;top:12px;right:12px}.detail-close:hover{background:#ff6b6b33}.detail-content h3{color:var(--accent-gold);margin-bottom:12px;font-size:18px}.detail-content p{color:var(--hud-muted);margin-bottom:8px;font-size:13px;line-height:1.7}.detail-content strong{color:var(--hud-text)}.detail-section{border-radius:var(--radius-sm);border:1px solid var(--card-border);background:#ffffff08;margin-bottom:16px;padding:12px}.detail-section-title{color:var(--accent-teal);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:11px;font-weight:700}.stat-row{align-items:center;gap:8px;margin-bottom:6px;display:flex}.stat-label{color:var(--hud-muted);width:40px;font-size:12px}.stat-bar{background:#ffffff14;border-radius:3px;flex:1;height:6px;overflow:hidden}.stat-fill{border-radius:3px;height:100%;transition:width .5s}.stat-fill.mood{background:linear-gradient(90deg, var(--accent-coral), var(--accent-gold))}.stat-fill.energy{background:linear-gradient(90deg, var(--accent-sky), var(--accent-teal))}.stat-fill.trust{background:linear-gradient(90deg, var(--accent-lavender), var(--accent-sage))}.stat-val{color:var(--hud-text);text-align:right;min-width:24px;font-size:11px;font-weight:700}.modal-overlay{z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.modal-overlay.open{display:flex}.modal-panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);width:90%;max-width:640px;max-height:80vh;padding:28px;animation:.25s modalIn;overflow-y:auto;box-shadow:0 24px 64px #00000080}@keyframes modalIn{0%{opacity:0;transform:translateY(20px)scale(.96)}to{opacity:1;transform:none}}.modal-close{background:#ffffff0f;border-radius:50%;place-items:center;width:34px;height:34px;font-size:20px;display:grid;position:absolute;top:16px;right:16px}.modal-close:hover{background:#ff6b6b33}.modal-content{position:relative}.modal-content h2{color:var(--accent-gold);margin-bottom:6px;font-size:22px}.modal-content .eyebrow{color:var(--accent-teal);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-size:11px;font-weight:700}.modal-content p{color:var(--hud-muted);font-size:14px;line-height:1.8}.modal-content strong{color:var(--hud-text)}.modal-content textarea,.modal-content input[type=text]{border:1px solid var(--hud-border);border-radius:var(--radius-sm);width:100%;color:var(--hud-text);background:#ffffff0f;outline:none;margin:8px 0;padding:10px 14px;font-size:14px}.modal-content textarea{resize:vertical;min-height:100px}.modal-content textarea:focus,.modal-content input[type=text]:focus{border-color:var(--accent-teal);box-shadow:0 0 0 2px #4ecdc426}.modal-content label{color:var(--hud-text);margin-top:12px;margin-bottom:4px;font-size:13px;font-weight:700;display:block}.modal-btn{border-radius:var(--radius-sm);margin-top:12px;margin-right:8px;padding:9px 18px;font-size:13px;font-weight:700}.modal-btn.primary{background:var(--accent-teal);color:#0a1628}.modal-btn.primary:hover{background:#3fc5bc}.modal-btn.ghost{border:1px solid var(--hud-border);background:#ffffff0f}.modal-btn.ghost:hover{background:#ffffff1f}.modal-btn.compact{padding:7px 12px;font-size:12px}.modal-chips{flex-wrap:wrap;gap:6px;margin:8px 0;display:flex}.modal-chip{border-radius:var(--radius-sm);border:1px solid var(--hud-border);background:#ffffff0f;padding:6px 14px;font-size:13px;transition:all .2s}.modal-chip.active,.modal-chip:hover{border-color:var(--accent-teal);background:#4ecdc426}.reply-box{border:1px solid var(--card-border);border-radius:var(--radius-sm);color:var(--hud-muted);background:#ffffff08;margin-top:14px;padding:14px;font-size:14px;line-height:1.8}.reply-box .reply-kicker{color:var(--accent-teal);margin-bottom:6px;font-size:11px;font-weight:700}.tomorrow-card{border-radius:var(--radius-sm);color:var(--hud-text);background:#4ecdc414;border:1px solid #4ecdc452;margin-top:12px;padding:14px;font-size:13px;line-height:1.7}.tomorrow-card[hidden]{display:none}.tomorrow-card.archive{margin-bottom:12px}.tomorrow-card .reply-kicker{color:var(--accent-teal);margin-bottom:6px;font-size:11px;font-weight:700}.tomorrow-source{color:var(--hud-muted);margin-top:8px}.tomorrow-actions{flex-wrap:wrap;gap:8px;display:flex}.life-cards{grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0;display:grid}.life-card{border:1px solid var(--card-border);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff08;padding:14px;transition:all .2s}.life-card:hover,.life-card.selected{border-color:var(--accent-gold);background:#ffd93d0f}.life-card .eyebrow{margin-bottom:4px;font-size:10px}.life-card h3{color:var(--hud-text);margin-bottom:6px;font-size:14px}.life-card p{font-size:12px}.echo-list{flex-direction:column;gap:8px;display:flex}.echo-item{border:1px solid var(--card-border);border-radius:var(--radius-sm);background:#ffffff08;padding:10px 14px}.echo-item time{color:var(--hud-muted);margin-bottom:4px;font-size:11px;display:block}.echo-item p{color:var(--hud-text);font-size:13px;line-height:1.6}.tomorrow-track{color:var(--accent-sky);margin-top:8px;font-size:13px;line-height:1.5}.mission-item{border:1px solid var(--card-border);border-radius:var(--radius-sm);background:#ffffff08;margin-bottom:8px;padding:10px 14px}.mission-item p{color:var(--hud-muted);font-size:13px}.mission-item .mission-title{color:var(--accent-lavender);font-weight:700}.mission-item .mission-progress{color:var(--accent-teal);font-size:12px}.citizen-item{border:1px solid var(--card-border);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff08;margin-bottom:8px;padding:10px 14px;transition:all .2s}.citizen-item:hover{border-color:var(--accent-teal);background:#4ecdc40f}.citizen-item p{color:var(--hud-muted);font-size:13px}.citizen-item .citizen-name{color:var(--hud-text);font-weight:700}.robot-figure{justify-content:center;align-items:center;padding:30px 0;display:flex}.robot-head-inner{border:2px solid var(--accent-teal);background:#4ecdc40f;border-radius:20px;justify-content:center;align-items:center;gap:16px;width:80px;height:60px;display:flex}.robot-eye{background:var(--accent-teal);border-radius:50%;width:10px;height:10px}.form-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.experience-meta{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.experience-meta span{border-radius:var(--radius-sm);color:var(--accent-teal);background:#4ecdc41a;padding:4px 10px;font-size:12px}.splash-screen{z-index:100;background:linear-gradient(135deg,#0f1923 0%,#1a2a3a 50%,#0d1b2a 100%);justify-content:center;align-items:center;transition:opacity .6s;display:flex;position:absolute;inset:0}.splash-screen.hidden{opacity:0;pointer-events:none}.splash-inner{text-align:center;animation:.8s splashIn}@keyframes splashIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}.splash-logo{border:3px solid var(--accent-teal);width:80px;height:80px;color:var(--accent-teal);border-radius:50%;place-items:center;margin:0 auto 20px;font-size:36px;font-weight:800;animation:3s ease-in-out infinite splashPulse;display:grid;box-shadow:0 0 40px #4ecdc433}@keyframes splashPulse{0%,to{box-shadow:0 0 40px #4ecdc433}50%{box-shadow:0 0 60px #4ecdc466}}.splash-inner h1{color:var(--hud-text);margin-bottom:8px;font-size:36px}.splash-inner p{color:var(--hud-muted);font-size:16px}.splash-sub{max-width:340px;margin-top:12px!important;font-size:13px!important}.splash-enter{background:var(--accent-teal);color:#0a1628;border-radius:var(--radius);margin-top:28px;padding:12px 36px;font-size:16px;font-weight:800;transition:all .3s;box-shadow:0 4px 20px #4ecdc44d}.splash-enter:hover{background:#3fc5bc;transform:translateY(-2px);box-shadow:0 8px 30px #4ecdc466}.avatar-form{text-align:left;width:100%;max-width:320px;margin-top:16px}.avatar-label{color:var(--accent-teal);letter-spacing:.5px;margin-top:10px;margin-bottom:4px;font-size:12px;font-weight:700;display:block}.avatar-input{border:1px solid var(--hud-border);border-radius:var(--radius-sm);width:100%;color:var(--hud-text);background:#ffffff0f;outline:none;padding:8px 12px;font-size:13px}.avatar-input:focus{border-color:var(--accent-teal);box-shadow:0 0 0 2px #4ecdc426}.avatar-range{width:100%;accent-color:var(--accent-teal)}.avatar-profession-select{border:1px solid var(--hud-border);border-radius:var(--radius-sm);width:100%;color:var(--hud-text);cursor:pointer;background:#ffffff0f;outline:none;padding:8px 12px;font-size:13px}.avatar-profession-select option{color:#e8e0d4;background:#1a2332}.avatar-color-grid{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.avatar-color-swatch{cursor:pointer;border:3px solid #0000;border-radius:50%;width:32px;height:32px;transition:all .2s}.avatar-color-swatch:hover{transform:scale(1.15)}.avatar-color-swatch.selected{border-color:#fff;transform:scale(1.15);box-shadow:0 0 12px #ffffff4d}.avatar-preview-canvas{border:2px solid var(--accent-teal);background:#4ecdc40f;border-radius:50%;margin:12px auto 0;display:block}.tutorial-overlay{z-index:90;pointer-events:none;display:none;position:absolute;inset:0}.tutorial-overlay.active{pointer-events:auto;display:block}.tutorial-backdrop{background:#0000008c;transition:opacity .4s;position:absolute;inset:0}.tutorial-spotlight{border:2px solid var(--accent-gold);pointer-events:none;z-index:1;border-radius:12px;transition:all .5s cubic-bezier(.4,0,.2,1);position:absolute;box-shadow:0 0 0 9999px #0000008c}.tutorial-card{z-index:2;background:var(--card-bg);border:1px solid var(--accent-gold);border-radius:var(--radius);pointer-events:auto;width:380px;max-width:90vw;padding:28px;animation:.4s tutorialIn;position:absolute;box-shadow:0 16px 48px #00000080,0 0 40px #ffd93d1a}@keyframes tutorialIn{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:none}}.tutorial-step-dots{justify-content:center;gap:8px;margin-bottom:18px;display:flex}.tutorial-dot{background:#ffffff26;border-radius:50%;width:8px;height:8px;transition:all .3s}.tutorial-dot.active{background:var(--accent-gold);transform:scale(1.3)}.tutorial-dot.done{background:var(--accent-teal)}.tutorial-title{color:var(--accent-gold);text-align:center;margin-bottom:10px;font-size:20px;font-weight:800}.tutorial-desc{color:var(--hud-muted);text-align:center;margin-bottom:20px;font-size:14px;line-height:1.8}.tutorial-actions{justify-content:space-between;align-items:center;display:flex}.tutorial-skip{border-radius:var(--radius-sm);border:1px solid var(--hud-border);color:var(--hud-muted);cursor:pointer;background:#ffffff0f;padding:8px 16px;font-size:13px;transition:all .2s}.tutorial-skip:hover{color:var(--hud-text);background:#ffffff1a}.tutorial-next{border-radius:var(--radius-sm);background:var(--accent-gold);color:#1a1a1a;cursor:pointer;padding:10px 24px;font-size:14px;font-weight:700;transition:all .2s;box-shadow:0 4px 16px #ffd93d40}.tutorial-next:hover{background:#ffe566;transform:translateY(-1px);box-shadow:0 6px 20px #ffd93d59}.world-banner{background:var(--card-bg);border:1px solid var(--accent-gold);border-radius:var(--radius);color:var(--accent-gold);z-index:16;pointer-events:none;text-align:center;max-width:500px;padding:10px 24px;font-size:14px;font-weight:700;animation:.4s bannerIn,.5s 5.5s forwards bannerOut;position:absolute;top:28%;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #ffd93d33}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes bannerOut{0%{opacity:1}to{opacity:0;transform:translate(-50%)translateY(-10px)}}.interaction-btn{border-radius:var(--radius-sm);border:1px solid var(--hud-border);color:var(--hud-text);cursor:pointer;background:#ffffff0f;align-items:center;gap:4px;margin:3px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s;display:inline-flex}.interaction-btn:hover{border-color:var(--accent-teal);background:#4ecdc426;transform:translateY(-1px)}.event-log{background:var(--hud-bg);border-left:1px solid var(--hud-border);z-index:20;flex-direction:column;width:280px;transition:transform .3s;display:flex;position:absolute;top:60px;bottom:60px;right:0}.event-log.collapsed{transform:translate(240px)}.event-log-header{border-bottom:1px solid var(--hud-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.event-log-title{color:var(--hud-text);font-size:13px;font-weight:600}.event-log-toggle{color:var(--hud-muted);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:14px}.event-log-toggle:hover{color:var(--accent-teal)}.event-log-body{flex:1;padding:8px;overflow-y:auto}.event-log-body::-webkit-scrollbar{width:4px}.event-log-body::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.event-entry{border-radius:var(--radius-sm);color:var(--hud-text);background:#ffffff08;border-left:3px solid #0000;margin-bottom:4px;padding:6px 8px;font-size:12px;line-height:1.5}.event-entry.user-input{border-left-color:var(--accent-teal);background:#4ecdc414}.event-entry.user-input .event-source{color:var(--accent-teal)}.event-entry.society{border-left-color:var(--accent-gold)}.event-entry.society .event-source{color:var(--accent-gold)}.event-entry.action{border-left-color:var(--accent-lavender)}.event-entry.action .event-source{color:var(--accent-lavender)}.event-source{text-transform:uppercase;letter-spacing:.5px;opacity:.8;margin-bottom:2px;font-size:10px}.event-text{word-break:break-word}.event-entry.highlight{animation:2s event-highlight}@keyframes event-highlight{0%{background:#4ecdc440}to{background:#ffffff08}}@media (width<=900px){.hud-top{flex-wrap:wrap;gap:8px;padding:8px 12px}.hud-scores{display:none}.scenario-bar{flex-wrap:wrap;width:90%}#scenarioInput{width:100%}.scene-presets{display:none}.hud-actions{flex-wrap:wrap;justify-content:center}.action-btn{padding:6px 10px;font-size:12px}.detail-panel{width:300px}.life-cards{grid-template-columns:1fr}.event-log{width:220px}}