@font-face {
    font-family: 'Serie A';
    src: url('fonts/SerieAWomenFont-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Roboto Flex';
    src: url('fonts/RobotoFlex.ttf') format('truetype');
    font-weight: 100 1000;
    font-style: normal;
    font-display: block;
}

:root {
    /* Panel widths as a fraction of the stage */
    --panel-start: 75%;
    --panel-dip: 65%;
    --panel-end: 75%;

    /* Geometry */
    --pitch-h-start: 475; /* pitch squashed height */
    --pitch-h: 781; /* pitch final height */

    /* Entrance timeline */
    --t-panel: 2s; /* background entrance duration */
    --t-fade: 0.3s; /* fade animation duration */
    --d-swoosh-bot: 0.55s; /* background bottom swoosh line delay */
    --d-swoosh-top: 0.85s; /* background top swoosh line delay */
    --d-pitch: 1.2s; /* pitch delay */
    --t-pitch: 1s; /* pitch animation duration */
    --ease-grow: cubic-bezier(0.16, 0.84, 0.3, 1); /* pitch grow easing */
    --ease-player: cubic-bezier(0, 0, 0.58, 1);

    /* Exit */
    --t-exit: 0.5s; /* exit fade out animation duration */
    --t-move: 0.6s; /* formation change animation duration */
    --panel-exit: 78%; /* panel grows right as it leaves */
    --exit-x: 60px; /* swoosh drift */
    --exit-y: 80px; /* pitch drop */

    /* Palette */
    --cyan: #2bf3fd;
    --purple: #6816ab;
    --grey: #12101a;

    --name-max-width: 340;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    height: auto;
}

body {
    display: flex;
    align-items: flex-start;
    background: #000;
    color: #e8e4f2;
    font:
        400 13px/1.4 Arial,
        Helvetica,
        sans-serif;
}

.app {
    position: relative;
    width: min(100vw, calc(100vh * 16 / 9));
}

.stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    container-type: size;
}

.purple_bg {
    position: absolute;
    inset: 0 auto 0 0; /* anchored left, full height */
    width: var(--panel-end);
    overflow: hidden;
    opacity: 0;
    background: #4e008e;
    background: linear-gradient(135deg, rgba(78, 0, 142, 1) 65%, rgba(129, 77, 209, 1) 100%);
    --u: calc(100cqw / 1920);
}

.bg-graphics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    pointer-events: none;
    z-index: 0;
}

.final-shape {
    fill: #56009d;
    opacity: 0.92;
}

.mask-spine {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: butt; /* Ensures sharp, non-rounded flat edges */
    stroke-linejoin: miter; /* Ensures sharp corners */
    stroke-miterlimit: 4;

    /* Negative offset forces right-to-left drawing direction */
    stroke-width: 4px;
    stroke-dasharray: 3000;
    stroke-dashoffset: -3000;

    transition:
        stroke-dashoffset 1s cubic-bezier(0.25, 1, 0.5, 1),
        stroke-width 2s cubic-bezier(0.25, 1, 0.5, 1);
}

#bot_mask {
    transition-delay: var(--d-swoosh-bot);
}
#top_mask {
    transition-delay: var(--d-swoosh-top);
}

/* Triggered State */
.is-shown .mask-spine {
    stroke-dashoffset: 0;
    stroke-width: 400px;
}

.swoosh-lines {
    transform: translate(10px, 0px) scale(1.1, 1.1);
}
.pitch {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: translate(360px, 300px) scaleY(calc(var(--pitch-h-start) / var(--pitch-h)));
    opacity: 0;
    transition:
        opacity var(--t-pitch) var(--ease-grow) var(--d-pitch),
        transform var(--t-pitch) var(--ease-grow) var(--d-pitch);
}
.is-shown .pitch {
    opacity: 1;
    transform: translate(360px, 300px) scaleY(1);
}

.pitch-lines {
    fill: none;
    stroke: #a26acf;
    opacity: 80%;
    stroke-width: 6;
    stroke-miterlimit: 10;
}

@keyframes panel-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes panel-in {
    /* 0 -> 0.45s : 75% shrinks to 65% */
    0% {
        width: var(--panel-start);
        animation-timing-function: cubic-bezier(0.33, 0, 0.15, 1);
    }
    /* 0.45s -> 1.20s : holds at 65% */
    22.5% {
        width: var(--panel-dip);
        animation-timing-function: linear;
    }
    /* 1.20s -> 2.00s : grows back out to 75% */
    60% {
        width: var(--panel-dip);
        animation-timing-function: var(--ease-grow);
    }
    100% {
        width: var(--panel-end);
    }
}

.is-shown .purple_bg {
    opacity: 1;
    width: var(--panel-end);
    animation:
        panel-in var(--t-panel) backwards,
        panel-fade var(--t-fade) ease-out backwards;
}

.players {
    position: absolute;
    inset: 0;
}

.player {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    transform: translate(-50%, -50%) translateY(55%);
    opacity: 0;
    line-height: 1;
    transition:
        opacity var(--enter-dur) var(--ease-player) var(--enter-delay),
        transform var(--enter-dur) var(--ease-player) var(--enter-delay),
        left var(--t-move) var(--ease-player),
        top var(--t-move) var(--ease-player);
}

.is-shown .player {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

.player__num {
    display: block;
    font-family: 'Serie A', Arial, sans-serif;
    font-weight: 700;
    font-size: calc(92 * var(--u));
    font-stretch: 100%;
    /* letter-spacing: -0.02em; */
    color: var(--cyan);
}

.player__name {
    position: absolute;
    /* top: calc(100% + 16 * var(--u)); */
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(34 * var(--u));
    font-family: 'Roboto Flex', Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: #fff;
    text-transform: uppercase;
    font-stretch: 110%;
    letter-spacing: 0.02em;

    max-width: calc(var(--name-max-width) * var(--u));
    text-align: center;
    overflow-wrap: break-word;
}

.controls {
    position: absolute;
    inset: 0 0 0 auto;
    width: 25%; /* the strip the 75% purple panel leaves */
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.controls__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.controls__formation {
    display: flex;
    align-items: center;
    gap: 6px;
}
.controls__formation input {
    flex: 1;
    min-width: 0;
}

.formation {
    padding: 10px 12px 8px;
    /* border: 1px solid #3a2a55; */
    border-radius: 6px;
    background: var(--grey);
}

.formation__label {
    display: block;
    margin-bottom: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9b8fb5;
}

/* Echoes the graphic: cyan, bold, tracked, centred. */
.formation__input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--purple);
    border-radius: 4px;
    background: #0d0a14;
    color: var(--cyan);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
}
.formation__input:focus {
    outline: none;
    border-color: var(--cyan);
}
.formation__input[aria-invalid='true'] {
    border-color: #ff6b8a;
    color: #ff6b8a;
}

.formation__error {
    min-height: 1.3em;
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: #ff6b8a;
    white-space: pre-line;
}

.controls button {
    flex: 1;
    font: inherit;
    padding: 7px 4px;
    border: none;
    border-radius: 4px;
    background: var(--purple);
    color: inherit;
    cursor: pointer;
}
.controls button:hover {
    background: #3d1069;
}

.controls input {
    font: inherit;
    min-width: 0;
    /* padding: 5px 6px;
    border: none;
    background: none; */
    color: inherit;
}
/* .controls input:focus {
    outline: 2px solid var(--cyan);
    outline-offset: -1px;
}
.controls input[aria-invalid='true'] {
    border-color: #ff6b8a;
} */

.controls__table {
    width: 100%;
    border-collapse: collapse;
}

.controls__table th,
.controls__table td {
    padding: 4px 6px;
    text-align: left;
    vertical-align: middle;
}

.controls__table thead th {
    background: var(--purple);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.controls__table tbody th {
    color: #9b8fb5;
    font-weight: 400;
    font-size: 11px;
}

.controls__table input {
    width: 100%;
    padding: 3px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    color: inherit;
    font: inherit;
}

.controls__table input:focus {
    outline: none;
    border-color: var(--cyan);
}

.controls__table tbody tr:nth-child(odd) {
    background: var(--grey);
}

/* .field__num {
    width: 3em;
}
.field__name {
    width: 100%;
} */

.controls__table td:first-of-type {
    width: 4.5em;
}

.is-hiding .purple_bg,
.is-hiding .swoosh-lines,
.is-hiding .pitch,
.is-hiding .player,
.is-hiding .mask-spine {
    transition:
        opacity var(--t-exit) ease-in,
        transform var(--t-exit) ease-in,
        width var(--t-exit) ease-in,
        stroke-dashoffset var(--t-exit) ease-in,
        stroke-width var(--t-exit) ease-in;
}

.is-hiding .purple_bg {
    opacity: 0;
    width: var(--panel-exit);
}

.is-hiding .swoosh-lines {
    transform: translate(calc(10px + var(--exit-x)), 0px) scale(1.1, 1.1);
}

.is-hiding .pitch {
    opacity: 0;
    transform: translate(360px, calc(300px + var(--exit-y)))
        scaleY(calc(var(--pitch-h-start) / var(--pitch-h)));
}

.is-hiding .player {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(55%);
}

.is-hiding .mask-spine {
    stroke-dashoffset: -3000;
    stroke-width: 4px;
}

@media (max-width: 1200px) {
    body {
        flex-direction: column;
    }
    .app {
        width: 100vw;
    }
    .controls {
        position: static;
        width: 100%;
        height: auto;
        border-left: none;
        background: #0b0b10;
    }
}

.no-anim,
.no-anim * {
    transition: none !important;
    animation: none !important;
}