/* 核心防抖与禁止页面滚动，启用全屏沉浸 */
body {
    background-color: #11311d;
    font-family: 'PingFang SC', sans-serif;
    overflow: hidden;
    touch-action: none;
    margin: 0;
    padding: 0;
    /* svh：剔除移动端动态地址栏，防止内容被截断 */
    height: 100vh;
    height: 100svh;
}

/* 竖/横屏通用：高度减去顶部栏48px，居中桌面区 */
.table-wrapper {
    width: 100%;
    height: calc(100vh - 48px);
    height: calc(100svh - 48px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* iPhone 刘海 / Home 条安全区 */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mahjong-table {
    position: relative;
    width: 100%;
    max-width: min(100vw, calc(100vh - 48px));
    height: 100%;
    max-height: min(100vw, calc(100vh - 48px));
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    /* 增加一个基础宽度变量供回退使用 */
    --cw: min(100vw, calc(100vh - 48px));
}
/* svh 支持时使用更精准的视口单位 */
@supports (height: 100svh) {
    .mahjong-table {
        max-width: min(100svw, calc(100svh - 48px));
        max-height: min(100svw, calc(100svh - 48px));
    }
}

/* 基础牌样式：增加 overflow-hidden 防止旋转后溢出白边 */
.mj-tile {
    position: relative;
    border-radius: 4px;
    border: 1px solid #9ca3af;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), 0 -1px 1px inset rgba(0, 0, 0, 0.3);
    user-select: none;
    flex-shrink: 0;
    background: #fdfdfd;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.mj-tile img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    object-fit: fill;
}

/* ========================================================
   分级尺寸控制 (引入倒置宽高引擎解决侧边拉伸Bug)
   ======================================================== */

/* 1. 本家 (Self) 尺寸 */
.tile-self-hand {
    width: calc(var(--cw) * 0.065);
    height: calc(var(--cw) * 0.092);
    margin: 0 calc(var(--cw) * 0.0025);
    cursor: pointer;
    transition: transform 0.1s;
}

.tile-self-meld {
    width: calc(var(--cw) * 0.055);
    height: calc(var(--cw) * 0.078);
    margin: 0 calc(var(--cw) * 0.0025);
}

.tile-self-discard {
    width: calc(var(--cw) * 0.048);
    height: calc(var(--cw) * 0.068);
}

/* 2. 对家 (Top) 尺寸 */
.tile-opp-h-hand {
    width: calc(var(--cw) * 0.038);
    height: calc(var(--cw) * 0.054);
    margin: 0 calc(var(--cw) * 0.002);
}

.tile-opp-h-meld {
    width: calc(var(--cw) * 0.038);
    height: calc(var(--cw) * 0.054);
    margin: 0 calc(var(--cw) * 0.002);
}

.tile-opp-h-discard {
    width: calc(var(--cw) * 0.037);
    height: calc(var(--cw) * 0.052);
}

/* 3. 侧边 (Left/Right) 尺寸 - 宽长互换并传递给内部图片 */
.tile-opp-v-hand {
    width: calc(var(--cw) * 0.054);
    height: calc(var(--cw) * 0.038);
    --vw: calc(var(--cw) * 0.054);
    --vh: calc(var(--cw) * 0.038);
    margin: calc(var(--cw) * 0.001) 0;
}

.tile-opp-v-meld {
    width: calc(var(--cw) * 0.054);
    height: calc(var(--cw) * 0.038);
    --vh: calc(var(--cw) * 0.038);
    margin: calc(var(--cw) * 0.001) 0;
}

.tile-opp-v-discard {
    width: calc(var(--cw) * 0.052);
    height: calc(var(--cw) * 0.037);
    margin: calc(var(--cw) * 0.002) 0;
    --vw: calc(var(--cw) * 0.052);
    --vh: calc(var(--cw) * 0.037);
}

/* 4. 结算页面专属尺寸 (改为固定 px，彻底脱离 cqi 容器依赖) */
.tile-res-hand {
    width: 24px;
    height: 34px;
    margin: 0 1px;
}

.tile-res-meld {
    width: 22px;
    height: 31px;
    margin: 0 1px;
}

@media (min-width: 640px) {
    .tile-res-hand {
        width: 32px;
        height: 46px;
        margin: 0 2px;
    }

    .tile-res-meld {
        width: 28px;
        height: 40px;
        margin: 0 2px;
    }
}

/* 5. 鸣牌交互提示框专属目标牌尺寸 */
.tile-action-target {
    width: 32px;
    height: 46px;
}

@media (min-width: 640px) {
    .tile-action-target {
        width: 44px;
        height: 62px;
    }
}

/* 完美的侧边图片旋转：宽高对调，防止红底被压缩挤占 */
.rot-left,
.rot-right {
    position: absolute;
    width: var(--vh) !important;
    height: var(--vw) !important;
}

.rot-top {
    transform: rotate(180deg);
}

.rot-left {
    transform: rotate(90deg);
}

.rot-right {
    transform: rotate(-90deg);
}

/* 状态与交互 */
.tile-self-hand.disabled {
    pointer-events: none;
    filter: brightness(0.85);
}

.tile-self-hand:not(.disabled):hover {
    transform: translateY(-10%);
}

.tile-self-hand.selected {
    transform: translateY(-20%) scale(1.05);
    border-color: #fbbf24;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0px -2px 0px #fbbf24 inset;
    z-index: 30;
}

/* 摸牌间隙 */
.drawn-gap-h {
    margin-left: calc(var(--cw) * 0.015) !important;
}

.drawn-gap-v-left {
    margin-bottom: calc(var(--cw) * 0.015) !important;
}

.drawn-gap-v-right {
    margin-top: calc(var(--cw) * 0.015) !important;
}

/* 牌河网格：每排最多 8 张 */
.discard-river-h {
    display: grid;
    grid-template-columns: repeat(8, auto); /* 从 10 改为 8 */
    gap: 0.5px;
    justify-content: center;
    align-content: center;
}

.discard-river-v {
    display: grid;
    grid-template-rows: repeat(8, auto); /* 从 10 改为 8 */
    grid-auto-flow: column;
    gap: 0.5px;
    justify-content: center;
    align-content: center;
}

.player-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-name-main {
    max-width: calc(var(--cw) * 0.42);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-name-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb; /* 从 vertical-rl 改为水平 */
    text-orientation: mixed;
    letter-spacing: normal;
    width: calc(var(--cw) * 0.06); /* 限制宽度防止越界 */
    overflow: hidden;
    line-height: 1.2;
}

.dealer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 9999px;
    border: 1px solid rgba(250, 204, 21, 0.7);
    background: rgba(120, 53, 15, 0.7);
    color: #fcd34d;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    writing-mode: horizontal-tb;
}

.rtl-grid {
    direction: rtl;
}

/* 【优化2】减弱明牌区域底色与包裹：更柔和的线条 */
.meld-zone {
    background: rgba(0, 0, 0, 0.25);
    padding: calc(var(--cw) * 0.003);
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    /* 减弱了绿色边框的粗细和不透明度 */
    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: center;
}

.fa-zone {
    background: rgba(133, 77, 14, 0.3);
    border: 1px solid rgba(234, 179, 8, 0.5) !important;
    /* 减弱了发财边框的粗细和不透明度 */
}

/* 动画过度 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

/* ===================================================
   竖屏优化：桌面不强制正方形，充分利用屏幕高度
   原理：cqi = 容器宽度%，此值不变，tile 尺寸不受影响。
   效果：桌面撑满全高，玩家区域仍锚定四边，中间更宽敞。
   ================================================= */
@media (orientation: portrait) {
    .mahjong-table {
        max-width: 100%;
        max-height: none;
        height: 100%;
        aspect-ratio: auto;
    }
    /* 行动按钮靠近底部手牌区，不要浮在屏幕中部 */
    .action-panel {
        bottom: 14%;
    }
}

/* ===================================================
   横屏小屏（手机横屏，高度 < 480px）
   轻微压缩本家手牌，为行动按钮腾出空间
   ================================================= */
@media (orientation: landscape) and (max-height: 480px) {
    .tile-self-hand {
        width: calc(var(--cw) * 0.06);
        height: calc(var(--cw) * 0.084);
    }
    .tile-self-meld {
        width: calc(var(--cw) * 0.05);
        height: calc(var(--cw) * 0.07);
    }
    .tile-self-discard {
        width: calc(var(--cw) * 0.044);
        height: calc(var(--cw) * 0.062);
    }
}

/* ===================================================
   全局触控优化：消除移动端 300ms 点击延迟
   ================================================= */
button, [role="button"], .mj-tile {
    touch-action: manipulation;
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.5);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
}

/* 强制隐藏默认滚动条但保持可滚动 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (orientation: landscape) and (max-height: 500px) {
    .mahjong-table {
        max-width: 100%;
        aspect-ratio: auto;
    }

    .bottom-\[calc(var(--cw) * 0.02)\] {
        transform: scale(1.35);
        transform-origin: bottom center;
        bottom: 0 !important;
        z-index: 50;
    }

    .discard-river-h, .discard-river-v {
        transform: scale(0.85);
    }

    .tile-self-hand {
        margin: 0 calc(var(--cw) * 0.004);
    }
}