/* 区域布局 */
.player-area {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    height: auto; /* 改为自适应高度，防止重叠 */
}
/* 使用百分比定位，适应不同屏幕 */
.player-top { top: 2%; left: 50%; transform: translateX(-50%); width: 60%; } 
.player-bottom { bottom: 2%; left: 50%; transform: translateX(-50%); width: 90%; z-index: 20; } 
.player-left { left: 1%; top: 45%; transform: translateY(-50%); }
.player-right { right: 1%; top: 45%; transform: translateY(-50%); }

/* 手牌容器 */
.hand {
    display: flex;
    justify-content: center;
    height: var(--card-height); 
    width: 100%;
}
/* 动态计算重叠间距，防止牌多时溢出 */
.hand .card { 
    margin-left: calc(var(--card-width) * -0.6); 
    flex-shrink: 0; 
} 
.hand .card:first-child { margin-left: 0; }

/* 垂直手牌 (左右玩家) */
.hand-v {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 顶部对齐 */
    height: auto; /* 高度自适应 */
    width: var(--card-width);
    margin-top: 10px; /* 增加与头像的间距 */
}
.hand-v .card { 
    margin-top: calc(var(--card-height) * -0.7); 
    margin-left: 0; 
    flex-shrink: 0;
}
.hand-v .card:first-child { margin-top: 0; }

/* 玩家信息固定定位 (左下角) */
.player-profile-fixed.bottom-left {
    position: absolute;
    bottom: 20px; /* 移至底部 */
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 60; 
}

/* 出牌区容器 - 覆盖全屏 */
#play-area {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 30;
}

/* 单个出牌/状态区域 */
.play-top, .play-bottom, .play-left, .play-right {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--card-width) * 3);
    height: var(--card-height);
}

/* 具体位置 */
.play-top { top: 28%; left: 50%; transform: translateX(-50%); } 
.play-bottom { bottom: 32%; left: 50%; transform: translateX(-50%); } 
.play-left { left: 20%; top: 42%; transform: translateY(-50%); }
.play-right { right: 20%; top: 42%; transform: translateY(-50%); }

/* 出牌重叠效果 */
.play-top .card, .play-bottom .card, .play-left .card, .play-right .card { 
    margin-left: calc(var(--card-width) * -0.6); 
}
.play-top .card:first-child, .play-bottom .card:first-child, 
.play-left .card:first-child, .play-right .card:first-child { 
    margin-left: 0; 
}

/* 进贡中心区域 */
#tribute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 200;
    background: rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 10px;
    width: 80%; 
    max-width: 500px;
}

.tribute-msg {
    color: white;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
}

.tribute-cards {
    display: flex;
    gap: 20px;
}

.tribute-cards .card {
    transform: scale(1.0); /* 正常大小 */
    transition: transform 0.2s;
}

.tribute-cards .card:hover {
    transform: scale(1.1);
    border-color: gold;
}

/* 媒体查询：针对竖屏模式 (手机) */
@media (orientation: portrait) {
    /* 调整卡片大小 */
    :root {
        --card-width: 14vw;
        --card-height: 19vw;
    }

    /* 左右玩家手牌稍微靠边 */
    .player-left { left: 2px; }
    .player-right { right: 2px; }

    /* 出牌区位置调整 - 更靠边以防重叠 */
    .play-left { left: 15%; top: 40%; transform: translateY(-50%); }
    .play-right { right: 15%; top: 40%; transform: translateY(-50%); }
    .play-top { top: 25%; }
    .play-bottom { bottom: 35%; }
    
    /* 调整控制按钮位置 */
    #controls {
        bottom: 25%; 
        width: 90%;
        justify-content: center;
        gap: 10px;
    }
    
    /* 调整信息面板 - 竖屏右上角 */
    #info-panel {
        font-size: 12px;
        padding: 5px;
        max-width: 45%;
        top: 10px;
        right: 5px;
        bottom: auto;
        left: auto;
    }
    
    /* 记牌器缩小 - 竖屏左上角 */
    #card-counter {
        font-size: 10px;
        gap: 2px;
        max-width: 45%;
        top: 10px;
        left: 5px;
        right: auto;
    }

    /* 修复竖屏下手牌被头像遮挡的问题：将头像移至手牌上方 */
    .player-profile-fixed.bottom-left {
        bottom: calc(var(--card-height) + 15px);
        left: 10px;
        flex-direction: row; /* 改为横向排列 */
        gap: 8px;
    }
    .player-profile-fixed.bottom-left .player-name {
        margin-top: 0;
    }
}