:root{--bg-main:#fbf9f4;--bg-card:#fff;--border-color:#e2ded4;--border-focus:#3b82f6;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-success:#10b981;--color-danger:#ef4444;--color-warning:#f59e0b;--color-portal:#06b6d4;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background-color:var(--bg-main);width:100%;height:100vh;color:var(--text-primary);font-family:var(--font-sans);overflow:hidden}#app-container{flex-direction:column;width:100%;height:100vh;display:flex;overflow:hidden}#top-bar{border-bottom:1px solid var(--border-color);background:#fff;flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.app-logo{color:#0f172a;letter-spacing:-.5px;font-size:20px;font-weight:800}.app-mode-badge{color:#0369a1;background:#e0f2fe;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:700}.select-level{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:#f8fafc;border-radius:6px;outline:none;padding:4px 10px;font-size:13px;font-weight:600}.select-level:focus{border-color:var(--border-focus)}.level-meta{flex-direction:column;margin-left:6px;display:flex}.level-name{color:var(--text-primary);font-size:13px;font-weight:700}.level-desc{color:var(--text-secondary);font-size:11px}.header-right{align-items:center;gap:16px;display:flex}.stars-wrap{align-items:center;gap:8px;display:flex}.stars-label{color:var(--text-secondary);font-size:12px}.stars-badge{letter-spacing:2px;font-size:16px}.stars-badge.earned{color:#f59e0b}.stars-badge.none{color:#cbd5e1}.best-leak-wrap{background:#f1f5f9;border-radius:4px;align-items:center;gap:3px;padding:1px 6px;font-size:11px;display:inline-flex}.best-leak-label{color:var(--text-secondary)}.best-leak-val{color:var(--color-primary);font-weight:800}.toggles-group{align-items:center;gap:12px;display:flex}.switch-item{color:var(--text-secondary);cursor:pointer;align-items:center;gap:4px;font-size:11px;font-weight:600;display:flex}.switch-item input{cursor:pointer;accent-color:var(--color-primary)}.btn-icon{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:#f1f5f9;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:600;transition:background .15s}.btn-icon:hover{background:#e2e8f0}#main-content{flex:1;height:calc(100vh - 48px);display:flex;overflow:hidden}#map-section{flex-direction:column;flex:1;padding:12px;display:flex;overflow:hidden}#top-status-panels{flex-shrink:0;align-items:center;gap:16px;height:28px;margin-bottom:6px;display:flex}.status-panel-item{flex:1;align-items:center;gap:8px;display:flex}.panel-label-group{align-items:center;gap:4px;min-width:96px;display:flex}.panel-icon{font-size:13px}.panel-title{color:var(--text-secondary);font-size:11px;font-weight:700}.panel-val{color:var(--text-primary);min-width:44px;font-size:13px;font-weight:800}.base-hp-track{background:#fee2e2;border-radius:5px;flex:1;height:10px;position:relative;overflow:visible}.base-hp-fill{background:linear-gradient(90deg,#ef4444,#10b981);border-radius:5px;height:100%;transition:width .1s linear}.hp-marker{pointer-events:none;z-index:2;background:#64748b;width:2px;height:14px;position:absolute;top:-2px;transform:translate(-50%)}.hp-marker .marker-tag{color:#475569;font-size:9px;font-weight:800;position:absolute;top:-13px;left:50%;transform:translate(-50%)}.hp-marker.star3{background:#f59e0b}.hp-marker.star3 .marker-tag{color:#d97706}.countdown-track{background:#e2e8f0;border-radius:5px;flex:1;height:10px;overflow:hidden}.countdown-fill{background:linear-gradient(90deg,#3b82f6,#10b981);height:100%;transition:width 50ms linear}#canvas-wrapper{image-rendering:pixelated;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#game-canvas{border:1px solid var(--border-color);cursor:crosshair;image-rendering:pixelated;background:#f8f1e0;border-radius:8px;box-shadow:0 4px 16px #0000000f}.exit-badge{color:#fff;pointer-events:none;background:#0f172ad9;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;position:absolute;bottom:16px;right:24px}.map-status-bar{flex-shrink:0;justify-content:center;align-items:center;height:22px;margin-top:4px;display:flex}#map-status-text{font-size:11px;font-weight:600;transition:all .15s}#map-status-text.status-normal{color:var(--text-muted)}#map-status-text.status-error{color:#dc2626;letter-spacing:.5px;background:#fee2e2;border-radius:4px;padding:2px 10px;font-weight:800;box-shadow:0 1px 3px #ef444433}#right-drawer{border-left:1px solid var(--border-color);background:#fff;flex-direction:column;flex-shrink:0;gap:12px;width:330px;padding:14px;display:flex;overflow-y:auto}.drawer-card{border:1px solid var(--border-color);background:#fff;border-radius:8px;flex-direction:column;gap:8px;padding:12px;display:flex}.card-header{justify-content:space-between;align-items:center;display:flex}.card-title{color:var(--text-primary);font-size:13px;font-weight:700}.predicted-stars{color:#f59e0b;letter-spacing:2px;font-size:16px}.timeline-canvas-wrap{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;width:100%;height:75px;overflow:hidden}#timeline-canvas{width:100%;height:100%;display:block}.timeline-legend{color:var(--text-secondary);justify-content:space-between;font-size:10px;display:flex}.legend-item{align-items:center;gap:4px;display:flex}.legend-dot{border-radius:2px;width:8px;height:8px}.legend-dot.red{background:#ef4444}.legend-dot.green{background:#10b981}.status-tag{text-align:center;border-radius:4px;padding:4px;font-size:11px;font-weight:700}.status-tag.three-star{color:#15803d;background:#dcfce7}.status-tag.two-star{color:#b45309;background:#fef3c7}.status-tag.one-star{color:#c2410c;background:#fed7aa}.status-tag.zero-star{color:#b91c1c;background:#fee2e2}.btn-text{color:var(--color-primary);cursor:pointer;background:0 0;border:none;font-size:11px;font-weight:600}.btn-text:hover{text-decoration:underline}.tools-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.tool-btn{cursor:pointer;background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:6px;outline:none;align-items:center;gap:8px;padding:8px 10px;transition:all .15s;display:flex}.tool-btn:hover{background:#f1f5f9;border-color:#94a3b8}.tool-btn.selected{border-color:var(--color-primary);background:#eff6ff;box-shadow:0 0 0 2px #2563eb26}.tool-btn.empty{opacity:.5}.tool-icon{color:#fff;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:800;display:flex}.brick-icon{background:#78350f}.slow-icon{background:#a16207}.barracks-icon{background:#b45309}.arrow-icon{background:#1d4ed8}.tool-detail{text-align:left;flex-direction:column;display:flex}.tool-name{color:var(--text-primary);font-size:12px;font-weight:700}.tool-count{color:var(--text-secondary);font-size:11px;font-weight:600}.tool-hint{color:var(--text-muted);text-align:center;font-size:11px}.controls-row{gap:8px;display:flex}.btn-action{color:#fff;cursor:pointer;border:none;border-radius:6px;flex:1;height:40px;font-size:15px;font-weight:700;transition:background .15s}.btn-start{background:var(--color-primary)}.btn-start:hover{background:var(--color-primary-hover)}.btn-reset{background:#475569}.btn-reset:hover{background:#334155}.btn-speed{border:1.5px solid var(--border-color);width:60px;height:40px;color:var(--text-primary);cursor:pointer;background:#f1f5f9;border-radius:6px;font-size:14px;font-weight:800}.btn-speed:hover{background:#e2e8f0}.modal-backdrop{z-index:1000;background:#0f172a99;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-panel{background:#fff;border-radius:12px;width:90%;max-width:520px;overflow:hidden;box-shadow:0 10px 25px #0003}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.modal-header h2{font-size:16px;font-weight:800}.btn-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:20px}.modal-body{flex-direction:column;gap:14px;max-height:70vh;padding:18px;display:flex;overflow-y:auto}.rule-section h3{color:var(--color-primary);margin-bottom:6px;font-size:14px;font-weight:700}.rule-section p,.rule-section li{color:var(--text-secondary);font-size:12px;line-height:1.6}.rule-section ul{padding-left:18px}.result-panel{text-align:center;box-sizing:border-box;flex-direction:column;align-items:center;gap:10px;max-width:440px;max-height:88vh;padding:20px;display:flex;overflow-y:auto}.select-quality{border:1px solid var(--border-color);height:26px;color:var(--text-primary);cursor:pointer;background:#fff;border-radius:4px;padding:0 4px;font-size:11px}.debrief-box{text-align:left;box-sizing:border-box;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;width:100%;padding:8px 12px}.debrief-toggle{color:#2563eb;cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;display:flex}.debrief-toggle:hover{color:#1d4ed8}.debrief-content{color:#334155;flex-direction:column;gap:5px;margin-top:8px;font-size:11px;line-height:1.5;display:flex}.debrief-row{background:#fff;border:1px solid #f1f5f9;border-radius:4px;padding:4px 8px;transition:all .15s}.debrief-interactive{cursor:pointer}.debrief-interactive:hover{transform:translate(2px);background:#eff6ff!important;border-color:#93c5fd!important}.debrief-disclaimer{color:#94a3b8;text-align:center;margin-top:4px;font-size:10px}.tag-redundant{color:#b91c1c;background:#fee2e2;border-radius:3px;margin-left:4px;padding:1px 4px;font-size:9px;font-weight:700}.tag-contrib{color:#15803d;background:#dcfce7;border-radius:3px;margin-left:4px;padding:1px 4px;font-size:9px;font-weight:700}.result-stars-display{color:#f59e0b;letter-spacing:4px;font-size:36px}.modal-actions{gap:12px;width:100%;margin-top:8px;display:flex}.card-actions{align-items:center;gap:8px;display:flex}@keyframes pulseRed{0%{opacity:.85;filter:drop-shadow(0 0 2px #ef444466)}to{opacity:1;filter:drop-shadow(0 0 8px #ef4444e6)}}@keyframes shakeHp{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.countdown-fill.urgent,.base-hp-fill.urgent{animation:.4s ease-in-out infinite alternate pulseRed;background:#ef4444!important}.base-hp-track.shake{animation:.22s ease-in-out shakeHp}.result-clutch-line{color:#b45309;box-sizing:border-box;background:#fef3c7;border:1px solid #fde68a;border-radius:6px;width:100%;padding:5px 12px;font-size:13px;font-weight:700}.result-stats-line{color:#475569;font-size:12px;font-weight:600;line-height:1.5}.btn-modal-main{background:var(--color-primary);color:#fff;cursor:pointer;border:none;border-radius:6px;flex:1;height:38px;font-weight:700}.btn-modal-sub{border:1px solid var(--border-color);height:38px;color:var(--text-primary);cursor:pointer;background:#f1f5f9;border-radius:6px;flex:1;font-weight:700}canvas.tool-icon{width:32px;height:32px;image-rendering:pixelated;background:#f8f1e0;border:1px solid #e2d8c0;border-radius:0;flex-shrink:0;display:block}.legend-section-title{color:#b8352a;margin:10px 0 4px;font-size:12px;font-weight:700}.legend-section-title:first-child{margin-top:0}.legend-row{border-bottom:1px solid #eee5d0;align-items:flex-start;gap:10px;padding:6px 0;display:flex}canvas.legend-icon{width:32px;height:32px;image-rendering:pixelated;background:#f8f1e0;border:1px solid #e2d8c0;flex-shrink:0}.legend-name{color:#2b2623;font-size:13px;font-weight:700}.legend-desc{color:#5b5148;font-size:12px;line-height:1.55}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-rise-in{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes modal-item-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes modal-star-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}#modal-result,#modal-legend{animation:.28s ease-out both modal-fade-in}#modal-result .result-panel{animation:.36s cubic-bezier(.2,.8,.2,1) both modal-rise-in}#modal-result .result-panel>*{animation:.32s ease-out both modal-item-in}#modal-result .result-panel>:first-child{animation-delay:.1s}#modal-result .result-panel>:nth-child(2){animation-delay:.2s}#modal-result .result-panel>:nth-child(3){animation-delay:.3s}#modal-result .result-panel>:nth-child(4){animation-delay:.36s}#modal-result .result-panel>:nth-child(5){animation-delay:.42s}#modal-result .result-panel>:nth-child(6){animation-delay:.48s}#modal-result .result-panel>:nth-child(7){animation-delay:.56s}#modal-result .result-panel>#result-stars{animation:.5s ease-out .24s both modal-star-pop}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.base-hp-track.shake,.countdown-fill.urgent,.base-hp-fill.urgent{animation:none!important}}