/* ==========================================================================
   Title Screen Buttons — Fantasy Medieval Edition (No Images)
   ========================================================================== */

   .title-screen-button {
    width: 100%;
    height: 96px;
  
    /* Wood-like mystical gradient */
    background: linear-gradient(
      145deg,
      #3e2a18 0%,
      #2c1d10 40%,
      #2a1a0d 100%
    );
  
    /* Carved gold edges */
    border: 3px solid rgba(185, 150, 85, 0.9);
    border-radius: 18px;
  
    /* Fantasy serif font */
    font-family: "Cinzel", serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #f4e8c9;
  
    cursor: pointer;
  
    /* Depth & carved shading */
    box-shadow:
      0 0 12px rgba(0,0,0,0.8),
      inset 0 0 10px rgba(0,0,0,0.6),
      inset 0 -4px 6px rgba(0,0,0,0.5),
      inset 0 4px 6px rgba(255,255,255,0.05);
  
    transition: all 250ms ease;
  }
  
  /* ==========================================================================
     Hover — Arcane Gold Glow + Lift
     ========================================================================== */
  
  .title-screen-button:hover {
    transform: translateY(-5px);
  
    /* enchanted glow */
    box-shadow:
      0 0 20px rgba(235, 200, 135, 0.55),
      0 0 45px rgba(235, 200, 135, 0.25),
      inset 0 0 14px rgba(255, 225, 160, 0.18);
  
    border-color: rgba(235, 200, 135, 1);
  
    background: linear-gradient(
      145deg,
      #4c3420 0%,
      #3b2515 40%,
      #311e10 100%
    );
  }
  
  /* ==========================================================================
     ACTIVE — Rune Press Effect
     ========================================================================== */
  
  .title-screen-button:active {
    transform: translateY(-2px);
  
    box-shadow:
      0 0 8px rgba(0,0,0,0.9),
      inset 0 0 20px rgba(0,0,0,0.85);
  
    background: linear-gradient(
      145deg,
      #2f1e10 0%,
      #24160b 60%,
      #1a1208 100%
    );
  }
  
  /* ==========================================================================
     PRIMARY — Divine Golden Variant (Start Game, Main Action)
     ========================================================================== */
  
  .title-screen-button.primary {
    background: linear-gradient(
      145deg,
      #8f6a2e 0%,
      #6d4e1c 40%,
      #503813 100%
    );
  
    border-color: rgba(230, 190, 110, 0.95);
    color: #fff5d5;
  }
  
  .title-screen-button.primary:hover {
    background: linear-gradient(
      145deg,
      #a7813b 0%,
      #825f24 40%,
      #62451a 100%
    );
  
    box-shadow:
      0 0 25px rgba(255, 220, 150, 0.7),
      0 0 60px rgba(255, 220, 150, 0.35),
      inset 0 0 16px rgba(255, 240, 180, 0.4);
  
    border-color: rgba(255, 220, 150, 1);
  }