/* Final H5 table polish. Loaded after style.css so it wins the cascade. */
#game .game-hud {
    top: clamp(14px, 2.55vh, 26px);
    grid-template-columns: repeat(4, clamp(80px, 6.1vw, 118px)) clamp(64px, 5vw, 90px);
}

#game.screen.active {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

#game .table-shell {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

#game .card-tracker-toggle {
    position: fixed;
    z-index: 60;
    right: clamp(16px, 4.8vw, 88px);
    bottom: clamp(10px, 2.1vh, 24px);
    min-width: clamp(84px, 7vw, 132px);
    min-height: clamp(34px, 5.5vh, 48px);
    padding: 0 clamp(10px, 1vw, 18px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(30, 76, 93, 0.96), rgba(18, 47, 60, 0.96));
    color: #fff7d0;
    font-weight: 900;
    font-size: clamp(12px, 1.02vw, 18px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

#game .card-tracker-toggle.active {
    border-color: rgba(236, 196, 92, 0.9);
    background: linear-gradient(180deg, #a47b12, #77580d);
}

#game .card-tracker-panel {
    position: fixed;
    z-index: 61;
    right: clamp(14px, 3.2vw, 68px);
    bottom: clamp(54px, 8.2vh, 92px);
    width: min(300px, 33vw);
    max-height: min(46vh, 320px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(236, 196, 92, 0.62);
    border-radius: 6px;
    background: rgba(7, 29, 31, 0.94);
    color: #fff7d0;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
}

#game .tracker-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 7px;
    font-weight: 900;
    font-size: 13px;
}

#game .tracker-title strong {
    color: #f3d56b;
    font-size: 16px;
}

#game .tracker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

#game .tracker-cell {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 24px;
    padding: 3px 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 11px;
}

#game .tracker-cell b,
#game .tracker-cell em {
    font-style: normal;
    line-height: 1;
}

#game .tracker-cell em {
    color: #f2d36d;
    font-weight: 900;
}

#game .tracker-cell.empty {
    opacity: 0.48;
}

@media (max-height: 390px) and (orientation: landscape) {
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    #game.screen.active,
    #game .table-shell {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
    }

    #game .table-felt {
        inset: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    #game .table-shell::before {
        top: 14vh !important;
        bottom: 5vh !important;
        left: 2.5vw !important;
        right: 2.5vw !important;
        border-radius: 10px !important;
    }

    #game .game-hud {
        top: 6px !important;
        left: clamp(56px, 9vw, 86px) !important;
        grid-template-columns: repeat(4, clamp(72px, 10vw, 96px)) clamp(56px, 7vw, 70px) !important;
        gap: 2px !important;
    }

    #game .game-hud .hud-item,
    #game .game-hud > .btn {
        height: 40px !important;
        min-height: 40px !important;
        padding: 2px 5px !important;
    }

    #game .game-hud .hud-item span {
        font-size: 10px !important;
    }

    #game .game-hud .hud-item strong {
        font-size: 15px !important;
    }

    #game .board-menu-btn {
        left: 3.5vw !important;
        top: 7px !important;
        width: 48px !important;
        height: 48px !important;
    }

    #game .landscape-btn {
        right: 3vw !important;
        top: 9px !important;
        width: 46px !important;
        height: 46px !important;
    }

    #game .connection-panel {
        display: none !important;
    }

    #game .side-tools {
        right: 4px !important;
        top: 42% !important;
        gap: 8px !important;
    }

    #game .side-tools button {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }

    #game .player-panel {
        width: 66px !important;
        height: 94px !important;
    }

    #game .player-panel .avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    #game .player-panel strong {
        font-size: 11px !important;
    }

    #game .player-panel span {
        font-size: 12px !important;
    }

    #game .opponent-left {
        left: 4.5vw !important;
        top: 110px !important;
    }

    #game .opponent-right {
        right: 4.5vw !important;
        top: 110px !important;
    }

    #game .opponent-top {
        left: 60% !important;
        top: 46px !important;
    }

    #game .kitty-cards,
    #game .koupai-cards {
        left: 14vw !important;
        top: 66px !important;
        transform: none !important;
    }

    #game .card-back,
    #game .card.small {
        width: 28px !important;
        height: 40px !important;
        flex-basis: 28px !important;
    }

    #game .played-slot {
        z-index: 14 !important;
        min-width: 42px !important;
        min-height: 40px !important;
    }

    #game .played-slot.top {
        top: 102px !important;
    }

    #game .played-slot.left {
        left: 25% !important;
        top: 48% !important;
    }

    #game .played-slot.right {
        right: 25% !important;
        top: 48% !important;
    }

    #game .played-slot.bottom {
        bottom: 112px !important;
    }

    #game .my-hand-area {
        left: 10vw !important;
        right: 10vw !important;
        bottom: 45px !important;
        min-height: 62px !important;
    }

    #game .my-info {
        height: 31px !important;
        padding-left: 13vw !important;
        padding-right: 31vw !important;
    }

    #game .my-hand {
        min-height: var(--hand-height, 60px) !important;
    }

    #game .my-hand .card .corner {
        top: 4px !important;
        left: 4px !important;
        justify-items: start !important;
    }

    #game .my-hand .card.long-rank .rank {
        letter-spacing: 0 !important;
    }

    #game .action-dock {
        right: 14vw !important;
        bottom: 6px !important;
        gap: 8px !important;
        min-height: 32px !important;
    }

    #game .action-dock .btn {
        min-width: 82px !important;
        min-height: 32px !important;
        padding: 4px 10px !important;
        font-size: 13px !important;
    }

    #game .card-tracker-toggle {
        right: 4vw !important;
        bottom: 6px !important;
        min-width: 86px !important;
        min-height: 32px !important;
        font-size: 12px !important;
    }

    #game .card-tracker-panel {
        right: 4vw !important;
        bottom: 44px !important;
        width: 210px !important;
        max-height: 178px !important;
        padding: 7px !important;
    }

    #game .tracker-title {
        margin-bottom: 5px !important;
        font-size: 12px !important;
    }

    #game .tracker-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    #game .tracker-cell {
        min-height: 20px !important;
        padding: 2px 4px !important;
        font-size: 10px !important;
    }
}

html.standalone-app,
body.standalone-app {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #0b2d28;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.standalone-app #game.screen.active,
body.standalone-app #game .table-shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

@supports (-webkit-touch-callout: none) {
    body.standalone-app #game.screen.active,
    body.standalone-app #game .table-shell {
        min-height: -webkit-fill-available !important;
    }
}

body.standalone-app #game .table-felt {
    inset: 0 !important;
    border-radius: 0 !important;
}

body.standalone-app #game .game-hud {
    top: max(6px, env(safe-area-inset-top)) !important;
}

body.standalone-app #game .board-menu-btn {
    left: max(3.5vw, env(safe-area-inset-left)) !important;
    top: max(7px, env(safe-area-inset-top)) !important;
}

body.standalone-app #game .landscape-btn {
    right: max(3vw, env(safe-area-inset-right)) !important;
    top: max(9px, env(safe-area-inset-top)) !important;
}

body.standalone-app #game .side-tools {
    right: max(4px, env(safe-area-inset-right)) !important;
}

body.standalone-app #game .action-dock,
body.standalone-app #game .card-tracker-toggle {
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
}

body.standalone-app #game .card-tracker-panel {
    bottom: calc(max(44px, env(safe-area-inset-bottom) + 38px)) !important;
}

body.standalone-app #game .my-hand-area {
    bottom: calc(max(45px, env(safe-area-inset-bottom) + 39px)) !important;
}

body.standalone-app #game .hand-prompt.visible {
    bottom: calc(max(109px, env(safe-area-inset-bottom) + 103px)) !important;
}

@media (orientation: landscape) {
    body.standalone-app #game .connection-panel {
        display: none !important;
    }

    body.standalone-app #game .table-shell {
        padding: 0 !important;
    }
}

#game .game-hud .hud-item,
#game .game-hud > .btn {
    height: clamp(48px, 6.8vh, 70px);
    min-height: clamp(48px, 6.8vh, 70px);
    padding: clamp(5px, 0.65vh, 8px) clamp(6px, 0.65vw, 10px);
}

#game .game-hud .hud-item span {
    font-size: clamp(11px, 1vw, 18px);
    line-height: 1.05;
}

#game .game-hud .hud-item strong {
    margin-top: clamp(1px, 0.28vh, 4px);
    width: 100%;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1;
}

#game #hudPhase {
    font-size: clamp(16px, 1.55vw, 24px);
}

#game #myBankerTag {
    display: none !important;
}

#game .game-hud > .btn {
    font-size: clamp(13px, 1.05vw, 18px);
}

#game .landscape-btn {
    font-size: 0;
}

#game .landscape-btn span {
    display: none;
}

#game .center-message {
    top: clamp(118px, 24.6vh, 236px);
    max-width: 66vw;
    white-space: nowrap;
    font-size: clamp(18px, 1.88vw, 36px);
    line-height: 1.08;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.34);
}

#game .player-panel.banker::before {
    content: none;
}

#game .player-panel .team-role {
    top: clamp(-18px, -2.15vh, -10px);
    left: clamp(-5px, -0.25vw, -2px);
    right: auto;
    height: clamp(20px, 2.9vh, 28px);
    min-width: clamp(54px, 4.4vw, 86px);
    padding: 0 clamp(5px, 0.55vw, 10px);
    border-radius: 2px;
    background: linear-gradient(180deg, #f47d55, #e9543d);
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

#game .player-panel .team-role::before {
    content: "\95F2  \5BF9\624B";
    color: #fff4c8;
    font-size: clamp(11px, 0.92vw, 18px);
    font-weight: 900;
    white-space: nowrap;
}

#game .opponent-left.banker .team-role::before,
#game .opponent-right.banker .team-role::before {
    content: "\5E84  \5BF9\624B";
}

#game .opponent-top .team-role {
    left: 0;
    right: 0;
    top: clamp(-16px, -2vh, -9px);
    min-width: 100%;
    background: linear-gradient(180deg, #3f96f3, #1f67c5);
}

#game .opponent-top .team-role::before {
    content: "\95F2  \961F\53CB";
    color: #fff;
}

#game .opponent-top.banker .team-role::before {
    content: "\5E84  \961F\53CB";
}

@media (max-height: 560px) and (orientation: landscape) {
    #game .game-hud {
        top: 10px;
        grid-template-columns: repeat(4, clamp(54px, 9vw, 84px)) clamp(52px, 7vw, 68px);
    }

    #game .game-hud .hud-item,
    #game .game-hud > .btn {
        height: clamp(40px, 10.2vh, 46px);
        min-height: clamp(40px, 10.2vh, 46px);
        padding: 3px 5px;
    }

    #game .game-hud .hud-item span {
        font-size: clamp(8px, 1.8vw, 11px);
    }

    #game .game-hud .hud-item strong {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(12px, 2.25vw, 15px);
    }

    #game .opponent-top {
        left: 61% !important;
        top: 10px !important;
    }

    #game .kitty-cards,
    #game .koupai-cards {
        left: clamp(122px, 13.8vw, 150px) !important;
        top: clamp(70px, 17vh, 92px) !important;
    }

    #game .trump-hint,
    #game .center-message {
        display: none !important;
    }

    #game .my-hand-area {
        left: 7vw !important;
        right: 7vw !important;
        bottom: 58px !important;
        min-height: 70px !important;
    }

    #game .my-info {
        height: 37px !important;
        bottom: 0 !important;
        padding-left: 13vw !important;
        padding-right: 31vw !important;
    }

    #game .action-dock {
        right: 11.5vw !important;
        bottom: 10px !important;
    }

    #game .action-dock .btn {
        min-height: 32px !important;
    }

    #game .player-panel .team-role::before {
        font-size: clamp(9px, 1.9vw, 13px);
    }
}

/* Last-pass overrides for the real WeChat landscape viewport, where the browser chrome
   leaves much less vertical room than desktop emulation. */
@media (max-height: 390px) and (orientation: landscape) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    #game.screen.active,
    #game .table-shell {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    #game .table-felt {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    #game .game-hud {
        top: 6px !important;
        left: clamp(56px, 9vw, 86px) !important;
        grid-template-columns: repeat(4, clamp(72px, 10vw, 96px)) clamp(56px, 7vw, 70px) !important;
        gap: 2px !important;
    }

    #game .game-hud .hud-item,
    #game .game-hud > .btn {
        height: 40px !important;
        min-height: 40px !important;
        padding: 2px 5px !important;
    }

    #game .board-menu-btn {
        left: 3.5vw !important;
        top: 7px !important;
        width: 48px !important;
        height: 48px !important;
    }

    #game .landscape-btn {
        right: 3vw !important;
        top: 9px !important;
        width: 46px !important;
        height: 46px !important;
    }

    #game .connection-panel {
        display: none !important;
    }

    #game .side-tools {
        right: 4px !important;
        top: 42% !important;
        gap: 8px !important;
    }

    #game .side-tools button {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }

    #game .player-panel {
        width: 66px !important;
        height: 94px !important;
        min-width: 0 !important;
        padding: 3px 4px !important;
    }

    #game .player-panel .avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    #game .player-panel strong {
        font-size: 11px !important;
    }

    #game .player-panel span {
        font-size: 12px !important;
    }

    #game .opponent-left {
        left: 4.5vw !important;
        top: 110px !important;
    }

    #game .opponent-right {
        right: 4.5vw !important;
        top: 110px !important;
    }

    #game .opponent-top {
        left: 60% !important;
        top: 46px !important;
    }

    #game .kitty-cards,
    #game .koupai-cards {
        left: 14vw !important;
        top: 66px !important;
        transform: none !important;
    }

    #game .played-slot.top {
        top: 102px !important;
    }

    #game .played-slot.left {
        left: 25% !important;
        top: 48% !important;
    }

    #game .played-slot.right {
        right: 25% !important;
        top: 48% !important;
    }

    #game .played-slot.bottom {
        bottom: 112px !important;
    }

    #game .my-hand-area {
        left: 10vw !important;
        right: 10vw !important;
        bottom: 45px !important;
        min-height: 62px !important;
    }

    #game .my-info {
        height: 31px !important;
        bottom: 0 !important;
        padding-left: 13vw !important;
        padding-right: 31vw !important;
    }

    #game .hand-prompt.visible {
        position: fixed !important;
        z-index: 58 !important;
        left: 36vw !important;
        right: 26vw !important;
        bottom: 109px !important;
        display: block !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 20px !important;
        padding: 3px 9px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: rgba(6, 72, 73, 0.84) !important;
        color: rgba(255, 255, 255, 0.82) !important;
        font-size: 10px !important;
        line-height: 14px !important;
        text-align: center !important;
    }

    #game .my-hand .card .corner {
        top: 4px !important;
        left: 4px !important;
        justify-items: start !important;
    }

    #game .action-dock {
        right: 14vw !important;
        bottom: 6px !important;
        gap: 8px !important;
        min-height: 32px !important;
    }

    #game .action-dock .btn {
        min-width: 82px !important;
        min-height: 32px !important;
        padding: 4px 10px !important;
        font-size: 13px !important;
    }

    #game .card-tracker-toggle {
        right: 4vw !important;
        bottom: 6px !important;
        min-width: 86px !important;
        min-height: 32px !important;
        font-size: 12px !important;
    }

    #game .card-tracker-panel {
        right: 4vw !important;
        bottom: 44px !important;
        width: 210px !important;
        max-height: 178px !important;
        padding: 7px !important;
    }
}

/* Final hand-card face tuning: match the mini-game fan style without wrapping ranks. */
#game .my-hand .card {
    box-sizing: border-box !important;
    border-radius: clamp(4px, 0.5vw, 7px) !important;
    border-color: rgba(35, 48, 50, 0.28) !important;
    background: linear-gradient(180deg, #fff 0%, #f7f6f2 62%, #eeeae4 100%) !important;
    overflow: hidden !important;
}

#game .my-hand .card .corner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-items: start !important;
    gap: 0 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: calc(100% - (var(--hand-card-pad, 5px) * 2)) !important;
    top: var(--hand-card-pad, 5px) !important;
    left: var(--hand-card-pad, 5px) !important;
}

#game .my-hand .card .rank,
#game .my-hand .card .suit {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
}

#game .my-hand .card:not(.joker-card) .rank {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    font-size: var(--hand-card-rank, 16px) !important;
    line-height: 0.92 !important;
    font-variant-numeric: tabular-nums !important;
}

#game .my-hand .card:not(.joker-card) .suit {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    font-size: var(--hand-card-suit, 15px) !important;
    line-height: 0.92 !important;
}

#game .my-hand .card.long-rank:not(.joker-card) .rank {
    font-size: max(12px, calc(var(--hand-card-rank, 16px) * 0.88)) !important;
}

#game .my-hand .card .pip {
    right: max(3px, calc(var(--hand-card-pad, 5px) * 0.8)) !important;
    bottom: max(3px, calc(var(--hand-card-pad, 5px) * 0.75)) !important;
    font-size: clamp(20px, calc(var(--hand-card-suit, 15px) * 2.2), 46px) !important;
    line-height: 1 !important;
    opacity: 0.94 !important;
}

#game .my-hand .card.joker-card .rank {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    white-space: normal !important;
    font-size: max(12px, calc(var(--hand-card-rank, 16px) * 0.86)) !important;
    line-height: 0.86 !important;
}

#game .my-hand .card.joker-card .suit {
    font-size: max(13px, calc(var(--hand-card-suit, 15px) * 0.95)) !important;
}

@media (orientation: landscape) {
    #game .my-hand-area {
        left: max(20px, calc(env(safe-area-inset-left) + 3.6vw)) !important;
        right: max(20px, calc(env(safe-area-inset-right) + 3.6vw)) !important;
    }
}

@media (orientation: landscape) and (max-height: 390px) {
    #game .my-hand-area {
        left: max(10px, calc(env(safe-area-inset-left) + 2vw)) !important;
        right: max(10px, calc(env(safe-area-inset-right) + 2vw)) !important;
    }
}

/* Safari landscape: keep every played trick visible above the hand. */
@media (orientation: landscape) and (max-height: 560px) {
    #game .center-play-area {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 16 !important;
        pointer-events: none !important;
    }

    #game .played-grid {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        z-index: 17 !important;
    }

    #game .played-slot {
        position: absolute !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: clamp(62px, 10.5vw, 92px) !important;
        min-height: clamp(44px, 12vh, 58px) !important;
        gap: 0 !important;
        z-index: 18 !important;
    }

    #game .played-slot.top {
        top: 29vh !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
    }

    #game .played-slot.left {
        top: 43vh !important;
        left: 34vw !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    #game .played-slot.right {
        top: 43vh !important;
        left: 66vw !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    #game .played-slot.bottom {
        top: 53vh !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
    }

    #game .played-slot .card {
        width: clamp(32px, 5.2vw, 46px) !important;
        height: clamp(46px, 13vh, 62px) !important;
        flex-basis: clamp(32px, 5.2vw, 46px) !important;
        margin-left: clamp(-10px, -1.2vw, -5px) !important;
        padding: 4px !important;
        border-radius: 5px !important;
    }

    #game .played-slot .card:first-child {
        margin-left: 0 !important;
    }

    #game .played-slot .card .corner {
        top: 4px !important;
        left: 4px !important;
    }

    #game .played-slot .card .rank,
    #game .played-slot .card .suit {
        font-size: clamp(10px, 1.9vw, 14px) !important;
        line-height: 0.96 !important;
        white-space: nowrap !important;
    }

    #game .played-slot .card .pip {
        right: 4px !important;
        bottom: 3px !important;
        font-size: clamp(18px, 4.5vw, 30px) !important;
    }

    #game .played-slot .empty-zone {
        font-size: clamp(10px, 1.7vw, 14px) !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

    #game .center-message {
        top: 27vh !important;
        z-index: 19 !important;
        pointer-events: none !important;
    }

    #game .trump-hint {
        top: 55vh !important;
        z-index: 19 !important;
    }

    #game .toast {
        bottom: 22vh !important;
        z-index: 60 !important;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    #game .played-slot.top {
        left: 47% !important;
    }
}

@media (orientation: landscape) and (max-height: 340px) {
    #game .played-slot.top {
        top: 27vh !important;
        left: 47% !important;
    }

    #game .played-slot.left,
    #game .played-slot.right {
        top: 40vh !important;
    }

    #game .played-slot.right {
        left: 72vw !important;
    }

    #game .played-slot.bottom {
        top: 44vh !important;
    }

    #game .played-slot .card {
        width: clamp(28px, 4.8vw, 38px) !important;
        height: clamp(40px, 12vh, 46px) !important;
        flex-basis: clamp(28px, 4.8vw, 38px) !important;
    }
}

/* Landscape-only game shell and integrated WebRTC intercom. */
.orientation-gate {
    display: none;
}

#game .landscape-btn,
#game .connection-panel {
    display: none !important;
}

.voice-remote-audio {
    position: fixed;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

#game .side-tools {
    z-index: 72 !important;
}

#game .voice-talk-button {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(40px, 4.4vw, 58px);
    height: clamp(40px, 4.4vw, 58px);
    padding: 0;
    border: 1px solid rgba(255, 248, 213, 0.36);
    border-radius: 50%;
    background: rgba(24, 45, 60, 0.94);
    color: #fff1ac;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#game .voice-talk-button::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(11, 39, 43, 0.94);
    border-radius: 50%;
    background: #79828a;
}

#game .voice-talk-button[data-state="connecting"]::after {
    background: #f0bd42;
    animation: voice-pulse 0.9s ease-in-out infinite alternate;
}

#game .voice-talk-button.online::after {
    background: #43d17e;
}

#game .voice-talk-button.active {
    border-color: #ffe594;
    background: #b7352e;
    color: #fff;
    transform: scale(0.96);
    box-shadow: 0 0 0 5px rgba(230, 74, 63, 0.22), 0 9px 22px rgba(0, 0, 0, 0.32);
}

#game .voice-talk-button.active::after {
    background: #fff;
}

#game .voice-talk-icon {
    position: absolute;
    width: 12px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 8px;
    opacity: 0;
}

#game .voice-talk-label {
    font-size: clamp(18px, 2vw, 27px);
    font-weight: 900;
    line-height: 1;
}

@keyframes voice-pulse {
    from {
        opacity: 0.45;
    }
    to {
        opacity: 1;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    #game .table-felt {
        overflow: hidden !important;
    }

    #game .my-hand-area {
        z-index: 38 !important;
        left: max(10px, calc(env(safe-area-inset-left) + 2.4vw)) !important;
        right: max(10px, calc(env(safe-area-inset-right) + 2.4vw)) !important;
        bottom: max(42px, calc(env(safe-area-inset-bottom) + 34px)) !important;
    }

    #game .my-hand {
        overflow: visible !important;
    }

    #game .played-grid {
        z-index: 24 !important;
    }

    #game .played-slot {
        z-index: 25 !important;
    }

    #game .played-slot.top {
        top: 27vh !important;
        left: 47% !important;
    }

    #game .played-slot.left {
        top: 40vh !important;
        left: 33vw !important;
    }

    #game .played-slot.right {
        top: 40vh !important;
        left: 67vw !important;
    }

    #game .played-slot.bottom {
        top: 50vh !important;
        left: 50% !important;
    }

    #game .center-message {
        top: 23vh !important;
        max-width: 38vw !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #game .trump-hint {
        top: 57vh !important;
        max-width: 48vw !important;
    }

    #game .side-tools {
        right: max(4px, env(safe-area-inset-right)) !important;
        top: 43% !important;
        gap: 0 !important;
    }

    #game .voice-talk-button {
        width: 40px !important;
        height: 40px !important;
    }

    #game .voice-talk-label {
        font-size: 18px !important;
    }
}

@media (orientation: landscape) and (max-height: 350px) {
    #game .played-slot.top {
        top: 25vh !important;
    }

    #game .played-slot.left,
    #game .played-slot.right {
        top: 37vh !important;
    }

    #game .played-slot.bottom {
        top: 46vh !important;
    }

    #game .trump-hint {
        top: 54vh !important;
    }

    #game .my-hand-area {
        bottom: max(38px, calc(env(safe-area-inset-bottom) + 30px)) !important;
    }
}

@media (orientation: portrait) and (max-width: 900px) {
    body.game-active {
        overflow: hidden !important;
        background: #102c29;
    }

    body.game-active #game {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.game-active .orientation-gate {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
        background:
            linear-gradient(rgba(7, 38, 35, 0.78), rgba(7, 38, 35, 0.88)),
            radial-gradient(circle at 50% 42%, #168b7b, #0a3632 70%);
        color: #fff7d2;
        text-align: center;
    }

    body.game-active .orientation-gate strong {
        font-size: 24px;
        letter-spacing: 0;
    }

    body.game-active .orientation-gate span {
        color: rgba(255, 255, 255, 0.72);
        font-size: 14px;
    }

    .orientation-phone {
        width: 54px;
        height: 88px;
        margin-bottom: 18px;
        border: 4px solid #f2d36d;
        border-radius: 10px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
        animation: rotate-phone 1.8s ease-in-out infinite;
    }

    .orientation-phone::after {
        content: "";
        display: block;
        width: 18px;
        height: 3px;
        margin: 75px auto 0;
        border-radius: 3px;
        background: #f2d36d;
    }
}

@keyframes rotate-phone {
    0%,
    20% {
        transform: rotate(0deg);
    }
    70%,
    100% {
        transform: rotate(90deg);
    }
}

/* Account entry and statistics UI. */
.auth-shell {
    width: min(980px, calc(100vw - 32px));
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
    align-items: center;
    gap: 30px;
    padding: 28px 0;
}

.auth-brand h1 {
    margin: 10px 0 12px;
    color: #fff;
    font-size: clamp(48px, 8vw, 88px);
    line-height: 1;
}

.auth-brand p {
    max-width: 520px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.7;
}

.auth-card {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(246, 241, 231, 0.98);
    color: #12201f;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.36);
}

.auth-card .field[hidden] {
    display: none !important;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 22px;
    border-bottom: 1px solid #d7d0c3;
}

.auth-tab {
    min-height: 42px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #69736f;
    font-weight: 900;
}

.auth-tab.active {
    border-bottom-color: #9c352f;
    color: #9c352f;
}

.auth-error {
    min-height: 22px;
    margin: 12px 0 0;
    color: #a62f2b;
    font-size: 13px;
    line-height: 1.5;
}

.account-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -4px 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ded6ca;
}

.account-strip span,
.account-strip strong {
    display: block;
}

.account-strip span {
    font-size: 17px;
    font-weight: 900;
}

.account-strip strong {
    margin-top: 3px;
    color: #68746f;
    font-size: 12px;
}

.account-actions {
    display: flex;
    gap: 8px;
}

.difficulty-field {
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.difficulty-field legend {
    margin-bottom: 8px;
    color: #65736e;
    font-size: 14px;
}

.difficulty-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid #d8d2c6;
    border-radius: 7px;
    background: #ece6da;
}

.difficulty-control label {
    min-width: 0;
}

.difficulty-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.difficulty-control span {
    min-height: 38px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #58655f;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.difficulty-control input:checked + span {
    border-color: #b7832b;
    background: #fffaf0;
    color: #7d2f29;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.admin-modal-content {
    width: min(920px, calc(100vw - 28px));
    max-height: min(82vh, 720px);
    overflow: hidden;
}

.modal-kicker {
    color: #9c352f;
    font-size: 12px;
    font-weight: 900;
}

.admin-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px 0;
}

.admin-summary > div {
    padding: 12px;
    border: 1px solid #ddd5c8;
    border-radius: 6px;
    background: #fffdf8;
}

.admin-summary span,
.admin-summary strong {
    display: block;
}

.admin-summary span {
    color: #69736f;
    font-size: 12px;
}

.admin-summary strong {
    margin-top: 4px;
    font-size: 22px;
}

.admin-table-wrap {
    max-height: 52vh;
    overflow: auto;
    border: 1px solid #ddd5c8;
    border-radius: 6px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th,
.admin-table td {
    padding: 10px;
    border-bottom: 1px solid #e3ddd2;
    text-align: right;
    white-space: nowrap;
}

.admin-table th:first-child,
.admin-table td:first-child {
    text-align: left;
}

.admin-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eee7db;
}

.admin-table td small {
    display: block;
    margin-top: 2px;
    color: #78827d;
}

@media (max-width: 760px) {
    .auth-shell {
        width: min(430px, calc(100vw - 24px));
        grid-template-columns: 1fr;
        align-content: center;
        gap: 18px;
        padding: 20px 0;
    }

    .auth-brand {
        text-align: center;
    }

    .auth-brand h1 {
        font-size: 44px;
    }

    .auth-brand p {
        font-size: 14px;
    }

    .auth-card {
        padding: 18px;
    }

    .account-strip {
        align-items: flex-start;
    }

    .account-actions {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* iPhone 15/15 Pro Safari landscape: reserve independent bands for HUD,
   table actions, played cards, hand cards, and bottom controls. */
@media (orientation: landscape) and (max-height: 430px) and (max-width: 940px) {
    #game .game-hud {
        top: max(5px, env(safe-area-inset-top)) !important;
        left: max(54px, calc(env(safe-area-inset-left) + 52px)) !important;
        grid-template-columns: repeat(4, minmax(68px, 88px)) minmax(56px, 66px) !important;
        gap: 2px !important;
    }

    #game .game-hud .hud-item,
    #game .game-hud > .btn {
        height: 38px !important;
        min-height: 38px !important;
        padding: 2px 4px !important;
    }

    #game .game-hud .hud-item span {
        font-size: 9px !important;
    }

    #game .game-hud .hud-item strong {
        margin-top: 1px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        word-break: keep-all !important;
        white-space: nowrap !important;
    }

    #game #hudPhase {
        font-size: 12px !important;
    }

    #game .board-menu-btn {
        left: max(5px, env(safe-area-inset-left)) !important;
        top: max(5px, env(safe-area-inset-top)) !important;
        width: 44px !important;
        height: 44px !important;
    }

    #game .player-panel {
        width: 62px !important;
        height: 86px !important;
        padding: 17px 4px 4px !important;
    }

    #game .player-panel .avatar {
        width: 43px !important;
        min-width: 43px !important;
        height: 43px !important;
    }

    #game .player-panel strong {
        font-size: 10px !important;
    }

    #game .player-panel span {
        font-size: 10px !important;
    }

    #game .player-panel .team-role {
        height: 18px !important;
        min-width: 48px !important;
    }

    #game .player-panel .team-role::before {
        font-size: 9px !important;
    }

    #game .opponent-top {
        left: 62% !important;
        top: 43px !important;
    }

    #game .opponent-left {
        left: max(16px, calc(env(safe-area-inset-left) + 10px)) !important;
        top: 108px !important;
    }

    #game .opponent-right {
        right: max(18px, calc(env(safe-area-inset-right) + 12px)) !important;
        top: 108px !important;
    }

    #game .kitty-cards,
    #game .koupai-cards {
        left: max(86px, calc(env(safe-area-inset-left) + 82px)) !important;
        top: 57px !important;
        max-width: 160px !important;
    }

    #game .kitty-label,
    #game .koupai-label {
        font-size: 10px !important;
    }

    #game .center-message,
    #game .trump-hint,
    #game .liangzhu-display {
        display: none !important;
    }

    #game .played-slot.top {
        top: 105px !important;
        left: 50% !important;
    }

    #game .played-slot.left {
        top: 166px !important;
        left: 35% !important;
    }

    #game .played-slot.right {
        top: 166px !important;
        left: 65% !important;
    }

    #game .played-slot.bottom {
        top: 205px !important;
        left: 50% !important;
    }

    #game .played-slot .card {
        width: 34px !important;
        height: 49px !important;
        flex-basis: 34px !important;
        margin-left: -7px !important;
        padding: 3px !important;
    }

    #game .played-slot .card .rank,
    #game .played-slot .card .suit {
        font-size: 11px !important;
    }

    #game .played-slot .card .pip {
        font-size: 21px !important;
    }

    #game .my-hand-area {
        left: max(54px, calc(env(safe-area-inset-left) + 48px)) !important;
        right: max(54px, calc(env(safe-area-inset-right) + 48px)) !important;
        bottom: max(43px, calc(env(safe-area-inset-bottom) + 37px)) !important;
        min-height: 76px !important;
    }

    #game .my-info {
        left: max(4px, env(safe-area-inset-left)) !important;
        right: max(4px, env(safe-area-inset-right)) !important;
        height: max(38px, calc(env(safe-area-inset-bottom) + 34px)) !important;
        padding: 0 250px 0 98px !important;
    }

    #game .my-info::before {
        width: 54px !important;
        height: 54px !important;
        bottom: 2px !important;
    }

    #game .my-info strong {
        font-size: 16px !important;
    }

    #game .my-info span {
        font-size: 12px !important;
    }

    #game .hand-prompt.visible {
        position: fixed !important;
        left: 30vw !important;
        right: 28vw !important;
        bottom: max(43px, calc(env(safe-area-inset-bottom) + 37px)) !important;
        height: 18px !important;
        overflow: hidden !important;
        padding: 2px 7px !important;
        background: rgba(5, 73, 72, 0.9) !important;
        font-size: 9px !important;
        line-height: 14px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #game .action-dock {
        right: max(104px, calc(env(safe-area-inset-right) + 98px)) !important;
        bottom: max(4px, env(safe-area-inset-bottom)) !important;
        gap: 6px !important;
    }

    #game .action-dock .btn {
        min-width: 78px !important;
        min-height: 32px !important;
        padding: 0 9px !important;
        font-size: 12px !important;
    }

    #game .card-tracker-toggle {
        right: max(5px, env(safe-area-inset-right)) !important;
        bottom: max(4px, env(safe-area-inset-bottom)) !important;
        min-width: 92px !important;
        min-height: 32px !important;
    }

    #game .card-tracker-panel {
        right: max(5px, env(safe-area-inset-right)) !important;
        bottom: max(41px, calc(env(safe-area-inset-bottom) + 37px)) !important;
        width: 205px !important;
        max-height: 176px !important;
    }

    #game .side-tools {
        right: max(3px, env(safe-area-inset-right)) !important;
        top: 44% !important;
    }
}