/*
  PicklePlay live board. Loaded after site.css on live.html, and on its own by the
  WordPress shortcode (it re-declares the tokens it needs so it works standalone).
  Flexbox only. JavaScript fills these containers with content; it never sets layout.
*/
.pp-board {
  --court: #1b3a63; --court-deep: #0f2440; --court-card: #173156; --kitchen: #2e7a57;
  --ball: #dceb3c; --line: #ffffff; --flag: #f0643c; --soft: #b9c7da; --rule: rgba(255,255,255,.18);
  --font-display: "Big Shoulders", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  background: var(--court-deep);
  color: var(--line);
  font-family: var(--font-body);
  padding: 40px 24px 72px;
}
.pp-board * { box-sizing: border-box; }
.pp-board .pp-inner { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.pp-board h1, .pp-board h2, .pp-board h3 { font-family: var(--font-display); letter-spacing: 0; margin: 0; color: var(--line); }
.pp-board h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; line-height: 1; }
.pp-board p { margin: 0; }
.pp-board :focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; }

/* ---------- Board header ---------- */
.pp-head { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; border-bottom: 4px solid var(--line); padding-bottom: 28px; }
.pp-head-main { display: flex; flex-direction: column; gap: 8px; flex: 1 1 520px; min-width: 0; }
.pp-title { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 900; line-height: .95; }
.pp-subtitle { font-size: 1.25rem; font-weight: 700; color: var(--line); }
.pp-meta { color: var(--soft); font-size: 1rem; }
.pp-head-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 0 1 auto; }
.pp-status {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px;
  font-weight: 700; font-size: 1.05rem; background: var(--line); color: var(--court-deep);
}
.pp-status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--court); }
.pp-status[data-state="live"] { background: var(--ball); }
.pp-status[data-state="live"]::before { background: #c0392b; animation: pp-pulse 1.6s ease-in-out infinite; }
.pp-status[data-state="final"]::before { background: var(--kitchen); }
.pp-updated { color: var(--soft); font-size: 1rem; }
.pp-updated strong { color: var(--line); }
@keyframes pp-pulse { 50% { opacity: .25; } }

/* ---------- Notices ---------- */
.pp-notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 6px; font-size: 1.05rem; background: var(--flag); color: #1a1206; font-weight: 600; }
.pp-notice[hidden] { display: none; }
.pp-notice strong { font-weight: 800; }
.pp-notice--info { background: var(--line); color: var(--court-deep); font-weight: 400; }
.pp-board[data-stale="true"] .pp-courts { opacity: .72; }

/* ---------- Content wrapper ---------- */
.pp-content { display: flex; flex-direction: column; gap: 56px; }
.pp-content[hidden], .pp-board [hidden] { display: none; }
.pp-bracket-wrap { display: flex; flex-direction: column; gap: 32px; }
.pp-board .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-notice a { color: inherit; font-weight: 700; }

/* ---------- Sections ---------- */
.pp-section { display: flex; flex-direction: column; gap: 20px; }
.pp-section-head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; }
.pp-section-note { color: var(--soft); font-size: 1rem; }
.pp-empty { color: var(--soft); font-size: 1.1rem; padding: 20px 0; border-top: 1px solid var(--rule); }

/* ---------- Court cards ---------- */
.pp-courts { display: flex; flex-wrap: wrap; gap: 24px; }
.pp-court {
  flex: 1 1 340px; max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--court-card); border: 2px solid var(--line); border-radius: 4px;
}
.pp-court[data-status="disputed"] { border-color: var(--flag); }
.pp-court-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 18px 10px; flex-wrap: wrap; }
.pp-court-name { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; line-height: 1; }
.pp-court-stage { color: var(--soft); font-size: .98rem; text-align: right; }
.pp-side { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.pp-side + .pp-side { border-top: 2px solid var(--line); } /* the net */
.pp-serve { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; }
.pp-side[data-serving="true"] .pp-serve { background: var(--ball); box-shadow: 0 0 0 3px rgba(220,235,60,.25); }
.pp-names { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 1.28rem; font-weight: 700; line-height: 1.25; }
.pp-names span { overflow-wrap: anywhere; }
.pp-team { font-size: .92rem; font-weight: 600; color: var(--soft); display: inline-flex; align-items: center; gap: 6px; }
.pp-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--swatch, var(--soft)); display: inline-block; }
.pp-games { display: flex; gap: 5px; flex: 0 0 auto; }
.pp-games i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--soft); display: block; }
.pp-games i.won { background: var(--line); border-color: var(--line); }
.pp-score {
  font-family: var(--font-display); font-weight: 900; font-size: 4.2rem; line-height: .9;
  min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums;
}
.pp-side[data-serving="true"] .pp-score { color: var(--ball); }
.pp-court-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px 16px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.pp-call { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--ball); }
.pp-call small { font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--soft); margin-right: 8px; }
.pp-prev { color: var(--soft); font-size: .95rem; }
.pp-flag { color: var(--flag); font-weight: 700; }

/* ---------- Two-up row (next + finished, standings + bracket) ---------- */
.pp-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.pp-split > .pp-section { flex: 1 1 440px; min-width: 0; }

/* ---------- Match lists ---------- */
.pp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pp-item { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.pp-item:last-child { border-bottom: 1px solid var(--rule); }
.pp-item-court { flex: 0 0 4.2em; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.05; color: var(--soft); }
.pp-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-item-sides { font-size: 1.08rem; line-height: 1.35; }
.pp-item-sides b { color: var(--ball); font-weight: 700; }
.pp-item-sides .vs { color: var(--soft); }
.pp-nowrap { white-space: nowrap; }
.pp-item-stage { color: var(--soft); font-size: .92rem; }
.pp-item-score { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Standings table ---------- */
.pp-table-wrap { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.pp-table caption { text-align: left; color: var(--soft); font-size: .95rem; padding-bottom: 10px; }
.pp-table th { text-align: right; font-size: .9rem; color: var(--soft); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--line); }
.pp-table td { text-align: right; padding: 11px 10px; border-bottom: 1px solid var(--rule); }
.pp-table th:nth-child(-n+2), .pp-table td:nth-child(-n+2) { text-align: left; }
.pp-table td:first-child { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; width: 3em; }
.pp-table td:nth-child(2) { font-weight: 700; }
.pp-table tr:first-child td:first-child { color: var(--ball); }
.pp-pos { color: var(--ball); }
.pp-neg { color: #ffb4a1; }

/* ---------- Bracket: one flex column per round ---------- */
.pp-bracket-side { display: flex; flex-direction: column; gap: 14px; }
.pp-bracket-side h3 { font-size: 1.5rem; font-weight: 700; color: var(--soft); }
.pp-bracket { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; }
.pp-round { flex: 0 0 250px; display: flex; flex-direction: column; gap: 12px; }
.pp-round-title { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.pp-round-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.pp-node { display: flex; flex-direction: column; background: var(--court-card); border: 1px solid var(--rule); border-radius: 4px; }
.pp-node[data-live="true"] { border: 2px solid var(--ball); }
.pp-node-label { font-size: .82rem; color: var(--soft); padding: 6px 10px 0; display: flex; justify-content: space-between; gap: 8px; }
.pp-node-label .live { color: var(--ball); font-weight: 700; }
.pp-slot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: .98rem; line-height: 1.25; }
.pp-slot + .pp-slot { border-top: 1px solid var(--rule); }
.pp-slot .seed { flex: 0 0 1.6em; color: var(--soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
.pp-slot .who { flex: 1 1 auto; min-width: 0; }
.pp-slot .pts { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pp-slot[data-won="true"] .who { font-weight: 700; color: var(--ball); }
.pp-slot[data-lost="true"] .who { color: var(--soft); }
.pp-slot .tbd { color: var(--soft); font-style: italic; }

/* ---------- Sitting out ---------- */
.pp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pp-chips li { border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; font-weight: 600; }

/* ---------- Board footer ---------- */
.pp-foot { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--soft); font-size: .95rem; border-top: 1px solid var(--rule); padding-top: 20px; }
.pp-foot a { color: var(--line); }

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  .pp-board { padding: 24px 16px 56px; }
  .pp-board .pp-inner { gap: 36px; }
  .pp-court { flex-basis: 100%; }
  .pp-score { font-size: 3.4rem; }
  .pp-names { font-size: 1.15rem; }
  .pp-table .opt { display: none; }
  .pp-court-stage { text-align: left; flex-basis: 100%; }
  .pp-item { gap: 12px; }
  .pp-item-court { flex-basis: 3.3em; font-size: 1.05rem; }
  .pp-item-score { font-size: 1.25rem; }
  .pp-round { flex-basis: 220px; }
}

/* ---------- TV at the desk: bigger everything ---------- */
@media (min-width: 1600px) {
  .pp-board { font-size: 1.15rem; padding: 48px 48px 80px; }
  .pp-board .pp-inner { max-width: 2200px; }
  .pp-court { flex-basis: 420px; }
  .pp-court-name { font-size: 2.8rem; }
  .pp-names { font-size: 1.6rem; }
  .pp-score { font-size: 5.6rem; }
  .pp-call { font-size: 2.1rem; }
  .pp-round { flex-basis: 300px; }
}
@media (min-width: 2400px) {
  .pp-board { font-size: 1.5rem; }
  .pp-names { font-size: 2.1rem; }
  .pp-score { font-size: 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-status[data-state="live"]::before { animation: none; }
}

/* ---------- WordPress/Elementor embed ----------
   On the WordPress site the page's native Elementor containers draw the board's frame, heading,
   notices, and footer. These two HTML-widget mounts only hold the live data. */
.pp-board.pp-embed { padding: 0; background: transparent; display: flex; flex-direction: column; gap: 48px; }
.pp-board.pp-embed-status { gap: 0; }
[data-pp][hidden], .elementor-element[data-pp][hidden] { display: none !important; }
@media (max-width: 700px) {
  .pp-board.pp-embed { padding: 0; gap: 36px; }
  .pp-board.pp-embed-status { gap: 0; }
}