:root {
    --bg-deep: #08142b;
    /* deep royal blue background */
    --panel-deep: #12306B;
    /* scoreboard panel */
    --accent-gold: #F2C14E;
    /* gold accent / stroke */
    --card-1: #F2C14E;
    /* warm gold (player card) */
    --card-2: #E66F3E;
    /* warm orange */
    --card-3: #4BA3C3;
    /* cool cyan */
    --card-4: #8ADC6A;
    /* soft green */
    --muted: #0b2545;
    /* dark navy for text */
    --stroke: 6px;
    --cell-stroke: 4px;
    --pad: 18px;
    font-family: "Courier New", Courier, monospace;
}


.game-area {
    width: 97%;
    height: 90vh;
    background-color: var(--bg-deep);
    position: relative;
    overflow: hidden;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.players {
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
}


.player1,
.player2,
.player3,
.player4 {
    width: 20%;
    height: 20%;
    border: 3px solid rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    color: var(--muted);
    border-radius: 6px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.player1 {
    position: absolute;
    top: 40%;
    left: 1.5%;
    background-color: var(--card-1);
    /* gold */
    color: #111;
}

.player2 {
    position: absolute;
    top: 1.5%;
    left: 40%;
    background-color: var(--card-2);
    /* coral/orange */
    color: #111;
}

.player3 {
    position: absolute;
    top: 40%;
    right: 1.5%;
    background-color: var(--card-3);
    /* cyan */
    color: #041426;
}

.player4 {
    position: absolute;
    bottom: 1.5%;
    right: 40%;
    background-color: var(--card-4);
    /* soft green */
    color: #041426;
}

.cards {
    display: none;
}


.card1,
.card2,
.card3,
.card4 {
    width: 60px;
    height: 90px;
    background-color: #fff;
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    box-shadow: 2px 6px 18px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--muted);
    margin: 5px;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: transform 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;
}

/* Start button */
.st {
    z-index: 10;
    height: 60px;
    width: 150px;
    background-color: var(--accent-gold);
    color: var(--muted);
    border: 3px solid rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    font: 600 20px/1 "Courier New", sans-serif;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.st:hover {
    transform: translateY(-3px);
}

/* message popup */
.msg {
    display: none;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(3, 10, 28, 0.85);
    color: var(--accent-gold);
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 18px;
    z-index: 10;
    user-select: none;
    border: 2px solid rgba(242, 193, 78, 0.12);
}

.absolute {
    position: absolute;
}

/* scoreboard toggle */
.sboard {
    position: absolute;
    top: 12px;
    ;
    right: 12px;
    z-index: 40;
    height: 56px;
    width: 140px;
    background-color: transparent;
    color: var(--accent-gold);
    border: 2px solid var(--accent-gold);
    border-radius: 8px;
    font: 600 18px/1 "Courier New", sans-serif;
    cursor: pointer;
}

.sboard:hover {
    background: rgba(242, 193, 78, 0.06);
}


/* Quit / Restart buttons */
.quit,
.rst {
    position: absolute;
    top: 12px;
    z-index: 40;
    height: 56px;
    width: 140px;
    border-radius: 8px;
    font: 600 18px/1 "Courier New", sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.rst {
    left: 12px;
    background: var(--card-4);
    color: #022;
    border: 2px solid rgba(0, 0, 0, 0.25);
}

.quit {
    left: 170px;
    background: #d9534f;
    color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.25);
}

.score {
    display: none;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    height: 60vh;
    width: 60vw;
    background-color: rgba(3, 8, 18, 0.95);
    border: 4px solid var(--accent-gold);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(2, 6, 20, 0.6);
    z-index: 500;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    color: var(--accent-gold);
}

.Ok,
.bot1,
.bot2 {
    display: none;
    z-index: 10;
    height: 56px;
    width: 150px;
    background-color: var(--accent-gold);
    color: #041426;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    font: 600 18px/1 "Courier New", sans-serif;
    cursor: pointer;
    user-select: none;
}

.Ok:hover,
.bot1:hover,
.bot2:hover {
    transform: translateY(-3px);
}


.Ok {
    left: 60%;
    bottom: 25%;
}

.bot1 {
    left: 35%;
    bottom: 25%;
}

.bot2 {
    left: 55%;
    bottom: 25%;
}


.flipped {
    transform: rotateY(180deg);
    background-color: #b31b1b;
    color: #fff;
}

.clicked {
    background-color: rgba(255, 0, 0, 0.9) !important;
    color: #fff;
}

.pointer {
    pointer-events: none;
}

.close-score {
    font-size: 18px;
    background: var(--accent-gold);
    color: var(--bg-deep);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px 8px;
    width: 150px;
    height: 40px;
    position: absolute;
    top: 30px;
    left: 40px;
    color: var(--bg-deep);
}

.normalClose {
    background: #2ecc71;
     color: var(--bg-deep);
    /* position: relative; */
}

.rounds {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 18dvw;
    text-align: left;
    margin-left: 30px;
    margin-top: 30px;
}



/* scoreboard wrapper */
.board-wrap {
    /* display: none; */
    height: 55dvh;
    width: 55dvw;
    position: absolute;
    z-index: 500;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}


/* scoreboard table */
table.scoreboard {
    background-color: transparent;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    table-layout: fixed;
    color: var(--accent-gold);

    background: linear-gradient(180deg, rgba(18, 48, 107, 0.95), rgba(6, 18, 48, 0.98));
    box-shadow: 0 14px 36px rgba(2, 6, 20, 0.6);
    border: 6px solid var(--accent-gold);
    padding: 12px;
}

.scoreboard thead th {
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    font-size: 20px;
    border-bottom: var(--cell-stroke) solid rgba(242, 193, 78, 0.12);
    border-left: var(--cell-stroke) solid rgba(242, 193, 78, 0.06);
    height: 70px;
    color: var(--accent-gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.scoreboard thead th:first-child {
    width: 170px;
    text-align: left;
    padding-left: 22px;
    border-left: var(--stroke) solid rgba(242, 193, 78, 0.12);
}

.scoreboard thead th:last-child {
    border-right: var(--stroke) solid rgba(242, 193, 78, 0.12);
}

tbody td {
    border-bottom: var(--cell-stroke) solid rgba(0, 0, 0, 0.18);
    border-left: var(--cell-stroke) solid rgba(0, 0, 0, 0.12);
    height: 50px;
    vertical-align: middle;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    color: var(--accent-gold);
    font-weight: 600;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

tbody td:first-child {
    text-align: left;
    font-size: 26px;
    color: var(--accent-gold);
    width: 170px;
    padding-left: 22px;
}

/* big Total cell style */
.total-row td:first-child {
    font-size: 40px;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--accent-gold);
}

td {
    font-size: 24px;
}

.player-header {
    font-size: 20px;
    color: var(--accent-gold);
}

.total-detail td {
    font-size: 16px;
    font-weight: 400;
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--accent-gold);
}


@media (max-width:640px) {

    .scoreboard thead th,
    tbody td {
        padding: 10px;
        height: 56px
    }

    tbody td:first-child {
        font-size: 18px
    }

    .total-row td:first-child {
        font-size: 28px
    }
}

/* subtle hover for player boxes */
.player1:hover,
.player2:hover,
.player3:hover,
.player4:hover {
    transform: translateY(-6px);
    transition: transform 200ms ease;
}