/* css/fsk.css - minimal styles for Farkle Score Keeper */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #FEFFFE;
}

#status {
  color: #333;
}

/* Players table tweaks */
#players-table td, #players-table th {
  vertical-align: middle;
}

/* Zebra striping: each player is 2 rows, alternating background colors */
#players-table tbody tr.stripe-light {
  background-color: #f7f7f7 !important;
  --bs-table-bg: #f7f7f7;
}

#players-table tbody tr.stripe-dark {
  background-color: #efefef !important;
  --bs-table-bg: #efefef;
}

/* Ensure stripe colors show even when table-active is applied */
#players-table tbody tr.table-active.stripe-light {
  background-color: #f7f7f7 !important;
  --bs-table-bg: #f7f7f7;
}

#players-table tbody tr.table-active.stripe-dark {
  background-color: #efefef !important;
  --bs-table-bg: #efefef;
}

/* Remove the horizontal divider between the two rows that belong to the same player.
   We target adjacent rows that share the same stripe class and remove the border
   between them while leaving borders between different players intact. Uses :has()
   where available and a fallback that removes the top border on the second row. */
#players-table tbody tr.stripe-light:has(+ tr.stripe-light) td,
#players-table tbody tr.stripe-dark:has(+ tr.stripe-dark) td {
  border-bottom: 0 !important;
}

#players-table tbody tr.stripe-light + tr.stripe-light td,
#players-table tbody tr.stripe-dark + tr.stripe-dark td {
  border-top: 0 !important;
}

/* Active player highlight — use a light blue for the active player's row */
#players-table tbody tr.table-active,
#players-table tbody tr.table-active.stripe-light,
#players-table tbody tr.table-active.stripe-dark {
  background-color: #e6f2ff !important; /* light blue */
  --bs-table-bg: #e6f2ff;
}

.btn-group .btn {
  min-width: 48px;
}

/* Score input in actions column */
.score-input {
  width: 72px;
  display: inline-block;
}

.score-add-btn {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.farkle-cell {
  font-weight: 600;
  color: #c82333; /* bootstrap danger color */
}

.score-farkle-btn {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Reduce spacing between banner and Close Game button when in a game */
.in-game h1 {
  margin-bottom: 0.5rem; /* smaller than Bootstrap's .mb-3 */
}

.in-game #close-game-btn {
  margin-top: 0.25rem;
}

/* Banner image styles */
.app-header {
  background-color: #FEFFFE;
}
.banner-img {
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding-top: 20px;
}

/* Simple CSS fireworks/confetti effect shown when winners modal is displayed.
   The .show-fireworks class is added to the modal element by js/fsk.js when the
   game ends. We use pseudo-elements on .modal-content to create a brief burst
   of colored dots using box-shadow. The animation runs a few times for a
   celebratory effect and is removed when the modal hides. */
.modal.show-fireworks .modal-content {
  position: relative;
  overflow: visible;
}

/* Primary burst (single element fanned into many using box-shadow). Repeat a
   few times to make the effect more noticeable. Z-index kept so it appears
   above the modal content but below the backdrop. */
.modal.show-fireworks .modal-content::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 -8px 0 #ff4d4d,
    10px -10px 0 #ffb84d,
    -10px -12px 0 #ffd24d,
    18px -20px 0 #66ccff,
    -18px -18px 0 #9b59b6,
    22px -6px 0 #7bed9f,
    -24px -6px 0 #ff6bcb;
  animation: fireworks-burst 1000ms ease-out 0s 3;
  pointer-events: none;
  z-index: 1055;
}

/* A softer glow behind the burst for extra pop */
.modal.show-fireworks .modal-content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 140px;
  height: 60px;
  transform: translateX(-50%) scale(0.8);
  background: radial-gradient(closest-side, rgba(255,223,102,0.25), transparent 60%);
  border-radius: 50%;
  filter: blur(6px);
  animation: fireworks-glow 900ms ease-out 0s 3;
  pointer-events: none;
  z-index: 1054;
}

@keyframes fireworks-burst {
  0% { transform: translateX(-50%) translateY(0) scale(0.2); opacity: 1; filter: blur(0px); }
  35% { transform: translateX(-50%) translateY(-40px) scale(1.0); opacity: 1; filter: blur(0px); }
  100% { transform: translateX(-50%) translateY(-120px) scale(1.2); opacity: 0; filter: blur(2px); }
}

@keyframes fireworks-glow {
  0% { transform: translateX(-50%) translateY(0) scale(0.2); opacity: 0.6; }
  40% { transform: translateX(-50%) translateY(-30px) scale(1); opacity: 0.45; }
  100% { transform: translateX(-50%) translateY(-90px) scale(1.1); opacity: 0; }
}

/* Final-round finished marker
   Rows for players who have completed their final turn (including the starter)
   get a very light red background to indicate they're done. We apply the class
   to both rows that make up a player so the highlight covers the full player.
*/
#players-table tbody tr.final-done,
#players-table tbody tr.final-done + tr.final-done {
  background-color: #fff2f2 !important; /* very light red/pink */
  --bs-table-bg: #fff2f2;
}

#players-table tbody tr.final-done td {
  color: inherit;
}

/* Ensure final-done is visible even when table-active is applied */
#players-table tbody tr.table-active.final-done,
#players-table tbody tr.table-active.final-done + tr.final-done {
  background-color: #ffefef !important;
  --bs-table-bg: #ffefef;
}