/* This stylesheet is for basic styling of the static page itself 
    for fonts, button, page layout, colors, etc */

    .nanum-gothic-coding-regular {
      font-family: "Nanum Gothic Coding", monospace;
      font-weight: 400;
      font-style: normal;
    }
    
    .nanum-gothic-coding-bold {
      font-family: "Nanum Gothic Coding", monospace;
      font-weight: 700;
      font-style: normal;
    }
    
    .main-container{
      padding-bottom: 8rem;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 1.5rem 0;
    }
    
    .container2{
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    
    .title {
      font-family: "Nanum Gothic Coding";
      font-weight: 600;
      font-size: 1.75rem;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    
    .paragraph {
      font-family: "Manrope";
      font-weight: 400;
      font-size: 0.875rem;
    }
    
    .link-button{
      text-decoration: none;
      color: #131313;
      font-family: "Nanum Gothic Coding";
      border-bottom: 1px solid #131313;
    }
    
    .submit-button {
      font-family: "Nanum Gothic Coding";
      font-size: 1rem;
      letter-spacing: 0.05rem;
      background-color: #131313;
      color: #fff;
      border: none;
      border-radius: 25px;
      width: 10rem;
      height: 2.5rem;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    @media (hover: hover) {
      .submit-button:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(19, 19, 19, 0.3);
        background-color: #2a2a2a;
      }
    }

    .submit-button:active:not(:disabled) {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(19, 19, 19, 0.3);
    }

    .submit-button:disabled,
    .submit-button[disabled] {
      border: 1px solid #999999;
      background-color: #cccccc;
      color: #666666;
    }
    
    .button-secondary {
        font-family: "Nanum Gothic Coding";
        font-size: 1rem;
        letter-spacing: 0.05rem;
        background-color: rgb(236, 237, 230);
        color: #131313;
        border: none;
        border-radius: 25px;
        width: 10rem;
        height: 2.5rem;
        margin-bottom: 1rem;
        cursor: pointer;
        background-image: url('../assets/ArrowsClockwise.svg');
        background-repeat: no-repeat;
        background-position: 10%;
        padding-left: 0.5rem;
        transition: all 0.3s ease;
    }

    @media (hover: hover) {
      .button-secondary:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          background-color: rgb(220, 221, 214);
      }
    }

    .button-secondary:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .button-deselect {
      font-family: "Nanum Gothic Coding";
      font-size: 1rem;
      letter-spacing: 0.05rem;
      background-color: rgb(236, 237, 230);
      color: #131313;
      border: none;
      border-radius: 25px;
      width: 10rem;
      height: 2.5rem;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    @media (hover: hover) {
      .button-deselect:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        background-color: rgb(220, 221, 214);
      }
    }

    .button-deselect:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .share-button {
      font-family: "Nanum Gothic Coding";
      font-size: 1rem;
      letter-spacing: 0.05rem;
      background-color: rgb(236, 237, 230);
      color: #131313;
      border: none;
      border-radius: 25px;
      width: 10rem;
      height: 2.5rem;
      margin-bottom: 1rem;
      cursor: pointer;
      /* background-image: url('../assets/ArrowsClockwise.svg'); */
      /* background-repeat: no-repeat; */
      /* background-position: 10%; */
  }

    .card-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 2rem 1rem;
      justify-content: center;
      width: 100%;
    }
    
    .card {
      height: 5rem;
      width: 22%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Nanum Gothic Coding";
      font-weight: 500;
      font-size: 1.125rem;
      color: #131313;
      background-color: rgb(236, 237, 230);
      border-radius: 6px;
      cursor: pointer;
      border: none;
      outline: none;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 2;
      word-break: break-word;
      white-space: normal;
      padding: 0.25rem;
      line-height: 1.2;
      -webkit-appearance: none;
      appearance: none;
    }
    
    /* Hover Effects - Only for non-touch devices */
    @media (hover: hover) {
      .card:hover:not(.disabled) {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        background: linear-gradient(90deg, rgb(236, 237, 230), rgba(181, 36, 181, 0.15), rgba(214, 161, 240, 0.25), rgba(181, 36, 181, 0.15), rgb(236, 237, 230));
        background-size: 200% 100%;
        animation: shimmerBackground 2s ease-in-out infinite;
      }

      /* Hover Effects for Selected Cards - preserve selection visibility */
      .card.selected:hover:not(.disabled) {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        background: linear-gradient(90deg, #ead7f4, rgba(181, 36, 181, 0.3), rgba(214, 161, 240, 0.4), rgba(181, 36, 181, 0.3), #ead7f4);
        background-size: 200% 100%;
        animation: shimmerBackground 2s ease-in-out infinite;
      }
    }

    @keyframes shimmerBackground {
      0% { 
        background-position: -200% 0;
      }
      100% { 
        background-position: 200% 0;
      }
    }

    /* Selection Animation */
    .card.selecting {
      animation: selectBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    @keyframes selectBounce {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1.05); }
    }

    /* Enhanced Wiggle Animation */
    @keyframes wiggle {
        0% { transform: translateX(0) rotate(0deg); }
        15% { transform: translateX(-5px) rotate(-2deg); }
        30% { transform: translateX(5px) rotate(2deg); }
        45% { transform: translateX(-3px) rotate(-1deg); }
        60% { transform: translateX(3px) rotate(1deg); }
        75% { transform: translateX(-2px) rotate(-0.5deg); }
        90% { transform: translateX(2px) rotate(0.5deg); }
        100% { transform: translateX(0) rotate(0deg); }
    }

    .wiggle {
        animation: wiggle 0.8s ease-in-out;
    }

    /* Individual Card Shake */
    @keyframes cardShake {
        0%, 100% { transform: translateX(0) scale(1); }
        10% { transform: translateX(-3px) scale(0.98); }
        20% { transform: translateX(3px) scale(1.02); }
        30% { transform: translateX(-3px) scale(0.98); }
        40% { transform: translateX(3px) scale(1.02); }
        50% { transform: translateX(-2px) scale(0.99); }
        60% { transform: translateX(2px) scale(1.01); }
        70% { transform: translateX(-1px) scale(0.995); }
        80% { transform: translateX(1px) scale(1.005); }
        90% { transform: translateX(0) scale(1); }
    }

    .card-shake {
        animation: cardShake 0.6s ease-in-out;
    }

    /* Success Animation */
    @keyframes flyOff {
        0% {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
        50% {
            transform: scale(1.1) rotate(180deg);
            opacity: 0.8;
        }
        100% {
            transform: translateY(-1000px) scale(0.5) rotate(720deg);
            opacity: 0;
        }
    }

    .card-fly-off {
        animation: flyOff 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    /* Stagger delays for fly-off animation */
    .card-fly-off:nth-child(1) { animation-delay: 0s; }
    .card-fly-off:nth-child(2) { animation-delay: 0.1s; }
    .card-fly-off:nth-child(3) { animation-delay: 0.2s; }
    .card-fly-off:nth-child(4) { animation-delay: 0.3s; }
    
    /* Mobile-specific spacing optimizations */
    @media (max-width: 768px) {
        .container {
            margin: 0.5rem 0; /* Reduced from 1.5rem */
        }
        
        .container2 {
            margin-bottom: 0.5rem; /* Reduced from 1rem */
        }
        
        .card-list {
            margin: 1rem 1rem; /* Reduced from 2rem */
        }
        
        .result-list {
            margin: 1rem 1rem; /* Reduced from 2rem */
        }
        
        .win-message {
            margin: 1rem 1rem; /* Reduced from 2rem */
            font-size: 1.125rem; /* Slightly smaller */
        }
        
        .game-over-message {
            margin: 1rem 1rem; /* Reduced from 2rem */
            font-size: 1.125rem; /* Slightly smaller */
        }
        
        .share-button {
            margin-bottom: 0.5rem; /* Reduced from 1rem */
        }
        
        .main-container {
            padding-bottom: 3rem; /* Reduced from 8rem */
        }
        
        .title {
            margin-top: 0.5rem; /* Reduced from 1rem */
            margin-bottom: 0.5rem; /* Reduced from 1rem */
        }
        
        /* Reduce spacing for game controls */
        .submit-button, .button-secondary, .button-deselect {
            margin-bottom: 0.5rem; /* Reduced from 1rem */
        }
    }

    /*responsive sizing */
    @media (min-width: 769px){
        .card-list {
            padding: 1rem 8rem;
          }
    
        .card{
            font-size: 1.2rem;
        }
        
        .result-list {
          padding: 1rem 8rem;
        }
        
        .result-card {
          font-size: 1.125rem;
      }    
    }

    .result-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 2rem 1rem;
      justify-content: center;
      width: 100%;
    }

    .result-card{
      height: 5rem;
      width: 92%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Nanum Gothic Coding";
      font-weight: 400;
      font-size: 1rem;
      background-color: rgb(236, 237, 230);
      border-radius: 6px;
      border: none;
      outline: none;
      text-align: center;
    }

    .win-message{
      font-family: "Nanum Gothic Coding";
      font-weight: 700;
      font-size: 1.25rem;
      margin: 2rem 2rem;
      color: #b524b5;
      text-align: center;
      width: 92%;
    }

    .three-words {
      font-family: "Nanum Gothic Coding";
      font-weight: 700;
      font-size: 1.25rem;
      margin: 2rem 2rem;
      color: #131313;
      text-align: center;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      background: linear-gradient(135deg, rgb(113, 219, 214), rgb(90, 200, 190));
      padding: 2rem;
      border-radius: 12px;
      z-index: 1000;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    }

    @keyframes popIn {
      0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    }

    .game-over-message {
      font-family: "Nanum Gothic Coding";
      font-weight: 700;
      font-size: 1.25rem;
      margin: 2rem 2rem;
      color: red;
      text-align: center;
      width: 92%; 
    }

    .card.disabled {
      opacity: 0.5;
      pointer-events: none;
      filter: grayscale(1);
      transition: all 0.3s ease;
    }

    /* Loading Animation */
    @keyframes cardLoad {
      0% {
        transform: translateY(20px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .card-loading {
      animation: cardLoad 0.6s ease-out forwards;
    }

    /* Victory Celebration */
    @keyframes celebrate {
      0%, 100% { transform: scale(1) rotate(0deg); }
      25% { transform: scale(1.1) rotate(-5deg); }
      50% { transform: scale(1.2) rotate(0deg); }
      75% { transform: scale(1.1) rotate(5deg); }
    }

    .victory-celebration {
      animation: celebrate 2s ease-in-out infinite;
    }

    /* Confetti Particles */
    .confetti {
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: #FFD700;
      animation: confettiFall 3s linear infinite;
    }

    @keyframes confettiFall {
      0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
      }
    }

    /* Enhanced celebration particle animation */
    @keyframes celebrationFall {
      0% {
        transform: translateY(-50px) rotate(0deg) scale(0.5);
        opacity: 0;
      }
      10% {
        opacity: 1;
        transform: translateY(0px) rotate(36deg) scale(1);
      }
      90% {
        opacity: 1;
        transform: translateY(calc(100vh + 50px)) rotate(720deg) scale(0.8);
      }
      100% {
        opacity: 0;
        transform: translateY(calc(100vh + 100px)) rotate(720deg) scale(0.3);
      }
    }

    .confetti:nth-child(1) { left: 10%; background-color: #FF6B6B; animation-delay: 0s; }
    .confetti:nth-child(2) { left: 20%; background-color: #4ECDC4; animation-delay: 0.2s; }
    .confetti:nth-child(3) { left: 30%; background-color: #45B7D1; animation-delay: 0.4s; }
    .confetti:nth-child(4) { left: 40%; background-color: #96CEB4; animation-delay: 0.6s; }
    .confetti:nth-child(5) { left: 50%; background-color: #FFEAA7; animation-delay: 0.8s; }
    .confetti:nth-child(6) { left: 60%; background-color: #DDA0DD; animation-delay: 1s; }
    .confetti:nth-child(7) { left: 70%; background-color: #98D8C8; animation-delay: 1.2s; }
    .confetti:nth-child(8) { left: 80%; background-color: #F7DC6F; animation-delay: 1.4s; }
    .confetti:nth-child(9) { left: 90%; background-color: #BB8FCE; animation-delay: 1.6s; }

    /* Pulse effect for error feedback */
    @keyframes errorPulse {
      0% { background-color: #ff4757; transform: scale(1); }
      50% { background-color: #ff6b7a; transform: scale(1.05); }
      100% { background-color: #ff4757; transform: scale(1); }
    }

    .card-error {
      animation: errorPulse 0.6s ease-in-out;
    }

    /* Sparkle animation */
    @keyframes sparkle {
      0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
      }
      50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
      }
      100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
      }
    }