/* ============================================================
   HPバー・タイマーバー共通
   ============================================================ */
.hp-bar-container {
    background: #111;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #3a4060;
    position: relative;
    width: 100%;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.hp-bar-fill {
    height: 100%;
    background: var(--success-color);
    transition: width 0.3s ease-out, background-color 0.3s;
}

.timer-container {
    width: 100%;
    background: #111;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.timer-bar {
    height: 100%;
    background: var(--primary-color);
}