/* ============================================
   秘封幻想迷宫 - 样式表
   ============================================ */

/* ---------- 基础重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #2a2a2a;
    color: #e0e0e0;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    user-select: none;
}

/* ---------- 游戏版本号 ---------- */
.game-version {
    display: none;
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    color: #aaa;
    font-size: 13px;
    letter-spacing: 1px;
    background: rgba(30, 30, 30, 0.75);
    border: 1px solid rgba(160, 160, 160, 0.35);
    border-radius: 999px;
    padding: 3px 12px;
    pointer-events: none;
}

/* ---------- 页面脚注 ---------- */
.site-footer, .footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100vw, 760px);
    pointer-events: auto;
}

.site-footer a, .footer a {
    color: #b8c7e0;
    text-decoration: none;
}

.site-footer a:hover, .footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------- 标题页 ---------- */
#title-screen {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #2a2a2a;
    padding-left: 12%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* 标题页音乐按钮 */
#title-screen .music-toggle-btn {
    position: fixed;
    top: 12px;
    z-index: 100;
}

#title-screen .bgm-toggle-btn {
    right: 96px;
}

#title-screen .sfx-toggle-btn {
    right: 12px;
}

/* 网格背景 */
#title-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(100, 100, 100, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(100, 100, 100, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridScroll 4s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes gridScroll {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 0 40px, 0 40px;
    }
}

/* 黑晕效果 */
#title-screen::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

#title-screen .game-title {
    font-size: 48px;
    font-weight: bold;
    color: #e0e0e0;
    text-shadow: 0 0 20px rgba(224, 224, 224, 0.3);
    margin-bottom: 60px;
    letter-spacing: 8px;
    transform: translateY(-80px);
    z-index: 3;
}

#title-screen .title-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    z-index: 3;
}

/* ---------- 标题页右侧滑出面板 ---------- */
.title-slide-panel {
    position: absolute;
    top: 50%;
    right: 8%;
    width: 320px;
    transform: translate(140%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    background: rgba(30, 30, 30, 0.94);
    border: 2px solid #666;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    transition: transform 0.35s ease-out, opacity 0.35s ease-out;
}

.title-slide-panel.active {
    transform: translate(0, -50%);
    opacity: 1;
    pointer-events: auto;
}

.slide-panel-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 24px;
    line-height: 28px;
    cursor: pointer;
    transition: color 0.2s;
}

.slide-panel-close:hover {
    color: #fff;
}

/* ---------- 标题页难度选择 ---------- */
.difficulty-panel,
.title-load-panel {
    min-height: 240px;
}

.difficulty-title {
    font-size: 22px;
    color: #e0e0e0;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.difficulty-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 18px;
}

.difficulty-option {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 2px solid #555;
    border-radius: 8px;
    background: #343434;
    color: #e0e0e0;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.difficulty-option:hover {
    border-color: #aaa;
    background: #404040;
}

.difficulty-option.selected {
    border-color: #e0e0e0;
    background: #454545;
    box-shadow: 0 0 14px rgba(224, 224, 224, 0.15);
}

.difficulty-name {
    font-size: 17px;
    font-weight: bold;
}

.difficulty-value {
    font-size: 12px;
    color: #aaa;
}

.title-load-panel #title-load-panel-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.title-load-panel .save-slot {
    margin-bottom: 0;
}

/* ---------- 通用按钮 ---------- */
.btn {
    padding: 12px 36px;
    font-size: 18px;
    border: 2px solid #666;
    border-radius: 6px;
    background: #3a3a3a;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    min-width: 160px;
    text-align: center;
}

.btn:hover {
    background: #4a4a4a;
    border-color: #999;
}

.btn:active {
    background: #555;
}

.btn-gold {
    border-color: #e0e0e0;
    color: #e0e0e0;
}

.btn-gold:hover {
    background: #3a3a3a;
    border-color: #fff;
}

/* ---------- 手机端标题页适配 ---------- */
@media (max-width: 700px) {
    .site-footer, .footer {
        bottom: 0;
        width: calc(100vw - 16px);
        max-width: 360px;
        font-size: 10px;
        line-height: 1.45;
    }

    body:has(#game-screen[style*="block"]) .site-footer, body:has(#game-screen[style*="block"]) .footer {
        display: block;
        bottom: 0;
    }

    body:has(#game-screen[style*="block"]) .game-version {
        display: none;
    }

    body:has(#game-screen[style*="block"]) .coord-display {
        top: 136px;
        left: 8px;
        right: 8px;
        bottom: auto;
        transform: none;
        width: auto;
        min-width: 0;
        max-width: none;
        justify-content: space-between;
        font-size: 11px;
        padding: 3px 9px;
        z-index: 60;
    }

    body:has(#game-screen[style*="block"]) .music-toggle-btn {
        position: fixed;
        top: 9px;
        right: 14px;
        padding: 4px 8px;
        font-size: 11px;
    }

    body:has(#game-screen[style*="block"]) .bgm-toggle-btn {
        right: 78px;
    }

    #title-screen .music-toggle-btn {
        top: 9px;
        right: 14px;
        padding: 4px 8px;
        font-size: 11px;
    }

    #title-screen .bgm-toggle-btn {
        right: 78px;
    }

    body:has(#game-screen[style*="block"]) #ui-coord-main {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:has(#game-screen[style*="block"]) #ui-game-time {
        flex-shrink: 0;
    }

    body:has(#game-screen[style*="block"]) .top-controls {
        top: auto;
        left: 8px;
        bottom: 104px;
        flex-direction: column;
        gap: 6px;
    }

    body:has(#game-screen[style*="block"]) .top-controls .btn {
        width: 92px;
        min-width: 0;
        padding: 6px 8px;
        font-size: 12px;
    }

    body:has(#game-screen[style*="block"]) .player-info,
    body:has(#game-screen[style*="block"]) .equipment-panel {
        left: 8px;
        right: 8px;
        width: auto;
        min-width: 0;
        background: rgba(30, 30, 30, 0.94);
    }

    body:has(#game-screen[style*="block"]) .player-info {
        top: 8px;
        bottom: auto;
        padding: 8px;
        gap: 8px;
        border-bottom: none;
        border-radius: 8px 8px 0 0;
    }

    body:has(#game-screen[style*="block"]) .player-info .avatar,
    body:has(#game-screen[style*="block"]) .player-info .avatar-placeholder {
        width: 70px;
        height: 70px;
        font-size: 18px;
    }

    body:has(#game-screen[style*="block"]) .player-info .stats {
        min-width: 0;
        gap: 2px;
        font-size: 11px;
    }

    body:has(#game-screen[style*="block"]) .player-info .player-name {
        font-size: 13px;
    }

    body:has(#game-screen[style*="block"]) .player-info .stat-label {
        min-width: auto;
    }

    body:has(#game-screen[style*="block"]) .player-info .stat-row {
        gap: 6px;
    }

    body:has(#game-screen[style*="block"]) .equipment-panel {
        top: 95px;
        bottom: auto;
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        align-items: center;
        gap: 6px;
        padding: 7px 8px;
        border-top: none;
        border-radius: 0 0 8px 8px;
    }

    body:has(#game-screen[style*="block"]) .equipment-panel .panel-title {
        margin-bottom: 0;
        font-size: 11px;
        white-space: nowrap;
    }

    body:has(#game-screen[style*="block"]) .equipment-panel .equip-slot {
        margin-bottom: 0;
        padding: 5px 6px;
        gap: 5px;
        font-size: 11px;
        min-width: 0;
    }

    body:has(#game-screen[style*="block"]) .equipment-panel .slot-label {
        min-width: auto;
    }

    body:has(#game-screen[style*="block"]) .equipment-panel .slot-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:has(#game-screen[style*="block"]) .dialog-popup {
        bottom: 170px;
        min-width: 0;
        width: calc(100vw - 24px);
        max-width: none;
        padding: 14px 44px 14px 12px;
    }

    body:has(#game-screen[style*="block"]) .dialog-popup .dialog-text {
        font-size: 13px;
        line-height: 1.55;
    }

    body:has(#game-screen[style*="block"]) .dialog-popup .dialog-close {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        padding: 0;
        line-height: 28px;
        text-align: center;
        background: rgba(30, 30, 30, 0.85);
        border-radius: 50%;
    }

    body:has(#game-screen[style*="block"]) #game-screen.shop-open .dialog-popup {
        top: 158px;
        bottom: auto;
    }

    body:has(#game-screen[style*="block"]) .notification-container {
        top: 158px;
        bottom: auto;
        left: 8px;
        max-width: calc(100vw - 24px);
        flex-direction: column;
    }

    body:has(#game-screen[style*="block"]) .notification-item {
        max-width: calc(100vw - 24px);
        white-space: normal;
        -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.75);
        text-shadow:
            -0.6px -0.6px 0 rgba(0, 0, 0, 0.85),
             0.6px -0.6px 0 rgba(0, 0, 0, 0.85),
            -0.6px  0.6px 0 rgba(0, 0, 0, 0.85),
             0.6px  0.6px 0 rgba(0, 0, 0, 0.85),
             0 0 2px rgba(0, 0, 0, 0.75);
        animation-name: mobileNotifSlideOut;
    }

    body:has(#game-screen[style*="block"]) .shop-panel {
        top: auto;
        bottom: 104px;
        left: 102px;
        right: 0;
        width: auto;
        max-width: none;
        max-height: none;
        height: 142px;
        transform: translateX(100%);
        border-radius: 10px 0 0 10px;
        padding: 8px;
    }

    body:has(#game-screen[style*="block"]) .shop-panel.active {
        transform: translateX(0);
    }

    body:has(#game-screen[style*="block"]) .shop-panel-title {
        font-size: 14px;
        margin-bottom: 4px;
        padding-bottom: 3px;
    }

    body:has(#game-screen[style*="block"]) .pause-modal .modal-box,
    body:has(#game-screen[style*="block"]) #save-modal .modal-box,
    body:has(#game-screen[style*="block"]) #load-modal .modal-box,
    body:has(#game-screen[style*="block"]) .dlc-import-modal .modal-box {
        box-sizing: border-box;
        width: calc(100vw - 24px);
        min-width: 0;
        max-width: calc(100vw - 24px);
        padding: 16px;
    }

    body:has(#game-screen[style*="block"]) .save-slot {
        gap: 10px;
        padding: 10px 12px;
    }

    body:has(#game-screen[style*="block"]) .save-slot .slot-info {
        min-width: 0;
    }

    body:has(#game-screen[style*="block"]) .save-slot .slot-detail {
        overflow-wrap: anywhere;
    }

    body:has(#game-screen[style*="block"]) #shop-item-list {
        max-height: none;
    }

    body:has(#game-screen[style*="block"]) .shop-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        padding: 7px 8px;
    }

    body:has(#game-screen[style*="block"]) .shop-item-info {
        min-width: 0;
    }

    body:has(#game-screen[style*="block"]) .shop-item-name,
    body:has(#game-screen[style*="block"]) .shop-item-stats {
        overflow-wrap: anywhere;
    }

    body:has(#game-screen[style*="block"]) .shop-item-price {
        min-width: 38px;
        font-size: 12px;
    }

    body:has(#game-screen[style*="block"]) .shop-buy-btns {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    body:has(#game-screen[style*="block"]) .shop-buy-btn {
        flex: 1;
        padding: 6px 10px;
    }

    body .modal-box,
    body .pause-modal .modal-box,
    body .save-modal .modal-box,
    body .equip-select-modal .modal-box,
    body #delete-confirm-modal .modal-box {
        box-sizing: border-box;
        width: calc(100vw - 24px);
        min-width: 0;
        max-width: calc(100vw - 24px);
        padding: 16px;
    }

    body .modal-box .modal-buttons {
        flex-wrap: wrap;
    }

    body .equip-select-content {
        flex-direction: column;
        height: auto;
        max-height: min(62vh, 420px);
        overflow-y: auto;
    }

    body .equip-select-list {
        max-height: min(38vh, 260px);
    }

    body .equip-select-current {
        box-sizing: border-box;
        width: 100%;
        min-height: 88px;
    }

    body .gameover-screen .gameover-content,
    body .ending-content,
    body .cutscene-text {
        box-sizing: border-box;
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        padding-left: 16px;
        padding-right: 16px;
    }

    body .gameover-screen .gameover-sub,
    body .ending-sub,
    body .cutscene-text {
        overflow-wrap: anywhere;
    }

    @keyframes mobileNotifSlideOut {
        0%   { opacity: 0; transform: translate(-18px, -8px); }
        10%  { opacity: 1; transform: translate(0, 0); }
        70%  { opacity: 1; transform: translate(0, 0); }
        100% { opacity: 0; transform: translate(18px, 6px); }
    }

    #title-screen {
        align-items: center;
        justify-content: flex-start;
        padding: 72px 18px 130px;
    }

    #title-screen .game-title {
        width: 100%;
        font-size: clamp(30px, 10vw, 42px);
        line-height: 1.25;
        letter-spacing: 4px;
        margin-bottom: 28px;
        text-align: center;
        transform: none;
    }

    #title-screen .title-buttons {
        width: 100%;
        align-items: center;
        gap: 14px;
        margin-top: 18vh;
        transition: margin-top 0.35s ease-out, transform 0.35s ease-out;
    }

    #title-screen:has(.title-slide-panel.active) .title-buttons {
        margin-top: 0;
    }

    #title-screen .title-buttons .btn {
        width: min(220px, 72vw);
        min-width: 0;
        padding: 10px 24px;
        font-size: 16px;
    }

    .title-slide-panel {
        top: 50%;
        right: 50%;
        width: min(280px, calc(100vw - 44px));
        min-height: 0;
        max-height: 80vh;
        overflow-y: auto;
        padding: 16px;
        transform: translate(50%, 140%);
        z-index: 130;
    }

    .title-slide-panel.active {
        transform: translate(50%, -50%);
    }

    .difficulty-title {
        font-size: 18px;
    }

    .difficulty-desc {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .difficulty-option {
        padding: 9px 12px;
        margin-bottom: 8px;
    }

    .difficulty-name {
        font-size: 15px;
    }

    .difficulty-value {
        font-size: 11px;
    }

    .title-load-panel #title-load-panel-content {
        gap: 8px;
    }
}

@media (max-width: 700px) and (max-height: 480px) {
    .site-footer, .footer {
        bottom: 6px;
        max-width: 58vw;
        font-size: 9px;
        line-height: 1.35;
    }

    body:has(#game-screen[style*="block"]) .site-footer, body:has(#game-screen[style*="block"]) .footer {
        bottom: 4px;
    }

    body:has(#game-screen[style*="block"]) .game-version {
        display: none;
    }

    body:has(#game-screen[style*="block"]) .coord-display {
        top: 136px;
        left: 8px;
        right: 8px;
        bottom: auto;
        transform: none;
        width: auto;
        min-width: 0;
        max-width: none;
        justify-content: space-between;
        font-size: 10px;
        padding: 2px 9px;
    }

    body:has(#game-screen[style*="block"]) .top-controls {
        bottom: 52px;
    }

    body:has(#game-screen[style*="block"]) .top-controls .btn {
        width: 82px;
        padding: 4px 6px;
        font-size: 11px;
    }

    body:has(#game-screen[style*="block"]) .shop-panel {
        bottom: 52px;
        height: 122px;
        left: 92px;
    }

    #title-screen .music-toggle-btn {
        top: 9px;
        right: 14px;
        padding: 4px 8px;
        font-size: 11px;
    }

    #title-screen .bgm-toggle-btn {
        right: 78px;
    }

    body:has(#game-screen[style*="block"]) .player-info {
        width: calc(100vw - 180px);
        right: auto;
    }

    body:has(#game-screen[style*="block"]) .equipment-panel {
        top: 8px;
        left: auto;
        width: 156px;
        grid-template-columns: 1fr;
        border-top: 1px solid #555;
        border-radius: 8px;
    }

    body:has(#game-screen[style*="block"]) .equipment-panel .panel-title {
        text-align: left;
    }

    body:has(#game-screen[style*="block"]) .dialog-popup {
        bottom: 92px;
        width: min(420px, calc(100vw - 24px));
    }

    body:has(#game-screen[style*="block"]) #game-screen.shop-open .dialog-popup {
        top: 154px;
        bottom: auto;
    }

    body:has(#game-screen[style*="block"]) .notification-container {
        top: 154px;
        bottom: auto;
    }

    #title-screen {
        align-items: flex-start;
        justify-content: center;
        padding: 24px 20px 72px 9%;
    }

    #title-screen .game-title {
        width: auto;
        max-width: 58vw;
        font-size: clamp(26px, 7vw, 34px);
        margin-bottom: 18px;
        text-align: left;
    }

    #title-screen .title-buttons {
        width: auto;
        align-items: flex-start;
        gap: 12px;
        margin-top: 0;
    }

    #title-screen:has(.title-slide-panel.active) .title-buttons {
        margin-top: 0;
    }

    #title-screen .title-buttons .btn {
        width: 150px;
        padding: 8px 18px;
        font-size: 15px;
    }

    .title-slide-panel {
        top: 54%;
        right: 18px;
        width: min(260px, 42vw);
        padding: 14px;
        transform: translate(130%, -50%);
        z-index: 130;
    }

    .title-slide-panel.active {
        transform: translate(0, -50%);
    }
}

/* ---------- 游戏界面 ---------- */
#game-screen {
    display: none;
    width: 100vw;
    height: 100vh;
    background: #2a2a2a;
    position: relative;
}

#game-screen::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 50;
}

/* ---------- 顶部控制栏 ---------- */
.top-controls {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.top-controls .btn {
    padding: 6px 16px;
    font-size: 14px;
    min-width: auto;
}

/* ---------- 迷宫视口 ---------- */
#maze-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#maze-container {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    gap: 3px;
    transition: transform 0.15s ease-out;
}

/* ---------- 房间方框 ---------- */
.room {
    width: 50px;
    height: 50px;
    border: 2px solid #555;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #999;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    cursor: default;
}

/* 未探索 */
.room-unexplored {
    background: transparent;
    border-color: #555;
}

/* 视野外（与背景色一致） */
.room-dark {
    background: #2a2a2a;
    border-color: #2a2a2a;
}

/* 已探索 */
.room-explored {
    background: #e0e0e0;
    border-color: #ccc;
}

/* 玩家当前位置 */
.room-player {
    background: #4a90d9;
    border-color: #6ab0ff;
}

.room-player-fainted {
    animation: playerFaintToWhite 2s ease-out forwards;
}

/* 危险房间 - 未探索 */
.room-danger {
    border-color: #e08040;
    background: transparent;
}

/* 危险房间 - 已探索 */
.room-danger-explored {
    border-color: #e08040;
    background: rgba(224, 128, 64, 0.15);
}

/* 危险房间 - 玩家所在 */
.room-danger-player {
    background: #4a90d9;
    border-color: #e08040;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(224, 128, 64, 0.6);
}

/* 奖励房间 - 未探索 */
.room-reward {
    border-color: #d4af37;
    background: transparent;
}

/* 奖励房间 - 已探索 */
.room-reward-explored {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.15);
}

/* 奖励房间 - 玩家所在 */
.room-reward-player {
    background: #4a90d9;
    border-color: #d4af37;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.room-reward-gold {
    border-color: #d4af37 !important;
}

.room-reward-green {
    border-color: #4caf50 !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.35);
}

.room-reward-blue {
    border-color: #4a90d9 !important;
    box-shadow: 0 0 8px rgba(74, 144, 217, 0.35);
}

.room-reward-purple {
    border-color: #9c27b0 !important;
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.35);
}

.room-reward-stat {
    border-color: #ffd166 !important;
    box-shadow: 0 0 8px rgba(255, 209, 102, 0.4);
}

/* 出口房间 - 未探索 */
.room-exit {
    border-color: #4caf50;
    background: transparent;
}

/* 出口房间 - 已探索 */
.room-exit-explored {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.15);
}

/* 出口房间 - 玩家所在 */
.room-exit-player {
    background: #4a90d9;
    border-color: #4caf50;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

/* 返回房间 - 未探索 */
.room-return {
    border-color: #9c27b0;
    background: transparent;
}

/* 返回房间 - 已探索 */
.room-return-explored {
    border-color: #9c27b0;
    background: rgba(156, 39, 176, 0.15);
}

/* 返回房间 - 玩家所在 */
.room-return-player {
    background: #4a90d9;
    border-color: #9c27b0;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.6);
}

/* 剧情房间 - 未探索 */
.room-story {
    border-color: #4caf50;
    background: transparent;
}

/* 剧情房间 - 已探索 */
.room-story-explored {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.15);
}

/* 剧情房间 - 玩家所在 */
.room-story-player {
    background: #4a90d9;
    border-color: #4caf50;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

/* 剧情房间感叹号 */
.room-story-text {
    color: #4caf50;
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
}

/* 商店房间 - 未探索 */
.room-shop {
    border-color: #d4af37;
    background: transparent;
}

/* 商店房间 - 已探索 */
.room-shop-explored {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.15);
}

/* 商店房间 - 玩家所在 */
.room-shop-player {
    background: #4a90d9;
    border-color: #d4af37;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

/* 商店房间感叹号 */
.room-shop-text {
    color: #d4af37;
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
}

/* 传送门房间 - 未探索 */
.room-portal {
    border-color: #4a90d9;
    background: transparent;
}

/* 传送门房间 - 已探索 */
.room-portal-explored {
    border-color: #4a90d9;
    background: rgba(74, 144, 217, 0.15);
}

/* 传送门房间 - 玩家所在 */
.room-portal-player {
    background: #4a90d9;
    border-color: #4a90d9;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(74, 144, 217, 0.6);
}

/* 传送门房间图标 */
.room-portal-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #4a90d9;
    border-radius: 50%;
    pointer-events: none;
}

.room-portal-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 32px;
    background: linear-gradient(
        to bottom,
        #4a90d9 0%, #4a90d9 30%,
        transparent 30%, transparent 70%,
        #4a90d9 70%, #4a90d9 100%
    );
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
}

.room-portal-line-alt {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 障碍房间 - 未探索 */
.room-obstacle {
    border-color: #4a90d9;
    background: transparent;
}

/* 障碍房间 - 已探索 */
.room-obstacle-explored {
    border-color: #4a90d9;
    background: rgba(74, 144, 217, 0.15);
}

/* 障碍房间 - 玩家所在 */
.room-obstacle-player {
    background: #4a90d9;
    border-color: #4a90d9;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(74, 144, 217, 0.6);
}

/* 障碍房间内部X */
.room-obstacle-text {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.room-obstacle-text::before,
.room-obstacle-text::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 18px;
    background: #4a90d9;
    transform-origin: center;
}

.room-obstacle-text::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.room-obstacle-text::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.room-obstacle-red {
    border-color: #e05252 !important;
}

.room-obstacle-red .room-obstacle-text::before,
.room-obstacle-red .room-obstacle-text::after {
    background: #e05252;
}

.room-obstacle-green {
    border-color: #4caf50 !important;
}

.room-obstacle-green .room-obstacle-text::before,
.room-obstacle-green .room-obstacle-text::after {
    background: #4caf50;
}

.room-obstacle-blue {
    border-color: #4a90d9 !important;
}

.room-obstacle-blue .room-obstacle-text::before,
.room-obstacle-blue .room-obstacle-text::after {
    background: #4a90d9;
}

.room-obstacle-purple {
    border-color: #9c27b0 !important;
}

.room-obstacle-purple .room-obstacle-text::before,
.room-obstacle-purple .room-obstacle-text::after {
    background: #9c27b0;
}

/* 终点房间 - 未探索 */
.room-ending {
    border-color: #32c56a;
    background: rgba(50, 197, 106, 0.92);
}

/* 终点房间 - 已探索 */
.room-ending-explored {
    border-color: #32c56a;
    background: rgba(50, 197, 106, 0.55);
}

/* 终点房间 - 玩家所在 */
.room-ending-player {
    background: #32c56a;
    border-color: #9cffbf;
    border-width: 3px;
    box-shadow: 0 0 12px rgba(50, 197, 106, 0.85);
}

/* ---------- 商店侧栏（滑出面板） ---------- */
.shop-panel {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(100%);
    width: 400px;
    max-height: 40vh;
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid #d4af37;
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 16px;
    z-index: 80;
    overflow-y: auto;
    transition: transform 0.35s ease-out;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.shop-panel.active {
    transform: translateY(-50%) translateX(0);
}

.shop-panel-title {
    font-size: 18px;
    font-weight: bold;
    color: #d4af37;
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #555;
}

#shop-item-list {
    max-height: none;
    overflow-y: auto;
    margin-bottom: 0;
}

#shop-item-list::-webkit-scrollbar {
    width: 6px;
}

#shop-item-list::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px;
}

.shop-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 6px;
}

.shop-item-info {
    min-width: 0;
}

.shop-item-name {
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    overflow-wrap: anywhere;
}

.shop-item-desc {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    font-style: italic;
    overflow-wrap: anywhere;
}

.shop-item-stats {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.shop-item-price {
    font-size: 14px;
    font-weight: bold;
    color: #e0c040;
    min-width: 50px;
    text-align: right;
    align-self: center;
}

.shop-buy-btns {
    display: flex;
    gap: 4px;
    grid-column: 1 / -1;
}

.shop-buy-btn {
    padding: 6px 16px;
    font-size: 13px;
    background: #3a3a3a;
    border: 1px solid #d4af37;
    border-radius: 4px;
    color: #d4af37;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.shop-buy-btn:hover {
    background: #4a4a3a;
}

.shop-buy-btn:disabled {
    border-color: #555;
    color: #555;
    cursor: not-allowed;
}

/* 可点击的相邻房间 */
.room-clickable {
    cursor: pointer;
}

.room-clickable:hover {
    filter: brightness(1.3);
    transform: scale(1.05);
}

/* 危险房间伤害文字 */
.room-damage-text {
    color: #e08040;
    font-size: 10px;
    font-weight: bold;
    pointer-events: none;
}

/* 奖励房间问号 */
.room-reward-text {
    color: #d4af37;
    font-size: 16px;
    font-weight: bold;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
}

.room-reward-green .room-reward-text { color: #4caf50; }
.room-reward-blue .room-reward-text { color: #4a90d9; }
.room-reward-purple .room-reward-text { color: #9c27b0; }
.room-reward-stat .room-reward-text {
    color: #ffd166;
    font-size: 10px;
}

/* ---------- 角色信息栏（左下角） ---------- */
.player-info {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(30, 30, 30, 0.92);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 12px;
    z-index: 10;
    min-width: 240px;
}

.player-info .avatar {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    border: 2px solid #666;
    background: #3a3a3a;
    object-fit: cover;
    flex-shrink: 0;
}

.player-info .avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    border: 2px solid #666;
    background: #3a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #888;
    flex-shrink: 0;
}

.player-info .stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}

.player-info .player-name {
    font-size: 15px;
    font-weight: bold;
    color: #e0e0e0;
    margin-right: 8px;
}

.player-info .name-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    flex-wrap: wrap;
}

.player-info .stat-row {
    display: flex;
    gap: 8px;
}

.player-info .stat-row-inline {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.player-info .stat-item {
    display: flex;
    gap: 2px;
    align-items: center;
}

.player-info .stat-label {
    color: #999;
    min-width: 50px;
}

.player-info .stat-value {
    color: #e0e0e0;
    font-weight: bold;
}

.stat-hp { color: #e06060 !important; }
.stat-san { color: #60c0e0 !important; }
.stat-atk { color: #e0a040 !important; }
.stat-def { color: #60a0e0 !important; }
.stat-spd { color: #60e060 !important; }
.stat-gold { color: #e0c040 !important; }
.stat-green-key { color: #4caf50 !important; }
.stat-blue-key { color: #4a90d9 !important; }
.stat-purple-key { color: #9c27b0 !important; }

/* HP 条 */
.hp-bar-container {
    width: 100%;
    height: 6px;
    background: #444;
    border-radius: 3px;
    margin-top: 2px;
    overflow: hidden;
}

.hp-bar {
    height: 100%;
    background: #e06060;
    border-radius: 3px;
    transition: width 0.3s;
}

/* ---------- 装备栏（右下角） ---------- */
.equipment-panel {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(30, 30, 30, 0.92);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 12px;
    z-index: 10;
    min-width: 180px;
}

.equipment-panel .panel-title {
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    margin-bottom: 8px;
    text-align: center;
}

.equipment-panel .equip-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 13px;
}

.equipment-panel .equip-slot:hover {
    background: #4a4a4a;
    border-color: #888;
}

.equipment-panel .slot-label {
    color: #999;
    min-width: 36px;
}

.equipment-panel .slot-name {
    color: #e0e0e0;
    flex: 1;
}

.equipment-panel .slot-name.empty {
    color: #666;
    font-style: italic;
}

.quality-1 {
    color: #f2f2f2 !important;
}

.quality-2 {
    color: #5ca8ff !important;
}

.quality-3 {
    color: #b46cff !important;
}

/* ---------- 弹窗遮罩 ---------- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

/* ---------- 通用弹窗 ---------- */
.modal-box {
    background: #333;
    border: 2px solid #666;
    border-radius: 10px;
    padding: 24px;
    min-width: 300px;
    max-width: 500px;
    text-align: center;
    color: #e0e0e0;
}

.modal-box .modal-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #e0e0e0;
}

.modal-box .modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.title-help-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    line-height: 1.6;
    color: #e8e0c8;
}

.title-help-content .help-section {
    margin-bottom: 10px;
}

.title-help-content .help-section:last-child {
    margin-bottom: 0;
}

.title-help-content .help-section-title {
    font-size: 15px;
    font-weight: bold;
    color: #d4af37;
    margin-bottom: 4px;
}

.title-help-content .help-section-text {
    font-size: 14px;
    color: #c0c0c0;
    line-height: 1.7;
    margin-left: 4px;
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------- 暂停弹窗 ---------- */
.pause-modal .modal-box {
    min-width: 360px;
}

.pause-modal .modal-buttons {
    flex-direction: column;
    gap: 10px;
}

.pause-modal .modal-buttons .btn {
    width: 100%;
}

/* ---------- DLC导入弹窗 ---------- */
.dlc-import-modal {
    z-index: 110;
}

/* 删除确认弹窗需要在所有存档弹窗之上（包括标题页滑出面板 z-index:130） */
#delete-confirm-modal {
    z-index: 140;
}

.dlc-import-modal .modal-box {
    min-width: 380px;
    max-width: 420px;
}

.dlc-drop-zone {
    border: 2px dashed #666;
    border-radius: 12px;
    padding: 40px 20px;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.dlc-drop-zone:hover {
    border-color: #9bd7ff;
    background: rgba(155, 215, 255, 0.05);
}

.dlc-drop-zone.drag-over {
    border-color: #9bd7ff;
    background: rgba(155, 215, 255, 0.12);
    border-style: solid;
}

.dlc-drop-icon {
    font-size: 36px;
    color: #666;
    line-height: 1;
    transition: color 0.2s;
}

.dlc-drop-zone:hover .dlc-drop-icon,
.dlc-drop-zone.drag-over .dlc-drop-icon {
    color: #9bd7ff;
}

.dlc-drop-text {
    font-size: 16px;
    color: #e0e0e0;
}

.dlc-drop-hint {
    font-size: 13px;
    color: #888;
}

.dlc-drop-warning {
    font-size: 12px;
    color: #ff8aa1;
    margin-top: 4px;
    text-align: center;
    line-height: 1.5;
}

.dlc-save-warning {
    font-size: 14px;
    font-weight: bold;
    color: #ffd54a;
    background: rgba(255, 99, 99, 0.18);
    border: 1px solid #ff6363;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 8px 0 4px;
    text-align: center;
    line-height: 1.5;
}

/* ---------- 存档选择弹窗 ---------- */
.save-modal .modal-box {
    min-width: 400px;
}

.save-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.save-slot:hover {
    background: #4a4a4a;
    border-color: #888;
}

.save-slot .slot-info {
    text-align: left;
}

.save-slot .slot-num {
    font-weight: bold;
    color: #e0e0e0;
    margin-bottom: 4px;
}

.save-slot .slot-detail {
    font-size: 12px;
    color: #999;
}

.save-slot .slot-empty {
    color: #666;
    font-style: italic;
}

.save-slot .slot-delete-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}

.save-slot .slot-delete-btn:hover {
    color: #e04040;
}

/* ---------- 装备选择弹窗 ---------- */
.equip-select-modal .modal-box {
    min-width: 420px;
    max-width: 500px;
    text-align: left;
}

.equip-select-content {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    height: 280px;
}

.equip-select-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #555;
    border-radius: 6px;
    background: #2a2a2a;
    padding: 8px;
}

.equip-select-list::-webkit-scrollbar {
    width: 6px;
}

.equip-select-list::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px;
}

.equip-select-item {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 13px;
}

.equip-select-item:hover {
    background: #3a3a3a;
}

.equip-select-item.selected {
    background: #4a4a6a;
    border: 1px solid #6a6aff;
}

.equip-select-item .item-name {
    color: #e0e0e0;
    font-weight: bold;
}

.equip-select-item .item-stats {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.equip-select-current {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 12px;
}

.equip-select-current .current-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.equip-select-current .current-name {
    font-size: 16px;
    font-weight: bold;
    color: #e0e0e0;
}

.equip-select-current .current-stats {
    font-size: 12px;
    color: #aaa;
    margin-top: 8px;
    text-align: center;
}

.equip-select-current .no-equip {
    color: #666;
    font-style: italic;
}

/* ---------- 通讯弹窗（底部） ---------- */
.dialog-popup {
    display: none;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid #666;
    border-radius: 10px;
    padding: 16px 48px 16px 16px;
    max-width: 500px;
    min-width: 360px;
    z-index: 20;
    animation: slideUp 0.3s ease-out;
}

.dialog-popup.active {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.dialog-popup .dialog-avatar {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    border: 2px solid #666;
    background: #3a3a3a;
    object-fit: cover;
    flex-shrink: 0;
}

.dialog-popup .dialog-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    border: 2px solid #666;
    background: #3a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #888;
    flex-shrink: 0;
}

.dialog-popup .dialog-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: #e0e0e0;
    white-space: pre-wrap;
}

.dialog-popup .dialog-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 28px;
    text-align: center;
}

.dialog-popup .dialog-close:hover {
    color: #fff;
}

/* ---------- 信息弹窗（无头像） ---------- */
.info-popup {
    border-color: #888;
}

.info-popup .dialog-text {
    width: 100%;
}

/* ---------- 通知 ---------- */
.notification-container {
    position: fixed;
    bottom: 130px;
    left: 12px;
    z-index: 200;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    pointer-events: none;
    max-width: 260px;
}

.notification-item {
    background: transparent;
    border: none;
    border-left: 3px solid #e0e0e0;
    border-radius: 0;
    padding: 2px 0 2px 10px;
    font-size: 14px;
    color: #e0e0e0;
    animation: notifFadeInOut 4s ease-in-out forwards;
    pointer-events: none;
    white-space: nowrap;
}

.notification-item .quality-1,
.notification-item .quality-2,
.notification-item .quality-3 {
    font-weight: 700;
}

.notification-center-item {
    position: fixed;
    top: calc(50% - var(--center-notification-offset, 0px));
    left: 50%;
    z-index: 260;
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 20px;
    transform: translate(-50%, -50%);
    animation: centerNotifFadeInOut 2.5s ease-in-out forwards;
}

@keyframes notifFadeInOut {
    0%   { opacity: 0; transform: translateY(10px); }
    10%  { opacity: 1; transform: translateY(0); }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes centerNotifFadeInOut {
    0%   { opacity: 0; transform: translate(-50%, -45%); }
    10%  { opacity: 1; transform: translate(-50%, -50%); }
    70%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -55%); }
}

/* ---------- 游戏结束 ---------- */
.gameover-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 300;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
}

.gameover-screen.active {
    display: flex;
    animation: gameoverFadeToBlack 2s ease-out forwards;
}

.gameover-screen .gameover-content {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    animation: gameoverContentFadeIn 1.2s ease-out 1.2s forwards;
}

.gameover-screen .gameover-text {
    font-size: 42px;
    font-weight: bold;
    color: #e0e0e0;
    margin-bottom: 16px;
    letter-spacing: 0.25em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.45);
}

.gameover-screen .gameover-sub {
    font-size: 16px;
    color: #999;
    margin-bottom: 32px;
}

.gameover-screen .btn {
    margin-top: 96px;
    opacity: 0;
    animation: gameoverContentFadeIn 1s ease-out 2s forwards;
}

@keyframes playerFaintToWhite {
    0% {
        background: #4a90d9;
        filter: brightness(1);
    }
    100% {
        background: #f5f5f5;
        border-color: #ffffff;
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.85);
        filter: brightness(1.25);
    }
}

@keyframes gameoverFadeToBlack {
    0% {
        opacity: 0;
        background: rgba(0, 0, 0, 0);
    }
    100% {
        opacity: 1;
        background: rgba(0, 0, 0, 0.9);
    }
}

@keyframes gameoverContentFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ---------- 结局画面 ---------- */
.ending-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 420;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
}

.ending-screen.active {
    display: flex;
    animation: gameoverFadeToBlack 2s ease-out forwards;
}

.ending-content {
    text-align: center;
    opacity: 0;
    animation: gameoverContentFadeIn 1.2s ease-out 1.2s forwards;
    padding: 24px;
}

.ending-title {
    font-size: 44px;
    font-weight: bold;
    color: #d8ffe3;
    letter-spacing: 0.22em;
    margin-bottom: 18px;
    text-shadow: 0 0 22px rgba(80, 255, 150, 0.4);
}

.ending-sub {
    font-size: 18px;
    color: #9fd8ae;
    margin-bottom: 36px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.ending-screen .btn {
    opacity: 0;
    animation: gameoverContentFadeIn 1s ease-out 2s forwards;
}

/* ---------- 坐标显示 ---------- */
.coord-display {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #888;
    z-index: 10;
    background: rgba(30, 30, 30, 0.8);
    padding: 4px 12px;
    border-radius: 4px;
    width: max-content;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}

.music-toggle-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 70;
    padding: 6px 14px;
    border: 1px solid #777;
    border-radius: 999px;
    background: rgba(30, 30, 30, 0.86);
    color: #e0e0e0;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.music-toggle-btn:hover {
    background: rgba(55, 55, 55, 0.92);
    border-color: #ddd;
}

.music-toggle-btn.music-off {
    color: #999;
    border-color: #555;
}

.bgm-toggle-btn {
    right: 96px;
}

#ui-game-time {
    color: inherit;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- 字幕播放 ---------- */
.cutscene-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-out, visibility 0s 1.2s;
}

.cutscene-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: none;
}

.cutscene-overlay.fading-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-out, visibility 0s 1.2s;
}

.cutscene-overlay:focus,
.story-subtitle-overlay:focus {
    outline: none;
}

.cutscene-text {
    font-size: 22px;
    color: #e0e0e0;
    text-align: center;
    line-height: 1.8;
    max-width: 600px;
    padding: 0 40px;
    animation: cutsceneFadeIn 0.8s ease-out;
}

.cutscene-hint {
    position: absolute;
    bottom: 60px;
    font-size: 14px;
    color: #666;
    animation: cutsceneBlink 1.5s ease-in-out infinite;
}

@keyframes cutsceneFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cutsceneBlink {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* ---------- 剧情房间字幕 ---------- */
.story-subtitle-overlay {
    position: fixed;
    inset: 0;
    z-index: 390;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s 0.6s;
}

.story-subtitle-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.story-subtitle-overlay.fading-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s 0.6s;
}

.story-subtitle-box {
    width: 40vw;
    min-height: 120px;
    padding: 28px 34px;
    background: rgba(20, 20, 20, 0.72);
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

.story-subtitle-text {
    color: #f0f0f0;
    font-size: 20px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    animation: cutsceneFadeIn 0.6s ease-out;
}

.story-subtitle-hint {
    margin-top: 18px;
    color: #aaa;
    font-size: 13px;
    animation: cutsceneBlink 1.5s ease-in-out infinite;
}

@media (max-width: 768px) {
    .story-subtitle-box {
        width: 70vw;
        min-width: 200px;
        padding: 20px 14px;
    }

    .story-subtitle-text {
        font-size: 16px;
    }
}

/* ---------- 快速前往弹窗 ---------- */
.quick-jump-box {
    max-width: 320px;
}

.quick-jump-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #3a3a3a;
    border-radius: 6px;
    font-size: 14px;
    color: #e0e0e0;
}

.quick-jump-info span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.quick-jump-info span span {
    font-weight: bold;
    color: #f80;
}

.quick-jump-input-wrapper {
    margin-bottom: 16px;
}

.quick-jump-input-wrapper input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #2a2a2a;
    color: #e0e0e0;
    outline: none;
    transition: border-color 0.2s;
}

.quick-jump-input-wrapper input:focus {
    border-color: #f80;
}

.quick-jump-input-wrapper input::placeholder {
    color: #888;
}

.quick-jump-box .modal-buttons {
    gap: 10px;
}

.quick-jump-box .modal-buttons .btn {
    padding: 8px 16px;
    font-size: 14px;
    min-width: 80px;
}

.quick-jump-box .dev-buttons {
    margin-bottom: 8px;
}

.quick-jump-box .dev-buttons .btn {
    width: 100%;
}

/* ---------- 开发者弹窗属性调整区域 ---------- */
.dev-modal-box {
    max-width: 380px;
}

.dev-attr-section {
    margin-top: 16px;
    padding: 12px;
    background: #3a3a3a;
    border-radius: 6px;
}

.dev-attr-title {
    font-size: 14px;
    color: #e0e0e0;
    margin-bottom: 12px;
    text-align: center;
    font-weight: bold;
}

.dev-attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.dev-attr-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dev-attr-item label {
    font-size: 12px;
    color: #aaa;
}

.dev-attr-item input {
    padding: 6px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a2a;
    color: #e0e0e0;
    font-size: 14px;
    width: 100%;
}

.dev-attr-item input:focus {
    border-color: #ffd700;
    outline: none;
}

.dev-attr-section .btn-gold {
    width: 100%;
    padding: 8px;
    font-size: 14px;
}

/* ========== DLC地图过渡动画 ========== */

/* 过渡遮罩层 */
.dlc-transition-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    background: #000;
}
.dlc-transition-overlay.fade-out {
    pointer-events: all;
    opacity: 1;
    transition: opacity 1.5s ease-in;
}
.dlc-transition-overlay.fade-in {
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

/* 白色线条容器 */
.dlc-white-lines {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 201;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.dlc-white-lines.active {
    opacity: 1;
}
.dlc-white-line {
    position: absolute;
    top: -35vh;
    width: 2px;
    height: 15vh;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8), transparent);
    animation: dlcWhiteLineFlow 0.6s linear forwards;
    opacity: 1;
}

@keyframes dlcWhiteLineFlow {
    0% { top: -35vh; }
    100% { top: 115vh; }
}

/* 房间退出动画 - 匀加速下落 */
.room-dlc-exit {
    animation: dlcRoomFallOut 1.5s ease-in forwards !important;
}
@keyframes dlcRoomFallOut {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(120vh); opacity: 0; }
}

/* 房间入场动画 - 匀减速下滑 */
.room-dlc-enter {
    animation: dlcRoomSlideIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes dlcRoomSlideIn {
    0% { transform: translateY(-120vh); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ---------- 标题页排行榜面板 ---------- */
.title-leaderboard-panel {
    width: 340px;
    min-height: 240px;
}

.leaderboard-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #666;
}

.leaderboard-tab {
    flex: 1;
    padding: 8px 0;
    font-size: 14px;
    border: none;
    background: #3a3a3a;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.leaderboard-tab.active {
    background: #555;
    color: #e0e0e0;
}

.leaderboard-tab:hover:not(.active) {
    background: #444;
    color: #ccc;
}

.leaderboard-list {
    max-height: 320px;
    overflow-y: auto;
}

.leaderboard-list::-webkit-scrollbar {
    width: 4px;
}

.leaderboard-list::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 2px;
}

.leaderboard-loading,
.leaderboard-empty {
    text-align: center;
    color: #888;
    padding: 20px 0;
    font-size: 14px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.lb-rank {
    width: 28px;
    font-weight: bold;
    color: #999;
}

.lb-rank-top {
    color: #e0c96a;
}

.lb-name {
    flex: 1;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-time {
    color: #888;
    font-variant-numeric: tabular-nums;
}

/* ---------- 结局上传区域 ---------- */
.ending-leaderboard-upload {
    text-align: center;
    margin-top: 16px;
    opacity: 0;
    animation: gameoverContentFadeIn 1s ease-out 2.5s forwards;
}

.ending-upload-title {
    font-size: 16px;
    color: #9fd8ae;
    margin-bottom: 10px;
}

.ending-upload-info {
    font-size: 13px;
    color: #7ab88a;
    margin-bottom: 10px;
}

.ending-upload-input {
    display: block;
    width: 200px;
    margin: 0 auto 10px;
    padding: 8px 12px;
    font-size: 15px;
    border: 1px solid #5a8a65;
    border-radius: 6px;
    background: rgba(30, 50, 35, 0.8);
    color: #e0e0e0;
    text-align: center;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.ending-upload-input:focus {
    border-color: #9fd8ae;
}

.ending-upload-input::placeholder {
    color: #6a9a75;
}

.ending-upload-result {
    font-size: 13px;
    color: #9fd8ae;
    margin-top: 6px;
    min-height: 18px;
}

/* ---------- 游戏中排行榜弹窗（模态） ---------- */
.game-leaderboard-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.game-leaderboard-modal.active {
    display: flex;
}

.game-leaderboard-box {
    background: #2a2a2a;
    border: 2px solid #666;
    border-radius: 12px;
    padding: 22px;
    width: 340px;
    max-height: 80vh;
    overflow-y: auto;
}