/* 简洁 Flex 布局，可通过变量调整百分比 */
.role-panel {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* 可调百分比：左侧宽度与底部高度 */
    --left-percent: 30%; /* 顶部左侧宽度，占比 */
    --bottom-percent: 20%; /* 底部高度，占比 */
}

.role-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px; /* 主轴间距，可需要时调整或删除 */
    background: var(--btn_bg_s);
}

/* 顶部区域（占剩余高度） */
.role-top {
    flex: 1 1 auto;
    display: flex;
    gap: 8px; /* 顶部左右间距，可需要时调整或删除 */
    min-height: 0; /* 避免溢出 */
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
}

/* 左右两列：按百分比分布 */
.role-left {
    flex: 0 0 var(--left-percent); /* 左侧固定占比 */
    min-width: 0;
    border-radius: 8px;
    background: var(--bg_bg_q);
}

.role-right {
    flex: 1 1 auto; /* 右侧占剩余 */
    min-width: 0;
    border-radius: 8px;
    background: var(--bg_bg_q);
}

/* 底部区域（固定占比高度） */
.role-bottom {
    flex: 0 0 var(--bottom-percent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    border-radius: 8px;
    background: var(--bg_bg_q);
    margin-bottom: 8px;
    align-items: center; /* 底部区所有子元素横向居中 */
    margin-left: 8px;
    margin-right: 8px;
}
.loop-item-title {
    background: var(--bg_bg_q);
    color: var(--btn_color_q);
    border-radius: 6px;
    min-width: 70px;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 10px 0px;
}

.enter-btn {
    /* 去掉原来的 width: 100%; */
    width: 60%;
    max-width: 420px;
    min-width: 200px;
    height: 40px;
    border-radius: 8px;
    align-self: center; /* 仅让按钮在横向居中 */
    margin-bottom: 16px;
    margin-top: 8px;
    /* 渐变背景与文字样式 */
    background: var(--btn_bg_s);
    color: var(--btn_color_q);
    border: 1px solid var(--btn_border_q);
    outline: none;
    /* 提升点击与可用反馈 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
    cursor: pointer;
}