.yg-deal-game-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border: 0px solid #ccc;
    padding: 15px;
    max-width: 1100px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.yg-deal-game-left,
.yg-deal-game-right {
    flex: 1 1 300px;
}

.yg-box-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(60px, 1fr));
    gap: 10px;
}

.yg-box {
    background-color: #add8e6;
    color: #000000;
    border: 2px solid #000000;
    text-align: center;
    padding: 12px 6px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    user-select: none;
}

.yg-box.disabled {
    cursor: default;
    opacity: 0.4;
}

.yg-box.selected-player-box {
    border-color: #ff9900;
    box-shadow: 0 0 5px #ff9900;
}

.yg-game-status {
    margin-top: 10px;
    min-height: 40px;
}

.yg-offer-panel {
    margin-top: 15px;
    padding: 10px;
    border: 2px solid #333;
    background: #f7f7f7;
}

.yg-offer-amount {
    font-size: 1.3em;
    margin-bottom: 10px;
}

.yg-btn {
    padding: 8px 14px;
    margin-right: 8px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    font-weight: bold;
}

.yg-btn-deal {
    background-color: #4CAF50;
    color: #fff;
}

.yg-btn-nodeal {
    background-color: #f44336;
    color: #fff;
}

.yg-final-result {
    margin-top: 15px;
    font-size: 2.2em;
    font-weight: bold;
    line-height: 1.3em;
    color: red
}

.yg-player-box-display {
    padding: 15px;
    border: 2px solid #000;
    background: #add8e6;
    text-align: center;
    font-weight: bold;
    font-size: 2.0em
    border-radius: 4px;
    min-height: 45px;
}

.yg-deal-game-ladder {
    flex: 1 1 200px;
}

.yg-amount-list {
    list-style: none;
    padding-left: 0;
    columns: 2;
}

.yg-amount-list li {
    padding: 2px 0;
    color: #000000;
}

.yg-amount-list li.yg-amount-removed {
    text-decoration: line-through;
    color: #f44336;
}