/* Darts scoreboard and checkout calculator (darts.js). Scoped to [data-darts] and darts- classes. */
[data-darts] .darts-x01, [data-darts] .darts-co { display: flex; flex-direction: column; gap: 12px; }
[data-darts] .darts-x01[hidden], [data-darts] .darts-co[hidden] { display: none; }

/* status line */
.darts-status { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font-size: 15px; padding: 0 4px; }
.darts-status b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* players */
.darts-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.darts-p { --pc: #276ef1; min-width: 0; background: var(--canvas); border-radius: 12px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px;
  border-top: 6px solid var(--pc); box-shadow: inset 0 0 0 2px transparent; }
.darts-p.is-cur { box-shadow: inset 0 0 0 3px var(--ink); }
.darts-p-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.darts-colour { border: 0; background: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.darts-colour:hover { background: var(--soft); }
.darts-colour .dot { margin: 0; }
.darts-name { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font-weight: 600; padding: 6px; border-radius: var(--input); }
.darts-name:focus { background: var(--soft); outline: none; }
.darts-name::placeholder { color: var(--mute); }
.darts-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); white-space: nowrap; }
.darts-p.is-cur .darts-tag { background: var(--ink); color: var(--on-ink); border-radius: var(--pill); padding: 3px 8px; }
.darts-p.is-win .darts-tag { background: var(--signal); color: #fff; border-radius: var(--pill); padding: 3px 8px; }
.darts-rem { text-align: center; font-size: clamp(64px, 16vw, 132px); padding: 4px 0; border-radius: 10px; }
.darts-players[data-n="3"] .darts-rem, .darts-players[data-n="4"] .darts-rem { font-size: clamp(48px, 11vw, 96px); }
.darts-players[data-n="5"] .darts-rem, .darts-players[data-n="6"] .darts-rem, .darts-players[data-n="7"] .darts-rem, .darts-players[data-n="8"] .darts-rem { font-size: clamp(40px, 9vw, 72px); }
.darts-p-co { min-height: 24px; text-align: center; font-weight: 700; font-size: 15px; color: var(--mute); }
.darts-p-co.is-route { color: var(--ink); }
.darts-p-co.is-route::before { content: "Checkout "; font-weight: 500; color: var(--mute); }
.darts-p-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 13px; color: var(--body); }
.darts-p-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* entry */
.darts-entry { display: flex; flex-direction: column; gap: 12px; }
.darts-entry-top { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.darts-entry .seg, .darts-co .seg { background: var(--soft); }
.darts-entry .pill:not(.pill-ink), .darts-co .darts-co-step .pill { background: var(--soft); }
.darts-entry .pill:not(.pill-ink):hover { background: var(--pressed); }
.darts-pad { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .darts-pad { grid-template-columns: 1fr 1fr; align-items: start; } }
.darts-left { display: flex; flex-direction: column; gap: 10px; }
.darts-readout { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: var(--softer); border-radius: 10px; padding: 8px 14px; }
.darts-readout .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.darts-typed { font-size: 56px; }
.darts-typed.is-empty { color: var(--mute); }
.darts-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.darts-quick .pill { padding: 8px 4px; min-height: 48px; font-weight: 600; font-variant-numeric: tabular-nums; }
.darts-quick .pill:first-child { grid-column: span 5; }
@media (min-width: 400px) { .darts-quick .pill:first-child { grid-column: span 1; font-size: 13px; } }
.darts-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.darts-key { min-height: 58px; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.darts-who { margin: 0; }
.darts-thrown { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.darts-slot { text-align: center; border-radius: 10px; padding: 10px 4px; background: var(--softer); color: var(--mute); font-weight: 600; }
.darts-slot.is-set { background: var(--ink); color: var(--on-ink); font-weight: 800; font-size: 20px; padding: 7px 4px; }
.darts-slot-sum { min-width: 56px; text-align: right; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.darts-mult { display: flex; }
.darts-mult button { flex: 1; min-height: 48px; }
.darts-dtyped { margin: 0; min-height: 20px; font-size: 14px; }
.darts-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.darts-num { padding: 8px 2px; min-height: 52px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.darts-num.darts-wide { grid-column: span 1; }
.darts-nums .darts-wide:nth-last-child(3) { grid-column: 1 / span 2; }
.darts-nums .darts-wide:nth-last-child(2) { grid-column: 3 / span 2; }
.darts-finish { background: var(--softer); border-radius: 10px; padding: 12px; }
.darts-finish p { margin: 0 0 10px; font-weight: 700; }
.darts-statbox table { font-size: 14px; min-width: 520px; }
.darts-statbox .dot { display: inline-block; margin: 0 4px 0 0; }

/* focus mode: use the height for the players */
body.is-focus [data-darts] .darts-statbox { display: none; }

/* checkout calculator */
.darts-co-top { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.darts-co-field { flex: 1; min-width: 160px; }
.darts-co-field input { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; padding: 8px 14px; }
.darts-co-step { display: flex; gap: 8px; }
.darts-co-step .pill.round { background: var(--canvas); }
.darts-co-opts .seg { background: var(--canvas); }
.darts-co-result { min-height: 150px; }
.darts-co-label { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--body); }
.darts-route { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.darts-route .darts-chip { font-size: clamp(30px, 8vw, 48px); padding: 8px 20px; }
.darts-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; border-radius: var(--pill); background: var(--soft); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; padding: 4px 12px; }
.darts-chip.is-dbl { background: var(--ink); color: var(--on-ink); }
.darts-alts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.darts-alts li { display: flex; gap: 4px; }
.darts-co-none { font-size: 18px; font-weight: 600; margin: 0; }
.darts-co-table { font-size: 15px; }
.darts-co-table td:nth-child(2) { text-align: left; font-weight: 600; }
.darts-co-table th:nth-child(2) { text-align: left; }
.darts-co-table tr.is-cur td { background: var(--soft); }
.darts-pick { border: 0; background: none; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; padding: 6px 10px; border-radius: var(--pill); min-width: 48px; min-height: 36px; }
.darts-pick:hover { background: var(--pressed); }
.darts-pick:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.darts-co-panel > div { max-height: 560px; overflow-y: auto; }

@media (max-width: 520px) {
  .darts-players { grid-template-columns: 1fr 1fr; }
  .darts-players[data-n="1"] { grid-template-columns: 1fr; }
  .darts-p { padding: 6px 6px 8px; }
  .darts-name { padding: 4px; font-size: 15px; }
  .darts-tag { font-size: 10px; }
  .darts-p-co { font-size: 13px; }
  .darts-typed { font-size: 44px; }
  .darts-quick { grid-template-columns: repeat(5, 1fr); }
  .darts-key { min-height: 54px; }
  .darts-num { font-size: 18px; min-height: 48px; }
}

/* display window (?display=1) */
body.darts-display { background: #000; overflow: hidden; }
body.darts-display > :not(.darts-dsp) { display: none !important; }
.darts-dsp { --d-ink: #fff; --d-mute: #9a9a9a; position: fixed; inset: 0; background: #000; color: var(--d-ink); display: flex; flex-direction: column; padding: 2vh 2vw; gap: 2vh; font-variant-numeric: tabular-nums; }
.darts-dsp.is-idle { cursor: none; }
.darts-dsp-head { display: flex; flex-wrap: wrap; justify-content: center; gap: 1vh 4vw; color: var(--d-mute); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: min(3vw, 4.5vh); }
.darts-dsp-head b { color: var(--d-ink); }
.darts-dsp-main { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 2vh 2vw; }
.darts-dsp-main[data-n="1"] { grid-template-columns: 1fr; }
.darts-dsp-main[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.darts-dsp-main[data-n="4"], .darts-dsp-main[data-n="7"], .darts-dsp-main[data-n="8"] { grid-template-columns: repeat(4, 1fr); }
.darts-dsp-main[data-n="5"], .darts-dsp-main[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
.darts-dsp-p { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: .6vh; border-radius: 16px; padding: 1vh 1vw; border: 4px solid transparent; }
.darts-dsp-p.is-cur { border-color: var(--d-ink); }
.darts-dsp-bar { width: 100%; height: max(8px, 1.6vh); border-radius: 999px; background: var(--tc); }
.darts-dsp-name { max-width: 100%; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: min(4.5vw, 6vh); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.darts-dsp-rem { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-size: min(22vw, 36vh); }
.darts-dsp-main[data-n="3"] .darts-dsp-rem, .darts-dsp-main[data-n="5"] .darts-dsp-rem, .darts-dsp-main[data-n="6"] .darts-dsp-rem { font-size: min(14vw, 22vh); }
.darts-dsp-main[data-n="4"] .darts-dsp-rem, .darts-dsp-main[data-n="7"] .darts-dsp-rem, .darts-dsp-main[data-n="8"] .darts-dsp-rem { font-size: min(10vw, 20vh); }
.darts-dsp-co { font-weight: 800; font-size: min(4vw, 6vh); min-height: 1.2em; text-align: center; }
.darts-dsp-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6vh 2vw; font-size: min(2.4vw, 3.6vh); color: var(--d-mute); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.darts-dsp-stats b { color: var(--d-ink); font-weight: 800; font-size: 1.3em; margin-left: .3em; }
.darts-dsp-tag { background: var(--d-ink); color: #000; border-radius: 999px; padding: .15em .7em; font-weight: 800; }
.darts-dsp-tag.darts-dsp-win { background: var(--signal, #04844a); color: #fff; }
.darts-dsp-ui { position: fixed; right: 16px; bottom: 16px; left: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; transition: opacity .4s; font-size: 14px; color: var(--d-mute); }
.darts-dsp.is-idle .darts-dsp-ui { opacity: 0; pointer-events: none; }
.darts-dsp-btn { border: 0; border-radius: 999px; background: #1c1c1c; color: #fff; font: inherit; font-size: 16px; font-weight: 600; min-height: 48px; padding: 10px 20px; cursor: pointer; }
.darts-dsp-btn:hover { background: #2e2e2e; }
.darts-dsp-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (orientation: portrait) {
  .darts-dsp-main, .darts-dsp-main[data-n] { grid-template-columns: repeat(2, 1fr); }
  .darts-dsp-main[data-n="1"] { grid-template-columns: 1fr; }
  .darts-dsp-rem, .darts-dsp-main[data-n] .darts-dsp-rem { font-size: min(18vw, 14vh); }
}