/* ===========================================================================
   Score keeper (/score). Rides on styles.css for the palette, type, pills and
   modals; this is only the setup form and the two-halves scoreboard.
   =========================================================================== */

/* Team fills for the scoreboard, a shade deeper than the brand colours so
   white names stay readable on them in full sun. */
.score-page {
  --red-deep:  #B8262E;
  --blue-deep: #3D790B;
  --sand-deep: #8A5606;
}

/* ------------------------------------------------------------- setup ---- */
.sk-setup {
  max-width: 640px; margin: 0 auto;
  padding: 16px 16px 64px;
  position: relative; z-index: 10;
}
.sk-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 0 16px;
}
.sk-back { font-size: 13px; color: var(--ink-55); }
.sk-back:hover { color: var(--ink); }
.sk-title { font-size: clamp(44px, 13vw, 72px); margin: 0 0 6px; }
.sk-h {
  margin: 30px 0 10px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-55);
}
.sk-mode { margin-top: 22px; }

.sk-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-opt {
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--ink-40); border-radius: 100px;
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: 14px; cursor: pointer;
  touch-action: manipulation;
}
.sk-opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.sk-opt:disabled { opacity: 0.3; cursor: default; }
.sk-opt:focus-visible, .sk-slot:focus-visible, .sk-chip:focus-visible {
  outline: 2px solid var(--sand); outline-offset: 2px;
}

.sk-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sk-slot {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  min-height: 78px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
  font-family: inherit; color: var(--ink); cursor: pointer;
}
.sk-slot.active { border-color: var(--sand); box-shadow: inset 0 0 0 1px var(--sand); }
.sk-slot-label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--ink-55);
}
.sk-slot-names { font-size: 15px; line-height: 1.3; }
.sk-slot-names:empty::before { content: "Tap names below"; color: var(--ink-40); }

.sk-roster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-top: 16px;
}
.sk-roster h3 { font-size: 20px; margin: 0 0 10px; }
.sk-chips { display: flex; flex-direction: column; gap: 6px; }
.sk-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 46px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: 15px; text-align: left; cursor: pointer;
  touch-action: manipulation;
}
.sk-chip > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-chip-tag {
  flex-shrink: 0;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--blue);
}
.sk-chip.is-in { border-color: var(--ink-40); font-weight: 500; }
.sk-chip:not(.is-in):not(.picked) { color: var(--ink-55); }
.sk-chip:not(.is-in):not(.picked) .sk-chip-tag { color: var(--ink-40); }
/* Open night: one list of everyone, two to a row. */
.sk-open-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.sk-open-chips .sk-chips-divider { grid-column: 1 / -1; }
.sk-open-chips[hidden], .sk-roster[hidden] { display: none; }
.sk-chip.open.picked { background: var(--ink); border-color: var(--ink); }
.sk-chips-divider {
  margin: 10px 0 2px;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--ink-40);
}
.sk-chip.picked { color: #fff; }
.sk-chip.picked .sk-chip-tag { color: rgba(255, 255, 255, 0.85); }
.sk-chip.red.picked  { background: var(--red-deep);  border-color: var(--red-deep); }
.sk-chip.blue.picked { background: var(--blue-deep); border-color: var(--blue-deep); }

.sk-hint {
  margin: 12px 0 0; padding: 11px 14px;
  background: rgba(248, 174, 23, 0.14); border-left: 2px solid var(--sand);
  font-size: 13px; color: var(--ink-70);
}
.sk-names { display: flex; flex-direction: column; gap: 14px; }
.sk-start { margin-top: 30px; width: 100%; min-height: 56px; font-size: 14px; }

.sk-tonight { list-style: none; margin: 0; padding: 0; }
.sk-tonight li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.sk-tonight .muted { font-size: 12px; }

/* ------------------------------------------------------------- board ---- */
body.sk-playing { overflow: hidden; overscroll-behavior: none; }

.sk-board {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  background: var(--ground);
}
.sk-board[hidden] { display: none; }
.sk-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top));
}
.sk-icon {
  flex-shrink: 0; width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: 18px; cursor: pointer;
}
a.sk-icon { display: inline-flex; align-items: center; justify-content: center; }
.sk-close:hover { color: var(--ink); background: var(--ground-2); }
.sk-info {
  flex: 1; min-width: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; font-size: 12px; line-height: 1.35; font-weight: 500;
}

.sk-halves {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px;
}
.sk-halves.swapped .sk-half[data-i="0"] { order: 2; }
.sk-half { display: flex; flex-direction: column; min-height: 0; color: #fff; }
.c-red  { background: var(--red-deep); }
.c-blue { background: var(--blue-deep); }
.c-ink  { background: var(--ink); }
.c-sand { background: var(--sand-deep); }

.sk-plus, .sk-minus {
  border: 0; background: transparent; color: inherit; font-family: inherit; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sk-plus {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px;
}
.sk-plus:active { background: rgba(255, 255, 255, 0.12); }
.sk-team { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }
.sk-players {
  display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%;
  font-size: 15px; font-weight: 500; line-height: 1.25; text-align: center; min-height: 1.25em;
}
/* Serve order: each player with their place in it (1st & 3rd on the side that
   served first, 2nd & 4th on the other). Whoever is serving now gets the pill. */
.sk-server {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 3px 10px 3px 3px; border-radius: 100px; opacity: 0.72;
}
.sk-server > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-server b {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.65); font-size: 12px; font-weight: 700;
}
.sk-server.on { opacity: 1; background: #fff; color: var(--ink); font-weight: 700; }
.sk-server.on b { background: var(--ink); border-color: var(--ink); color: #fff; }
.sk-server.on::after { content: "🏐"; flex-shrink: 0; font-size: 14px; }
.sk-score {
  font-size: min(34vw, 38vh); line-height: 0.95; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.sk-score.pop { animation: sk-pop 0.28s var(--ease); }
@keyframes sk-pop { 40% { transform: scale(1.12); } }
.sk-gp {
  visibility: hidden;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
}
.sk-gp.on { visibility: visible; }
.sk-minus {
  min-height: 62px; padding-bottom: env(safe-area-inset-bottom);
  background: rgba(0, 0, 0, 0.2);
  font-size: 16px; font-weight: 600; letter-spacing: 0.08em;
}
.sk-minus:active { background: rgba(0, 0, 0, 0.35); }

/* -------------------------------------------------------- switch flash ---- */
.sk-switch {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center;
  background: var(--sand); color: var(--ink);
  cursor: pointer;
}
.sk-switch[hidden] { display: none; }
.sk-switch-title { font-size: clamp(64px, 20vw, 140px); margin: 0; }
.sk-switch-score { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.06em; }
.sk-switch-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
/* Outlined in the text colour, so they stay visible on both flash frames. */
.sk-switch .pill { color: inherit; border-color: currentColor; background: transparent; }
.sk-switch .pill-hot { border-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .sk-switch:not([hidden]) { animation: sk-flash 0.5s steps(1) 6; }
}
@keyframes sk-flash { 50% { background: var(--ink); color: var(--sand); } }

/* ------------------------------------------------------ serve picker ---- */
.sk-serve-picks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px;
  margin-bottom: 14px;
}
.sk-serve-label {
  margin: 0 0 2px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--ink-55);
}
.sk-serve-pick {
  display: block; width: 100%; min-height: 52px; margin-top: 8px; padding: 10px 12px;
  border: 0; border-radius: var(--radius); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  touch-action: manipulation;
}

/* Over the board, the game-over and end-game cards' buttons stack full width. */
#sk-over .pill, #sk-quit .pill { flex: 1 1 100%; }