/*
 * Mobile-first: the rules below describe the phone layout.
 * Wider screens only add or change rules inside "@media (min-width: ...)" blocks.
 * The dashboard of a league is the exception: it is made for a wide screen held sideways and sized
 * from the window, see "Dashboard of a league".
 *
 * Every colour and size used more than once is a variable here (--name), so a look is changed in
 * one place. Later features add their own rules below, in the same style.
 */

/*
 * The display face of the digits, the blinds, the main button and the headings: Saira Semi Condensed
 * (SIL Open Font License 1.1, fonts/OFL.txt), served by the app itself. Weights 600 and 700, the
 * "latin" part (English and most of Polish) and "latin-ext" (Ł, ł, ą, ć, ę, ń, ś, ź, ż...), which
 * the browser downloads only when a page has such letters (unicode-range). Until the file arrives
 * the text is shown in the fallback (font-display: swap).
 */
@font-face {
    font-family: "Saira Semi Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/saira-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Saira Semi Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/saira-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Saira Semi Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/saira-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Saira Semi Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/saira-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Palette "Dark felt": card-table green and a soft beige. Dark page only. The number in a comment is the
       contrast ratio (WCAG); text needs 4.5, the shapes of controls 3. */
    --color-background: #08100d;
    --color-surface: #0f1b16;              /* cards and pop-ups, a step lighter than the page */
    --color-text: #ebede5;                 /* 16.3 on the background, 15.0 on a surface */
    --color-muted: #93a79b;                /* secondary text: 7.6 on the background, 6.9 on a surface, 5.4 on the track */
    --color-border: #26382f;               /* thin lines between sections (decoration only) */
    --color-border-strong: #62786b;        /* the border of a field or a button: 4.1 on the background, 3.7 on a surface */
    --color-accent: #d6c39e;               /* beige: links, highlights, the main button: 11.2 on the background, 10.2 on a surface */
    --color-accent-hover: #e8d9b8;         /* the same while the mouse is over it: 13.8 on the background */
    --color-on-accent: #121914;            /* text on a beige button: 10.3 (12.8 on the hover colour) */
    --color-track: #1f302a;                /* what is not filled yet: the level track, the chip's marks that went out (decoration) */
    --color-track-past: #71725e;           /* a level that has passed: the accent mixed 45 % into the track; 3.9 on the background */
    --color-error: #f2998f;                /* messages of a refused form: 8.9 on the background, 8.2 on a surface */
    --color-error-background: #2e1916;     /* box of an error message; the red text on it: 7.7 */
    --color-surface-raised: #142219;       /* the lit top of a league card (decoration) */
    --color-card-edge: #d6c39e1a;          /* the thin light along the top edge of a league card: the accent at 10 % */
    --color-suit-red: #c99486;             /* hearts and diamonds: a dusty red; 6.8 on a surface */
    --color-felt-glow: #13261c;            /* the light over the table at the top of the main page */
    --color-table-line: #d6c39e29;         /* the oval line of the table: the accent at 16 % (decoration) */

    --font-display: "Saira Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;

    --space: 1rem;
    --page-width: 60rem;
    --control-height: 2.75rem;             /* 44 px: buttons and fields are easy to hit with a finger */
    --column-width: 30rem;                 /* forms and lists: a narrow column in the middle of the page */
    --radius: 0.5rem;

    /* Tells the browser that the page is dark, so its own parts (scrollbars, the look of fields)
       are dark too. */
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Text: the fonts the system already has, nothing to download. Headings and digits: --font-display. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
}

.container {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--space);
}

main {
    flex: 1;
}

/*
 * Room between the last block of a page and the end of the window.
 * "main.container", not just "main": .container above sets the padding of all four sides, and
 * a selector with a class wins over one without, whatever their order in this file.
 */
main.container {
    padding-bottom: calc(2 * var(--space));
}

h1,
h2 {
    font-family: var(--font-display);
    font-weight: 600;
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin: calc(2 * var(--space)) 0 var(--space);
    overflow-wrap: anywhere;
}

p {
    margin: 0 0 var(--space);
}

.lead {
    font-size: 1.125rem;
    color: var(--color-muted);
}

a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-hover);
}

/* The keyboard focus must always be visible. */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* ----- Header ----- */

.site-header {
    border-bottom: 1px solid var(--color-border);
}

/* The site name at the left edge of the window: the header row is as wide as the window, not as the
   centred page box (which is wider than the content column, so the name lined up with neither). */
.site-header .container {
    max-width: none;
    /* The site name and, on the main page, the quiet "Regulamin" link right next to it. */
    display: flex;
    align-items: center;
    gap: calc(1.5 * var(--space));
}

/* "Regulamin" (F10): plain small text, as little visible as possible, in the light text colour (not the accent). */
.site-terms {
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
    text-decoration: none;
}

.site-terms:hover,
.site-terms:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
}

.site-name {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    color: var(--color-text);
    text-decoration: none;
}

.site-name:hover {
    color: var(--color-accent);
}

/* The logo: a dark spade on a small beige tile, as in the tab icon. */
.site-mark {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    margin-right: 0.625rem;
    border-radius: 0.4375rem;
    background: var(--color-accent);
    color: var(--color-background);
}

.site-mark .suit {
    width: 1.05rem;
    height: 1.05rem;
}

/* ----- Buttons (used from F2 on) ----- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: 0 calc(1.5 * var(--space));
    font: inherit;
    font-weight: 600;
    color: var(--color-on-accent);
    background: var(--color-accent);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
}

.button:hover {
    background: var(--color-accent-hover);
    color: var(--color-on-accent);
}


.button:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
}

/* A less important action: outlined, the same size. */
.button--secondary {
    color: var(--color-accent);
    background: transparent;
    border: 1px solid var(--color-accent);
}

.button--secondary:hover {
    color: var(--color-accent-hover);
    background: var(--color-surface);
}

/* The main action of a form: the whole width of the column, easy to hit with a thumb. */
.button--block {
    display: flex;
    width: 100%;
}

/* The "hidden" attribute must win over "display" above (the button is hidden by a script). */
.button[hidden] {
    display: none;
}

/* ----- Pages in a narrow column: the main page, forms, a league ----- */

.column {
    max-width: var(--column-width);
    margin: 0 auto;
}

/* The same distance between the blocks of a column. */
.column > * + * {
    margin-top: var(--space);
}

h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: calc(2 * var(--space)) 0 0.5rem;
}

.column > h1 + * {
    margin-top: 0;
}

.muted {
    color: var(--color-muted);
}

.back {
    margin: var(--space) 0 0;
}

.back a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
}

/* ----- Main page: the table at the top, the leagues as playing cards ----- */

/* The page is as wide as the window, so the felt glow and the oval line of the table reach the edges. The
   content keeps its own width (.home). */
.page-home main {
    position: relative;
    max-width: none;
    padding: 0;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 420px at 50% 0, var(--color-felt-glow), transparent 70%);
}

/* The betting line of a poker table: a faint oval whose lower part arcs around the heading. Its bottom stays
   about 190 px below the top of the page at every width (less on a low screen, where the opening is smaller). */
.page-home main::before {
    --oval-width: clamp(44rem, 62vw, 75rem);
    --oval-bottom: 190px;
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--oval-bottom) - var(--oval-width) * 0.467);
    width: var(--oval-width);
    aspect-ratio: 900 / 420;
    transform: translateX(-50%);
    border: 1px solid var(--color-table-line);
    border-radius: 50%;
    pointer-events: none;
}

.home {
    position: relative;
    max-width: 65rem;
    margin: 0 auto;
    padding: 0 var(--space) calc(2 * var(--space));
}

.home-hero {
    padding: 2.25rem 0 0;
    margin-bottom: 2.5rem;
    text-align: center;
}

.home-suits {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin: 0;
    color: var(--color-muted);
}

.home-suits .suit {
    width: 0.9rem;
    height: 0.9rem;
}

.home-hero h1 {
    margin: 0.375rem 0;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.home-hero .lead {
    margin: 0;
}

.home .notice--ok {
    margin: 0 0 var(--space);
}

.home-heading {
    margin: 0 0 0.875rem;
}

/* A drawn suit (_icons.html): the colour comes from the text; hearts and diamonds are a dusty red. */
.suit {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
}

.suit--heart,
.suit--diamond {
    color: var(--color-suit-red);
}

.league-grid,
.player-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.league-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
    gap: var(--space);
}

/* A league is a playing card: the name and the number of players in the middle, the initial and the suit in
   two corners as on a real card, a faint large suit on the right. Under the mouse it lifts and turns a little. */
.league-link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    height: 100%;
    min-height: 9.375rem;
    padding: var(--space) 3rem;
    background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface) 60%);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: inset 0 1px 0 var(--color-card-edge);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 0.18s, border-color 0.18s;
}

.league-link:hover,
.league-link:focus-visible {
    transform: translateY(-3px) rotate(-0.6deg);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.league-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
    transition: color 0.18s;
}

.league-link:hover .league-name {
    color: var(--color-accent);
}

.league-meta {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.league-corner {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    line-height: 1;
}

.league-corner b {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
}

.league-corner .suit {
    width: 0.9rem;
    height: 0.9rem;
}

.league-corner--top {
    top: 0.875rem;
    left: 0.875rem;
}

.league-corner--bottom {
    right: 0.875rem;
    bottom: 0.875rem;
    transform: rotate(180deg);
}

.league-link--heart .league-corner b,
.league-link--diamond .league-corner b {
    color: var(--color-suit-red);
}

.league-pip {
    position: absolute;
    top: 50%;
    right: 1.625rem;
    transform: translateY(-50%);
    opacity: 0.07;
    pointer-events: none;
}

.league-pip .suit {
    width: 4.5rem;
    height: 4.5rem;
}

/* "Nowa liga": the last, empty card of the grid, the place where the next league goes. */
.league-new {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.375rem;
    width: 100%;
    height: 100%;
    min-height: 9.375rem;
    padding: var(--space);
    border: 1px dashed var(--color-border-strong);
    border-radius: 0.75rem;
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.league-new:hover,
.league-new:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.league-new:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    border-color: var(--color-border);
    color: var(--color-muted);
}

.league-new-plus {
    font-size: 2rem;
    line-height: 1;
}

/* A phone held sideways (a low screen): a smaller opening and lower cards. */
@media (max-height: 30rem) {
    .page-home main::before {
        --oval-bottom: 128px;
    }

    .home-hero {
        padding-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .home-hero h1 {
        font-size: 2rem;
    }

    .league-grid {
        grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
        gap: 0.75rem;
    }

    .league-link,
    .league-new {
        min-height: 7.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .league-link,
    .league-name,
    .league-new {
        transition: none;
    }

    .league-link:hover,
    .league-link:focus-visible {
        transform: none;
    }
}

/* No league yet: a line above the grid, which then holds only "Nowa liga". */
.empty-state {
    margin: 0 0 var(--space);
    color: var(--color-muted);
}

/* The pop-up "Nowa liga": a narrower pop-up than Konfiguracja, the fields one under another. */
.new-league-dialog {
    max-width: 32rem;
}

.new-league-dialog .config-body {
    display: grid;
    gap: var(--space);
    align-content: start;
}

.new-league-dialog h2 {
    margin: 0;
}

.new-league-open.notice {
    margin: 0 0 0.75rem;
}

.player-list {
    counter-reset: player;
}

.player-list li {
    counter-increment: player;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}

.player-list li::before {
    content: counter(player) ".";
    display: inline-block;
    min-width: 2rem;
    color: var(--color-muted);
}

/* ----- Forms ----- */

.field label,
.field legend {
    display: block;
    margin-bottom: 0.25rem;
    padding: 0;
    font-weight: 600;
}

/* A group of fields (the players) has no frame of its own: the legend is its caption. */
fieldset.field {
    margin-inline: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

input[type="text"],
input[type="password"] {
    display: block;
    width: 100%;
    min-height: var(--control-height);
    padding: 0 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
    /* Fields do not take over the font of the page by themselves. Below 16 px phones zoom in. */
    font: inherit;
}

input[aria-invalid="true"] {
    border-color: var(--color-error);
}

.player-fields {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.field-hint {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.address {
    overflow-wrap: anywhere;
}

.address strong {
    color: var(--color-accent);
}

/* Message under a field. */
.field-error {
    margin: 0.25rem 0 0;
    color: var(--color-error);
    font-weight: 600;
    overflow-wrap: anywhere;   /* a message can quote what was typed */
}

/* The message belongs to the fields that follow it, so the gap is below. */
.field-error--above {
    margin: 0 0 0.5rem;
}

/* A message for a whole form or page. */
.notice {
    padding: 0.75rem var(--space);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.notice--error {
    background: var(--color-error-background);
    color: var(--color-error);
    font-weight: 600;
}

@media (min-width: 40rem) {
    h1 {
        font-size: 2.25rem;
    }
}

/* ----- Buttons that cannot be pressed (F3) ----- */

.button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The mouse over a disabled button changes nothing. */
.button:disabled:hover {
    background: var(--color-accent);
}

.button--secondary:disabled:hover {
    background: transparent;
}

/* A smaller button: a thin border and a smaller text (the header buttons, "Dodaj poziom"). The look is
   smaller than 44 px, the area that reacts to a finger is not: ::after reaches 4 px beyond it on both
   sides. */
.button--small {
    position: relative;
    min-height: 2.25rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.button--small::after {
    content: "";
    position: absolute;
    inset: -0.25rem 0;
}

/* ----- Regulamin (F10) ----- */

/* Text, not a form: a little wider than the usual column. */
.column.legal {
    max-width: 40rem;
}

.legal-date {
    color: var(--color-muted);
}

.legal ul {
    margin: 0;
    padding-left: 1.25rem;
}

.legal li + li {
    margin-top: 0.5rem;
}

/* ----- Dashboard of a league (F3, redesigned) -----
 *
 * Made for a wide screen held sideways: a phone, a laptop, a TV. Everything is sized in "u",
 * 1 % of the width of the largest 16:9 screen that fits in the window, so the whole dashboard
 * scales as one picture between 640x360 and 3840x2160 and stays on one screen at any aspect ratio
 * from about 4:3 to 21:9 (a wider or a lower window leaves room at the sides; a taller one gives
 * the stage more height). max(Nrem, N*var(--u)) keeps the small texts readable on a small screen.
 * A window held upright is not designed for: it is stacked, may scroll, and works.
 */

body.dashboard-page {
    /* The dashboard sets its own height (dvh), and a body that is 100vh high would add a scroll on a phone
       whose address bar hides. */
    min-height: 0;
}

.dashboard-page .dashboard {
    /* 1 u: see above. 56.25 = 100 / (16 / 9). */
    --u: min(1vw, 100vh / 56.25);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(1.5 * var(--u));
    width: 100%;
    max-width: calc(140 * var(--u));
    min-height: 100vh;
    margin: 0 auto;
    padding: calc(2 * var(--u)) calc(3 * var(--u)) calc(2.2 * var(--u));
    /* Behind a notch of a phone held sideways. */
    padding-left: max(calc(3 * var(--u)), env(safe-area-inset-left, 0px));
    padding-right: max(calc(3 * var(--u)), env(safe-area-inset-right, 0px));
}

/* dvh: the height without the address bar of a phone browser (vh counts it, so the buttons would be cut off). */
@supports (height: 100dvh) {
    .dashboard-page .dashboard {
        --u: min(1vw, 100dvh / 56.25);
        min-height: 100dvh;
    }
}

/* Landscape: exactly one screen high. It scrolls inside only if a very odd window cannot fit everything. */
@media (orientation: landscape) {
    .dashboard-page .dashboard {
        height: 100vh;
        overflow-y: auto;
    }

    @supports (height: 100dvh) {
        .dashboard-page .dashboard {
            height: 100dvh;
        }
    }
}

/* The display face: digits, blinds, headings (the main button sets its own, after .control). */
.dashboard-league,
.clock,
.blinds {
    font-family: var(--font-display);
}

.dashboard-header {
    display: flex;
    align-items: center;
    gap: calc(1.2 * var(--u));
    font-size: max(0.9375rem, calc(1.6 * var(--u)));
}

/* The league's name, with the state next to it. */
.dashboard-league {
    min-width: 0;
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: max(2.25rem, calc(3 * var(--u)));
    height: max(2.25rem, calc(3 * var(--u)));
    margin-left: calc(-1 * var(--u));
    color: var(--color-muted);
    font-size: 1.25em;
    text-decoration: none;
}

.dashboard-home:hover {
    color: var(--color-accent);
}

.state-label {
    flex: none;
    margin: 0;
    padding: max(2px, calc(0.2 * var(--u))) max(0.5rem, var(--u));
    border: max(1px, calc(0.12 * var(--u))) solid var(--color-border-strong);
    border-radius: 999px;
    font-size: max(0.6875rem, calc(1.15 * var(--u)));
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.state-label[data-state="running"],
.state-label[data-state="paused"] {
    border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
    color: var(--color-accent);
}

.state-label[data-state="timeup"] {
    border-color: var(--color-error);
    background: var(--color-error-background);
    color: var(--color-error);
}

/* The right end of the header: the notes about the sound, "Włącz dźwięk", "Zasady" and "Wyloguj" in one row. */
.dashboard-header-end {
    display: flex;
    align-items: center;
    gap: calc(1.2 * var(--u));
    margin-left: auto;
}

.dashboard-header-end form {
    margin: 0;
}

/* The three header buttons are F10's .button--small; on a large screen they grow with the rest of the
   dashboard (never smaller than the fixed size of .button--small). */
.dashboard-header-end .button--small {
    min-height: max(2.25rem, calc(2.6 * var(--u)));
    padding: 0 max(0.875rem, calc(1.1 * var(--u)));
    font-size: max(0.875rem, calc(1.2 * var(--u)));
    white-space: nowrap;
    /* The colours of the controls at the bottom (e.g. "Dźwięk"), not the accent: light text, a faint border. */
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    border-color: color-mix(in srgb, var(--color-text) 25%, transparent);
}

.dashboard-header-end .button--small:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ----- The stage: the poker chip with the clock on the left, the blinds on the right, centred as one group ----- */

.dashboard-stage {
    /* A size container: the chip below takes its height from it (cqh), so the chip never pushes the buttons off the screen. */
    container-type: size;
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    /* Both columns as wide as their content, so the chip and the blinds together sit in the middle of the screen.
       The blinds column changes width with the blinds (at a level change the group moves a little). */
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--u));
}

.chip {
    position: relative;
    width: min(calc(27 * var(--u)), 100cqh);
    aspect-ratio: 1;
    border-radius: 50%;
    /* The clock and the label inside are sized from the chip's own width (cqw of this container). */
    container-type: inline-size;
}

.chip svg {
    display: block;
    width: 100%;
    height: 100%;
}

.chip-rim {
    fill: var(--color-surface);
}

.chip-inner {
    fill: var(--color-background);
    stroke: color-mix(in srgb, var(--color-accent) 35%, transparent);
    stroke-width: 0.5;
    stroke-dasharray: 1.2 1.2;
}

/* The 24 marks on the edge: one goes out for every 1/24 of the level, clockwise from the top. */
.chip-mark {
    fill: var(--color-accent);
    transition: opacity 0.4s;
}

.chip-mark.is-gone {
    opacity: 0.13;
}

.dashboard[data-state="timeup"] .chip-inner {
    stroke: var(--color-error);
}

.chip-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 1.8cqw;
    text-align: center;
}

.chip-center > p {
    margin: 0;
}

.label {
    font-size: max(0.6875rem, calc(1.2 * var(--u)));
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* "Poziom 4 / 7" over the digits. The chip is smaller than the screen, so the size comes from it. */
.level-label {
    font-size: max(0.6875rem, 4.4cqw);
    white-space: nowrap;
}

/* The time left in the level, in the chip. Equal-width digits, so that it does not shake. */
.clock {
    font-size: 26.7cqw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

/* "1:05:30" has two more characters than "05:30". */
.dashboard[data-clock="long"] .clock {
    font-size: 19.5cqw;
}

.dashboard[data-state="paused"] .clock {
    color: var(--color-muted);
}

/* Time up: the label of the chip says it, the digits and the ring turn red, and every mark is out. */
.dashboard[data-state="timeup"] .clock,
.dashboard[data-state="timeup"] .level-label {
    color: var(--color-error);
}

.dashboard[data-state="timeup"] .level-label {
    font-size: max(0.8125rem, 6.2cqw);
    font-weight: 700;
}

.info {
    /* As wide as the blinds or the next level under them (both change only at a level change), at most half of the
       screen. */
    display: grid;
    gap: calc(1.2 * var(--u));
    max-width: calc(52 * var(--u));
}

.info > p,
.blinds-block > p {
    margin: 0;
}

.blinds-block {
    display: grid;
    gap: calc(1.2 * var(--u));
    width: fit-content;
    max-width: 100%;
    /* Room for the plate that lights up at a level change; the negative margin keeps the layout where it was. */
    padding: calc(0.8 * var(--u)) calc(1.2 * var(--u));
    margin: calc(-0.8 * var(--u)) calc(-1.2 * var(--u));
    border-radius: calc(1.5 * var(--u));
}

.blinds {
    /* The size of the mockup, but a very long line shrinks to stay within half of the screen (the widest the
       column gets): --chars is the length of the text, the ante counted at its smaller size (dashboard.js); a digit
       of the display face is at most about half as wide as it is high. */
    font-size: min(calc(8.6 * var(--u)), calc(49.6 * var(--u) / (var(--chars, 9) * 0.5)));
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-accent);
}

/* "ante 5" after the blinds, on the same line in smaller letters (0.4em: ANTE_SIZE in dashboard.js). */
.blinds-ante {
    margin-left: 0.35em;
    font-size: 0.4em;
    font-weight: 600;
    color: var(--color-text);
}

/* The time of the whole game, above the track (left, where the track starts). */
.total-time {
    margin: 0;
}

.next-level,
.total-time {
    font-size: max(0.8125rem, calc(1.7 * var(--u)));
    color: var(--color-muted);
}

.next-level b,
.total-time b {
    font-weight: 600;
    color: var(--color-text);
}

/* ----- The level track: every level of the game as a block as long as its minutes ----- */

.track {
    display: flex;
    gap: calc(0.5 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
}

.track-level {
    display: grid;
    gap: calc(0.5 * var(--u));
    /* A fixed column, so that a long label (is-over) cannot widen the block. */
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.track-block {
    position: relative;
    height: max(6px, calc(1.8 * var(--u)));
    overflow: hidden;
    border-radius: max(3px, calc(0.5 * var(--u)));
    background: var(--color-track);
}

/* The level being played fills with the accent as the time passes. */
.track-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--color-accent);
    transition: width 0.25s linear;
}

.track-level.is-past .track-block {
    background: var(--color-track-past);
}

.track-text {
    overflow: hidden;
    font-size: max(0.6875rem, calc(1.1 * var(--u)));
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
}

.track-level.is-now .track-text {
    font-weight: 600;
    color: var(--color-text);
}

/* dashboard.js hides the labels that do not fit under their block (many levels). The space stays. */
/* A label longer than its block reaches over the free space to the right (dashboard.js leaves that space free). */
.track-text.is-over {
    overflow: visible;
}

.track-text.is-hidden {
    visibility: hidden;
    overflow: hidden;
}

/* A short message that does not block anything ("no connection"). */
.message {
    margin: 0;
    padding: 0.5rem var(--space);
    border-radius: var(--radius);
    background: var(--color-error-background);
    color: var(--color-error);
    font-size: max(0.875rem, calc(1.4 * var(--u)));
    font-weight: 600;
    text-align: center;
}

.message[hidden] {
    display: none;
}

/* ----- The controls: settings on the left, Start/Pauza in the middle, the game on the right ----- */

.controls {
    display: grid;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: center;
    gap: calc(1.2 * var(--u));
}

.control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(0.6 * var(--u));
    min-width: 0;
    height: max(2.5rem, calc(4.2 * var(--u)));
    padding: 0 calc(0.5 * var(--u));
    font: inherit;
    font-size: max(0.8125rem, calc(1.4 * var(--u)));
    line-height: 1.2;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    border: max(1px, calc(0.12 * var(--u))) solid color-mix(in srgb, var(--color-text) 25%, transparent);
    border-radius: max(0.5rem, var(--u));
    cursor: pointer;
}

.control:hover:not(:disabled) {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.control:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.control:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.control svg {
    flex: none;
    width: max(0.9rem, calc(1.7 * var(--u)));
    height: max(0.9rem, calc(1.7 * var(--u)));
}

.control--main {
    width: max(10rem, calc(22 * var(--u)));
    height: max(3rem, calc(6 * var(--u)));
    padding: 0;
    font-family: var(--font-display);
    font-size: max(1.125rem, calc(2.5 * var(--u)));
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-on-accent);
    background: var(--color-accent);
    border: 0;
    border-radius: 999px;
}

.control--main:hover:not(:disabled) {
    color: var(--color-on-accent);
    background: var(--color-accent-hover);
}

.control--main:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: calc(0.3 * var(--u));
}

/* Roomier chip and a little less empty space when the window is close to square (4:3). */
@media (max-aspect-ratio: 3 / 2) {
    .chip {
        width: min(calc(36 * var(--u)), 100cqh);
    }
}

/* A window held upright: not designed for, only made to work. Everything stacks and the page scrolls. */
@media (orientation: portrait) {
    .dashboard-page .dashboard {
        --u: 2.4vw;
        gap: 1rem;
    }

    .dashboard-stage {
        flex: none;
        container-type: normal;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .info {
        width: 100%;
    }

    .chip {
        width: min(80vw, 24rem);
    }

    .blinds-block {
        margin: 0 auto;
    }

    .controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control--main {
        grid-column: 1 / -1;
        width: 100%;
        order: -1;
    }
}

/* ----- Sound and reminders (F5) ----- */

/* Two pictures in the "Dźwięk" button; aria-pressed (true = muted) picks one. */
.control .icon--off,
.control[aria-pressed="true"] .icon--on {
    display: none;
}

.control[aria-pressed="true"] .icon--off {
    display: block;
}

.control[aria-pressed="true"] {
    color: var(--color-muted);
}

/* "Brak pliku muzyki": small and quiet, in the header (the button's title says it as well). */
.sound-note {
    color: var(--color-muted);
    font-size: max(0.75rem, calc(1.3 * var(--u)));
}

/* Half of a level: the chip swells a little and glows, about two seconds. */
@keyframes chip-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }

    35% {
        transform: scale(1.025);
        box-shadow: 0 0 calc(3 * var(--u)) calc(0.6 * var(--u)) color-mix(in srgb, var(--color-accent) 45%, transparent);
    }
}

.chip.is-pulsing {
    animation: chip-pulse 2.2s ease-in-out;
}

/* A new level: the blinds sit on a soft plate of the accent for a few seconds, then it fades. */
@keyframes blinds-highlight {
    0%,
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
    }

    10%,
    75% {
        background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
        box-shadow: 0 0 0 calc(0.8 * var(--u)) color-mix(in srgb, var(--color-accent) 14%, transparent),
            0 0 calc(4 * var(--u)) calc(0.8 * var(--u)) color-mix(in srgb, var(--color-accent) 30%, transparent);
    }
}

.blinds-block.is-new-level {
    animation: blinds-highlight 6s ease-in-out;
}

/* Nothing moves for a person who asked for that: the same two things stay highlighted for the same time. */
@media (prefers-reduced-motion: reduce) {
    .chip-mark,
    .track-fill {
        transition: none;
    }

    .chip.is-pulsing {
        animation: none;
        box-shadow: 0 0 calc(3 * var(--u)) calc(0.6 * var(--u)) color-mix(in srgb, var(--color-accent) 45%, transparent);
    }

    .blinds-block.is-new-level {
        animation: none;
        background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
        box-shadow: 0 0 0 calc(0.8 * var(--u)) color-mix(in srgb, var(--color-accent) 14%, transparent),
            0 0 calc(4 * var(--u)) calc(0.8 * var(--u)) color-mix(in srgb, var(--color-accent) 30%, transparent);
    }
}

/* ----- Pop-ups: <dialog> ----- */

.dialog {
    width: calc(100% - 2 * var(--space));
    max-width: 28rem;
    padding: calc(1.5 * var(--space));
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

.dialog::backdrop {
    background: rgb(0 0 0 / 0.7);
}

.dialog h2 {
    margin: 0 0 0.5rem;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space);
}

.dialog-actions .button {
    flex: 1 1 10rem;
}

/* ----- Pop-up "Konfiguracja" (F4) ----- */

/*
 * A longer pop-up: the body scrolls and the buttons stay at the bottom, so on a phone "Zapisz" is
 * always in reach. "[open]": a rule on .dialog-wide alone would also show the closed dialog.
 */
.dialog--wide {
    max-width: 42rem;
    max-height: calc(100vh - 2 * var(--space));
    max-height: calc(100dvh - 2 * var(--space));
    padding: 0;
    overflow: hidden;
}

.dialog--wide[open] {
    display: flex;
    flex-direction: column;
}

.config-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.config-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space) var(--space) 0;
}

.config-actions {
    margin: 0;
    padding: 0.75rem var(--space);
    border-top: 1px solid var(--color-border);
}

.config-section {
    margin: 0 0 var(--space);
    padding: 0;
    border: 0;
    min-width: 0;
}

.config-section legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-weight: 700;
}

/* The players: a checkbox the size of a finger, one name per tick. */
.config-players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.25rem 0.75rem;
}

.config-player {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--control-height);
    overflow-wrap: anywhere;
}

.config-player input {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--color-accent);
}

/*
 * The levels. On a phone every level is a small card (its number and the remove button on top,
 * the four fields two by two, each with its own caption); from 36rem on the levels are rows under
 * one line of column names. Both use the same elements: grid areas place them.
 */
.config-levels {
    display: grid;
    gap: 0.5rem;
}

.config-level {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "num rem"
        "sb bb"
        "ante minutes"
        "err err";
    gap: 0.5rem;
    align-items: end;
}

.config-levels > .config-level {
    padding: 0.5rem 0.75rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.config-level--head {
    display: none;
}

.config-level-number {
    grid-area: num;
    align-self: center;
    font-weight: 700;
    color: var(--color-muted);
}

.config-cell {
    display: block;
    min-width: 0;
}

.config-cell[data-field="sb"] { grid-area: sb; }
.config-cell[data-field="bb"] { grid-area: bb; }
.config-cell[data-field="ante"] { grid-area: ante; }
.config-cell[data-field="minutes"] { grid-area: minutes; }

.config-cell-label {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.config-cell input {
    text-align: right;
}

.config-remove {
    grid-area: rem;
    justify-self: end;
    width: var(--control-height);
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
}

.config-level-error {
    grid-area: err;
    margin: 0;
}

.config-level-error[hidden],
.field-error[hidden],
.notice[hidden] {
    display: none;
}

.config-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

@media (min-width: 36rem) {
    .config-level {
        grid-template-columns: 4.5rem repeat(4, minmax(0, 1fr)) var(--control-height);
        grid-template-areas:
            "num sb bb ante minutes rem"
            "err err err err err err";
    }

    .config-levels > .config-level {
        padding: 0;
        border: 0;
    }

    /* The caption of a field is the column name above; kept for screen readers. */
    .config-cell-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .config-level--head {
        display: grid;
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
        color: var(--color-muted);
        align-items: end;
    }

    .config-level--head > span {
        padding-right: 0.5rem;
        text-align: right;
    }

    .config-level--head > .config-level-number {
        text-align: left;
    }

    .config-level--head [data-field="sb"] { grid-area: sb; }
    .config-level--head [data-field="bb"] { grid-area: bb; }
    .config-level--head [data-field="ante"] { grid-area: ante; }
    .config-level--head [data-field="minutes"] { grid-area: minutes; }

    /* "Poziom 3" on a card, just "3" in a row. */
    .config-level-word {
        display: none;
    }
}

/* ----- Pop-up "Wyniki gry" (F6) ----- */

/* The same scrolling body and buttons as Konfiguracja (.dialog--wide, .config-*), in a narrower column. */
.dialog--results {
    max-width: 30rem;
}

.results-hint {
    margin: 0 0 var(--space);
    font-size: 0.9375rem;
    color: var(--color-muted);
}

/* "Zwycięzca" above and "Odpadł pierwszy" below the cards: which end is which. */
.results-end {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.results-list + .results-end {
    margin: 0.25rem 0 var(--space);
}

.results-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * A card: the handle (the only part that starts a drag), the name with the place and the points,
 * the two arrows. Under every card but the last one the "=" button sits in the gap.
 */
.result-card {
    display: grid;
    grid-template-columns: var(--control-height) minmax(0, 1fr) 2.5rem 2.5rem;
    align-items: center;
    gap: 0.25rem;
    min-height: 3.5rem;
    padding: 0.25rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-background);
}

/* Cards that went out together share the accent border. */
.result-item.is-tied .result-card {
    border-color: var(--color-accent);
}

.result-handle {
    display: grid;
    place-items: center;
    height: var(--control-height);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-muted);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* A finger on the handle drags the card instead of scrolling the pop-up; anywhere else on the
       card it scrolls as usual. */
    touch-action: none;
}

.result-text {
    display: grid;
    min-width: 0;
}

.result-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.result-detail {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.result-detail strong {
    color: var(--color-accent);
}

.result-move {
    height: 2.5rem;
    padding: 0;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-accent);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    cursor: pointer;
}

.result-move:hover:not(:disabled) {
    background: var(--color-surface);
    border-color: var(--color-accent);
}

.result-move:disabled {
    opacity: 0.3;
    cursor: default;
}

/* "=": a small button centred in the gap; filled with the accent while the two cards are tied. */
.result-tie {
    display: block;
    min-width: 3rem;
    height: 2.25rem;
    margin: 0 auto;
    padding: 0;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
}

.result-tie:hover {
    color: var(--color-accent);
    border-color: var(--color-border-strong);
}

.result-tie[aria-pressed="true"] {
    color: var(--color-on-accent);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* Drag: the place the card will take, the card in the hand, and the copy under the pointer. */
.result-item.is-ghost {
    opacity: 0.35;
}

.result-item.is-chosen .result-handle {
    cursor: grabbing;
}

.result-item.is-dragging {
    opacity: 0.95;
}

.result-item.is-dragging .result-card {
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.6);
}

/* Stays at the bottom of the scrolling body, so the result is in view while the cards are moved. */
.results-summary {
    position: sticky;
    bottom: 0;
    margin: var(--space) 0 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.results-summary-label {
    font-weight: 400;
    color: var(--color-muted);
}

/* The buttons: the two secondary ones side by side where they fit, "Zapisz wyniki" on its own row. */
.dialog--results .dialog-actions .button {
    flex: 1 1 8rem;
    padding: 0 0.5rem;
}

.dialog--results #results-save {
    flex-basis: 100%;
}

/* A short screen (a phone): the cards and the result matter more than the instruction. */
@media (max-height: 36rem) {
    .results-hint {
        display: none;
    }
}

/* The confirmation after saving, in the place of the red problem messages. */
.message--ok {
    background: var(--color-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

/* ----- Pop-up "Podsumowanie ligi" (F7) ----- */

/* The scrolling body and the buttons are those of Konfiguracja (.dialog--wide, .config-*); a wider column for the tables. */
.dialog--summary {
    max-width: 46rem;
}

.dialog--summary .config-body {
    padding-bottom: var(--space);
}

.summary-section {
    margin: 0 0 calc(1.5 * var(--space));
}

.summary-section:last-child {
    margin-bottom: 0;
}

.summary-section h3,
.summary-section h4 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

.summary-status,
.summary-empty {
    margin: 0;
    color: var(--color-muted);
}

.summary-failure .notice {
    margin: 0 0 0.75rem;
}

/*
 * The tables scroll inside this box when they are wider than the pop-up (the games of a long season
 * on a phone), so the page behind never gets a horizontal scrollbar.
 */
.summary-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.summary-table {
    width: 100%;
    /* "separate": a sticky cell keeps its own background and border; with "collapse" they are painted
       by the table and slide away with the scroll. */
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.summary-table th,
.summary-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
    font-weight: 400;
}

.summary-table tbody tr:last-child > * {
    border-bottom: 0;
}

.summary-table thead th {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    white-space: nowrap;
}

.summary-table .summary-number,
.summary-table .summary-place {
    text-align: right;
    white-space: nowrap;
}

.summary-table .summary-name {
    font-weight: 600;
    overflow-wrap: break-word;
}

/* The place is a narrow column of its own: the name should sit next to it, not across the table. */
.summary-table th.summary-place,
.summary-table td.summary-place {
    width: 1%;
    text-align: center;
}

.summary-points {
    font-weight: 700;
}

/* The leader (or leaders, when tied): an accent stripe and tint, the name in the accent colour, and the label "Lider". */
.summary-table tr.is-leader > * {
    /* The tint over the surface colour, not a see-through colour: the sticky name cell must hide what scrolls under it. */
    background: linear-gradient(color-mix(in srgb, var(--color-accent) 14%, transparent), color-mix(in srgb, var(--color-accent) 14%, transparent)), var(--color-surface);
}

.summary-table tr.is-leader > :first-child {
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.summary-table tr.is-leader .summary-player,
.summary-table tr.is-leader .summary-points {
    color: var(--color-accent);
}

.summary-leader {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.5rem 0.0625rem 0.375rem;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    vertical-align: 0.0625rem;
}

.summary-crown {
    width: 1em;
    height: 1em;
}

/*
 * Points of the games, as a scoreboard: a row per game, a column per player (the leader first). The box
 * scrolls both ways when it is too small, and the player names (top), the games (left) and the totals
 * (bottom) stay in view. Sticky cells need a background of their own, or what scrolls under them shows.
 */
.summary-scroll--games {
    /* Short enough to be seen whole (header, rows and totals) when the pop-up is scrolled to it: the pop-up
       is as high as the window minus 2 rem, and its title and buttons take about 9 rem. */
    max-height: max(10rem, calc(100vh - 11rem));
    max-height: max(10rem, calc(100dvh - 11rem));
    overflow: auto;
}

.summary-table--games th,
.summary-table--games td {
    padding-block: 0.375rem;
}

.summary-table--games .summary-game,
.summary-table--games .summary-column,
.summary-table--games tfoot td {
    background: var(--color-surface);
}

.summary-table--games thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.summary-table--games .summary-game {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 6.5rem;
    text-align: left;
    /* A line on the right edge, so that the numbers sliding under the game are visibly cut off. */
    border-right: 1px solid var(--color-border);
}

/* The corner of the header (and of the totals) is above both the row and the column it meets. */
.summary-table--games thead .summary-game,
.summary-table--games tfoot .summary-game {
    z-index: 3;
}

.summary-table--games .summary-column {
    min-width: 4.5rem;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    color: var(--color-text);
}

.summary-table--games td.summary-number {
    text-align: center;
}

.summary-table--games tbody th.summary-game {
    font-weight: 400;
}

/* "Razem": the totals under the games, the part that reads like a scoreboard. */
.summary-table--games tfoot th,
.summary-table--games tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    border-top: 1px solid var(--color-border-strong);
    border-bottom: 0;
    font-weight: 700;
}

.summary-table--games tfoot th.summary-game {
    z-index: 3;
    color: var(--color-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.summary-table--games tfoot td {
    font-size: 1.0625rem;
}

/* The leader's column: a tint from top to bottom (opaque, over the surface, because of the sticky cells), the name and the total in the accent colour. */
.summary-table--games .is-leader {
    background: linear-gradient(color-mix(in srgb, var(--color-accent) 14%, transparent), color-mix(in srgb, var(--color-accent) 14%, transparent)), var(--color-surface);
}

.summary-table--games thead .is-leader,
.summary-table--games tfoot .is-leader {
    color: var(--color-accent);
}

.summary-game-number,
.summary-game-date {
    display: block;
}

.summary-game-number {
    color: var(--color-text);
    font-weight: 600;
}

.summary-game-date {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-muted);
}

.summary-absent {
    color: var(--color-muted);
}

/* Read by screen readers only: the dash in a table of points means "did not play". */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .summary-table th,
    .summary-table td {
        padding: 0.5rem;
    }

    .summary-table--games .summary-game {
        min-width: 5.25rem;
    }

    /* The badge goes under the name instead of widening the row. */
    .summary-leader {
        margin-left: 0;
        margin-top: 0.125rem;
    }

    .summary-table--totals .summary-name {
        line-height: 1.3;
    }
}

/* ----- Closing a season and the finished seasons (F8) ----- */

/* A note that something went well (the season has been closed): the line in the accent colour, no alarm colour. */
.notice--ok {
    margin: 0 0 var(--space);
    border: 1px solid var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
}

/* The dangerous answer: outlined in the soft red of the error messages, not a filled red block. */
.button--calm-danger {
    color: var(--color-error);
    background: transparent;
    border: 1px solid var(--color-error);
}

.button--calm-danger:hover {
    color: var(--color-error);
    background: var(--color-error-background);
}

.season-close .field-hint,
.league-delete .field-hint {
    margin-top: 0.5rem;
}

.season-close-step[hidden],
.season-close-start[hidden],
.league-delete-step[hidden],
.league-delete-start[hidden] {
    display: none;
}

.season-close-step {
    padding: var(--space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* The question about deleting the league: framed in the red of the errors, it cannot be undone. */
.league-delete-step {
    padding: var(--space);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
}

.season-close-question,
.league-delete-question {
    margin: 0;
    overflow-wrap: anywhere;   /* it quotes a name that was typed */
}

.season-close .dialog-actions .button,
.league-delete .dialog-actions .button {
    flex: 1 1 8rem;
}

/* A season of the history: one fold, with the name, the dates and the winners in the line that stays visible. */
.season-history {
    margin: 0 0 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.season-history > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-height: var(--control-height);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.season-history[open] > summary {
    border-bottom: 1px solid var(--color-border);
}

.season-history-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.season-history-dates {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* The winner (or the tied winners) of the season: the cup and the accent colour, as the leader's row. */
.season-winner {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    font-weight: 700;
    color: var(--color-accent);
    overflow-wrap: anywhere;
}

.season-history-body {
    padding: 0.75rem 0.75rem 0;
}

.season-history-body .summary-section:last-child {
    margin-bottom: var(--space);
}

/* The games of a finished season, folded inside it. */
.summary-games-fold > summary {
    display: flex;
    align-items: center;
    min-height: var(--control-height);
    font-weight: 700;
    font-size: 1.0625rem;
    cursor: pointer;
}

.summary-games-fold[open] > summary {
    margin-bottom: 0.5rem;
}

@media (max-width: 30rem) {
    /* The table sits inside two boxes here: less padding, so that its four columns fit a 360 px phone. */
    .season-history-body {
        padding: 0.5rem 0.5rem 0;
    }

    .season-history-body .summary-table th,
    .season-history-body .summary-table td {
        padding: 0.5rem 0.375rem;
    }

    .season-winner {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* The arrow of a fold (a flex summary has no marker of its own): points right when closed, down when open. */
.season-history > summary::before,
.summary-games-fold > summary::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(-45deg);
}

.season-history[open] > summary::before,
.summary-games-fold[open] > summary::before {
    transform: rotate(45deg);
}

/* ----- Pop-up "Zasady" (F11) ----- */

/* The frame is that of Podsumowanie (.dialog--wide, .config-*). Everything inside is in em, and the font size
   follows the screen like the dashboard (1.2 u: a TV gets a large cheat sheet, a laptop the usual 16 px), so
   two columns of five hands fit one landscape screen. */
.dialog--hands {
    --card-ink: #17201b;                   /* the letter on a card: 14.1 on the face */
    --card-red: #a8392b;                   /* hearts and diamonds on the face: 5.4 (the dusty red is too pale on it) */
    max-width: 33em;
    font-size: max(1rem, calc(1.2 * var(--u, 1vw)));
}

.dialog--hands .config-body {
    padding: 1em 1.25em 1.25em;
}

.dialog--hands h2 {
    margin: 0 0 0.75em;
    font-family: var(--font-display);
    font-size: 1.25em;
}

/* One list, filled down: 1-5 in the left column, 6-10 in the right one. */
.hands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 0.9em 1.75em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hand-name {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin: 0 0 0.3em;
    font-weight: 600;
}

.hand-number {
    flex: none;
    min-width: 1.5em;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-weight: 700;
}

.hand-cards {
    display: flex;
    gap: 0.3em;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A card: a light face, the letter in the display font and the suit under it. */
.card {
    position: relative;
    flex: none;
    width: 2.1em;
    height: 2.9em;
    background: var(--color-text);
    color: var(--card-ink);
    border-radius: 0.3em;
    box-shadow: 0 0.1em 0.25em rgb(0 0 0 / 0.5);
}

.card-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05em;
    height: 100%;
}

.card-rank {
    font-family: var(--font-display);
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1;
}

.card .suit {
    width: 1.1em;
    height: 1.1em;
}

.card .suit--heart,
.card .suit--diamond {
    color: var(--card-red);
}

/* The red rank follows its suit: the letter of a heart or diamond card is red as well. */
.card:has(.suit--heart) .card-rank,
.card:has(.suit--diamond) .card-rank {
    color: var(--card-red);
}

/* The other cards of the five, which do not make the hand. */
.card.is-dimmed {
    opacity: 0.4;
    box-shadow: none;
}

/* A narrow window (not the landscape this is made for): one column, and the body scrolls. */
@media (max-width: 36rem) {
    .hands {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

/* A short screen (a phone held sideways): smaller cards and gaps; whatever still does not fit scrolls. */
@media (max-height: 30rem) {
    .dialog--hands {
        font-size: 0.8125rem;
    }

    .dialog--hands .config-body {
        padding: 0.75em 1.25em 1em;
    }

    .dialog--hands h2 {
        margin-bottom: 0.5em;
        font-size: 1.15em;
    }

    .hands {
        gap: 0.6em 1.75em;
    }

    .hand-name {
        margin-bottom: 0.2em;
    }

    .card {
        width: 1.9em;
        height: 2.5em;
    }

    .dialog--hands .config-actions {
        padding: 0.5rem var(--space);
    }
}

/* ... and when it is wide enough as well, the name goes left of the cards: five rows instead of five pairs of lines,
   so that the ten hands fit a phone held sideways (844 x 390) without scrolling. */
@media (max-height: 30rem) and (min-width: 46rem) {
    .dialog--hands {
        max-width: 48em;
    }

    .hands {
        gap: 0.6em 1.5em;
    }

    .hand {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .hand-name {
        flex: none;
        width: 10em;
        margin: 0;
    }
}