/* =====================================================================
   THEMES
   Every colour in this file comes from the variables below, so a theme is just a block of variables.
   - :root                       the default theme: "Twin Ports" (black page, navy tiles, gold names, blue header bar),
                                 matching twinportspool.com/2025
   - :root[data-theme="classic"] the earlier green look (follows the visitor's light/dark setting)
   - felt, midnight, ember, eleanor, evelyn, elizabeth, emma, esther, evangeline, eoline, edith, eileen, eloise
                                 more schemes; an event's choice is stored in kott.Event.Theme (list in Data/Themes.cs)
   To use a theme, put data-theme="<name>" on the <html> element. To add one, copy a block and change the values.
   :root holds the values every dark scheme shares (--row and --line follow --tile and --bg, the red alert colours,
   --row-gap, dark colour-scheme); a scheme lists only the colours that make it different. "classic" is the light one
   and sets its own.

   --bg page   --card container panels   --tile table cards   --row table row   --field inputs
   --ink text  --muted secondary text    --line row gap       --edge outlines
   --header / --header-ink  top bar      --brand-bg / --brand-ink  the name badge in the top bar
   --link links  --accent hover/pills    --primary / --primary-ink  main buttons   --gold / --king  highlights
   ===================================================================== */
:root {
  --bg: #000000; --card: #1d2731; --tile: #09314d; --field: #0b1219;
  --row: var(--tile); --line: var(--bg); --row-gap: 4px;   /* the dark schemes below share these: they only change what differs */
  --ink: #f7eedf; --muted: #a9bbc9; --edge: #4b7391;
  --header: #328cc1; --header-ink: #07202f; --brand-bg: #1d2731; --brand-ink: #d9b310;
  --link: #7abcdc; --accent: #328cc1; --accent-ink: #07202f;
  --primary: #d9b310; --primary-ink: #111111; --gold: #d9b310; --king: #d9b310;
  --danger: #ff7a6e; --warn: #3d3510;
  --alert-bg: #3b1a17; --alert-ink: #ffd0cb; --alert-line: #6b2a24;
  --inv-bg: #dcdcdc; --inv-head: #bdbdbd; --inv-ink: #1c1c1c; --inv-line: #b4b4b4; --inv-scheme: light; --inv-time: #333333; --inv-out: #a4160f;   /* "inverted grays": a light-gray table on the dark schemes, a dark-gray one on the light scheme */
  color-scheme: dark;
}
:root[data-theme="classic"] {
  --bg: #f6f5f1; --card: #ffffff; --tile: #ffffff; --row: transparent; --field: #ffffff;
  --ink: #1d1f24; --muted: #6b7280; --line: #e3e0d8; --edge: #e3e0d8; --row-gap: 1px;
  --header: #0f6b4f; --header-ink: #ffffff; --brand-bg: transparent; --brand-ink: #ffffff;
  --link: #0f6b4f; --accent: #0f6b4f; --accent-ink: #ffffff;
  --primary: #0f6b4f; --primary-ink: #ffffff; --gold: #b7791f; --king: #b7791f;
  --danger: #b42318; --warn: #fff4d6;
  --alert-bg: #fde8e6; --alert-ink: #7a1c14; --alert-line: #f3b3ad;
  --inv-bg: #2c2f35; --inv-head: #40444c; --inv-ink: #f0f0f0; --inv-line: #4b4f58; --inv-scheme: dark; --inv-time: #e6e6e6; --inv-out: #ff9a90;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="classic"] {
    --bg: #14161a; --card: #1e2127; --tile: #1e2127; --field: #1e2127;
    --ink: #eceef2; --muted: #9aa3b2; --line: #2e333c; --edge: #2e333c;
    --header: #35a97f; --header-ink: #0b1a14; --brand-ink: #0b1a14;
    --link: #35a97f; --accent: #35a97f; --accent-ink: #0b1a14; --primary: #35a97f; --primary-ink: #0b1a14;
    --gold: #f5c15a; --king: #f5c15a; --danger: #f97066; --warn: #3a3116;
    --alert-bg: #3b1a17; --alert-ink: #ffd0cb; --alert-line: #6b2a24;
    --inv-bg: #dcdcdc; --inv-head: #bdbdbd; --inv-ink: #1c1c1c; --inv-line: #b4b4b4; --inv-scheme: light; --inv-time: #333333; --inv-out: #a4160f;
    color-scheme: dark;
  }
}

/* Additional per-tournament schemes (chosen on the event page). Same variables as above. */
:root[data-theme="felt"] {
  --bg: #0b2a1c; --card: #123a27; --tile: #17472f; --field: #0a1f15;
  --ink: #f3efe0; --muted: #a9c4b3; --edge: #4f8a69;
  --header: #1f6b47; --header-ink: #f3efe0; --brand-bg: #0b2a1c; --brand-ink: #f0c75e;
  --link: #8fd4ae; --accent: #2f9464; --accent-ink: #04140c;
  --primary: #f0c75e; --primary-ink: #1a1400; --gold: #f0c75e; --king: #f0c75e;
  --danger: #ff8a7e; --warn: #3a3a12;
}
:root[data-theme="midnight"] {
  --bg: #0d0f1a; --card: #171a2e; --tile: #1f2444; --field: #10121f;
  --ink: #eceffd; --muted: #a4abd0; --edge: #4a527f;
  --header: #4a52c4; --header-ink: #ffffff; --brand-bg: #171a2e; --brand-ink: #c9ccff;
  --link: #a9b0ff; --accent: #7079e6; --accent-ink: #0b0d22;
  --primary: #c9ccff; --primary-ink: #12142b; --gold: #f4c95d; --king: #f4c95d;
  --danger: #ff8a80; --warn: #2f2b12;
}
:root[data-theme="ember"] {
  --bg: #121212; --card: #1e1b19; --tile: #2a2420; --field: #151312;
  --ink: #f6ece4; --muted: #baa89b; --edge: #7a5a45;
  --header: #d2601a; --header-ink: #1a0c02; --brand-bg: #1e1b19; --brand-ink: #ffb066;
  --link: #ffb066; --accent: #e07a2e; --accent-ink: #1a0c02;
  --primary: #ffb066; --primary-ink: #1a0c02; --gold: #ffc36b; --king: #ffc36b;
  --danger: #ff8a7e; --warn: #3d2f10;
}

/* Ten more schemes, named Eleanor through Eloise (colour pairs; Data/Themes.cs has the list). */
:root[data-theme="eleanor"] {
  --bg: #14071f; --card: #241033; --tile: #2e1440; --field: #1a0c26;
  --ink: #f5eefc; --muted: #b9a4cf; --edge: #6b3fa0;
  --header: #4f2683; --header-ink: #ffffff; --brand-bg: #241033; --brand-ink: #ffc62f;
  --link: #c9a6ff; --accent: #8a53c9; --accent-ink: #180a26;
  --primary: #ffc62f; --primary-ink: #221100; --gold: #ffc62f; --king: #ffc62f;
  --danger: #ff7a6e; --warn: #3d3510;
}
:root[data-theme="evelyn"] {
  --bg: #07120f; --card: #0f231d; --tile: #153328; --field: #0a1a15;
  --ink: #f2f6ee; --muted: #a8c2ad; --edge: #356a51;
  --header: #203731; --header-ink: #ffb612; --brand-bg: #0f231d; --brand-ink: #ffb612;
  --link: #8fe0a6; --accent: #2f6b4a; --accent-ink: #06140c;
  --primary: #ffb612; --primary-ink: #231a00; --gold: #ffb612; --king: #ffb612;
  --danger: #ff8a7e; --warn: #3a3a12;
}
:root[data-theme="elizabeth"] {
  --bg: #1a0508; --card: #2b0d12; --tile: #3a121a; --field: #1f070b;
  --ink: #f7ece7; --muted: #c9a9ab; --edge: #862633;
  --header: #862633; --header-ink: #ffffff; --brand-bg: #2b0d12; --brand-ink: #ffc72c;
  --link: #ffb3b8; --accent: #a5303f; --accent-ink: #180307;
  --primary: #ffc72c; --primary-ink: #241a00; --gold: #ffc72c; --king: #ffc72c;
  --danger: #ff8a7e; --warn: #3d3510;
}
:root[data-theme="emma"] {
  --bg: #050505; --card: #161616; --tile: #1f1f1f; --field: #0c0c0c;
  --ink: #f7f2e2; --muted: #b7ae94; --edge: #5a5230;
  --header: #1a1a1a; --header-ink: #ffc72c; --brand-bg: #161616; --brand-ink: #ffc72c;
  --link: #ffdd77; --accent: #c9a227; --accent-ink: #0c0c0c;
  --primary: #ffc72c; --primary-ink: #1a1400; --gold: #ffc72c; --king: #ffc72c;
  --danger: #ff8a7e; --warn: #3a3a12;
}
:root[data-theme="esther"] {
  --bg: #050c1a; --card: #0c1a33; --tile: #102445; --field: #070f1f;
  --ink: #eef2fa; --muted: #9fb0cc; --edge: #2d4a7a;
  --header: #0c2340; --header-ink: #ffc52f; --brand-bg: #0c1a33; --brand-ink: #ffc52f;
  --link: #9cc2ff; --accent: #ffc52f; --accent-ink: #0c1a33;
  --primary: #ffc52f; --primary-ink: #0c1a33; --gold: #ffc52f; --king: #ffc52f;
  --danger: #ff8a7e; --warn: #3a3512;
}
:root[data-theme="evangeline"] {
  --bg: #020a1c; --card: #0a1a3d; --tile: #0e2456; --field: #06112b;
  --ink: #eef3fb; --muted: #9fb3d6; --edge: #2450a8;
  --header: #0033a0; --header-ink: #ffffff; --brand-bg: #0a1a3d; --brand-ink: #ff4d6a;
  --link: #8fb4ff; --accent: #e4002b; --accent-ink: #ffffff;
  --primary: #e4002b; --primary-ink: #ffffff; --gold: #ffd166; --king: #ffd166;
  --danger: #ff7a6e; --warn: #3d3510;
}
:root[data-theme="eoline"] {
  --bg: #0a0a0a; --card: #1a1414; --tile: #261818; --field: #100c0c;
  --ink: #f7eeee; --muted: #c4a8a8; --edge: #7a2a2a;
  --header: #c8102e; --header-ink: #ffffff; --brand-bg: #1a1414; --brand-ink: #ff5a5f;
  --link: #ff9a9a; --accent: #e0202f; --accent-ink: #ffffff;
  --primary: #e0202f; --primary-ink: #ffffff; --gold: #ffd166; --king: #ffd166;
  --danger: #ff9a8e; --warn: #3d2a10;
}
:root[data-theme="edith"] {
  --bg: #050a14; --card: #0b1630; --tile: #0f1e40; --field: #070d1c;
  --ink: #f4f1ec; --muted: #a8b3c8; --edge: #2c4170;
  --header: #0b162a; --header-ink: #f26a21; --brand-bg: #0b1630; --brand-ink: #f26a21;
  --link: #ffa36b; --accent: #f26a21; --accent-ink: #1a0a00;
  --primary: #f26a21; --primary-ink: #1a0a00; --gold: #ffb27a; --king: #ffb27a;
  --danger: #ff8a7e; --warn: #3d2f10;
}
:root[data-theme="eileen"] {
  --bg: #050505; --card: #151515; --tile: #1e1e1e; --field: #0c0c0c;
  --ink: #f2f2f2; --muted: #a5a9ad; --edge: #5a5f63;
  --header: #1a1a1a; --header-ink: #c4c8cc; --brand-bg: #151515; --brand-ink: #c4c8cc;
  --link: #d6dadd; --accent: #b8bec4; --accent-ink: #0c0c0c;
  --primary: #c4c8cc; --primary-ink: #0c0c0c; --gold: #e3e6e8; --king: #e3e6e8;
  --danger: #ff8a7e; --warn: #33332a;
}
:root[data-theme="eloise"] {
  --bg: #031012; --card: #082024; --tile: #0b2c31; --field: #051619;
  --ink: #eef4f4; --muted: #9fb6b8; --edge: #2b5a60;
  --header: #004c54; --header-ink: #e8ecee; --brand-bg: #082024; --brand-ink: #c4ccd0;
  --link: #9fd3d8; --accent: #a9b4b8; --accent-ink: #04181a;
  --primary: #a5acaf; --primary-ink: #04181a; --gold: #dfe5e8; --king: #dfe5e8;
  --danger: #ff8a7e; --warn: #2f3a2a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; }
header.site { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--header); color: var(--header-ink); padding: .6rem 1rem; }
header.site .brand { color: var(--brand-ink); background: var(--brand-bg); padding: .15rem .7rem; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
header.site small { font-weight: 400; opacity: .85; margin-left: .4rem; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
/* Routes.razor's FocusOnNavigate puts the focus on each page's heading (so screen readers announce the new page);
   the browser's focus ring around it isn't wanted. Tab never stops on a heading, so keyboard users lose nothing. */
h1:focus, h1:focus-visible { outline: none; }
h1 { margin: .2rem 0; font-size: 1.6rem; } h2 { font-size: 1.1rem; margin: 0 0 .6rem; } h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
a { color: var(--link); }
.muted { color: var(--muted); } .small { font-size: .85rem; } .right { text-align: right; } .num { text-align: right; font-variant-numeric: tabular-nums; }
.sub { color: var(--muted); margin-bottom: .8rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.two-col > .card { margin: 0; } .two-col { margin: 1rem 0; }
@media (max-width: 760px) { .two-col { grid-template-columns: minmax(0, 1fr); } }   /* minmax: a wide table scrolls inside its card instead of widening the page */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin-bottom: .8rem; }
label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
/* a labelled field that holds more than one control (so it can't be a <label>): the planned start time picker */
.field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
.start-time-pick { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }   /* the Clear button sits under the time, not beside it */
.start-time-pick select { width: auto; min-width: 11rem; }
.start-summary { display: block; }
.export-grant { display: inline-flex; flex-direction: row; align-items: center; gap: .2rem; font-size: .75rem; margin: 0 .2rem; color: var(--ink); }
.export-grant input { width: auto; margin: 0; }
input, select, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--field); color: var(--ink); min-width: 0; }
/* Some browsers render a <select>'s dropdown list with the OS's own colours instead of ours, which can
   leave light-on-light or dark-on-dark text in a scheme with a light --field. Spelling it out on <option>
   fixes that everywhere it's actually honoured, and is harmless where it isn't. */
select option { background: var(--field); color: var(--ink); }
.narrow { width: 5rem; text-align: center; }
.row { display: flex; gap: .5rem; margin: .5rem 0; flex-wrap: wrap; } .row > input, .row > select { flex: 1; }

.btn { font: inherit; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--edge); background: var(--field); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; }
.btn.danger { color: var(--danger); } .btn.big { font-size: 1.1rem; padding: .7rem 1.2rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0 .3rem; font: inherit; font-size: .85rem; color: var(--link); cursor: pointer; text-decoration: underline; }
.link.danger { color: var(--danger); }

.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.actions { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
/* Play header: More is a drop-down panel under its button (hidden, not removed, so Edit Tournament's pop-up survives closing it) */
.more-wrap { position: relative; }
.more-menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 50; min-width: 15rem; display: flex; flex-direction: column; gap: .4rem;
             padding: .6rem; background: var(--card); color: var(--ink); border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.more-menu[hidden] { display: none; }
.more-menu > .btn, .more-menu > label.who { width: 100%; box-sizing: border-box; text-align: left; }
.more-menu > label.who select { width: 100%; box-sizing: border-box; }
.groups-board { margin: .6rem 0; }
.who input { width: 9rem; padding: .35rem .5rem; }
.pill { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--edge); white-space: nowrap; }
.pill.s-1 { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill.s-2 { background: var(--warn); color: var(--gold); border-color: var(--gold); }
.pill.s-3 { background: var(--gold); color: var(--primary-ink); border-color: var(--gold); }

.alert { background: var(--alert-bg); color: var(--alert-ink); border: 1px solid var(--alert-line); border-radius: 8px; padding: .6rem .8rem; margin: .6rem 0; }
.staging-banner { background: #F0C040; color: #1B1B1B; text-align: center; padding: .4rem .8rem; font-size: .95rem; }   /* Kott:Staging */
.alert.dismissable { cursor: pointer; }   /* click the message to close it */
.alert[data-alert]:focus { outline: 2px solid var(--alert-ink); outline-offset: 2px; }   /* the message has the focus after a button was refused (AlertBar.razor) */
.alert-fix { margin-left: .6rem; font-weight: 700; text-decoration: underline; color: inherit; white-space: nowrap; }
.alert-fix[hidden] { display: none; }
.fix-flash { outline: 3px solid var(--primary); outline-offset: 2px; transition: outline-color .4s; }   /* the field "Take me there" went to */
.flash { background: var(--warn); border: 1px solid var(--edge); border-radius: 8px; padding: .5rem .8rem; margin: .6rem 0; }
.lastgame { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--tile); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 8px; padding: .5rem .8rem; margin: .6rem 0; }

.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.table-card { background: var(--tile); border: 1px solid var(--line); border-radius: 12px; padding: .6rem; display: flex; flex-direction: column; gap: .3rem; position: relative; }
.table-label { font-weight: 700; }
.clock { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.player { font: inherit; font-size: 1.3rem; padding: .9rem .7rem; border-radius: 10px; border: 2px solid var(--edge); background: var(--field); color: var(--ink); cursor: pointer; flex: 1; }
.player:hover:not(:disabled) { border-color: var(--accent); }
.player.king { border-color: var(--king); } .crown { color: var(--king); }
.player-name { margin-right: .6rem; }
.chips-field { display: inline-flex; align-items: center; gap: .4rem; margin-left: .4rem; }
.chips-label { font-size: .75rem; color: var(--muted); }
.chip { display: inline-block; font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); margin-left: .3rem; vertical-align: middle; }
.vs { text-align: center; color: var(--muted); font-size: .75rem; margin: -.1rem 0; } .hint { color: var(--muted); font-size: .75rem; text-align: center; }
.idle { color: var(--muted); padding: 1rem 0; text-align: center; }
.pill.last-game { background: var(--warn); color: var(--ink); border-color: var(--edge); margin-left: .4rem; }
.hide-btn { font: inherit; line-height: 1; padding: .1rem .4rem; border-radius: 6px; border: 1px solid var(--edge); background: var(--field); color: var(--muted); cursor: pointer; }
.hide-btn:hover { border-color: var(--danger); color: var(--danger); }

/* Kiosk: fewer, larger table cards - aim for 3 columns x 2 rows on a TV/Fire Stick browser */
.tables.kiosk { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tables.kiosk .table-card { padding: .5rem; gap: .25rem; }
.tables.kiosk .player { padding: .5rem .4rem; font-size: 1rem; }
.tables.kiosk .hint { display: none; }
.add-table { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1.4rem; }
.table-name-input { width: 15rem; }

/* Waiting list: name, then (left to right) the down arrow, the up arrow, and remaining chips rightmost. */
table.grid.compact.queue { width: 100%; margin: 0; }
table.grid.compact.queue td, table.grid.compact.queue th { text-align: left; white-space: normal; }
table.grid.compact.queue td.qarrow, table.grid.compact.queue th.qarrow { text-align: center; width: 1.6rem; padding-left: 0; padding-right: 0; }
table.grid.compact.queue td.qchips, table.grid.compact.queue th.qchips { text-align: right; font-variant-numeric: tabular-nums; }
.qmove { font: inherit; font-size: .7rem; line-height: 1; padding: .15rem .4rem; border-radius: 6px; border: 1px solid var(--edge); background: var(--field); color: var(--muted); cursor: pointer; }
.qmove:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
ul.plain { list-style: none; margin: .4rem 0; padding: 0; } ul.plain li { padding: .15rem 0; }
ul.cols { columns: 2; }
ul.roster li { font-size: 1.1rem; padding: .05rem 0; line-height: 1.3; }
/* Play page "Players — chips provided": a compact number box so each row stays about one line tall. */
ul.roster .chips-field { flex-direction: row; gap: .3rem; }
ul.roster .chips-field input { width: 3.2rem; padding: .05rem .25rem; font-size: .9rem; }

/* Tables: each row is a tile separated by a gap, like the Twin Ports standings page */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { padding: .4rem .5rem; text-align: left; }
table.grid td { background: var(--row); border-bottom: var(--row-gap) solid var(--line); }
table.grid th { font-size: .85rem; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--edge); }
table.grid th.num, table.grid td.num { text-align: center; }
@media (max-width: 640px) { table.grid { font-size: .85rem; } }

/* Home page: each event row previews the colour scheme its page will switch to when opened */
table.grid tr td:first-child { border-left: 4px solid var(--row-accent, transparent); }
.theme-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; margin-right: .45rem; vertical-align: middle; }
.btn.themed { background: var(--row-accent, var(--field)); border-color: var(--row-accent, var(--edge)); color: #fff; }
.btn.themed:hover { filter: brightness(1.1); }
/* Events page: one tile per event - one column on a phone, then 2, 3 or 4 across as the screen widens. The coloured
   left edge previews the event's colour scheme; the Open/Standings buttons sit centred at the bottom of every tile. */
.event-tiles { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 560px)  { .event-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px)  { .event-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .event-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.event-tile { display: flex; flex-direction: column; justify-content: space-between; gap: .6rem;
              background: var(--tile); border: 1px solid var(--line); border-left: 5px solid var(--row-accent, var(--edge));
              border-radius: 10px; padding: .7rem .8rem; min-width: 0; }
.tile-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tile-pick { display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; cursor: pointer; }
.tile-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.tile-meta { font-size: .9rem; overflow-wrap: anywhere; }
.tile-actions { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.tile-actions .btn { padding: .35rem .9rem; font-size: .9rem; }
.demo-try { display: flex; flex-direction: column; align-items: center; gap: .4rem; border: 1px solid var(--row-accent, currentColor); border-radius: .5rem; padding: .4rem .8rem; }   /* a demo tile: Skip setup and Try This Demo in one narrow-lined box */
.demo-skip { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; margin: 0; white-space: nowrap; font-size: .9rem; }   /* the box and its words on one line */
.demo-skip input { width: auto; margin: 0; }
.pill.vis { margin-left: .3rem; background: var(--field); color: var(--muted); }
/* Accounts page: one tile per account instead of a 12-column table, so nothing scrolls sideways - one column on a phone,
   then 2 and 3 across as the screen widens. Inside a tile: who, sign-in facts, role, venues, the four switches, actions. */
.acct-filter { align-items: center; } .acct-filter > input { flex: 2 1 14rem; } .acct-filter > select { flex: 1 1 10rem; }
.acct-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
@media (min-width: 700px)  { .acct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .acct-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acct-tile { display: flex; flex-direction: column; gap: .6rem; background: var(--tile); border: 1px solid var(--line); border-left: 5px solid var(--accent);
             border-radius: 10px; padding: .7rem .8rem; min-width: 0; }
.acct-tile.off { border-left-color: var(--edge); opacity: .8; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.acct-who { min-width: 0; }
.acct-email { font-weight: 700; overflow-wrap: anywhere; }
.acct-head .pill { white-space: normal; text-align: center; flex: none; max-width: 45%; }
.acct-meta { display: flex; flex-direction: column; gap: .1rem; overflow-wrap: anywhere; }
.acct-part { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.acct-part select { max-width: 100%; }
.acct-label { flex: 0 0 100%; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.acct-tile .pill { white-space: normal; }
.acct-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .8rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.acct-sw, label.acct-sw { display: flex; flex-direction: row; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink); min-height: 1.9rem; }
.acct-sw input { width: auto; margin: 0; flex: none; }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: auto; border-top: 1px solid var(--line); padding-top: .5rem; }
.venue-fixed { font-size: 1rem; color: var(--ink); padding: .5rem 0; }   /* New Tournament: the one venue, no dropdown */

/* Settings (venues) and Edit Tournament: a list of editable names, each with its buttons on the same line */
.settings-list li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .2rem 0; }
.list-input { flex: 1 1 10rem; min-width: 0; padding: .3rem .5rem; }
label.lock-toggle { flex-direction: row; align-items: center; gap: .3rem; font-size: .8rem; white-space: nowrap; }
.settings-venue-head select { min-width: 16rem; }

/* Edit Tournament pop-up */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 900; }
.modal { position: fixed; z-index: 901; left: 50%; top: 4vh; transform: translateX(-50%);
         width: min(640px, 94vw); max-height: 92vh; overflow-y: auto;
         background: var(--card); color: var(--ink); border: 1px solid var(--edge); border-radius: 12px; padding: 1rem 1.1rem;
         box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.modal.edit-tournament { width: min(820px, 94vw); }
.et-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; align-items: start; }
.et-cols > div { min-width: 0; }
.et-cols input.list-input { width: 100%; box-sizing: border-box; }
@media (max-width: 620px) { .et-cols { grid-template-columns: 1fr; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.modal h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.visibility-options { display: grid; gap: .3rem; }

#blazor-error-ui { display: none; background: #ffe58f; bottom: 0; left: 0; padding: .6rem 1rem; position: fixed; width: 100%; z-index: 1000; color: #000; }
#blazor-error-ui .reload { margin-left: .5rem; }

/* Reconnect strip (our own #components-reconnect-modal in App.razor, so blazor.web.js doesn't inject its white panel):
   blazor.web.js sets components-reconnect-show / -hide / -failed / -rejected on it. Spotty venue Wi-Fi is normal, so
   "reconnecting" is a low-key themed strip at the bottom; "failed"/"rejected" (retries over) turn amber and invite a tap. */
#components-reconnect-modal {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1100; display: none;
    width: max-content; max-width: calc(100vw - 2rem); box-sizing: border-box;
    background: var(--tile); color: var(--ink); border: 1px solid var(--edge); border-radius: 999px;
    padding: .5rem 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,.35); font-size: .9rem; text-align: center;
}
#components-reconnect-modal .rc { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }
#components-reconnect-modal.components-reconnect-show .rc-show,
#components-reconnect-modal.components-reconnect-failed .rc-failed,
#components-reconnect-modal.components-reconnect-rejected .rc-rejected { display: inline; }
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    cursor: pointer; background: var(--warn); border-color: var(--gold); color: var(--gold); font-weight: 700;
}
#components-reconnect-modal .rc-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%;
    background: var(--gold); vertical-align: middle; animation: rc-pulse 1s ease-in-out infinite alternate; }
@keyframes rc-pulse { from { opacity: .25; } to { opacity: 1; } }

/* "Your table is ready" fallback banner (App.razor's kottTableReady.notify): always shown alongside the
   native Notification/beep, since Notification isn't available at all in some mobile browsers. */
#kott-table-ready-banner {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-120%);
    z-index: 1200; max-width: 92vw;
    background: var(--accent); color: var(--accent-ink); border: 1px solid var(--edge); border-radius: 0 0 10px 10px;
    padding: .9rem 1.2rem; font-size: 1.35rem; line-height: 1.25; font-weight: 800; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.3);
    transition: transform .25s ease-out;
}
#kott-table-ready-banner.show { transform: translateX(-50%) translateY(0); }

.scroll-x { overflow-x: auto; }
table.grid.compact { width: auto; margin: 0 auto; }
table.grid.compact th, table.grid.compact td { text-align: center; padding: .3rem .55rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grid.compact td:nth-child(2) { color: var(--gold); font-weight: 700; }   /* player names in gold */

/* Sign-in, read-only notice, per-table undo */
header.site .auth { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; }   /* two sizes up from .9rem */
header.site .auth a, header.site .auth .link, header.site .nav-menu summary { color: inherit; font-weight: 700; }
header.site .auth .link { font-size: inherit; }   /* .link is .85rem by default: follow the bar's size up here */
header.site.phone-mode { justify-content: flex-end; }   /* a player's or Marshal's phone: SOS and Exit only */
form.inline { display: inline; margin: 0; }
.notice { background: var(--warn); border: 1px solid var(--edge); border-radius: 8px; padding: .5rem .8rem; margin: .6rem 0; }
.notice .push-help { display: block; margin-top: .35rem; font-size: .9rem; }   /* iPhone: Add to Home Screen steps */
.undo-row { text-align: center; font-size: .85rem; min-height: 1.3rem; }

/* Player code, kiosk pairing, sign-in pages */
.pick { display: grid; gap: .4rem; margin: .6rem 0; }
label.radio { flex-direction: row; align-items: center; gap: .6rem; font-size: 1.05rem; color: var(--ink); padding: .35rem 0; }
/* on-screen keyboard (wwwroot/osk.js): along the bottom of the screen while a typed-code box has the focus */
.osk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--card); border-top: 2px solid var(--edge); padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: .4rem; box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
.osk[hidden] { display: none; }
.osk-row { display: flex; gap: .4rem; justify-content: center; }
.osk-key { flex: 1 1 0; max-width: 4.2rem; min-height: 3.1rem; font: inherit; font-size: 1.3rem; font-weight: 700; border-radius: 8px; border: 1px solid var(--edge); background: var(--field); color: var(--ink); cursor: pointer; touch-action: manipulation; user-select: none; padding: 0; }
.osk-key:active { background: var(--accent); color: var(--accent-ink); }
.osk-key.osk-wide { max-width: 7rem; font-size: 1.05rem; }
.osk-key.osk-go { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.osk-key[hidden] { display: none; }
html.osk-open body { padding-bottom: 17rem; }
input.bigcode { font-size: 1.6rem; letter-spacing: .25em; text-transform: uppercase; text-align: center; }
.kiosk-here { margin: .8rem 0; padding: .6rem .8rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--field); }
.kiosk-here h3 { margin: 0 0 .3rem; }
.table-picks { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .5rem 0; }
.kiosk-tables { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.codebox { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.codebox .qr { background: #fff; padding: .6rem; border-radius: 10px; border: 1px solid var(--edge); }
.codebox .qr svg { display: block; width: 220px; height: 220px; }
.codebox .codeinfo { flex: 1; min-width: 240px; }
.bigcodeshow { font-size: 2.2rem; font-weight: 700; letter-spacing: .2em; font-variant-numeric: tabular-nums; color: var(--gold); }
code { background: var(--field); padding: .05rem .3rem; border-radius: 4px; }

.theme-pick select { padding: .35rem .5rem; }

/* A player signed in with the player code: where they are right now (Play page) */
/* Big on purpose: read at arm's length by players without their reading glasses. Their name on a band across the top,
   then the message; "You are ..." in small print underneath (.you-are). */
.my-place { font-size: 1.6rem; line-height: 1.25; font-weight: 800; text-align: center; padding: 0 0 .8rem; margin: .7rem 0 .3rem;
            border-radius: 12px; overflow: hidden; background: var(--tile); border: 3px solid var(--accent); box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.my-place .my-name { font-size: 2rem; line-height: 1.15; padding: .45rem .7rem; margin-bottom: .6rem; overflow-wrap: anywhere;
                     background: var(--accent); color: var(--accent-ink); }
.my-place .my-text { padding: 0 .8rem; }
.my-place.next, .my-place.playing { border-color: var(--gold); }
.my-place.next .my-name, .my-place.playing .my-name { background: var(--gold); color: var(--primary-ink); }
.my-place.next .my-text { color: var(--gold); }
.my-place.out { color: var(--muted); }
.you-are { text-align: center; font-size: .9rem; color: var(--muted); margin: 0 0 .7rem; }
/* a Marshal's phone says so on a bar under the site's title bar */
.marshal-bar { background: var(--gold); color: var(--primary-ink); font-weight: 800; font-size: 1.3rem; letter-spacing: .12em; text-transform: uppercase;
               text-align: center; padding: .35rem .6rem; border-radius: 8px; margin: 0 0 .6rem; }
/* players' and Marshals' phones: the tournament's details at the bottom of the page */
.play-details-bottom { margin-top: 1.2rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.play-details-bottom .marshal-line { margin: 0 0 .6rem; }
/* a player's phone: the tables they aren't playing at (and can't record at) are greyed out */
.table-card.not-mine { opacity: .5; filter: grayscale(1); }
/* players' and Marshals' phones: the messages after a tap, and a Marshal's Late Players bar, big too */
.toasts.big .toast { font-size: 1.35rem; line-height: 1.25; font-weight: 700; padding: .9rem 1rem; border-width: 2px; }
.late-alarm { background: #c8102e; color: #fff; font-size: 1.5rem; line-height: 1.25; font-weight: 800; text-align: center;
              padding: .7rem .8rem; border-radius: 12px; margin: .6rem 0; box-shadow: 0 3px 12px rgba(0,0,0,.35); animation: late-pulse .9s ease-in-out infinite alternate; }
.late-alarm-head { font-size: 1.9rem; text-transform: uppercase; letter-spacing: .06em; }
@keyframes late-pulse { from { opacity: .72; } to { opacity: 1; } }
.late-bar.big h2 { font-size: 1.3rem; }
.late-bar.big .call-strip { font-size: 1.2rem; }
.late-bar.big .call-strip .call-acts .btn, .late-bar.big .late-all .btn { font-size: 1.05rem; padding: .4rem .8rem; }

/* Settings: shared/private tag on the selected venue, active standard tables */
.row > .venue-kind { display: inline-flex; align-items: center; justify-content: center; align-self: stretch;   /* same height as the box and button beside it, text centered */
                     font-size: .85rem; line-height: 1; padding: 0 .75rem; white-space: nowrap; }
.settings-list li.inactive .list-input { opacity: .55; }
label.active-toggle { flex-direction: row; align-items: center; gap: .3rem; font-size: .8rem; white-space: nowrap; }
.email-add { display: flex; gap: .5rem; flex-wrap: wrap; }
.email-add input { flex: 1; min-width: 14rem; }

/* Export and Player Stats pages */
.export-plan li { margin: .25rem 0; }
.export-buttons { margin-top: .6rem; }
.stats-name { margin: .8rem 0 .4rem; }
.stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: .6rem 0; }
@media (min-width: 560px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.stat-tile { background: var(--tile); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .5rem; text-align: center; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.stat-label { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.form-row { display: flex; gap: .3rem; flex-wrap: wrap; }
.form-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 6px; font-weight: 700; }
.form-badge.w { background: var(--accent); color: var(--accent-ink); }
.form-badge.l { background: var(--field); color: var(--muted); border: 1px solid var(--edge); }

/* Setup: the starting order */
.start-order { padding-left: 0; margin: .4rem 0; }
.start-order li { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
.start-order li.seated .so-name { color: var(--gold); font-weight: 700; }
.so-num { min-width: 1.8rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.so-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-seat { white-space: nowrap; }

/* Drag and drop (waiting list, starting order) */
[data-drag-handle] { cursor: grab; touch-action: none; user-select: none; color: var(--muted); font-size: 1.1rem; line-height: 1;
                     padding: .2rem .35rem; letter-spacing: -.15em; }
[data-drag-id] { transition: transform .12s ease; }
[data-drag-id].dragging { transition: none; position: relative; z-index: 5; background: var(--tile); box-shadow: 0 4px 14px rgba(0,0,0,.35); opacity: .95; }
[data-drag-id].dragging [data-drag-handle] { cursor: grabbing; }
td.drag-cell { width: 1.6rem; padding-right: 0; }

/* Play page: table sort switch, end time */
.sort-switch { display: inline-flex; gap: .25rem; align-items: center; font-size: .85rem; }
.sort-switch .btn { padding: .2rem .6rem; font-size: .85rem; }
.sort-switch .btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.end-time { white-space: nowrap; }
.end-time.due { color: var(--gold); font-weight: 700; }
.table-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: .6rem; }
.delete-zone { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .8rem; }
.delete-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.2rem; letter-spacing: .2em; color: var(--gold); }

/* Arranging table tiles by dragging (Play page) */
.tables[data-drag-grid] .table-card.drop-target { outline: 3px dashed var(--gold); outline-offset: 2px; }
.table-head [data-drag-handle] { margin-right: .3rem; }
.setup-tables li { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; }

/* table tile extras (signed-in accounts only) */
.rating-table input.narrow { width: 5.5rem; }
.rating-table tr.choices td { background: var(--field); }
.choice-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; align-items: center; }
.choice-list .btn { font-size: .8rem; padding: .25rem .5rem; }
input.pm-link { min-width: 11rem; }
.table-card .odds { font-size: .8rem; color: var(--muted); text-align: center; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.table-card .odds .crown { color: var(--king); }

/* Play page: retired tables under the ones in play */
.retired-tables { margin-top: .8rem; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.retired-tables h3 { margin: 0 0 .4rem; font-size: 1rem; }
.retired-list li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .25rem 0; }
.retired-label { font-weight: 700; min-width: 5rem; }
.player .rating { font-size: .75rem; font-weight: 600; color: var(--muted); margin-left: .35rem; font-variant-numeric: tabular-nums; }

/* player names that link to their stats (standings) */
a.name-link { color: inherit; text-decoration: none; }
a.name-link:hover { text-decoration: underline; }

/* ratings wordmark (text badge) */
.rated-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.rated-head h2 { margin: 0; }
.rated-badge { display: inline-block; font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; color: #fff;
               background: linear-gradient(135deg, #0b4f8a, #1b7fd1); border-radius: 6px; padding: .2rem .55rem; line-height: 1.2; }
.rated-badge sup, .rated-mark sup { font-size: .6em; vertical-align: super; line-height: 0; margin-left: .05em; }
.rated-mark { font-weight: 700; white-space: nowrap; }
/* checkbox beside one line of text (labels are stacked columns by default); on the New Tournament form it takes a whole row */
label.rated-option { flex-direction: row; align-items: center; gap: .5rem; font-size: .95rem; color: var(--ink); }
label.rated-option input[type=checkbox] { flex: none; width: auto; margin: 0; }
.form-grid > label.rated-option { grid-column: 1 / -1; }

/* name suggestions under the Setup page's Paste Names box (kottNameList in App.razor) */
ul.name-ac { position: absolute; z-index: 1000; margin: 0; padding: 4px 0; list-style: none; max-height: 16rem; overflow-y: auto;
  background: var(--field); color: var(--ink); border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
ul.name-ac li { padding: 6px 10px; cursor: pointer; }
ul.name-ac li.sel, ul.name-ac li:hover { background: var(--accent); color: var(--accent-ink); }

/* Help: "?" buttons beside headings (HelpTip), the SOS button (SosButton), their pop-ups and the /help pages */
.help-tip { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin-left: .4rem;
  border-radius: 50%; border: 1px solid var(--edge); background: var(--field); color: var(--link); font: 700 .8rem/1 inherit;
  cursor: pointer; vertical-align: middle; padding: 0; }
.help-tip:hover, .help-tip:focus-visible { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* the SOS button wears the header's own colors (the ink of the links beside it on the header's color), not an alarm red;
   the accent can equal the header color in some schemes, so it isn't used here */
.sos-btn { font: 800 1.05rem/1 inherit; letter-spacing: .06em; padding: .4rem .7rem; border-radius: 6px; border: 2px solid var(--header-ink);
  background: var(--header-ink); color: var(--header) !important; cursor: pointer; text-decoration: none; }
.sos-btn:hover, .sos-btn:focus-visible { background: var(--header); color: var(--header-ink) !important; }
.help-modal { font-size: 1rem; font-weight: 400; text-align: left; line-height: 1.45; }
.help-modal h2 { margin: .1rem 0 0; }
.help-body ul, .help-body ol { padding-left: 1.3rem; margin: .4rem 0; }
.help-body li { margin: .25rem 0; }
.help-body p { margin: .45rem 0; }
.help-body img.journey { display: block; margin: 0 auto; max-width: 100%; height: auto; background: #fff; border-radius: 8px; border: 1px solid var(--edge); }
.help-body h4 { margin: .8rem 0 .2rem; font-size: .95rem; }
b.ui { background: var(--field); border: 1px solid var(--edge); border-radius: 5px; padding: 0 .3rem; white-space: nowrap; font-weight: 600; }
.help-more { margin-top: 1rem; font-size: .9rem; }
.sos-tag { color: #fff; background: #c62828; display: inline-block; font-weight: 800; font-size: .75rem; letter-spacing: .06em; padding: .1rem .45rem; border-radius: 4px; }
.sos-fill { background: var(--field); border: 1px solid var(--edge); border-radius: 8px; padding: .3rem .8rem; margin: .6rem 0; }
.sos-items { display: grid; gap: .35rem; }
details.sos-item { border: 1px solid var(--edge); border-radius: 8px; background: var(--field); }
details.sos-item summary { cursor: pointer; padding: .55rem .75rem; font-weight: 600; }
details.sos-item[open] summary { border-bottom: 1px solid var(--edge); }
details.sos-item .help-body { padding: .2rem .8rem .5rem; }
.help-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
a.help-card { color: inherit; text-decoration: none; margin: 0; }
a.help-card:hover { border-color: var(--accent); }
a.help-card.sos { border: 2px solid #c62828; }
a.help-card p { color: var(--muted); margin: 0; }
.help-toc ul { columns: 2 14rem; margin: 0; padding-left: 1.2rem; }
.help-section { scroll-margin-top: 1rem; }
.help-table { width: 100%; }
table.grid.help-table td, table.grid.help-table th { vertical-align: top; text-align: left; white-space: normal; }
table.grid.help-table { font-size: .9rem; }
/* phones: no All Tournaments button (the MOOTT name in the title bar goes there; players' and Marshals' phones and kiosks
   leave it out in the page itself) */
@media (max-width: 600px) { .all-tourneys { display: none; } }
/* phones: the brand keeps MOOTT (the full name is on the tab and the help pages), the links wrap instead of squeezing it */
@media (max-width: 600px) {
  header.site .brand small { display: none; }
  header.site .auth { flex-wrap: wrap; justify-content: flex-end; row-gap: .35rem; }
}
/* phones, Play page: the tournament's buttons as one even block - two equal columns across the width (no ragged rows),
   wide controls (Color Scheme, Scorekeeper) on a row of their own */
@media (max-width: 600px) {
  .play-top { display: block; }
  .play-top .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .6rem; }
  .play-top .actions > .btn, .play-top .actions > .more-wrap > .btn { width: 100%; text-align: center; box-sizing: border-box; }
  .play-top .more-wrap { grid-column: 1 / -1; }
  .play-top .more-menu { position: static; margin-top: .4rem; box-shadow: none; }
  .play-top .actions > label.who { grid-column: 1 / -1; }
  .play-top .actions > label.who input, .play-top .actions > label.who select { width: 100%; box-sizing: border-box; }
}
/* phones, Play page Players card (and its Left list): one player per row - name on the left, chips and Leave
   (Undo Leave, Mulligan) lined up on the right, a faint line between rows */
@media (max-width: 600px) {
  ul.roster, ul.roster-gone { columns: 1; }
  ul.roster li, ul.roster-gone li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--edge); break-inside: avoid; }
  ul.roster li:last-child, ul.roster-gone li:last-child { border-bottom: 0; }
  ul.roster .player-name, ul.roster-gone .player-name { flex: 1; min-width: 0; margin-right: 0; overflow-wrap: anywhere; }
  ul.roster .chips-field { margin-left: 0; flex: none; }
  ul.roster li > .link, ul.roster li > .minus-btn, ul.roster-gone li > .link { flex: none; padding: .25rem .1rem; }
}
/* phones, Play page Add / Return a Player: the list, the name box and the button one under the other, full width */
@media (max-width: 600px) {
  .add-player { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .add-player > select, .add-player > input, .add-player > .btn { width: 100%; box-sizing: border-box; }
}
/* Administrators page: Accounts Report pop-up (wider than the other pop-ups: two tables) */
.modal.accounts-report { width: min(1000px, 96vw); }
.modal.accounts-report h3 { margin-top: 1.2rem; }
.modal.accounts-report .btn { margin-top: .5rem; }
table.grid.report-table td, table.grid.report-table th { text-align: left; }

/* Table tiles side by side (screens wider than a phone, kiosks too): each tile grows to fill the row, up to 60% bigger
   than its smallest (230px -> 368px wide) - text and buttons grow with it - and the row is centered when there's
   room left over. --u is 1px at the smallest tile and up to 1.6px at the biggest (the tile's own width, via cqi). */
@media (min-width: 601px) {
  .tables .table-card { container-type: inline-size; --u: clamp(1px, 100cqi / 209, 1.6px); }
  .tables .table-card > * { font-size: calc(16 * var(--u)); }
  .tables .table-card .player { font-size: calc(17.6 * var(--u)); padding: calc(10.4 * var(--u)) calc(9.6 * var(--u)); }
  .tables .table-card > .vs, .tables .table-card > .hint,
  .tables .table-card .clock, .tables .table-card .player .rating { font-size: calc(12 * var(--u)); }
  .tables .table-card > .odds { font-size: calc(12.8 * var(--u)); }
  .tables .table-card .chip { font-size: calc(11.2 * var(--u)); }
  .tables .table-card > .undo-row, .tables .table-card > .undo-row .link { font-size: calc(13.6 * var(--u)); }
  .tables .table-card > .tile-menu, .tables .table-card > .tile-menu .link { font-size: calc(13.6 * var(--u)); }
}

/* Play page Players and Game Log cards: the content centered in its card, each list still lined up on its own left
   edge (phones keep the one-player-per-row layout above) */
@media (min-width: 601px) {
  .players-card ul.roster, .players-card ul.roster-gone { columns: auto; display: grid; grid-template-columns: repeat(2, max-content);
    justify-content: center; column-gap: 3rem; row-gap: .15rem; }
  .players-card h3 { text-align: center; }
}
.gamelog-card table.grid { width: auto; margin: 0 auto; }

.paid-at-add { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .4rem; }
.paid-by { font-size: .7rem; margin-left: .3rem; opacity: .75; }

/* The Players card's table (with the Paid checkbox): the same table, in inverted grays so it looks different from the others */
table.grid.inverted { width: auto; margin: 0 auto; background: var(--inv-bg); color: var(--inv-ink); border-radius: 8px; overflow: hidden; color-scheme: var(--inv-scheme); }
table.grid.inverted th { background: var(--inv-head); color: var(--inv-ink); border-bottom: 1px solid var(--inv-line); }
table.grid.inverted td { background: var(--inv-bg); color: var(--inv-ink); border-bottom: 1px solid var(--inv-line); }
table.grid.inverted tr:last-child td { border-bottom: 0; }
table.grid.inverted td:first-child { border-left: 0; }
table.grid.inverted .player-name { font-size: 1.05rem; }
table.grid.inverted .chip { color: var(--inv-ink); }
table.grid.inverted input[type=number] { background: var(--inv-bg); color: var(--inv-ink); border-color: var(--inv-line); }
table.grid.inverted .pclock { color: var(--inv-time); border-color: var(--inv-time); font-size: .8em; }   /* darker than the muted text the other tables use */
table.grid.inverted .pclock.out { color: #fff; background: var(--inv-out); border-color: var(--inv-out); }
.oot { color: var(--danger); font-weight: 700; }   /* "(out of time)" in the Left list, on the card's own background */
table.grid.inverted .paid-cell { text-align: left; min-width: 11rem; vertical-align: top; }
table.grid.inverted .paid-log { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .78rem; line-height: 1.35; }
table.grid.inverted .paid-log li { white-space: nowrap; }
table.grid.inverted .muted { color: var(--inv-time); }
table.grid.inverted.expanded td { vertical-align: top; }
.players-expand { float: right; font-size: .8rem; padding: .15rem .6rem; }
table.grid.inverted .paid-box { width: 1.3rem; height: 1.3rem; accent-color: var(--inv-ink); cursor: pointer; vertical-align: middle; border: 1px solid var(--inv-line); }
@media (max-width: 600px) { table.grid.inverted { width: 100%; } }

/* tournament timing (schema v28): the wall clock countdown and each player's time on the player clock */
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold); }
.countdown.due { color: var(--danger); }
.pclock { display: inline-block; margin-left: .35rem; font-size: .75em; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted); border: 1px solid var(--edge); border-radius: 6px; padding: 0 .3rem; vertical-align: middle; }
.pclock.out { color: var(--danger); border-color: var(--danger); }
.my-clock { display: block; font-size: 1.25rem; margin-top: .3rem; padding: 0 .8rem; }
.my-clock .pclock { font-size: 1em; }

/* Setup: returning players - a dropdown that opens to a checkbox list (tick any number, Add Selected) */
details.returning { margin-top: .8rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--field); }
details.returning > summary { cursor: pointer; padding: .55rem .75rem; font-weight: 600; }
details.returning[open] > summary { border-bottom: 1px solid var(--edge); }
.returning-panel { padding: .6rem .75rem; display: grid; gap: .5rem; }
.returning-filter { width: 100%; }
.returning-list { max-height: 16rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .15rem .8rem; }
label.returning-item { flex-direction: row; align-items: center; gap: .45rem; font-size: 1rem; color: var(--ink); padding: .2rem 0; cursor: pointer; }
label.returning-item input { width: auto; flex: none; margin: 0; }

/* Play / Setup: the Color Scheme dropdown (and the Scorekeeper box) as tall as the buttons beside them; the label sits above */
.actions .theme-pick select, .actions label.who > input { height: calc(1.45rem + 1rem + 2px); padding-top: 0; padding-bottom: 0; font-size: 1rem; }

/* Play page, deconfused (2026-10-03): the pieces in Components/PlayView */
/* header: state badge beside the name, timing on chips of its own, the extra buttons on a row under More */
.status-badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; vertical-align: middle;
  border: 1px solid var(--edge); background: var(--field); color: var(--ink); letter-spacing: .02em; }
.status-badge.s-1 { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.status-badge.s-2 { background: var(--warn); color: var(--gold); border-color: var(--gold); }
.status-badge.s-3 { background: var(--gold); color: var(--primary-ink); border-color: var(--gold); }
.play-top .sub { margin-bottom: .4rem; }
.timing-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
/* Setup: the settings summary sits to the right of Default Chips per Player (under it on a phone), a little smaller than the Play chips */
.setup-summary { align-items: flex-start; }
.setup-summary .timing-chips { flex: 1 1 18rem; margin: .2rem 0 0; }
.setup-summary .info-chip { font-size: .78rem; padding: .1rem .5rem; }
.info-chip { font-size: .85rem; padding: .15rem .6rem; border-radius: 8px; border: 1px solid var(--edge); background: var(--field); max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }   /* wraps on a phone: "Player Clock: 30 min each (10 min late arrival grace)" is longer than the screen */

/* result and error messages: float near the top of the screen; a result fades by itself after a few seconds */
.toasts { position: fixed; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 950; width: min(560px, 92vw);
  display: grid; gap: .4rem; pointer-events: none; }
.toast { pointer-events: auto; margin: 0; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.toast.fade { animation: toast-fade .5s ease 6s forwards; }
@keyframes toast-fade { to { opacity: 0; visibility: hidden; } }

/* table tiles: "tap the winner" once above them; the operator's options behind the ⋯; a short "Undo locked" that opens to say why */
.tap-hint { font-size: .85rem; }
.call-prompts-toggle { display: block; margin: .6rem auto 0; }   /* Hide/Show Call Prompts, under the tiles */
.tile-menu-btn { font: inherit; font-weight: 700; line-height: 1; padding: .1rem .45rem; border-radius: 6px; border: 1px solid var(--edge);
  background: var(--field); color: var(--muted); cursor: pointer; }
.tile-menu-btn:hover, .tile-menu-btn.on { border-color: var(--accent); color: var(--ink); }
.tile-menu { display: grid; gap: .25rem; justify-items: center; padding: .35rem; border: 1px dashed var(--edge); border-radius: 8px; font-size: .85rem; }
details.undo-locked { display: inline-block; color: var(--muted); }
details.undo-locked > summary { cursor: pointer; }
details.undo-locked[open] > summary { margin-bottom: .15rem; }

/* under the tiles: Manage Tables, folded shut until opened */
details.manage-tables { margin-top: 1rem; border: 1px dashed var(--edge); border-radius: 10px; }
details.manage-tables > summary { cursor: pointer; padding: .55rem .8rem; font-weight: 600; }
details.manage-tables[open] > summary { border-bottom: 1px dashed var(--edge); }
.manage-body { padding: .4rem .8rem .8rem; }
.manage-body .add-table { margin-top: .6rem; }
.manage-body .retired-list { margin-top: .2rem; }
.manage-help { text-align: right; }

/* Waiting List card: Add / Return a Player under the line, one control per row */
.waiting-card .add-player { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
/* the waiting list sits above the standings and folds shut like Manage Tables (comes up folded); a folded one is only its heading line */
details.waiting-fold > summary.waiting-summary, details.players-fold > summary.players-summary, details.edit-fold > summary.edit-fold-summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
details.waiting-fold[open] > summary.waiting-summary, details.players-fold[open] > summary.players-summary, details.edit-fold[open] > summary.edit-fold-summary { margin-bottom: .6rem; }
.players-tools { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-bottom: .3rem; }   /* the note, help tip and Details switch, above the table */
.players-tools .players-note { margin-right: auto; }
.players-tools .players-expand { float: none; }
.waiting-body .manage-help { margin-bottom: .4rem; }
details.gamelog-fold > summary.gamelog-summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
details.fargo-fold { margin: 1rem 0; }
details.fargo-fold > summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--ink); padding: .4rem 0; }
details.fargo-fold[open] > summary { margin-bottom: .6rem; }
details.gamelog-fold[open] > summary.gamelog-summary { margin-bottom: .6rem; }
.gamelog-fold .manage-help { margin-bottom: .4rem; }
.card-more { text-align: center; margin: .6rem 0 0; }
td.fix-cell { white-space: nowrap; }/* a player button keeps its own height when the tile beside it is taller (it only grows sideways); undo sits at the bottom */
.table-card > .player { flex: none; }
.table-card > .undo-row { margin-top: auto; }

/* Marshals (schema v29): who runs the tournament tonight - under the name on Play, big on the Standings screen */
.marshal-line { font-size: .9rem; color: var(--gold); font-weight: 600; margin: -.4rem 0 .6rem; }
.marshal-line.big { font-size: 1.25rem; margin: .1rem 0 .8rem; }
.marshal-add { max-width: 36rem; }
.marshal-code { margin: .8rem 0; padding: .8rem; border: 1px dashed var(--gold); border-radius: 10px; }
.marshal-notice { border-left: 5px solid var(--gold); }

/* the call timer on a table (schema v30, CallStrip): calling -> amber warning -> red late; They're Here from the call, Skip / Bump once late */
.call-strip { display: flex; justify-content: center; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.2rem; line-height: 1.25;
  padding: .35rem .6rem; border-radius: 8px; border: 2px solid var(--accent); color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }   /* "Calling Sam": bright and big from the first second */
.call-strip.warning { color: var(--gold); border-color: var(--gold); background: var(--warn); font-weight: 700; }
.call-strip.late { color: var(--danger); border-color: var(--danger); font-weight: 700; }
@media (min-width: 601px) { .tables:not(.kiosk) .table-card > .call-strip { font-size: calc(17.6 * var(--u)); } }

/* late players (schema v32): the answer buttons on a late call (staff, Marshals; kiosks: They're Here only), Skip gone
   after the Skip window; the Late Players bar at the top of the Play page */
.call-strip .call-acts { display: inline-flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
/* They're Here (and a Marshal's own I'm Here) from the moment of the call; Skip, Bump and Send Home only once it's late */
.call-strip:not(.late) .call-skip, .call-strip:not(.late) .call-bump, .call-strip:not(.late) .call-home { display: none; }
.call-strip .call-acts .btn { padding: .2rem .6rem; font-size: .85rem; font-weight: 600; }
.call-strip.skip-over .call-skip { display: none; }
.call-strip .call-here { display: inline-block; }
/* They're Here inside a table box: a big, full-width button (the Late Players bar keeps its own size) */
.table-card > .call-strip { flex-direction: column; }
.table-card > .call-strip .call-acts { display: flex; width: 100%; }
.table-card > .call-strip .call-acts .btn.call-here { flex: 1 1 100%; font-size: 1.5rem; font-weight: 700; padding: .9rem 1rem;
  background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
@media (min-width: 601px) { .tables .table-card > .call-strip .call-acts .btn.call-here { font-size: calc(22 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); } }
.call-strip .call-table { color: var(--ink); }
.late-bar { background: var(--alert-bg); border: 1px solid var(--danger); border-radius: 10px; padding: .6rem .8rem; margin: .6rem 0; display: grid; gap: .4rem; }
.late-bar h2 { margin: 0; font-size: 1rem; color: var(--alert-ink); }
.late-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.late-all { display: flex; flex-wrap: wrap; gap: .4rem; }
.wait-total { margin: .5rem 0 .2rem; }
/* Player Stats, administrators' totals: subtotal rows in bold, the rows under them indented */
.stats-views { margin: 0 0 .8rem; }
.summary-table .sub-row td { font-weight: 600; border-top: 2px solid var(--edge); }
.summary-table .detail-row td:first-child { padding-left: 1.4rem; }
.summary-table .total-row td { border-top: 3px double var(--edge); }
.late-bar .call-strip { justify-content: flex-start; background: var(--card); }

/* tournament over: only one player left (Play page and the Standings screen) */
.tournament-over { text-align: center; margin: .6rem 0 1rem; padding: .9rem 1rem; border-radius: 12px; background: var(--tile);
  border: 2px solid var(--gold); display: grid; gap: .25rem; }
.tournament-over .over-title { font-size: 1.6rem; font-weight: 800; color: var(--gold); }
.add-closed { margin: .2rem 0 .5rem; }

/* standings groups (schema v34): a heading per group, and the Group column for administrators and venue managers */
.group-head { margin: 1rem 0 .4rem; font-size: 1.1rem; color: var(--gold); }
.groups-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .4rem 0 .6rem; }
.group-pick { padding: .15rem .35rem; }
.group-pick.changed { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.card-rule { text-align: center; margin: .5rem 0 0; }

/* Layout (2026-10-03): a little more room on wide screens; table tiles in centred rows of two, three from 980px */
main { max-width: 1200px; }
@media (min-width: 601px) {
  .tables:not(.kiosk) { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
  .tables:not(.kiosk) .table-card { max-width: 368px; min-width: 0; }
  /* kiosks: three across, each tile up to 60% bigger than its smallest (the scaling above) when the screen has the room,
     and the whole group centred sideways and up and down in the space under the header */
  .tables.kiosk { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .6rem; min-height: calc(100vh - 11rem); min-height: calc(100dvh - 11rem); }
  .tables.kiosk .table-card { flex: 0 0 min(368px, calc((100% - 1.2rem) / 3)); max-width: 368px; min-width: 0; }
}

/* centred section titles: Tables (sort switch on the right, the tap hint on its own line), Players, Game Log */
.tables-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .3rem .6rem; margin: 1.1rem 0 .6rem; }   /* room under the top button row */
.tables-head > h2 { grid-column: 2; grid-row: 1; margin: 0; text-align: center; font-size: 1.75rem; }   /* two sizes up from 1.35rem */
.tables-head > .all-here { grid-column: 1; grid-row: 1; justify-self: start; font-weight: 700;
  background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }   /* same colour as a table's They're Here */
.tables-head > .sort-switch { grid-column: 3; grid-row: 1; justify-self: end; }
.tables-head > .tap-hint { grid-column: 1 / -1; grid-row: 2; text-align: center; }
.players-card > h2, .gamelog-card > h2 { text-align: center; }

/* table tile header: the table's name centred, the drag handle on the left, clock and buttons on the right */
.table-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem; }
.table-head > .th-left { justify-self: start; display: flex; align-items: center; }
.table-head > .table-label { text-align: center; }
.table-head > .th-right { justify-self: end; display: flex; align-items: center; gap: .35rem; }
/* every tile the same width: two per row, three from 980px (never wider than 368px); a short last row stays centred */
@media (min-width: 601px) { .tables:not(.kiosk) .table-card { flex: 0 0 min(368px, calc((100% - .6rem) / 2)); } }
@media (min-width: 980px) { .tables:not(.kiosk) .table-card { flex: 0 0 min(368px, calc((100% - 1.2rem) / 3)); } }
/* on phones the sort switch gets a line of its own */
@media (max-width: 600px) {
  .table-head [data-drag-handle] { font-size: 1.8rem; padding: .3rem .55rem .3rem .3rem; }
  .tables-head > .sort-switch { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .tables-head > .tap-hint { grid-row: 3; }
}

/* Groups board (Standings screen, administrators and venue managers): a column per group, a chip per player; tap chips,
   then tap a column to move them; quick splits above, Update Groups below */
.groups-board .gb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.groups-board .gb-head h2 { margin: 0; }
.gb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .6rem 0; }
.gb-tools select { padding: .3rem .5rem; }
.gb-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.gb-col { border: 1px solid var(--edge); border-radius: 10px; padding: .5rem; background: var(--field); display: flex; flex-direction: column; gap: .3rem; min-height: 5rem; }
.gb-col.target { cursor: pointer; border-style: dashed; border-color: var(--gold); }
.gb-col.target:hover { background: var(--tile); }
.gb-col-head { font-weight: 700; color: var(--gold); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gb-move { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 0 .5rem; }
.gb-chip { font: inherit; text-align: left; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--edge); background: var(--tile); color: var(--ink); cursor: pointer; }
.gb-chip.changed { border-color: var(--gold); }
.gb-chip.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.gb-empty { padding: .3rem; }
.gb-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .7rem; }
.actions .btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Players' and Marshals' phones: their own table first, with very large winner buttons, and a They're Here (I'm Here)
   button that fills the width and stands out. The same call strip is used everywhere; only its size changes here. */
.tables.my-table { grid-template-columns: minmax(0, 1fr); margin-top: .6rem; }
.table-card.mine { border: 3px solid var(--gold); gap: .6rem; padding: .8rem; }
.table-card.mine .player { font-size: 1.9rem; font-weight: 700; padding: 1.4rem .8rem; border-width: 3px; }
.table-card.mine .vs { font-size: 1rem; }
.table-card.mine .call-strip { flex-direction: column; font-size: 1.5rem; padding: .6rem; }
.table-card.mine .call-strip .call-acts { display: flex; width: 100%; }
.table-card.mine .call-strip .call-acts .btn { flex: 1 1 100%; font-size: 1.4rem; padding: .6rem .8rem; }
.table-card.mine .call-strip .call-here { background: var(--primary); color: var(--primary-ink); border-color: var(--primary);
  font-size: 2.2rem; font-weight: 800; padding: 1.2rem .8rem; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
@media (min-width: 601px) {
  .tables:not(.kiosk) .table-card.mine .player { font-size: 1.9rem; padding: 1.4rem .8rem; }
  .tables:not(.kiosk) .table-card.mine > .call-strip { font-size: 1.5rem; }
}

.site-footer { text-align: center; font-size: .7rem; color: var(--muted); padding: 1rem 1rem 1.5rem; }

/* header: the less-used staff links in one drop-down */
header.site .nav-menu { position: relative; }
header.site .nav-menu summary { cursor: pointer; list-style: none; }
header.site .nav-menu summary::-webkit-details-marker { display: none; }
header.site .nav-menu summary::after { content: " \25BE"; }
header.site .nav-menu-items { position: absolute; right: 0; top: 1.6rem; z-index: 50; display: grid; gap: .1rem; min-width: 11rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--edge); border-radius: 8px; padding: .4rem; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
header.site .nav-menu-items a { color: var(--link); padding: .45rem .6rem; border-radius: 6px; white-space: nowrap; }
header.site .nav-menu-items a:hover { background: var(--field); }

/* subtitle under a tournament's name (a little indented) and the public comment at the bottom of the screens (schema v42) */
.event-subtitle { margin: -.4rem 0 .7rem 1.4rem; color: var(--muted); font-size: 1.05rem; }
.public-comment { white-space: pre-line; overflow-wrap: anywhere; margin: 1.2rem auto 0; max-width: 60rem; padding: .8rem 1rem;
                  background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: .95rem; text-align: left; }

/* Templates and Demos: room between the explanation and the buttons under it, and between those and the tiles */
.template-actions { margin: .9rem 0 1rem; }

/* a minus beside a player's name button (and a table's name) retires them; the active demos list; the read-only demo bar */
.seat-row { display: flex; gap: .35rem; align-items: stretch; }
.seat-row > .player { min-width: 0; }
.minus-btn { font: inherit; font-weight: 800; font-size: 1.5rem; line-height: .8; min-width: 2.3rem; padding: .3rem .65rem; border-radius: 8px; border: 2px solid #7f1414;
  background: #c62828; color: #fff; cursor: pointer; flex: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }   /* a solid red button with a bold white minus, in every scheme */
.minus-btn:hover:not(:disabled) { background: #de3a3a; }
.minus-btn:active:not(:disabled) { background: #a61f1f; transform: translateY(1px); }
.minus-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #c62828; }
.minus-btn:disabled { opacity: .5; cursor: default; }
.minus-btn.on { background: #8e1b1b; border-color: #fff; }
.seat-row > .minus-btn { font-size: 1.4rem; padding: 0 .7rem; }
.readonly-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin: .4rem 0 .8rem;
  padding: .5rem .8rem; border: 2px solid var(--gold); border-radius: 10px; background: var(--tile); font-weight: 600; }

/* ---- Staff full-screen control view (Play page > Control Screen): the header and the buttons at the top are out of the way, a slim bar
   keeps Pause / Resume, Lists and Exit, and the table tiles are scaled up on wide screens to fill it in 1-3 rows (two up to ten tables,
   three beyond), scrolling for more. On a narrow screen the same grid just has fewer columns. ---- */
body:has(.ctrl-fs-on) header.site { display: none; }
body:has(.ctrl-fs-on) main { max-width: none; padding: .4rem .7rem; }
.ctrl-bar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .35rem .6rem;
  margin: 0 0 .5rem; background: var(--header); color: var(--header-ink); border-radius: 8px; }
.ctrl-bar .ctrl-name { font-size: 1.1rem; margin-right: auto; overflow-wrap: anywhere; }
.ctrl-bar .ctrl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ctrl-bar .countdown { color: inherit; }
body:has(.ctrl-fs-on) .tables-head > h2 { display: none; }
body:has(.ctrl-fs-on) .tables-head { grid-template-columns: auto minmax(0, 1fr) auto; }
body:has(.ctrl-fs-on) .tables-head > .sort-switch { display: none; }   /* the Control Screen has its own in the bar above */
body:has(.ctrl-fs-on) .tables-head > .tap-hint { display: none; }
.tables.ctrl-grid:not(.kiosk) {
  display: grid; justify-content: stretch; align-content: start; gap: .6rem;
  /* --cols columns when the screen has the room (each at least 100%/--cols; auto-fill keeps the empty columns, so a few tables stay tile-sized instead of stretching), otherwise as many 230px columns as fit */
  grid-template-columns: repeat(auto-fill, minmax(max(230px, calc(100% / var(--cols, 3) - .6rem)), 1fr));
  max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; padding-bottom: .4rem;
}
.tables.ctrl-grid:not(.kiosk) .table-card { flex: none; max-width: none; width: auto; }
/* a wide landscape screen (a computer at full HD): tiles may be as narrow as 200px so 8 across by 4 rows fits (Data/ControlGrid.cs). Below this width, a tablet
   upright or on its side keeps the 230px floor, so its layout is exactly what it was. */
@media (min-width: 1500px) and (orientation: landscape) {   /* upright (a big tablet standing up) keeps the 230px floor: at most 6 across, see kottFitTables in App.razor */
  .tables.ctrl-grid:not(.kiosk) { grid-template-columns: repeat(auto-fill, minmax(max(200px, calc(100% / var(--cols, 3) - .6rem)), 1fr)); }
}
@media (min-width: 601px) { .tables.ctrl-grid:not(.kiosk) .table-card { --u: clamp(1px, 100cqi / 209, 2.6px); } }
@media (max-width: 600px) {
  .ctrl-bar { padding: .3rem .4rem; }
  .ctrl-bar .ctrl-acts .btn { padding: .35rem .55rem; }
  .tables.ctrl-grid:not(.kiosk) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; max-height: calc(100dvh - 6.5rem); }
}

/* Setup: players, tables and the starting order as plain text rows that fit a phone - the name takes the width and the small
   buttons sit at the right edge; nothing runs off the screen */
.setup-label { overflow-wrap: anywhere; min-width: 0; }
.setup-roster li > .link, .setup-tables li > .link { margin-left: .5rem; }
@media (max-width: 600px) {
  ul.setup-roster { columns: 1; }
  ul.setup-roster li { display: flex; align-items: center; gap: .3rem; padding: .35rem 0; border-bottom: 1px solid var(--edge); break-inside: avoid; }
  ul.setup-roster li:last-child { border-bottom: 0; }
  ul.setup-roster .setup-label { flex: 1; }
  ul.setup-roster li > .link, ul.setup-roster li > input { flex: none; margin-left: 0; }
  ul.setup-roster li > .link { padding: .25rem .2rem; }
  .setup-tables li { gap: .3rem; padding: .3rem 0; border-bottom: 1px solid var(--edge); }
  .setup-tables li:last-child { border-bottom: 0; }
  .setup-tables .setup-label { flex: 1; }
  .setup-tables li > .link { flex: none; margin-left: 0; padding: .25rem .2rem; }
  /* starting order: the seat text drops under the name instead of squeezing it */
  .start-order li { flex-wrap: wrap; row-gap: 0; gap: .35rem; padding: .3rem 0; }
  .start-order .so-name { flex: 1 1 8rem; white-space: normal; overflow-wrap: anywhere; }
  .start-order .so-seat { order: 5; flex: 1 0 100%; padding-left: 2.2rem; white-space: normal; }
}

/* Waiting list on a phone: a tighter table that never widens the page */
@media (max-width: 600px) {
  table.grid.compact.queue th, table.grid.compact.queue td { padding-left: .25rem; padding-right: .25rem; }
  table.grid.compact.queue td:nth-child(2), table.grid.compact.queue td:nth-child(3) { overflow-wrap: anywhere; }
}

/* Tables that turn into stacked cards on a phone (Active Demos): each row becomes a card, the first cell its title,
   the other cells "label: value" lines, the buttons along the bottom */
@media (max-width: 600px) {
  table.grid.stack, table.grid.stack tbody, table.grid.stack tr, table.grid.stack td { display: block; width: 100%; box-sizing: border-box; }
  table.grid.stack thead { display: none; }
  table.grid.stack tr { margin: 0 0 .6rem; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; background: var(--row); }
  table.grid.stack td { border-bottom: 0; background: transparent; padding: .25rem .6rem; }
  table.grid.stack td.stack-title { font-weight: 700; padding-top: .5rem; overflow-wrap: anywhere; }
  table.grid.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .85rem; }
  table.grid.stack td.stack-actions { white-space: normal; padding-bottom: .55rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
  table.grid.stack tr td:first-child { border-left: 0; }
}
.your-demo { border-left: 4px solid var(--gold); }

/* A button that sits straight under (or straight above) a paragraph, list, table, box or text field in a card used to touch it:
   give it a little air. Buttons in a .row / .actions line are left alone (they sit side by side). */
:is(.card, .codeinfo, .manage-body) > :is(p, label, ul, ol, table, h3, details, textarea, div:not(.row, .actions, .tile-actions, .table-actions, .scroll)) + :is(button.btn, a.btn) { margin-top: .6rem; }
:is(.card, .codeinfo, .manage-body) > :is(button.btn, a.btn) + :is(p, label, ul, ol, table, h3, details, div:not(.row, .actions, .tile-actions, .table-actions)) { margin-top: .6rem; }

/* The Players card (chips / Paid) on a phone: not a table that runs off the side, but one compact row per player - the name takes the
   width, then the small labelled values (Start / Left chips, the Paid box) and the minus. Expanded, the Paid history drops under the row. */
@media (max-width: 600px) {
  .players-card { overflow-x: hidden; }
  table.roster-table, table.roster-table tbody, table.roster-table tr, table.roster-table td { display: block; box-sizing: border-box; }
  table.roster-table { width: 100%; max-width: 100%; }
  table.roster-table thead { display: none; }
  table.roster-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .8rem; padding: .35rem .6rem; border-bottom: 1px solid var(--inv-line, var(--edge)); }
  table.roster-table tr:last-child { border-bottom: 0; }
  table.roster-table td, table.grid.inverted.roster-table td { padding: 0; border: 0; background: transparent; width: auto; text-align: left; }
  table.roster-table td.player-name { flex: 1 1 7rem; min-width: 0; overflow-wrap: anywhere; }
  table.roster-table td[data-label]::before { content: attr(data-label) " "; font-size: .72rem; opacity: .75; }
  table.roster-table td.num { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
  table.roster-table input.narrow { width: 3.4rem; }
  table.roster-table td.paid-cell { flex: 1 1 100%; min-width: 0; }
  table.roster-table td.paid-cell .paid-log li { white-space: normal; }
  table.roster-table td.roster-minus { margin-left: auto; }
}

/* Control Screen, wide: one or two tables sit in the middle at the same size three across would give them */
@media (min-width: 900px) {
  .tables.ctrl-grid.ctrl-few:not(.kiosk) { display: flex; flex-wrap: wrap; justify-content: center; }
  .tables.ctrl-grid.ctrl-few:not(.kiosk) .table-card { width: calc(100% / var(--cols, 3) - .6rem); min-width: 230px; }
}

/* Setup: the Returning Players picker and the table list as tight, centered, table-like blocks that fit a phone: bordered, hairline rows,
   names in as many columns as fit (two on a phone), the panel and its buttons centered */
details.returning { max-width: 46rem; margin-left: auto; margin-right: auto; overflow: hidden; }
details.returning > summary { text-align: center; padding: .4rem .6rem; }
.returning-panel { padding: .4rem .5rem .5rem; gap: .35rem; justify-items: center; }
.returning-panel > p, .returning-panel > .row { text-align: center; justify-content: center; margin: 0; }
.returning-filter { max-width: 22rem; }
.returning-list { width: 100%; gap: 0 .6rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); max-height: 14rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--card, var(--field)); padding: 0 .5rem; }
label.returning-item { padding: .2rem 0; font-size: .95rem; border-bottom: 1px solid var(--edge); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .returning-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .5rem; padding: 0 .4rem; }
  label.returning-item { font-size: .9rem; gap: .35rem; }
}
ul.setup-tables { max-width: 26rem; margin: .4rem auto; padding: 0 .6rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--card, var(--field)); }
ul.setup-tables li { padding: .2rem 0; gap: .4rem; border-bottom: 1px solid var(--edge); }
ul.setup-tables li:last-child { border-bottom: 0; }
ul.setup-tables .setup-label { flex: 1; }
ul.setup-tables li > .link { flex: none; margin-left: 0; padding: .15rem .25rem; }
h3 + ul.setup-tables { margin-top: .2rem; }

/* Setup: the selected players (and the set-aside ones) in the same tight, centered, table-like block as the tables: bordered, hairline rows,
   one column, same width as the table list */
ul.setup-roster { display: grid; grid-template-columns: minmax(0, 1fr); columns: auto; gap: 0; max-width: 26rem; margin: .4rem auto; padding: 0 .6rem;
  border: 1px solid var(--edge); border-radius: 8px; background: var(--card, var(--field)); }
ul.setup-roster li { display: flex; align-items: center; gap: .3rem; padding: .2rem 0; border-bottom: 1px solid var(--edge); break-inside: avoid; min-width: 0; }
ul.setup-roster .setup-label { flex: 1; }
ul.setup-roster li > .link, ul.setup-roster li > input { flex: none; margin-left: 0; }
ul.setup-roster li > .link { padding: .15rem .25rem; }
h3 + ul.setup-roster { margin-top: .2rem; }
/* Deactivate over Remove, so the name keeps the width */
ul.setup-roster .setup-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
ul.setup-roster .setup-actions > .link { margin-left: 0; padding: .1rem .25rem; line-height: 1.2; }
ul.setup-roster li:last-child { border-bottom: 0; }

/* a demo visitor's Exit prompt in the header: the choices wrap instead of squeezing the page */
.leave-demo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }

/* ==========================================================================
   Schema v54: the pool-hall background, the welcome (hero) for visitors who are not signed in, messages,
   and the Upcoming Tournaments page.
   ========================================================================== */

/* The pool-hall night behind every screen: warm pools of light from hanging lamps, a dark vignette, and the faint outline of
   balls and a cue on the felt. It is one fixed layer behind the page (no height added, nothing to scroll), over whatever
   --bg the colour scheme sets, so every scheme keeps its own colour. Panels (.card, tiles) stay solid, so text never sits on it. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--hall, 1);
  background:
    radial-gradient(ellipse 34% 26% at 16% 0%, rgba(255, 213, 140, .17), transparent 72%),
    radial-gradient(ellipse 34% 26% at 50% 0%, rgba(255, 213, 140, .17), transparent 72%),
    radial-gradient(ellipse 34% 26% at 84% 0%, rgba(255, 213, 140, .17), transparent 72%),
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(0, 0, 0, .55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='2'%3E%3Ccircle cx='60' cy='70' r='22'/%3E%3Ccircle cx='60' cy='70' r='9'/%3E%3Ccircle cx='250' cy='150' r='22'/%3E%3Ccircle cx='250' cy='150' r='9'/%3E%3Ccircle cx='140' cy='290' r='22'/%3E%3Ccircle cx='140' cy='290' r='9'/%3E%3Cpath d='M300 20 L352 72' stroke-linecap='round' stroke-width='5'/%3E%3Cpath d='M20 330 L90 262' stroke-linecap='round' stroke-width='5'/%3E%3C/svg%3E");
}
:root[data-theme="classic"] { --hall: .5; }
@media print { body::before { display: none; } }

/* messages: a line or two at the top of the Tournaments page */
.modal.messages-dialog { width: min(640px, 94vw); }
.message-list { padding: 0; margin: 0; }
.message-list li { padding: .5rem 0; border-top: 1px solid var(--edge); }
.message-list .message-text { font-weight: 600; overflow-wrap: anywhere; }
.message-list .message-off .message-text { opacity: .55; text-decoration: line-through; }

/* the welcome: promise and buttons on the left, a picture on the right (stacked on a phone) */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; margin: 1rem 0; padding: 1.2rem 1.3rem;
        background: linear-gradient(135deg, var(--card), var(--tile)); border: 1px solid var(--edge); border-radius: 12px; }
.hero-kicker { margin: 0; color: var(--primary); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.hero-title { margin: .2rem 0 .5rem; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.05; }
.hero-lede { margin: 0 0 1rem; font-size: 1.1rem; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn.big { padding: .7rem 1.2rem; font-size: 1.05rem; }
.hero-fine { margin: .7rem 0 0; font-size: .85rem; color: var(--muted); }
.hero-art { margin: 0; position: relative; }
.hero-art img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
.hero-art figcaption { margin-top: .3rem; text-align: center; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero-art { order: -1; } .hero-actions .btn { flex: 1 1 100%; text-align: center; } }

.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.benefit { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: 10px; padding: .8rem 1rem; }
.benefit h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.benefit p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }

.cta-band { text-align: center; margin: 1.2rem 0; padding: 1.4rem 1rem; border: 1px solid var(--edge); border-radius: 12px;
            background: linear-gradient(135deg, var(--tile), var(--card)); }
.cta-band h2 { margin: 0 0 .3rem; font-size: 1.6rem; }
.cta-band p { margin: 0 0 .9rem; font-size: 1.05rem; }

.upcoming-when { color: var(--primary); font-weight: 700; }

/* Game schedule (schema v55): the 8-, 9- or 10-ball picture beside a table's name; two or three together for a mix */
.ball-icons { display: inline-flex; align-items: center; vertical-align: middle; margin-left: .4rem; line-height: 0;   /* the ball is centered in its plate even when a form row stretches the plate taller */
  background: #3b4046; border-radius: .45em; padding: .14em .32em; }   /* a small dark gray rounded plate, so the black 8 ball does not vanish into a dark page */
.play-top { position: relative; }
.play-top.has-balls { padding-top: 2rem; }
.tourney-balls { position: absolute; top: 0; right: 0; line-height: 0; }
.tourney-balls .ball-icons { margin-left: 0; }
.ball-icons svg { height: 1.5em; width: auto; display: block; }
.ball-lead .ball-icons { margin-left: 0; margin-right: .4rem; }   /* the same ball again, before the table name */

/* Setup: the buttons that move you on (Random Draw / Draw Again / Stage Tournament) get room around them */
.row { gap: .8rem; }
.btn.big { margin-top: .5rem; margin-bottom: .5rem; }

/* Administrators' Players page */
.players-admin > li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .5rem 0; border-bottom: 1px solid var(--edge); }
.players-admin > li.inactive .list-input { opacity: .6; }
.players-admin .list-input { flex: 1 1 14rem; min-width: 10rem; }
.players-admin .venue-pills { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; flex: 2 1 16rem; }
.players-admin .player-acts { display: flex; gap: .6rem; }
.players-admin .merge-box { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .4rem 0 .2rem; }
/* the bar under the table tiles that jumps back up to the top of the table list */
.table-card { scroll-margin-top: .5rem; }
.jump-top { display: block; text-align: center; margin: .6rem 0; padding: .55rem .8rem; border: 1px solid var(--edge); border-radius: 8px;
  background: var(--card); color: var(--primary); font-weight: 700; text-decoration: none; width: 100%; font: inherit; font-weight: 700; cursor: pointer; }
.jump-top:hover, .jump-top:focus-visible { background: var(--field); }
@media (min-width: 900px) { .jump-top { display: none; } }   /* a wide screen shows the tables and the way back up is a scroll away; a phone or small tablet keeps the bar */
/* The game schedule moved on: a big message over everything */
.game-switch { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(0,0,0,.72); padding: 1rem; }
.game-switch-card { background: var(--card); color: var(--ink); border: 3px solid var(--primary); border-radius: 18px; padding: 2rem 2.5rem; text-align: center;
  max-width: min(46rem, 94vw); box-shadow: 0 12px 50px rgba(0,0,0,.6); }
.game-switch-balls .ball-icons { margin: 0 auto; }
.game-switch-balls .ball-icons svg { height: clamp(4rem, 14vw, 9rem); }
.game-switch-title { font-size: clamp(2.2rem, 8vw, 5rem); font-weight: 800; line-height: 1.1; margin: .5rem 0; color: var(--primary); }
.game-switch-sub { font-size: clamp(1.1rem, 3vw, 1.8rem); margin-bottom: 1.2rem; }
.game-switch-card .btn { font-size: 1.5rem; padding: .6rem 3rem; }

/* Nobody waiting and several tables out of play: the next winner goes to the head of the waiting list (every screen) */
.line-reminder { margin: .6rem 0; padding: .7rem 1rem; border-radius: 10px; background: var(--tile); border: 2px solid var(--gold);
  text-align: center; font-size: 1.1rem; }
.line-reminder.big { font-size: 1.6rem; padding: 1rem 1.2rem; }
/* Fit All Tables while the browser is full screen (a TV or a second screen; the buttons are used on another computer): the top of the
   page keeps the tournament's name, its subtitle and the venue / date line, plus the way out (Normal Screen) and the fit switch.
   The info chips, Marshal line, the other buttons, the Undo (Any Table) bar and the table heading's extras step aside, so the
   tables get the room. html.kott-fit and html.kott-fs are set by the page's script (App.razor). */
html.kott-fs.kott-fit .play-top :is(.timing-chips, .marshal-line) { display: none; }
html.kott-fs.kott-fit .play-top .actions > :not(.fs-btn):not(.fit-btn) { display: none; }
html.kott-fs.kott-fit .marshal-bar,
html.kott-fs.kott-fit .lastgame,
html.kott-fs.kott-fit .tables-head > :is(h2, .tap-hint, .sort-switch) { display: none; }

/* New Tournament on the Home page folds shut like the waiting list and comes up folded */
details.newtourney-fold > summary.newtourney-summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
details.newtourney-fold[open] > summary.newtourney-summary { margin-bottom: .6rem; }
.newtourney-body .manage-help { margin-bottom: .6rem; }
/* Templates and Demos: room between the tiles and the New Template or Demo expander below them */
.event-tiles + details.newtourney-fold { margin-top: 1.5rem; }

/* New Tournament: the When box (event date and time, then the optional announce date and time) */
fieldset.when-box { border: 1px solid var(--edge, #8884); border-radius: .5rem; padding: .6rem .8rem .8rem; margin: .4rem 0 0; min-width: 0; grid-column: 1 / -1; /* takes the whole line of the form grid on a wide screen */ }
fieldset.when-box > legend { font-weight: 700; padding: 0 .4rem; }
fieldset.when-box .when-row { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-end; margin: .4rem 0; }
fieldset.when-box .when-row > label, fieldset.when-box .when-row > .field { margin: 0; }
/* the new-tournament form: When on the left, Announce on the right; one column on a phone */
fieldset.when-box .when-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .4rem 1.6rem; align-items: start; }
fieldset.when-box .when-col { min-width: 0; }
fieldset.when-box .when-col > h4 { margin: .2rem 0 0; }
@media (max-width: 700px) { fieldset.when-box .when-cols { grid-template-columns: minmax(0, 1fr); } }

/* the ball bars over the Tables heading and under the tiles: the game now on the schedule, a row of ten balls, centred, with space above and below */
.ball-bar { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: .2rem; width: fit-content; max-width: 100%; margin: .9rem auto; box-sizing: border-box; text-align: center;
  background: #3b4046; border-radius: .7rem; padding: .3rem .6rem;   /* one dark gray rounded plate behind the whole row */
  position: sticky; top: .4rem; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,.35); }   /* floats at the top while the tables scroll */
.ball-bar .ball-icons { margin: 0; flex: 0 0 auto; background: none; padding: 0; border-radius: 0; }
.ball-bar .ball-icons svg { height: clamp(1.3rem, 6.5vw, 2rem); }   /* all ten stay on one centred row, even on a small phone */
body:has(.ctrl-fs-on) section .ball-bar { display: none; }   /* the Control Screen shows it inside its own floating bar instead */
/* the Control Screen's rundown tiles (CtrlInfoTile): a table tile's shape with a short list in it */
.info-tile .info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.info-tile .info-list li { display: flex; align-items: baseline; gap: .5rem; background: var(--field); border-radius: 8px; padding: .2rem .5rem; }
.info-tile .info-list li.info-two { flex-direction: column; align-items: flex-start; gap: 0; }   /* Players Out: the name on top, why below */
.ctrl-lists-wrap { display: contents; }
.info-tile .info-list li.info-group { background: none; font-weight: 700; padding: .1rem .2rem 0; }
.info-tile .info-rank { min-width: 1.4em; color: var(--muted); font-variant-numeric: tabular-nums; }
.info-tile .info-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-tile .info-note { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the Control Screen's scannable-code tiles (CtrlCodeTile): no title, the QR code as big as the tile allows, small text along the bottom edge (as on the TV screens) */
.code-tile { display: flex; flex-direction: column; padding: .45rem .55rem .3rem; min-height: 15rem; }
.code-tile .code-qr { flex: 1 1 0; min-height: 11rem; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; padding: .3rem; }
.code-tile .code-qr svg { display: block; width: 100%; height: 100%; }
.code-tile .code-foot { margin-top: .25rem; text-align: center; font-size: .78rem; line-height: 1.1; color: var(--muted); overflow-wrap: anywhere; }
.code-tile .code-foot b { color: var(--ink); letter-spacing: .12em; }
.code-tile .code-pick { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.code-tile .code-pick select { width: 100%; }
.info-tile .info-key { color: var(--ink); }   /* "time" and "chips" in Players Out: the same colour as the name above */
.info-tile .info-more, .info-tile .info-empty { text-align: center; margin: .1rem 0 0; }
/* the Waiting and Standings tiles list everyone: the tile stays about six rows tall (em, so it grows with a bigger Control Screen tile) and the list scrolls inside it */
.info-tile .info-scroll { max-height: 12.5em; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; padding-right: .15rem; }
.info-tile .info-scroll:focus-visible { outline: 2px solid var(--gold, currentColor); outline-offset: 2px; border-radius: 8px; }
.ctrl-bar .ball-bar { position: static; width: auto; margin: 0; padding: .15rem .45rem; box-shadow: none; }
.ctrl-bar .ball-bar .ball-icons svg { height: clamp(1.1rem, 4vw, 1.5rem); }
#tables-top { scroll-margin-top: 3.6rem; }   /* ▲ Top of Tables lands just under the floating ball bar */

/* Setup > Players: one checklist (tick = in the tournament). A ticked name is bold; a chip tournament's starting chips sit beside it. */
.player-checklist { max-height: 26rem; }
.pl-cell { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.pl-cell > label.returning-item { flex: 1; min-width: 0; }
.pl-cell.in .setup-label { font-weight: 700; }
.pl-cell > input.narrow { flex: none; }

/* the standings group beside a name in Setup's Starting Order */
.so-group { flex: none; }
.timing-summary p { margin: .2rem 0; }
.edit-box { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .9rem .8rem; margin: .8rem 0; }
.edit-box > h3:first-child, .edit-box > details > summary { margin-top: 0; }
.edit-box.delete-zone { border-top: 1px solid var(--line); }
.et-cols > .edit-box { min-width: 0; }

/* a player's first and last name boxes side by side (script 78) */
.list-input.name-part { flex: 1 1 7rem; min-width: 5rem; }
.players-admin .list-input.name-part { flex: 1 1 8rem; min-width: 6rem; }
.et-cols input.list-input.name-part { width: 48%; flex: none; }

/* the partners Play page (script 77) */
.partner-next { margin: .6rem 0; font-size: 1.05rem; }
/* Rack Mates table tiles reuse the singles tiles (.tables .table-card .seat-row .player); only what is different is here */
.partner-tables { margin: .6rem 0; }
.partner-table .player.team { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1rem .35rem; line-height: 1.25; overflow-wrap: anywhere; }
.partner-table .amp { opacity: .6; }
.partner-table .pn.stay, .partner-line .pn.stay, .partner-next .pn.stay { color: var(--king); font-weight: 700; }   /* the incoming winner: the king colour and a crown, as the king in the singles game */
.partner-table .player.team.sure { border-color: var(--accent); background: var(--primary); color: var(--primary-ink); }
.partner-table .player.team.sure .pn, .partner-table .player.team.sure .pn.stay, .partner-table .player.team.sure .crown { color: var(--primary-ink); }   /* on the Sure? prompt the king colour would match the button, so use the button's text colour */
.partner-table .sure-label { flex: 1 1 100%; font-size: .75em; font-weight: 700; }
.partner-table .pn.me, .partner-line li.me, .partner-standings tr.me { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; border-radius: .3rem; }
.partner-empty { padding: .6rem .2rem; }
.partner-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .8rem; align-items: start; }
.partner-standings { width: 100%; border-collapse: collapse; }
.partner-standings th, .partner-standings td { padding: .2rem .4rem; text-align: center; }
.partner-standings .left { text-align: left; }
.partner-standings th { line-height: 1.15; vertical-align: bottom; }   /* two-line headers: Auto / Bumps, Teamed / with */
@media (max-width: 600px) { .partner-standings { font-size: .82rem; } .partner-standings th, .partner-standings td { padding: .15rem .2rem; } .partner-standings .left { max-width: 7.5rem; overflow-wrap: anywhere; } }   /* a phone: the whole table fits the width */
.partner-standings tr.inactive { opacity: .55; }
.partner-line { margin: .2rem 0 .6rem; padding-left: 1.4rem; }
.partner-games li { padding: .15rem 0; }
.partner-next.big { font-size: 1.6rem; padding: 1rem 1.2rem; }   /* the kiosk's Next up strip, readable from across the room */

/* a Rack Mates player seated for a game they will sit after, win or lose (one more win reaches the win limit): a small tag, the tile otherwise unchanged */
.partner-table .pn.sits-after { border: 1px solid currentColor; border-radius: .35rem; padding: 0 .3em; }   /* a player who sits after this game, win or lose: one thin border, no words */

/* a standings line whose player has just won: a soft wash of the highlight colour that fades out in a few seconds (PartnersPlay.NoteWinners).
   Two identical animations under two names: a second win before the first has faded switches the name and so starts it again. */
.partner-standings td, table.grid tr[class*="win-flash"] td, .info-tile .info-list li { position: relative; }
.partner-standings tr.win-flash-a td::before, .partner-standings tr.win-flash-b td::before,
table.grid tr.win-flash-a td::before, table.grid tr.win-flash-b td::before,
.info-tile .info-list li.win-flash-a::before, .info-tile .info-list li.win-flash-b::before { content: ""; position: absolute; inset: 0; background: var(--king); opacity: 0; pointer-events: none; }
.partner-standings tr.win-flash-a td::before, table.grid tr.win-flash-a td::before, .info-tile .info-list li.win-flash-a::before { animation: win-flash-a 4s ease-out; }
.partner-standings tr.win-flash-b td::before, table.grid tr.win-flash-b td::before, .info-tile .info-list li.win-flash-b::before { animation: win-flash-b 4s ease-out; }
@keyframes win-flash-a { from { opacity: .45; } to { opacity: 0; } }
@keyframes win-flash-b { from { opacity: .45; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .partner-standings tr[class*="win-flash"] td::before, table.grid tr[class*="win-flash"] td::before, .info-tile .info-list li[class*="win-flash"]::before { animation-duration: 1ms; } }

/* a slogan in place of a subtitle (EventSubtitle.razor): the same line, slanted */
.event-subtitle.slogan { font-style: italic; }
/* slogans, one at a time (script 90): the text fades to nothing and the next one fades in; a line's height is kept so the page does not jump */
.slogan-rotator { display: flex; align-items: center; justify-content: center; height: 2.7em; margin: 1.1rem 0 1.4rem; padding: 0 .75rem; overflow: hidden;
  text-align: center; font-style: italic; color: var(--muted); font-size: 1.15rem; line-height: 1.35; }   /* always two lines tall; the text is centered in it (one line sits in the middle) */
.slogan-text { display: block; max-width: 100%; opacity: 1; transition: opacity .9s ease; }
.slogan-text.slogan-out { opacity: 0; }
.event-subtitle.slogan-rotator { display: block; height: auto; min-height: 1.5rem; margin: 0; padding: 0; overflow: visible; text-align: left; font-size: 1.05rem; line-height: inherit; }
.event-subtitle.slogan-rotator .slogan-text { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .slogan-text { transition: none; } }

/* the overview slides (/tour): the welcome panel, card slides and the closing band, one at a time with Back / Next and dots */
.tour { outline: none; touch-action: pan-y; }   /* vertical scrolling stays; a sideways swipe moves a slide (Tour.razor) */
.tour-stage.from-right { animation: tour-in-right .22s ease-out; }
.tour-stage.from-left { animation: tour-in-left .22s ease-out; }
@keyframes tour-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes tour-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tour-stage.from-right, .tour-stage.from-left { animation: none; } }
.tour-label { margin: .2rem 0 .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--primary); }
.tour-slide { min-height: 14rem; }
.tour-title { margin: .2rem 0 .8rem; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; }
.tour-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tour-cards .benefit h3 { font-size: 1.2rem; }
.tour-cards .benefit p { font-size: 1.05rem; }
.tour-cards .benefit ul { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.tour-cards .benefit li { margin: .25rem 0; }
.tour-closing { margin-top: 1.5rem; }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 1.1rem 0; }
.tour-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.tour-dot { width: .8rem; height: .8rem; padding: 0; border-radius: 50%; border: 1px solid var(--edge); background: transparent; cursor: pointer; }
.tour-dot.spec { border-radius: 2px; }
.tour-dot.on { background: var(--primary); border-color: var(--primary); }
@media (max-width: 760px) { .tour-nav .btn { flex: 0 0 auto; } }

/* Rack Mates chips (script 87): the singles game's chip badge after a name; the last chip stands out; the director's number box in the standings */
.chip.low { background: var(--warn); color: var(--ink); }
.partner-standings .chip-input { width: 3.4rem; padding: .05rem .25rem; }

/* the Player's Night button for kiosks and Marshals: one line, centered on wide screens and on phones */
.night-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem; }

/* Rack Mates: the player who breaks (the winners rack for the incoming players) is underlined and starred, in the name's own colour (script 99) */
.partner-table .brk { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: .08em; }

/* Rack Mates: "Alex racks · Sam breaks" at the foot of a table's tile for the first two minutes of the game */
.partner-table .rack-note { margin-top: .35rem; text-align: center; font-size: .8em; opacity: .8; }

/* Setup Players: who is In on the left, the venue's other players on the right; one tap moves a name across */
.pick-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0; }
.pick-cols.one { grid-template-columns: 1fr; }
.pick-col { border: 1px solid var(--edge); border-radius: 10px; padding: .5rem; background: var(--field); display: flex; flex-direction: column; gap: .3rem; min-height: 6rem; max-height: 26rem; overflow-y: auto; }
.pick-col.in-col { border-color: var(--gold); }
.pick-head { font-weight: 700; color: var(--gold); position: sticky; top: -.5rem; background: var(--field); padding: .1rem 0; }
.pick-item { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.pick-item > .pick-chip { flex: 1; min-width: 0; }
.pick-item > input.narrow { flex: none; }
.pick-chip { overflow-wrap: anywhere; }
.pick-chip.in { font-weight: 700; }
.pick-chip:disabled { opacity: .6; cursor: default; }
.pick-empty { padding: .3rem; margin: 0; }
@media (max-width: 520px) { .pick-cols { gap: .4rem; } .pick-col { padding: .4rem; } }

/* the legend at the right edge of the Next up bar: the king box the winners who stay on carry below */
.partner-next .king-legend { float: right; margin-left: .6rem; padding: 0 .45em; border: 1px solid var(--king); border-radius: .35rem; color: var(--king); font-weight: 700; font-size: .85em; white-space: nowrap; }

/* Control Screen: the sort buttons and the tournament switcher in the bar; the call pop-up that floats over the grid */
.ctrl-bar .ctrl-sort { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.ctrl-bar .ctrl-sort .btn { padding: .3rem .6rem; }
.btn.resort { border-color: var(--gold); color: var(--gold); font-weight: 700; animation: resort-pulse 1.6s ease-in-out infinite; }
@keyframes resort-pulse { 50% { box-shadow: 0 0 0 3px var(--gold); } }
.ctrl-bar .ctrl-switch { max-width: 14rem; padding: .3rem .4rem; }
.ctrl-bar .ap-speed { display: inline-flex; align-items: center; gap: .3rem; }
.ctrl-bar .ap-speed select { padding: .3rem .4rem; }
.call-pop { position: fixed; right: .7rem; bottom: .7rem; z-index: 60; width: min(26rem, calc(100vw - 1.4rem)); max-height: 55vh; display: flex; flex-direction: column;
  background: var(--card); border: 2px solid var(--gold); border-radius: .6rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.call-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .6rem; }
.call-pop-toggle { font-weight: 700; font-size: 1.05rem; margin-right: auto; }
/* the grip moves the pop-up anywhere on the screen (kottFloat in App.razor); once moved, html carries data-pop-moved and the two position variables.
   The min() keeps its title bar on screen if the window is made smaller afterwards. */
/* the Error Log page (administrators): one card per failure */
.errlog { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.errlog li { background: var(--field); border: 1px solid var(--edge); border-radius: .5rem; padding: .5rem .7rem; }
.errlog .errmsg { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; margin: .25rem 0; overflow-wrap: anywhere; }
.errlog pre { margin: .3rem 0 0; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.call-pop-grip { cursor: grab; touch-action: none; user-select: none; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: .3rem .45rem .3rem .1rem; }
.call-pop-grip:active { cursor: grabbing; }
html[data-pop-moved] .call-pop { right: auto; bottom: auto; left: min(var(--pop-left, 0px), calc(100vw - 6rem)); top: min(var(--pop-top, 0px), calc(100vh - 3.5rem)); }
.call-pop-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 .4rem .4rem; display: flex; flex-direction: column; gap: .35rem; }
.call-pop .call-strip { justify-content: flex-start; background: var(--card); }
.table-card.called { animation: called-pulse 1.4s ease-in-out infinite; }
@keyframes called-pulse { 50% { box-shadow: 0 0 0 4px var(--gold); } }
@media (prefers-reduced-motion: reduce) { .table-card.called, .btn.resort { animation: none; } .table-card.called { outline: 3px solid var(--gold); } }

.gb-chip .gb-rate { opacity: .8; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Rack Mates standings groups: a heading line before each group's players */
.partner-standings tr.group-row th { background: var(--tile); font-weight: 700; padding: .35rem .6rem; }
.info-list .info-group { list-style: none; font-weight: 700; opacity: .8; padding-top: .3rem; }

/* Control Screen: the Tiles menu (checkboxes for the Standings, Waiting and Players Out tiles) */
.ctrl-bar .ctrl-menu { position: relative; }
.ctrl-bar .ctrl-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.ctrl-bar .ctrl-menu > summary::-webkit-details-marker { display: none; }
.ctrl-bar .ctrl-menu-items { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 70; display: grid; gap: .1rem; min-width: 11rem; padding: .35rem;
  background: var(--card); border: 1px solid var(--edge); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.ctrl-bar .ctrl-menu-items label { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.ctrl-bar .ctrl-menu-items label:hover { background: var(--field); }

/* Edit Tournament: every section folds like the players cards (folded until opened; a fold opened by hand stays so) */
.edit-tournament details.edit-fold { margin: .2rem 0; }
.edit-tournament details.edit-fold > summary.edit-fold-summary { padding: .35rem 0; }

/* Control Screen: the speed box is wide enough for its arrow and number on one line; a long table name wraps (the ball icons wrap with it) */
.ctrl-bar .ap-speed { flex-wrap: nowrap; white-space: nowrap; }
.ctrl-bar .ap-speed select { min-width: 4.5rem; width: auto; }
.table-head { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.table-head > .table-label { min-width: 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }

/* the end time has passed: Pause Play turns into "Time's Up - Click Here", gold and pulsing so it is not missed */
.btn.times-up { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight: 700; animation: times-up-pulse 1.2s ease-in-out infinite; }
@keyframes times-up-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn.times-up { animation: none; } }
.settings-list .merge-box { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .4rem 0 .2rem; }

/* Earlier auto-play runs: the runs made from one base run sit together under a heading */
.autoplay-series { margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border, rgba(128,128,128,.3)); }
.autoplay-series:last-child { border-bottom: 0; }
.autoplay-series-title { margin: .25rem 0 .35rem; }
details.autoplay-series > summary.edit-fold-summary { font-size: 1rem; }

/* Control Screen on a phone: one column of tiles, the bar's buttons centered, and a Menu button that folds them away (only Exit, Full Screen and Menu stay) */
.ctrl-bar .ctrl-fold-btn { display: none; }
@media (max-width: 600px) {
  body:has(.ctrl-fs-on) main { padding: .3rem .4rem; overflow-x: hidden; }
  .ctrl-bar { max-width: 100%; box-sizing: border-box; }
  .ctrl-bar .ctrl-name { flex: 1 1 100%; margin-right: 0; }
  .ctrl-bar .ctrl-acts { flex: 1 1 100%; justify-content: center; }
  .ctrl-bar .ctrl-fold-btn { display: inline-block; }
  .ctrl-bar .ctrl-acts.folded > :not(.ctrl-fold-btn):not(.fs-btn):not(.ctrl-exit) { display: none; }
  .tables.ctrl-grid:not(.kiosk), .tables.ctrl-grid.ctrl-few:not(.kiosk) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .tables.ctrl-grid:not(.kiosk) .table-card, .tables.ctrl-grid.ctrl-few:not(.kiosk) .table-card { width: auto; min-width: 0; }
}
/* the Player Ratings list folds away and scrolls inside itself, so a long list does not run down the page */
.ratings-fold > summary { cursor: pointer; font-weight: 600; }
.ratings-scroll { max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; }