/* ==========================================================================
   Theme Variables
   ========================================================================== */
:root {
    --color-bg-page: #f4f4f4;
    --color-bg-surface: #fff;
    --color-text-primary: #333;
    --color-text-heading: #000;
    --color-text-muted: #555;
    --color-border: #ddd;
    --color-border-strong: #ccc;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-glow: #f4f4f4;
    --color-link: #555;
    --color-link-hover: #069;
    --color-row-hover: #e6e6e6;
    --color-pfp-border: darkgray;
    --color-points-separator: #eee;

    --color-gold: #f9d776;
    --color-silver: #c0c0c0;
    --color-bronze: #c88e5e;

    --color-roundbest-bg: #fff1cc;
    --color-roundbest-shadow: rgba(255, 241, 204, 0.81);
    --color-glow5k: rgb(158, 124, 32);

    /* matches the rank sparkline's own best/worst color stops (public/app.html's
       RANK_COLOR_STOPS) - deliberately the same in light and dark mode, same as those */
    --color-rank-up: #77f277;
    --color-rank-down: #f17777;
    --color-rank-new: #6fb3f2;
    --color-rank-unchanged: #3a3a3a;
}

/* Automatic dark mode, unless the page explicitly opts into light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg-page: #121212;
        --color-bg-surface: #1e1e1e;
        --color-text-primary: #e0e0e0;
        --color-text-heading: #f5f5f5;
        --color-text-muted: #b0b0b0;
        --color-border: #3a3a3a;
        --color-border-strong: #4a4a4a;
        --color-shadow: rgba(0, 0, 0, 0.5);
        --color-glow: #121212;
        --color-link: #b8c4d0;
        --color-link-hover: #6fb3f2;
        --color-row-hover: #2a2a2a;
        --color-pfp-border: #666;
        --color-points-separator: #333;

        --color-gold: #d4af5a;
        --color-silver: #999999;
        --color-bronze: #a5714a;

        --color-roundbest-bg: #3a331a;
        --color-roundbest-shadow: rgba(255, 241, 204, 0.15);
        --color-glow5k: rgb(212, 175, 90);
    }
}

/* Manual dark mode toggle (add data-theme="dark" to <html> to force it) */
:root[data-theme="dark"] {
    --color-bg-page: #121212;
    --color-bg-surface: #1e1e1e;
    --color-text-primary: #e0e0e0;
    --color-text-heading: #f5f5f5;
    --color-text-muted: #b0b0b0;
    --color-border: #3a3a3a;
    --color-border-strong: #4a4a4a;
    --color-shadow: rgba(0, 0, 0, 0.5);
    --color-glow: #121212;
    --color-link: #b8c4d0;
    --color-link-hover: #6fb3f2;
    --color-row-hover: #2a2a2a;
    --color-pfp-border: #666;
    --color-points-separator: #333;

    --color-gold: #d4af5a;
    --color-silver: #999999;
    --color-bronze: #a5714a;

    --color-roundbest-bg: #3a331a;
    --color-roundbest-shadow: rgba(255, 241, 204, 0.15);
    --color-glow5k: rgb(212, 175, 90);
}

/* Smooth transition when switching themes */
body, header, .table-container table, .select-box {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
        border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* ==========================================================================
   General Page Styling
   ========================================================================== */
body {
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* overrides the centered text-align several containers (e.g. main > div:not(#rules) below)
   otherwise pass down to headings by inheritance - headings should always be left-aligned,
   regardless of how their surrounding content is aligned */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: left;
}

/* Header Styling */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    text-align: center;
    gap: 10px;
    background: var(--color-bg-surface);
    box-shadow: 0 2px 4px var(--color-shadow);
    filter: drop-shadow(0 0 1.25rem var(--color-glow));
    position: sticky;
    top: 0px;
    width: 100%;
    /* without this, filtered content further down the page (e.g. the date input's
       calendar icon, which gets filter: invert(1) in dark mode) can end up
       compositing above this sticky header instead of scrolling underneath it */
    z-index: 10;
}

header > div,
header > nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 8px 20px 8px 20px;
}

main {
    flex: 1;
    margin: 0px 20px 0px 20px;
}

main > div:not(#rules) {
    text-align: center;
}

/* #rules used to be excluded from the rule above by being a direct child of <main> itself;
   now that Regeln/Tagesliste/Saisonliste live in the .admin-layout sidebar, #rules sits a
   few levels deeper and would otherwise just inherit that centering - restate it explicitly */
#rules {
    text-align: left;
}

main p {
    margin: 8px 0px 8px 0px;
}

main p a {
    text-decoration: none;
}

footer {
    width: 100%;
    text-align: center;
    background: var(--color-bg-surface);
    box-shadow: 0 2px 4px var(--color-shadow);
    filter: drop-shadow(0 0 1.25rem var(--color-glow));
}

img.logo:hover {
    transition: .6s;
    transform: scale(1.2);
}

header a img {
    vertical-align: middle;
    height: 36px;
    width: 36px;
}

header h2 {
    font-size: 24px;
    margin: 0;
    color: var(--color-text-heading);
}

/* Dark/light mode toggle button (see theme.js) */
.theme-toggle {
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: 0 2px 4px var(--color-shadow);
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.theme-toggle:hover {
    border-color: var(--color-link-hover);
}

/* ==========================================================================
   Sidebar Layout (a left-hand nav sidebar next to the page's main content -
   used by the admin panel and, for its Regeln/Tagesliste/Saisonliste links,
   every public page)
   ========================================================================== */
main {
    align-self: stretch;
}

.admin-layout {
    display: flex;
    align-items: stretch;
    gap: 20px;
    /* ensures the row (and via align-items:stretch, the sidebar's border) reaches the
        bottom of the viewport even when the content is shorter than that, e.g. a filtered
        table with few results; grows past this naturally when content is taller */
    min-height: calc(100vh - var(--header-height, 60px));
}

/* stretches to match .admin-content's height so the border-right spans the full page,
    independent of the (short, sticky) nav living inside it */
.admin-sidebar {
    min-width: 140px;
    padding-right: 16px;
    border-right: 1px solid var(--color-border-strong);
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--header-height, 60px) + 12px);
    /* .admin-layout inherits text-align: center from main > div:not(#rules) below, which
       would otherwise center each link's text within its (flex-stretched, full-width) box */
    text-align: left;
}

.admin-sidebar-nav a {
    padding: 6px 4px;
    border-radius: 4px;
    color: var(--color-link);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

.admin-sidebar-nav a:hover {
    color: var(--color-link-hover);
}

.admin-sidebar-nav a.active {
    color: var(--color-link-hover);
}

.admin-content {
    flex: 1;
    min-width: 0;
    margin-bottom: 20px;
}

.admin-content h1 {
    margin-top: 12px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.challenge-group-heading {
    margin: 20px 0 8px 0;
}

.challenge-meta {
    font-size: 12px;
    font-weight: normal;
    color: var(--color-text-muted);
}

/* Selection Box */
.select-box {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 5px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 16px;
}

/* Date / month / year / limit selection controls */
.date-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* .date-selection only ever lives inside .section-header now (its own gap/align-items
       already space and center it against the h1 next to it) - this leftover vertical
       margin doesn't collapse away like it would in normal block flow (flex items never
       collapse margins), so it was inflating .section-header's own height and, via
       align-items: center, shifting the h1 down within that taller row - not visible on
       Regeln's h1, which has no such sibling to inflate the row around it */
}

.date-selection select,
.date-selection input[type="date"] {
    /* browsers default input[type="date"] to content-box but select to border-box, and with
       no explicit height set anywhere, that alone makes a date input render ~2px taller than
       a select despite identical padding/border/font - box-sizing here plus an explicit
       height forces both to the exact same pixel height regardless of that native quirk */
    box-sizing: border-box;
    height: 36px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 32px 8px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: 0 2px 4px var(--color-shadow);
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
        background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.date-selection select {
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
        linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.date-selection input[type="date"] {
    padding: 8px 14px;
}

.date-selection input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
}

.date-selection select:hover,
.date-selection input[type="date"]:hover {
    border-color: var(--color-link-hover);
}

.date-selection select:focus,
.date-selection input[type="date"]:focus {
    outline: none;
    border-color: var(--color-link-hover);
    box-shadow: 0 0 0 2px var(--color-row-hover);
}

.date-selection option {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .date-selection input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
}

:root[data-theme="dark"] .date-selection input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.last-updated-note {
    font-size: 8px;
    text-align: left;
    color: var(--color-text-muted);
    margin: 4px 0 0 0;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 14px;
}

.pagination-controls:empty {
    display: none;
}

.pagination-controls button {
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    cursor: pointer;
}

.pagination-controls button:hover:not(:disabled) {
    border-color: var(--color-link-hover);
}

.pagination-controls button:disabled {
    opacity: 0.5;
    cursor: default;
}

.pagination-controls span {
    color: var(--color-text-muted);
}

/* Table Styling */
.table-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

.table-container table {
    border-collapse: collapse;
    width: 100%;
    background: var(--color-bg-surface);
    border-radius: 8px;
    overflow: scroll;
    white-space: nowrap;
    box-shadow: 0 2px 4px var(--color-shadow);
}

.table-container table tr td a {
    text-overflow: clip;
}

/* Keep horizontal borders but remove vertical ones */
.table-container th,
.table-container td {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 4px;
    text-align: left;
    height: 20px;
}

/* Remove the very top and bottom horizontal borders */
.table-container thead tr:first-child th {
    border-top: none;
}

.table-container tbody tr:last-child td {
    border-bottom: none;
}

/* Transparent table headers */
.table-container th {
    background: transparent;
    color: var(--color-text-heading);
    /* Keep text visible */
    font-weight: bold;
    text-align: center;
}

/* First column should be bold */
.table-container td:first-child {
    width: 16px;
    font-weight: bold;
    text-align: center;
}

/* Tagesliste's and Saisonliste's tables both stack vertically and stretch to fill the
   panel - every column except the player name (3rd; the one column whose content length
   varies a lot - the 2nd, pfp, is narrow but still content-driven like the rest) is pinned
   to its current, content-driven width via the standard width:1% + nowrap trick (nowrap
   already comes from .table-container table above), so only the player name column actually
   grows into the newly available space - everything before it stays pinned to the left edge,
   everything after it gets pushed flush against the right edge. */
#tables-day,
#tables-season {
    flex-direction: column;
    align-items: stretch;
}

#tables-day th:not(:nth-child(3)),
#tables-day td:not(:nth-child(3)),
#tables-season th:not(:nth-child(3)),
#tables-season td:not(:nth-child(3)) {
    width: 1%;
}

/* the rank column shrinking to content (via width:1% above) means its rendered width
   depends on the widest rank number actually shown in that particular table - the day
   list's streak table blanks out the rank on every row tied with the one above it (see
   buildStreakRow's showRank), so its widest visible rank is often a narrower, lower number
   than the challenge table's, making the two rank columns drift out of sync with each
   other. A shared min-width (2 digits, e.g. "24") keeps them the same width regardless of
   what either table's own content happens to need. */
#tables-day th:first-child,
#tables-day td:first-child {
    min-width: 2ch;
}

/* the player name header sits above a column that (unlike every other header, centered via
   .table-container th) actually grows to fill the panel - center-aligned "Spieler*in" text
   floating in that wide, mostly-empty header looks off, so left-align just this one instead */
#tables-day th:nth-child(3),
#tables-season th:nth-child(3) {
    text-align: left;
}

/* shared by both Tagesliste's and Saisonliste's paginated tables (see padTableRows) - the
   colspan'd cell is still the row's 1st (and only) child, so it would otherwise pick up
   the width:1% shrink meant for narrow columns above - let it size to the full span */
.table-filler-row td {
    width: auto;
    /* padTableRows sets this cell's own inline height to a real row's measured (rendered,
       border-box) height - td is content-box by default like every other cell on the page,
       so without this, that padding/border would be added on top of the already-complete
       height instead of being included in it, rendering the filler row visibly taller */
    box-sizing: border-box;
}

/* several consecutive filler rows (padding a short last page back up to a full page's
   height) read as one merged blank block rather than a stack of separately-outlined empty
   rows - only the border between two filler rows is removed, so the block still has a
   normal top border where it meets the last real row above it */
.table-filler-row + .table-filler-row td {
    border-top: none;
}

/* stands in for a Tagesliste table's entire contents (headers included) while its data is
   still loading - sized up from the icon's 1em default so it reads clearly as a spinner
   rather than a stray small mark */
.day-table-loading-icon {
    display: inline-flex;
    font-size: 22px;
    color: var(--color-text-muted);
    padding: 6px 0;
}

/* the material-symbols icons that replaced various emoji throughout Tagesliste, Saisonliste
   and Regeln - sized/aligned to sit inline in place of the character it replaced, inheriting
   whatever font-size its surrounding text (a heading, a table header, a Regeln label) has */
.inline-icon {
    display: inline-flex;
    vertical-align: -0.15em;
}

/* the day list's round-winner trophy, in the same gold used to mark the day's overall
   1st-place row (.result-row-gold's left border) */
.icon-gold {
    color: var(--color-gold);
}

/* every fire/rocket icon (🔥/🚀's replacement, wherever it appears) - this page and the admin
   panel, which links this stylesheet too. The extra "span" specificity is needed there:
   admin.css's own .suggestion-icon (same specificity, loaded after this stylesheet) would
   otherwise win the color tie and mute it back down */
span.fire-icon {
    color: #dba016;
}

span.rocket-icon {
    color: firebrick;
}

/* the leaderboard/info/sports-score/japanese-flag icons (Regeln and the day list's "Pkt."/🌐
   headers) - public site only, no admin-panel equivalent, so no span specificity needed here */
.leaderboard-icon {
    color: #74acdf;
}

.info-icon,
.sports-score-icon {
    color: #2596be;
}

.japanese-flag-icon {
    color: #005540;
}

/* Row hover effect - makes background slightly darker */
.result-row:hover,
.result-row-gold:hover,
.result-row-silver:hover,
.result-row-bronze:hover {
    background-color: var(--color-row-hover);
    transition: background-color 0.2s ease-in-out;
}

/* Style hyperlinks to match normal text but bold and dark gray */
.table-container a,
header a,
main p a {
    color: var(--color-link);
    text-decoration: none;
    font-weight: bold;
}

.table-container a:hover,
header nav a:hover,
main p a:hover {
    color: var(--color-link-hover);
}

main ul {
    margin: 0;
}
/* shrinks to the pfp image's own width in Saisonliste too (Tagesliste's #tables-day rule
   above already covers it there, via the same width:1% trick) - the name column next to it
   is left with no explicit width, so it absorbs whatever space is left over */
.player-pfp {
    width: 1%;
    white-space: nowrap;
}

/* Player profile image styling */
.pfp {
    vertical-align: middle;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--color-pfp-border);
}

.pfp-container {
    vertical-align: middle;
}

.verified-badge {
    height: 14px;
    width: auto;
    vertical-align: middle;
    margin-left: 4px;
}

.round {
    width:120px;
    max-width:120px;
    font-size: 12px;
}

table#challenge-day-table th.sortable-round {
    cursor: pointer;
    user-select: none;
}

table#challenge-day-table th.sortable-round.sorted-asc::after {
    content: " \25B2";
    font-size: 10px;
}

table#challenge-day-table th.sortable-round.sorted-desc::after {
    content: " \25BC";
    font-size: 10px;
}

/* the round header's own country flag (see updateRoundFlags) - same look as the admin
   panel's map pool flags (private/admin.css's .country-flag), just mirrored to sit right of
   the header text instead of left of a name */
.round-header-flag {
    width: 20px;
    height: 15px;
    vertical-align: middle;
    /* vertical-align: middle centers it on the header font's x-height midpoint, not its
       actual rendered line - measured ~1.2px too low against the header text's own ink
       center, so nudge it up by that exact amount */
    transform: translateY(-1.25px);
    margin-left: 8px;
    border: 1px solid var(--color-pfp-border);
    border-radius: 2px;
}

.table-container tbody tr {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

table.season-table .result-row-gold,
table#challenge-day-table .result-row-gold,
table#streak-day-table .result-row-gold {
    border-left: 4px solid var(--color-gold);
}

table.season-table .result-row-silver,
table#challenge-day-table .result-row-silver,
table#streak-day-table .result-row-silver {
    border-left: 4px solid var(--color-silver);
}

table.season-table .result-row-bronze,
table#challenge-day-table .result-row-bronze,
table#streak-day-table .result-row-bronze {
    border-left: 4px solid var(--color-bronze);
}

/* temporarily hidden (not removed) - the sparkline column is always the 5th header/cell in
   both season tables (the "" header right after 🚀, per createSeasonTable) */
#challenge-table th:nth-child(5),
#challenge-table td:nth-child(5),
#streak-table th:nth-child(5),
#streak-table td:nth-child(5) {
    display: none;
}

.rank-sparkline-cell {
    text-align: center;
    vertical-align: middle;
}

.rank-sparkline {
    display: block;
    margin: 0 auto;
    color: var(--color-link-hover);
}

/* the top/bottom lines marking the plotted range's edges - deliberately subtle, just enough
   to give the line/dots something to read their vertical position against */
.rank-sparkline-range-line {
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.12;
}

.rank-sparkline-notplayed {
    color: var(--color-text-muted);
}

/* the "#" cell's rank number plus its day-over-day rank-change indicator (see
   buildRankChangeHtml) - one flex row so the current rank, the arrow and the previous rank
   all share a single line to center against. Both children below get a fixed (not
   content-driven) width, so .rank-cell's total width - and therefore the whole "#" column's
   width - is identical for every row regardless of whether that row has an indicator to show
   and, just as importantly, identical across pages: each page replaces the table body with
   only its own 10 rows, so table-layout:auto would otherwise size this column from whatever
   happens to be the widest cell on that specific page alone, drifting the pfp column (and
   everything after it) left/right as you paginate. Widths are sized for up to 3-digit ranks
   (fits any realistic season/day size) with a little headroom. */
.rank-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* the season lists' total-score ("Ges.") column - fixed (not content-driven) width, same
   table-layout:auto page-to-page drift reasoning as .rank-cell above, sized for up to
   4-digit scores with a little headroom. The width has to live on an inline-block *inside*
   the cell, not on the <td> itself - table-layout:auto only ever treats a <td>'s own width
   as a hint, not a hard floor, so a page where every row's score happens to be 2 digits
   still shrunk the column back down despite every cell declaring the same width. An
   inline-block's width is enforced regardless of its content, so the <td>'s own content
   width - and therefore the column's - stays genuinely constant across every row and page. */
.total-score-cell b {
    display: inline-block;
    width: 44px;
    text-align: right;
}

.rank-number {
    display: inline-block;
    width: 28px;
    text-align: right;
}

.rank-change {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: 34px;
    height: 12px;
    font-size: 11px;
    line-height: 1;
}

/* align-items: center only lines up boxes, not visual ink - the arrow icon's ink isn't
   perfectly centered in its square viewBox, and the previous-rank digit sits slightly off
   its own line box's center. The current rank number is the reference line (per design: the
   other two elements align to it, not the other way around), so only these two are nudged -
   by exactly how far their own rendered ink sits from the rank number's ink center, measured
   directly rather than eyeballed. */
.rank-change svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transform: translateY(-0.4px);
}

.rank-change-prev {
    transform: translateY(0.5px);
}

.rank-change-up svg {
    color: var(--color-rank-up);
}

.rank-change-down svg {
    color: var(--color-rank-down);
    /* the icon's ink isn't vertically symmetric, so rotating it 180deg flips which side sits
       further from center - this needs the opposite nudge direction from the up arrow, not
       the same one (that was the bug: reusing -0.4px here left it too high by 0.8px) */
    transform: translateY(0.4px) rotate(180deg);
}

.rank-change-new {
    /* centered within the reserved column, over roughly where the arrow+previous-rank-number
       pairing sits, rather than flex-start like that pairing itself */
    justify-content: center;
}

.rank-change-new svg {
    width: 20px;
    height: 20px;
    color: var(--color-rank-new);
    /* unlike the arrow icon, this one's ink is already centered in its viewBox - overrides
       the -0.4px nudge the shared ".rank-change svg" rule above applies for the arrow */
    transform: none;
}

.rank-change-unchanged svg {
    width: 8px;
    height: 8px;
    color: var(--color-rank-unchanged);
    /* smaller than the arrow (12px) - centers it horizontally on the arrow's own horizontal
       center rather than sharing its flex-start left edge */
    margin-left: 2px;
    /* like the "new" icon, this one's ink is already centered in its viewBox */
    transform: none;
}

/* Ensure the vertical line does not touch horizontal borders*/
/*.table-container tbody tr:nth-child(1) td,
.table-container tbody tr:nth-child(2) td,
.table-container tbody tr:nth-child(3) td {
    border-top: 3px transparent;
    border-bottom: 3px transparent;
}*/

.navbar {
    /*background-color: #333;*/
    text-align: center;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar ul li {
    display: inline;
    margin: 0 15px;
}

.pos {
    grid-area: pos;
    margin: auto;
}

.pts {
    grid-area: pts;
    text-align: right;
}

.time {
    grid-area: time;
    text-align: right;
}

.rank {
    width: 24px;
}

.round {
    display: grid;
    grid-template-areas:
        "pos pts"
        "pos time";
    grid-template-columns: 16px auto;
    gap: 1px;
}

#roundbest {
    background-color: var(--color-roundbest-bg);
    -webkit-box-shadow: 0px 0px 24px 0px var(--color-roundbest-shadow);
    -moz-box-shadow: 0px 0px 24px 0px var(--color-roundbest-shadow);
    box-shadow: 0px 0px 24px 0px var(--color-roundbest-shadow);
}

td.points-separator {
    border-right: 1px solid var(--color-points-separator);
}

/* Streak day list: consecutive rows sharing the same rank (see buildStreakRow's showRank)
   drop the horizontal border between them in the rank column only - both sides need it
   removed, since border-collapse keeps a border if either adjoining cell still has one */
td.rank-tied-top {
    border-top: none;
}

td.rank-tied-bottom {
    border-bottom: none;
}

.glow5k {
    text-shadow: 1px 1px 14px var(--color-glow5k);
}

@keyframes shine {
    from {
        -webkit-mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
    }
}