/* Mobile Responsive Styles */
@media (max-width: 500px) {
    .container {
      margin-top: 80px;
      overflow-x: hidden; /* Prevent horizontal scroll */
    }
  
    /* Header / Scoreboard Fixes */
    .header {
        top: 10px;
    }
    .element-container {
      width: 92%; /* Fluid width */
      max-width: 450px;
      height: 130px;
      margin: 0 auto;
      gap: 5px;
    }
  
    .score {
      width: 50%;
      justify-content: space-between;
    }
  
    .Nscore {
      height: 100px;
      width: 48%; /* Fluid width for score boxes */
      padding: 5px 0;
    }

    .text {
        width: 35%;
        margin-left: 5px;
    }
  
    .rock, .paper, .scissors {
      font-size: 18px; /* Slightly smaller text */
    }

    .score-text {
        font-size: 12px;
    }

    .score-text span {
        font-size: 10px;
        letter-spacing: 1px;
    }
  
    #cscore, #mscore {
      font-size: 36px;
    }
  
    .button-container {
      bottom: 25px;
      right: 20px;
      gap: 12px;
      width: calc(100% - 40px);
      justify-content: flex-end;
    }

    button {
      height: 44px;
      width: 105px;
      font-size: 14px;
      border-radius: 10px;
      letter-spacing: 1.5px;
    }

    /* Game Area / Triangle Fixes */
    /* Game Area / Triangle Fixes */
    .footer {
      top: 280px;
      width: 260px; /* Lock width to match content (100+60+100) */
      left: 50%;
      transform: translateX(-50%) scale(0.9); /* Center horizontally and scale */
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .outer-circle {
        height: 100px;
        width: 100px;
        position: relative; /* Fix z-index stacking */
    }
    .shape {
        height: 75px;
        width: 75px;
    }
    .shape img {
        width: 40px; /* Control icon size */
    }

    .upper {
        gap: 60px;
        justify-content: center;
        width: 100%;
        display: flex;
    }
    .lower {
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }
    
    /* Lines - Absolute in .footer (260px wide) */
    
    /* Line 1: Top Horizontal */
    .line1 {
        width: 160px;
        top: 45px;
        left: 50px;
        border-bottom: 10px solid rgba(0, 0, 0, 0.6);
        transform: rotate(0deg);
        transform-origin: left;
    }

    /* Line 2: Right Diagonal */
    .line2 {
        width: 153px;
        top: 45px;
        left: auto;
        right: 50px;
        border-bottom: 10px solid rgba(0, 0, 0, 0.6);
        transform: rotate(-58deg);
        transform-origin: right;
    }

    /* Line 3: Left Diagonal */
    .line3 {
        width: 153px;
        top: 45px;
        left: 50px;
        border-bottom: 10px solid rgba(0, 0, 0, 0.6);
        transform: rotate(58deg);
        transform-origin: left;
    }

    /* Result Screen / Winner Fixes */
    .footer2 {
      top: 240px; /* Move up significantly to avoid bottom buttons */
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      column-gap: 50px; /* Increase gap between hands */
      row-gap: 20px;
    }

    .left, .right {
        transform: scale(0.7); /* Smaller hands */
        margin: 0;
    }

    .answertext {
      order: 3;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 20px;
      transform: scale(0.9);
      display: flex; /* Ensure flex to center button */
      flex-direction: column;
      align-items: center;
    }
    
    .answertext h1 {
        font-size: 40px;
    }

    /* Rules Modal */
    .rules {
      width: 85%;
      right: 7.5%; /* Center it */
      bottom: 80px;
    }

    /* Win Celebration Page */
    .container2 .first img {
        width: 80%;
        max-width: 300px;
    }
    .container2 .cup {
        max-width: 100px;
    }
    .container2 .second img, 
    .container2 .third img {
        width: 70%;
    }
}