body { 
  font-family: Arial, sans-serif; 
  background: #f1f5f9;
  padding: 10px; 
}

.container { 
  max-width: 500px; 
  margin:auto; 
  background:white; 
  padding:15px; 
  border-radius:12px;
  box-shadow:0 10px 20px rgba(0,0,0,0.15); 
}

h2,h3 {
  text-align:center;
}
input, select, button { 
  width:95%; 
  padding:10px; 
  margin:6px 0; 
  border-radius:6px; 
  border:1px solid #cbd5e1;
}
button { 
  background:#22c55e; 
  color:white; 
  font-weight:bold; 
  cursor:pointer; 
}
button.red { 
  background:#ef4444; 
}
button.blue { 
  background:#0ea5e9;
}
button.gray { 
  background:#64748b; 
}
.score { 
  text-align:center; 
  font-size:28px; 
}
.small { 
  text-align:center; 
  font-size:14px; color:#475569;
}
.grid {
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:6px;
  margin-top:10px;
}
#commentary { 
  font-size:14px; 
  background:#f8fafc; 
  padding:8px; 
  border-radius:6px; 
  max-height:150px; 
  overflow-y:auto; 
}
table { 
  width:100%; 
  border-collapse:collapse; 
  margin-top:10px; 
}
th, td { 
  border:1px solid #cbd5e1; 
  padding:6px; 
  text-align:center; 
}
th { 
  background:#e2e8f0;
}
.site-footer {
  text-align:center;
  margin-top:20px; 
  padding:12px; 
  background:#1e293b; 
  color:white; 
}