.gk-ocs-public {
    --gk-ocs-accent: #18c7d8;
    --gk-ocs-bg: #0c1025;
    --gk-ocs-panel: #111735;
    --gk-ocs-line: rgba(255, 255, 255, 0.12);
    color: #f8fbff;
    font-family: inherit;
}

.gk-ocs-public h3,
.gk-ocs-public h4 {
    color: inherit;
    letter-spacing: 0;
    margin: 0 0 14px;
}

.gk-ocs-empty {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    color: #3c434a;
    padding: 12px;
}

.gk-ocs-fixture-list {
    display: grid;
    gap: 12px;
}

.gk-ocs-fixture-card {
    background: var(--gk-ocs-panel);
    border-left: 6px solid var(--gk-ocs-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    color: #f8fbff;
    max-width: 560px;
    min-width: 0;
}

.gk-ocs-fixture-card.is-placeholder {
    opacity: 0.72;
}

.gk-ocs-fixture-card header,
.gk-ocs-fixture-card footer {
    color: #9fb0d2;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 8px;
    justify-content: space-between;
    padding: 8px 12px;
    text-transform: uppercase;
}

.gk-ocs-match-row {
    align-items: center;
    border-top: 1px solid var(--gk-ocs-line);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 44px;
    padding: 8px 12px;
}

.gk-ocs-match-row strong {
    color: #f8fbff;
    min-height: 1.4em;
    overflow-wrap: anywhere;
}

.gk-ocs-match-row span {
    color: #fff;
    font-weight: 700;
    min-width: 24px;
    text-align: right;
}

.gk-ocs-match-row.is-winner strong,
.gk-ocs-match-row.is-winner span {
    color: var(--gk-ocs-accent);
}

.gk-ocs-standings {
    color: #1d2327;
}

.gk-ocs-standings table {
    border-collapse: collapse;
    width: 100%;
}

.gk-ocs-standings th,
.gk-ocs-standings td {
    border-bottom: 1px solid #dcdcde;
    padding: 10px;
    text-align: left;
}

.gk-ocs-standings th {
    background: #f6f7f7;
    font-weight: 700;
}

.gk-ocs-standings td:not(:nth-child(2)),
.gk-ocs-standings th:not(:nth-child(2)) {
    text-align: right;
}

.gk-ocs-bracket {
    --gk-ocs-bracket-card-height: 132px;
    --gk-ocs-bracket-card-gap: 22px;
    --gk-ocs-bracket-column-gap: 64px;
    --gk-ocs-bracket-header-height: 48px;
    --gk-ocs-bracket-line: rgba(213, 236, 255, 0.62);
    background: linear-gradient(135deg, #127a9a 0%, #24356f 55%, #34265f 100%);
    border-radius: 8px;
    min-height: 360px;
    overflow: hidden;
    padding: 24px;
}

.gk-ocs-bracket-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}

.gk-ocs-bracket-grid {
    align-items: flex-start;
    display: grid;
    gap: var(--gk-ocs-bracket-column-gap);
    grid-auto-columns: minmax(280px, 340px);
    grid-auto-flow: column;
    min-width: max-content;
}

.gk-ocs-bracket-round {
    align-content: start;
    display: grid;
    grid-auto-rows: auto;
    gap: var(--gk-ocs-bracket-card-gap);
    min-width: 280px;
    position: relative;
}

.gk-ocs-bracket-round h4 {
    align-items: center;
    align-self: start;
    background: rgba(7, 12, 36, 0.82);
    border-left: 6px solid var(--gk-ocs-accent);
    box-sizing: border-box;
    color: #f8fbff;
    display: flex;
    font-size: 16px;
    height: var(--gk-ocs-bracket-header-height) !important;
    line-height: 1.2;
    margin: 0;
    min-height: 0 !important;
    padding: 14px 16px;
    text-transform: uppercase;
}

.gk-ocs-bracket .gk-ocs-fixture-card {
    align-self: start;
    box-sizing: border-box;
    display: block;
    flex: 0 0 auto;
    height: var(--gk-ocs-bracket-card-height) !important;
    max-width: none;
    min-height: 0 !important;
    position: relative;
    width: 100%;
}

.gk-ocs-bracket .gk-ocs-fixture-card header,
.gk-ocs-bracket .gk-ocs-fixture-card footer {
    align-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 32px !important;
    min-height: 0 !important;
}

.gk-ocs-bracket .gk-ocs-match-row {
    box-sizing: border-box;
    height: 34px !important;
    min-height: 0 !important;
}

.gk-ocs-bracket-round-2 .gk-ocs-fixture-card:first-of-type {
    margin-top: calc((var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap)) / 2);
}

.gk-ocs-bracket-round-2 .gk-ocs-fixture-card {
    margin-bottom: calc(var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap) - var(--gk-ocs-bracket-card-gap));
}

.gk-ocs-bracket-round-3 .gk-ocs-fixture-card:first-of-type {
    margin-top: calc((var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap)) * 1.5);
}

.gk-ocs-bracket-round-3 .gk-ocs-fixture-card {
    margin-bottom: calc((var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap)) * 3 - var(--gk-ocs-bracket-card-height));
}

.gk-ocs-bracket-round-4 .gk-ocs-fixture-card:first-of-type {
    margin-top: calc((var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap)) * 3.5);
}

.gk-ocs-bracket-round-4 .gk-ocs-fixture-card {
    margin-bottom: calc((var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap)) * 7 - var(--gk-ocs-bracket-card-height));
}

.gk-ocs-bracket-round:not(:last-child) .gk-ocs-fixture-card::after {
    background: var(--gk-ocs-bracket-line);
    content: "";
    height: 2px;
    left: 100%;
    position: absolute;
    top: 50%;
    width: var(--gk-ocs-bracket-column-gap);
    z-index: 0;
}

.gk-ocs-bracket-round:not(:last-child) .gk-ocs-fixture-card:nth-of-type(odd)::before {
    background: var(--gk-ocs-bracket-line);
    content: "";
    height: calc(var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap));
    left: calc(100% + (var(--gk-ocs-bracket-column-gap) / 2));
    position: absolute;
    top: 50%;
    width: 2px;
    z-index: 0;
}

.gk-ocs-bracket-round-2:not(:last-child) .gk-ocs-fixture-card:nth-of-type(odd)::before {
    height: calc((var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap)) * 2);
}

.gk-ocs-bracket-round-3:not(:last-child) .gk-ocs-fixture-card:nth-of-type(odd)::before {
    height: calc((var(--gk-ocs-bracket-card-height) + var(--gk-ocs-bracket-card-gap)) * 4);
}

@media (max-width: 720px) {
    .gk-ocs-bracket {
        --gk-ocs-bracket-column-gap: 36px;
        padding: 14px;
    }

    .gk-ocs-fixture-card {
        max-width: none;
    }
}