/* ОБЩИЕ СТИЛИ */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #2c2c2c;
}
body {
    font-family: 'Nunito', sans-serif;
    color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
button, input { 
    font-family: 'Nunito', sans-serif; 
}
h1, h2, h3 { 
    text-align: center; 
    color: #ffffff; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}
h3 { margin-top: 10px; margin-bottom: 10px; }

/* ИГРОВАЯ ЗОНА */
.game-area {
    width: 100%;
    max-width: 1400px;
    min-height: 700px;
    background-color: #333;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 15px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}
#shift-timer-display { 
    font-size: 3em; 
    font-weight: 700; 
    color: #ffc107; 
    text-align: center; 
}

/* ДИВАНЫ: УВЕЛИЧЕНЫ РАЗМЕРЫ И ОТСТУПЫ */
.sofa-area { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    gap: 60px; 
    width: 100%;
    padding: 20px 0;
}
.sofa-row { 
    display: flex; 
    justify-content: center; 
    gap: 100px; 
    width: 100%; 
}
.sofa {
    width: 330px;
    height: 170px;
    background-color: #4a4a4a;
    border: 2px solid #666;
    border-radius: 15px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transition: background-color 0.5s ease;
}
.sofa.occupied { 
    background-color: #495e4e; 
    border-color: #6a8b71; 
}

.guest-info { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.guest-info p { font-weight: 900; margin: 0; font-size: 1.1em; }
.guest-timer { font-size: 1em; font-weight: 700; color: #ffffff; }

.guest-name.poor { color: #9E9E9E; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
.guest-name.middle { color: #42A5F5; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
.guest-name.business { color: #AB47BC; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

.guest-stars { display: flex; gap: 2px; visibility: hidden; }
.star { width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.star-filled { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFD700" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>'); }
.star-empty { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="%23FFD700" stroke-width="2" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>'); }
@keyframes star-level-up {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.3); filter: drop-shadow(0 0 6px #FFD700); }
    100% { transform: scale(1.0); }
}
.guest-stars.level-up { animation: star-level-up 0.6s ease-in-out; }

.order-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 3px solid white; position: relative; overflow: hidden; box-shadow: 0 0 8px rgba(0,0,0,0.5); cursor: pointer; }
.order-timer-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); transition: height 0.1s linear; }

.drink-red { background-color: #e53935; }
.drink-blue { background-color: #03c4dd; }
.drink-green { background-color: #43a047; }
.drink-yellow { background-color: #cea800; }
.social-heart { background-color: #fc7caf; }
.social-chat { background-color: #0277bd; }
.social-fun { background-color: #fdb377; }
.request-retain { background-color: #B0BEC5; color: #263238; }

.game-controls { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; background-color: #212529; padding: 15px; border-radius: 10px; box-sizing: border-box; }
.horizontal-button-groups { display: flex; justify-content: center; align-items: flex-start; gap: 120px; flex-wrap: wrap; }

.button-group { 
    margin-top: 15px;
    text-align: center; /* ИСПРАВЛЕНИЕ: Центрирует все содержимое группы */
}
.button-group h3 { font-size: 1em; margin-bottom: 20px; }
.score { text-align: center; order: 100; margin-top: 10px; }
.score h3 { font-size: 1.1em; margin: 10px 0; }

#start-button { 
    order: 99; 
    padding: 15px 30px; 
    font-size: 1.5em; 
    font-weight: 900;
    cursor: pointer; 
    border-radius: 12px; 
    border: none; 
    background-color: #4CAF50; 
    color: white; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
    margin-top: 20px;
}
#start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
#start-button:disabled { 
    background-color: #666; 
    cursor: not-allowed; 
    transform: translateY(0);
    box-shadow: none;
}

#retain-guest-btn { 
    width: 80px;
    height: 80px;
    font-size: 40px;
    border-radius: 50%;
    padding: 0;
    font-weight: 900; 
    border: 2px solid #6c757d; 
    background-color: #343a40; 
    color: #6c757d; 
    cursor: not-allowed; 
    transition: all 0.3s ease; 
    position: relative; 
    overflow: hidden; 
}
#retain-guest-btn:not(:disabled) { border-color: #B0BEC5; color: #B0BEC5; cursor: pointer; }
@keyframes button-glow {
    0%, 100% { box-shadow: 0 0 5px #B0BEC5; }
    50% { box-shadow: 0 0 20px #B0BEC5; }
}
#retain-guest-btn.is-active { animation: pulse-warning 1.5s infinite, button-glow 1.5s infinite; border-color: #CFD8DC; color: #CFD8DC; }
#retain-guest-btn:not(:disabled):hover { background-color: #B0BEC5; color: #263238; transform: scale(1.1); }
#retain-guest-btn.on-cooldown { cursor: not-allowed; border-color: #666; color: #666; background-color: #444 !important; }

#retain-guest-btn .cooldown-overlay, #retain-guest-btn .prep-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#retain-guest-btn .cooldown-overlay { background-color: rgba(0, 0, 0, 0.6); transform: translateY(100%); transition: transform 0.2s ease-out; }
#retain-guest-btn.on-cooldown .cooldown-overlay { transform: translateY(0%); }
#retain-guest-btn .cooldown-timer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.5em; font-weight: 900; display: none; }
#retain-guest-btn.on-cooldown .cooldown-timer { display: block; }

.order-btn, .social-btn { width: 70px; height: 70px; font-size: 36px; border: 2px solid #ccc; cursor: pointer; transition: filter 0.2s, transform 0.2s; position: relative; overflow: hidden; }
.order-btn { border-radius: 10px; }
.social-btn { border-radius: 50%; }

.order-btn[data-order-type="drink-red"] { background-color: #e53935; }
.order-btn[data-order-type="drink-blue"] { background-color: #03c4dd; }
.order-btn[data-order-type="drink-green"] { background-color: #43a047; }
.order-btn[data-order-type="drink-yellow"] { background-color: #cea800; }
.social-btn[data-social-type="heart"] { background-color: #fc7caf; }
.social-btn[data-social-type="chat"] { background-color: #0277bd; }
.social-btn[data-social-type="fun"] { background-color: #fdb377; }

.order-btn:hover:not(:disabled), .social-btn:hover:not(:disabled) { transform: scale(1.1); filter: brightness(1.2); }
.order-btn:disabled, .social-btn:disabled { cursor: not-allowed; background-color: #444 !important; filter: grayscale(80%); }

@keyframes pulse-warning {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.order-btn.needs-attention, .social-btn.needs-attention { animation: pulse-warning 1s infinite ease-in-out; }

.prep-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: rgba(255, 255, 255, 0.4); }
#retain-guest-btn.is-preparing .prep-overlay, .order-btn.is-preparing .prep-overlay { width: 100%; transition: width linear; }

.panel-columns { display: flex; justify-content: space-around; gap: 40px; margin-top: 70px;}
.column { flex: 1; min-width: 350px; }
.column h3 { font-size: 1.1em; }

.settings-grid { display: flex; flex-direction: column; gap: 10px; }
.setting-item { display: flex; justify-content: space-between; align-items: center; }
.setting-item label, .setting-item-class label, .setting-item-order label { font-size: 14px; }
.setting-item input, .setting-item-class input, .setting-item-order input { width: 60px; padding: 5px; background-color: #555; border: 1px solid #777; color: white; border-radius: 5px; text-align: center; }

.guest-class-settings { display: flex; flex-direction: column; gap: 10px; }
.setting-item-class { background-color: #2c2c2c; padding: 10px; border-radius: 5px; display: flex; flex-direction: column; gap: 8px; }
.setting-item-class label { display: flex; justify-content: space-between; align-items: center; }

.settings-order-details { display: flex; flex-direction: column; gap: 10px; }
.setting-item-order { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.setting-item-order span { font-size: 1.5em; }

.log-container { margin-top: 30px; width: 100%; max-width: 1400px; box-sizing: border-box; background-color: #212529; border-radius: 10px; padding: 15px; }
#log-output { height: 200px; overflow-y: auto; background-color: #343a40; border-radius: 5px; padding: 10px; display: flex; flex-direction: column-reverse; }
#log-output p { margin: 2px 0; font-family: monospace; font-size: 14px; border-bottom: 1px solid #495057; padding-bottom: 4px; }
#log-output .log-summary { color: #ffc107; font-weight: bold; }