/* ============================================================
   Tournament Manager — public (shortcode) styles.
   Design language adopted from the NiCok platform mockup
   (mockups/index.html): indigo->magenta palette, Sora/Inter type,
   soft purple shadows, rounded cards and a gamified leaderboard.

   Sora/Inter are named first in the font stacks so the exact
   typography is used wherever the theme loads those families, and
   fall back gracefully to system fonts otherwise.
   ============================================================ */
:root {

	/* Ink & surfaces */
	--tm-ink: #1a1130;
	--tm-ink-soft: #4a4360;
	--tm-muted: #8a83a3;
	--tm-line: #ece8f5;
	--tm-border: #ece8f5;
	--tm-bg: #f6f3fc;
	--tm-card-bg: #fff;

	/* Brand */
	--tm-indigo: #6d28d9;
	--tm-violet: #8b5cf6;
	--tm-magenta: #ec4899;
	--tm-accent: #6d28d9;
	--tm-teal: #14b8a6;
	--tm-gold: #fbbf24;
	--tm-red: #ef4444;

	/* Gradients */
	--tm-grad: linear-gradient(120deg, #6d28d9 0%, #a21caf 55%, #ec4899 100%);
	--tm-grad-soft: linear-gradient(120deg, #f5f0ff 0%, #fdeef8 100%);
	--tm-grad-teal: linear-gradient(120deg, #0d9488 0%, #2dd4bf 100%);
	--tm-grad-gold: linear-gradient(120deg, #f59e0b 0%, #fbbf24 100%);

	/* Shape & depth */
	--tm-radius: 18px;
	--tm-radius-sm: 12px;
	--tm-shadow: 0 10px 30px -12px rgba(80, 30, 120, 0.28);
	--tm-shadow-lg: 0 24px 60px -20px rgba(80, 30, 120, 0.45);

	/* Type */
	--tm-display: "Sora", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--tm-body: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
}

.tm-public {
	margin: 1.5rem 0;
	max-width: 960px;
	font-family: var(--tm-body);
	color: var(--tm-ink);
	line-height: 1.5;
}

.tm-public__empty,
.tm-public--notice {
	color: var(--tm-muted);
	font-style: italic;
}

.tm-public--notice {
	padding: 0.85rem 1rem;
	background: var(--tm-grad-soft);
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius-sm);
}

/* Membership gate: shown in place of a private tournament's data, or of the
   registration form for a non-member. Unlike a plain notice this one is a
   call to action, so it drops the muted italic and offers a way forward. */
.tm-public--gate {
	color: var(--tm-ink);
	font-style: normal;
	text-align: center;
}

.tm-public__gate-msg {
	margin: 0 0 0.85rem;
	font-weight: 600;
}

.tm-public__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin: 0;
}

.tm-public__cta {
	display: inline-block;
	padding: 0.6rem 1.35rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--tm-grad);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.tm-public__cta:hover,
.tm-public__cta:focus {
	color: #fff;
	opacity: 0.9;
}

.tm-public__cta--ghost {
	background: #fff;
	border-color: var(--tm-line);
	color: var(--tm-accent);
}

.tm-public__cta--ghost:hover,
.tm-public__cta--ghost:focus {
	color: var(--tm-accent);
}

/* Pager (server-rendered lists: leaderboards, etc.) */
.tm-pager {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.tm-pager__link {
	padding: 0.4rem 0.85rem;
	border: 1.5px solid #e3d8fb;
	border-radius: var(--tm-radius-sm);
	color: var(--tm-indigo);
	font-weight: 600;
	text-decoration: none;
	transition: 0.18s;
}

.tm-pager__link:hover {
	background: var(--tm-grad-soft);
	transform: translateY(-1px);
}

.tm-pager__status {
	color: var(--tm-muted);
	font-size: 0.9em;
	font-weight: 600;
}

/* Admin-only diagnostic shown to editors when a shortcode has nothing to
   render (e.g. a missing tournament_id). Dashed to read as an editor hint. */
.tm-public--hint {
	padding: 0.85rem 1rem;
	color: #8a6d00;
	font-style: italic;
	background: #fffbeb;
	border: 1px dashed #f6d67a;
	border-radius: var(--tm-radius-sm);
}

.tm-public__title,
.tm-leaderboard__title,
.tm-standings__title {
	margin: 0 0 0.9rem;
	font-family: var(--tm-display);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--tm-ink);
}

/* Reusable card + badge */
.tm-card {
	background: var(--tm-card-bg);
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	padding: 1.1rem 1.25rem;
	box-shadow: var(--tm-shadow);
}

.tm-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: #ede9fe;
	color: #5b21b6;
}

.tm-badge--primary {
	background: #dcfce7;
	color: #15803d;
}

.tm-badge--secondary {
	background: #e0f2fe;
	color: #0369a1;
}

.tm-badge--tertiary {
	background: linear-gradient(120deg, #ede9fe, #fce7f3);
	color: #a21caf;
}

.tm-badge--easy {
	background: #dcfce7;
	color: #15803d;
}

.tm-badge--medium {
	background: #fef3c7;
	color: #b45309;
}

.tm-badge--hard {
	background: #fee2e2;
	color: #b91c1c;
}

.tm-badge--points {
	background: var(--tm-grad-gold);
	color: #7c2d12;
}

.tm-badge--engine {
	background: #e0f2fe;
	color: #0369a1;
}

/* Tournament view — one section per URL, nav across the rest */
.tm-tournament-view {
	max-width: 960px;
}

.tm-tv__title {
	margin: 0 0 0.9rem;
	font-family: var(--tm-display);
	font-weight: 800;
}

.tm-tv__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.25rem;
}

.tm-tv__nav-link {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border: 1.5px solid #e3d8fb;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--tm-indigo);
	transition: 0.18s;
}

.tm-tv__nav-link:hover {
	background: var(--tm-grad-soft);
	transform: translateY(-1px);
}

/* The tab you are on. Filled rather than merely outlined, because these are
   now real page links and "which page am I on" has to survive Divi's own
   global link colour. */
.tm-tv__nav-link.is-active {
	background: var(--tm-indigo);
	border-color: var(--tm-indigo);
	color: #fff;
}

.tm-tv__nav-link.is-active:hover {
	background: var(--tm-indigo);
	transform: none;
}

/* Sub-tabs under Games. Deliberately a different shape from the tab row above
   rather than a smaller copy of it: two rows of pills at the same weight read
   as one wrapped nav. Underline for the one you are on, and an explicit colour
   on every state — Divi styles all links globally at #2ea3f2, so a bare <a>
   here would come out blue whatever the ancestor says. */
.tm-tv__subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: -0.5rem 0 1.25rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--tm-line);
}

.tm-tv__subnav-link {
	display: inline-block;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--tm-ink-soft);
	transition: 0.18s;
}

.tm-tv__subnav-link:hover,
.tm-tv__subnav-link:focus {
	color: var(--tm-indigo);
	border-bottom-color: #e3d8fb;
}

.tm-tv__subnav-link.is-active {
	color: var(--tm-indigo);
	border-bottom-color: var(--tm-indigo);
}

/*
 * The bracket chooser. Deliberately NOT another row of tabs: it changes which
 * draw the tabs below are about, so it has to read as a different kind of
 * control than the two nav rows it sits between. Chips rather than underlines.
 *
 * Only rendered when a tournament runs more than one draw.
 */
.tm-tv__brackets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: -0.25rem 0 1rem;
}

.tm-tv__bracket-link {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--tm-line);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--tm-ink-soft);
	transition: 0.18s;
}

.tm-tv__bracket-link:hover,
.tm-tv__bracket-link:focus {
	border-color: var(--tm-indigo);
	color: var(--tm-indigo);
}

.tm-tv__bracket-link.is-active {
	background: var(--tm-indigo);
	border-color: var(--tm-indigo);
	color: #fff;
}

.tm-tv__section {
	padding-top: 1.25rem;
}

.tm-tv__section > .tm-public {
	margin-top: 0;
}

/* Registration action (auto-appended to the tournament page) */
.tm-registration-action {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--tm-grad-soft);
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	box-shadow: var(--tm-shadow);
}

.tm-registration-action__msg {
	margin: 0;
	font-family: var(--tm-display);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--tm-ink);
}

/* "You are registered" — teal is this stylesheet's positive idiom (completed
   tasks, points), so the acknowledgement reads as good news rather than as
   another neutral status line. */
.tm-registration-action__msg--registered {
	color: var(--tm-teal);
}

/* ── Registration form (inside a WPForms form) ───────────────────────────────
   Every selector below is scoped to `div.wpforms-container-full` on purpose.
   WPForms resets its own contents with `div.wpforms-container-full *`, which
   outweighs a bare class — measured: an unscoped `.tm-new-school` lost its
   background, border, padding and font sizes outright. Scoping is also honest,
   since none of this markup exists outside a WPForms form. Where a rule competes
   with WPForms' own field styling (which is `div.wpforms-container-full
   input[type="text"]`, i.e. the same weight), the selector carries one extra
   step so it wins on specificity rather than on stylesheet order. */

/* Fields filled from the member's account and locked (prefill_member_email /
   prefill_member_name). A readonly input still looks editable, so say so. */
.tm-prefilled,
div.wpforms-container-full input.tm-prefilled[readonly] {
	background-color: var(--tm-bg);
	color: var(--tm-ink-soft);
	cursor: default;
}

/* "My school isn't listed" panel, injected after the school dropdown. `hidden`
   is set server-side so it never flashes open before the script runs. */
div.wpforms-container-full .tm-new-school[hidden] {
	display: none;
}

div.wpforms-container-full .tm-new-school {
	margin: 0.75rem 0 0;
	padding: 1rem 1.15rem;
	background: var(--tm-card-bg);
	border: 1px dashed var(--tm-border);
	border-radius: var(--tm-radius-sm);
}

div.wpforms-container-full .tm-new-school__intro {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: var(--tm-ink-soft);
}

div.wpforms-container-full .tm-new-school__field {
	margin-bottom: 0.75rem;
}

div.wpforms-container-full .tm-new-school__field:last-child {
	margin-bottom: 0;
}

div.wpforms-container-full div.tm-new-school__field label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tm-ink);
}

/* Full width so these sit flush with the WPForms fields above, whose widths come
   from WPForms' own size classes. */
div.wpforms-container-full div.tm-new-school__field input,
div.wpforms-container-full div.tm-new-school__field select {
	width: 100%;
	max-width: 100%;
}

/* AdSense-ready slot: drop an ad unit inside <div class="tm-ad-slot"> */
.tm-ad-slot {
	margin: 1.25rem 0;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.tm-table th,
.tm-table td {
	padding: 0.7rem 0.85rem;
	text-align: left;
	border-bottom: 1px solid var(--tm-line);
}

.tm-table thead th {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tm-muted);
	border-bottom: 2px solid var(--tm-line);
}

.tm-table tbody tr {
	transition: background 0.15s ease;
}

.tm-table tbody tr:nth-child(odd) {
	background: #faf8ff;
}

.tm-table tbody tr:hover {
	background: var(--tm-grad-soft);
}

/* Standings: compact, centered numeric columns (name column stays left). */
.tm-standings__table th:not(:nth-child(2)),
.tm-standings__table td:not(:nth-child(2)) {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Gamified leaderboard emphasis: rank column and totals pop in brand ink. */
.tm-leaderboard .tm-table tbody td:first-child {
	font-family: var(--tm-display);
	font-weight: 800;
	color: var(--tm-indigo);
}

.tm-total {
	font-family: var(--tm-display);
	font-weight: 800;
	color: var(--tm-indigo);
}

.tm-row--eliminated {
	opacity: 0.5;
	text-decoration: line-through;
}

.tm-row {
	animation: tm-fade-in 0.4s ease both;
}

@keyframes tm-fade-in {

	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.tm-row {
		animation: none;
	}
}

/* Bracket */
.tm-bracket__heading {
	margin: 0 0 12px;
	font-family: var(--tm-display);
	font-weight: 800;
}

.tm-bracket__rounds {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 8px 0;
}

.tm-bracket__round {
	min-width: 200px;
	flex: 0 0 auto;
}

.tm-bracket__round-name {
	margin: 0 0 8px;
	font-family: var(--tm-display);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tm-muted);
}

.tm-bracket__match {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius-sm);
	padding: 8px 12px;
	margin-bottom: 8px;
	background: var(--tm-card-bg);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tm-bracket__match:hover {
	box-shadow: var(--tm-shadow);
}

.tm-bracket__match.is-done {
	border-color: #99e6d5;
}

.tm-bracket__team.is-winner {
	font-weight: 700;
	color: var(--tm-indigo);
}

.tm-bracket__score {
	color: var(--tm-muted);
	font-variant-numeric: tabular-nums;
}

.tm-bracket__standings {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.tm-bracket__standings caption {
	text-align: left;
	font-family: var(--tm-display);
	font-weight: 700;
	margin-bottom: 6px;
}

/* stylelint-disable no-descending-specificity */
.tm-bracket__standings th,
.tm-bracket__standings td {
	border-bottom: 1px solid var(--tm-line);
	padding: 6px 10px;
	text-align: left;
}
/* stylelint-enable no-descending-specificity */

/* ============================================================
   Visual bracket tree (assets/js/bracket-tree.js).
   Positioned cards + SVG connectors; used on public + admin.
   Layout constants are mirrored in the JS engine — keep in sync:
   card 200px, team row 34px, header 36px.
   ============================================================ */
.tm-bracket-tree {
	font-family: var(--tm-body);
	color: var(--tm-ink);
}

.tm-bt-toolbar {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 12px;
}

.tm-bt-btn {
	min-width: 34px;
	padding: 5px 12px;
	border: 1.5px solid #e3d8fb;
	border-radius: 10px;
	background: #fff;
	color: var(--tm-indigo);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	transition: 0.15s;
}

.tm-bt-btn:hover {
	background: var(--tm-grad-soft);
}

.tm-bt-scroll {
	overflow-x: auto;
	padding: 4px 4px 24px;
}

.tm-bt-strips {
	position: relative;
	transform-origin: top left;
}

.tm-bt-rounds {
	position: relative;
	margin-bottom: 32px;
}

.tm-bt-round-header {
	position: absolute;
	font-family: var(--tm-display);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tm-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tm-bt-date {
	position: absolute;
	box-sizing: border-box;
	font-size: 11px;
	color: var(--tm-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/*
 * Two-legged tie: one chip per leg, each its own scheduling target. The lane
 * takes pointer events back (the single-date variant above is inert).
 */
.tm-bt-date--legs {
	display: flex;
	gap: 6px;
	justify-content: center;
	pointer-events: auto;
	overflow: visible;
}

.tm-bt-leg {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 1px dotted transparent;
}

.tm-bt-leg.is-unscheduled {
	opacity: 0.6;
}

.tm-bt-leg.is-clickable {
	cursor: pointer;
	border-bottom-color: currentColor;
}

.tm-bt-leg.is-clickable:hover,
.tm-bt-leg.is-clickable:focus-visible {
	color: var(--tm-text, inherit);
	opacity: 1;
}

.tm-bt-card {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid var(--tm-line);
	border-radius: 10px;
	background: var(--tm-card-bg);
	box-shadow: var(--tm-shadow);
	overflow: hidden;
}

.tm-bt-card.is-pending {
	background: #faf8ff;
	box-shadow: none;
}

.tm-bt-card.is-clickable {
	cursor: pointer;
	transition: box-shadow 0.15s ease, outline-color 0.15s ease;
	outline: 2px solid transparent;
}

.tm-bt-card.is-clickable:hover,
.tm-bt-card.is-clickable:focus-visible {
	box-shadow: var(--tm-shadow-lg);
	outline-color: #e3d8fb;
}

.tm-bt-team {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 10px;
	font-size: 13px;
	border-bottom: 1px solid var(--tm-line);
}

.tm-bt-team:last-child {
	border-bottom: none;
}

.tm-bt-team.is-win {
	background: #f1ecfb;
	color: var(--tm-indigo);
	font-weight: 700;
}

.tm-bt-team.is-loss {
	color: var(--tm-muted);
}

.tm-bt-team.is-tbd {
	color: #b9b2cf;
	font-style: italic;
}

.tm-bt-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tm-bt-score {
	min-width: 18px;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * Two-legged tie: the leg scores are supporting detail and the aggregate is
 * what decided it, so the legs step back and the aggregate keeps the weight a
 * single-match score would have had.
 */
.tm-bt-score--leg {
	min-width: 14px;
	font-weight: 400;
	opacity: 0.7;
}

.tm-bt-score--agg {
	min-width: 18px;
	font-weight: 700;
	opacity: 1;
	padding-left: 4px;
	border-left: 1px solid rgba(0, 0, 0, 0.12);
}

/* Level on aggregate, settled in the last leg — marked so the score line
   does not read as though the winner outscored their opponent. */
.tm-bt-card.is-tiebreak .tm-bt-team.is-win .tm-bt-score--agg::after {
	content: '*';
	font-weight: 400;
	opacity: 0.7;
}

.tm-bt-medal {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 10px;
	background: var(--tm-grad-gold);
	color: #fff;
}

.tm-bt-lines path {
	stroke: #cfc7e8;
	stroke-width: 1.5;
}

/* Winners podium */
.tm-podium {
	position: relative;
	overflow: hidden;
	text-align: center;
}

/* Status pill */
.tm-podium__status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 8px;
	padding: 6px 14px;
	background: #dcfce7;
	color: #15803d;
	font-family: var(--tm-display);
	font-size: 0.82rem;
	font-weight: 700;
	border-radius: 999px;
}

.tm-podium__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #16a34a;
}

/* Podium stage: 2nd | 1st | 3rd, bottom-aligned */
.tm-podium__stage {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 10px;
	max-width: 620px;
	margin: 0 auto;
	padding-top: 30px;
}

.tm-podium__col {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	max-width: 200px;
	flex-direction: column;
	align-items: center;
	animation: tm-podium-rise 0.5s ease both;
}

.tm-podium__col--1 {
	order: 2;
}

.tm-podium__col--2 {
	order: 1;
	animation-delay: 0.1s;
}

.tm-podium__col--3 {
	order: 3;
	animation-delay: 0.2s;
}

.tm-podium__figure {
	position: relative;
	width: fit-content;
}

.tm-podium__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fceee6;
	color: #b1481f;
	font-family: var(--tm-display);
	font-weight: 800;
	font-size: 1rem;
}

.tm-podium__col--1 .tm-podium__avatar {
	width: 78px;
	height: 78px;
	font-size: 1.45rem;
}

.tm-podium__trophy {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.6rem;
}

.tm-podium__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 800;
}

.tm-podium__col--2 .tm-podium__badge {
	background: #e5e7eb;
	color: #4b5563;
}

.tm-podium__col--3 .tm-podium__badge {
	background: #fde2dc;
	color: #c2410c;
}

.tm-podium__name {
	max-width: 100%;
	margin-top: 10px;
	overflow: hidden;
	font-family: var(--tm-display);
	font-size: 1rem;
	font-weight: 800;
	color: #1a1130;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tm-podium__col--1 .tm-podium__name {
	font-size: 1.15rem;
}

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

.tm-podium__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 14px;
	color: #fff;
	font-family: var(--tm-display);
	font-weight: 800;
	border-radius: 10px 10px 0 0;
}

.tm-podium__rank {
	font-size: 1.05rem;
}

.tm-podium__col--1 .tm-podium__bar {
	height: 104px;
	background: #f0a021;
}

.tm-podium__col--2 .tm-podium__bar {
	height: 78px;
	background: #a3a3a3;
}

.tm-podium__col--3 .tm-podium__bar {
	height: 62px;
	background: #e88b7d;
}

@keyframes tm-podium-rise {

	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.tm-podium__place {
	font-family: var(--tm-display);
	font-size: 18px;
	font-weight: 700;
	margin: 6px 0;
	animation: tm-pop 0.5s ease both;
}

.tm-podium__place--1 {
	font-size: 26px;
	font-weight: 800;
	color: #b45309;
}

.tm-podium__place--2 {
	animation-delay: 0.12s;
}

.tm-podium__place--3 {
	animation-delay: 0.24s;
}

@keyframes tm-pop {

	from {
		opacity: 0;
		transform: scale(0.8);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Confetti (injected by public.js) */
.tm-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.tm-confetti__piece {
	position: absolute;
	top: -12px;
	width: 8px;
	height: 14px;
	opacity: 0.9;
	border-radius: 2px;
	animation-name: tm-confetti-fall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes tm-confetti-fall {

	to {
		transform: translateY(420px) rotate(540deg);
		opacity: 0;
	}
}

/* Schools directory */
.tm-schools__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.tm-schools__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.tm-schools__name {
	margin: 0;
	font-family: var(--tm-display);
	font-size: 1rem;
	font-weight: 700;
}

.tm-schools__desc {
	margin: 0;
	color: var(--tm-muted);
	font-size: 0.9rem;
}

/* Schedule / fixtures — date-grouped, no scores */
.tm-sched__list,
.tm-results__list,
.tm-tasks__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tm-sched__group {
	margin-bottom: 18px;
}

.tm-sched__day {
	font-family: var(--tm-display);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tm-indigo);
	margin: 0 0 8px;
}

/* Wraps rather than crushes: on a phone the fixture drops onto its own full
   width line under the time and round pill, instead of being squeezed into the
   ~150px left over there. See the `flex-basis` on __teams below. */
.tm-sched__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius-sm);
	margin-bottom: 6px;
	background: var(--tm-card-bg);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tm-sched__row:hover {
	box-shadow: var(--tm-shadow);
}

.tm-sched__time {
	flex: 0 0 auto;
	min-width: 62px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tm-sched__round {
	flex: 0 0 auto;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tm-indigo);
	background: #ede9fe;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.tm-sched__teams {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 190px;
	min-width: 0;
	flex-wrap: wrap;
}

/* A name can be an email address, which has no space to break at. Left as a
   default flex item it refuses to shrink below its own width and pushes
   straight out through the card; `anywhere` is what actually lets the row
   wrap it, since `break-word` would not reduce the min-content contribution. */
.tm-sched__team {
	min-width: 0;
	overflow-wrap: anywhere;
}

.tm-sched__vs {
	color: var(--tm-muted);
	font-size: 0.85rem;
}

.tm-sched__played {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tm-muted);
}

/* The way into a fixture played online. Sits where "Played" would, and takes
   the same `margin-left: auto` so a row with a button and a row without still
   line up down the list. */
.tm-sched__play {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0.32rem 0.8rem;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 120ms ease;
}

/* Divi colours every link on the page, so these state their own colour rather
   than inheriting one — the same trap the rest of this stylesheet works around. */
.tm-sched__play--primary,
.tm-sched__play--primary:visited {
	background: var(--tm-indigo);
	color: #fff;
}

/* A game in progress: warmer than the brand purple so "watch live" reads as
   something happening now rather than another button. */
.tm-sched__play--live,
.tm-sched__play--live:visited {
	background: #dc2626;
	color: #fff;
}

.tm-sched__play--ghost,
.tm-sched__play--ghost:visited {
	border: 1px solid var(--tm-line);
	color: var(--tm-ink);
}

.tm-sched__play:hover {
	filter: brightness(1.08);
}

/* Kick-off has not arrived. Still a link — the board itself says when it
   starts, and taking the anchor away would leave nothing to announce. */
.tm-sched__play.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* Results feed — grouped by round, scorecard rows */
.tm-results__group {
	margin-bottom: 18px;
}

.tm-results__round {
	font-family: var(--tm-display);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tm-indigo);
	margin: 0 0 8px;
}

.tm-result {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 0.55rem 0.2rem;
	border-bottom: 1px solid var(--tm-line);
}

.tm-result:last-child {
	border-bottom: none;
}

.tm-result__team.is-winner {
	font-weight: 700;
	color: var(--tm-indigo);
}

.tm-result__team.is-loss {
	color: var(--tm-muted);
}

.tm-result__score {
	flex: 0 0 auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--tm-indigo);
	background: #ede9fe;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.85rem;
}

.tm-result__when {
	color: var(--tm-muted);
	font-size: 0.82rem;
}

/* Tasks */
.tm-task {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius-sm);
	margin-bottom: 8px;
	background: var(--tm-card-bg);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.tm-task:hover {
	border-color: #e3d8fb;
	background: #faf8ff;
}

.tm-task.is-complete {
	border-color: #99e6d5;
	background: #f0fdfa;
}

.tm-task__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tm-task__status {
	color: var(--tm-indigo);
	font-weight: 800;
}

.tm-task.is-complete .tm-task__status {
	color: var(--tm-teal);
}

.tm-task__name {
	font-weight: 600;
}

.tm-task__points {
	margin-left: auto;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--tm-teal);
}

/* Informational only on this surface — submitting happens on the member's own
   tasks page, so this never gates anything here. */
.tm-task__deadline {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--tm-ink-soft);
	white-space: nowrap;
}

.tm-task__deadline.is-passed {
	color: #b45309;
}

.tm-task__desc {
	margin-top: 6px;
	color: var(--tm-ink-soft);
	font-size: 0.9rem;
}

/* Social stats */
.tm-social__stats {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.tm-stat {
	flex: 1 1 120px;
	text-align: center;
	padding: 1.1rem;
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	background: var(--tm-grad-soft);
	box-shadow: var(--tm-shadow);
}

.tm-stat--accent {
	color: #fff;
	border-color: transparent;
	background: var(--tm-grad);
}

.tm-stat__value {
	display: block;
	font-family: var(--tm-display);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	color: var(--tm-indigo);
}

.tm-stat--accent .tm-stat__value {
	color: #fff;
}

.tm-stat__label {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tm-muted);
}

.tm-stat--accent .tm-stat__label {
	color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {

	.tm-podium__place,
	.tm-podium__col,
	.tm-confetti {
		animation: none;
	}

	.tm-confetti {
		display: none;
	}
}

/* Tournament puzzles — grouped by type, and one puzzle's roster */
.tm-puzzles__group {
	margin: 0 0 1.75rem;
}

.tm-puzzles__group-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
	font-family: var(--tm-display);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--tm-ink);
}

.tm-puzzles__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: #ede9fe;
	color: #5b21b6;
	font-family: var(--tm-body);
	font-size: 0.75rem;
	font-weight: 700;
}

.tm-puzzles__group-blurb {
	margin: 0 0 0.85rem;
	color: var(--tm-muted);
	font-size: 0.88rem;
}

/* auto-fit rather than a media query, matching the rest of this stylesheet:
   the card has a floor and the row decides how many fit. */
.tm-puzzles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.tm-puzzles__card {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.tm-puzzle-detail__back {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.tm-puzzles__name {
	margin: 0;
	font-family: var(--tm-display);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.35;
}

/* Every link in this section together, resting states before hovered ones.
   Divi colours all links #2ea3f2, so each state has to be stated rather than
   inherited — and both selectors end in the same `a`, which is why they are
   ordered by specificity rather than by the block they belong to. */
.tm-puzzle-detail__back a {
	color: var(--tm-indigo);
	text-decoration: none;
}

.tm-puzzles__name a {
	color: var(--tm-ink);
	text-decoration: none;
}

.tm-puzzle-detail__back a:hover,
.tm-puzzle-detail__back a:focus,
.tm-puzzles__name a:hover,
.tm-puzzles__name a:focus {
	color: var(--tm-indigo);
	text-decoration: underline;
}

.tm-puzzles__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tm-puzzles__meta {
	margin: 0;
	color: var(--tm-muted);
	font-size: 0.8rem;
}

.tm-puzzles__sep {
	margin: 0 0.35rem;
}

.tm-puzzle-detail__actions {
	margin: 1rem 0 0;
}

.tm-puzzle-detail__table {
	margin-top: 1.1rem;
}

.tm-play-state {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
}

.tm-play-state.is-played {
	background: #dcfce7;
	color: #15803d;
}

.tm-play-state.is-attempted {
	background: #fef3c7;
	color: #b45309;
}

.tm-play-state.is-unplayed {
	background: #f1eefb;
	color: var(--tm-muted);
}