/* css/completion-screens.css */

/* Utility classes for dynamic visibility */
.hidden {
    display: none !important;
}

.visible {
    display: flex !important;
}

.scoring-item.hidden {
    display: none !important;
}

.completion-screen {
  display: none; /* Hidden by default */
  width: 100%;
  height: fit-content;
  padding: var(--space-md); /* Consistent padding */
  flex-direction: column; /* Align content vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  background-color: transparent; /* Ensure screen itself is transparent */
  border-radius: var(--border-radius); /* Rounded stroke box for the entire screen */
  /* Border color will be set by specific screen styles */
}

/* When a completion screen is active, it should be displayed as flex */
.completion-screen.active {
  display: flex;
}

/* Styles for the title (e.g., "You failed!", "You did it!") */
.completion-title {
  font-size: 2.5rem; /* Example size */
  font-weight: bold;
  margin-bottom: var(--space-md);
  padding-top: var(--space-xxl);
}

/* Styles for the descriptive text */
.completion-description {
  font-size: 1rem;
  margin-bottom: var(--space-lg);
  width: 90%;
  max-width: 500px; /* Limit width for readability */
  line-height: 1.6;
}

/* Container for all scoring sections */
.scoring-details {
  /* border removed, will be on .completion-screen */
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  width: 90%;
  max-width: 500px; /* Max width for the scoring box */
  border-top: 2px solid;
}

/* Individual scoring item (e.g., Accusation, Correct Evidence) */
.scoring-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  /* border-bottom removed */
}

/* .scoring-item:last-child { border-bottom: none; } */ /* No longer needed */

.scoring-label {
  font-weight: bold;
  text-align: left;
}

.scoring-value {
  text-align: right;
  display: flex;
  align-items: center;
  gap: var(--space-xs); /* Space between icon and text */
}

.scoring-value .fas { /* Font Awesome icon style */
  font-size: 1em; /* Match text size or adjust as needed */
}

/* Final score specific styling (larger, more prominent) */
.final-score-item {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 2px solid; /* Thicker top border, color set in specific screen styles */
}

.final-score-item .scoring-label,
.final-score-item .scoring-value {
  font-size: 1.2rem;
  font-weight: bold;
}

/* Horizontal line style (if used directly as a div) */
.hr-line {
/* deprecated */
}

/* Styling for global nav changes when completion screens are active */
body.completion-view-active .logo,
body.completion-view-active .hamburger-menu-button {
  /* This will be overridden by specific success/failure screen styles for --theme-primary-color */
  /* but ensures a change if only this generic class is used. */
  color: var(--theme-primary-color); 
}

/* Body background styles based on active screen */
body.failure-screen-active {
  background-color: var(--theme-secondary-color);
}
body.success-screen-active {
  background-color: var(--theme-tile-color);
}

/* Hide accusation and final score stats */
/* Hide the Accusation stat (first scoring-item in both screens) */
#success-screen .scoring-item:first-child,
#failure-screen .scoring-item:first-child {
  display: none;
}

/* Hide the Final Score stat (has final-score-item class) */
#success-screen .final-score-item,
#failure-screen .final-score-item {
  display: none;
}


/* --- Failure Screen Specific Styles --- */
#failure-screen {
  /* background-color removed, handled by body.failure-screen-active */
  border: 5px solid var(--theme-primary-color);
}
#failure-screen .completion-title {
  color: var(--theme-primary-color);
}
#failure-screen .completion-description {
  color: var(--theme-primary-color);
}
#failure-screen .final-score-item { /* Ensure border top color is correct */
  border-top-color: var(--theme-primary-color);
}
#failure-screen .scoring-details {
  border-top-color: var(--theme-primary-color);
}
#failure-screen .scoring-label {
  color: var(--theme-primary-color);
}
#failure-screen .scoring-value {
  color: var(--theme-primary-color);
}

/* --- Success Screen Specific Styles --- */
#success-screen {
  /* background-color removed, handled by body.success-screen-active */
  border: 2px solid var(--theme-primary-color);
}
#success-screen .completion-title {
  color: var(--theme-primary-color);
}
#success-screen .completion-description {
  color: var(--theme-content-color);
}
#success-screen .final-score-item { /* Ensure border top color is correct */
  border-top-color: var(--theme-primary-color);
}
#success-screen .scoring-details {
   border-top-color: var(--theme-primary-color);
}
#success-screen .scoring-label {
  color: var(--theme-primary-color);
}
#success-screen .scoring-value {
  color: var(--theme-primary-color);
}