body {
	padding: 2rem;
	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}

h1 {
	font-size: 16px;
	margin-top: 0;
}

p {
	color: rgb(107, 114, 128);
	font-size: 15px;
	margin-bottom: 10px;
	margin-top: 5px;
}

.card {
	max-width: 620px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid lightgray;
	border-radius: 16px;
}

.card p:last-child {
	margin-bottom: 0;
}


/* Wide layout for dashboard + leaderboard */
body.wide main{
  max-width: 1100px;         /* similar feel to the game container on desktop */
  margin: 16px auto;
  padding: 0 12px;
}
@media (max-width: 860px){
  body.wide main{
    max-width: 100% !important;  /* full width on mobile */
    padding: 0 8px;
  }
}

/* Make blocks fill the available width */
body.wide .card{ width:100%; }
body.wide .table-wrap{ overflow-x:auto; }
body.wide table{ width:100%; table-layout:fixed; border-collapse:collapse; }

/* If you use a two-column grid on desktop, collapse to one on mobile */
body.wide .grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 860px){
  body.wide .grid{ grid-template-columns:1fr; }
}