/* ==========================================================================
   LOADING SCREEN — Medieval Arcane Theme
   ========================================================================== */

   .loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  
    background:
      linear-gradient(rgba(10, 7, 4, 0.7), rgba(6, 4, 2, 0.88)),
      url("https://static.vecteezy.com/system/resources/previews/042/196/173/large_2x/ai-generated-role-playing-rpg-game-background-free-photo.jpg");
    background-size: cover;
    background-position: center;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    opacity: 1;
    transition: opacity 1s ease-out;
  }
  
  .loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  /* ==========================================================================
     CONTENT — Old Magical Tome Style
     ========================================================================== */
  
  .loading-content {
    text-align: center;
    padding: 50px 75px;
  
    background: rgba(30, 23, 18, 0.55);
    backdrop-filter: blur(10px);
    border-radius: 18px;
  
    border: 2px solid rgba(189, 159, 99, 0.4); /* antique gold */
    box-shadow:
      0 0 35px rgba(0, 0, 0, 0.9),
      inset 0 0 25px rgba(0, 0, 0, 0.45);
  
    animation: fadeInScale 1.3s ease-out;
  
    /* fix circle under title */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  
  /* ==========================================================================
     TITLE — Enchanted Medieval Gold
     ========================================================================== */
  
  .loading-title {
    font-size: 58px;
    font-weight: 900;
    font-family: "Cinzel", serif;
    letter-spacing: 3px;
  
    color: #e9d6a4; /* aged gold */
  
    text-shadow:
      0 0 6px rgba(0,0,0,0.9),
      2px 2px 3px rgba(0,0,0,0.8),
      0 0 12px rgba(255,245,200,0.25);
  }
  
  /* ==========================================================================
     SUBTITLE — Soft Rune Style
     ========================================================================== */
  
  .loading-subtitle {
    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    font-weight: 600;
    color: #f4e9cf;
    opacity: 0.85;
  
    text-shadow:
      0 0 4px rgba(0,0,0,0.9),
      0 0 10px rgba(0,0,0,0.7);
  }
  
  /* ==========================================================================
     SPINNER — Arcane Ritual Circle (Bronze & Gold)
     ========================================================================== */
  
  .loading-spinner {
    width: 100px;
    height: 100px;
  
    border: 4px solid rgba(160, 120, 70, 0.25);
    border-top: 4px solid rgba(210, 175, 120, 0.7); /* antique bronze */
    border-radius: 50%;
  
    animation: spin 1.6s linear infinite;
  
    filter: drop-shadow(0 0 6px rgba(200, 170, 110, 0.4));
  }
  
  /* ==========================================================================
     PROGRESS BAR — Forged Iron + Gold Trim
     ========================================================================== */
  
  .loading-bar {
    width: 260px;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
  
    background: rgba(60, 45, 35, 0.55);
    border: 1px solid rgba(189, 159, 99, 0.35);
  
    box-shadow:
      inset 0 0 10px rgba(0,0,0,0.8),
      0 0 6px rgba(0,0,0,0.4);
  }
  
  .loading-progress {
    height: 100%;
    width: 0%;
  
    background: linear-gradient(90deg, #c6a66b, #e6d3a4, #c6a66b); /* gold fade */
    animation: loadingProgress 2.4s ease-in-out infinite;
  
    box-shadow:
      inset 0 0 6px rgba(0,0,0,0.4);
  }
  
  /* ==========================================================================
     LOADING TEXT — Whispered Arcane Chant
     ========================================================================== */
  
  .loading-text {
    margin-top: 6px;
    font-size: 18px;
    font-family: "Cormorant Garamond", serif;
    color: #f2e7cf;
    opacity: 0.8;
  
    text-shadow:
      0 0 4px rgba(0,0,0,1),
      0 0 8px rgba(0,0,0,0.9);
  
    animation: textPulse 1.8s ease-in-out infinite;
  }
  
  /* ==========================================================================
     ANIMATIONS
     ========================================================================== */
  
  @keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
  }
  
  @keyframes loadingProgress {
    0%   { width: 0%; }
    50%  { width: 100%; }
    100% { width: 100%; }
  }
  
  @keyframes textPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
  }
  
  @keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }