body {
    margin: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: white;
}

/* ==================== Notification System (Glassmorphism) ==================== */
#notification-area {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.toast {
    min-width: 250px;
    margin-bottom: 15px;
    padding: 16px 24px;
    border-radius: 12px;
    background: rgba(20, 20, 30, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    animation: toastSlideIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-left: 4px solid #fff;
}

.toast.info {
    border-left-color: #2196F3;
}

.toast.success {
    border-left-color: #00e676;
}

.toast.error {
    border-left-color: #ff1744;
    background: rgba(40, 10, 10, 0.7);
    border-color: rgba(255, 23, 68, 0.3);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Legacy Login UI Removed - Using Tailwind Overlay in index.html */

#game-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    /* Restore Premium Mahjong Felt Gradient */
    background: radial-gradient(circle at center, #2e8b57 0%, #1a5235 100%);
}

.player-area {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Positioning */
.top {
    top: 0;
    left: 20%;
    right: 20%;
    height: 150px;
    flex-direction: column-reverse;
}

.bottom {
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 180px;
    justify-content: flex-end;
}

.left {
    top: 15%;
    bottom: 15%;
    left: 0;
    width: 150px;
    flex-direction: row-reverse;
}

.right {
    top: 15%;
    bottom: 15%;
    right: 0;
    width: 150px;
    flex-direction: row;
}

.center-table {
    position: absolute;
    top: 28%;
    bottom: 28%;
    left: 28%;
    right: 28%;
    /* Darker felt area for focus */
    background: radial-gradient(circle at center, rgba(30, 80, 50, 0.85), rgba(0, 30, 15, 0.95));
    border-radius: 30px;
    /* Sunken Deep Shadow Effect */
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.7),
        /* Inner depth */
        0 0 20px rgba(0, 0, 0, 0.3);
    /* Outer shadow */
    border: 3px solid rgba(255, 255, 255, 0.15);
    /* Changed from flex to allow absolute positioning of discards */
    display: block;
    backdrop-filter: blur(5px);
}

/* Center content wrapper for deck info and turn info */
.center-table #deck-info,
.center-table #turn-info,
.center-table #start-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.center-table #deck-info {
    top: 40%;
}

.center-table #turn-info {
    top: 50%;
}

.center-table #start-btn {
    top: 60%;
}

/* Fix: Preserve centering when hovering on start button */
.center-table #start-btn:hover {
    transform: translateX(-50%) translateY(-2px);
}

/* Game Phase Dice Display in Center Table */
#game-dice-area {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Handcrafted 3D Tiles */
.tile {
    width: 38px;
    height: 52px;
    background: #fdfbf7;
    background: linear-gradient(135deg, #fff9f0 0%, #f7ecd9 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;

    /* Premium 3D Stack: Ivory Bone + Green Plastic */
    box-shadow:
        0 1px 0 #e8e8e8,
        0 2px 0 #dcdcdc,
        0 3px 0 #d0d0d0,
        0 4px 1px rgba(0, 0, 0, 0.1),
        /* End of Ivory */
        0 5px 0 #008000,
        0 6px 0 #007000,
        0 7px 0 #006000,
        /* Green Plastic Depth */
        0 12px 18px rgba(0, 0, 0, 0.5);
    /* Drop Shadow on Table */

    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform-style: preserve-3d;
}

/* "Engraved" Deep-Carved Effect */
.tile-inner {
    display: block;
    /* Create a "sunk-in" look using shadows */
    text-shadow:
        -1px -1px 1px rgba(0, 0, 0, 0.5),
        /* Darker top-left for depth */
        1px 1px 1px rgba(255, 255, 255, 0.7);
    /* Lighter bottom-right for highlight edge */
    z-index: 2;
    filter: saturate(1.2);
    /* Make colors pop */
}

/* Suit Specific Colors */
.tile.suit-wan {
    color: #CC2229;
}

/* Imperial Red */
.tile.suit-tiao {
    color: #228B22;
}

/* Emerald Green */
.tile.suit-tong {
    color: #1E4D8C;
}

/* Royal Blue */
.tile.suit-z {
    color: #1a1a1a;
}

/* ==================== Stability: Offline Status ==================== */
.player-area.offline {
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 0.5s ease;
    pointer-events: none;
}

.player-area.offline .info::after {
    content: " (离线)";
    color: #ff4d4f;
    font-weight: bold;
}

/* Ink Black (Winds) */

/* Special Dragons */
.tile.dragon-red {
    color: #FF0000;
}

.tile.dragon-green {
    color: #008000;
}

.tile.dragon-white {
    color: #1E4D8C;
}

/* White Dragon Frame (🀆 is often blank or with a frame) */
.tile.dragon-white .tile-inner {
    border: 2px solid #1E4D8C;
    border-radius: 2px;
    padding: 2px;
    width: 24px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Interactive States */
.tile:hover {
    transform: translateY(-8px) scale(1.05);
    /* Larger lift */
    box-shadow:
        0 1px 0 #e8e8e8,
        0 2px 0 #dcdcdc,
        0 3px 0 #d0d0d0,
        0 4px 1px rgba(0, 0, 0, 0.1),
        0 5px 0 #008000,
        0 8px 0 #007000,
        0 10px 0 #006000,
        0 20px 30px rgba(0, 0, 0, 0.4);
}

.tile.selected {
    transform: translateY(-15px);
    border-color: #ffd700;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.8),
        0 5px 0 #008000,
        0 15px 0 #006000,
        0 25px 40px rgba(0, 0, 0, 0.6);
}

.tile:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 #d0d0d0,
        0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Back side of tiles (for other players) */
.tile-back {
    width: 38px;
    height: 52px;
    background: #008000;
    background: linear-gradient(135deg, #008000 0%, #004d00 100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin: 3px;
    position: relative;

    /* Premium 7-Layer 3D Stack for Tile Backs */
    box-shadow:
        0 1px 0 #007000,
        0 2px 0 #006500,
        0 3px 0 #006000,
        0 4px 0 #005500,
        0 5px 0 #005000,
        0 6px 0 #004500,
        0 7px 0 #004000,
        0 12px 18px rgba(0, 0, 0, 0.4);
}

/* Animations for Center Discard */
@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.my-hand {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 10px;
}

/* Discard & Meld Contextual Scaling */
.discard-tile,
.meld-tile {
    width: 28px;
    height: 38px;
    font-size: 24px;
    margin: 1px;
    /* Proportional 3D Stack */
    box-shadow:
        0 1px 0 #e0e0e0,
        0 2px 0 #d0d0d0,
        0 3px 0 #008000,
        0 3px 0 1px #006400,
        0 4px 6px rgba(0, 0, 0, 0.3);
}

.discard-tile:hover,
.meld-tile:hover {
    transform: none;
}

/* Large Center Discard Notification */
.center-discard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 25px 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.discard-player-name {
    color: gold;
    font-size: 1.2rem;
    margin-bottom: 5px;
    font-weight: bold;
}

.discard-tile-large {
    width: 90px !important;
    height: 120px !important;
    font-size: 80px !important;
    margin: 10px auto !important;
    background: linear-gradient(135deg, #ffffff 0%, #f7ecd9 100%) !important;
    /* Massive 3D Stack for "Shock" Effect */
    box-shadow:
        0 2px 0 #e8e8e8,
        0 4px 0 #dcdcdc,
        0 6px 0 #d0d0d0,
        0 8px 1px rgba(0, 0, 0, 0.1),
        0 10px 0 #008000,
        0 14px 0 #007000,
        0 18px 0 #006000,
        0 35px 50px rgba(0, 0, 0, 0.6) !important;
}

/* My Hand Specifics */
.my-hand .tile {
    width: 48px;
    height: 66px;
    font-size: 42px;
}

/* Specific rotations/layouts for opponents */
/* Specific rotations/layouts for opponents */
.hand-facedown {
    display: flex;
    justify-content: center;
    margin: 5px;
}

/* Top: Horizontal Row */
.top .hand-facedown {
    flex-direction: row;
}

/* Left & Right: Vertical Columns of Upright tiles */
/* Left & Right: Vertical Columns of Upright tiles */
.left .hand-facedown,
.right .hand-facedown {
    flex-direction: column;
}

/* Rotate side tiles and adjust shadow to look like they have depth into the table */
.left .tile,
.right .tile {
    transform: rotate(90deg);
    margin: -10px 0;
}

.left .tile,
.left .tile-back {
    /* Top-Down view: Side of tile visible on the screen-left */
    box-shadow:
        -1px 0 0 #e8e8e8,
        -2px 0 0 #dcdcdc,
        -5px 0 0 #008000,
        -7px 0 0 #006000,
        -12px 0 15px rgba(0, 0, 0, 0.4);
}

.right .tile,
.right .tile-back {
    /* Shadow pointing right */
    box-shadow:
        1px 0 0 #e8e8e8,
        2px 0 0 #dcdcdc,
        5px 0 0 #008000,
        7px 0 0 #006000,
        12px 0 15px rgba(0, 0, 0, 0.4);
}

/* Restore Left/Right container positioning for columns */
.left {
    top: 15%;
    bottom: 15%;
    left: 0;
    width: 150px;
    flex-direction: row-reverse;
    /* Info on outside, hand inside */
    align-items: center;
}

.right {
    top: 15%;
    bottom: 15%;
    right: 0;
    width: 150px;
    flex-direction: row;
    /* Info on outside, hand inside */
    align-items: center;
}

.left .info,
.right .info {
    margin-bottom: 0;
    margin: 5px;
    /* User requested normal horizontal text */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

.info {
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 8px;
    border-radius: 4px;
    margin: 5px;
    /* Reset font */
    color: white;
    box-shadow: none;
    border: none;
    font-size: 1rem;
    font-weight: normal;
    font-family: inherit;
}

#start-btn {
    padding: 10px 20px;
    font-size: 18px;
    background: gold;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

/* Notification Toast */
#notification-area {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.toast {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.toast.error {
    background: rgba(220, 20, 60, 0.9);
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

.modal-box {
    background: white;
    color: black;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.modal-box button {
    margin-top: 15px;
    padding: 8px 16px;
    background: #2e8b57;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* ==================== Seat Selection Phase ==================== */
#seat-selection-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a3a2a, #2e8b57);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.seat-selection-header {
    text-align: center;
    margin-bottom: 20px;
}

.seat-selection-header h2 {
    font-size: 32px;
    margin: 0;
    color: gold;
    font-family: inherit;
    text-shadow: none;
}

#seat-phase-info {
    font-size: 18px;
    color: #ccc;
}

/* ==================== 3D Dice ==================== */
#dice-area {
    display: flex;
    gap: 40px;
    margin: 30px 0;
    perspective: 600px;
}

.dice-scene {
    width: 60px;
    height: 60px;
    perspective: 500px;
}

.dice {
    width: 60px;
    height: 60px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-out;
}

.dice.rolling {
    animation: diceRoll 1s ease-out;
}

@keyframes diceRoll {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }

    25% {
        transform: rotateX(180deg) rotateY(90deg) rotateZ(45deg);
    }

    50% {
        transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg);
    }

    75% {
        transform: rotateX(540deg) rotateY(270deg) rotateZ(135deg);
    }

    100% {
        transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg);
    }
}

.dice-face {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 100%);
    border: 1.5px solid #bbb;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.15);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.dice-face.front {
    transform: translateZ(30px);
}

.dice-face.back {
    transform: rotateY(180deg) translateZ(30px);
}

.dice-face.right {
    transform: rotateY(90deg) translateZ(30px);
}

.dice-face.left {
    transform: rotateY(-90deg) translateZ(30px);
}

.dice-face.top {
    transform: rotateX(90deg) translateZ(30px);
}

.dice-face.bottom {
    transform: rotateX(-90deg) translateZ(30px);
}

/* Dice result transforms */
.dice.show-1 {
    transform: rotateY(0deg);
}

.dice.show-2 {
    transform: rotateX(-90deg);
}

.dice.show-3 {
    transform: rotateY(-90deg);
}

.dice.show-4 {
    transform: rotateY(90deg);
}

.dice.show-5 {
    transform: rotateX(90deg);
}

.dice.show-6 {
    transform: rotateY(180deg);
}

/* ==================== Action Buttons ==================== */
.action-btn {
    padding: 15px 40px;
    font-size: 20px;
    background: linear-gradient(180deg, #ffd700, #daa520);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: #333;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.action-btn:disabled {
    background: #666;
    color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==================== Dice Results List ==================== */
#dice-results {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px;
    border-radius: 10px;
    min-width: 280px;
}

#dice-results h3 {
    margin: 0 0 10px 0;
    color: gold;
}

#dice-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#dice-results-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
}

#dice-results-list li:last-child {
    border-bottom: none;
}

#dice-results-list .player-name {
    color: #fff;
}

#dice-results-list .dice-total {
    color: gold;
    font-weight: bold;
}

/* ==================== Wind Picking ==================== */
#wind-pick-area {
    margin-top: 10px;
    text-align: center;
    padding: 10px 20px;
}

#wind-tiles {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    justify-content: center;
}

.wind-tile {
    width: 60px;
    height: 80px;
    background: #1e90ff;
    border: 2px solid #fff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    cursor: pointer;
    transition: transform 0.3s;
}

.wind-tile.hidden {
    color: transparent;
}

.wind-tile.revealed {
    background: ghostwhite;
    color: black;
}

.wind-tile:hover:not(.revealed) {
    transform: scale(1.1);
}

/* ==================== Seat Map ==================== */
#seat-result {
    margin-top: 30px;
}

#seat-map {
    display: grid;
    grid-template-areas:
        '. north .'
        'west . east'
        '. south .';
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 80px 80px 80px;
    gap: 10px;
}

.seat-position {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid gold;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#seat-north {
    grid-area: north;
}

#seat-south {
    grid-area: south;
}

#seat-east {
    grid-area: east;
    border-color: red;
}

#seat-west {
    grid-area: west;
}

/* ==================== Dice Pips (Red Dots) ==================== */
.dice-face {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 100%);
    border: 1.5px solid #bbb;
    border-radius: 14px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.15);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.pip {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, #e53935, #b71c1c);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Pip positions */
.pip.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pip.top-left {
    top: 10px;
    left: 10px;
}

.pip.top-right {
    top: 10px;
    right: 10px;
}

.pip.mid-left {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.pip.mid-right {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.pip.bot-left {
    bottom: 10px;
    left: 10px;
}

.pip.bot-right {
    bottom: 10px;
    right: 10px;
}

/* Reset Button */
.reset-btn {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 14px;
    background: #666;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.reset-btn:hover {
    background: #c41e3a;
}

/* Wind Position Indicators */
#wind-positions {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.wind-indicator {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid gold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: gold;
}

/* Positions: 0=top, 1=right, 2=bottom, 3=left */
#wind-pos-0 {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

#wind-pos-1 {
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
}

#wind-pos-2 {
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

#wind-pos-3 {
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.wind-indicator.east {
    border-color: red;
    color: red;
}

/* Wind position player name */
.wind-player-name {
    font-size: 12px;
    color: #ccc;
    font-weight: normal;
}

/* Initial position indicator (before East is determined) */
.wind-indicator.initial {
    border-color: #888;
    color: #ccc;
}

/* ==================== Other Players Tile Backs ==================== */
.hand-facedown {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: wrap;
}

.tile-back {
    width: 34px;
    height: 48px;
    background: linear-gradient(145deg, #2a5298, #1e3c72);
    border: 1px solid #4a6da8;
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1);
}

/* Top player - horizontal, label above hand */
.player-area.top {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 15 !important;
    /* Above center-table */
}

.player-area.top .hand-facedown {
    flex-direction: row;
}

/* Left player - vertical tiles, label on left side (row layout) */
.player-area.left {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 15;
    /* Above center-table */
}

.player-area.left .hand-facedown {
    flex-direction: column;
}

.player-area.left .tile-back {
    width: 48px;
    height: 34px;
}

/* Right player - vertical tiles, label on right side (row layout) */
.player-area.right {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 15;
    /* Above center-table */
}

.player-area.right .hand-facedown {
    flex-direction: column;
}

.player-area.right .tile-back {
    width: 48px;
    height: 34px;
}

/* Player info labels styling */
.player-area .info {
    color: gold;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 12px;
    border-radius: 15px;
    text-align: center;
    white-space: nowrap;
}

/* Bottom player layout */
.player-area.bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 15;
    /* Above center-table */
}

.player-area.bottom .info {
    margin-top: 5px;
}

/* Selected tile */
.tile.selected {
    transform: translateY(-15px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
    border-color: gold;
}

/* Active turn indicator */
.wind-indicator.active-turn {
    animation: pulse 1s infinite;
    border-color: #00ff00;
    box-shadow: 0 0 15px #00ff00;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ==================== Discard Piles ==================== */
/* ==================== Melds (Pong/Kong) Layout ==================== */
.melds {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 5px;
    min-height: 40px;
}

/* Bottom player melds - above my hand (fixed position at bottom of screen) */
.player-area.bottom .melds {
    position: fixed;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    max-width: 400px;
    justify-content: center;
    z-index: 16;
}

/* Top player discards - below their tiles (closer to center) */
.player-area.top {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 15;
    /* Above center-table */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.player-area.top .melds {
    position: absolute;
    top: 100%;
    /* Strictly below the container (Info+Hand) */
    margin-top: 10px;
    flex-direction: row;
    max-width: 300px;
    z-index: 5;
    /* Ensure visible */
}

/* Left player melds - to the right of their tiles */
.player-area.left .melds {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    max-height: 300px;
}

/* Right player melds - to the left of their tiles */
.player-area.right .melds {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    max-height: 300px;
}

.discard-tile {
    width: 28px;
    height: 36px;
    /* Ivory Gradient */
    background: linear-gradient(145deg, #fdfbf7 0%, #e6ded3 100%);
    border: 1px solid #999;
    border-bottom: 2px solid #777;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #000000;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* ==================== Center Discard Display ==================== */
.center-discard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    text-align: center;
    animation: popIn 0.3s ease-out;
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.center-discard .discard-player-name {
    color: gold;
    font-size: 16px;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.center-discard .discard-tile-large {
    width: 80px;
    height: 100px;
    background: linear-gradient(145deg, #fffacd, #f5f5dc);
    border: 3px solid #8b6914;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 2px 10px rgba(255, 255, 255, 0.3);
    margin: 0 auto;
}

/* Center discard large tile - updated colors */
.center-discard .discard-tile-large {
    width: 80px;
    height: 100px;
    background: #ffffff;
    border: 3px solid #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: #000000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

/* ==================== Center Table Discards Layout ==================== */
/* Each player's discards positioned along their edge of the center table */
.center-discards {
    position: absolute;
    display: flex;
    gap: 2px;
    z-index: 5;
    pointer-events: none;
}

/* Discard tiles */
.center-discards .discard-tile {
    width: 22px;
    height: 30px;
    font-size: 14px;
    background: ghostwhite;
    border: 1px solid #aaa;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    flex-shrink: 0;
}

/* Top player discards - along TOP EDGE of center box, horizontal */
.center-discards.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 280px;
    padding: 3px;
}

/* Bottom player (me) discards - along BOTTOM EDGE of center box, horizontal */
.center-discards.bottom,
#my-discards {
    position: absolute !important;
    bottom: 8px !important;
    top: auto !important;
    height: auto !important;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 280px;
    padding: 3px;
    display: flex !important;
}

/* Left player discards - along LEFT EDGE of center box, vertical */
.center-discards.left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    max-height: 180px;
    padding: 3px;
}

/* Right player discards - along RIGHT EDGE of center box, vertical */
.center-discards.right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    max-height: 180px;
    padding: 3px;
}

/* Rotate left/right player discard tiles 90 degrees for proper orientation */
.center-discards.left .discard-tile,
.center-discards.right .discard-tile {
    transform: rotate(90deg);
    width: 30px;
    height: 22px;
    font-size: 12px;
}

/* Hide original discards containers in player-area if any remain (removed from HTML, but CSS clean up below) */
/* Fix button z-index to be above center-discards */
#start-btn {
    z-index: 100;
    position: relative;
    cursor: pointer;
    padding: 12px 24px;
    font-size: 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

#start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

#start-btn:active {
    transform: translateY(0);
}

/* ==================== Fix Hand Tile Layout ==================== */
/* Ensure top player hand is horizontal */
.player-area.top .hand-facedown {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

/* Ensure hand tiles don't overlap */
.hand-facedown .tile {
    flex-shrink: 0;
}

/* ==================== Fix Center Discard Layout ==================== */
/* Ensure discards are arranged in a row/column without overlapping */
.center-discards {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 5px;
    pointer-events: none;
    /* Allow clicks to pass through to button */
}

/* Re-enable pointer events on actual tiles */
.center-discards .discard-tile {
    pointer-events: auto;
    flex-shrink: 0;
}

/* Top player discards - horizontal row */
.center-discards.top {
    flex-direction: row;
    justify-content: center;
    max-width: 300px;
}

/* Bottom player discards - horizontal row */
.center-discards.bottom {
    flex-direction: row;
    justify-content: center;
    max-width: 300px;
}

/* Left player discards - vertical column */
.center-discards.left {
    flex-direction: column;
    justify-content: flex-start;
    max-height: 200px;
}

/* Right player discards - vertical column */
.center-discards.right {
    flex-direction: column;
    justify-content: flex-start;
    max-height: 200px;
}

/* Ensure turn info and deck info are above center discard animation */
#turn-info,
#deck-info {
    position: relative;
    z-index: 200;
}

/* Move center discard animation lower z-index */
.center-discard {
    z-index: 150;
}

/* Reposition center discard animation to top-center, not blocking turn info */
.center-discard {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 150;
}

/* Make sure turn info and deck info are centered and visible below animation */
#turn-info,
#deck-info {
    position: relative;
    z-index: 200;
    margin-top: 20px;
}

/* Override for center discards to match premium ivory style */
.center-discards .discard-tile {
    background: linear-gradient(145deg, #fdfbf7 0%, #e6ded3 100%) !important;
    border: 1px solid #999 !important;
    border-bottom: 2px solid #777 !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
}

/* ==================== Login Title Animation Logic ==================== */
/* Overrides for the initial spinning tile state */
.login-box h1.spinning-mode {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #fff;
    /* White tiles */
    -webkit-text-stroke: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    filter: none;
}

.login-box h1.spinning-mode span {
    display: inline-block;
    animation: tileSpin 0.6s linear infinite !important;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    /* For tile glyphs */
    transform-origin: center;
}

@keyframes tileSpin {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

/* ==================== Dealing & Drawing Tile Animations ==================== */

/* Animation for tiles being dealt to player's hand */
.tile.dealing {
    animation: tileDealing 0.4s ease-out forwards;
}

@keyframes tileDealing {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5) rotateZ(-15deg);
    }

    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.05) rotateZ(2deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateZ(0deg);
    }
}

/* Animation for drawing a new tile (appears from right, highlighted) */
.tile.drawing {
    animation: tileDrawing 0.5s ease-out forwards;
    position: relative;
}

@keyframes tileDrawing {
    0% {
        opacity: 0;
        transform: translateX(60px) translateY(-30px) scale(0.8) rotateZ(10deg);
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.8);
    }

    50% {
        opacity: 1;
        transform: translateX(10px) translateY(5px) scale(1.1) rotateZ(-3deg);
        box-shadow: 0 0 30px 10px rgba(255, 215, 0, 0.6);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotateZ(0deg);
        box-shadow: none;
    }
}

/* Highlight effect for newly drawn tile */
.tile.just-drawn {
    animation: pulseGlow 1.5s ease-in-out;
    box-shadow: 0 0 15px 3px rgba(255, 215, 0, 0.6);
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.8);
    }
}

/* Animation for opponent receiving a tile (subtle back bounce) */
.tile-back.dealing {
    animation: opponentDealing 0.35s ease-out forwards;
}

@keyframes opponentDealing {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    70% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* ==================== Mobile Adaptation (Phase 10) ==================== */

/* 1. Force Landscape (Portrait Lock) */
@media screen and (orientation: portrait) {
    #portrait-lock {
        display: flex !important;
    }

    /* Hide everything else */
    #login-overlay,
    #gatekeeper-modal,
    #game-container,
    #notification-area {
        display: none !important;
    }
}

/* 2. Global Scaling for Mobile Landscape */
@media screen and (orientation: landscape) and (max-width: 900px) {

    /* Scale the entire game container to fit small height */
    #game-container {
        /* Use 'zoom' for simplicity or transform scale */
        zoom: 0.45;
        /* Ensure it stays centered if using zoom */
        width: 100vw;
        height: 100vh;
    }

    /* Adjust Login/Gatekeeper scaling */
    #login-overlay main,
    #gatekeeper-modal>div {
        transform: scale(0.65);
    }

    /* Ensure inputs are still clickable */
    input {
        font-size: 16px !important;
        /* Prevent iOS zoom on focus */
    }

    /* Optimize buttons for touch */
    button {
        min-height: 44px;
        /* Apple Human Interface Guidelines */
    }
}

/* ==================== Mobile Adaptation (Phase 10) ==================== */

/* 1. Force Landscape (Portrait Lock) */
@media screen and (orientation: portrait) {
    #portrait-lock {
        display: flex !important;
    }

    /* Hide everything else */
    #login-overlay,
    #gatekeeper-modal,
    #game-container,
    #notification-area {
        display: none !important;
    }
}

/* 2. Global Scaling for Mobile Landscape */
@media screen and (orientation: landscape) and (max-width: 900px) {

    /* Scale the entire game container to fit small height */
    #game-container {
        /* Use 'zoom' for simplicity or transform scale */
        zoom: 0.45;
        /* Ensure it stays centered if using zoom */
        width: 100vw;
        height: 100vh;
    }

    /* Adjust Login/Gatekeeper scaling */
    #login-overlay main,
    #gatekeeper-modal>div {
        transform: scale(0.65);
    }

    /* Ensure inputs are still clickable */
    input {
        font-size: 16px !important;
        /* Prevent iOS zoom on focus */
    }

    /* Optimize buttons for touch */
    button {
        min-height: 44px;
        /* Apple Human Interface Guidelines */
    }
}

/* Staggered delay for dealing animation */
.tile.dealing:nth-child(1) {
    animation-delay: 0s;
}

.tile.dealing:nth-child(2) {
    animation-delay: 0.05s;
}

.tile.dealing:nth-child(3) {
    animation-delay: 0.1s;
}

.tile.dealing:nth-child(4) {
    animation-delay: 0.15s;
}

.tile.dealing:nth-child(5) {
    animation-delay: 0.2s;
}

.tile.dealing:nth-child(6) {
    animation-delay: 0.25s;
}

.tile.dealing:nth-child(7) {
    animation-delay: 0.3s;
}

.tile.dealing:nth-child(8) {
    animation-delay: 0.35s;
}

.tile.dealing:nth-child(9) {
    animation-delay: 0.4s;
}

.tile.dealing:nth-child(10) {
    animation-delay: 0.45s;
}

.tile.dealing:nth-child(11) {
    animation-delay: 0.5s;
}

.tile.dealing:nth-child(12) {
    animation-delay: 0.55s;
}

.tile.dealing:nth-child(13) {
    animation-delay: 0.6s;
}

.tile.dealing:nth-child(14) {
    animation-delay: 0.65s;
}

/* Dealing complete state - remove animation class */
.tile.deal-complete {
    animation: none;
    opacity: 1;
    transform: none;
}

/* ==================== Responsive Layout ==================== */
/* Base responsive scaling for viewport height issues */
@media screen and (max-height: 800px) {

    /* Seat selection phase - compact layout for small screens */
    #seat-selection {
        transform: scale(0.85);
        transform-origin: center center;
    }

    #dice-area {
        padding: 5px;
    }

    .dice-scene {
        width: 50px;
        height: 50px;
    }

    .dice {
        width: 50px;
        height: 50px;
    }

    .dice-face {
        width: 50px;
        height: 50px;
        border-radius: 10px;
    }

    .pip {
        width: 8px;
        height: 8px;
    }

    #dice-results {
        padding: 8px 15px;
        margin-top: 5px;
    }

    #dice-results-list li {
        padding: 4px 0;
        font-size: 14px;
    }

    #wind-pick-area {
        margin-top: 5px;
        padding: 5px 10px;
    }

    .wind-tile {
        width: 50px;
        height: 65px;
        font-size: 24px;
    }

    #wind-tiles {
        margin: 10px 0;
        gap: 10px;
    }

    /* Game phase compact layout */
    .tile {
        width: 30px;
        height: 42px;
        font-size: 12px;
        margin: 1px;
    }

    .tile-back {
        width: 20px;
        height: 28px;
    }

    .center-table {
        top: 25%;
        bottom: 25%;
        left: 25%;
        right: 25%;
    }
}

/* Even smaller screens */
@media screen and (max-height: 650px) {
    #seat-selection {
        transform: scale(0.7);
    }

    .tile {
        width: 26px;
        height: 36px;
        font-size: 10px;
    }

    .tile-back {
        width: 18px;
        height: 24px;
    }

    .center-table {
        top: 22%;
        bottom: 22%;
        left: 22%;
        right: 22%;
    }

    .player-area.bottom {
        bottom: 5px;
    }
}

/* Mobile landscape */
@media screen and (max-width: 768px) {
    #seat-selection {
        transform: scale(0.75);
        transform-origin: center top;
        padding-top: 10px;
    }

    .login-box h1 {
        font-size: 2rem;
    }

    .toast {
        min-width: 180px;
        font-size: 0.85rem;
        padding: 10px 15px;
    }

    .tile {
        width: 28px;
        height: 40px;
        font-size: 11px;
    }

    .center-table {
        top: 28%;
        bottom: 20%;
        left: 15%;
        right: 15%;
    }

    .player-area.top,
    .player-area.bottom {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Mobile portrait */
@media screen and (max-width: 480px) {
    #seat-selection {
        transform: scale(0.6);
    }

    .login-box h1 {
        font-size: 1.5rem;
    }

    .tile {
        width: 24px;
        height: 34px;
        font-size: 10px;
    }

    .wind-indicator {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .center-table {
        top: 30%;
        bottom: 15%;
        left: 10%;
        right: 10%;
    }

    #turn-info,
    #deck-info {
        font-size: 12px;
    }
}

/* ==================== Pong/Kong Action Panel ==================== */
/* ==================== Pong/Kong Action Panel ==================== */
.action-panel {
    position: fixed;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;

    background: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 16px;
    padding: 16px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);

    animation: actionPanelIn 0.3s ease-out;
}

@keyframes actionPanelIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.action-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: pulseBig 1s ease-in-out infinite;
}

@keyframes pulseBig {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.action-timer {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 16px;
}

.action-timer-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    border-radius: 3px;
    animation: timerCountdown 8s linear forwards;
}

@keyframes timerCountdown {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.action-btn.pong-btn,
.action-btn.kong-btn,
.action-btn.pass-btn {
    min-width: 70px;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-family: inherit;
    box-shadow: none;
    text-transform: none;
}

.action-btn.pong-btn {
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: white;
    box-shadow: 0 4px 15px rgba(238, 90, 90, 0.4);
}

.action-btn.pong-btn:hover {
    background: linear-gradient(135deg, #ff5252, #e53935);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 90, 90, 0.5);
}

.action-btn.pong-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.action-btn.kong-btn {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #333;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

.action-btn.kong-btn:hover {
    background: linear-gradient(135deg, #ffb300, #f57c00);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5);
}

.action-btn.kong-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.action-btn.pass-btn {
    background: linear-gradient(135deg, #78909c, #546e7a);
    color: white;
    box-shadow: 0 4px 15px rgba(84, 110, 122, 0.4);
    border: none;
}

.action-btn.pass-btn:hover {
    background: linear-gradient(135deg, #607d8b, #455a64);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(84, 110, 122, 0.5);
}

.action-btn.pass-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.action-btn.hu-btn {
    background: linear-gradient(135deg, #ff1744, #d50000);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 23, 68, 0.5);
    animation: huPulse 0.8s infinite;
    min-width: 80px;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    text-transform: none;
}

.action-btn.hu-btn:hover {
    background: linear-gradient(135deg, #ff5252, #ff1744);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 23, 68, 0.6);
}

@keyframes huPulse {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(255, 23, 68, 0.5);
    }

    50% {
        box-shadow: 0 4px 25px rgba(255, 23, 68, 0.8);
    }
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #ccc;
    box-shadow: none;
    transform: none !important;
}

/* Meld display styles */
.melds {
    display: flex;
    gap: 8px;
    margin-right: 10px;
}

.meld-group {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.meld-tile {
    width: 28px;
    height: 38px;
    background: linear-gradient(180deg, #fff5e6 0%, #ffe4c4 100%);
    border: 1px solid #8b7355;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* Position-specific meld positioning */

/* Left player: melds to the RIGHT of hand, vertically centered */
.player-area.left .melds {
    position: absolute;
    top: 50%;
    left: 100%;
    /* Right of the vertical hand tiles */
    transform: translateY(-50%);
    flex-direction: column;
    margin-left: 10px;
}

.player-area.left .meld-group {
    flex-direction: column;
}

.player-area.left .meld-tile {
    width: 32px;
    height: 24px;
    font-size: 14px;
}

/* Top player: melds BELOW hand (from viewer's perspective), close to hand */
.player-area.top .melds {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    margin-top: -20px;
}

.player-area.top .meld-tile {
    width: 24px;
    height: 32px;
    font-size: 14px;
}

/* Right player: melds to the LEFT of hand, vertically centered */
.player-area.right .melds {
    position: absolute;
    top: 50%;
    right: 100%;
    /* Left of the vertical hand tiles */
    transform: translateY(-50%);
    flex-direction: column;
    margin-right: 10px;
}

.player-area.right .meld-group {
    flex-direction: column;
}

.player-area.right .meld-tile {
    width: 32px;
    height: 24px;
    font-size: 14px;
}

/* Bottom player melds are defined earlier with fixed positioning */

/* ==================== Win Result Overlay ==================== */
.win-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.win-dialog {
    background: #fdfdf5;
    /* Cream background */
    background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
    background-size: 10px 10px;
    /* Halftone pattern */
    background-color: #fdfdf5;
    border: 6px solid #1a1a1a;
    border-radius: 4px;
    /* Sharper corners for pop art */
    padding: 30px 40px;
    min-width: 440px;
    max-width: 550px;
    text-align: center;
    box-shadow: 12px 12px 0px #1a1a1a;
    /* Comic shadow */
    position: relative;
    animation: dialogAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.win-dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 75%, rgba(230, 57, 70, 0.1) 100%);
    pointer-events: none;
}

@keyframes dialogAppear {
    from {
        transform: scale(0.5) rotate(-5deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.win-title {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 56px;
    color: #cc2229;
    /* Rich Chinese Red */
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    text-shadow: 3px 3px 0px #ffd700, 5px 5px 0px #1a1a1a;
    /* Stacked pop-art shadow */
    margin-bottom: 25px;
    letter-spacing: 4px;
    line-height: 1.2;
}

.win-winner {
    font-family: 'Zcool KuaiLe', cursive;
    font-size: 24px;
    color: #1a1a1a;
    background: #ffd700;
    /* Gold highlight */
    display: inline-block;
    padding: 5px 15px;
    border: 3px solid #1a1a1a;
    margin-bottom: 20px;
    transform: rotate(-1deg);
    box-shadow: 4px 4px 0px #1a1a1a;
}

.win-patterns {
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 15px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
    /* Align patterns to left */
    padding-left: 20%;
    /* Give some horizontal center feel while being left-aligned */
    line-height: 1.5;
}

.win-score {
    font-family: 'Zcool KuaiLe', cursive;
    font-size: 42px;
    color: #cc2229;
    background: white;
    border: 4px solid #1a1a1a;
    display: inline-block;
    padding: 10px 40px;
    margin: 20px 0;
    box-shadow: 8px 8px 0px #1a1a1a;
    transform: rotate(1deg);
}

.win-kong-details {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #333;
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px dashed #1a1a1a;
    line-height: 1.4;
    text-align: left;
}

.win-close-btn {
    font-family: 'Zcool KuaiLe', cursive;
    font-size: 24px;
    padding: 10px 60px;
    margin-top: 30px;
    background: #1a1a1a;
    color: #ffd700;
    border: 3px solid #ffd700;
    border-radius: 0;
    /* Square button */
    cursor: pointer;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.1s ease;
    text-transform: none;
}

.win-close-btn:hover {
    background: #ffd700;
    color: #1a1a1a;
    border-color: #1a1a1a;
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #1a1a1a;
}

/* ==================== Dealer Streak Indicator ==================== */
.dealer-streak {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    z-index: 50;
}

.streak-label {
    font-family: 'STSong', 'SimSun', serif;
    font-size: 14px;
    color: #8b4513;
    background: linear-gradient(180deg, #fff8dc 0%, #f5deb3 100%);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #daa520;
    white-space: nowrap;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

.streak-sticks {
    display: flex;
    gap: 6px;
}

.streak-stick {
    width: 24px;
    height: 105px;
    background: url('images/dealer_stick_v.png') center center no-repeat;
    background-size: contain;
}

.streak-stick.horizontal {
    width: 105px;
    height: 24px;
    background: url('images/dealer_stick_h.png') center center no-repeat;
    background-size: contain;
}

/* Bottom Player (me): Right side of hand, vertical sticks */
.player-area.bottom .dealer-streak {
    right: -90px;
    bottom: 90px;
    flex-direction: column;
    align-items: flex-start;
}

.player-area.bottom .dealer-streak .streak-sticks {
    flex-direction: row;
}

/* Top Player: Left side of hand, vertical sticks */
.player-area.top .dealer-streak {
    left: -80px;
    top: 25px;
    flex-direction: column;
    align-items: flex-end;
}

.player-area.top .dealer-streak .streak-sticks {
    flex-direction: row;
}

/* Left Player: Below hand, horizontal sticks */
.player-area.left .dealer-streak {
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
}

.player-area.left .dealer-streak .streak-sticks {
    flex-direction: column;
}

.player-area.left .streak-stick {
    width: 105px;
    height: 24px;
    background: url('images/dealer_stick_h.png') center center no-repeat;
    background-size: contain;
}

/* Right Player: Above hand, horizontal sticks */
.player-area.right .dealer-streak {
    top: -50px;
    right: 50%;
    transform: translateX(50%);
    flex-direction: column;
    align-items: center;
}

.player-area.right .dealer-streak .streak-sticks {
    flex-direction: column;
}

.player-area.right .streak-stick {
    width: 105px;
    height: 24px;
    background: url('images/dealer_stick_h.png') center center no-repeat;
    background-size: contain;
}

/* ==================== Bottom Player Meld Positioning ==================== */
.player-area.bottom {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    /* Changed to row for horizontal layout */
    align-items: flex-end;
    gap: 15px;
    z-index: 100;
}

.player-area.bottom .melds {
    display: flex;
    flex-direction: row;
    /* Horizontal row */
    gap: 8px;
    position: absolute;
    bottom: 75px;
    /* Position above hand */
    left: 50%;
    transform: translateX(-50%);
}

.player-area.bottom .melds .meld-group {
    display: flex;
    flex-direction: row;
    /* Tiles in a row */
    gap: 1px;
    background: rgba(0, 0, 0, 0.2);
    padding: 3px;
    border-radius: 4px;
}

.player-area.bottom .melds .meld-tile {
    width: 28px;
    height: 36px;
    background: linear-gradient(135deg, #fff 0%, #f5f0e0 100%);
    border: 1px solid #8b7355;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ==================== Top Player Layout (Fixed) ==================== */
.player-area.top {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* Reset legacy styles */
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;

    display: flex !important;
    flex-direction: row !important;
    /* Info left of hand */
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    z-index: 100 !important;
}

.player-area.top .info {
    order: 1 !important;
    margin: 0 !important;
    position: static !important;
}

.player-area.top .hand-facedown {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
}

/* Melds positioned below the hand */
.player-area.top .melds {
    position: absolute !important;
    top: 95px !important;
    /* Increased spacing */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    /* Horizontal */
    gap: 8px !important;
    margin: 0 !important;
    width: max-content !important;
    white-space: nowrap !important;
    z-index: 2000 !important;
}

/* ==================== Global Dealer Indicator ==================== */
.global-dealer-info {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between text and sticks */
    font-family: 'Source Han Serif', 'Noto Serif SC', 'Songti SC', serif;
    font-weight: 900;
    /* Black weight */
    color: black;
    font-size: 32px;
    /* Larger font */
    z-index: 2000;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    /* Halo for readability on green */
}

/* Reuse tally style for global indicator */
.global-dealer-info .streak-stick {
    display: inline-block;
    width: 24px;
    height: 105px;
    background: url('images/dealer_stick_v.png') center center no-repeat;
    background-size: contain;
}

/* Hide Individual Dealer Streaks on table */
.dealer-streak {
    display: none !important;
}

/* Generic meld-group and meld-tile styling */
.meld-group {
    display: flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 6px;
}

.meld-tile {
    width: 32px;
    height: 44px;
    background: linear-gradient(135deg, #fff 0%, #f5f0e0 100%);
    border: 1px solid #8b7355;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==================== Notification / Toast (Prompt) ==================== */
#notification-area {
    position: fixed;
    top: 110px;
    /* Below top player hand (assuming hand ends around 70-80px) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    pointer-events: none;
    /* Allow clicking through if no toast */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.toast {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    animation: fadeInOut 3s forwards;
    pointer-events: auto;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 2px black;
    font-family: 'Microsoft YaHei', sans-serif;
}

.toast.error {
    background: rgba(180, 0, 0, 0.9);
    border-color: #ff6b6b;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ==================== Login Help Scroll Widget (Standalone Slip Mode) ==================== */
.login-help-scroll {
    position: absolute;
    right: 15%;
    /* Shifted left to avoid blocking background tiles */
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    pointer-events: none;
}

.scroll-body {
    width: 240px;
    background: #fff8e7;
    /* Authentic Rice Yellow / Xuan Paper */
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(204, 34, 41, 0.08) 1px, transparent 1px);
    background-size: 3px 3px, 100% 32px;

    /* Decorative Borders instead of rollers */
    border: 3px solid #1a1a1a;
    border-top: 8px solid #bf953f;
    /* Gilded top trim */
    border-bottom: 8px solid #bf953f;
    /* Gilded bottom trim */

    border-bottom: 8px solid #bf953f;
    /* Gilded bottom trim */

    overflow: hidden;
    max-height: 0;
    transition: max-height 3.0s cubic-bezier(0.4, 0, 0.2, 1);
    /* Bidirectional slow motion */
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    border-radius: 4px;
}

.scroll-body.unrolled {
    max-height: 600px;
}

.scroll-content {
    padding: 40px 25px;
    opacity: 0;
    transition: opacity 1.2s ease-out;
    transition-delay: 2.5s;
    /* Fade in content after unroll is mostly done */
}

.scroll-body.unrolled .scroll-content {
    opacity: 1;
}

.scroll-text {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 26px;
    line-height: 2.0;
    color: #1a1a1a;
    text-align: justify;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: 440px;
    margin: 0 auto;
    filter: drop-shadow(0.5px 0.5px 0px white);
}

@keyframes buttonFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-action-btn {
    position: absolute;
    bottom: -10px;
    /* Positioned relative to the container, below the paper slip */
    left: 10px;
    width: 36px;
    height: 36px;
    background: white;
    /* Give it a slight background for better hover/click area */
    border: 2px solid #CC2229;
    border-radius: 50%;
    cursor: pointer;
    padding: 4px;
    z-index: 150;
    pointer-events: auto;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    animation: buttonFadeIn 0.8s ease-out forwards;
    animation-delay: 3.2s;
    /* Appear after unroll is nearly done */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.crane-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.scroll-action-btn:hover {
    transform: scale(1.2) rotate(-10deg);
    background: #fff8e7;
    box-shadow: 0 6px 12px rgba(204, 34, 41, 0.3);
}

.scroll-action-btn:active {
    transform: scale(0.95);
}

/* Fa Cai Mahjong Tile Icon */
.tile-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 44px !important;
    height: 56px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.facai-icon {
    width: 38px;
    height: 50px;
    background: white;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #228B22;
    /* Green for 'Fa' */
    font-weight: bold;
    box-shadow:
        2px 2px 0 #1a1a1a,
        3px 3px 0 #006400;
    /* Dark green tile back accent */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    user-select: none;
    line-height: 1;
}

.tile-btn:hover .facai-icon {
    transform: translateY(-5px) scale(1.1);
    box-shadow:
        2px 7px 0 #1a1a1a,
        3px 8px 15px rgba(0, 0, 0, 0.3);
}

.tile-btn:active .facai-icon {
    transform: translateY(1px);
    box-shadow: 1px 1px 0 #1a1a1a;
}

/* Dark Mode Adjustments */
.dark .scroll-body {
    background: #dccfb3;
    /* Aged Xuan paper for dark mode */
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    border-color: #333;
    border-top-color: #8a6d3b;
    border-bottom-color: #8a6d3b;
}

.dark .scroll-text {
    color: #1a1a1a;
}

/* ==================== Guochao Pop Voting Modal ==================== */
.pop-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out;
}

/* Solid background variant for Game End/Return to Lobby to hide game board mixing */
.pop-modal-overlay-solid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFAF0;
    /* Opaque Cream */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    /* Higher than normal modal */
    animation: fadeIn 0.5s ease-out;
    background-image:
        radial-gradient(#e53935 15%, transparent 15%),
        radial-gradient(#1A1A1A 15%, transparent 15%);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
}

.pop-modal-content {
    background: #FFFAF0;
    /* Cream background */
    border: 4px solid #1A1A1A;
    /* Thick comic border */
    padding: 30px;
    border-radius: 20px;
    box-shadow: 10px 10px 0px #1A1A1A;
    /* Hard comic shadow */
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
    overflow: hidden;
    animation: popInElastic 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Decorative background pattern */
.pop-modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(#e53935 20%, transparent 20%),
        radial-gradient(#1A1A1A 20%, transparent 20%);
    background-color: #FFFAF0;
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.pop-modal-content h2 {
    font-family: 'Zcool KuaiLe', cursive;
    color: #1A1A1A;
    font-size: 2rem;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    text-shadow: 2px 2px 0px #FFD700;
}

.pop-modal-content p {
    font-family: 'Numans', sans-serif;
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    font-weight: bold;
}

.pop-modal-subtext {
    font-size: 0.9rem !important;
    color: #666 !important;
    margin-top: -10px;
    margin-bottom: 30px !important;
}

.pop-modal-buttons {
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 1;
    gap: 20px;
}

/* CSS-generated Pop Buttons */
.pop-btn {
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    padding: 0;
    font-family: 'Zcool KuaiLe', cursive;
    font-size: 1.5rem;
    transition: transform 0.1s;
}

.pop-btn-inner {
    display: block;
    padding: 12px 30px;
    border: 3px solid #1A1A1A;
    border-radius: 12px;
    background: #FFF;
    color: #1A1A1A;
    transform: translateY(-4px);
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 4px 0 #1A1A1A, 0 4px 0 2px rgba(0, 0, 0, 0.1);
}

.pop-btn:active .pop-btn-inner {
    transform: translateY(0);
    box-shadow: 0 0 0 #1A1A1A;
}

/* Variants */
.pop-btn-agree .pop-btn-inner {
    background: #4CAF50;
    /* Green */
    color: white;
    text-shadow: 1px 1px 0 #1A1A1A;
}

.pop-btn-reject .pop-btn-inner {
    background: #F44336;
    /* Red */
    color: white;
    text-shadow: 1px 1px 0 #1A1A1A;
}

.pop-btn:hover .pop-btn-inner {
    filter: brightness(1.1);
}

@keyframes popInElastic {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
        opacity: 1;
    }

    80% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}