* {
    box-sizing: border-box;
}


:root {
    --bg-deep: #03101d;
    --bg-main: #061827;

    --panel: #081d2f;
    --panel-2: #0c2942;
    --panel-3: #103451;

    --border: #1c4566;
    --border-soft: #285675;

    --blue: #36a9ff;
    --blue-light: #6ac7ff;

    --gold: #e8bc53;
    --gold-light: #ffd876;

    --white: #f5f9fd;
    --text: #dce9f3;

    --muted: #8ca8bd;
    --muted-2: #58748a;

    --danger: #ff7a7a;

    --shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.22);
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-height: 100vh;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--white);

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 118px,
            rgba(50, 169, 230, 0.018) 118px,
            rgba(50, 169, 230, 0.018) 120px
        ),
        radial-gradient(
            circle at 50% 0%,
            #104268 0%,
            #071b2d 34%,
            #03101d 76%
        );

    background-attachment: fixed;
}


button {
    font: inherit;
}


.hidden {
    display: none !important;
}


/* ============================================================
   START SCREEN
============================================================ */

.start-screen {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;
}


.start-card {
    position: relative;

    width: min(
        720px,
        100%
    );

    padding:
        50px
        46px;

    border:
        1px
        solid
        #245b81;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #103653,
            #061526
        );

    box-shadow: var(--shadow);

    text-align: center;
}


.start-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    border-radius:
        20px
        20px
        0
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--gold),
            var(--blue),
            transparent
        );
}


.start-logo {
    width: 80px;
    height: 80px;

    margin:
        0
        auto
        20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        2px
        solid
        var(--gold);

    border-radius: 50%;

    color: var(--gold-light);

    font-size: 31px;
    font-weight: 900;
}


.start-card h1 {
    margin: 0;

    color: var(--gold);

    font-size: 40px;
    font-weight: 900;

    letter-spacing: 3px;
}


.start-card > p {
    margin-top: 10px;

    color: var(--muted);

    line-height: 1.5;
}


.start-status {
    width: min(
        520px,
        100%
    );

    margin:
        18px
        auto
        0;

    padding:
        11px
        14px;

    border:
        1px
        solid
        rgba(
            106,
            199,
            255,
            .34
        );

    border-radius: 9px;

    background:
        rgba(
            54,
            169,
            255,
            .07
        );

    color:
        var(--blue-light);

    font-size: 11px;
    font-weight: 800;

    line-height: 1.45;

    text-align: center;
}


.start-status::before {
    content: "◌";

    display: inline-block;

    margin-right: 7px;

    color:
        var(--gold-light);

    animation:
        startStatusSpin
        1s
        linear
        infinite;
}


@keyframes startStatusSpin {

    to {
        transform:
            rotate(
                360deg
            );
    }
}


.mode-options {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 15px;

    margin-top: 32px;
}


.mode-button {
    min-height: 140px;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 8px;

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    background:
        linear-gradient(
            #0e304b,
            #091f33
        );

    color: var(--white);

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}


.mode-button:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--gold);

    background:
        linear-gradient(
            #133c5a,
            #0b2940
        );
}


.mode-button strong {
    color:
        var(--gold-light);

    font-size: 18px;
}


.mode-button span {
    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.5;
}


/* ============================================================
   APP
============================================================ */

.app-shell {
    width:
        min(
            1520px,
            calc(100% - 30px)
        );

    margin:
        0
        auto;

    padding:
        16px
        0
        28px;
}


/* ============================================================
   HEADER
============================================================ */

.topbar {
    min-height: 58px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 10px;
}


.brand-row {
    display: flex;

    align-items: center;

    gap: 12px;
}


.brand-row h1 {
    margin: 0;

    color: var(--gold);

    font-size: 28px;
    font-weight: 900;

    letter-spacing: 2.5px;
}


.subtitle {
    margin:
        3px
        0
        0;

    color: var(--muted);

    font-size: 11px;
}


.mode-badge {
    padding:
        5px
        10px;

    border:
        1px
        solid
        var(--blue);

    border-radius: 999px;

    background:
        rgba(
            54,
            169,
            255,
            0.07
        );

    color:
        var(--blue-light);

    font-size: 10px;
    font-weight: 800;
}


.header-right {
    display: flex;

    align-items: center;

    gap: 10px;
}


.progress-box {
    min-width: 96px;

    padding:
        7px
        12px;

    border:
        1px
        solid
        var(--border);

    border-radius: 9px;

    background:
        var(--panel);

    text-align: right;
}


.progress-box span {
    display: block;

    color:
        var(--muted);

    font-size: 8px;
    font-weight: 700;
}


.progress-box strong {
    display: block;

    margin-top: 1px;

    color: var(--gold);

    font-size: 18px;
}


/* ============================================================
   GENERAL BUTTONS
============================================================ */

.primary-button,
.secondary-button {
    padding:
        9px
        15px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 700;
}


.primary-button {
    border:
        1px
        solid
        #58bfff;

    background:
        linear-gradient(
            #1b9be9,
            #0b70ad
        );

    color: white;
}


.primary-button:hover {
    filter:
        brightness(1.1);
}


.secondary-button {
    border:
        1px
        solid
        var(--border);

    background:
        var(--panel-2);

    color:
        var(--text);
}


.secondary-button:hover {
    border-color:
        var(--blue);
}


.text-button {
    padding:
        6px
        8px;

    border: 0;

    background: transparent;

    color:
        var(--blue-light);

    cursor: pointer;

    font-size: 10px;
    font-weight: 800;
}


.text-button:hover {
    color:
        var(--gold-light);
}


button:disabled {
    opacity: .35;

    cursor:
        not-allowed;
}


/* ============================================================
   POWERUPS
============================================================ */

.powerup-bar {
    display: flex;

    gap: 7px;

    margin-bottom: 10px;

    padding: 7px;

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    background:
        linear-gradient(
            #0b253b,
            #071a2b
        );

    box-shadow:
        var(--shadow);
}


.powerup-title {
    display: flex;

    align-items: center;

    padding:
        0
        10px;

    color:
        var(--muted);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.powerup-button {
    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        7px
        10px;

    border:
        1px
        solid
        var(--border);

    border-radius: 8px;

    background:
        linear-gradient(
            #11334e,
            #0a263d
        );

    color:
        var(--white);

    cursor: pointer;

    text-align: left;

    transition:
        border-color .12s ease,
        transform .12s ease;
}


.powerup-button:hover:not(:disabled) {
    transform:
        translateY(-1px);

    border-color:
        var(--gold);
}


.powerup-button.active {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 1px
        rgba(
            232,
            188,
            83,
            .18
        );

    background:
        linear-gradient(
            rgba(
                128,
                96,
                30,
                .32
            ),
            rgba(
                50,
                39,
                17,
                .27
            )
        );
}


.powerup-button > span {
    width: 26px;
    height: 26px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .3
        );

    border-radius: 7px;

    color: var(--gold);

    font-size: 16px;
}


.powerup-button strong {
    display: block;

    font-size: 10px;
}


.powerup-button small {
    display: block;

    margin-top: 1px;

    color:
        var(--muted);

    font-size: 8px;
}


/* ============================================================
   LARGE POWERUP NOTIFICATION
============================================================ */

.powerup-notification {
    position: fixed;

    z-index: 1000;

    top: 18px;
    left: 50%;

    transform:
        translateX(-50%);

    width:
        min(
            520px,
            calc(100% - 30px)
        );

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        15px
        18px;

    border:
        1px
        solid
        var(--gold);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #17344a,
            #091927
        );

    box-shadow:
        0 16px 45px
        rgba(
            0,
            0,
            0,
            .48
        );

    animation:
        powerupIn
        .18s
        ease;
}


@keyframes powerupIn {

    from {
        opacity: 0;

        transform:
            translate(
                -50%,
                -12px
            );
    }

    to {
        opacity: 1;

        transform:
            translate(
                -50%,
                0
            );
    }
}


.powerup-notification-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .4
        );

    border-radius: 50%;

    background:
        rgba(
            232,
            188,
            83,
            .08
        );

    color:
        var(--gold-light);

    font-size: 21px;
}


.powerup-notification strong {
    display: block;

    color:
        var(--gold-light);

    font-size: 13px;

    letter-spacing: .7px;
}


.powerup-notification span {
    display: block;

    margin-top: 3px;

    color:
        var(--text);

    font-size: 11px;

    line-height: 1.4;
}


/* ============================================================
   MAIN LAYOUT
============================================================ */

.game-grid {
    display: grid;

    grid-template-columns:
        .92fr
        1.55fr
        .68fr;

    gap: 12px;

    align-items: start;
}


.panel {
    min-width: 0;

    overflow: hidden;

    border:
        1px
        solid
        var(--border);

    border-radius: 13px;

    background:
        linear-gradient(
            #0c273e,
            #071727
        );

    box-shadow:
        var(--shadow);
}


.panel-title {
    padding:
        11px
        14px;

    border-bottom:
        1px
        solid
        var(--border);
}


.panel-title span,
.school-header span,
.selection-heading span,
.average-box span,
.final-heading span,
.final-score span,
.postgame-card > span,
.gold-display-heading span {
    color:
        var(--muted);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


.panel-title h2,
.school-header h2,
.selection-heading h3 {
    margin:
        3px
        0
        0;
}


/* ============================================================
   LINEUP
============================================================ */

.lineup-panel {
    position: sticky;

    top: 10px;
}


.lineup-list {
    display: flex;

    flex-direction: column;
}


.lineup-slot {
    display: grid;

    grid-template-columns:
        74px
        1fr;

    gap: 8px;

    min-height: 40px;

    padding:
        5px
        10px;

    border-bottom:
        1px
        solid
        rgba(
            47,
            88,
            117,
            .35
        );
}


.lineup-slot:hover {
    background:
        rgba(
            54,
            169,
            255,
            .025
        );
}


.lineup-event {
    display: flex;

    align-items: center;

    color:
        #c8dcea;

    font-size: 9px;
    font-weight: 800;
}


.lineup-empty {
    display: flex;

    align-items: center;

    color:
        var(--muted-2);

    font-size: 8px;
    font-weight: 700;
}


.lineup-name {
    overflow: hidden;

    color:
        var(--white);

    font-size: 10px;
    font-weight: 800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.lineup-details {
    margin-top: 1px;

    color:
        var(--muted);

    font-size: 7.5px;
}


.lineup-performance {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 2px;

    color:
        var(--text);

    font-size: 8px;
}


.lineup-rating {
    padding:
        1px
        5px;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .25
        );

    border-radius: 999px;

    color:
        var(--gold-light);

    font-weight: 800;
}


.average-box {
    padding:
        9px
        12px;

    border-top:
        1px
        solid
        var(--border);

    background:
        rgba(
            15,
            48,
            73,
            .5
        );
}


.average-box strong {
    display: block;

    margin-top: 2px;

    color:
        var(--gold);

    font-size: 23px;
    font-weight: 900;
}


/* ============================================================
   SCHOOL
============================================================ */

.school-header {
    padding:
        13px
        16px;

    border-bottom:
        1px
        solid
        var(--border);

    background:
        linear-gradient(
            90deg,
            rgba(
                19,
                65,
                98,
                .65
            ),
            rgba(
                9,
                31,
                49,
                .4
            )
        );
}


.school-header h2 {
    margin-top: 3px;

    color:
        var(--gold-light);

    font-size: 23px;
}


.status {
    margin:
        10px
        14px
        0;

    padding:
        7px
        10px;

    border-left:
        3px
        solid
        var(--blue);

    border-radius:
        0
        7px
        7px
        0;

    background:
        rgba(
            54,
            169,
            255,
            .07
        );

    color:
        #c4dbea;

    font-size: 10px;
}


.selection-section {
    padding:
        13px
        14px;
}


.selection-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 9px;
}


.selection-heading h3 {
    font-size: 15px;
}


.selection-heading small {
    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 9px;
}


/* ============================================================
   SWIMMER LIST
============================================================ */

.swimmer-list {
    display: flex;

    flex-direction: column;

    gap: 6px;

    max-height:
        calc(
            100vh - 295px
        );

    overflow-y: auto;

    padding-right: 3px;
}


.swimmer-list::-webkit-scrollbar {
    width: 5px;
}


.swimmer-list::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        #23516f;
}


/* ============================================================
   SWIMMER CARD
============================================================ */

.swimmer-card {
    display: block;

    width: 100%;

    flex-shrink: 0;

    overflow: visible;

    border:
        1px
        solid
        var(--border);

    border-radius: 9px;

    background:
        linear-gradient(
            #0d2c46,
            #092238
        );

    transition:
        border-color .14s ease,
        transform .14s ease;
}


.swimmer-card:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--blue);
}


.swimmer-card.selected {
    border-color:
        var(--gold);

    background:
        linear-gradient(
            #0d2e48,
            #092238
        );

    box-shadow:
        0 0 0 1px
        rgba(
            232,
            188,
            83,
            .08
        );
}


.swimmer-card.scout-selected {
    border-color:
        var(--blue-light);
}


.swimmer-main-area {
    display: flex;

    width: 100%;

    min-height: 49px;

    align-items: center;

    gap: 9px;

    padding:
        8px
        11px;

    cursor: pointer;

    border-radius: 8px;
}


.swimmer-main-area:hover {
    background:
        rgba(
            54,
            169,
            255,
            .05
        );
}


.swimmer-info {
    flex: 1;

    min-width: 0;
}


.swimmer-name {
    display: block;

    color:
        var(--white);

    font-size: 11px;
    font-weight: 800;

    background: transparent;
}


.swimmer-events {
    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 8px;

    line-height: 1.35;

    background: transparent;
}


.swimmer-rank {
    width: 23px;
    height: 23px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .4
        );

    border-radius: 50%;

    color:
        var(--gold);

    font-size: 9px;
    font-weight: 900;
}


/* ============================================================
   EXPANDED EVENT AREA
============================================================ */

.swimmer-expanded,
.inline-event-options {
    display: block !important;

    visibility: visible !important;

    width: 100%;

    height: auto !important;

    max-height: none !important;

    overflow: visible !important;

    padding:
        10px
        11px
        12px;

    border-top:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .25
        );

    border-radius:
        0
        0
        8px
        8px;

    background:
        linear-gradient(
            #071c2e,
            #061827
        );
}


.swimmer-expanded-label,
.inline-event-label {
    display: block !important;

    margin-bottom: 7px;

    color:
        var(--gold);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.3px;
}


/* ============================================================
   SELECTED SWIMMER BACK BUTTON
============================================================ */

.swimmer-back-button {
    flex-shrink: 0;

    padding:
        5px
        9px;

    border:
        1px
        solid
        rgba(
            106,
            199,
            255,
            .3
        );

    border-radius: 6px;

    background:
        rgba(
            54,
            169,
            255,
            .06
        );

    color:
        var(--blue-light);

    cursor: pointer;

    font-size: 8px;
    font-weight: 800;

    transition:
        border-color .12s ease,
        color .12s ease,
        background .12s ease,
        transform .12s ease;
}


.swimmer-back-button:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--gold);

    background:
        rgba(
            232,
            188,
            83,
            .07
        );

    color:
        var(--gold-light);
}


.inline-event-grid,
.swimmer-expanded .choice-grid {
    display: grid !important;

    visibility: visible !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 6px;

    width: 100%;
}


/* ============================================================
   EVENT BUTTONS
============================================================ */

.inline-event-button,
.swimmer-expanded .choice-button,
.inline-event-options .choice-button {
    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative;

    width: 100%;

    min-height: 39px;

    align-items: center;
    justify-content: flex-start;

    padding:
        8px
        10px;

    border:
        1px
        solid
        #2c6185;

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #123c5c,
            #0d2f4b
        );

    color:
        #edf7fd;

    cursor: pointer;

    font-size: 9px;
    font-weight: 800;

    text-align: left;

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease,
        color .12s ease,
        box-shadow .12s ease;
}


.inline-event-button::before,
.swimmer-expanded .choice-button::before,
.inline-event-options .choice-button::before {
    content: "";

    width: 3px;
    height: 18px;

    flex-shrink: 0;

    margin-right: 7px;

    border-radius: 999px;

    background:
        var(--blue);
}


.inline-event-button:hover,
.swimmer-expanded .choice-button:hover,
.inline-event-options .choice-button:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--gold);

    background:
        linear-gradient(
            #174b6d,
            #103650
        );

    color:
        var(--gold-light);

    box-shadow:
        0 5px 12px
        rgba(
            0,
            0,
            0,
            .16
        );
}


.inline-event-button:hover::before,
.swimmer-expanded .choice-button:hover::before,
.inline-event-options .choice-button:hover::before {
    background:
        var(--gold);
}


/* ============================================================
   INLINE RESULT UNDER SELECTED SWIMMER
============================================================ */

.inline-result {
    margin:
        0
        10px
        11px;

    padding:
        12px;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .65
        );

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(
                158,
                116,
                28,
                .12
            ),
            rgba(
                3,
                16,
                29,
                .82
            )
        );
}


.inline-result-label {
    display: block;

    margin-bottom: 5px;

    color:
        var(--gold);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.inline-result-event {
    color:
        var(--white);

    font-size: 13px;
    font-weight: 900;
}


.inline-result-meta {
    margin-top: 3px;

    color:
        var(--muted);

    font-size: 8px;
}


.inline-result-values {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

    margin-top: 9px;
}


.inline-result-values > div {
    padding:
        8px
        9px;

    border:
        1px
        solid
        var(--border);

    border-radius: 7px;

    background:
        rgba(
            2,
            15,
            26,
            .55
        );
}


.inline-result-values span {
    display: block;

    color:
        var(--muted);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .8px;
}


.inline-result-values strong {
    display: block;

    margin-top: 2px;

    font-size: 17px;
    font-weight: 900;
}


.inline-result-session {
    margin-top: 6px;

    color:
        var(--blue-light);

    font-size: 8px;
    font-weight: 700;
}


.inline-second-chance {
    margin-top: 10px;

    padding-top: 9px;

    border-top:
        1px
        solid
        var(--border);
}


.inline-second-chance p {
    margin:
        0
        0
        8px;

    color:
        var(--gold-light);

    font-size: 9px;
    font-weight: 800;
}


.inline-second-chance-actions {
    display: flex;

    gap: 7px;
}


.inline-result-next {
    margin-top: 10px;
}


/* ============================================================
   EVENT SCOUT
============================================================ */

.scout-mode-banner {
    margin:
        10px
        14px
        0;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border:
        1px
        solid
        var(--blue);

    border-radius: 8px;

    background:
        rgba(
            54,
            169,
            255,
            .09
        );
}


.scout-mode-banner strong {
    display: block;

    color:
        var(--blue-light);

    font-size: 10px;
}


.scout-mode-banner span {
    display: block;

    margin-top: 2px;

    color:
        var(--text);

    font-size: 9px;
}


.scout-result {
    margin:
        10px
        14px
        0;

    padding:
        12px;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .5
        );

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(
                232,
                188,
                83,
                .09
            ),
            rgba(
                6,
                24,
                39,
                .8
            )
        );
}


.scout-result-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


.scout-result-heading span {
    color:
        var(--muted);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.scout-result-heading strong {
    color:
        var(--gold-light);

    font-size: 11px;
}


#scout-result-name {
    margin-top: 5px;

    color:
        var(--white);

    font-size: 12px;
    font-weight: 800;
}


.scout-result-values {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

    margin-top: 8px;
}


.scout-result-values > div {
    padding:
        8px
        10px;

    border:
        1px
        solid
        var(--border);

    border-radius: 7px;

    background:
        rgba(
            2,
            15,
            26,
            .5
        );
}


.scout-result-values span {
    display: block;

    color:
        var(--muted);

    font-size: 7px;
    font-weight: 800;
}


.scout-result-values strong {
    display: block;

    margin-top: 2px;

    font-size: 18px;
}


.scout-result-year {
    margin-top: 6px;

    color:
        var(--muted);

    font-size: 8px;
}


/* ============================================================
   STACKED SCOUT REPORTS
============================================================ */

.scout-results {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin:
        10px
        14px
        0;
}


.scout-results.hidden {
    display: none !important;
}


.scout-result-card {
    padding: 10px;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .42
        );

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(
                232,
                188,
                83,
                .075
            ),
            rgba(
                6,
                24,
                39,
                .82
            )
        );
}


.scout-result-card-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


.scout-result-index {
    color:
        var(--muted);

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.1px;
}


.scout-result-card-header strong {
    color:
        var(--gold-light);

    font-size: 10px;
}


.scout-result-card-name {
    margin-top: 4px;

    color:
        var(--white);

    font-size: 11px;
    font-weight: 800;
}


.scout-result-card-values {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 6px;

    margin-top: 7px;
}


.scout-result-card-values > div {
    padding:
        7px
        9px;

    border:
        1px
        solid
        var(--border);

    border-radius: 7px;

    background:
        rgba(
            2,
            15,
            26,
            .5
        );
}


.scout-result-card-values span {
    display: block;

    color:
        var(--muted);

    font-size: 7px;
    font-weight: 800;
}


.scout-result-card-values strong {
    display: block;

    margin-top: 2px;

    font-size: 16px;
    font-weight: 900;
}


.scout-result-card-values > div:last-child strong {
    color:
        var(--gold-light);
}


.scout-result-card-year {
    margin-top: 5px;

    color:
        var(--muted);

    font-size: 8px;
}


/* ============================================================
   HARD MODE CHOICES
============================================================ */

.choice-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 7px;
}


.choice-button {
    min-height: 40px;

    padding:
        8px
        11px;

    border:
        1px
        solid
        #295d7e;

    border-radius: 8px;

    background:
        linear-gradient(
            #123b59,
            #0c2b45
        );

    color:
        var(--white);

    cursor: pointer;

    font-size: 10px;
    font-weight: 800;
}


.choice-button:hover {
    border-color:
        var(--gold);

    color:
        var(--gold-light);
}


/* ============================================================
   GOLD TEXT
============================================================ */

.gold-text {
    color:
        var(--gold-light)
        !important;
}


/* ============================================================
   HOW TO PLAY
============================================================ */

.rule {
    position: relative;

    padding:
        10px
        13px
        10px
        17px;

    border-bottom:
        1px
        solid
        rgba(
            46,
            87,
            116,
            .4
        );
}


.rule::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 13px;

    width: 3px;
    height: 13px;

    border-radius: 3px;

    background:
        var(--blue);
}


.rule strong {
    font-size: 10px;
}


.rule p {
    margin:
        3px
        0
        0;

    color:
        var(--muted);

    font-size: 8.5px;

    line-height: 1.4;
}


/* ============================================================
   RIGHT-SIDE GUIDES
============================================================ */

.info-panel {
    position: sticky;

    top: 10px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-height:
        calc(
            100vh - 20px
        );
}


.info-guide-card {
    overflow: hidden;

    border:
        1px
        solid
        var(--border);

    border-radius: 13px;

    background:
        linear-gradient(
            #0c273e,
            #071727
        );

    box-shadow:
        var(--shadow);
}


.info-guide-card .panel-title {
    padding:
        9px
        12px;
}


.info-guide-card .panel-title h2 {
    margin:
        2px
        0
        0;

    font-size: 14px;
}


.info-guide-content {
    display: flex;

    flex-direction: column;
}


.info-guide-card .rule {
    padding:
        7px
        10px
        7px
        16px;
}


.info-guide-card .rule::before {
    left: 7px;
    top: 10px;

    height: 11px;
}


.info-guide-card .rule strong {
    font-size: 9px;
}


.info-guide-card .rule p {
    margin-top: 2px;

    font-size: 7.7px;

    line-height: 1.3;
}


.powerup-guide-item {
    position: relative;

    padding:
        7px
        10px
        7px
        16px;

    border-bottom:
        1px
        solid
        rgba(
            46,
            87,
            116,
            .4
        );
}


.powerup-guide-item:last-child {
    border-bottom: 0;
}


.powerup-guide-item::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 10px;

    width: 3px;
    height: 11px;

    border-radius: 3px;

    background:
        var(--gold);
}


.powerup-guide-item strong {
    display: block;

    color:
        var(--white);

    font-size: 9px;
}


.powerup-guide-item p {
    margin:
        2px
        0
        0;

    color:
        var(--muted);

    font-size: 7.7px;

    line-height: 1.3;
}


/* ============================================================
   FINAL SCREEN
============================================================ */

.final-screen {
    padding:
        18px
        20px
        16px;

    min-height:
        100%;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(
                232,
                188,
                83,
                .08
            ),
            transparent
            42%
        );
}


.final-heading {
    text-align: center;
}


.final-heading h2 {
    margin:
        4px
        0
        12px;

    font-size: 23px;
    font-weight: 900;
}


.final-score {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    width:
        min(
            430px,
            100%
        );

    margin:
        0
        auto
        10px;
}


.final-score > div {
    padding:
        10px;

    border:
        1px
        solid
        var(--border);

    border-radius: 9px;

    background:
        var(--panel);

    text-align: center;
}


.final-score strong {
    display: block;

    margin-top: 2px;

    font-size: 27px;
    font-weight: 900;
}


/* ============================================================
   23 GOLD DISPLAY
============================================================ */

.gold-display-wrap {
    max-width: 470px;

    margin:
        0
        auto
        10px;

    padding:
        10px
        12px;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .25
        );

    border-radius: 9px;

    background:
        rgba(
            232,
            188,
            83,
            .035
        );
}


.gold-display-heading {
    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;
}


.gold-display-heading strong {
    color:
        var(--gold);

    font-size: 8px;
}


.gold-grid {
    display: grid;

    grid-template-columns:
        repeat(
            12,
            1fr
        );

    gap: 5px;

    justify-items: center;
}


.gold-medal {
    width: 20px;
    height: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px
        solid
        rgba(
            232,
            188,
            83,
            .22
        );

    border-radius: 50%;

    background:
        rgba(
            232,
            188,
            83,
            .025
        );

    color:
        rgba(
            232,
            188,
            83,
            .28
        );

    font-size: 8px;
    font-weight: 900;

    transition:
        transform .15s ease,
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}


.gold-medal.earned {
    border-color:
        var(--gold);

    background:
        radial-gradient(
            circle,
            #ffe59d,
            #d59a24
        );

    color:
        #332000;

    box-shadow:
        0 0 8px
        rgba(
            232,
            188,
            83,
            .28
        );
}


.gold-medal.earned:hover {
    transform:
        scale(1.08);
}


/* ============================================================
   PHELPS MESSAGE
============================================================ */

.phelps-message {
    width:
        min(
            470px,
            100%
        );

    margin:
        8px
        auto;

    padding: 8px;

    border:
        1px
        solid
        var(--gold);

    border-radius: 8px;

    background:
        rgba(
            232,
            188,
            83,
            .07
        );

    color:
        var(--gold-light);

    font-size: 16px;
    font-weight: 900;

    text-align: center;

    letter-spacing: 1px;
}


/* ============================================================
   POSTGAME
============================================================ */

.postgame {
    width:
        min(
            560px,
            100%
        );

    margin:
        10px
        auto;
}


.postgame-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap: 7px;
}


.postgame-card {
    min-height: 75px;

    padding:
        9px
        10px;

    border:
        1px
        solid
        var(--border);

    border-radius: 8px;

    background:
        var(--panel);
}


.postgame-card > span {
    display: block;

    padding-bottom: 5px;

    border-bottom:
        1px
        solid
        var(--border);
}


.postgame-card > div {
    margin-top: 6px;

    color:
        var(--text);

    font-size: 9px;

    line-height: 1.35;
}


.final-play-again {
    display: block;

    margin:
        10px
        auto
        0;
}


/* ============================================================
   RESPONSIVE
============================================================ */


/* ============================================================
   TABLET / SMALL DESKTOP
============================================================ */

@media (max-width: 1180px) {

    .game-grid {
        grid-template-columns:
            .9fr
            1.5fr;
    }

    .info-panel {
        display: none;
    }

    .lineup-panel {
        position: static;
    }
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .powerup-bar {
        flex-wrap: wrap;
    }

    .powerup-title {
        width: 100%;
    }

    .powerup-button {
        flex:
            1
            1
            160px;
    }

    .game-grid {
        grid-template-columns:
            1fr
            1.35fr;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 760px) {

    /* --------------------------------------------------------
       PAGE
    --------------------------------------------------------- */

    html,
    body {
        width: 100%;

        overflow-x: hidden;
    }

    body {
        background-attachment: scroll;
    }

    .app-shell {
        width:
            calc(
                100% - 16px
            );

        padding:
            8px
            0
            22px;
    }


    /* --------------------------------------------------------
       START SCREEN
    --------------------------------------------------------- */

    .start-screen {
        min-height: 100svh;

        padding:
            18px
            12px;
    }

    .start-card {
        width: 100%;

        padding:
            32px
            20px;

        border-radius: 16px;
    }

    .start-logo {
        width: 66px;
        height: 66px;

        margin-bottom: 16px;

        font-size: 26px;
    }

    .start-card h1 {
        font-size: 32px;

        letter-spacing: 2px;
    }

    .start-card > p {
        margin:
            8px
            auto
            0;

        max-width: 310px;

        font-size: 13px;
    }

    .mode-options {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 24px;
    }

    .mode-button {
        min-height: 100px;

        padding:
            17px
            18px;
    }

    .mode-button strong {
        font-size: 16px;
    }

    .mode-button span {
        font-size: 12px;
    }

    .start-status {
        margin-top: 12px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       HEADER
    --------------------------------------------------------- */

    .topbar {
        min-height: auto;

        flex-direction: row;

        align-items: center;
        justify-content: space-between;

        gap: 10px;

        margin-bottom: 8px;
    }

    .brand-row {
        gap: 7px;
    }

    .brand-row h1 {
        font-size: 21px;

        letter-spacing: 1.5px;
    }

    .mode-badge {
        padding:
            4px
            7px;

        font-size: 8px;
    }

    .subtitle {
        margin-top: 2px;

        font-size: 8px;
    }

    .header-right {
        width: auto;

        flex-shrink: 0;

        gap: 6px;
    }

    .progress-box {
        min-width: 69px;

        padding:
            5px
            8px;
    }

    .progress-box span {
        font-size: 7px;
    }

    .progress-box strong {
        font-size: 14px;
    }

    #reset-button {
        padding:
            7px
            9px;

        font-size: 9px;

        white-space: nowrap;
    }


    /* --------------------------------------------------------
       POWERUPS

       Two-column touch-friendly grid.
    --------------------------------------------------------- */

    .powerup-bar {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap: 6px;

        margin-bottom: 8px;

        padding: 6px;
    }

    .powerup-title {
        grid-column:
            1
            /
            -1;

        width: auto;

        padding:
            2px
            3px
            3px;

        font-size: 7px;
    }

    .powerup-button {
        width: 100%;

        min-height: 48px;

        padding:
            7px
            8px;

        gap: 7px;
    }

    .powerup-button > span {
        width: 29px;
        height: 29px;

        font-size: 15px;
    }

    .powerup-button strong {
        font-size: 9px;
    }

    .powerup-button small {
        margin-top: 2px;

        font-size: 7.5px;
    }


    /* --------------------------------------------------------
       MAIN LAYOUT

       Desktop:
           lineup | draft | guides

       Mobile:
           draft
           lineup

       CSS order handles this without changing HTML.
    --------------------------------------------------------- */

    .game-grid {
        display: flex;

        flex-direction: column;

        gap: 9px;
    }

    .draft-panel {
        order: 1;

        width: 100%;
    }

    .lineup-panel {
        order: 2;

        width: 100%;

        position: static;
    }

    .info-panel {
        display: none;
    }


    /* --------------------------------------------------------
       GENERAL PANEL
    --------------------------------------------------------- */

    .panel {
        width: 100%;

        border-radius: 10px;
    }

    .panel-title {
        padding:
            9px
            11px;
    }

    .panel-title h2 {
        font-size: 15px;
    }


    /* --------------------------------------------------------
       SCHOOL / STATUS
    --------------------------------------------------------- */

    .school-header {
        padding:
            11px
            12px;
    }

    .school-header span {
        font-size: 7px;
    }

    .school-header h2 {
        margin-top: 2px;

        font-size: 20px;
    }

    .status {
        margin:
            8px
            10px
            0;

        padding:
            8px
            9px;

        font-size: 9px;

        line-height: 1.4;
    }


    /* --------------------------------------------------------
       SELECTION SECTION
    --------------------------------------------------------- */

    .selection-section {
        padding:
            10px;
    }

    .selection-heading {
        margin-bottom: 8px;
    }

    .selection-heading h3 {
        font-size: 14px;
    }

    .selection-heading span {
        font-size: 7px;
    }

    .selection-heading small {
        max-width: 260px;

        font-size: 8px;

        line-height: 1.35;
    }


    /* --------------------------------------------------------
       SWIMMER LIST
    --------------------------------------------------------- */

    .swimmer-list {
        max-height: none;

        overflow-y: visible;

        gap: 7px;

        padding-right: 0;
    }

    .swimmer-card {
        border-radius: 9px;
    }

    .swimmer-main-area {
        min-height: 58px;

        padding:
            10px
            11px;

        gap: 8px;
    }

    .swimmer-name {
        font-size: 12px;
    }

    .swimmer-events {
        margin-top: 4px;

        font-size: 8.5px;

        line-height: 1.4;
    }

    .swimmer-rank {
        width: 27px;
        height: 27px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       SELECTED SWIMMER BACK BUTTON
    --------------------------------------------------------- */

    .swimmer-back-button {
        min-width: 51px;

        min-height: 34px;

        padding:
            7px
            10px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       EVENT SELECTION
    --------------------------------------------------------- */

    .swimmer-expanded,
    .inline-event-options {
        padding:
            10px
            10px
            12px;
    }

    .swimmer-expanded-label,
    .inline-event-label {
        margin-bottom: 8px;

        font-size: 8px;
    }

    .inline-event-grid,
    .swimmer-expanded .choice-grid,
    .choice-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap: 7px;
    }

    .inline-event-button,
    .swimmer-expanded .choice-button,
    .inline-event-options .choice-button,
    .choice-button {
        min-height: 46px;

        padding:
            9px
            10px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       HARD MODE YEAR / SESSION
    --------------------------------------------------------- */

    .text-button {
        min-height: 34px;

        padding:
            7px
            9px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       EVENT SCOUT
    --------------------------------------------------------- */

    .scout-mode-banner {
        margin:
            8px
            10px
            0;

        padding:
            9px
            10px;

        gap: 8px;
    }

    .scout-mode-banner strong {
        font-size: 9px;
    }

    .scout-mode-banner span {
        font-size: 8px;

        line-height: 1.35;
    }

    .scout-results {
        gap: 6px;

        margin:
            8px
            10px
            0;
    }

    .scout-result-card {
        padding: 9px;
    }

    .scout-result-card-name {
        font-size: 11px;
    }

    .scout-result-card-values {
        grid-template-columns:
            1fr
            1fr;
    }

    .scout-result-card-values strong {
        font-size: 15px;
    }


    /* --------------------------------------------------------
       INLINE RESULT
    --------------------------------------------------------- */

    .inline-result {
        margin:
            0
            8px
            9px;

        padding: 10px;
    }

    .inline-result-event {
        font-size: 14px;
    }

    .inline-result-meta {
        font-size: 8px;

        line-height: 1.35;
    }

    .inline-result-values {
        grid-template-columns:
            1fr
            1fr;
    }

    .inline-result-values strong {
        font-size: 18px;
    }

    .inline-second-chance-actions {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 7px;
    }

    .inline-second-chance-actions button,
    .inline-result-next {
        min-height: 43px;
    }

    .inline-result-next {
        width: 100%;
    }


    /* --------------------------------------------------------
       LINEUP

       Secondary section beneath draft on mobile.
    --------------------------------------------------------- */

    .lineup-list {
        display: grid;

        grid-template-columns:
            1fr;
    }

    .lineup-slot {
        grid-template-columns:
            78px
            1fr;

        min-height: 45px;

        padding:
            6px
            10px;
    }

    .lineup-event {
        font-size: 9px;
    }

    .lineup-name {
        font-size: 10px;
    }

    .lineup-details {
        font-size: 7.5px;
    }

    .lineup-performance {
        font-size: 8px;
    }

    .average-box {
        padding:
            10px
            12px;
    }

    .average-box strong {
        font-size: 22px;
    }


    /* --------------------------------------------------------
       FINAL RESULTS
    --------------------------------------------------------- */

    .final-screen {
        padding:
            15px
            11px;
    }

    .final-heading h2 {
        font-size: 21px;
    }

    .final-score {
        grid-template-columns:
            1fr
            1fr;

        width: 100%;
    }

    .final-score strong {
        font-size: 24px;
    }

    .gold-display-wrap {
        width: 100%;

        padding:
            10px
            8px;
    }

    .gold-grid {
        grid-template-columns:
            repeat(
                8,
                1fr
            );

        gap: 6px;
    }

    .gold-medal {
        width: 24px;
        height: 24px;

        font-size: 8px;
    }

    .postgame {
        width: 100%;
    }

    .postgame-grid {
        grid-template-columns: 1fr;

        gap: 7px;
    }

    .postgame-card {
        min-height: 0;

        padding:
            10px
            11px;
    }

    .postgame-card > div {
        font-size: 9px;

        line-height: 1.45;
    }

    .final-play-again {
        width: 100%;

        min-height: 46px;
    }


    /* --------------------------------------------------------
       POWERUP NOTIFICATION
    --------------------------------------------------------- */

    .powerup-notification {
        top: 10px;

        width:
            calc(
                100% - 20px
            );

        gap: 10px;

        padding:
            11px
            12px;
    }

    .powerup-notification-icon {
        width: 35px;
        height: 35px;

        font-size: 18px;
    }

    .powerup-notification strong {
        font-size: 11px;
    }

    .powerup-notification span {
        font-size: 9px;
    }


    /* --------------------------------------------------------
       TOUCH DEVICES

       Remove desktop hover movement so cards do not "jump"
       after being tapped on phones.
    --------------------------------------------------------- */

    .swimmer-card:hover,
    .mode-button:hover,
    .powerup-button:hover:not(:disabled),
    .inline-event-button:hover,
    .choice-button:hover,
    .swimmer-back-button:hover {
        transform: none;
    }
}


/* ============================================================
   SMALL PHONES
============================================================ */

@media (max-width: 480px) {

    .app-shell {
        width:
            calc(
                100% - 12px
            );
    }

    .topbar {
        gap: 6px;
    }

    .brand-row h1 {
        font-size: 19px;
    }

    .subtitle {
        display: none;
    }

    .progress-box {
        min-width: 62px;
    }

    #reset-button {
        padding:
            6px
            8px;

        font-size: 8px;
    }

    .powerup-button {
        min-height: 50px;
    }

    .school-header h2 {
        font-size: 19px;
    }

    .gold-grid {
        grid-template-columns:
            repeat(
                6,
                1fr
            );
    }

    .gold-medal {
        width: 25px;
        height: 25px;
    }
}


/* ============================================================
   VERY NARROW PHONES
============================================================ */

@media (max-width: 390px) {

    .brand-row {
        gap: 5px;
    }

    .brand-row h1 {
        font-size: 17px;

        letter-spacing: 1px;
    }

    .mode-badge {
        padding:
            3px
            5px;

        font-size: 7px;
    }

    .header-right {
        gap: 4px;
    }

    .progress-box {
        min-width: 56px;

        padding:
            4px
            6px;
    }

    .progress-box strong {
        font-size: 12px;
    }

    #reset-button {
        padding:
            6px;

        font-size: 7.5px;
    }

    .inline-event-grid,
    .swimmer-expanded .choice-grid,
    .choice-grid {
        grid-template-columns: 1fr;
    }

    .inline-event-button,
    .choice-button {
        min-height: 44px;
    }

    .scout-result-card-values,
    .inline-result-values {
        grid-template-columns:
            1fr
            1fr;
    }
}