/* ============ 游戏桌台（横屏 / 竖屏 / 桌面自适应） ============ */
.table {
    --cw: 46px;   /* 牌宽 */
    --ch: 66px;   /* 牌高 */
    --ctl-h: 50px;
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(255, 255, 255, .08), transparent 60%),
        linear-gradient(160deg, #0e5c3a, #0a4a2f 55%, #0c5536);
    color: #fff;
    user-select: none;
}
/* 桌面（宽屏） */
@media (min-width: 1024px) {
    .table { --cw: 54px; --ch: 76px; }
}
/* 手机横屏（矮屏） */
@media (orientation: landscape) and (max-height: 720px) {
    .table { --cw: 36px; --ch: 51px; }
}
/* 手机竖屏 */
@media (orientation: portrait) and (max-width: 767px) {
    .table { --cw: 34px; --ch: 48px; }
}
@media (orientation: portrait) and (max-width: 380px) {
    .table { --cw: 30px; --ch: 42px; }
}

/* ---------------- 顶部信息条 ---------------- */
.ginfo {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 14px;
    padding: 8px 14px; font-size: 13px;
    background: rgba(0, 0, 0, .22); backdrop-filter: blur(2px);
}
.ginfo .gmode { margin-left: auto; font-size: 12px; opacity: .85; }

/* ---------------- 座位 ---------------- */
.seat {
    position: absolute;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    padding: 6px 10px;
    min-width: 128px;
    max-width: 190px;
    text-align: center;
    font-size: 13px;
    transition: border-color .2s;
    z-index: 5;
}
.seat.act { border-color: #ffd166; box-shadow: 0 0 12px rgba(255, 209, 102, .5); }
.sname { font-weight: 600; font-size: 14px; line-height: 1.4; }
.scount { font-size: 12px; opacity: .85; margin-top: 2px; }
.sbid { font-size: 12px; color: #ffd166; margin-top: 2px; }
.sclock { font-size: 13px; color: #ffd166; font-weight: 700; margin-top: 2px; }
.sclock.warn { color: #f87171; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.badge-land, .badge-ai, .badge-bot {
    font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: 1px;
}
.badge-land { background: #f59e0b; color: #1f2937; }
.badge-ai { background: #f87171; color: #fff; }
.badge-bot { background: #64748b; color: #fff; }
/* 每位玩家最后出的牌 */
.slast { display: flex; justify-content: center; margin-top: 4px; min-height: 30px; flex-wrap: wrap; }
.slast .card { --cw: 24px; --ch: 34px; margin-left: calc(var(--cw) * -0.5); }
.slast .card:first-child { margin-left: 0; }

/* 座位摆放：桌面/横屏 —— 左、右、下 */
.seat-self {
    bottom: calc(var(--ch) + var(--ctl-h) + 10px);
    left: 50%;
    transform: translateX(-50%);
}
.seat-left {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.seat-right {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
/* 竖屏手机：对家在左上/右上 */
@media (orientation: portrait) and (max-width: 767px) {
    .seat { padding: 4px 8px; min-width: 96px; font-size: 12px; }
    .seat-self { bottom: calc(var(--ch) + var(--ctl-h) + 8px); }
    .seat-left { left: 6px; top: 52px; transform: none; }
    .seat-right { right: 6px; top: 52px; transform: none; }
    .seat .slast { display: none; } /* 竖屏收起对手出牌区，节省空间 */
}

/* ---------------- 中央区域 ---------------- */
.center {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -55%);
    text-align: center;
    max-width: 62%;
    z-index: 3;
}
.center-cards { display: flex; justify-content: center; flex-wrap: wrap; min-height: 64px; }
.center-cards .card { --cw: 30px; --ch: 42px; margin-left: calc(var(--cw) * -0.5); }
.center-cards .card:first-child { margin-left: 0; }
.dizhu { font-size: 13px; margin-bottom: 6px; opacity: .9; letter-spacing: 2px; }
.center-tip { font-size: 14px; color: #ffd166; margin: 10px 0; }
.log {
    margin-top: 10px; font-size: 12px; color: #d1fae5; opacity: .95;
    max-height: 84px; overflow: hidden; line-height: 1.7;
}
.log div:first-child { color: #fff; }

/* ---------------- 手牌区 ---------------- */
.hand {
    position: absolute;
    bottom: calc(var(--ctl-h) + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    white-space: nowrap;
    z-index: 10;
}
.hand .card { margin-left: calc(var(--cw) * -0.62); }
.hand .card:first-child { margin-left: 0; }
.hand .card.sel { transform: translateY(-16px); }
.hand .card.sel { box-shadow: 0 0 0 2px #ffd166, 0 6px 10px rgba(0,0,0,.35); }

/* ---------------- 操作区 ---------------- */
.controls {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    min-height: var(--ctl-h);
    z-index: 11;
    background: rgba(0, 0, 0, .18);
    padding: 6px 14px;
    border-radius: 12px;
}
.controls .btn { min-width: 76px; }
.ctip { color: #fff; font-size: 14px; }

/* ---------------- 结算浮层 ---------------- */
.overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .6);
    display: flex; align-items: center; justify-content: center;
    z-index: 50;
}
.result {
    background: #fff; color: #1f2937;
    border-radius: 16px; padding: 28px 36px; text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    max-width: 90vw;
}
.result h2 { font-size: 26px; margin-bottom: 10px; }
.result.win h2 { color: #16a34a; }
.result.lose h2 { color: #dc2626; }
.rcoins { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.rdetail { font-size: 13px; color: #6b7280; margin-bottom: 18px; }
.rbtns { display: flex; gap: 12px; justify-content: center; }

/* ---------------- 牌面 ---------------- */
.card {
    width: var(--cw);
    height: var(--ch);
    background: linear-gradient(170deg, #ffffff, #f0f2f6);
    border: 1px solid #c3cad4;
    border-radius: 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    transition: transform .12s;
    display: inline-block;
    vertical-align: bottom;
}
.card .cr {
    position: absolute; top: 3px; left: 5px;
    font-weight: 800; font-size: calc(var(--cw) * 0.36);
    color: #1f2937; line-height: 1;
}
.card .cs {
    position: absolute; bottom: 3px; right: 5px;
    font-size: calc(var(--cw) * 0.3); line-height: 1;
}
.card .cr.red, .card .cs.red { color: #dc2626; }
.c-joker {
    background: linear-gradient(170deg, #3b3f46, #17181b);
    border-color: #0f1013;
}
.c-joker .cr, .c-joker .cs { color: #ffd166; }
.c-joker-big .cr, .c-joker-big .cs { color: #f87171; }
.c-joker .cr { left: 50%; top: 50%; transform: translate(-50%, -60%); font-size: calc(var(--cw) * 0.34); }
.c-joker .cs { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, 20%); font-size: calc(var(--cw) * 0.3); }