/* ── Base ─────────────────────────────────────────────────── */
:root {
    --brand-gold: #e8c35a;
    --felt-deep:  #11391c;
    --felt-mid:   #1a5c2a;
    --card-bg:    rgba(8, 22, 12, .55);
    --card-edge:  rgba(255, 255, 255, .08);
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--felt-deep);
    /* A felt table under a lamp: brightest just above centre, darker at the rim */
    background-image: radial-gradient(1100px 700px at 50% -8%, #2c7a40 0%, var(--felt-mid) 48%, var(--felt-deep) 100%);
    background-attachment: fixed;
    color: #fff;
    margin: 0;
    height: 100%;
}

h1, h2, h3, .site-brand {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    letter-spacing: .01em;
}

/* FocusOnNavigate moves keyboard focus to each page's h1 (good for screen
   readers) — but the visible focus ring on a heading just looks broken. */
h1:focus { outline: none; }

/* The wordmark — used on the landing page and as the lobby's home link */
.site-brand {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1;
}
.site-brand:hover { color: #fff; }
.brand-spade { color: var(--brand-gold); font-size: 1.5rem; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0; left: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #333;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Bootstrap's .text-muted/.form-text default to a near-black gray meant for
   light backgrounds; this app is dark-themed throughout, so override both
   to a light gray that stays readable on the dark green background. */
.text-muted, .form-text {
    color: #aaa !important;
}
.form-control::placeholder {
    color: rgba(255,255,255,.4) !important;
}

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: #1b6ec2; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto .2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ── Lobby ────────────────────────────────────────────────── */
.lobby-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lobby-title {
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 1.5rem;
}

.lobby-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    width: 100%;
    max-width: 900px;
    margin-bottom: 1.5rem;
}
.lobby-title-row .lobby-title { margin-bottom: 0; }

.lobby-layout {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 900px;
}

.lobby-card {
    background: var(--card-bg);
    border: 1px solid var(--card-edge);
    border-radius: .9rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.table-list-card { flex: 1 1 420px; min-width: 300px; }
.join-card       { flex: 0 0 260px; }

.lobby-card h2 { margin-bottom: 1.25rem; }
.lobby-card .form-label { color: #ccc; }
.lobby-card .form-control { background: #2d2d2d; color: #fff; border-color: #555; }

.table-list-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.table-list-header h2 { margin-bottom: 0; }
.table-list-refresh { font-size: .75rem; }

/* ── Active tables list ───────────────────────────────────── */
.lobby-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lobby-table th { padding: .3rem .5rem; text-align: left; color: #aaa; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.15); }
.lobby-table td { padding: .4rem .5rem; }
.btn-close-table { padding: 1px 6px; font-size: .75rem; line-height: 1.4; opacity: .4; background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 3px; }
.btn-close-table:hover { opacity: 1; background: rgba(220,53,69,.7); border-color: transparent; color: #fff; }
.btn-watch { padding: 1px 6px; font-size: .75rem; line-height: 1.4; margin-right: .25rem; }

.lobby-table-id { font-weight: 700; letter-spacing: .05em; }

.phase-badge { font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 4px; }
.phase-waitingforplayers { background: #2a5a2a; color: #7dff7d; }
.phase-bidding           { background: #2a3a6a; color: #8ab4ff; }
.phase-playing           { background: #6a3a1a; color: #ffb87d; }
.phase-completed         { background: #444; color: #ccc; }

.seat-col { text-align: center; }
.seat-player { font-size: .8rem; color: #ddd; white-space: nowrap; }
.seat-join-btn {
    padding: 0 .4rem;
    font-size: .72rem;
    line-height: 1.5;
    color: #7dff7d;
    border: 1px dashed rgba(125,255,125,.5);
    background: transparent;
    border-radius: 3px;
}
.seat-join-btn:hover { background: rgba(125,255,125,.15); color: #adffad; border-style: solid; }

.seat-selector { display: flex; gap: .5rem; }
.seat-btn { flex: 1; }

/* ── Waiting room ─────────────────────────────────────────── */
.waiting-room {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    gap: 1rem;
}

.seat-status { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.seat-chip {
    background: rgba(0,0,0,.4);
    border: 2px solid #555;
    border-radius: .5rem;
    padding: .6rem 1rem;
    min-width: 90px;
    text-align: center;
}
.seat-chip-you { border-color: #ffd700; }

/* ── Game top bar ────────────────────────────────────────── */
.game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .75rem;
    background: rgba(0,0,0,.35);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.game-topbar-id {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .05em;
    opacity: .75;
}

/* Rapid taps (the two-click card confirm!) must not trigger Safari's double-tap zoom */
button, .card-view { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ── Game table layout ────────────────────────────────────── */
/* Cards scale with the viewport so the whole table fits without scrolling:
   height follows the screen height (the E/W stacks are 4 cards tall), while
   the visible strip of overlapped cards follows the screen width — on tablets
   the readable part of each card actually gets BIGGER than the old fixed 22px. */
/* Sized for readability first (many players are older): tall cards and a wide
   visible strip on overlapped cards — the strip is what you actually read. */
:root {
    --card-h: clamp(64px, 13.5vh, 120px);
    --card-w: calc(var(--card-h) * 0.7);
    --card-strip: clamp(26px, 4.5vw, 46px);
}

.game-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.game-table {
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .5rem;
    padding: .75rem;
    /* Keep the four hands clustered around the action instead of pinned to the
       screen edges of very wide monitors. */
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.table-middle {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .5rem;
    align-items: center;
}

.table-north, .table-south { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 100%; }
.auction-toggle-row { margin-bottom: .15rem; }
.table-west,  .table-east  { display: flex; flex-direction: column; align-items: center; gap: .25rem; }

.table-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    gap: .5rem;
}

/* ── Player label ─────────────────────────────────────────── */
.player-label {
    font-size: 1rem;
    font-weight: 600;
    padding: .3rem .8rem;
    border-radius: .3rem;
    background: rgba(0,0,0,.3);
    white-space: nowrap;
}
.player-active { background: #ffd700; color: #222; }
.player-vul    { outline: 2px solid #e05050; }
.player-active.player-vul { outline: 2px solid #c03030; }

/* ── Board info widget ────────────────────────────────────── */
.board-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    background: rgba(0,0,0,.45);
    border-radius: .4rem;
    padding: .35rem .85rem;
    font-size: .95rem;
}
.board-deal { font-weight: 700; letter-spacing: .04em; }
.board-vul  { font-weight: 600; padding: .1rem .4rem; border-radius: 3px; }
.vul-none    { color: #7dff7d; }
.vul-partial { color: #ffcc55; }
.vul-all     { color: #ff7070; }

/* ── Cards ────────────────────────────────────────────────── */
.card-hand {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    justify-content: center;
    width: 100%;
    overflow: visible;
}

.card-hand-vertical {
    flex-direction: column;
    max-height: calc(var(--card-h) * 2.85);
    overflow-y: auto;
}

/* Dummy shown vertically (defender view): suits stack without scroll */
.card-hand-stacked {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

/* ── Overlapping fan layout ───────────────────────────────── */
/* Core: cards within each suit group overlap left-to-right   */
.card-hand-overlapping .suit-group {
    gap: 0;
    margin-right: .2rem;
    overflow: visible;
}
.card-hand-overlapping .suit-group .card-view + .card-view {
    margin-left: calc(var(--card-strip) - var(--card-w));
}
/* Rank + suit symbol both top-left so the left strip is readable */
.card-hand-overlapping .card-view {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3px 4px;
}
.card-hand-overlapping .card-suit-symbol {
    font-size: calc(var(--card-h) * .16);
    align-self: flex-start;
    line-height: 1;
}

/* Vertical variant: suit groups stack as rows (E/W positions) */
.card-hand-overlapping-v {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: .2rem;
}
.card-hand-overlapping-v .suit-group {
    margin-right: 0;
}

/* Right-align variant: suit rows push to the right edge (East) */
.card-hand-right.card-hand-overlapping-v {
    align-items: flex-end;
}

.suit-group {
    display: flex;
    gap: .1rem;
    margin-right: .3rem;
}

.card-view {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: var(--card-w);
    height: var(--card-h);
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: 4px 5px;
    cursor: default;
    font-size: calc(var(--card-h) * .185);
    font-weight: bold;
    user-select: none;
    box-shadow: 1px 2px 4px rgba(0,0,0,.35);
    flex-shrink: 0;
}
/* Four-colour deck: black spades, red hearts, orange diamonds, green clubs —
   so the two "black" suits can't be confused on any screen. */
.card-view.card-spades   { color: #111; }
.card-view.card-clubs    { color: #0a7d33; }
.card-view.card-hearts   { color: #cc0000; }
.card-view.card-diamonds { color: #d06800; }

.card-suit-symbol { font-size: calc(var(--card-h) * .235); align-self: flex-end; }

.card-back {
    background: repeating-linear-gradient(
        45deg,
        #1a3a8a, #1a3a8a 3px,
        #2050c0  3px, #2050c0  6px
    );
    border-color: #0a1f5a;
    cursor: default;
}

/* ── Compact layout for short screens (tablets/laptops) ──────
   Squeeze the chrome so all four hands fit without scrolling;
   the cards themselves already shrink via --card-h. */
@media (max-height: 940px) {
    .game-table { padding: .4rem; gap: .3rem; }
    .table-middle { gap: .3rem; }
    .table-north, .table-south { gap: .15rem; }
    .table-west, .table-east { gap: .15rem; }
    .table-center { gap: .3rem; min-width: 160px; }
    .player-label { font-size: .75rem; padding: .12rem .45rem; }
    .board-info { font-size: .7rem; padding: .2rem .5rem; }
    .contract-badge { font-size: .85rem; }
}

/* The problem auction (shown by default above the player's hand) can be tall —
   cap it and scroll inside rather than pushing the table off-screen. */
.table-south .auction-table {
    display: block;
    max-height: 24vh;
    overflow-y: auto;
}

.card-playable {
    cursor: pointer;
    outline: 2px solid #ffd700;
    transform: translateY(-5px);
    transition: transform .1s;
}
.card-playable:hover { transform: translateY(-10px); }

/* Selected on first click, awaiting a confirming second click before it's played.
   Enlarged + pulsing so it clearly reads as "click again to play". */
.card-pending {
    outline: 3px solid #4ade80;
    transform: translateY(-18px) scale(1.22);
    position: relative;
    z-index: 5;
    animation: pending-pulse 1.1s ease-in-out infinite;
}
.card-pending:hover { transform: translateY(-18px) scale(1.22); } /* keep size stable over the playable hover lift */
@keyframes pending-pulse {
    0%, 100% { box-shadow: 0 0 10px 2px rgba(74,222,128,.55); }
    50%      { box-shadow: 0 0 20px 7px rgba(74,222,128,.95); }
}

.card-placeholder {
    background: transparent;
    border: 2px dashed rgba(255,255,255,.2);
    box-shadow: none;
}

/* ── Compact stacked-deck for hidden opponent hands ───────── */
.card-stack {
    position: relative;
    width: calc(var(--card-w) + 14px);
    height: calc(var(--card-h) + 10px);
}
.card-stack-back {
    position: absolute;
    width: calc(var(--card-w) + 10px);
    height: var(--card-h);
    border-radius: 6px;
    border: 1px solid #0a1f5a;
    background: repeating-linear-gradient(
        45deg,
        #1a3a8a, #1a3a8a 3px,
        #2050c0  3px, #2050c0  6px
    );
}
.card-stack-back.s3 { top: 0;   left: 4px;  }
.card-stack-back.s2 { top: 2px; left: 2px;  }
.card-stack-back.s1 { top: 4px; left: 0;    }
.card-stack-count {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

/* ── Trick display ────────────────────────────────────────── */
.trick-display {
    display: grid;
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-items: center;
    gap: .2rem;
}
.trick-middle {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: .25rem;
    align-items: center;
}
.trick-north, .trick-south { justify-self: center; }
.trick-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 50px;
}
.trick-count { font-size: .8rem; font-weight: 600; }
.trick-review-btn {
    font-size: .7rem;
    padding: .1rem .35rem;
    margin-top: .2rem;
    opacity: .7;
    border-color: rgba(255,255,255,.3);
    color: #fff;
}
.trick-review-btn:hover { opacity: 1; }
.trick-review-active { opacity: 1; border-color: #ffd700; color: #ffd700; }

/* ── Auction table ────────────────────────────────────────── */
.auction-table {
    border-collapse: collapse;
    font-size: 1.05rem;
    background: rgba(0,0,0,.35);
    border-radius: .4rem;
    overflow: hidden;
}
.auction-table th, .auction-table td {
    padding: .3rem .75rem;
    text-align: center;
    min-width: 52px;
}
.auction-table th { background: rgba(0,0,0,.4); font-size: .85rem; letter-spacing: .05em; }
/* A long auction plus the bidding box must not push the table off-screen */
.table-center .auction-table { display: block; max-height: 26vh; overflow-y: auto; }
.auction-you { color: #ffd700; }

.bid-cell                  { }
.bid-cell.bid-pass         { color: #aaa; }
.bid-cell.bid-double       { color: #f66; font-weight: 700; }
.bid-cell.bid-redouble     { color: #f90; font-weight: 700; }
.bid-cell.bid-normal       { color: #fff; }
/* Suit tints on the dark auction table (four-colour deck) */
.bid-cell.bid-suit-clubs    { color: #6fe08a; }
.bid-cell.bid-suit-hearts   { color: #ff8080; }
.bid-cell.bid-suit-diamonds { color: #ffb060; }
.bid-cell.bid-has-alert    { position: relative; }
.bid-alert-badge {
    display: inline-block;
    margin-left: 2px;
    font-size: .65rem;
    font-weight: 900;
    color: #ff4444;
    vertical-align: super;
    line-height: 1;
}

/* ── Bidding box ──────────────────────────────────────────── */
/* Rendered at the table centre while it's your turn — big touch targets. */
.bidding-inline {
    background: rgba(0,0,0,.5);
    padding: .8rem 1rem;
    border-radius: .6rem;
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
}

.bidding-box { display: flex; flex-direction: column; gap: .5rem; align-items: center; }

.bidding-special-row { display: flex; gap: .45rem; }

.bidding-grid { display: flex; flex-direction: column; gap: .3rem; }

.bid-level-row, .bid-strain-row { display: flex; gap: .3rem; justify-content: center; }
.bid-level-row .bid-level { min-width: 46px; }
.bid-strain-row .bid-btn { min-width: 58px; }
.bid-level { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.bid-level:hover:not(:disabled) { background: rgba(255,255,255,.25); }
.bid-strain-hint { color: #9ab; font-size: .85rem; text-align: center; padding: .3rem 0; }

.bid-btn {
    font-size: 1.05rem;
    font-weight: 600;
    padding: .38rem .15rem;
    border-radius: 6px;
    min-width: 54px;
}

.bid-pass     { background: #4a7a4a; color: #fff; border-color: #3a6a3a; }
.bid-pass:hover:not(:disabled) { background: #5a9a5a; }

.bid-double   { background: #7a3a3a; color: #fff; border-color: #6a2a2a; }
.bid-double:hover:not(:disabled) { background: #9a4a4a; }

.bid-redouble { background: #7a5a1a; color: #fff; border-color: #6a4a0a; }
.bid-redouble:hover:not(:disabled) { background: #9a7a2a; }

.bid-normal { background: #2a4a8a; color: #fff; border-color: #1a3a7a; }
.bid-normal:hover:not(:disabled) { background: #3a5aaa; }
.bid-normal.text-danger { color: #ff9999 !important; }
.bid-normal.denom-clubs, .bid-denom-header .denom-clubs { color: #6fe08a !important; }
.bid-selected { outline: 2px solid #ffd700 !important; }

/* ── Bid annotation row (confirm / alert / explain) ────────
   Pulses green so the required confirmation step is impossible to miss. */
.bid-confirm-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    background: rgba(20,60,30,.55);
    border: 2px solid #4ade80;
    border-radius: 5px;
    padding: .35rem .5rem;
    width: 100%;
    animation: pending-pulse 1.1s ease-in-out infinite;
}
.bid-pending-label {
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    min-width: 2rem;
    text-align: center;
}
.bid-alert-label {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    color: #ff9999;
    white-space: nowrap;
    cursor: pointer;
}
.bid-explain-input {
    flex: 1;
    min-width: 100px;
    font-size: .8rem;
    padding: .2rem .4rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 4px;
    color: #fff;
}
.bid-explain-input::placeholder { color: rgba(255,255,255,.4); }
.bid-confirm {
    background: #2a8a2a; color: #fff; border-color: #4ade80;
    font-weight: 700; padding: .2rem .8rem;
    white-space: nowrap;
}
.bid-confirm:hover { background: #3aaa3a; }
.bid-cancel {
    background: rgba(255,255,255,.1); color: #aaa; border-color: rgba(255,255,255,.2);
    padding: .2rem .5rem;
}
.bid-cancel:hover { background: rgba(255,255,255,.2); color: #fff; }

.bid-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ── Contract badge ───────────────────────────────────────── */
.contract-badge {
    background: rgba(0,0,0,.5);
    border-radius: .4rem;
    padding: .3rem .8rem;
    font-weight: 600;
    font-size: .9rem;
}

/* ── Result banner ────────────────────────────────────────── */
.result-banner {
    text-align: center;
    padding: 1.5rem;
    background: rgba(0,0,0,.5);
    border-top: 1px solid rgba(255,255,255,.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}
.result-contract { font-size: 1.3rem; font-weight: 700; }
.result-tricks   { font-size: 1rem; color: #ccc; }
.result-indicator { font-weight: 700; color: #fff; margin-left: .3rem; }
.result-score    { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.result-score-pos { color: #7dff7d; }
.result-score-neg { color: #ff7070; }
.result-side     { font-size: .85rem; }
.result-tricks-summary { font-size: .85rem; color: #aaa; }

/* ── Kibitz banner ────────────────────────────────────────── */
.kibitz-banner {
    text-align: center;
    background: rgba(13,202,240,.15);
    border: 1px solid rgba(13,202,240,.4);
    color: #0dcaf0;
    border-radius: .375rem;
    padding: .4rem 1rem;
    margin: .5rem .75rem 0;
    font-size: .85rem;
    letter-spacing: .02em;
}

/* ── Chat ─────────────────────────────────────────────────── */
.game-chat {
    padding: .5rem .75rem .75rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.lobby-chat {
    margin: 1.5rem auto 0;
    width: 100%;
    max-width: 900px;
    padding: 0 0 1.5rem;
}
.chat-window {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    overflow: hidden;
}
.chat-header {
    padding: .3rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.chat-messages {
    height: 160px;
    min-height: 0;
    overflow-y: auto;
    padding: .4rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    scrollbar-width: thin;
}
.chat-msg {
    display: flex;
    gap: .45rem;
    align-items: baseline;
    font-size: .85rem;
    line-height: 1.35;
}
.chat-sender {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: .85;
}
.chat-msg-mine .chat-sender { color: #7ec8e3; }
.chat-msg-theirs .chat-sender { color: #f0c070; }
.chat-text { word-break: break-word; }
.chat-input-row {
    display: flex;
    gap: .4rem;
    padding: .4rem .5rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.chat-input {
    flex: 1;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px;
    color: #fff;
    padding: .25rem .5rem;
    font-size: .85rem;
}
.chat-input::placeholder { opacity: .5; }
.chat-input:focus { outline: none; border-color: rgba(255,255,255,.4); }
.chat-send-btn {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 4px;
    color: #fff;
    padding: .25rem .75rem;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
}
.chat-send-btn:hover:not(:disabled) { background: rgba(255,255,255,.25); }
.chat-send-btn:disabled { opacity: .4; cursor: default; }

/* ── Connection overlay ───────────────────────────────────── */
.status-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 999;
    font-size: 1.1rem;
}

/* ── Landing page ─────────────────────────────────────────── */
.landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1.5rem 2rem;
}
.landing-nav {
    width: 100%;
    max-width: 1040px;
    padding: .5rem 0 2.75rem;
}
.landing-hero {
    width: 100%;
    max-width: 1040px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem 3rem;
    flex-wrap: wrap;
    padding-bottom: 3rem;
}
.landing-intro { flex: 1 1 420px; max-width: 580px; }
.landing-headline {
    font-size: clamp(2.3rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 1.1rem;
}
.landing-tagline {
    font-size: 1.08rem;
    line-height: 1.65;
    color: #cfe3d2;
    max-width: 34rem;
    margin-bottom: 0;
}
.landing-suits { margin-top: 1.5rem; font-size: 1.45rem; letter-spacing: .85rem; }
.landing-suits .suit-s { color: #f2f2f2; }
.landing-suits .suit-h { color: #ff8080; }
.landing-suits .suit-d { color: #ffb060; }
.landing-suits .suit-c { color: #6fe08a; }

.feature-grid {
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 1rem;
    padding-bottom: 2.5rem;
}
.feature-card {
    background: rgba(8,22,12,.45);
    border: 1px solid var(--card-edge);
    border-radius: .9rem;
    padding: 1.4rem 1.3rem;
}
.feature-icon { font-size: 1.6rem; line-height: 1; }
.feature-icon.suit-s { color: #f2f2f2; }
.feature-icon.suit-h { color: #ff8080; }
.feature-icon.suit-d { color: #ffb060; }
.feature-icon.suit-c { color: #6fe08a; }
.feature-card h3 { font-size: 1.12rem; margin: .65rem 0 .45rem; }
.feature-card p { font-size: .92rem; color: #b9cdbd; line-height: 1.55; margin: 0; }

.landing-footer {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    color: #8a9a8a;
}
.landing-footer a { color: #9aab9a; text-decoration: none; }
.landing-footer a:hover { color: #cdeed6; text-decoration: underline; }

/* ── Login / register ─────────────────────────────────────── */
.login-card {
    flex: 0 1 360px;
    background: rgba(8,22,12,.6);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: 1.9rem;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.login-title { font-size: 1.45rem; margin-bottom: .2rem; }
.login-subtitle { color: #9fb4a3; font-size: .95rem; margin-bottom: 1.25rem; }
.login-name-input {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.2);
}
.login-name-input:focus {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-color: #4ade80;
    box-shadow: 0 0 0 .2rem rgba(74,222,128,.15);
}
.login-toggle-link { color: #9fd6ad; font-size: .9rem; text-decoration: none; }
.login-toggle-link:hover { color: #cdeed6; text-decoration: underline; }

/* Deliberately quiet: legal links are required, but shouldn't compete with the game. */
.legal-footer { display: flex; justify-content: center; gap: .5rem; font-size: .8rem; color: #8a9a8a; }
.legal-footer a { color: #9aab9a; text-decoration: none; }
.legal-footer a:hover { color: #cdeed6; text-decoration: underline; }

/* ── Account page ─────────────────────────────────────────── */
.account-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.account-card { width: 100%; max-width: 420px; }
.chip-name { color: inherit; text-decoration: none; }
.chip-name:hover { color: #cdeed6; text-decoration: underline; }

/* ── Daily problem ────────────────────────────────────────── */
.daily-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffc107;
    box-shadow: 0 0 6px 1px rgba(255,193,7,.8);
}
.daily-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.daily-your-result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}
.daily-your-score { font-size: 1.6rem; font-weight: 700; }
.score-plus  { color: #4ade80; }
.score-minus { color: #f87171; }
.daily-tabs { display: flex; gap: .5rem; }
.leaderboard-table td, .leaderboard-table th { padding: .35rem .6rem; }
.leaderboard-you { background: rgba(255,255,255,.12); font-weight: 600; }
.leaderboard-pct { font-weight: 700; }
.leaderboard-day { text-align: center; font-size: .85rem; color: #ccc; white-space: nowrap; }

.daily-date-nav {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.daily-date-label { font-weight: 600; min-width: 12rem; text-align: center; }
.daily-not-scored {
    color: #ffc107;
    font-size: .9rem;
    margin-top: .25rem;
}

/* Claim / concede buttons under the contract badge */
.claim-row {
    display: flex;
    gap: .4rem;
    justify-content: center;
    margin-top: .35rem;
    flex-wrap: wrap;
}
.claim-btn { font-size: .72rem; padding: .1rem .5rem; opacity: .85; }
.claim-btn:hover { opacity: 1; }

/* ── Vugraph replay ───────────────────────────────────────── */
.vugraph-import-input { flex: 1 1 320px; background: #2d2d2d; color: #fff; border-color: #555; }
.vugraph-totals { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.vugraph-total { font-size: 1.15rem; font-weight: 700; }
.score-plus  { color: #4ade80; }
.score-minus { color: #f87171; }
.vugraph-board-table td, .vugraph-board-table th { padding: .35rem .5rem; }
.vugraph-room-cell { white-space: nowrap; }
.vugraph-imps { font-weight: 700; white-space: nowrap; }

.vugraph-players-row td { background: rgba(0,0,0,.25); }
.vugraph-players-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: .25rem 0; }
.vugraph-players-table th { text-align: left; color: #aaa; font-weight: 600; padding: .2rem .5rem; }
.vugraph-players-table td { padding: .2rem .5rem; }

.vugraph-compare { margin-top: .75rem; }
.vugraph-compare-title { font-size: .85rem; color: #aaa; margin-bottom: .3rem; }
.vugraph-compare-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vugraph-compare-table td { padding: .25rem .5rem; border-top: 1px solid rgba(255,255,255,.12); }
.vugraph-room { font-weight: 700; }

/* Floating reopen button when the result overlay is dismissed to inspect the table */
.show-result-row {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    gap: .5rem;
}

/* Problem explanation shown on the daily page once the viewer has played that day */
.daily-explanation {
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.35);
    border-radius: 8px;
    padding: .8rem 1rem;
}

/* ── Team matches ──────────────────────────────────────────── */
.team-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.team-create-heading { font-size: 1rem; color: #ffc107; margin-bottom: .5rem; }
.team-match-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .6rem .4rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.team-match-invited { background: rgba(255,193,7,.08); border-radius: 6px; }
.team-invited-tag { color: #ffc107; font-weight: 600; margin-left: .4rem; }
.team-status-banner { background: rgba(255,255,255,.07); border-radius: 8px;
    padding: .7rem 1rem; margin-bottom: 1rem; }
.team-tables-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .team-tables-grid, .team-create-grid { grid-template-columns: 1fr; } }
.team-table-heading { font-size: 1.05rem; margin-bottom: .6rem; }
.team-seat-row { display: flex; align-items: center; gap: .75rem; padding: .35rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08); }
.team-seat-row:last-child { border-bottom: none; }
.team-seat-mine { background: rgba(255,255,255,.08); border-radius: 6px; padding-left: .4rem; }
.team-seat-label { width: 5.5rem; font-weight: 600; }
.team-seat-occupant { flex: 1; }
.team-tag { font-size: .7rem; padding: 0 .35rem; border-radius: 4px; vertical-align: middle; }
.team-tag-1 { background: #2a5a8a; }
.team-tag-2 { background: #7a4a2a; }
.team-total { font-size: 1.05rem; }
.table-scroll { overflow-x: auto; }
.team-score-table { width: 100%; border-collapse: collapse; font-size: .92rem; white-space: nowrap; }
.team-score-table th { text-align: left; color: #aaa; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.15); padding: .3rem .5rem; }
.team-score-table td { padding: .3rem .5rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.team-ns { font-variant-numeric: tabular-nums; text-align: right; }
.team-imps { font-variant-numeric: tabular-nums; text-align: center; font-weight: 700; color: #4ade80; }
.team-board-chip { background: rgba(255,193,7,.15); color: #ffc107; border-radius: 12px;
    padding: .1rem .6rem; font-size: .85rem; margin-left: .6rem; }
.team-board-imps { font-size: 1.2rem; font-weight: 700; color: #4ade80; margin-top: .4rem; }
.team-running-total { color: #ccc; margin-top: .4rem; }
.team-seat-input { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.team-seat-input label { width: 7.2rem; flex: none; margin: 0; font-size: .85rem;
    color: #ccc; white-space: nowrap; }
.team-seat-input input { flex: 1; min-width: 0; }

/* ── Chat drawer (collapsed by default — the table gets the screen) ── */
.chat-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 940;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-size: .95rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.chat-fab:hover { background: rgba(0,0,0,.8); }
.chat-fab-badge {
    background: #ffc107;
    color: #222;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    padding: .05rem .45rem;
    margin-left: .4rem;
}
.chat-drawer {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 940;
    width: min(380px, calc(100vw - 2rem));
    box-shadow: 0 8px 30px rgba(0,0,0,.55);
    border-radius: 8px;
    overflow: hidden;
    background: #163019;
}
.chat-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .35rem .4rem .35rem .8rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(0,0,0,.4);
}
.chat-drawer-close {
    background: none;
    border: none;
    color: #ccc;
    font-size: 1rem;
    padding: 0 .5rem;
    cursor: pointer;
}
.chat-drawer-close:hover { color: #fff; }
.chat-drawer .chat-window { border: none; border-radius: 0; }
.chat-drawer .chat-messages { height: 220px; }

/* Short screens: the enlarged bidding box scales back so the table still
   fits without scrolling (cards already shrink via the vh-based --card-h). */
@media (max-height: 940px) {
    .bid-denom-header, .bid-row { grid-template-columns: repeat(5, 46px); }
    .bid-btn { font-size: .9rem; min-width: 46px; padding: .28rem .1rem; }
    .table-center .auction-table { max-height: 20vh; }
    .auction-table { font-size: .95rem; }
    .player-label { font-size: .9rem; }
}

/* ── Info panel: board, contract, auction — pinned top-left (BBO-style) ── */
.game-page { position: relative; }
.game-info-panel {
    position: absolute;
    top: 3.1rem;             /* just below the topbar */
    left: .75rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    max-width: 300px;
}
.game-info-panel .board-info { flex-direction: row; gap: .6rem; }
.game-info-panel .auction-table {
    display: block;
    font-size: .92rem;
    max-height: 44vh;
    overflow-y: auto;
}
/* Narrow screens: the panel flows above the table as a horizontal strip */
@media (max-width: 1100px) {
    .game-info-panel {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        margin: .4rem .75rem 0;
        max-width: none;
    }
    .game-info-panel .auction-table { max-height: 22vh; }
}