/* Live public layout */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Theme 1: Classic Green */
:root,
[data-theme="classic"] {
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;

	--font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-xs: 0.7rem;
	--font-sm: 0.75rem;
	--font-base: 0.875rem;
	--font-md: 1rem;
	--font-lg: 1.1rem;
	--font-xl: 1.25rem;
	--font-2xl: 2rem;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;

	--color-bg: #f9fafb;
	--color-surface: #ffffff;
	--color-surface-alt: #f0fdf4;
	--color-border: #e5e7eb;
	--color-border-accent: #dcfce7;

	--color-header-bg: #166534;
	--color-header-text: #ffffff;
	--color-header-sub: rgba(255,255,255,0.85);

	--color-card-header-bg: #f0fdf4;
	--color-card-header-text: #166534;
	--color-card-header-border: #dcfce7;
	--color-card-shadow: rgba(0,0,0,0.1);
	--color-card-radius: 0.5rem;

	--color-th-bg: #f3f4f6;
	--color-th-text: #6b7280;
	--color-th-border: #e5e7eb;

	--color-text: #111827;
	--color-text-muted: #6b7280;
	--color-text-subtle: #9ca3af;

	--color-pos: #15803d;
	--color-score: #111827;

	--color-primary: #15803d;
	--color-primary-hover: #166534;
	--color-primary-text: #ffffff;

	--color-secondary-bg: #f3f4f6;
	--color-secondary-text: #374151;
	--color-secondary-border: #d1d5db;

	--color-danger: #ef4444;
	--color-danger-text: #ffffff;

	--color-badge-format-bg: #dcfce7;
	--color-badge-format-text: #166534;
	--color-badge-live-bg: #ef4444;
	--color-badge-live-text: #ffffff;

	--color-banner-bg: #dcfce7;
	--color-banner-text: #14532d;

	--color-input-border: #d1d5db;
	--color-input-focus: #16a34a;
	--color-input-focus-ring: rgba(22, 163, 74, 0.2);

	--color-summary-bg: #f0fdf4;
	--color-summary-border: #16a34a;

	--color-player-row-bg: #f9fafb;

	--color-tab-border: #15803d;
	--color-tab-text: #166534;
	--color-tab-active-bg: #15803d;
	--color-tab-active-text: #ffffff;

	--heading-weight: 600;
	--heading-transform: none;
	--heading-letter-spacing: normal;
	--card-border: none;
}

/* Theme 2: Augusta */
[data-theme="augusta"] {
	--font-heading: 'Playfair Display', 'Source Serif 4', Georgia, serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--color-bg: #faf8f2;
	--color-surface: #fefdfb;
	--color-surface-alt: #f5f0e6;
	--color-border: #e8e0d0;
	--color-border-accent: #d4c9a8;

	--color-header-bg: #1a2e1a;
	--color-header-text: #f0e6c8;
	--color-header-sub: rgba(240,230,200,0.75);

	--color-card-header-bg: #f5f0e6;
	--color-card-header-text: #2d4a2d;
	--color-card-header-border: #d4c9a8;
	--color-card-shadow: rgba(80,60,20,0.08);
	--color-card-radius: 0.375rem;

	--color-th-bg: #f0ebe0;
	--color-th-text: #7a6e55;
	--color-th-border: #d4c9a8;

	--color-text: #2c2416;
	--color-text-muted: #7a6e55;
	--color-text-subtle: #a69878;

	--color-pos: #c4a35a;
	--color-score: #2c2416;

	--color-primary: #2d4a2d;
	--color-primary-hover: #1a2e1a;
	--color-primary-text: #f0e6c8;

	--color-secondary-bg: #f0ebe0;
	--color-secondary-text: #5a4e38;
	--color-secondary-border: #d4c9a8;

	--color-danger: #a04040;
	--color-danger-text: #ffffff;

	--color-badge-format-bg: #f0e6c8;
	--color-badge-format-text: #5a4520;
	--color-badge-live-bg: #a04040;
	--color-badge-live-text: #ffffff;

	--color-banner-bg: #f0e6c8;
	--color-banner-text: #3d3520;

	--color-input-border: #d4c9a8;
	--color-input-focus: #c4a35a;
	--color-input-focus-ring: rgba(196, 163, 90, 0.25);

	--color-summary-bg: #f5f0e6;
	--color-summary-border: #c4a35a;

	--color-player-row-bg: #faf8f2;

	--color-tab-border: #2d4a2d;
	--color-tab-text: #2d4a2d;
	--color-tab-active-bg: #2d4a2d;
	--color-tab-active-text: #f0e6c8;

	--heading-weight: 600;
	--heading-transform: none;
	--heading-letter-spacing: 0.01em;
	--card-border: 1px solid #e8e0d0;
}

/* Theme 3: Ocean Links */
[data-theme="ocean"] {
	--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--color-bg: #f0f4f8;
	--color-surface: #ffffff;
	--color-surface-alt: #e8f0f8;
	--color-border: #d0dbe8;
	--color-border-accent: #b8cce0;

	--color-header-bg: #1e3a5f;
	--color-header-text: #ffffff;
	--color-header-sub: rgba(255,255,255,0.8);

	--color-card-header-bg: #e8f0f8;
	--color-card-header-text: #1e3a5f;
	--color-card-header-border: #b8cce0;
	--color-card-shadow: rgba(30,58,95,0.1);
	--color-card-radius: 0.75rem;

	--color-th-bg: #eaf0f6;
	--color-th-text: #5a7a9a;
	--color-th-border: #d0dbe8;

	--color-text: #1a2a3a;
	--color-text-muted: #5a7a9a;
	--color-text-subtle: #8aa0b8;

	--color-pos: #0d9488;
	--color-score: #1a2a3a;

	--color-primary: #1e3a5f;
	--color-primary-hover: #15304f;
	--color-primary-text: #ffffff;

	--color-secondary-bg: #e8f0f8;
	--color-secondary-text: #3a5a7a;
	--color-secondary-border: #b8cce0;

	--color-danger: #dc4e4e;
	--color-danger-text: #ffffff;

	--color-badge-format-bg: #d5f0ee;
	--color-badge-format-text: #0d5e56;
	--color-badge-live-bg: #dc4e4e;
	--color-badge-live-text: #ffffff;

	--color-banner-bg: #d5f0ee;
	--color-banner-text: #0d5e56;

	--color-input-border: #b8cce0;
	--color-input-focus: #0d9488;
	--color-input-focus-ring: rgba(13, 148, 136, 0.2);

	--color-summary-bg: #e8f0f8;
	--color-summary-border: #0d9488;

	--color-player-row-bg: #f0f4f8;

	--color-tab-border: #1e3a5f;
	--color-tab-text: #1e3a5f;
	--color-tab-active-bg: #0d9488;
	--color-tab-active-text: #ffffff;

	--heading-weight: 600;
	--heading-transform: none;
	--heading-letter-spacing: -0.01em;
	--card-border: none;
}

/* Theme 4: Sunset Tour */
[data-theme="sunset"] {
	--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

	--color-bg: #fefcf9;
	--color-surface: #ffffff;
	--color-surface-alt: #fef6ee;
	--color-border: #e8ddd0;
	--color-border-accent: #f0d8b8;

	--color-header-bg: #2d2d2d;
	--color-header-text: #ffffff;
	--color-header-sub: rgba(255,255,255,0.75);

	--color-card-header-bg: #fef6ee;
	--color-card-header-text: #8a5a20;
	--color-card-header-border: #f0d8b8;
	--color-card-shadow: rgba(80,50,20,0.08);
	--color-card-radius: 0.625rem;

	--color-th-bg: #faf5ee;
	--color-th-text: #9a8060;
	--color-th-border: #e8ddd0;

	--color-text: #2d2420;
	--color-text-muted: #8a7a65;
	--color-text-subtle: #b0a088;

	--color-pos: #e8873a;
	--color-score: #2d2420;

	--color-primary: #e8873a;
	--color-primary-hover: #d07030;
	--color-primary-text: #ffffff;

	--color-secondary-bg: #f5f0e8;
	--color-secondary-text: #5a4e38;
	--color-secondary-border: #e0d5c5;

	--color-danger: #d04545;
	--color-danger-text: #ffffff;

	--color-badge-format-bg: #fef0dd;
	--color-badge-format-text: #8a5a20;
	--color-badge-live-bg: #d04545;
	--color-badge-live-text: #ffffff;

	--color-banner-bg: #fef0dd;
	--color-banner-text: #6a4510;

	--color-input-border: #e0d5c5;
	--color-input-focus: #e8873a;
	--color-input-focus-ring: rgba(232, 135, 58, 0.2);

	--color-summary-bg: #fef6ee;
	--color-summary-border: #e8873a;

	--color-player-row-bg: #fefcf9;

	--color-tab-border: #2d2d2d;
	--color-tab-text: #2d2d2d;
	--color-tab-active-bg: #e8873a;
	--color-tab-active-text: #ffffff;

	--heading-weight: 700;
	--heading-transform: uppercase;
	--heading-letter-spacing: 0.04em;
	--card-border: none;
}

body {
	font-family: var(--font-body);
	background: var(--color-bg);
	color: var(--color-text);
	min-height: 100vh;
	touch-action: manipulation;
}
.header {
	background: var(--color-header-bg);
	color: var(--color-header-text);
	padding: var(--space-3) var(--space-4);
	min-height: 6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.header h1 {
	font-family: var(--font-heading);
	font-size: var(--font-xl);
	font-weight: var(--heading-weight);
	letter-spacing: var(--heading-letter-spacing);
}
.header .subtitle { font-size: var(--font-base); opacity: 0.85; margin-top: var(--space-1); }
.app-logo {
	position: absolute;
	left: var(--space-3);
	top: 50%;
	transform: translateY(-50%);
	height: 5rem;
	border-radius: 4px;
}
.club-logo {
	position: absolute;
	right: var(--space-3);
	top: 50%;
	transform: translateY(-50%);
	height: 5rem;
	border-radius: 4px;
}
.container { max-width: 960px; margin: 0 auto; padding: var(--space-4); }
.card {
	background: var(--color-surface);
	border-radius: var(--color-card-radius);
	box-shadow: 0 1px 3px var(--color-card-shadow);
	border: var(--card-border);
	overflow-x: auto;
	margin-bottom: var(--space-4);
}
.card-header {
	background: var(--color-card-header-bg);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-card-header-border);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--font-base);
	color: var(--color-card-header-text);
}
table { width: 100%; border-collapse: collapse; font-size: var(--font-base); }
th {
	background: var(--color-th-bg);
	padding: 0.6rem var(--space-3);
	text-align: left;
	font-weight: 600;
	font-size: var(--font-sm);
	text-transform: uppercase;
	color: var(--color-th-text);
	border-bottom: 2px solid var(--color-th-border);
	letter-spacing: 0.03em;
}
th.num, td.num { text-align: center; }
td {
	padding: 0.6rem var(--space-3);
	border-bottom: 1px solid var(--color-border);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-surface-alt); }
.pos { font-weight: 700; color: var(--color-pos); width: 2.5rem; text-align: center; }
.party-name { font-weight: 600; }
.members { font-size: var(--font-sm); color: var(--color-text-muted); }
.score { font-weight: 700; font-size: var(--font-lg); }
.holes-played { font-size: var(--font-sm); color: var(--color-text-muted); }
.round-col { font-size: var(--font-sm); min-width: 2.5rem; }
.badge {
	display: inline-block;
	padding: 0.125rem var(--space-2);
	border-radius: 9999px;
	font-size: var(--font-sm);
	font-weight: 600;
	background: var(--color-badge-format-bg);
	color: var(--color-badge-format-text);
}
.format-badges { text-align: center; margin: var(--space-2) 0; }
.nav-tabs {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: var(--space-3) auto 0;
	max-width: 320px;
}
.nav-tab {
	flex: 1;
	display: block;
	padding: var(--space-2) var(--space-4);
	text-align: center;
	text-decoration: none;
	font-size: var(--font-base);
	font-weight: 600;
	border: 1px solid var(--color-tab-border);
	color: var(--color-tab-text);
	background: var(--color-surface);
	transition: background 0.15s, color 0.15s;
}
.nav-tab:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.nav-tab:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.nav-tab.active {
	background: var(--color-tab-active-bg);
	color: var(--color-tab-active-text);
	border-color: var(--color-tab-active-bg);
}
button.nav-tab {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	cursor: pointer;
}
.bracket-round-tabs {
	max-width: 100%;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.bracket-round-tabs .nav-tab {
	flex: 0 1 auto;
	border-radius: var(--radius-md);
}
.status-live {
	display: inline-block;
	padding: 0.125rem var(--space-2);
	background: var(--color-badge-live-bg);
	color: var(--color-badge-live-text);
	border-radius: 9999px;
	font-size: var(--font-sm);
	font-weight: 700;
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(1.05); }
}
.score-stepper {
	display: inline-flex;
	align-items: stretch;
	vertical-align: middle;
}
.stepper-btn {
	width: 2.65rem;
	height: 2.65rem;
	margin: 0;
	border: 1px solid var(--color-input-border);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 2.65rem;
	text-align: center;
	cursor: pointer;
	transition: background 0.1s, border-color 0.1s;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	padding: 0;
	box-sizing: border-box;
	touch-action: manipulation;
}
.stepper-minus { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: none; }
.stepper-plus { border-left: none; }
.stepper-max {
	margin-left: 0.35rem;
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-md);
	font-size: 1.3rem;
	line-height: 2.65rem;
	color: var(--color-text-muted);
	background: var(--color-th-bg);
}
.stepper-max.is-max,
.stepper-max.is-max:active:not(:disabled) {
	background: #ef4444;
	color: #ffffff;
	border-color: #ef4444;
}
.stepper-max:active:not(:disabled) {
	background: var(--color-input-focus-ring);
	color: var(--color-text);
}
/* When pickup chip is absent, plus button keeps the right rounded corner. */
.score-stepper .stepper-plus:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.stepper-btn:active:not(:disabled) {
	background: var(--color-input-focus-ring);
	border-color: var(--color-input-focus);
}
.stepper-btn:disabled {
	background: var(--color-th-bg);
	color: var(--color-text-subtle);
	cursor: not-allowed;
}
.stepper-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.65rem;
	height: 2.65rem;
	border: 1px solid var(--color-input-border);
	border-left: none;
	border-right: none;
	font-size: 0.95rem;
	font-weight: 600;
	background: var(--color-surface);
	color: var(--color-text);
	box-sizing: border-box;
}
.summary-row { background: var(--color-summary-bg); font-weight: 700; }
.summary-row td { border-top: 2px solid var(--color-summary-border); }
.status-banner {
	text-align: center;
	padding: var(--space-4);
	margin-bottom: var(--space-3);
	border-radius: var(--color-card-radius);
	background: var(--color-banner-bg);
	color: var(--color-banner-text);
}
.status-banner-completed {
	background: var(--color-th-bg);
	color: var(--color-text-muted);
}
.stepper-btn:disabled + .stepper-value {
	background: var(--color-th-bg);
	color: var(--color-text-muted);
}
.signup-label {
	display: block;
	font-size: var(--font-sm);
	font-weight: 600;
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
}
.signup-input {
	width: 100%;
	padding: var(--space-2);
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-md);
	font-size: var(--font-base);
	font-family: var(--font-body);
	background: var(--color-surface);
	color: var(--color-text);
}
.signup-input:focus {
	outline: none;
	border-color: var(--color-input-focus);
	box-shadow: 0 0 0 2px var(--color-input-focus-ring);
}
select.signup-input {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-2) center;
	padding-right: var(--space-8);
}
.player-row {
	margin-bottom: var(--space-4);
	padding: var(--space-3);
	background: var(--color-player-row-bg);
	border-radius: var(--radius-md);
}
.btn-primary {
	width: auto !important;
	padding: var(--space-2) var(--space-4);
	background: var(--color-primary);
	color: var(--color-primary-text);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-base);
	font-weight: 600;
	font-family: var(--font-body);
	cursor: pointer;
	transition: background 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-secondary {
	width: auto !important;
	padding: var(--space-2) var(--space-4);
	background: var(--color-secondary-bg);
	color: var(--color-secondary-text);
	border: 1px solid var(--color-secondary-border);
	border-radius: var(--radius-md);
	font-size: var(--font-base);
	font-weight: 600;
	font-family: var(--font-body);
	cursor: pointer;
	transition: background 0.15s, box-shadow 0.15s;
}
.btn-secondary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-danger {
	padding: var(--space-2) var(--space-3);
	background: var(--color-danger);
	color: var(--color-danger-text);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-sm);
	font-family: var(--font-body);
	cursor: pointer;
	transition: background 0.15s, box-shadow 0.15s;
}
.btn-danger:focus-visible { outline: 2px solid var(--color-danger); outline-offset: 2px; }
.to-par-under { color: var(--color-danger); font-weight: 600; }
.to-par-over { font-weight: 500; }
.to-par-even { color: var(--color-text-muted); }
.error-page { text-align: center; padding: var(--space-12) var(--space-4); }
.error-page h1 { font-size: var(--font-2xl); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.error-page p { color: var(--color-text-subtle); }
/* Drilldown scorecard */
.entry-row { cursor: pointer; }
.drilldown { display: none; }
.drilldown > td { padding: 0; border-bottom: 1px solid var(--color-border); }
.drilldown.open { display: table-row; }
.drilldown:hover td { background: transparent; }
.drilldown-scorecard {
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface-alt);
}
.drilldown-scorecard table {
	width: auto;
	margin: 0 auto var(--space-1);
	font-size: var(--font-sm);
	border-collapse: collapse;
}
.drilldown-scorecard th,
.drilldown-scorecard td {
	padding: 0.35rem var(--space-2);
	text-align: center;
	min-width: 2rem;
	border-bottom: 1px solid var(--color-border);
	background: transparent;
}
.drilldown-scorecard th {
	font-size: var(--font-xs);
	text-transform: none;
	border-bottom: 2px solid var(--color-th-border);
	letter-spacing: normal;
}
.drilldown-label {
	text-align: right !important;
	font-weight: 600;
	color: var(--color-text-muted);
	font-size: var(--font-xs);
}
.drilldown-total {
	font-weight: 700;
	border-left: 2px solid var(--color-border);
}
.drilldown-nine-sep th {
	border-top: var(--space-1) solid var(--color-surface-alt);
}
.drilldown-totals-row td {
	font-weight: 700;
	border-bottom: none;
	border-top: 2px solid var(--color-border);
}

/* Traditional golf scorecard shapes: circle for under par, square for over par. */
/* Shape lives on the inner .score-indicator so the same notation works in both
   the leaderboard drill-down (td parent) and the scorecard stepper (span parent). */
.drilldown-scorecard td.score-birdie,
.drilldown-scorecard td.score-eagle,
.drilldown-scorecard td.score-albatross,
.drilldown-scorecard td.score-par,
.drilldown-scorecard td.score-bogey,
.drilldown-scorecard td.score-double-bogey {
	background: transparent;
}
.drilldown-scorecard td.score-albatross { color: #ffffff; }

.score-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
}
/* Birdie: single circle */
.score-birdie > .score-indicator {
	border-radius: 50%;
	border: 2px solid #ef4444;
}
/* Eagle: two concentric circles with a visible gap between them */
.score-eagle > .score-indicator {
	border-radius: 50%;
	border: 2px solid #ef4444;
}
.score-eagle > .score-indicator::after {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 2px solid #ef4444;
	pointer-events: none;
}
/* Albatross: filled inner circle with a separate outer ring */
.score-albatross > .score-indicator {
	border-radius: 50%;
	border: 2px solid #d97706;
	background: #f59e0b;
	color: #ffffff;
}
.score-albatross > .score-indicator::after {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 2px solid #d97706;
	pointer-events: none;
}
/* Par: no decoration */
/* Bogey: single square */
.score-bogey > .score-indicator {
	border-radius: 2px;
	border: 2px solid #3b82f6;
}
/* Double bogey+: two concentric squares with a visible gap between them */
.score-double-bogey > .score-indicator {
	border-radius: 2px;
	border: 2px solid #3b82f6;
}
.score-double-bogey > .score-indicator::after {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 2px;
	border: 2px solid #3b82f6;
	pointer-events: none;
}

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.spinner {
	display: inline-block;
	width: var(--space-4);
	height: var(--space-4);
	border: 2px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* To-par column formatting */
td.topar-under { background: #dc2626; color: #ffffff !important; font-weight: 700; }
td.topar-even  { background: #6b7280; color: #ffffff !important; font-weight: 700; }
td.topar-over  { background: #3b82f6; color: #ffffff !important; font-weight: 700; }
td.topar-none  { color: var(--color-text-subtle) !important; }

/* Save toast */
@keyframes toast-show {
	0%   { opacity: 0; transform: translateX(-50%) translateY(0.4rem); }
	12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
	75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
	100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}
.save-toast {
	position: fixed;
	bottom: 1.75rem;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	background: rgba(22, 101, 52, 0.92);
	color: #fff;
	padding: 0.5rem 1.35rem;
	border-radius: 2rem;
	font-size: 0.875rem;
	font-weight: 500;
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	z-index: 200;
}
.save-toast.is-showing {
	animation: toast-show 2s ease-out forwards;
}

/* Per-hole save indicator — row background */
@keyframes row-pending-pulse {
	0%, 100% { background-color: rgba(251, 191, 36, 0.28); }
	50%       { background-color: rgba(251, 191, 36, 0.07); }
}
#scorecard-form tbody tr.score-pending td {
	animation: row-pending-pulse 0.9s ease-in-out infinite;
}
#scorecard-form tbody tr.score-saving td {
	background-color: rgba(251, 191, 36, 0.18);
}
@keyframes row-saved-fadeout {
	0%   { background-color: rgba(34, 197, 94, 0.35); }
	55%  { background-color: rgba(34, 197, 94, 0.22); }
	100% { background-color: transparent; }
}
#scorecard-form tbody tr.score-saved td {
	animation: row-saved-fadeout 1.6s ease-out forwards;
}
@media (max-width: 640px) {
	.container { padding: var(--space-2); }
	th, td { padding: 0.6rem var(--space-2); }
	.header h1 { font-size: var(--font-lg); }
	table { font-size: var(--font-base); }
	.round-col { min-width: 2rem; font-size: var(--font-xs); }
	.drilldown-scorecard { padding: var(--space-1) var(--space-1); overflow-x: auto; }
	.drilldown-scorecard th,
	.drilldown-scorecard td { padding: 0.25rem 0.25rem; min-width: 1.6rem; font-size: var(--font-xs); }
	.match-card { padding: var(--space-1); }
	.match-side { padding: 0.25rem 0.5rem; font-size: var(--font-sm); }
	.match-name { font-size: var(--font-sm); }
	.match-result { font-size: var(--font-xs); }
	.match-drilldown table th,
	.match-drilldown table td { padding: 0.25rem 0.25rem; min-width: 1.6rem; font-size: var(--font-xs); }
}

/* Matchplay team score */
.team-score {
	text-align: center;
	margin-top: var(--space-4);
	margin-bottom: var(--space-4);
}
.team-score-names {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin-bottom: var(--space-1);
}
.team-score-name {
	font-size: var(--font-base);
	font-weight: 700;
	padding: var(--space-1) var(--space-6);
	min-width: 5rem;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.team-score-name.team-score-a {
	background: #1e3a6e;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.team-score-name.team-score-b {
	background: #c41e3a;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.team-score-name-spacer {
	width: 2.5rem;
	padding: var(--space-1) var(--space-2);
	background: var(--color-th-bg);
}
.team-score-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
}
.team-score-side {
	font-size: 2.5rem;
	font-weight: 800;
	padding: var(--space-3) var(--space-6);
	min-width: 5rem;
	text-align: center;
	color: #fff;
}
.team-score-a {
	background: #1e3a6e;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.team-score-b {
	background: #c41e3a;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.team-score-divider {
	font-size: 2rem;
	font-weight: 700;
	padding: var(--space-3) var(--space-2);
	background: var(--color-th-bg);
	color: var(--color-text-muted);
}
.team-score-undecided {
	margin-top: var(--space-2);
	font-size: var(--font-sm);
	color: var(--color-text-muted);
}

/* Matchplay styles */
.matchplay-matches { display: flex; flex-direction: column; gap: var(--space-3); }

.match-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}
.match-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.match-row {
	display: flex;
	align-items: stretch;
	min-height: 2.5rem;
}
.match-side {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: var(--font-base);
	font-weight: 500;
	gap: 0.5rem;
	background: var(--color-bg);
	transition: background 0.15s;
}
.match-side-a {
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.match-side-b {
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	justify-content: flex-end;
	text-align: right;
}
.match-name { font-weight: 600; }
.match-result {
	font-weight: 700;
	font-size: var(--font-sm);
	white-space: nowrap;
}
.match-side-a.match-winner {
	background: #1e3a6e;
	color: #fff;
}
.match-side-b.match-winner {
	background: #c41e3a;
	color: #fff;
}
.match-loser {
	background: var(--color-surface, #f5f5f5);
	color: var(--color-text-muted);
}
.match-indicator {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	font-size: var(--font-xs);
	font-weight: 700;
	background: #f0c040;
	color: #1a1a1a;
}

.match-drilldown {
	margin-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-2);
	overflow-x: auto;
}
.match-drilldown table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.match-drilldown th,
.match-drilldown td {
	text-align: center;
	padding: 0.25rem 0.375rem;
	min-width: 1.6rem;
}
.match-drilldown th { font-weight: 600; color: var(--color-text-muted); }
.match-drilldown .drilldown-label { text-align: left; font-weight: 500; white-space: nowrap; max-width: 6rem; overflow: hidden; text-overflow: ellipsis; }

.match-won-a { background: rgba(30, 58, 110, 0.12); }
.match-won-b { background: rgba(196, 30, 58, 0.12); }
.match-halved { background: rgba(0, 0, 0, 0.03); }

.match-hole-won-a { background: #1e3a6e; }
.match-hole-won-b { background: #c41e3a; }
.match-hole-halved { background: #f0b429; }
.match-hole-none { background: transparent; }

/* Matchplay drilldown: per-party progression cells (leaderboard match drilldown) */
.match-sc-cell { height: 1.6rem; }
.match-sc-cell.match-hole-won-a,
.match-sc-cell.match-hole-won-b { color: #fff; font-size: 0.6rem; font-weight: 700; }
.drilldown-scorecard td.match-hole-won-a { background: #1e3a6e; }
.drilldown-scorecard td.match-hole-won-b { background: #c41e3a; }
.drilldown-scorecard td.match-hole-won-a,
.drilldown-scorecard td.match-hole-won-b { color: #fff; font-weight: 700; }

/* Championship (bracket) mode has no team concept — blue marks the winner
   regardless of which side (A/B) they're drawn on, never red. */
.matchplay-matches.is-championship .match-side-b.match-winner { background: #1e3a6e; }
.matchplay-matches.is-championship .match-won-b { background: rgba(30, 58, 110, 0.12); }
.matchplay-matches.is-championship .match-hole-won-b,
.matchplay-matches.is-championship .drilldown-scorecard td.match-hole-won-b { background: #1e3a6e; }

.standings-section { margin-top: var(--space-4); }
.standings-title {
	font-size: var(--font-base);
	font-weight: 600;
	margin-bottom: var(--space-2);
	color: var(--color-text);
}
.standings-table { width: 100%; }

/* "Show my score" toggle switch */
.card-header:has(.score-toggle) {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.score-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin: 0;
}
.toggle-label {
	font-size: var(--font-sm);
	font-weight: 500;
	color: var(--color-card-header-text);
	user-select: none;
	opacity: 0.8;
}
.toggle-switch {
	position: relative;
	width: 36px;
	height: 20px;
	flex-shrink: 0;
}
.toggle-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.toggle-slider {
	position: absolute;
	top: 0; left: 0;
	width: 36px;
	height: 20px;
	background: var(--color-secondary-border);
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.2s;
}
.toggle-slider::before {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	top: 3px;
	left: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
	background: var(--color-primary);
}
.toggle-switch input:checked + .toggle-slider::before {
	transform: translateX(16px);
}

/* Hide points column/row when toggle is off */
.hide-points .pts-col { display: none; }

/* Powered by footer */
.powered-by {
	text-align: center;
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-sm);
	color: var(--color-text-subtle);
}
.powered-by a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 600;
}
.powered-by a:hover {
	text-decoration: underline;
}

/* Result mode buttons (Won / Halved / Lost) */
.result-buttons {
	display: flex;
	gap: 4px;
	justify-content: center;
}
.result-btn {
	padding: 6px 12px;
	border: 1px solid var(--color-border, #ccc);
	border-radius: 4px;
	background: var(--color-bg, #fff);
	cursor: pointer;
	font-size: var(--font-sm, 0.8rem);
	font-weight: 600;
	transition: background 0.15s, color 0.15s;
	min-width: 36px;
	text-align: center;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.result-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.result-btn.result-won.active {
	background: #1e3a6e;
	color: #fff;
	border-color: #162d56;
}
.result-btn.result-lost.active {
	background: #c41e3a;
	color: #fff;
	border-color: #a01830;
}
.result-btn.result-halved.active {
	background: #6b7280;
	color: #fff;
	border-color: #4b5563;
}

/* ── Marshal multi-scorecard view ───────────────────────────────────────── */
.marshal-view {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 10rem);
}

/* Party tab bar — horizontally scrollable row of tabs at the top */
.marshal-tab-bar {
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 0;
	background: var(--color-surface);
	border-bottom: 2px solid var(--color-border);
	scrollbar-width: none;
	position: sticky;
	top: 0;
	z-index: 10;
}
.marshal-tab-bar::-webkit-scrollbar { display: none; }

.marshal-tab {
	flex: 0 0 auto;
	padding: var(--space-3) var(--space-4);
	border: none;
	border-bottom: 3px solid transparent;
	background: transparent;
	font-size: var(--font-sm);
	font-weight: 600;
	font-family: var(--font-body);
	color: var(--color-text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	margin-bottom: -2px;
}
.marshal-tab.active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* Panels */
.marshal-panels {
	flex: 1;
	padding-bottom: 4rem; /* room for chip bar */
}

.marshal-panel {
	padding: var(--space-2);
}

.marshal-panel-header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-2) var(--space-1);
}
.marshal-panel-name {
	font-weight: 700;
	font-size: var(--font-md);
	flex: 1;
}
.marshal-panel-hcp {
	font-size: var(--font-sm);
	color: var(--color-text-muted);
}

/* Floating chip bar at the bottom */
.marshal-chip-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	padding: var(--space-2) var(--space-4);
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	z-index: 20;
}
.marshal-overview-btn {
	padding: var(--space-2) var(--space-6);
	background: var(--color-header-bg);
	color: var(--color-header-text);
	border: none;
	border-radius: 9999px;
	font-size: var(--font-sm);
	font-weight: 700;
	font-family: var(--font-body);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Slide-up drawer */
.marshal-drawer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--color-surface);
	border-top: 2px solid var(--color-border);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
	z-index: 30;
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	max-height: 60vh;
	display: flex;
	flex-direction: column;
}
.marshal-drawer.open {
	transform: translateY(0);
}
.marshal-drawer-handle {
	flex-shrink: 0;
	width: 3rem;
	height: 4px;
	background: var(--color-border);
	border-radius: 2px;
	margin: var(--space-2) auto var(--space-1);
	cursor: pointer;
}
.marshal-drawer-content {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 var(--space-2) var(--space-4);
}
.marshal-drawer-table {
	width: 100%;
}
.marshal-drawer-table td,
.marshal-drawer-table th {
	padding: var(--space-3) var(--space-2);
}
.marshal-drawer-table tbody tr:hover td {
	background: var(--color-surface-alt);
}