body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  background-color: #f0f0f0;
  /* Light background */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="%23ff8c00" stroke-width="2"/><line x1="50" y1="5" x2="50" y2="95" stroke="%23ff8c00" stroke-width="2"/><line x1="5" y1="50" x2="95" y2="50" stroke="%23ff8c00" stroke-width="2"/></svg>');
  /* Simple basketball court lines */
  background-size: cover;
  background-repeat: no-repeat;
  color: #333;
  position: relative;
}
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 140, 0, 0.8);
  /* Orange overlay */
  z-index: -1;
}
body .container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  /* Typical phone width */
  padding: 20px;
  box-sizing: border-box;
}
body h1 {
  color: white;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  width: 100%;
}
#summary,
#charts {
  display: none;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Two columns for buttons */
  gap: 15px;
  width: 100%;
  margin-bottom: 30px;
}
.stat-button {
  background-color: white;
  color: #FF8C00;
  border: none;
  border-radius: 15px;
  padding: 15px 10px;
  font-size: 1.1em;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  min-height: 80px;
  /* Ensure consistent height */
  position: relative;
}
.stat-button:active {
  transform: translateY(2px);
  background-color: #f0f0f0;
}
.stat-button i {
  font-size: 1.8em;
  margin-bottom: 5px;
  color: #FF8C00;
}
.stat-button b {
  display: none;
  position: absolute;
  background: #3F51B5;
  border-radius: 50%;
  color: #fff;
  padding: 10px 16px;
  top: 22px;
}
.stat-button b.l {
  left: -22px;
}
.stat-button b.r {
  right: -22px;
}
/* Specific styling for the 3rd row with 2 buttons */
.third-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Two columns for buttons */
  gap: 15px;
  width: 100%;
  margin-bottom: 30px;
}
.third-row .stat-button {
  grid-column: span 1;
  /* Each button takes one column */
}
/********** MENU ***********/
.nav-tabs {
  display: flex;
  width: 100%;
  max-width: 400px;
  background-color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}
.nav-tabs .nav-tab {
  flex: 1;
  padding: 15px 0;
  text-align: center;
  color: #FF8C00;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.nav-tabs .nav-tab:hover {
  background-color: #f0f0f0;
}
.nav-tabs .nav-tab[selected] {
  background-color: #FF8C00;
  color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.nav-tabs .nav-tab i {
  font-size: 1.3em;
  margin-bottom: 5px;
}
/******* REGISTER *********/
.date {
  padding: 10px;
  color: white;
  background: #0003;
  width: 100%;
  text-align: center;
  font-size: 110%;
  margin-bottom: 10px;
  margin-top: -10px;
}
.game {
  padding: 10px;
  border: 0;
  border-radius: 8px;
  vertical-align: middle;
  font-size: 80%;
  text-align: center;
  width: 42px;
}
.win,
.win i {
  color: #4CAF50;
}
.win.active {
  background-color: #4CAF50;
  color: white;
}
.lost,
.lost i {
  color: #F44336;
}
.lost.active {
  background-color: #F44336;
  color: white;
}
.save {
  background-color: #3F51B5;
  color: white;
}
.win.active i,
.lost.active i,
.save i {
  color: white;
}
/********* SUMMARY ****************/
#summary .dates {
  font-size: 50%;
  border: 0;
  border-radius: 4px;
  padding: 5px 10px;
}
#summary table {
  width: 100%;
}
#summary th {
  background: #fff;
}
#summary .game {
  width: 10px;
}
#summary td {
  text-align: center;
}
#summary .win {
  color: #4CAF50;
}
#summary .lost {
  color: #F44336;
}
#summary td.result {
  text-shadow: 1px 1px black;
}
#summary .scores {
  display: flex;
  gap: 5px;
  margin: 10px 0;
}
#summary .scores div {
  text-align: center;
  flex-grow: 1;
}
#summary .scores span {
  border-radius: 50%;
  padding: 10px;
  display: block;
}
#offensive {
  font-size: 120%;
  background: #fff;
}
#defensive {
  font-size: 120%;
  background: #333;
  color: white;
}
#score {
  font-size: 150%;
  background: #ffee02;
}
#bonus {
  font-size: 130%;
  background: #9e9e9e;
}
#total {
  font-size: 200%;
  background: #4CAF50;
  color: white;
}
#charts .view {
  margin-bottom: 10px;
}
#charts .stat-button[selected],
#charts .stat-button[selected] i {
  background-color: #3F51B5;
  color: white;
}