/* ========================================
   Emphasis Levels Styles
   凸凹万博 - 強調レベルスタイル
   ======================================== */

/* Level 1: Critical emphasis - 最重要強調 [[text]] */
.emphasis-critical {
  background-color: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  padding: 2px 4px;
  border-radius: 3px;
  position: relative;
  display: inline-block;
}

.emphasis-critical::before {
  content: "⚠";
  position: absolute;
  left: -1.2em;
  font-size: 0.8em;
  opacity: 0.7;
}

/* Level 2: Important emphasis - 重要強調 {{text}} */
.emphasis-important {
  background: linear-gradient(180deg, transparent 40%, rgba(251, 146, 60, 0.3) 40%);
  font-weight: 600;
  color: #ea580c;
  padding: 0 2px;
  position: relative;
}

.emphasis-important:hover {
  background: linear-gradient(180deg, transparent 30%, rgba(251, 146, 60, 0.4) 30%);
}

/* Level 3: Thought emphasis - 思考・内面強調 ((text)) */
.emphasis-thought {
  border-left: 3px solid #9333ea;
  padding-left: 8px;
  font-style: italic;
  color: #7c3aed;
  background: linear-gradient(to right, rgba(147, 51, 234, 0.05), transparent);
  margin: 0.2em 0;
  display: inline-block;
  position: relative;
}

.emphasis-thought::after {
  content: "💭";
  position: absolute;
  right: -1.5em;
  font-size: 0.7em;
  opacity: 0.3;
}

/* Level 4: Basic emphasis - 基本強調 *text* */
.emphasis-basic {
  font-weight: 600;
  color: inherit;
}

/* Dark theme adjustments */
[data-theme="dark"] .emphasis-critical {
  background-color: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

[data-theme="dark"] .emphasis-important {
  background: linear-gradient(180deg, transparent 40%, rgba(251, 146, 60, 0.4) 40%);
  color: #fb923c;
}

[data-theme="dark"] .emphasis-thought {
  border-left-color: #a855f7;
  color: #a855f7;
  background: linear-gradient(to right, rgba(168, 85, 247, 0.1), transparent);
}

/* Dekoboko theme special styling */
[data-theme="dekoboko"] .emphasis-critical {
  background: repeating-linear-gradient(
    45deg,
    rgba(239, 68, 68, 0.1),
    rgba(239, 68, 68, 0.1) 10px,
    rgba(239, 68, 68, 0.2) 10px,
    rgba(239, 68, 68, 0.2) 20px
  );
  animation: critical-pulse 2s ease-in-out infinite;
}

[data-theme="dekoboko"] .emphasis-important {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(251, 146, 60, 0.2) 20%,
    rgba(251, 146, 60, 0.3) 50%,
    rgba(251, 146, 60, 0.2) 80%,
    transparent 100%
  );
  animation: important-glow 3s ease-in-out infinite;
}

[data-theme="dekoboko"] .emphasis-thought {
  background: linear-gradient(
    to right,
    rgba(147, 51, 234, 0.08),
    rgba(237, 137, 54, 0.05),
    transparent
  );
  border-image: linear-gradient(
    to bottom,
    #9333ea,
    #ed8936
  ) 1;
}

/* Animations for dekoboko theme */
@keyframes critical-pulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% { 
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.2);
  }
}

@keyframes important-glow {
  0%, 100% { 
    filter: brightness(1);
  }
  50% { 
    filter: brightness(1.1);
  }
}

/* Nested emphasis combinations */
.emphasis-critical .emphasis-important {
  background-color: rgba(251, 146, 60, 0.3);
}

.emphasis-thought .emphasis-basic {
  font-style: normal;
  font-weight: 700;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .emphasis-critical::before,
  .emphasis-thought::after {
    display: none; /* Hide decorative elements on mobile */
  }
  
  .emphasis-critical,
  .emphasis-important,
  .emphasis-thought {
    padding: 1px 2px;
  }
  
  .emphasis-thought {
    border-left-width: 2px;
    padding-left: 4px;
  }
}

/* Print styles */
@media print {
  .emphasis-critical {
    background-color: transparent;
    border: 2px solid #dc2626;
    text-decoration: underline double;
  }
  
  .emphasis-important {
    background: none;
    border-bottom: 2px solid #ea580c;
  }
  
  .emphasis-thought {
    border-left: 2px dashed #7c3aed;
    font-style: italic;
    background: none;
  }
  
  .emphasis-basic {
    font-weight: 700;
    text-decoration: underline;
  }
}

/* Accessibility - High contrast mode */
@media (prefers-contrast: high) {
  .emphasis-critical {
    background-color: #dc2626;
    color: white;
    text-decoration: underline wavy;
  }
  
  .emphasis-important {
    background: #ea580c;
    color: white;
  }
  
  .emphasis-thought {
    border-left-width: 5px;
    background: rgba(147, 51, 234, 0.2);
  }
}

/* Combined emphasis for complex scenarios */
.emphasis-critical.character-name {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.15),
    rgba(76, 81, 191, 0.1)
  );
}

.emphasis-important.character-name {
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(251, 146, 60, 0.3) 40%,
    rgba(76, 81, 191, 0.1) 100%
  );
}

/* Reading mode optimizations */
.reading-mode .emphasis-critical {
  animation: critical-blink 3s ease-in-out infinite;
}

@keyframes critical-blink {
  0%, 100% { opacity: 1; }
  95% { opacity: 0.7; }
}