/* KaPickle. Phone first: the scoreboard is meant to be held in one hand by a
   scorer standing at the net post, and still be readable by the players a few
   steps away. Turning the phone sideways switches it to a big court display. */

:root {
  --app: #F4F7FA; --paper: #E8EEF4; --ink: #10202C; --muted: #5A6B79; --icon: #8B9AA6;
  --line: #DCE5EC; --card: #FFFFFF; --card-line: #E3EAF0;
  --accent: #0F3D5C; --accent-soft: #E1EDF5; --accent-ink: #0F3D5C;
  --ball: #8FA91F; --ball-soft: #F0F5DC; --ball-ink: #5E7010;
  --red: #C0392B; --gold: #B5731A; --gold-soft: #FBF0DC;
  --court: #1D4E72; --court-line: #F2F6EA; --kitchen: #A4402F;
  --good-bg: #E4F1E8; --good-ink: #22633E;
  --bad-bg: #F9E7E5; --bad-ink: #93302A;
  --shadow: rgba(16, 32, 44, 0.13);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app: #0E1B26; --paper: #132532; --ink: #E7EEF3; --muted: #9DACB8; --icon: #6B7A87;
    --line: #22394A; --card: #162937; --card-line: #263F52;
    --accent: #58A6D8; --accent-soft: #17303F; --accent-ink: #9CCBE8;
    --ball: #B7D336; --ball-soft: #1E2A14; --ball-ink: #C6DE59;
    --red: #E2685A; --gold: #D9A94E; --gold-soft: #2E2716;
    --court: #16405E; --court-line: #DCE7D6; --kitchen: #8E3527;
    --good-bg: #17301F; --good-ink: #8ACFA5;
    --bad-bg: #351F1D; --bad-ink: #F0A79E;
    --shadow: rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--app); color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 16px; line-height: 1.5;
  overscroll-behavior-y: contain;
}
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--accent); font-weight: 600; }
.hidden { display: none !important; }

/* ---------- chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; cursor: pointer; }
.brand .logo { width: 30px; height: 30px; flex: 0 0 auto; }
.topbar .right { display: flex; align-items: center; gap: 8px; }
.chip {
  background: var(--accent-soft); color: var(--accent-ink);
  padding: 6px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700;
  border: none; cursor: pointer; white-space: nowrap;
}
.chip.ball { background: var(--ball-soft); color: var(--ball-ink); }
.chip.live { background: var(--bad-bg); color: var(--bad-ink); }
.back { background: none; border: none; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; }

.screen { flex: 1; padding: 14px; }
h2 { font-size: 20px; margin: 4px 0 6px; }
h3 { font-size: 15px; margin: 18px 0 8px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.center { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8vh; text-align: center; }

/* ---------- controls ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 12px; padding: 13px 16px;
  font-size: 15px; font-weight: 700; cursor: pointer; width: 100%;
  background: var(--accent); color: #fff; font-family: inherit;
}
.btn:active { transform: scale(0.99); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--card-line); }
.btn.ball { background: var(--ball); color: #12200A; }
.btn.red { background: var(--red); color: #fff; }
.btn.gold { background: var(--gold); color: #fff; }
.btn.small { width: auto; padding: 9px 13px; font-size: 13px; border-radius: 10px; }
.btn.tiny { width: auto; padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.row.tight { gap: 6px; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 700; }
.field .hint { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 4px; }
input, select, textarea {
  width: 100%; padding: 12px; border-radius: 10px;
  border: 1px solid var(--card-line); background: var(--app); color: var(--ink);
  font-size: 15px; font-family: inherit;
}
textarea { min-height: 96px; resize: vertical; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; }
.switch input { width: 20px; height: 20px; flex: 0 0 auto; }
.switch .sw-label { flex: 1; }
.switch .sw-label small { display: block; color: var(--muted); font-size: 11.5px; }

.segs { display: flex; flex-wrap: wrap; border: 1px solid var(--card-line); border-radius: 10px; overflow: hidden; background: var(--card); }
.seg { flex: 1 1 auto; border: none; background: transparent; color: var(--muted); padding: 10px 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.seg.on { background: var(--accent); color: #fff; }

/* ---------- cards & lists ---------- */
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 13px; margin-bottom: 10px; }
.card.tap { cursor: pointer; }
.card .ttl { font-weight: 800; font-size: 15px; }
.card .meta { color: var(--muted); font-size: 12.5px; }
.empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 26px 12px; }

.plist { display: flex; flex-direction: column; gap: 6px; }
.prow {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 12px; padding: 9px 11px;
}
.prow.off { opacity: 0.5; }
.prow .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .nm small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.av {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
}
.tag { font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 99px; letter-spacing: .3px; }
.tag.guest { background: var(--paper); color: var(--muted); }
.tag.you { background: var(--accent-soft); color: var(--accent-ink); }
.tag.scorer { background: var(--ball-soft); color: var(--ball-ink); }
.tag.org { background: var(--gold-soft); color: var(--gold); }
.tag.rest { background: var(--paper); color: var(--muted); }

/* skill shown as filled pips, 1.0 to 5.0 in half steps */
.pips { display: inline-flex; gap: 2px; align-items: center; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.pip.on { background: var(--ball); }
.pip.half { background: linear-gradient(90deg, var(--ball) 50%, var(--line) 50%); }

/* ---------- run screen: courts ---------- */
.court-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.court-card.live { border-color: var(--ball); box-shadow: 0 0 0 1px var(--ball) inset; }
.court-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.court-no { font-weight: 900; font-size: 15px; }
.vs-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.vs-team { min-width: 0; }
.vs-team .p { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-team .sk { color: var(--muted); font-size: 11.5px; }
.vs-team.right { text-align: right; }
.vs-mid { font-size: 11px; font-weight: 800; color: var(--muted); }
.vs-score { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.win { color: var(--good-ink); }

/* ---------- the scoreboard ---------- */
.board { display: flex; flex-direction: column; min-height: 100dvh; background: var(--app); }
.board-top { padding: 10px 14px 0; }
.board-ctx { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.board-teams { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 2px; font-size: 13.5px; font-weight: 700; }

/* the call: the three numbers the scorer shouts */
.callbox { text-align: center; padding: 6px 12px 10px; }
.call {
  font-size: clamp(56px, 19vw, 104px); font-weight: 900; line-height: 0.95;
  font-variant-numeric: tabular-nums; letter-spacing: -2px; color: var(--ink);
}
.call .dim { color: var(--icon); }
.call-key { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--muted); margin-top: 2px; }

.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px; }
.side-box { background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: 9px 11px; text-align: center; }
.side-box.serving { border-color: var(--ball); background: var(--ball-soft); }
.side-box .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.side-box .num { font-size: 34px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.side-box .who { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.serve-line { margin: 10px 14px 0; background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.serve-line b { color: var(--ball-ink); }
.serve-line .row2 { color: var(--muted); font-size: 12.5px; }

.board-actions { margin-top: auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.bigbtn {
  width: 100%; border: none; border-radius: 16px; cursor: pointer; font-family: inherit;
  font-size: 23px; font-weight: 900; letter-spacing: 1px; padding: 22px 12px;
  background: var(--ball); color: #12200A;
}
.bigbtn.dark { background: var(--accent); color: #fff; font-size: 18px; padding: 18px 12px; }
.bigbtn:active { transform: scale(0.99); }
.bigbtn:disabled { opacity: 0.4; }

.nextbar { margin: 10px 14px 0; background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.nextbar .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }

/* the drawn court, shown in landscape and on wide screens */
.courtview { display: none; }
.courtbox {
  display: grid; grid-template-columns: 1fr 14px 14px 1fr;
  background: var(--court); border-radius: 10px; overflow: hidden;
  border: 2px solid var(--court-line); min-height: 210px;
}
.cside { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; padding: 3px; }
.cbox {
  border: 2px solid var(--court-line); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-weight: 800; font-size: clamp(13px, 2.4vw, 21px);
  padding: 4px; position: relative; min-width: 0;
}
.cbox span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cbox.server { background: rgba(191, 215, 59, 0.34); border-color: var(--ball); }
.cbox.receiver { background: rgba(255, 255, 255, 0.12); border-style: dashed; }
.cbox .role { position: absolute; top: 3px; left: 5px; font-size: 9px; letter-spacing: 1px; opacity: .85; font-weight: 800; }
.kitchen { background: var(--kitchen); }

/* ---------- the board turned sideways: a big display ----------
   Rotate the phone, or open it on a tablet or laptop, and the board stops
   being a one-handed control and becomes something players read from across
   the court. The score spans the full width, flanked by the two team totals,
   with the court underneath and the two actions side by side.

   Only the board breaks out of the phone-width column (body.board-mode),
   because every other screen is a list and reads better narrow. */
@media (orientation: landscape), (min-width: 820px) {
  body.board-mode #app { max-width: none; }

  /* side A | the call | side B, then the serve line across the bottom */
  body.board-mode .board-portrait {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 1.3fr) 1fr;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
  }
  body.board-mode .board-portrait .sides { display: contents; }
  body.board-mode #bdSideA { order: 1; }
  body.board-mode .callbox { order: 2; padding: 0; }
  body.board-mode #bdSideB { order: 3; }
  body.board-mode .serve-line { order: 4; grid-column: 1 / -1; margin: 4px 0 0; }

  /* Sized off height as well as width so a rotated phone never overflows. */
  body.board-mode .call { font-size: min(13vw, 26vh); letter-spacing: -3px; }
  body.board-mode .call-key { font-size: 12px; }
  body.board-mode .side-box { padding: 10px 12px; }
  body.board-mode .side-box .num { font-size: min(8vw, 17vh); }
  body.board-mode .side-box .lbl { font-size: min(1.5vw, 15px); }
  body.board-mode .side-box .who { font-size: min(1.4vw, 14px); }
  body.board-mode .board-teams { font-size: 15px; }

  /* Let the court take the room between the score and the buttons instead of
     leaving a gap: on a laptop that gap was most of the screen. */
  body.board-mode .courtview {
    display: flex; flex-direction: column; flex: 1 1 auto;
    padding: 12px 18px 0; min-height: 0;
  }
  body.board-mode .courtbox { flex: 1 1 auto; min-height: min(26vh, 200px); max-height: 52vh; }
  body.board-mode .cbox { font-size: min(2.6vw, 30px); }

  body.board-mode .board-actions {
    flex-direction: row; align-items: stretch; gap: 10px; padding: 12px 18px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  body.board-mode .board-actions .bigbtn { flex: 2 1 0; font-size: min(3.2vw, 32px); padding: 18px 10px; }
  body.board-mode .board-actions .bigbtn.dark { font-size: min(2.4vw, 23px); }
  body.board-mode .board-actions .row.tight { flex: 1 1 0; }
}

/* A short landscape phone has no room for the court as well; drop it and let
   the score take everything. */
@media (orientation: landscape) and (max-height: 460px) {
  body.board-mode .courtview { display: none; }
  body.board-mode .nextbar { display: none; }
  body.board-mode .serve-line { padding: 6px 12px; }
}

@media (min-width: 720px) {
  .courtview { display: block; padding: 10px 14px 0; }
}
/* On a tall phone in portrait there is dead space between the score and the
   buttons. Put the drawn court there: it shows who is standing where, which is
   what the scorer is looking at anyway. */
@media (orientation: portrait) and (min-height: 700px) {
  .courtview { display: block; padding: 12px 14px 0; }
  .courtview .courtbox { min-height: 180px; }
}

/* ---------- standings, podium, report ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: right; font-size: 10.5px; letter-spacing: .6px; color: var(--muted);
  font-weight: 800; padding: 6px 5px; border-bottom: 1px solid var(--line);
}
.table th:nth-child(1), .table th:nth-child(2) { text-align: left; }
.table td { padding: 8px 5px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.table td:nth-child(1) { text-align: left; color: var(--muted); font-weight: 800; width: 26px; }
.table td:nth-child(2) { text-align: left; font-weight: 700; }
.table tr.me td { background: var(--accent-soft); }
.table tr.unq td { opacity: .55; }
.table td small { color: var(--muted); font-weight: 400; }

.podium { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pod {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--card-line);
  border-left: 5px solid var(--line); border-radius: 12px; padding: 11px 13px;
}
.pod.p1 { border-left-color: var(--gold); background: var(--gold-soft); }
.pod.p2 { border-left-color: var(--icon); }
.pod.p3 { border-left-color: #A9743B; }
.pod .pos { font-size: 22px; font-weight: 900; width: 26px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pod.p1 .pos { color: var(--gold); }
.pod .who { flex: 1; min-width: 0; }
.pod .who b { display: block; font-size: 16px; }
.pod .who small { color: var(--muted); font-size: 12px; }
.pod .score { text-align: right; font-size: 13px; font-weight: 800; }
.pod .score small { display: block; color: var(--muted); font-weight: 400; font-size: 11.5px; }

.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.award { background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: 10px 11px; }
.award .lbl { font-size: 10px; font-weight: 800; letter-spacing: .8px; color: var(--muted); }
.award .nm { font-weight: 800; font-size: 14.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.award .det { font-size: 11.5px; color: var(--muted); }

.log { font-size: 12.5px; }
.log .lg { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.log .lg .t { flex: 1; min-width: 0; }
.log .lg .s { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- misc ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--app); padding: 11px 17px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 100; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.sheet {
  position: fixed; inset: 0; background: rgba(8, 18, 26, .55); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-inner {
  background: var(--card); width: 100%; max-width: 560px;
  border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
}
.sheet h3 { margin-top: 0; }

.banner { background: var(--accent-soft); color: var(--accent-ink); border-radius: 12px; padding: 11px 13px; font-size: 13px; margin-bottom: 10px; }
.banner.warn { background: var(--gold-soft); color: var(--gold); }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 20px 10px 26px; }
.foot a { color: var(--muted); margin: 0 7px; }
.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

@media print {
  .topbar, .board-actions, .btn, .foot { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .pod, .award { border-color: #bbb; break-inside: avoid; }
}