/* 六边形按钮（伪元素实现边框与填充）——边框完全在 --s 内 */
.six-btn {
    --border: 1px; /* 边框宽度（px）在元素内 */
    --s: 60px; /* 外框总尺寸（包括边框） */

    position: absolute;
    width: var(--s);
    height: calc(var(--s) * 0.866); /* √3/2 */
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    -webkit-tap-highlight-color: transparent;
}

    /* 外层：白色边框区域（不放大），占据整个元素尺寸 */
    .six-btn::before {
        content: "";
        position: absolute;
        inset: 0; /* 覆盖整个外框（--s 范围）*/
        z-index: 0;
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        background: #a1414187; /* 边框颜色 */
        pointer-events: none;
    }

    /* 内层：实际填充区，内缩为 --border，保证边框在外层可见但仍在元素内部 */
    .six-btn::after {
        content: "";
        position: absolute;
        inset: var(--border); /* 内缩由 --border 控制 -> 边框在元素内部 */
        z-index: 1;
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        background: #2bdfc661;
        pointer-events: none;
    }

    /* 图片：放在内层上方，若想再缩小10px总量，可改 inset 为 calc(var(--border) + 5px) */
    .six-btn img.map-btn-img {
        position: absolute;
        inset: calc(var(--border) + 5px); /* 可根据需要调整内缩（每边） */
        width: calc(100% - ( (var(--border) + 5px) * 2 ));
        height: calc(100% - ( (var(--border) + 5px) * 2 ));
        object-fit: contain; /* 或 cover，按需求 */
        object-position: center center;
        z-index: 2;
        pointer-events: none;
    }

    /* 文本层，置于最顶层（当无图片时显示） */
    .six-btn .label {
        position: relative;
        z-index: 3;
        pointer-events: none;
        color: #fff;
        font: bold 10px "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
.six-btn-yes::after {
    background: var(--btn_bg_q);
}
.six-btn-no::after {
    background: var(--btn_bg_s);
}
.six-btn-current::before {
    background: #00ff37cc;
}
.six-btn-current::after {
    background: linear-gradient(90deg, #538185d9, #034b47de);
}
.map2_btn {
    background: var(--btn_bg_s);
    color: var(--btn_color_q);
    border:2px solid var(--btn_border_q);
    border-radius:8px;
}
.map2_btn {
    background: transparent;
    border: 0;
}

.map1_btn {
    background: var(--btn_bg_s);
    color: var(--btn_color_q);
    border: 2px solid var(--btn_border_q);
    border-radius: 8px;
}
.map1_btn {
    background: transparent;
    border: 0;
}
.map1_btn_disabled {
    color: #b1b1b1;
}
.map1_btn span {
    color: rgb(255 244 211);
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    font-size: 20px;
    font-family: 'GameXingkai',"STXingkai", "华文行楷", "LiSu", serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 100px;
    box-sizing: border-box;
}
.map2_btn span {
    color: rgb(255 244 211);
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    font-size: 20px;
    font-family: 'GameXingkai',"STXingkai", "华文行楷", "LiSu", serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 100px;
    box-sizing: border-box;
}