/* CYOA Story Engine Styles */

/* Dialogue Stage Container */
#dialogue-stage {
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
  cursor: pointer;
  min-height: 300px;
}

#dialogue-stage:hover {
  cursor: pointer;
}

/* Dialogue Elements - Layout */
.dialogue-container,
.dialogue-container-right,
.dialogue-simple {
  position: relative;
  z-index: 1;
  margin: 1.5rem 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.dialogue-container {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background-color: transparent;
  border: none;
  border-radius: 1rem;
  box-shadow: none;
}

.dialogue-container-right {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background-color: transparent;
  border: none;
  border-radius: 1rem;
  box-shadow: none;
  flex-direction: row-reverse;
}

.dialogue-simple {
  background-color: var(--dialogue-bg);
  border: 2px solid var(--dialogue-border);
  border-radius: 1rem;
  padding: 1.5rem;
  color: var(--dialogue-text);
  font-family: var(--cd-body-font-family);
  font-size: 20px;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.character-portrait {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border: 2px solid var(--dialogue-border);
  border-radius: 1rem;
  background-color: var(--dialogue-bg);
  overflow: hidden;
  position: relative;
}

.character-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.8rem;
}

.dialogue-container-right .character-portrait {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border: 2px solid var(--dialogue-border);
  border-radius: 1rem;
  background-color: var(--dialogue-bg);
  overflow: hidden;
  position: relative;
}

.dialogue-container-right .character-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.8rem;
}

.character-name {
  padding: 0.5rem 1rem;
  background-color: var(--dialogue-bg);
  border: 2px solid var(--dialogue-border);
  border-radius: 0.5rem;
  color: var(--dialogue-text);
  font-family: var(--cd-header-font-family);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  margin-bottom: 1rem;
}

.dialogue-container-right .character-name {
  padding: 0.5rem 1rem;
  background-color: var(--dialogue-bg);
  border: 2px solid var(--dialogue-border);
  border-radius: 0.5rem;
  color: var(--dialogue-text);
  font-family: var(--cd-header-font-family);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  margin-bottom: 1rem;
}

.speech-bubble {
  flex: 1;
  background-color: var(--dialogue-bg);
  border: 2px solid var(--dialogue-border);
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  color: var(--dialogue-text);
  font-family: var(--cd-body-font-family);
  font-size: 20px;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 30px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid var(--dialogue-border);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 30px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid var(--dialogue-bg);
}

.speech-bubble-right {
  flex: 1;
  background-color: var(--dialogue-bg);
  border: 2px solid var(--dialogue-border);
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  color: var(--dialogue-text);
  font-family: var(--cd-body-font-family);
  font-size: 20px;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.speech-bubble-right::before {
  content: '';
  position: absolute;
  right: -12px;
  top: 30px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid var(--dialogue-border);
}

.speech-bubble-right::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 30px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid var(--dialogue-bg);
}

.speech-bubble p,
.speech-bubble-right p,
.dialogue-simple p {
  margin: 0 0 1rem;
}

.speech-bubble p:last-child,
.speech-bubble-right p:last-child,
.dialogue-simple p:last-child {
  margin-bottom: 0;
}

.speech-bubble strong,
.speech-bubble-right strong,
.dialogue-simple strong {
  color: var(--dialogue-text);
  font-weight: 600;
}

.speech-bubble .big,
.speech-bubble-right .big,
.dialogue-simple .big {
  font-size: 24px;
}

.speech-bubble .bigger,
.speech-bubble-right .bigger,
.dialogue-simple .bigger {
  font-size: 30px;
}

.speech-bubble .bigest,
.speech-bubble-right .bigest,
.dialogue-simple .bigest {
  font-size: 40px;
}

.speech-bubble .small,
.speech-bubble-right .small,
.dialogue-simple .small {
  font-size: 14px;
}

.speech-bubble .smaller,
.speech-bubble-right .smaller,
.dialogue-simple .smaller {
  font-size: 10px;
}

.speech-bubble .smallest,
.speech-bubble-right .smallest,
.dialogue-simple .smallest {
  font-size: 6px;
}

.dialogue-container-right .speech-bubble {
  flex: 1;
  background-color: var(--dialogue-bg);
  border: 2px solid var(--dialogue-border);
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  color: var(--dialogue-text);
  font-family: var(--cd-body-font-family);
  font-size: 20px;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dialogue-container-right .speech-bubble::before {
  content: '';
  position: absolute;
  right: -12px;
  top: 30px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid var(--dialogue-border);
}

.dialogue-container-right .speech-bubble::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 30px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid var(--dialogue-bg);
}

.dialogue-container-right .speech-bubble p {
  margin: 0 0 1rem;
}

.dialogue-container-right .speech-bubble p:last-child {
  margin-bottom: 0;
}

.dialogue-container-right .speech-bubble strong {
  color: var(--dialogue-text);
  font-weight: 600;
}

.dialogue-simple img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 2px solid var(--dialogue-border);
  background-color: var(--dialogue-bg);
  padding: 0.5rem;
  margin: 1rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#dialogue-stage .dashed-line {
  border-top: 2px dashed var(--dialogue-line);
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin: 1rem 0;
}

#dialogue-stage .character-showcase-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background-color: var(--dialogue-showcase-bg);
  border-radius: 1rem;
  margin: 1rem 0;
  border: 2px solid var(--dialogue-border);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--dialogue-border) var(--dialogue-showcase-bg);
}

#dialogue-stage .character-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#dialogue-stage .character-illustration {
  width: 200px;
  height: 250px;
  background-color: var(--dialogue-illustration-bg);
  border: 2px solid var(--dialogue-border);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  overflow: hidden;
}

#dialogue-stage .character-illustration > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

#dialogue-stage .clickable-character {
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}

#dialogue-stage .clickable-character:hover {
  transform: scale(1.02);
}

#dialogue-stage .clickable-character.overlay-active > img {
  opacity: 0.3;
}

#dialogue-stage .character-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  z-index: 10;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#dialogue-stage .character-overlay::-webkit-scrollbar {
  width: 6px;
}

#dialogue-stage .character-overlay::-webkit-scrollbar-track {
  background: transparent;
}

#dialogue-stage .character-overlay::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#dialogue-stage .character-overlay::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

#dialogue-stage .character-showcase-container::-webkit-scrollbar {
  height: 8px;
}

#dialogue-stage .character-showcase-container::-webkit-scrollbar-track {
  background: transparent;
}

#dialogue-stage .character-showcase-container::-webkit-scrollbar-thumb {
  background-color: rgba(var(--dialogue-text-rgb), 0.35);
  border-radius: 4px;
}

#dialogue-stage .character-showcase-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--dialogue-text-rgb), 0.55);
}

@media (max-width: 768px) {
  .dialogue-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .dialogue-container-right {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .character-portrait,
  .dialogue-container-right .character-portrait {
    width: 80px;
    height: 80px;
  }

  .character-name,
  .dialogue-container-right .character-name {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }

  .dialogue-container-right .character-name {
    width: 80px;
  }

  .speech-bubble::before {
    left: -8px;
    top: 20px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--dialogue-border);
  }

  .speech-bubble::after {
    left: -6px;
    top: 20px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--dialogue-bg);
  }

  .speech-bubble-right::before,
  .dialogue-container-right .speech-bubble::before {
    right: -8px;
    top: 20px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--dialogue-border);
  }

  .speech-bubble-right::after,
  .dialogue-container-right .speech-bubble::after {
    right: -6px;
    top: 20px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--dialogue-bg);
  }

  #dialogue-stage .character-showcase-container {
    gap: 1rem;
    padding: 1.5rem;
  }

  #dialogue-stage .character-illustration {
    width: 160px;
    height: 210px;
  }
}

/* Hidden Dialogue Elements */
.dialogue-hidden {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  pointer-events: none !important;
  margin-bottom: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Visible Dialogue Elements */
.dialogue-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  margin-bottom: 1rem !important;
  height: auto !important;
  overflow: visible !important;
}

/* Choices Element */
.choices-element {
  text-align: center;
  margin-top: 2rem;
}

.choices-element.dialogue-hidden {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.choices-element.dialogue-visible {
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

/* Speech Bubble Links */
.speech-bubble a, 
.speech-bubble-right a {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  color: #007bff !important;
  text-decoration: underline !important;
}

.speech-bubble a:hover, 
.speech-bubble-right a:hover {
  color: #0056b3 !important;
}

/* Scene Separator */
.scene-separator {
  margin: 2rem 0;
  border-style: dashed;
}

/* Choice / dice buttons — base look comes from site.css .button /
   .button-secondary (added in cyoa-story.js); rules here handle layout,
   sizing, faded states and responsiveness. */

.choices-buttons-container,
.dice-buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.choice-button,
.retry-button,
.dice-roll-button,
.choose-outcome-button,
.outcome-option-button {
    max-width: 100%;
    white-space: normal;
}

.choice-button {
    min-width: 200px;
}

.choice-button.selected {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dice Choices */
.dice-choices-element {
    text-align: center;
    margin-top: 2rem;
}

.dice-roll-button {
    min-width: 250px;
    font-size: 1.1rem;
}

.dice-roll-button:disabled {
    cursor: not-allowed;
}

.dice-roll-button.selected {
    opacity: 0.8;
}

/* Hidden Portrait Modifier */
.character-portrait.hidden {
    display: none;
}

/* "Choose outcome" is an auxiliary escape hatch — kept subtle. */
.choose-outcome-button {
    min-width: 250px;
    opacity: 0.45;
}

.choose-outcome-button:hover:not(:disabled) {
    opacity: 0.95;
}

.choose-outcome-button:disabled {
    cursor: not-allowed;
    opacity: 0.2;
}

/* Manual outcome options */
.outcome-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-basis: 100%;
}

.outcome-option-button {
    min-width: 180px;
    font-size: 0.95rem;
}

.outcome-option-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Narrow screens: stack choice/dice buttons full-width so they wrap
   instead of overflowing the card. */
@media (max-width: 480px) {
    .choices-buttons-container,
    .dice-buttons-container,
    .outcome-options {
        flex-direction: column;
        align-items: stretch;
    }

    .choice-button,
    .retry-button,
    .dice-roll-button,
    .choose-outcome-button,
    .outcome-option-button {
        min-width: 0;
        width: 100%;
    }
}


/* ============================================================= */
/* Dialogue overflow + narrow-screen layout
   General guard so long words / flex children never overflow the
   card, plus a stacked + centered layout for small phones (≤480px):
   portrait and name sit above a full-width, centered bubble.
=============================================================== */

.speech-bubble,
.speech-bubble-right,
.dialogue-container-right .speech-bubble,
.dialogue-simple {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 480px) {
  .dialogue-container,
  .dialogue-container-right {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }

  .dialogue-container .speech-bubble,
  .dialogue-container-right .speech-bubble,
  .dialogue-container-right .speech-bubble-right,
  .speech-bubble,
  .speech-bubble-right {
    flex: none;
    width: 100%;
  }

  /* No side pointer when the portrait is stacked on top. */
  .speech-bubble::before,
  .speech-bubble::after,
  .speech-bubble-right::before,
  .speech-bubble-right::after,
  .dialogue-container-right .speech-bubble::before,
  .dialogue-container-right .speech-bubble::after {
    display: none;
  }
}