body {
  margin: 20px 32px;
  color: #222;
  background: white;
  font: 14px Arial, Helvetica, sans-serif;
}
a { color: #245a91; }
header { display: flex; gap: 20px; align-items: baseline; margin: 30px 0 18px; }
header strong { font-size: 25px; }
header p { color: #666; margin: 7px 0; font-size: 13px; }
nav { display: flex; flex-wrap: wrap; border-bottom: 3px solid #ccc; }
nav a { padding: 7px 16px; text-decoration: none; color: #555; }
nav a[aria-current="page"] { background: #ccc; color: #000; }
main { margin: 24px 0; max-width: 760px; min-height: 400px; }
h1 { font-size: 20px; margin: 26px 0 16px; }
h2 { font-size: 16px; margin-top: 28px; }
p, li { line-height: 1.5; }
code, pre { font-family: monospace; font-size: 12px; }
pre { line-height: 1.6; overflow: auto; }
blockquote { margin-left: 24px; }
img { max-width: 100%; }
table { border-collapse: collapse; }
th, td { padding: 7px 12px; border-bottom: 1px solid #ddd; text-align: left; }
footer { border-top: 1px solid #ccc; color: #777; font-size: 11px; padding-top: 10px; margin-top: 35px; }
@media (max-width: 700px) {
  body { margin: 16px; }
  header { display: block; }
  nav a { padding: 7px 10px; }
}

main:has(.game-layout), main:has(.table-scroll) { max-width: 1100px; }
.game-layout { display: flex; align-items: flex-start; gap: 32px; }
.position { width: 360px; flex-shrink: 0; }
.position img { display: block; width: 100%; }
.game-history { flex: 1; min-width: 0; }
.game-history h2 { margin-top: 0; }
.game-history table, .table-scroll table { width: 100%; }
.table-scroll { overflow: auto; }
.muted, small { color: #666; font-size: 12px; }
@media (max-width: 700px) {
  .game-layout { flex-direction: column; }
  .position { width: min(360px, 100%); }
  .game-history { width: 100%; overflow: auto; }
}