/* 队形预览：常驻 index 右边缘的折叠页签 + 右侧抽屉面板 */
.stage-tab {
    position: fixed;
    right: 0;
    bottom: 16px;
    z-index: 10001;
    padding: 16px 0;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(38, 42, 54, 0.96) 0%, rgba(22, 24, 32, 0.96) 100%);
    color: #e9edf5;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-right: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    box-shadow: -6px 0 22px rgba(0, 0, 0, 0.45);
    transition: background 0.15s ease, color 0.15s ease;
}
.stage-tab:hover { background: linear-gradient(180deg, rgba(60, 66, 84, 0.98) 0%, rgba(34, 37, 48, 0.98) 100%); }
.stage-tab.active { color: #ffd479; }
.stage-tab-txt {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 4px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}
/* 英文不竖排单字，整体旋转 90° 更好读 */
html[data-lang="en"] .stage-tab-txt {
    text-orientation: sideways;
    letter-spacing: 1px;
}
.stage-overlay {
    position: fixed;
    right: 44px;
    bottom: 16px;
    width: min(672px, calc(100vw - 60px));
    height: min(364px, calc(100vh - 40px));
    z-index: 10000;
    display: block;
    background: #06070a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
    transform: translate(calc(100% + 110px), 0);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.stage-overlay.show {
    transform: translate(0, 0);
    visibility: visible;
    transition: transform 0.28s ease;
}
.stage-bg {
    position: absolute;
    inset: 0;
    background: url("../images/bg_cave.png") center / cover no-repeat;
    filter: brightness(0.72) saturate(0.92);
}
.stage-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 62%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%);
}
.stage-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.stage-scene {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1200px;
    height: 560px;
    transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
    transform-origin: center center;
}
.stage-mat {
    position: absolute;
    width: 22%;
    height: auto;
    aspect-ratio: 1.15 / 1;
    transform: skewX(-35deg);
    border: 1.7px solid transparent;
    z-index: 0;
}.stage-mat.mat-rear { left: 14%; top: 54%; background: rgba(122, 184, 212, 0.26); border-color: #7ab8d4; }
.stage-mat.mat-center { left: 39%; top: 54%; background: rgba(249, 199, 109, 0.26); border-color: #f9c76d; }
.stage-mat.mat-front { left: 64%; top: 54%; background: rgba(217, 124, 124, 0.26); border-color: #d97c7c; }

.stage-char {
    position: absolute;
    top: 0;
    width: 560px;
    height: 560px;
    transform: translateX(-50%);
    overflow: visible;
}
.stage-char canvas { display: block; }
/* 统一的脚底投影（模型自带动画的影子已被隐藏），大小固定，不随角色缩放而变 */
.stage-char::after {
    content: "";
    position: absolute;
    left: 50%;
    top: var(--footy, 400px);
    width: 106px;
    height: 21px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 72%);
    z-index: -1;
    pointer-events: none;
}
/* spine-player 自带的深色底会把后排宠物挡住，舞台里必须透明 */
.stage-char .spine-player,
.stage-pet .spine-player,
.stage-char .spine-player canvas,
.stage-pet .spine-player canvas { background: transparent !important; }
/* 后排后面：第一排宠物动画 */
.stage-pet {
    position: absolute;
    left: -10%;
    top: -3%;
    width: 430px;
    height: 430px;
    z-index: 0;
    pointer-events: none;
}
.stage-pet canvas { display: block; }
.stage-pet .stage-fallback {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.stage-pet.is-ready .stage-fallback { display: none; }
.stage-char .stage-fallback {
    position: absolute;
    left: 50%;
    bottom: 4%;
    height: 82%;
    max-width: 92%;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.65));
}
.stage-char.is-ready .stage-fallback { display: none; }

.stage-head {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    z-index: 5;
    cursor: move;
    user-select: none;
    background: linear-gradient(180deg, rgba(6, 7, 10, 0.72), rgba(6, 7, 10, 0));
}
.stage-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #f2ecd9;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
.stage-title small { font-size: 10px; font-weight: 500; color: rgba(242, 236, 217, 0.6); letter-spacing: 0.16em; }
.stage-actions { display: flex; gap: 8px; }
.stage-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(14, 16, 22, 0.68);
    color: #e8e2cf;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.stage-btn:hover { background: rgba(106, 118, 255, 0.32); border-color: #8f9aff; }
.stage-close:hover { background: rgba(217, 124, 124, 0.28); border-color: #d97c7c; }
.stage-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    text-align: center;
    font-size: 11px;
    color: rgba(242, 236, 217, 0.45);
    letter-spacing: 0.1em;
    z-index: 5;
    pointer-events: none;
}
.stage-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(242, 236, 217, 0.7);
    font-size: 14px;
    letter-spacing: 0.12em;
}
.stage-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(242, 236, 217, 0.7);
    font-size: 13px;
    letter-spacing: 0.14em;
    z-index: 4;
}
@media (max-width: 720px) {
    .stage-head { padding: 12px 14px; }
    .stage-title { font-size: 14px; }
}