:root {
    --bg: #071f18;
    --panel: rgba(255,255,255,.08);
    --panel-strong: rgba(0,0,0,.48);
    --ink: #fff7e8;
    --muted: #cfbea8;
    --accent: #d8772f;
    --accent2: #1d7d59;
    --red: #c02b2b;
    --gold: #ffc94a;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at top, #0f4a36, var(--bg)); }
button, input, a { font: inherit; }
button, a { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.home-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.big-button { border: 0; border-radius: 999px; padding: 26px 38px; background: var(--accent); color: white; font-size: clamp(1.5rem, 6vw, 3rem); font-weight: 1000; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.small-button { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 900; box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.small-button.secondary { background: var(--accent2); }
.small-button.ghost { background: rgba(255,255,255,.14); }
.small-button:disabled, .hand-card:disabled { opacity: .45; cursor: not-allowed; }
.game-shell { width: min(1200px, 100%); margin: 0 auto; padding: clamp(12px, 3vw, 24px); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.topbar h1 { margin: 0; font-size: clamp(2.1rem, 8vw, 5rem); line-height: .95; }
.topbar p { margin: 4px 0 0; color: var(--gold); font-weight: 900; }
.panel { border: 1px solid rgba(255,255,255,.18); border-radius: 24px; padding: clamp(14px, 3vw, 22px); background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,.22); backdrop-filter: blur(10px); }
.scorebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.scorebar div { display: grid; gap: 4px; text-align: center; }
.scorebar span { color: var(--gold); font-size: 1.25rem; font-weight: 1000; }
.table-wrap { display: grid; place-items: center; margin: 14px 0; }
.round-table { position: relative; width: min(88vw, 680px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, #1f7a50 0 57%, #105236 58% 62%, #9b572d 63% 72%, #623117 73% 100%); box-shadow: 0 24px 80px rgba(0,0,0,.4), inset 0 0 40px rgba(0,0,0,.25); }
.center-card { position: absolute; inset: 29%; min-width: 245px; display: grid; place-items: center; align-content: center; text-align: center; padding: 18px; border-radius: 26px; background: rgba(5,20,14,.86); box-shadow: 0 16px 45px rgba(0,0,0,.35); z-index: 3; }
.center-card h2 { margin: 0 0 8px; font-size: clamp(1.15rem, 4vw, 1.85rem); }
.center-subtitle { color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.join-form { display: grid; gap: 10px; width: 100%; }
.join-form label { font-weight: 900; }
.join-row { display: flex; gap: 8px; }
.join-row input { min-width: 0; width: 100%; padding: 12px 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,.24); background: rgba(255,255,255,.92); color: #1a120c; }
.actions, .bid-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.message { min-height: 24px; margin-top: 10px; color: #ffd166; font-weight: 900; word-break: break-word; }
.player-seat { position: absolute; left: 50%; top: 50%; width: clamp(92px, 20vw, 122px); margin-left: calc(clamp(92px, 20vw, 122px) / -2); transform: rotate(var(--angle)) translateY(calc(-1 * min(43vw, 330px))) rotate(calc(-1 * var(--angle))); display: grid; justify-items: center; gap: 2px; padding: 7px; border-radius: 18px; background: rgba(5,20,14,.8); border: 1px solid rgba(255,255,255,.16); text-align: center; z-index: 2; }
.player-seat .seat-name { color: var(--gold); font-size: .75rem; font-weight: 900; }
.player-seat .avatar { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1; }
.player-seat .name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 1000; }
.player-seat .team { font-size: .72rem; color: var(--muted); }
.player-seat.active { outline: 4px solid var(--gold); }
.player-seat.me::after { content: 'toi'; position: absolute; top: -12px; right: -6px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #311b0b; font-weight: 1000; font-size: .78rem; }
.trick-area { position: absolute; inset: 27%; display: grid; align-content: center; justify-items: center; gap: 12px; z-index: 1; }
.trick-title { max-width: 100%; padding: 8px 12px; border-radius: 16px; background: rgba(0,0,0,.5); font-weight: 900; text-align: center; }
.trick-cards { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
.trick-play { display: grid; justify-items: center; gap: 4px; }
.trick-play small { color: var(--muted); font-weight: 800; }
.empty-trick { padding: 12px; border-radius: 16px; background: rgba(0,0,0,.22); color: var(--muted); font-weight: 800; }
.play-card, .hand-card { width: 76px; height: 106px; border-radius: 12px; background: #fffaf0; color: #15100c; border: 0; box-shadow: 0 10px 25px rgba(0,0,0,.28); display: grid; align-content: center; justify-items: center; gap: 2px; font-weight: 1000; }
.play-card b, .hand-card b { font-size: 1.05rem; }
.play-card span, .hand-card span { font-size: 2rem; line-height: 1; }
.play-card.red, .hand-card.red, .suit-button.red { color: var(--red); }
.hand-panel { margin-top: 14px; }
.hand-panel h2, .history-panel h2, .action-panel h2 { margin: 0 0 12px; }
.hand { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 12px; }
.hand-card { flex: 0 0 auto; width: clamp(66px, 18vw, 88px); height: clamp(98px, 25vw, 124px); }
.hand-card small { font-size: .72rem; color: inherit; opacity: .75; }
.action-panel { margin-top: 14px; text-align: center; }
.action-panel p { margin: 8px 0 14px; color: var(--muted); font-weight: 750; }
.history-panel { margin: 14px 0 36px; }
.history-panel h3 { margin: 8px 0; color: var(--gold); }
.history-panel ol { margin: 0; padding-left: 24px; }
.trick-history { margin: 8px 0; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.22); }
.trick-history div { color: var(--muted); font-size: .92rem; margin-top: 4px; }
.muted { color: var(--muted); font-weight: 700; }
@media (max-width: 680px) {
    .topbar { align-items: flex-start; }
    .scorebar { grid-template-columns: repeat(2, 1fr); }
    .round-table { width: min(96vw, 520px); }
    .center-card { inset: 24%; min-width: 0; padding: 14px; }
    .player-seat { width: 82px; margin-left: -41px; transform: rotate(var(--angle)) translateY(calc(-1 * min(47vw, 245px))) rotate(calc(-1 * var(--angle))); font-size: .78rem; }
    .trick-area { inset: 25%; }
    .trick-title { font-size: .78rem; }
    .play-card { width: 54px; height: 76px; border-radius: 9px; }
    .play-card span { font-size: 1.45rem; }
    .join-row { flex-direction: column; }
}


/* Card play animation */
.flying-play-card {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transition: left .52s cubic-bezier(.2,.75,.2,1), top .52s cubic-bezier(.2,.75,.2,1), transform .52s cubic-bezier(.2,.75,.2,1), opacity .18s ease;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,.38));
}
.flying-play-card .play-card { transform: none; }

/* Keep the South seat from covering the action panel. */
.table-wrap { margin-bottom: clamp(54px, 9vw, 86px); }
.round-table { margin-bottom: clamp(18px, 4vw, 30px); }
.history-panel[hidden] { display: none !important; }

@media (max-width: 680px) {
    .table-wrap { margin-bottom: 96px; }
    .action-panel { position: relative; z-index: 4; margin-top: 18px; }
    .player-seat { width: 76px; margin-left: -38px; transform: rotate(var(--angle)) translateY(calc(-1 * min(44vw, 225px))) rotate(calc(-1 * var(--angle))); }
    .player-seat .team { display: none; }
}

/* End-of-trick collection animation */
.trick-collecting .trick-play.being-collected {
    opacity: 0;
    transition: opacity .18s ease;
}
.collect-card {
    transition: left .72s cubic-bezier(.18,.82,.25,1), top .72s cubic-bezier(.18,.82,.25,1), transform .72s cubic-bezier(.18,.82,.25,1), opacity .72s ease;
}
.collect-card .play-card {
    box-shadow: 0 18px 34px rgba(0,0,0,.38);
}

/* Mobile-first refinement pass */
.player-seat.bot .avatar { opacity: .92; }
.player-seat.bot .seat-name::after { content: ' bot'; color: var(--muted); font-weight: 800; }

@media (max-width: 760px) {
    body { overflow-x: hidden; }
    .game-shell { padding: 10px; }
    .topbar { gap: 10px; margin-bottom: 10px; }
    .topbar h1 { font-size: clamp(2rem, 13vw, 3.4rem); }
    .topbar .small-button { padding: 10px 12px; font-size: .9rem; }
    .scorebar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 18px; }
    .scorebar div { font-size: .76rem; }
    .scorebar span { font-size: .95rem; }
    .table-wrap { width: 100%; margin: 6px 0 70px; overflow: visible; }
    .round-table {
        width: min(94vw, 410px);
        max-width: 410px;
        margin: 0 auto 12px;
    }
    .player-seat {
        width: 66px;
        margin-left: -33px;
        padding: 4px;
        gap: 0;
        border-radius: 13px;
        transform: rotate(var(--angle)) translateY(calc(-1 * min(40vw, 176px))) rotate(calc(-1 * var(--angle)));
        font-size: .68rem;
    }
    .player-seat .avatar { font-size: 1.45rem; }
    .player-seat .seat-name { font-size: .62rem; }
    .player-seat .name { font-size: .72rem; }
    .player-seat .team { display: none; }
    .player-seat.me::after { top: -10px; right: -4px; font-size: .64rem; padding: 1px 6px; }
    .center-card {
        inset: 23% 18%;
        min-width: 0;
        width: auto;
        padding: 10px;
        border-radius: 18px;
    }
    .center-card h2 { font-size: 1rem; }
    .center-subtitle { font-size: .78rem; }
    .trick-area { inset: 20% 16%; gap: 7px; }
    .trick-title { max-width: 100%; font-size: .68rem; padding: 6px 8px; border-radius: 12px; }
    .trick-cards { gap: 4px; }
    .trick-play { gap: 2px; }
    .trick-play small { font-size: .58rem; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .play-card { width: 46px; height: 64px; border-radius: 8px; }
    .play-card b { font-size: .74rem; }
    .play-card span { font-size: 1.2rem; }
    .empty-trick { font-size: .72rem; padding: 8px; }
    .action-panel {
        margin-top: 0;
        padding: 12px;
        border-radius: 18px;
        position: relative;
        z-index: 6;
    }
    .action-panel h2 { font-size: 1.05rem; }
    .action-panel p { font-size: .9rem; }
    .bid-controls { gap: 7px; }
    .small-button { padding: 10px 13px; font-size: .9rem; }
    .hand-panel { margin-top: 10px; padding: 12px; border-radius: 18px; }
    .hand-panel h2, .history-panel h2, .action-panel h2 { margin-bottom: 8px; }
    .hand { gap: 7px; padding-bottom: 8px; }
    .hand-card {
        width: 56px;
        height: 82px;
        border-radius: 9px;
        padding: 4px;
    }
    .hand-card b { font-size: .82rem; }
    .hand-card span { font-size: 1.35rem; }
    .hand-card small { font-size: .58rem; }
    .history-panel { border-radius: 18px; }
}

@media (max-width: 390px) {
    .round-table { width: 92vw; }
    .scorebar { grid-template-columns: repeat(2, 1fr); }
    .player-seat {
        width: 60px;
        margin-left: -30px;
        transform: rotate(var(--angle)) translateY(calc(-1 * min(38vw, 154px))) rotate(calc(-1 * var(--angle)));
    }
    .trick-area { inset: 21% 14%; }
    .play-card { width: 42px; height: 59px; }
    .hand-card { width: 52px; height: 76px; }
}

/* 34-card Boeuf update: stable 4-card trick row, jokers, selection UI. */
.trick-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(42px, 76px));
    gap: 8px;
    align-items: start;
    justify-content: center;
    width: max-content;
    max-width: 100%;
}
.trick-play.empty-slot { opacity: .28; }
.placeholder-card { background: rgba(255,255,255,.18); color: rgba(255,255,255,.5); border: 1px dashed rgba(255,255,255,.35); box-shadow: none; }
.play-card.joker-card, .hand-card.joker-card { background: linear-gradient(145deg, #fff7df, #fafafa); }
.play-card.joker-bw, .hand-card.joker-bw { color: #111; border: 3px solid #111; }
.hand-card.selected { outline: 4px solid var(--gold); transform: translateY(-6px); }
.hand-card:disabled { opacity: .45; }
.announcement { color: var(--gold); font-weight: 950; }

@media (max-width: 760px) {
    .trick-cards { grid-template-columns: repeat(4, 46px); gap: 4px; }
}
@media (max-width: 390px) {
    .trick-cards { grid-template-columns: repeat(4, 42px); gap: 3px; }
}


.game-options {
    width: 100%;
    display: grid;
    gap: .45rem;
    padding: .75rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(0,0,0,.18);
    text-align: left;
}
.game-options label {
    display: flex;
    gap: .45rem;
    align-items: flex-start;
    font-size: .92rem;
    line-height: 1.25;
}
.game-options input {
    margin-top: .12rem;
}

/* Lobby layout fix: keep the game options and start button inside the center card. */
.center-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: clamp(260px, 42%, 390px);
    max-width: 92%;
    max-height: 78%;
    overflow-y: auto;
    overflow-x: hidden;
}
.center-card > * {
    max-width: 100%;
}
.center-card h2,
.center-subtitle,
.message {
    text-align: center;
}
#waitingActions.actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
#waitingActions .small-button {
    width: 100%;
}
#gameOptions.game-options {
    width: 100%;
    flex: 0 0 auto;
}
#gameOptions.game-options[hidden],
#waitingActions.actions[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .center-card {
        inset: 14% 10%;
        width: auto;
        max-width: none;
        max-height: 72%;
        padding: 12px;
        gap: 8px;
        justify-content: flex-start;
    }
    .game-options {
        padding: .6rem;
        gap: .4rem;
    }
    .game-options label {
        font-size: .78rem;
        line-height: 1.2;
    }
}

@media (max-width: 390px) {
    .center-card {
        inset: 12% 8%;
        max-height: 76%;
    }
}

/* Center-card height fix: no hidden/scrolling lobby content. */
.center-card {
    inset: 14% 12%;
    width: auto;
    max-width: none;
    max-height: none;
    min-height: 0;
    overflow: visible;
    justify-content: center;
}

@media (max-width: 760px) {
    .center-card {
        inset: 7% 6%;
        padding: 12px;
        gap: 8px;
        overflow: visible;
        justify-content: center;
    }

    #waitingActions.actions {
        gap: 8px;
    }

    .game-options {
        padding: .5rem;
    }
}

@media (max-width: 390px) {
    .center-card {
        inset: 5% 5%;
    }
}

/* Desktop/tablet table scale fix: keep the full table and hand visible in one screen height.
   Mobile rules above remain unchanged. */
@media (min-width: 761px) and (max-width: 1199px) {
    .game-shell {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .topbar { margin-bottom: 8px; }
    .scorebar { margin-bottom: 8px; }

    .table-wrap {
        margin: 6px 0 52px;
    }

    .round-table {
        width: min(600px, 74vh, 82vw);
        margin-bottom: 8px;
    }

    .player-seat {
        width: 100px;
        margin-left: -50px;
        transform: rotate(var(--angle)) translateY(calc(-1 * min(292px, 35vh, 40vw))) rotate(calc(-1 * var(--angle)));
    }

    .hand-panel { margin-top: 8px; }
}

@media (min-width: 1200px) {
    .game-shell {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .topbar { margin-bottom: 6px; }
    .scorebar { margin-bottom: 6px; }

    .table-wrap {
        margin: 4px 0 46px;
    }

    .round-table {
        width: 500px;
        margin-bottom: 6px;
    }

    .player-seat {
        width: 94px;
        margin-left: -47px;
        transform: rotate(var(--angle)) translateY(-250px) rotate(calc(-1 * var(--angle)));
    }

    .player-seat .avatar {
        font-size: 1.75rem;
    }

    .hand-panel {
        margin-top: 6px;
    }
}