/* ------- Basic Reset & Body Style ------- */
html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    background-color: #000; /* Black background */
    overflow: hidden; /* Prevent scrolling */
    display: flex; /* Use flex to center player/message */
    justify-content: center; align-items: center;
    font-family: sans-serif;
  }
  /* ------- Player Custom CSS ------- */
  #player-container {
    width: 100%; max-width: 900px; /* Max width for the player area */
    margin: auto; /* Center container */
    box-sizing: border-box;
  }
  #player-message {
     padding: 30px; text-align: center; font-size: 18px; color: #cccccc;
     background-color: #1a1a1a; border-radius: 8px; line-height: 1.6;
     max-width: 600px; margin: 20px auto;
     display: none; /* Hidden initially */
  }
  #player-message code {
     background-color: #333; padding: 3px 6px; border-radius: 4px;
     font-family: monospace; color: #eee; display: inline-block; word-break: break-all;
  }
  #player {
    width: 100%; aspect-ratio: 16 / 9; background-color: #000;
    display: none; /* Hidden initially, shown by JS */
    margin: 0 auto; position: relative; border-radius: 8px;
    overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }
  /* --- Loading Animation CSS --- */
  .loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999; display: flex;
    justify-content: center; align-items: center;
  }
  .loading-text { text-align: center; }
  .loading-text span {
    display: inline-block; margin: 0 5px; color: #00b3ff;
    font-family: 'Quattrocento Sans', sans-serif; /* Ensure font loaded or use fallback */
  }
  /* (Keep individual span animations and @keyframes blur-text) */
  .loading-text span:nth-child(1) { filter: blur(0px); animation: blur-text 1.5s 0s infinite linear alternate; }
  .loading-text span:nth-child(2) { filter: blur(0px); animation: blur-text 1.5s 0.2s infinite linear alternate; }
  .loading-text span:nth-child(3) { filter: blur(0px); animation: blur-text 1.5s 0.4s infinite linear alternate; }
  .loading-text span:nth-child(4) { filter: blur(0px); animation: blur-text 1.5s 0.6s infinite linear alternate; }
  .loading-text span:nth-child(5) { filter: blur(0px); animation: blur-text 1.5s 0.8s infinite linear alternate; }
  .loading-text span:nth-child(6) { filter: blur(0px); animation: blur-text 1.5s 1s infinite linear alternate; }
  .loading-text span:nth-child(7) { filter: blur(0px); animation: blur-text 1.5s 1.2s infinite linear alternate; }
  .loading-text span:nth-child(8) { filter: blur(0px); animation: blur-text 1.5s 1.4s infinite linear alternate; }
  .loading-text span:nth-child(9) { filter: blur(0px); animation: blur-text 1.5s 1.6s infinite linear alternate; }
  .loading-text span:nth-child(10){ filter: blur(0px); animation: blur-text 1.5s 1.8s infinite linear alternate; }
  .loading-text span:nth-child(11){ filter: blur(0px); animation: blur-text 1.5s 2.0s infinite linear alternate; }
  @keyframes blur-text { 0% { filter: blur(0px); } 100% { filter: blur(4px); } }
  
  /* --- Telegram Button CSS --- */
  .telegram-float { position: fixed; top: 17px; left: 20px; z-index: 1000; }
  .telegram-icon {
    width: 40px; height: 40px; border-radius: 50%; background-color: #0088cc;
    display: flex; justify-content: center; align-items: center;
    animation-name: pulse; animation-duration: 1.5s;
    animation-timing-function: ease-out; animation-iteration-count: infinite;
  }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5); } 80% { box-shadow: 0 0 0 14px rgba(0, 136, 204, 0); } }
  .telegram-icon svg { fill: #fff; width: 21px; height: 21px; }
  
  /* Player.js Specific Styles (Add if needed to override defaults) */
  /* Example: */
  /* #player .play-button { background-color: red !important; } */