.tips180-app {
	--t180-paper: #f7f2e6;
	--t180-card: #fffdf7;
	--t180-teal-900: #0f3d37;
	--t180-teal-700: #175349;
	--t180-coral-600: #c1502e;
	--t180-coral-800: #7a2f19;
	--t180-ink: #222620;
	--t180-ink-soft: #6f6a5c;
	--t180-line: #e2d8bf;
	--t180-win: #2f7d5c;
	--t180-loss: #b23a3a;
	--t180-draw: #cabf9f;

	--t180-font-display: Georgia, 'Times New Roman', serif;
	--t180-font-mono: 'Courier New', Courier, monospace;

	max-width: 480px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--t180-ink);
	background: var(--t180-paper);
}

.tips180-app * { box-sizing: border-box; }

.tips180-header {
	padding: 24px 20px 22px;
	text-align: center;
}
.tips180-brand {
	color: var(--t180-coral-600);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 6px;
}
.tips180-title {
	font-family: var(--t180-font-display);
	font-style: italic;
	color: var(--t180-teal-900);
	font-size: 32px;
	font-weight: 700;
	margin: 2px 0 4px;
}
.tips180-subdate {
	color: var(--t180-ink-soft);
	font-size: 13.5px;
	margin-bottom: 18px;
}
.tips180-date-nav { display: flex; align-items: center; gap: 10px; max-width: 320px; margin: 0 auto; }
.tips180-nav-btn {
	width: 38px; height: 38px; flex: 0 0 38px;
	border-radius: 50%;
	background: var(--t180-card);
	border: 1.5px solid var(--t180-teal-900);
	color: var(--t180-teal-900);
	font-size: 16px;
	cursor: pointer;
}
.tips180-nav-btn:hover { background: var(--t180-teal-900); color: #fff; }
.tips180-date-pill {
	flex: 1;
	background: var(--t180-teal-900);
	border-radius: 999px;
	height: 38px;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-size: 14px;
	font-family: var(--t180-font-mono);
	letter-spacing: .04em;
}

.tips180-content { padding: 16px 14px 4px; }

.tips180-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--t180-ink-soft);
	font-size: 14px;
	font-family: var(--t180-font-display);
	font-style: italic;
}

.tips180-league-group {
	background: var(--t180-card);
	border: 1px solid var(--t180-line);
	border-radius: 10px;
	margin-bottom: 18px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(34,38,32,.03), 0 6px 16px -10px rgba(34,38,32,.18);
	position: relative;
}
.tips180-league-header {
	padding: 11px 16px;
	background: var(--t180-teal-900);
	text-align: center;
}
.tips180-league-name { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f2ead6; }

.tips180-match { padding: 16px 16px 0; }

.tips180-teams-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tips180-team { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 90px; flex: 0 0 90px; }
.tips180-crest { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--t180-line); }
.tips180-crest-fallback {
	display: flex; align-items: center; justify-content: center;
	background: var(--t180-teal-900); color: #f2ead6; font-weight: 700; font-size: 12px;
	font-family: var(--t180-font-display);
}
.tips180-team-name {
	font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px;
}
.tips180-form-row { display: flex; gap: 3px; }
.tips180-form-dot {
	width: 14px; height: 14px; border-radius: 50%;
	font-size: 8px; font-weight: 700; color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.tips180-form-dot.w { background: var(--t180-win); }
.tips180-form-dot.l { background: var(--t180-loss); }
.tips180-form-dot.d { background: var(--t180-draw); color: #837c68; }

.tips180-score-box {
	font-family: var(--t180-font-display);
	font-style: italic;
	background: transparent;
	border: none;
	padding: 4px 10px;
	font-weight: 700;
	font-size: 19px;
	color: var(--t180-teal-900);
	white-space: nowrap;
}

/* Signature element: a torn ticket-stub divider between the match info
   and the odds/tips strip, with punched notches at the card edges. */
.tips180-stat-row {
	position: relative;
	margin: 18px -16px 0;
	display: flex;
	overflow: visible;
	border-top: 2px dashed var(--t180-line);
}
.tips180-stat-row::before,
.tips180-stat-row::after {
	content: "";
	position: absolute;
	top: -8px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--t180-paper);
	border: 1px solid var(--t180-line);
}
.tips180-stat-row::before { left: -8px; }
.tips180-stat-row::after { right: -8px; }

.tips180-stat-cell { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 8px 16px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--t180-ink-soft); }
.tips180-odds { background: var(--t180-card); }
.tips180-tips { background: #f1e9d4; }
.tips180-odds-value {
	font-family: var(--t180-font-mono);
	background: transparent; border-radius: 6px; padding: 3px 8px; font-weight: 700; font-size: 13.5px; color: var(--t180-teal-900);
	border: 1px solid var(--t180-line);
}
.tips180-tips-value {
	background: var(--t180-coral-600); border-radius: 999px; padding: 4px 13px; font-weight: 700; font-size: 12.5px; color: #fdf0e8;
}
.tips180-odds-value em { color: var(--t180-coral-600); font-style: normal; font-weight: 700; font-size: 10.5px; margin-left: 4px; }

.tips180-loading {
	text-align: center;
	padding: 14px;
	color: var(--t180-ink-soft);
	font-size: 13px;
	font-family: var(--t180-font-display);
	font-style: italic;
}

/* ---------- Search / filter bar ---------- */
.tips180-toolbar { padding: 0 14px 12px; }
.tips180-search {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--t180-line);
	border-radius: 10px;
	background: var(--t180-card);
	font-size: 14px;
	color: var(--t180-ink);
}
.tips180-search:focus { outline: none; border-color: var(--t180-teal-900); }

/* ---------- Live badge ---------- */
.tips180-score-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tips180-live-badge {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--t180-loss); color: #fff;
	font-size: 9px; font-weight: 800; letter-spacing: .06em;
	padding: 2px 7px; border-radius: 999px;
}
.tips180-live-dot {
	width: 6px; height: 6px; border-radius: 50%; background: #fff;
	animation: tips180-pulse 1.3s ease-in-out infinite;
}
@keyframes tips180-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Probability + result pill ---------- */
.tips180-probability {
	font-family: var(--t180-font-mono);
	font-size: 10.5px; color: var(--t180-ink-soft); margin-left: 4px;
}
.tips180-result { font-weight: 800; }
.tips180-result-value { font-size: 12px; font-weight: 800; }
.tips180-result-won .tips180-result-value, .tips180-result-won { color: var(--t180-win); }
.tips180-result-lost .tips180-result-value, .tips180-result-lost { color: var(--t180-loss); }

/* ---------- Standings table ---------- */
.tips180-standings-wrap { background: var(--t180-card); border: 1px solid var(--t180-line); border-radius: 10px; overflow: hidden; margin: 0 14px 18px; }
.tips180-standings-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tips180-standings-table th, .tips180-standings-table td { padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--t180-line); }
.tips180-standings-table th { background: var(--t180-teal-900); color: #f2ead6; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.tips180-standings-table td:nth-child(3) { text-align: left; font-weight: 600; }
.tips180-standings-logo { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }

/* ---------- Recent winnings table ---------- */
.tips180-winnings-wrap { background: var(--t180-card); border: 1px solid var(--t180-line); border-radius: 10px; overflow: hidden; margin: 0 14px 18px; }
.tips180-winnings-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tips180-winnings-table th, .tips180-winnings-table td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--t180-line); }
.tips180-winnings-table th { background: var(--t180-teal-900); color: #f2ead6; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 380px) {
	.tips180-title { font-size: 27px; }
	.tips180-team { width: 76px; flex-basis: 76px; }
	.tips180-team-name { max-width: 76px; }
}

/* =================================================================
   DESKTOP — reflows each match into a compact inline row (closer to
   a fixture-list table) instead of the stacked mobile ticket card.
   ================================================================= */
@media (min-width: 760px) {
	.tips180-app { max-width: 900px; }

	.tips180-header { padding: 28px 32px 24px; }
	.tips180-title { font-size: 36px; }

	.tips180-content { padding: 20px 24px 4px; }
	.tips180-toolbar { padding: 0 24px 16px; display: flex; gap: 10px; }
	.tips180-search { max-width: 360px; }

	.tips180-league-group { margin-bottom: 20px; }
	.tips180-league-header { padding: 12px 20px; text-align: left; }

	.tips180-match {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 14px 20px;
		border-bottom: 1px solid var(--t180-line);
	}
	.tips180-match:last-child { border-bottom: none; }

	.tips180-teams-row { flex: 1; justify-content: flex-start; gap: 24px; }
	.tips180-team { flex-direction: row; width: auto; flex: 0 0 auto; gap: 10px; }
	.tips180-team:first-child { justify-content: flex-end; flex-direction: row-reverse; width: 180px; }
	.tips180-team:last-child { width: 180px; }
	.tips180-team-name { max-width: none; white-space: normal; }
	.tips180-form-row { margin-left: 4px; }

	.tips180-score-box { font-size: 16px; }

	.tips180-stat-row {
		position: static;
		margin: 0;
		border-top: none;
		flex: 0 0 auto;
		gap: 10px;
	}
	.tips180-stat-row::before, .tips180-stat-row::after { display: none; }
	.tips180-stat-cell { padding: 6px 4px; flex-direction: column; gap: 3px; }
	.tips180-odds, .tips180-tips, .tips180-result { background: transparent; border-radius: 8px; }
}