.container { 
      width: 100%; 
      position: relative; 
      max-width: 1200px; 
      margin: 0 auto; 
      padding: 0 10px;
    }

    .btn-con { 
      display: flex; 
      gap: 1rem; 
      justify-content: center; 
      margin: 2rem 0 0; 
      flex-wrap: wrap;
    }

    .btn-con button { 
      margin: 0.5rem; 
    }

    h2 { 
      color: #218B8D; 
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
      background: linear-gradient(to top left, #0000FF 0%, #800080 76%); 
      -webkit-background-clip: text; 
      -webkit-text-fill-color: transparent; 
      background-clip: text;
      margin: 2rem 0 0; 
      text-align: center; 
      font-size: clamp(1.5rem, 5vw, 3rem);
    }

    .subtitle { 
      text-align: center; 
      font-size: clamp(1rem, 3vw, 1.2rem); 
      margin-bottom: 30px; 
      color: var(--thirdColor); 
      font-style: italic; 
      padding: 0 20px;
    }

    .initial-screen { 
      text-align: center; 
    }

    .initial-screen p { 
      font-size: clamp(1rem, 3vw, 1.3rem); 
      line-height: 1.6; 
      margin: 0 auto;
    }

    .button { 
      background: linear-gradient(45deg, #6c5ce7, #a29bfe); 
      border: none; 
      padding: clamp(12px, 3vw, 15px) clamp(20px, 5vw, 30px); 
      font-size: clamp(0.9rem, 2.5vw, 1.1rem); 
      color: white; 
      border-radius: 25px; 
      cursor: pointer; 
      transition: all 0.3s ease; 
      font-family: inherit; 
      box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
      min-width: 140px;
    }

    .button:hover { 
      background: linear-gradient(45deg, #5f4dc7, #918bfe); 
      transform: translateY(-2px); 
      box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4); 
    }

    /* Modern Clean Reading Container */
    .reading-container { 
      display: none; 
      max-width: 900px; 
      margin: 0 auto; 
      padding: 20px 10px; 
    }

    .card-reading { 
      background: rgba(255, 255, 255, 0.98); 
      border-radius: 20px; 
      padding: 0; 
      margin-bottom: 20px; 
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
      overflow: hidden; 
    }

    .position-header { 
      padding: 10px 20px; 
      font-size: clamp(1rem, 3vw, 1.4rem); 
      font-weight: bold; 
      letter-spacing: 2px; 
      text-transform: uppercase; 
      color: white; 
      margin: 0; 
      text-align: center;
    }

    .position-header.past { background: var(--priColor); }
    .position-header.present { background: var(--thirdColor); }
    .position-header.future { background: #BC7EFF; }

    .card-content { 
      display: flex; 
      padding: 20px; 
      gap: 20px; 
      background: white; 
      color: #333; 
      flex-direction: column;
    }

    .card-visual { 
      flex-shrink: 0; 
      text-align: center; 
      align-self: center;
    }

    .card-image { 
      width: min(169px, 40vw) !important; 
      height: min(291px, 68vw); 
      object-fit: cover; 
      border-radius: 12px; 
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
      margin: 0 auto 15px; 
    }

    .card-name { 
      font-size: clamp(1rem, 3vw, 1.3rem); 
      font-weight: bold; 
      color: #2c3e50; 
      margin-bottom: 8px; 
    }

    .card-description { 
      font-size: clamp(0.8rem, 2.5vw, 0.95rem); 
      color: #666; 
      font-style: italic; 
      line-height: 1.4; 
    }

    .card-meaning { 
      flex: 1; 
      display: flex; 
      flex-direction: column; 
    }

    .card-title { 
      font-size: clamp(1.2rem, 4vw, 2rem); 
      color: #2c3e50 !important; 
      margin-bottom: 15px; 
      font-weight: bold; 
      text-align: center;
    }

    .card-general { 
      font-size: clamp(0.9rem, 2.5vw, 1.1rem); 
      color: #555; 
      line-height: 1.6; 
      margin-bottom: 20px; 
      flex: 1; 
      text-align: center;
    }

    .meaning-box { 
      background: linear-gradient(135deg, #218B8D45, #218B8DBA); 
      border-radius: 12px; 
      padding: 20px; 
      color: white; 
      box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3); 
      border-left: 5px solid var(--thirdColor); 
    }

    .meaning-title { 
      font-size: clamp(1rem, 3vw, 1.2rem); 
      font-weight: bold; 
      margin-bottom: 12px; 
      color: var(--textColor); 
    }

    .meaning-text { 
      font-size: clamp(0.9rem, 2.5vw, 1.05rem); 
      line-height: 1.5; 
      color: var(--textColor); 
    }

    /* Mobile-Optimized Shuffle Container */
    .shuffle-container { 
      position: relative; 
      width: 100%; 
      height: auto;
      min-height: 60vh;
      border-radius: 15px; 
      margin: 20px auto; 
      overflow: visible; 
      backdrop-filter: blur(10px); 
      padding: 20px 10px; 
      padding-bottom: 120px;
    }

    .shuffle-container.hidden { display: none; }

    .deck-container { 
      position: relative; 
      width: 100%; 
      height: auto; 
      min-height: 50vh;
    }

    /* Mobile-Optimized Shuffle Cards */
    .shuffle-card { 
      position: absolute; 
      width: clamp(60px, 15vw, 120px); 
      height: clamp(105px, 26vw, 211px); 
      cursor: pointer; 
      perspective: 1000px; 
      transition: all 0.3s ease; 
    }

    .shuffle-card:hover { 
      transform: scale(1.05) !important; 
      z-index: 9999 !important; 
    }

    .shuffle-card.selectable { 
      cursor: pointer; 
    }

    .shuffle-card.selectable:hover { 
      transform: scale(1.1) !important; 
    }

    .shuffle-card.selected-card { 
      z-index: 1000; 
    }

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

    .shuffle-card-inner { 
      position: relative; 
      width: 100%; 
      height: 100%; 
      transition: transform 0.8s; 
      transform-style: preserve-3d; 
    }

    .shuffle-card-face { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      backface-visibility: hidden; 
      border-radius: 6px; 
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 
    }

    .shuffle-card-back { 
      background-image: url('https://psychicnz.psychicreaderjobs.net/wp-content/themes/PsychicNewZealand-2025/images/tarot-card-image/card-bg.jpg'); 
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
    }

    .shuffle-card-front { 
      background: #fff; 
      transform: rotateY(180deg); 
    }

    .shuffle-card-front img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      border-radius: 4px; 
      transition: all 0.3s ease;
    }

    /* Enhanced styling for selected/final cards */
    .shuffle-card.selected-card .shuffle-card-front img {
      border-radius: 6px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .shuffle-card.flipped.selected-card {
      box-shadow: 0 8px 25px rgba(33, 139, 141, 0.4);
    }

    @keyframes glow {
      from {
        box-shadow: 0 0 10px #218B8D;
      }
      to {
        box-shadow: 0 0 20px #218B8D, 0 0 30px #218B8D;
      }
    }

    .shuffle-info { 
      position: absolute; 
      top: 0; 
      left: 50%; 
      transform: translateX(-50%); 
      padding: 15px 20px; 
      border-radius: 25px; 
      font-size: clamp(0.9rem, 2.5vw, 1.1rem); 
      color: #218B8D; 
      text-align: center; 
      min-width: 250px;
      max-width: 90%;
      z-index: 10000; 
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .stats { 
      position: absolute; 
      bottom: 80px; 
      left: 50%; 
      transform: translateX(-50%); 
      background: rgba(0, 0, 0, 0.7); 
      padding: 8px 16px; 
      border-radius: 20px; 
      font-size: clamp(0.7rem, 2vw, 0.9rem); 
      color: #ccc; 
      border: 1px solid rgba(255, 255, 255, 0.2); 
      display: none; 
    }

    .card-position { 
      position: absolute; 
      width: clamp(60px, 15vw, 120px); 
      height: clamp(105px, 26vw, 211px); 
      border: 2px dashed #218B8D; 
      border-radius: 6px; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      font-size: clamp(0.6rem, 2vw, 0.8rem); 
      color: #218B8D; 
      font-weight: bold; 
      background: #218B8D3D; 
      animation: pulse 2s ease-in-out infinite; 
      text-align: center;
    }

    @media (max-width: 768px) {
      .card-position {
        font-size: clamp(0.5rem, 2.5vw, 0.7rem);
        padding: 2px;
        line-height: 1.1;
        border-width: 2px;
        background: rgba(33, 139, 141, 0.15);
        backdrop-filter: blur(3px);
      }

      /* Add labels below cards in mobile row layout */
      .card-position::after {
        content: '';
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #218B8D, transparent);
      }
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    .reading-section { 
      position: absolute; 
      width: clamp(200px, 60vw, 80%); 
      max-height: clamp(150px, 25vh, 200px); 
      overflow-y: auto; 
      opacity: 0; 
      transform: translateY(20px); 
      transition: all 0.5s ease; 
      background: rgba(255,255,255,0.1); 
      padding: clamp(12px, 3vw, 20px); 
      border-radius: 12px; 
      border-left: 4px solid var(--thirdColor); 
      backdrop-filter: blur(10px);
      margin-bottom: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .reading-section.visible { 
      opacity: 1; 
      transform: translateY(0); 
      background: #218B8D2E; 
    }

    .reading-section h3 { 
      color: var(--priColor); 
      margin-bottom: 10px; 
      font-size: clamp(0.9rem, 2.5vw, 1.1rem); 
      text-align: left; 
    }

    .meaning-section { 
      text-align: left; 
    }

    .card-title { 
      color: var(--thirdColor);
    }

    .tarot-card-display { 
      text-align: center; 
    }

    .sparkle { 
      position: absolute; 
      width: 4px; 
      height: 4px; 
      border-radius: 50%; 
      pointer-events: none; 
      animation: sparkleAnim 0.8s ease-out forwards; 
    }

    @keyframes sparkleAnim {
      0% {
        opacity: 1;
        transform: scale(0) rotate(0deg);
      }
      50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
      }
      100% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
      }
    }

    .reset-btn { 
      margin-top: 20px; 
      display: block; 
      margin-left: auto; 
      margin-right: auto; 
    }

    /* Desktop buttons container styling */
    .desktop-buttons-container {
      z-index: 10000;
    }

    .desktop-buttons-container .button {
      box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
      transition: all 0.3s ease;
    }

    .desktop-buttons-container .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
    }

    /* Mobile-specific styles */
    @media (max-width: 768px) {
      .card-content { 
        flex-direction: column; 
        text-align: center; 
        padding: 15px;
      }
      
      .card-visual { 
        align-self: center; 
      }
      
      .position-header { 
        text-align: center; 
        font-size: clamp(1rem, 4vw, 1.2rem); 
        letter-spacing: 1px;
      }

      .shuffle-container {
        min-height: 140vh;
        padding: 15px 5px;
        padding-bottom: 220px; /* More space for cards at bottom */
      }

      .deck-container {
        min-height: 135vh;
      }

      .btn-con {
        gap: 0.5rem;
        margin: 1rem 0;
      }

      .button {
        padding: 10px 20px;
        font-size: 0.9rem;
        min-width: 120px;
      }

      h2 {
        margin: 1rem 0;
      }

      /* Hide reading sections on mobile during selection */
      .reading-section {
        display: none !important;
      }

      /* Mobile buttons container */
      .mobile-buttons-container {
        z-index: 10000;
        width: 70%;
      }

      .mobile-buttons-container .button {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
        font-size: 0.9rem;
      }

      /* Ensure cards maintain their row positions */
      .shuffle-card.selected-card {
        transform: rotate(0deg) scale(1) !important;
      }

      .shuffle-card.flipped {
        transform: rotate(0deg) scale(1) !important;
      }

      /* Mobile row card specific styling */
      .mobile-row-card {
        position: absolute !important;
        transform: rotate(0deg) scale(1) !important;
      }

      .mobile-row-card.flipped {
        transform: rotate(0deg) scale(1) !important;
      }

      .mobile-row-card.selected-card {
        transform: rotate(0deg) scale(1) !important;
      }

      /* Add subtle shadow to show row formation */
      .mobile-row-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 
                    0 2px 6px rgba(33, 139, 141, 0.2) !important;
        border-radius: 8px;
      }

      /* Mobile row container styling */
      .mobile-card-row-container {
        backdrop-filter: blur(10px);
        animation: fadeInRow 0.8s ease-out;
      }

      @keyframes fadeInRow {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }

    /* Extra small devices (360px and below) */
    @media (max-width: 360px) {
      .container {
        padding: 0 5px;
      }

      h2 {
        font-size: clamp(1.2rem, 6vw, 2rem);
        margin: 1rem 0 0.5rem;
      }

      .initial-screen p {
        font-size: clamp(0.9rem, 4vw, 1.1rem);
      }

      .button {
        padding: 8px 16px;
        font-size: 0.8rem;
        min-width: 100px;
      }

      .shuffle-container {
        min-height: 150vh; /* Increased height for bottom positioning */
        padding: 8px 2px;
        padding-bottom: 140px;
      }

      .deck-container {
        min-height: 145vh;
      }

      .shuffle-info {
        padding: 8px 12px;
        font-size: 0.75rem;
        min-width: 180px;
        max-width: 95%;
      }

      .reading-section {
        width: calc(100vw - 80px);
        max-height: 120px;
        padding: 6px;
        margin-bottom: 8px;
        left: 70px !important;
        font-size: 0.7rem;
        border-radius: 8px;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(188, 126, 255, 0.3);
        backdrop-filter: blur(5px);
      }

      .reading-section h3 {
        font-size: 0.8rem;
        margin-bottom: 6px;
        line-height: 1.2;
        color: var(--priColor) !important;
      }

      .meaning-text {
        font-size: 0.7rem !important;
        line-height: 1.3;
        color: #333 !important;
      }

      .tarot-card-display {
        text-align: left !important;
      }

      .card-title {
        font-size: 0.8rem !important;
        margin-bottom: 4px;
        color: var(--thirdColor) !important;
      }

      .reading-section h3 {
        font-size: 0.9rem;
        margin-bottom: 8px;
      }

      .card-position {
        font-size: 0.5rem;
        border-width: 1px;
      }

      .shuffle-card {
        transform-origin: center center;
      }

      .btn-con {
        gap: 0.3rem;
        margin: 0.5rem 0;
        flex-direction: column;
        align-items: center;
      }

      .btn-con button {
        margin: 0.2rem;
        width: 90%;
        max-width: 200px;
      }
    }

    /* Extra small devices */
    @media (max-width: 480px) and (min-width: 361px) {
      .shuffle-container {
        min-height: 160vh; /* Increased height for bottom positioning */
        padding: 10px 5px;
        padding-bottom: 160px;
      }


      .deck-container {
        min-height: 155vh;
      }

      .shuffle-info {
        padding: 10px 15px;
        font-size: 0.85rem;
        min-width: 200px;
      }

      .reading-section {
        width: calc(100vw - 20px);
        max-height: 160px;
        padding: 10px;
        margin-bottom: 25px;
        left: 10px !important;
      }

      .card-position {
        font-size: 0.6rem;
      }

      .meaning-box {
        padding: 15px;
      }

      .card-reading {
        margin-bottom: 15px;
      }
    }

    /* Large screens */
    @media (min-width: 1024px) {
      .card-content {
        flex-direction: row;
        padding: 30px;
        gap: 30px;
      }

      .shuffle-container {
        height: 90rem; /* Increased height for bottom buttons */
        padding-bottom: 120px;
      }

      .deck-container {
        min-height: 700px;
      }
    }

    /* Medium screens (tablets in landscape, small desktops) */
    @media (min-width: 769px) and (max-width: 1023px) {
      .shuffle-container {
        min-height: 85rem;
        padding-bottom: 100px;
      }

      .deck-container {
        min-height: 650px;
      }
    }

    @media only screen and (max-width: 480px) {
     #nonhome { padding: 8rem 1rem !important; }
    }