/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Terminal aesthetic for game day viewer */
:root {
    --bg: #101010;
    --fg: #e0e0e0;
    --dim: #808080;
    --accent: #4a9eff;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    background-color: var(--bg);
    color: var(--fg);
    margin: 0;
    padding: 16px;
    line-height: 1.4;
}

.container {
    max-width: 360px;
    margin: 0 auto;
}

.section {
    border: 1px solid var(--dim);
    margin-bottom: -1px;
    padding: 12px;
}

.section-header {
    text-align: center;
    margin-bottom: 8px;
}

.centered {
    text-align: center;
}

.scoreboard {
    text-align: center;
}

.predictions-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    .winner {
        text-align: right;
    }
}

.payout-event {
    display: flex;
    justify-content: space-between;
}

.payout-winner {
    display: flex;
    justify-content: space-between;
    color: var(--dim);
    margin-bottom: 8px;
}

.quarter-header {
    text-align: center;
    margin: 12px 0 8px 0;
}

.remaining-pot {
    display: flex;
    justify-content: space-between;
    margin-top: 4ch;
}

.footer {
    color: var(--dim);
    text-align: center;
    padding: 8px;
}

.pdf-link {
    text-align: center;
    padding: 12px;
}

.pdf-link a {
    color: var(--accent);
}

.team-name {
    display: inline-block;
    width: 3ch;
}

.payout-event .team-name {
    text-align: left;
}

.payout-time {
    display: inline-block;
    width: 6ch;
}

.fixed-score {
    span:nth-child(1) {
        width: 3ch;
        display: inline-block;
        text-align: right;
    }

    span:nth-child(3) {
        width: 3ch;
        display: inline-block;
        text-align: left;
    }
}

.team-predictions {
    margin-bottom: 2ch;
}