.play-page { max-width: 520px; padding-top: 18px; }
.play-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.play-panel h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.code-input { font-family: var(--head); font-weight: 800; font-size: 1.6rem; letter-spacing: .2em; text-transform: uppercase; }
.play-wide { width: 100%; margin: 8px 0; }
.recover { margin: 14px 0; }
.recover summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.wait-position { font-family: var(--head); font-weight: 800; font-size: 1.6rem; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-top h1 { font-size: 1.3rem; margin: 0; }
.card-number { font-family: var(--head); font-weight: 800; font-size: 1.3rem; margin: 0; color: var(--magenta); }
#playCard { margin: 12px 0; }
.play-cell { font: inherit; font-weight: 700; color: #1D1B3A; background: #fff; cursor: pointer; font-size: clamp(.62rem, 3.1vw, .95rem); border-left: 0; border-bottom: 0; }
.play-cell.num { font-size: clamp(1.1rem, 5vw, 1.6rem); }
.play-cell.marked:not(.free) { background: rgba(214, 36, 110, .82); color: #fff; }
.play-cell.free { cursor: default; }
.play-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bingo-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(21, 20, 43, .7); display: grid; place-items: center; z-index: 70; padding: 20px; }
/* v69 (owner-approved mockups): the overlay follows the theme; colour only through the signal layer (no magenta text:
   magenta is for buttons). The kicker's yellow underline is celebration, shown only for BINGO! and a win. */
.bingo-overlay-inner { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 24px; padding: 20px 20px 16px; text-align: center; width: min(400px, 100%); box-shadow: 0 24px 60px rgba(21, 20, 43, .35); display: grid; justify-items: center; gap: 0; }
.bingo-overlay-inner .dauber-row { margin: 0 0 10px; }
.bo-kicker { font-family: var(--head); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--ink); margin: 0 0 12px; padding: 0 4px; }
.bo-kicker.cheer { background: linear-gradient(transparent 80%, var(--yellow) 80%, var(--yellow) 95%, transparent 95%); }
.bo-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .95rem; border: 2px solid var(--line); margin: 0 0 14px; }
.bo-pill.attn { border-color: var(--c-attn); background: var(--warn-bg); color: var(--ink); }
.bo-pill.attn::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--c-attn); }
@media (prefers-reduced-motion: no-preference) { .bo-pill.attn::before { animation: bo-pulse 1.6s ease-in-out infinite; } }
@keyframes bo-pulse { 50% { opacity: .35; } }
.bo-pill.done { border-color: var(--c-done); background: var(--ok-bg); color: var(--c-done); }
.bo-pill.done::before { content: "✓"; font-weight: 800; }
.bo-pill.answer { color: var(--ink); font-size: 1.05rem; }
.bo-ticket { border: 2px dashed var(--line); border-radius: 16px; padding: 10px 12px 12px; margin: 0 0 12px; width: 100%; display: grid; }
.bo-ticket-label { font-size: .85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bo-card { font-family: var(--head); font-weight: 800; font-size: 3rem; line-height: 1.05; margin: 0; }
.bo-say { margin: 0 0 14px; }
.bo-say:empty, .bo-sub:empty { display: none; }
.bingo-overlay-inner .btn { width: 100%; }
.bingo-overlay-inner .btn + .btn { margin-top: 10px; }
.bo-foot { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }

.call-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--yellow); color: #1D1B3A; border-radius: 12px; padding: 10px 14px; margin-top: 10px; font-weight: 700; }
.call-bar strong { font-family: var(--head); font-size: 1.4rem; text-align: right; overflow-wrap: anywhere; }
.winner-toast { background: var(--surface); border: 2px solid var(--green); border-radius: 12px; padding: 8px 12px; margin-top: 8px; font-weight: 700; }
.play-cell.auto:not(.free) { background: rgba(214, 36, 110, .82); color: #fff; }
.play-cell img { width: 80%; height: 80%; object-fit: contain; pointer-events: none; }

/* Marker choices */
.play-card { --mk: #D6246E; }
.play-card[data-mcolor="blue"] { --mk: #2F5BEA; }
.play-card[data-mcolor="green"] { --mk: #0E7C62; }
.play-card[data-mcolor="gold"] { --mk: #E3A600; }
.play-card .play-cell { position: relative; }
.play-card .play-cell.marked:not(.free), .play-card .play-cell.auto:not(.free) { background: #fff; color: #1D1B3A; }
.play-card[data-mstyle="fill"] .play-cell.marked:not(.free), .play-card[data-mstyle="fill"] .play-cell.auto:not(.free) { background: var(--mk); color: #fff; }
.play-card[data-mstyle="dot"] .play-cell.marked:not(.free)::after, .play-card[data-mstyle="dot"] .play-cell.auto:not(.free)::after { content: ""; position: absolute; top: 14%; right: 14%; bottom: 14%; left: 14%; inset: 14%; border-radius: 50%; background: var(--mk); opacity: .55; pointer-events: none; }
.play-card[data-mstyle="x"] .play-cell.marked:not(.free)::after, .play-card[data-mstyle="x"] .play-cell.auto:not(.free)::after { content: "✕"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: grid; place-items: center; color: var(--mk); font-size: 2.4em; font-weight: 800; opacity: .75; pointer-events: none; }
.marker-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.mk-style, .mk-color { min-width: 40px; min-height: 40px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.mk-style[aria-pressed="true"], .mk-color[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }
.mk-color[data-mcolor="pink"] { background: #D6246E; } .mk-color[data-mcolor="blue"] { background: #2F5BEA; } .mk-color[data-mcolor="green"] { background: #0E7C62; } .mk-color[data-mcolor="gold"] { background: #E3A600; }
.mk-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.bo-sub { font-weight: 700; margin: 0 0 12px; }
/* (v69: a win is said by the pill and the words, not a green frame) */
.play-loading { font-family: var(--head); font-weight: 800; font-size: 1.3rem; text-align: center; margin: 40px 0; }
.speak-toggle { margin: 6px 0 12px; font-size: .95rem; }
/* Winner celebration: shown only after the host announces this card's win. */
.win-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(21, 20, 43, .75); display: grid; place-items: center; z-index: 75; padding: 20px; }
/* v69: the win, as mocked: the logo's dots burst at the top, "Round 2 winner", a yellow celebration underline, the
   pattern and prize as chips, the certificate as the one magenta button. Follows the theme. */
.win-overlay-inner { position: relative; overflow: hidden; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 24px; padding: 22px 20px 16px; text-align: center; width: min(400px, 100%); box-shadow: 0 24px 60px rgba(21, 20, 43, .35); }
.wo-burst { position: absolute; top: 0; right: 0; left: 0; height: 120px; pointer-events: none; }
.wo-burst i { position: absolute; top: 0; left: 0; border-radius: 50%; }
.wo-burst i:nth-child(1) { left: 8%; top: 18px; width: 14px; height: 14px; background: #F9015C; }
.wo-burst i:nth-child(2) { left: 58%; top: 6px; width: 10px; height: 10px; background: #4C75FB; }
.wo-burst i:nth-child(3) { left: 86%; top: 22px; width: 16px; height: 16px; background: #FCBA02; }
.wo-burst i:nth-child(4) { left: 4%; top: 56px; width: 9px; height: 9px; background: #02A35A; }
.wo-burst i:nth-child(5) { left: 93%; top: 60px; width: 12px; height: 12px; background: #FC67A5; }
.wo-burst i:nth-child(6) { left: 10%; top: 96px; width: 8px; height: 8px; background: #4C75FB; }
.wo-burst i:nth-child(7) { left: 94%; top: 100px; width: 8px; height: 8px; background: #02A35A; }
.wo-burst i:nth-child(8) { left: 36%; top: 8px; width: 7px; height: 7px; background: #FC67A5; }
.wo-kicker { position: relative; font-family: var(--head); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-done); margin: 26px 0 4px; }
.win-overlay-inner h2 { position: relative; font-family: var(--head); font-weight: 800; font-size: 2.6rem; line-height: 1.05; color: var(--ink); margin: 0 0 14px; }
.win-overlay-inner h2 span { background: linear-gradient(transparent 80%, var(--yellow) 80%, var(--yellow) 95%, transparent 95%); padding: 0 4px; }
.wo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.wo-chip { border: 2px solid var(--line); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .95rem; }
.wo-chip:empty { display: none; }
.win-overlay-inner .btn { width: 100%; }
.win-overlay-inner .btn + .btn { margin-top: 10px; }

/* v69: the player's own confirm dialog (giving up a card, leaving the waitlist), the site's dialog design. The
   destructive button is solid ink, used only inside a confirmation (docs/color-system.md). */
.pc-dialog { border: 1px solid var(--line); border-radius: 22px; padding: 20px 22px 18px; width: min(440px, calc(100% - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(21, 20, 43, .35); }
.pc-dialog::backdrop { background: rgba(21, 20, 43, .6); }
.pc-dialog .dauber-row { display: block; margin: 0 0 12px; }
.pc-dialog h2 { margin: 0 0 6px; font-family: var(--head); font-weight: 800; font-size: 1.45rem; line-height: 1.2; }
.pc-dialog p { margin: 0 0 16px; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.pc-dialog .btn-danger { background: var(--c-destructive); color: var(--surface); border-color: var(--c-destructive); }
@media (max-width: 560px) { .pc-dialog { padding: 18px 18px 16px; } .pc-actions { flex-direction: column-reverse; } .pc-actions .btn { width: 100%; min-height: 64px; font-size: 1.05rem; } }
.confetti { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; z-index: 90; }

.end-panel { text-align: center; }
.end-kicker { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; color: #0E7C62; }
.end-game-title { color: var(--muted); font-weight: 700; margin-top: -4px; }
.end-you { background: #E3F4EE; border: 2px solid #0E7C62; color: #1D1B3A; border-radius: 14px; padding: 12px; margin: 10px 0; display: grid; gap: 8px; }
.end-you strong { font-family: var(--head); font-size: 1.3rem; }
.end-sub { font-size: 1.1rem; margin: 14px 0 6px; }
.end-winners { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; text-align: left; }
.end-winners li { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-weight: 700; }
.end-cta { display: grid; gap: 8px; background: linear-gradient(135deg, #FCE7F0, #EEF2FF); border: 2px solid #D6246E; border-radius: 16px; padding: 14px; text-align: left; }
:root[data-theme="dark"] .end-cta { background: var(--surface); }
.end-cta strong { font-family: var(--head); font-size: 1.2rem; }
#claimCert { margin: 0 0 10px; }

/* ===== Accessibility pass ===== */
:root[data-theme="dark"] .end-kicker { color: #5AD8B2; }

/* ===== Batch 5: game state, how to play, recent calls ===== */
.game-state { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); }
.game-state strong { font-family: var(--head); font-size: 1.1rem; }
.game-state span { font-size: .92rem; color: var(--muted); }
.game-state[data-kind="waiting"] strong::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--c-here); vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) { .game-state[data-kind="waiting"] strong::before { animation: gs-pulse 1.6s ease-in-out infinite; } }
@keyframes gs-pulse { 50% { opacity: .25; } }
.game-state[data-kind="started"] { background: var(--c-here); border-color: var(--c-here); }
.game-state[data-kind="started"] strong { font-size: 1.35rem; color: #FFFFFF; }
.game-state[data-kind="started"] span { color: #FFFFFF; }
:root[data-theme="dark"] .game-state[data-kind="started"] strong, :root[data-theme="dark"] .game-state[data-kind="started"] span { color: #15142B; }
.game-state[data-kind="round"] { border-color: var(--c-here); }
.game-state[data-kind="round"] strong { color: var(--c-here); }
.game-state[data-kind="playing"] { padding: 6px 12px; }
.game-state[data-kind="playing"] strong { font-size: .98rem; }
.game-state[data-kind="closed"] { border-color: var(--c-attn); background: var(--warn-bg); }
.game-state[data-kind="closed"] strong { color: var(--c-attn); }
.game-state[data-kind="closed"] span { color: var(--ink); }
.how-to { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.how-to summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.how-to ol { margin: 0; padding: 0 16px 12px 34px; font-size: .92rem; display: grid; gap: 4px; }
.recent-calls { margin: 6px 2px 0; font-size: .92rem; color: var(--muted); }
.recent-calls #recentList { color: var(--ink); font-weight: 700; }
.link-btn { background: none; border: 0; padding: 4px 2px; min-height: 32px; font: inherit; font-weight: 700; color: var(--c-here); text-decoration: underline; cursor: pointer; }
/* Reserved ad slots: fixed height (no layout shift when filled); absent entirely while ads are off. */
.ad-slot { display: block; min-height: 280px; margin: 20px auto 0; max-width: 336px; }
.ad-slot[hidden] { display: none; }
/* ===== Batch 6: BINGO is the biggest thing on the card screen, right under the card ===== */
.bingo-btn { min-height: 72px; margin: 12px 0 14px; font-size: 1.8rem; letter-spacing: .06em; box-shadow: 0 6px 0 #8E1447; }
.bingo-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #8E1447; }
:root[data-theme="dark"] .bingo-btn { box-shadow: 0 6px 0 #B0306F; }
@media (prefers-reduced-motion: reduce) { .bingo-btn:active { transform: none; } }
.card-settings { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-settings-head { margin: 0 0 6px; font-weight: 700; font-size: .95rem; }
/* On phones the top of the card screen stays compact so the card and BINGO fit on one screen. */
@media (max-width: 560px) {
  .card-top { align-items: center; }
  .card-top h1 { font-size: 1.1rem; }
  .card-top .card-number { font-size: .95rem; margin: 0; }
  .game-state[data-kind="playing"] { padding: 4px 10px; }
}
/* During a game: how-to moves below BINGO (it stays on top while waiting), recent calls sit inside the call bar,
   and on phones the site header scrolls away, so the card and BINGO fit on one screen. */
#cardView { display: flex; flex-direction: column; }
#cardView.in-play .how-to { order: 5; margin-top: 14px; }
#cardView.in-play .how-to ~ * { order: 6; }
#cardView.in-play .card-top, #cardView.in-play .game-state, #cardView.in-play .call-bar, #cardView.in-play .winner-toast, #cardView.in-play .auto-chip, #cardView.in-play .auto-msg, #cardView.in-play .play-card, #cardView.in-play .fresh-line, #cardView.in-play .bingo-btn { order: 0; }
.call-bar { flex-wrap: wrap; }
.call-bar .recent-calls.in-bar { flex-basis: 100%; margin: 2px 0 0; color: #1D1B3A; font-size: .88rem; font-weight: 600; }
.call-bar .recent-calls.in-bar #recentList { color: #1D1B3A; }
.call-bar .recent-calls.in-bar .link-btn { color: #1D1B3A; }
@media (max-width: 560px) {
  .site-head { position: static; }
  .card-top { flex-wrap: nowrap; }
  .card-top h1 { font-size: 1rem; }
  .card-top .card-number { font-size: .9rem; white-space: nowrap; }
  .call-bar { padding: 8px 12px; margin-top: 8px; }
  .game-state { margin-top: 8px; }
}
/* The header does not stick on phones here, so the card screen scrolls flush to the top. */
@media (max-width: 560px) { #cardView { scroll-margin-top: 0; } }

/* ===== Final batch: marker contrast for every player ===== */
/* Gold is darker (3.3:1 against white as a mark) and a gold fill uses navy text (5.2:1). */
.play-card[data-mcolor="gold"] { --mk: #B8860B; }
.mk-color[data-mcolor="gold"] { background: #B8860B; }
.play-card[data-mcolor="gold"][data-mstyle="fill"] .play-cell.marked:not(.free), .play-card[data-mcolor="gold"][data-mstyle="fill"] .play-cell.auto:not(.free) { color: #1D1B3A; }
/* The dot is a ring: it marks the square without covering the number or word. */
.play-card[data-mstyle="dot"] .play-cell.marked:not(.free)::after, .play-card[data-mstyle="dot"] .play-cell.auto:not(.free)::after { top: 8%; right: 8%; bottom: 8%; left: 8%; inset: 8%; background: transparent; border: 4px solid var(--mk); opacity: 1; }

/* ===== Large print on the phone card ===== */
.lp-toggle { margin-left: auto; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.lp-toggle[aria-pressed="true"] { border-color: var(--ink); }
.card-top { flex-wrap: wrap; row-gap: 6px; }
#cardView.large-print .play-cell { font-size: clamp(.8rem, 4vw, 1.15rem); font-weight: 800; color: #000; }
#cardView.large-print .play-cell.num { font-size: clamp(1.5rem, 7.2vw, 2.1rem); }
#cardView.large-print .bcard .bgrid .bcell { border-width: 3px; border-color: #000; }
#cardView.large-print .bcard { border-width: 4px; border-color: #000; }
/* Marks in large print: solid navy with white text and a yellow ring, whatever marker is chosen. */
#cardView.large-print #playCard .play-cell.marked:not(.free), #cardView.large-print #playCard .play-cell.auto:not(.free) { background: #010239; color: #FFFFFF; box-shadow: inset 0 0 0 4px #FCBA02; }
#cardView.large-print #playCard .play-cell.marked:not(.free)::after, #cardView.large-print #playCard .play-cell.auto:not(.free)::after { display: none; }
#cardView.large-print .call-bar strong { font-size: 2rem; }
#cardView.large-print .call-bar, #cardView.large-print .recent-calls.in-bar { font-size: 1.05rem; }
#cardView.large-print .game-state strong { font-size: 1.25rem; }
#cardView.large-print .mk-style, #cardView.large-print .mk-color { min-width: 48px; min-height: 48px; }
.speak-rate { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 700; }
.speak-rate select { min-height: 40px; }
#speakMsg, #autoMsg { margin: 6px 0; padding: 8px 12px; border-radius: 10px; border-left: 4px solid var(--c-attn); background: var(--warn-bg); }
/* v52: on a tap-to-mark phone, the status line says how fresh the calls are, with a one-off check (no faster polling).
   One row: "Game on · Round 1" on the left, "Updated 12s ago · Check now" on the right; "ago" drops on the narrowest
   phones so it never wraps and pushes the card down. */
.game-state[data-kind="playing"] { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 10px; }
.gs-fresh { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.game-state .gs-fresh .link-btn { font-size: .88rem; min-height: 24px; padding: 0 2px; }
.game-state[data-kind="playing"] #gsSub:empty { display: none; }
/* Measured: "Game on · Round 1" (133px) and "Updated 12s · Check now" (168px) never share a row on a phone, so with the
   freshness showing the line reads "Round 1 · Updated 12s ago · Check now"; "ago" below 380px; smaller at 320. */
.game-state.has-fresh .gs-on { display: none; }
@media (max-width: 379px) { .gs-fresh .fa-ago { display: none; } }
@media (max-width: 340px) { .game-state.has-fresh { column-gap: 6px; } .game-state.has-fresh strong, .game-state .gs-fresh, .game-state .gs-fresh .link-btn { font-size: .8rem; } }

/* v41: how-to link; auto-mark chip and pulse; long words (hyphenate, floor, rows grow). */
.how-to-more { margin: 0; padding: 0 16px 12px; font-size: .88rem; }
.auto-chip { align-self: flex-start; margin: 8px 0 0; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .88rem; }
.auto-chip span { color: #007A45; }
@keyframes just-marked { 0% { transform: scale(1); } 40% { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(214, 36, 110, .35); } 100% { transform: scale(1); box-shadow: none; } }
#playCard .play-cell.just-marked { animation: just-marked .6s ease-out; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #playCard .play-cell.just-marked { animation: none; } }
#playCard .play-cell { hyphens: auto; -webkit-hyphens: auto; }
#playCard .bgrid.grow .play-cell { aspect-ratio: auto; min-height: var(--sq); }
/* v42: BINGO stays pinned to the bottom of the screen while the card is in view, so it's always reachable.
   Large print: always (its rows can grow tall). Standard print: during play, because at 360 × 640 and 360 × 800 the
   scroll at game start left BINGO below the screen. */
#cardView.large-print .bingo-btn, #cardView.in-play .bingo-btn { position: sticky; bottom: 10px; z-index: 5; }

/* ===== v52: the card fits above BINGO on a 360-wide phone (owner-approved A–D) =====
   A: the title row stays one line below 390 px: "You're playing ·" drops ("Card 2" stays), a long game name is cut
      with an ellipsis (the card's own banner still shows it in full).
   B: during steady play the status line says "Round 1 · ✓ Marks itself" and the separate chip steps aside.
   C: a tighter call bar: padding and line height only; the latest call keeps its size, the largest text on screen.
   D: BINGO is 60 px tall on phones (well above a 44 px target). */
.gs-auto { display: none; }
.game-state.has-auto .gs-auto { display: inline; }
#cardView .game-state[data-kind="playing"]:not([hidden]) ~ .auto-chip { display: none; }
@media (max-width: 389px) {
  .card-top { flex-wrap: nowrap; align-items: center; column-gap: 8px; }
  .card-top h1 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-top .card-number, .card-top .lp-toggle { flex: none; }
  .card-top .cn-long { display: none; }
}
@media (max-width: 340px) { .game-state.has-auto .gs-on { display: none; } }
@media (max-width: 560px) {
  .call-bar { padding: 6px 12px; margin-top: 6px; row-gap: 0; line-height: 1.2; }
  .call-bar strong { line-height: 1.1; }
  .call-bar .recent-calls.in-bar { margin: 0; line-height: 1.3; }
  .game-state { margin-top: 6px; }
  .bingo-btn { min-height: 60px; }
}
/* large print: the status line keeps to one row too ("Game on ·" makes room, as on the narrowest phones) */
#cardView.large-print .game-state.has-auto .gs-on, #cardView.large-print .game-state.has-fresh .gs-on { display: none; }

/* ===== v54: the player side, from the round 8 mockups (owner-approved, October 2026) =====
   B1 the join page's bar stays put and fits one row on a phone. B2 a short setup before the first card. B3 the card
   screen: a slim sticky bar (logo, card number, Menu), the status line, the last call, this round's pattern and prize,
   then the card and BINGO, all above the bottom bar on a 360 × 740 phone. B4 Card · Calls · Settings at the bottom on
   phones. B5 on a computer the card stays and Calls or Settings sit beside it. C1 the next round's pattern. */

/* B1: one row on a phone, and it stays put while the join page scrolls */
@media (max-width: 560px) {
  body.play-body .site-head { position: sticky; }
  body.play-body .site-head .wrap { flex-wrap: nowrap; min-height: 52px; padding-bottom: 0; gap: 10px; }
  body.play-body .site-nav { flex-wrap: nowrap; gap: 12px; overflow: visible; }
  body.play-body .site-nav a[href="/bingo-number-caller/"] { display: none; }
  /* the card screen has Dark mode in its menu; on the join page a phone follows its own setting */
  body.play-body .site-nav #modeBtn { display: none; }
  body.play-body .site-head .logo-wordmark { height: 29px; width: auto; }
}
@media (max-width: 380px) { body.play-body .site-head .logo-wordmark { height: 24.5px; } body.play-body .site-nav { gap: 10px; } }

/* B3: the slim bar on the card screen (phones and tablets; a computer keeps the site header) */
.play-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(1, 2, 57, .06); }
.play-top[hidden] { display: none; }
.pt-logo img { display: block; height: 26.5px; width: auto; }
.pt-card { margin-left: auto; font: 800 1.05rem var(--head); color: var(--ink); white-space: nowrap; }
.pt-menu-btn { min-height: 44px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .95rem var(--body); cursor: pointer; white-space: nowrap; }
.pt-menu { position: absolute; top: 48px; right: 8px; z-index: 50; display: grid; min-width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(1, 2, 57, .2); }
.pt-menu[hidden] { display: none; }
.pt-menu a, .pt-menu button { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 700 1rem var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.pt-menu a:hover, .pt-menu button:hover { background: var(--bg); }
@media (min-width: 900px) { .play-top { display: none !important; } }
@media (max-width: 899px) { body.on-card .site-head { display: none; } }

/* the card pane: the order the mockup set, top to bottom */
#cardView .pv-main, #cardView .pv-head, #cardView .pv-card { display: flex; flex-direction: column; }
#cardView .call-bar { flex-wrap: nowrap; }
.play-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.play-sub[hidden] { display: none; }
.ps-pat { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 12px 2px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .95rem var(--body); cursor: pointer; }
.ps-mini { display: inline-grid; grid-template-columns: repeat(5, 4px); gap: 1px; padding: 2px; border: 1px solid var(--ink); border-radius: 3px; background: var(--surface); }
.ps-mini[hidden] { display: none; }
.ps-mini i { width: 4px; height: 4px; background: var(--line); }
.ps-mini i.on { background: #D6246E; } /* a pattern diagram: artwork, not a signal (docs/color-system.md) */
.ps-prize { font-weight: 800; font-size: .95rem; color: var(--ink); }
.ps-help { margin: 4px 2px 0; }
.ps-next { display: flex; align-items: center; gap: 8px; margin: 4px 2px 0; font-size: .9rem; line-height: 1.3; color: var(--muted); }
.ps-next .ps-mini { display: none; } /* one short line of text: the chip above already draws this round's pattern */
.ps-next[hidden] { display: none; }
.ps-next strong { color: var(--ink); }

/* Calls and Settings */
.pv-side-tabs { display: none; }
.pv-pane { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.pv-pane h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 1.2rem; }
.pv-count { font: 700 .9rem var(--body); color: var(--muted); }
.calls-last { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.calls-last[hidden] { display: none; }
.calls-last span { color: var(--muted); font-weight: 700; }
.calls-last strong { padding: 4px 14px; border-radius: 999px; background: var(--yellow, #FFC53D); color: #1D1B3A; font: 900 1.5rem var(--head); }
.calls-all { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.calls-all li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: .95rem; }
.ps-set { padding: 12px 0; border-top: 1px solid var(--line); }
#paneSettings h2 + .ps-set { border-top: 0; padding-top: 0; }
.ps-set .check { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.ps-set .check input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--c-done); }
.ps-hint { display: block; margin-top: 2px; font-weight: 400; font-size: .92rem; color: var(--muted); }
.ps-set-k { margin: 0 0 6px; font-weight: 800; }
.ps-h3 { font-size: 1.05rem; margin: 16px 0 4px; }
#paneSettings .speak-rate { display: grid; gap: 4px; margin: 10px 0 0 34px; }
#paneSettings .speak-rate[hidden] { display: none; }
#paneSettings .marker-picker { margin: 0; }
#paneSettings .how-to { margin-top: 14px; }

/* B4: Card · Calls · Settings on phones and tablets */
.play-tabs[hidden] { display: none !important; }
@media (max-width: 899px) {
  #cardView[data-tab="card"] .pv-side { display: none; }
  #cardView:not([data-tab="card"]) .pv-main { display: none; }
  #cardView[data-tab="calls"] #paneSettings, #cardView[data-tab="settings"] #paneCalls { display: none; }
  body.on-card .play-page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .play-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); height: calc(56px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); background: var(--logo-navy, #010239); box-shadow: 0 -2px 10px rgba(1, 2, 57, .18); }
  .play-tabs button { display: grid; justify-items: center; align-content: center; gap: 2px; margin: 4px; border: 0; border-radius: 12px; background: transparent; color: #FFFFFF; font: 700 .85rem var(--body); cursor: pointer; }
  .play-tabs svg { width: 22px; height: 22px; }
  .play-tabs button[aria-current="page"] { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px #9DB2FF; }
  /* BINGO stays reachable, just above the bar */
  #cardView.large-print .bingo-btn, #cardView.in-play .bingo-btn { bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* large print keeps the last call the largest text, a little smaller than on a computer, so the card fits too */
  #cardView.large-print .call-bar strong { font-size: 1.8rem; }
  #cardView.large-print .game-state strong { font-size: 1.15rem; }
  /* the slim bar says "Card 12": the title row is for screen readers here */
  #cardView .card-top { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #cardView { scroll-margin-top: 52px; }
  body.on-card .play-page { padding-top: 6px; }
  #cardView.play-panel { padding: 6px 12px 14px; }
  #cardView .game-state { margin-top: 0; }
}

/* B5: a computer: the card stays on the left at a comfortable size, Calls or Settings beside it */
@media (min-width: 900px) {
  body.on-card .play-page { max-width: 1040px; }
  /* the card and BINGO on the left, sized to the window so both fit without scrolling; the status line, the last call
     and this round's pattern and prize on the right, above Calls and Settings */
  #cardView:not([hidden]) { --cardw: clamp(340px, calc((100vh - 190px) / 1.28), 540px); display: grid; grid-template-columns: var(--cardw) minmax(300px, 440px); grid-template-areas: "card head" "card side"; grid-template-rows: auto 1fr; justify-content: center; column-gap: 28px; row-gap: 12px; align-items: start; padding: 0; border: 0; background: transparent; }
  #cardView .pv-main { display: contents; }
  #cardView .pv-card { grid-area: card; display: flex; flex-direction: column; }
  #cardView .pv-head { grid-area: head; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
  #cardView .pv-side { grid-area: side; }
  #cardView .pv-card #playCard { margin-top: 0; }
  #cardView .card-top h1 { font-size: 1.4rem; }
  .pv-side-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
  .pv-side-tabs button { flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .95rem var(--body); cursor: pointer; }
  .pv-side-tabs button[aria-pressed="true"] { background: var(--c-here); border-color: var(--c-here); color: #FFFFFF; }
  :root[data-theme="dark"] .pv-side-tabs button[aria-pressed="true"] { color: #15142B; }
  #cardView[data-side="calls"] #paneSettings, #cardView[data-side="settings"] #paneCalls { display: none; }
  .play-tabs { display: none !important; } /* the side column has Calls and Settings */
}

/* B2: the short setup before the first card (the host setup's pattern: pick, then Continue) */
.setup-panel h1 { font-size: 1.55rem; margin: 0 0 4px; }
.su-step { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.su-dots { display: flex; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.su-dots li { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.su-dots li.done { background: var(--c-done); }
.su-dots li.here { background: var(--c-here); }
.su-choices { display: grid; gap: 10px; margin: 14px 0; }
.su-choice { position: relative; display: grid; gap: 2px; min-height: 64px; padding: 14px 52px 14px 16px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--ink) 32%, var(--surface)); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.su-choice strong { font-family: var(--head); font-size: 1.12rem; }
.su-choice span { color: var(--muted); font-size: .95rem; }
.su-choice::after { content: ""; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 32%, var(--surface)); display: grid; place-items: center; font: 900 .9rem/1 var(--body); color: var(--surface); }
@media (hover: hover) { .su-choice:hover { border-color: var(--c-here); } .su-choice:hover::after { border-color: var(--c-here); } }
.su-choice:focus-visible { outline: 3px solid var(--c-here); outline-offset: 3px; }
.su-choice[aria-checked="true"], .su-choice[aria-checked="true"]:hover { border-color: var(--c-done); box-shadow: inset 0 0 0 1px var(--c-done); background: color-mix(in srgb, var(--c-done) 8%, var(--surface)); }
.su-choice[aria-checked="true"]::after { content: "✓"; border-color: var(--c-done); background: var(--c-done); }
.su-choice[aria-checked="true"] strong::after { content: "✓ Selected"; display: block; width: max-content; margin: 4px 0 2px; padding: 1px 10px; border-radius: 999px; background: var(--c-done); color: var(--surface); font: 800 .85rem/1.5 var(--body); }
.su-swatch { grid-template-columns: 36px 1fr; align-items: center; column-gap: 12px; }
.su-dab { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(1, 2, 57, .15); }
.su-dab[data-mcolor="pink"] { background: #D6246E; } .su-dab[data-mcolor="blue"] { background: #2F5BEA; } .su-dab[data-mcolor="green"] { background: #0E7C62; } .su-dab[data-mcolor="gold"] { background: #B8860B; }
.su-preview { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.su-preview span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; border: 2px solid var(--line); background: #FFFFFF; color: #1D1B3A; font: 700 1.1rem var(--head); }
.su-preview span.big { font-size: 1.6rem; font-weight: 900; border: 3px solid #000; color: #000; }
.su-preview em { color: var(--muted); font-size: .88rem; }
.su-rate { display: grid; gap: 4px; margin: 4px 0 0; }
.su-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; border-left: 4px solid var(--c-attn); background: var(--warn-bg); }
.setup-panel .q-go { margin: 4px 0 6px; }
.setup-panel .q-continue { width: 100%; min-height: 52px; font-size: 1.05rem; }
.setup-panel .q-wait { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0; border: 2px dashed color-mix(in srgb, var(--ink) 22%, var(--surface)); border-radius: 999px; color: var(--muted); font-weight: 700; }
.setup-panel .q-wait[hidden], .setup-panel .q-continue[hidden] { display: none; }
.su-later { margin: 10px 0 0; }
.su-nav { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.su-nav:not(:has(:not([hidden]))) { display: none; }

/* v55: where this phone's BINGO claim stands, on the card screen (colours: docs/color-system.md: green = done, with
   words; amber = needs attention; the rest neutral) */
.claim-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 6px 0 0; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .95rem; line-height: 1.3; }
.claim-line[hidden] { display: none; }
.claim-line .link-btn { min-height: 28px; padding: 0 2px; margin-left: auto; }
.claim-line[data-kind="valid"], .claim-line[data-kind="announced"], .claim-line[data-kind="held"] { border-color: var(--c-done); color: var(--c-done); }
.claim-line[data-kind="slow"] { border-color: var(--c-attn); background: var(--warn-bg); }
.bingo-btn.is-sent { font-size: 1.25rem; letter-spacing: .02em; }

/* ===== v55: markers are a shape and a colour, chosen together (owner-approved, October 2026) =====
   The shape reads for everyone: about 1 in 12 men has some colour vision deficiency, and contrast perception drops
   with age. A mark is the marker's shape behind the number or word, which stays on top.
   Contrast of the number over each marker (WCAG, 4.5:1 needed): pink circle, white 4.84:1; navy square, white 16.53:1;
   gold heart, ink 7.65:1; green star, ink on its pale fill 13.68:1 (a solid star failed: ink 3.21:1, and white ran off
   its points onto the white square); blue X, ink on the open centre 16.53:1 (a stroke under the number was 3.00:1),
   with a white halo where a long word reaches a stroke. Word and picture cards use the pale version of each marker
   (ink 14+:1), because text can run past any shape. Large print keeps the chosen marker (no more fixed navy). */
.play-card .play-cell.marked:not(.free), .play-card .play-cell.auto:not(.free) { isolation: isolate; background: #FFFFFF; color: #1D1B3A; }
.play-card .play-cell.marked:not(.free)::after, .play-card .play-cell.auto:not(.free)::after { content: ""; position: absolute; top: 3%; right: 3%; bottom: 3%; left: 3%; z-index: -1; display: block; border: 0; border-radius: 0; opacity: 1; background: var(--mk-pale) center / contain no-repeat; }
.play-card .play-cell.num.marked:not(.free)::after, .play-card .play-cell.num.auto:not(.free)::after { background-image: var(--mk-solid); }
.play-card .play-cell.num.marked:not(.free), .play-card .play-cell.num.auto:not(.free) { color: var(--mk-ink); }
.play-card[data-marker="pink-circle"] { --mk-solid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22%23D6246E%22%2F%3E%3C%2Fsvg%3E"); --mk-pale: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244%22%20fill%3D%22%23FADCE8%22%20stroke%3D%22%23D6246E%22%20stroke-width%3D%227%22%2F%3E%3C%2Fsvg%3E"); --mk-ink: #FFFFFF; }
.play-card[data-marker="blue-x"] { --mk-solid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M12%2012%2031%2031M88%2012%2069%2031M12%2088%2031%2069M88%2088%2069%2069%22%20stroke%3D%22%232F5BEA%22%20stroke-width%3D%2215%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); --mk-pale: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M12%2012%2031%2031M88%2012%2069%2031M12%2088%2031%2069M88%2088%2069%2069%22%20stroke%3D%22%232F5BEA%22%20stroke-width%3D%2215%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); --mk-ink: #1D1B3A; }
.play-card[data-marker="green-star"] { --mk-solid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%203l14.1%2029.6%2032.6%204.1-23.9%2022.6%206.1%2032.3L50%2075.9%2021.1%2091.6l6.1-32.3L3.3%2036.7l32.6-4.1z%22%20fill%3D%22%23D3F0E6%22%20stroke%3D%22%230E7C62%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); --mk-pale: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%203l14.1%2029.6%2032.6%204.1-23.9%2022.6%206.1%2032.3L50%2075.9%2021.1%2091.6l6.1-32.3L3.3%2036.7l32.6-4.1z%22%20fill%3D%22%23D3F0E6%22%20stroke%3D%22%230E7C62%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); --mk-ink: #1D1B3A; }
.play-card[data-marker="gold-heart"] { --mk-solid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%2094S3%2063%203%2033a23.5%2023.5%200%200%201%2047-8.5A23.5%2023.5%200%200%201%2097%2033c0%2030-47%2061-47%2061z%22%20fill%3D%22%23E3A600%22%2F%3E%3C%2Fsvg%3E"); --mk-pale: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%2094S3%2063%203%2033a23.5%2023.5%200%200%201%2047-8.5A23.5%2023.5%200%200%201%2097%2033c0%2030-47%2061-47%2061z%22%20fill%3D%22%23FBEFCB%22%20stroke%3D%22%23B8860B%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); --mk-ink: #1D1B3A; }
.play-card[data-marker="navy-square"] { --mk-solid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2294%22%20height%3D%2294%22%20rx%3D%2214%22%20fill%3D%22%231D1B3A%22%2F%3E%3C%2Fsvg%3E"); --mk-pale: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2212%22%20fill%3D%22%23E3E2EC%22%20stroke%3D%22%231D1B3A%22%20stroke-width%3D%227%22%2F%3E%3C%2Fsvg%3E"); --mk-ink: #FFFFFF; }
.play-card[data-marker="blue-x"] .play-cell.marked:not(.free), .play-card[data-marker="blue-x"] .play-cell.auto:not(.free) { text-shadow: 0 0 2px #FFFFFF, 0 0 3px #FFFFFF, 0 0 5px #FFFFFF; }
/* large print keeps the chosen marker; its own rules used to paint every mark navy with a yellow ring */
#cardView.large-print #playCard .play-cell.marked:not(.free), #cardView.large-print #playCard .play-cell.auto:not(.free) { background: #FFFFFF; color: #000000; box-shadow: none; }
#cardView.large-print #playCard .play-cell.num.marked:not(.free), #cardView.large-print #playCard .play-cell.num.auto:not(.free) { color: var(--mk-ink); }
#cardView.large-print #playCard .play-cell.marked:not(.free)::after, #cardView.large-print #playCard .play-cell.auto:not(.free)::after { display: block; }
/* Settings: the five markers as tiles (they fit at 320: 5 × 48 px); the setup asks the same, as rows */
.mk-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mk-tile { display: grid; place-items: center; min-height: 52px; border-radius: 12px; border: 2px solid var(--line); background: #FFFFFF; cursor: pointer; }
.mk-tile svg, .su-mk svg { width: 32px; height: 32px; display: block; }
.mk-tile[aria-checked="true"] { border-color: var(--c-done); box-shadow: inset 0 0 0 2px var(--c-done); }
.mk-tile:focus-visible { outline: 3px solid var(--c-here); outline-offset: 2px; }
.su-mk { display: grid; place-items: center; width: 36px; height: 36px; }
.mk-name { color: var(--muted); font-weight: 700; margin-left: 6px; }
/* v56: the game-over cross-promotion line: plain text, after everything else */
.also-ours { margin: 18px 0 0; text-align: left; }
.also-ours a { color: inherit; }
/* v57: the host's recap page, when shown to everyone who played */
.end-recap { margin: 12px 0 0; }