body {
    background-color: #0f0f13; color: #fff; font-family: sans-serif;
    margin: 0; padding: 0; text-align: center; overflow-x: hidden;
    /* Делаем body гибким на всю высоту экрана */
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}

.header { display: flex; justify-content: space-between; padding: 15px; align-items: center; position: relative; z-index: 20; }
.btn-header, .btn-hall {
    background: rgba(255, 204, 0, 0.1); border: 1px solid #ffcc00; color: #ffcc00;
    padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: bold;
}
.btn-hall { background: rgba(0, 255, 204, 0.1); border-color: #00ffcc; color: #00ffcc; }

/* НОВЫЙ КЛАСС: Центрует содержимое по вертикали */
.content-wrapper {
    flex-grow: 1; /* Занимает всё оставшееся место под хедером */
    display: flex; flex-direction: column; justify-content: center; /* Выравнивание по центру */
    padding-bottom: 20px; /* Легкий отступ снизу для баланса */
}

/* Убрали margin-top, теперь flexbox сам всё выравнивает */
.avatar-group { position: relative; display: inline-block; z-index: 5; }

#kingAvatar {
    width: 150px; height: 150px; border-radius: 50%; border: 3px solid #00ffcc;
    object-fit: cover; box-shadow: 0 0 30px rgba(0, 255, 204, 0.3); position: relative; z-index: 2;
    display: block; margin: 0 auto;
}

.crown { font-size: 50px; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); z-index: 3; }
#kingName { font-size: 24px; font-weight: bold; margin-top: 15px; color: #00ffcc; }
#kingMessage { font-style: italic; color: #aaa; margin-top: 5px; padding: 0 20px; }
#timerDisplay { font-size: 40px; font-weight: bold; color: #00ffcc; margin: 20px 0; font-variant-numeric: tabular-nums; position: relative; z-index: 5; }

#shieldStatus {
    background: rgba(255, 204, 0, 0.1); color: #ffcc00; font-weight: bold; padding: 5px 15px;
    border-radius: 20px; border: 1px solid #ffcc00; display: none; justify-content: center;
    align-items: center; gap: 5px; width: fit-content; margin: 15px auto 0;
}

.capture-group { background: #1a1a20; border: 1px solid #333; border-radius: 15px; padding: 20px; margin: 0 20px; transition: 0.3s; position: relative; z-index: 20; }
input[type="text"] { width: 100%; background: #0f0f13; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; box-sizing: border-box; margin-bottom: 15px; }
.slider-group { text-align: left; margin-bottom: 15px; }
.slider-group span { color: #888; font-size: 12px; }
.slider-group span.val { float: right; color: #ffcc00; font-weight: bold; }
input[type="range"] { width: 100%; accent-color: #ffcc00; }
.btn-main { width: 100%; background: #00ffcc; color: #000; padding: 15px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; }
.btn-main:disabled { background: #444; color: #888; cursor: not-allowed; }

.btn-siege {
    background: linear-gradient(45deg, #ff0044, #aa0000); color: white; border: 2px solid #ff0044;
    box-shadow: 0 0 15px rgba(255, 0, 68, 0.5); display: none; margin: 10px 20px;
    width: calc(100% - 40px); animation: pulseSiege 2s infinite; position: relative; z-index: 20;
}
@keyframes pulseSiege { 0% { transform: scale(1); box-shadow: 0 0 10px rgba(255,0,68,0.5); } 50% { transform: scale(1.02); box-shadow: 0 0 25px rgba(255,0,68,0.8); } 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255,0,68,0.5); } }

/* --- БЕЙДЖИК ЩИТА --- */
.shield-badge {
    position: absolute; 
    bottom: 5px; right: -15px;
    font-size: 65px; 
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    animation: badgePulse 3s infinite ease-in-out; 
}

@keyframes badgePulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.3)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.6)); } 
    100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.3)); }
}

@keyframes hitShake {
    0% { transform: translate(1px, 1px) rotate(0deg); } 20% { transform: translate(-3px, 0px) rotate(10deg); }
    40% { transform: translate(3px, 2px) rotate(-10deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); }
    80% { transform: translate(-1px, -1px) rotate(5deg); } 100% { transform: translate(0px, 0px) rotate(0deg); }
}
.anim-hit { animation: hitShake 0.4s !important; filter: drop-shadow(0 0 20px red) !important; }

@keyframes shatter {
    0% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 15px red); }
    20% { transform: scale(1.4) rotate(-15deg); opacity: 1; filter: drop-shadow(0 0 25px red); }
    100% { transform: scale(0) rotate(45deg); opacity: 0; filter: drop-shadow(0 0 0 transparent); }
}
.anim-shatter { animation: shatter 0.7s forwards !important; }

.hidden { display: none !important; }

/* Модалки */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 100; }
.modal-content { background: #1a1a20; border: 1px solid #333; border-radius: 15px; padding: 20px; margin: 20% 20px; text-align: center; position: relative; max-height: 70vh; overflow-y: auto; }
.close-btn { position: absolute; top: 10px; right: 15px; color: #aaa; font-size: 24px; cursor: pointer; border: none; background: transparent; }
.tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.tab-btn { background: transparent; border: none; color: #888; padding: 5px 10px; cursor: pointer; font-weight: bold; }
.tab-btn.active { color: #00ffcc; border-bottom: 2px solid #00ffcc; }
.stat-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #222; font-size: 14px; }
.active-king-row { display: flex; justify-content: space-between; padding: 10px; background: rgba(0, 255, 204, 0.1); border: 1px solid #00ffcc; border-radius: 8px; margin-bottom: 5px; font-size: 14px; box-shadow: 0 0 10px rgba(0, 255, 204, 0.2); }
.crown-icon { font-size: 16px; margin-left: 5px; }