/*
 * BLDV base stylesheet
 * Version: 0.120.0
 */

:root {
    --background: #101714;
    --surface: #17231f;
    --surface-light: #20322c;
    --text: #f3f7f5;
    --muted: #b2c2bb;
    --accent: #e0b649;
    --accent-dark: #bd9227;
    --line: rgba(255, 255, 255, 0.1);
    color-scheme: dark;
    font-family: Inter, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.14), transparent 30rem),
        var(--background);
}

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

.versus-launchbar {
    position: relative;
    z-index: 31;
    display: grid;
    place-items: center;
    min-height: 3.35rem;
    border-bottom: 1px solid rgba(224, 182, 73, 0.17);
    background:
        radial-gradient(circle at 50% 120%, rgba(224, 182, 73, 0.14), transparent 22rem),
        #0a100e;
}

.versus-launcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-width: 10.5rem;
    padding: 0.62rem 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(224, 182, 73, 0.46);
    border-radius: 0.7rem;
    color: var(--text);
    background:
        linear-gradient(135deg, rgba(224, 182, 73, 0.13), rgba(224, 182, 73, 0.025)),
        rgba(20, 31, 27, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0.55rem 1.6rem rgba(0, 0, 0, 0.26);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.versus-launcher::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.08), transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.35s ease;
}

.versus-launcher:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 182, 73, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.7rem 1.8rem rgba(0, 0, 0, 0.32),
        0 0 1.2rem rgba(224, 182, 73, 0.08);
}

.versus-launcher:hover::after {
    transform: translateX(110%);
}

.versus-launcher__copy {
    display: grid;
    gap: 0.02rem;
    text-align: left;
}

.versus-launcher strong {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.versus-launcher small {
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.versus-launcher__latency {
    padding: 0.18rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.66rem;
    font-weight: 900;
}

.versus-launcher__latency[hidden] {
    display: none;
}

.versus-launcher__signal {
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 50%;
    background: rgba(178, 194, 187, 0.48);
    box-shadow: 0 0 0 0.26rem rgba(178, 194, 187, 0.06);
}

.versus-launcher__signal.is-active {
    background: var(--accent);
    animation: versus-live-pulse 1.35s ease-in-out infinite;
}

.versus-launcher[data-connection-state="connecting"] .versus-launcher__signal {
    background: #6bb7ff;
    box-shadow: 0 0 0 0.28rem rgba(107, 183, 255, 0.08);
    animation: versus-live-pulse 1.15s ease-in-out infinite;
}

.versus-launcher[data-connection-state="degraded"] .versus-launcher__signal {
    background: #e0b649;
    box-shadow: 0 0 0 0.28rem rgba(224, 182, 73, 0.1);
}

.versus-launcher[data-connection-state="offline"] .versus-launcher__signal {
    background: #c94b4b;
    box-shadow: 0 0 0 0.28rem rgba(201, 75, 75, 0.12);
}

.versus-launcher[data-connection-state="offline"],
.versus-launcher[data-connection-state="degraded"] {
    border-color: rgba(201, 75, 75, 0.44);
}

.versus-launcher__badge {
    display: grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.34rem;
    border-radius: 999px;
    color: #fff;
    background: #c94b4b;
    font-size: 0.7rem;
    font-weight: 950;
}

.versus-launcher__badge[hidden] {
    display: none;
}

.versus-overlay[hidden] {
    display: none;
}

.versus-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
}

.versus-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 7, 0.84);
    backdrop-filter: blur(14px);
}

.versus-overlay__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1280px, calc(100% - 2rem));
    height: calc(100% - 2rem);
    margin: 1rem auto;
    overflow: hidden;
    border: 1px solid rgba(224, 182, 73, 0.3);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 10% 0%, rgba(224, 182, 73, 0.12), transparent 30rem),
        #101714;
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.58);
    animation: versus-overlay-open 0.2s ease-out;
}

.versus-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
    background: rgba(8, 13, 11, 0.72);
}

.versus-overlay__header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.versus-connection-card {
    display: grid;
    grid-template-columns: auto minmax(12rem, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    min-width: min(100%, 24rem);
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.035);
}

.versus-connection-card__signal {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 0 0 0.26rem rgba(178, 194, 187, 0.07);
}

.versus-connection-card[data-state="online"] .versus-connection-card__signal {
    background: #74d99f;
    box-shadow: 0 0 0 0.26rem rgba(116, 217, 159, 0.08);
}

.versus-connection-card[data-state="connecting"] .versus-connection-card__signal {
    background: #6bb7ff;
    animation: versus-live-pulse 1.15s ease-in-out infinite;
}

.versus-connection-card[data-state="degraded"] {
    border-color: rgba(224, 182, 73, 0.45);
    background: rgba(224, 182, 73, 0.06);
}

.versus-connection-card[data-state="degraded"] .versus-connection-card__signal {
    background: #e0b649;
}

.versus-connection-card[data-state="offline"] {
    border-color: rgba(201, 75, 75, 0.5);
    background: rgba(201, 75, 75, 0.08);
}

.versus-connection-card[data-state="offline"] .versus-connection-card__signal {
    background: #c94b4b;
}

.versus-connection-card strong,
.versus-connection-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.versus-connection-card strong {
    font-size: 0.82rem;
}

.versus-connection-card small {
    color: var(--muted);
    font-size: 0.68rem;
}

.versus-connection-card__retry {
    padding: 0.42rem 0.55rem;
    border: 1px solid rgba(224, 182, 73, 0.34);
    border-radius: 999px;
    color: var(--text);
    background: rgba(224, 182, 73, 0.08);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.versus-connection-card__retry:hover {
    border-color: rgba(224, 182, 73, 0.72);
}

.versus-connection-card__retry[hidden] {
    display: none;
}

.versus-overlay__header h1,
.versus-overlay__header p {
    margin: 0;
}

.versus-overlay__header h1 {
    margin-top: 0.1rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.versus-overlay__content {
    display: grid;
    gap: 1rem;
    align-content: start;
    overflow-y: auto;
    padding: 1.2rem;
    overscroll-behavior: contain;
}

.versus-overlay__dashboard {
    display: grid;
    gap: 1rem;
}

.versus-overlay__summary[hidden],
.versus-live-inbox[hidden],
.versus-overlay__ranking[hidden],
.versus-overlay__dashboard[hidden],
.versus-matchcenter[hidden] {
    display: none;
}

.versus-overlay-open {
    overflow: hidden;
}

.versus-overlay__summary {
    display: grid;
    grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1fr);
    gap: 0.8rem;
}

.versus-overlay__summary > div,
.versus-overlay__summary dl {
    margin: 0;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.03);
}

.versus-overlay__summary > div {
    display: grid;
    align-content: center;
    gap: 0.12rem;
    border-color: rgba(224, 182, 73, 0.34);
    background: rgba(224, 182, 73, 0.07);
}

.versus-overlay__summary > div p {
    margin: 0;
}

.versus-overlay__summary > div strong {
    color: var(--accent);
    font-size: 2.6rem;
    line-height: 1;
}

.versus-overlay__summary > div span {
    color: var(--muted);
    font-weight: 800;
}

.versus-overlay__summary dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.versus-overlay__summary dl div {
    display: grid;
    align-content: center;
    gap: 0.15rem;
    padding: 0.6rem;
    border-left: 1px solid var(--line);
}

.versus-overlay__summary dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-overlay__summary dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 950;
}

.versus-overlay__ranking {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.025);
}

.versus-overlay__ranking > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.versus-overlay__ranking h2,
.versus-overlay__ranking header p {
    margin: 0;
}

.versus-overlay__ranking > header > span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-matchcenter {
    display: grid;
    align-content: start;
    gap: 1rem;
    width: min(100%, 920px);
    margin: 0 auto;
}

.versus-matchcenter__header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(13, 20, 17, 0.94);
    backdrop-filter: blur(10px);
}

.versus-matchcenter__header > span {
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.1);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-matchcenter__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.58rem 0.8rem;
    border: 1px solid rgba(224, 182, 73, 0.28);
    border-radius: 0.72rem;
    color: var(--text);
    background: rgba(224, 182, 73, 0.08);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.versus-matchcenter__back:hover {
    color: var(--accent);
    border-color: rgba(224, 182, 73, 0.55);
    background: rgba(224, 182, 73, 0.13);
}

.versus-matchcenter__back::before,
.versus-matchcenter__overview-action::before {
    content: "<";
    font-weight: 950;
}

.versus-matchcenter__body {
    display: grid;
    gap: 1rem;
}

.versus-matchcenter__intro,
.versus-matchcenter__result,
.versus-matchcenter__complete,
.versus-matchcenter__protest,
.versus-matchcenter__evidence {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.1), transparent 22rem),
        rgba(255, 255, 255, 0.025);
}

.versus-matchcenter__intro h2,
.versus-matchcenter__intro p,
.versus-matchcenter__result h3,
.versus-matchcenter__result p,
.versus-matchcenter__complete h3,
.versus-matchcenter__complete p,
.versus-matchcenter__protest h3,
.versus-matchcenter__protest p,
.versus-matchcenter__evidence h3 {
    margin: 0;
}

.versus-matchcenter__intro h2 {
    font-size: clamp(1.7rem, 5vw, 3rem);
    letter-spacing: -0.045em;
}

.versus-matchcenter__intro > p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.55;
}

.versus-matchcenter__score {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-block: 1px solid var(--line);
}

.versus-matchcenter__score > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 5rem;
    padding: 1rem;
}

.versus-matchcenter__score > div + div {
    border-left: 1px solid var(--line);
}

.versus-matchcenter__score span {
    overflow: hidden;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.versus-matchcenter__score strong {
    color: var(--accent);
    font-size: clamp(2rem, 7vw, 3.6rem);
    line-height: 1;
}

.versus-matchcenter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.versus-matchcenter__overview-action {
    border: 0;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.versus-matchcenter__score-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.versus-matchcenter__score-options fieldset {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.versus-matchcenter__score-options legend {
    margin-bottom: 0.65rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.versus-matchcenter__score-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.versus-matchcenter__score-buttons label {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 4.5rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}

.versus-matchcenter__score-buttons label:hover,
.versus-matchcenter__score-buttons label:has(input:checked) {
    border-color: rgba(224, 182, 73, 0.75);
    background: rgba(224, 182, 73, 0.1);
}

.versus-matchcenter__score-buttons input {
    position: absolute;
    opacity: 0;
}

.versus-matchcenter__score-buttons span {
    color: var(--text);
    font-size: 1.65rem;
    font-weight: 950;
}

.versus-matchcenter__score-buttons label:has(input:checked) span {
    color: var(--accent);
}

.versus-matchcenter__complete {
    border-color: rgba(224, 182, 73, 0.32);
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.12), transparent 18rem),
        rgba(224, 182, 73, 0.045);
}

.versus-matchcenter__complete h3 {
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    letter-spacing: -0.035em;
}

.versus-matchcenter__complete p:not(.eyebrow),
.versus-matchcenter__protest p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.55;
}

.versus-matchcenter__rating {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.versus-matchcenter__rating article {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(0, 0, 0, 0.16);
}

.versus-matchcenter__rating span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

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

.versus-matchcenter__protest {
    border-color: rgba(201, 75, 75, 0.26);
}

.versus-matchcenter__protest blockquote {
    margin: 0;
    padding: 0.85rem 1rem;
    border-left: 3px solid rgba(224, 182, 73, 0.58);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(0, 0, 0, 0.16);
    line-height: 1.55;
}

.versus-matchcenter__protest-meta {
    font-size: 0.82rem;
}

.versus-matchcenter__resolution {
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.035);
}

.versus-matchcenter__protest-form {
    display: grid;
    gap: 0.65rem;
}

.versus-matchcenter__protest-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 7rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    color: var(--text);
    background: rgba(0, 0, 0, 0.2);
    font: inherit;
}

.versus-matchcenter__protest-form textarea:focus {
    outline: 2px solid rgba(224, 182, 73, 0.35);
    border-color: rgba(224, 182, 73, 0.7);
}

.versus-matchcenter__protest-form small {
    color: var(--muted);
}

.versus-matchcenter__evidence img {
    width: min(100%, 720px);
    max-height: 32rem;
    object-fit: contain;
    border-radius: 0.8rem;
}

@keyframes versus-overlay-open {
    from {
        opacity: 0;
        transform: translateY(0.45rem) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.versus-livebar {
    position: relative;
    z-index: 30;
    border-bottom: 1px solid rgba(224, 182, 73, 0.2);
    background:
        linear-gradient(90deg, rgba(224, 182, 73, 0.08), transparent 38%),
        #0c1210;
}

.versus-livebar__inner {
    display: grid;
    grid-template-columns: auto minmax(14rem, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    width: min(1120px, calc(100% - 2rem));
    min-height: 3.65rem;
    margin: 0 auto;
}

.versus-livebar__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text);
    text-decoration: none;
}

.versus-livebar__brand > span:nth-child(2) {
    display: grid;
    gap: 0.05rem;
}

.versus-livebar__brand strong {
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.versus-livebar__brand small,
.versus-livebar__status span {
    color: var(--muted);
    font-size: 0.72rem;
}

.versus-livebar__signal {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: rgba(178, 194, 187, 0.46);
    box-shadow: 0 0 0 0.3rem rgba(178, 194, 187, 0.06);
}

.versus-livebar__signal.is-active {
    background: var(--accent);
    animation: versus-live-pulse 1.35s ease-in-out infinite;
}

.versus-livebar__status {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.versus-livebar__status strong,
.versus-livebar__status span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.versus-livebar__status strong {
    font-size: 0.9rem;
}

.versus-livebar__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(6.5rem, auto));
    gap: 0.5rem;
    margin: 0;
}

.versus-livebar__metrics[hidden] {
    display: none;
}

.versus-livebar__metrics div {
    display: grid;
    gap: 0.05rem;
    padding: 0.35rem 0.55rem;
    border-left: 1px solid var(--line);
}

.versus-livebar__metrics dt {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-livebar__metrics dd {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 900;
}

.versus-livebar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.versus-livebar__actions .button-link {
    padding: 0.55rem 0.75rem;
    border: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.versus-livebar.is-offer {
    border-bottom-color: rgba(224, 182, 73, 0.68);
    background:
        linear-gradient(90deg, rgba(224, 182, 73, 0.19), transparent 52%),
        #0c1210;
}

.versus-livebar.is-disconnected {
    opacity: 0.68;
}

@keyframes versus-live-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0.22rem rgba(224, 182, 73, 0.1);
    }

    50% {
        box-shadow: 0 0 0 0.48rem rgba(224, 182, 73, 0.025);
    }
}

.site-header {
    border-bottom: 1px solid var(--line);
    background: rgba(16, 23, 20, 0.88);
}

.site-header__inner,
.page-shell {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.site-nav__link,
.nav-menu summary,
.nav-button {
    color: var(--muted);
    font: inherit;
    font-size: 0.9rem;
    text-decoration: none;
}

.site-nav__link,
.nav-menu summary {
    padding: 0.55rem 0.65rem;
    border-radius: 0.4rem;
}

.site-nav__link:hover,
.nav-menu summary:hover,
.nav-menu[open] summary,
.nav-menu--active summary,
.site-nav__link--active,
.nav-menu__panel a:hover,
.nav-button:hover {
    color: var(--accent);
    background: rgba(224, 182, 73, 0.1);
}

.nav-menu {
    position: relative;
}

.nav-menu summary {
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
}

.nav-menu summary::-webkit-details-marker {
    display: none;
}

.nav-menu summary::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.45rem;
    border-top: 0.3rem solid currentColor;
    border-right: 0.25rem solid transparent;
    border-left: 0.25rem solid transparent;
    vertical-align: middle;
}

.nav-menu__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 20;
    display: grid;
    gap: 0.1rem;
    width: max-content;
    min-width: 13rem;
    max-width: min(24rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100vh - 6rem));
    overflow-y: auto;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: var(--surface);
    box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.3);
}

.nav-menu--left .nav-menu__panel {
    right: auto;
    left: 0;
}

.nav-menu__panel--wide {
    min-width: 17rem;
}

.nav-menu__panel a,
.nav-menu__panel .nav-button {
    display: block;
    width: 100%;
    padding: 0.65rem 0.7rem;
    border-radius: 0.35rem;
    color: var(--muted);
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu__panel form {
    margin: 0;
}

.nav-menu__heading {
    padding: 0.55rem 0.7rem 0.25rem;
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nav-button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.brand {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.brand span {
    color: var(--accent);
}

.version {
    margin-left: 0.25rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.global-queue-banner[hidden] {
    display: none;
}

.global-queue-banner {
    position: sticky;
    top: 0.75rem;
    z-index: 18;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.95rem;
    width: min(1120px, calc(100% - 2rem));
    margin: 0.9rem auto 0;
    padding: 0.78rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.15rem;
    background:
        linear-gradient(135deg, rgba(224, 182, 73, 0.18), rgba(80, 111, 97, 0.08) 38%, rgba(16, 23, 20, 0.28)),
        rgba(18, 29, 25, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 1.2rem 2.8rem rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.65rem) scale(0.985);
    transition:
        opacity 0.24s ease,
        transform 0.24s ease,
        border-color 0.24s ease,
        background 0.24s ease;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

.global-queue-banner.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.global-queue-banner::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 16% 0%, rgba(224, 182, 73, 0.26), transparent 18rem),
        radial-gradient(circle at 85% 110%, rgba(106, 170, 142, 0.14), transparent 16rem);
    content: "";
}

.global-queue-banner::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    opacity: 0.7;
    transform: translateX(-70%);
    animation: queueSheen 7s ease-in-out infinite;
    content: "";
}

.global-queue-banner__glow {
    position: absolute;
    inset: auto 1.2rem 0.2rem 1.2rem;
    pointer-events: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224, 182, 73, 0.42), transparent);
    opacity: 0.9;
}

.global-queue-banner__pulse {
    position: relative;
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 1.2rem rgba(224, 182, 73, 0.62),
        0 0 0 rgba(224, 182, 73, 0.38);
    animation: queuePulse 1.8s ease-out infinite;
}

.global-queue-banner__copy {
    display: grid;
    gap: 0.12rem;
}

.global-queue-banner__copy .eyebrow {
    margin: 0;
}

.global-queue-banner__copy strong {
    font-size: 1.05rem;
}

.global-queue-banner__copy span {
    color: var(--muted);
    font-size: 0.9rem;
}

.global-queue-banner__progress {
    overflow: hidden;
    height: 0.24rem;
    margin-top: 0.36rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.global-queue-banner__progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(224, 182, 73, 0.75), rgba(255, 226, 140, 0.95));
    box-shadow: 0 0 1rem rgba(224, 182, 73, 0.42);
    transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.global-queue-banner__stats {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0.55rem;
    margin: 0;
}

.global-queue-banner__stats div {
    display: grid;
    gap: 0.12rem;
    min-width: 6.7rem;
    padding: 0.5rem 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.8rem;
    background: rgba(8, 12, 10, 0.19);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.global-queue-banner__stats div:hover {
    border-color: rgba(224, 182, 73, 0.28);
    background: rgba(8, 12, 10, 0.28);
    transform: translateY(-1px);
}

.global-queue-banner__stats dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.global-queue-banner__stats dd {
    margin: 0;
    color: var(--accent);
    font-weight: 800;
    white-space: nowrap;
}

.global-queue-banner__state {
    padding: 0.36rem 0.58rem;
    border: 1px solid rgba(224, 182, 73, 0.24);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.1);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.global-queue-banner > .button-link {
    padding: 0.65rem 0.78rem;
    border: 1px solid rgba(224, 182, 73, 0.35);
    box-shadow: none;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.global-queue-banner > .button-link:hover {
    border-color: rgba(224, 182, 73, 0.72);
    transform: translateY(-1px);
}

.versus-ready-modal[hidden] {
    display: none;
}

.versus-ready-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.versus-ready-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(224, 182, 73, 0.18), transparent 30rem),
        rgba(6, 10, 8, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.versus-ready-modal__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    width: min(100%, 460px);
    padding: 1.25rem;
    border: 1px solid rgba(224, 182, 73, 0.48);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.18), transparent 18rem),
        rgba(20, 30, 26, 0.94);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1.8rem 4rem rgba(0, 0, 0, 0.42);
    text-align: center;
}

.versus-ready-modal__panel h2 {
    margin: 0;
    font-size: clamp(2rem, 8vw, 3.25rem);
}

.versus-ready-modal__panel p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.versus-ready-modal__timer {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(224, 182, 73, 0.42);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(224, 182, 73, 0.16), rgba(224, 182, 73, 0.04)),
        rgba(6, 10, 8, 0.28);
    box-shadow: 0 0 2rem rgba(224, 182, 73, 0.16);
}

.versus-ready-modal__timer strong {
    color: var(--accent);
    font-size: 4rem;
    line-height: 0.85;
}

.versus-ready-modal__timer span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.versus-ready-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.versus-ready-modal__actions form {
    margin: 0;
}

.versus-ready-modal__actions button {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.versus-center {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    display: grid;
    justify-items: end;
    gap: 0.7rem;
    width: min(25rem, calc(100vw - 2rem));
}

.versus-center__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 12.5rem;
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(224, 182, 73, 0.34);
    border-radius: 999px;
    color: var(--text);
    background: rgba(18, 29, 25, 0.94);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
}

.versus-center__toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 182, 73, 0.68);
    background: rgba(27, 43, 37, 0.98);
}

.versus-center__toggle > span:nth-child(2) {
    display: grid;
    flex: 1;
    gap: 0.05rem;
    text-align: left;
}

.versus-center__toggle strong {
    font-size: 0.92rem;
}

.versus-center__toggle small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.versus-center__signal {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: rgba(178, 194, 187, 0.55);
    box-shadow: 0 0 0 0.28rem rgba(178, 194, 187, 0.08);
}

.versus-center__signal.is-active {
    background: var(--accent);
    box-shadow: 0 0 0 0.3rem rgba(224, 182, 73, 0.13);
    animation: versus-center-pulse 1.8s ease-in-out infinite;
}

.versus-center__badge {
    display: grid;
    place-items: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    color: #111713;
    background: var(--accent);
    font-size: 0.72rem;
    font-weight: 950;
}

.versus-center__badge[hidden] {
    display: none;
}

.versus-center__badge.is-urgent {
    color: #fff;
    background: #c94b4b;
}

.versus-center__panel[hidden] {
    display: none;
}

.versus-center__panel {
    display: grid;
    gap: 0.85rem;
    width: 100%;
    max-height: min(38rem, calc(100vh - 7rem));
    padding: 1rem;
    overflow-y: auto;
    border: 1px solid rgba(224, 182, 73, 0.32);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.13), transparent 18rem),
        rgba(16, 24, 21, 0.98);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(20px);
    transform-origin: bottom right;
    animation: versus-center-open 0.18s ease-out;
}

.versus-center__header,
.versus-center__confirmations > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.versus-center__header h2,
.versus-center__header p,
.versus-center__confirmations h3 {
    margin: 0;
}

.versus-center__header h2 {
    margin-top: 0.16rem;
    font-size: 1.35rem;
}

.versus-center__close {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.25rem;
}

.versus-center__close:hover {
    color: var(--text);
    border-color: rgba(224, 182, 73, 0.48);
}

.versus-center__primary {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.035);
}

.versus-center.is-waiting .versus-center__primary,
.versus-center.is-offer .versus-center__primary,
.versus-center.is-match .versus-center__primary {
    border-color: rgba(224, 182, 73, 0.36);
    background: rgba(224, 182, 73, 0.07);
}

.versus-center__primary h3,
.versus-center__primary p {
    margin: 0;
}

.versus-center__primary p {
    color: var(--muted);
    line-height: 1.5;
}

.versus-center__state {
    width: fit-content;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.1);
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-center__primary .button-link {
    width: fit-content;
}

.versus-center__queue {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.versus-center__queue[hidden] {
    display: none;
}

.versus-center__queue div {
    display: grid;
    gap: 0.15rem;
    padding: 0.6rem;
    border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.16);
}

.versus-center__queue dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.versus-center__queue dd {
    margin: 0;
    font-weight: 900;
}

.versus-center__confirmations {
    display: grid;
    gap: 0.6rem;
}

.versus-center__confirmations > header span {
    display: grid;
    place-items: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    font-weight: 900;
}

.versus-center__confirmation-list {
    display: grid;
    gap: 0.5rem;
}

.versus-center__confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.025);
    text-decoration: none;
}

.versus-center__confirmation:hover,
.versus-center__confirmation.is-action {
    border-color: rgba(224, 182, 73, 0.45);
    background: rgba(224, 182, 73, 0.07);
}

.versus-center__confirmation span {
    display: grid;
    gap: 0.12rem;
}

.versus-center__confirmation small {
    color: var(--muted);
}

.versus-center__confirmation b {
    color: var(--accent);
    font-size: 1.15rem;
}

.versus-center__empty {
    margin: 0;
    padding: 0.7rem;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 0.75rem;
    text-align: center;
}

@keyframes versus-center-open {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes versus-center-pulse {
    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 0 0.42rem rgba(224, 182, 73, 0.08);
    }
}

@keyframes queuePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(224, 182, 73, 0.4);
    }

    80%,
    100% {
        box-shadow: 0 0 0 0.8rem rgba(224, 182, 73, 0);
    }
}

@keyframes queueSheen {
    0%,
    55% {
        transform: translateX(-72%);
    }

    100% {
        transform: translateX(72%);
    }
}

@media (max-width: 920px) {
    .versus-livebar__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .versus-livebar__status {
        display: none;
    }

    .global-queue-banner {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .global-queue-banner__stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .global-queue-banner__stats div {
        min-width: 0;
    }

    .global-queue-banner__state {
        grid-column: 3 / 4;
        grid-row: 1;
    }

    .global-queue-banner > .button-link {
        grid-column: 4 / 5;
        grid-row: 1;
    }
}

@media (max-width: 640px) {
    .versus-launchbar {
        min-height: 3.15rem;
    }

    .versus-launcher {
        min-width: 9.5rem;
        padding: 0.55rem 0.9rem;
    }

    .versus-overlay__shell {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .versus-overlay__header {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.85rem;
    }

    .versus-overlay__header-actions {
        align-items: stretch;
        width: 100%;
    }

    .versus-connection-card {
        min-width: 0;
        flex: 1;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .versus-connection-card__retry {
        grid-column: 1 / -1;
        width: fit-content;
    }

    .versus-overlay__header .button-link {
        padding: 0.55rem 0.65rem;
        font-size: 0.76rem;
    }

    .versus-overlay__content {
        padding: 0.85rem;
    }

    .versus-overlay__summary {
        grid-template-columns: 1fr;
    }

    .versus-overlay__summary dl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .versus-matchcenter__score,
    .versus-matchcenter__score-options,
    .versus-matchcenter__rating {
        grid-template-columns: 1fr;
    }

    .versus-matchcenter__score > div + div {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .versus-livebar__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.55rem;
        min-height: 3.45rem;
    }

    .versus-livebar__metrics {
        display: none;
    }

    .versus-livebar__actions .button-link {
        padding: 0.5rem 0.62rem;
    }

    .versus-center {
        right: 0.75rem;
        bottom: 0.75rem;
        width: calc(100vw - 1.5rem);
    }

    .versus-center__toggle {
        min-width: 11.5rem;
    }

    .versus-center__panel {
        max-height: calc(100vh - 5.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-queue-banner,
    .global-queue-banner::after,
    .global-queue-banner__pulse,
    .global-queue-banner__progress span,
    .versus-center__panel,
    .versus-center__signal {
        animation: none;
        transition: none;
    }
}

.page-shell {
    padding: 5rem 0;
}

.hero {
    max-width: 760px;
}

.landing-hero__actions {
    margin-top: 1.5rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.dashboard-card {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: linear-gradient(145deg, var(--surface-light), var(--surface));
}

.dashboard-card--highlight {
    border-color: rgba(224, 182, 73, 0.65);
    background: linear-gradient(145deg, rgba(224, 182, 73, 0.12), var(--surface));
}

.dashboard-card h2 {
    margin: 0.3rem 0 0.65rem;
}

.dashboard-card p {
    color: var(--muted);
    line-height: 1.55;
}

.dashboard-card__meta {
    margin: 0 0 0.35rem;
    color: var(--accent) !important;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.dashboard-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.dashboard-links a {
    padding: 0.45rem 0.55rem;
    border-radius: 0.35rem;
    background: rgba(224, 182, 73, 0.1);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-links a:hover {
    background: rgba(224, 182, 73, 0.2);
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 1rem 0 0;
}

.dashboard-metrics div {
    padding: 0.6rem;
    border-radius: 0.4rem;
    background: rgba(16, 23, 20, 0.5);
}

.dashboard-metrics dt {
    color: var(--muted);
    font-size: 0.76rem;
}

.dashboard-metrics dd {
    margin: 0.2rem 0 0;
    color: var(--accent);
    font-weight: 800;
}

.dashboard-section {
    margin-top: 3rem;
}

.news-list--dashboard {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.profile-showcase {
    position: relative;
    max-width: 820px;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.85rem;
}

.profile-showcase__content {
    position: relative;
    z-index: 1;
}

.profile-showcase--frame-starter {
    border-color: rgba(178, 194, 187, 0.68);
    box-shadow: inset 0 0 0 0.3rem rgba(178, 194, 187, 0.08);
}

.profile-showcase--frame-gold {
    border-color: var(--accent);
    box-shadow:
        inset 0 0 0 0.3rem rgba(224, 182, 73, 0.16),
        0 0 1.6rem rgba(224, 182, 73, 0.18);
}

.profile-showcase--background-dartboard {
    background:
        radial-gradient(circle at 86% 50%, transparent 0 2.7rem, rgba(224, 182, 73, 0.3) 2.75rem 3rem, transparent 3.05rem 4.7rem, rgba(178, 194, 187, 0.24) 4.75rem 5rem, transparent 5.05rem),
        linear-gradient(135deg, rgba(32, 50, 44, 0.96), rgba(16, 23, 20, 0.96));
}

.profile-showcase__equipment {
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.profile-page {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 1180px);
}

.profile-page .profile-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 1.25rem;
    max-width: none;
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.12), transparent 30rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.profile-page .profile-showcase--background-dartboard {
    background:
        radial-gradient(circle at 86% 50%, transparent 0 2.7rem, rgba(224, 182, 73, 0.3) 2.75rem 3rem, transparent 3.05rem 4.7rem, rgba(178, 194, 187, 0.24) 4.75rem 5rem, transparent 5.05rem),
        linear-gradient(135deg, rgba(32, 50, 44, 0.96), rgba(16, 23, 20, 0.96));
}

.profile-hero-panel,
.profile-kpi-card,
.profile-section,
.profile-form-card,
.profile-breakdown-card,
.profile-match-card {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(22, 25, 33, 0.92);
}

.profile-hero-panel {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
}

.profile-hero-panel strong {
    color: var(--accent);
    font-size: 1.7rem;
}

.profile-hero-panel span,
.profile-section p,
.profile-section__header p,
.profile-match-card p {
    color: var(--muted);
    line-height: 1.55;
}

.profile-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.profile-kpi-card {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
}

.profile-kpi-card--accent {
    border-color: rgba(224, 182, 73, 0.65);
    background: rgba(224, 182, 73, 0.08);
}

.profile-kpi-card span,
.profile-kpi-card small {
    color: var(--muted);
    font-weight: 800;
}

.profile-kpi-card strong {
    color: var(--accent);
    font-size: 1.55rem;
}

.profile-section {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
}

.profile-section--split {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: start;
}

.profile-section h2,
.profile-section h3,
.profile-section p {
    margin: 0.3rem 0;
}

.profile-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-section__header p {
    max-width: 430px;
}

.profile-metric-list,
.profile-form-card dl,
.profile-breakdown-card dl {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

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

.profile-metric-list div,
.profile-form-card dl div,
.profile-breakdown-card dl div {
    padding: 0.65rem;
    border-radius: 0.55rem;
    background: rgba(11, 13, 18, 0.3);
}

.profile-metric-list dt,
.profile-form-card dt,
.profile-breakdown-card dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.profile-metric-list dd,
.profile-form-card dd,
.profile-breakdown-card dd {
    margin: 0.25rem 0 0;
    color: var(--accent);
    font-weight: 900;
}

.profile-form-grid,
.profile-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.profile-form-card,
.profile-breakdown-card {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.profile-breakdown-card > strong {
    color: var(--accent);
    font-size: 2rem;
}

.profile-breakdown-card > span {
    color: var(--muted);
    font-weight: 800;
}

.profile-match-list {
    display: grid;
    gap: 0.75rem;
}

.profile-match-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.profile-match-card h3 {
    margin: 0.25rem 0;
}

.profile-match-card > strong {
    color: var(--accent);
    font-size: 1.5rem;
    white-space: nowrap;
}

.profile-match-card--win {
    border-color: rgba(224, 182, 73, 0.45);
}

.profile-match-card--loss {
    border-color: rgba(178, 194, 187, 0.22);
}

.profile-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.65rem;
}

.profile-link-grid a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(224, 182, 73, 0.35);
    border-radius: 0.55rem;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.08);
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.inventory-equipment-form {
    margin-top: 0.85rem;
}

.inventory-equipment-form button {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

h1 {
    max-width: 700px;
    margin: 0;
    font-size: clamp(2.4rem, 8vw, 5.8rem);
    line-height: 0.98;
}

.intro {
    max-width: 670px;
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.7;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.status-card {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: linear-gradient(145deg, var(--surface-light), var(--surface));
}

.status-card strong {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--accent);
}

.status-card span {
    color: var(--muted);
    line-height: 1.5;
}

.error-page {
    max-width: 640px;
}

.error-page h1 {
    font-size: clamp(2.3rem, 7vw, 4.8rem);
}

.form-page {
    max-width: 640px;
}

.form-page--wide {
    max-width: 920px;
}

.form-page h1 {
    font-size: clamp(2.3rem, 7vw, 4.8rem);
}

.form-card {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.form-card label {
    display: grid;
    gap: 0.45rem;
    color: var(--text);
    font-weight: 700;
}

.form-card fieldset {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
}

.form-card legend {
    padding: 0 0.35rem;
    color: var(--accent);
    font-weight: 800;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-card input {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    color: var(--text);
    background: var(--background);
    font: inherit;
}

.form-card textarea,
.form-card select {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    color: var(--text);
    background: var(--background);
    font: inherit;
}

.form-card textarea {
    min-height: 8rem;
    resize: vertical;
}

.form-card .textarea-compact {
    min-height: 5rem;
}

.form-card .textarea-large {
    min-height: 18rem;
}

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
    border-color: var(--accent);
    outline: 2px solid rgba(224, 182, 73, 0.2);
}

.button-link,
.club-card button,
.member-card button {
    display: inline-block;
    padding: 0.75rem 0.9rem;
    border: 0;
    border-radius: 0.4rem;
    color: #1b1a12;
    background: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
}

.button-role-active {
    color: var(--text) !important;
    background: #456e5d !important;
}

.button-link:hover,
.club-card button:hover,
.member-card button:hover {
    background: var(--accent-dark);
}

.button-row,
.member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.report-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin: 0 0 1.5rem;
}

.report-filter label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.report-filter select {
    min-width: 210px;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    background: var(--surface);
    color: var(--text);
}

.button-secondary {
    color: var(--text) !important;
    background: var(--surface-light) !important;
}

.button-danger {
    color: var(--text) !important;
    background: #873e3e !important;
}

.page-heading {
    max-width: 760px;
}

.club-cockpit-heading {
    max-width: 920px;
}

.page-heading h1 {
    font-size: clamp(2.3rem, 7vw, 4.8rem);
}

.empty-state,
.section-block {
    max-width: 760px;
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.section-heading {
    margin-top: 3rem;
}

.club-cockpit-hero,
.club-cockpit-section {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.club-cockpit-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 320px);
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 1120px;
    background: linear-gradient(145deg, var(--surface-light), var(--surface));
}

.club-cockpit-hero__main {
    min-width: 0;
}

.club-cockpit-hero h2,
.club-cockpit-section h2 {
    margin: 0.2rem 0;
}

.club-cockpit-hero p {
    margin: 0.35rem 0;
    color: var(--muted);
}

.club-cockpit-hero__meta,
.club-cockpit-section__header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.club-cockpit-hero__meta {
    margin-top: 0.85rem;
}

.club-cockpit-actions {
    margin-top: 1.1rem;
}

.club-cockpit-stats {
    display: grid;
    gap: 0.75rem;
}

.club-cockpit-stat {
    padding: 0.85rem;
    border: 1px solid rgba(224, 182, 73, 0.28);
    border-radius: 0.65rem;
    background: rgba(224, 182, 73, 0.08);
}

.club-cockpit-stat strong {
    display: block;
    color: var(--accent);
    font-size: 1.75rem;
    line-height: 1;
}

.club-cockpit-stat span {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.club-cockpit-stat--text strong {
    overflow-wrap: anywhere;
    font-size: 1.15rem;
    line-height: 1.2;
}

.club-cockpit-section {
    max-width: 1120px;
}

.club-cockpit-section__header {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.club-cockpit-grid {
    margin-top: 1rem;
}

.club-frontpage-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.25rem;
    max-width: 1120px;
    margin-top: 2rem;
}

.club-frontpage-hero__main,
.club-frontpage-highlight {
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
}

.club-frontpage-hero__main {
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.12), transparent 18rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.club-frontpage-hero__main h1 {
    margin: 0.2rem 0 0.65rem;
    font-size: clamp(2.3rem, 6vw, 4.5rem);
}

.club-frontpage-hero__main p {
    color: var(--muted);
}

.club-frontpage-highlight {
    overflow: hidden;
    background: var(--surface);
}

.club-frontpage-highlight img,
.club-news-card__image {
    display: block;
    width: calc(100% + 2.7rem);
    max-height: 210px;
    margin: -1.35rem -1.35rem 1rem;
    object-fit: cover;
}

.club-frontpage-highlight h2 {
    margin: 0.35rem 0;
}

.club-frontpage-highlight h2 a,
.club-news-card h2 a {
    color: var(--text);
    text-decoration: none;
}

.club-frontpage-highlight h2 a:hover,
.club-news-card h2 a:hover {
    color: var(--accent);
}

.club-frontpage-highlight p,
.club-news-card p {
    color: var(--muted);
    line-height: 1.6;
}

.club-frontpage-section {
    background:
        linear-gradient(145deg, rgba(224, 182, 73, 0.06), transparent 18rem),
        var(--surface);
}

.public-club-directory-hero,
.public-club-profile-hero,
.club-profile-editor-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 1.25rem;
    max-width: 1120px;
    margin-top: 2rem;
}

.public-club-directory-hero > div,
.public-club-profile-identity,
.club-profile-editor-hero > div,
.public-club-directory-stats,
.public-club-profile-panel,
.club-profile-preview {
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--surface);
}

.public-club-directory-hero > div,
.public-club-profile-identity,
.club-profile-editor-hero > div {
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.12), transparent 18rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.public-club-directory-hero h1,
.public-club-profile-hero h1,
.club-profile-editor-hero h1 {
    margin: 0.2rem 0 0.65rem;
    font-size: clamp(2.3rem, 6vw, 4.3rem);
}

.public-club-directory-stats {
    display: grid;
    gap: 0.75rem;
}

.public-club-directory-stats article,
.public-club-profile-stats article {
    padding: 0.9rem;
    border: 1px solid rgba(224, 182, 73, 0.25);
    border-radius: 0.7rem;
    background: rgba(224, 182, 73, 0.07);
}

.public-club-directory-stats strong,
.public-club-directory-stats span,
.public-club-profile-stats strong,
.public-club-profile-stats span {
    display: block;
}

.public-club-directory-stats strong,
.public-club-profile-stats strong {
    color: var(--accent);
    font-size: 1.9rem;
    line-height: 1;
}

.public-club-directory-stats span,
.public-club-profile-stats span {
    margin-top: 0.35rem;
    color: var(--muted);
    font-weight: 700;
}

.public-club-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 1120px;
    margin-top: 2rem;
}

.public-club-card {
    display: grid;
    gap: 1rem;
    align-content: space-between;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--surface);
}

.public-club-card__top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.public-club-card h2,
.club-profile-preview h2 {
    margin: 0.25rem 0;
}

.public-club-card p,
.club-profile-preview p {
    color: var(--muted);
}

.public-club-card__description {
    line-height: 1.6;
}

.public-club-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.public-club-card__facts span {
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(178, 194, 187, 0.25);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(178, 194, 187, 0.07);
    font-size: 0.82rem;
    font-weight: 800;
}

.public-club-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    flex: 0 0 auto;
    border: 1px solid rgba(224, 182, 73, 0.32);
    border-radius: 1rem;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.08);
    font-weight: 900;
    letter-spacing: 0.08em;
}

.public-club-logo-fallback--large {
    width: 8rem;
    height: 8rem;
    font-size: 1.6rem;
}

.public-club-profile-identity {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.public-club-profile-identity .club-logo--profile {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.public-club-profile-panel dl,
.public-club-profile-panel div {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.public-club-profile-panel dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.public-club-profile-panel dd {
    margin: 0.25rem 0 0;
    font-weight: 800;
}

.public-club-profile-stats,
.public-club-profile-content,
.club-profile-editor-layout {
    display: grid;
    gap: 1rem;
    max-width: 1120px;
    margin-top: 2rem;
}

.public-club-profile-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-club-profile-content,
.club-profile-editor-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
}

.public-club-profile-story,
.club-profile-editor-help article {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--surface);
}

.public-club-profile-story--accent {
    border-color: rgba(224, 182, 73, 0.35);
    background: rgba(224, 182, 73, 0.07);
}

.public-club-profile-story h2,
.club-profile-editor-help h2 {
    margin: 0.25rem 0;
}

.public-club-profile-story p,
.club-profile-editor-help p {
    color: var(--muted);
    line-height: 1.65;
}

.club-profile-preview {
    display: grid;
    align-content: start;
    justify-items: start;
}

.club-profile-preview .club-logo--profile {
    margin-bottom: 1rem;
}

.club-profile-editor-form {
    margin-top: 0;
}

.club-profile-editor-help {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.club-news-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.club-news-card {
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.club-news-card--internal {
    border-color: rgba(224, 182, 73, 0.65);
}

.club-news-card__image {
    width: calc(100% + 2.5rem);
    max-height: 180px;
    margin: -1.25rem -1.25rem 1rem;
}

.club-news-card h2 {
    margin: 0.35rem 0;
}

.club-cockpit-section--context {
    border-style: dashed;
    background: rgba(23, 35, 31, 0.62);
}

.club-context-panel summary {
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.club-context-panel summary::-webkit-details-marker {
    display: none;
}

.club-context-panel summary::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.45rem;
    border-top: 0.32rem solid currentColor;
    border-right: 0.26rem solid transparent;
    border-left: 0.26rem solid transparent;
    vertical-align: middle;
}

.club-context-panel[open] summary {
    color: var(--accent);
}

.club-context-panel[open] summary::after {
    transform: rotate(180deg);
}

.club-context-panel__body {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.club-context-panel__body p,
.club-context-item span,
.club-context-note {
    color: var(--muted);
}

.club-context-switch h2 {
    margin: 0.35rem 0 0.75rem;
}

.club-context-list {
    display: grid;
    gap: 0.75rem;
}

.club-context-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--surface);
}

.club-context-item strong,
.club-context-item span {
    display: block;
}

.club-context-item button {
    display: inline-block;
    padding: 0.65rem 0.8rem;
    border: 0;
    border-radius: 0.4rem;
    color: #1b1a12;
    background: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.club-context-item button:hover {
    background: var(--accent-dark);
}

.inline-form {
    display: inline-block;
    margin: 0;
}

.club-list {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.club-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.club-card--active {
    border-color: rgba(224, 182, 73, 0.65);
}

.club-logo {
    display: block;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    object-fit: contain;
    background: var(--background);
}

.club-logo--card {
    width: 5rem;
    height: 5rem;
    margin-bottom: 0.85rem;
}

.club-logo--profile {
    width: min(100%, 12rem);
    max-height: 12rem;
    margin-bottom: 1.25rem;
}

.club-logo-form {
    display: grid;
    gap: 0.75rem;
}

.club-logo-form img {
    width: min(100%, 16rem);
    max-height: 16rem;
    border-radius: 0.75rem;
    object-fit: contain;
    background: var(--background);
}

.club-card h2 {
    margin: 0.25rem 0;
}

.club-card p {
    margin: 0.35rem 0;
    color: var(--muted);
}

.club-card__short-name,
.active-badge,
.status-badge,
.member-card__status {
    color: var(--accent) !important;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.club-card__roles {
    font-size: 0.85rem;
}

.status-badge,
.member-card__status {
    color: var(--muted) !important;
}

.member-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.member-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.member-card--applicant {
    border-color: rgba(224, 182, 73, 0.55);
}

.member-card--blocked {
    border-color: rgba(255, 155, 145, 0.45);
}

.member-card--left {
    opacity: 0.82;
}

.member-card__main {
    min-width: 0;
}

.member-card h2 {
    margin: 0.25rem 0;
}

.member-card p {
    margin: 0.35rem 0;
    color: var(--muted);
}

.member-card__roles {
    font-size: 0.85rem;
}

.member-card__meta {
    font-size: 0.84rem;
}

.member-management-heading {
    max-width: 920px;
}

.member-management-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 920px;
    margin-top: 2rem;
}

.member-management-summary article {
    padding: 1rem;
    border: 1px solid rgba(224, 182, 73, 0.28);
    border-radius: 0.75rem;
    background: rgba(224, 182, 73, 0.08);
}

.member-management-summary strong,
.member-management-summary span {
    display: block;
}

.member-management-summary strong {
    color: var(--accent);
    font-size: 1.75rem;
    line-height: 1;
}

.member-management-summary span {
    margin-top: 0.35rem;
    color: var(--muted);
    font-weight: 700;
}

.member-management-section {
    max-width: 1120px;
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.member-management-section--manual,
.member-management-section--history {
    border-style: dashed;
    background: rgba(23, 35, 31, 0.62);
}

.member-management-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.member-management-section__header h2,
.member-management-section__header p {
    margin: 0.2rem 0;
}

.member-management-section__header p {
    color: var(--muted);
}

.member-empty-state {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--background);
}

.member-empty-state h2 {
    margin: 0 0 0.35rem;
}

.member-empty-state p {
    margin: 0;
    color: var(--muted);
}

.member-admin-panel summary {
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.member-admin-panel summary::-webkit-details-marker {
    display: none;
}

.member-admin-panel summary::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.45rem;
    border-top: 0.32rem solid currentColor;
    border-right: 0.26rem solid transparent;
    border-left: 0.26rem solid transparent;
    vertical-align: middle;
}

.member-admin-panel[open] summary {
    color: var(--accent);
}

.member-admin-panel[open] summary::after {
    transform: rotate(180deg);
}

.member-admin-panel__body {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.member-admin-panel__body > p,
.member-admin-panel small {
    color: var(--muted);
}

.member-role-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 1120px;
    margin-top: 2rem;
}

.member-role-legend article {
    padding: 1rem;
    border: 1px solid rgba(224, 182, 73, 0.28);
    border-radius: 0.75rem;
    background: rgba(224, 182, 73, 0.07);
}

.member-role-legend strong,
.member-role-legend span,
.member-role-legend small {
    display: block;
}

.member-role-legend strong {
    color: var(--accent);
}

.member-role-legend span,
.member-role-legend small {
    margin-top: 0.4rem;
    color: var(--muted);
    line-height: 1.45;
}

.member-management-table-scroll {
    margin-top: 1rem;
}

.member-management-table {
    min-width: 760px;
}

.member-management-table th {
    white-space: nowrap;
}

.member-management-table td {
    vertical-align: top;
    white-space: normal;
}

.member-management-table__row--applicant {
    background: rgba(224, 182, 73, 0.035);
}

.member-management-table__row--blocked {
    background: rgba(255, 155, 145, 0.035);
}

.member-management-table__row--left {
    opacity: 0.82;
}

.member-management-table__person {
    min-width: 210px;
}

.member-management-table__person strong,
.member-management-table__person span,
.member-management-table__person small,
.member-management-table__note {
    display: block;
}

.member-management-table__person span,
.member-management-table__person small,
.member-management-table__note {
    margin-top: 0.3rem;
    color: var(--muted);
}

.member-management-table__roles {
    max-width: 320px;
    margin-top: 0;
}

.member-management-table__actions {
    min-width: 180px;
}

.member-management-table__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.member-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(178, 194, 187, 0.28);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(178, 194, 187, 0.08);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.member-status-pill--active {
    border-color: rgba(224, 182, 73, 0.4);
    color: var(--accent);
    background: rgba(224, 182, 73, 0.08);
}

.member-status-pill--applicant {
    border-color: rgba(224, 182, 73, 0.32);
}

.member-status-pill--blocked {
    border-color: rgba(255, 155, 145, 0.45);
    color: #ffb4aa;
    background: rgba(255, 155, 145, 0.08);
}

.member-detail-heading {
    max-width: 920px;
}

.member-detail-hero,
.member-detail-section {
    max-width: 1120px;
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.member-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 1.25rem;
    align-items: start;
    background: linear-gradient(145deg, var(--surface-light), var(--surface));
}

.member-detail-hero h2 {
    margin: 0.45rem 0 0.25rem;
    font-size: clamp(2rem, 5vw, 3rem);
}

.member-detail-hero p {
    margin: 0.35rem 0;
    color: var(--muted);
}

.member-detail-facts {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.member-detail-facts div {
    padding: 0.85rem;
    border: 1px solid rgba(224, 182, 73, 0.22);
    border-radius: 0.65rem;
    background: rgba(224, 182, 73, 0.06);
}

.member-detail-facts dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.member-detail-facts dd {
    margin: 0.35rem 0 0;
    color: var(--text);
    font-weight: 800;
}

.member-detail-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.member-detail-section__header h2,
.member-detail-section__header p {
    margin: 0.2rem 0;
}

.member-detail-section__header p {
    color: var(--muted);
}

.member-detail-role-list {
    margin-top: 0;
}

.member-detail-role-grid,
.member-detail-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.member-detail-role-card,
.member-detail-action-card {
    display: grid;
    gap: 1rem;
    align-content: space-between;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--background);
}

.member-detail-role-card--assigned {
    border-color: rgba(224, 182, 73, 0.55);
    background: rgba(224, 182, 73, 0.07);
}

.member-detail-action-card--danger {
    border-color: rgba(255, 155, 145, 0.35);
}

.member-detail-role-card h3,
.member-detail-action-card h3 {
    margin: 0.2rem 0;
}

.member-detail-role-card p,
.member-detail-action-card p {
    margin: 0.35rem 0;
    color: var(--muted);
    line-height: 1.5;
}

.member-detail-role-card form,
.member-detail-action-card {
    margin: 0;
}

.member-detail-role-card button,
.member-detail-action-card button {
    justify-self: start;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-radius: 0.4rem;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.role-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(224, 182, 73, 0.4);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.08);
    font-size: 0.82rem;
    font-weight: 800;
}

.role-chip--protected {
    border-color: rgba(178, 194, 187, 0.35);
    color: var(--muted);
    background: rgba(178, 194, 187, 0.08);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.module-card {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.module-card--enabled {
    border-color: rgba(224, 182, 73, 0.65);
}

.module-card h2 {
    margin: 0.3rem 0;
}

.module-card p {
    color: var(--muted);
    line-height: 1.5;
}

.module-card__category {
    margin: 0;
    color: var(--accent) !important;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.module-card form {
    margin-top: 1rem;
}

.module-card button {
    padding: 0.65rem 0.75rem;
    border: 0;
    border-radius: 0.4rem;
    color: #1b1a12;
    background: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.match-list {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.match-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    color: var(--text);
    background: var(--surface);
    text-decoration: none;
}

.match-card:hover {
    border-color: rgba(224, 182, 73, 0.65);
}

.match-card h2 {
    margin: 0.3rem 0;
}

.match-card h2 span,
.heading-muted {
    color: var(--muted);
    font-size: 0.8em;
}

.match-card__meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.match-card strong {
    color: var(--accent);
    font-size: 1.5rem;
}

.versus-live-app {
    display: grid;
    gap: 1.15rem;
    width: min(100%, 1180px);
}

.versus-live-app__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 1.25rem;
    align-items: end;
    margin-top: 1rem;
}

.versus-live-app__header h1 {
    margin: 0.15rem 0 0.65rem;
    font-size: clamp(3.5rem, 12vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.07em;
}

.versus-live-app__header .intro {
    max-width: 690px;
    margin-bottom: 0;
}

.versus-live-rating {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.versus-live-rating > div {
    display: grid;
    align-content: center;
    gap: 0.15rem;
    min-height: 4.3rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.035);
}

.versus-live-rating__main {
    grid-column: 1 / -1;
    min-height: 6.5rem !important;
    border-color: rgba(224, 182, 73, 0.38) !important;
    background: rgba(224, 182, 73, 0.08) !important;
}

.versus-live-rating dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-live-rating dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 950;
}

.versus-live-rating__main dd {
    color: var(--accent);
    font-size: 2.7rem;
    line-height: 1;
}

.versus-live-rating__main span {
    color: var(--muted);
    font-weight: 800;
}

.versus-live-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    min-height: 17rem;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(224, 182, 73, 0.16), transparent 32rem),
        linear-gradient(135deg, rgba(31, 48, 42, 0.96), rgba(13, 20, 17, 0.98));
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.28);
    transition: border-color 0.22s ease, background 0.22s ease;
}

.versus-live-stage.is-waiting,
.versus-live-stage.is-match {
    border-color: rgba(224, 182, 73, 0.38);
}

.versus-live-stage.is-offer {
    border-color: rgba(224, 182, 73, 0.82);
    background:
        radial-gradient(circle at 12% 0%, rgba(224, 182, 73, 0.28), transparent 34rem),
        linear-gradient(135deg, rgba(42, 54, 42, 0.98), rgba(16, 23, 20, 0.99));
}

.versus-live-stage__pulse {
    position: absolute;
    top: 50%;
    right: 8%;
    z-index: -1;
    width: 15rem;
    height: 15rem;
    border: 1px solid rgba(224, 182, 73, 0.14);
    border-radius: 50%;
    transform: translateY(-50%);
}

.versus-live-stage.is-waiting .versus-live-stage__pulse,
.versus-live-stage.is-offer .versus-live-stage__pulse {
    animation: versus-stage-radar 2.2s ease-out infinite;
}

.versus-live-stage__content {
    display: grid;
    gap: 0.7rem;
}

.versus-live-stage__state {
    width: fit-content;
    padding: 0.3rem 0.56rem;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.1);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.versus-live-stage h2 {
    max-width: 730px;
    margin: 0;
    font-size: clamp(2.1rem, 6vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.versus-live-stage__content > p {
    max-width: 670px;
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.versus-live-stage__opponent {
    display: grid;
    gap: 0.12rem;
    width: fit-content;
    margin-top: 0.3rem;
}

.versus-live-stage__opponent[hidden] {
    display: none;
}

.versus-live-stage__opponent span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-live-stage__opponent strong {
    color: var(--accent);
    font-size: 1.35rem;
}

.versus-live-stage__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0.6rem 0 0;
}

.versus-live-stage__metrics[hidden] {
    display: none;
}

.versus-live-stage__metrics div {
    display: grid;
    gap: 0.18rem;
    min-height: 4.7rem;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.16);
}

.versus-live-stage__metrics dt {
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 800;
}

.versus-live-stage__metrics dd {
    margin: 0;
    font-weight: 950;
}

.versus-live-stage__actions {
    display: grid;
    gap: 0.6rem;
    min-width: 12rem;
}

.versus-live-stage__actions .button-link {
    justify-content: center;
    border: 0;
    font: inherit;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
}

.versus-live-stage__notice {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(224, 182, 73, 0.32);
    border-radius: 0.7rem;
    color: var(--text);
    background: rgba(13, 20, 17, 0.96);
    text-align: center;
}

.versus-live-stage__notice.is-error {
    border-color: rgba(201, 75, 75, 0.56);
    color: #ffc4c4;
}

.versus-live-inbox {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.025);
}

.versus-live-inbox > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.versus-live-inbox h2,
.versus-live-inbox header p {
    margin: 0;
}

.versus-live-inbox > header > span {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.1);
    font-weight: 950;
}

.versus-live-inbox__list {
    display: grid;
    gap: 0.55rem;
}

.versus-live-inbox__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.025);
}

.versus-live-inbox__row.is-action {
    border-color: rgba(224, 182, 73, 0.44);
    background: rgba(224, 182, 73, 0.055);
}

.versus-live-inbox__row h3,
.versus-live-inbox__row p {
    margin: 0;
}

.versus-live-inbox__row p {
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.86rem;
}

.versus-live-inbox__row > strong {
    color: var(--accent);
    font-size: 1.4rem;
}

.versus-live-inbox__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.versus-live-inbox__actions .button-link {
    padding: 0.55rem 0.7rem;
    border: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.versus-live-inbox__empty {
    margin: 0;
    padding: 0.8rem;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 0.75rem;
    text-align: center;
}

@keyframes versus-stage-radar {
    0% {
        opacity: 0.2;
        transform: translateY(-50%) scale(0.78);
    }

    75%,
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.28);
    }
}

@media (max-width: 760px) {
    .versus-live-app__header,
    .versus-live-stage {
        grid-template-columns: 1fr;
    }

    .versus-live-rating {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .versus-live-stage {
        min-height: 0;
    }

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

    .versus-live-stage__actions {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
    }

    .versus-live-stage__actions .button-link {
        flex: 1 1 10rem;
    }

    .versus-live-inbox__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .versus-live-inbox__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.versus-page {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 1180px);
}

.versus-cockpit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 15% 0%, rgba(224, 182, 73, 0.17), transparent 28rem),
        linear-gradient(135deg, rgba(32, 50, 44, 0.9), rgba(16, 23, 20, 0.72));
    box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, 0.28);
}

.versus-cockpit__content {
    display: grid;
    align-content: center;
}

.versus-cockpit h1 {
    margin: 0.2rem 0 0.75rem;
    font-size: clamp(3rem, 11vw, 6.5rem);
    line-height: 0.92;
}

.versus-cockpit .intro {
    max-width: 720px;
}

.versus-principles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1.1rem;
}

.versus-principles span {
    padding: 0.42rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.045);
    font-size: 0.82rem;
    font-weight: 800;
}

.versus-rating-panel {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid rgba(224, 182, 73, 0.24);
    border-radius: 1rem;
    background: rgba(9, 13, 11, 0.28);
}

.versus-rating-panel > strong {
    color: var(--accent);
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1;
}

.versus-rating-panel > span {
    color: var(--muted);
    font-weight: 800;
}

.versus-rating-panel dl {
    display: grid;
    gap: 0;
    margin: 0.35rem 0 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8rem;
}

.versus-rating-panel dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.58rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.versus-rating-panel dl div:last-child {
    border-bottom: 0;
}

.versus-rating-panel dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.versus-rating-panel dd {
    margin: 0;
    font-weight: 900;
}

.versus-control-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.1rem;
    background: rgba(22, 25, 33, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.versus-control-panel--ready {
    border-color: rgba(224, 182, 73, 0.26);
}

.versus-control-panel--waiting,
.versus-control-panel--offer,
.versus-control-panel--match {
    border-color: rgba(224, 182, 73, 0.55);
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.12), transparent 22rem),
        rgba(22, 25, 33, 0.74);
}

.versus-control-panel h2,
.versus-ranking-panel h2 {
    margin: 0.35rem 0;
}

.versus-control-panel p {
    margin: 0.35rem 0;
    color: var(--muted);
    line-height: 1.55;
}

.versus-control-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.versus-control-panel button.button-link {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.versus-ranking-panel {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background: rgba(22, 25, 33, 0.45);
}

.versus-ranking-panel__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.versus-ranking-panel__header p {
    margin: 0.35rem 0;
    color: var(--muted);
}

.versus-ranking-list {
    display: grid;
    gap: 0.35rem;
}

.versus-ranking-row {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.035);
}

.versus-ranking-row--current {
    border-color: rgba(224, 182, 73, 0.48);
    background: rgba(224, 182, 73, 0.08);
}

.versus-ranking-row__rank,
.versus-ranking-row__rating {
    color: var(--accent);
    font-weight: 900;
}

.versus-ranking-row h3 {
    margin: 0;
    font-size: 1rem;
}

.versus-ranking-row p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.versus-ranking-row__rating {
    font-size: 1.1rem;
}

.versus-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1.35rem;
    border: 1px solid rgba(224, 182, 73, 0.38);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.14), transparent 36rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.versus-hero h1 {
    margin: 0.2rem 0 0.85rem;
    font-size: clamp(2.5rem, 8vw, 5.2rem);
}

.versus-hero__panel,
.versus-action-card,
.versus-info-grid article,
.versus-match-card,
.versus-stat-grid article {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(22, 25, 33, 0.92);
}

.versus-hero__panel {
    padding: 1rem;
}

.versus-hero__panel strong {
    display: block;
    color: var(--accent);
    font-size: 1.65rem;
}

.versus-hero__panel dl {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0 0;
}

.versus-hero__panel dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem;
    border-radius: 0.6rem;
    background: rgba(11, 13, 18, 0.32);
}

.versus-hero__panel dt {
    color: var(--muted);
    font-weight: 800;
}

.versus-hero__panel dd {
    margin: 0;
    color: var(--text);
    font-weight: 900;
}

.versus-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.versus-stat-grid article {
    display: grid;
    gap: 0.3rem;
    padding: 0.95rem;
}

.versus-stat-grid strong {
    color: var(--accent);
    font-size: 1.55rem;
}

.versus-stat-grid span {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.versus-action-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem;
}

.versus-action-card h2,
.versus-action-card p,
.versus-section-heading h2 {
    margin: 0.35rem 0;
}

.versus-action-card p,
.versus-info-grid p,
.versus-match-card p {
    color: var(--muted);
    line-height: 1.55;
}

.versus-action-card--match,
.versus-action-card--waiting {
    border-color: rgba(224, 182, 73, 0.55);
}

.versus-action-card--awaiting_acceptance {
    border-color: rgba(224, 182, 73, 0.62);
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.12), transparent 18rem),
        rgba(22, 25, 33, 0.92);
}

.versus-action-card--cancelled {
    border-color: rgba(255, 155, 145, 0.42);
}

.versus-action-card--cooldown {
    border-color: rgba(255, 155, 145, 0.45);
}

.versus-action-card__forms {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.versus-queue-time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.versus-queue-time-grid article {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid rgba(224, 182, 73, 0.24);
    border-radius: 0.65rem;
    background: rgba(11, 13, 18, 0.28);
}

.versus-queue-time-grid span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.versus-queue-time-grid strong {
    color: var(--accent);
    font-size: 1.05rem;
}

.versus-action-card button.button-link,
.versus-hero button.button-link {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.versus-warning-card {
    padding: 1rem;
    border: 1px solid rgba(255, 205, 105, 0.38);
    border-radius: 0.85rem;
    background: rgba(255, 205, 105, 0.08);
}

.versus-warning-card h2,
.versus-warning-card p {
    margin: 0.35rem 0;
}

.versus-warning-card p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.5;
}

.versus-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.versus-info-grid article {
    padding: 1rem;
}

.versus-info-grid h2 {
    margin: 0.25rem 0;
}

.versus-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.versus-match-list {
    display: grid;
    gap: 0.85rem;
}

.versus-match-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    color: var(--text);
    text-decoration: none;
}

.versus-match-card:hover {
    border-color: rgba(224, 182, 73, 0.65);
}

.versus-match-card h3 {
    margin: 0.25rem 0;
}

.versus-match-card strong {
    color: var(--accent);
    font-size: 1.65rem;
    white-space: nowrap;
}

.versus-detail-page {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 1180px);
}

.versus-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1.35rem;
    border: 1px solid rgba(224, 182, 73, 0.38);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.14), transparent 36rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.versus-detail-hero h1 {
    margin: 0.2rem 0 0.85rem;
    font-size: clamp(2.1rem, 6vw, 4.2rem);
}

.versus-score-card,
.versus-detail-panel {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(22, 25, 33, 0.92);
}

.versus-score-card {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
}

.versus-score-card__players {
    display: grid;
    gap: 0.65rem;
}

.versus-score-card__players div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem;
    border-radius: 0.7rem;
    background: rgba(11, 13, 18, 0.34);
}

.versus-score-card__players div.is-winner {
    border: 1px solid rgba(224, 182, 73, 0.55);
    background: rgba(224, 182, 73, 0.08);
}

.versus-score-card__players span {
    font-weight: 900;
}

.versus-score-card__players strong {
    color: var(--accent);
    font-size: 1.45rem;
}

.versus-score-card p {
    margin: 0;
    color: var(--muted);
}

.versus-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.versus-detail-panel {
    padding: 1rem;
}

.versus-detail-panel h2,
.versus-detail-panel p {
    margin: 0.35rem 0;
}

.versus-detail-panel p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.55;
}

.versus-detail-panel .form-card {
    margin-top: 1rem;
}

.versus-flow-list {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.versus-flow-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: rgba(11, 13, 18, 0.26);
}

.versus-flow-list__item span {
    color: var(--muted);
    font-weight: 800;
}

.versus-flow-list__item strong {
    text-align: right;
}

.versus-flow-list__item--current {
    border-color: rgba(224, 182, 73, 0.65);
    background: rgba(224, 182, 73, 0.09);
}

.versus-flow-list__item--done strong {
    color: var(--accent);
}

.versus-flow-list__item--pending strong {
    color: var(--muted);
}

.versus-stats-section .stats-grid {
    margin-top: 0;
}

.versus-stat-compare {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(22, 25, 33, 0.92);
}

.versus-stat-compare__row {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
}

.versus-stat-compare__row:last-child {
    border-bottom: 0;
}

.versus-stat-compare__row span {
    color: var(--muted);
    font-weight: 800;
}

.versus-stat-compare__row strong {
    color: var(--text);
}

.versus-stat-compare__row--head {
    background: rgba(224, 182, 73, 0.08);
}

.versus-stat-compare__row--head strong {
    color: var(--accent);
}

.versus-score-input-grid,
.versus-player-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.versus-score-input-grid label {
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(11, 13, 18, 0.28);
}

.versus-score-input-grid input {
    font-size: 1.25rem;
    font-weight: 900;
}

.versus-player-stat-card {
    align-content: start;
}

.versus-player-stat-card h3 {
    margin: 0 0 0.65rem;
    color: var(--accent);
}

.versus-quick-result-page {
    display: grid;
    gap: 0.85rem;
    width: min(100%, 820px);
    margin: 2rem auto 0;
}

.versus-quick-result-back {
    width: fit-content;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
}

.versus-quick-result-back:hover {
    color: var(--accent);
}

.versus-quick-result-card {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.45rem);
    border: 1px solid rgba(224, 182, 73, 0.36);
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.14), transparent 22rem),
        linear-gradient(145deg, rgba(32, 50, 44, 0.96), rgba(18, 25, 23, 0.98));
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.26);
}

.versus-quick-result-header h1,
.versus-quick-result-header p {
    margin: 0;
}

.versus-quick-result-header h1 {
    margin-top: 0.2rem;
    font-size: clamp(2.2rem, 8vw, 4.3rem);
    letter-spacing: -0.06em;
}

.versus-quick-result-header p:not(.eyebrow) {
    color: var(--muted);
    font-size: 1.02rem;
}

.versus-result-picker,
.versus-quick-score {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: stretch;
}

.versus-result-picker__group {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(11, 13, 18, 0.26);
}

.versus-result-picker__group h2 {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-result-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.versus-result-option {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 4.2rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.85rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.versus-result-option:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 182, 73, 0.55);
    background: rgba(224, 182, 73, 0.08);
}

.versus-result-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.versus-result-option span {
    position: relative;
    z-index: 1;
    color: var(--text);
    font-size: clamp(1.45rem, 4vw, 2.2rem);
    font-weight: 950;
    letter-spacing: -0.04em;
}

.versus-result-option.is-selected,
.versus-result-option:has(input:checked) {
    border-color: rgba(224, 182, 73, 0.88);
    background:
        radial-gradient(circle at top, rgba(224, 182, 73, 0.22), transparent 70%),
        rgba(224, 182, 73, 0.1);
    box-shadow: 0 0 0 0.2rem rgba(224, 182, 73, 0.08);
}

.versus-result-option.is-selected span,
.versus-result-option:has(input:checked) span {
    color: var(--accent);
}

.versus-quick-player {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.versus-quick-player span,
.versus-quick-time span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.versus-quick-player input {
    width: 100%;
    min-height: 5.4rem;
    text-align: center;
    font-size: clamp(2.5rem, 10vw, 4.7rem);
    font-weight: 950;
    line-height: 1;
}

.versus-quick-score-separator {
    padding-bottom: 0.85rem;
    color: var(--accent);
    font-size: clamp(2.3rem, 8vw, 4rem);
    line-height: 1;
}

.versus-quick-rule {
    margin: -0.2rem 0 0;
    color: var(--muted);
}

.versus-quick-time {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.versus-quick-extra {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(11, 13, 18, 0.24);
}

.versus-quick-extra summary {
    cursor: pointer;
    padding: 0.85rem 1rem;
    color: var(--text);
    font-weight: 900;
}

.versus-quick-extra__content {
    display: grid;
    gap: 0.85rem;
    padding: 0 1rem 1rem;
}

.versus-quick-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.versus-quick-actions a {
    color: var(--muted);
    font-weight: 800;
    text-decoration: none;
}

.versus-quick-actions a:hover {
    color: var(--accent);
}

.report-page,
.report-detail-page {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 1180px);
}

.report-hero,
.report-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1.35rem;
    border: 1px solid rgba(224, 182, 73, 0.38);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.14), transparent 36rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.report-hero h1,
.report-detail-hero h1 {
    margin: 0.2rem 0 0.85rem;
    font-size: clamp(2.3rem, 7vw, 4.8rem);
}

.report-filter-panel {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(22, 25, 33, 0.92);
}

.report-filter-panel h2 {
    margin: 0.25rem 0 1rem;
}

.report-list {
    display: grid;
    gap: 0.85rem;
}

.report-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    color: var(--text);
    background: rgba(22, 25, 33, 0.92);
    text-decoration: none;
}

.report-card:hover {
    border-color: rgba(224, 182, 73, 0.65);
}

.report-card h3 {
    margin: 0.25rem 0;
}

.report-card p,
.report-card small {
    display: block;
    color: var(--muted);
    line-height: 1.55;
}

.report-card strong {
    color: var(--accent);
    font-size: 1.65rem;
    white-space: nowrap;
}

.tournament-list,
.league-list {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.tournament-card,
.league-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    color: var(--text);
    background: var(--surface);
    text-decoration: none;
}

.tournament-card:hover,
.league-card:hover {
    border-color: rgba(224, 182, 73, 0.65);
}

.tournament-card h2,
.tournament-card p,
.league-card h2,
.league-card p {
    margin: 0.3rem 0;
}

.tournament-card p,
.tournament-card__meta,
.league-card p,
.league-card__meta {
    color: var(--muted);
}

.tournament-card__meta,
.league-card__meta {
    font-size: 0.85rem;
}

.tournament-card strong,
.league-card strong {
    color: var(--accent);
    font-size: 1.35rem;
}

.tournament-hub-hero,
.tournament-overview-section,
.competition-hub-hero,
.competition-overview-section {
    width: min(100%, 1180px);
}

.tournament-hub-hero,
.competition-hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1.35rem;
    border: 1px solid rgba(224, 182, 73, 0.38);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.14), transparent 36rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.tournament-hub-hero h1,
.competition-hub-hero h1 {
    margin: 0.2rem 0 0.85rem;
    font-size: clamp(2.3rem, 7vw, 4.8rem);
}

.tournament-hub-stats,
.competition-hub-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tournament-hub-stats div,
.competition-hub-stats div,
.tournament-overview-section,
.competition-overview-section,
.tournament-overview-card,
.competition-overview-card,
.tournament-overview-empty,
.competition-overview-empty {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(22, 25, 33, 0.92);
}

.tournament-hub-stats div,
.competition-hub-stats div {
    display: grid;
    align-content: center;
    gap: 0.2rem;
    min-height: 6rem;
    padding: 0.9rem;
}

.tournament-hub-stats strong,
.competition-hub-stats strong {
    color: var(--accent);
    font-size: 1.7rem;
}

.tournament-hub-stats span,
.competition-hub-stats span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.tournament-overview-section,
.competition-overview-section {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
}

.tournament-overview-section__header,
.competition-overview-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tournament-overview-section__header h2,
.tournament-overview-section__header p,
.competition-overview-section__header h2,
.competition-overview-section__header p {
    margin: 0.25rem 0;
}

.tournament-overview-section__header p:not(.eyebrow),
.competition-overview-section__header p:not(.eyebrow) {
    max-width: 760px;
    color: var(--muted);
    line-height: 1.55;
}

.tournament-overview-section__header > span,
.competition-overview-section__header > span {
    display: inline-grid;
    place-items: center;
    min-width: 2.6rem;
    min-height: 2.6rem;
    border: 1px solid rgba(224, 182, 73, 0.45);
    border-radius: 999px;
    color: var(--accent);
    font-weight: 900;
}

.tournament-overview-grid-list,
.competition-overview-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.tournament-overview-card,
.competition-overview-card {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-height: 18rem;
    padding: 1rem;
    color: var(--text);
    text-decoration: none;
}

.tournament-overview-card:hover,
.tournament-overview-card:focus-visible,
.competition-overview-card:hover,
.competition-overview-card:focus-visible {
    border-color: rgba(224, 182, 73, 0.65);
    transform: translateY(-1px);
}

.tournament-overview-card--running,
.competition-overview-card--running {
    border-color: rgba(224, 182, 73, 0.42);
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.13), transparent 24rem),
        rgba(22, 25, 33, 0.94);
}

.tournament-overview-card__top,
.tournament-overview-card__stats,
.competition-overview-card__top,
.competition-overview-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.tournament-overview-card__top,
.competition-overview-card__top {
    align-items: center;
    justify-content: space-between;
}

.tournament-overview-card__top span,
.competition-overview-card__top span {
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tournament-overview-card__top small,
.tournament-overview-card p,
.competition-overview-card__top small,
.competition-overview-card p {
    color: var(--muted);
}

.tournament-overview-card h3,
.tournament-overview-card p,
.competition-overview-card h3,
.competition-overview-card p {
    margin: 0.3rem 0;
}

.tournament-overview-progress,
.competition-overview-progress {
    overflow: hidden;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.tournament-overview-progress span,
.competition-overview-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}

.tournament-overview-card__stats,
.competition-overview-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.tournament-overview-card__stats div,
.competition-overview-card__stats div {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: rgba(11, 13, 18, 0.28);
}

.tournament-overview-card__stats dt,
.competition-overview-card__stats dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.tournament-overview-card__stats dd,
.competition-overview-card__stats dd {
    margin: 0;
    color: var(--text);
    font-weight: 900;
}

.tournament-overview-card__action,
.competition-overview-card__action {
    align-self: end;
    justify-self: start;
    color: var(--accent);
    font-weight: 900;
}

.tournament-overview-empty,
.competition-overview-empty {
    padding: 1rem;
    color: var(--muted);
}

.tournament-result-page,
.league-create-page {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 1180px);
}

.tournament-result-hero,
.league-create-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1.35rem;
    border: 1px solid rgba(224, 182, 73, 0.38);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.14), transparent 36rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.tournament-result-hero h1,
.league-create-hero h1 {
    margin: 0.2rem 0 0.85rem;
    font-size: clamp(2.3rem, 7vw, 4.8rem);
}

.tournament-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.tournament-result-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(11, 13, 18, 0.35);
    font-size: 0.85rem;
    font-weight: 800;
}

.tournament-result-scoreboard,
.league-create-summary,
.tournament-result-guidance section,
.tournament-result-form-section,
.tournament-result-player-stats {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(22, 25, 33, 0.92);
}

.tournament-result-scoreboard {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
}

.league-create-summary {
    padding: 1rem;
}

.league-create-summary ol {
    display: grid;
    gap: 0.65rem;
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
    color: var(--muted);
    font-weight: 800;
}

.tournament-result-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem;
    border-radius: 0.7rem;
    background: rgba(11, 13, 18, 0.34);
}

.tournament-result-player span {
    font-weight: 900;
}

.tournament-result-player strong {
    color: var(--accent);
    font-size: 1.45rem;
}

.tournament-result-player.is-winner {
    border: 1px solid rgba(224, 182, 73, 0.62);
    background: rgba(224, 182, 73, 0.1);
}

.tournament-result-vs {
    color: var(--muted);
    font-weight: 900;
    text-align: center;
}

.tournament-result-scoreboard p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.tournament-result-layout,
.league-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 1.25rem;
    align-items: start;
}

.tournament-result-form,
.league-create-form {
    margin-top: 0;
}

.tournament-result-form-section,
.tournament-result-player-stats {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.tournament-result-section-heading {
    display: grid;
    gap: 0.25rem;
}

.tournament-result-section-heading h2,
.tournament-result-section-heading p {
    margin: 0;
}

.tournament-result-section-heading p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.55;
}

.league-create-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.league-create-mode-grid article {
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(11, 13, 18, 0.28);
}

.league-create-mode-grid article.is-selected {
    border-color: rgba(224, 182, 73, 0.6);
    background: rgba(224, 182, 73, 0.08);
}

.league-create-mode-grid strong,
.league-create-mode-grid span {
    display: block;
}

.league-create-mode-grid strong {
    color: var(--accent);
}

.league-create-mode-grid span {
    margin-top: 0.35rem;
    color: var(--muted);
    line-height: 1.5;
}

.tournament-result-guidance {
    display: grid;
    gap: 1rem;
}

.tournament-result-guidance section {
    padding: 1rem;
}

.tournament-result-guidance h2,
.tournament-result-guidance p {
    margin: 0.25rem 0;
}

.tournament-result-guidance p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.6;
}

.tournament-result-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.tournament-result-submit a {
    color: var(--accent);
    font-weight: 900;
}

.participant-list {
    display: grid;
    gap: 0.5rem;
    padding-left: 1.4rem;
}

.participant-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.participant-list .button-link {
    padding: 0.45rem 0.65rem;
}

.tournament-page {
    display: grid;
    gap: 1.5rem;
}

.tournament-hero,
.tournament-tab-panel,
.tournament-tab-stack,
.tournament-stat-grid,
.tournament-detail-layout {
    width: min(100%, 1180px);
}

.tournament-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1.35rem;
    border: 1px solid rgba(224, 182, 73, 0.38);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.14), transparent 36rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.tournament-hero h1 {
    max-width: 860px;
    margin: 0.2rem 0 0.85rem;
    font-size: clamp(2.1rem, 5vw, 4.1rem);
}

.tournament-hero__main,
.tournament-hero__panel,
.tournament-panel,
.tournament-stat-card {
    min-width: 0;
}

.tournament-hero__meta,
.tournament-section-tabs,
.tournament-section-tabs__items,
.tournament-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.tournament-hero__meta span,
.tournament-section-tabs a,
.tournament-anchor-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(11, 13, 18, 0.35);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.tournament-section-tabs a small {
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    line-height: 1;
}

.tournament-section-tabs {
    align-items: center;
}

.tournament-section-tabs__items {
    align-items: center;
}

.tournament-section-tabs__back {
    border-color: rgba(224, 182, 73, 0.45) !important;
    color: var(--accent) !important;
}

.tournament-section-tabs a[aria-selected="true"] {
    border-color: rgba(224, 182, 73, 0.75);
    color: var(--text);
    background: rgba(224, 182, 73, 0.16);
    box-shadow: 0 0 0 1px rgba(224, 182, 73, 0.16) inset;
}

.tournament-section-tabs a:focus-visible {
    outline: 2px solid rgba(224, 182, 73, 0.8);
    outline-offset: 3px;
}

.tournament-section-tabs a:hover,
.tournament-anchor-nav a:hover {
    border-color: rgba(224, 182, 73, 0.65);
    color: var(--accent);
}

.tournament-description {
    max-width: 780px;
    color: var(--muted);
    line-height: 1.7;
}

.tournament-hero__panel,
.tournament-panel,
.tournament-stat-card {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(22, 25, 33, 0.92);
}

.tournament-hero__panel {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    padding: 1rem;
}

.tournament-hero__panel strong {
    color: var(--accent);
    font-size: 1.35rem;
}

.tournament-hero__panel dl {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.tournament-hero__panel dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
}

.tournament-hero__panel dt {
    color: var(--muted);
    font-size: 0.82rem;
}

.tournament-hero__panel dd {
    margin: 0;
    color: var(--text);
    font-weight: 800;
}

.tournament-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.tournament-stat-card {
    display: grid;
    gap: 0.3rem;
    padding: 0.95rem;
}

.tournament-stat-card strong {
    color: var(--accent);
    font-size: 1.55rem;
}

.tournament-stat-card span {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.tournament-tab-stack,
.tournament-tab-panel--overview,
.tournament-overview-grid {
    display: grid;
    gap: 1rem;
}

.tournament-tab-panel {
    scroll-margin-top: 1rem;
}

.tournament-tab-panel[hidden] {
    display: none !important;
}

.tournament-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
}

.tournament-tab-heading {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.09), transparent 28rem),
        rgba(22, 25, 33, 0.88);
}

.tournament-tab-heading h2,
.tournament-tab-heading p {
    margin: 0;
}

.tournament-tab-heading p:not(.eyebrow) {
    max-width: 850px;
    color: var(--muted);
    line-height: 1.6;
}

.tournament-detail-layout {
    display: grid;
    grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.tournament-sidebar,
.tournament-content,
.tournament-content-list {
    display: grid;
    gap: 1rem;
}

.tournament-tab-panel > .tournament-sidebar {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.tournament-start-readiness {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: rgba(11, 13, 18, 0.28);
}

.tournament-start-readiness strong {
    color: var(--accent);
}

.tournament-start-readiness span {
    color: var(--muted);
    line-height: 1.45;
}

.tournament-start-readiness--blocked {
    border-color: rgba(135, 62, 62, 0.7);
}

.tournament-start-readiness--blocked strong {
    color: #f0a0a0;
}

.tournament-capacity-meter {
    overflow: hidden;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.tournament-capacity-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}

.tournament-panel {
    padding: 1.1rem;
}

.tournament-panel--highlight {
    border-color: rgba(224, 182, 73, 0.65);
    background: linear-gradient(145deg, var(--surface-light), var(--surface));
}

.tournament-panel--focus {
    border-color: rgba(224, 182, 73, 0.65);
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.12), transparent 28rem),
        rgba(22, 25, 33, 0.95);
}

.tournament-panel--wide {
    overflow: hidden;
}

.tournament-panel h2,
.tournament-panel h3,
.tournament-panel p {
    margin-top: 0;
}

.tournament-panel p {
    color: var(--muted);
    line-height: 1.6;
}

.tournament-panel__header {
    margin-bottom: 0.85rem;
}

.tournament-panel__header--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tournament-panel__header h2 {
    margin-bottom: 0;
}

.tournament-focus-count {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(224, 182, 73, 0.55);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(224, 182, 73, 0.08);
    font-size: 0.82rem;
    font-weight: 900;
}

.tournament-page .section-heading {
    margin-top: 0;
}

.tournament-page .empty-state,
.tournament-page .section-block {
    max-width: none;
    margin-top: 0;
}

.tournament-page .form-card {
    margin-top: 0.85rem;
}

.tournament-participant-list {
    max-height: 32rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.tournament-page .bracket-shell {
    margin-top: 0;
}

.tournament-page .bracket {
    gap: 1rem;
    padding: 0.25rem 0 0.85rem;
}

.tournament-page .bracket-round {
    min-width: 260px;
}

.tournament-page .bracket-round h3 {
    margin: 0 0 0.25rem;
    padding: 0 0.25rem;
}

.tournament-page .bracket-match {
    border-radius: 0.65rem;
    background: rgba(11, 13, 18, 0.38);
}

.tournament-page .bracket-match p {
    background: rgba(255, 255, 255, 0.045);
}

.tournament-page .bracket-action {
    display: inline-flex;
}

.tournament-round-list {
    display: grid;
    gap: 1rem;
}

.tournament-round-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(11, 13, 18, 0.28);
}

.tournament-round-card > summary {
    list-style: none;
    cursor: pointer;
}

.tournament-round-card > summary::-webkit-details-marker {
    display: none;
}

.tournament-round-card > summary::after {
    content: "Details";
    align-self: center;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.76rem;
    font-weight: 800;
}

.tournament-round-card[open] > summary::after {
    content: "Einklappen";
    color: var(--accent);
}

.tournament-round-card--current {
    border-color: rgba(224, 182, 73, 0.65);
    background:
        radial-gradient(circle at top left, rgba(224, 182, 73, 0.12), transparent 26rem),
        rgba(11, 13, 18, 0.36);
}

.tournament-round-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tournament-round-card__header h3 {
    margin: 0.15rem 0 0;
}

.tournament-round-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.tournament-round-card__meta span,
.tournament-match-card__top strong {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
    font-weight: 800;
}

.tournament-round-progress {
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.tournament-round-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}

.tournament-open-match-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.tournament-open-match-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(224, 182, 73, 0.38);
    border-radius: 0.75rem;
    background: rgba(11, 13, 18, 0.35);
}

.tournament-open-match-card h3,
.tournament-open-match-card p {
    margin: 0.25rem 0;
}

.tournament-open-match-card h3 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.tournament-open-match-card h3 span {
    color: var(--muted);
    font-size: 0.85rem;
}

.tournament-open-match-card p:not(.eyebrow) {
    color: var(--muted);
    font-size: 0.9rem;
}

.tournament-bye-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(224, 182, 73, 0.45);
    border-radius: 0.65rem;
    background: rgba(224, 182, 73, 0.09);
}

.tournament-bye-card strong {
    color: var(--accent);
}

.tournament-bye-card span {
    color: var(--muted);
    font-size: 0.88rem;
}

.tournament-match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
}

.tournament-match-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(23, 35, 31, 0.78);
}

.tournament-match-card--open {
    border-color: rgba(224, 182, 73, 0.52);
}

.tournament-match-card--confirmed {
    border-color: rgba(82, 163, 118, 0.42);
}

.tournament-match-card__top,
.tournament-match-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.tournament-match-card__top span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tournament-match-card__top strong {
    color: var(--accent);
}

.tournament-match-card__note {
    margin: 0;
    color: var(--muted);
}

.tournament-match-action-hint {
    display: inline-flex;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.tournament-versus-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.045);
}

.tournament-versus-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tournament-versus-row strong {
    justify-self: end;
    color: var(--muted);
    font-size: 1.3rem;
}

.tournament-versus-row--winner {
    background: rgba(224, 182, 73, 0.12);
}

.tournament-versus-row--winner span,
.tournament-versus-row--winner strong {
    color: var(--accent);
    font-weight: 900;
}

.tournament-page .group-table-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tournament-page .league-table-shell {
    margin-top: 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(11, 13, 18, 0.28);
}

.tournament-page .league-table-shell h3 {
    margin-top: 0;
}

.bracket-shell {
    margin-top: 3rem;
}

.bracket {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 0 1rem;
}

.bracket-round {
    display: grid;
    min-width: 230px;
    gap: 0.75rem;
}

.bracket-round h3 {
    color: var(--accent);
}

.bracket-match {
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--surface);
}

.bracket-match--bye {
    border-color: rgba(224, 182, 73, 0.48);
}

.bracket-match p {
    margin: 0;
    padding: 0.45rem;
    border-radius: 0.3rem;
    background: var(--surface-light);
}

.bracket-match p + p {
    margin-top: 0.4rem;
}

.bracket-match small {
    display: block;
    margin-top: 0.55rem;
    color: var(--muted);
}

.bracket-winner {
    color: var(--accent);
    font-weight: 800;
}

.bracket-score {
    display: block;
    margin-top: 0.55rem;
    color: var(--accent);
    font-size: 1.1rem;
}

.bracket-action {
    margin-top: 0.75rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
}

.champion-card {
    border-color: rgba(224, 182, 73, 0.65);
}

.league-page {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 1180px);
}

.league-page .league-table-shell,
.league-page .league-schedule-shell {
    margin-top: 0;
}

.league-page .participant-list {
    margin-top: 0.85rem;
}

.league-table-shell,
.league-schedule-shell {
    margin-top: 3rem;
}

.table-scroll {
    overflow-x: auto;
}

.league-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

.league-table th,
.league-table td {
    padding: 0.75rem;
    border: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.league-table th,
.league-table strong {
    color: var(--accent);
}

.group-table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
}

.group-table-grid .league-table-shell {
    margin-top: 0;
}

.group-qualifier {
    background: rgba(224, 182, 73, 0.08);
}

.league-matchday-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.league-matchday {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.league-matchday--open {
    border-color: rgba(224, 182, 73, 0.55);
    box-shadow: 0 0 0 1px rgba(224, 182, 73, 0.12);
}

.league-matchday__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.league-matchday__header h3 {
    margin: 0;
}

.league-matchday__header span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(224, 182, 73, 0.35);
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
}

.league-matchday h3 {
    margin-top: 0;
    color: var(--accent);
}

.league-fixture {
    padding: 0.75rem;
    border-radius: 0.4rem;
    background: var(--surface-light);
}

.league-fixture:target {
    outline: 2px solid rgba(224, 182, 73, 0.85);
    outline-offset: 3px;
    scroll-margin-top: 6rem;
}

.league-fixture + .league-fixture {
    margin-top: 0.65rem;
}

.league-fixture p {
    margin: 0;
}

.league-fixture small {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
}

.league-winner,
.league-score {
    color: var(--accent);
    font-weight: 800;
}

.league-score {
    display: block;
    margin-top: 0.4rem;
}

.league-action {
    margin-top: 0.65rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
}

.news-hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 1.25rem;
    max-width: 1120px;
    margin-top: 2rem;
}

.news-hub-hero__copy,
.news-editor-note,
.news-section,
.news-detail__hero,
.news-detail__content,
.news-detail__sidebar,
.news-editor-help {
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--surface);
}

.news-hub-hero__copy {
    background:
        radial-gradient(circle at top right, rgba(224, 182, 73, 0.12), transparent 18rem),
        linear-gradient(145deg, var(--surface-light), var(--surface));
}

.news-hub-hero__copy h1,
.news-detail__hero h1,
.news-editor-heading h1 {
    margin: 0.2rem 0 0.65rem;
    font-size: clamp(2.3rem, 6vw, 4.5rem);
}

.news-hub-hero__copy p,
.news-editor-note p,
.news-section__header p,
.news-card p,
.news-card small,
.news-detail__meta,
.news-detail__sidebar dd,
.news-editor-help p,
.news-editor-help li {
    color: var(--muted);
    line-height: 1.6;
}

.news-section {
    max-width: 1120px;
    margin-top: 2rem;
}

.news-section--editorial {
    border-style: dashed;
    background: rgba(23, 35, 31, 0.62);
}

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

.news-section__header h2,
.news-section__header p,
.news-section__subheading {
    margin: 0.2rem 0;
}

.news-section__subheading {
    margin-top: 1rem;
}

.news-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.news-list--magazine,
.news-list--compact {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.news-card {
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.news-card--feature,
.news-card--internal {
    border-color: rgba(224, 182, 73, 0.65);
}

.news-card--feature {
    background: linear-gradient(145deg, rgba(224, 182, 73, 0.12), var(--surface));
}

.news-card__image {
    display: block;
    width: calc(100% + 2.5rem);
    max-height: 240px;
    margin: -1.25rem -1.25rem 1rem;
    object-fit: cover;
}

.news-card--feature .news-card__image {
    max-height: 280px;
}

.news-card h2 {
    margin: 0.35rem 0;
}

.news-card h2 a {
    color: var(--text);
    text-decoration: none;
}

.news-card h2 a:hover {
    color: var(--accent);
}

.news-card__meta {
    color: var(--accent) !important;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.news-archive-panel {
    margin-top: 1.25rem;
}

.news-archive-panel summary {
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.news-archive-panel summary::-webkit-details-marker {
    display: none;
}

.news-detail {
    max-width: 1120px;
}

.news-detail__image {
    display: block;
    width: 100%;
    max-height: 520px;
    margin-top: 1.25rem;
    border-radius: 0.85rem;
    object-fit: cover;
}

.news-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.news-detail__content {
    font-size: 1.04rem;
    line-height: 1.85;
    white-space: normal;
}

.news-detail__sidebar {
    align-self: start;
}

.news-detail__sidebar dl {
    display: grid;
    gap: 0.85rem;
    margin: 1rem 0;
}

.news-detail__sidebar dt {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.news-detail__sidebar dd {
    margin: 0.15rem 0 0;
}

.news-detail__actions {
    margin-top: 1.5rem;
}

.news-editor-page {
    max-width: 1120px;
}

.news-editor-heading {
    max-width: 820px;
}

.news-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 1.25rem;
    align-items: start;
}

.news-editor-form {
    margin-top: 1.25rem;
}

.news-editor-help {
    margin-top: 1.25rem;
}

.news-editor-help h2 {
    margin: 0.35rem 0;
}

.news-editor-help ul {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
}

.news-form-image {
    display: grid;
    gap: 0.75rem;
}

.news-form-image img {
    width: min(100%, 360px);
    max-height: 220px;
    border-radius: 0.5rem;
    object-fit: cover;
}

.form-card .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 400;
}

.form-card .checkbox-label input {
    width: auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.stats-card {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.stats-card h2 {
    margin-top: 0;
}

.stats-card dl,
.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.stats-card dl div,
.summary-stats div {
    padding: 0.65rem;
    border-radius: 0.4rem;
    background: var(--surface-light);
}

.stats-card dt,
.summary-stats dt {
    color: var(--muted);
    font-size: 0.8rem;
}

.stats-card dd,
.summary-stats dd {
    margin: 0.25rem 0 0;
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 800;
}

.achievement-section {
    max-width: 1120px;
}

.achievement-section > p {
    color: var(--muted);
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.achievement-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: var(--background);
    opacity: 0.68;
}

.achievement-card--unlocked {
    border-color: rgba(224, 182, 73, 0.65);
    background: linear-gradient(145deg, var(--surface-light), var(--surface));
    opacity: 1;
}

.achievement-card__icon {
    display: inline-block;
    padding: 0.35rem 0.45rem;
    border-radius: 0.35rem;
    color: #1b1a12;
    background: var(--accent);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

.achievement-card h3 {
    margin: 0.75rem 0 0.35rem;
}

.achievement-card p,
.achievement-card small {
    color: var(--muted);
    line-height: 1.5;
}

.notification-toolbar {
    margin-top: 1.5rem;
}

.notification-list {
    display: grid;
    gap: 0.75rem;
}

.notification-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--surface);
}

.notification-card--unread {
    border-color: rgba(224, 182, 73, 0.65);
    background: linear-gradient(145deg, var(--surface-light), var(--surface));
}

.notification-card h2 {
    margin: 0.25rem 0;
    font-size: 1.1rem;
}

.notification-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.notification-card__meta {
    color: var(--accent) !important;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.user-role-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 2rem;
}

.user-role-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--surface);
}

.user-role-card h2 {
    margin: 0.2rem 0;
    font-size: 1.15rem;
}

.user-role-card p,
.user-role-card small,
.user-role-form small {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.user-role-card__meta {
    color: var(--accent) !important;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.user-role-form {
    display: grid;
    min-width: min(100%, 230px);
    gap: 0.55rem;
}

.user-role-actions {
    display: grid;
    min-width: min(100%, 230px);
    gap: 0.9rem;
}

.user-role-actions .user-role-form {
    min-width: 0;
}

.user-role-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 800;
}

.user-role-form select,
.user-role-form input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    color: var(--text);
    background: var(--background);
    font: inherit;
}

.club-management-card {
    align-items: flex-start;
}

.club-management-actions {
    display: grid;
    min-width: min(100%, 320px);
    gap: 1rem;
}

.billing-summary {
    margin-top: 0.65rem !important;
    color: var(--accent) !important;
}

.club-billing-form {
    display: grid;
    gap: 0.55rem;
}

.club-billing-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 800;
}

.club-billing-form input,
.club-billing-form select,
.club-billing-form textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    color: var(--text);
    background: var(--background);
    font: inherit;
}

.club-billing-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.club-billing-form small {
    color: var(--muted);
    line-height: 1.5;
}

.leaderboard-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 2rem;
}

.leaderboard-card {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--surface);
}

.leaderboard-card--current {
    border-color: rgba(224, 182, 73, 0.65);
    background: linear-gradient(145deg, var(--surface-light), var(--surface));
}

.leaderboard-card h2,
.leaderboard-card p {
    margin: 0;
}

.leaderboard-card p {
    color: var(--muted);
    line-height: 1.5;
}

.leaderboard-card__rank,
.leaderboard-card__rating {
    color: var(--accent);
    font-size: 1.15rem;
}

.leaderboard-page .versus-section-heading {
    margin-top: 0.25rem;
}

.leaderboard-list--modern {
    margin-top: 0;
}

.leaderboard-list--modern .leaderboard-card {
    background: rgba(22, 25, 33, 0.92);
}

.leaderboard-list--modern .leaderboard-card__rating {
    font-size: 1.4rem;
}

.rating-change-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}

.rating-change-grid article {
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem;
    border-radius: 0.5rem;
    background: var(--surface-light);
}

.rating-change-grid span {
    color: var(--accent);
    font-weight: 800;
}

.protest-list {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.protest-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid rgba(224, 182, 73, 0.65);
    border-radius: 0.75rem;
    background: var(--surface);
}

.protest-card h2,
.protest-card p {
    margin: 0.45rem 0;
}

.protest-card__meta {
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.protest-card blockquote,
.protest-detail blockquote {
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--accent);
    color: var(--muted);
    background: var(--background);
    line-height: 1.6;
}

.protest-resolution-form {
    margin-top: 0;
}

.match-screenshot,
.match-screenshot-form img {
    display: block;
    width: min(100%, 640px);
    max-height: 520px;
    border-radius: 0.65rem;
    object-fit: contain;
    background: var(--background);
}

.match-screenshot-form {
    display: grid;
    gap: 0.75rem;
}

.module-card .button-role-active {
    color: var(--text);
    background: #456e5d;
}

.module-card .button-danger {
    color: var(--text);
    background: #873e3e;
}

.module-grant-form {
    display: grid;
    gap: 0.65rem;
}

.module-grant-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 800;
}

.module-grant-form select,
.module-grant-form input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    color: var(--text);
    background: var(--background);
    font: inherit;
}

.package-template-form {
    display: grid;
    gap: 0.75rem;
}

.package-template-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 800;
}

.package-template-form input,
.package-template-form select,
.package-template-form textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    color: var(--text);
    background: var(--background);
    font: inherit;
}

.package-module-options {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
}

.package-module-option {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 0.55rem !important;
}

.package-module-option input {
    width: auto;
}

.package-module-option span {
    display: grid;
    gap: 0.15rem;
}

.package-module-option small {
    color: var(--muted);
}

.form-card button {
    padding: 0.9rem 1rem;
    border: 0;
    border-radius: 0.4rem;
    color: #1b1a12;
    background: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.form-card button:hover {
    background: var(--accent-dark);
}

.label-note,
.form-footer {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 400;
}

.field-error {
    color: #ff9b91;
    font-weight: 400;
}

.code-input,
.code-sample {
    font-family: Consolas, "Courier New", monospace;
}

.code-sample {
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--muted);
    background: var(--background);
    line-height: 1.45;
}

.alert {
    max-width: 760px;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(224, 182, 73, 0.4);
    border-radius: 0.5rem;
    color: var(--text);
    background: rgba(224, 182, 73, 0.12);
}

.alert--error {
    border-color: rgba(255, 112, 99, 0.5);
    background: rgba(255, 112, 99, 0.13);
}

@media (max-width: 620px) {
    .site-header__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.7rem;
        padding: 1rem 0;
    }

    .site-nav {
        justify-content: flex-start;
        width: 100%;
    }

    .nav-menu {
        position: static;
    }

    .nav-menu[open] {
        width: 100%;
    }

    .nav-menu__panel,
    .nav-menu--left .nav-menu__panel {
        position: static;
        width: min(100%, 22rem);
        max-width: 100%;
        max-height: none;
        margin-top: 0.35rem;
    }

    .version {
        width: 100%;
        margin: 0.35rem 0 0;
    }

    .global-queue-banner {
        top: 0.45rem;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.85rem;
    }

    .global-queue-banner__stats {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .global-queue-banner__stats div {
        min-width: 0;
    }

    .global-queue-banner__state {
        grid-column: 1 / 2;
        grid-row: auto;
        justify-self: start;
    }

    .global-queue-banner .button-link {
        grid-column: 2 / -1;
        grid-row: auto;
        justify-self: end;
    }

    .club-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .club-cockpit-hero {
        grid-template-columns: 1fr;
    }

    .club-frontpage-hero {
        grid-template-columns: 1fr;
    }

    .public-club-directory-hero,
    .public-club-profile-hero,
    .club-profile-editor-hero,
    .public-club-profile-content,
    .club-profile-editor-layout {
        grid-template-columns: 1fr;
    }

    .public-club-profile-identity {
        flex-direction: column;
    }

    .public-club-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-hub-hero,
    .news-detail__layout,
    .news-editor-layout {
        grid-template-columns: 1fr;
    }

    .club-cockpit-section__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .club-cockpit-stats {
        width: 100%;
    }

    .club-context-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-management-summary {
        grid-template-columns: 1fr;
    }

    .member-management-section__header {
        flex-direction: column;
    }

    .member-detail-hero {
        grid-template-columns: 1fr;
    }

    .member-detail-section__header {
        flex-direction: column;
    }

    .notification-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-page .profile-showcase,
    .profile-section--split,
    .profile-match-card {
        grid-template-columns: 1fr;
    }

    .profile-kpi-grid,
    .profile-metric-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-section__header {
        flex-direction: column;
    }

    .user-role-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .protest-card {
        grid-template-columns: 1fr;
    }

    .tournament-hub-hero,
    .competition-hub-hero,
    .versus-cockpit,
    .versus-control-panel,
    .versus-hero,
    .versus-detail-hero,
    .report-hero,
    .report-detail-hero,
    .tournament-result-hero,
    .league-create-hero,
    .tournament-result-layout,
    .league-create-layout,
    .versus-action-card,
    .tournament-hero,
    .tournament-detail-layout {
        grid-template-columns: 1fr;
    }

    .tournament-hub-stats,
    .competition-hub-stats,
    .versus-stat-grid,
    .versus-info-grid,
    .versus-result-picker,
    .versus-quick-score,
    .tournament-overview-card__stats {
        grid-template-columns: 1fr;
    }

    .versus-quick-score-separator {
        display: none;
    }

    .versus-quick-player input {
        min-height: 4.7rem;
    }

    .tournament-overview-section__header,
    .competition-overview-section__header,
    .versus-ranking-panel__header,
    .versus-section-heading,
    .versus-match-card,
    .report-card {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .tournament-hub-hero,
    .competition-hub-hero,
    .versus-cockpit,
    .versus-hero,
    .versus-detail-hero,
    .report-hero,
    .report-detail-hero,
    .tournament-result-hero,
    .league-create-hero,
    .tournament-hero {
        padding: 1rem;
    }

    .tournament-hub-hero h1,
    .competition-hub-hero h1,
    .versus-cockpit h1,
    .versus-hero h1,
    .versus-detail-hero h1,
    .report-hero h1,
    .report-detail-hero h1,
    .tournament-result-hero h1,
    .league-create-hero h1,
    .tournament-hero h1 {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .league-create-mode-grid {
        grid-template-columns: 1fr;
    }

    .tournament-hero__panel dl div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }

    .tournament-round-card__header,
    .tournament-match-card__top,
    .tournament-match-card__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .tournament-panel__header--split {
        align-items: flex-start;
        flex-direction: column;
    }

    .tournament-round-card__meta {
        justify-content: flex-start;
    }

    .tournament-round-card > summary::after {
        align-self: flex-start;
    }

    .tournament-open-match-card {
        grid-template-columns: 1fr;
    }

    .tournament-open-match-card .button-link {
        justify-self: start;
    }

    .tournament-match-grid {
        grid-template-columns: 1fr;
    }

    .versus-control-panel__actions {
        justify-content: flex-start;
    }

    .versus-rating-panel dl div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }

    .versus-ranking-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .versus-ranking-row__rating {
        grid-column: 2 / -1;
    }

    .tournament-page .bracket-round {
        min-width: 235px;
    }

    .form-grid,
    .form-grid--three,
    .profile-kpi-grid,
    .profile-metric-list,
    .versus-queue-time-grid,
    .versus-score-input-grid,
    .versus-player-stat-grid,
    .versus-stat-compare__row {
        grid-template-columns: 1fr;
    }
}