﻿/* gril.css - 仅包含与 gril.js 配合使用的样式（质量层级与信息面板） */

.gril-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 12%;
    overflow: hidden;
}
.gril-card-info-top {
    height: 10%;
    color: #dbff53;
    font-weight: 600;
    width: 100%;
    text-align: center;
    font-size: 14px;
}
.gril-card-info-img {
    width: 100%;
    height: 90%;
    object-fit: cover;
}

.gril-card-info-bottom {
    background: var(--bg_bg_s);
    padding: 4px;
    color: var(--btn_color_q);
    font-weight: 600;
    pointer-events: auto;
    font-size: 12px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
}
/* 信息面板中英雄头像区域 */
#gril-info-panel > div:nth-child(2) > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
}

/* 技能卡片 */
#gril-info-panel-skills > div {
    min-width: 220px;
}

/* 升级确认模态 */
.gril-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 小浮动按钮样式（信息面板） */
.gril-info-fab {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: rgba(255,255,255,0.04);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 卡片底部才艺标识（如果需要固定样式，可调整） */
.gril-card .talent-badge {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    display: flex;
    justify-content: flex-end;
}
/* 隐藏美女信息页面内所有 div 的滚动条（兼容 WebKit / Firefox / IE） */
#gril-info-panel div {
    -ms-overflow-style: none; /* IE 10+ */
    scrollbar-width: none; /* Firefox */
}

    #gril-info-panel div::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
.gril-info-panel-top-title {
    position: absolute;
    right: 5%;
    top: 10%;
    /* transform: translateX(-50%); */
    background: #0000007d;
    text-align: center;
    z-index: 160;
    pointer-events: none;
    padding: 10px 0px;
    border-radius: 6px;
    border: 2px solid var(--btn_border_q);
}
.gril-info-panel-top-title-font {
    color: rgb(254 254 254);
    writing-mode: vertical-rl;
    letter-spacing: 6px;
    font-size: 30px;
    font-family: "STXingkai", "华文行楷", "LiSu", serif;
}
.gril-upgrade-level-badge {
    position: absolute;
    right: -6px;
    top: -10px;
    width: 28px;
    height: 28px;
    z-index: 2;
    pointer-events: none;
}