.layout{display:flex;min-height:100vh;font-family:Inter,system-ui,Arial}.sidebar{width:250px;background:#1f2937;color:#fff;flex-shrink:0}.sidebar-header{padding:20px 16px;border-bottom:1px solid #374151}.sidebar-header h2{margin:0;font-size:18px;font-weight:600}.nav-menu{list-style:none;margin:0;padding:0}.nav-item{display:flex;align-items:center;padding:12px 16px;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #374151}.nav-item:hover{background:#374151}.nav-item.active{background:#3b82f6;color:#fff}.nav-icon{margin-right:12px;font-size:16px;width:20px;text-align:center}.nav-text{font-size:14px;font-weight:500}.main-content{flex:1;background:#f9fafb;overflow-y:auto}.content-header{background:#fff;padding:16px 24px;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a}.content-header h1{margin:0;font-size:24px;font-weight:600;color:#1f2937}.page-content{display:none;padding:24px;max-width:1200px}.page-content.active{display:block}.container{max-width:1100px;margin:24px auto;padding:0 16px;font-family:Inter,system-ui,Arial}h1{margin:0 0 16px}.card{border:1px solid #e5e7eb;border-radius:8px;padding:16px;margin:16px 0;background:#fff}.row{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}.muted{color:#6b7280;font-size:12px}.pre{background:#0b1020;color:#e9f1ff;border-radius:6px;padding:8px;white-space:pre-wrap;word-break:break-all;user-select:text;-webkit-user-select:text;-moz-user-select:text}.pre.small{max-height:220px;overflow:auto}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.grid .item{border:1px solid #e5e7eb;border-radius:6px;padding:8px}.table{width:100%;border-collapse:collapse}.table th,.table td{border:1px solid #e5e7eb;padding:6px 8px;text-align:left}button{padding:6px 12px;border:1px solid #d1d5db;border-radius:6px;background:#f3f4f6;cursor:pointer}button:hover{background:#e5e7eb}input{padding:6px;border:1px solid #d1d5db;border-radius:6px}.city-actions{white-space:nowrap}.city-actions button{margin:2px;padding:4px 8px;font-size:12px}.btn-complete-defense{background:#fef3c7;border-color:#f59e0b;color:#92400e}.btn-complete-defense:hover{background:#fde68a}.btn-collect-resources{background:#d1fae5;border-color:#10b981;color:#065f46}.btn-collect-resources:hover{background:#a7f3d0}.btn-set-main-city{background:#dbeafe;border-color:#3b82f6;color:#1e40af}.btn-set-main-city:hover{background:#bfdbfe}.btn-cancel-main-city{background:#fee2e2;border-color:#ef4444;color:#991b1b}.btn-cancel-main-city:hover{background:#fecaca}.btn-gift-city{background:#f3e8ff;border-color:#8b5cf6;color:#5b21b6}.btn-gift-city:hover{background:#e9d5ff}.btn-rename-city{background:#fef7cd;border-color:#f59e0b;color:#92400e}.btn-rename-city:hover{background:#fde68a}.status-indicator{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.status-indicator.connected{background:#d1fae5;color:#065f46;border:1px solid #10b981}.status-indicator.disconnected{background:#fee2e2;color:#991b1b;border:1px solid #ef4444}.btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}.btn-primary:hover{background:#2563eb}.btn-primary:disabled{background:#9ca3af;border-color:#9ca3af;cursor:not-allowed}.btn-secondary{background:#6b7280;color:#fff;border-color:#6b7280}.btn-secondary:hover{background:#4b5563}.btn-secondary:disabled{background:#d1d5db;color:#6b7280;cursor:not-allowed}.chat-container{display:flex;height:500px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.chat-sidebar{width:200px;background:#f8f9fa;border-right:1px solid #e5e7eb;padding:12px;overflow-y:auto}.chat-sidebar h3{margin:0 0 8px;font-size:14px;color:#374151;font-weight:600}.chat-channels{margin-bottom:16px}.channel-item{display:flex;align-items:center;padding:6px 8px;border-radius:4px;cursor:pointer;margin:2px 0}.channel-item:hover{background:#e5e7eb}.channel-item.active{background:#3b82f6;color:#fff}.channel-icon{margin-right:6px;font-size:14px}.channel-name{font-size:12px}.user-list{max-height:200px;overflow-y:auto}.user-item{padding:4px 8px;border-radius:4px;cursor:pointer;margin:1px 0;font-size:12px}.user-item:hover{background:#e5e7eb}.user-item.active{background:#3b82f6;color:#fff}.chat-main{flex:1;display:flex;flex-direction:column}.chat-header{padding:12px 16px;background:#f8f9fa;border-bottom:1px solid #e5e7eb}.chat-header h3{margin:0;font-size:14px;color:#374151}.chat-messages{flex:1;padding:12px;overflow-y:auto;background:#fff}.message{margin-bottom:8px;padding:6px 10px;border-radius:6px;max-width:80%;word-wrap:break-word}.message.own{margin-left:auto;background:#3b82f6;color:#fff}.message.other{background:#f3f4f6;color:#374151}.message.system{background:#fef3c7;color:#92400e;text-align:center;max-width:100%}.message-info{display:flex;align-items:flex-start;gap:8px}.message-avatar{width:32px;height:32px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-size:10px;color:#6b7280;flex-shrink:0}.message.own .message-avatar{background:#2563eb;color:#fff}.message-details{flex:1;min-width:0}.message-header{font-size:11px;opacity:.7;margin-bottom:2px}.message-content{font-size:13px}.chat-input{display:flex;padding:12px;border-top:1px solid #e5e7eb;background:#f8f9fa}.chat-input input{flex:1;margin-right:8px;padding:8px;border:1px solid #d1d5db;border-radius:4px}.chat-input button{padding:8px 16px;background:#3b82f6;color:#fff;border:none;border-radius:4px;cursor:pointer}.chat-input button:hover:not(:disabled){background:#2563eb}.chat-input button:disabled{background:#9ca3af;cursor:not-allowed}.guardian-conqueror-info{margin:16px 0}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0}.info-card{border:2px solid #e5e7eb;border-radius:12px;padding:20px;background:#fff;transition:all .3s ease}.info-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.guardian-card{border-color:#10b981;background:linear-gradient(135deg,#f0fdf4,#dcfce7)}.conqueror-card{border-color:#ef4444;background:linear-gradient(135deg,#fef2f2,#fee2e2)}.card-header{display:flex;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #e5e7eb}.guardian-card .card-header{border-bottom-color:#10b981}.conqueror-card .card-header{border-bottom-color:#ef4444}.card-icon{font-size:24px;margin-right:12px}.card-header h3{margin:0;font-size:18px;font-weight:600;color:#374151}.card-content{display:flex;flex-direction:column;gap:12px}.level-info,.exp-info,.next-level-info{display:flex;justify-content:space-between;align-items:center}.level-label,.exp-label,.next-label{font-size:14px;font-weight:500;color:#6b7280}.level-value{font-size:24px;font-weight:700;color:#1f2937}.exp-value,.next-value{font-size:16px;font-weight:600;color:#374151}.progress-info{display:flex;flex-direction:column;gap:6px}.progress-label{font-size:14px;font-weight:500;color:#6b7280}.progress-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#10b981,#059669);transition:width .3s ease}.conqueror-card .progress-fill{background:linear-gradient(90deg,#ef4444,#dc2626)}.progress-text{font-size:12px;color:#6b7280;text-align:center}@media (max-width: 768px){.info-grid{grid-template-columns:1fr;gap:16px}}.position-info,.position-update,.area-data{margin-bottom:24px}.position-info h3,.position-update h3,.area-data h3{margin:0 0 12px;color:#1f2937;font-size:16px;font-weight:600;border-bottom:2px solid #e5e7eb;padding-bottom:8px}.position-value{font-weight:600;color:#3b82f6;background:#eff6ff;padding:4px 8px;border-radius:4px;border:1px solid #dbeafe}.area-grid-container{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:16px}.area-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(11,1fr);gap:1px;background:#e5e7eb;padding:4px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.grid-cell{width:50px;height:50px;background:#f9fafb;border:1px solid #d1d5db;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;position:relative;font-size:9px;text-align:center;padding:2px;box-sizing:border-box}.grid-cell:hover{transform:scale(1.05);box-shadow:0 2px 8px #00000026;z-index:10}.grid-cell.fog{background:#6b7280;color:#fff;cursor:pointer;transition:all .2s ease;position:relative}.grid-cell.fog:hover{background:#4b5563;transform:scale(1.05);box-shadow:0 2px 8px #0003;border:2px solid #fbbf24;z-index:10}.grid-cell.fog:active{transform:scale(.95)}.grid-cell.fog:after{content:"点击揭开";position:absolute;bottom:1px;left:50%;transform:translate(-50%);font-size:5px;color:#fbbf24;opacity:0;transition:opacity .2s ease}.grid-cell.fog:hover:after{opacity:1}.grid-cell.city{background:#3b82f6;color:#fff}.grid-cell.event{background:#f59e0b;color:#fff}.grid-cell.empty{background:#10b981;color:#fff}.grid-cell.player{background:#ef4444;color:#fff;border:3px solid #dc2626;font-weight:700}.grid-cell .coord{font-size:8px;font-weight:600;margin-bottom:1px}.grid-cell .type{font-size:7px;opacity:.9}.grid-cell .info{font-size:6px;margin-top:1px;line-height:1.1;overflow:hidden;text-overflow:ellipsis}.grid-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#374151}.legend-color{width:16px;height:16px;border-radius:3px;border:1px solid #d1d5db}.legend-color.fog{background:#6b7280}.legend-color.city{background:#3b82f6}.legend-color.event{background:#f59e0b}.legend-color.empty{background:#10b981}.legend-color.player{background:#ef4444;border:2px solid #dc2626}@media (max-width: 768px){.position-info .row,.position-update .row{flex-direction:column;align-items:flex-start;gap:8px}.grid-cell{width:35px;height:35px;font-size:8px}.grid-cell .coord{font-size:6px}.grid-cell .type{font-size:5px}.grid-cell .info{font-size:4px}.grid-legend{gap:8px}.legend-item{font-size:11px}}.fog-stats,.fog-controls,.fog-range-info,.fog-list-container,.batch-reveal-container{margin-bottom:24px}.fog-stats h3,.fog-controls h3,.fog-range-info h3,.fog-list-container h3,.batch-reveal-container h3{margin:0 0 12px;color:#1f2937;font-size:16px;font-weight:600;border-bottom:2px solid #e5e7eb;padding-bottom:8px}.stat-value{font-weight:600;color:#059669;background:#ecfdf5;padding:4px 8px;border-radius:4px;border:1px solid #d1fae5}.fog-range-info{padding:12px;background:#f9fafb;border-radius:6px;border:1px solid #e5e7eb}.fog-pagination{margin-bottom:16px;padding:12px;background:#f9fafb;border-radius:6px;border:1px solid #e5e7eb}.fog-pagination button{padding:6px 12px;margin:0 4px;border:1px solid #d1d5db;background:#fff;border-radius:4px;cursor:pointer;font-size:12px}.fog-pagination button:hover:not(:disabled){background:#f3f4f6}.fog-pagination button:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed}.fog-pagination input{margin:0 4px;padding:4px 8px;border:1px solid #d1d5db;border-radius:4px;text-align:center}.fog-coords-table{margin-top:16px}.fog-coords-table th{background:#f9fafb;font-weight:600;color:#374151}.fog-coords-table td{font-size:13px;vertical-align:middle}.batch-reveal-controls{padding:16px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.batch-manual-input,.batch-area-input{margin:16px 0;padding:12px;background:#fff;border-radius:6px;border:1px solid #d1d5db}.batch-coords-preview{margin-top:16px;padding:12px;background:#fff;border-radius:6px;border:1px solid #d1d5db}.batch-coords-preview h4{margin:0 0 8px;font-size:14px;color:#374151}.coords-preview-list{min-height:60px;max-height:120px;overflow-y:auto;padding:8px;background:#f9fafb;border-radius:4px;border:1px solid #e5e7eb;margin-bottom:12px}.coord-item{display:inline-block;margin:2px 4px;padding:2px 6px;background:#dbeafe;color:#1e40af;border-radius:3px;font-size:12px;border:1px solid #bfdbfe}.coord-item.duplicate{background:#fef3c7;color:#92400e;border-color:#fde68a}.empty-hint{color:#6b7280;font-style:italic;font-size:13px}#batch-coords-input{width:100%;min-height:60px;padding:8px;border:1px solid #d1d5db;border-radius:4px;font-family:monospace;font-size:13px;resize:vertical}#estimated-cost{font-weight:600;color:#dc2626}.defense-layout-container{margin-top:24px;padding:16px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.defense-layout-container h3{margin:0 0 16px;color:#1f2937;font-size:16px;font-weight:600;border-bottom:2px solid #e5e7eb;padding-bottom:8px}.defense-layout-controls{display:flex;flex-direction:column;gap:16px}.defense-layout-editor{padding:16px;background:#fff;border-radius:6px;border:1px solid #d1d5db}.defense-layout-editor h4{margin:0 0 12px;color:#374151;font-size:14px;font-weight:600}#defense-layout-data{width:100%;min-height:120px;padding:12px;border:1px solid #d1d5db;border-radius:4px;font-family:Courier New,monospace;font-size:13px;resize:vertical;background:#f9fafb}#defense-layout-data:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.defense-templates{padding:16px;background:#fff;border-radius:6px;border:1px solid #d1d5db}.defense-templates h4{margin:0 0 12px;color:#374151;font-size:14px;font-weight:600}.template-btn{margin:0 8px 8px 0;padding:8px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s ease}.template-btn:hover{background:#e5e7eb;border-color:#9ca3af}.template-btn:active{background:#d1d5db}.defense-result{padding:16px;background:#fff;border-radius:6px;border:1px solid #d1d5db}.defense-result h4{margin:0 0 12px;color:#374151;font-size:14px;font-weight:600}.result-info .row{margin-bottom:8px}.status-text{font-weight:600;padding:4px 8px;border-radius:4px}.status-text.success{color:#059669;background:#ecfdf5;border:1px solid #d1fae5}.status-text.error{color:#dc2626;background:#fef2f2;border:1px solid #fecaca}@media (max-width: 768px){.fog-stats .row,.fog-controls .row,.fog-range-info .row,.fog-pagination .row,.batch-reveal-controls .row,.defense-layout-controls .row{flex-direction:column;align-items:flex-start;gap:8px}.fog-coords-table{font-size:12px}.fog-coords-table th,.fog-coords-table td{padding:4px 6px}.fog-pagination button{padding:4px 8px;font-size:11px}.fog-pagination input{width:50px}.batch-reveal-controls{padding:12px}.batch-manual-input,.batch-area-input,.batch-coords-preview{padding:8px}.defense-layout-container,.defense-layout-editor,.defense-templates,.defense-result{padding:12px}.template-btn{margin:0 4px 4px 0;padding:6px 12px;font-size:12px}}