/* The Tichu table. Full-height column: score bar, felt table, your row, your hand, your actions. */
.tichu {
    --card-w: clamp(40px, calc((100vw - 32px) / 8.2), 64px);
    --card-h: calc(var(--card-w) * 1.45);

    min-height: 100dvh;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--ground);
}

.tichu__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
}
.tichu__code { font-weight: 800; letter-spacing: 0.12em; color: var(--muted); font-size: var(--text-sm); }
.score { margin-left: auto; display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--text-sm); color: var(--muted); }
.score b { color: var(--ink); font-size: var(--text-base); }
.score__team--us b { color: var(--accent); }
.score__target { font-size: var(--text-xs); }

/* ---------- the felt ---------- */
.tichu__table {
    flex: 1;
    margin: 0 var(--space-2);
    min-height: 300px;
    border-radius: var(--radius);
    background: radial-gradient(ellipse at center, var(--felt-2), var(--felt));
    color: var(--felt-ink);
    display: grid;
    grid-template-columns: minmax(64px, 1fr) minmax(0, 3fr) minmax(64px, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        ".    top    ."
        "left center right";
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
}

.tplayer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    min-width: 0;
}
.tplayer--top { grid-area: top; justify-self: center; }
.tplayer--left { grid-area: left; align-self: center; flex-direction: column; text-align: center; }
.tplayer--right { grid-area: right; align-self: center; flex-direction: column; text-align: center; }
.tplayer--turn { border-color: var(--call); background: rgb(0 0 0 / 15%); }
.tplayer--partner .avatar { background: var(--accent); }
.tplayer:not(.tplayer--partner):not(.tplayer--me) .avatar { background: var(--call); color: var(--call-ink); }
.tplayer__info { display: flex; flex-direction: column; min-width: 0; }
.tplayer--left .tplayer__info, .tplayer--right .tplayer__info { align-items: center; }
.tplayer__name { font-weight: 700; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.tplayer__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; justify-content: center; font-size: var(--text-xs); }
.tplayer__count { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.tplayer__status { opacity: 0.85; font-style: italic; }
.mini-card { width: 9px; height: 13px; border-radius: 2px; background: var(--card); display: inline-block; }
.pill--call { background: var(--call); color: var(--call-ink); }
.pill--done { background: var(--ok); color: var(--surface); }

.tichu__center {
    grid-area: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    min-width: 0;
}
.center-note { display: flex; flex-direction: column; gap: var(--space-2); max-width: 32ch; }
.center-note__title { font-weight: 800; font-size: var(--text-lg); }
.center-note__text { font-size: var(--text-sm); color: var(--felt-muted); }

/* ---------- the trick ---------- */
.trick { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; }
.trick__play { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); opacity: 0.6; }
.trick__play--top { opacity: 1; }
.trick__who { font-size: var(--text-xs); font-weight: 700; color: var(--felt-muted); }
.trick__cards { display: flex; flex-wrap: wrap; justify-content: center; }
.trick__cards .tcard + .tcard { margin-left: calc(var(--card-w) * -0.4); }
.trick__cards .tcard--small + .tcard--small { margin-left: -14px; }
.wish-chip {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: var(--special-tint);
    color: var(--special-mahjong);
    font-weight: 800;
    font-size: var(--text-sm);
}

/* ---------- exchange ---------- */
.exchange { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.exchange__slot {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    min-width: 84px;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    border: 2px dashed var(--felt-muted);
    background: rgb(0 0 0 / 12%);
    color: var(--felt-ink);
    cursor: pointer;
}
.exchange__slot--active { border-style: solid; border-color: var(--card); }
.exchange__slot:disabled { cursor: default; }
.exchange__label { font-size: var(--text-xs); font-weight: 700; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exchange__empty { width: 40px; height: 58px; display: grid; place-items: center; font-size: var(--text-lg); color: var(--felt-muted); }

/* ---------- scoreboard ---------- */
.scoreboard { color: var(--ink); width: min(100%, 320px); display: flex; flex-direction: column; gap: var(--space-3); }
.scoreboard__title { font-weight: 800; font-size: var(--text-lg); }
.scoreboard__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.scoreboard__table th, .scoreboard__table td { padding: var(--space-1) var(--space-2); text-align: right; }
.scoreboard__table th:first-child, .scoreboard__table td:first-child { text-align: left; color: var(--muted); }
.scoreboard__table thead th { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.scoreboard__table tfoot th { border-top: 1px solid var(--line); font-size: var(--text-base); }
.scoreboard__table tr.is-last td { font-weight: 700; }

/* ---------- you ---------- */
.tichu__me {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) 0;
}
.tplayer--me .avatar { background: var(--accent); }

.hand {
    display: flex;
    justify-content: center;
    padding: var(--space-5) var(--space-3) var(--space-2);
    min-height: calc(var(--card-h) + 32px);
}
.hand .tcard + .tcard { margin-left: calc(var(--card-w) * -0.42); }
/* Overlapped cards would cut a special card's name in half; its mark and color say enough. */
.hand .tcard:not(:last-child) .tcard__name, .trick__cards .tcard:not(:last-child) .tcard__name { display: none; }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
    padding: var(--space-2) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
    min-height: 72px;
}
.actions .btn { flex: 1; max-width: 220px; }
.actions .btn--wide { max-width: 360px; }

.wish-picker { width: 100%; display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: center; align-items: center; }
.wish-picker__label { font-size: var(--text-sm); font-weight: 700; color: var(--muted); margin-right: var(--space-1); }
.chip {
    min-width: 36px; min-height: 36px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 700;
    font-size: var(--text-sm);
    cursor: pointer;
}
.chip--on { background: var(--special-mahjong); border-color: var(--special-mahjong); color: var(--surface); }

.toast {
    margin: 0 auto;
    max-width: 420px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--call-soft);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.tichu__spectator { text-align: center; padding: var(--space-4); }

/* ---------- cards ---------- */
.tcard {
    position: relative;
    flex: none;
    width: var(--card-w);
    height: var(--card-h);
    padding: 4px;
    border-radius: 6px;
    border: 1px solid var(--card-line);
    background: var(--card);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-family: var(--font);
    text-align: left;
    transition: transform 120ms ease;
    color: var(--suit-sword);
}
button.tcard { cursor: pointer; }
.tcard--selected { transform: translateY(-14px); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-card); }
.tcard__rank { font-weight: 800; font-size: calc(var(--card-w) * 0.34); line-height: 1; }
.tcard__suit { line-height: 0; }
.tcard__name {
    position: absolute; left: 0; right: 0; bottom: 4px;
    font-size: 9px; font-weight: 800; text-align: center;
    text-transform: uppercase; letter-spacing: 0.02em;
}
/* Top-left: in an overlapping hand only each card's left edge is visible. */
.tcard__badge {
    position: absolute; top: -10px; left: -4px; z-index: 1;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 11px; font-weight: 800;
    display: grid; place-items: center;
}
.tcard--small { --card-w: 34px; width: 34px; height: 49px; padding: 3px; }
.tcard--small .tcard__name { display: none; }

.tcard--jade { color: var(--suit-jade); }
.tcard--sword { color: var(--suit-sword); }
.tcard--pagoda { color: var(--suit-pagoda); }
.tcard--star { color: var(--suit-star); }
.tcard--mahjong, .tcard--dog, .tcard--phoenix, .tcard--dragon { background: var(--special-tint); }
.tcard--mahjong { color: var(--special-mahjong); }
.tcard--dog { color: var(--special-dog); }
.tcard--phoenix { color: var(--special-phoenix); }
.tcard--dragon { color: var(--special-dragon); }
.tcard--dog .tcard__suit, .tcard--phoenix .tcard__suit, .tcard--dragon .tcard__suit { margin: auto; transform: scale(1.4); }

@media (min-width: 720px) {
    .tichu__table { margin: 0 var(--space-4); padding: var(--space-5); }
    .tcard__name { font-size: 10px; }
}