/* ui-kit.css — the bowling UI kit's CSS, copied VERBATIM out of UI-KIT.md by
   script, one block per component in the kit's order. Do not edit it here:
   change the component in UI Stock, export again, and re-extract. Placement
   and token overrides live in the page that uses it, after this file. */

/* ---------------- Lane Scoreboard (bw-scoreboard) ---------------- */
.bw-scoreboard {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-scoreboard[data-theme="light"], [data-theme="light"] .bw-scoreboard {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-scoreboard {
  font-family: var(--bw-font);
  width: 324px;
  padding: 8px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.bw-scoreboard__grid { display: grid; grid-template-columns: 54px 1fr; row-gap: 4px; }
.bw-scoreboard__nums, .bw-scoreboard__frames { display: grid; grid-template-columns: repeat(9, 1fr) 1.9fr; gap: 2px; }
.bw-scoreboard__nums span { text-align: center; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: var(--bw-ink-2); }
.bw-scoreboard__who { display: flex; flex-direction: column; justify-content: center; padding: 0 4px 0 7px; border-left: 3px solid transparent; border-radius: 3px; min-width: 0; }
.bw-scoreboard__who b { font-size: 11px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-scoreboard__who span { font-size: 15px; font-weight: 900; line-height: 1.1; color: var(--bw-ink-2); }
.bw-scoreboard__who.is-up { border-left-color: var(--bw-held); }
.bw-scoreboard__who.is-up span { color: var(--bw-ink); }
.bw-scoreboard__f { height: 36px; border-radius: 4px; background: var(--bw-sunk); display: grid; grid-template-rows: 15px 1fr; overflow: hidden; }
.bw-scoreboard__f.is-now { box-shadow: inset 0 0 0 1.5px var(--bw-accent); background: color-mix(in srgb, var(--bw-accent) 22%, var(--bw-sunk)); }
.bw-scoreboard__balls { display: flex; justify-content: flex-end; }
.bw-scoreboard__balls i {
  width: 11px; height: 13px; display: grid; place-items: center;
  font-style: normal; font-size: 9.5px; font-weight: 900;
  border-left: 1px solid var(--bw-line); border-bottom: 1px solid var(--bw-line);
}
.bw-scoreboard__balls i.is-mark { color: var(--bw-gold); }
.bw-scoreboard__balls i.is-new { animation: bw-scoreboard-pop .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes bw-scoreboard-pop { from { transform: scale(2); } to { transform: none; } }
.bw-scoreboard__cum { display: grid; place-items: center; font-size: 10.5px; font-weight: 800; }
.bw-scoreboard__foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; padding: 6px 2px 0 6px; border-top: 1px solid var(--bw-line); }
.bw-scoreboard__status { margin-right: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--bw-ink-2); white-space: nowrap; }
.bw-scoreboard__status em { font-style: normal; color: var(--bw-gold); }
.bw-scoreboard__roll {
  border: 0; border-radius: 8px; cursor: pointer; padding: 7px 14px;
  font: 900 11px/1 var(--bw-font); letter-spacing: .14em;
  color: var(--bw-on); background: var(--bw-accent);
  box-shadow: 0 3px 0 var(--bw-accent-deep);
}
.bw-scoreboard__roll:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bw-accent-deep); }
.bw-scoreboard__roll:focus-visible { outline: 2px solid var(--bw-gold); outline-offset: 2px; }

/* ---------------- Pin Rack (bw-rack) ---------------- */
.bw-rack {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-rack[data-theme="light"], [data-theme="light"] .bw-rack {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-rack {
  font-family: var(--bw-font);
  width: 208px;
  padding: 10px 12px 12px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
  user-select: none; -webkit-user-select: none;
}
.bw-rack__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 6px; }
.bw-rack__k { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--bw-ink-2); }
.bw-rack__reset { border: 0; background: none; cursor: pointer; padding: 2px 4px; border-radius: 5px; font: 800 10px/1 var(--bw-font); letter-spacing: .12em; color: var(--bw-ink-2); }
.bw-rack__reset:hover { color: var(--bw-ink); background: var(--bw-raised); }
.bw-rack__field { position: relative; width: 180px; height: 118px; margin: 0 auto; }
.bw-rack__pin {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  font: 900 10px/1 var(--bw-font); color: var(--bw-on-bright);
  background: radial-gradient(circle, var(--bw-pin) 0 34%, var(--bw-pin-stripe) 36% 48%, var(--bw-pin) 50%);
  box-shadow: 0 0 0 1.5px var(--bw-pin-edge), 0 3px 6px var(--bw-shadow);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), opacity .25s, background .2s, box-shadow .2s;
}
.bw-rack__pin:focus-visible { outline: 2px solid var(--bw-gold); outline-offset: 2px; }
.bw-rack__pin.is-down {
  background: transparent; color: var(--bw-ink-2);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bw-ink-2) 55%, transparent);
  transform: scale(.72);
}
.bw-rack__pin.is-fall { animation: bw-rack-fall .3s ease-in; }
@keyframes bw-rack-fall { 0% { transform: none; } 45% { transform: rotate(40deg) scale(.9); } 100% { transform: scale(.72); } }
.bw-rack__leave { margin-top: 8px; text-align: center; font-size: 13px; font-weight: 900; letter-spacing: .06em; min-height: 17px; }
.bw-rack__leave.is-split { color: var(--bw-held); }
.bw-rack__leave.is-strike { color: var(--bw-gold); }
.bw-rack__leave span { font-weight: 700; color: var(--bw-ink-2); letter-spacing: .04em; }

/* ---------------- Result Call (bw-call) ---------------- */
.bw-call {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-call[data-theme="light"], [data-theme="light"] .bw-call {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-call {
  font-family: var(--bw-font);
  width: 340px; height: 104px;
  display: grid; place-items: center;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.bw-call__pill {
  --bw-call-bar: var(--bw-accent);
  max-width: 100%;
  filter: drop-shadow(0 8px 14px var(--bw-shadow));
  opacity: 0;
}
.bw-call__pill.is-in { animation: bw-call-in .36s cubic-bezier(.2,1.4,.4,1) both; }
.bw-call__pill.is-out { animation: bw-call-out .2s ease-in both; }
@keyframes bw-call-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes bw-call-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.94); } }
/* a ribbon with pointed ends, not a rounded button */
.bw-call__band {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 190px; height: 62px; padding: 0 36px;
  box-sizing: border-box;
  background: var(--bw-panel); color: var(--bw-ink);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  white-space: nowrap;
}
.bw-call__text { font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: .05em; }
.bw-call__bar {
  position: absolute; left: 50%; bottom: 8px; width: 46%; height: 3px; margin-left: -23%;
  border-radius: 2px; background: var(--bw-call-bar);
  transform: scaleX(0);
}
.bw-call__pill.is-in .bw-call__bar { animation: bw-call-bar .4s .15s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes bw-call-bar { to { transform: scaleX(1); } }
/* STRIKE and SPARE carry their mark on both sides, so the word stays on centre */
.bw-call__mark { display: none; width: 26px; height: 26px; flex: none; }
.bw-call__mark path { fill: none; stroke: var(--bw-gold); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.bw-call__pill[data-kind="strike"] .bw-call__mark, .bw-call__pill[data-kind="spare"] .bw-call__mark { display: block; }
.bw-call__pill[data-kind="spare"] .bw-call__mark .is-x2 { display: none; }
.bw-call__pill.is-in .bw-call__mark path { animation: bw-call-draw .26s .2s ease-out forwards; }
.bw-call__pill.is-in .bw-call__mark .is-x2 { animation-delay: .32s; }
@keyframes bw-call-draw { to { stroke-dashoffset: 0; } }
.bw-call__pill[data-kind="strike"], .bw-call__pill[data-kind="spare"] { --bw-call-bar: var(--bw-gold); }
.bw-call__pill[data-kind="strike"] .bw-call__text, .bw-call__pill[data-kind="spare"] .bw-call__text { color: var(--bw-gold); font-size: 34px; }
.bw-call__pill[data-kind="miss"] { --bw-call-bar: var(--bw-ink-2); }
.bw-call__pill[data-kind="miss"] .bw-call__text { color: var(--bw-ink-2); }
.bw-call__pill[data-kind="turn"] { --bw-call-bar: var(--bw-held); }
.bw-call__pill[data-kind="turn"].is-in .bw-call__bar { animation: bw-call-bar .4s .15s cubic-bezier(.2,.8,.3,1) forwards, bw-call-wait 1.4s .6s ease-in-out infinite; }
@keyframes bw-call-wait { 50% { opacity: .35; } }
.bw-call__pill[data-kind="over"] { --bw-call-bar: var(--bw-gold); }

/* ---------------- Up Now (bw-up) ---------------- */
.bw-up {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-up[data-theme="light"], [data-theme="light"] .bw-up {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-up {
  font-family: var(--bw-font);
  width: 264px;
  padding: 12px 14px 12px 16px;
  border-radius: var(--bw-radius);
  border-left: 5px solid var(--bw-held);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.bw-up__k { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--bw-ink-2); }
.bw-up__left { display: none; padding: 2px 6px; border-radius: 5px; font-size: 9px; letter-spacing: .12em; color: var(--bw-on); background: var(--bw-accent); }
.bw-up.is-left .bw-up__left { display: inline-block; }
.bw-up__names { position: relative; height: 40px; margin-top: 4px; overflow: hidden; }
.bw-up__name { position: absolute; left: 0; right: 0; top: 0; font-size: 32px; line-height: 40px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-up__name.is-in { animation: bw-up-in .45s cubic-bezier(.2,1.2,.4,1) both; }
.bw-up__name.is-out { animation: bw-up-out .3s ease-in both; }
@keyframes bw-up-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bw-up-out { to { transform: translateY(-100%); opacity: 0; } }
.bw-up__sub { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.bw-up__balls { display: inline-flex; gap: 4px; }
.bw-up__balls i { width: 9px; height: 9px; border-radius: 50%; background: var(--bw-sunk); }
.bw-up__balls i.is-on { background: var(--bw-ball); box-shadow: inset -2px -2px 0 color-mix(in srgb, var(--bw-ink) 18%, transparent); }
.bw-up__next { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--bw-line); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--bw-ink-2); }
.bw-up__next b { color: var(--bw-ink); font-weight: 900; }

/* ---------------- Throw Readout (bw-throw) ---------------- */
.bw-throw {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-throw[data-theme="light"], [data-theme="light"] .bw-throw {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-throw {
  font-family: var(--bw-font);
  width: 290px;
  display: grid; grid-template-columns: 1fr 64px; gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.bw-throw__k { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--bw-ink-2); }
.bw-throw__speed { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.bw-throw__speed b { font-size: 34px; font-weight: 900; line-height: 1; }
.bw-throw__speed span { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--bw-ink-2); }
.bw-throw__bar { position: relative; height: 6px; margin: 7px 0 11px; border-radius: 3px; background: var(--bw-sunk); overflow: hidden; }
.bw-throw__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--bw-accent); transition: width .5s cubic-bezier(.2,.9,.3,1); }
.bw-throw__hook { position: relative; height: 18px; margin: 5px 0 3px; }
.bw-throw__hook::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--bw-sunk); }
.bw-throw__hook::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 12px; margin-left: -1px; background: var(--bw-ink-2); opacity: .5; }
.bw-throw__knob { position: absolute; top: 3px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bw-held); transition: left .5s cubic-bezier(.2,.9,.3,1); }
.bw-throw__hookv { font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.bw-throw__hit { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bw-line); }
.bw-throw__where { font-size: 16px; font-weight: 900; letter-spacing: .05em; }
.bw-throw__where.is-good { color: var(--bw-gold); }
.bw-throw__where.is-bad { color: var(--bw-bad); }
.bw-throw__angle { font-size: 11px; font-weight: 800; color: var(--bw-ink-2); letter-spacing: .06em; }
.bw-throw__lane { display: block; width: 64px; height: 180px; border-radius: 6px; }
.bw-throw__gutter { fill: var(--bw-gutter); }
.bw-throw__wood { fill: var(--bw-lane); }
.bw-throw__oil { fill: var(--bw-accent); opacity: .12; }
.bw-throw__pin { fill: var(--bw-pin); stroke: var(--bw-pin-edge); stroke-width: .6; }
.bw-throw__path { fill: none; stroke: var(--bw-held); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bw-throw__path.is-draw { animation: bw-throw-draw .7s ease-in-out forwards; }
@keyframes bw-throw-draw { to { stroke-dashoffset: 0; } }
.bw-throw.is-cancel .bw-throw__speed b, .bw-throw.is-cancel .bw-throw__hookv { color: var(--bw-ink-2); }

/* ---------------- Game Over (bw-over) ---------------- */
.bw-over {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-over[data-theme="light"], [data-theme="light"] .bw-over {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-over {
  font-family: var(--bw-font);
  width: 300px;
  padding: 13px 14px 12px;
  border-radius: 18px;
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 18px 50px var(--bw-shadow);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.bw-over.is-in { animation: bw-over-in .45s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes bw-over-in { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.bw-over__k { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--bw-ink-2); }
.bw-over__win { margin-top: 3px; font-size: 26px; line-height: 1.05; font-weight: 900; color: var(--bw-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-over__list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 98px; overflow: auto; }
.bw-over__row { display: grid; grid-template-columns: 20px 1fr auto 40px; align-items: center; column-gap: 8px; height: 30px; }
.bw-over__rank { font-size: 12px; font-weight: 900; color: var(--bw-ink-2); text-align: center; }
.bw-over__row.is-first .bw-over__rank { color: var(--bw-on-bright); background: var(--bw-gold); border-radius: 50%; height: 20px; line-height: 20px; }
.bw-over__who { min-width: 0; }
.bw-over__who b { display: block; font-size: 12.5px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-over__bar { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: var(--bw-sunk); overflow: hidden; }
.bw-over__bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--bw-accent); transition: width .7s cubic-bezier(.2,.9,.3,1); transition-delay: calc(var(--n) * 80ms + 150ms); }
.bw-over__row.is-first .bw-over__bar i { background: var(--bw-gold); }
.bw-over__marks { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--bw-ink-2); white-space: nowrap; }
.bw-over__total { text-align: right; font-size: 18px; font-weight: 900; }
.bw-over__again {
  display: block; width: 100%; margin-top: 10px;
  border: 0; border-radius: 11px; cursor: pointer; padding: 11px 0 10px;
  font: 900 12px/1 var(--bw-font); letter-spacing: .14em;
  color: var(--bw-on); background: var(--bw-accent); box-shadow: 0 4px 0 var(--bw-accent-deep);
}
.bw-over__again:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--bw-accent-deep); }
.bw-over__again:focus-visible { outline: 2px solid var(--bw-gold); outline-offset: 3px; }

/* ---------------- Hold to Bowl (bw-hold) ---------------- */
.bw-hold {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-hold[data-theme="light"], [data-theme="light"] .bw-hold {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-hold {
  font-family: var(--bw-font);
  width: 300px;
  padding: 12px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
}
.bw-hold__btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; height: 104px; padding: 0;
  border: 0; border-radius: 22px; cursor: pointer;
  color: var(--bw-on); background: var(--bw-accent);
  box-shadow: 0 6px 0 var(--bw-accent-deep);
  font-family: var(--bw-font);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.bw-hold__btn:focus-visible { outline: 3px solid var(--bw-gold); outline-offset: 3px; }
.bw-hold__btn.is-held { background: var(--bw-held); box-shadow: 0 2px 0 var(--bw-held-deep); transform: translateY(4px); }
.bw-hold__ring { width: 58px; height: 58px; flex: none; transform: rotate(-90deg); }
.bw-hold__ring circle { fill: none; stroke-width: 6; }
.bw-hold__track { stroke: color-mix(in srgb, var(--bw-on) 25%, transparent); }
.bw-hold__fill { stroke: var(--bw-on); stroke-linecap: round; stroke-dasharray: 157; stroke-dashoffset: 157; }
.bw-hold__words { display: grid; text-align: left; }
.bw-hold__main { font-size: 34px; font-weight: 900; letter-spacing: .1em; line-height: 1; }
.bw-hold__sub { margin-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; opacity: .85; }
.bw-hold__said { margin-top: 10px; min-height: 16px; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: var(--bw-ink-2); }
.bw-hold__said.is-good { color: var(--bw-good); }
.bw-hold__said.is-warn { color: var(--bw-warn); }
.bw-hold__said.is-bad { color: var(--bw-bad); }

/* ---------------- Aim Strip (bw-aim) ---------------- */
.bw-aim {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-aim[data-theme="light"], [data-theme="light"] .bw-aim {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-aim {
  font-family: var(--bw-font);
  width: 312px;
  padding: 11px 12px 12px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
/* Nothing in the header may change size while the ball moves: the label never
   wraps, the board number sits in a fixed two-digit box, and the centre board is
   marked by colour rather than by an extra word that would push the label over. */
.bw-aim__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px 8px; }
.bw-aim__k { min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--bw-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-aim__board { flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--bw-ink-2); }
.bw-aim__board b { display: inline-block; min-width: 2ch; text-align: right; font-size: 15px; font-weight: 900; letter-spacing: .02em; color: var(--bw-ink); transition: color .2s; }
.bw-aim__board.is-centre b { color: var(--bw-gold); }
.bw-aim__metres { display: inline-block; min-width: 7.5ch; }
.bw-aim__metres b { font-weight: inherit; }
.bw-aim__sign { display: inline-block; width: .8em; text-align: center; font-style: normal; }
.bw-aim__strip {
  position: relative; height: 62px; border-radius: 10px; overflow: hidden;
  display: grid; grid-template-columns: 11% 1fr 11%;
  touch-action: none; cursor: ew-resize; outline: none;
}
.bw-aim__strip:focus-visible { box-shadow: 0 0 0 2px var(--bw-gold); }
.bw-aim__gutter { background: var(--bw-gutter); }
.bw-aim__lane {
  position: relative;
  background: repeating-linear-gradient(90deg, var(--bw-lane) 0 calc(100% / 39 - 1px), var(--bw-board) calc(100% / 39 - 1px) calc(100% / 39));
  background-color: var(--bw-lane);
}
.bw-aim__arrow { position: absolute; top: 8px; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-bottom: 9px solid var(--bw-mark); border-top: 0; }
.bw-aim__dot {
  position: absolute; top: 50%; width: 30px; height: 30px; margin: -9px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, var(--bw-ball-shine) 0 18%, transparent 20%), var(--bw-ball);
  box-shadow: 0 3px 6px var(--bw-shadow), 0 0 0 2px var(--bw-pin);
  transition: transform .15s;
}
.bw-aim.is-dragging .bw-aim__dot { transform: scale(1.12); }
.bw-aim.is-locked .bw-aim__strip { cursor: not-allowed; }
.bw-aim.is-locked .bw-aim__dot { box-shadow: 0 3px 6px var(--bw-shadow), 0 0 0 2px var(--bw-held); }
.bw-aim__foot { display: flex; justify-content: space-between; margin-top: 7px; padding: 0 2px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--bw-ink-2); }
.bw-aim__hand { border: 0; background: var(--bw-raised); color: var(--bw-ink); cursor: pointer; padding: 4px 8px; border-radius: 6px; font: 800 10px/1 var(--bw-font); letter-spacing: .1em; }

/* ---------------- Bowling Hand (bw-hand) ---------------- */
.bw-hand {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-hand[data-theme="light"], [data-theme="light"] .bw-hand {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-hand {
  font-family: var(--bw-font);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
}
.bw-hand__lane { width: 42px; height: 78px; perspective: 300px; }
.bw-hand__flip { display: block; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.3,1.3,.5,1); transform-style: preserve-3d; }
.bw-hand.is-left .bw-hand__flip { transform: rotateY(180deg); }
.bw-hand__wood { fill: var(--bw-lane); }
.bw-hand__gut { fill: var(--bw-gutter); }
.bw-hand__path { fill: none; stroke: var(--bw-held); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 3; }
.bw-hand__ball { fill: var(--bw-ball); stroke: var(--bw-pin); stroke-width: 1.5; }
.bw-hand__pin { fill: var(--bw-pin); stroke: var(--bw-pin-edge); stroke-width: .8; }
.bw-hand__words { display: grid; gap: 3px; min-width: 118px; }
.bw-hand__words b { font-size: 14px; font-weight: 900; letter-spacing: .06em; }
.bw-hand__words span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--bw-ink-2); }
.bw-hand__switch {
  position: relative; width: 70px; height: 34px; padding: 0; margin-left: 4px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bw-sunk);
  font: 900 9.5px/1 var(--bw-font); letter-spacing: .08em;
}
.bw-hand__switch:focus-visible { outline: 2px solid var(--bw-gold); outline-offset: 3px; }
.bw-hand__switch::before, .bw-hand__switch::after { position: absolute; top: 50%; transform: translateY(-50%); color: var(--bw-ink-2); }
.bw-hand__switch::before { content: "L"; left: 12px; }
.bw-hand__switch::after { content: "R"; right: 12px; }
.bw-hand__knob {
  position: absolute; top: 4px; left: 40px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--bw-on);
  background: var(--bw-accent); box-shadow: 0 2px 5px var(--bw-shadow);
  transition: left .3s cubic-bezier(.3,1.4,.5,1);
  z-index: 1;
}
.bw-hand__switch[aria-checked="true"] .bw-hand__knob { left: 4px; background: var(--bw-held); }

/* ---------------- Bowler List (bw-players) ---------------- */
.bw-players {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-players[data-theme="light"], [data-theme="light"] .bw-players {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-players {
  font-family: var(--bw-font);
  width: 300px;
  padding: 10px 10px 10px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
}
.bw-players__head { display: flex; justify-content: space-between; padding: 0 4px 7px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--bw-ink-2); }
.bw-players__list { list-style: none; margin: 0; padding: 0; max-height: 110px; overflow: auto; }
.bw-players__row { display: grid; grid-template-columns: 18px 1fr auto auto auto auto; align-items: center; gap: 4px; height: 30px; padding: 0 4px; margin-bottom: 3px; border-radius: 8px; background: var(--bw-raised); }
.bw-players__n { font-size: 11px; font-weight: 900; color: var(--bw-ink-2); text-align: center; }
.bw-players__name { font-size: 13px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-players__row button {
  height: 22px; min-width: 22px; padding: 0 6px; border: 0; border-radius: 6px; cursor: pointer;
  font: 800 9.5px/1 var(--bw-font); letter-spacing: .08em; color: var(--bw-ink-2); background: transparent;
}
.bw-players__row button:hover:not(:disabled) { color: var(--bw-ink); background: var(--bw-sunk); }
.bw-players__row button:disabled { opacity: .3; cursor: default; }
.bw-players__row button:focus-visible, .bw-players__add button:focus-visible, .bw-players__add input:focus-visible { outline: 2px solid var(--bw-gold); outline-offset: 1px; }
.bw-players__row button[aria-pressed="true"] { color: var(--bw-on); background: var(--bw-accent); }
.bw-players__row .bw-players__del:hover { color: var(--bw-bad); }
.bw-players__add { display: flex; gap: 6px; margin-top: 5px; }
.bw-players__add input {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--bw-line); border-radius: 8px;
  font: 800 13px var(--bw-font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--bw-ink); background: var(--bw-sunk);
}
.bw-players__add input::placeholder { color: var(--bw-ink-2); text-transform: none; letter-spacing: 0; font-weight: 700; }
.bw-players__add button {
  height: 32px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
  font: 900 11px/1 var(--bw-font); letter-spacing: .12em; color: var(--bw-on); background: var(--bw-accent);
}
.bw-players__add button:disabled { opacity: .4; cursor: default; }

/* ---------------- Pass the Phone (bw-pass) ---------------- */
.bw-pass {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-pass[data-theme="light"], [data-theme="light"] .bw-pass {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-pass {
  font-family: var(--bw-font);
  width: 280px;
  padding: 12px 14px 14px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
  text-align: center;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.bw-pass__stage { display: block; width: 100%; height: 64px; }
.bw-pass__arc { fill: none; stroke: var(--bw-line); stroke-width: 2; stroke-dasharray: 3 5; }
.bw-pass__who circle { fill: var(--bw-raised); stroke: var(--bw-line); stroke-width: 1.5; }
.bw-pass__who.is-to circle { stroke: var(--bw-held); stroke-width: 2.5; }
.bw-pass__who text { fill: var(--bw-ink); font: 900 13px var(--bw-font); }
.bw-pass__phone rect { fill: var(--bw-accent); stroke: var(--bw-on); stroke-width: 1.5; }
.bw-pass__phone circle { fill: var(--bw-on); }
.bw-pass.is-taken .bw-pass__phone rect { fill: var(--bw-good); }
.bw-pass.is-taken .bw-pass__who.is-to circle { stroke: var(--bw-good); }
.bw-pass__k { margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--bw-ink-2); }
.bw-pass__name { margin-top: 2px; font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-pass__sub { margin-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--bw-ink-2); }
.bw-pass.is-taken .bw-pass__sub { color: var(--bw-good); }

/* ---------------- Phone Link (bw-link) ---------------- */
.bw-link {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-link[data-theme="light"], [data-theme="light"] .bw-link {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-link {
  font-family: var(--bw-font);
  display: inline-flex; align-items: center; gap: 9px;
  box-sizing: border-box;   /* the measured width includes padding, so the written one must too */
  height: 38px; padding: 0 14px 0 8px;
  border-radius: 999px;
  background: var(--bw-panel); color: var(--bw-ink);
  box-shadow: 0 6px 20px var(--bw-shadow);
  overflow: hidden; white-space: nowrap; cursor: pointer;
  transition: width .35s cubic-bezier(.3,1,.4,1);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.bw-link__icon { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bw-raised); }
.bw-link__icon svg { width: 12px; height: 16px; }
.bw-link__icon rect { fill: none; stroke: var(--bw-ink); stroke-width: 1.6; }
.bw-link__icon circle { fill: var(--bw-ink); }
.bw-link__dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bw-panel); background: var(--bw-ink-2); }
.bw-link[data-state="waiting"] .bw-link__dot { animation: bw-link-breathe 1.6s ease-in-out infinite; }
.bw-link[data-state="connecting"] .bw-link__dot { background: var(--bw-warn); animation: bw-link-breathe .7s ease-in-out infinite; }
.bw-link[data-state="linked"] .bw-link__dot { background: var(--bw-good); }
.bw-link[data-state="lost"] .bw-link__dot { background: var(--bw-bad); }
@keyframes bw-link-breathe { 50% { transform: scale(.6); opacity: .5; } }
.bw-link__text { font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.bw-link__text em { font-style: normal; color: var(--bw-ink-2); }
.bw-link__holder { display: none; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; color: var(--bw-on); background: var(--bw-held); }
.bw-link[data-state="linked"] .bw-link__holder.is-set { display: inline-block; }
.bw-link[data-state="lost"] .bw-link__text { color: var(--bw-bad); }

/* ---------------- Bowl Button (bw-button) ---------------- */
.bw-button {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-button[data-theme="light"], [data-theme="light"] .bw-button {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-button { font-family: var(--bw-font); display: inline-block; padding: 18px; }
.bw-button__btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center;
  height: 60px; padding: 0 74px 0 26px;
  border: 0; border-radius: 16px; cursor: pointer;
  color: var(--bw-on); background: var(--bw-accent);
  box-shadow: 0 5px 0 var(--bw-accent-deep), 0 12px 26px var(--bw-shadow);
  font: 900 17px/1 var(--bw-font); letter-spacing: .14em;
  -webkit-tap-highlight-color: transparent;
}
.bw-button__btn:hover { background: color-mix(in srgb, var(--bw-accent) 88%, var(--bw-on)); }
.bw-button__btn:focus-visible { outline: 3px solid var(--bw-gold); outline-offset: 4px; }
.bw-button__label { position: relative; z-index: 1; }
.bw-button__track { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: color-mix(in srgb, var(--bw-accent-deep) 70%, transparent); }
/* the pin outline is render.js's PROFILE (height, radius in metres) at 105 px per metre */
.bw-button__pin { position: absolute; right: 20px; bottom: 6px; width: 15px; height: 42px; overflow: visible; transform-origin: 70% 100%; }
.bw-button__body { fill: var(--bw-pin); stroke: var(--bw-pin-edge); stroke-width: .9; stroke-linejoin: round; }
.bw-button__stripe { fill: var(--bw-pin-stripe); }
.bw-button__ball {
  position: absolute; left: -26px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, var(--bw-ball-shine) 0 20%, transparent 22%), var(--bw-held);
  box-shadow: 0 0 0 1.5px var(--bw-pin);
}

/* ---------------- Setting Pins (bw-loader) ---------------- */
.bw-loader {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-loader[data-theme="light"], [data-theme="light"] .bw-loader {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-loader {
  font-family: var(--bw-font);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 22px 13px;
  border-radius: var(--bw-radius);
  background: var(--bw-panel);
  color: var(--bw-ink);
  box-shadow: 0 10px 30px var(--bw-shadow);
}
.bw-loader__stage { position: relative; width: 150px; height: 96px; }
.bw-loader__lane {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--bw-lane) 0 9px, var(--bw-board) 9px 10px), var(--bw-lane);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
/* each pin is render.js's PROFILE outline, drawn once in <defs> and reused */
.bw-loader__pin {
  position: absolute; width: 8px; height: 22px; margin-left: -4px; overflow: visible;
  transform-origin: 50% 100%;
  animation: bw-loader-pin 2s linear infinite;
}
/* the defs svg is child 1 and the lane child 2, so the four pins are children 3-6;
   the back pin is drawn first so the front pin covers its base */
.bw-loader__pin:nth-child(3) { left: 50%; top: -3px; --bw-loader-fx: 6px; --bw-loader-r: 30deg; }
.bw-loader__pin:nth-child(4) { left: 45%; top: 1px; --bw-loader-fx: -26px; --bw-loader-r: -70deg; }
.bw-loader__pin:nth-child(5) { left: 55%; top: 1px; --bw-loader-fx: 26px; --bw-loader-r: 70deg; }
.bw-loader__pin:nth-child(6) { left: 50%; top: 5px; --bw-loader-fx: 0px; --bw-loader-r: 8deg; }
@keyframes bw-loader-pin {
  0%, 52% { transform: none; opacity: 1; }
  62% { transform: translate(var(--bw-loader-fx), -10px) rotate(var(--bw-loader-r)); opacity: 1; }
  72%, 84% { transform: translate(calc(var(--bw-loader-fx) * 1.3), -6px) rotate(calc(var(--bw-loader-r) * 1.4)); opacity: 0; }
  85% { transform: translateY(-14px); opacity: 0; }
  96%, 100% { transform: none; opacity: 1; }
}
.bw-loader__ball {
  position: absolute; left: 50%; bottom: 4px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, var(--bw-ball-shine) 0 18%, transparent 20%), var(--bw-ball);
  box-shadow: 0 0 0 1.5px var(--bw-pin);
  transform-origin: 50% 100%;
  animation: bw-loader-ball 2s cubic-bezier(.35,.1,.7,1) infinite;
}
@keyframes bw-loader-ball {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  6% { opacity: 1; }
  54% { transform: translateY(-74px) scale(.36); opacity: 1; }
  62%, 100% { transform: translateY(-84px) scale(.3); opacity: 0; }
}
.bw-loader__label { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--bw-ink-2); }
@media (prefers-reduced-motion: reduce) { .bw-loader__ball, .bw-loader__pin { animation-duration: 6s; } }

/* ---------------- Lane Arrows Divider (bw-divider) ---------------- */
.bw-divider {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-divider[data-theme="light"], [data-theme="light"] .bw-divider {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-divider { display: block; width: 340px; max-width: 100%; padding: 10px 0; }
.bw-divider__strip {
  position: relative; height: 34px; border-radius: 6px; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--bw-lane) 0 calc(100% / 39 - 1px), var(--bw-board) calc(100% / 39 - 1px) calc(100% / 39)), var(--bw-lane);
  box-shadow: inset 0 0 0 1px var(--bw-board);
}
.bw-divider__arrow {
  position: absolute; width: 0; height: 0; margin-left: -6px;
  border: 6px solid transparent; border-bottom: 11px solid var(--bw-mark); border-top: 0;
  transform: rotate(90deg);
  transition: border-bottom-color .35s, filter .35s;
}
.bw-divider__arrow.is-lit { border-bottom-color: var(--bw-held); transition-duration: 0s; }
.bw-divider__ball {
  position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, var(--bw-ball-shine) 0 20%, transparent 22%), var(--bw-ball);
  box-shadow: 0 0 0 1.5px var(--bw-pin);
  opacity: 0;
}

/* ---------------- Lane View (bw-lane) ---------------- */
.bw-lane {
  --bw-accent: var(--c-primary, #005090);
  --bw-accent-deep: color-mix(in srgb, var(--bw-accent) 70%, #06121f);
  --bw-held: #e02020;
  --bw-held-deep: #a91818;
  --bw-lane: #e6cf9f;
  --bw-board: rgba(122,86,40,.20);
  --bw-mark: #9a6a33;
  --bw-gutter: #9aa6b2;
  --bw-pin: #ffffff;
  --bw-pin-edge: #9aa6b2;
  --bw-pin-stripe: #e02020;
  --bw-ball: #005090;
  --bw-ball-shine: rgba(255,255,255,.45);
  --bw-gold: #f2c230;
  --bw-good: #35d07f;
  --bw-warn: #ffb03a;
  --bw-bad: #ff5e5e;
  --bw-on: #ffffff;
  --bw-on-bright: #14243d;
  --bw-panel: #14243d;
  --bw-raised: #1f3456;
  --bw-sunk: #0c1828;
  --bw-ink: #ffffff;
  --bw-ink-2: #9fb0c6;
  --bw-line: rgba(255,255,255,.12);
  --bw-shadow: rgba(6,14,28,.38);
  --bw-radius: 14px;
  --bw-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.bw-lane[data-theme="light"], [data-theme="light"] .bw-lane {
  --bw-panel: #ffffff;
  --bw-raised: #eef1f4;
  --bw-sunk: #dde3ea;
  --bw-ink: #14243d;
  --bw-ink-2: #5b6b7e;
  --bw-line: #d3dbe3;
  --bw-gold: #b27a00;
  --bw-good: #12a150;
  --bw-warn: #c47a00;
  --bw-bad: #d64545;
  --bw-shadow: rgba(20,36,61,.18);
}
.bw-lane { position: fixed; inset: 0; overflow: hidden; background: var(--bw-sunk); }
.bw-lane__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bw-lane__gutter { fill: var(--bw-gutter); }
.bw-lane__wood { fill: var(--bw-lane); }
.bw-lane__deck { fill: color-mix(in srgb, var(--bw-lane) 78%, var(--bw-pin)); }
.bw-lane__board { fill: var(--bw-board); }
.bw-lane__edge { fill: var(--bw-mark); opacity: .6; }
.bw-lane__foul { fill: var(--bw-held); }
.bw-lane__arrow { fill: var(--bw-mark); }
.bw-lane__pit { fill: var(--bw-panel); }
.bw-lane__kick { fill: var(--bw-raised); }
.bw-lane__shadow { fill: var(--bw-shadow); }
.bw-lane__pin { fill: var(--bw-pin); stroke: var(--bw-pin-edge); stroke-width: .8; stroke-linejoin: round; }
.bw-lane__stripe { fill: var(--bw-pin-stripe); }