/* ./styles/battle_hud.css */
/* 职责：定义战斗HUD框架、信息框、日志、历史和奖池的样式。 */

.info-box {
    position: relative;
    border-style: solid;
    border-width: 5px;
    border-image-source: url('../images/ui/frame_infobox_tileable.png');
    border-image-slice: 5 fill;
    border-image-repeat: repeat;
    padding: 0;
    flex-shrink: 0;
    background-color: transparent;
    overflow: visible;
    min-height: 4.5rem;
}

.info-box > div {
    padding: 4px 8px;
}

#win-history-box {
    overflow: hidden;
    height: 60px;
    min-height: 60px;
}

#mp-cost-box {
    overflow: hidden;
    min-height: 3.25rem;
}

/* 触控：法力在信息框内流式排版；PC 绝对定位见文末 body:not(.density-touch) */
body.density-touch #mp-cost-box .mp-cost-text,
body.density-touch #mp-cost-box #total-bet-cost {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.5rem;
    margin: 0;
    text-align: center;
    transition: color 0.2s ease;
}

.corner-deco {
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url('../images/ui/deco_infobox_corner_gem.png');
    background-size: contain;
    z-index: 1;
}

.corner-deco.tl { top: -5px; left: -5px; }
.corner-deco.tr { top: -5px; right: -5px; transform: rotate(90deg); }
.corner-deco.br { bottom: -5px; right: -5px; transform: rotate(180deg); }
.corner-deco.bl { bottom: -5px; left: -5px; transform: rotate(270deg); }

#win-history-box .corner-deco.tl,
#mp-cost-box .corner-deco.tl { top: 0; left: 0; }
#win-history-box .corner-deco.tr,
#mp-cost-box .corner-deco.tr { top: 0; right: 0; }
#win-history-box .corner-deco.br,
#mp-cost-box .corner-deco.br { bottom: 0; right: 0; }
#win-history-box .corner-deco.bl,
#mp-cost-box .corner-deco.bl { bottom: 0; left: 0; }

.spacer {
    flex-grow: 1;
}

#player-attack-display {
    color: var(--color-text-dim);
}

.gold-display, #player-attack-display {
    font-size: 1.25rem;
    font-weight: bold;
}

#gem-selector-container select {
    width: 100%;
    background-color: var(--color-panel-light);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.5rem;
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#gem-selector-container select.gem-warning {
    border-color: #FBBF24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.log-box {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.log-container-main {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.log-message {
    font-size: 0.9rem;
    line-height: 1.5;
    flex-shrink: 0;
    color: #e2e8f0;
}

.log-message.log-player {
    color: #7dd3fc;
}

.log-message.log-enemy {
    color: #f87171;
}

.log-message.log-system {
    color: var(--color-text-dim);
}

.log-message.log-special {
    color: #fbbf24;
}

.log-message.log-damage {
    color: #fb923c;
}

.log-icon {
    margin-right: 0.5em;
}

.log-icon-img {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.win-history-grid {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
}

.win-history-icon {
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--color-panel-light);
    border-radius: 0.25rem;
    flex-shrink: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.win-history-icon.win {
    border-color: #FBBF24;
    box-shadow: 0 0 0.5rem #FBBF24;
}

.prize-pool {
    grid-column: 2 / span 7;
    grid-row: 2 / span 5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 1rem;
    z-index: 11;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FBBF24;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    pointer-events: none;
}

#total-bet-cost.insufficient-mp {
    color: #f87171;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.65);
}

/*
 * PC：日志占 1fr；法力/四键/快停叠在底部 actions（18%）上。
 * 手调见文件末尾注释；改完硬刷新。
 */
body:not(.density-touch) .right-column {
    grid-template-rows: auto auto 1fr 18%;
    grid-template-areas:
        "enemy"
        "history"
        "log"
        "actions";
}
body:not(.density-touch) .right-column > .enemy-pane { grid-area: enemy; }
body:not(.density-touch) .right-column > #win-history-box { grid-area: history; }
body:not(.density-touch) .right-column > #log-box { grid-area: log; }
body:not(.density-touch) .right-column > .main-actions-area { grid-area: actions; }

body:not(.density-touch) #mp-cost-box {
    grid-area: actions;
    position: relative;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-image: none;
    background: transparent;
    overflow: visible;
    pointer-events: none;
    z-index: 20;
}
body:not(.density-touch) #mp-cost-box .corner-deco {
    display: none;
}
body:not(.density-touch) #mp-cost-box > div {
    padding: 0;
}

/* 【手调·法力】相对 #mp-cost-box（=底部 actions）；top↑下移；改完硬刷新 */
body:not(.density-touch) #mp-cost-box #total-bet-cost {
    position: absolute !important;
    left: 50%;
    top: 22%;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 25;
    width: auto;
    min-height: 0;
    display: block;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    text-align: center;
    transition: color 0.2s ease;
}

/*
 * 【手调·四键整块】覆盖 battle_buttons.css 的 .main-actions-area
 * bottom↑ 上移整块；width/height 改大小；left+transform 左右居中
 */
body:not(.density-touch) .main-actions-area {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 93%;
    height: 22%;
    z-index: 15;
}

/*
 * 【手调·快停】相对 .main-actions-area
 * bottom↑ 上移；left 对准旋转键中心（约 12.5% 为第一格中心，现约 10.6%）
 */
body:not(.density-touch) .quick-stop-toggle {
    position: absolute;
    bottom: calc(100% + 25px);
    left: calc(10.625% - 3px);
    transform: translateX(-50%);
    z-index: 3;
}

/* PC：spin 外包一层不占格，四键仍横排 */
body:not(.density-touch) .spin-action-cell {
    display: contents;
}