/**
 * 3 Putt Poker - standalone app styles.
 *
 * Mobile first. One dark "clubhouse scoreboard" theme with high-contrast
 * cream text, gold accents and large touch targets. Nothing here depends on the
 * active WordPress theme.
 */

:root {
	--tpp-bg: #081611;
	--tpp-surface: #11261d;
	--tpp-surface-2: #163024;
	--tpp-surface-3: #1c3b2c;
	--tpp-line: #2c4d3c;
	--tpp-line-soft: rgba(245, 242, 231, 0.1);
	--tpp-text: #f5f2e7;
	--tpp-muted: #b9cbc0;
	--tpp-faint: #93aa9d;
	--tpp-gold: #f2c96b;
	--tpp-gold-bright: #ffd97d;
	--tpp-gold-ink: #241a02;
	--tpp-green: #8ee0b0;
	/* Every other hole is washed blue, which is what makes it obvious at a
	 * glance that the game has moved on to the next one. */
	--tpp-blue-bright: #a6d2ff;
	--tpp-blue-wash: rgba(93, 157, 255, 0.14);
	--tpp-blue-line: rgba(93, 157, 255, 0.45);
	--tpp-red: #ffb3a4;
	--tpp-red-ink: #3a0d05;
	--tpp-radius: 18px;
	--tpp-radius-sm: 12px;
	--tpp-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
	--tpp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body.tpp-body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--tpp-bg);
	background-image:
		radial-gradient(1100px 600px at 85% -10%, rgba(46, 107, 78, 0.55) 0%, transparent 60%),
		radial-gradient(900px 520px at -15% 110%, rgba(33, 82, 60, 0.5) 0%, transparent 55%);
	background-attachment: fixed;
	color: var(--tpp-text);
	font-family: var(--tpp-font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.tpp-body--error {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
}

img,
svg {
	max-width: 100%;
}

a {
	color: var(--tpp-gold);
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--tpp-gold-bright);
}

a.tpp-brand__link {
    color: initial;
    text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 3px solid var(--tpp-gold-bright);
	outline-offset: 3px;
	border-radius: 6px;
}

.tpp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tpp-skip {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--tpp-gold);
	color: var(--tpp-gold-ink);
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform 0.15s ease;
}

.tpp-skip:focus-visible {
	transform: translateY(0);
}

/* Layout ------------------------------------------------------------------ */

.tpp-app {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 16px 56px;
}

.tpp-main {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.tpp-main--public {
	gap: 20px;
}

.tpp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.tpp-topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin: 0 -4px 20px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: 999px;
	background: rgba(10, 25, 19, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.tpp-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: 0.95rem;
}

/* The wordmark is the link home; the chips and status beside it are not. */
.tpp-brand__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	border-radius: 999px;
}

.tpp-brand__link:hover .tpp-brand__text {
	color: var(--tpp-gold-bright);
}

.tpp-brand__mark {
	font-size: 1.1rem;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.tpp-brand__text {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
}

.tpp-hero {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 4px 2px 0;
}

/* Game screens put the home icon in a narrow right-hand column, level with the
 * game name, and keep the heading and figures in the wide left column. */
.tpp-hero--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: 12px;
}

.tpp-hero--split > [data-3pp-region="game-title"] {
	grid-column: 1;
	grid-row: 1;
}

.tpp-hero--split > [data-3pp-region="stats"] {
	grid-column: 1;
	grid-row: 2;
}

.tpp-eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tpp-gold);
}

.tpp-title {
	margin-top: 6px;
	font-size: clamp(1.9rem, 5vw, 2.7rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* Home icon: the top-right cell of the hero grid. */
.tpp-homebtn {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--tpp-line);
	border-radius: 11px;
	background: var(--tpp-surface-2);
	color: var(--tpp-muted);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tpp-homebtn:hover {
	border-color: var(--tpp-gold);
	background: var(--tpp-surface-3);
	color: var(--tpp-gold-bright);
}

.tpp-subtitle {
	margin-top: 8px;
	color: var(--tpp-muted);
	font-size: 0.95rem;
}

/* Cards ------------------------------------------------------------------- */

.tpp-card {
	/* Published as variables so whole-width children, such as the sticky
	 * scoring header, can bleed to the card's edges. */
	--tpp-card-pad-y: 20px;
	--tpp-card-pad-x: 18px;
	position: relative;
	padding: var(--tpp-card-pad-y) var(--tpp-card-pad-x);
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),
		var(--tpp-surface);
	box-shadow: var(--tpp-shadow);
}

.tpp-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 14px;
	margin-bottom: 14px;
}

.tpp-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tpp-card__hint {
	color: var(--tpp-muted);
	font-size: 0.82rem;
}

/* Stats ------------------------------------------------------------------- */

.tpp-stats {
	display: grid;
	/* Three even columns so the pot, hole and card totals always sit on one
	   line, including on the narrowest phones. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

/* The hero's home-icon column takes about 50px off the figures, so on a phone
 * the tiles give some padding back to keep "7 of 18" on one line. */
@media (max-width: 520px) {
	.tpp-hero--split .tpp-stats {
		gap: 8px;
	}

	.tpp-hero--split .tpp-stat {
		padding: 14px 9px;
	}
}

.tpp-stat {
	padding: 16px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
	text-align: center;
}

.tpp-stat--pot {
	border-color: rgba(242, 201, 107, 0.45);
	background:
		linear-gradient(180deg, rgba(242, 201, 107, 0.12), rgba(242, 201, 107, 0.02)),
		var(--tpp-surface-2);
}

.tpp-stat__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-stat__value {
	margin-top: 6px;
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.tpp-stat--pot .tpp-stat__value {
	color: var(--tpp-gold-bright);
}

/* Sits on the same line as the number, so each tile reads as one figure. */
.tpp-stat__of {
	display: inline;
	margin-left: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tpp-muted);
	text-transform: uppercase;
}

/* Chips ------------------------------------------------------------------- */

.tpp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border: 1px solid var(--tpp-line);
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tpp-chip--player,
.tpp-chip--admin {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.76rem;
	color: var(--tpp-text);
	background: var(--tpp-surface-3);
}

/* Connection state, as a word: live, static or reconnecting. */
.tpp-live {
	display: inline-flex;
	align-items: center;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-live[data-state="live"] {
	color: var(--tpp-green);
}

.tpp-live[data-state="error"] {
	color: var(--tpp-red);
}

/* Tables ------------------------------------------------------------------ */

/*
 * `position: relative` keeps absolutely positioned children (the
 * visually-hidden labels inside the tables) inside the scroll area. Without it
 * they escape the clip and push the whole page sideways on narrow screens.
 */
.tpp-tablewrap,
.tpp-scroll {
	position: relative;
	overflow-x: auto;
	border-radius: var(--tpp-radius-sm);
	-webkit-overflow-scrolling: touch;
}

.tpp-tablewrap:focus-visible,
.tpp-scroll:focus-visible {
	outline-offset: -3px;
}

.tpp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.tpp-table th,
.tpp-table td {
	padding: 11px 10px;
	text-align: left;
	border-bottom: 1px solid var(--tpp-line-soft);
	vertical-align: middle;
}

.tpp-table thead th {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tpp-muted);
	border-bottom-color: var(--tpp-line);
	white-space: nowrap;
}

.tpp-table tbody tr:last-child th,
.tpp-table tbody tr:last-child td {
	border-bottom: 0;
}

.tpp-table .tpp-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.tpp-table--scorecard {
	width: max-content;
	min-width: 100%;
}

.tpp-table--scorecard th,
.tpp-table--scorecard td {
	padding: 8px;
	text-align: center;
}

/* Hole numbers, putts and the total are centred. Only the player name column,
 * which is the row header, stays left aligned. */
.tpp-table--scorecard .tpp-num {
	text-align: center;
}

.tpp-table--scorecard thead th:first-child,
.tpp-table--scorecard tbody th {
	position: sticky;
	left: 0;
	z-index: 2;
	min-width: 130px;
	text-align: left;
	background: var(--tpp-surface);
}

.tpp-table--scorecard thead th:first-child {
	background: var(--tpp-surface-2);
}

/* Every other hole column is washed blue, matching the scoring panel, so
 * following a game across the card is easier than reading the number above
 * each column — and an unplayed gap stands out. */
.tpp-table--scorecard .tpp-hole--even {
	background: var(--tpp-blue-wash);
}

.tpp-table--scorecard th.is-current {
	color: var(--tpp-gold-bright);
	background: rgba(242, 201, 107, 0.1);
}

.tpp-table--scorecard tr.is-own th,
.tpp-table--scorecard tr.is-own td {
	background: rgba(242, 201, 107, 0.06);
}

.tpp-table--scorecard tr.is-own th {
	background: var(--tpp-surface-3);
}

.tpp-cell__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 44px;
	min-height: 44px;
	padding: 4px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.tpp-cell__button:hover {
	border-color: var(--tpp-gold);
	background: rgba(242, 201, 107, 0.1);
}

.tpp-cell--card .tpp-cell__button {
	color: var(--tpp-green);
}

.tpp-cell--penalty .tpp-cell__button {
	color: var(--tpp-gold-bright);
}

.tpp-scorecard__player {
	min-width: 130px;
	font-weight: 600;
}

.tpp-scorecard__total {
	font-weight: 700;
}

.tpp-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--tpp-gold);
	color: var(--tpp-gold-ink);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Leaderboard ------------------------------------------------------------- */

.tpp-leaderboard {
	table-layout: auto;
}

.tpp-lb__rank {
	width: 54px;
}

.tpp-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tpp-surface-3);
	color: var(--tpp-muted);
	font-size: 0.85rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.tpp-lb__row--leader .tpp-rank {
	background: var(--tpp-gold);
	color: var(--tpp-gold-ink);
}

.tpp-lb__row--leader td,
.tpp-lb__row--leader th {
	background: rgba(242, 201, 107, 0.07);
}

.tpp-lb__row--leader th:first-child {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.tpp-lb__row--leader td:last-child {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.tpp-lb__name {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
}

.tpp-lb__meta {
	display: block;
	margin-top: 1px;
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--tpp-muted);
}

.tpp-lb__number {
	display: inline-block;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.tpp-lb__cards .tpp-lb__number {
	color: var(--tpp-green);
}

.tpp-lb__unit {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

/* Rules ------------------------------------------------------------------- */

.tpp-rules {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
}

.tpp-rule {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 13px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
}

.tpp-rule__putts {
	font-weight: 700;
}

.tpp-rule__awards {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tpp-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 700;
}

.tpp-pill--card {
	background: rgba(142, 224, 176, 0.14);
	color: var(--tpp-green);
}

.tpp-pill--pot {
	background: rgba(242, 201, 107, 0.14);
	color: var(--tpp-gold-bright);
}

.tpp-rule__nothing {
	font-size: 0.8rem;
	color: var(--tpp-muted);
}

.tpp-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 4px;
	margin-left: 10px;
	border-radius: 2px;
	vertical-align: middle;
}

.tpp-swatch:first-child {
	margin-left: 0;
}

.tpp-swatch--card {
	background: var(--tpp-green);
}

.tpp-swatch--penalty {
	background: var(--tpp-gold);
}

/* Notes and buttons ------------------------------------------------------- */

.tpp-note {
	color: var(--tpp-muted);
	font-size: 0.86rem;
}

.tpp-note--tight {
	margin-top: 10px;
}

.tpp-note--boxed {
	padding: 12px 14px;
	border: 1px solid var(--tpp-line);
	border-left: 3px solid var(--tpp-gold);
	border-radius: 10px;
	background: var(--tpp-surface-2);
	color: var(--tpp-text);
}

.tpp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--tpp-line);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
	color: var(--tpp-text);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.tpp-btn:hover {
	border-color: var(--tpp-gold);
	background: var(--tpp-surface-3);
	color: var(--tpp-text);
}

.tpp-btn:active {
	transform: translateY(1px);
}

.tpp-btn--primary {
	border-color: var(--tpp-gold);
	background: var(--tpp-gold);
	color: var(--tpp-gold-ink);
}

.tpp-btn--primary:hover {
	background: var(--tpp-gold-bright);
	border-color: var(--tpp-gold-bright);
	color: var(--tpp-gold-ink);
}

.tpp-btn--ghost {
	background: transparent;
}

.tpp-btn--danger {
	color: var(--tpp-red);
}

.tpp-btn--danger:hover {
	border-color: var(--tpp-red);
	color: var(--tpp-red);
}

.tpp-btn--small {
	min-height: 36px;
	padding: 6px 11px;
	font-size: 0.8rem;
}

.tpp-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--tpp-line);
	border-radius: 50%;
	background: var(--tpp-surface-3);
	color: var(--tpp-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.tpp-iconbtn:hover:not(:disabled) {
	border-color: var(--tpp-gold);
}

.tpp-iconbtn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Compact square variant used for row actions inside forms and tables. */
.tpp-iconbtn--square {
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0;
	border-radius: 11px;
	font-size: 1rem;
}

.tpp-iconbtn--danger {
	color: var(--tpp-red);
}

.tpp-iconbtn--danger:hover:not(:disabled) {
	border-color: var(--tpp-red);
	background: rgba(255, 179, 164, 0.12);
}

.tpp-icon {
	display: block;
}

.tpp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Hole navigation --------------------------------------------------------- */

.tpp-holenav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
	padding: 12px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
}

.tpp-holenav__controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tpp-select,
.tpp-input,
.tpp-field input,
.tpp-field select,
.tpp-inline-form input {
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid var(--tpp-line);
	border-radius: 10px;
	background: var(--tpp-bg);
	color: var(--tpp-text);
	/* Phones and tablets zoom the page in when a field smaller than this is
	 * focused, which throws the layout around mid-round. */
	font-size: 16px;
}

.tpp-select {
	flex: 1;
	min-width: 0;
	font-weight: 700;
}

.tpp-holenav__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tpp-holenav__meta .tpp-note {
	margin: 0;
}

/* Entry panel ------------------------------------------------------------- */

.tpp-entry__form {
	display: block;
}

/* The hole number rides along under the top bar, so a scorer scrolling a long
 * player list on a phone can always see which hole they are on. */
.tpp-scorehead {
	position: sticky;
	top: var(--tpp-score-top, 0px);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 0 calc(var(--tpp-card-pad-x) * -1) 14px;
	padding: 10px var(--tpp-card-pad-x);
	border-bottom: 1px solid var(--tpp-line-soft);
	background: rgba(10, 25, 19, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.tpp-scorehead__hole {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 800;
}

.tpp-scorehead__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-scorehead__number {
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.tpp-scorehead__of {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--tpp-muted);
}

/* Alternate holes carry their own accent, so a submitted hole visibly moves on.
 * The even holes are blue throughout: the pinned header, its rule and each
 * player's card, so the change is obvious on a phone without reading the
 * number. */
.tpp-entry--odd .tpp-scorehead__number {
	color: var(--tpp-green);
}

.tpp-entry--even .tpp-scorehead__number {
	color: var(--tpp-blue-bright);
}

.tpp-entry--even .tpp-scorehead {
	border-bottom-color: var(--tpp-blue-line);
	background:
		linear-gradient(180deg, rgba(93, 157, 255, 0.2), rgba(93, 157, 255, 0.07)),
		rgba(10, 25, 19, 0.95);
}

.tpp-entry-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tpp-entry-player {
	padding: 14px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
}

.tpp-entry--even .tpp-entry-player {
	border-color: var(--tpp-blue-line);
	background:
		linear-gradient(180deg, rgba(93, 157, 255, 0.16), rgba(93, 157, 255, 0.05)),
		var(--tpp-surface-2);
}

.tpp-entry-player__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.tpp-entry-player__name {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.tpp-entry-player__status {
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--tpp-muted);
}

.tpp-entry-player__status.is-pending {
	color: var(--tpp-gold-bright);
	font-weight: 700;
}

.tpp-putt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 8px;
}

.tpp-putt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 76px;
	padding: 9px 5px;
	border: 1px solid var(--tpp-line);
	border-radius: 14px;
	background: linear-gradient(180deg, #1a3528, #12291f);
	color: var(--tpp-text);
	cursor: pointer;
	transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tpp-putt:hover {
	border-color: var(--tpp-gold);
}

.tpp-putt:active {
	transform: scale(0.98);
}

/* The stored score keeps a quiet ring; the putt chosen for this submission is
 * filled in, so a change the scorer has staged is unmistakable. */
.tpp-putt.is-saved {
	border-color: rgba(242, 201, 107, 0.45);
}

.tpp-putt.is-selected {
	border-color: var(--tpp-gold);
	background: linear-gradient(180deg, #33452a, #26371f);
	box-shadow: 0 0 0 2px rgba(242, 201, 107, 0.35), inset 0 0 0 1px rgba(255, 217, 125, 0.6);
}

.tpp-putt__num {
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.tpp-putt.is-selected .tpp-putt__num {
	color: var(--tpp-gold-bright);
}

.tpp-putt__word {
	font-size: 0.67rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-putt__award {
	margin-top: 3px;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--tpp-gold);
}

.tpp-putt--xl {
	min-height: 96px;
	border-radius: 16px;
}

.tpp-putt--xl .tpp-putt__num {
	font-size: 2.2rem;
}

.tpp-putt--xl .tpp-putt__word {
	font-size: 0.72rem;
}

/* Commit bar -------------------------------------------------------------- */

.tpp-commit {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--tpp-line-soft);
}

.tpp-commit__status {
	font-size: 0.82rem;
	color: var(--tpp-muted);
}

.tpp-commit__button {
	width: 100%;
	min-height: 54px;
	font-size: 1rem;
}

.tpp-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.tpp-btn:disabled:hover {
	border-color: var(--tpp-line);
	background: var(--tpp-surface-2);
}

/* Player summary ---------------------------------------------------------- */

.tpp-summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tpp-summary__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}

.tpp-summary__stat {
	padding: 12px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
}

.tpp-summary__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-summary__value {
	display: block;
	margin-top: 4px;
	font-size: 1.5rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* Finished banner --------------------------------------------------------- */

.tpp-finished {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding: 22px;
	border: 1px solid rgba(242, 201, 107, 0.5);
	border-radius: var(--tpp-radius);
	background:
		linear-gradient(135deg, rgba(242, 201, 107, 0.16), rgba(242, 201, 107, 0.03) 60%),
		var(--tpp-surface);
}

.tpp-finished__title {
	margin-top: 4px;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.tpp-finished__pot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: 8px;
}

.tpp-finished__pot-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-finished__pot strong {
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	color: var(--tpp-gold-bright);
	font-variant-numeric: tabular-nums;
}

.tpp-finished__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid rgba(242, 201, 107, 0.25);
}

.tpp-finished__meta dt {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-finished__meta dd {
	margin: 2px 0 0;
	font-size: 0.9rem;
}

/* Links and QR codes ------------------------------------------------------ */

.tpp-links {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tpp-links__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.tpp-linkcard {
	padding: 14px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
}

.tpp-linkcard__title {
	font-size: 0.95rem;
	font-weight: 800;
}

.tpp-linkcard__description {
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--tpp-muted);
}

.tpp-linkrow {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.tpp-linkrow__input {
	flex: 1;
	min-width: 0;
	min-height: 42px;
	padding: 8px 10px;
	border: 1px solid var(--tpp-line);
	border-radius: 9px;
	background: var(--tpp-bg);
	color: var(--tpp-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	/* 16px keeps a phone from zooming the page when the field is tapped. */
	font-size: 16px;
}

/* The code fills whatever room its card has, so on a phone it is the full width
 * of the card, which is also the size that is easiest to scan. */
.tpp-qr {
	display: block;
	margin-top: 12px;
	padding: 10px;
	border-radius: 12px;
	background: #fff;
}

.tpp-qr__svg {
	display: block;
	width: 100%;
	height: auto;
}

.tpp-qr--small {
	padding: 8px;
}

.tpp-playerlinks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.tpp-details {
	margin-top: 4px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface);
}

.tpp-details > summary {
	padding: 12px 14px;
	font-weight: 700;
	cursor: pointer;
}

.tpp-details[open] > summary {
	border-bottom: 1px solid var(--tpp-line-soft);
}

.tpp-details > *:not(summary) {
	padding: 0 14px 14px;
}

.tpp-links__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Forms ------------------------------------------------------------------- */

.tpp-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/*
 * Game settings. Each field carries a modifier naming what it holds, and those
 * modifiers are also the layout: the long values and the live switch take the
 * full width on a phone, and the media queries below fold them into a single
 * row on a wide screen.
 */
.tpp-fieldgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.tpp-fieldgrid > .tpp-field--name,
.tpp-fieldgrid > .tpp-field--holes,
.tpp-fieldgrid > .tpp-field--scoring,
.tpp-fieldgrid > .tpp-field--live {
	grid-column: 1 / -1;
}

/* Two short fields that always share a line, even on a phone. */
.tpp-fieldpair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

/* A pair inside a wider grid takes a full row of its own. */
.tpp-fieldgrid > .tpp-fieldpair {
	grid-column: 1 / -1;
}

.tpp-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tpp-field label,
.tpp-inline-form > label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-field input[type="text"],
.tpp-field input[type="number"],
.tpp-field select {
	width: 100%;
	background: var(--tpp-bg);
	color: var(--tpp-text);
}

.tpp-field input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--tpp-gold);
}

.tpp-field__hint {
	font-size: 0.78rem;
	color: var(--tpp-muted);
}

/*
 * Live updates is a switch, not a checkbox. The input stays in the markup as
 * the real control, so keyboard and form behaviour are unchanged, while the
 * label draws the track and the knob.
 */
.tpp-switch {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

.tpp-switch input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.tpp-switch label {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-left: 66px;
	color: var(--tpp-text);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.tpp-switch label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 32px;
	border: 1px solid var(--tpp-line);
	border-radius: 999px;
	background: var(--tpp-surface-3);
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.tpp-switch label::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translate(0, -50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tpp-faint);
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.tpp-switch input:checked + label::before {
	border-color: rgba(142, 224, 176, 0.55);
	background: rgba(142, 224, 176, 0.2);
}

.tpp-switch input:checked + label::after {
	transform: translate(22px, -50%);
	background: var(--tpp-green);
}

.tpp-switch input:focus-visible + label::before {
	outline: 3px solid var(--tpp-gold);
	outline-offset: 2px;
}

.tpp-inline-form {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tpp-inline-form__row {
	display: flex;
	gap: 8px;
}

.tpp-inline-form__row input {
	flex: 1;
	min-width: 0;
}

.tpp-ruleset {
	margin: 0;
	padding: 14px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
}

.tpp-ruleset legend {
	padding: 0 6px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-ruletable {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
}

.tpp-rule-row {
	/* The action column is a fixed track so the header labels line up with the
	   inputs below them, even though the header cell itself is empty. */
	--tpp-rule-action: 40px;
	display: grid;
	grid-template-columns: 80px 90px minmax(0, 1fr) var(--tpp-rule-action);
	gap: 8px;
	align-items: center;
}

.tpp-rule-row .tpp-iconbtn--square {
	width: var(--tpp-rule-action);
	height: var(--tpp-rule-action);
	min-height: var(--tpp-rule-action);
}

.tpp-rule-row--head {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-rule-row input {
	width: 100%;
	min-height: 40px;
	padding: 6px 9px;
	border: 1px solid var(--tpp-line);
	border-radius: 9px;
	background: var(--tpp-bg);
	color: var(--tpp-text);
	font-variant-numeric: tabular-nums;
}

.tpp-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Meta, footer, misc ------------------------------------------------------ */

.tpp-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
}

.tpp-meta dt {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-meta dd {
	margin: 2px 0 0;
	font-size: 0.95rem;
	font-weight: 600;
}

.tpp-footer {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--tpp-line-soft);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.8rem;
	color: var(--tpp-muted);
}

.tpp-footer a {
	color: var(--tpp-muted);
}

.tpp-rowactions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

/* Player rows keep every value and action on a single line on a phone. */
.tpp-table--players .tpp-rowactions {
	flex-wrap: nowrap;
	gap: 4px;
}

.tpp-table--players thead th:last-child {
	text-align: right;
}

.tpp-table--players .tpp-iconbtn--square {
	width: 36px;
	height: 36px;
	min-height: 36px;
}

/* Dialog and toast -------------------------------------------------------- */

/* While a dialog is open the page behind it must not scroll, on any device. */
.tpp-modal-open,
.tpp-modal-open body {
	overflow: hidden;
}

.tpp-dialog {
	width: min(440px, calc(100vw - 32px));
	padding: 0;
	border: 1px solid var(--tpp-line);
	border-radius: var(--tpp-radius);
	background: var(--tpp-surface);
	color: var(--tpp-text);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.tpp-dialog::backdrop {
	background: rgba(3, 10, 7, 0.7);
	backdrop-filter: blur(3px);
}

/* A long explainer scrolls inside the sheet rather than spilling off screen.
 * The radius is inherited so the scroll box clips to the sheet's rounded
 * corners, which keeps the explainer's sticky bar from squaring them off. */
.tpp-dialog__form {
	padding: 22px;
	border-radius: inherit;
	max-height: calc(100vh - 34px);
	max-height: calc(100dvh - 34px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* The explainer needs more room to breathe than a one-line confirmation. */
.tpp-dialog--about {
	width: min(560px, calc(100vw - 24px));
}

.tpp-dialog__title {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.tpp-dialog__message {
	margin-top: 8px;
	color: var(--tpp-muted);
	font-size: 0.92rem;
}

/* The explainer is written as paragraphs; a confirmation stays one line. */
.tpp-dialog__message p + p {
	margin-top: 10px;
}

.tpp-dialog__heading {
	margin-top: 18px;
	color: var(--tpp-text);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.tpp-dialog__message .tpp-dialog__heading:first-child {
	margin-top: 0;
}

.tpp-dialog__field {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tpp-dialog__label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-dialog__input,
.tpp-dialog .tpp-input {
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid var(--tpp-line);
	border-radius: 10px;
	background: var(--tpp-bg);
	color: var(--tpp-text);
}

/* "What is 3 Putt Poker" on the home screen: a link that opens the explainer. */
.tpp-aboutlink {
	padding: 0;
	border: 0;
	background: none;
	color: var(--tpp-gold-bright);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.tpp-aboutlink:hover {
	color: var(--tpp-gold);
}

.tpp-aboutintro {
	margin-bottom: -6px;
}

.tpp-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

/* The explainer runs past a phone screen, so its close button stays in view.
 * The form's bottom padding moves onto the bar, which sticks to the sheet's
 * edge and clears the home indicator on a phone. */
.tpp-dialog--about .tpp-dialog__form {
	padding-bottom: 0;
}

.tpp-dialog--about .tpp-dialog__actions {
	position: sticky;
	bottom: 0;
	z-index: 1;
	margin: 18px -22px 0;
	padding: 14px 22px;
	padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
	background: var(--tpp-surface);
	border-top: 1px solid var(--tpp-line-soft);
}

.tpp-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 80;
	max-width: min(420px, calc(100vw - 32px));
	padding: 12px 18px;
	border: 1px solid var(--tpp-line);
	border-radius: 12px;
	background: var(--tpp-surface-3);
	color: var(--tpp-text);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.tpp-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.tpp-toast[data-type="error"] {
	border-color: var(--tpp-red);
	background: #3a1611;
	color: #ffd9d2;
}

/* Error page -------------------------------------------------------------- */

.tpp-main--error {
	min-height: calc(100vh - 48px);
	justify-content: center;
	align-items: center;
}

.tpp-error {
	width: min(520px, 100%);
	padding: 30px;
	border: 1px solid var(--tpp-line);
	border-radius: var(--tpp-radius);
	background: var(--tpp-surface);
	box-shadow: var(--tpp-shadow);
	text-align: center;
}

.tpp-brand--error {
	justify-content: center;
	margin-bottom: 18px;
}

.tpp-error__title {
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.tpp-error__message {
	margin-top: 10px;
	font-size: 1rem;
}

.tpp-error__help {
	margin-top: 8px;
	color: var(--tpp-muted);
	font-size: 0.88rem;
}

.tpp-error .tpp-btn {
	margin-top: 20px;
}

/* Responsive -------------------------------------------------------------- */

@media (min-width: 760px) {
	.tpp-app {
		padding: 20px 24px 64px;
	}

	.tpp-card {
		--tpp-card-pad-y: 24px;
		--tpp-card-pad-x: 24px;
	}

	.tpp-topbar {
		padding: 10px 18px;
	}

	.tpp-grid--halves {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tpp-links__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Game name, holes, currency and buy-in share the first row; the scoring
	 * permissions and the live switch share the second. */
	.tpp-fieldgrid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr) minmax(0, 0.65fr) minmax(0, 0.9fr);
	}

	.tpp-fieldgrid > .tpp-field--name,
	.tpp-fieldgrid > .tpp-field--holes,
	.tpp-fieldgrid > .tpp-field--currency,
	.tpp-fieldgrid > .tpp-field--buyin {
		grid-column: auto;
	}

	.tpp-fieldgrid > .tpp-field--scoring,
	.tpp-fieldgrid > .tpp-field--live {
		grid-column: span 2;
		align-self: center;
	}

	.tpp-finished {
		grid-template-columns: 1.4fr 1fr;
		align-items: center;
	}

	.tpp-finished__meta {
		border-top: 0;
		padding-top: 0;
		border-left: 1px solid rgba(242, 201, 107, 0.25);
		padding-left: 18px;
	}
}

@media (min-width: 1000px) {
	.tpp-grid--admin {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start;
	}

	/* The settings fields hold hands on one row here, each as wide as the value
	 * it holds needs: the name and the permissions are the long ones. */
	.tpp-fieldgrid {
		grid-template-columns:
			minmax(0, 1.7fr) minmax(0, 0.8fr) minmax(0, 0.6fr)
			minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.tpp-fieldgrid > .tpp-field--scoring,
	.tpp-fieldgrid > .tpp-field--live {
		grid-column: auto;
	}

	/* Three share cards across the desktop console. */
	.tpp-links__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tpp-grid--player {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: start;
	}

	.tpp-main--public .tpp-leaderboard .tpp-lb__number {
		font-size: 1.6rem;
	}
}

@media (min-width: 1500px) {
	.tpp-app {
		max-width: 1340px;
	}

	.tpp-title {
		font-size: 3rem;
	}

	.tpp-stat__value {
		font-size: 2.4rem;
	}

	.tpp-table {
		font-size: 1.02rem;
	}

	.tpp-lb__number {
		font-size: 1.7rem;
	}
}

@media (max-width: 520px) {
	.tpp-topbar {
		border-radius: 16px;
	}

	.tpp-stat {
		padding: 12px 10px;
	}

	.tpp-stat__value {
		font-size: clamp(1.15rem, 6vw, 1.6rem);
	}

	.tpp-lb__meta {
		font-size: 0.72rem;
	}

	.tpp-lb__unit {
		display: none;
	}

	.tpp-table th,
	.tpp-table td {
		padding: 10px 7px;
	}

	/* Three values plus the remove button still fit across a phone. */
	.tpp-rule-row {
		--tpp-rule-action: 38px;
		grid-template-columns: repeat(3, minmax(0, 1fr)) var(--tpp-rule-action);
		gap: 6px;
	}

	.tpp-rule-row--head {
		font-size: 0.62rem;
		letter-spacing: 0.06em;
	}

	.tpp-rule-row input {
		padding: 6px 7px;
	}

	.tpp-table--players th,
	.tpp-table--players td {
		padding: 8px 4px;
	}

	.tpp-table--players thead th {
		letter-spacing: 0.05em;
	}

	.tpp-table--players .tpp-rowactions {
		gap: 2px;
	}

	/* Full-width buttons, which are easier to hit on a phone than a wrap of
	 * half-width ones. */
	.tpp-actions,
	.tpp-links__actions {
		flex-direction: column;
	}

	.tpp-actions .tpp-btn,
	.tpp-links__actions .tpp-btn {
		width: 100%;
	}

	.tpp-players__name {
		display: block;
		max-width: 34vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print the QR sheet only ------------------------------------------------- */

@media print {
	body.tpp-body {
		background: #fff !important;
		color: #000;
	}

	.tpp-printing .tpp-topbar,
	.tpp-printing .tpp-footer,
	.tpp-printing .tpp-skip,
	.tpp-printing .tpp-hero,
	.tpp-printing .tpp-finished,
	.tpp-printing .tpp-toast,
	.tpp-printing .tpp-dialog,
	.tpp-printing .tpp-card:not(.tpp-card--links) {
		display: none !important;
	}

	.tpp-printing .tpp-app {
		max-width: none;
		padding: 0;
	}

	.tpp-printing .tpp-main {
		gap: 0;
	}

	.tpp-printing .tpp-card--links {
		display: block !important;
		border: 0;
		box-shadow: none;
		background: #fff;
		color: #000;
		padding: 0;
	}

	.tpp-printing .tpp-card--links .tpp-card__head {
		color: #000;
	}

	.tpp-printing .tpp-card--links .tpp-card__hint,
	.tpp-printing .tpp-card--links .tpp-note,
	.tpp-printing .tpp-card--links .tpp-linkcard__description {
		color: #333;
	}

	.tpp-printing .tpp-links__grid,
	.tpp-printing .tpp-playerlinks {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.tpp-printing .tpp-linkcard {
		border: 1px solid #999;
		background: #fff;
		color: #000;
		break-inside: avoid;
	}

	.tpp-printing .tpp-linkcard__title {
		color: #000;
	}

	.tpp-printing .tpp-linkrow {
		display: none;
	}

	.tpp-printing .tpp-qr {
		margin: 8px auto 0;
		background: #fff;
	}

	.tpp-printing .tpp-links__actions,
	.tpp-printing .tpp-note--boxed,
	.tpp-printing .tpp-details > summary {
		display: none !important;
	}

	.tpp-printing .tpp-details {
		border: 0;
	}

	.tpp-printing .tpp-details > *:not(summary) {
		padding: 0;
	}
}

/* Create-game screen (/3putt) --------------------------------------------- */

.tpp-main--new {
	gap: 20px;
}

.tpp-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpp-steps li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var(--tpp-line);
	border-radius: 999px;
	color: var(--tpp-faint);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tpp-steps li.is-current {
	border-color: var(--tpp-gold);
	color: var(--tpp-text);
}

.tpp-steps li.is-complete {
	color: var(--tpp-green);
}

.tpp-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tpp-surface-3);
	color: var(--tpp-text);
	font-size: 0.72rem;
}

.tpp-steps li.is-current .tpp-steps__num {
	background: var(--tpp-gold);
	color: var(--tpp-gold-ink);
}

.tpp-stepcount {
	color: var(--tpp-muted);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tpp-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 2px;
}

.tpp-step[hidden] {
	display: none;
}

.tpp-step__title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.tpp-step__title:focus-visible {
	outline: 3px solid var(--tpp-gold);
	outline-offset: 3px;
	border-radius: 6px;
}

.tpp-fieldset {
	margin: 0;
	padding: 14px;
	border: 1px solid var(--tpp-line-soft);
	border-radius: var(--tpp-radius-sm);
}

.tpp-fieldset__legend {
	padding: 0 6px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tpp-muted);
}

.tpp-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.tpp-choices--stack {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * 9, 18 and Custom stay on one line on a phone, with the custom hole count
 * field kept below them.
 *
 * The three of them only fit across a narrow phone as a segmented control, so
 * the radio circle is hidden and the chosen option is shown by its border and
 * fill instead. The input stays in the markup and the layout, so it is still
 * keyboard reachable and still announced by a screen reader, and the `:has()`
 * rule keeps the choice visible when JavaScript never runs.
 */
.tpp-choices--holes {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tpp-choices--holes .tpp-choice {
	position: relative;
	justify-content: center;
	gap: 0;
	padding: 10px 6px;
}

.tpp-choices--holes .tpp-choice input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.tpp-choices--holes .tpp-choice.is-checked,
.tpp-choices--holes .tpp-choice:has(input:checked) {
	border-color: var(--tpp-gold);
	background: var(--tpp-surface-3);
	box-shadow: inset 0 0 0 1px var(--tpp-gold);
}

.tpp-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--tpp-line);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
	cursor: pointer;
}

.tpp-choice input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	accent-color: var(--tpp-gold);
}

.tpp-choice > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tpp-choice small {
	color: var(--tpp-muted);
	font-size: 0.78rem;
}

.tpp-choice:hover {
	border-color: var(--tpp-gold);
}

.tpp-choice.is-checked {
	border-color: var(--tpp-gold);
	background: var(--tpp-surface-3);
}

.tpp-choice:focus-within {
	outline: 3px solid var(--tpp-gold);
	outline-offset: 2px;
}

/* The custom hole count only hides once the script can reveal it again. */
.tpp-wizard.is-enhanced [data-3pp-custom-holes] {
	display: none;
}

.tpp-wizard.is-enhanced [data-3pp-custom-holes].is-active {
	display: flex;
	margin-top: 12px;
}

.tpp-players {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-top: 10px;
}

.tpp-form-error {
	color: var(--tpp-red);
	font-size: 0.88rem;
	font-weight: 700;
}

.tpp-form-error:empty {
	display: none;
}

.tpp-form-error:focus-visible {
	outline: 3px solid var(--tpp-red);
	outline-offset: 3px;
	border-radius: 6px;
}

.tpp-wizard__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 6px;
}

.tpp-wizard__nav .tpp-btn {
	flex: 1 1 150px;
}

.tpp-note--error {
	border-left-color: var(--tpp-red);
	background: rgba(255, 179, 164, 0.09);
}

.tpp-recent {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.tpp-recent__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--tpp-line);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
	color: var(--tpp-text);
	text-decoration: none;
}

.tpp-recent__link:hover {
	border-color: var(--tpp-gold);
}

.tpp-recent__name {
	font-weight: 700;
}

.tpp-recent__meta {
	color: var(--tpp-muted);
	font-size: 0.8rem;
}

/* The wizard only hides a step's own button once the script is driving it. */
.tpp-wizard.is-enhanced:not(.is-last-step) [data-3pp-wizard-submit] {
	display: none;
}

.tpp-wizard.is-enhanced.is-last-step [data-3pp-wizard-next] {
	display: none;
}

@media (max-width: 380px) {
	.tpp-rule-row {
		--tpp-rule-action: 34px;
		gap: 4px;
	}

	.tpp-rule-row input {
		padding: 6px 4px;
	}
}