593 lines
13 KiB
CSS
593 lines
13 KiB
CSS
:root {
|
||
/* Обновленная цветовая палитра - более яркие и контрастные цвета */
|
||
--casino-green: #2a9d8f;
|
||
--casino-dark-green: #226f66;
|
||
--felt-green: #40a886;
|
||
--wood-brown: #b76e40;
|
||
--gold: #ffbe0b;
|
||
--light-gold: #ffe066;
|
||
--dark-gold: #e29400;
|
||
--red: #ff5e5b;
|
||
--black: #2b2b2b;
|
||
--white: #ffffff;
|
||
--gray: #7d8597;
|
||
--light-gray: #f1f3f5;
|
||
--blue: #3a86ff;
|
||
/* Улучшенные тени и эффекты - без затемнений */
|
||
--card-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
|
||
--button-shadow: 0 6px 0 var(--dark-gold);
|
||
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
--text-shadow: none;
|
||
}
|
||
|
||
/* Основной фон казино - убрано затемнение */
|
||
.casino-background {
|
||
background-image: url('_content/БлэкДжек/images/casino-bg.jpg');
|
||
background-size: cover;
|
||
background-position: center;
|
||
min-height: 100vh;
|
||
padding: 2rem;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: 'Poppins', 'Montserrat', sans-serif;
|
||
color: var(--white);
|
||
}
|
||
|
||
/* Основной контейнер игры */
|
||
.blackjack-container {
|
||
width: 100%;
|
||
max-width: 1000px;
|
||
background: linear-gradient(145deg, var(--casino-green), var(--casino-dark-green));
|
||
border-radius: 24px;
|
||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
|
||
padding: 2.5rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 8px solid var(--wood-brown);
|
||
}
|
||
|
||
/* Декоративный элемент с фишками */
|
||
.chip-stack {
|
||
background-image: url('_content/БлэкДжек/images/chips-stack.png');
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
width: 90px;
|
||
height: 90px;
|
||
position: absolute;
|
||
right: 2rem;
|
||
top: 2rem;
|
||
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
|
||
}
|
||
|
||
/* Заголовок игры */
|
||
.game-header {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.game-title {
|
||
color: var(--light-gold);
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
font-size: 3.2rem;
|
||
margin: 0;
|
||
letter-spacing: 4px;
|
||
font-weight: 800;
|
||
position: relative;
|
||
}
|
||
|
||
.game-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 70%;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||
}
|
||
|
||
/* Область сообщений - улучшена читаемость */
|
||
.message-box {
|
||
background-color: #ffffff;
|
||
border-left: 6px solid var(--gold);
|
||
padding: 1.2rem;
|
||
margin: 1.2rem auto 2.2rem;
|
||
color: var(--black);
|
||
border-radius: 10px;
|
||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
|
||
text-align: center;
|
||
max-width: 85%;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.message-win {
|
||
border-left: 6px solid #4caf50;
|
||
background-color: #e8f5e9;
|
||
color: #2e7d32;
|
||
}
|
||
|
||
.message-lose {
|
||
border-left: 6px solid var(--red);
|
||
background-color: #ffebee;
|
||
color: #c62828;
|
||
}
|
||
|
||
.message-info {
|
||
border-left: 6px solid var(--blue);
|
||
background-color: #e1f5fe;
|
||
color: #0277bd;
|
||
}
|
||
|
||
.message-content {
|
||
font-size: 1.3rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* Область игры */
|
||
.game-area {
|
||
background-color: var(--felt-green);
|
||
border-radius: 20px;
|
||
padding: 2.2rem;
|
||
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
border: 4px solid var(--casino-dark-green);
|
||
}
|
||
|
||
/* Стили секций игроков */
|
||
.player-section {
|
||
margin-bottom: 2.4rem;
|
||
position: relative;
|
||
}
|
||
|
||
.player-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.2rem;
|
||
margin-bottom: 1.2rem;
|
||
}
|
||
|
||
.player-avatar {
|
||
width: 55px;
|
||
height: 55px;
|
||
border-radius: 50%;
|
||
background-position: center;
|
||
background-size: cover;
|
||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||
border: 3px solid var(--gold);
|
||
}
|
||
|
||
.dealer-avatar {
|
||
background-image: url('_content/БлэкДжек/images/dealer-avatar.png');
|
||
}
|
||
|
||
.player-avatar-user {
|
||
background-image: url('_content/БлэкДжек/images/player-avatar.png');
|
||
}
|
||
|
||
.player-title {
|
||
color: var(--white);
|
||
font-size: 1.7rem;
|
||
margin: 0;
|
||
font-weight: 600;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.score-badge {
|
||
background: #ffffff;
|
||
padding: 0.3rem 0.8rem;
|
||
border-radius: 50px;
|
||
font-size: 1.2rem;
|
||
margin-left: 0.8rem;
|
||
color: var(--black);
|
||
border: 2px solid var(--dark-gold);
|
||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.table-felt {
|
||
background-color: var(--felt-green);
|
||
padding: 1.2rem;
|
||
border-radius: 16px;
|
||
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* Карты в руке */
|
||
.hand {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
min-height: 170px;
|
||
gap: 0.8rem;
|
||
padding: 0.8rem;
|
||
position: relative;
|
||
justify-content: center;
|
||
}
|
||
|
||
.dealer-hand::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 75%;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||
}
|
||
|
||
/* Разделитель между дилером и игроком */
|
||
.table-divider {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
margin: 2rem 0;
|
||
position: relative;
|
||
}
|
||
|
||
.table-divider::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 5%;
|
||
right: 5%;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
|
||
}
|
||
|
||
/* Игральные фишки */
|
||
.chip {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||
position: relative;
|
||
z-index: 1;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.chip:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.red-chip {
|
||
background: radial-gradient(circle at 30% 30%, #ff8a8a 0%, var(--red) 60%);
|
||
border: 3px dashed #ffc7c7;
|
||
}
|
||
|
||
.blue-chip {
|
||
background: radial-gradient(circle at 30% 30%, #94d0ff 0%, var(--blue) 60%);
|
||
border: 3px dashed #c5e5ff;
|
||
}
|
||
|
||
.green-chip {
|
||
background: radial-gradient(circle at 30% 30%, #89e89c 0%, #3cac4c 60%);
|
||
border: 3px dashed #d2f9db;
|
||
}
|
||
|
||
.black-chip {
|
||
background: radial-gradient(circle at 30% 30%, #a6aaaf 0%, var(--black) 60%);
|
||
border: 3px dashed #e2e6eb;
|
||
}
|
||
|
||
/* Стили для контейнера карты */
|
||
.card-container {
|
||
position: relative;
|
||
transform-style: preserve-3d;
|
||
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
margin: 0.3rem;
|
||
}
|
||
|
||
.card-container.card-hidden {
|
||
transform: rotateY(0deg);
|
||
}
|
||
|
||
/* Игральная карта */
|
||
.playing-card {
|
||
width: 110px;
|
||
height: 154px;
|
||
background-color: var(--white);
|
||
border-radius: 10px;
|
||
box-shadow: var(--card-shadow);
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transform-style: preserve-3d;
|
||
backface-visibility: hidden;
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.card-container:hover .playing-card {
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.card-back {
|
||
background-color: #3f51b5;
|
||
transform: rotateY(0deg);
|
||
position: relative;
|
||
background: linear-gradient(145deg, #5c6bc0, #3949ab);
|
||
}
|
||
|
||
.card-back-design {
|
||
width: 85%;
|
||
height: 85%;
|
||
background-image: url('_content/БлэкДжек/images/card-back.png');
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.card-red {
|
||
color: #e53935;
|
||
}
|
||
|
||
.card-black {
|
||
color: #212121;
|
||
}
|
||
|
||
/* Уголки карты */
|
||
.card-corner {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
line-height: 1;
|
||
}
|
||
|
||
.top-left {
|
||
top: 8px;
|
||
left: 8px;
|
||
}
|
||
|
||
.bottom-right {
|
||
bottom: 8px;
|
||
right: 8px;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.card-rank {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.card-suit {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.card-center-suit {
|
||
font-size: 3.2rem;
|
||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
|
||
}
|
||
|
||
/* Кнопки действий */
|
||
.action-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
margin-top: 2.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 3D кнопки */
|
||
.btn-3d {
|
||
position: relative;
|
||
padding: 14px 28px;
|
||
background: linear-gradient(to bottom, var(--gold), var(--dark-gold));
|
||
color: var(--black);
|
||
border: none;
|
||
border-radius: 50px;
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
box-shadow: var(--button-shadow), 0 10px 20px rgba(0, 0, 0, 0.2);
|
||
transition: all 0.25s;
|
||
cursor: pointer;
|
||
outline: none;
|
||
min-width: 160px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.btn-3d:hover {
|
||
background: linear-gradient(to bottom, var(--light-gold), var(--gold));
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 9px 0 var(--dark-gold), 0 14px 25px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-3d:active {
|
||
transform: translateY(3px);
|
||
box-shadow: 0 3px 0 var(--dark-gold), 0 5px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.btn-3d:disabled {
|
||
background: linear-gradient(to bottom, var(--gray), #939cad);
|
||
color: var(--light-gray);
|
||
cursor: not-allowed;
|
||
box-shadow: 0 6px 0 #636b7c, 0 10px 20px rgba(0, 0, 0, 0.1);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.btn-hit {
|
||
background: linear-gradient(to bottom, #76cf79, #48a04c);
|
||
box-shadow: 0 6px 0 #3e8942, 0 10px 20px rgba(0, 0, 0, 0.2);
|
||
color: white;
|
||
}
|
||
|
||
.btn-hit:hover {
|
||
background: linear-gradient(to bottom, #91d994, #53b557);
|
||
box-shadow: 0 9px 0 #3e8942, 0 14px 25px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-hit:active {
|
||
box-shadow: 0 3px 0 #3e8942, 0 5px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.btn-stand {
|
||
background: linear-gradient(to bottom, #ff7875, #d63d38);
|
||
box-shadow: 0 6px 0 #c62828, 0 10px 20px rgba(0, 0, 0, 0.2);
|
||
color: white;
|
||
}
|
||
|
||
.btn-stand:hover {
|
||
background: linear-gradient(to bottom, #ff9793, #e34744);
|
||
box-shadow: 0 9px 0 #c62828, 0 14px 25px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-stand:active {
|
||
box-shadow: 0 3px 0 #c62828, 0 5px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.btn-new-game {
|
||
background: linear-gradient(to bottom, #7986cb, #495cc9);
|
||
color: var(--white);
|
||
box-shadow: 0 6px 0 #3949ab, 0 10px 20px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-new-game:hover {
|
||
background: linear-gradient(to bottom, #9aa5d6, #5969d2);
|
||
box-shadow: 0 9px 0 #3949ab, 0 14px 25px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-new-game:active {
|
||
box-shadow: 0 3px 0 #3949ab, 0 5px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.btn-icon {
|
||
display: inline-block;
|
||
width: 24px;
|
||
height: 24px;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
|
||
}
|
||
|
||
.hit-icon {
|
||
background-image: url('_content/БлэкДжек/images/hit-icon.svg');
|
||
}
|
||
|
||
.stand-icon {
|
||
background-image: url('_content/БлэкДжек/images/stand-icon.svg');
|
||
}
|
||
|
||
.new-game-icon {
|
||
background-image: url('_content/БлэкДжек/images/new-game-icon.svg');
|
||
}
|
||
|
||
/* Начальный экран */
|
||
.start-screen {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 4rem 1rem;
|
||
}
|
||
|
||
.game-logo {
|
||
width: 350px;
|
||
height: 230px;
|
||
background-image: url('_content/БлэкДжек/images/blackjack-logo.png');
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
margin-bottom: 4rem;
|
||
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
|
||
transition: transform 0.5s ease;
|
||
}
|
||
|
||
.game-logo:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.btn-start {
|
||
font-size: 1.5rem;
|
||
padding: 18px 45px;
|
||
min-width: 220px;
|
||
box-shadow: 0 8px 0 var(--dark-gold), 0 15px 25px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-start:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 0 var(--dark-gold), 0 20px 35px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* Адаптивные стили */
|
||
@media (max-width: 768px) {
|
||
.blackjack-container {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.game-title {
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
.playing-card {
|
||
width: 90px;
|
||
height: 126px;
|
||
}
|
||
|
||
.card-rank {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.card-center-suit {
|
||
font-size: 2.6rem;
|
||
}
|
||
|
||
.action-buttons {
|
||
gap: 1.2rem;
|
||
}
|
||
|
||
.btn-3d {
|
||
padding: 12px 20px;
|
||
min-width: 140px;
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.playing-card {
|
||
width: 70px;
|
||
height: 98px;
|
||
}
|
||
|
||
.card-rank {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.card-suit {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.card-center-suit {
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
.action-buttons {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.btn-3d {
|
||
width: 100%;
|
||
max-width: 220px;
|
||
}
|
||
|
||
.game-area {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.message-content {
|
||
font-size: 1.1rem;
|
||
}
|
||
}
|