/* 多文明演化模拟器样式 */

/* 文明演化模拟器专用变量 */
:root {
   --info-color: var(--color-info);
   --warning-color: var(--color-warning);
   --error-color: var(--color-danger);
   --primary-light: rgba(52, 73, 94, 0.15);
   --info-light: var(--color-info-bg);
   --error-light: var(--color-danger-bg);
   --success-light: rgba(46, 204, 113, 0.15);
   --warning-light: var(--color-warning-bg);
}

/* 控制面板样式 */
.control-section {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
}

.control-buttons {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.control-btn {
   padding: 0.5rem 1rem;
   border: 2px solid var(--primary-color);
   border-radius: var(--border-radius-md);
   background-color: var(--primary-color);
   color: var(--white);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   transition: var(--transition-default);
}

.control-btn:hover {
   background-color: var(--primary-hover-color);
   border-color: var(--primary-hover-color);
   transform: translateY(-2px);
   box-shadow: var(--shadow-light);
}

.control-btn.secondary {
   background-color: transparent;
   color: var(--primary-color);
}

.control-btn.secondary:hover {
   background-color: var(--light-accent);
   border-color: var(--primary-color);
}

.speed-control {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.speed-control select {
   padding: 0.5rem;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-sm);
   background-color: var(--background-color);
   color: var(--text-color);
   font-size: var(--font-size-sm);
}

.simulation-info {
   display: flex;
   gap: 2rem;
   font-size: var(--font-size-sm);
   color: var(--secondary-text-color);
}

/* 文明卡片容器 */
.civilizations-section {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
}

/* 文明卡片样式 */
.civilization-card {
   background-color: var(--card-bg-color);
   border-radius: var(--border-radius-md);
   box-shadow: var(--shadow-light);
   padding: 1.5rem;
   transition: var(--transition-default);
   border: 2px solid var(--border-color);
   position: relative;
}

/* 文明颜色指示器 */
.civ-color-indicator {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.civilization-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-medium);
   border-color: var(--secondary-color);
}

.civ-name {
   margin-top: 0;
   margin-bottom: 0.5rem;
   color: var(--primary-color);
   font-size: var(--font-size-xl);
   text-align: center;
}

.civ-type {
   margin-bottom: 0.5rem;
   color: var(--info-color);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.civ-strategy {
   margin-bottom: 1rem;
   color: var(--secondary-text-color);
   font-size: var(--font-size-sm);
   text-align: center;
   background-color: var(--light-accent);
   padding: 0.25rem 0.75rem;
   border-radius: var(--border-radius-pill);
   display: inline-block;
   margin-left: 50%;
   transform: translateX(-50%);
}

/* 文明统计样式 */
.civ-stats {
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
}

.stat-item {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
}

.stat-label {
   font-size: var(--font-size-sm);
   color: var(--secondary-text-color);
   font-weight: var(--font-weight-medium);
}

.stat-bar {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   height: 20px;
   background-color: var(--light-accent);
   border-radius: var(--border-radius-sm);
   overflow: hidden;
}

.stat-fill {
   height: 100%;
   background-color: var(--primary-color);
   transition: width 0.5s ease;
   border-radius: var(--border-radius-sm);
}

.stat-value {
   font-size: var(--font-size-xs);
   color: var(--text-color);
   min-width: 30px;
   text-align: right;
}

/* 地图和关系图容器 */
.main-content-grid {
   display: grid;
   grid-template-rows: auto auto;
   gap: 1.5rem;
   margin-bottom: 2rem;
}

/* 地图容器样式 */
.map-section {
   margin-bottom: var(--spacing-xl);
}

#civilizationMap {
   width: 100%;
   max-width: 100%;
   height: auto;
   object-fit: contain;
   background-color: var(--light-accent);
   border-radius: var(--border-radius-sm);
   box-shadow: var(--shadow-inset);
   image-rendering: pixelated;
   image-rendering: crisp-edges;
}

/* 文明关系图样式 */
.relations-section {
   margin-bottom: var(--spacing-xl);
}

.relations-graph {
   display: flex;
   justify-content: space-around;
   align-items: center;
   min-height: 200px;
   position: relative;
   background-color: var(--light-accent);
   border-radius: var(--border-radius-sm);
   padding: 2rem;
}

/* 文明详细信息面板 */
.details-section {
   margin-bottom: var(--spacing-xl);
}

.civilization-details {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 1.5rem;
}

.civ-detail-card {
   background-color: var(--light-accent);
   border-radius: var(--border-radius-sm);
   padding: 1rem;
   border-left: 4px solid var(--primary-color);
}

.civ-detail-card h4 {
   margin-top: 0;
   margin-bottom: 1rem;
   color: var(--primary-color);
   font-size: var(--font-size-lg);
}

.civ-detail-stats {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.civ-detail-stat {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: var(--font-size-sm);
}

.civ-detail-stat-label {
   color: var(--secondary-text-color);
}

.civ-detail-stat-value {
   font-weight: var(--font-weight-medium);
   color: var(--text-color);
}

.civ-traits {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1rem;
}

.civ-trait {
   background-color: var(--primary-light);
   color: var(--primary-color);
   padding: 0.25rem 0.5rem;
   border-radius: var(--border-radius-pill);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
}

.relation-node {
   width: 80px;
   height: 80px;
   border-radius: var(--border-radius-circle);
   background-color: var(--primary-color);
   color: var(--white);
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: var(--font-weight-bold);
   position: relative;
   z-index: 2;
   transition: transform 0.3s ease;
}

.relation-node:hover {
   transform: scale(1.1);
}

.relation-line {
   position: absolute;
   height: 2px;
   background-color: var(--border-color);
   z-index: 1;
   transition: all 0.3s ease;
}

.relation-line.friendly {
   background-color: var(--success-color);
   box-shadow: 0 0 5px var(--success-color);
}

.relation-line.hostile {
   background-color: var(--error-color);
   box-shadow: 0 0 5px var(--error-color);
}

.relation-line.neutral {
   background-color: var(--warning-color);
   box-shadow: 0 0 5px var(--warning-color);
}

.relation-line.trade {
   background-color: var(--info-color);
   box-shadow: 0 0 5px var(--info-color);
}

/* 时间线样式 */
.timeline-section {
   margin-bottom: var(--spacing-xl);
}

.timeline {
   min-height: 120px;
   max-height: 25vh;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: var(--spacing-sm);
   background: var(--card-bg-color);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-md);
   font-family: var(--font-mono);
   font-size: var(--font-size-14px);
   line-height: 1.4;
}

/* 时间线滚动条样式 */
.timeline::-webkit-scrollbar {
   width: 8px;
}

.timeline::-webkit-scrollbar-track {
   background: var(--background-color);
   border-radius: var(--border-radius-md);
}

.timeline::-webkit-scrollbar-thumb {
   background: var(--border-color);
   border-radius: var(--border-radius-md);
}

.timeline::-webkit-scrollbar-thumb:hover {
   background: var(--text-muted);
}

/* 时间线事件样式 */
.timeline-item {
   background-color: var(--white);
   border-radius: var(--border-radius-sm);
   padding: 0.5rem;
   border-left: 3px solid var(--primary-color);
   transition: all 0.3s ease;
   opacity: 0;
   transform: translateX(-20px);
   animation: eventSlideIn 0.5s ease forwards;
   margin-bottom: 0.5rem;
   color: var(--text-color);
}

.timeline-item:hover {
   background-color: var(--light-accent);
   box-shadow: var(--shadow-light);
   transform: translateX(5px);
}

.timeline-year {
   font-weight: var(--font-weight-bold);
   color: var(--primary-color);
   margin-right: 1rem;
   font-size: var(--font-size-sm);
}

.timeline-event {
   color: var(--text-color);
   font-size: var(--font-size-sm);
}

/* 事件卡片样式 */
.event-card {
   background-color: var(--light-accent);
   border-radius: var(--border-radius-sm);
   padding: 1rem;
   border-left: 4px solid var(--primary-color);
   transition: all 0.3s ease;
   opacity: 0;
   transform: translateX(-20px);
   animation: eventSlideIn 0.5s ease forwards;
}

@keyframes eventSlideIn {
   to {
       opacity: 1;
       transform: translateX(0);
   }
}

.event-card:hover {
   box-shadow: var(--shadow-light);
   transform: translateX(5px);
}

.event-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 0.5rem;
   flex-wrap: wrap;
   gap: 0.5rem;
}

.event-time {
   font-size: var(--font-size-xs);
   color: var(--primary-color);
   font-weight: var(--font-weight-bold);
}

.event-type {
   font-size: var(--font-size-xs-plus);
   padding: 0.25rem 0.5rem;
   border-radius: var(--border-radius-pill);
   font-weight: var(--font-weight-medium);
   text-transform: uppercase;
}

.event-type.internal {
   background-color: var(--primary-light);
   color: var(--primary-color);
}

.event-type.diplomatic {
   background-color: var(--info-light);
   color: var(--info-color);
}

.event-type.war {
   background-color: var(--error-light);
   color: var(--error-color);
}

.event-type.trade {
   background-color: var(--success-light);
   color: var(--success-color);
}

.event-type.global {
   background-color: var(--warning-light);
   color: var(--warning-color);
}

.event-title {
   margin: 0 0 0.5rem 0;
   color: var(--text-color);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
}

.event-description {
   margin: 0;
   color: var(--secondary-text-color);
   font-size: var(--font-size-sm);
   line-height: 1.5;
}

/* 关系矩阵样式 */
.relations-matrix {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   background-color: var(--light-accent);
   border-radius: var(--border-radius-sm);
   overflow: hidden;
   box-shadow: var(--shadow-inset);
}

.relations-matrix th, .relations-matrix td {
   padding: 0.75rem;
   text-align: center;
   border: 1px solid var(--border-color);
}

.relations-matrix th {
   background-color: var(--card-bg-color);
   font-weight: var(--font-weight-bold);
   position: relative;
}

.relations-matrix .civ-header {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   white-space: nowrap;
   padding: 1rem 0.5rem;
   font-size: var(--font-size-xs);
}

.relation-cell {
   font-weight: var(--font-weight-medium);
   transition: all 0.2s ease;
   cursor: pointer;
   position: relative;
}

.relation-cell:hover {
   transform: scale(1.1);
   z-index: 10;
   box-shadow: var(--shadow-light);
}

.relation-cell.self {
   background-color: var(--primary-light);
   color: var(--primary-color);
   font-weight: var(--font-weight-bold);
   cursor: default;
}

.relation-cell.friendly {
   background-color: rgba(76, 175, 80, 0.2);
   color: var(--success-color);
}

.relation-cell.neutral {
   background-color: rgba(255, 193, 7, 0.2);
   color: var(--warning-color);
}

.relation-cell.hostile {
   background-color: var(--color-error-bg);
   color: var(--error-color);
}

/* 文明详情卡片新样式 */
.civ-detail-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.5rem;
   flex-wrap: wrap;
   gap: 1rem;
}

.civ-strategy {
   padding: 0.25rem 0.75rem;
   border-radius: var(--border-radius-pill);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
}

.civ-strategy-desc {
   font-size: var(--font-size-sm-plus);
   color: var(--secondary-text-color);
   margin-bottom: 1rem;
   padding-left: 0.25rem;
   border-left: 3px solid var(--border-color);
}

.civ-territory-stats {
   background-color: var(--background-color);
   padding: 1rem;
   border-radius: var(--border-radius-sm);
   margin-bottom: 1rem;
   border: 1px solid var(--border-color);
}

.civ-territory-stats h5 {
   margin-top: 0;
   margin-bottom: 0.75rem;
   color: var(--text-color);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
}

.civ-territory-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
}

.territory-stat-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: var(--font-size-sm-plus);
}

.territory-stat-label {
   color: var(--secondary-text-color);
}

.territory-stat-value {
   font-weight: var(--font-weight-medium);
   color: var(--text-color);
}

.civ-detail-stats {
   background-color: var(--background-color);
   padding: 1rem;
   border-radius: var(--border-radius-sm);
   margin-bottom: 1rem;
   border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.civ-detail-stat {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   font-size: var(--font-size-sm);
}

.civ-detail-stat-label {
   color: var(--secondary-text-color);
   font-size: var(--font-size-sm-plus);
}

.civ-detail-stat-value {
   font-weight: var(--font-weight-medium);
   color: var(--text-color);
   font-size: var(--font-size-sm);
}

.stat-bar-small {
   height: 6px;
   background-color: var(--border-color);
   border-radius: var(--border-radius-pill);
   margin-top: 0.25rem;
   overflow: hidden;
   width: 100%;
}

.stat-fill-small {
   height: 100%;
   border-radius: var(--border-radius-pill);
   transition: width 0.5s ease;
}

.civ-cell-attributes {
   background-color: var(--background-color);
   padding: 1rem;
   border-radius: var(--border-radius-sm);
   border: 1px solid var(--border-color);
}

.civ-cell-attributes h5 {
   margin-top: 0;
   margin-bottom: 0.75rem;
   color: var(--text-color);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
}

.civ-cell-attr-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
}

.cell-attr-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: var(--font-size-sm-plus);
}

.cell-attr-label {
   color: var(--secondary-text-color);
}

.cell-attr-value {
   font-weight: var(--font-weight-medium);
   color: var(--text-color);
}

/* 地图悬停提示样式 */
.map-tooltip {
   position: absolute;
   background-color: var(--black-transparent-80);
   color: var(--white);
   padding: var(--spacing-sm-plus) var(--spacing-md-plus);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-12px);
   pointer-events: none;
   z-index: 1000;
   max-width: 250px;
   box-shadow: var(--shadow-hover);
   border: 1px solid var(--white-transparent-10);
   line-height: 1.4;
}

.map-tooltip strong {
   color: var(--primary-color);
   font-weight: var(--font-weight-bold);
}

/* 格子属性显示增强 */
#civilizationMap {
   cursor: crosshair;
}

/* 响应式调整 */
@media (max-width: 768px) {
   .civ-territory-grid,
   .civ-cell-attr-grid {
       grid-template-columns: 1fr;
   }
}

/* 事件影响样式 */
.event-impact {
   margin-top: 0.5rem;
   padding-top: 0.5rem;
   border-top: 1px solid var(--border-color);
   font-size: var(--font-size-xs);
   color: var(--secondary-text-color);
}

.impact-item {
   margin-bottom: 0.25rem;
}

.impact-positive {
   color: var(--success-color);
}

.impact-negative {
   color: var(--error-color);
}

/* 夜间模式样式 */
body.dark-theme .control-panel,
body.dark-theme .civilization-card,
body.dark-theme .relations-container,
body.dark-theme .timeline-container {
   background-color: var(--card-bg-color);
   box-shadow: var(--shadow-light);
}

body.dark-theme .civilization-card:hover {
   box-shadow: var(--shadow-medium);
}

body.dark-theme .timeline {
   background-color: var(--card-bg-color);
   border-color: var(--border-color);
}

body.dark-theme .timeline-item {
   background-color: var(--card-bg-color);
   border-left-color: var(--primary-color);
   color: var(--text-color);
}

body.dark-theme .timeline-item:hover {
   background-color: var(--light-accent);
}

body.dark-theme .timeline-year {
   color: var(--secondary-color);
}

body.dark-theme .civ-name {
   color: var(--secondary-color);
}

body.dark-theme .event-type.internal {
   background-color: var(--color-info-bg);
   color: var(--secondary-color);
}

body.dark-theme .event-type.diplomatic {
   background-color: var(--color-info-bg);
   color: var(--secondary-color);
}

body.dark-theme .event-type.war {
   background-color: rgba(231, 76, 60, 0.2);
   color: var(--color-danger);
}

body.dark-theme .event-type.trade {
   background-color: rgba(46, 204, 113, 0.2);
   color: var(--color-green-alt);
}

body.dark-theme .event-type.global {
   background-color: rgba(241, 196, 15, 0.2);
   color: var(--color-gold);
}

body.dark-theme .speed-control select {
   background-color: var(--background-color);
   color: var(--text-color);
   border-color: var(--border-color);
}

body.dark-theme .control-btn.secondary {
   color: var(--text-color);
   border-color: var(--border-color);
}

body.dark-theme .control-btn.secondary:hover {
   background-color: var(--light-accent);
   border-color: var(--secondary-color);
   color: var(--secondary-color);
}

body.dark-theme .relations-graph,
body.dark-theme .event-card {
   background-color: var(--light-accent);
}

body.dark-theme .relation-line {
   background-color: var(--border-color);
}

@media (max-width: 768px) {
   .control-panel {
       flex-direction: column;
       align-items: stretch;
   }

   .simulation-info {
       flex-direction: column;
       gap: 0.5rem;
       align-items: flex-start;
   }

   .civilizations-container {
       grid-template-columns: 1fr;
   }

   .relations-graph {
       padding: 1rem;
       min-height: 150px;
   }

   .relation-node {
       width: 60px;
       height: 60px;
       font-size: var(--font-size-sm);
   }

   .timeline {
       max-height: 300px;
   }
}

@media (max-width: 480px) {
   .relations-container {
       padding: 1rem;
   }

   .relations-graph {
       padding: 0.5rem;
       min-height: 120px;
   }

   .relation-node {
       width: 50px;
       height: 50px;
       font-size: var(--font-size-xs);
   }

   .event-header {
       flex-direction: column;
       align-items: flex-start;
   }

   .timeline {
       max-height: 250px;
   }
}

/* 加载动画 */
.loading {
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 3px solid var(--border-color);
   border-radius: var(--border-radius-circle);
   border-top-color: var(--primary-color);
   animation: spin 1s ease-in-out infinite;
}

/* 空状态样式 */
.empty-state {
   text-align: center;
   color: var(--secondary-text-color);
   padding: 2rem;
   font-style: italic;
}

/* 文明卡片动画 */
@keyframes fadeInUp {
   from {
       opacity: 0;
       transform: translateY(20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

.civilization-card {
   animation: fadeInUp 0.6s ease forwards;
}

.civilization-card:nth-child(1) {
   animation-delay: 0.1s;
}

.civilization-card:nth-child(2) {
   animation-delay: 0.2s;
}

.civilization-card:nth-child(3) {
   animation-delay: 0.3s;
}


@media (max-width: 600px) {
    .control-panel {
        padding: var(--spacing-sm);
    }
}


@media (max-width: 900px) {
    /* 平板宽度: 容器间距收紧 */
    .mainbox {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 1200px) {
    /* 1200px: 大屏到中屏过渡,无特殊调整 */
}


@media (max-width: 1800px) {
    /* 1800px: 超大屏限制,无特殊调整 */
}