:root {
    --ink: #2b2620;
    --ink-soft: #5a5142;
    --gold: #b8892b;
    --gold-light: #e0b458;
    --green: #1f5e46;
    --green-dark: #143f30;
    --card-bg: rgba(255, 252, 244, 0.82);
    --card-border: rgba(184, 137, 43, 0.45);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior-y: none;
}

body {
    font-family: 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: url('imgs/bg.jpg') center center / cover no-repeat fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
}

.hidden {
    display: none !important;
}

h1, h2, h3 {
    margin: 0 0 10px;
    color: var(--green-dark);
}

h1 {
    margin: 0 0 2px;
    font-size: 64px;
    letter-spacing: 2px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h2, h3 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--green);
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 6px;
}

/* ---------- Lobby ---------- */

#lobby {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 22px;
    width: 100%;
    max-width: 1100px;
    height: min(88vh, 640px);
    padding: 20px;
}

.lobby-col {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(43, 38, 32, 0.18);
    backdrop-filter: blur(6px);
    padding: 22px;
    overflow-y: auto;
}

.lobby-col-settings {
    flex: 1;
}

.lobby-col-players {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.players-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.spectators-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-top: auto;
}

.lobby-col-center {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 30px;
}

.site-tag {
    margin: 0;
    font-family: 'Courier New', Consolas, Menlo, monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--ink-soft);
}

.avatar-picker {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-picker button {
    margin-top: 0;
    padding: 4px 10px;
    line-height: 1;
    font-size: 16px;
}

.avatar-picker-img {
    height: 48px;
    width: 48px;
}

.name-form {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

#input-name {
    flex: 1;
    max-width: 220px;
    padding: 9px 12px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: var(--ink);
}

#input-name:focus {
    outline: 2px solid var(--gold-light);
}

#name-form-bottom {
    font-size: 10px;
}

/* ---------- Buttons ---------- */

button {
    padding: 9px 16px;
    cursor: pointer;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: white;
    color: var(--ink);
    font-size: 14px;
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(43, 38, 32, 0.15);
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-primary {
    margin-top: 18px;
    padding: 12px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fffaf0;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(184, 137, 43, 0.4);
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(184, 137, 43, 0.5);
}

.btn-primary.is-ready {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 4px 14px rgba(31, 94, 70, 0.4);
}

.btn-primary.is-ready:hover {
    box-shadow: 0 6px 18px rgba(31, 94, 70, 0.5);
}

.btn-subtle {
    margin-top: 18px;
    padding: 6px 14px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: none;
}

.btn-subtle:hover:not(:disabled) {
    color: var(--ink);
    background: rgba(184, 137, 43, 0.08);
    box-shadow: none;
}

/* ---------- Players list ---------- */

#players-list,
#spectators-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.player-tag {
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 12px 16px;
    cursor: pointer;
    background: white;
    font-size: 18px;
}

.player-tag:hover {
    background: #f5efe0;
}

.avatar {
    height: 1.3em;
    width: auto;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}

@keyframes avatar-spin-cw {
    to {
        transform: rotate(360deg);
    }
}

@keyframes avatar-spin-ccw {
    to {
        transform: rotate(-360deg);
    }
}

.avatar-spin-cw {
    animation: avatar-spin-cw 0.6s ease;
}

.avatar-spin-ccw {
    animation: avatar-spin-ccw 0.6s ease;
}

#players-list .player-tag,
#spectators-list .player-tag {
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 14px;
    padding: 8px 12px;
    cursor: default;
}

/* ---------- Settings panel ---------- */

.setting-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 14px;
}

.setting-row span:first-child {
    flex: 1;
}

.setting-row button {
    padding: 4px 10px;
    line-height: 1;
}

/* ---------- Game ---------- */

#game {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 40px 48px;
}

#next-turn-container:empty {
    display: none;
}

#my-identity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    font-weight: bold;
    color: var(--ink-soft);
}

#my-identity:empty {
    display: none;
}

#my-hands {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 36px;
}

.hand-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

#river {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(43, 38, 32, 0.18);
    backdrop-filter: blur(6px);
    margin-top: auto;
    perspective: 700px;
}

#river-slots {
    display: flex;
    gap: 10px;
}

.river-deck {
    position: relative;
    width: clamp(40px, 14vw, 60px);
    height: clamp(58px, 20vw, 86px);
    flex-shrink: 0;
}

.river-deck::before,
.river-deck::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: url('imgs/back.svg') center / cover no-repeat;
}

.river-deck::before {
    transform: translate(-2px, -2px);
    z-index: 3;
}

.river-deck::after {
    transform: translate(2px, 2px);
    z-index: 1;
}

.river-deck-face {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url('imgs/back.svg') center / cover no-repeat;
}

/* ---------- Opponents row ---------- */

#opponents-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}

.opponent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(43, 38, 32, 0.18);
    backdrop-filter: blur(6px);
}

.opponent-name-row {
    display: flex;
    align-items: center;
}

.opponent-name {
    font-size: 13px;
    font-weight: bold;
    color: var(--ink);
}
.disconnected-opponent-name {
    font-size: 13px;
    font-style: oblique;
    color: red;
}

.ready-check {
    font-size: 13px;
    font-weight: bold;
    color: var(--green);
}

.opponent-hands {
    display: flex;
}

.opponent-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
}

.opponent-hand:not(:last-child) {
    border-right: 1px solid var(--card-border);
}

/* ---------- Tokens ---------- */

#center-zone {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#center-tokens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 520px;
    padding: 28px;
    border-radius: 24px;
    border: 1px dashed var(--card-border);
    transition: border-color 0.15s ease, background 0.15s ease;
}

#center-tokens.drag-over {
    border-color: var(--gold);
    background: rgba(184, 137, 43, 0.1);
}

.token-slot {
    width: clamp(38px, 13vw, 44px);
    height: clamp(38px, 13vw, 44px);
    border: 2px dashed var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.token-slot.drag-over {
    border-color: var(--gold);
    background: rgba(184, 137, 43, 0.12);
}

.token-slot.hand-token-slot {
    width: 100%;
    height: auto;
    min-height: clamp(52px, 16vw, 80px);
    padding: clamp(6px, 2vw, 10px);
    border-width: 1px;
    border-radius: 16px;
}

.token {
    width: clamp(34px, 12vw, 40px);
    height: clamp(34px, 12vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #5a3d24, #3a2814);
    border: 1px solid #2a1c0f;
    color: #f3dfb8;
    font-size: clamp(13px, 4.5vw, 16px);
    font-weight: bold;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 3px 6px rgba(0, 0, 0, 0.35);
    cursor: grab;
    touch-action: none;

    /* no selectionnable text */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}

.token:active {
    cursor: grabbing;
}

.token-ghost {
    position: fixed;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
    transform: scale(1.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* token/slot shape changes turn after turn: square, pentagon, heptagon, circle */

.shape-square {
    clip-path: none;
}

.shape-circle {
    border-radius: 50%;
    clip-path: none;
}

.shape-pentagon {
    border-radius: 0;
    clip-path: polygon(50% 0%, 98% 35%, 79% 90%, 21% 90%, 2% 35%);
}

.shape-heptagon {
    border-radius: 0;
    clip-path: polygon(50% 0%, 89% 19%, 99% 61%, 72% 95%, 28% 95%, 1% 61%, 11% 19%);
}

/* clip-path cuts the box down to the polygon, but the border is drawn on the
   original rectangle first, so almost none of it survives the clip. Hide the
   native border on these two shapes and redraw the outline as a mask that
   traces the real polygon edges instead. */
.shape-pentagon,
.shape-heptagon {
    border-color: transparent;
    position: relative;
}

.shape-pentagon::after,
.shape-heptagon::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.token-slot.shape-pentagon::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpolygon points='50,0 98,35 79,90 21,90 2,35' fill='none' stroke='white' stroke-width='4' stroke-dasharray='8 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpolygon points='50,0 98,35 79,90 21,90 2,35' fill='none' stroke='white' stroke-width='4' stroke-dasharray='8 6'/%3E%3C/svg%3E");
    background-color: var(--card-border);
}

.token-slot.shape-heptagon::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpolygon points='50,0 89,19 99,61 72,95 28,95 1,61 11,19' fill='none' stroke='white' stroke-width='4' stroke-dasharray='8 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpolygon points='50,0 89,19 99,61 72,95 28,95 1,61 11,19' fill='none' stroke='white' stroke-width='4' stroke-dasharray='8 6'/%3E%3C/svg%3E");
    background-color: var(--card-border);
}

.token-slot.shape-pentagon.drag-over::after,
.token-slot.shape-heptagon.drag-over::after {
    background-color: var(--gold);
}

.token.shape-pentagon::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpolygon points='50,0 98,35 79,90 21,90 2,35' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpolygon points='50,0 98,35 79,90 21,90 2,35' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E");
    background-color: #2a1c0f;
}

.token.shape-heptagon::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpolygon points='50,0 89,19 99,61 72,95 28,95 1,61 11,19' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpolygon points='50,0 89,19 99,61 72,95 28,95 1,61 11,19' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E");
    background-color: #2a1c0f;
}

.hand {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(43, 38, 32, 0.18);
    backdrop-filter: blur(6px);
}

.hand-tokens {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.hand-cards {
    display: flex;
    gap: 10px;
}

.token-recorded {
    width: clamp(20px, 7vw, 26px);
    height: clamp(20px, 7vw, 26px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #5a3d24, #3a2814);
    border: 1px solid #2a1c0f;
    color: #f3dfb8;
    font-size: clamp(9px, 2.8vw, 11px);
    font-weight: bold;

    /* no selectionnable text */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}

.token-recorded.shape-square {
    width: clamp(14px, 7vw, 20px);
    height: clamp(14px, 7vw, 20px);
}

.opponent-hand-tokens {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
}

.card {
    width: clamp(40px, 14vw, 60px);
    height: clamp(58px, 20vw, 86px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: white;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-size: clamp(14px, 4.6vw, 20px);
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(43, 38, 32, 0.12);
    flex-shrink: 1;
    min-width: 0;

    /* no selectionnable text */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}

.card.card-empty {
    background: transparent;
    border: 1px dashed var(--card-border);
    box-shadow: none;
}

.card.card-back {
    background: url('imgs/back.svg') center / cover no-repeat;
    border-color: #2a1c0f;
}

.card.card-flip {
    display: block;
    position: relative;
    background: none;
    border: none;
    box-shadow: none;
    perspective: 600px;
}

.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.card-flip.is-flipped .card-flip-inner {
    transform: rotateY(180deg);
}

.card-flip .card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-flip .card-face-front {
    transform: rotateY(180deg);
}

.card .card-suit {
    font-size: clamp(15px, 5vw, 22px);
}

.card.suit-heart {
    color: #a81f1f;
}

.card.suit-diamond {
    color: #d9491d;
}

.card.suit-spade {
    color: var(--ink);
}

.card.suit-club {
    color: #7b7b7b;
}

.joker-star {
    width: clamp(34px, 11.5vw, 44px);
    height: clamp(34px, 11.5vw, 44px);
    background: conic-gradient(from 0deg, #ff3b3b, #ff9d1f, #ffe14d, #4ade80, #38bdf8, #a78bfa, #ff3b3b);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ---------- Reveal ---------- */

#reveal {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 40px 48px;
}

#reveal-lobby-container:empty {
    display: none;
}

#reveal-blocks {
    columns: auto;
    column-width: 420px;
    column-gap: 20px;
    width: 100%;
    max-width: 1200px;
    max-height: 100%;
    overflow-y: auto;
    padding: 4px;
}

.reveal-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(43, 38, 32, 0.18);
    backdrop-filter: blur(6px);
    break-inside: avoid;
}

.reveal-block-hidden {
    opacity: 0.75;
}

.reveal-block-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.poker {
    font-size: 12px;
    color: var(--ink);
    opacity: 0.8;
}

.reveal-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.reveal-name {
    font-size: 13px;
    font-weight: bold;
    color: var(--ink);
}

.reveal-history {
    display: flex;
    align-items: center;
    gap: 4px;
}

.reveal-final-token {
    flex-shrink: 0;
}

.reveal-final-token-error .token {
    background: linear-gradient(160deg, #8a2c1e, #5c1a10);
    border-color: #3a1109;
    color: #f8d9cf;
}

.reveal-cards {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 6px;
}

.reveal-cards .card {
    flex-shrink: 0;
}

#reveal-river {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(43, 38, 32, 0.18);
    backdrop-filter: blur(6px);
}

/* ---------- Chat ---------- */

#chat {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 500;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
}

#chat-toggle {
    position: relative;
    padding: 10px 18px;
    font-weight: bold;
    color: #fffaf0;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(184, 137, 43, 0.4);
}

#chat-badge {
    position: absolute;
    display: block;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--gold-light);
    border-radius: 50%;
    border: 2px solid white;
}

#chat-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
}

.chat-preview-message {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: min(280px, 70vw);
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(43, 38, 32, 0.18);
    backdrop-filter: blur(6px);
    opacity: 1;
    transition: opacity 1s ease;
}

.chat-preview-message .chat-message-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    /* -webkit-line-clamp alone can let a sliver of the 5th line's top peek through
       (font metrics vs. line-height rounding); a hard max-height backs it up */
    max-height: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.chat-preview-message.is-fading {
    opacity: 0;
}

#chat-panel {
    width: min(320px, 80vw);
    height: min(420px, 60vh);
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(43, 38, 32, 0.25);
    backdrop-filter: blur(6px);
    overflow: hidden;
}

#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 13px;
    line-height: 1.4;
}

.chat-message-body {
    min-width: 0;
    word-break: break-word;
}

.chat-message-name {
    font-weight: bold;
    color: var(--green);
    margin-right: 4px;
}

.chat-message-text {
    color: var(--ink);
}

#chat-form {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var(--card-border);
}

#chat-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-size: 13px;
    background: white;
    color: var(--ink);
}

#chat-input:focus {
    outline: 2px solid var(--gold-light);
}

#chat-form button {
    padding: 8px 12px;
    font-size: 13px;
}

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    body {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        align-items: flex-start;
        padding: 16px 0;
    }

    #lobby {
        flex-direction: column;
        height: auto;
        gap: 14px;
        padding: 12px;
    }

    .lobby-col-center {
        order: 1;
        padding-top: 10px;
    }

    .lobby-col-players {
        order: 2;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }

    .players-section,
    .spectators-section {
        flex: 1;
        margin-top: 0;
    }

    .spectators-section {
        border-left: 1px solid var(--card-border);
        padding-left: 12px;
    }

    .lobby-col-settings {
        order: 3;
    }

    h1 {
        font-size: 44px;
    }

    #players-list,
    #spectators-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    #players-list .player-tag,
    #spectators-list .player-tag {
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 700px) or (max-height: 600px) {
    #game {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        justify-content: center;
        gap: 18px;
        padding: 10px 8px;
    }

    #opponents-row {
        gap: 10px;
    }

    .opponent {
        padding: 6px 10px;
        gap: 4px;
    }

    .opponent-hand {
        padding: 0 8px;
        gap: 4px;
    }

    #center-tokens {
        gap: 8px;
        padding: 12px;
    }

    /* keep several hands side by side instead of wrapping to a new row */
    #my-hands {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .hand-group {
        gap: 6px;
        min-width: 0;
    }

    .hand {
        gap: 4px;
        padding: 8px;
    }

    .hand-cards {
        gap: 4px;
    }

    .hand-tokens {
        gap: 4px;
    }

    #river {
        gap: 4px;
        padding: 8px;
        margin-bottom: 15px;
    }

    #river-slots {
        gap: 4px;
    }

    #reveal {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding: 10px 8px;
        gap: 10px;
    }

    #reveal-blocks {
        /* multi-column layout is unreliable across mobile browsers for variable-height
           blocks; a plain flex column guarantees a strict single vertical stack */
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    .reveal-block {
        padding: 8px 10px;
        gap: 8px;
    }

    #reveal-river {
        flex-shrink: 0;
        gap: 4px;
        padding: 8px;
    }

    #chat {
        right: 10px;
        bottom: 10px;
    }

    #chat-panel {
        width: min(280px, 90vw);
        height: min(320px, 55vh);
    }

    /* the send-preview popup is a desktop-only nicety */
    #chat-preview {
        display: none !important;
    }
}

/* ---------- Large screens: the clamp()s above already sit at their max past ~700px,
   so window size stops mattering — bump the in-game content up a notch here instead
   of relying on browser zoom ---------- */

@media (min-width: 701px) {
    .card {
        width: 72px;
        height: 104px;
        font-size: 24px;
    }

    .card .card-suit {
        font-size: 26px;
    }

    .river-deck {
        width: 72px;
        height: 104px;
    }

    .joker-star {
        width: 52px;
        height: 52px;
    }

    .token,
    .token-slot {
        width: 52px;
        height: 52px;
    }

    .token {
        font-size: 19px;
    }

    .token-slot.hand-token-slot {
        min-height: 96px;
        padding: 12px;
    }

    .token-recorded {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .token-recorded.shape-square {
        width: 24px;
        height: 24px;
    }

    .opponent-name,
    .disconnected-opponent-name,
    .ready-check,
    .reveal-name {
        font-size: 15px;
    }

    .poker {
        font-size: 14px;
    }

    .hand {
        padding: 16px;
        gap: 10px;
    }

    .hand-cards {
        gap: 12px;
    }

    #my-hands {
        gap: 40px;
    }

    #river {
        padding: 16px;
        gap: 12px;
    }

    #river-slots {
        gap: 12px;
    }
}

/* ---------- Short (but not mobile) screens: the river eats too much of the limited
   vertical space in its normal spot, so rotate it 90° and dock it against the right
   edge instead ---------- */

@media (min-width: 701px) and (max-height: 800px) {
    #game {
        padding-right: 160px;
    }

    #river {
        position: fixed;
        top: 50%;
        left: calc(100% - 16px);
        margin: 0;
        /* Pivoting around the middle of the (pre-rotation) top edge, then rotating
           clockwise and sliding back by half the (pre-rotation) width, lands the box
           flush against the right edge and perfectly vertically centered — regardless
           of the river's actual width, which varies with card sizes per breakpoint. */
        transform-origin: top center;
        transform: translateX(-50%) rotate(90deg);
    }
}