/* ========================================
   Character Name Emphasis Styles
   凸凹万博 - キャラクター名強調スタイル
   ======================================== */

/* Base character name style */
.character-name {
  font-weight: 700;
  background: linear-gradient(to right, rgba(76, 81, 191, 0.1), transparent);
  padding: 0 6px 0 4px;
  border-left: 3px solid var(--character-color, #4C51BF);
  margin-right: 0.3em;
  display: inline-block;
  transition: all 0.2s ease;
}

/* Hover effect for desktop */
@media (hover: hover) {
  .character-name:hover {
    background: linear-gradient(to right, rgba(76, 81, 191, 0.2), transparent);
    transform: translateX(2px);
  }
}

/* Character-specific colors */
.character-yuuki { 
  --character-color: #3498db; /* 優輝: 青 - クリエイティブ */
}

.character-mari { 
  --character-color: #27ae60; /* 真理: 緑 - 若さ・成長 */
}

.character-takashi { 
  --character-color: #8b4513; /* 隆: 茶 - 職人・伝統 */
}

.character-aya { 
  --character-color: #9b59b6; /* 彩: 紫 - バランス・調和 */
}

.character-kenji { 
  --character-color: #7f8c8d; /* 健二: 灰 - 経験・知恵 */
}

/* Dark theme adjustments */
[data-theme="dark"] .character-name {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
}

[data-theme="dark"] .character-name:hover {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.15), transparent);
}

[data-theme="dark"] .character-yuuki { 
  --character-color: #5dade2; /* 明るめの青 */
}

[data-theme="dark"] .character-mari { 
  --character-color: #52be80; /* 明るめの緑 */
}

[data-theme="dark"] .character-takashi { 
  --character-color: #cd853f; /* 明るめの茶 */
}

[data-theme="dark"] .character-aya { 
  --character-color: #bb8fce; /* 明るめの紫 */
}

[data-theme="dark"] .character-kenji { 
  --character-color: #aab7b8; /* 明るめの灰 */
}

/* Dekoboko theme special styling */
[data-theme="dekoboko"] .character-name {
  background: linear-gradient(
    to right, 
    rgba(76, 81, 191, 0.08),
    rgba(237, 137, 54, 0.08),
    transparent
  );
  animation: dekoboko-pulse 3s ease-in-out infinite;
}

@keyframes dekoboko-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .character-name {
    padding: 0 4px 0 2px;
    border-left-width: 2px;
    font-size: 0.95em;
  }
}

/* Accessibility - Screen reader support */
.character-name::before {
  content: attr(aria-label);
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Print styles */
@media print {
  .character-name {
    font-weight: 700;
    text-decoration: underline;
    border-left: none;
    background: none;
    padding: 0;
  }
}