/**
 * SLCRICKPRO — Popup Score (desktop)
 * Fills window · square undo/redo · scaling ball grid · full options
 */
html.popup-score-mode,
html.popup-score-mode body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-size: 11px;
}

html.popup-score-mode .bg-canvas,
html.popup-score-mode .sub-header,
html.popup-score-mode #app-header,
html.popup-score-mode .setup-tabs,
html.popup-score-mode #screen-setup,
html.popup-score-mode #screen-login,
html.popup-score-mode #screen-tournament-summary,
html.popup-score-mode #screen-instant-nrr,
html.popup-score-mode #panel-scorecard,
html.popup-score-mode #panel-hotkeys,
html.popup-score-mode .desktop-popup-bar,
html.popup-score-mode .main-header {
  display: none !important;
}

html.popup-score-mode .page-wrapper {
  padding: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

html.popup-score-mode #screen-scoring,
html.popup-score-mode #panel-scoring {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

html.popup-score-mode #panel-scoring {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

html.popup-score-mode .compact-scoring-layout .ball-btn {
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

html.popup-score-mode .compact-scoring-layout .ball-n {
  font-size: inherit !important;
}

html.popup-score-mode .compact-scoring-layout .ball-grid {
  gap: 4px !important;
}

html.popup-score-mode .compact-scoring-layout .btn:not(.scorer-undo-btn) {
  padding: inherit !important;
  font-size: inherit !important;
}

/* —— Score strip (thin top bar) —— */
html.popup-score-mode .score-banner {
  margin: 0 !important;
  padding: 2px 8px 1px !important;
  position: static !important;
  flex-shrink: 0;
  background: rgba(124, 77, 255, 0.1) !important;
  border-bottom: 1px solid rgba(124, 77, 255, 0.18) !important;
  backdrop-filter: none !important;
  min-height: 0 !important;
}

html.popup-score-mode .score-banner > div[style*="text-align:center"],
html.popup-score-mode .score-banner > div:last-child {
  display: none !important;
}

html.popup-score-mode .score-banner-inner {
  max-width: none !important;
  margin: 0 !important;
  gap: 4px !important;
  align-items: center !important;
  padding: 0 !important;
}

html.popup-score-mode .sb-team {
  min-width: 0 !important;
  flex: 1;
}

html.popup-score-mode .sb-team-name {
  font-size: 7px !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

html.popup-score-mode .sb-score {
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

html.popup-score-mode .sb-score #sb-inns-label {
  font-size: 7px !important;
}

html.popup-score-mode .sb-overs {
  font-size: 7px !important;
  line-height: 1.1 !important;
}

html.popup-score-mode .sb-center {
  padding: 0 2px !important;
}

html.popup-score-mode .sb-crr-label {
  font-size: 6px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

html.popup-score-mode .sb-crr-val {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

html.popup-score-mode #sb-target-area {
  font-size: 6px !important;
  line-height: 1.15 !important;
  margin-top: 0 !important;
}

html.popup-score-mode .over-balls-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 8px 2px !important;
  max-height: 14px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.popup-score-mode .over-balls-strip .obs-chip {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  font-size: 6px !important;
}

/* —— Main body grid (fills width + height) —— */
html.popup-score-mode .desktop-scoring-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 24%) !important;
  grid-template-rows: 1fr !important;
  gap: 4px !important;
  padding: 4px 6px 4px !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  align-items: stretch !important;
}

html.popup-score-mode .scoring-controls-col {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(108px, 1fr) auto !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  align-content: stretch !important;
}

html.popup-score-mode .scoring-stats-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  position: static !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* Mobile batter/bowler bars — compact live strip in popup */
html.popup-score-mode .mobile-batter-bar {
  display: flex !important;
  margin: 0 !important;
  border-radius: 8px !important;
  flex-shrink: 0;
}

html.popup-score-mode .mobile-batter-cell {
  padding: 6px 4px !important;
}

html.popup-score-mode .mobile-batter-name {
  font-size: 9px !important;
}

html.popup-score-mode .mobile-batter-score {
  font-size: 16px !important;
}

html.popup-score-mode .mobile-batter-balls {
  font-size: 8px !important;
}

html.popup-score-mode .mobile-bowler-bar {
  display: flex !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  flex-shrink: 0;
}

html.popup-score-mode .mobile-bowler-name {
  font-size: 10px !important;
}

html.popup-score-mode .mobile-bowler-stats {
  font-size: 9px !important;
}

/* Square undo / redo */
html.popup-score-mode .scorer-undo-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0;
  flex-wrap: nowrap !important;
}

html.popup-score-mode .scorer-undo-btn {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.popup-score-mode .scorer-undo-hint {
  flex: 1 1 auto !important;
  min-width: 0;
  font-size: 8px !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 4px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Record ball — center scoring pad (always visible) */
html.popup-score-mode #card-buttons {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  min-height: 100px !important;
  height: 100% !important;
  padding: 4px 6px 6px !important;
  margin: 0 !important;
  overflow: visible !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 8px !important;
}

html.popup-score-mode #card-buttons .card-head {
  font-size: 7px !important;
  margin: 0 0 3px !important;
  flex-shrink: 0;
  text-align: center;
}

html.popup-score-mode .ball-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(44px, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(44px, 52px)) !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 96px !important;
  height: auto !important;
  flex: 1 1 auto !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

html.popup-score-mode .ball-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: none !important;
  max-height: 56px !important;
  aspect-ratio: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

html.popup-score-mode .ball-n {
  font-size: clamp(13px, 1.8vw, 17px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Light popup — visible ball colours on white */
html.popup-score-mode body.light-mode .b-dot {
  background: #eceff4 !important;
  color: #374151 !important;
  border: 1px solid #cbd5e1 !important;
}

html.popup-score-mode body.light-mode .b-run {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
}

html.popup-score-mode body.light-mode .b-four {
  background: #cffafe !important;
  color: #0e7490 !important;
  border: 1px solid #67e8f9 !important;
}

html.popup-score-mode body.light-mode .b-six {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border: 1px solid #c4b5fd !important;
}

html.popup-score-mode body.light-mode .b-wide {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
}

html.popup-score-mode body.light-mode .b-noball {
  background: #fce7f3 !important;
  color: #be185d !important;
  border: 1px solid #f9a8d4 !important;
}

html.popup-score-mode body.light-mode .b-bye,
html.popup-score-mode body.light-mode .b-legbye {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
}

html.popup-score-mode body.light-mode .b-wicket {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
}

html.popup-score-mode body.light-mode .b-five {
  background: #ffedd5 !important;
  color: #c2410c !important;
  border: 1px solid #fdba74 !important;
}

html.popup-score-mode .ball-l {
  display: none !important;
}

/* Row order in controls column */
html.popup-score-mode .mobile-batter-bar {
  grid-row: 1 !important;
}

html.popup-score-mode .mobile-bowler-bar {
  grid-row: 2 !important;
}

html.popup-score-mode .scorer-undo-row {
  grid-row: 3 !important;
}

html.popup-score-mode #card-buttons {
  grid-row: 4 !important;
}

html.popup-score-mode #card-controls {
  grid-row: 5 !important;
  flex-shrink: 0 !important;
  padding: 3px 5px !important;
  margin: 0 !important;
}

html.popup-score-mode #card-controls .card-head {
  display: none !important;
}

html.popup-score-mode #card-controls > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
}

html.popup-score-mode #publish-toggle-row {
  flex: 1 1 auto !important;
  min-width: 140px !important;
  margin: 0 !important;
}

html.popup-score-mode #card-controls .toggle-label {
  font-size: 8px !important;
}

html.popup-score-mode #card-controls .toggle-switch {
  transform: scale(0.7);
}

html.popup-score-mode #card-controls .btn {
  font-size: 8px !important;
  padding: 4px 8px !important;
  flex: 0 1 auto;
  white-space: nowrap;
}

html.popup-score-mode #match-end-buttons {
  display: flex !important;
  flex: 1 1 auto !important;
  gap: 4px !important;
  width: auto !important;
}

html.popup-score-mode #match-end-buttons .btn {
  flex: 1;
  min-width: 72px;
}

html.popup-score-mode #btn-declare {
  font-size: 8px !important;
  padding: 4px 8px !important;
  width: 100%;
}

/* Partnership + FoW (popup sidebar) */
html.popup-score-mode .popup-score-extra {
  display: block !important;
}

html.popup-score-mode .popup-partner-stats {
  display: flex;
  gap: 4px;
  padding: 2px 0;
}

html.popup-score-mode .popup-partner-stats .stat-box {
  flex: 1;
  text-align: center;
  padding: 2px 0;
}

html.popup-score-mode .popup-partner-stats .stat-val {
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.1;
}

html.popup-score-mode .popup-partner-stats .stat-lbl {
  font-size: 7px !important;
  opacity: 0.75;
}

html.popup-score-mode .popup-fow-list {
  font-size: 7px !important;
  line-height: 1.25;
  max-height: 36px;
  overflow-y: auto;
}

/* Player tables — show more cols in popup */
html.popup-score-mode .scoring-stats-col .card {
  padding: 3px 5px !important;
  margin: 0 !important;
  flex-shrink: 0;
}

html.popup-score-mode .scoring-stats-col .card-head {
  font-size: 7px !important;
  margin: 0 0 2px !important;
}

html.popup-score-mode .data-table {
  font-size: 8px !important;
  width: 100%;
}

html.popup-score-mode .data-table th,
html.popup-score-mode .data-table td {
  padding: 2px 3px !important;
}

html.popup-score-mode .data-table th {
  font-size: 7px !important;
}

html.popup-score-mode #card-batting .data-table th:nth-child(4),
html.popup-score-mode #card-batting .data-table th:nth-child(5),
html.popup-score-mode #card-batting .data-table td:nth-child(4),
html.popup-score-mode #card-batting .data-table td:nth-child(5) {
  display: table-cell !important;
}

html.popup-score-mode #card-bowling .data-table th:nth-child(3),
html.popup-score-mode #card-bowling .data-table td:nth-child(3) {
  display: table-cell !important;
}

html.popup-score-mode .scorer-name-edit-btn {
  display: none !important;
}

html.popup-score-mode .scorer-name-editable {
  font-size: 8px !important;
  max-width: 64px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.popup-score-mode .btn-swap-ends {
  font-size: 7px !important;
  padding: 1px 4px !important;
}

/* Hide partnership on main app (only popup) */
html:not(.popup-score-mode) .popup-score-extra {
  display: none !important;
}

/* Narrow popup window */
@media (max-width: 640px) {
  html.popup-score-mode .desktop-scoring-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto auto !important;
  }

  html.popup-score-mode .scoring-stats-col {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    max-height: 120px !important;
  }

  html.popup-score-mode .scoring-stats-col .card {
    flex: 1 1 45%;
    min-width: 140px;
  }
}

/* Modals */
html.popup-score-mode .modal-overlay {
  z-index: 99999;
}

html.popup-score-mode .modal-box {
  max-width: min(360px, 92vw) !important;
  padding: 10px 12px !important;
}

html.popup-score-mode .modal-title {
  font-size: 14px !important;
  margin-bottom: 2px !important;
}

html.popup-score-mode .modal-sub {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}

html.popup-score-mode .modal-runs-pick {
  gap: 6px !important;
  margin: 8px 0 !important;
}

html.popup-score-mode .modal-runs-pick--4 {
  grid-template-columns: repeat(4, 40px) !important;
}

html.popup-score-mode .modal-runs-pick--6 {
  grid-template-columns: repeat(3, 40px) !important;
}

html.popup-score-mode .modal-runs-pick--wide {
  grid-template-columns: repeat(3, 42px) !important;
}

html.popup-score-mode .modal-runs-pick .wr-btn {
  width: 40px !important;
  height: 40px !important;
  max-width: 42px !important;
  min-width: 40px !important;
  padding: 0 !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border-width: 1px !important;
}

html.popup-score-mode .modal-runs-pick--wide .wr-btn {
  height: 42px !important;
  max-width: 44px !important;
  font-size: 12px !important;
}

html.popup-score-mode .modal-runs-pick--wide .wr-btn div {
  font-size: 7px !important;
  line-height: 1 !important;
}

html.popup-score-mode .modal-actions {
  gap: 6px !important;
}

html.popup-score-mode .modal-actions .btn {
  font-size: 11px !important;
  padding: 6px 12px !important;
}