diff --git a/style.css b/style.css index 9090ebc..fad4bd3 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,3 @@ -/* Общие стили для всего приложения */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; @@ -7,16 +6,18 @@ body { display: flex; flex-direction: column; justify-content: space-between; - align-items: center; height: 100vh; overflow: hidden; } -/* Стили для руки */ +/* Стили для руки игрока и оппонента */ .hand { display: flex; justify-content: center; - margin: 10px 0; + align-items: center; + height: 15%; + padding: 5px; + background-color: #ddd; } .opponent-hand { @@ -27,9 +28,10 @@ body { align-self: flex-end; } +/* Карта */ .card { - width: 80px; - height: 120px; + width: 60px; + height: 90px; background-color: white; border: 2px solid black; border-radius: 10px; @@ -41,6 +43,7 @@ body { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); cursor: pointer; position: relative; + z-index: 5; } .card.dragging { @@ -48,37 +51,32 @@ body { z-index: 10; } -.card:hover { - transform: translateY(-3px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; -} - -/* Стили для рядов */ +/* Слот на игровом поле */ .row { display: flex; justify-content: center; margin-bottom: 10px; - border: 2px dashed #ccc; /* Разметка поля */ - height: 120px; /* Высота ряда, равная высоте карт */ + border: 2px dashed #ccc; + height: 20%; + width: 100%; } -/* Стили для полоски между картами оппонента и игрока */ +/* Полоска между полем */ .divider { width: 100%; border-top: 2px solid black; - margin: 10px 0; padding: 5px 0; font-weight: bold; text-transform: uppercase; font-size: 12px; + text-align: center; } -/* Адаптация для мобильных устройств */ +/* Мобильные устройства */ @media (max-width: 480px) { .card { - width: 70px; - height: 100px; + width: 50px; + height: 75px; font-size: 12px; }