/* Terraforming Mars Leaderboard
 *
 * Colors come from the open-source online version of the game
 * (github.com/terraforming-mars): its dark background and text, the tan-gold
 * title color, the Tharsis board rust, and the card-type colors (automated
 * green, active blue, event orange). Every text color here is at least 4.5:1
 * against the background it sits on.
 */

/* Fonts: served from /static/fonts/ (embedded in the binary), so the site
 * makes no requests to other servers. These are the Latin subsets Google
 * Fonts serves. Licenses: OFL (Saira Semi Condensed) and the Ubuntu Font
 * Licence, both in the fonts folder. font-display: swap shows text in a
 * fallback font while a font file is still loading. */

@font-face {
    font-family: "Saira Semi Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/saira-semi-condensed-600.woff2") format("woff2");
}

@font-face {
    font-family: "Saira Semi Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/saira-semi-condensed-700.woff2") format("woff2");
}

@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ubuntu-400.woff2") format("woff2");
}

@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ubuntu-500.woff2") format("woff2");
}

@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/ubuntu-700.woff2") format("woff2");
}

:root {
    color-scheme: dark;          /* the browser draws date pickers, spinners and scrollbars dark */

    /* backgrounds */
    --bg-page: #222222;          /* page: dark, like space */
    --bg-panel: #303030;         /* tables, forms */
    --bg-input: #1a1a1a;         /* inputs, one step darker than panels */
    --border: #4a4a4a;           /* table rules, input borders */

    /* text */
    --text: #dddddd;             /* body text: 9.7:1 on panels */
    --text-muted: #a0a0a0;       /* captions, dates: 5.0:1 on panels */
    --text-on-accent: #222222;   /* text on orange or gold fills */

    /* Mars accents */
    --gold: #daab63;             /* main title, 1st place: 6.3:1 on panels */
    --rust: #ca7540;             /* section headings, large text only: 4.6:1 on the page */
    --orange: #ec6a13;           /* buttons (event card orange) */
    --orange-light: #f08842;     /* button hover */
    --green: #0ac20a;            /* success (automated card green) */
    --blue: #4da3e6;             /* links (active card blue) */
    --red: #ff6b5b;              /* problems in a form */

    --font-heading: "Saira Semi Condensed", "Arial Narrow", sans-serif;
    --font-body: "Ubuntu", system-ui, sans-serif;

    --radius: 8px;
    --space: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
}

/* Header bar on every page */

.site-header {
    border-bottom: 2px solid var(--rust);
    background: var(--bg-panel);
}

.site-header-inner,
main {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    min-height: 56px;
}

.site-name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
}

main {
    padding-top: 32px;
    padding-bottom: 48px;
}

/* Headings */

h1,
h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    /* the online game's heading shadow */
    filter: drop-shadow(2px 2px 3px black);
}

h1 {
    margin: 0 0 32px;
    font-size: 36px;
    color: var(--gold);
}

h2 {
    margin: 40px 0 8px;
    font-size: 26px;
    color: var(--rust);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.caption {
    margin: 0 0 12px;
    color: var(--text-muted);
}

a {
    color: var(--blue);
}

a:hover {
    color: #ffffff;
}

/* Tables */

.table-wrap {
    overflow-x: auto;            /* wide tables scroll on a phone instead of the whole page */
    border-radius: var(--radius);
    background: var(--bg-panel);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
}

th {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

tbody tr + tr td {
    border-top: 1px solid var(--border);
}

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;   /* digits line up in columns */
}

/* The leader: 1st place in the latest match, top row of the lifetime tables */
tr.leader td {
    color: var(--gold);
    font-weight: 700;
}

/* Forms */

.panel {
    padding: var(--space);
    border-radius: var(--radius);
    background: var(--bg-panel);
}

label {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 14px;
}

input {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 16px;             /* 16px stops phones from zooming in on focus */
}

input:focus,
button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

td input {
    width: 100%;
    min-width: 90px;
}

td input[type="number"] {
    min-width: 70px;
}

button {
    padding: 8px 18px;
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    background: var(--orange);
    color: var(--text-on-accent);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}

button:hover {
    background: var(--orange-light);
}

button:active {
    transform: scale(0.97);
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Secondary buttons (Add player, Remove, Log out): outline only */
button.secondary {
    border-color: var(--border);
    background: transparent;
    color: var(--text);
}

button.secondary:hover {
    border-color: var(--text-muted);
    background: var(--bg-panel);
}

.form-row {
    margin: 0 0 var(--space);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: var(--space);
}

/* Messages */

.message {
    margin: 0 0 var(--space);
    padding: 12px var(--space);
    border-radius: var(--radius);
    background: var(--bg-panel);
}

.message.success {
    border: 1px solid var(--green);
    color: var(--green);
}

.message.problem {
    border: 1px solid var(--red);
    color: var(--red);
}

.message ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.message a {
    color: inherit;
}

/* Small screens */

@media (max-width: 600px) {
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 22px;
    }

    th,
    td {
        padding: 8px 10px;
    }
}

/* Page title with a button beside it (add-match page: Log out) */
.title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    margin-bottom: 32px;
}

.title-row h1 {
    margin: 0;
}

.form-actions .caption {
    margin: 0;
}

/* A small form (login): no wider than it needs, inputs fill it */
.panel.narrow {
    max-width: 400px;
}

.panel.narrow label,
.panel.narrow input {
    width: 100%;
}

/* Header tabs */
.tabs {
    display: flex;
    gap: 4px;
}

.tabs a {
    padding: 6px 12px;
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.tabs a:hover {
    background: var(--bg-page);
    color: #ffffff;
}

/* The tab of the page you're on */
.tabs a[aria-current="page"] {
    background: var(--bg-page);
    color: var(--gold);
}

/* Player names in tables: look like the rest of the row, underline on hover */
.player-link {
    color: inherit;
    text-decoration: none;
}

.player-link:hover {
    color: inherit;
    text-decoration: underline;
}

/* Number tiles on the player page */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px var(--space);
    border-radius: var(--radius);
    background: var(--bg-panel);
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

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

@media (max-width: 600px) {
    /* name on its own line, tabs below it */
    .site-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .tabs {
        margin-left: -12px;
    }
}

/* Links that look like buttons (All matches, Edit) */
a.button {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    background: var(--orange);
    color: var(--text-on-accent);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.5;
    text-decoration: none;
}

a.button.secondary {
    border-color: var(--border);
    background: transparent;
    color: var(--text);
}

a.button.secondary:hover {
    border-color: var(--text-muted);
    background: var(--bg-panel);
}

a.button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Destructive buttons (Delete): red outline, so they don't look like Save */
button.danger {
    border-color: var(--red);
    background: transparent;
    color: var(--red);
}

button.danger:hover {
    background: var(--red);
    color: var(--text-on-accent);
}

/* Smaller buttons inside table rows */
.small,
a.button.small {
    padding: 4px 12px;
    font-size: 14px;
}

/* Buttons beside an admin page title */
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-actions form,
.row-actions form {
    margin: 0;
}

/* Edit and Delete side by side at the end of a row */
.row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* "Plays as Camilo, Sasuke, milow" under a player's name */
.aliases {
    margin: -24px 0 32px;        /* tuck it under the h1 */
    color: var(--text-muted);
}

.alias {
    color: var(--text);
    font-weight: 500;
}

td.muted {
    color: var(--text-muted);
}