:root{--bg: #0e1015;--panel: #1a1e28;--panel-2: #232838;--accent: #7c5cff;--accent-2: #33d6a6;--danger: #ff5470;--text: #e7eaf0;--muted: #8b93a7;--common: #b8c0d0;--rare: #4aa3ff;--epic: #b45cff;--legendary: #ffb020;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden}canvas{display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.overlay>*{pointer-events:auto}.panel{background:var(--panel);border:1px solid #2c3244;border-radius:12px;padding:24px;width:420px;box-shadow:0 12px 40px #00000080}.panel h1{margin:0 0 4px;font-size:28px}.panel h2{margin:0 0 16px;font-size:18px;color:var(--muted);font-weight:500}input,button,select{font:inherit}input,select{width:100%;padding:10px 12px;margin:6px 0 12px;background:var(--panel-2);border:1px solid #333a4d;border-radius:8px;color:var(--text)}button{cursor:pointer;padding:10px 16px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;transition:filter .12s ease}button:hover{filter:brightness(1.1)}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:var(--panel-2);border:1px solid #333a4d}button.ghost{background:transparent;border:1px solid #333a4d}.row{display:flex;gap:8px;align-items:center}.list{list-style:none;padding:0;margin:0 0 16px}.list li{display:flex;justify-content:space-between;padding:8px 10px;border-radius:8px;background:var(--panel-2);margin-bottom:6px}.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:#2c3244}.badge.ready{background:var(--accent-2);color:#04150f}.error{color:var(--danger);min-height:20px;font-size:14px}.muted{color:var(--muted)}.talents-panel{width:min(960px,96vw);max-height:90vh;overflow-y:auto}.talents-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.essence-badge{text-align:right;background:var(--panel-2);border:1px solid #333a4d;border-radius:8px;padding:8px 14px}.essence-badge strong{display:block;font-size:22px;color:var(--accent-2)}.talents-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.talent-column h3{margin:0 0 4px;font-size:16px}.branch-pts{font-size:12px;margin:0 0 10px}.talent-card{background:var(--panel-2);border:1px solid #333a4d;border-radius:8px;padding:10px;margin-bottom:8px}.talent-card.owned{border-color:#3a5a4d}.talent-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.talent-desc{font-size:12px;margin:0 0 8px}.meta-award{background:var(--panel-2);border:1px solid #3a5a4d;border-radius:8px;padding:12px;margin-bottom:16px;text-align:center}.meta-award strong{color:var(--accent-2);font-size:20px}.meta-bonus-summary{background:var(--panel-2);border:1px solid #3a5a4d;border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:13px;line-height:1.5}.meta-bonus-summary strong{color:var(--accent-2)}.hud .meta-chip{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:#3a5a4d73;border:1px solid #3a5a4d;font-size:11px;color:var(--accent-2)}@media(max-width:720px){.talents-grid{grid-template-columns:1fr}}.guide-panel{width:min(920px,96vw);max-height:90vh;display:flex;flex-direction:column}.guide-header{margin-bottom:12px}.guide-header h1{margin-bottom:2px}.guide-layout{display:grid;grid-template-columns:200px 1fr;gap:16px;min-height:0;flex:1;overflow:hidden}.guide-nav{display:flex;flex-direction:column;gap:4px;overflow-y:auto;padding-right:4px}.guide-nav-btn{text-align:left;padding:8px 12px;background:var(--panel-2);border:1px solid #333a4d;border-radius:8px;color:var(--text);font-weight:500;font-size:13px}.guide-nav-btn:hover{border-color:#4a5568;filter:none}.guide-nav-btn.active{background:#7c5cff33;border-color:var(--accent);color:#fff}.guide-content{overflow-y:auto;padding:4px 8px 4px 0;min-height:0}.guide-content kbd,.guide-header kbd{display:inline-block;padding:1px 6px;border-radius:4px;border:1px solid #444c60;background:var(--panel-2);font-size:11px;font-family:inherit}.guide-content h2{margin:0 0 12px;font-size:20px;color:var(--accent-2)}.guide-text{margin:0 0 12px;line-height:1.55;font-size:14px}.guide-list{margin:0 0 12px;padding-left:20px;line-height:1.6;font-size:14px}.guide-list li{margin-bottom:6px}.guide-table-wrap{overflow-x:auto;margin-bottom:12px}.guide-table{width:100%;border-collapse:collapse;font-size:13px}.guide-table th,.guide-table td{padding:8px 10px;text-align:left;border:1px solid #333a4d}.guide-table th{background:var(--panel-2);color:var(--accent-2);font-weight:600}.guide-table td{background:#1a1e2899}@media(max-width:720px){.guide-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.guide-nav{flex-direction:row;flex-wrap:wrap;max-height:none}.guide-nav-btn{flex:1 1 auto;min-width:calc(50% - 4px);font-size:12px}}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-size:14px}.hud .top-center{position:absolute;top:12px;left:50%;transform:translate(-50%);text-align:center}.hud .core-bar{width:320px;height:18px;background:#2a1622;border:1px solid #4a2233;border-radius:6px;overflow:hidden;margin:4px auto}.hud .core-bar>div{height:100%;background:linear-gradient(90deg,#ff5470,#ffb020)}.hud .bottom-left{position:absolute;left:16px;bottom:16px;width:260px}.hud .bar{height:14px;border-radius:5px;overflow:hidden;background:#1c2130;border:1px solid #2c3244;margin:3px 0}.hud .bar>div{height:100%}.hud .hp>div{background:#33d6a6}.hud .xp>div{background:#7c5cff}.hud .top-right{position:absolute;right:16px;top:12px;text-align:right}.hud .cooldowns{display:flex;gap:8px;margin-top:6px}.hud .cd{width:44px;height:44px;border-radius:8px;background:var(--panel-2);border:1px solid #333a4d;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:11px}.hud .cd.ready{border-color:var(--accent-2)}.ability-bar{position:absolute;right:16px;bottom:88px;display:flex;gap:10px;padding:10px 12px;background:#080a10e0;border:1px solid #3a4258;border-radius:12px;box-shadow:0 8px 24px #00000073;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ability-slot{position:relative;width:68px;height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px;background:var(--panel-2);border:2px solid #333a4d;transition:border-color .15s,box-shadow .15s}.ability-slot.ready{border-color:var(--accent);box-shadow:0 0 12px #33d6a659}.ability-slot.on-cd{border-color:#4a5068}.ability-ring{position:absolute;top:4px;right:4px;bottom:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);transform:rotate(-90deg);pointer-events:none}.ability-ring-bg{fill:none;stroke:#ffffff14;stroke-width:3}.ability-ring-progress{fill:none;stroke:var(--accent, #33d6a6);stroke-width:3;stroke-linecap:round}.ability-key{font-size:15px;font-weight:800;color:#fff;z-index:1}.ability-timer{font-size:13px;font-weight:700;color:var(--accent-2);z-index:1;min-height:16px}.ability-slot.ready .ability-timer{color:var(--accent);font-size:16px}.ability-name{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);z-index:1}.ability-slot.ready .ability-name{color:var(--accent)}.tutorial-overlay{background:#06080cb8}.tutorial-panel{max-width:520px}.tutorial-header{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.tutorial-header h1{margin:0;font-size:1.35rem}.tutorial-timer{font-size:13px;color:var(--accent);font-weight:600}.tutorial-steps{display:flex;gap:6px;margin-bottom:16px}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:#333a4d}.tutorial-dot.active{background:var(--accent);transform:scale(1.25)}.tutorial-dot.done{background:var(--accent-2)}.tutorial-step-title{margin:0 0 8px;font-size:1.05rem;color:var(--accent-2)}.tutorial-step-body{margin:0 0 16px;line-height:1.65;font-size:14px;color:#c8ced9}.tutorial-ability-preview{display:flex;gap:12px;justify-content:center;margin-bottom:16px}.ability-slot.preview{width:56px;height:64px;opacity:.95}.tutorial-actions{gap:8px;margin-top:8px}.wave1-hint{position:absolute;top:96px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:10px 16px;background:#080c14eb;border:1px solid var(--accent-2);border-radius:10px;font-size:13px;max-width:min(92vw,560px);box-shadow:0 6px 20px #0006}.wave1-hint strong{color:var(--accent-2);white-space:nowrap}.wave1-hint button{padding:4px 10px;font-size:12px}.prep-hint{border-color:var(--accent-2)}.gold{color:var(--legendary);font-weight:700}.choices{display:flex;gap:12px}.choice{flex:1;padding:16px;border-radius:10px;background:var(--panel-2);border:2px solid #333a4d;cursor:pointer;text-align:center}.choice:hover{border-color:var(--accent)}.choice .rar{font-size:12px;text-transform:uppercase;letter-spacing:1px}.rar-common{color:var(--common)}.rar-rare{color:var(--rare)}.rar-epic{color:var(--epic)}.rar-legendary{color:var(--legendary)}.tower-panel-collapsed{position:absolute;left:50%;bottom:12px;transform:translate(-50%);display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 12px;width:min(96vw,640px);padding:10px 16px;border-radius:12px;background:#0c0e14eb;border:2px solid #3a4258;box-shadow:0 8px 28px #00000073;pointer-events:auto;z-index:30;color:var(--text);font-size:13px;cursor:pointer}.tower-panel-collapsed:hover{border-color:#4a5568;background:#12141cf5}.tower-panel{position:absolute;left:50%;bottom:12px;transform:translate(-50%);display:flex;flex-direction:column;gap:10px;width:min(96vw,780px);padding:12px 14px;border-radius:14px;background:#0c0e14f5;border:2px solid #3a4258;box-shadow:0 12px 40px #0000008c;pointer-events:auto;z-index:30}.tower-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:4px;border-bottom:1px solid #2a3040}.tower-panel-title{font-size:16px;color:var(--accent-2)}.tower-panel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}@media(max-width:720px){.tower-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.tower-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border-radius:10px;border:2px solid #333a4d;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;min-height:108px;transition:background .12s,border-color .12s}.tower-card:hover{background:#222838;border-color:#4a5568}.tower-card.selected{background:#1e2433}.tower-card-top{display:flex;align-items:center;gap:8px;width:100%}.tower-card-name{font-weight:700;font-size:13px;line-height:1.2}.tower-card-cost{font-size:15px;font-weight:700}.tower-card-stats{font-size:11px;color:var(--accent-2);line-height:1.35}.tower-card-role{font-size:11px;color:var(--muted);line-height:1.35}.tower-panel-footer{padding:8px 10px;border-radius:8px;background:#10121ad9;border:1px solid #333a4d;font-size:12px;color:var(--muted);text-align:center;line-height:1.45}.upgrade-dock{position:absolute;left:16px;bottom:88px;width:min(340px,calc(100vw - 32px));padding:12px;border-radius:12px;background:#10121aeb;border:2px solid var(--accent);box-shadow:0 8px 32px #00000073;pointer-events:auto;z-index:25}.upgrade-dock-header{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.upgrade-dock-title{font-weight:700;font-size:15px;color:var(--accent-2)}.upgrade-dock-choices{display:flex;flex-direction:column;gap:6px}.upgrade-dock-choice{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 12px;text-align:left;border-radius:8px;background:var(--panel-2);border:1px solid #333a4d;color:var(--text);cursor:pointer}.upgrade-dock-choice:hover{border-color:var(--accent);background:#2a3040}.upgrade-dock-key{flex-shrink:0;min-width:22px;height:22px;padding:0 4px;border-radius:6px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}.upgrade-dock-body{display:flex;flex-direction:column;gap:2px;min-width:0}.upgrade-dock-body strong{font-size:13px}.upgrade-dock-desc{font-size:11px;line-height:1.35}.upgrade-dock-reroll{width:100%;margin-top:8px;font-size:12px;padding:8px}.scoreboard{position:absolute;top:60px;left:50%;transform:translate(-50%);background:#10121af0;border:1px solid #2c3244;border-radius:10px;padding:16px 24px;min-width:360px}.scoreboard table{width:100%;border-collapse:collapse}.scoreboard td,.scoreboard th{padding:4px 10px;text-align:left}@keyframes build-hint-pulse{0%,to{opacity:.3}50%{opacity:.9}}.build-phase-hint{position:absolute;left:50%;top:78px;transform:translate(-50%);pointer-events:none;font-size:13px;font-weight:600;color:var(--accent-2);letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.75);white-space:nowrap;animation:build-hint-pulse 2.8s ease-in-out infinite}.build-phase-hint kbd{display:inline-block;padding:1px 7px;margin:0 2px;border-radius:5px;border:1px solid rgba(100,180,255,.45);background:#64b4ff14;color:var(--accent);font-size:12px;font-family:inherit}.toast{position:absolute;top:12px;left:12px;background:var(--danger);color:#fff;padding:8px 14px;border-radius:8px;font-size:13px}.pause-overlay{background:#080a10b8;z-index:40}.pause-panel{text-align:center;max-width:360px}.pause-panel h2{margin:0 0 12px}.pause-actions{display:flex;gap:12px;justify-content:center;margin-top:16px}.pause-actions button{min-width:100px}.hint{position:absolute;bottom:16px;right:16px;font-size:12px;color:var(--muted);text-align:right;line-height:1.5}.mute-btn{position:absolute;top:12px;left:12px;width:40px;height:40px;border-radius:8px;border:1px solid #333a4d;background:#10121ad9;font-size:18px;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center}.mute-btn:hover{border-color:var(--accent)}.guide-btn{position:absolute;top:12px;left:58px;width:40px;height:40px;border-radius:8px;border:1px solid #333a4d;background:#10121ad9;font-size:18px;font-weight:700;color:var(--accent-2);cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center}.guide-btn:hover{border-color:var(--accent);color:var(--accent)}