.league-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100vw, 900px), auto));
    gap: 20px;
	background: #f4f7fc;
	line-height: 1em;
	justify-content: center;
}

.league-div {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
	/*width: 100%;*/
	max-width: min(100vw, 900px);
}

.league-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* keeps it responsive */
  gap: 10px;
  padding: 10px 0;
/*  border-bottom: 1px solid #e5e5e5;*/
}

.league-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.league-header .league-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.league-header .league-links a {
  text-decoration: underline dotted;
  font-size: 0.9rem;
	color: blue;
	margin-right: 12px;
}

.league-header .league-links a:hover {
  text-decoration: underline;
}

.league-timeline {
  margin: 10px;
  padding: 0 20px;
  height: 160px;
}

.league-div h2 {
	color: #0b3b5c;
	font-size: 1.5rem;
	font-weight: 650;
}

.league-content {
    display: flex;
    flex-direction: row;
	flex-wrap: wrap; /* keeps it responsive */
    gap: 15px;
}

@media (max-width: 768px) {
    .league-content {
        grid-template-columns: 1fr;
    }
}

        .league-panel {
            background: #f9fcff;
            /*background: #e9ecff;*/
            border-radius: 22px;
            padding: 1.4rem 1.5rem;
            border: 1px solid #dfecf5;
			flex: 1 1 400px;
        }
        .standings-table, .players-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
			table-layout: fixed;
			margin-bottom: 20px;
        }
		.players-table tbody tr:nth-child(even) {
			background: #fff;
		}
		.players-table tbody tr:nth-child(2n+3) {
			background: #eee;
		}
		.standings-table tbody tr:nth-child(even) {
			background: #fff;
		}
		.standings-table tbody tr:nth-child(2n+3) {
			background: #eee;
		}
		.match-table .match-body .match-row:nth-child(odd) {
			background: #fff;
		}
		.match-table .match-body .match-row:nth-child(even) {
			background: #f7f7f7;
			background: #eee;
		}
        .standings-table th, .players-table th {
            text-align: center;
            color: #345d81;
            font-weight: 600;
            border-bottom: 2px solid #cbddee;
            padding-bottom: 0.5rem;
        }
		.standings-table th,  .players-table th {
			 background: #0b3b5c;
			 color: #fff;
			 padding: 0.5rem 0;
        }
        .standings-table td, .players-table td {
            padding: 0.2rem 0.2rem;
            border-bottom: 1px solid #d9e7f2;
			/*white-space: nowrap;*/
			/*overflow: hidden;*/
			text-overflow: ellipsis;
        }
        .standings-table tr:last-child td, .players-table tr:last-child td {
            border-bottom: none;
        }
		
		div.points {
		  display: grid;
		  grid-template-columns: 50% 50%;
		  align-items: center;
		  width: 100%;
		  font-variant-numeric: tabular-nums;
		}

		div.points .int {
		  text-align: right;
		}

		div.points .frac {
		  text-align: left;
		}
		
/***********************************/

.timeline {
  position: relative;
  top: 60px;
  overflow: visible;
}

.timeline-line {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 4px;
  background: #e5e5e5;
  border-radius: 2px;
}

.timeline-point {
  position: absolute;
  top: 60px;
  transform: translateX(-50%);
  text-align: center;
  transition: left 0.5s ease; /* Smooth horizontal move */
}

/* vertical line */
.timeline-connector {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 2px;
  height: 60px;
  background: #ccc;
  transform: translateX(-50%);
  transition: left 0.5s ease; /* Animate vertical line with badge */
}
/* date above line */
.timeline-date {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem !important;
  white-space: nowrap;
  transition: left 0.5s ease; /* Animate date moving with badge */
  
  /*display: inline-block;*/
  line-height: 1;
  border: 1px solid #343a40;
  border-radius: 50rem;
  color: #212529;
  background-color: #ffc107;
  /*background-color: #ffffbf;*/
  padding: 0.25em 0.4em;
  font-weight: 700;  
  text-align: center;
}
.timeline-date1 {
  top: -83px;
}
.timeline-date2 {
  top: -60px;
}


/* badge */
.timeline-badge {
  width: 36px;
  height: 36px;
  background: #f5f5f5bf;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  position: absolute;
  left: -18px;
  z-index: 2;
  cursor:pointer;
   /* transition: left 0.5s ease, background 0.3s ease; badge horizontal + hover effect */
}
@media (max-width: 600px) {
	.timeline-badge1 {
	  top:0px;
	}
	.timeline-badge2 {
	  top:30px;
	}
	.league-timeline {
		height: 180px;
	}

}
.timeline-point:hover .timeline-badge-played::after, 
.timeline-point:hover .timeline-badge,
.timeline-badge-selected.timeline-badge-played::after, 
.timeline-badge-selected {
  background: #333;
  color: white;
  border-color: #333;
}
.timeline-point:hover .timeline-badge span {
  color: white;
}

.timeline-badge-played {
  --thickness: 3px;
  --fill: 100%; /* default full circle */
  border: 0;
  background:
    conic-gradient(
      #000 var(--fill),
      #f00 0
    );
}
/* donut hole */
.timeline-badge-played::after {
  content: "";
  position: absolute;
  width: calc(100% - var(--thickness) * 2);
  height: calc(100% - var(--thickness) * 2);
  background: #fff; /* or card background */
  border-radius: 50%;
/*   transition: left 0.5s ease, background 0.3s ease; badge horizontal + hover effect */
}

.timeline-badge span {
  position: relative;
  z-index: 1;
/*  color: #007bff; */
}


/* ===== TODAY ===== */

.timeline-today {
  position: absolute;
  top: 60px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

/* small red circle on the timeline */
.timeline-today-circle {
  top: -6px;
  position: relative;
  width: 12px;
  height: 12px;
  background: #e53935;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

/* badge above the line */
.timeline-today .timeline-date {
  color: #fff;
  background-color: #dc3545;
  border: 0;
}

.timeline-year {
  position: absolute;
  top: 60px;
  transform: translateX(-50%);
  text-align: center;
  /* z-index: 5;  above other badges */
}

.timeline-year .timeline-connector {
  position: absolute;
  top: -90px;
  left: 50%;
  width: 2px;
  height: 90px;
  background: #bbb;
  transform: translateX(-50%);
}

.timeline-year .timeline-year-badge {
	position: relative;
  top: -120px;
  padding: 5px 20px;
  color: #0b3b5c;
  border: 1px solid #0b3b5c;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/***********************************/


.young-player {
  --color: #8fff8f;
  position: relative;
  /*background-color: var(--color);*/
/*	border-bottom: 5px solid var(--color);*/
	/*
	padding: 0 0.4em;
	margin: 0 -0.4em;*/
}


.young-player::after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: 0px;
  width: 100%;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color);
}


.team-marked1 {
	--color: #8fffff4f;
}
.team-marked2 {
	--color: #8fff8f4f;
}
.team-marked3 {
	--color: #ffff8f4f;
}
.team-marked4 {
	--color: #ff8fff4f;
}
.team-marked5 {
	--color: #ff8f8f4f;
}
.team-marked6 {
	--color: #8f8fff4f;
}
.team-marked1, .team-marked2, .team-marked3, .team-marked4, .team-marked5, .team-marked6 {
	position: relative;
	padding: 0.2em 0.4em;
	margin: -0.35em -0.55em;
	border-radius: 10px;

	background-color: var(--color);
	border: 0.15em solid var(--color);
/*
	padding: 0 0.4em;
	margin: -0.2em -0.4em;
*/	
}
/*
.team-marked1::after, .team-marked2::after, .team-marked3::after, .team-marked4::after, .team-marked5::after, .team-marked6::after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: 0px;
  width: 100%;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color);
}
*/

.badge-number, .badge-inline-number,
.badge-lg-number, .badge-inline-lg-number {
	display: inline-block;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;	
}
.badge-number, .badge-inline-number {
	padding: 0.25em 0.6em;
	font-size: 0.85em;
}
.badge-number {
	margin: -0.15em -0.6em;
}
.badge-lg-number, .badge-inline-lg-number {
	padding: 0.25em 0.4em;
	font-size: 1em;
}
.badge-lg-number {
	margin: -0.25em -0.4em;
}

.col-team {
	cursor: pointer;
}

.col-slash {
	color: #00000040;
}

.player-cell {
  display: grid;
  grid-template-columns: 8ch 1fr 8ch;
  align-items: center;
  gap: 6px;
}
.player-cell.player-with-team {
  grid-template-columns: 8ch 0.8fr 8ch 1fr;
}

@media (max-width: 600px) {
	.league-div {
		padding: 4px;
	}

	.players-table {
		font-size: 0.8rem;
	}
	
	.players-table.league-overview {
		font-size: 0.95rem;
	}
	
  .player-cell {
	text-align: center;
	display: revert;
	padding: 0.5em !important;
  }
/*  
.player-cell.player-with-team {
  display: grid;
  grid-template-columns: 4ch 1fr 5ch;
  gap: 0;
}
  .player-cell .player-team {
        grid-column: 1 / -1;
        justify-self: center;
    }
.player-cell span {
  padding: 0;
}
*/
/*
.player-with-team {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem;
}

.player-with-team .player-title {
    flex: 0 0 4ch;
}

.player-with-team span:nth-child(3) {
    flex: 0 0 4ch;
    text-align: right;
	white-space: nowrap;
}

.player-with-team .player-name {
    flex: 1 1 auto;
    min-width: 0;
}

.player-with-team .player-team {
    flex: 1 0 auto;
    text-align: center;
}
*/
	
  .league-panel {
	  padding: 1.4rem 0rem;
	  border:0;
	  /*background: revert;*/
  }
 /* 
	.player-name {
	  background: #efefef;
	  padding: 0.2em;
	  margin: -0.2em;
	  border-radius: 0.5em;
	}
*/	
}

.player-title {
  text-align: center;
}
.player-name {
  font-weight: 600;
}
.player-team {
  display: block;
}

.positive {
	color:green;
}
.negative {
  color: red;
}  
.positive::before, .negative::before {
	position:relative;
	/*left: -4px;*/
}
.positive-lg::before, .negative-lg::before,
.positive-sm::before, .negative-sm::before {
	position:relative;
	/*left: -4px;*/
	padding: 2px 4px;
	border-radius: 50%;
}
.positive-sm::before {
	color:green;
	background: #fff;
	border: 1px solid green;
}
.negative-sm::before {
	color:red;
	background: #fff;
	border: 1px solid red;
}
.positive-lg::before {
	color:#fff;
	background: green;
}
.negative-lg::before {
	color:#fff;
	background: red;
}




/***********************************/

  
.rounds-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Match card */
.match-table {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-size: 0.95rem;
}

:root {
  --board-col: 60px;
  --mobile-board-col: 3ch;
  --result-col: 80px;
}

/* Header row */
.match-header {
  display: grid;
  grid-template-columns:
    var(--board-col)
    1fr
    var(--result-col)
    1fr;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
  background: #0b3b5c;
  color: #fff;
}

.match-header:hover {
  /*background: #f5f5f5;*/
}

/* Individual cells */
.match-header .match-num, .match-row .m-board {
  font-weight: bold;
  text-align: center;
  background: #0b3b5c;
  color: #fff;
}
.match-row .m-board {
	align-self:stretch;
	align-content: center;
}

.match-header .m-team {
  font-weight: 500;
	text-align: center;
}

.match-header .match-result {
  font-weight: bold;
  text-align: center;
  min-width: 60px;
  background: #fff;
  color: #000;
  padding: 4px 10px;
  border-radius: 20px;
}

.match-header .match-result-notplayed {
  background: #fff;
  color: #222;
  border: 1px solid #888;
}


@media (max-width: 600px) {
  
  .rounds-body {
	  gap:1px;
  }
  .match-header {
    grid-template-columns: var(--mobile-board-col) 1fr;
    text-align: center;
	align-items: center;
	padding: 8px 2px;
	gap: 0px;
  }

  .match-header > :not(.match-num) {
    grid-column: 2;
	justify-self: center;
	/*display: block;*/
  }
  
  .match-header > div {
    /*padding: 2px 0;*/
	text-align: center;
  }
  
  .match-header .col-team {
	white-space: nowrap;
  }


}


/***********************************/

.match-table .match-row {
  display: grid;
  grid-template-columns:
    var(--board-col)
    1fr
    var(--result-col)
    1fr;
  align-items: center;
  gap: 8px;
  padding: 0;/*6px 0;*/
}

.match-row .m-result {
  text-align: center;
  font-weight: bold;
}

.match-body {
  /*display: none;*/
  height: 0;
  overflow: hidden;
}

.match-table.open .match-body {
  /*display: block;*/
  /*max-height: 1000px;*/
  height: auto;
  padding: 0; /*10px 16px 16px;*/
  border-top: 1px solid #eee;
}

.match-body {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s ease;
}

.match-table.open .match-body {
  transform: scaleY(1);
}


.player-card {
  display: grid;
  grid-template-columns: 3ch 40px 1fr 5ch 20px; 
  grid-template-areas: "num title name rating color";
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}
.player-card .m-title  { grid-area: title; }
.player-card .m-player   { grid-area: name; }
.player-card .m-elo { grid-area: rating; }
.player-card .m-color { grid-area: color; }
.player-card .m-num { grid-area: num; }

.player-card .m-elo { text-align: center; }
.player-card .m-title { text-align: center; }
.player-card .m-num { text-align: center; }

.player-card.right {
  grid-template-columns: 20px 5ch 1fr 40px 3ch; 
  grid-template-areas: "color  rating name title num";
}
.match-row .m-result {
  text-align: center;
  font-weight: bold;
}

.m-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  justify-self: center;
}

.m-color.white {
  background: #fff;
  border: 1px solid #333;
}

.m-color.black {
  background: #000;
}

@media (max-width: 600px) {

.match-table {
  border: 0;
}

.match-table.open .match-body {
 /* padding: 5px 0; */
}

  .match-table .match-row {
    grid-template-columns: var(--mobile-board-col) 1fr auto 1fr;
	/*padding: 8px 2px;*/
	gap: 0px;
	border-bottom: 1px solid #bbb;
	font-size: 0.8rem;
  }
/*
  .player-card {
    display: flex;
	flex-direction: column;
    align-self: end;
    border-radius: 8px;
  }
*/
  .player-card {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "name name name name"
      "num title color rating";
    text-align: center;
  }
  
  .player-card > div {
	  /*text-align: center;*/
	  justify-self: center;
  }

  .player-card.right {
    /*align-items: flex-end;*/
    /*text-align: right;*/
	grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "name name name name"
      "rating color title num";
  }
  
   .player-card .m-elo {
    text-align: right;
    font-variant-numeric: tabular-nums; /* important */
  }

  .match-row .m-result {
    margin: 3px;
	padding: 6px 10px;
    border-radius: 20px;
	border: 1px solid #bbb;
    /*background: #222;
    color: #fff;*/
  }
  
  .match-header .m-team {
    padding: 6px 10px;
    border-radius: 20px;
    /*background: #eee;
	border: 1px solid #bbb;
    color: #000;*/
  }

  .player-card .m-player {
	  font-weight:600;
	  background: #eee;
	  padding: 2px 10px;
    border-radius: 20px;
	  margin: -2x 0;
  }

  
.match-header > .m-team.white-team {
  justify-self: start;
  margin-left: 1ch;
}
.match-header > .m-team.black-team {
  justify-self: end;
  margin-right: 1ch;
}
.match-header > .match-result {
  margin: 3px;
}
 
  
}


/***********************/

/* Base primary reference: #007bff */

.board-1 {
  background-color: #b80;
  color: #fff;
}

.board-2 {
  background-color: #08f;
  color: #fff;
}

.board-3 {
  background-color: #80b;
  color: #fff;
}

.board-4 {
  background-color: #084;
  color: #fff;
}

.board-5 {
  background-color: #b04;
  color: #fff;
}

.board-6 {
  background-color: #222;
  color: #fff;
}

.board-7 {
  background-color: #ee8;
  color: #000;
  border: 1px solid #000;
}

.board-8 {
  background-color: #eee;
  color: #000;
  border: 1px solid #000;
}


/****************************************/
/*
.player-results {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	margin-bottom: 20px;
}
*/
.player-results > .player-header {
	font-size: 0.95rem;
	display: grid;
	column-gap: .5rem;
	padding: 0.2rem 0.2rem;
	grid-template-columns:
		2.5ch   /* round */
		3ch  /* result */
		5ch  /* result */
		3ch   /* diff */
		4ch   /* diff */
		6ch   /* board */
		6ch   /* elo */
		1fr /* name */
		4.5ch   /* pts */
		1.0ch /* slash */
		4.5ch  /* games */
		0.5ch  /* diff2 */
		9ch  /* rp */
	;
	grid-template-areas:
	  " . result result diff diff board elo name points slash games diff2 rp"
	;
	align-items: center;
	justify-items: center;
	background: #0b3b5c; 
	color: #fff;
	font-weight: 600;
}

.player-results > .player-header > .col-result  { grid-area: result; }
.player-results > .player-header > .col-board  { grid-area: board; }
.player-results > .player-header > .col-diff  { grid-area: diff; }
.player-results > .player-header > .col-name   { grid-area: name;}
.player-results > .player-header > .col-elo   { grid-area: elo; }
.player-results > .player-header > .col-diff-rp  { grid-area: diff2; }
.player-results > .player-header > .col-rp     { grid-area: rp; }
.player-results > .player-header > .col-points { grid-area: points; }
.player-results > .player-header > .col-slash  { grid-area: slash; }
.player-results > .player-header > .col-games  { grid-area: games; }
.player-results > .player-header > .col-team   { grid-area: team; }
	
.player-results > .player-header > .col-diff  { text-align: center; }

@media (max-width: 768px) {
	.player-results > .player-header {
			font-size: 0.8rem;
			column-gap: .1rem;
			padding: 0.5rem 0.2rem;
			grid-template-columns:
				2.5ch   /* round */
				2ch  /* color */
				5ch  /* result */
				4ch   /* diffArrow */
				4ch   /* diff */
				4ch   /* board */
				5.5ch   /* elo */
				1fr /* name */
				4.5ch   /* pts */
				1.0ch /* slash */
				4.5ch  /* games */
				0.5ch  /* diff2 */
				9ch  /* rp */
				
			;
	}
	.player-results > .player-header > .col-elo   { display:none;}
	.player-results > .player-header > .col-name   { display:none;}
}
.player-results > .player-info-panel {
	display:grid; 
	grid-template-columns:50% 50%; 
	justify-items:start;
}
.player-results h4 {
	color: #144a6f;
	font-size: 1.3rem;
	margin-bottom: 1.2rem;
	border-left: 6px solid #0b3b5c;
	padding-left: 0.5rem;
}
.player-results h4 .title {
	font-size:0.85em; 
	font-weight:600;
	line-height:1;
	margin-right: 0.5em;
}
.player-results h4 .col-birth {
	font-size:0.8em; 
}
.player-results h4 .col-team {
	font-size:0.8em; 
}

.player-results > .player-row {
	font-size: 0.95rem;
	display: grid;
	grid-template-columns:
		2ch   /* round */
		1fr   /* name */
		6ch  /* elo */
		8ch   /* rp */
		3ch   /* pts */
		0.5ch /* slash */
		3ch  /* games */
		3ch   /* board */
		5ch  /* result */
		6ch  /* diff */
	;
		grid-template-columns:
			2.5ch   /* round */
			3ch  /* color */
			7ch  /* result */
			1ch   /* diffArrow */
			4ch   /* diff */
			6ch   /* board */
			6ch   /* elo */
			1fr /* name */
			4.5ch   /* pts */
			1.0ch /* slash */
			4.5ch  /* games */
			0.5ch  /* diff2 */
			9ch  /* rp */
			
		;
		grid-template-rows: auto auto;
	grid-template-areas:
		  "round result diff board name elo rp points slash games"
		  "round result diff board team elo rp points slash games";
	grid-template-areas:
		  "round name elo rp points slash games board result diff "
		  "round team elo rp points slash games board result diff"
	;
	grid-template-areas:
	  "round color result diffArrow diff board elo name points slash games diff2 rp "
	  "round color result diffArrow diff board elo team points slash games diff2 rp "
	;
	align-content: center;
	align-items: center;
	justify-items: center;
	column-gap: .5rem;
	padding: 0.1rem 0 0 0;
}
.player-results > .player-row:nth-child(even) {
	background: #fff;
}
.player-results > .player-row:nth-child(odd) {
	background: #eee;
}
.player-results > .player-row > .col-color  { grid-area: color; }
.player-results > .player-row > .col-round  { grid-area: round; }
.player-results > .player-row > .col-board  { grid-area: board; }
.player-results > .player-row > .col-diffArrow  { grid-area: diffArrow; }
.player-results > .player-row > .col-diff  { grid-area: diff; }
.player-results > .player-row > .col-result { grid-area: result; }
.player-results > .player-row > .col-name   { grid-area: name; }
.player-results > .player-row > .col-elo   { grid-area: elo; }
.player-results > .player-row > .col-diff-rp  { grid-area: diff2; }
.player-results > .player-row > .col-rp     { grid-area: rp; }
.player-results > .player-row > .col-points { grid-area: points; }
.player-results > .player-row > .col-slash  { grid-area: slash; }
.player-results > .player-row > .col-games  { grid-area: games; }
.player-results > .player-row > .col-team   { grid-area: team; }
.player-results > .player-row > .col-result {
	font-size: 1.2rem;
	padding: 6px 8px;
	border-radius: 50%;
	/*border: 1px solid #bbb;*/
	text-align: center;
	font-weight:600;
	/*justify-self: end;*/
	background: #222;
	color: #fff;
}
.player-results > .player-row > .col-name {
	justify-self: start;
	padding: 0.5rem 0;
}
.player-results > .player-row > .col-team {
	padding-bottom: 0.5rem;
}
.player-results > .player-row > .col-diff {
	white-space: nowrap;
	text-align:center;
}

	.player-results > .player-row > .col-color {
		justify-self: end;
	}
	.player-results > .player-row > .col-round {
		align-content: center;
	}
	.player-results > .player-row > .col-points {
		justify-self: center;
	}
	.player-results > .player-row > .col-slash {
		justify-self: start;
	}
	.player-results > .player-row > .col-games {
		justify-self: start;
	}
	.player-results > .player-row > .col-rp {
		justify-self: center;
	}
	.player-results > .player-row > .col-elo {
		justify-self: end;
		border: 1px solid #ddd;
		padding: 0.2em 0.4em;
		background: #ddd;
		border-radius: 10px;
	}

/*
.player-results > .player-row > .col-result {
		position: relative;
	}
.player-results > .player-row > .col-result.white::after, > .col-result.black::after {
		content: "";
		position:absolute;
		left: -20px;
		top: 50%;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
		border-radius: 50%;
		justify-self: center;
		background: #fff;
		border: 1px solid #333;
	}
.player-results > .player-row > .col-result.black::after {
		background: #000;
	}
*/	
	.player-results > .player-row > .col-rp::before {
		content: "Rp:";
	}
	.player-results > .player-row > .col-round {
		background: #0b3b5c;
		color: #fff;
		padding: 0.3rem 0.2rem;
		font-weight: 600;
		text-align: center;
		justify-self:stretch;
		align-self: stretch;
	}
	

@media (max-width: 768px) {
	.player-results h4 {
		font-size: 1.1rem;
		margin-bottom: 1.0rem;
	}
	.player-results > .player-row {
		font-size: 0.8rem;
		column-gap: .1rem;
		padding: 0.1rem 0 0 0;
		grid-template-columns:
			2ch   /* round */
			8fr   /* name */
			8fr   /* name */
			2fr   /* name */
			0.5fr   /* name */
			2fr   /* name */
			6ch   /* board */
			6ch  /* result */
			6ch   /* diff */
		;
		grid-template-columns:
			2ch   /* round */
			3.5ch   /* pts */
			0.5ch /* slash */
			2.5ch  /* games */
			0.5ch  /* diff2 */
			8ch  /* rp */
			1fr /* name */
			6ch   /* board */
			6ch  /* result */
			6ch   /* diff */
			
		;
		grid-template-columns:
			2.5ch   /* round */
			3ch  /* color */
			6ch  /* result */
			2ch   /* diffArrow */
			4ch   /* diff */
			4ch   /* board */
			5.5ch   /* elo */
			1fr /* name */
			4.5ch   /* pts */
			1.0ch /* slash */
			4.5ch  /* games */
			0.5ch  /* diff2 */
			9ch  /* rp */
			
		;
		grid-template-rows: auto auto auto;

		grid-template-areas:
		  "round result diff board name elo rp rp rp"
		  "round result diff board team elo points slash games";
		grid-template-areas:
		  "round name name name name name name name board result diff"
		  "round points slash games . elo diff2 rp board result diff"
		  "round team team team team team team team board result diff"
		;
		grid-template-areas:
		  "round name name name name name name elo  result diff"
		  "round team team team team team team board result diff"
		  "round points slash games diff2 rp . board result diff"
		;
		grid-template-areas:
		  " round color result diffArrow diff board elo name name name name name name"
		  " round color result diffArrow diff board elo team team team team team team"
		  " round color result diffArrow diff board elo . points slash games diff2 rp"
		;
	}
	.player-results > .player-row > .col-team {
		justify-self: center;
	}
	.player-results > .player-row > .col-name {
	}
	.player-results > .player-row > .col-rp {
		padding-bottom: 0.0rem;
	}
	.player-results > .player-row > .col-rp,
	.player-results > .player-row > .col-diff-rp, 
	.player-results > .player-row > .col-points, 
	.player-results > .player-row > .col-games, 
	.player-results > .player-row > .col-slash {
		padding-bottom: 0.5rem;
	}
}
/******************************************/

div.toggler {
	cursor: pointer;
}

/*********************************************/

.teaminfo h4 {
	color: #144a6f;
	font-size: 1.3rem;
	margin: 0.1rem 0;
	border-left: 6px solid #0b3b5c;
	border-top: 1px solid #0b3b5c;
	padding: 1.2rem 0 0.2rem 0.5rem;
}
.teaminfo h4 .title {
	font-size:0.85em; 
	font-weight:600;
	line-height:1;
	margin-right: 0.5em;
}
.teaminfo .player-list {
  display: none;
}

.teaminfo.open .player-list {
  display: block;
}

.player-list  > .player-row {
	font-size: 0.95rem;
	display: grid;
	grid-template-columns:
		4ch   /* board */
		1fr   /* name */
		5ch  /* elo */
		0.05fr /* .... */
		3ch   /* pts */
		0.5ch /* slash */
		3ch  /* games */
		0.1fr /* .... */
		2ch   /* diffArrow */
		5ch   /* rp */
		0.1fr /* .... */
		1.5ch  /* diff-rp */
		4ch   /* diff */
	;
	grid-template-areas:
		  "board name elo . points slash games . diff-rp rp . diffArrow diff";

	align-items: center;
	justify-items: center;
	column-gap: .5rem;
	padding: 0.1rem 1.0rem 0 0;
}
.player-list  > .player-row:nth-child(even) {
	background: #eee;
}
.player-list  > .player-row:nth-child(odd) {
	background: #fff;
}
.player-list > .player-row > .col-board  { grid-area: board; }
.player-list > .player-row > .col-name   { grid-area: name; }
.player-list > .player-row > .col-elo   { grid-area: elo; }
.player-list > .player-row > .col-diff-rp     { grid-area: diff-rp; }
.player-list > .player-row > .col-rp     { grid-area: rp; }
.player-list > .player-row > .col-points { grid-area: points; }
.player-list > .player-row > .col-slash  { grid-area: slash; }
.player-list > .player-row > .col-games  { grid-area: games; }
.player-list > .player-row > .col-diffArrow     { grid-area: diffArrow; }
.player-list > .player-row > .col-diff     { grid-area: diff; }
.player-list > .player-row > .col-name {
	justify-self: start;
	display: grid;
	grid-template-columns: 6ch 1fr 8ch;
	align-items: center;
	gap: 6px;
}
.player-list > .player-row > .col-diffArrow     { 
	font-size: 0.9rem;
	opacity: 0.8; 
}
.player-list > .player-row > .col-diff-rp     { 
	font-size: 0.8rem;
	opacity: 0.8; 
}
.player-list > .player-row > .col-diff {
  justify-self:end;
  margin-right: 5px;
}
.player-list > .player-row > .col-name {
	padding: 0.3rem 0.2rem;
}
.player-list > .player-row > .col-board {
	background: #0b3b5c;
	color: #fff;
	padding: 0.3rem 0.2rem;
	font-weight: 600;
	text-align: center;
	justify-self:stretch;
	align-self: stretch;
}


.player-list > .use-rp {
	display: none;
	font-size: 0.8rem;
	border-left: 6px solid #0b3b5c;
	padding: 0rem 0.5rem 0 0.5rem;
}

.player-list  > .player-row.header {
	background: #0b3b5c; 
	color: #fff;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	font-weight: 600;
	grid-template-areas:
		  "board name elo . points points points . rp rp . diff diff";
}
.player-list > .player-row.header > .col-diff     { 
	text-align: center;
}
.player-list > .player-row.header > .col-name   { justify-self: center;}

@media (max-width: 768px) {
	.player-list {
		font-size: 0.8rem;
	}
	.player-list > .use-rp {
		display: flex;
		justify-content: end;
	}
	.teaminfo {
		--rp-display: none;
		--diff-display: block;
	}
	.player-list:has( > .use-rp input:checked) {
		--rp-display: block;
		--diff-display: none;
	}
	.player-list > .player-row {
		font-size: 0.8rem;
		column-gap: 0.3rem;
		padding: 0.1rem 0 0 0;
		grid-template-columns:
			4ch   /* board */
			1fr   /* name */
			4ch  /* elo */
			0.02fr /*.........*/
			3.5ch   /* pts */
			0.5ch /* slash */
			2.5ch  /* games */
			0.02fr /*.........*/
			2ch   /* diffArrow */
			4ch   /* diff */
		;
		/*grid-template-rows: auto auto;*/

		grid-template-areas:
		  "board name elo . points slash games . diffArrow diff";
	}
	.player-list > .player-row > .col-diffArrow     { 
		font-size: 0.75em; 
	}
	.player-list > .player-row > .col-diff-rp     { 
		font-size: 0.75em; 
	}
	.player-list > .player-row > .col-diff-rp     { grid-area: diffArrow; }
	.player-list > .player-row > .col-rp     { grid-area: diff; }
	.player-list > .player-row > .col-diff-rp, 
	.player-list > .player-row > .col-rp { 
		display: var(--rp-display);
	}
	.player-list > .player-row > .col-diffArrow,
	.player-list > .player-row > .col-diff { 
		display: var(--diff-display);
	}
	.player-list > .player-row > .col-name {
		padding: 0.4rem 0.2rem;
		display: revert;
		/*text-align: center;*/
		/*padding: 0.5em !important;*/
	}
	.player-list  > .player-row.header {
		grid-template-areas:
			  "board name elo . points points points . diff diff";
	}
	
}

/*************************************************/

.switch {
  position: relative;
  display: inline-block;
  width: 2.9em;   /* was 46px */
  height: 1.6em;  /* was 26px */
  vertical-align: middle; /* key part */
  line-height: 1;
  margin-right: 3px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 50px;
  transition: .3s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 1.2em;    /* was 20px */
  height: 1.2em;   /* was 20px */
  left: 0.2em;     /* was 3px */
  top: 50%; 	/* was 0.2em */
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  transition: .3s;
}

input:checked + .slider {
  background-color: #22c55e;
}

input:checked + .slider::before {
  transform: translate(1.3em, -50%); /* was 20px */
}

/*********************************************************/

.league-container .dropdown-menu {background: #0b3b5c; padding: 10px;}
.league-container .dropdown-menu a{color: #fff; text-decoration: none; padding: 10px;}
.league-container .dropdown-menu a:active{color: #000;}
.league-container .dropdown-menu a:hover{color: #000;}
.league-container .dropdown-menu a:focus{color: #000;}
.league-container .dropdown-menu .dropdown-header{color: #ff8;}

/*
.dropdown {list-style: none; background: green; padding: 10px; display: inline-block;}
.dropdown .nav-link {color:#fff; text-decoration: none;}

.dropdown .a {background: green; color:#fff;}
.dropdown-item .a:hover {background: cyan; color:#000;}
.dropdown-item .a:active {background: cyan; color:#000;}
.dropdown-item .a:focus {background: cyan; color:#000;}
.dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}
*/