* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f0f2f5;
    color: #333;
    min-height: 100vh;
}

.card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

button:focus-visible { outline: 2px solid #0077aa; outline-offset: 2px; }

.rules-box {
    background: #f0f7fa;
    border-left: 0.25em solid #0077aa;
    padding: 0.75em;
    margin-bottom: 0.9375em;
    border-radius: 0 0.5em 0.5em 0;
}
.rules-name { font-weight: bold; margin-bottom: 0.3125em; color: #333; }
.rules-description { color: #333; }

.results-table { width: 100%; border-collapse: collapse; }
.results-table th, .results-table td { border-bottom: 1px solid #e9ecef; }
.results-table th { color: #0077aa; font-weight: 600; }
.results-table th.unscored, .results-table td.unscored {
    color: #6b6b6b;
    background: #f5f5f5;
}
.results-table th.group-header { text-align: center; }
.results-table th.shrink { width: 1%; white-space: nowrap; }
.results-table th.round-col, .results-table td.round-col {
    white-space: normal;
    word-break: break-word;
    min-width: 80px;
}

table.standings-table tr:not(.round-subheader) > th:first-child,
table.standings-table tr:not(.round-subheader) > td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    width: var(--standings-team-width);
    min-width: var(--standings-team-width);
}
table.standings-table th.overall-col,
table.standings-table td.overall-col {
    position: sticky;
    left: var(--standings-team-width);
    background: #fff;
    z-index: 1;
}

/* !important: a page's own class-level `display` rule (e.g. the scoreboard's
   `.lobby-panel`/`.lobby-tile`/`.lobby-or`) sits in a later <style> block at
   equal specificity, so without it those elements stay visible when hidden. */
.hidden { display: none !important; }