.interactions-compact {
  max-width: 500px;
  margin: 50px auto;
  padding: 5px;
}

.section { 
  margin-bottom: 25px; 
}

.section-title {
  color: #2c3e50;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
  border-bottom: 2px solid #eaeaea;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-count {
  background: #dfe9ef;
  padding: 2px 5px;
  border-radius: 12px;
  font-size: 11px;
  color: #666;
}

.combinations-block.merger {
  background: #9effb910;
}

.combinations-block.merger:hover {
  background: #9effb920;
}

.combinations-block.clash {
  background: #ff9e9e10;
}

.combinations-block.clash:hover {
  background: #ff9e9e20;
}

.interaction-badge {
  text-align: center;
  margin-top: 5px;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.merger {
  min-width: 100px;
  color: #155724;
  /* background: #d4edda50;
  border: 1px solid #c3e6cb; */
}

.clash {
  min-width: 50px;
  color: #721c24;
  /* background: #f8d7da50;
  border: 1px solid #f5c6cb; */
}

.interaction-content {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px;
  font-size: 13px;
}

.element-item {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.element-symbol {
  font-size: 16px;
}

.element-position {
  font-size: 12px;
  color: #555;
}

.position-personal {
  /* background: #e8ebe9;
  color: #155724;
  border: 1px solid #e1e6e2; */
}

.position-today {
  background: #f8ffc1;
  color: #000;
  border: 1px solid #b6b6b6;
  border-radius: 20px;
  padding: 0 4px 0 4px;
}

/* .position-regular {
  background: #f0f2f5;
  border: 1px solid #dee2e6;
  color: #555;
} */

.interaction-arrow {
  color: #888;
  margin: 0 2px;
  font-weight: normal;
}

.interaction-result {
  font-weight: bold;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 5px;
  background: #f4f4f4;
  border: 1px solid #969696;
}

.result-wood { 
  color: var(--wood); 
}

.result-fire { 
  color: var(--fire); 
}

.result-earth { 
  color: var(--earth); 
}

.result-metal { 
  color: var(--metal); 
}

.result-water { 
  color: var(--water); 
}

.no-interactions {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.compact-header {
  text-align: left;
  padding-bottom: 10px;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
  color: #0c335b;
  margin-bottom: 5px;
  padding-bottom: 2px;
  border-bottom: 2px solid #cfcfcf;
}

.header-subtitle {
  font-size: 14px;
  color: #969fa7;
  margin-left: 5px;
}

.takt-info {
  background: #f0f8ff;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 10px 0;
  font-size: 12px;
  color: #004085;
  border: 1px solid #cce5ff;
  text-align: center;
}

.legend {
  display: flex;
  gap: 10px;
  font-size: 11px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  
}

.legend-today { 
  background: #f8ffc1;
  border: 1px solid #8d8b8b;
  border-radius: 20px;
  padding: 0 4px 0 4px;
}

.position-tag {
  display: inline-block;
  background: #d4d4d457;
  color: #525252;
  padding: 2px 8px;
  border-radius: 12px;
  margin: 0 2px;
  font-size: 10px;
}