* {

    box-sizing: border-box;
}

:root {

    --page-padding: 14px;
    --domino-width: clamp(52px, 7vw, 70px);
    --domino-height: calc(var(--domino-width) * 1.43);
    --domino-font: clamp(22px, 3vw, 28px);
    --board-gap: clamp(8px, 1.4vw, 10px);
    --board-padding: clamp(24px, 5vw, 70px);
    --content-width: min(920px, calc(100vw - (var(--page-padding) * 4)));
}

body {

    margin: 0;
    padding: var(--page-padding);

    background: #1e1e1e;

    color: white;

    font-family: Arial;

    text-align: center;
}

/* ---------------- TITLE ---------------- */

h1 {

    width: var(--content-width);

    margin: 6px auto 12px;

    text-align: left;
}

/* ---------------- JOIN ---------------- */

#joinBox {

    margin-bottom: 20px;
}

input {

    padding: 10px;

    font-size: 18px;

    width: 220px;
}

select {

    padding: 10px;

    font-size: 18px;

    cursor: pointer;
}

#tableSeats {

    width: min(520px, 100%);

    margin: 0 auto 20px;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-areas:
        ". top ."
        "left center right"
        ". bottom .";

    gap: var(--board-gap);

    align-items: center;
}

.table-center {

    grid-area: center;

    min-height: 72px;

    border: 2px solid #777;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ddd;
}

.seat {

    min-height: 72px;

    border: 2px solid #666;

    background: #2b2b2b;

    color: white;
}

.seat span {

    font-size: 14px;

    color: #ddd;
}

.seat-top {

    grid-area: top;
}

.seat-left {

    grid-area: left;
}

.seat-right {

    grid-area: right;
}

.seat-bottom {

    grid-area: bottom;
}

.seat.selected {

    border-color: gold;

    color: gold;
}

.seat.occupied {

    border-color: #36d399;
}

.seat.disconnected {

    border-color: #f59e0b;

    color: #f59e0b;
}

.seat.disconnected span {

    color: #f59e0b;
}

.seat:disabled {

    cursor: not-allowed;

    opacity: 0.75;
}

button {

    padding: 10px 20px;

    font-size: 18px;

    cursor: pointer;

    margin: 5px;
}

/* ---------------- PLAYERS ---------------- */

#players {

    width: var(--content-width);

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 10px;

    font-size: 20px;

    text-align: left;
}

.team-row {

    margin: 6px 0;

    font-weight: bold;
}

.current-turn-name {

    color: #36d399;

    text-shadow: 0 0 8px rgba(54, 211, 153, 0.45);
}

.offline-player-name {

    color: #ef4444;

    text-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
}

/* ---------------- SCORES ---------------- */

#scores {

    width: var(--content-width);

    margin-left: auto;

    margin-right: auto;

    font-size: 20px;

    color: gold;

    margin-bottom: 10px;

    text-align: left;
}

#gameLog {

    width: min(720px, 100%);

    margin: 24px auto 0;

    padding: 10px;

    border: 1px solid #666;

    color: #f2f2f2;

    font-size: 16px;

    text-align: left;

    display: none;
}

#gameLog div {

    padding: 3px 0;
}

/* ---------------- TURN ---------------- */

#turn {

    width: var(--content-width);

    margin: 8px auto 12px;

    text-align: left;
}

/* ---------------- BOARD ---------------- */

#board {

    width: calc(100vw - (var(--page-padding) * 2));

    --board-domino-width: var(--domino-width);
    --board-domino-height: var(--domino-height);
    --board-domino-font: var(--domino-font);
    --board-local-gap: var(--board-gap);

    min-height: min(320px, 55vh);

    max-height: 64vh;

    border: 2px solid white;

    padding: clamp(10px, 2vw, 16px);

    margin: 0 auto 18px;

    display: none;

    justify-items: center;

    align-items: center;

    gap: 12px;

    position: relative;

    overflow: auto;

    scrollbar-gutter: stable;
}

.board-grid {

    width: 100%;

    min-width: max-content;

    padding: var(--board-padding);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        max-content
        minmax(0, 1fr);

    grid-template-rows: max-content max-content max-content;

    grid-template-areas:
        ". top ."
        "left play right"
        ". bottom .";

    gap: var(--board-gap);

    justify-content: center;

    align-items: center;

    justify-self: center;

    align-self: center;
}

.board-play-area {

    grid-area: play;

    width: 100%;

    min-height: 120px;

    display: grid;

    justify-items: center;

    align-items: center;

    gap: var(--board-gap);
}

.board-play-area-spinner {

    grid-template-areas: "main";
}

.side-choice {

    width: var(--board-domino-width);

    height: var(--board-domino-height);

    flex: 0 0 auto;

    padding: 0;

    font-size: clamp(13px, 2.4vw, 16px);

    font-weight: bold;

    border: 2px solid gold;

    border-radius: 10px;

    background: white;

    color: black;

    display: flex;

    align-items: center;

    justify-content: center;
}

.main-line,
.branch {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--board-local-gap);
}

.spinner-main-line {

    grid-area: main;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        max-content
        minmax(0, 1fr);

    grid-template-rows: max-content max-content max-content;

    grid-template-areas:
        ". top ."
        "left core right"
        ". bottom .";

    align-items: center;

    justify-items: center;

    justify-content: center;

    gap: var(--board-local-gap);
}

.spinner-left-line,
.spinner-right-line {

    display: flex;

    align-items: center;

    gap: var(--board-local-gap);
}

.spinner-left-line {

    grid-area: left;

    justify-self: end;

    justify-content: flex-end;
}

.spinner-right-line {

    grid-area: right;

    justify-self: start;

    justify-content: flex-start;
}

.branch-top,
.branch-bottom {

    flex-wrap: nowrap;

    max-width: none;

    width: max-content;
}

.branch-top {

    grid-area: top;

    flex-direction: column-reverse;
}

.branch-bottom {

    grid-area: bottom;

    flex-direction: column;
}

.spinner-core {

    grid-area: core;
}

/* ---------------- HAND ---------------- */

#hand {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: var(--board-gap);

    margin-top: 0;
}

#handTitle {

    margin: 12px 0 8px;
}

#handTitle,
#hand,
#placementPanel,
#buttons {

    display: none;
}

#placementPanel {

    justify-content: center;

    flex-wrap: wrap;

    gap: var(--board-gap);

    margin: 10px 0 0;
}

.placement-option {

    min-width: 120px;

    padding: 12px 14px;

    font-size: 18px;

    font-weight: bold;

    border: 2px solid gold;

    border-radius: 8px;

    background: white;

    color: black;

    cursor: pointer;
}

/* ---------------- DOMINO ---------------- */

.domino {

    width: var(--domino-width);
    height: var(--domino-height);

    flex: 0 0 auto;

    background: white;

    color: black;

    border-radius: 10px;

    font-size: var(--domino-font);
    font-weight: bold;

    display: flex;

    justify-content: center;
    align-items: center;

    cursor: pointer;

    transition: 0.2s;
}

.domino:hover {

    transform: scale(1.05);
}

#board .domino {

    width: var(--board-domino-width);

    height: var(--board-domino-height);

    font-size: var(--board-domino-font);
}

#board.board-density-compact {

    --board-domino-width: calc(var(--domino-width) * 0.82);
    --board-domino-height: calc(var(--domino-height) * 0.82);
    --board-domino-font: calc(var(--domino-font) * 0.84);
    --board-local-gap: calc(var(--board-gap) * 0.8);
}

#board.board-density-dense {

    --board-domino-width: calc(var(--domino-width) * 0.68);
    --board-domino-height: calc(var(--domino-height) * 0.68);
    --board-domino-font: calc(var(--domino-font) * 0.74);
    --board-local-gap: calc(var(--board-gap) * 0.62);
}

#board.board-density-tiny {

    --board-domino-width: calc(var(--domino-width) * 0.58);
    --board-domino-height: calc(var(--domino-height) * 0.58);
    --board-domino-font: calc(var(--domino-font) * 0.66);
    --board-local-gap: calc(var(--board-gap) * 0.5);
}

.domino.spinner {

    border: 4px solid gold;
}

.domino.selected-domino {

    outline: 4px solid #2ecc71;

    outline-offset: 4px;
}

/* ---------------- BUTTONS ---------------- */

#buttons {

    margin-top: 12px;
}

@media (max-width: 700px) {

    :root {

        --page-padding: 8px;
        --domino-width: clamp(42px, 11vw, 54px);
        --domino-font: clamp(17px, 4.7vw, 23px);
        --board-gap: 6px;
        --board-padding: 28px;
        --content-width: calc(100vw - 20px);
    }

    body {

        padding: var(--page-padding);
    }

    h1 {

        font-size: 24px;

        margin: 4px auto 8px;
    }

    #players,
    #scores {

        font-size: 15px;

        margin-bottom: 6px;
    }

    .team-row {

        margin: 3px 0;
    }

    #turn {

        font-size: 20px;

        margin: 6px auto 8px;
    }

    #board {

        min-height: 220px;

        max-height: none;

        padding: 8px;

        margin-bottom: 12px;

        overflow-x: auto;

        overflow-y: visible;
    }

    .board-grid {

        padding: var(--board-padding);
    }

    #handTitle {

        font-size: 20px;

        margin: 10px 0 6px;
    }

    #hand {

        gap: 6px;
    }

    button {

        padding: 8px 12px;

        font-size: 16px;
    }

    .placement-option {

        min-width: 96px;

        padding: 9px 10px;

        font-size: 14px;
    }

    #gameLog {

        font-size: 13px;

        margin-top: 16px;
    }
}

@media (max-width: 430px) {

    :root {

        --domino-width: clamp(38px, 10.5vw, 46px);
        --domino-font: clamp(15px, 4.3vw, 20px);
        --board-padding: 20px;
    }

    #players,
    #scores {

        font-size: 14px;
    }

    #turn {

        font-size: 18px;
    }
}