:root {
    --speaker-color-left: #e8acbb;
    --speaker-color-right: #7abdb8;

    --z-gameMenu: 1200;
    --z-gameMenuBackdrop: 1150;
    --z-modal: 1050;
    --z-modalBackdrop: 1040;
    --z-gameUI: 1100;
    --z-gameState: 1100;
} 

/* #dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.0); 
    z-index: 99; 
    display: none;
    transition: all 0.5s ease-in-out;
}

#dialog-overlay.show {
    background: rgba(0, 0, 0, 0.3);
    display: block;
} */


#DialogModal, #TutorialModal {
    position: absolute;
    /* width: 1300px;
    height: 700px; */
    max-width: 100%;
    aspect-ratio: 16 / 9;
    /* max-height: 29.7vh; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    z-index: var(--z-modal);
    /* display: none; */
    /* border: 5px solid #666666; */
    background: rgba(0, 0, 0, 0.3);
    display: none;
}

@keyframes slide-lines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}
#TutorialModal {
    background-image: 
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 10px
    );
  background-color: rgba(0, 0, 0, 0.6);
  animation: slide-lines 5s linear infinite !important;
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.pattern-layer {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 10px
  );
  animation: slide-lines 5s linear infinite;
}


#DialogModal .modal-dialog, #TutorialModal .modal-dialog {

    /* max-width: 100%;
    height: 100%; */
    margin: 0px;
    /* width: calc(100% * 9/16); */
}

.modal-dialog.modal-fullscreen {
  width: 100% !important;
  scrollbar-width: none;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 10+ (falls relevant) */
}

.modal-dialog.modal-fullscreen::-webkit-scrollbar {
  display: none;
}

.modal-dialog .modal-body{
  scrollbar-width: none;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 10+ (falls relevant) */
}

.modal-dialog .modal-body::-webkit-scrollbar {
  display: none;
}


#DialogModal .modal-content, #TutorialModal .modal-content {
    
    background-color: rgba(255, 255, 255, 0.0);
}

#DialogModal .close {
    font-size: 2.5em;
    position: fixed;
    /* display: inline-block; */
    float: left;
    margin-left: 15px;
    margin-top: 15px;
}

#dialogContent, #tutorialContent {
    position: relative;
    /* padding-left: 250px;
    padding-right: 250px; */
    padding-left: 18%;
    padding-right: 18%;
    /* width: 1100px;
    height: 700px; */
    left: 0;
    right: 0;
    /* margin: auto; */
    overflow-x: hidden;
    overflow-y: scroll;
}

.dialog-bubble {
    /* position: absolute;
    right: 25px;
    top: 25px; */
    margin-top: 20px;
    margin-bottom: 20px;
    width: 68%;
    min-height: 100px;
    background: #ffffff;
    border: 6px solid #666666;
    font-size: 1.25rem;
    font-weight: bold;
    font-family: "courier new", sans-serif;
    /* Ensures that the container is behaving like a block element */
    display: block;
    padding: 10px;
    border-radius: 30px;
    position: relative;
}

.dialog-bubble iframe {
    width: 100%
}

.dialog-bubble img {
    width: 100%
}


.dialog-bubble.left {
    /* margin-left: auto; */
    margin-left: 10px;
    border: 6px solid var(--speaker-color-left);
    background: #e7e7e7;
}


.dialog-bubble.right {
    margin-left: auto;
    margin-right: 10px;
    border: 6px solid var(--speaker-color-right);
    background: #e7e7e7;
}

#TutorialModal .dialog-bubble.right {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 80%;
}

.dialog-bubble::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.dialog-bubble.right::after {
      border-left: 10px solid var(--speaker-color-right); /* Farbe des Dreiecks */
    top: 45%; /* Positioniere das Dreieck vertikal */
    right: -15px; /* Positioniere das Dreieck horizontal */
  }

  .dialog-bubble.left::after {
    border-right: 10px solid var(--speaker-color-left); /* Farbe des Dreiecks */
  top: 45%; /* Positioniere das Dreieck vertikal */
  left: -15px; /* Positioniere das Dreieck horizontal */
}

.dialog-bubble button {
    /* Makes buttons sit in a row */
    display: inline-block;
    /* Adds some spacing between the buttons */
    margin-right: 10px;

}

.dialog-bubble button:hover {
 
    background: #666666;
    color: #fff;
}
.dialog-bubble button.chosen {
 
    background: #666666;
    color: #fff;
}

.speaker-profil {
    background: #ffffff;
    max-width: 240px;
    max-height: 320px;
    width: 16%;
    height: 35%;
    min-height: 120px;
    position: absolute;
    border-radius: 30px;
    overflow: hidden;
   
}

.speaker-profil.right{
    right: 10px;
    top: 80px;
    z-index: var(--z-modal);
    background: var(--speaker-color-right);
    /* border: 6px solid #444444; */
    
}

.speaker-profil.left{
    left: 10px;
    bottom: 80px;
    z-index: var(--z-modal);
    /* border: 6px solid #ffffff; */
    background: var(--speaker-color-left);
}
.speaker-profil img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.speaker-meta {
    background: #E7E7E7;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align:center;
    font-family: 'YanoneKaffeesatz';
}


.speaker-meta .speaker-name {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: -5px;
    line-height: 1.3;
}

.speaker-meta .speaker-role {
    font-size: 1.0rem;
    font-weight: normal;
    line-height: 1.0;
}
/* .dialog-bubble.right:after{
    content:'';
    position:relative;
    border:10px solid transparent;
    border-left:10px solid #000;
    top:20px;
    right:-100px;
   
  } */



.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #999;
  border-radius: 50%;
  animation: blink 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
  40% { opacity: 1; transform: scale(1); }
}




/* ---------------------------------------
   ≤ 1200px (Tablets quer / kleinere Laptops)
---------------------------------------- */
@media (max-width: 1200px) {
  :root {
   
  }

  .dialog-bubble {
    font-size: 0.9rem;
  }

  #game .btn-answer {
    font-size: 1.0rem;
   padding: 0.6rem 1.2rem;
}


}

/* ---------------------------------------
   ≤ 992px (Tablets hoch / kleine Desktops)
---------------------------------------- */
@media (max-width: 992px) {
  :root {
   
  }

  .dialog-bubble {
    font-size: 0.8rem;
     width: 75%;
  }

  #game .btn-answer {
    
   
    font-size: 0.9rem;
   padding: 0.5rem 1.0rem;
}

#dialogContent, #tutorialContent {
    padding-left: 15%;
    padding-right: 15%;
   
}

.speaker-profil {
    
    width: 13%;
    height: 40%;
    border-radius: 12px;
   
}

.speaker-profil.right {
    top: 60px;
}

.speaker-profil.left {
    bottom: 50px;
}

.speaker-meta .speaker-name {
    font-size: 1.0rem;
}

.speaker-meta .speaker-role {
    font-size: 0.9rem;
    
}
  
}

/* ---------------------------------------
   ≤ 768px (große Smartphones / kleine Tablets)
---------------------------------------- */
@media (max-width: 768px) {
  :root {
   
  }

  .dialog-bubble {
    font-size: 0.7rem;
    padding: 6px;
    border-width: 4px !important;
     border-radius: 12px;
  }

  .dialog-bubble p {
    margin-bottom: 0.5rem;
  }

  .dialog-bubble.right::after {
    right: -12px;
}

.dialog-bubble.left::after {
    left: -12px;
}

  .speaker-profil {
    
    border-radius: 12px;
   
   
}

.speaker-profil.left  {
  bottom: 24px;
}

.speaker-profil.right {
  top: 48px;
}

  #game .btn-answer {
    
   
    border-radius: 8px;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
}
  

  
}

/* ---------------------------------------
   ≤ 576px (Smartphones)
---------------------------------------- */
@media (max-width: 576px) {
  :root {
    
  }
    .dialog-bubble {
    font-size: 0.55rem;
    padding: 4px;
    border-width: 3px !important;
  }

  #game .btn-answer {
    
   
    border-radius: 8px;
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
  }


.speaker-meta .speaker-name {
    font-size: 0.8rem;
}

.speaker-meta .speaker-role {
    font-size: 0.65rem;
    
}

  
  
}
/* ---------------------------------------
About Modal
 ---------------------------------------*/
#AboutModal .modal-body {
    padding: 2rem;
}
 
.about-modal {
  
  overflow: hidden;
}

/* Accent bottom border on header */
.about-modal .modal-header {
  border-bottom: 2px solid var(--accent-1);
}

/* Slightly tinted header background */
.about-modal .modal-header {
  /* background: linear-gradient(
    to right,
    rgba(229, 153, 105, 0.08),
    rgba(229, 153, 105, 0)
  ); */
}

.about-modal .modal-title{
  /* text-transform: uppercase; */
}

/* Tag above the content (pill style) */
.about-tag {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  border: 1px solid rgba(229, 153, 105, 0.5);
  background-color: rgba(229, 153, 105, 0.1);
}

/* Section wrapper spacing */
.about-section {
  margin-bottom: 1.5rem;
}

/* Section titles with accent border */
.about-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--accent-1);
}

/* Person list default spacing */
.about-person-list {
  margin: 0;
  padding: 0;
}

/* More compact variant for long name lists */
.about-person-list.compact .about-person {
  margin-bottom: 0.25rem;
}

/* General person entry */
.about-person {
  /* Use flex to stack name + role nicely */
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

/* Person name styling */
.about-person-name {
  font-weight: 600;
}

/* Person role styling */
.about-person-role {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Contact block spacing */
.about-contact-block {
  /* Subtle separation between contact blocks */
  padding-left: 0.5rem;
  border-left: 2px solid rgba(229, 153, 105, 0.35);
}

/* Contact link accent */
.about-contact-link {
  font-size: 0.85rem;
  text-decoration: none;
}

/* Accent color on hover for contact links */
.about-contact-link:hover {
  text-decoration: underline;
  color: var(--accent-1);
}

/* Slightly constrain width on huge screens */
.about-modal-dialog {
  max-width: 900px;
}

/* On very small screens reduce padding for better fit */
@media (max-width: 575.98px) {
  .about-modal .modal-body {
    padding: 1.25rem;
  }

  .about-section {
    margin-bottom: 1.25rem;
  }
}