:root {
    --bg: #12161c;
    --panel: #1a212a;
    --panel-edge: #273140;
    --ink: #e8edf3;
    --ink-muted: #8fa0b3;
    --accent: #4a9d6f;
    --accent-ink: #ffffff;
    --danger: #e06060;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 2rem 1.25rem 4rem;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

h1 { font-size: 1.6rem; margin: 0 0 .35rem; font-weight: 600; }
h2 { font-size: 1rem; margin: 0 0 .9rem; font-weight: 600; color: var(--ink-muted);
     text-transform: uppercase; letter-spacing: .07em; }

.muted { color: var(--ink-muted); margin: 0 0 1rem; }
.hint  { color: var(--ink-muted); font-size: .85rem; margin: .75rem 0 0; max-width: 46ch; }
.error { color: var(--danger); margin: .6rem 0 0; font-size: .9rem; }

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

.lobby { max-width: 27rem; margin: 12vh auto 0; text-align: center; }
.lobby h1 { font-size: 2.2rem; }
.tagline { color: var(--ink-muted); margin: 0 0 2.5rem; }
.lobby-actions { display: flex; flex-direction: column; gap: 2rem; }

.join-box { display: flex; flex-direction: column; gap: .5rem; }
.join-box label { color: var(--ink-muted); font-size: .9rem; }
.join-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .4rem; }

.code-input {
    width: 7.5rem;
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: .35em;
    text-indent: .35em;
    text-transform: uppercase;
}

/* ---- panels ---- */

.panel {
    max-width: 34rem;
    margin: 0 auto 1.25rem;
    padding: 1.5rem;
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
}

.table-view { max-width: 34rem; margin: 0 auto; }

.table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.table-header .muted { margin: 0; font-size: .9rem; }
.you { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.you-name { font-weight: 600; }

.table-footer { text-align: center; margin-top: 1.5rem; }

/* ---- seats ---- */

.seat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }

.seat {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .25rem;
    border-bottom: 1px solid var(--panel-edge);
}

.seat:last-child { border-bottom: none; }
.seat-name { font-weight: 500; }
.seat.offline { opacity: .45; }

.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: none; }
.seat.offline .dot { background: var(--ink-muted); }

.tag {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-muted);
}

.badge {
    margin-left: auto;
    font-size: .72rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.badge-player    { background: rgba(74, 157, 111, .18); color: #7fd3a3; }
.badge-spectator { background: rgba(143, 160, 179, .15); color: var(--ink-muted); }
.you .badge { margin-left: 0; }

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

input[type="text"], .text-input, .code-input {
    padding: .6rem .75rem;
    background: #0e1218;
    color: var(--ink);
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    font: inherit;
    outline: none;
}

.text-input { width: 100%; margin-bottom: 1rem; }

input:focus { border-color: var(--accent); }

.btn {
    display: inline-block;
    padding: .6rem 1.1rem;
    background: #232d39;
    color: var(--ink);
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover:not(:disabled) { border-color: var(--ink-muted); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }

.btn-quiet { background: none; border-color: transparent; color: var(--ink-muted); }
.btn-quiet:hover { color: var(--ink); }

.toggle { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; }

/* ---- framework bits ---- */

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: .8rem 1.25rem;
    background: #ffefc2;
    color: #3d2f00;
    box-shadow: 0 -1px 12px rgba(0, 0, 0, .3);
}

#blazor-error-ui .dismiss { float: right; cursor: pointer; }

.blazor-error-boundary { padding: 1rem; background: #b32121; color: #fff; border-radius: var(--radius); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---- table code + copy ---- */

.code-block { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.code-label { color: var(--ink-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }

.code-chip {
    font: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-indent: .22em;
    padding: .25rem .7rem;
    color: var(--ink);
    background: #0e1218;
    border: 1px dashed var(--panel-edge);
    border-radius: var(--radius);
    cursor: pointer;
}

.code-chip:hover { border-color: var(--accent); border-style: solid; }

.btn-sm { padding: .3rem .65rem; font-size: .85rem; }

.copy-note {
    font-size: .85rem;
    color: var(--accent);
    opacity: 0;
    transition: opacity .15s ease;
}

.copy-note.shown { opacity: 1; }

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

.card {
    position: relative;
    width: 4.5rem;
    height: 6.6rem;
    border-radius: .55rem;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
    flex: none;

    /* The buttons wrapping a card zero out line-height to kill the inline gap
       underneath it. Reset it here so the corner number keeps a real line box —
       inheriting 0 collapses it to zero height and clips the glyph. */
    line-height: 1;
}

.card-sm { width: 2.6rem; height: 3.8rem; border-width: 1.5px; border-radius: .35rem; }

.card-face {
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .45);
    line-height: 1;
}

.card-sm .card-face { font-size: 1.05rem; }

.card-corner {
    position: absolute;
    top: .2rem;
    left: .35rem;
    font-size: .8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
}

.card-sm .card-corner { display: none; }

/* Art sits over the colour, so a custom design keeps its card's identity. */
.card-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.card-red    { background: #d33a2c; }
.card-yellow { background: #d9a520; }
.card-green  { background: #3f9d48; }
.card-blue   { background: #2f6fc4; }

.card-wild {
    background:
        conic-gradient(#d33a2c 0deg 90deg, #d9a520 90deg 180deg,
                       #3f9d48 180deg 270deg, #2f6fc4 270deg 360deg);
}

.card-back {
    background: repeating-linear-gradient(45deg, #1d2530 0 6px, #232d3a 6px 12px);
    border-color: rgba(255, 255, 255, .35);
}

.card-back-mark {
    width: 60%;
    height: 34%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .22);
}

.card-button {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform .1s ease;
    line-height: 0;
}

.card-button:hover { transform: translateY(-.5rem); }

/* ---- play area ---- */

.piles { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1.75rem; }
.pile { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pile-label { font-size: .78rem; color: var(--ink-muted); }

.pile-button { padding: 0; background: none; border: none; cursor: pointer; line-height: 0; }
.pile-button:disabled { cursor: default; }
.pile-button:hover:not(:disabled) .card { border-color: var(--accent); }

.opponents { display: flex; flex-direction: column; gap: 1.1rem; }
.opponent.offline { opacity: .45; }
.opponent-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.count { margin-left: auto; font-size: .8rem; color: var(--ink-muted); }

/* Overlapping backs, so a big hand still fits on one row. */
.fan { display: flex; }
.fan > * { margin-right: -1.35rem; }
.fan > *:last-child { margin-right: 0; }

.hand { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; }

.join-row.left { justify-content: flex-start; margin: 0 0 1.25rem; }

/* ---- turn state ---- */

.panel-active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(74, 157, 111, .25); }
.turn-you { color: var(--accent) !important; }

.turn-facts { display: flex; gap: .5rem; flex-wrap: wrap; }

.chip {
    font-size: .78rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #232d39;
    border: 1px solid var(--panel-edge);
    color: var(--ink-muted);
}

.chip-red    { background: rgba(211, 58, 44, .22);  border-color: #d33a2c; color: #f0a49c; }
.chip-yellow { background: rgba(217, 165, 32, .22); border-color: #d9a520; color: #f0d492; }
.chip-green  { background: rgba(63, 157, 72, .22);  border-color: #3f9d48; color: #9fd8a5; }
.chip-blue   { background: rgba(47, 111, 196, .22); border-color: #2f6fc4; color: #a3c2ef; }

.turn-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

/* Side by side in a narrow column these split their labels mid-phrase.
   fit-content keeps each on one line down to the point where the line genuinely
   does not fit, and then lets it wrap rather than run off the screen. */
.turn-actions .btn,
.join-row .btn { min-width: fit-content; }

.notice { margin: .9rem 0 0; color: #f0c274; font-size: .9rem; }

.banner-win { border-color: var(--accent); text-align: center; }
.banner-win h1 { margin-bottom: 1rem; }

.opponent.their-turn .seat-name { color: var(--accent); }
.opponent.their-turn .dot { box-shadow: 0 0 0 3px rgba(74, 157, 111, .3); }

.uno-flag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .12rem .4rem;
    border-radius: 4px;
    background: #d9a520;
    color: #2a2000;
}

/* ---- playability ---- */

.card-button.blocked { cursor: not-allowed; }
.card-button.blocked .card { opacity: .35; filter: grayscale(.6); }
.card-button.blocked:hover { transform: none; }
.card-button.playable .card { box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0, 0, 0, .45); }

/* ---- wild colour picker ---- */

.color-picker { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }

.color-swatch {
    font: inherit;
    font-size: .85rem;
    padding: .45rem .9rem;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--ink);
}

.color-swatch:hover { filter: brightness(1.35); }

/* ---- action log ---- */

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.log li { font-size: .88rem; color: var(--ink-muted); }
.log li strong { color: var(--ink); font-weight: 600; }
.log li:first-child { color: var(--ink); }

/* ---- final standings ---- */

.standings { margin: 0 0 1.25rem; padding-left: 1.4rem; text-align: left; display: inline-block; }
.standings li { padding: .2rem 0; }
.standings li::marker { color: var(--ink-muted); }
.standings li:first-child { font-weight: 700; color: var(--accent); }
.standings li.last { color: var(--ink-muted); list-style: none; margin-left: -1.4rem; padding-top: .5rem; }

/* ---- game picker ---- */

.game-list { display: flex; flex-direction: column; gap: .6rem; }

.game-option {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    width: 100%;
    padding: .85rem 1rem;
    text-align: left;
    font: inherit;
    color: var(--ink);
    background: #1f2732;
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    cursor: pointer;
}

.game-option:hover:not(:disabled) { border-color: var(--ink-muted); }
.game-option:disabled { cursor: default; }

.game-option.picked {
    border-color: var(--accent);
    background: rgba(74, 157, 111, .12);
}

/* Not built yet: readable, clearly not choosable. */
.game-option.soon { opacity: .5; }

.game-name { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.game-tagline { font-size: .88rem; color: var(--ink-muted); }
.game-players { font-size: .78rem; color: var(--ink-muted); }

.soon-flag {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .12rem .4rem;
    border-radius: 4px;
    background: #2f3947;
    color: var(--ink-muted);
}

/* ---- No Mercy ---- */

/* "+10", "⊘ ALL" and friends need to fit where a single digit used to. */
.card-face.long { font-size: 1.15rem; letter-spacing: -.02em; }
.card-sm .card-face.long { font-size: .7rem; }

.chip-danger {
    background: rgba(224, 96, 96, .2);
    border-color: var(--danger);
    color: #f0a0a0;
    font-weight: 700;
}

.btn-danger { background: #7d2b2b; border-color: #a33c3c; color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.15); }

.verdict { margin: .35rem 0; color: var(--ink-muted); }
.verdict strong { color: var(--ink); }
.verdict.lost strong { color: #f0a0a0; }

/* ---- Exploding Kittens ---- */

.kcard {
    position: relative;
    width: 4.6rem;
    height: 6.6rem;
    border-radius: .55rem;
    border: 2px solid rgba(255, 255, 255, .8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .3rem .18rem;
    overflow: hidden;
    user-select: none;
    line-height: 1;
    flex: none;
    background: #384252;
}

.kcard-sm { width: 2.7rem; height: 3.9rem; border-width: 1.5px; border-radius: .35rem; }

.kcard-symbol { font-size: 1.75rem; }
.kcard-sm .kcard-symbol { font-size: 1rem; }

/* Sized so the longest name on a card — CATTERMELON — still fits inside it
   rather than being sliced off at the border. */
.kcard-name {
    font-size: .53rem;
    font-weight: 600;
    text-align: center;
    color: rgba(255, 255, 255, .92);
    text-transform: uppercase;
    letter-spacing: 0;
}

.kcard-sm .kcard-name { display: none; }

.kcard-art { position: absolute; inset: 0; background-size: cover; background-position: center; }

.kcard.selected { outline: 3px solid var(--accent); outline-offset: 1px; }

.kc-boom    { background: #8c2020; }
.kc-defuse  { background: #2f7d55; }
.kc-nope    { background: #6d2f6d; }
.kc-attack  { background: #a34a1e; }
.kc-skip    { background: #2f5f9e; }
.kc-favor   { background: #7a5c1e; }
.kc-shuffle { background: #3a5a6e; }
.kc-future  { background: #4a3a8c; }
.kc-cat     { background: #46525f; }

.kcard-back {
    background: repeating-linear-gradient(-45deg, #1d2530 0 6px, #232d3a 6px 12px);
    border-color: rgba(255, 255, 255, .3);
}

.kcard-mark {
    width: 55%;
    height: 30%;
    border-radius: 40%;
    background: rgba(255, 255, 255, .09);
    border: 1.5px solid rgba(255, 255, 255, .2);
}

.peek {
    margin: 0 0 1.1rem;
    padding: .75rem;
    border: 1px dashed var(--panel-edge);
    border-radius: var(--radius);
    background: rgba(74, 58, 140, .12);
}

.peek-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
}

.kcard-empty {
    background: none;
    border-style: dashed;
    border-color: var(--panel-edge);
    box-shadow: none;
}

/* ---- rules panel ---- */

.rules-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.rules-toggle:hover { color: var(--accent); }
.rules-caret { color: var(--ink-muted); font-size: .8rem; }
.rules-hint { margin-left: auto; font-size: .78rem; font-weight: 400; color: var(--ink-muted); }

.rules { margin-top: 1.25rem; }

.rules h3 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-muted);
    margin: 1.5rem 0 .6rem;
}

.rules-goal {
    margin: 0;
    padding: .7rem .9rem;
    border-left: 3px solid var(--accent);
    background: rgba(74, 157, 111, .1);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.rules-steps { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.rules-steps li { color: var(--ink); }
.rules-steps li::marker { color: var(--ink-muted); }

.rules-cards { margin: 0; display: flex; flex-direction: column; gap: .55rem; }

.rules-card {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: .2rem .8rem;
    align-items: baseline;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--panel-edge);
}

.rules-card:last-child { border-bottom: none; padding-bottom: 0; }

.rules-card dt { display: flex; flex-direction: column; gap: .1rem; }
.rules-card dd { margin: 0; color: var(--ink-muted); font-size: .9rem; }

.rules-label {
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    word-break: break-word;
}

.rules-name { font-size: .72rem; color: var(--ink-muted); }

.rules-house { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.rules-house li { color: var(--ink-muted); font-size: .9rem; }
.rules-house li::marker { color: #f0c274; }

@media (max-width: 30rem) {
    .rules-card { grid-template-columns: 1fr; }
}

/* ---- Skyjo ---- */

.sjcard {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 4rem;
    border-radius: .4rem;
    border: 2px solid rgba(255, 255, 255, .8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    user-select: none;
}

.sj-negative { background: #2f7d55; }
.sj-zero     { background: #3f6b8c; }
.sj-low      { background: #4a6fae; }
.sj-mid      { background: #b07d1e; }
.sj-high     { background: #a83c3c; }

.sj-back {
    background: repeating-linear-gradient(45deg, #1d2530 0 5px, #232d3a 5px 10px);
    border-color: rgba(255, 255, 255, .3);
}

.sj-mark {
    width: 55%;
    height: 30%;
    border-radius: 40%;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .18);
}

.sj-empty {
    background: none;
    border-style: dashed;
    border-color: var(--panel-edge);
    box-shadow: none;
}

.sjcard.held { box-shadow: 0 0 0 3px var(--accent), 0 2px 5px rgba(0, 0, 0, .4); }

.sj-grid {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: .35rem;
}

.sj-slot { padding: 0; background: none; border: none; line-height: 0; cursor: default; }
.sj-slot.clickable { cursor: pointer; }
.sj-slot.clickable:hover .sjcard { outline: 2px solid var(--accent); outline-offset: 1px; }

.sj-others { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.sj-other { display: flex; flex-direction: column; gap: .45rem; }
.sj-other.their-turn .seat-name { color: var(--accent); }
.sj-other .opponent-head { margin: 0; }
.sj-other .count { margin-left: .6rem; }

/* ---- scoreboard ---- */

.scoreboard { width: 100%; border-collapse: collapse; margin: 1rem 0; text-align: left; }
.scoreboard th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-muted);
    font-weight: 600;
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--panel-edge);
}
.scoreboard td { padding: .4rem .5rem; border-bottom: 1px solid var(--panel-edge); }
.scoreboard tr:last-child td { border-bottom: none; }
.scoreboard tr.best td { color: var(--accent); font-weight: 700; }

/* ---- Flip 7 ---- */

.f7card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 3.2rem;
    padding: 0 .35rem;
    border-radius: .4rem;
    border: 2px solid rgba(255, 255, 255, .8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    user-select: none;
}

.f7-zero   { background: #3f6b8c; }
.f7-low    { background: #4a6fae; }
.f7-mid    { background: #b07d1e; }
.f7-high   { background: #a83c3c; }
.f7-bonus  { background: #2f7d55; }
.f7-action { background: #5b3f8c; }

.f7-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 3.2rem; }
.f7-row.busted .f7card { opacity: .35; filter: grayscale(.7); }

.f7-others { display: flex; flex-direction: column; gap: 1.1rem; }
.f7-other.done { opacity: .6; }
.f7-other.their-turn .seat-name { color: var(--accent); }
.f7-other .opponent-head { margin-bottom: .4rem; }
.f7-other .count { margin-left: auto; }

/* ---- Phase 10 ---- */

.p10card {
    position: relative;
    width: 3.4rem;
    height: 4.9rem;
    border-radius: .5rem;
    border: 2px solid rgba(255, 255, 255, .82);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .45);
    user-select: none;
    flex: none;
    line-height: 1;
}

.p10-small { width: 2.3rem; height: 3.3rem; font-size: 1rem; border-width: 1.5px; border-radius: .35rem; }

.p10-red    { background: #d33a2c; }
.p10-blue   { background: #2f6fc4; }
.p10-green  { background: #3f9d48; }
.p10-yellow { background: #d9a520; }
.p10-wild   { background: linear-gradient(135deg, #7d4bbf 0%, #b0479b 100%); }
.p10-skip   { background: #4a4f57; }

.p10-back {
    background: repeating-linear-gradient(45deg, #2b3a4a 0 6px, #35485c 6px 12px);
    border-color: rgba(255, 255, 255, .35);
}

.p10-mark {
    width: 55%;
    height: 55%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .3);
}

.p10-empty {
    background: none;
    border-style: dashed;
    border-color: var(--panel-edge);
}

.p10-corner {
    position: absolute;
    top: .15rem;
    left: .3rem;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    text-shadow: none;
}

.p10-face { font-size: inherit; }

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

.p10-cardbutton {
    padding: 0;
    background: none;
    border: none;
    line-height: 0;
    cursor: pointer;
    border-radius: .5rem;
    transition: transform .09s ease;
}

.p10-cardbutton:disabled { cursor: default; }
.p10-cardbutton:not(:disabled):hover { transform: translateY(-3px); }

.p10-cardbutton.picked { transform: translateY(-8px); }
.p10-cardbutton.picked .p10card { box-shadow: 0 0 0 3px var(--accent), 0 4px 8px rgba(0, 0, 0, .5); }

.p10-hand { gap: .4rem; padding-top: .9rem; align-items: flex-end; min-height: 6rem; }

/* ---- what is on the table ---- */

.p10-melds { display: flex; flex-direction: column; gap: 1.1rem; }
.p10-meldgroup { display: flex; flex-direction: column; gap: .5rem; }

.p10-meld {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .45rem .6rem;
    border: 1px solid var(--panel-edge);
    border-radius: .5rem;
}

.p10-meldlabel {
    font-size: .78rem;
    color: var(--ink-muted);
    min-width: 8.5rem;
}

.p10-row { display: flex; gap: .25rem; flex-wrap: wrap; }

.p10-hit { min-width: 2rem; font-weight: 700; }

/* ---- your phase, and the ladder ---- */

.p10-goal { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .6rem 0 0; }

.chip-phase { background: rgba(125, 75, 191, .25); border-color: #7d4bbf; color: #cbaef0; }
.chip-done  { background: rgba(63, 157, 72, .2); border-color: #3f9d48; color: #9fd8a5; }

.p10-ready { color: var(--accent); }

.p10-ladder summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-muted);
}

.p10-phases { margin: .9rem 0 0; padding-left: 1.6rem; display: flex; flex-direction: column; gap: .3rem; }
.p10-phases li { color: var(--ink-muted); font-size: .9rem; }
.p10-phases li.current { color: var(--accent); font-weight: 700; }

/* ---- Selfish ---- */

.sfcard {
    position: relative;
    width: 3.4rem;
    height: 4.9rem;
    border-radius: .5rem;
    border: 2px solid rgba(255, 255, 255, .8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.45rem;
    user-select: none;
    flex: none;
    line-height: 1;
}

.sf-oxy    { background: linear-gradient(160deg, #1f7a8c 0%, #2aa5bd 100%); }
.sf-oxy2   { background: linear-gradient(160deg, #12626f 0%, #2fc2dd 100%); }
.sf-attack { background: linear-gradient(160deg, #7a2436 0%, #b2374f 100%); }
.sf-guard  { background: linear-gradient(160deg, #3d5a8c 0%, #5a83c4 100%); }
.sf-boost  { background: linear-gradient(160deg, #6d4899 0%, #9a6bd1 100%); }

.sf-corner {
    position: absolute;
    top: .18rem;
    left: .3rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .85);
}

.sf-face { font-size: inherit; }

.sf-cardbutton {
    padding: 0;
    background: none;
    border: none;
    line-height: 0;
    cursor: pointer;
    border-radius: .5rem;
    transition: transform .09s ease;
}

.sf-cardbutton:disabled { cursor: default; opacity: .55; }
.sf-cardbutton:not(:disabled):hover { transform: translateY(-3px); }
.sf-cardbutton.picked { transform: translateY(-8px); }
.sf-cardbutton.picked .sfcard { box-shadow: 0 0 0 3px var(--accent), 0 4px 8px rgba(0, 0, 0, .5); }
.sf-cardbutton.aiming .sfcard { box-shadow: 0 0 0 3px #e2603f, 0 4px 8px rgba(0, 0, 0, .5); }

.sf-hand { gap: .4rem; padding-top: .9rem; align-items: flex-end; min-height: 6rem; }

/* ---- the run ---- */

.sf-tracks { display: flex; flex-direction: column; gap: 1rem; }
.sf-lane { display: flex; flex-direction: column; gap: .4rem; }
.sf-lane.yours .seat-name { color: var(--accent); }
.sf-lane.their-turn .dot { background: var(--accent); }

.sf-who { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.sf-who .count { margin-left: auto; color: var(--ink-muted); font-size: .78rem; }

.sf-track { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .2rem; }

.sf-cell {
    position: relative;
    width: 3rem;
    height: 3rem;
    flex: none;
    border: 1px dashed var(--panel-edge);
    border-radius: .45rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-cell.here { border-style: solid; border-color: var(--accent); background: rgba(255, 255, 255, .04); }
.sf-ship { border-style: solid; font-size: 1.4rem; }

.sf-astro { position: relative; font-size: 1.3rem; z-index: 1; }

.sf-litter {
    position: absolute;
    inset: .2rem;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    opacity: .8;
}

.sp-empty { background: rgba(255, 255, 255, .06); }
.sp-good  { background: rgba(63, 157, 72, .3); }
.sp-bad   { background: rgba(168, 60, 60, .35); }
.sp-odd   { background: rgba(125, 75, 191, .32); }

.chip-air { background: rgba(42, 165, 189, .22); border-color: #2aa5bd; color: #9fdce8; }

.sf-lost { margin-top: .9rem; font-size: .85rem; }
.sf-warn { color: #f0c274; }

.sf-ref summary { cursor: pointer; font-weight: 600; color: var(--ink-muted); }
.sf-reflist { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.sf-reflist li { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--ink-muted); }
.sf-reflist .sf-litter { position: static; inset: auto; width: 1.7rem; height: 1.7rem; flex: none; }

/* ---- Taco vs Burrito ---- */

.tvbcard {
    position: relative;
    width: 3.6rem;
    height: 5rem;
    border-radius: .5rem;
    border: 2px solid rgba(255, 255, 255, .8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    color: #fff;
    font-weight: 700;
    user-select: none;
    flex: none;
    line-height: 1;
    padding: .2rem;
    text-align: center;
}

.tvb-face { font-size: 1.35rem; }

.tvb-name {
    font-size: .5rem;
    font-weight: 600;
    letter-spacing: .01em;
    opacity: .9;
    line-height: 1.15;
    overflow: hidden;
}

.tvb-small { width: 2.4rem; height: 3.3rem; }
.tvb-small .tvb-face, .tvb-small { font-size: 1rem; }
.tvb-small .tvb-name { display: none; }

.tvb-food      { background: linear-gradient(160deg, #2f7d3f 0%, #46a95a 100%); }
.tvb-yuck      { background: linear-gradient(160deg, #6b4a1f 0%, #9a7130 100%); }
.tvb-sauce     { background: linear-gradient(160deg, #a8231f 0%, #e2603f 100%); }
.tvb-block     { background: linear-gradient(160deg, #3d5a8c 0%, #5a83c4 100%); }
.tvb-inspector { background: linear-gradient(160deg, #4a4f57 0%, #6d747f 100%); }
.tvb-action    { background: linear-gradient(160deg, #6d4899 0%, #9a6bd1 100%); }

.tvb-cardbutton {
    padding: 0;
    background: none;
    border: none;
    line-height: 0;
    cursor: pointer;
    border-radius: .5rem;
    transition: transform .09s ease;
}

.tvb-cardbutton:disabled { cursor: default; opacity: .5; }
.tvb-cardbutton:not(:disabled):hover { transform: translateY(-3px); }
.tvb-cardbutton.picked { transform: translateY(-8px); }
.tvb-cardbutton.picked .tvbcard { box-shadow: 0 0 0 3px var(--accent), 0 4px 8px rgba(0, 0, 0, .5); }
.tvb-cardbutton.aiming .tvbcard { box-shadow: 0 0 0 3px #e2603f, 0 4px 8px rgba(0, 0, 0, .5); }

.tvb-hand { gap: .45rem; padding-top: .9rem; align-items: flex-end; min-height: 6rem; }

/* ---- the meals ---- */

.tvb-meals { display: flex; flex-direction: column; gap: 1.1rem; }
.tvb-meal { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.tvb-meal.yours .seat-name { color: var(--accent); }
.tvb-meal.their-turn .dot { background: var(--accent); }
.tvb-meal .opponent-head { margin: 0; width: 100%; }
.tvb-meal .count { margin-left: auto; }

.tvb-shell {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-muted);
    border: 1px solid var(--panel-edge);
    border-radius: .6rem;
    padding: .05rem .4rem;
}

.tvb-plate {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
    min-height: 3.5rem;
    width: 100%;
}

.tvb-item { padding: 0; background: none; border: none; line-height: 0; cursor: default; border-radius: .35rem; }
.tvb-item.grabbable { cursor: pointer; }
.tvb-item.grabbable:hover .tvbcard { outline: 2px solid var(--accent); outline-offset: 1px; }

.tvb-good { color: #7fd08c; }
.tvb-bad  { color: #f0a49c; }

.chip-meal { background: rgba(70, 169, 90, .2); border-color: #46a95a; color: #a4dcae; }

.tvb-bin summary { cursor: pointer; font-weight: 600; color: var(--ink-muted); }

/* ---------------------------------------------------------------------------
   Skip-Bo. Four building piles in the middle, and everybody's stock and
   discard piles around them. Cards are small and numerous, so the whole thing
   leans on one compact card chip rather than the big CardView.
   --------------------------------------------------------------------------- */

.sb-builds {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.sb-build {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem;
    border: 1px solid var(--panel-edge);
    border-radius: 0.6rem;
    min-width: 5.5rem;
}

.sb-build-open {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.sb-needs {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.sb-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 4.3rem;
    border-radius: 0.5rem;
    border: 1px solid var(--panel-edge);
    background: var(--panel);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
}

.sb-card.sb-small {
    width: 2.2rem;
    height: 3rem;
    font-size: 1rem;
}

.sb-wild {
    background: linear-gradient(145deg, #6d28d9, #2563eb);
    border-color: #7c3aed;
    color: #fff;
}

.sb-empty {
    background: transparent;
    border-style: dashed;
    color: var(--ink-muted);
    font-weight: 400;
}

.sb-asterisk {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-top: 0.15rem;
}

.sb-pick { cursor: pointer; }
.sb-pick:disabled { cursor: default; opacity: 0.75; }
.sb-pick:not(:disabled):hover { border-color: var(--accent); }

.sb-on {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-3px);
}

.sb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sb-yours {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1rem;
}

.sb-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.sb-divider {
    width: 1px;
    align-self: stretch;
    background: var(--panel-edge);
    margin: 0 0.4rem;
}

.sb-people {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sb-person {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--panel-edge);
    border-radius: 0.6rem;
}

.sb-person-on { border-color: var(--accent); }

.sb-person-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.sb-peek { margin-top: 0.5rem; opacity: 0.85; }

/* ---- Cards Against Humanity ---- */

.cah-black {
    background: #0b0d10;
    color: #f4f6f8;
    border: 1px solid #000;
    border-radius: 0.7rem;
    padding: 1.1rem 1.2rem 0.9rem;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.cah-black-text {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.45;
    font-weight: 600;
}

.cah-pick {
    align-self: flex-end;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa6b4;
}

.cah-pack { margin: 0.5rem 0 0; font-size: 0.8rem; }

.cah-hand {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cah-white {
    position: relative;
    width: 11rem;
    min-height: 6.5rem;
    text-align: left;
    padding: 0.7rem 0.75rem;
    background: #f2f4f6;
    color: #14181d;
    border: 1px solid #cdd4db;
    border-radius: 0.6rem;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.35;
    cursor: pointer;
}

.cah-white:hover { filter: brightness(1.04); }

.cah-on {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(74, 157, 111, 0.55);
    transform: translateY(-2px);
}

.cah-white-text { display: block; }

.cah-order {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.75rem;
    line-height: 1.25rem;
    text-align: center;
}

.cah-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.cah-locked {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.cah-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.cah-answer {
    flex: 1 1 18rem;
    max-width: 26rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--panel-edge);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.cah-answer-win {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(74, 157, 111, 0.35);
}

.cah-filled {
    line-height: 1.5;
    flex: 1;
}

/* The bit that came off a white card, so you can see the joint. */
.cah-fill {
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid var(--accent);
}

.cah-answer-foot {
    display: flex;
    justify-content: flex-end;
    min-height: 1.8rem;
    align-items: center;
}

.cah-owner { font-size: 0.85rem; color: var(--ink-muted); }

.cah-answer-win .cah-owner { color: var(--ink); }

.cah-people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.cah-person {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--panel-edge);
    border-radius: 0.6rem;
    min-width: 9rem;
}

.cah-person-judge { border-color: var(--accent); }

.cah-person-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.cah-state {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.cah-state-in { color: var(--accent); }

.cah-peek {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    opacity: 0.85;
}

.cah-mini {
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--panel-edge);
    border-radius: 0.35rem;
    color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Suited cards — Mau-Mau, Crazy Eights. A normal deck rather than a coloured
   one, so the cards are pale with a printed index: rank over pip in the corner,
   the way a real card fans.
   --------------------------------------------------------------------------- */

.scard {
    position: relative;
    width: 3.6rem;
    height: 5.2rem;
    border-radius: .45rem;
    border: 1px solid #b9bfc7;
    background: #f4f2ec;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    overflow: hidden;
    user-select: none;
    flex: none;
    line-height: 1;
}

/* On the card face the suits print their real colours. */
.scard.suit-red   { color: #c1272d; }
.scard.suit-black { color: #16181c; }

.scard-rank { font-size: 1.45rem; font-weight: 700; }
.scard-pip  { font-size: 1.1rem; }

/* The index. A fanned hand overlaps down to this corner and nothing else, which
   is exactly what it is for. */
.scard-corner {
    position: absolute;
    top: .2rem;
    left: .3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .02rem;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
}

.scard-corner-pip { font-size: .6rem; font-weight: 400; }

.scard-art { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* Small cards are what a fan is made of, so they keep the index and drop the
   middle — the opposite of the UNO cards, which fan by their big glyph. */
.scard-sm {
    width: 2.5rem;
    height: 3.6rem;
    border-radius: .3rem;
}

.scard-sm .scard-rank,
.scard-sm .scard-pip { display: none; }

.scard-sm .scard-corner { font-size: .68rem; top: .22rem; left: .28rem; }
.scard-sm .scard-corner-pip { font-size: .66rem; }

.scard-back {
    background:
        repeating-linear-gradient(45deg, #6d2028 0 4px, #86282f 4px 8px),
        #6d2028;
    border-color: #a8545a;
}

.scard-mark {
    width: 58%;
    height: 32%;
    border-radius: 40%;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .3);
}

.suit-cardbutton {
    padding: 0;
    background: none;
    border: none;
    line-height: 0;
    cursor: pointer;
    border-radius: .45rem;
    transition: transform .1s ease;
}

.suit-cardbutton:disabled { cursor: not-allowed; }
.suit-cardbutton:not(:disabled):hover { transform: translateY(-.5rem); }
.suit-cardbutton.playable .scard { box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0, 0, 0, .45); }
.suit-cardbutton.blocked .scard { opacity: .38; filter: grayscale(.5); }
.suit-cardbutton.blocked:hover { transform: none; }
.suit-cardbutton.picked { transform: translateY(-.5rem); }
.suit-cardbutton.picked .scard { box-shadow: 0 0 0 3px var(--accent), 0 4px 8px rgba(0, 0, 0, .5); }

/* Against the dark panel a black pip would vanish, so the two suit colours
   become light and red rather than black and red. */
.chip.suit-red,
.suit-called.suit-red { color: #f0a49c; }

.chip.suit-black,
.suit-called.suit-black { color: var(--ink); }

.chip.suit-red { background: rgba(193, 39, 45, .2); border-color: #a8383c; }
.chip.suit-black { background: rgba(232, 237, 243, .12); border-color: var(--ink-muted); }

.suit-called {
    margin: 0 0 1.25rem;
    font-size: .9rem;
}

.suit-swatch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font: inherit;
    font-size: .85rem;
    padding: .45rem .9rem;
    border-radius: var(--radius);
    background: #232d39;
    border: 1px solid var(--panel-edge);
    cursor: pointer;
}

.suit-swatch:hover { border-color: var(--accent); }
.suit-swatch.suit-red { color: #f0a49c; }
.suit-swatch.suit-black { color: var(--ink); }
.suit-swatch-pip { font-size: 1.1rem; }

/* ===========================================================================
   Responsive layout

   The table used to be one 34rem column at every width, which meant a phone
   scrolled past three panels of preamble to reach its own hand, and a desktop
   monitor left two thirds of itself empty. Two rules fix most of it: the play
   area comes first in the document, and on a wide screen the reference
   material (game blurb, rules, log, seats, host controls) moves beside it
   rather than under it.
   =========================================================================== */

.table-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1.5rem;
    max-width: 34rem;
    margin: 0 auto;
}

.table-header,
.table-footer { grid-column: 1 / -1; }

/* Panels size to their column here; the 34rem cap is for the pages that are
   still a single centred card, like joining a table. */
.table-main .panel,
.table-side .panel { max-width: none; margin-left: 0; margin-right: 0; }

/* ---- tablets and small laptops: one wider column ---- */

@media (min-width: 46rem) {
    .table-view { max-width: 42rem; }

    /* Ten games stacked one to a row is a long scroll on a screen with the
       room for two. */
    .game-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        gap: .6rem;
    }

    /* Room for a full table of people without a scroll each. */
    .opponents,
    .f7-others {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
        gap: 1.1rem 1.5rem;
    }
}

/* ---- desktop: two columns ---- */

@media (min-width: 62rem) {
    .table-view {
        max-width: 62rem;
        grid-template-columns: minmax(0, 1fr) 21rem;
        align-items: start;
    }

    /* A long game leaves a long log. Let it scroll in place instead of
       stretching the sidebar past the play area. */
    .table-side .log { max-height: 18rem; overflow-y: auto; }

    /* 21rem is phone-width, so the rules read the way they do on a phone. */
    .table-side .rules-card { grid-template-columns: 1fr; }
}

/* ---- big screens: let the wide games breathe ---- */

@media (min-width: 82rem) {
    .table-view { max-width: 78rem; }
}

/* ---- phones ---- */

@media (max-width: 40rem) {
    body { padding: 1rem .85rem 3rem; }

    h1 { font-size: 1.35rem; }
    .lobby { margin-top: 7vh; }
    .lobby h1 { font-size: 1.9rem; }
    .lobby-actions { gap: 1.5rem; }

    .panel { padding: 1.1rem; margin-bottom: .85rem; }

    .table-header {
        flex-wrap: wrap;
        gap: .5rem .75rem;
        margin-bottom: 1rem;
    }

    /* Once it wraps onto its own line there is nothing left to be right of. */
    .you {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: .55rem;
    }

    .code-chip { font-size: 1.25rem; }
    .table-footer { margin-top: 1rem; }

    .piles { gap: 1.25rem; margin-bottom: 1.25rem; }
    .opponents { gap: .8rem; }

    /* Ten choices at full size is a lot of thumb. */
    .game-option { padding: .7rem .85rem; }
    .game-tagline { font-size: .84rem; }

    /* Two white cards to a row beats ten rows of one. */
    .cah-hand { gap: .45rem; }
    .cah-white { width: calc(50% - .25rem); min-height: 5.25rem; font-size: .84rem; padding: .55rem .6rem; }
    .cah-black { padding: .9rem 1rem .75rem; }
    .cah-black-text { font-size: 1.05rem; }
    .cah-answer { flex-basis: 100%; }
    .cah-person { min-width: 0; flex: 1 1 8rem; }

    .sb-builds { gap: .7rem; }
    .sb-yours { gap: 1rem; }
    .sb-people { gap: .7rem; }

    .scard { width: 3.2rem; height: 4.6rem; }
    .scard-rank { font-size: 1.25rem; }
    .scard-pip { font-size: .95rem; }

    .sj-others { gap: 1rem; }
    .tvb-meals { gap: .8rem; }
    .p10-melds { gap: .8rem; }
    .p10-meldlabel { min-width: 0; }
}

/* ---- touch ---- */

@media (pointer: coarse) {
    /* inline-flex so the label stays centred once the minimum height kicks in. */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
    }

    .btn-sm { min-height: 2.25rem; }
    .toggle input { width: 1.25rem; height: 1.25rem; }
}

/* A finger has no hover, so a tap leaves the lifted card stuck up in the air
   until you touch something else. */
@media (hover: none) {
    .card-button:hover,
    .suit-cardbutton:not(:disabled):hover,
    .p10-cardbutton:not(:disabled):hover,
    .sf-cardbutton:not(:disabled):hover,
    .tvb-cardbutton:not(:disabled):hover { transform: none; }

    .cah-white:hover { filter: none; }
}