/* Visual theme shared with the Android app: dark lacquer home screen with gold
   trim, green felt table, cream playing cards. Colour tokens mirror colors.xml. */
:root {
    color-scheme: dark;
    --black: #080504;
    --red: #e72b12;
    --red-dark: #950500;
    --gold: #d59624;
    --gold-light: #ffe88b;
    --gold-text: #fff0a6;
    --input-text: #fff8ea;
    --hint-text: #cdbe99;
    --status-green: #9ad84e;
    --card-face: #fffbf2;
    --card-border: #e5dcc8;
    --card-red: #c8342a;
    --card-black: #241d1a;
    --card-selected-face: #fff3d6;
    --card-selected-border: #d5a54a;
    --card-hint-face: #fff6c9;
    --btn-green: #2e8b57;
    --btn-green-pressed: #256b44;
    --btn-red: #c0392b;
    --btn-red-pressed: #96281b;
    --btn-yellow: #d9a62e;
    --btn-yellow-pressed: #b5881f;
    --btn-text: #fff8e7;
    font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    line-height: 1.5;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--input-text);
    background: linear-gradient(180deg, #100806 0%, #2a100a 50%, #070403 100%) fixed;
    -webkit-text-size-adjust: 100%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

/* ---------- home / lobby ---------- */

.home-stage {
    position: relative;
    width: min(100%, 34rem);
    min-height: 100vh;
    margin: 0 auto;
    padding: max(2rem, env(safe-area-inset-top)) 2.5rem 5rem;
    border-inline: 28px solid transparent;
    border-image: linear-gradient(180deg, #5a1d10, #1c0905) 1;
}

.home-stage::after {
    content: "♠";
    position: absolute;
    inset-inline: 0;
    bottom: 1.2rem;
    text-align: center;
    font-size: 3rem;
    color: #6e351b;
    pointer-events: none;
}

.plaque {
    position: relative;
    display: flex;
    min-height: 7.5rem;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 1.2rem;
    text-align: center;
    background: linear-gradient(180deg, #8d1a10, #2b0705);
    border: 5px solid var(--gold);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px #f6bd52;
}

.plaque h1 {
    margin: 0;
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    font-weight: 900;
    color: var(--gold-text);
    text-shadow: 0 3px 3px #7a2100;
}

.crown {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    translate: -50% 0;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--gold-light);
}

.mini-cards {
    position: absolute;
    top: -1.1rem;
    right: 0.4rem;
    display: flex;
    rotate: 8deg;
}

.mini-card {
    display: block;
    width: 2.4rem;
    height: 3.5rem;
    margin-inline-start: -0.5rem;
    padding: 0.15rem 0.3rem;
    font: 700 0.9rem/1 serif;
    color: var(--card-black);
    background: var(--card-face);
    border: 1px solid var(--card-border);
    border-radius: 6px;
}

.mini-card.red {
    color: #a11610;
}

main {
    margin-top: 1.5rem;
}

.heading-line {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.8rem;
}

.heading-line .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.heading-line h2,
.lobby-panel h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gold-text);
}

#join-form {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.6rem;
}

label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-text);
}

label .suit,
label span[aria-hidden] {
    color: var(--gold-light);
}

input,
button,
.btn-secondary,
.cap {
    font: inherit;
}

input {
    width: 100%;
    min-height: 4.2rem;
    padding: 0.75rem 1.1rem;
    font-size: 1.35rem;
    text-align: center;
    color: var(--input-text);
    background: linear-gradient(90deg, #32100c, #110807, #32100c);
    border: 2px solid var(--gold);
    border-radius: 4px;
}

input::placeholder {
    color: var(--hint-text);
}

input:focus-visible {
    border-color: var(--gold-light);
    outline: 3px solid var(--gold-light);
    outline-offset: 2px;
}

.btn-create {
    position: relative;
    display: flex;
    min-height: 5.5rem;
    margin-top: 0.8rem;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--gold-text);
    background: linear-gradient(180deg, #f14620, var(--red) 45%, var(--red-dark));
    border: 4px solid var(--gold-light);
    border-radius: 12px;
    cursor: pointer;
}

.btn-create .suit {
    font-size: 2.4rem;
    color: #7e1609;
}

.btn-create:active {
    background: linear-gradient(180deg, #b70d06, #710200);
}

.btn-create:disabled {
    color: var(--hint-text);
    background: #5b3b32;
    border-color: #8f7655;
}

.btn-create:focus-visible,
.btn-secondary:focus-visible,
.cap:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.btn-secondary {
    display: inline-flex;
    min-height: 3.6rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.4rem;
    color: var(--gold-text);
    background: #3b211e;
    border: 1px solid #b88737;
    border-radius: 6px;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
}

.btn-secondary:active {
    background: #281817;
    border-color: #f5c968;
}

.status-line {
    min-height: 1.6rem;
    margin: 1.6rem 0 0;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    color: var(--status-green);
}

.lobby-panel {
    margin-block: 1.2rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(180deg, #3b211e, #100806);
    border: 2px solid var(--gold);
    border-radius: 10px;
}

.lobby-panel h2 {
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
}

.lobby-panel p {
    margin: 0.2rem 0;
}

.voice-choice {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.8rem 0 0;
    padding: 0.6rem 1rem;
    border: 1px solid var(--gold);
    border-radius: 8px;
}

.voice-choice legend {
    padding: 0 0.4rem;
    color: var(--gold-text);
    font-weight: 800;
}

.voice-choice label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: 1.1rem;
    font-weight: 800;
}

.voice-choice input {
    width: 1.3rem;
    height: 1.3rem;
}

.player-rows {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.player-rows li {
    padding: 0.7rem 1rem;
    background: #32100c;
    border: 1px solid #b88737;
    border-radius: 6px;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

/* ---------- table ---------- */

.table-page {
    overscroll-behavior: none;
    touch-action: manipulation;
    background: linear-gradient(180deg, #145e43, #061c15) fixed;
}

.table {
    display: flex;
    width: min(100%, 72rem);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
        max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    flex-direction: column;
    gap: 0.5rem;
}

.table-status {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gold-text);
}

.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.phase {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff3c4;
}

.multiplier {
    margin-inline-end: auto;
    font-size: 1.15rem;
    color: var(--gold-text);
}

.bottom-cards-row {
    display: flex;
    min-height: 2.6rem;
    justify-content: center;
}

.bottom-cards {
    display: flex;
    gap: 0.25rem;
}

/* Four seats (Guandan): the partner sits in the top row, as a compact line of avatar, name and count. */
.bottom-cards-row {
    align-items: center;
    gap: 0.8rem;
}

.bottom-cards-row .opponent.partner {
    width: auto;
    flex-direction: row;
    gap: 0.5rem;
}

.bottom-cards-row .opponent.partner .avatar {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.2rem;
}

.bottom-cards-row .played {
    min-height: 0;
    justify-content: flex-start;
}

.guandan-info {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-text);
}

.middle {
    display: grid;
    flex: 1;
    grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 11rem;
}

.opponent {
    display: flex;
    width: 5.2rem;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}

#opp-right-box {
    grid-column: 5;
}

.avatar {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    font-size: 1.8rem;
    color: #ffd56a;
    background: #7e1717;
    border: 2px solid #ffd56a;
    border-radius: 50%;
}

.opponent.landlord .avatar {
    background: #b22a1d;
    box-shadow: 0 0 0 3px var(--gold-light);
}

.opp-name {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opp-count {
    font-size: 0.85rem;
    color: #fff3c4;
}

.played {
    display: flex;
    min-height: 4.6rem;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-content: center;
}

#played-right {
    grid-column: 4;
    justify-content: flex-end;
}

.played-left {
    grid-column: 2;
    justify-content: flex-start;
}

.center-area {
    grid-column: 3;
    text-align: center;
}

.center-text {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold-text);
}

.opponent#opp-left-box {
    grid-column: 1;
}

/* ---------- cards ---------- */

.card-face {
    display: inline-flex;
    width: 2.75rem;
    height: 4.1rem;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    color: var(--card-black);
    background: var(--card-face);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    user-select: none;
}

.card-face.red {
    color: var(--card-red);
}

.card-rank {
    font-size: 1.25rem;
    line-height: 1.05;
    white-space: pre;
}

.card-suit {
    margin-top: 0.1rem;
    font-size: 0.8rem;
    line-height: 1;
}

.card-face.joker .card-rank {
    font-size: 0.8rem;
    line-height: 1.1;
}

.card-face.small {
    width: 2rem;
    height: 3rem;
}

.card-face.small .card-rank {
    font-size: 0.95rem;
}

/* ---------- controls ---------- */

.controls {
    min-height: 3rem;
}

.control-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding-block: 0.25rem;
}

.cap {
    display: inline-flex;
    min-width: 5.5rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--btn-text);
    text-decoration: none;
    background: var(--btn-green);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.cap-green:active { background: var(--btn-green-pressed); }
.cap-red { background: var(--btn-red); }
.cap-red:active { background: var(--btn-red-pressed); }
.cap-yellow { background: var(--btn-yellow); }
.cap-yellow:active { background: var(--btn-yellow-pressed); }
.cap-plain { background: #3b211e; border: 1px solid #b88737; }

.cap[aria-pressed="true"] {
    background: var(--btn-yellow-pressed);
    box-shadow: 0 0 0 2px var(--gold-light);
}

.cap:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- hand ---------- */

.hand-area {
    margin-top: auto;
}

.hand-heading {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: #fff3c4;
}

.hand-list {
    display: flex;
    margin: 0;
    padding: 1.2rem 1rem 0.4rem;
    overflow-x: auto;
    list-style: none;
    justify-content: safe center;
    scrollbar-width: thin;
}

.hand-list li {
    flex: none;
    margin-inline-start: -1.35rem;
}

.hand-list li:first-child {
    margin-inline-start: 0;
}

.hand-card {
    display: flex;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: translate 0.08s ease-out;
}

.hand-card .card-face {
    width: 3.4rem;
    height: 5.1rem;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.3);
}

.hand-card .card-rank {
    font-size: 1.5rem;
}

.hand-card .card-suit {
    font-size: 1rem;
}

/* One button holds every card of a rank, spread the same way separate cards are. */
.hand-card .card-face + .card-face {
    margin-inline-start: -1.35rem;
}

.hand-card .card-face.picked {
    translate: 0 -0.9rem;
    background: var(--card-selected-face);
    border: 1.5px solid var(--card-selected-border);
}

.hand-card .card-face.hint {
    background: var(--card-hint-face);
}

.hand-card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ---------- settlement ---------- */

.settlement {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
}

.settlement-card {
    width: min(100%, 22rem);
    padding: 1.4rem;
    text-align: center;
    background: linear-gradient(180deg, #3b211e, #100806);
    border: 2px solid var(--gold);
    border-radius: 10px;
}

.settlement-card h2 {
    margin: 0 0 0.6rem;
    color: var(--gold-text);
}

.settlement-text {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

/* ---------- small screens ---------- */

@media (max-width: 42rem) {
    .middle {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "ol pl pl"
            "center center center"
            "or pr pr";
        row-gap: 0.4rem;
    }

    .middle > #opp-left-box { grid-area: ol; grid-column: auto; }
    .middle > #played-left { grid-area: pl; grid-column: auto; }
    .middle > .center-area { grid-area: center; grid-column: auto; }
    .middle > #opp-right-box { grid-area: or; grid-column: auto; }
    .middle > #played-right { grid-area: pr; grid-column: auto; justify-content: flex-start; }

    .opponent {
        width: 4.2rem;
    }

    .home-stage {
        padding-inline: 1.2rem;
        border-inline-width: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hand-card {
        transition: none;
    }
}

/* ---------- table in portrait: draw it sideways ----------
   The table is designed for landscape. When the browser cannot lock the screen
   orientation (most mobile browsers outside fullscreen), a portrait viewport
   turns the whole table 90 degrees so the phone is simply held sideways. */
@media (orientation: portrait) {
    /* The sideways table only has the phone's short edge (100vw) as its height, so
       every rem on the page shrinks with it to keep the whole table in view. */
    .rotate-fallback .table-page {
        overflow: hidden;
    }

    .rotate-fallback .table-page .table,
    .rotate-fallback .table-page .settlement {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vh;
        width: 100dvh;
        height: 100vw;
        height: 100dvw;
        min-height: 0;
        margin: 0;
        overflow: auto;
        transform-origin: top left;
        transform: translateX(100vw) rotate(90deg);
    }
}

.landscape-prompt {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(6, 28, 21, 0.94);
    color: var(--gold-text, #ffe9a8);
    font-size: 1.6rem;
    font-weight: 700;
}

/* ---------- phone stage ----------
   Held sideways a phone is only ~360-430px tall. Everything on the table page is
   sized from the screen height (1vh true landscape, 1vw in the sideways fallback)
   so every phone shows the same picture, with cards as large as the height allows. */
@media (orientation: landscape) and (max-height: 520px) {

    :root:has(body.table-page) {
        font-size: calc(1vh * 4);
    }

    .table-page .table {
        max-width: calc(1vh * 200);
        gap: 0.25rem;
        padding: 0.35rem 0.6rem;
    }

    /* Connection status stays a live region for screen readers but floats over the top. */
    .table-page .table-status {
        position: absolute;
        top: 0.1rem;
        left: 50%;
        z-index: 1;
        margin: 0;
        font-size: 0.7rem;
        translate: -50% 0;
        pointer-events: none;
    }

    .table-page .topbar {
        gap: 0.6rem;
    }

    .table-page .phase, .table-page .multiplier {
        font-size: 1.2rem;
    }

    .table-page .topbar .cap {
        min-width: 0;
        min-height: 2.4rem;
        padding: 0.2rem 0.9rem;
        font-size: 1.05rem;
    }

    .table-page .bottom-cards-row {
        min-height: 0;
    }

    .table-page .middle {
        min-height: 0;
        gap: 0.3rem;
    }

    .table-page .avatar {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.5rem;
    }

    .table-page .opponent {
        width: 5.5rem;
    }

    .table-page .opp-name, .table-page .opp-count {
        font-size: 1rem;
    }

    .table-page .center-text {
        font-size: 1.2rem;
    }

    .table-page .played {
        min-height: 0;
    }

    .table-page .card-face.small {
        width: 2.6rem;
        height: 3.9rem;
    }

    .table-page .card-face.small .card-rank {
        font-size: 1.35rem;
    }

    .table-page .card-face.small .card-suit {
        font-size: 0.95rem;
    }

    .table-page .controls {
        min-height: 0;
    }

    .table-page .control-row {
        gap: 0.6rem;
        padding-block: 0;
    }

    .table-page .controls .cap {
        min-width: 5.5rem;
        min-height: 3.1rem;
        padding: 0.2rem 1.2rem;
        font-size: 1.3rem;
    }

    .table-page .hand-heading {
        margin: 0;
        font-size: 1.05rem;
    }

    .table-page .hand-list {
        padding: 1rem 0.5rem 0.2rem;
    }

    .table-page .hand-list li {
        margin-inline-start: -1.7rem;
    }

    .table-page .hand-list li:first-child {
        margin-inline-start: 0;
    }

    .table-page .hand-card .card-face {
        width: 4.1rem;
        height: 6.1rem;
    }

    .table-page .hand-card .card-rank {
        font-size: 2.1rem;
    }

    .table-page .hand-card .card-suit {
        font-size: 1.5rem;
    }

    .table-page .hand-card .card-face + .card-face {
        margin-inline-start: -1.7rem;
    }
    
    .table-page .hand-card .card-face.picked {
        translate: 0 -0.9rem;
    }

    .table-page .table {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: auto;
    }
}

@media (orientation: portrait) {

    :root.rotate-fallback:has(body.table-page) {
        font-size: calc(1vw * 4);
    }

    .rotate-fallback .table-page .table {
        max-width: calc(1vw * 200);
        gap: 0.25rem;
        padding: 0.35rem 0.6rem;
    }

    /* Connection status stays a live region for screen readers but floats over the top. */
    .rotate-fallback .table-page .table-status {
        position: absolute;
        top: 0.1rem;
        left: 50%;
        z-index: 1;
        margin: 0;
        font-size: 0.7rem;
        translate: -50% 0;
        pointer-events: none;
    }

    .rotate-fallback .table-page .topbar {
        gap: 0.6rem;
    }

    .rotate-fallback .table-page .phase, .rotate-fallback .table-page .multiplier {
        font-size: 1.2rem;
    }

    .rotate-fallback .table-page .topbar .cap {
        min-width: 0;
        min-height: 2.4rem;
        padding: 0.2rem 0.9rem;
        font-size: 1.05rem;
    }

    .rotate-fallback .table-page .bottom-cards-row {
        min-height: 0;
    }

    .rotate-fallback .table-page .middle {
        min-height: 0;
        gap: 0.3rem;
    }

    .rotate-fallback .table-page .avatar {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.5rem;
    }

    .rotate-fallback .table-page .opponent {
        width: 5.5rem;
    }

    .rotate-fallback .table-page .opp-name, .rotate-fallback .table-page .opp-count {
        font-size: 1rem;
    }

    .rotate-fallback .table-page .center-text {
        font-size: 1.2rem;
    }

    .rotate-fallback .table-page .played {
        min-height: 0;
    }

    .rotate-fallback .table-page .card-face.small {
        width: 2.6rem;
        height: 3.9rem;
    }

    .rotate-fallback .table-page .card-face.small .card-rank {
        font-size: 1.35rem;
    }

    .rotate-fallback .table-page .card-face.small .card-suit {
        font-size: 0.95rem;
    }

    .rotate-fallback .table-page .controls {
        min-height: 0;
    }

    .rotate-fallback .table-page .control-row {
        gap: 0.6rem;
        padding-block: 0;
    }

    .rotate-fallback .table-page .controls .cap {
        min-width: 5.5rem;
        min-height: 3.1rem;
        padding: 0.2rem 1.2rem;
        font-size: 1.3rem;
    }

    .rotate-fallback .table-page .hand-heading {
        margin: 0;
        font-size: 1.05rem;
    }

    .rotate-fallback .table-page .hand-list {
        padding: 1rem 0.5rem 0.2rem;
    }

    .rotate-fallback .table-page .hand-list li {
        margin-inline-start: -1.7rem;
    }

    .rotate-fallback .table-page .hand-list li:first-child {
        margin-inline-start: 0;
    }

    .rotate-fallback .table-page .hand-card .card-face {
        width: 4.1rem;
        height: 6.1rem;
    }

    .rotate-fallback .table-page .hand-card .card-rank {
        font-size: 2.1rem;
    }

    .rotate-fallback .table-page .hand-card .card-suit {
        font-size: 1.5rem;
    }

    .rotate-fallback .table-page .hand-card .card-face + .card-face {
        margin-inline-start: -1.7rem;
    }
    
    .rotate-fallback .table-page .hand-card .card-face.picked {
        translate: 0 -0.9rem;
    }
}

/* Narrower phones (16:9): slimmer cards at the same overlap keep 20 cards in one row
   with every rank still showing. */
@media (orientation: landscape) and (max-height: 520px) and (max-aspect-ratio: 17/9) {
    .table-page .hand-card .card-face {
        width: 3.5rem;
    }

    .table-page .hand-card .card-rank {
        font-size: 1.85rem;
    }

    .table-page .hand-card .card-face + .card-face {
        margin-inline-start: -1.45rem;
    }

    .table-page .hand-list li {
        margin-inline-start: -1.45rem;
    }

    .table-page .hand-list li:first-child {
        margin-inline-start: 0;
    }
}

/* Hosting switch: black with white text while off, green with white text while on. */
#auto-play {
    color: #fff;
    background: #000;
    border: 1px solid #555;
}

#auto-play:active {
    background: #333;
}

#auto-play[aria-pressed="true"] {
    color: #fff;
    background: var(--btn-green);
    border-color: var(--btn-green);
    box-shadow: none;
}

/* Nothing can beat the previous play: only the pass button is left. */
.table.only-pass .topbar .cap {
    display: none;
}

.table.only-pass .hand-list {
    pointer-events: none;
}

.table.only-pass #toggle-narration {
    display: none;
}

/* ---------- table action row: big touch target, same look ----------
   Screen readers pick the focus by the element under the finger, so the button element
   itself is large and transparent (it fills its share of the row and reaches down over the
   "你的手牌" heading to the cards) while the coloured pill inside keeps the old size.
   Touching anywhere near a button lands on that button, never on empty table. */
.table-page .controls {
    position: relative;
    z-index: 2;
}

/* Only while a row of buttons shows: its touch area overlaps the hand heading. */
.table-page .controls.active {
    margin-bottom: -1.65rem;
}

.table-page .controls .control-row,
.rotate-fallback .table-page .controls .control-row {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
}

.table-page .controls .cap.hit,
.rotate-fallback .table-page .controls .cap.hit {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    align-items: flex-start;
    padding: 0.35rem 0.3rem 2.15rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    touch-action: manipulation;
}

.table-page .controls .cap.hit .pill {
    display: inline-flex;
    min-width: 5.5rem;
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 1.2rem;
    border-radius: 999px;
    background: var(--btn-green);
}

/* Pure signal colours; the pill rules carry .hit so they beat the base green above. */
.table-page .controls .cap.hit .pill { background: #1fa04a; color: #fff; }
.table-page .controls .cap-green.hit .pill { background: #1fa04a; color: #fff; }
.table-page .controls .cap-red.hit .pill { background: #e02020; color: #fff; }
.table-page .controls .cap-yellow.hit .pill { background: #f5c400; color: #1a1400; }
.table-page .controls .cap-plain.hit .pill { background: #3b211e; color: #fff; border: 1px solid #b88737; }
.table-page .controls .cap-green.hit:active .pill { background: #167a38; }
.table-page .controls .cap-red.hit:active .pill { background: #b41818; }
.table-page .controls .cap-yellow.hit:active .pill { background: #d1a700; }

/* ---------- table layout: one row for the opponents and what they played ----------
   Without an explicit row the left opponent was auto-placed on a second row and sat on top
   of the hand, and the action buttons covered the cards just played. Only in landscape:
   the sideways portrait table places these boxes with its own grid areas. */
@media (orientation: landscape) {
    .table-page .middle > * {
        grid-row: 1;
    }
}

/* ---------- hand: rank and suit sit in the strip of each card that stays visible ----------
   The card keeps its size. The page measures the room (--strip, in px) and spreads the
   hand over it; text grows with the strip, is pinned to the card's left edge and so is never
   under the next card. */
.table-page .hand-list {
    --strip: 2.4rem;
    padding-inline: 0.3rem;
}

.table-page .hand-list li,
.rotate-fallback .table-page .hand-list li {
    margin-inline-start: calc(var(--strip) - var(--card-w, 4.1rem));
}

.table-page .hand-list li:first-child,
.rotate-fallback .table-page .hand-list li:first-child {
    margin-inline-start: 0;
}

.table-page .hand-card .card-face + .card-face,
.rotate-fallback .table-page .hand-card .card-face + .card-face {
    margin-inline-start: calc(var(--strip) - var(--card-w, 4.1rem));
}

.table-page .hand-card .card-face,
.rotate-fallback .table-page .hand-card .card-face {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.35rem 0 0 0.25rem;
}

.table-page .hand-card .card-rank,
.rotate-fallback .table-page .hand-card .card-rank {
    font-size: min(calc(var(--strip) * 0.95), 2.9rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

/* "10" is two glyphs wide: smaller, so it still fits the strip that stays visible. */
.table-page .hand-card .card-rank.wide,
.rotate-fallback .table-page .hand-card .card-rank.wide {
    font-size: min(calc(var(--strip) * 0.8), 2.5rem);
    letter-spacing: -0.09em;
}

.table-page .hand-card .card-suit,
.rotate-fallback .table-page .hand-card .card-suit {
    margin-top: 0.15rem;
    font-size: min(calc(var(--strip) * 0.78), 2.3rem);
    line-height: 1;
}

.table-page .hand-card .card-face.joker .card-rank,
.rotate-fallback .table-page .hand-card .card-face.joker .card-rank {
    font-size: min(calc(var(--strip) * 0.42), 1.15rem);
    line-height: 1.08;
    letter-spacing: 0;
}

/* Picked and recommended cards rise by a third of their height; nothing changes colour. */
.table-page .hand-card .card-face.hint,
.rotate-fallback .table-page .hand-card .card-face.hint {
    background: var(--card-face);
    translate: 0 -33.333%;
}

.table-page .hand-card .card-face.picked,
.rotate-fallback .table-page .hand-card .card-face.picked {
    translate: 0 -33.333%;
}

/* Room above the hand for the raised cards (the list scrolls, so it would clip them). */
.table-page .hand-list {
    padding-top: 2.2rem;
}

/* Yellow, white text: the 推荐 button and the 托管 switch while it is on. */
.table-page .controls .cap-yellow.hit .pill,
#auto-play[aria-pressed="true"] {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Stamp the page logs back to the host: tells which stylesheet a phone really loaded. */
:root {
    --css-version: "hand-strip-colours-4";
}

/* ---------- sideways portrait table: same single row as landscape ----------
   The small-screen rules above judge by the phone's short edge (under 42rem) and stack the
   players in three rows, which cannot fit the 100vw-tall sideways table: the buttons ended
   up on top of the players. The sideways table is as wide as a landscape one. */
.rotate-fallback .table-page .middle {
    grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 1.2fr) minmax(0, 1fr) auto;
    grid-template-areas: none;
    row-gap: 0;
}

.rotate-fallback .table-page .middle > #opp-left-box { grid-area: auto; grid-row: 1; grid-column: 1; }
.rotate-fallback .table-page .middle > #played-left { grid-area: auto; grid-row: 1; grid-column: 2; justify-content: flex-start; }
.rotate-fallback .table-page .middle > .center-area { grid-area: auto; grid-row: 1; grid-column: 3; }
.rotate-fallback .table-page .middle > #played-right { grid-area: auto; grid-row: 1; grid-column: 4; justify-content: flex-end; }
.rotate-fallback .table-page .middle > #opp-right-box { grid-area: auto; grid-row: 1; grid-column: 5; }