/* ./styles/battle_buttons.css */
/* 职责：定义所有战斗场景中的按钮、开关和动作区域样式。 */

.consumables-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.consumable-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    color: white;
    cursor: pointer;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    width: 80%;
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0 auto;
}

.consumable-button.disabled-look {
    filter: grayscale(1);
    opacity: 0.6;
    cursor: not-allowed;
}

.consumable-button:disabled {
    cursor: not-allowed;
}

.consumable-button.potion-flash {
    animation: potion-btn-flash 0.65s ease-out;
}

@keyframes potion-btn-flash {
    0%, 100% {
        filter: brightness(1);
        transform: scale(1);
    }
    25% {
        filter: brightness(1.5) drop-shadow(0 0 10px rgba(255, 255, 220, 0.95));
        transform: scale(1.1);
    }
    50% {
        filter: brightness(1.75) drop-shadow(0 0 14px rgba(255, 255, 255, 1));
        transform: scale(1.14);
    }
}

#hp-potion-btn {
    background-image: url('../images/ui/btn_hp_potion_bg.png');
}

#hp-potion-btn.disabled-look {
    background-image: url('../images/ui/btn_hp_potion_bg_disabled.png');
}

#mp-potion-btn {
    background-image: url('../images/ui/btn_mp_potion_bg.png');
}

#mp-potion-btn.disabled-look {
    background-image: url('../images/ui/btn_mp_potion_bg_disabled.png');
}

#hp-potion-btn.tribute-exchange-mode,
#mp-potion-btn.tribute-exchange-mode {
    background-image: url('../images/icons/item_time_wheel_tribute.png');
    background-size: 76%;
    background-repeat: no-repeat;
    background-position: center;
    filter: none;
    opacity: 1;
}

#hp-potion-btn.tribute-exchange-mode:disabled,
#mp-potion-btn.tribute-exchange-mode:disabled {
    filter: none;
    opacity: 0.82;
}

#hp-potion-btn.tribute-exchange-mode #hp-potion-count,
#mp-potion-btn.tribute-exchange-mode #mp-potion-count {
    -webkit-text-stroke: 2px #334155;
    color: #fde68a;
    font-size: clamp(1.15rem, 3.2vw, 2rem);
}

#hp-potion-count,
#mp-potion-count {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
}

#hp-potion-count {
    -webkit-text-stroke: 2px #8B0000;
}

#mp-potion-count {
    -webkit-text-stroke: 2px #00008B;
}

.main-actions-area {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: 84%;
    height: 22%;
}

.main-actions-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5%;
    align-items: end;
}

.spin-action-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

.spin-action-cell #spin-button {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.main-actions-buttons button {
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.main-actions-buttons button:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.main-actions-buttons button:disabled {
    cursor: not-allowed;
}

/* 为被锁定（未解锁）的按钮添加视觉样式 */
.main-actions-buttons button.locked {
    filter: grayscale(1);
    opacity: 0.6;
}

#spin-button {
    background-image: url('../images/ui/btn_spin_default.png');
}
#spin-button:hover:not(:disabled) { background-image: url('../images/ui/btn_spin_hover.png'); }
#spin-button:disabled { background-image: url('../images/ui/btn_spin_disabled.png'); }

#spin-button.spin-button-stoppable {
    background-image: url('../images/ui/btn_spin_stop.png');
}
#spin-button.spin-button-stoppable:hover:not(:disabled) {
    background-image: url('../images/ui/btn_spin_stop_hover.png');
}

#attack-button {
    background-image: url('../images/ui/btn_attack_default.png');
}
#attack-button:hover:not(:disabled) { background-image: url('../images/ui/btn_attack_hover.png'); }
#attack-button:disabled { background-image: url('../images/ui/btn_attack_disabled.png'); }

#auto-spin-button {
    background-image: url('../images/ui/btn_auto_default.png');
}
#auto-spin-button:hover:not(:disabled):not(.auto-spin-active) {
    background-image: url('../images/ui/btn_auto_hover.png');
}
#auto-spin-button.auto-spin-active {
    background-image: url('../images/ui/btn_auto_active.png');
}
#auto-spin-button:disabled { background-image: url('../images/ui/btn_auto_disabled.png'); }

#reset-bet-button {
    position: relative;
    background-image: url('../images/ui/btn_clear_default.png');
}
#reset-bet-button.bet-locked {
    filter: brightness(0.45) saturate(60%);
    opacity: 0.85;
    cursor: not-allowed;
}
#reset-bet-button .bet-lock-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 65%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}
#reset-bet-button:hover:not(:disabled) { background-image: url('../images/ui/btn_clear_hover.png'); }
#reset-bet-button.bet-locked:hover { background-image: url('../images/ui/btn_clear_default.png'); }
#reset-bet-button:disabled { background-image: url('../images/ui/btn_clear_disabled.png'); }

.consumable-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.auto-potion-toggle {
    display: flex;
    align-items: center;
}

.auto-potion-toggle input {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 16px;
    background-image: url('../images/ui/toggles/toggle_potion_off.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.auto-potion-toggle input:checked {
    background-image: url('../images/ui/toggles/toggle_potion_on.png');
}

.quick-stop-toggle {
    position: absolute;
    bottom: calc(25% + 10px);
    left: calc(10.625% - 3px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 3;
}

.quick-stop-toggle input {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 16px;
    background-image: url('../images/ui/toggles/toggle_quickstop_off.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.quick-stop-toggle input:checked {
    background-image: url('../images/ui/toggles/toggle_quickstop_on.png');
}

.auto-potion-toggle.locked input,
.quick-stop-toggle.locked input {
    filter: grayscale(1);
    opacity: 0.6;
    cursor: not-allowed;
}