/* Mobile responsive styles */

@media (max-width: 640px) {
  html,
  body {
    font-size: 16px;
  }
  
  /* Language and control buttons */
  #language-buttons {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
  }
  
  .lang-btn {
    font-size: 10px;
  }
  
  .lang-btn.compact {
    font-size: 10px;
  }
  
  #audio-btn,
  #tix-top-btn {
    font-size: 14px;
  }

  /* Unified size for all top controls (icons + langs) */
  #language-buttons .control-btn {
    width: 40px;
    height: 40px;
  }
  
  /* Intro buttons */
  .intro-btn {
    width: 120px;
    height: 50px;
    font-size: 16px;
    letter-spacing: 0.12rem;
  }
  
  /* TIX button (center) */
  #tix-btn {
    bottom: 15%;
    width: 148px;
    height: 60px;
    font-size: 17px;
    letter-spacing: 0.08rem;
  }
  
  /* Ticket overlay content */
  #tix-overlay,
  #tix-overlay .tix-content,
  #tix-overlay .tix-content h2,
  #tix-overlay .tix-content p,
  #tix-overlay #tix-body,
  #tix-overlay #tix-body p,
  #tix-overlay .tix-actions .intro-btn,
  #tix-overlay .close-btn {
    font-family: 'Sofia Sans', system-ui, sans-serif;
  }

  .tix-content h2 {
    font-size: 15px;
    letter-spacing: 0.06rem;
    line-height: 1.1;
    -webkit-text-stroke: 0;
    text-shadow:
      0 0 2px #0b122c;
    cursor: pointer;
  }
  
  .tix-content p,
  #tix-body p {
    font-size: 13px;
    letter-spacing: 0.02rem;
    line-height: 1.25;
    color: rgba(248, 250, 252, 1);
    -webkit-text-stroke: 0;
    text-shadow:
      0 0 2px #0b122c;
  }

  #tix-body {
    cursor: pointer;
  }
  
  .tix-content {
    padding: 0 0.6rem;
    gap: 0.6rem;
  }

  .tix-actions {
    gap: 0.4rem;
  }

  .tix-action {
    min-width: 0;
    flex: 1 1 40%;
  }

  /* Make ticket actions shorter than intro buttons */
  .tix-actions .intro-btn {
    height: 40px;
    font-size: 14px;
    letter-spacing: 0.08rem;
  }

  .tix-action--media {
    padding-left: 0.5rem;
  }

  .tix-action-thumb {
    width: 28px;
    height: 28px;
  }
  
  #tix-body {
    gap: 0.5rem;
  }
  
  #tix-body p + p {
    border-top: 1px solid rgba(248, 250, 252, 0.15);
    padding-top: 0.2rem;
  }
}