.card.noselect {
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .card-container {
      perspective: 1000px;
      height: 300px;
    }

    .card {
      position: relative;
      width: 100%;
      height: 400px !important;
      transform-style: preserve-3d;
      transition: transform 0.6s;
      border: none;
      border-radius: 2rem;
      box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    }

    @media (max-width: 768px) {
      .card {
        height: 300px !important;
      }
    }

    /* Disable hover on mobile */
    @media (hover: hover) and (pointer: fine) {
      .card:hover {
        transform: scale(1.05);
        transition: transform 0.2s;
        cursor: pointer;
      }
    }

    .card.pressed {
      transform: scale(0.97) translateY(2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .card.flipped {
      transform: rotateY(180deg);
    }

    .card-front,
    .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 1.55rem;
      overflow: hidden;
    }

    .card-back {
      transform: rotateY(180deg);
      background-color: #eee;
    }

    .info-icon {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(255, 255, 255, 0.5);
      border: none;
      border-radius: 50%;
      width: 38px;
      height: 38px;
      padding: 0;
      /* Remove padding */
      display: flex;
      /* Add flex display */
      align-items: center;
      /* Center icon vertically */
      justify-content: center;
      /* Center icon horizontally */
      cursor: pointer;
      z-index: 1000;
      transition: all 0.3s;
    }

    .icon-rotate-card {
      height: 26px;
      opacity: 70%;
    }

    .back-icon {
      transform: scaleX(-1);
      height: 26px;
      opacity: 70%;
    }

    .info-icon:hover {
      background: rgba(255, 255, 255, 1);
      transform: scale(1.1);
    }

    .info-icon:focus {
      outline: none;
      box-shadow: 0 0 0 2px #0d6efd;
    }

    /* Hide info-icon when card is flipped */
    .card.flipped .info-icon {
      display: none;
    }

    /* Hide athlete image when card is flipped */
    .card.flipped .athlete-image-1 {
      display: none;
    }

    /* Hide athlete info when card is flipped */
    .card.flipped .athlete-info-1 {
      display: none;
    }

    .flip-back-icon {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(255, 255, 255, 0.8);
      border: none;
      border-radius: 50%;
      width: 38px;
      height: 38px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .flip-back-icon:hover {
      background: rgba(255, 255, 255, 1);
      transform: scale(1.1);
    }

    .card-img-top {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .card-text-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      margin: 0.5rem;
      padding: 0.5rem 0.75rem;
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      border-radius: 0.25rem;
    }

    .modal.fade .modal-dialog {
      transform: scale(0.95);
      opacity: 0;
      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    }

    .modal.fade.show .modal-dialog {
      transform: scale(1);
      opacity: 1;
    }

    .btn-glass {
      /* From https://css.glass */
      background: rgba(255, 255, 255, 0.5);
      border-radius: 16px !important;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(14.5px);
      -webkit-backdrop-filter: blur(14.5px);
      border: 2px solid rgb(0, 0, 0, 1) !important;

      padding: 14px 20px;
      color: #000 !important;
      /* Ensure text color is black by default */
      transition: all 0.3s ease;
      font-size: 1.1rem !important;
    }

    .btn-glass:active {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
      border: 2px solid rgb(0, 0, 0, 0.3) !important;
      color: #000 !important;
      /* Keep text color black when active */
    }

    .btn-glass:hover {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
      border: 2px solid rgb(0, 0, 0, 0.3) !important;
      color: #000 !important;
      /* Keep text color black on hover */
    }

    .btn-glass:focus {
      outline: none;
      /* Remove default focus outline */
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
      border: 2px solid rgb(0, 0, 0, 0.3) !important;
      color: #000 !important;
      /* Keep text color black on focus */
    }

    .modal-name-background {
      /* From https://css.glass */
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(15.2px);
      -webkit-backdrop-filter: blur(15.2px);
    }