#puzzle-app-cupscales-2{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
#puzzle-app-cupscales-2 *,#puzzle-app-cupscales-2 *::before,#puzzle-app-cupscales-2 *::after{box-sizing:border-box}
#puzzle-app-cupscales-2{
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #fff; /* Белый фон страницы */
    }
    #puzzle-app-cupscales-2 .container{
      max-width: 900px;
      margin: 0px auto;
      padding: 10px;
      background: #fff; /* Белый фон контейнера */
      border-radius: 8px;
    }
    #puzzle-app-cupscales-2 h1{
      text-align: center;
      color: #333;
      margin-top: 10px; /* Уменьшен отступ сверху */
    }
    #puzzle-app-cupscales-2 .game-area{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #puzzle-app-cupscales-2 .coins{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 20px;
    }
    #puzzle-app-cupscales-2 .coin{
      width: 50px;
      height: 50px;
      background-color: gold;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      cursor: grab;
      user-select: none;
      position: absolute; /* Для перемещения за курсором */
      z-index: 10;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
    }
    #puzzle-app-cupscales-2 .scales{
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
    }

    
    /* Создаем эффект рамки только снизу и по бокам на 25% высоты */
    #puzzle-app-cupscales-2 .scale-left,
#puzzle-app-cupscales-2 .scale-right{
      width: 450px;
      min-height: 150px;
      height: auto; /* Автоматическая высота */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f9f9f9;
      padding: 5px;
      min-height: 100px;
      position: relative;
      border: none; /* Убираем стандартную рамку */
      transition: transform 0.5s ease-in-out; /* для движения чащ */
    }
    
    
    /* Создаем эффект рамки только снизу и по бокам на 25% высоты */
    #puzzle-app-cupscales-2 .scale-left::before,
#puzzle-app-cupscales-2 .scale-right::before{
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 37.5px; /* 25% от 150px */
      border: 2px solid #333;
      border-top: none;
      border-radius: 0 0 8px 8px;
    }
    
    /* Добавляем боковые линии - теперь они заканчиваются у скругления */
    #puzzle-app-cupscales-2 .scale-left::after,
#puzzle-app-cupscales-2 .scale-right::after{
      content: '';
      position: absolute;
      bottom: 37.5px; /* Начинаем от верха скругления */
      top: calc(100% - 37.5px); /* Заканчиваем на 25% от верха */
      width: 2px;
      background: #333;
    }
    
    #puzzle-app-cupscales-2 .scale-left::after{
      left: 0;
      right: auto;
    }
    
    #puzzle-app-cupscales-2 .scale-right::after{
      left: auto;
      right: 0;
    }
    
    #puzzle-app-cupscales-2 .heavy{
        transform: translateY(10px); /* Опускаем вниз */
    }

    #puzzle-app-cupscales-2 .light{
        transform: translateY(-10px); /* Поднимаем вверх */
    }
    
#puzzle-app-cupscales-2 .scale-left-coins,
#puzzle-app-cupscales-2 .scale-right-coins{
  display: flex;
  flex-direction: row;           /* Элементы в строку слева-направо */
  flex-wrap: wrap-reverse;       /* Новые строки появляются сверху */
  align-content: flex-end;       /* Все строки прижимаются к низу */
  justify-content: center;       /* Элементы в строке выравниваются по левому краю */
  gap: 5px;
  width: 100%;
  min-height: 100px;
  height: auto;                 /* Автоматическая высота */
  box-sizing: border-box;
  padding-top: 10px;           /* Отступ сверху для новых строк */
  padding-bottom: 0px;        /* Отступ снизу */
  align-items: flex-end;       /* Элементы в строке прижимаются к низу */
}

    #puzzle-app-cupscales-2 #weigh-button,
#puzzle-app-cupscales-2 #clear-scales{
      padding: 10px 20px;
      font-size: 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #puzzle-app-cupscales-2 #weigh-button:hover,
#puzzle-app-cupscales-2 #clear-scales:hove{
      background-color: #0056b3;
    }
    
    #puzzle-app-cupscales-2 #result{
      margin-top: 20px;
      font-size: 18px;
      text-align: center;
    }
    #puzzle-app-cupscales-2 .input-container{
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    #puzzle-app-cupscales-2 .input-container input{
      padding: 5px;
      font-size: 16px;
      width: 100px;
    }
    #puzzle-app-cupscales-2 .input-container button{
      padding: 5px 10px;
      font-size: 16px;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #puzzle-app-cupscales-2 .input-container button:hover{
      background-color: #218838;
    }
    #puzzle-app-cupscales-2 #check-answer{
      padding: 10px 20px;
      font-size: 16px;
      background-color: #6f42c1; /* Фиолетовый цвет */
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #puzzle-app-cupscales-2 #check-answer:disabled{
      background-color: #ccc; /* Серый цвет для неактивной кнопки */
      cursor: not-allowed;
    }
    #puzzle-app-cupscales-2 #user-answer{
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 80px;
}
    #puzzle-app-cupscales-2 #weighing-results-container{
      margin-top: 20px;
      margin-bottom: 20px;
    }
    #puzzle-app-cupscales-2 #weighing-results{
      font-size: 16px; /* Увеличен размер текста результатов */
      line-height: 1.5;
    }

    #puzzle-app-cupscales-2 .toggle-btn{
      width: 32px;
      height: 32px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0;
    }
    
    #puzzle-app-cupscales-2 .arrow-symbol{
      font-size: 24px;
      transition: transform 0.3s ease;
        /* Повернуть на 135° по часовой стрелке → изначально */
      transform: rotate(135deg);
    }

#puzzle-app-cupscales-2 #reset-weighings{
    padding: 5px 10px;
    font-size: 16px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
@media (max-width: 768px){#puzzle-app-cupscales-2 .container{
    margin: 5px;
    padding: 10px;
  }

  #puzzle-app-cupscales-2 h1{
    font-size: 20px;
  }

  #puzzle-app-cupscales-2 .scales{
    align-items: center;
    gap: 10px;
  }

  #puzzle-app-cupscales-2 .scale-left,
#puzzle-app-cupscales-2 .scale-right{
    width: 90vw; /* Полная ширина экрана */
    min-height: 120px;
    height: auto; /* Автоматическая высота */
  }

  #puzzle-app-cupscales-2 .coins{
    flex-wrap: wrap;
    justify-content: center;
  }

  #puzzle-app-cupscales-2 .coin{
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  #puzzle-app-cupscales-2 #coin-count,
#puzzle-app-cupscales-2 #user-answer{
    width: 80px;
  }}
/* === Для планшетов === */
@media (max-width: 1024px){#puzzle-app-cupscales-2 .scale-left,
#puzzle-app-cupscales-2 .scale-right{
    width: 350px;
    min-height: 120px;
    height: auto; /* Автоматическая высота */
  }}

/* === Для маленьких планшетов и больших смартфонов === */
@media (max-width: 768px){#puzzle-app-cupscales-2 .scale-left,
#puzzle-app-cupscales-2 .scale-right{
    width: 45vw; /* Ширина 45% от экрана */
    min-height: 100px;
    height: auto; /* Автоматическая высота */
  }

  #puzzle-app-cupscales-2 .scale-left::before,
#puzzle-app-cupscales-2 .scale-right::before{
    height: 25px; /* Уменьшаем нижнюю полосу */
  }

  #puzzle-app-cupscales-2 .scale-left::after,
#puzzle-app-cupscales-2 .scale-right::after{
    bottom: 25px;
  }}

/* === Для вертикальной ориентации телефонов === */
@media (max-width: 480px){#puzzle-app-cupscales-2 .scale-left,
#puzzle-app-cupscales-2 .scale-right{
    width: 40vw;
    min-height: 80px;
    height: auto; /* Автоматическая высота */
  }

  #puzzle-app-cupscales-2 .scale-left::before,
#puzzle-app-cupscales-2 .scale-right::before{
    height: 20px;
  }

  #puzzle-app-cupscales-2 .scale-left::after,
#puzzle-app-cupscales-2 .scale-right::after{
    bottom: 20px;
  }}

    @media (max-width: 375px){#puzzle-app-cupscales-2 #weigh-button,
#puzzle-app-cupscales-2 #clear-scales,
#puzzle-app-cupscales-2 #check-answer{
            padding: 8px 10px;
            font-size: 14px;
        }
        #puzzle-app-cupscales-2 #user-answer{
            padding: 5px;
            font-size: 14px;
            width: 40px;
        }}