/**
 * games/* 演示页与 xclock.cn 全站一致：Inter、浅底、slate 边框、indigo 按钮
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#xclock-games-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8fafc;
}

/* 页面加载时短暂禁用过渡，防止 Tailwind CDN 引起的缩放闪烁 */
.no-transitions,
.no-transitions * {
  transition: none !important;
  animation: none !important;
}

#xclock-games-app > header,
#app-nav > header {
  flex-shrink: 0 !important;
  z-index: 50 !important;
  position: relative !important;
}

.nav-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-tool-btn:hover { color: #1e293b; }
.nav-tool-btn.active { color: #6366f1; border-bottom-color: #6366f1; }

#games-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 演示子导航（各 games/*.html） */
.games-demos-nav {
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.games-demos-nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 0;
  max-width: 100%;
}
.games-demos-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.games-demos-nav-link:hover {
  color: #334155;
  background: #f1f5f9;
}
.games-demos-nav-link.active {
  color: #4338ca;
  background: #eef2ff;
  border-color: #c7d2fe;
}
.games-demos-nav-all {
  font-weight: 600;
  color: #475569;
  margin-right: 4px;
  padding-right: 12px;
  border-right: 1px solid #e2e8f0;
  border-radius: 6px 0 0 6px;
}
.games-demos-nav-all:hover {
  color: #6366f1;
}

/* ========== 通用双栏布局 (.game-container) ========== */
#games-content .game-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  overflow: hidden !important;
  position: relative !important;
  inset: auto !important;
}

#games-content .demo-panel {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

#games-content .info-panel {
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

#games-content .game-header h1,
#games-content .demo-panel h1 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

#games-content .game-header p,
#games-content .description,
#games-content .demo-panel > p,
#games-content .info-panel p,
#games-content .info-panel li,
#games-content .info-section p,
#games-content .info-section li {
  color: #475569 !important;
}

#games-content .info-panel h2,
#games-content .info-section h2 {
  color: #0f172a !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-bottom-color: #e2e8f0 !important;
}

#games-content .info-panel ol,
#games-content .info-panel ul,
#games-content .info-section ol,
#games-content .info-section ul {
  color: #64748b !important;
}

#games-content .info-panel strong,
#games-content .info-section strong {
  color: #334155 !important;
}

/* 按钮 */
#games-content button:not(:disabled) {
  padding: 8px 14px !important;
  background: #6366f1 !important;
  border: 1px solid #6366f1 !important;
  color: #fff !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

#games-content button:not(:disabled):hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

#games-content button.danger,
#games-content button.danger:not(:disabled) {
  background: #fff !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

#games-content button.danger:hover {
  background: #fef2f2 !important;
}

#games-content button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

#games-content .log-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

#games-content input[type="text"],
#games-content input[type="number"],
#games-content input[type="email"],
#games-content select,
#games-content textarea {
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: #334155 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-family: inherit !important;
}

#games-content .top-back-link {
  display: none !important;
}

/* ========== 图示区：浅底 + 边框 ========== */
#games-content #transformer-svg,
#games-content #raft-svg,
#games-content #kafka-svg,
#games-content #es-cluster,
#games-content #system-diagram,
#games-content #rebalance-svg {
  background-color: #fafafa !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Transformer */
#games-content #transformer-svg .layer-box { fill: #eef2ff !important; stroke: #818cf8 !important; }
#games-content #transformer-svg .layer-text { fill: #1e293b !important; }
#games-content #transformer-svg .connection-line { stroke: #cbd5e1 !important; }
#games-content #transformer-svg .token-particle { fill: #6366f1 !important; filter: none !important; }

/* Raft（页面内 class 为 node-label / term-label） */
#games-content #raft-svg .node-label { fill: #0f172a !important; }
#games-content #raft-svg .term-label { fill: #64748b !important; font-weight: 500 !important; }

/* Raft */
#games-content .node-state-follower { fill: #f1f5f9 !important; stroke: #64748b !important; }
#games-content .node-state-candidate { fill: #fef9c3 !important; stroke: #ca8a04 !important; }
#games-content .node-state-leader { fill: #d1fae5 !important; stroke: #059669 !important; }
#games-content .node-state-dead { fill: #f1f5f9 !important; stroke: #94a3b8 !important; stroke-dasharray: 5,5 !important; }
#games-content .node-id-label { fill: #0f172a !important; }
#games-content .node-term-label { fill: #64748b !important; }
#games-content .log-entry.committed { stroke: #059669 !important; fill: #ecfdf5 !important; }
#games-content .log-entry.uncommitted { stroke: #ca8a04 !important; fill: #fffbeb !important; }
#games-content .log-text { fill: #1e293b !important; }
#games-content .packet.vote { fill: #fbbf24 !important; }
#games-content .packet.heartbeat { fill: #34d399 !important; }
#games-content .packet.request { fill: #6366f1 !important; }
#games-content .legend-item { color: #475569 !important; }
#games-content #raft-svg marker path { fill: #64748b !important; }

/* Kafka HA */
#games-content .broker-box { fill: #f1f5f9 !important; stroke: #94a3b8 !important; }
#games-content .broker-label { fill: #475569 !important; }
#games-content .partition-box { fill: #e2e8f0 !important; stroke: #94a3b8 !important; }
#games-content .partition-leader { fill: #ffedd5 !important; stroke: #ea580c !important; }
#games-content .partition-follower { fill: #f8fafc !important; stroke: #64748b !important; stroke-dasharray: 4 2 !important; }
#games-content .message-rect { fill: #6366f1 !important; }
#games-content .producer-circle { fill: #6366f1 !important; stroke: #c7d2fe !important; }
#games-content .consumer-circle { fill: #10b981 !important; stroke: #a7f3d0 !important; }
#games-content .flow-path { stroke: #cbd5e1 !important; }

/* Kafka HA：图示区更大（左侧栏加宽 + SVG 占满） */
#games-content .game-container.game-kafka-ha .demo-panel {
  flex: 3 1 72% !important;
  min-width: 0 !important;
}
#games-content .game-container.game-kafka-ha .info-panel {
  flex: 1 1 28% !important;
  min-width: 240px !important;
  max-width: 400px !important;
}
#games-content .game-container.game-kafka-ha #kafka-svg {
  max-width: 100% !important;
  width: 100% !important;
  min-height: clamp(360px, 48vh, 580px) !important;
  aspect-ratio: 850 / 480 !important;
  height: auto !important;
}
#games-content .game-container.game-kafka-ha .game-header,
#games-content .game-container.game-kafka-ha .controls,
#games-content .game-container.game-kafka-ha .log-panel {
  max-width: 100% !important;
}

/* Elasticsearch */
#games-content .node-rect { fill: #f1f5f9 !important; stroke: #94a3b8 !important; }
#games-content .node-rect.dead { fill: #fef2f2 !important; stroke: #f87171 !important; }
#games-content .node-rect.coordinator { stroke: #7c3aed !important; }
#games-content .node-header { fill: #334155 !important; font-family: 'JetBrains Mono', monospace !important; }
#games-content .storage-label { fill: #64748b !important; }
#games-content .shard.primary { fill: #4f46e5 !important; stroke: #818cf8 !important; }
#games-content .shard.replica { fill: #e0e7ff !important; stroke: #6366f1 !important; }
#games-content .shard.primary + text { fill: #ffffff !important; }
#games-content .shard.replica + text { fill: #312e81 !important; }
#games-content .coordinator-label { fill: #7c3aed !important; font-family: 'Inter', sans-serif !important; }
#games-content .ram-flash { fill: #38bdf8 !important; }
#games-content .disk-flash { fill: #fbbf24 !important; }
#games-content .request-line { stroke: #6366f1 !important; }
#games-content .doc-packet { fill: #6366f1 !important; }
#games-content .cluster-status { font-family: 'Inter', sans-serif !important; }
#games-content .status-green { color: #059669 !important; }
#games-content .status-yellow { color: #d97706 !important; }
#games-content .status-red { color: #dc2626 !important; }

/* Redis Zset */
#games-content .redis-box { fill: #fef2f2 !important; stroke: #f87171 !important; }
#games-content .lock-box { fill: #fffbeb !important; stroke: #d97706 !important; }
#games-content .zset-lane { fill: #f8fafc !important; stroke: #cbd5e1 !important; }
#games-content .consumer-box { fill: #ecfdf5 !important; stroke: #059669 !important; }
#games-content .consumer-box.dead { fill: #f1f5f9 !important; stroke: #94a3b8 !important; }
#games-content .consumer-box.standby { fill: #fffbeb !important; stroke: #ca8a04 !important; }
#games-content .msg-dot { fill: #6366f1 !important; filter: none !important; }
#games-content .text-label { fill: #0f172a !important; }
#games-content .small-label { fill: #64748b !important; }
#games-content .status-text { fill: #0f172a !important; }
#games-content .election-line { stroke: #d97706 !important; }

/* Kafka Rebalance — 右侧卡片 */
#games-content .stat-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
#games-content .stat-card .label { color: #64748b !important; }
#games-content .stat-card .value { color: #0f172a !important; }

/* 各页 .info-section 深色卡片 → 白底 */
#games-content .info-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}
#games-content .info-section h2 {
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
#games-content .info-section h3 { color: #475569 !important; }
#games-content .info-section p,
#games-content .info-section li { color: #475569 !important; }

/* ========== MySQL MVCC (.main-container) ========== */
#games-content .main-container {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100% !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  overflow: hidden !important;
}

#games-content .demo-area {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

#games-content .demo-area h1 {
  color: #0f172a !important;
}

#games-content .info-area {
  background: #ffffff !important;
  color: #475569 !important;
}

#games-content .info-area h1 { color: #0f172a !important; }
#games-content .info-area h2 {
  color: #334155 !important;
  border-bottom-color: #e2e8f0 !important;
}
#games-content .info-area p,
#games-content .info-area li { color: #475569 !important; }
#games-content .highlight { color: #4f46e5 !important; }

#games-content .db-table {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  color: #334155 !important;
}

#games-content .db-row {
  background: #f1f5f9 !important;
  color: #334155 !important;
}

#games-content .log-console {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

#games-content .log-entry { color: #475569 !important; }
#games-content .log-time { color: #6366f1 !important; }

#games-content .transaction-box {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  border-radius: 8px !important;
}

#games-content .read-view-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

#games-content .tx-id { color: #0f172a !important; }
#games-content .tx-status { color: #64748b !important; }

#games-content button.secondary {
  background: #fff !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}
#games-content button.secondary:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

#games-content .cluster-status {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

#games-content .version-node {
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

#games-content .version-current { background: #eef2ff !important; border-color: #a5b4fc !important; }
#games-content .version-uncommitted { background: #fffbeb !important; border-color: #fcd34d !important; }
#games-content .version-history { background: #f8fafc !important; }

#games-content .tooltip {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: none !important;
}