/* ==========================================================================
 * Skill Check Display Component
 * Styles for passive and active skill check entries in the game log
 * ========================================================================== */

/* ========================================
 * BASE SKILL CHECK ENTRY
 * ======================================== */

.gl-entry.skill_check {
  border-left: 3px solid var(--color-accent-primary);
  position: relative;
}

.gl-entry.skill_check .gl-icon {
  color: var(--color-accent-primary);
}

/* ========================================
 * PASSIVE VS ACTIVE VARIANTS
 * ======================================== */

/* Passive Checks - Blue/Perception theme */
.gl-entry.skill_check.passive {
  border-left-color: var(--color-accent-primary);
  background: linear-gradient(
    90deg,
    rgba(97, 175, 239, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.passive .gl-icon {
  color: var(--color-accent-primary);
}

/* Active Checks - Standard interactive styling */
.gl-entry.skill_check.active {
  border-left-color: var(--color-accent-secondary);
  background: linear-gradient(
    90deg,
    rgba(152, 195, 121, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.active .gl-icon {
  color: var(--color-accent-secondary);
}

/* ========================================
 * SUCCESS/FAILURE STATES
 * ======================================== */

.gl-entry.skill_check.success {
  border-left-color: var(--color-accent-secondary);
}

.gl-entry.skill_check.success .gl-icon {
  color: var(--color-accent-secondary);
}

.gl-entry.skill_check.failure {
  border-left-color: var(--color-accent-error);
  background: linear-gradient(
    90deg,
    rgba(224, 108, 117, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.failure .gl-icon {
  color: var(--color-accent-error);
}

/* ========================================
 * CHECK TYPE BADGES
 * ======================================== */

.gl-check-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gl-check-type-badge.passive {
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  color: var(--color-accent-primary);
}

.gl-check-type-badge.passive::before {
  content: "👁";
  font-size: 10px;
}

.gl-check-type-badge.active {
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  color: var(--color-accent-secondary);
}

.gl-check-type-badge.active::before {
  content: "🎲";
  font-size: 10px;
}

/* ========================================
 * RESULT BADGES
 * ======================================== */

.gl-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.gl-result-badge.success {
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  color: var(--color-accent-secondary);
}

.gl-result-badge.success::before {
  content: "✓";
  font-weight: bold;
}

.gl-result-badge.failure {
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  color: var(--color-accent-error);
}

.gl-result-badge.failure::before {
  content: "✗";
  font-weight: bold;
}

/* ========================================
 * NATURAL 20 / NATURAL 1 (CRITICAL) STYLING
 * ======================================== */

.gl-entry.skill_check.natural-20 {
  border-left-color: var(--color-gold);
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.1) 0%,
    var(--color-bg-secondary) 50%
  );
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  animation: criticalGlow 2s ease-in-out infinite;
}

.gl-entry.skill_check.natural-20 .gl-icon {
  color: var(--color-gold);
}

.gl-entry.skill_check.natural-20 .gl-result {
  color: var(--color-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

@keyframes criticalGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
  }
}

.gl-entry.skill_check.natural-1 {
  border-left-color: #8b0000;
  background: linear-gradient(
    90deg,
    rgba(139, 0, 0, 0.15) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.natural-1 .gl-icon {
  color: #8b0000;
}

.gl-entry.skill_check.natural-1 .gl-result {
  color: #8b0000;
}

/* Critical badges */
.gl-nat20-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: nat20Pulse 1.5s ease-in-out infinite;
}

@keyframes nat20Pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.gl-nat1-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(139, 0, 0, 0.2);
  border: 1px solid #8b0000;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: #dc143c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * SKILL CHECK INFO ROW
 * ======================================== */

.gl-check-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.gl-skill-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.gl-check-dc {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

.gl-check-dc::before {
  content: "DC ";
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.gl-margin {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.gl-margin.positive {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.gl-margin.positive::before {
  content: "+";
}

.gl-margin.negative {
  background: rgba(224, 108, 117, 0.1);
  color: var(--color-accent-error);
}

/* ========================================
 * ROLL BREAKDOWN
 * ======================================== */

.gl-roll-breakdown {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.gl-roll-breakdown .roll-value {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.gl-roll-breakdown .modifier {
  color: var(--color-accent-primary);
}

.gl-roll-breakdown .modifier.positive::before {
  content: "+";
}

.gl-roll-breakdown .total {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  padding-left: 6px;
  border-left: 1px solid var(--color-border-default);
}

/* ========================================
 * ROLL-FOR-MORE BUTTON
 * ======================================== */

.gl-roll-for-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gl-roll-for-more:hover:not(:disabled) {
  background: rgba(97, 175, 239, 0.2);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
}

.gl-roll-for-more:active:not(:disabled) {
  transform: translateY(0);
}

.gl-roll-for-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gl-roll-for-more::before {
  content: "🎲";
  font-size: 14px;
}

/* ========================================
 * DM-ONLY VISIBILITY
 * ======================================== */

.gl-entry.gl-dm-only {
  border-left-style: dashed;
  position: relative;
}

.gl-entry.gl-dm-only::after {
  content: "DM";
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 6px;
  background: rgba(198, 120, 221, 0.15);
  border: 1px solid rgba(198, 120, 221, 0.3);
  border-radius: var(--radius-sm);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Crown icon for DM badge */
.gl-dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(198, 120, 221, 0.15);
  border: 1px solid rgba(198, 120, 221, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-purple);
}

.gl-dm-badge::before {
  content: "👑";
  font-size: 10px;
}

/* Hide DM-only entries from non-DM view */
body:not(.dm-mode) .gl-entry.gl-dm-only {
  display: none;
}

/* Alternative: show placeholder for hidden checks */
body:not(.dm-mode) .gl-entry.gl-hidden-check {
  opacity: 0.5;
  background: var(--color-bg-tertiary);
  border-left-color: var(--color-border-default);
}

body:not(.dm-mode) .gl-entry.gl-hidden-check .gl-body,
body:not(.dm-mode) .gl-entry.gl-hidden-check .gl-check-info {
  display: none;
}

body:not(.dm-mode) .gl-entry.gl-hidden-check::after {
  content: "The DM made a secret check...";
  display: block;
  padding: 4px 8px;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ========================================
 * PASSIVE SCORE DISPLAY
 * ======================================== */

.gl-passive-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.gl-passive-score::before {
  content: "Passive ";
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * CAN DIG DEEPER INDICATOR
 * ======================================== */

.gl-can-dig-deeper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(229, 192, 123, 0.1);
  border: 1px dashed rgba(229, 192, 123, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-accent-warning);
}

.gl-can-dig-deeper::before {
  content: "💡";
  font-size: 14px;
}

/* ========================================
 * RESPONSIVE ADJUSTMENTS
 * ======================================== */

@media (max-width: 480px) {
  .gl-check-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .gl-roll-breakdown {
    flex-wrap: wrap;
  }

  .gl-roll-for-more {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .gl-entry.skill_check.natural-20 {
    animation: none;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  }

  .gl-nat20-badge {
    animation: none;
  }
}