:root {
    --page-bg: #11151b;
    --panel-bg: #1b222c;
    --panel-border: #34404d;

    --text-main: #f3f6f8;
    --text-muted: #aeb8c2;

    --home-color: #e62b38;
    --home-border: #ffffff;

    --away-color: #2c6fc4;
    --away-border: #ffffff;

    --pitch-light: #3e944d;
    --pitch-dark: #358543;
    --pitch-line: rgba(255, 255, 255, 0.82);

    --button-bg: #2c3541;
    --button-hover: #3a4655;
    --button-primary: #d72836;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

    color: var(--text-main);
    background: var(--page-bg);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

button,
select {
    font: inherit;
}

.replay-page {
    width: min(1100px, calc(100% - 24px));
    margin: 20px auto 50px;
}

.replay-topbar {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 14px;
}

.back-link {
    padding: 8px 12px;

    color: var(--text-main);
    background: var(--panel-bg);

    border: 1px solid var(--panel-border);
    border-radius: 8px;

    text-decoration: none;
}

.back-link:hover {
    background: #28323e;
}

.replay-title {
    font-size: 20px;
    font-weight: 700;
}

/* Scorebord */

.scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 12px 18px;
    margin-bottom: 12px;

    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
}

.scoreboard-team {
    font-size: 18px;
    font-weight: 700;
}

.scoreboard-home {
    text-align: left;
}

.scoreboard-away {
    text-align: right;
}

.scoreboard-center {
    min-width: 130px;
    text-align: center;
}

.match-minute {
    color: var(--text-muted);
    font-size: 14px;
}

.match-score {
    margin-top: 2px;

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

/* Veld */

.pitch-wrapper {
    padding: 8px;

    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
}

.pitch {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 4px solid var(--pitch-line);
    border-radius: 8px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--pitch-light) 0,
            var(--pitch-light) 12.5%,
            var(--pitch-dark) 12.5%,
            var(--pitch-dark) 25%
        );
}

.halfway-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 3px;

    background: var(--pitch-line);
    transform: translateX(-50%);
}

.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 16%;
    aspect-ratio: 1;

    border: 3px solid var(--pitch-line);
    border-radius: 50%;

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

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;

    background: var(--pitch-line);
    border-radius: 50%;

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

.penalty-area,
.goal-area {
    position: absolute;
    top: 50%;

    border: 3px solid var(--pitch-line);

    transform: translateY(-50%);
}

.penalty-area {
    width: 16%;
    height: 52%;
}

.goal-area {
    width: 7%;
    height: 27%;
}

.penalty-area-left,
.goal-area-left {
    left: -3px;
}

.penalty-area-right,
.goal-area-right {
    right: -3px;
}

.goal {
    position: absolute;
    top: 50%;

    width: 2%;
    height: 18%;

    border: 3px solid var(--pitch-line);

    transform: translateY(-50%);
}

.goal-left {
    left: -3px;
}

.goal-right {
    right: -3px;
}

/* Spelers */

.players-layer {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.player {
    position: absolute;

    width: 31px;
    height: 31px;

    transform: translate(-50%, -50%);
    transition:
        left 700ms ease,
        top 700ms ease;
}

.player-dot {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border: 2px solid white;
    border-radius: 50%;

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

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
}

.player-home .player-dot {
    color: white;
    background: var(--home-color);
    border-color: var(--home-border);
}

.player-away .player-dot {
    color: white;
    background: var(--away-color);
    border-color: var(--away-border);
}

.player-name {
    position: absolute;
    top: 34px;
    left: 50%;

    max-width: 95px;

    color: white;

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;

    text-shadow:
        -1px -1px 2px #000,
        1px -1px 2px #000,
        -1px 1px 2px #000,
        1px 1px 2px #000;

    transform: translateX(-50%);
}

/* Bal */

.ball {
    position: absolute;
    z-index: 20;

    top: 50%;
    left: 50%;

    width: 16px;
    height: 16px;

    background: white;
    border: 2px solid #151515;
    border-radius: 50%;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);

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

    transition:
        left 500ms linear,
        top 500ms linear;
}

/* Melding over het veld */

.event-overlay {
    position: absolute;
    z-index: 40;

    top: 50%;
    left: 50%;

    width: min(440px, 80%);

    padding: 20px;

    color: white;
    background: rgba(12, 16, 22, 0.94);

    border: 3px solid white;
    border-radius: 14px;

    text-align: center;

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

.event-icon {
    font-size: 38px;
}

.event-title {
    margin-top: 5px;

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

.event-subtitle {
    margin-top: 5px;

    color: #d5dce3;
    font-size: 15px;
}

/* Commentaar */

.commentary-panel {
    display: grid;
    grid-template-columns: 150px 1fr;

    margin-top: 12px;

    overflow: hidden;

    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
}

.event-phase {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 65px;
    padding: 12px;

    color: white;
    background: #283441;

    font-weight: 700;
    text-align: center;
}

.commentary {
    display: flex;
    align-items: center;

    min-height: 65px;
    padding: 12px 18px;

    line-height: 1.45;
}

/* Knoppen */

.replay-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 12px;
}

.replay-button,
.event-selector {
    min-height: 42px;
    padding: 9px 14px;

    color: var(--text-main);
    background: var(--button-bg);

    border: 1px solid var(--panel-border);
    border-radius: 8px;
}

.replay-button {
    cursor: pointer;
}

.replay-button:hover {
    background: var(--button-hover);
}

.replay-button-primary {
    background: var(--button-primary);
    border-color: var(--button-primary);
}

.replay-button-primary:hover {
    background: #ee3241;
}

.event-selector {
    flex: 1 1 270px;
}

/* Statistieken */

.statistics-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 8px;

    margin-top: 12px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 12px;

    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
}

.stat-item span {
    color: var(--text-muted);
    font-size: 13px;
}

.stat-item strong {
    font-size: 17px;
}

@media (max-width: 700px) {
    .scoreboard {
        padding: 10px;
    }

    .scoreboard-team {
        font-size: 14px;
    }

    .scoreboard-center {
        min-width: 90px;
    }

    .match-score {
        font-size: 25px;
    }

    .player {
        width: 24px;
        height: 24px;
    }

    .player-dot {
        width: 24px;
        height: 24px;

        font-size: 9px;
    }

    .player-name {
        display: none;
    }

    .ball {
        width: 13px;
        height: 13px;
    }

    .commentary-panel {
        grid-template-columns: 1fr;
    }

    .event-phase {
        min-height: auto;
    }
}