.games-table {
	display: block;
	margin: 0 auto;
	max-width: 1200px;
}

/* Desktop: keep existing table grid */
.game-row {
    display: grid;
    grid-template-columns: 1fr 6ch 1fr 6ch 10ch 1fr 10ch 10ch;
	grid-template-rows: auto;
    gap: 0.5rem;
	line-height: 1em;
	padding: 0.5em 0.5em;
	align-items: center;
}

.games-table  > .game-row:nth-child(even) {
	background: #eee;
}
.games-table  > .game-row:nth-child(odd) {
	background: #fff;
}

.games-header {
    font-weight: bold;
    background-color: #f2f2f2;
    padding: 0.5rem;
    text-align: center;
}

/* Responsive: stack items on small screens */
@media (max-width: 768px) {
	.games-table {
		display: block;
	}
    .game-row {
        display: grid;
        grid-template-columns: 1fr 1fr 10ch;
		grid-template-rows: auto;
        gap: 0.5rem;
    }

    /* Line 1 */
    .game-row .white { grid-column: 1; grid-row: 1; }
    .game-row .black { grid-column: 2; grid-row: 1; }

    /* Line 2 */
    .game-row .white-elo { grid-column: 1; grid-row: 2; }
    .game-row .black-elo { grid-column: 2; grid-row: 2; }

    /* Line 3: Result / Date / View */
    .game-row .result { grid-column: 3; grid-row: 1; }
    .game-row .date { grid-column: 3; grid-row: 3; }
    .game-row .action { grid-column: 3; grid-row: 2; text-align:center;}

    /* Line 4: Site spans all columns */
    .game-row .site { grid-column: 1 / -1; grid-row: 3; }
}
/******************************************/      
        .player-info {
            display: flex;
            flex-direction: column;
        }
        
        .player-name {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .player-rating {
            font-size: 0.85rem;
            color: #7f8c8d;
        }
        
        .result {
            font-weight: 700;
            text-align: center;
        }
        
        .result-win-white {
            color: #27ae60;
        }
        
        .result-win-black {
            color: #e74c3c;
        }
        
        .result-draw {
            color: #f39c12;
        }
        
        .result-surprise-good {
            /* text-decoration: green wavy underline 4px;
			border: 1px solid green;
			border-radius: 1em;  */
			border-bottom: 3px solid green;
			border-bottom-right-radius: 25% !important;
			border-bottom-left-radius: 25% !important;
	    }
        
        .result-surprise-bad {
            /*  text-decoration: red wavy underline 4px; 
			border: 1px solid red;
			border-radius: 1em; */
			border-bottom: 3px solid red;
			border-bottom-right-radius: 25% !important;
			border-bottom-left-radius: 25% !important;
        }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
            font-size: 1.1rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }
     
	 
.id-gameInfo {
  margin-bottom: 0px;
  font-family: system-ui, sans-serif;
  color: #222;
}

.id-gameInfo-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 1.0em;
  font-weight: 600;
}

.id-gameInfo-playerRow {
  display: flex;
  align-items: center;
  gap: 1.0em;
}

.id-gameInfo-playerText {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.id-gameInfo-player {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.id-gameInfo-white,
.id-gameInfo-black {
  align-items: center;
}

.id-gameInfo-whiteName,
.id-gameInfo-blackName {
  text-align: center;
}

.id-gameInfo-whiteElo,
.id-gameInfo-blackElo {
  font-size: 0.8em;
  color: #222;
  font-weight: normal;
}

.id-gameInfo-result {
  padding: 4px 10px;
  font-size: 1.2em;
}

.id-gameInfo-meta {
  margin-top: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-items: center;
  font-size: 0.8em;
}

.id-gameInfo-meta span {
  white-space: nowrap;
  border: 1px solid #ccc;
  padding: 3px 10px;
  border-radius: 5px;
  color: #333;
}

.id-gameInfo-meta span::before {
  content: "";
  color: #aaa;
}