* {
    box-sizing: border-box;
}

html {
    background-color: rgb(56, 39, 40);
    min-height: 100%;
}

body {
    background-color: rgb(56, 39, 40);
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    margin: 0;
    box-sizing: border-box;
    min-height: 100vh;
}

.pool-toolbar {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    margin: 10px;
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 10px;
    background-color: rgb(90, 30, 43);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.panel-title {
    text-align: left;
    font-weight: 600;
    color: rgb(255, 186, 198);
    margin: 0 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.add-map {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button {
    background-color: rgb(87, 46, 55);
    padding: 5px 10px;
    color: white;
    border-radius: 10px;
    border: none;
}

.input {
    background-color: rgb(87, 46, 55);
    border-radius: 10px;
    padding: 5px 10px;
    width: 100%;
    border-bottom: 2px solid #ccc;
    color: white;
    margin-bottom: 0;
    border: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.input1 {
    background-color: rgb(87, 46, 55);
    border-radius: 10px;
    padding: 5px 10px;
    width: 35px;
    border-bottom: 2px solid #ccc;
    color: white;
    margin-bottom: 0px;
    border: none;
}

.select {
    background-color: rgb(87, 46, 55);
    border-radius: 10px;
    padding: 5px 8px;
    border: none;
    color: white;
}

.edit-btn {
    border: none;
    border-radius: 10px;
    padding: 5px 7px;
    background-color: rgba(90, 30, 43, 0.0);
    color: white;
}

.edit-btn:hover {
    color: rgb(255, 186, 198);
}

.remove-btn {
    border: none;
    border-radius: 10px;
    padding: 5px 7px;
    background-color: rgba(90, 30, 43, 0.0);
    color: white;
}

.remove-btn:hover {
    color: rgb(221, 111, 111);
}

/* team heading, rename box and remove button share one row on /admin/teams */
.team-admin-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.team-admin-head h2 {
    margin: 0;
    margin-right: auto;
}

.team-rename {
    display: flex;
    align-items: center;
    gap: 6px;
}

.team-rename .input {
    width: 180px;
}

/* flat colour, no artwork: the forum post already carries the imagery on the home page */
.header {
    background-color: rgb(90, 30, 43);
    justify-content: flex-start;
    padding: 26px 100px;
    display: flex;
    width: 100%;
    align-items: center;
    text-align: left;
    box-shadow: 0 8px 16px rgba(235, 133, 133, 0.4);
    margin-top: 0px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px;
}



.checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid rgb(288, 199, 199);
    background-color: rgb(122, 35, 42);
    cursor: pointer;
}

.checkbox:checked {
    background-color: rgb(58, 158, 63);
    border-color: rgb(231, 121, 182);
}

.pool-card {
    position: relative;
    background-color: rgb(57, 47, 65);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 8px 16px rgba(65, 42, 61, 0.479);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    break-inside: avoid;
    margin-bottom: 10px;
}

.pool-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pool-table th {
    text-align: left;
    padding: 8px 12px;
    background-color: rgb(90, 30, 43);
    position: sticky;
    top: 0;
    border: 1px solid rgba(0, 0, 0, 0.35);
}

.pool-table th a {
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pool-table th a:hover {
    color: rgb(255, 186, 198);
}

.sort-arrow {
    color: rgb(255, 186, 198);
    font-size: 11px;
}

.pool-row {
    background-image: linear-gradient(rgba(35, 25, 33, 0.93), rgba(35, 25, 33, 0.93)), var(--cover);
    background-size: cover;
    background-position: center;
}

.pool-row:nth-child(even) {
    background-image: linear-gradient(rgba(58, 42, 53, 0.93), rgba(58, 42, 53, 0.93)), var(--cover);
}

.pool-row:hover {
    background-image: linear-gradient(rgba(90, 30, 43, 0.75), rgba(90, 30, 43, 0.75)), var(--cover);
}

.pool-row td {
    padding: 7px 12px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pool-row .song-cell {
    white-space: normal;
}

.pool-edit-row td {
    background-color: rgb(41, 29, 37);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 12px;
}

.pool-edit-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}



.artist, .title {
    margin: 1px;
}

.title {
    margin-bottom: 10px;
    font-weight: 600;
}

.artist {
    font-weight: 200;
    font-size: 15px;
}

.stars {
    color: hsl(335, 84%, 83%);
    font-weight: 600;
}

.diff {
    font-style: italic;
    color: rgb(255, 186, 198);
}

.map-info {
    text-decoration: none;
    margin: 3px;
}

.p-head {
    font-size: 30px;
    font-weight: bold;
    color: rgb(228, 199, 199);
    margin: 0;
}

.head-p {
    font-size: 15px;
    font-weight: bold;
    color: rgb(243, 225, 225);
    margin: 2px;

}

nav {
    padding: 20px 40px;
    display: flex;
    gap: 24px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0px;
    background-color: rgb(90, 30, 43);
}

nav a {
    margin-right: 16px;
    color: white;
    text-decoration: none;
}

nav a:hover {
    color: rgb(231, 121, 182);
    font-weight: bold;
}

h1, h2 {
    color: rgb(231, 121, 182);
}

th {
    color: rgb(231, 121, 182);
}

.is-released {
    color: rgb(161, 233, 161);
}

.is-not-released {
    color: rgb(252, 180, 180);
}

table { border-collapse: collapse; margin-bottom: 32px; width: 100%; }

a {
    text-decoration: none;
}

.osr {
    color: lightblue;
    font-style: italic;
}

.screenshot {
    color: lightpink;
    font-style: italic;
}

.inc-diff { background-color: coral; }
.inc-song { background-color: darksalmon; }
.inc-ms { background-color: darkred; }

.toggle-add { cursor: pointer;
    color: blue;
    text-decoration: underline; 
    background: none; 
    border: none; 
    margin-bottom: 32px; 
}
/* layout */

.section {
    margin: 20px;
}

/* dashboard stat cards */

.stat-row {
    display: flex;
    gap: 16px;
    margin: 20px;
}

.stat-card {
    background-color: rgb(90, 30, 43);
    border-radius: 10px;
    padding: 14px 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    text-align: left;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: rgb(255, 186, 198);
}

.stat-label {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: rgb(243, 225, 225);
}

/* dashboard feeds */

.dash-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.dash-head h2 {
    margin: 0 0 10px 0;
}

.dash-window {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.dash-card {
    background-color: rgb(78, 51, 61);
    border: 1px solid rgba(255, 186, 198, 0.16);
    border-radius: 8px;
    padding: 10px 12px;
}

.dash-card-top,
.dash-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dash-player {
    font-weight: 700;
}

.dash-map {
    margin: 6px 0;
    font-size: 13px;
    color: rgb(243, 225, 225);
}

.dash-team,
.dash-list-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.dash-when {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.dash-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: rgb(46, 32, 39);
    margin-bottom: 6px;
}

/* the name takes the slack so times stay flush right */
.dash-list-name {
    font-weight: 600;
    margin-right: auto;
}

.dash-game-icon {
    width: 18px;
    height: 18px;
}

/* per-game points columns on /admin/points */

.game-col {
    text-align: center;
    white-space: nowrap;
}

.game-col-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
}

.game-col-zero {
    color: rgba(255, 255, 255, 0.3);
}

/* submission tier badges */

.tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tier-correct { background-color: rgb(58, 158, 63); }
.tier-close { background-color: coral; color: rgb(40, 20, 10); }
.tier-wrong { background-color: darkred; }
.inc-diff { background-color: coral; color: rgb(40, 20, 10); }
.inc-song { background-color: darksalmon; color: rgb(40, 20, 10); }
.inc-ms { background-color: darkred; }
.inc-other { background-color: gray; }

/* submissions grouped by map */

/* flat card: the beatmap cover behind these made the tables hard to read, and with no
   --cover set the gradient was invalid so the cards rendered with no background at all */
.sub-map {
    background-color: rgb(78, 51, 61);
    border: 1px solid rgba(255, 186, 198, 0.16);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(65, 42, 61, 0.479);
}

.sub-map-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* rows sit *inside* .sub-map, so they go darker than the card rather than lighter */
.sub-table .pool-row {
    background-image: none;
    background-color: rgb(46, 32, 39);
}

.sub-table .pool-row:nth-child(even) {
    background-image: none;
    background-color: rgb(56, 39, 47);
}

.sub-table .pool-row:hover {
    background-image: none;
    background-color: rgb(90, 30, 43);
}

.pts-award {
    color: rgb(255, 186, 198);
    font-weight: 700;
}

.pts-rank {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-left: 6px;
}

.pts-none {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    cursor: help;
}

/* avatars */

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    vertical-align: middle;
}

img.avatar-sm {
    width: 21px !important;
    height: 21px !important;
    aspect-ratio: 1 / 1;
    border-radius: 6px !important;
    object-fit: cover;
    object-position: center;
    vertical-align: middle;
    display: inline-block;
    margin-right: 4px;
}

img.avatar-sq {
    width: 48px !important;
    height: 48px !important;
    aspect-ratio: 1 / 1;
    border-radius: 10px !important;
    object-fit: cover;
    object-position: center;
    display: inline-block;
}

.rank-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* public landing */

.forum-post {
    white-space: pre-wrap;
    background-color: rgb(57, 47, 65);
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 900px;
    box-shadow: 0 4px 10px rgba(65, 42, 61, 0.479);
}

.cta {
    margin-top: 10px;
    padding: 8px 18px;
    font-weight: 700;
    background-color: rgb(231, 121, 182);
    color: rgb(40, 15, 25);
}

.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.player-card {
    background-color: rgb(57, 47, 65);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 4px 10px rgba(65, 42, 61, 0.479);
}

.player-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.player-name {
    font-weight: 700;
    margin: 0;
}

.team-badge {
    background-color: rgb(90, 30, 43);
    color: rgb(255, 186, 198);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
}

.team-title {
    color: rgb(255, 186, 198);
    margin-bottom: 8px;
}

.game-line {
    font-size: 13px;
    margin: 3px 0;
}

.game-name {
    display: inline-block;
    min-width: 105px;
    color: rgb(255, 186, 198);
    font-weight: 600;
}

.lb-table {
    max-width: 500px;
}

/* registration page */

.game-block {
    background-color: rgb(57, 47, 65);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    max-width: 640px;
    box-shadow: 0 4px 10px rgba(65, 42, 61, 0.479);
}

.game-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.game-row .input {
    width: auto;
    flex: 1;
}

.lookup-preview {
    margin-top: 8px;
}

.lookup-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgb(41, 29, 37);
    border-radius: 8px;
    padding: 8px 12px;
}

.lookup-card p {
    margin: 2px 0;
}

.lookup-error {
    color: rgb(252, 180, 180);
}

.lookup-loading {
    color: rgb(243, 225, 225);
    font-style: italic;
}

/* player table hover cards */

.player-cell {
    position: relative;
}

.hover-card {
    display: none;
    position: absolute;
    top: 90%;
    left: 12px;
    z-index: 50;
    background-color: rgb(41, 29, 37);
    border: 1px solid rgb(90, 30, 43);
    border-radius: 10px;
    padding: 14px 16px;
    width: 380px;
    white-space: normal;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

.player-cell:hover .hover-card {
    display: block;
}

.hover-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.hover-card-head .player-name {
    margin: 0;
}

.hover-game {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 0;
    font-size: 12px;
}

.hover-game p {
    margin: 2px 0;
}

.hover-game .game-name {
    min-width: 0;
    display: block;
    margin-bottom: 2px;
}

.reg-stat-line {
    font-size: 11px;
    color: rgb(255, 186, 198);
    margin-top: 2px;
}

/* ref panel */

.ref-layout {
    display: flex;
    gap: 16px;
    margin: 20px;
    align-items: flex-start;
}

.ref-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ref-setup .vs {
    font-weight: 700;
    color: rgb(255, 186, 198);
}

.ref-tallies {
    display: flex;
    gap: 16px;
}

.ref-team {
    flex: 1;
}

.ref-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgb(243, 225, 225);
    margin: 10px 0 4px 0;
}

.ref-counter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ref-value {
    font-size: 26px;
    font-weight: 700;
    color: rgb(255, 186, 198);
    min-width: 60px;
    text-align: center;
}

.ref-winner .ref-winner-name {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: rgb(243, 225, 225);
}

.ref-winner.has-winner {
    background-color: rgb(58, 158, 63);
}

.ref-winner.has-winner .panel-title,
.ref-winner.has-winner .ref-winner-name {
    color: white;
}

.ref-actions {
    display: flex;
    gap: 12px;
}

.ref-rules {
    width: 420px;
    flex-shrink: 0;
}

/* ref panel v2 (wireframe layout) */

.refwrap {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    /* capped and centred: on a wide monitor the panel used to stretch edge to edge
       and every box looked mostly empty */
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 24px;
    align-items: flex-start;
}

/* below ~1000px the controller would get squeezed by the rules column, so it keeps a
   floor width and the rules card wraps underneath instead */
.refleft {
    flex: 1;
    min-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* the rules gfx is a portrait card, so it sizes to its content rather than reserving
   a tall empty box when no gfx is configured */
.refright {
    flex: 1 1 340px;
    max-width: 400px;
}

.refbox {
    background-color: rgb(90, 30, 43);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* game on the left, ident + close pushed to the right edge */
.ref-gameselect {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ref-gameselect .select {
    width: auto;
    min-width: 180px;
    margin-right: auto;
}

.ref-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.ref-vs .select {
    flex: 1;
    max-width: 240px;
}

.ref-vs .vs {
    font-weight: 700;
    color: rgb(255, 186, 198);
}

.refrow {
    display: flex;
    gap: 18px;
}

.refrow .refbox {
    flex: 1;
    min-width: 0;
}

/* every box in the column is full width now; the winner and action row just centre
   their own contents instead of being narrower than their neighbours */
.ref-winner {
    text-align: center;
}

.ref-actions {
    justify-content: center;
}

.ref-winner-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}

.ref-gfx {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* live match card (public) */

.match-card {
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    padding: 16px 20px;
    max-width: 700px;
    box-shadow: 0 4px 10px rgba(65, 42, 61, 0.479);
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.match-side {
    flex: 1;
    text-align: center;
}

.match-side .team-name {
    font-size: 18px;
    font-weight: 700;
    color: rgb(255, 186, 198);
    margin: 0 0 4px 0;
}

.match-side .score {
    font-size: 34px;
    font-weight: 700;
    margin: 0;
}

.match-side .wins {
    font-size: 12px;
    color: rgb(243, 225, 225);
}

.match-side .players {
    font-size: 12px;
    color: rgb(243, 225, 225);
    margin-top: 6px;
}

.match-vs {
    font-weight: 700;
    color: rgb(255, 186, 198);
}

.match-meta {
    text-align: center;
    font-size: 12px;
    color: rgb(255, 186, 198);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-winner-banner {
    text-align: center;
    margin-top: 10px;
    padding: 6px;
    border-radius: 8px;
    background-color: rgb(58, 158, 63);
    font-weight: 700;
}

/* one card per open ref session; they stack until there is room to sit side by side */
.live-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.live-list .match-card {
    max-width: none;
}

/* the session ident, so a viewer can tell two simultaneous matches apart */
.match-ident {
    font-family: ui-monospace, Consolas, monospace;
    letter-spacing: 1px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 1px 6px;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.6);
}

/* calendar */

.cal-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 20px;
}

.cal-month {
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 4px 10px rgba(65, 42, 61, 0.479);
}

.cal-month h3 {
    color: rgb(231, 121, 182);
    margin: 0 0 10px 0;
}

.cal-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cal-grid th {
    font-size: 11px;
    text-transform: uppercase;
    padding: 4px;
    color: rgb(255, 186, 198);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cal-cell {
    border: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
    height: 78px;
    padding: 4px 5px;
    font-size: 12px;
}

.cal-cell.out {
    background-color: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.25);
}

.cal-cell.clickable:hover {
    background-color: rgba(231, 121, 182, 0.15);
    cursor: pointer;
}

.cal-daynum {
    font-weight: 600;
    margin-bottom: 3px;
}

.cal-event {
    display: block;
    width: 100%;
    border-radius: 5px;
    padding: 1px 5px;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    color: rgb(25, 15, 20);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-event:hover {
    outline: 1px solid white;
}

/* modal */

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
}

.modal-backdrop.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background-color: rgb(56, 39, 40);
    border: 1px solid rgb(90, 30, 43);
    border-radius: 10px;
    padding: 20px 24px;
    width: 380px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.modal .field {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal .field label {
    font-size: 12px;
    color: rgb(255, 186, 198);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.bracket-frame {
    width: 100%;
    height: calc(100vh - 60px);
    border: none;
    display: block;
}

/* full-page single-month calendar */

.cal-page {
    margin: 20px;
}

.cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 14px;
}

.cal-title {
    margin: 0;
    min-width: 260px;
    text-align: center;
}

.cal-arrow {
    color: rgb(255, 186, 198);
    font-size: 22px;
    padding: 6px 14px;
    border-radius: 10px;
    background-color: rgb(90, 30, 43);
}

.cal-arrow:hover {
    color: white;
    background-color: rgb(122, 35, 42);
}

.cal-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.cal-big {
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(65, 42, 61, 0.479);
}

.cal-big .cal-cell {
    height: calc((100vh - 240px) / 6);
    min-height: 90px;
    font-size: 13px;
}

.cal-big .cal-event {
    font-size: 12px;
    padding: 2px 6px;
}

.cal-cell.today {
    background-color: rgba(231, 121, 182, 0.22);
    outline: 2px solid rgb(231, 121, 182);
    outline-offset: -2px;
}

.cal-cell.today .cal-daynum {
    color: rgb(255, 186, 198);
}

.today-chip {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: rgb(231, 121, 182);
    color: rgb(40, 15, 25);
    border-radius: 4px;
    padding: 1px 4px;
    vertical-align: middle;
}

/* registration loading overlay */

.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 300;
}

.loading-overlay.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-box {
    text-align: center;
}

.spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px auto;
    border: 5px solid rgba(255, 186, 198, 0.25);
    border-top-color: rgb(231, 121, 182);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: rgb(255, 186, 198);
    font-size: 16px;
    font-weight: 600;
}

/* modal buttons: same size for cancel/submit */

.modal-actions .button {
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
}

/* bigger, clearer calendar arrows */

.cal-arrow {
    font-size: 16px;
    font-weight: 700;
    padding: 10px 22px;
    border: 2px solid rgb(231, 121, 182);
    background-color: rgb(90, 30, 43);
    color: rgb(255, 186, 198);
    border-radius: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cal-arrow:hover {
    background-color: rgb(231, 121, 182);
    color: rgb(40, 15, 25);
}

/* ref panel scoring buttons + log */

.ref-cap {
    color: rgb(243, 225, 225);
    font-size: 13px;
    white-space: nowrap;
    margin-right: auto;
}

/* the win buttons used to squeeze in beside the counter and wrap into a ragged
   second column, so they get their own full-width row underneath it */
.rl-wins {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-basis: 100%;
}

.rl-wins:empty {
    display: none;
}

.ref-sublabel {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgb(255, 186, 198);
    margin: 12px 0 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 8px;
}

.ref-addl {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ref-log {
    max-height: 300px;
    overflow-y: auto;
}

.log-list {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
}

.log-line {
    padding: 3px 6px;
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 2px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0 4px 4px 0;
}

.log-time {
    color: rgba(255, 255, 255, 0.45);
    margin-right: 6px;
}

.log-points { border-left-color: rgb(58, 158, 63); }
.log-info { border-left-color: rgb(95, 143, 212); }
.log-warn { border-left-color: coral; }
.log-error { border-left-color: rgb(221, 111, 111); }
.log-undone { border-left-color: rgba(255, 255, 255, 0.15); opacity: 0.5; text-decoration: line-through; }

.log-undo {
    background: none;
    border: 1px solid rgba(255, 186, 198, 0.5);
    color: rgb(255, 186, 198);
    border-radius: 4px;
    font-size: 10px;
    padding: 0 5px;
    cursor: pointer;
    margin-left: 6px;
}

.log-undo:hover {
    background-color: rgb(231, 121, 182);
    color: rgb(40, 15, 25);
}

.clickable-row:hover {
    cursor: pointer;
    outline: 1px solid rgb(231, 121, 182);
    outline-offset: -1px;
}

/* staff accept/reject buttons */

.decide-btn {
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 14px;
    cursor: pointer;
    color: white;
}

.decide-btn.accept { background-color: rgb(58, 158, 63); }
.decide-btn.accept:hover { background-color: rgb(74, 190, 80); }
.decide-btn.reject { background-color: rgb(139, 0, 0); }
.decide-btn.reject:hover { background-color: rgb(178, 34, 34); }

/* events on spillover days (prev/next month) stay visible but dimmed */

.cal-cell.out .cal-event {
    opacity: 0.45;
}

.cal-cell.out .cal-event:hover {
    opacity: 1;
}

/* save toast for no-reload form submissions */

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    color: white;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 400;
}

.toast.ok { background-color: rgb(58, 158, 63); }
.toast.err { background-color: rgb(139, 0, 0); }

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- forum post (bbcode) ---------- */

.forum-wrap {
    display: flex;
    justify-content: center;
}

.forum-post.bb {
    max-width: 900px;
    width: 100%;
    line-height: 1.65;
}

.bb .bb-list { margin: 6px 0 6px 20px; }
.bb .bb-img { max-width: 100%; border-radius: 8px; }
.bb .bb-heading { color: rgb(231, 121, 182); margin: 12px 0 6px 0; }
.bb .bb-quote {
    border-left: 3px solid rgb(231, 121, 182);
    margin: 8px 0; padding: 6px 12px;
    background: rgba(0,0,0,0.2); border-radius: 0 6px 6px 0;
}
.bb .bb-quote cite { display: block; font-weight: 700; color: rgb(255,186,198); font-style: normal; }
.bb .bb-box {
    background: rgba(0,0,0,0.22); border-radius: 8px; padding: 8px 12px; margin: 8px 0;
}
.bb .bb-box summary { cursor: pointer; color: rgb(255,186,198); font-weight: 600; }
.bb .bb-spoiler { background: #000; color: #000; border-radius: 3px; }
.bb .bb-spoiler:hover { color: inherit; }
.bb a { color: #f8b1cf; text-decoration: underline; }
.bb .bb-notice {
    border: 1px solid rgb(231,121,182); border-radius: 8px; padding: 8px 12px; margin: 8px 0;
}

/* ---------- leaderboard ---------- */

.lb {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 760px;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.lb-row.lb-top { background-color: rgb(66, 52, 74); }

.lb-pos {
    font-size: 18px;
    font-weight: 700;
    width: 34px;
    text-align: center;
    color: rgb(243, 225, 225);
    flex-shrink: 0;
}

.lb-pos-1 { color: #f5d76e; }
.lb-pos-2 { color: #d7d7d7; }
.lb-pos-3 { color: #d9a06b; }

.lb-main { flex: 1; min-width: 0; }

.lb-team {
    font-weight: 700;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-bar {
    height: 6px;
    background: rgba(0,0,0,0.35);
    border-radius: 3px;
    overflow: hidden;
}

.lb-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgb(231,121,182), rgb(255,186,198));
    border-radius: 3px;
}

.lb-breakdown {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: rgb(243, 225, 225);
    flex-shrink: 0;
}

.lb-breakdown span { display: inline-flex; align-items: center; gap: 4px; }
.lb-ico { width: 13px; height: 13px; filter: brightness(0) invert(1); opacity: 0.8; }

.lb-total {
    font-size: 20px;
    font-weight: 700;
    color: rgb(255, 186, 198);
    min-width: 58px;
    text-align: right;
    flex-shrink: 0;
}

/* ---------- player cards ---------- */

.count-pill {
    font-size: 12px;
    font-weight: 600;
    color: rgb(255, 186, 198);
    background: rgb(90, 30, 43);
    border-radius: 20px;
    padding: 3px 10px;
    vertical-align: middle;
    margin-left: 8px;
}

.pcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.pcard {
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.pcard:hover { background-color: rgb(66, 52, 74); }

.pcard-body { min-width: 0; flex: 1; }

.pcard-name {
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcard-sub {
    font-size: 11px;
    color: rgb(243, 225, 225);
    display: flex;
    gap: 6px;
    margin-bottom: 5px;
}

.pcard-rank { color: rgb(255, 186, 198); font-weight: 600; }
.pcard-osu { opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pcard-games { display: flex; gap: 6px; }

/* game icon + hover stat card */

.gi { position: relative; display: inline-flex; }

.gi-img {
    width: 17px;
    height: 17px;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    cursor: default;
}

.gi:hover .gi-img { opacity: 1; }

.gi-card {
    display: none;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    background: rgb(41, 29, 37);
    border: 1px solid rgb(90, 30, 43);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 190px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.6);
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}

.gi:hover .gi-card { display: block; }

.gi-card-title {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: rgb(255, 186, 198);
    margin-bottom: 3px;
}

.gi-card span { display: block; }

/* ---------- teams ---------- */

.team-block { margin-bottom: 22px; }

.team-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}

.team-head .team-name {
    font-size: 18px;
    font-weight: 700;
    color: rgb(231, 121, 182);
}

.team-count { font-size: 12px; color: rgb(243, 225, 225); }

/* ---------- rules page ---------- */

.rules-layout {
    display: flex;
    gap: 24px;
    margin: 20px;
    align-items: flex-start;
}

.rules-toc {
    position: sticky;
    top: 20px;
    width: 240px;
    flex-shrink: 0;
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.rules-toc a {
    color: rgb(243, 225, 225);
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 5px;
}

.rules-toc a:hover { background: rgb(90, 30, 43); color: rgb(255, 186, 198); }

.rules-body { flex: 1; min-width: 0; max-width: 900px; }

.rules-section {
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    padding: 16px 22px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    scroll-margin-top: 20px;
}

.rules-section h2 {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.rules-list {
    margin: 0;
    padding-left: 22px;
    line-height: 1.7;
    counter-reset: rule;
    list-style: none;
}

.rules-list > li {
    counter-increment: rule;
    position: relative;
    margin-bottom: 5px;
}

.rules-list > li::before {
    content: counter(rule) ".";
    position: absolute;
    left: -22px;
    color: rgb(255, 186, 198);
    font-weight: 600;
}

.rules-list > li.rules-sub {
    counter-increment: none;
    margin-left: 18px;
    font-size: 13px;
    color: rgb(228, 214, 220);
}

.rules-list > li.rules-sub::before {
    content: "-";
    left: -14px;
    opacity: 0.6;
}

@media (max-width: 900px) {
    .rules-layout { flex-direction: column; }
    .rules-toc { position: static; width: 100%; }
}

/* ---------- landing page two-column layout ---------- */

.home-layout {
    display: flex;
    gap: 20px;
    margin: 20px;
    align-items: flex-start;
}

.home-left {
    flex: 1.05;
    min-width: 0;
    position: sticky;
    top: 20px;
}

.home-left .forum-post.bb {
    max-width: none;
    width: 100%;
}

.home-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home-block h2 {
    margin: 0 0 10px 0;
}

.home-right .lb,
.home-right .lb-table,
.home-right .match-card {
    max-width: none;
}

.home-right .pcard-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

@media (max-width: 1100px) {
    .home-layout { flex-direction: column; }
    .home-left { position: static; width: 100%; }
}

/* ---------- rules page image column ---------- */

.rules-gfx-col {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 20px;
}

.rules-gfx-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease;
}

.rules-gfx-img:hover {
    transform: scale(1.02);
}

@media (max-width: 1200px) {
    .rules-gfx-col { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; }
    .rules-gfx-img { max-width: 320px; }
}

/* the Marvel Rivals mark is full-colour, so it keeps its own palette */

.gi-mr .gi-img {
    filter: none;
    opacity: 0.75;
}

.gi-mr:hover .gi-img {
    opacity: 1;
}

/* ---------- image lightbox (rules page) ---------- */

.rules-gfx-img {
    cursor: zoom-in;
}

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 500;
    padding: 40px;
    cursor: zoom-out;
}

.lightbox.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 26px;
    background: none;
    border: none;
    color: rgb(255, 186, 198);
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    padding: 0 10px;
}

.lightbox-close:hover {
    color: white;
}

/* ================================================================
   Responsive / mobile
   ================================================================ */

/* nav shell: the burger is desktop-hidden, links wrap once there are many */

.nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    line-height: 0;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.nav-end {
    margin-left: auto;
}

/* the burger glyph, drawn from one span + two pseudo elements */

.nav-burger,
.nav-burger::before,
.nav-burger::after {
    display: block;
    width: 22px;
    height: 2px;
    background-color: white;
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-burger::before,
.nav-burger::after {
    content: "";
    position: relative;
}

.nav-burger::before { top: -7px; }
.nav-burger::after  { top: 5px; }

nav.nav-open .nav-burger { background-color: transparent; }
nav.nav-open .nav-burger::before { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-burger::after  { transform: translateY(-5px) rotate(-45deg); }

/* the calendar's phone view; the grid stays authoritative on desktop */

.cal-agenda { display: none; }

.cal-agenda-add {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    margin-bottom: 12px;
}

.agenda-day {
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.agenda-day.today {
    outline: 2px solid rgb(231, 121, 182);
    outline-offset: -2px;
}

.agenda-date {
    font-weight: 700;
    font-size: 13px;
    color: rgb(255, 186, 198);
    margin-bottom: 8px;
}

.agenda-day .cal-event {
    white-space: normal;
    font-size: 13px;
    padding: 9px 11px;
    margin-bottom: 6px;
}

.agenda-empty {
    color: rgb(243, 225, 225);
    opacity: 0.7;
    text-align: center;
    padding: 24px 0;
}

@media (max-width: 820px) {

    /* ---- nav becomes a drawer ---- */

    nav {
        padding: 10px 14px;
        gap: 0;
        flex-wrap: wrap;
        align-items: center;
    }

    .nav-toggle { display: inline-flex; }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-top: 8px;
    }

    nav.nav-open .nav-links { display: flex; }

    .nav-links a {
        margin-right: 0;
        padding: 13px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .nav-end { margin-left: 0; }

    /* ---- header: tighter padding, colour is already flat site-wide ---- */

    .header {
        padding: 16px 16px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    }

    .p-head { font-size: 22px; }
    .head-p { font-size: 13px; margin: 4px 0 0 0; }

    /* ---- global spacing ---- */

    .section,
    .content,
    .cal-page,
    .cal-wrap,
    .home-layout,
    .refwrap,
    .rules-layout {
        margin-left: 12px;
        margin-right: 12px;
    }

    .pool-toolbar {
        flex-direction: column;
        align-items: stretch;
        margin: 12px;
    }

    .panel { width: 100%; }

    .add-map,
    .sort-filter,
    .game-row,
    .ref-actions,
    .modal-actions,
    .ref-winner-btns {
        flex-wrap: wrap;
    }

    h2 { font-size: 19px; }

    /* 16px keeps iOS from zooming the viewport on focus */
    .input,
    .select,
    .button,
    textarea {
        font-size: 16px;
    }

    .button { padding: 9px 14px; }

    /* ---- tables scroll sideways instead of squashing ---- */

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        margin-bottom: 20px;
    }

    /* hover cards can't be reached by touch and overflow the viewport */
    .hover-card,
    .gi-card { display: none !important; }

    /* ---- calendar: grid out, agenda in ---- */

    .cal-grid { display: none; }
    .cal-agenda { display: block; }

    .cal-nav { gap: 10px; }
    .cal-title { min-width: 0; flex: 1; font-size: 18px; }
    .cal-arrow { font-size: 16px; padding: 8px 12px; }

    /* ---- ref panel stacks ---- */

    .refwrap,
    .refrow,
    .ref-vs,
    .ref-layout,
    .ref-tallies {
        flex-direction: column;
        gap: 12px;
    }

    .refwrap { margin: 12px; padding: 0; }
    .ref-gameselect,
    .ref-winner,
    .ref-rules { width: 100%; }
    .ref-vs { padding: 16px; }
    .ref-vs .select { width: 100%; max-width: none; }
    .ref-gameselect .select { width: 100%; margin-right: 0; }
    /* .refwrap turns into a column here, so a flex-basis would become a height */
    .refleft { min-width: 0; }
    .refright { flex: 1 1 auto; width: 100%; max-width: none; }

    .ref-counter { flex-wrap: wrap; gap: 10px; }
    .ref-value { font-size: 30px; }
    .ref-counter .button { padding: 10px 18px; }
    .ref-addl,
    .rl-wins { display: flex; flex-wrap: wrap; gap: 6px; }

    /* ---- modals fit the screen ---- */

    .modal {
        width: 100%;
        margin: 12px;
        padding: 16px;
        max-height: 88vh;
        overflow-y: auto;
    }

    .modal-actions .button { padding: 10px 16px; }

    /* ---- misc components ---- */

    .stat-row { flex-wrap: wrap; }
    .dash-split { grid-template-columns: 1fr; }
    .lb-row { flex-wrap: wrap; gap: 8px; }
    .lb-breakdown { font-size: 11px; }
    .pcard-grid,
    .home-right .pcard-grid { grid-template-columns: 1fr; }
    .match-teams { gap: 8px; }
    .match-side .team-name { font-size: 15px; }
    .bracket-frame { height: calc(100vh - 150px); min-height: 480px; }
    .rules-gfx-col { width: 100%; }
    .forum-post.bb { line-height: 1.6; }
}

@media (max-width: 480px) {
    .p-head { font-size: 19px; }
    .header { padding: 14px 12px; }
    .section,
    .content,
    .cal-page,
    .home-layout,
    .refwrap { margin-left: 8px; margin-right: 8px; }
    .cal-title { font-size: 16px; }
    .cal-arrow { padding: 8px 10px; font-size: 14px; }
    .ref-winner-btns .button { width: 100%; }
}

/* ---------- leaderboard per-game breakdown ---------- */

.lb-breakdown span.lb-zero {
    opacity: 0.35;
}

/* ---------- match history cards ---------- */

.mh-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 760px;
}

.mh-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: rgb(57, 47, 65);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.mh-game {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 132px;
    flex-shrink: 0;
    font-size: 12px;
    color: rgb(255, 186, 198);
    font-weight: 600;
}

.mh-ico {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    flex-shrink: 0;
}

.mh-teams {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mh-team {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mh-team.mh-right { text-align: right; }

.mh-team.mh-win {
    color: rgb(161, 233, 161);
}

.mh-score {
    font-weight: 700;
    font-size: 15px;
    color: rgb(255, 186, 198);
    white-space: nowrap;
    flex-shrink: 0;
}

.mh-dash { opacity: 0.5; }

.mh-sets {
    font-size: 12px;
    color: rgb(243, 225, 225);
    opacity: 0.75;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 820px) {
    .mh-row {
        flex-wrap: wrap;
        gap: 6px 12px;
    }
    .mh-game { width: auto; }
    .mh-teams { flex-basis: 100%; order: 3; }
    .mh-sets { margin-left: auto; }
    .lb-breakdown { flex-wrap: wrap; gap: 8px; }
}

/* ---- drill-down modals (match breakdown + team breakdown) ---- */

.modal-detail {
    width: 620px;
    max-width: calc(100vw - 32px);
    max-height: 84vh;
    overflow-y: auto;
}

.modal-detail h2 {
    margin-top: 0;
    margin-bottom: 4px;
}

.modal-meta {
    color: rgb(255, 186, 198);
    margin: 0 0 6px 0;
    font-size: 13px;
}

/* rows that open a modal */

.lb-click,
.mh-click {
    cursor: pointer;
}

.lb-click:hover,
.mh-click:hover {
    background-color: rgb(74, 50, 62);
}

.lb-click:focus-visible,
.mh-click:focus-visible {
    outline: 2px solid rgb(231, 121, 182);
    outline-offset: -2px;
}

/* per-game bar chart inside the team modal */

.tb-chart {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 4px;
}

.tb-row {
    display: grid;
    grid-template-columns: 168px 1fr 52px;
    align-items: center;
    gap: 10px;
}

.tb-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: rgb(255, 214, 224);
}

.tb-bar {
    background-color: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.tb-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(231, 121, 182), rgb(255, 186, 198));
    min-width: 2px;
}

.tb-value {
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    color: rgb(255, 186, 198);
}

.tb-row.tb-zero .tb-label,
.tb-row.tb-zero .tb-value {
    opacity: 0.4;
}

.tb-row.tb-zero .tb-bar span {
    background: rgba(255, 255, 255, 0.12);
}

.tb-empty {
    color: rgb(200, 170, 180);
    font-size: 13px;
    margin: 0;
}

/* background refresh job status next to the "refresh all stats" button */

.refresh-status {
    font-size: 12px;
    margin-left: 10px;
    align-self: center;
}

.refresh-status.busy { color: rgb(255, 214, 150); }
.refresh-status.ok   { color: rgb(150, 226, 168); }
.refresh-status.err  { color: rgb(240, 140, 150); }

@media (max-width: 820px) {
    .tb-row {
        grid-template-columns: 110px 1fr 40px;
        gap: 7px;
    }

    .tb-label {
        font-size: 11px;
        gap: 5px;
    }

    .tb-value { font-size: 12px; }
    .modal-detail { padding: 16px 14px; }
}

/* team roster inside the leaderboard drill-down */

.tb-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 4px;
}

.tb-player {
    display: flex;
    align-items: center;
    gap: 7px;
    background-color: rgba(0, 0, 0, 0.22);
    border-radius: 8px;
    padding: 5px 10px 5px 5px;
}

.tb-player img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.tb-player-name {
    font-size: 13px;
    font-weight: 600;
}

.tb-player-osu {
    font-size: 11px;
    color: rgb(255, 186, 198);
}

/* ref panel: open-session switcher */

/* #panel wraps the whole controller, so its children are no longer flex items of
   .refleft and it has to carry the column gap itself. JS shows it with display:flex. */
#panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.session-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.session-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 186, 198, 0.18);
    border-radius: 8px;
    padding: 8px 11px;
    color: rgb(243, 225, 225);
    font-family: inherit;
    cursor: pointer;
}

.session-row:hover {
    border-color: rgb(231, 121, 182);
}

/* the session being controlled right now */
.session-row.active {
    background-color: rgb(120, 40, 58);
    border-color: rgb(255, 186, 198);
}

.session-ident {
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 700;
    color: rgb(255, 186, 198);
    letter-spacing: 1px;
}

.session-teams {
    font-size: 13px;
    font-weight: 600;
}

.session-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.session-new {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.session-new .select {
    width: auto;
}

/* the ident a ref pastes into the OBS overlay URL -- click copies it */
.ident-chip {
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 1px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgb(255, 186, 198);
    color: rgb(255, 186, 198);
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.ident-chip:hover {
    background-color: rgb(231, 121, 182);
    color: rgb(40, 15, 25);
}

.ident-chip.copied,
.player-card.copied {
    background-color: rgb(58, 158, 63);
    border-style: solid;
    border-color: rgb(58, 158, 63);
    color: rgb(255, 255, 255);
}

/* roster chips inside each points box */

.player-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.player-card {
    display: flex;
    align-items: center;
    gap: 7px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 186, 198, 0.18);
    border-radius: 8px;
    padding: 4px 10px 4px 4px;
    color: rgb(243, 225, 225);
    font-family: inherit;
    cursor: pointer;
    /* the copied state swaps in plain text, so keep the chip from collapsing */
    min-height: 32px;
}

.player-card:hover {
    border-color: rgb(231, 121, 182);
}

.player-card img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.player-card-name {
    font-size: 13px;
    font-weight: 600;
}

.player-card-ign {
    font-size: 11px;
    color: rgb(255, 186, 198);
}

.ref-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 6px;
}

.ref-empty {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    margin: 6px 0;
}

/* staff list: same roster chips as the ref panel, with the revoke action beside each */

.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    max-width: 820px;
}

.staff-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* the chip takes the slack so every revoke button lines up */
.staff-cell .player-card {
    flex: 1;
    justify-content: flex-start;
}

.panel-hint {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    margin: 0;
}