:root {

    --red:
        #b5121b;

    --red-dark:
        #7f0b12;

    --white:
        #ffffff;

    --paper:
        #fffdfa;

    --ink:
        #171717;

    --muted:
        #6d6d6d;

    --line:
        #ded8d8;

}



* {

    box-sizing:
        border-box;

}



html,
body {

    margin:
        0;

    padding:
        0;

}



body {

    min-height:
        100vh;

    font-family:

        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--ink);

    background:

        linear-gradient(

            180deg,

            #d21f2b,

            #8c0b16

        );

}



a {

    text-decoration:
        none;

    color:
        inherit;

}



/* HEADER */

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        50;

    background:
        #760913;

    color:
        white;

}



.site-header__inner {

    max-width:
        1140px;

    margin:
        auto;

    padding:
        12px
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}



.brand {

    display:
        flex;

    gap:
        10px;

    align-items:
        center;

}



.brand__mark {

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    background:
        white;

    color:
        var(--red);

    font-size:
        10px;

    font-weight:
        900;

}



.brand__text strong,
.brand__text small {

    display:
        block;

}



.brand__text small {

    font-size:
        11px;

    color:
        #f4cdd0;

}



.top-actions {

    display:
        flex;

    gap:
        8px;

}



.top-actions a {

    padding:
        9px
        12px;

    border:

        1px solid
        rgba(255,255,255,.25);

    border-radius:
        8px;

}



.admin-link {

    background:
        white;

    color:
        #8a0b14 !important;

    font-weight:
        800;

}



/* MAIN */

.site-main {

    max-width:
        1140px;

    margin:
        auto;

    padding:
        28px
        14px
        70px;

}



/* HERO */

.home-hero {

    text-align:
        center;

    color:
        white;

}



.eyebrow {

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}



.home-hero h1 {

    font-size:
        38px;

    margin:
        8px
        0;

}



.lead {

    color:
        #f9e5e7;

}



/* PORTAL */

.portal {

    display:
        grid;

    grid-template-columns:

        repeat(
            3,
            1fr
        );

    gap:
        18px;

    padding:
        18px;

    background:

        rgba(
            255,
            255,
            255,
            .1
        );

    border-radius:
        20px;

}



.portal__column h2 {

    text-align:
        center;

    color:
        white;

    font-size:
        11px;

    letter-spacing:
        .12em;

}



.portal-btn {

    display:
        block;

    text-align:
        center;

    color:
        white;

    font-weight:
        800;

    padding:
        14px
        16px;

    margin-bottom:
        12px;

    border-radius:
        8px;

    background:

        linear-gradient(

            #dc2b3a,

            #9f0e16

        );

    border:

        1px solid
        #750a11;

    box-shadow:

        0 4px 9px
        rgba(0,0,0,.2);

}



.portal-btn:hover {

    filter:
        brightness(1.07);

}



.logo-card {

    min-height:
        230px;

    display:
        grid;

    place-items:
        center;

}



.logo-card__ring {

    width:
        175px;

    height:
        175px;

    border-radius:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        white;

    border:

        12px solid
        #e9b8bd;

    color:
        var(--red);

    text-align:
        center;

}



.logo-card__ring strong {

    font:
        800 34px Georgia;

}



.logo-card__ring small {

    font-size:
        9px;

    width:
        120px;

}



.home-secondary {

    display:
        grid;

    grid-template-columns:

        1fr
        1fr;

    gap:
        18px;

    margin-top:
        18px;

}



.home-secondary
.portal-btn {

    margin:
        0;

}



.home-recorded {

    max-width:
        420px;

    margin:
        18px auto;

}



/* PAPER PAGES */

.paper {

    background:
        white;

    border-radius:
        16px;

    overflow:
        hidden;

    box-shadow:

        0 20px 50px
        rgba(0,0,0,.2);

}



.paper__label {

    width:
        min(
            380px,
            75%
        );

    margin:
        auto;

    padding:
        8px;

    text-align:
        center;

    background:
        #eeeeee;

    border:
        2px solid
        #aaaaaa;

    font-weight:
        800;

}



.paper__header {

    text-align:
        center;

    padding:
        22px
        16px;

    border-bottom:
        1px solid
        #dddddd;

}



.paper__body {

    padding:
        18px;

}



/* TABLES */

.table-wrap {

    overflow:
        auto;

}



table {

    width:
        100%;

    border-collapse:
        collapse;

    min-width:
        700px;

}



th,
td {

    padding:
        10px;

    border:

        1px solid
        #dddddd;

    font-size:
        13px;

}



th {

    background:
        #f1d6d8;

    color:
        #6d0a12;

}



tbody
tr:nth-child(even) {

    background:
        #fff2f3;

}



/* RESULTS */

.result-instruction {

    text-align:
        center;

}



.result-instruction span {

    color:
        var(--red);

}



.vs-link {

    display:
        inline-block;

    padding:
        6px
        9px;

    background:
        #f5dfe1;

    border-radius:
        7px;

    font-weight:
        800;

}



/* SCORE SHEET */

.score-sheet {

    background:
        white;

    border-radius:
        16px;

    overflow:
        hidden;

}



.score-sheet__top {

    display:
        grid;

    grid-template-columns:

        repeat(
            3,
            1fr
        );

    border-bottom:

        1px solid
        #aaaaaa;

}



.score-sheet__players {

    display:
        grid;

    grid-template-columns:

        1fr
        1fr;

}



.score-sheet__top > div,
.score-sheet__players > div {

    text-align:
        center;

    padding:
        18px;

    border-right:

        1px solid
        #aaaaaa;

}



.score-sheet strong,
.score-sheet span,
.score-sheet small {

    display:
        block;

}



.score-sheet__body {

    padding:
        18px;

}



.score-table {

    min-width:
        0;

}



.final-score {

    text-align:
        center;

}



.final-score strong {

    font-size:
        36px;

}



/* PLACEHOLDERS */

.empty-state {

    text-align:
        center;

    padding:
        60px
        20px;

}



/* FOOTER */

.site-footer {

    text-align:
        center;

    color:
        white;

    padding-bottom:
        30px;

}



/* ADMIN */

.admin-shell {

    min-height:
        100vh;

    padding:
        30px;

    background:
        #f8e9eb;

}



.login-card {

    max-width:
        400px;

    margin:
        80px auto;

    padding:
        30px;

    background:
        white;

    border-radius:
        14px;

}



.login-card input {

    width:
        100%;

    padding:
        12px;

    margin:
        10px 0;

}



.login-card button {

    width:
        100%;

    padding:
        12px;

    background:
        var(--red);

    color:
        white;

    border:
        0;

    border-radius:
        8px;

}



.login-card a {

    display:
        block;

    text-align:
        center;

    margin-top:
        10px;

}



.admin-dashboard {

    max-width:
        1100px;

    margin:
        auto;

}



.admin-cards {

    display:
        grid;

    grid-template-columns:

        repeat(
            3,
            1fr
        );

    gap:
        14px;

}



.admin-cards a {

    background:
        white;

    padding:
        20px;

    border-left:

        5px solid
        var(--red);

    border-radius:
        12px;

}



.admin-cards strong,
.admin-cards span {

    display:
        block;

}



.admin-cards span {

    color:
        #777777;

    font-size:
        13px;

}



/* MOBILE */

@media
(max-width: 800px) {

    .brand__text {

        display:
            none;

    }


    .portal {

        grid-template-columns:
            1fr;

    }


    .portal__column--center {

        order:
            3;

    }


    .home-secondary {

        grid-template-columns:
            1fr;

    }


    .score-sheet__top {

        grid-template-columns:
            1fr;

    }


    .admin-cards {

        grid-template-columns:
            1fr;

    }

}

/* =========================================
   REFEREE SCHEDULE
========================================= */

.table-number {

    display: inline-flex;

    min-width: 34px;

    height: 34px;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--red);

    color: white;

    font-weight: 800;

}


.referee-schedule-table
td {

    vertical-align: middle;

}



/* =========================================
   ADMIN PAGE
========================================= */

.admin-page-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;

}


.admin-header-actions {

    display: flex;

    gap: 8px;

}


.small-btn {

    display: inline-block;

    padding: 10px 13px;

    border-radius: 8px;

    background: var(--red);

    color: white;

    font-weight: 700;

}


.small-btn.secondary {

    background: #333;

}


.admin-message {

    margin-bottom: 18px;

    padding: 14px 16px;

    border-radius: 10px;

    background: #dff4e4;

    color: #245f30;

    font-weight: 700;

}


.admin-form-card {

    margin-bottom: 24px;

    padding: 22px;

    border-radius: 14px;

    background: white;

}


.admin-form-card h2 {

    margin-top: 0;

}


.schedule-form {

    display: grid;

    grid-template-columns:

        repeat(
            3,
            1fr
        );

    gap: 15px;

}


.schedule-form label {

    display: block;

    margin-bottom: 6px;

    color: #555;

    font-size: 12px;

    font-weight: 700;

}


.schedule-form input,
.schedule-form select {

    width: 100%;

    min-height: 44px;

    padding: 10px;

    border:

        1px solid
        #cccccc;

    border-radius: 8px;

    background: white;

}


.form-submit {

    display: flex;

    align-items: flex-end;

}


.form-submit button {

    width: 100%;

    min-height: 44px;

    padding: 10px 15px;

    border: 0;

    border-radius: 8px;

    background: var(--red);

    color: white;

    font-weight: 800;

    cursor: pointer;

}


.admin-table {

    padding: 22px;

    border-radius: 14px;

    background: white;

}


.delete-btn {

    display: inline-block;

    padding: 7px 10px;

    border-radius: 7px;

    background: #f7d9dc;

    color: #8d0d18;

    font-size: 12px;

    font-weight: 800;

}


@media
(max-width: 800px) {

    .admin-page-header {

        align-items: flex-start;

        flex-direction: column;

    }


    .schedule-form {

        grid-template-columns:
            1fr;

    }

}