:root {
    color-scheme: light;
    --ink: #172c20;
    --muted: #455b4c;
    --link: #195d3c;
    --accent: #195d3c;
    --action: #195d3c;
    --action-hover: #226f48;
    --action-secondary: var(--inset);
    --action-secondary-hover: var(--raised);
    --page: #f3f7f4;
    --surface: #fff;
    --raised: #e4ede6;
    --inset: #f3f7f4;
    --hero: #e4ede6;
    --border: #c8d6cb;
    --line: #e0e9e1;
    --table-stripe: rgb(25 93 60 / .045);
    --decoration: #658772;
    --control-border: #718d7b;
    --negative: #951b1b;
    --message-success: #17613b;
    --message-warning: #755100;
    --tooltip-bg: #172c20;
    --bulma-primary-h: 151deg;
    --bulma-primary-s: 57%;
    --bulma-primary-l: 23%;
    --bulma-primary-invert-l: 100%;
    background: var(--page);
    color: var(--ink);
    font: 1rem/1.5 system-ui, sans-serif;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #fff;
    --muted: #ede8f1;
    --link: #fff;
    --accent: #c7a9ef;
    --action: #484848;
    --action-hover: #5b5b5b;
    --action-secondary: #242424;
    --action-secondary-hover: #383838;
    --page: #0d0912;
    --surface: #1c1526;
    --raised: #2a2037;
    --inset: #110d17;
    --hero: linear-gradient(115deg, #241931, #17101f 66%, #110d17);
    --border: #44374f;
    --line: #3a3045;
    --table-stripe: rgb(255 255 255 / .04);
    --decoration: #bdb8c4;
    --control-border: #807189;
    --negative: #ffb9cd;
    --message-success: #a7f3c2;
    --message-warning: #ffe08a;
    --tooltip-bg: #100b15;
    --bulma-primary-s: 0%;
    --bulma-primary-l: 28%;
    --site-backdrop:
        radial-gradient(ellipse at 78% 16%, rgb(59 38 80 / .65), transparent 62%),
        linear-gradient(135deg, rgb(8 6 11 / .35), rgb(9 7 12 / .65));
}
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); }
[data-theme="dark"] body { isolation: isolate; }
[data-theme="dark"] body:has(.site-header) {
    --site-backdrop:
        linear-gradient(115deg, rgb(13 9 18 / .63), rgb(24 12 32 / .68)),
        url("branding/site-background.jpg");
    --hero: linear-gradient(115deg, rgb(36 25 49 / .96), rgb(23 16 31 / .9) 66%, rgb(17 13 23 / .8));
}
[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--page);
    background-image: var(--site-backdrop);
    background-size: cover;
    background-position: center;
}
main { max-width: clamp(70rem, 80vw, 96rem); margin: auto; padding: clamp(1rem, 3vw, 2rem); }
.app-detail main { padding: .55rem; }
.app-detail .site-content { margin-block-start: 0; }
main:has(> .site-footer) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    padding-block-end: 0;
}
.site-content { display: flow-root; }
.site-content:not(.site-content--landing) {
    min-block-size: 13rem;
    margin-block-start: 1rem;
    padding: clamp(.85rem, 2vw, 1.4rem);
    background: color-mix(in srgb, var(--inset) 85%, transparent);
    border: 1px solid var(--border);
    border-radius: .65rem;
}
.site-content:not(.site-content--landing) > :first-child { margin-block-start: 0; }
.site-content:not(.site-content--landing) > :last-child { margin-block-end: 0; }
.site-content > .auth-panel { margin-inline: auto; }
h1, h2, h3 { color: var(--ink); font-weight: 740; line-height: 1.2; }
h1 { margin: 1.3rem 0; font-size: clamp(1.8rem, 4vw, 2.5rem); }
h2 { margin: 0 0 .8rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h3 { margin: 1rem 0 .6rem; font-size: 1.15rem; }
main p { margin: .8rem 0; }
main strong { color: inherit; }
a:where(:not(.button, .button-link)) {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-color: var(--accent);
}
a:where(:not(.button, .button-link)):hover { text-decoration-thickness: .13em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-brand { display: block; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: .65rem; overflow: hidden; }
.site-brand img { display: block; width: 100%; height: auto; }
.site-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem; margin-inline-start: auto; }
.site-account form { margin: 0; }
.site-account-menu { position: relative; inline-size: 9rem; }
.site-account-menu > summary { box-sizing: border-box; inline-size: 100%; gap: .55rem; list-style: none; }
:is(.site-account-menu, .league-nav-menu) > summary::-webkit-details-marker { display: none; }
:is(.site-account-menu, .league-nav-menu) > summary::after {
    content: "";
    inline-size: .45rem;
    block-size: .45rem;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-.12rem) rotate(45deg);
}
:is(.site-account-menu, .league-nav-menu)[open] > summary::after { transform: translateY(.12rem) rotate(225deg); }
.site-account-options, .league-nav-options {
    box-sizing: border-box;
    position: absolute;
    z-index: 5;
    inset-block-start: 100%;
    max-block-size: 65dvh;
    overflow: auto;
    padding: .35rem;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: .5rem;
    box-shadow: 0 .45rem 1.5rem rgb(0 0 0 / .4);
}
.site-account-options { inset-inline-end: 0; inline-size: 100%; }
.site-account-options a, .site-account-options button:not(.button) {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    padding: .52rem .78rem;
    background: transparent;
    color: var(--ink);
    text-align: start;
}
.site-account-options button:not(.button):hover { background: var(--raised); }
.site-account-identity {
    margin-block-end: .25rem;
    padding: .35rem .55rem;
    border-radius: .35rem;
    background: var(--raised);
    color: var(--ink);
    font-size: .875rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}
.site-account-options form { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--border); }
.account-settings-body { margin-inline: 0; padding: 0; }
.button-link { display: inline-block; padding: .55rem .85rem; border: 1px solid var(--action); border-radius: .4rem; background: var(--action); color: white; font-weight: 650; text-decoration: none; }
.button-link:hover { background: var(--action-hover); color: white; }
.button.site-secondary { background: var(--action-secondary); border: 1px solid var(--control-border); color: var(--ink); }
.button.site-secondary:hover { background: var(--action-secondary-hover); color: var(--ink); }
.button.is-primary, .button.site-secondary { font-weight: 650; }
.site-footer { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.site-footer-credit { display: inline-flex; align-items: center; gap: .4rem; margin-inline-start: auto; white-space: nowrap; }
.site-footer-credit img { display: block; width: 6rem; height: auto; }
.league-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    min-height: clamp(27rem, 63svh, 40rem);
    margin: clamp(1.4rem, 3vw, 2.4rem) 0 .85rem;
    padding: clamp(1.4rem, 5vw, 4rem);
    overflow: hidden;
    background: var(--hero);
    border: 1px solid var(--border);
    border-radius: .85rem;
}
.league-welcome h1 { max-width: 19ch; margin: .6rem 0 1.15rem; font-size: clamp(2.15rem, 5.3vw, 4.05rem); letter-spacing: -.045em; line-height: 1.04; }
.welcome-copy > p { max-width: 50ch; }
.site-eyebrow { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.site-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.65rem; }
.site-whatsapp { display: inline-flex; align-items: center; gap: .5rem; }
.site-whatsapp svg { flex: none; color: var(--message-success); }
.welcome-links { display: grid; justify-items: start; gap: .65rem; margin-top: 1rem; }
.welcome-whatsapp {
    padding: .55rem .85rem;
    border: 1px solid #328460;
    border-radius: .55rem;
    background: #142a20;
    color: #c7f5da;
    font-size: .9rem;
    font-weight: 650;
    text-decoration: none;
}
.welcome-whatsapp:hover { background: #1b392a; color: #e9fff0; }
.welcome-android { gap: .5rem; max-width: 100%; height: auto; white-space: normal; }
.welcome-android svg { flex: none; }
.welcome-field {
    min-width: 0;
    transform: rotate(-8deg);
}
.welcome-field > svg { display: block; width: 100%; height: auto; }
.field-avatar-mark [stroke]:not([stroke="none"]) { stroke: var(--decoration); }
.field-avatar-mark [fill]:not([fill="none"]) { fill: var(--inset); }
.field-cabinet { fill: var(--inset); stroke: var(--border); stroke-width: 6; }
.field-marking { fill: none; stroke: var(--decoration); stroke-width: 1.15; opacity: .36; }
.field-team-home { color: var(--decoration); --field-cap-color: #f0edf5; }
.field-team-away { color: #bd6069; --field-cap-color: #f4acb0; }
.field-rod { stroke: var(--decoration); stroke-width: 1.5; opacity: .48; }
.field-handle { fill: currentColor; opacity: .8; }
.field-head { fill: currentColor; stroke: var(--inset); stroke-width: .9; }
.field-cap { fill: var(--field-cap-color); }
.welcome-scroll { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem 0; font-size: .9rem; }
.welcome-scroll::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border: solid var(--decoration);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) translateY(-.13rem);
}
.welcome-news, .welcome-overview { margin: clamp(2rem, 5vw, 4rem) 0; scroll-margin-top: 1.5rem; }
:is(.welcome-news, .welcome-overview) h2 { margin-bottom: 1.25rem; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.025em; }
.welcome-news .welcome-card p { max-width: 72ch; white-space: pre-line; }
.beta-guide > p, .beta-guide > ol { max-width: 76ch; }
.beta-guide > ol { list-style: decimal; margin: 1rem 0 0; padding-inline-start: 1.5rem; }
.beta-guide li + li { margin-block-start: .9rem; }
.beta-guide li::marker { color: var(--accent); font-weight: 700; }
.beta-guide a { overflow-wrap: anywhere; }
.welcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.welcome-grid .welcome-card {
    --bulma-box-background-color: var(--surface);
    --bulma-box-color: var(--ink);
    --bulma-box-shadow: none;
    --bulma-box-padding: clamp(1rem, 3vw, 1.65rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    margin: 0;
}
.welcome-card h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.welcome-card p:last-child { margin-top: auto; margin-bottom: 0; padding-top: .45rem; }
@media (max-width: 48rem) {
    .league-welcome { grid-template-columns: 1fr; min-height: auto; padding: clamp(1.35rem, 6vw, 2.6rem); }
    .welcome-field { width: min(90%, 19rem); justify-self: center; }
}
.site-note { background: var(--raised); padding: .65rem .85rem; border-radius: .4rem; }
.rules-panel > p, .site-legal-copy { max-width: 76ch; }
.site-legal-copy { white-space: pre-wrap; overflow-wrap: anywhere; }
.team-name { display: inline-flex; align-items: center; gap: .55rem; }
.standings-team-name { flex-wrap: nowrap; white-space: nowrap; vertical-align: middle; }
.team-logo { flex: none; object-fit: contain; border-radius: .3rem; }
.standings-captain { text-align: center; }
.standings-captain-figures { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; }
.standings-captain-figure { display: inline-flex; align-items: center; vertical-align: middle; }
.standings-captain-figure > .avatar-figure { width: 1.75rem; height: 1.85rem; margin: 0; }
.standings-captain-hidden { opacity: .65; }
.standings-captain-figure > svg { pointer-events: none; }
.profile-logo { width: clamp(3rem, 7vw, 4.5rem); height: auto; }
.team-banner {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.team-profile-heading, .team-profile-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem 1rem;
}
.panel.team-profile-heading {
    justify-content: space-between;
    min-height: 5rem;
    margin: 0;
}
.panel.team-profile-heading--with-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 5 / 1;
    min-height: 0;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: .5rem;
    padding: clamp(.4rem, 2vw, 1rem);
}
.team-profile-heading--with-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(13 9 18 / .8), rgb(13 9 18 / .18) 70%);
    pointer-events: none;
}
.team-profile-heading :is(h1, .site-eyebrow) { margin: 0; }
.team-profile-heading--with-banner :is(h1, .site-eyebrow) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
}
.team-profile-identity { min-width: 0; }
.team-profile-title { min-width: 0; overflow-wrap: anywhere; }
.team-profile-edit { flex: none; margin-inline-start: auto; }
.team-profile-heading--with-banner .team-profile-edit { align-self: flex-end; }
.team-profile-links { padding: .6rem .25rem 0; }
@media (max-width: 36rem) {
    .team-profile-heading--with-banner .team-profile-identity { gap: .35rem; }
    .team-profile-heading--with-banner .profile-logo { width: clamp(1.5rem, 8vw, 2.5rem); }
    .team-profile-heading--with-banner h1 { font-size: clamp(.9rem, 4vw, 1.5rem); }
    .team-profile-heading--with-banner .site-eyebrow { font-size: .6rem; letter-spacing: .05em; }
    .team-profile-heading--with-banner .team-profile-edit { height: auto; min-height: 1.75rem; padding: .2rem .4rem; font-size: .68rem; }
}
.team-profile-reports { margin-inline-start: auto; color: var(--muted); font-size: .8rem; }
.team-profile-reports a { display: inline-block; margin-inline-end: .7rem; }
.team-directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.team-directory-card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 4.25rem;
    height: 100%;
    aspect-ratio: 4 / 1;
    padding: .6rem .75rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: var(--raised);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.team-directory-card--with-banner { color: #fff; }
.team-directory-card--with-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(13 9 18 / .82), rgb(13 9 18 / .62));
}
a.team-directory-card:is(:hover, :focus-visible) { border-color: var(--accent); }
.team-roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: .75rem;
    padding: 0;
    list-style: none;
}
.team-roster-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    height: 100%;
    padding: .6rem .75rem .85rem;
    border: 1px solid var(--border);
    border-radius: .6rem;
    background: var(--raised);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}
a.team-roster-card:is(:hover, :focus-visible) { border-color: var(--accent); }
.team-roster-card .avatar-figure { width: min(100%, 7rem); margin: 0 auto; }
.team-roster-card span { color: var(--muted); font-size: .9rem; }
.team-roster-card--placeholder {
    border-style: dashed;
    background: var(--inset);
}
.team-roster-card--placeholder .avatar-figure { filter: grayscale(.75); }
.team-roster-card--placeholder summary { width: 100%; cursor: pointer; color: var(--muted); }
.team-roster-card--placeholder .team-roster-info-text {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 2;
    margin: 0;
    padding: .65rem;
    border: 1px solid var(--control-border);
    border-radius: .5rem;
    background: var(--tooltip-bg);
    color: var(--ink);
    font-size: .9rem;
    text-align: start;
}
.team-roster-card .team-roster-captain {
    position: absolute;
    inset: .5rem auto auto .5rem;
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: var(--inset);
    color: var(--accent);
    font-weight: 700;
}
.player-profile-team { display: grid; justify-items: start; gap: .15rem; margin-block: .6rem; }
.player-profile-team small { color: var(--muted); }
.event-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.event-gallery figure { margin: 0; background: var(--inset); border: 1px solid var(--border); border-radius: .55rem; overflow: hidden; }
.event-gallery figure > a { display: block; }
.event-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--raised); }
.event-gallery span, .event-gallery figcaption { display: block; padding: .55rem .75rem; overflow-wrap: anywhere; }
.event-gallery figcaption { padding-top: 0; font-size: .9rem; }
.auth-panel { max-width: 32rem; margin: 1.5rem auto; }
.auth-form:not([hidden]) { display: grid; gap: .55rem; }
.auth-form input { padding: .55rem; font: inherit; border: 1px solid var(--control-border); border-radius: .3rem; min-width: 0; max-width: 100%; }
.auth-form button { justify-self: start; margin-top: .3rem; }
.league-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .35rem; background: var(--inset); border: 1px solid var(--border); border-radius: .65rem; }
.league-tab-links { display: flex; flex-wrap: wrap; gap: .25rem; }
.league-tabs .league-menu-toggle { display: none; }
.league-nav-menu { position: relative; }
.league-nav-menu > summary { display: flex; align-items: center; gap: .55rem; list-style: none; cursor: pointer; }
.league-nav-options { inset-inline-start: 0; inline-size: max-content; max-inline-size: 100vw; }
.league-nav-options a { display: block; }
.site-captain-action.button {
    align-self: center;
    margin-inline-end: .25rem;
    border-color: transparent;
    background: var(--accent);
    color: var(--inset);
    font-weight: 750;
}
.site-captain-action.button:hover {
    background: color-mix(in srgb, var(--accent) 85%, var(--surface));
    color: var(--inset);
}
.site-captain-action, .captain-parties-link { gap: .4rem; }
.captain-parties-link { display: inline-flex; align-items: center; }
.captain-pending-count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: .25rem;
    border-radius: 999px;
    background: #b52143;
    color: #fff;
    font-size: .75rem;
    font-weight: 750;
    line-height: 1;
}
.league-menu-toggle .captain-pending-count { position: absolute; inset: -.2rem -.2rem auto auto; }
.league-menu-toggle { position: relative; }
.pending-match-reviews li { display: flex; flex-wrap: wrap; gap: .2rem .75rem; align-items: baseline; }
.pending-match-reviews li + li { margin-top: .5rem; }
.pending-match-reviews li span { color: var(--muted); }
.site-avatar-line {
    --avatar-width: 36px;
    --avatar-reroll-size: 34px;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    column-gap: 4px;
    min-width: 0;
    container-type: inline-size;
}
.site-avatar-rod {
    position: relative;
    display: flex;
    flex: 1 1 0;
    justify-content: space-between;
    min-width: 0;
    padding-inline: 2px;
}
@container (width < 120px) { .site-avatar-rod { --avatar-width: 32px; } }
@media (pointer: coarse) {
    .site-avatar-line { --avatar-width: 44px; --avatar-reroll-size: 44px; }
    .site-avatar-rod { --avatar-width: inherit; }
}
.site-avatar-rod:empty { display: none; }
.site-avatar-rod:has(> :only-child) { justify-content: center; }
.site-avatar-rod::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 57.5%;
    height: 5px;
    transform: translateY(-50%);
    background: linear-gradient(#c9d1df, #9da6b9 50%, #687187);
    border-radius: 99px;
}
.site-avatar-rod .avatar-figure {
    width: 100%;
    height: 48px;
    margin: 0;
    pointer-events: none;
    transform-origin: 50% 57.5%;
    transition: transform 180ms ease-out;
}
.league-tabs a:not(.button), .league-nav-menu > summary { padding: .52rem .78rem; border-radius: .4rem; color: var(--ink); text-decoration: none; font-weight: 650; }
.league-tabs a:where(:not(.button)):hover, .league-nav-menu > summary:hover { background: var(--raised); }
.league-tabs a[aria-current="page"], .league-nav-menu:has([aria-current="page"]) > summary, button:not(.button) { background: var(--action); color: white; }
.league-tabs a.site-avatar-link {
    position: relative;
    display: block;
    flex: none;
    width: var(--avatar-width);
    padding: 0;
    background: transparent;
}
.league-tabs a.site-avatar-link:is(.is-speaking, :focus-visible) {
    z-index: 1;
}
.site-avatar-link:is(.is-speaking, :focus-visible) .avatar-figure {
    transform: scale(1.45);
}
.site-avatar-speech {
    position: absolute;
    inset-block-end: calc(100% + .85rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: max-content;
    max-inline-size: 10.5rem;
    padding: .35rem .6rem;
    border-radius: .65rem;
    background: #f7f0ff;
    box-shadow: 0 .15rem .5rem #0007;
    color: #21192d;
    font-size: .8rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
    user-select: none;
    visibility: hidden;
}
.site-avatar-speech::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-block-start-color: #f7f0ff;
    border-block-end: 0;
}
.site-avatar-link:is(.is-speaking, :focus-visible) .site-avatar-speech:not(:empty) {
    visibility: visible;
}
.site-avatar-reroll:not([hidden]) {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: var(--avatar-reroll-size);
    block-size: var(--avatar-reroll-size);
    padding: 0;
    border-radius: .45rem;
    background: var(--accent);
    color: var(--inset);
}
.site-avatar-reroll:not([hidden]):hover {
    background: color-mix(in srgb, var(--accent) 85%, var(--surface));
}
@media (prefers-reduced-motion: reduce) {
    .site-avatar-rod .avatar-figure { transition: none; }
}
button:not(.button):hover { background: var(--action-hover); }
@media (max-width: 64rem) {
    .league-tabs .league-menu-toggle:not([hidden]) {
        display: grid;
        place-items: center;
        flex: none;
        inline-size: 44px;
        block-size: 44px;
        padding: 0;
    }
    .league-tabs[data-mobile-open] { gap: .35rem .5rem; }
    .league-tabs[data-mobile-open] .site-avatar-line { order: 1; --avatar-reroll-size: 44px; }
    .league-tabs[data-mobile-open] .site-avatar-rod .avatar-figure { height: 44px; }
    .league-tabs[data-mobile-open] .league-tab-links {
        order: 2;
        flex: 0 0 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
        padding-block-start: .35rem;
        border-top: 1px solid var(--border);
    }
    .league-tabs[data-mobile-open] .site-account {
        order: 3;
        flex: 0 0 100%;
        justify-content: flex-start;
        margin-inline-start: 0;
    }
    .league-tabs[data-mobile-open="false"] :is(.league-tab-links, .site-account) { display: none; }
    .league-tabs[data-mobile-open] :is(.league-nav-options, .site-account-options) {
        position: static;
        inline-size: 100%;
        box-shadow: none;
    }
}
@media (max-width: 32rem) {
    .site-account .button { font-size: .88rem; }
    .league-tabs a:not(.button, .site-avatar-link), .league-nav-menu > summary { padding: .48rem .55rem; font-size: .88rem; }
    .league-tab-links { position: relative; }
    .league-nav-menu { position: static; }
    .league-nav-options { max-inline-size: 100%; }
}
.season-select, .back { margin: 1rem 0; }
.season-select { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
select, button { max-width: 100%; font: inherit; padding: .5rem; }
button { border: 0; border-radius: .3rem; cursor: pointer; }
input, select { background: var(--inset); color: var(--ink); }
select, .elo-period input[type="date"] { border: 1px solid var(--control-border); border-radius: .3rem; }
main code { background: var(--inset); color: var(--ink); }
.panel { --bulma-panel-margin: 1rem; background: var(--surface); box-shadow: none; border: 1px solid var(--border); border-radius: .6rem; padding: 1rem; margin: 1rem 0; }
.panel > h1:first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
td, th { text-align: right; border-bottom: 1px solid var(--line); padding: .5rem; }
tbody tr:last-child > * { border-bottom: 0; }
thead th { color: var(--muted); font-size: .9rem; }
tbody th { font-weight: 550; }
.standings-panel tbody tr:nth-child(even) { background-color: var(--table-stripe); }
.standings-panel tbody .standings-current-team { background: var(--raised); }
.team-standings-toggle { margin-block-end: .65rem; gap: .6rem; }
.team-standings-toggle[hidden] { display: none; }
.team-standings-toggle::after {
    content: "";
    width: .5rem;
    height: .5rem;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-.12rem) rotate(45deg);
}
.team-standings-toggle[aria-expanded="true"]::after { transform: translateY(.12rem) rotate(225deg); }
.text { text-align: left; }
.sort-link { color: inherit; text-underline-offset: .2em; }
summary { cursor: pointer; }
.league-results { display: grid; gap: 1rem; margin-block: 1rem; align-items: start; }
.league-results > .result-panel { min-width: 0; margin: 0; }
.result-panel > summary { font-weight: 700; }
#elo-hilfe { scroll-margin-top: 1rem; }
@media (min-width: 90rem) {
    .league-welcome { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .welcome-field { width: min(100%, 35rem); justify-self: center; }
    .league-results { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .standings-panel :is(th, td) { padding: .7rem .85rem; }
}
.count, .badge { display: inline-block; background: var(--raised); color: var(--ink); border-radius: 1rem; padding: .08rem .55rem; font-size: .88rem; white-space: nowrap; }
time { color: var(--muted); }
.rating { font-size: 1.15rem; margin: 0; }
.rating strong { font-size: 2rem; font-variant-numeric: tabular-nums; }
.elo-period { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.elo-period input[type="date"] { font: inherit; padding: .4rem; }
.elo-custom { margin-bottom: 1rem; }
.elo-chart { margin: 1rem 0 0; }
.elo-chart svg { display: block; width: 100%; min-width: 36rem; }
.elo-readout { background: var(--raised); border-radius: .4rem; padding: .4rem .65rem; margin: 0 0 .5rem; width: fit-content; }
.elo-chart .grid { fill: none; stroke: var(--line); }
.elo-chart .axis { fill: none; stroke: var(--muted); }
.elo-chart .tick { fill: var(--muted); font-size: 15px; }
.elo-chart .axis-label { fill: var(--ink); font-size: 17px; font-weight: 650; }
.elo-chart .curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.elo-chart .elo-point { cursor: pointer; }
.elo-chart .hit-area { fill: transparent; }
.elo-chart .dot { fill: var(--accent); pointer-events: none; }
.elo-chart .elo-point:hover .dot, .elo-chart .elo-point:focus-visible .dot, .elo-chart .elo-point.is-active .dot {
    stroke: var(--accent);
    stroke-width: 2.5;
    fill: white;
}
.elo-point-tooltip { display: none; pointer-events: none; }
.elo-point-tooltip.is-visible { display: initial; }
.elo-point-tooltip rect { fill: var(--tooltip-bg); stroke: var(--control-border); }
.elo-point-tooltip text { fill: white; font-size: 15px; }
.elo-point-tooltip .tooltip-value { font-weight: 700; }
.elo-doubles td { vertical-align: middle; }
.elo-doubles col.elo-compact { width: 1%; }
.elo-doubles :is(th, td) { padding-block: .4rem; }
.elo-doubles :is(th, td):not(.text) { padding-inline: .4rem; }
.elo-doubles .elo-opponents { white-space: nowrap; }
button.elo-person {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
    white-space: nowrap;
    cursor: pointer;
}
button.elo-person:hover, button.elo-person:focus-visible { background: transparent; color: var(--accent); }
.elo-history-tooltip {
    position: fixed;
    z-index: 20;
    padding: .3rem .55rem;
    border: 1px solid var(--control-border);
    border-radius: .35rem;
    background: var(--tooltip-bg);
    color: #fff;
    font-size: .875rem;
    white-space: nowrap;
    pointer-events: none;
}
.elo-gain { color: var(--accent); }
.elo-loss { color: var(--negative); }
.elo-chart figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); font-size: .9rem; }
.elo-chart-tip { flex-basis: 100%; }
.match-history { border-top: 1px solid var(--line); padding: .75rem 0; }
.match-history:last-child { padding-bottom: 0; }
.history-heading > * { margin-inline-end: .45rem; }
/* Systemmeldungen: Status mit Erfolgsklasse, Warnung mit Warnklasse, Fehler mit role="alert". */
.system-message-success { --message-color: var(--message-success); }
.system-message-warning { --message-color: var(--message-warning); }
p[role="alert"] { --message-color: var(--negative); }
:is(.system-message-success, .system-message-warning, p[role="alert"]) {
    padding: .7rem .9rem;
    border: 1px solid color-mix(in srgb, var(--message-color) 45%, var(--inset));
    border-inline-start: .25rem solid var(--message-color);
    border-radius: .45rem;
    background: color-mix(in srgb, var(--message-color) 12%, var(--inset));
    color: var(--message-color);
    overflow-wrap: anywhere;
}

.team-page { max-width: 42rem; margin-block: 1.5rem; }
.team-page-wide { max-width: 64rem; }
.team-page :is(section, fieldset) {
    min-width: 0;
    margin-block: 1rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .6rem;
}
.team-page label { display: block; margin-block: .65rem; }
.team-page :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
    max-width: 100%;
    min-width: 0;
    padding: .5rem;
    font: inherit;
    color: var(--ink);
    background: var(--inset);
    border: 1px solid var(--control-border);
    border-radius: .3rem;
}
.team-page :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
.team-page :is(code, pre) { overflow-wrap: anywhere; }
.team-page pre { white-space: pre-wrap; color: var(--ink); background: var(--inset); }
.team-page .notice { white-space: pre-wrap; }
.team-page :is(th, td) { text-align: left; }
.team-page .trap { position: absolute; left: -10000px; }
.account-settings-body { display: grid; gap: 1.2rem; }
.account-settings-body > :is(p, .settings-card) { margin: 0; }
.account-settings-body .settings-card { padding: clamp(1rem, 2.5vw, 1.35rem); }
@media (min-width: 64rem) {
    .account-profile-layout {
        max-width: 72rem;
        grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 1fr);
        align-items: start;
    }
    .account-profile-layout > p { grid-column: 1 / -1; }
}
.account-settings-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-block: .8rem 1.2rem; }
.account-settings-tabs a {
    padding: .45rem .8rem;
    border: 1px solid var(--border);
    border-radius: .4rem;
    background: var(--inset);
    text-decoration: none;
}
.account-settings-tabs a:is(:hover, [aria-current="page"]) { background: var(--raised); }
.account-settings-tabs a[aria-current="page"] { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.settings-card > :last-child { margin-block-end: 0; }
.profile-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .65rem 1rem;
}
.profile-fields > div { display: grid; gap: .25rem; }
.profile-fields label { margin: 0; }
.profile-fields input { width: 100%; }
.profile-fields small { color: var(--muted); font-size: .8rem; text-align: end; }
.settings-invitation + .settings-invitation,
.settings-notice-area {
    margin-block-start: 1.15rem;
    padding-block-start: 1.15rem;
    border-block-start: 1px solid var(--border);
}
.settings-history { margin: .9rem 0 0 1.35rem; padding-inline-start: .8rem; border-inline-start: 2px solid var(--border); }
.settings-history h3 { margin-block-start: 0; }
.settings-history input:disabled + span { color: var(--muted); }
.settings-card .settings-visibility { margin: 1.15rem 0 0; padding: 0; background: none; border: 0; }
.settings-visibility legend { font-weight: 650; }
.settings-card .settings-choice { display: flex; align-items: baseline; gap: .55rem; }
.settings-choice input { flex: none; }
.settings-notice summary { text-decoration: underline; text-underline-offset: .2em; }
.settings-notice + .settings-choice { margin-block-start: 1rem; }
.settings-action {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-block-start: .8rem;
}
.settings-action > button { min-block-size: 2.5rem; min-inline-size: 0; padding: .55rem .85rem; }
.settings-action > button:disabled, .settings-action > button:disabled:hover {
    background: var(--action);
    cursor: default;
    opacity: .55;
}
.settings-help { flex: none; }
.settings-help summary {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    list-style: none;
    border: 1px solid var(--control-border);
    border-radius: 50%;
    color: var(--muted);
    font: bold italic 1rem Georgia, serif;
}
.settings-help summary::-webkit-details-marker { display: none; }
.settings-help summary:hover, .settings-help[open] summary { background: var(--raised); }
.settings-help p {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    inset-block-start: 100%;
    inset-inline-start: 0;
    inline-size: min(100%, 28rem);
    margin: .35rem 0 0;
    padding: .65rem .8rem;
    border: 1px solid var(--control-border);
    border-radius: .4rem;
    background: var(--inset);
    color: var(--ink);
    box-shadow: 0 .35rem 1rem rgb(0 0 0 / .3);
}
.avatar-workbench {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 1rem;
    align-items: start;
}
.avatar-stage, .avatar-profile-art, .avatar-thumb:not(:empty), .avatar-table-preview {
    border: 1px solid #625471;
    border-radius: .55rem;
    background: radial-gradient(ellipse at 50% 37%, #87799e, #4b405d);
}
.avatar-stage { position: sticky; top: .5rem; margin: 0; padding: .55rem; }
.avatar-stage figcaption {
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}
.avatar-stage-actions {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: .25rem;
}
.avatar-stage-actions button {
    min-height: 2.5rem;
    padding: .4rem .5rem;
    border: 1px solid var(--control-border);
    background: var(--inset);
    font-size: .875rem;
}
.avatar-stage-actions button:hover { background: var(--raised); }
.avatar-figure { display: block; width: 100%; height: auto; margin: auto; }
.avatar-placeholder { filter: grayscale(1); }
.avatar-figure:has(g:not([hidden]) > .avatar-bushy-beard) .avatar-mouth-dark {
    filter: drop-shadow(0 1.3px 0 #eabda4);
}
.avatar-thumb {
    display: block;
    flex: none;
    width: 2.7rem;
    height: 2.7rem;
    padding: .1rem;
}
.avatar-thumb > .avatar-figure { height: 100%; }
.avatar-table-preview {
    position: fixed;
    z-index: 10;
    width: min(13rem, calc(100vw - 1rem), calc(100vh - 1rem));
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    padding: .5rem;
    box-shadow: 0 .45rem 1.4rem rgb(0 0 0 / .45);
}
.player-with-avatar { display: inline-flex; align-items: center; gap: .5rem; }
.avatar-join { margin-top: 1rem; }
.avatar-join .settings-action { flex-wrap: wrap; }
.avatar-settings [hidden] { display: none !important; }
.avatar-id-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .55rem .7rem;
}
.avatar-id-fields label { display: grid; gap: .25rem; min-width: 0; margin: 0; }
.avatar-id-fields input { width: 100%; min-width: 0; font-family: ui-monospace, monospace; }
.avatar-id [role="status"] { margin: .55rem 0 0; }
@media (max-width: 26rem) {
    .avatar-id-fields { grid-template-columns: minmax(0, 1fr); }
    .avatar-id-fields button { justify-self: start; }
}
.avatar-figure[data-avatar-top="dress"] [data-avatar-separates] { display: none; }
.avatar-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    margin-bottom: .65rem;
}
.avatar-tabs button {
    min-height: 2.45rem;
    padding: .35rem;
    border: 1px solid var(--control-border);
    border-radius: .35rem;
    background: var(--inset);
    color: var(--ink);
    font-size: .85rem;
}
.avatar-tabs button[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--raised);
    box-shadow: inset 0 -2px var(--accent);
}
.team-page .avatar-group {
    display: grid;
    gap: .45rem;
    margin: 0 0 .65rem;
    padding: .5rem .65rem;
    background: var(--inset);
}
.avatar-group legend { padding-inline: .25rem; font-weight: 650; }
.avatar-control-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .1rem .45rem;
    font-size: .9rem;
}
.avatar-value { display: inline-flex; align-items: center; gap: .25rem; color: var(--accent); }
.avatar-value svg { flex: none; }
.avatar-settings input[type="range"] {
    display: block;
    width: 100%;
    height: 1.65rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--accent);
    cursor: pointer;
}
.avatar-profile-layout.columns { margin: 0; gap: clamp(1rem, 3vw, 1.75rem); }
.avatar-profile-layout > .column { min-width: 0; padding: 0; }
.avatar-profile-identity {
    display: flex;
    align-items: center;
    gap: clamp(.7rem, 2vw, 1.15rem);
}
.avatar-profile-identity > div { min-width: 0; overflow-wrap: anywhere; }
.avatar-profile-identity h1 { margin: 0 0 .45rem; font-size: clamp(1.45rem, 3vw, 2.4rem); }
.avatar-profile-identity p:last-child { margin-bottom: 0; }
.avatar-profile-art { flex: none; width: clamp(7.5rem, 16vw, 12rem); padding: .35rem; }
.avatar-quote {
    padding: .45rem .5rem;
    border-radius: .3rem;
    background: var(--inset);
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}
.avatar-profile-layout > .avatar-profile-summary {
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line);
}
.profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}
.profile-details > div {
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: .45rem;
    background: linear-gradient(145deg, var(--raised), var(--inset));
}
.profile-details > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.profile-details dt {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--accent);
    font-size: .8rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.profile-details dt svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.profile-details dd {
    margin: .35rem 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}
@media (max-width: 22rem) {
    .profile-details { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 64rem) {
    .avatar-profile-layout > .avatar-profile-summary {
        margin-block-start: 0;
        padding-block-start: 0;
        padding-inline-start: clamp(1rem, 3vw, 1.75rem);
        border-block-start: 0;
        border-inline-start: 1px solid var(--line);
    }
}
@media (max-width: 38rem) {
    .avatar-workbench {
        --avatar-mobile-size: min(9.75rem, 26dvh);
        --avatar-stage-height: calc(var(--avatar-mobile-size) * 1.0625 + 5.15rem);
        grid-template-columns: minmax(0, 1fr);
        gap: .35rem;
    }
    .avatar-stage { top: 0; z-index: 2; }
    .avatar-stage .avatar-figure { max-width: var(--avatar-mobile-size); }
    .avatar-tabs {
        position: sticky;
        top: var(--avatar-stage-height);
        z-index: 1;
        margin-bottom: .35rem;
        padding-block: .35rem;
        background: var(--surface);
    }
    .avatar-control :is(input, select) { scroll-margin-top: calc(var(--avatar-stage-height) + 6.25rem); }
}
.match-page :is(form, .row) { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
.match-entry-workspace, .team-management { margin: 0; }
.match-entry-workspace > h1 { margin-block-start: .3rem; }
.team-management { max-width: none; }
.team-management h1 { margin-block: .3rem 1.25rem; }
.team-management-heading, .team-season-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: .65rem 1.2rem;
    margin-block: 1.5rem .85rem;
}
.team-season-switch { justify-content: flex-start; }
.team-management-heading :is(p, h2), .team-season-switch label { margin: 0; }
.team-management-subtabs { padding-block-end: .85rem; border-bottom: 1px solid var(--border); }
.team-management .team-management-card { margin-block: 1.15rem; padding: clamp(1rem, 3vw, 1.65rem); }
.team-management-card > :first-child { margin-block-start: 0; }
.team-management-card > :last-child { margin-block-end: 0; }
.team-management-grid, .team-management-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
    align-items: start;
}
.team-management-grid { margin-block: 1.15rem; }
.team-management-grid .team-management-card { margin: 0; }
.team-management-form { display: grid; justify-items: start; gap: .85rem; }
.team-management :is(.team-management-form, .team-roster-dialog, .team-season-switch) label {
    display: grid;
    gap: .35rem;
    margin: 0;
}
.team-management-form > :is(label, .team-management-fields) { width: min(100%, 34rem); }
.team-management-form > .team-management-fields { width: 100%; }
.team-management-form > p { margin: 0; }
.team-management :is(.team-management-form, .team-roster-dialog) .team-management-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem;
    align-items: baseline;
    font-weight: 400;
}
.team-management-muted { color: var(--muted); font-size: .875rem; }
.team-management-image {
    display: block;
    max-width: 100%;
    max-height: 11rem;
    margin-block: 1rem;
    border-radius: .5rem;
    object-fit: contain;
}
.team-management-image-logo { width: 6rem; height: 6rem; background: var(--inset); }
.team-management-image-banner { width: 100%; aspect-ratio: 5 / 1; object-fit: cover; }
.team-banner-crop { width: 100%; }
.team-banner-crop canvas {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: .4rem;
    background: var(--inset);
}
.team-banner-crop canvas[data-movable] { cursor: grab; touch-action: none; }
.team-banner-crop canvas[data-movable]:active { cursor: grabbing; }
.team-banner-crop-controls p { margin-block: .4rem; }
.team-management .team-banner-crop label[hidden] { display: none; }
.team-management [data-banner-source][hidden], .team-management .team-management-check[hidden],
.team-management [data-banner-status]:empty { display: none; }
.team-banner-crop input[type="range"] { width: 100%; accent-color: var(--accent); }
.team-management-image-status { margin-block: 1rem; }
.team-management-image-status form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block: .4rem; }
.team-roster-table { min-width: 34rem; }
.team-roster-table :is(th, td) { padding: .7rem .8rem; vertical-align: top; }
.team-roster-table thead { background: var(--raised); }
.team-roster-table tbody tr:nth-child(even) { background: var(--inset); }
.team-roster-add-options > section { background: var(--inset); }
.team-roster-add-options h4 { margin: 0; font-size: 1.1rem; font-weight: 700; }
:is(.team-roster-dialog, .team-banner-dialog) {
    position: fixed;
    inset: 0;
    width: min(32rem, calc(100% - 2rem));
    height: fit-content;
    max-height: 85dvh;
    margin: auto;
    padding: 1.25rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: .65rem;
    background: var(--surface);
    color: var(--ink);
    white-space: normal;
}
:is(.team-roster-dialog, .team-banner-dialog)::backdrop { background: rgb(13 9 18 / .75); }
.team-banner-dialog { width: min(44rem, calc(100% - 2rem)); }
.team-banner-dialog > [data-banner-editor] { margin-top: .9rem; }
.team-roster-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.team-roster-dialog-heading :is(h3, h4) { margin: 0; font-size: 1.15rem; font-weight: 700; }
.team-roster-dialog > form { display: grid; justify-items: start; gap: .55rem; margin-top: .9rem; }
.team-roster-dialog > form + form { border-top: 1px solid var(--border); padding-top: .9rem; }
.match-history small { display: block; color: var(--muted); font-weight: 400; }
.match-page label { display: grid; gap: .25rem; margin: .25rem 0; }
.match-page label:has(input[type="radio"]) { display: block; }
.match-page form > :is(p, fieldset) { flex-basis: 100%; }
.match-page fieldset .row { margin-block: .5rem; }
.match-player-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem; }
.match-venue p { margin-block: .25rem 0; color: var(--muted); }
.match-doubles-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .6rem clamp(.5rem, 2vw, 1.5rem);
    align-items: start;
}
.match-doubles-team > span { display: block; color: var(--muted); font-size: .85rem; }
.match-doubles-team > strong { overflow-wrap: anywhere; }
.match-doubles-team label { margin-block: .4rem 0; }
.match-doubles-team select { inline-size: 100%; }
.match-doubles-result { align-self: center; text-align: center; }
.match-doubles-score { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.match-doubles-score input { inline-size: 3.6rem; text-align: center; }
@media (max-width: 36rem) {
    .match-doubles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .match-doubles-result { grid-column: 1 / -1; justify-self: end; }
    .match-doubles-team .avatar-thumb { width: 1.8rem; height: 1.8rem; }
    .match-doubles-team .avatar-thumb:empty { display: none; }
}