:root {
	--bg: #000;
	--panel: #101416;
	--panel-2: #181d20;
	--line: #2a3135;
	--ink: #f3f6ef;
	--ink-2: #b3bcb5;
	--ink-3: #87918a;
	--optic: #d9f20a;
	--optic-ink: #141a00;
	--court: #1f62ad;
	--court-deep: #184f8e;
	--court-line: rgb(255 255 255 / 78%);
	--clay: #a9532c;
	--clay-deep: #8d4322;
	--good: #58d36a;
	--warn: #fab219;
	--neutral: #2c3235;
	--neutral-hi: #394145;
	--cool-1: #27507f;
	--cool-2: #3472b5;
	--cool-3: #8dc1f0;
	--warm-1: #84372f;
	--warm-2: #bd5040;
	--warm-3: #f4a48f;
	--head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--body: 'Barlow', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 16px/1.45 var(--body);
}

h1, h2, h3 { font-family: var(--head); margin: 0; font-weight: 700; letter-spacing: 0.01em; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--optic); outline-offset: 2px; }

input[type=text], input[type=password], input[type=number], input[type=date], select {
	width: 100%;
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 11px;
	min-width: 0;
}
input::placeholder { color: var(--ink-3); }
input[type=date] { color-scheme: dark; }
input:focus, select:focus { border-color: var(--optic); outline: none; }


/* the ball */

.ball {
	--size: 26px;
	display: inline-block;
	flex: none;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #f3ff84, #afc406 55%, #8c9d02);
	position: relative;
	overflow: hidden;
}
.ball::before, .ball::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	border: calc(var(--size) * 0.07) solid rgb(255 255 255 / 92%);
	border-radius: 50%;
}
.ball::before { right: 68%; }
.ball::after { left: 68%; }
.ball.small { --size: 20px; box-shadow: 0 4px 6px black, 0 0 4px black; }
.ball.big { --size: 54px; }
.ball.tiny { --size: 11px; }


/* buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 9px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, transform 0.15s, opacity 0.15s;
}
.btn.ghost { color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover:not(:disabled) { background: var(--panel-2); }
.btn.ghost:disabled { opacity: 0.4; }
.btn.primary { background: var(--optic); color: var(--optic-ink); }
.btn.primary:hover:not(:disabled) { transform: translateY(-1px); background: #e8ff33; }

.link {
	color: var(--ink-2);
	font-size: 14px;
	text-decoration: underline;
	text-decoration-color: var(--ink-3);
	text-underline-offset: 3px;
}
.link:hover { color: var(--optic); }


/* top bar */

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 24px;
	background: rgb(0 0 0 / 88%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.wordmark { font: 700 26px/1 var(--head); letter-spacing: 0.02em; }
.wordmark .tld { font-size: 0.7em; font-weight: 600; color: var(--ink-3); letter-spacing: 0.03em; margin-left: 1px; color: var(--optic);}
.league-name {
	max-width: 240px;
	background: transparent !important;
	border-color: transparent !important;
	border-bottom-color: var(--line) !important;
	border-radius: 0 !important;
	padding: 6px 2px !important;
}
.league-name:focus { border-bottom-color: var(--optic) !important; }
.tabs { display: flex; gap: 4px; margin: 0 auto; background: var(--panel); border-radius: 999px; padding: 4px; }
.tab { padding: 6px 20px; border-radius: 999px; font: 600 18px/1.2 var(--head); letter-spacing: 0.03em; color: var(--ink-2); }
.tab.active { background: var(--optic); color: var(--optic-ink); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.btn.icon { width: 40px; height: 40px; padding: 0; position: relative; }
.btn.icon::before {
	content: "";
	width: 14px;
	height: 11px;
	margin-top: 6px;
	border-radius: 2px;
	background: var(--ink-2);
}
.btn.icon::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 9px;
	height: 9px;
	border: 2px solid var(--ink-2);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
}
.btn.icon.unlocked::before { background: var(--optic); }
.btn.icon.unlocked::after { border-color: var(--optic); transform: translateX(-2px) rotate(-14deg); }

.menu-wrap { position: relative; }
.menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 230px;
	max-height: 60vh;
	overflow: auto;
	padding: 6px;
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 20px 40px rgb(0 0 0 / 60%);
}
.menu.on { display: block; }
.menu-item { display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: 7px; font-size: 15px; }
.menu-item:hover { background: var(--line); }
.menu-item small { color: var(--ink-3); margin-left: 4px; }
.menu-sep { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 11px 4px; }
.menu-note { color: var(--ink-3); padding: 6px 11px; font-size: 14px; }


/* views */

main { max-width: 1680px; margin: 0 auto; padding: 0 24px 96px; }
.view { display: none; }
.view.on { display: block; }

.hero { padding: 54px 0 34px; }
.hero h1 { font-size: clamp(50px, 8vw, 104px); line-height: 0.94; text-transform: uppercase; }
.hero h1 em { font-style: normal; color: var(--optic); }
.hero p { margin: 18px 0 0; color: var(--ink-2); max-width: 620px; font-size: 18px; }


/* setup */

.setup-grid { display: grid; grid-template-columns: 1.3fr 1.1fr 0.9fr; gap: 16px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.card h2 { font-size: 28px; margin-bottom: 6px; }
.hint { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }

.roster { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.roster-col h3 { font-size: 20px; color: var(--ink-2); margin-bottom: 8px; }
.roster-col .count { color: var(--optic); margin-left: 4px; }
.row { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; }
.row input { flex: 1; padding: 7px 10px; }
.mini { width: 28px; height: 32px; border-radius: 6px; color: var(--ink-3); flex: none; font-size: 16px; }
.mini:hover { color: var(--ink); background: var(--panel-2); }
.add-player { border-style: dashed !important; margin-top: 2px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.card-head h2 { margin-bottom: 0; }
.btn.small { padding: 5px 13px; font-size: 14px; }
.roster-card .switch { margin: 10px 0 6px; }
.roster-open { display: none; grid-column: 1 / -1; }
.roster.open .roster-open { display: block; }
.roster.open .roster-col { display: none; }
.open-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-items: center; }
.open-grid .rows { display: contents; }
.open-grid .row { margin-bottom: 0; }
.open-grid .add-player { margin-top: 0; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 14px; }
.field { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 14px; margin-bottom: 12px; }
.field input, .field select { color: var(--ink); font-size: 16px; }

.dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.date {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 2px;
	background: var(--panel-2);
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}
.date small { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.date:hover { border-color: var(--ink-3); }
.date.bye {
	color: var(--ink-3);
	background: repeating-linear-gradient(135deg, #171b1e 0 5px, #0d1012 5px 10px);
}
.date.bye small { color: var(--optic); }
.cal-sum { margin: 14px 0 0; font: 600 20px/1.2 var(--head); }

.switch { display: flex; align-items: center; gap: 12px; margin: 14px 0; cursor: pointer; font-size: 15px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.track { flex: none; width: 40px; height: 23px; border-radius: 12px; background: var(--neutral-hi); position: relative; transition: background 0.15s; }
.track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); transition: transform 0.15s; }
.switch input:checked + .track { background: var(--optic); }
.switch input:checked + .track::after { transform: translateX(17px); background: var(--optic-ink); }
.switch input:focus-visible + .track { outline: 2px solid var(--optic); outline-offset: 2px; }

.court-list.on { margin-bottom: 14px; }
.court-row { display: flex; gap: 6px; margin-bottom: 6px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; font-size: 14px; color: var(--ink-2); flex: none; }
.chip.on { background: var(--clay); border-color: var(--clay); color: #fff; }

.seg { display: flex; background: var(--panel-2); border-radius: 9px; padding: 3px; margin-top: 2px; }
.seg button { flex: 1; padding: 7px 4px; border-radius: 7px; font-size: 14px; color: var(--ink-2); }
.seg button.on { background: var(--neutral-hi); color: var(--ink); }

.gen-bar {
	position: sticky;
	bottom: 16px;
	margin-top: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px 12px 24px;
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	box-shadow: 0 16px 40px rgb(0 0 0 / 70%);
}
.gen-sum { font: 500 20px/1.2 var(--head); color: var(--ink-2); }
.gen-sum b { color: var(--ink); font-weight: 700; }
.gen-sum i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); margin: 0 8px; vertical-align: middle; }
.gen-sum .need { color: var(--warn); }
.generate { padding: 13px 26px; font: 700 22px/1 var(--head); letter-spacing: 0.03em; text-transform: uppercase; }
.generate.off { opacity: 0.35; }


/* season */

.season-empty { text-align: center; padding: 120px 20px; color: var(--ink-2); }
.season-empty h2 { font-size: 44px; color: var(--ink); margin-top: 18px; }
.season-empty p { margin: 8px 0 22px; }

.verdict { display: flex; align-items: center; gap: 18px; padding: 26px 0 16px; flex-wrap: wrap; }
.verdict h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1; }
.verdict p { margin: 5px 0 0; color: var(--ink-2); }
.verdict.perfect h2 { color: var(--optic); }
.flag { width: 46px; height: 46px; border-radius: 50%; background: var(--warn); color: #201500; display: grid; place-items: center; font: 700 30px/1 var(--head); flex: none; }
.stale { color: var(--warn); font-size: 14px; border: 1px solid var(--warn); padding: 3px 11px; border-radius: 999px; margin-left: auto; }

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.focus { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; margin-left: 8px; }
.focus select { width: 150px; padding: 7px 9px; color: var(--ink); }
.tools .switch { margin: 0 4px 0 8px; font-size: 14px; color: var(--ink-2); }
.tools .sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; }
.lit-note { display: flex; align-items: center; gap: 12px; margin-left: 8px; font-size: 15px; }
.lit-note b { color: var(--optic); }

.season-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 18px; align-items: start; }
.rail { position: sticky; top: 76px; max-height: calc(100vh - 88px); overflow-y: auto; padding-right: 4px; }

.wk {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 4px 14px;
	padding: 12px 14px 10px;
	margin-bottom: 8px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
}
.wk-date { display: flex; flex-direction: column; justify-content: center; }
.wk-date small { color: var(--ink-3); font-size: 13px; }
.wk-date b { font: 700 25px/1.05 var(--head); }
.wk.off {
	grid-template-columns: 76px minmax(0, 1fr) auto;
	align-items: center;
	background: repeating-linear-gradient(135deg, #101416 0 8px, #0b0e0f 8px 16px);
}
.wk.off .off-label { font: 600 22px/1 var(--head); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.wk-tools { grid-column: 2; display: flex; gap: 16px; opacity: 0; transition: opacity 0.15s; margin-top: 2px; }
.wk:hover .wk-tools, .wk:focus-within .wk-tools { opacity: 1; }
.wk-tools .link { font-size: 13px; }

.courts { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 10px; }
.ct-wrap { transition: opacity 0.15s; }
.ct-wrap.dim { opacity: 0.22; }
.ct-wrap.lit .ct { box-shadow: 0 0 0 3px var(--optic); }
.ct-name { color: var(--ink-3); font-size: 12px; margin: 0 0 3px 2px; }
.ct-name em { font-style: normal; color: #eda27f; }

/* A real doubles court, seen from above, with the net down the middle */
.ct {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 104px;
	background: linear-gradient(160deg, var(--court), var(--court-deep));
	border: 2px solid var(--court-line);
	border-radius: 3px;
}
.ct.rough { background: linear-gradient(160deg, var(--clay), var(--clay-deep)); }
.ct::before {
	content: "";
	position: absolute;
	inset: 0;
	/* singles sidelines, service lines, the center service line, and the center marks */
	background:
		linear-gradient(0deg, transparent calc(12.5% - 0.75px), rgb(255 255 255 / 45%) calc(12.5% - 0.75px) calc(12.5% + 0.75px), transparent calc(12.5% + 0.75px), transparent calc(87.5% - 0.75px), rgb(255 255 255 / 45%) calc(87.5% - 0.75px) calc(87.5% + 0.75px), transparent calc(87.5% + 0.75px)),
		linear-gradient(90deg, transparent calc(23.1% - 0.75px), rgb(255 255 255 / 45%) calc(23.1% - 0.75px) calc(23.1% + 0.75px), transparent calc(23.1% + 0.75px), transparent calc(76.9% - 0.75px), rgb(255 255 255 / 45%) calc(76.9% - 0.75px) calc(76.9% + 0.75px), transparent calc(76.9% + 0.75px)) center / 100% 75% no-repeat,
		linear-gradient(0deg, transparent calc(50% - 0.75px), rgb(255 255 255 / 45%) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) center / 53.8% 100% no-repeat,
		linear-gradient(0deg, transparent calc(50% - 0.75px), rgb(255 255 255 / 45%) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) left / 2.5% 100% no-repeat,
		linear-gradient(0deg, transparent calc(50% - 0.75px), rgb(255 255 255 / 45%) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) right / 2.5% 100% no-repeat;
}
body[data-sport="tennis"] .ct { border-color: rgb(255 255 255 / 55%); }
.ct::after {
	content: "";
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: calc(50% - 1.5px);
	width: 3px;
	background: #fff;
	box-shadow: 0 0 5px rgb(0 0 0 / 55%);
}
.side { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 6px 8px; min-width: 0; }

.chip-p {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 3px 9px;
	border-radius: 6px;
	background: rgb(3 18 38 / 72%);
	border: 1.5px solid transparent;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.chip-p .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-p.g-f { color: #ffd7c5; }
.chip-p:hover, .chip-p.same { border-color: rgb(255 255 255 / 75%); }
.chip-p.sel { background: var(--optic); color: var(--optic-ink); }
.chip-p.target { border: 1.5px dashed var(--optic); }
.chip-p.subbed { font-style: italic; }
.chip-p .tag { font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; color: var(--optic); }
.chip-p.sel .tag { color: var(--optic-ink); }

.sit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.sit .chip-p { background: var(--panel-2); font-size: 14px; }
.tray {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 8px 12px;
	margin-top: 8px;
	background: var(--panel-2);
	border-radius: 8px;
	font-size: 14px;
	color: var(--ink-2);
}
.tray b { color: var(--ink); }


/* rail: fairness */

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; display: flex; flex-direction: column; }
.t-label { font-size: 13px; color: var(--ink-2); }
.tile b { font: 700 34px/1.1 var(--head); }
.t-state { font-size: 13px; font-weight: 600; }
.t-state.good { color: var(--good); }
.t-state.warn { color: var(--warn); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; }
.panel h3 { font-size: 22px; }
.cap { color: var(--ink-2); font-size: 13px; margin: 0 0 10px; }

.line { display: block; width: 100%; height: auto; }
.line .g { stroke: var(--line); stroke-width: 1; }
.line text { fill: var(--ink-3); font: 500 11px var(--body); }
.line path { fill: none; stroke: var(--optic); stroke-width: 2; stroke-linejoin: round; }
.line .col rect { fill: transparent; }
.line .col:hover rect { fill: rgb(255 255 255 / 6%); }
.line .col circle { fill: var(--optic); stroke: var(--panel); stroke-width: 2; opacity: 0; }
.line .col:hover circle { opacity: 1; }

.legend { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--ink-2); padding: 8px 0 10px; }
.legend span { margin: 0 6px; }
.legend i { width: 26px; height: 12px; border-radius: 2px; }

.heat-scroll { overflow-x: auto; }
.heat { border-collapse: separate; border-spacing: 2px; width: 100%; table-layout: fixed; font-size: 14px; }
.heat th { font-weight: 500; color: var(--ink-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.heat thead th:first-child { width: 58px; }
.heat tbody th { text-align: right; padding-right: 6px; }
.heat td { height: 32px; text-align: center; border-radius: 4px; font-weight: 600; cursor: pointer; border: 2px solid transparent; }
.heat td.plain { cursor: default; }
.heat td:not(.self):not(.plain):hover { border-color: var(--ink); }
.heat td.on { border-color: var(--optic); }
.heat td.self { cursor: default; background: repeating-linear-gradient(135deg, transparent 0 3px, #20262a 3px 5px); }

.in { background: var(--neutral); color: var(--ink); }
.in.hi { background: var(--neutral-hi); }
.cool-1 { background: var(--cool-1); color: #fff; }
.cool-2 { background: var(--cool-2); color: #fff; }
.cool-3 { background: var(--cool-3); color: #06233f; }
.warm-1 { background: var(--warm-1); color: #fff; }
.warm-2 { background: var(--warm-2); color: #fff; }
.warm-3 { background: var(--warm-3); color: #3d0e06; }

.dots { display: grid; grid-template-columns: 58px minmax(0, 1fr) 22px; gap: 3px 6px; align-items: center; font-size: 12px; }
.d-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.d-count { font-weight: 600; text-align: right; color: var(--ink); font-size: 14px; }
.d-row { display: grid; grid-template-columns: repeat(var(--weeks), 1fr); align-items: center; justify-items: center; height: 18px; }
.d-row i { display: block; width: 100%; height: 18px; position: relative; }
.d-row i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--neutral-hi); }
.d-row i.on::after { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--optic); }

.tip {
	position: fixed;
	z-index: 60;
	max-width: 260px;
	padding: 6px 10px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.1s;
}
.tip.on { opacity: 1; }

.toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 70;
	transform: translate(-50%, 20px);
	padding: 11px 20px;
	max-width: calc(100vw - 32px);
	background: var(--optic);
	color: var(--optic-ink);
	font-weight: 600;
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }


/* overlays */

.overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgb(0 0 0 / 80%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.overlay.on { display: flex; }

.gen-card, .modal {
	width: 100%;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 20px;
}
.gen-card { max-width: 540px; padding: 26px; text-align: center; }
.gen-title { font-size: 32px; margin-top: 18px; }

.rally {
	position: relative;
	display: block;
	height: 130px;
	overflow: hidden;
}
.rally .fly { position: absolute; left: 18px; top: 100px; animation: rally-x 0.9s linear infinite alternate; }
.rally .ball { display: block; animation: rally-y 0.45s ease-out infinite alternate; }
@keyframes rally-x { to { left: calc(100% - 44px); } }
@keyframes rally-y { to { transform: translateY(-84px); } }

.gen-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 12px; }
.gen-stats b { display: block; font: 700 40px/1 var(--head); font-variant-numeric: tabular-nums; }
.gen-stats span { font-size: 13px; color: var(--ink-2); }
.gen-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 44px; margin-bottom: 18px; }
.gen-bars i { width: 8px; background: var(--optic); border-radius: 2px 2px 0 0; }

.modal { max-width: 500px; padding: 24px; }
.modal h2 { font-size: 32px; margin-bottom: 10px; }
.modal-body p { color: var(--ink-2); margin: 0 0 12px; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.form-error { color: var(--warn) !important; min-height: 1.4em; }
/* a wrong passcode shakes the field, every time */
.shake { animation: shake 0.42s; border-color: var(--warn) !important; }
.flash { animation: flash 0.42s; }
@keyframes shake {
	15%, 55% { transform: translateX(-8px); }
	35%, 75% { transform: translateX(8px); }
	90% { transform: translateX(-3px); }
}
@keyframes flash { 30% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
.keep-field { margin-top: 12px; }

.radio-card { display: flex; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.radio-card:hover { background: var(--panel-2); }
.radio-card:has(input:checked) { border-color: var(--optic); }
.radio-card input { accent-color: var(--optic); margin-top: 4px; flex: none; }
.radio-card span { display: flex; flex-direction: column; }
.radio-card small { color: var(--ink-2); font-size: 14px; }


/* smaller screens */

@media (max-width: 1320px) {
	.season-grid { grid-template-columns: minmax(0, 1fr); }
	.rail { position: static; max-height: none; overflow: visible; padding-right: 0; }
	.tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
	.setup-grid { grid-template-columns: 1fr 1fr; }
	.courts-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
	main { padding: 0 16px 88px; }
	.topbar { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
	.league-name { order: 3; flex: 1 1 130px; max-width: none; }
	.tabs { order: 4; margin: 0; }
	.top-actions { margin-left: auto; }
	.top-actions .btn:not(.icon) { padding: 7px 11px; font-size: 14px; }
	.brand .wordmark { font-size: 22px; }
	.menu { position: fixed; top: auto; left: 16px; right: 16px; margin-top: 8px; }
	.hero { padding: 34px 0 22px; }
	.setup-grid { grid-template-columns: minmax(0, 1fr); }
	.card { padding: 16px; }
	.gen-bar { border-radius: 18px; flex-direction: column; align-items: stretch; padding: 12px; text-align: center; }
	.wk { grid-template-columns: minmax(0, 1fr); }
	.wk-date { flex-direction: row; align-items: baseline; gap: 8px; }
	.wk-tools { grid-column: 1; opacity: 1; }
	.wk.off { grid-template-columns: minmax(0, 1fr) auto; }
	.courts { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: none) {
	.wk-tools { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.rally .fly, .rally .ball { animation: none; }
	.rally .fly { left: calc(50% - 40px); top: 40px; }
}



/* ---------- sports: the object, the surface, and its markings ---------- */
body[data-sport="pickleball"] { --obj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23f6ff8a'/%3E%3Cstop offset='.6' stop-color='%23d4e021'/%3E%3Cstop offset='1' stop-color='%238f9c0b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='14.5' fill='url(%23g)'/%3E%3Cg fill='%2356600a' opacity='.7'%3E%3Ccircle cx='16' cy='7.5' r='2'/%3E%3Ccircle cx='8.5' cy='12.5' r='2'/%3E%3Ccircle cx='23.5' cy='12.5' r='2'/%3E%3Ccircle cx='16' cy='15.5' r='2'/%3E%3Ccircle cx='11.5' cy='21.5' r='2'/%3E%3Ccircle cx='20.5' cy='21.5' r='2'/%3E%3Ccircle cx='16' cy='27' r='1.5'/%3E%3Ccircle cx='4.8' cy='19' r='1.3'/%3E%3Ccircle cx='27.2' cy='19' r='1.3'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-sport="badminton"] { --obj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 36 36'%3E%3Cg transform='rotate(-35 16 16)'%3E%3Cpath d='M10.5 20 L21.5 20 L28 3 L4 3 Z' fill='%23fbfaf6' stroke='%23a9adb3' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M13 20 L9.5 3 M16 20 L16 3 M19 20 L22.5 3 M7.2 11 L24.8 11' stroke='%23b4b8be' stroke-width='.9'/%3E%3Cpath d='M10 20 h12 a6 6 0 0 1 -12 0 z' fill='%23eadcc0' stroke='%239c8d70' stroke-width='1'/%3E%3Crect x='10' y='19.2' width='12' height='2.2' fill='%23c43c35'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-sport="pingpong"] { --obj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.85'%3E%3Cstop offset='0' stop-color='%23ffe0b0'/%3E%3Cstop offset='.55' stop-color='%23f59a2b'/%3E%3Cstop offset='1' stop-color='%23bd610b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='14' fill='url(%23g)'/%3E%3Cellipse cx='11' cy='10' rx='4' ry='2.6' fill='%23fff' opacity='.45' transform='rotate(-30 11 10)'/%3E%3C/svg%3E"); }
body[data-sport="volleyball"] { --obj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.85'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.7' stop-color='%23eef1f4'/%3E%3Cstop offset='1' stop-color='%23aebac5'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='14' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%236f7c89' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.45 12.38 L11.56 12.11 L11.68 11.84 L11.80 11.56 L11.92 11.28 L12.05 10.99 L12.18 10.70 L12.32 10.41 L12.45 10.12 L12.60 9.82 L12.74 9.53 L12.89 9.23 L13.05 8.93 L13.21 8.63 L13.37 8.34 L13.53 8.04 L13.70 7.75 L13.87 7.46 L14.04 7.17 L14.22 6.89 L14.39 6.61 L14.57 6.33 L14.75 6.07 L14.93 5.81 L15.11 5.55 L15.29 5.31 L15.47 5.07 L15.65 4.85 L15.83 4.63 L16.01 4.42 L16.18 4.22 L16.36 4.04 L16.53 3.86 L16.70 3.69 L16.86 3.54 L17.03 3.39 L17.18 3.26 L17.34 3.14 L17.49 3.02 L17.64 2.92 L17.78 2.83 L17.92 2.75 L18.06 2.68 L18.19 2.61 L18.31 2.56 L18.43 2.51 L18.55 2.47 L18.66 2.44 L18.77 2.42 L18.87 2.40 L18.97 2.39 L19.07 2.39 L19.16 2.39 L19.25 2.40 L19.33 2.41 L19.41 2.42'/%3E%3Cpath d='M23.81 26.34 L24.02 26.24 L24.23 26.12 L24.44 26.00 L24.66 25.88 L24.87 25.75 L25.08 25.61 L25.30 25.47 L25.51 25.32 L25.72 25.17 L25.93 25.01 L26.14 24.84 L26.35 24.67 L26.55 24.49 L26.75 24.31 L26.95 24.12 L27.14 23.92 L27.33 23.72 L27.51 23.52 L27.69 23.31 L27.86 23.09 L28.03 22.87 L28.19 22.64 L28.34 22.42 L28.48 22.18 L28.62 21.95 L28.75 21.71 L28.87 21.47 L28.98 21.23 L29.08 20.98'/%3E%3Cpath d='M11.45 12.38 L11.62 12.60 L11.80 12.82 L11.97 13.04 L12.16 13.28 L12.35 13.52 L12.55 13.76 L12.76 14.02 L12.97 14.28 L13.18 14.55 L13.41 14.82 L13.64 15.10 L13.87 15.39 L14.11 15.68 L14.36 15.98 L14.61 16.28 L14.86 16.59 L15.12 16.90 L15.39 17.21 L15.65 17.53 L15.92 17.85 L16.20 18.17 L16.47 18.49 L16.75 18.81 L17.03 19.14 L17.30 19.46 L17.58 19.78 L17.86 20.09 L18.13 20.40 L18.40 20.71 L18.67 21.02 L18.94 21.31 L19.20 21.60 L19.46 21.89 L19.71 22.17 L19.95 22.44 L20.19 22.70 L20.43 22.95 L20.65 23.19 L20.87 23.43 L21.08 23.65 L21.29 23.87 L21.48 24.08 L21.67 24.27 L21.85 24.46 L22.03 24.64 L22.19 24.81 L22.35 24.97 L22.50 25.12 L22.65 25.26 L22.79 25.40 L22.92 25.52 L23.04 25.64 L23.16 25.75 L23.27 25.86 L23.37 25.95 L23.47 26.04 L23.56 26.13 L23.65 26.21 L23.73 26.28 L23.81 26.34'/%3E%3Cpath d='M15.92 17.85 L16.12 17.59 L16.32 17.33 L16.52 17.06 L16.73 16.78 L16.95 16.49 L17.18 16.19 L17.41 15.88 L17.64 15.56 L17.88 15.24 L18.13 14.90 L18.38 14.56 L18.64 14.21 L18.90 13.85 L19.17 13.48 L19.43 13.11 L19.70 12.74 L19.97 12.36 L20.25 11.98 L20.52 11.60 L20.78 11.22 L21.05 10.84 L21.31 10.46 L21.57 10.09 L21.82 9.72 L22.06 9.37 L22.30 9.02 L22.52 8.68 L22.74 8.35 L22.94 8.04 L23.14 7.74 L23.32 7.46 L23.49 7.19 L23.64 6.94 L23.78 6.71 L23.91 6.49 L24.03 6.29 L24.14 6.11 L24.23 5.94 L24.31 5.79 L24.38 5.65 L24.44 5.53 L24.49 5.42 L24.53 5.33 L24.56 5.24 L24.59 5.17 L24.61 5.11 L24.62 5.06 L24.62 5.02 L24.62 4.99 L24.61 4.97 L24.60 4.95'/%3E%3Cpath d='M21.08 23.65 L21.34 23.50 L21.61 23.35 L21.89 23.18 L22.17 23.01 L22.45 22.83 L22.74 22.64 L23.04 22.44 L23.33 22.23 L23.64 22.01 L23.94 21.78 L24.25 21.54 L24.56 21.29 L24.87 21.04 L25.18 20.77 L25.48 20.49 L25.79 20.21 L26.09 19.91 L26.38 19.61 L26.67 19.30 L26.96 18.99 L27.23 18.66 L27.49 18.34 L27.74 18.00 L27.98 17.67 L28.20 17.33 L28.41 16.99 L28.60 16.66 L28.78 16.32 L28.94 15.99 L29.08 15.66 L29.20 15.33 L29.31 15.02 L29.40 14.70 L29.47 14.40 L29.52 14.11 L29.56 13.82 L29.58 13.54 L29.59 13.28 L29.59 13.02 L29.57 12.78 L29.54 12.55 L29.50 12.33 L29.45 12.11'/%3E%3Cpath d='M18.83 29.71 L19.06 29.66 L19.29 29.60 L19.51 29.53 L19.74 29.45 L19.96 29.36 L20.19 29.27 L20.41 29.17 L20.62 29.06 L20.84 28.95 L21.05 28.83 L21.25 28.70 L21.46 28.57 L21.65 28.43 L21.85 28.29 L22.04 28.14 L22.22 27.99 L22.40 27.84 L22.58 27.68 L22.75 27.52 L22.92 27.35 L23.08 27.19 L23.23 27.02 L23.38 26.85 L23.53 26.68 L23.67 26.51 L23.81 26.34'/%3E%3Cpath d='M23.81 26.34 L24.02 26.24 L24.23 26.12 L24.44 26.00 L24.66 25.88 L24.87 25.75 L25.08 25.61 L25.30 25.47 L25.51 25.32 L25.72 25.17 L25.93 25.01 L26.14 24.84 L26.35 24.67 L26.55 24.49 L26.75 24.31 L26.95 24.12 L27.14 23.92 L27.33 23.72 L27.51 23.52 L27.69 23.31 L27.86 23.09 L28.03 22.87 L28.19 22.64 L28.34 22.42 L28.48 22.18 L28.62 21.95 L28.75 21.71 L28.87 21.47 L28.98 21.23 L29.08 20.98'/%3E%3Cpath d='M26.75 24.97 L26.89 24.78 L27.03 24.59 L27.16 24.40 L27.28 24.21 L27.40 24.02 L27.50 23.83 L27.60 23.64 L27.70 23.46 L27.78 23.27 L27.86 23.09'/%3E%3Cpath d='M2.03 16.86 L2.03 16.79 L2.04 16.71 L2.05 16.64 L2.07 16.56 L2.10 16.48 L2.14 16.39 L2.18 16.31 L2.24 16.22 L2.30 16.13 L2.37 16.03 L2.46 15.94 L2.55 15.84 L2.65 15.74 L2.77 15.64 L2.89 15.54 L3.03 15.44 L3.17 15.33 L3.33 15.22 L3.50 15.12 L3.68 15.01 L3.87 14.90 L4.07 14.79 L4.28 14.68 L4.50 14.57 L4.73 14.46 L4.96 14.36 L5.21 14.25 L5.46 14.14 L5.72 14.04 L5.99 13.94 L6.26 13.83 L6.54 13.73 L6.82 13.63 L7.11 13.54 L7.40 13.44 L7.69 13.35 L7.98 13.26 L8.28 13.18 L8.57 13.09 L8.87 13.01 L9.16 12.93 L9.46 12.85 L9.75 12.78 L10.04 12.70 L10.33 12.64 L10.62 12.57 L10.90 12.50 L11.18 12.44 L11.45 12.38'/%3E%3Cpath d='M11.45 12.38 L11.56 12.11 L11.68 11.84 L11.80 11.56 L11.92 11.28 L12.05 10.99 L12.18 10.70 L12.32 10.41 L12.45 10.12 L12.60 9.82 L12.74 9.53 L12.89 9.23 L13.05 8.93 L13.21 8.63 L13.37 8.34 L13.53 8.04 L13.70 7.75 L13.87 7.46 L14.04 7.17 L14.22 6.89 L14.39 6.61 L14.57 6.33 L14.75 6.07 L14.93 5.81 L15.11 5.55 L15.29 5.31 L15.47 5.07 L15.65 4.85 L15.83 4.63 L16.01 4.42 L16.18 4.22 L16.36 4.04 L16.53 3.86 L16.70 3.69 L16.86 3.54 L17.03 3.39 L17.18 3.26 L17.34 3.14 L17.49 3.02 L17.64 2.92 L17.78 2.83 L17.92 2.75 L18.06 2.68 L18.19 2.61 L18.31 2.56 L18.43 2.51 L18.55 2.47 L18.66 2.44 L18.77 2.42 L18.87 2.40 L18.97 2.39 L19.07 2.39 L19.16 2.39 L19.25 2.40 L19.33 2.41 L19.41 2.42'/%3E%3Cpath d='M3.38 9.94 L3.50 9.74 L3.63 9.53 L3.78 9.33 L3.95 9.12 L4.13 8.92 L4.34 8.73 L4.55 8.54 L4.79 8.35 L5.04 8.18 L5.31 8.01 L5.59 7.84 L5.89 7.69 L6.20 7.54 L6.52 7.41 L6.85 7.28 L7.20 7.17 L7.54 7.06 L7.90 6.96 L8.26 6.87 L8.62 6.80 L8.99 6.73 L9.36 6.67 L9.72 6.62 L10.09 6.58 L10.45 6.55 L10.81 6.52 L11.17 6.50 L11.52 6.49 L11.87 6.48 L12.21 6.48 L12.54 6.49 L12.87 6.50 L13.19 6.51 L13.50 6.53 L13.81 6.55 L14.10 6.58 L14.39 6.61'/%3E%3Cpath d='M12.46 2.45 L12.76 2.39 L13.05 2.33 L13.35 2.28 L13.64 2.25 L13.93 2.23 L14.23 2.22 L14.51 2.22 L14.80 2.22 L15.07 2.24 L15.35 2.26 L15.62 2.30 L15.88 2.34 L16.14 2.38 L16.39 2.43 L16.64 2.49 L16.88 2.55 L17.12 2.62 L17.34 2.68 L17.57 2.76 L17.78 2.83'/%3E%3Cpath d='M2.03 16.86 L2.03 16.79 L2.04 16.71 L2.05 16.64 L2.07 16.56 L2.10 16.48 L2.14 16.39 L2.18 16.31 L2.24 16.22 L2.30 16.13 L2.37 16.03 L2.46 15.94 L2.55 15.84 L2.65 15.74 L2.77 15.64 L2.89 15.54 L3.03 15.44 L3.17 15.33 L3.33 15.22 L3.50 15.12 L3.68 15.01 L3.87 14.90 L4.07 14.79 L4.28 14.68 L4.50 14.57 L4.73 14.46 L4.96 14.36 L5.21 14.25 L5.46 14.14 L5.72 14.04 L5.99 13.94 L6.26 13.83 L6.54 13.73 L6.82 13.63 L7.11 13.54 L7.40 13.44 L7.69 13.35 L7.98 13.26 L8.28 13.18 L8.57 13.09 L8.87 13.01 L9.16 12.93 L9.46 12.85 L9.75 12.78 L10.04 12.70 L10.33 12.64 L10.62 12.57 L10.90 12.50 L11.18 12.44 L11.45 12.38'/%3E%3Cpath d='M18.83 29.71 L19.06 29.66 L19.29 29.60 L19.51 29.53 L19.74 29.45 L19.96 29.36 L20.19 29.27 L20.41 29.17 L20.62 29.06 L20.84 28.95 L21.05 28.83 L21.25 28.70 L21.46 28.57 L21.65 28.43 L21.85 28.29 L22.04 28.14 L22.22 27.99 L22.40 27.84 L22.58 27.68 L22.75 27.52 L22.92 27.35 L23.08 27.19 L23.23 27.02 L23.38 26.85 L23.53 26.68 L23.67 26.51 L23.81 26.34'/%3E%3Cpath d='M11.45 12.38 L11.62 12.60 L11.80 12.82 L11.97 13.04 L12.16 13.28 L12.35 13.52 L12.55 13.76 L12.76 14.02 L12.97 14.28 L13.18 14.55 L13.41 14.82 L13.64 15.10 L13.87 15.39 L14.11 15.68 L14.36 15.98 L14.61 16.28 L14.86 16.59 L15.12 16.90 L15.39 17.21 L15.65 17.53 L15.92 17.85 L16.20 18.17 L16.47 18.49 L16.75 18.81 L17.03 19.14 L17.30 19.46 L17.58 19.78 L17.86 20.09 L18.13 20.40 L18.40 20.71 L18.67 21.02 L18.94 21.31 L19.20 21.60 L19.46 21.89 L19.71 22.17 L19.95 22.44 L20.19 22.70 L20.43 22.95 L20.65 23.19 L20.87 23.43 L21.08 23.65 L21.29 23.87 L21.48 24.08 L21.67 24.27 L21.85 24.46 L22.03 24.64 L22.19 24.81 L22.35 24.97 L22.50 25.12 L22.65 25.26 L22.79 25.40 L22.92 25.52 L23.04 25.64 L23.16 25.75 L23.27 25.86 L23.37 25.95 L23.47 26.04 L23.56 26.13 L23.65 26.21 L23.73 26.28 L23.81 26.34'/%3E%3Cpath d='M2.30 16.13 L2.31 16.39 L2.32 16.66 L2.34 16.94 L2.36 17.23 L2.39 17.52 L2.43 17.83 L2.47 18.14 L2.52 18.46 L2.59 18.79 L2.66 19.13 L2.74 19.48 L2.83 19.83 L2.93 20.19 L3.04 20.55 L3.17 20.93 L3.31 21.30 L3.46 21.68 L3.63 22.06 L3.81 22.45 L4.01 22.83 L4.21 23.21 L4.44 23.59 L4.68 23.97 L4.93 24.34 L5.19 24.71 L5.47 25.07 L5.76 25.42 L6.06 25.76 L6.38 26.09 L6.70 26.40 L7.03 26.70 L7.37 26.99 L7.71 27.26 L8.06 27.52 L8.41 27.76 L8.76 27.98'/%3E%3Cpath d='M5.72 14.04 L5.79 14.30 L5.87 14.57 L5.95 14.84 L6.05 15.13 L6.14 15.43 L6.25 15.75 L6.37 16.07 L6.50 16.40 L6.63 16.75 L6.78 17.10 L6.94 17.47 L7.11 17.85 L7.29 18.23 L7.48 18.63 L7.69 19.03 L7.91 19.45 L8.15 19.87 L8.39 20.29 L8.65 20.72 L8.93 21.16 L9.21 21.59 L9.51 22.03 L9.82 22.46 L10.14 22.90 L10.47 23.32 L10.81 23.74 L11.16 24.15 L11.51 24.55 L11.87 24.94 L12.23 25.31 L12.60 25.67 L12.96 26.02 L13.33 26.34 L13.69 26.65 L14.05 26.94 L14.40 27.21 L14.75 27.46 L15.10 27.70 L15.43 27.91 L15.76 28.10 L16.07 28.28 L16.38 28.44 L16.68 28.58 L16.97 28.71 L17.24 28.82 L17.51 28.92 L17.76 29.00 L18.00 29.08 L18.24 29.14 L18.46 29.19 L18.67 29.23 L18.88 29.26 L19.07 29.28 L19.25 29.30 L19.43 29.31 L19.60 29.31 L19.76 29.31 L19.91 29.30 L20.05 29.29 L20.19 29.27'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='%237c8894' stroke-width='1.1'/%3E%3C/svg%3E"); }
body[data-sport="cornhole"] { --obj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.45' cy='.4' r='.72'%3E%3Cstop offset='0' stop-color='%23f27a6e'/%3E%3Cstop offset='.6' stop-color='%23c8342d'/%3E%3Cstop offset='1' stop-color='%237a1611'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-10 16 16)'%3E%3Cpath d='M6.78 5.62 Q15.14 6.62 23.22 3.98 Q27.00 3.60 27.33 7.39 Q26.06 15.36 28.67 23.01 Q29.00 26.80 25.21 27.05 Q16.66 25.78 8.39 28.15 Q4.60 28.40 4.33 24.61 Q5.74 17.04 3.27 9.79 Q3.00 6.00 6.78 5.62Z' fill='url(%23g)' stroke='%237a1611' stroke-width='.8'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M6.2 8 Q9.5 11 12 11.6' stroke='%237a1611' stroke-width='1.3' opacity='.4'/%3E%3Cpath d='M6.2 8 Q9.5 11 12 11.6' stroke='%23ff9d92' stroke-width='.7' opacity='.45' transform='translate(.6 .6)'/%3E%3Cpath d='M25.8 25.6 Q22.8 22.6 20.6 22.2' stroke='%237a1611' stroke-width='1.3' opacity='.4'/%3E%3Cpath d='M25.8 25.6 Q22.8 22.6 20.6 22.2' stroke='%23ff9d92' stroke-width='.7' opacity='.45' transform='translate(.6 .6)'/%3E%3C/g%3E%3Cpath d='M7.25 6.84 Q15.22 7.55 22.94 5.27 Q25.78 4.99 26.02 7.83 Q25.08 15.44 27.31 22.79 Q27.56 25.63 24.72 25.82 Q16.58 24.85 8.69 26.87 Q5.84 27.06 5.64 24.22 Q6.72 16.96 4.62 9.96 Q4.42 7.12 7.25 6.84Z' fill='none' stroke='%23f8d2c8' stroke-width='.75' stroke-dasharray='1.3 1' opacity='.75'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-sport="bocce"] { --obj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.85'%3E%3Cstop offset='0' stop-color='%23ff9b8f'/%3E%3Cstop offset='.5' stop-color='%23d63a2f'/%3E%3Cstop offset='1' stop-color='%237c1510'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='14' fill='url(%23g)'/%3E%3CclipPath id='c'%3E%3Ccircle cx='16' cy='16' r='14'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)' fill='none' stroke='%23e4e4e4' stroke-width='0.6' stroke-linecap='butt' stroke-linejoin='round' opacity='0.75'%3E%3Cpath d='M20.80 2.85 L21.00 2.94 L21.21 3.05 L21.41 3.18 L21.61 3.33 L21.80 3.50 L21.99 3.69 L22.17 3.90 L22.35 4.14 L22.52 4.39 L22.69 4.67 L22.85 4.97 L23.00 5.29 L23.14 5.63 L23.27 6.00 L23.40 6.38 L23.51 6.79 L23.62 7.21 L23.72 7.66 L23.80 8.12 L23.87 8.61 L23.94 9.11 L23.99 9.62 L24.02 10.16 L24.05 10.71 L24.06 11.27 L24.06 11.84 L24.05 12.43 L24.02 13.03 L23.98 13.63 L23.92 14.25 L23.86 14.87 L23.78 15.49 L23.68 16.11 L23.57 16.74 L23.46 17.37 L23.32 17.99 L23.18 18.61 L23.02 19.22 L22.86 19.83 L22.68 20.43 L22.49 21.02 L22.29 21.60 L22.08 22.17 L21.87 22.72 L21.64 23.26 L21.41 23.78 L21.18 24.28 L20.93 24.77 L20.68 25.23 L20.43 25.68 L20.17 26.10 L19.91 26.51 L19.65 26.89 L19.38 27.25 L19.11 27.59 L18.85 27.91 L18.58 28.20 L18.31 28.47 L18.04 28.71 L17.78 28.94 L17.52 29.14 L17.25 29.32 L17.00 29.48 L16.74 29.61 L16.49 29.72 L16.24 29.81 L16.00 29.88 L15.76 29.94 L15.53 29.97 L15.30 29.98 L15.08 29.97'/%3E%3Cpath d='M29.86 14.06 L29.82 13.84 L29.76 13.62 L29.68 13.41 L29.58 13.19 L29.46 12.97 L29.31 12.75 L29.15 12.53 L28.96 12.31 L28.75 12.09 L28.51 11.88 L28.26 11.67 L27.98 11.46 L27.68 11.25 L27.36 11.05 L27.01 10.85 L26.64 10.65 L26.25 10.47 L25.84 10.28 L25.41 10.11 L24.95 9.94 L24.48 9.78 L23.99 9.62 L23.48 9.48 L22.95 9.34 L22.40 9.22 L21.84 9.10 L21.26 9.00 L20.68 8.90 L20.08 8.82 L19.47 8.74 L18.85 8.68 L18.22 8.63 L17.59 8.60 L16.96 8.57 L16.32 8.56 L15.68 8.56 L15.04 8.57 L14.41 8.60 L13.78 8.63 L13.15 8.68 L12.53 8.74 L11.92 8.82 L11.32 8.90 L10.74 9.00 L10.16 9.10 L9.60 9.22 L9.05 9.34 L8.52 9.48 L8.01 9.62 L7.52 9.78 L7.05 9.94 L6.59 10.11 L6.16 10.28 L5.75 10.47 L5.36 10.65 L4.99 10.85 L4.64 11.05 L4.32 11.25 L4.02 11.46 L3.74 11.67 L3.49 11.88 L3.25 12.09 L3.04 12.31 L2.85 12.53 L2.69 12.75 L2.54 12.97 L2.42 13.19 L2.32 13.41 L2.24 13.62 L2.18 13.84 L2.14 14.06'/%3E%3Cpath d='M3.48 9.73 L3.30 10.12 L3.12 10.52 L2.96 10.94 L2.82 11.37 L2.70 11.81 L2.59 12.26 L2.49 12.72 L2.42 13.19 L2.37 13.66 L2.33 14.15 L2.31 14.64 L2.31 15.14 L2.33 15.64 L2.37 16.15 L2.43 16.66 L2.51 17.17 L2.61 17.69 L2.73 18.20 L2.87 18.72 L3.03 19.23 L3.21 19.74 L3.41 20.25 L3.63 20.76 L3.86 21.26 L4.12 21.75 L4.39 22.24 L4.68 22.72 L4.99 23.19 L5.32 23.65 L5.66 24.10 L6.01 24.53 L6.38 24.96 L6.77 25.37 L7.16 25.77 L7.57 26.15 L7.99 26.51 L8.42 26.86 L8.86 27.19 L9.31 27.51 L9.77 27.80 L10.23 28.08 L10.70 28.34 L11.18 28.58 L11.66 28.80 L12.14 29.00 L12.62 29.18 L13.11 29.34 L13.60 29.48 L14.08 29.60 L14.56 29.70 L15.05 29.78 L15.53 29.84 L16.00 29.88 L16.47 29.91 L16.94 29.91 L17.39 29.89 L17.85 29.85 L18.29 29.80 L18.73 29.73 L19.16 29.64 L19.58 29.53'/%3E%3Cpath d='M21.41 3.18 L20.86 3.00 L20.31 2.86 L19.76 2.75 L19.21 2.68 L18.66 2.65 L18.12 2.66 L17.59 2.71 L17.08 2.80 L16.57 2.93 L16.08 3.11 L15.62 3.33 L15.17 3.59 L14.75 3.90 L14.36 4.24 L14.00 4.63 L13.67 5.06 L13.38 5.53 L13.12 6.04 L12.91 6.59 L12.75 7.17 L12.62 7.78 L12.55 8.42 L12.53 9.08 L12.55 9.76 L12.63 10.46 L12.76 11.18 L12.94 11.90 L13.17 12.62 L13.46 13.34 L13.79 14.06 L14.17 14.77 L14.59 15.45 L15.05 16.12 L15.56 16.76 L16.10 17.37 L16.67 17.94 L17.27 18.47 L17.89 18.97 L18.52 19.41 L19.18 19.81 L19.84 20.16 L20.51 20.45 L21.17 20.70 L21.84 20.89 L22.49 21.02 L23.13 21.10 L23.76 21.13 L24.36 21.11 L24.95 21.03 L25.50 20.91 L26.03 20.74 L26.53 20.53 L27.00 20.27 L27.44 19.97 L27.83 19.64 L28.20 19.27 L28.52 18.87 L28.81 18.44 L29.06 17.98 L29.27 17.50 L29.45 17.00 L29.58 16.48 L29.68 15.94 L29.75 15.39 L29.77 14.84 L29.76 14.27 L29.72 13.69 L29.64 13.12 L29.52 12.54 L29.38 11.96 L29.20 11.38 L29.00 10.81 L28.76 10.24 L28.49 9.69 L28.20 9.14 L27.88 8.60 L27.54 8.08 L27.18 7.57 L26.79 7.08 L26.38 6.60 L25.95 6.15 L25.50 5.71 L25.03 5.30 L24.55 4.92 L24.05 4.55 L23.54 4.22 L23.02 3.91 L22.49 3.64 L21.95 3.39 L21.41 3.18'/%3E%3Cpath d='M3.67 22.64 L3.77 22.79 L3.88 22.90 L4.00 22.97 L4.13 23.00 L4.28 22.98 L4.43 22.91 L4.60 22.80 L4.77 22.63 L4.96 22.41 L5.15 22.14 L5.34 21.81 L5.55 21.44 L5.76 21.01 L5.97 20.54 L6.18 20.02 L6.40 19.45 L6.61 18.84 L6.82 18.20 L7.02 17.52 L7.22 16.81 L7.41 16.08 L7.59 15.34 L7.76 14.58 L7.91 13.82 L8.06 13.06 L8.18 12.30 L8.29 11.56 L8.39 10.84 L8.47 10.15 L8.52 9.48 L8.57 8.85 L8.59 8.25 L8.60 7.70 L8.59 7.19 L8.56 6.73 L8.52 6.32 L8.46 5.96 L8.39 5.65 L8.31 5.39 L8.21 5.18 L8.10 5.02 L7.99 4.91 L7.86 4.85 L7.72 4.83 L7.58 4.86 L7.43 4.93 L7.28 5.05'/%3E%3Cpath d='M7.16 25.77 L6.98 25.90 L6.86 26.03 L6.78 26.16 L6.75 26.29 L6.77 26.42 L6.83 26.54 L6.93 26.67'/%3E%3Cpath d='M25.00 26.73 L25.12 26.60 L25.21 26.48 L25.25 26.35 L25.24 26.22 L25.19 26.09 L25.09 25.96 L24.93 25.83 L24.73 25.70 L24.47 25.57 L24.16 25.45 L23.80 25.33 L23.39 25.21 L22.92 25.10 L22.41 24.99 L21.85 24.90 L21.25 24.81 L20.61 24.73 L19.93 24.66 L19.22 24.60 L18.49 24.55 L17.74 24.52 L16.97 24.50 L16.19 24.49 L15.42 24.49 L14.65 24.51 L13.89 24.53 L13.14 24.57 L12.42 24.63 L11.73 24.69 L11.07 24.77 L10.45 24.85 L9.87 24.94 L9.33 25.04 L8.84 25.15 L8.40 25.27 L8.01 25.39 L7.68 25.51 L7.39 25.64 L7.16 25.77'/%3E%3C/g%3E%3Cellipse cx='9.6' cy='8.6' rx='2.8' ry='1.6' fill='%23fff' opacity='.3' transform='rotate(-35 9.6 8.6)'/%3E%3C/svg%3E"); }
body[data-sport="horseshoes"] { --obj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9.5 4.5 C2.5 11 4 26.5 16 27.5 C28 26.5 29.5 11 22.5 4.5' fill='none' stroke='%238d979f' stroke-width='5.6'/%3E%3Cpath d='M8.4 5.6 C3.4 11.5 4.8 24.6 16 25.6' fill='none' stroke='%23d3dade' stroke-width='1.1' opacity='.8'/%3E%3Cg fill='%233f474e'%3E%3Ccircle cx='6' cy='12' r='.95'/%3E%3Ccircle cx='5.8' cy='18.6' r='.95'/%3E%3Ccircle cx='9.4' cy='24.2' r='.95'/%3E%3Ccircle cx='22.6' cy='24.2' r='.95'/%3E%3Ccircle cx='26.2' cy='18.6' r='.95'/%3E%3Ccircle cx='26' cy='12' r='.95'/%3E%3C/g%3E%3Crect x='6.3' y='2.6' width='5.6' height='3' rx='.6' fill='%236f7880' transform='rotate(40 9 4)'/%3E%3Crect x='20.1' y='2.6' width='5.6' height='3' rx='.6' fill='%236f7880' transform='rotate(-40 23 4)'/%3E%3C/svg%3E"); }

/* the header logo always keeps its tennis ball */
body:not([data-sport="tennis"]) .ball:not(.brand-ball) {
	background: var(--obj) center / contain no-repeat;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}
body:not([data-sport="tennis"]) .ball:not(.brand-ball)::before,
body:not([data-sport="tennis"]) .ball:not(.brand-ball)::after { display: none; }
body:not([data-sport="tennis"]) .ball.small { filter: drop-shadow(0 3px 3px #000); }
body:not([data-sport="tennis"]) .ball.tiny { --size: 14px; }

/* rough courts outside tennis get a darker, scuffed tint instead of clay */
body:not([data-sport="tennis"]) .ct.rough { box-shadow: inset 0 0 0 999px rgb(60 30 8 / 40%); }
body:not([data-sport="tennis"]) .ct-wrap.lit .ct.rough { box-shadow: 0 0 0 3px var(--optic), inset 0 0 0 999px rgb(60 30 8 / 40%); }

/* pickleball: blue court, green kitchen either side of the net */
body[data-sport="pickleball"] .ct { background: linear-gradient(160deg, #2f72aa, #255d8d); }
body[data-sport="pickleball"] .ct::before {
	inset: 0;
	border: 0;
	background:
		linear-gradient(90deg, transparent 34%, rgb(58 140 96 / 70%) 34% 66%, transparent 66%),
		linear-gradient(90deg, transparent calc(34% - 0.75px), rgb(255 255 255 / 80%) calc(34% - 0.75px) calc(34% + 0.75px), transparent calc(34% + 0.75px), transparent calc(66% - 0.75px), rgb(255 255 255 / 80%) calc(66% - 0.75px) calc(66% + 0.75px), transparent calc(66% + 0.75px)),
		linear-gradient(0deg, transparent calc(50% - 0.75px), rgb(255 255 255 / 80%) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) left / 34% 100% no-repeat,
		linear-gradient(0deg, transparent calc(50% - 0.75px), rgb(255 255 255 / 80%) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) right / 34% 100% no-repeat;
}

/* badminton: green mat, doubles and singles lines, short service lines */
body[data-sport="badminton"] .ct { background: linear-gradient(160deg, #2f7d56, #256647); }
body[data-sport="badminton"] .ct::before {
	inset: 0;
	border: 0;
	background:
		linear-gradient(90deg, transparent calc(5.7% - 0.75px), rgb(255 255 255 / 80%) calc(5.7% - 0.75px) calc(5.7% + 0.75px), transparent calc(5.7% + 0.75px), transparent calc(35.2% - 0.75px), rgb(255 255 255 / 80%) calc(35.2% - 0.75px) calc(35.2% + 0.75px), transparent calc(35.2% + 0.75px), transparent calc(64.8% - 0.75px), rgb(255 255 255 / 80%) calc(64.8% - 0.75px) calc(64.8% + 0.75px), transparent calc(64.8% + 0.75px), transparent calc(94.3% - 0.75px), rgb(255 255 255 / 80%) calc(94.3% - 0.75px) calc(94.3% + 0.75px), transparent calc(94.3% + 0.75px)),
		linear-gradient(0deg, transparent calc(7.5% - 0.75px), rgb(255 255 255 / 80%) calc(7.5% - 0.75px) calc(7.5% + 0.75px), transparent calc(7.5% + 0.75px), transparent calc(92.5% - 0.75px), rgb(255 255 255 / 80%) calc(92.5% - 0.75px) calc(92.5% + 0.75px), transparent calc(92.5% + 0.75px)),
		linear-gradient(0deg, transparent calc(50% - 0.75px), rgb(255 255 255 / 80%) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) left / 35.2% 100% no-repeat,
		linear-gradient(0deg, transparent calc(50% - 0.75px), rgb(255 255 255 / 80%) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) right / 35.2% 100% no-repeat;
}
body[data-sport="badminton"] .ct::after { width: 2px; left: calc(50% - 1px); }

/* ping pong: a table with the doubles center line */
body[data-sport="pingpong"] .ct { background: linear-gradient(160deg, #21508e, #173b6c); border-color: #fff; border-radius: 2px; }
body[data-sport="pingpong"] .ct::before { inset: 0; border: 0; background: linear-gradient(0deg, transparent calc(50% - 0.75px), #fff calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
body[data-sport="pingpong"] .ct::after { top: -7px; bottom: -7px; background: #e9ecef; box-shadow: 0 0 0 1px #2b2f33; }

/* volleyball (beach doubles): sand, boundary straps, a mesh net */
body[data-sport="volleyball"] .ct {
	background:
		radial-gradient(rgb(110 80 35 / 30%) 0.7px, transparent 1.2px) 0 0 / 6px 6px,
		radial-gradient(rgb(255 255 255 / 35%) 0.7px, transparent 1.2px) 3px 3px / 7px 7px,
		linear-gradient(160deg, #e2c793, #c9a66b);
	border: 3px solid #2d6fc7;
}
body[data-sport="volleyball"] .ct::before { display: none; }
body[data-sport="volleyball"] .ct::after {
	width: 5px;
	left: calc(50% - 2.5px);
	background: repeating-linear-gradient(0deg, #f4f4f4 0 2px, #2b2b2b 2px 3px);
	box-shadow: 0 0 4px rgb(0 0 0 / 50%);
}

/* cornhole: a lane with a board at each end */
body[data-sport="cornhole"] .ct { background: linear-gradient(160deg, #34603a, #27492d); border-color: rgb(255 255 255 / 22%); }
body[data-sport="cornhole"] .ct::before,
body[data-sport="cornhole"] .ct::after {
	inset: auto;
	top: 24%;
	width: 15%;
	height: 52%;
	border: 0;
	border-radius: 2px;
	box-shadow: 0 2px 4px rgb(0 0 0 / 55%);
}
body[data-sport="cornhole"] .ct::before { left: 4%; background: radial-gradient(circle at 30% 50%, #160d04 0 5px, transparent 5.5px), linear-gradient(90deg, #b9884a, #d9ad70); }
body[data-sport="cornhole"] .ct::after { right: 4%; background: radial-gradient(circle at 70% 50%, #160d04 0 5px, transparent 5.5px), linear-gradient(270deg, #b9884a, #d9ad70); }

/* bocce: crushed-stone court in a wooden frame, center line, the pallino */
body[data-sport="bocce"] .ct {
	background:
		radial-gradient(rgb(90 70 40 / 30%) 0.7px, transparent 1.2px) 0 0 / 5px 5px,
		linear-gradient(160deg, #cfb98e, #b89c6b);
	border: 4px solid #7a4e2b;
}
body[data-sport="bocce"] .ct::before { inset: 0; border: 0; background: linear-gradient(90deg, transparent calc(12% - 0.75px), rgb(255 255 255 / 55%) calc(12% - 0.75px) calc(12% + 0.75px), transparent calc(12% + 0.75px), transparent calc(50% - 0.75px), rgb(255 255 255 / 55%) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px), transparent calc(88% - 0.75px), rgb(255 255 255 / 55%) calc(88% - 0.75px) calc(88% + 0.75px), transparent calc(88% + 0.75px)); }
body[data-sport="bocce"] .ct::after { display: none; }

/* horseshoes: grass with a sand pit and stake at each end */
body[data-sport="horseshoes"] .ct { background: linear-gradient(160deg, #4d8a3e, #3a6b2f); border-color: rgb(255 255 255 / 22%); }
body[data-sport="horseshoes"] .ct::before,
body[data-sport="horseshoes"] .ct::after {
	inset: auto;
	top: 22%;
	width: 13%;
	height: 56%;
	border: 2px solid #6b4a28;
	border-radius: 1px;
	background: radial-gradient(circle, #3a2a16 0 2.5px, transparent 3px), #d5b77f;
	box-shadow: none;
}
body[data-sport="horseshoes"] .ct::before { left: 4%; }
body[data-sport="horseshoes"] .ct::after { right: 4%; }

.print-head, .print-sheets { display: none; }


/* printing: a plain schedule on white. Default margins, so Chrome's Default setting means half an inch. */

@page { margin: 0.5in; }

@media print {
	body { background: #fff; color: #000; }
	.topbar, .tools, .rail, .wk-tools, .tray, .toast, .tip, .overlay, .verdict { display: none !important; }
	main { max-width: none; padding: 0; }
	.season-grid { display: block; }
	.print-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
	.print-head h1 { font-size: 24px; }
	.print-head p { margin: 0; font-size: 12px; }
	.wk { break-inside: avoid; background: #fff !important; border: 1px solid #999; padding: 6px 8px; margin-bottom: 10px; }
	.wk.off { background: #fff !important; }
	.wk-date small, .ct-name { color: #333; }
	.ct, .ct.rough { background: #fff !important; border: 1px solid #333 !important; box-shadow: none !important; min-height: 64px; }
	/* Backgrounds don't print by default, so the net is a border on the first team's side */
	.ct::before, .ct::after { display: none !important; }
	.ct .side:first-child { border-right: 1.5px solid #333; }
	.chip-p, .chip-p.g-f, .sit .chip-p { background: none; color: #000; padding: 0 3px; }
	.chip-p .ball { display: none; }
	.chip-p.duty .nm::after { content: " ●"; }
	.ct-wrap.dim { opacity: 1; }
	.ct-wrap.lit .ct { box-shadow: none; }

	/* one player's season on one page */
	body.print-players > *:not(.print-sheets) { display: none !important; }
	body.print-players .print-sheets { display: block; }
	.sheet { break-after: page; color: #000; font: 10.5pt/1.3 var(--body); }
	.sheet:last-child { break-after: auto; }
	.sheet h1 { font: 700 26pt/1 var(--head); margin: 0 0 3pt; }
	.sheet .sub { margin: 0 0 10pt; color: #333; }
	.ps { width: 100%; border-collapse: collapse; }
	.ps th { text-align: left; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.05em; padding: 3pt 6pt; border-bottom: 1.5pt solid #000; }
	.ps td { padding: 2.4pt 6pt; border-bottom: 0.5pt solid #bbb; }
	.ps td.n { width: 3em; color: #444; }
	.ps .muted, .ps tr.off td { color: #666; font-style: italic; }
	.ps .duty { text-align: center; font-weight: 700; width: 5.5em; }
	.sheet.dense { font-size: 9pt; }
	.sheet.dense .ps td { padding: 1.2pt 5pt; }
	.sheet footer { margin-top: 10pt; font-size: 9.5pt; }
	.sheet footer p { margin: 0 0 3pt; }
}