:root {
  --bg: #0f0f0f; --panel: #1c1c1c; --panel2: #262626; --line: #333;
  --text: #f4f4f4; --muted: #9a9a9a; --gold: #f2c230; --gold-dark: #b8901a;
  --win: #3fae5a; --lose: #c0392b; --del: #5a2320; --ent: #2c5a33;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.35 "Barlow", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; border-radius: 8px; background: var(--panel2); padding: 12px 16px; touch-action: manipulation; }
button.gold { background: var(--gold); color: #111; font-weight: 700; }
button:disabled { opacity: .4; }
a { color: var(--gold); }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.muted { color: var(--muted); }
/* numerals: Poppins, Frankie's pick for numbers (29 Oct) */
:root { --numf: "Poppins", "Barlow", sans-serif; }
.num { font-family: var(--numf); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Venue wordmark: script name with a gold outline (Windmill: windmill faded behind), or the venue's own logo */
.brand { position: relative; text-align: center; padding: 18px 0 8px; overflow: hidden; }
.brand svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 140%; opacity: .12; }
.brand .script { position: relative; font: 400 64px/1 "Yellowtail", cursive; color: #111; -webkit-text-stroke: 7px var(--gold); paint-order: stroke fill; letter-spacing: 1px; transform: rotate(-4deg); }
.brand .sub { position: relative; font: 600 15px/1 "Barlow", sans-serif; letter-spacing: 4px; margin-top: 6px; text-transform: uppercase; }
.brand img.logo { display: block; margin: 0 auto; max-width: 80%; max-height: 110px; }
.brand.small img.logo { max-height: 56px; }
.brand .sails { transform-origin: 50px 50px; }
.spin .brand svg { opacity: .35; transition: opacity .3s; }
.spin .brand .sails { animation: sails 2.5s cubic-bezier(.3,0,.3,1); }
@keyframes sails { to { transform: rotate(1080deg); } }
.credit { text-align: center; font-size: 13px; color: var(--muted); padding: 28px 16px calc(18px + env(safe-area-inset-bottom)); }
.credit a { text-decoration: none; font-weight: 600; }
.brand.small { padding: 6px 0 2px; }
.brand.small .script { font-size: 36px; -webkit-text-stroke-width: 5px; }
.brand.small .sub { font-size: 10px; letter-spacing: 3px; margin-top: 2px; }

.card { background: var(--panel); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.card h2 { margin: 0 0 10px; font-size: 18px; color: var(--gold); }
label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 15px; }
input, select, textarea { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
textarea { min-height: 180px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; }
.seg button.on { background: var(--gold); color: #111; font-weight: 700; }
.error { color: #ff7b6b; min-height: 1.3em; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 4px; text-align: center; }
th { color: var(--muted); font-weight: 500; font-size: 14px; }
td:first-child, th:first-child { text-align: left; }
tr.through td:first-child { color: var(--gold); }

.match { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); }
.match:first-of-type { border-top: 0; }
.match .side { flex: 1; }
.match .side.right { text-align: right; }
.match .side.won { font-weight: 700; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 6px; font-weight: 700; background: var(--panel2); }
.pill.w { background: var(--win); color: #111; }
.pill.l { background: var(--lose); }
.tag { font-size: 13px; color: var(--muted); }
.tag.live { color: var(--gold); }

.stats { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 10px; text-align: center; font-size: 22px; }
.stats .k { color: var(--muted); font-size: 15px; align-self: center; }
.legtable { margin: 0 auto; width: auto; }
.legtable td { padding: 6px 18px; font-size: 19px; }
.legtable td.n { background: var(--panel2); color: var(--muted); }
.legtable td.out { color: var(--gold); font-weight: 700; }

/* leg grid (board iPad and live view) */
.grid { display: grid; grid-template-columns: 1fr 44px 1fr; background: #000; border-radius: 10px; overflow: hidden; }
.grid .v { text-align: center; font-size: 30px; font-weight: 700; color: #cfcfcf; line-height: 36px; }
.grid .v.out { color: var(--gold); }
.grid .n { text-align: center; background: #1b1b1b; color: var(--muted); font-size: 22px; line-height: 36px; }
.grid .due { display: inline-block; width: 0; height: 0; border-top: .32em solid transparent; border-bottom: .32em solid transparent; vertical-align: middle; }
.grid .due.r { border-left: .55em solid var(--gold); }
.grid .due.l { border-right: .55em solid var(--gold); }

/* feedback: every tap and every score shows it landed */
button { transition: transform .08s, filter .08s; }
button.press { transform: scale(.93); filter: brightness(1.35); }
.grid .v.fresh { animation: pop .45s cubic-bezier(.2,1.6,.4,1); color: var(--gold); }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }
.bump { animation: bump .4s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.big-flash { animation: big .9s cubic-bezier(.2,1.4,.4,1); }
@keyframes big { 0% { transform: scale(.3); opacity: 0; } 40% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .grid .v.fresh, .bump, .shake, .big-flash, .spin .brand .sails { animation: none; } button.press { transform: none; } }

/* ---------- finish: a pro scoreboard under bar lights (shared by every page) ----------
   Light from above: surfaces brighter at the top, controls sit proud and press down.
   Gold is the one brand colour; red only marks the legs box and a lost match; green a win. */
:root { --ink: #ece7da; --ink2: #a9a39a; --well: #050505; --face: #1f1e1c; --edge: rgba(255,255,255,.07); --drop: 0 2px 0 #000, 0 6px 14px rgba(0,0,0,.45); }
html, body { background: #0a0a09; color: var(--ink); }
::selection { background: var(--gold); color: #111; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #4a4433 transparent; }
.muted { color: var(--ink2); }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

button { color: var(--ink); background: linear-gradient(#2a2926, var(--face)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), var(--drop); border-radius: 10px; font-weight: 600; }
button.gold { background: linear-gradient(color-mix(in srgb, var(--gold), #fff 14%), color-mix(in srgb, var(--gold), #000 7%)); color: #161200; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--drop); }
button.press { transform: translateY(2px); filter: brightness(1.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.4); }
.seg button.on { background: linear-gradient(color-mix(in srgb, var(--gold), #fff 14%), color-mix(in srgb, var(--gold), #000 7%)); color: #161200; }
input, select, textarea { background: var(--well); border: 1px solid #2c2b28; box-shadow: inset 0 2px 6px rgba(0,0,0,.7); color: var(--ink); border-radius: 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; }

.card { background: linear-gradient(#191816, #121210); border: 1px solid #23221f; box-shadow: inset 0 1px 0 var(--edge), 0 8px 20px rgba(0,0,0,.35); border-radius: 14px; padding: 16px 18px; }
.card h2 { font-family: "Barlow Condensed", "Barlow", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 20px; margin-bottom: 12px; }

table { font-variant-numeric: tabular-nums; }
th { color: #6f6a62; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
td { border-top: 1px solid #1f1e1c; }
td a { text-decoration: none; }
tr.through td:first-child a { color: var(--gold); font-weight: 600; }

.match { border-top-color: #1f1e1c; }
.pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 6px rgba(0,0,0,.4); font-family: var(--numf); font-stretch: 125%; font-size: 16px; }
.pill.w { background: linear-gradient(#49c266, #2f9149); }
.pill.l { background: linear-gradient(#cf2b22, #9c1a14); color: #fff; }
.tag.live { font-weight: 600; }
.tag.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e3342a; margin-right: 6px; vertical-align: 1px; }

.stats > .num { color: var(--ink); }
.legtable { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--well); border-radius: 10px; overflow: hidden; box-shadow: inset 0 2px 8px rgba(0,0,0,.9); }
.legtable td:first-child { text-align: center; }
.legtable tr:nth-child(even) td { background-color: rgba(255,255,255,.035); }
.legtable td { border: 0; font-size: 22px; }
.legtable td.n { width: 56px; background: rgba(255,255,255,.05); color: #6f6a62; font-size: 16px; }

/* the visit grid wherever it appears: a recessed well with faint banding */
.grid { background: var(--well); box-shadow: inset 0 2px 10px rgba(0,0,0,.9), inset 0 0 0 1px #1d1c1a; border-radius: 12px; }
.grid > :nth-child(6n+4), .grid > :nth-child(6n+6) { background-color: rgba(255,255,255,.035); }
.grid > :nth-child(6n+5) { background-color: rgba(255,255,255,.075); }
.grid .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.grid .n { background-color: rgba(255,255,255,.05); color: #6f6a62; }

/* ---------- modern look for the organiser, live, match and player pages (Frankie, 29 Oct) ----------
   Flat like the scorer: black, crisp white text, solid yellow for the main action and what's highlighted, grey for the rest.
   No gradients or shine. */
body.flat { --gold: #ffc61a; --ink: #f5f5f5; --ink2: #b3b8bf; --well: #000; --face: #202226; --edge: transparent; --drop: none; background: #0b0b0c; color: var(--ink); }
body.flat button, body.flat .seg button { background: #24262a; color: #f5f5f5; box-shadow: none; }
body.flat button.gold, body.flat .seg button.on { background: var(--gold); color: #000; box-shadow: none; font-weight: 700; }
body.flat .card { background: #16171a; border: 1px solid #26282c; box-shadow: none; }
body.flat .card h2 { color: var(--gold); }
body.flat input, body.flat select, body.flat textarea { background: #000; border-color: #34363b; box-shadow: none; color: #fff; }
body.flat input:focus, body.flat select:focus, body.flat textarea:focus { border-color: var(--gold); }
body.flat th { color: #8c9198; }
body.flat .pill { box-shadow: none; }
body.flat .pill.w { background: #22a04b; color: #fff; }
body.flat .pill.l { background: #d23a2f; color: #fff; }
body.flat .legtable, body.flat .grid { background: #000; box-shadow: none; }
body.flat .grid > * { background-color: transparent; }
/* page-specific panels */
body.flat .lv .pl, body.flat .bm { background: #16171a; box-shadow: none; }
body.flat .lv .pl.on, body.flat .side.on, body.flat .tabs a.on, body.flat .next .when.soon { background: var(--gold); color: #000; box-shadow: none; }
body.flat .lv .pl.on .sub { color: rgba(0,0,0,.7); }
body.flat .lv .lg, body.flat .legs .lg { background: #24262a; color: #fff; box-shadow: none; }
body.flat .next .when.now { background: #d23a2f; color: #fff; }
body.flat .share .wa { background: #22a04b; color: #fff; }
html:has(body.flat) { background: #0b0b0c; }

/* group tables, laid out like Darts Atlas: position, name, average, W, L, LA, LD and and a highlighted points column */
table.standings tr:nth-child(odd) td { background: rgba(255, 255, 255, .035); }
table.standings td { padding: 12px 0; font-size: 15px; border-top: 1px solid #2a2824; }
table.standings th { padding: 8px 0; letter-spacing: .04em; font-size: 11px; border-bottom: 2px solid #3a3730; }
table.standings :is(th, td) { min-width: 22px; }
table.standings td.pos { min-width: 20px; color: var(--muted); }
table.standings :is(th, td):nth-child(2) { width: 100%; text-align: left; padding-right: 4px; white-space: nowrap; }
table.standings :is(th, td):nth-child(3) { min-width: 44px; padding-right: 6px; }
table.standings .gap { padding-left: 6px; }
table.standings :is(th, td):nth-child(7) { min-width: 30px; }
table.standings .pts { min-width: 34px; font-weight: 700; }
table.standings td.pts { background: var(--gold) !important; color: #111; }
table.standings td:first-child .muted, table.standings td:nth-child(2) .muted { display: block; font-size: 11px; line-height: 1.2; }
table.standings tr.through td:nth-child(2), table.standings tr.through td:nth-child(2) a { color: var(--gold); font-weight: 600; }