/* style.css */
body { font-family: Arial, sans-serif; margin: 16px; color: #222; }
a { color: #0b57d0; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 900px; margin: 0 auto; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 14px; margin-bottom: 14px; background: #fff; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.small { color: #666; font-size: 12px; }

.btn { background: #0b57d0; color: #fff; border: 0; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-outline { background: #fff; color: #0b57d0; border: 1px solid #0b57d0; }

input[type="number"], input[type="text"], select {
  padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px;
}

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 12px; vertical-align: middle; }
th { background: #f6f6f6; text-align: left; }

.score-controls { display: inline-flex; align-items: center; gap: 10px; }
.score-btn {
  width: 48px; height: 48px;
  border: 0; border-radius: 6px;
  background: #0b57d0; color: #fff;
  font-size: 26px; line-height: 48px;
  text-align: center; cursor: pointer;
}
.score-box {
  width: 64px; text-align: center;
  font-weight: bold; font-size: 18px;
  border-radius: 6px;
  background: #fff;
}

/* Prevent bleed-through under sticky Player column */
table.scorecard th.left,
table.scorecard td.left {
  background: #ffffff;        /* force solid background */
  box-shadow: 2px 0 0 #ddd;   /* visual separator + paint barrier */
  z-index: 5;                 /* higher than body cells */
}

table.scorecard {
  position: relative;
}

table.scorecard td,
table.scorecard th {
  background-clip: padding-box;
}



.notice { background: #f0f7ff; border: 1px solid #cfe4ff; padding: 10px 12px; border-radius: 8px; }
.danger { background: #fff3f3; border: 1px solid #ffd0d0; padding: 10px 12px; border-radius: 8px; }