/* At-the-game scorer (/game/<id>/score) and its two pieces on the game page. Uses the colour tokens from app.css:
   blacks, greys and whites, the green accent, gold (--star) and red. Every tap target is at least 48px high. */

.sx { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; padding-bottom: 220px }
.sx-crumb { margin: 0; font-size: 13px }
.sx-note { color: var(--muted); font-size: 13px; margin: 6px 0 }

/* Scoreboard */
.sx-board { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; position: sticky; top: 0; z-index: 20 }
.sx-comp { margin: 0 0 8px; color: var(--muted); font-size: 12px; text-align: center }
.sx-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center }
.sx-side { display: grid; gap: 4px; min-width: 0 }
.sx-name { font: 800 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere }
.sx-gp { font: 800 44px/1 var(--display); font-variant-numeric: tabular-nums }
.sx-gp small { font: 600 14px var(--body); color: var(--muted) }
.sx-mid { display: grid; gap: 4px; justify-items: center }
.sx-status { font: 700 12px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; padding: 6px 9px; border-radius: 999px; background: var(--raise); color: var(--ink) }
.sx[data-status="live"] .sx-status { background: var(--live-soft); color: var(--live) }
.sx[data-status="ft"] .sx-status { background: var(--ink); color: var(--bg) }
.sx-min { font: 700 22px/1 var(--display); color: var(--live); font-variant-numeric: tabular-nums; min-height: 22px }
.sx-pens { font-size: 12px; color: var(--muted) }

/* Messages */
.sx-banner { padding: 12px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); border-left: 4px solid var(--star); font-size: 14px }
.sx-banner.bad { border-left-color: var(--red) }
.sx-banner.ok { background: var(--ok-bg); color: var(--ok-ink); border-left-color: var(--accent) }
.sx-queue { font-size: 12px; color: var(--muted); text-align: center }

/* Buttons */
.sx-btn {
  font: 700 16px/1.1 var(--body); min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none
}
.sx-btn:active { transform: scale(.98) }
.sx-btn:disabled { opacity: .45; cursor: default }
.sx-btn.big { width: 100%; font-size: 18px; min-height: 58px }
.sx-btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong) }
.sx-btn.small { min-height: 40px; padding: 8px 12px; font-size: 14px }
.sx-btn.phase { background: var(--raise); color: var(--ink); border-color: var(--line-strong); flex: 1 1 auto }
.sx-btn.phase[data-phase="throw_in"], .sx-btn.phase[data-phase="second_half"], .sx-btn.phase[data-phase="et_second_half"] { background: var(--accent); color: var(--accent-ink); border-color: transparent }

/* Claim */
.sx-claimform { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px }
.sx-claimform label { display: grid; gap: 6px; font-weight: 600; font-size: 14px }
.sx-claimform input, .sx-confirm input, .sx-confirm select, .sx-ti input {
  font: 16px var(--body); min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink)
}
.sx-held { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--raise) }

/* Clock */
.sx-clock { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.sx-ti { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); flex: 1 1 100% }
.sx-ti input { min-height: 40px; padding: 6px 8px }

/* Teams */
.sx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.sx-col { display: grid; gap: 8px; align-content: start; min-width: 0 }
.sx-team { font: 800 15px/1.1 var(--display); text-transform: uppercase; margin: 0; text-align: center; overflow-wrap: anywhere }
.sx-players { display: grid; gap: 4px }
.sx-player {
  display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: center; min-height: 48px; padding: 6px 8px; text-align: left;
  font: 600 14px/1.15 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; touch-action: manipulation
}
.sx-player .no { font: 800 16px var(--display); color: var(--muted); text-align: center }
.sx-player .nm { overflow-wrap: anywhere }
.sx-player.sub { opacity: .75 }
.sx-player.off { opacity: .4 }
.sx-player.sent { text-decoration: line-through; opacity: .35 }
.sx-teamrow { background: var(--raise); font-weight: 800 }
.sx-player[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent) }
.sx-player .crd { width: 9px; height: 13px; border-radius: 2px; display: inline-block; margin-left: 4px; vertical-align: middle }
.sx-player .crd.yellow { background: var(--star) }
.sx-player .crd.black { background: var(--ink); outline: 1px solid var(--line-strong) }
.sx-player .crd.red { background: var(--red) }
.sx-sheet { display: grid; gap: 6px }
.sx-photo { display: grid; place-items: center; text-align: center }
.sx-confirm { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2) }
.sx-confirm .row { display: grid; grid-template-columns: 52px 1fr; gap: 4px }
.sx-confirm .row select { grid-column: 1 / -1; min-height: 40px }
.sx-confirm .row input[data-f="no"] { padding: 8px 4px; text-align: center }
.sx-confirm h3 { margin: 4px 0 0; font-size: 13px; color: var(--muted) }

/* Action sheet: fixed to the bottom so the thumb finds it */
.sx-sheet-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow); display: grid; gap: 8px
}
.sx-sheet-panel[hidden] { display: none }
.sx-who { margin: 0; font-weight: 700; text-align: center }
.sx-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 760px; margin: 0 auto; width: 100% }
.sx-actions[hidden] { display: none }
.sx-btn.act { min-height: 56px }
.sx-btn.goal { background: var(--ink); color: var(--bg) }
.sx-btn.card { color: #111 }
.sx-btn.card.y { background: var(--star) }
.sx-btn.card.b { background: #000; color: #fff; border-color: var(--line-strong) }
.sx-btn.card.r { background: var(--red); color: #fff }
.sx-sheet-panel > .sx-btn.ghost { max-width: 760px; margin: 0 auto; width: 100% }

/* Events */
.sx-log h2 { font-size: 15px; margin: 6px 0 }
.sx-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.sx-events li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; min-height: 48px; padding: 4px 4px 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px }
.sx-events li.pending { border-style: dashed; opacity: .7 }
.sx-events li.goal { border-left: 4px solid var(--accent) }
.sx-events .m { font: 700 15px var(--display); color: var(--muted); font-variant-numeric: tabular-nums }
.sx-events .what small { color: var(--muted) }
.sx-events .run { font-size: 12px; color: var(--muted) }
.sx-undo { min-height: 44px; min-width: 64px; font: 600 13px var(--body); border-radius: 8px; border: 1px solid var(--line-strong); background: var(--raise); color: var(--ink); cursor: pointer }
.sx-foot { text-align: center }

/* Game page: the entry point and the timeline */
.sx-entry { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 10px 0 0 }
.sx-entry-who { font-size: 14px; display: inline-flex; align-items: center; gap: 6px }
.sx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); display: inline-block }
.sx-entry-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: 700 14px/1 var(--body); text-decoration: none
}
.sx-entry-btn:hover { background: var(--accent-strong); color: var(--accent-ink) }
.sx-timeline { margin-bottom: 12px }
.sx-timeline h3 { margin: 0 0 8px }
.sx-timeline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.sx-timeline li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line) }
.sx-timeline li:last-child { border-bottom: 0 }
.sx-timeline .m { font: 700 14px var(--display); color: var(--muted) }
.sx-timeline li.goal .what { font-weight: 700 }
.sx-timeline li.game .what { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .05em }
.sx-timeline li.t-yellow .what::before, .sx-timeline li.t-black .what::before, .sx-timeline li.t-red .what::before { content: ""; display: inline-block; width: 9px; height: 13px; border-radius: 2px; margin-right: 6px; vertical-align: -1px }
.sx-timeline li.t-yellow .what::before { background: var(--star) }
.sx-timeline li.t-black .what::before { background: var(--ink) }
.sx-timeline li.t-red .what::before { background: var(--red) }

@media (min-width: 700px) {
  .sx-actions { grid-template-columns: repeat(6, 1fr) }
  .sx-gp { font-size: 56px }
}