/* ============================================
   TOURNAMENT DETAIL PAGE
   Matches Section, Rankings Section
   ============================================ */

/* Tournament Detail Header */
.tournament-detail-header {
	padding: 20px;
	/* Match .matches-section / .rankings-section, which override the .container
	   540px cap to full width below 900px. Without this the header stayed at
	   540px on tablets (600-900px, e.g. iPad Air) while the tables ran full
	   width, so they didn't line up. The @900px rule still caps all of them at
	   900px centered. */
	max-width: 100%;
}

.tournament-title-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	gap: 12px;
}

.squad-match-results-section {
	max-width: 900px !important;
	padding: 20px
}

.squad-rankings-section {
	max-width: 900px !important;
	padding: 20px;
}

.formula-note {
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--color-surface-elevated);
	border-left: 4px solid var(--color-success);
	border-radius: 4px;
}

.formula-note p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.formula-note p+p {
	margin-top: 8px;
}

.formula-note strong {
	color: var(--color-success);
	font-weight: 600;
}

.table-scroll-wrapper {
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	margin: 0;
}

.table-scroll-wrapper::-webkit-scrollbar {
	height: 8px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
	background: var(--color-surface-elevated);
	border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
	background: var(--color-text-hint);
	border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-secondary);
}

.tournament-detail-name {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0;
	flex: 1;
}

.tournament-detail-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--color-divider);
}

/* ReClub Icon */
.reclub-icon img {
	width: 20px;
	height: 20px;
	display: block;
}

/* Map Preview Card */
.map-preview-card {
	margin-top: 8px;
	margin-bottom: 4px;
}

.map-preview-link {
	display: block;
	padding: 12px;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 0;
	text-decoration: none;
	transition: all 0.2s ease;
}

.map-preview-link:hover {
	border-color: var(--color-success);
	box-shadow: 0 2px 8px rgba(63, 174, 124, 0.15);
	transform: translateY(-1px);
}

/* If no link, just show as card */
.map-preview-card>div:not(.map-preview-link) {
	display: block;
	padding: 12px;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 0;
}

.map-preview-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.map-preview-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.map-preview-address {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	white-space: normal;
	line-height: 1.4;
}

.map-preview-url {
	font-size: 0.85rem;
	color: var(--color-success);
	font-weight: 500;
	margin-top: 2px;
}

.map-preview-link:hover .map-preview-url {
	color: var(--color-success-hover);
}


/* Link Preview Card Styles */
.link-preview-card {
	margin-top: 4px;
}

.link-preview {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
	overflow: hidden;
}

.link-preview:hover {
	border-color: var(--color-success);
	box-shadow: 0 2px 8px rgba(63, 174, 124, 0.15);
	transform: translateY(-2px);
}

.link-preview-image {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--color-surface-elevated);
}

.link-preview:hover {
	border-color: var(--color-success);
	box-shadow: 0 2px 8px rgba(63, 174, 124, 0.15);
	transform: translateY(-2px);
}

.link-preview-image {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--color-surface-elevated);
}

.link-preview-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.link-preview-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.link-preview-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.link-preview-description {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	white-space: normal;
	line-height: 1.4;
}

/* Fallback simple link styles */
.meta-item .map-link,
.meta-item .reclub-link {
	color: var(--color-success);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}

.meta-item .map-link:hover,
.meta-item .reclub-link:hover {
	color: var(--color-success-hover);
	text-decoration: underline;
}

.meta-item .map-link:visited,
.meta-item .reclub-link:visited {
	color: var(--color-success);
}

@media (max-width: 600px) {
	.link-preview {
		padding: 10px;
		gap: 10px;
	}

	.link-preview-image {
		width: 56px;
		height: 56px;
	}

	.link-preview-title {
		font-size: 0.9rem;
	}

	.link-preview-description {
		font-size: 0.8rem;
	}
}

/* ============================================
   MATCHES SECTION
   ============================================ */

.matches-section {
	padding: 20px 0;
	max-width: 100%;
}

.section-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 16px 0;
	text-align: center;
	padding: 0 20px;
}

/* Round Section (Collapsible) */
.round-section {
	border-radius: 0;
	overflow: hidden;
	background: var(--color-surface);
	width: 100%;
}

.round-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	background: var(--color-surface-elevated);
}

.round-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--color-text-primary);
}

.round-label {
	font-size: 0.95rem;
}

.stage-badge {
	display: inline-block;
	padding: 2px 8px;
	background: var(--color-surface-elevated);
	color: var(--color-success);
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Wave Section */
.wave-section {
	margin-bottom: 14px;
	padding-bottom: 0;
	border-bottom: 1px solid var(--color-surface-elevated);
}

.wave-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.wave-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	padding: 10px 14px;
}

.wave-indicator {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-divider);
	flex-shrink: 0;
}

.wave-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.stage-badge {
	display: none;
}

.round-content {
	display: block;
	padding: 0;
}

/* Wave Section */
.wave-section {
	margin-bottom: 14px;
	padding-bottom: 0;
	border-bottom: 1px solid var(--color-divider);
}

.wave-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.wave-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	padding: 10px 14px;
}

.wave-indicator {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-divider);
	flex-shrink: 0;
}

.wave-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.wave-badge {
	font-size: 0.7rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wave-completed {
	background: var(--color-divider);
	color: var(--color-text-secondary);
}

.wave-live {
	background: var(--color-success);
	color: var(--color-surface);
	animation: pulse 2s infinite;
}

/* Hide wave header */
.wave-header {
	display: none;
}

/* Court Card */
.court-card {
	border: 1px solid var(--color-divider);
	border-radius: 0;
	overflow: hidden;
	background: var(--color-surface);
}

.court-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	border-bottom: 1px solid var(--color-divider);
	position: relative;
}

.court-icon {
	font-size: 1rem;
}

.court-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	flex: 1;
	margin-left: 6px;
}

.court-score {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.wave-completed {
	background: var(--color-divider);
	color: var(--color-text-secondary);
}

.wave-live {
	background: var(--color-success);
	color: var(--color-surface);
	animation: pulse 2s infinite;
}

/* Courts Grid */
.courts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin-bottom: 0;
}

/* Squad matches span full width */
.courts-grid .squad-match-card {
	grid-column: 1 / -1;
}

/* Court Card - DUPLICATE REMOVED */

/* Desktop: Center the score */
@media (min-width: 769px) {
	.court-score {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Court Pairs */
.court-pairs {
	padding: 10px;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}

.pair-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
	/* Allow flex item to shrink below content size */
}

.pair-players {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: stretch;
}

.player-item {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	/* Allow flex item to shrink below content size */
}

.player-code {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-text-primary);
	width: 100%;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player-code-m {
	color: var(--color-text-primary);
}

.player-code-f {
	color: var(--color-text-primary);
}

.vs-divider {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-hint);
	flex-shrink: 0;
}

.court-es {
	padding: 8px;
	border-top: 1px solid var(--color-surface-elevated);
	text-align: center;
	font-size: 0.85rem;
}

.court-es .es-label {
	font-weight: 500;
	color: var(--color-text-secondary);
}

.court-es .es-value {
	margin-left: 6px;
	font-weight: 600;
	color: var(--color-text-primary);
}

@media (max-width: 600px) {
	.court-es {
		font-size: 0.75rem;
	}
}

/* BYEs Section */
.byes-section {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 0;
	margin-top: 0;
}

.byes-label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-text-hint);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.byes-list {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	flex: 1;
}

/* Rotation Message */
.rotation-message {
	padding: 12px 16px;
	background: var(--color-surface-elevated);
	border-left: 4px solid var(--color-success);
	border-radius: 4px;
	margin-top: 16px;
	grid-column: 1 / -1;
}

.rotation-message p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-text-primary);
	line-height: 1.6;
}

.rotation-message p:first-child {
	font-weight: 600;
	margin-bottom: 4px;
}

.rotation-message p:last-child {
	font-weight: 700;
	color: var(--color-success);
}

/* ============================================
   RANKINGS SECTION
   ============================================ */

.rankings-section {
	padding: 20px;
	max-width: 100%;
}

.rankings-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--color-divider);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE/Edge */
}

.rankings-tabs::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Opera */
}

.ranking-tab {
	padding: 10px 20px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
	bottom: -2px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ranking-tab:hover {
	color: var(--color-success);
}

.ranking-tab.active {
	color: var(--color-success);
	border-bottom-color: var(--color-success);
}

/* Ranking Views */
.ranking-view {
	display: none;
}

.ranking-view.active {
	display: block;
}

.ranking-gender-section {
	margin-bottom: 24px;
}

.ranking-gender-section:last-child {
	margin-bottom: 0;
}

.gender-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 12px 0;
}

.gender-icon {
	font-size: 1.1rem;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.gender-icon.gender-m {
	background: #e3f2fd;
	color: #1976d2;
}

.gender-icon.gender-f {
	background: #fce4ec;
	color: #c2185b;
}

/* Ranking Table */
.ranking-table {
	table-layout: auto;
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.ranking-table thead {
	background: var(--color-surface-elevated);
}

.ranking-table th {
	text-align: left;
	padding: 10px 12px;
	font-weight: 600;
	color: var(--color-text-secondary);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid var(--color-divider);
	white-space: nowrap;
}

/* Right-align numeric stat columns */
.ranking-table th:nth-child(3),
/* PD */
.ranking-table th:nth-child(4),
/* MD */
.ranking-table th:nth-child(5),
/* PF */
.ranking-table th:nth-child(6),
/* Luck */
.ranking-table th:nth-child(7) {
	/* PA */
	text-align: right;
}

/* Roster reuses .ranking-table, but its gender (3) + status (4) columns are
   text, not numeric stats — keep their headers left-aligned so they line up
   with the left-aligned cell values below them. */
.roster-table th:nth-child(3),
.roster-table th:nth-child(4) {
	text-align: left;
}


.ranking-table th.th-wl {
	text-align: center;
}

.ranking-table th.th-pa {
	text-align: right;
}

.ranking-table th.th-gender {
	text-align: left;
}

/* Center-align specific columns (Round 5-7 PD and Average Luck) */
.ranking-table th.th-center,
.ranking-table td.td-center {
	text-align: center;
}

/* Luck Hash header and cell styling */
.ranking-table th.th-luck-hash {
	text-align: left;
}

.ranking-table th.th-secondary {
	color: var(--color-text-hint) !important;
	font-weight: 700;
}

.ranking-table td.td-secondary span,
.ranking-table td.td-secondary {
	color: var(--color-text-hint);
}

.luck-hash-cell {
	text-align: left;
	word-break: break-all;
	font-family: monospace;
	font-size: 0.85rem;
	vertical-align: top;
}

.luck-hash-clickable {
	cursor: pointer;
	transition: color 0.2s;
}

.luck-hash-clickable:hover {
	color: var(--color-success);
}

.luck-hash-message {
	display: none;
	font-size: 0.75rem;
	margin-top: 4px;
	padding: 4px 8px;
	border-radius: 4px;
}

.luck-hash-message.success {
	color: var(--color-success);
	background: var(--color-surface-elevated);
}

.luck-hash-message.error {
	color: var(--color-error);
	background: var(--color-surface-elevated);
}

.ranking-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-surface-elevated);
	color: var(--color-text-primary);
	font-weight: 500;
}

.ranking-table tbody tr:hover {
	background: var(--color-surface-elevated);
}

.rank-cell {
	font-weight: 400;
	color: var(--color-text-hint);
}

.player-cell {
	font-weight: 400;
	/* Keep this a real table-cell. Using display:flex on a <td> drops it out of
	   the table layout model, so with border-collapse it stops collapsing borders
	   with its neighbours and renders a stray box around the player column. The
	   cell only ever holds a name string, so flex isn't needed. */
	vertical-align: middle;
}

.stat-ps {
	color: var(--color-text-primary);
	font-weight: 400;
	text-align: right;
}

.type-cell {
	min-width: 80px;
}


.stat-total-score {
	color: var(--color-success);
	font-weight: 600;
	text-align: center;
}

.stat-pa {
	color: var(--color-text-hint);
	font-weight: 400;
	text-align: right;
}

.stat-md {
	font-weight: 400;
	text-align: right;
}

.stat-pd {
	font-weight: 400;
	text-align: right;
}

.wl-cell {
	font-weight: 400;
	color: var(--color-text-hint);
	text-align: center;
}

.luck-cell {
	font-weight: 400;
	color: var(--color-warning);
	text-align: right;
}

/* Luck Codes Table - Override to use auto layout */
.luck-codes-table {
	table-layout: auto !important;
	max-width: 100%;
	width: 100%;
}

/* Override right-alignment for Luck Number column in Luck Codes tab */
.luck-codes-table .luck-cell {
	text-align: left;
}

.luck-codes-table th,
.luck-codes-table td {
	padding: 10px 8px;
	vertical-align: top;
}



/* ============================================
   LUCK OF THE DRAW SECTION
   ============================================ */

.luck-of-the-draw-section {
	padding: 20px;
}

.luck-draw-section {
	margin-bottom: 32px;
}

.luck-draw-section:last-child {
	margin-bottom: 0;
}

.luck-draw-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 16px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.luck-draw-card {
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	transition: all 0.2s ease;
}

.luck-draw-card:hover {
	border-color: var(--color-success);
	box-shadow: 0 4px 12px rgba(63, 174, 124, 0.15);
	transform: translateY(-2px);
}

.luck-draw-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-hint);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.luck-draw-names {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin-bottom: 12px;
	min-height: 1.5em;
}

.luck-draw-stats {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.luck-draw-stats .stat-item {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	font-weight: 500;
}

/* Empty Message */
.empty-message {
	text-align: center;
	padding: 2rem;
	color: var(--color-text-hint);
}

.empty-message p {
	margin: 0;
	font-size: 0.95rem;
}

.luck-draw-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

/* DUPLICATE LUCK-DRAW SECTION REMOVED */

/* Auto-refresh Indicator */
.auto-refresh-indicator {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid var(--color-divider);
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	font-size: 0.8rem;
	color: var(--color-text-secondary);
	z-index: 100;
}

.refresh-icon {
	animation: rotate 2s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.refresh-text {
	font-weight: 500;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 600px) {
	.tournament-detail-header {
		padding: 16px;
	}

	.tournament-detail-name {
		font-size: 1.15rem;
	}

	.rankings-section {
		padding: 16px;
	}

	.player-code {
		font-size: 0.75rem;
	}

	/* Luck Codes Table Mobile */
	.luck-codes-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.luck-codes-table th,
	.luck-codes-table td {
		white-space: normal;
		word-break: break-word;
	}

	/* Nail-Biter Table Mobile */
	.nail-biter-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.nail-biter-table {
		min-width: 100%;
	}

	.luck-hash-cell {
		font-size: 0.75rem;
	}

	.luck-draw-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.luck-draw-card {
		padding: 12px 8px;
	}

	.luck-draw-names {
		font-size: 0.85rem;
	}

	.luck-draw-title {
		font-size: 0.95rem;
	}

	.luck-draw-section {
		margin-bottom: 20px;
	}

	.player-avatar {
		width: 38px;
		height: 38px;
	}

	.player-name {
		font-size: 0.8rem;
	}

	.ranking-table {
		font-size: 0.8rem;
	}

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

	.ranking-tab {
		font-size: 0.75rem;
		padding: 8px 12px;
	}

	.gender-title {
		font-size: 0.85rem;
	}

	.gender-icon {
		font-size: 0.9rem;
		width: 20px;
		height: 20px;
	}

	.auto-refresh-indicator {
		bottom: 10px;
		right: 10px;
		font-size: 0.75rem;
		padding: 8px 12px;
	}

	/* Map Preview Card responsive */
	.map-preview-link,
	.map-preview-card>div:not(.map-preview-link) {
		padding: 10px;
	}

	.map-preview-title {
		font-size: 0.9rem;
	}

	.map-preview-address {
		font-size: 0.8rem;
	}

	.map-preview-url {
		font-size: 0.8rem;
	}

}

@media (min-width: 900px) {
	.tournament-detail-name {
		font-size: 1.6rem;
	}

	/* Constrain tournament sections to reasonable width on desktop */
	.tournament-detail-header,
	.matches-section,
	.rankings-section,
	.roster-section,
	.luck-of-the-draw-section,
	.rewards-section,
	.squads-section {
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================
   LUCK CODE VERIFICATION MODAL
   ============================================ */

/* ============================================
   LUCK CODES SECTION
   ============================================ */

.luck-codes-section {
	max-width: 900px !important;
	padding: 20px;
}

.luck-codes-section .ranking-gender-section {
	margin-top: 0;
}

.luck-codes-section .ranking-gender-section+.ranking-gender-section {
	margin-top: 24px;
}

.luck-codes-section .check-luck-link {
	text-align: center;
	margin-top: 16px;
	display: block;
}

/* Modal Inner Layout */
.luck-modal-inner {
	padding: 12px 24px;
	max-width: 520px;
	margin: 0 auto;
}

.luck-input-wrap {
	margin-bottom: 12px;
}

.luck-input-wrap .luck-hash-input {
	width: 100%;
	box-sizing: border-box;
}

.luck-hash-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.luck-hash-label {
	font-size: 0.95rem;
	color: var(--color-text-primary);
	white-space: nowrap;
}

.luck-hash-text {
	flex: 1;
	font-family: monospace;
	font-size: 0.92rem;
	color: var(--color-text-primary);
	word-break: break-all;
}

.luck-modal-footer--center {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 18px 24px 8px;
}

/* Check Luck Link */
.check-luck-link {
	color: var(--color-success);
	text-decoration: underline;
	font-size: 0.95rem;
	cursor: pointer;
	font-weight: 500;
	transition: color 0.2s;
}

.check-luck-link:hover {
	color: var(--color-success-hover);
}

/* Modal Overlay */
.luck-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.luck-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

/* Modal Content */
.luck-modal-content {
	position: relative;
	background: var(--color-surface);
	border-radius: 8px;
	max-width: 400px;
	width: 90%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	z-index: 10000;
	animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.luck-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid var(--color-divider);
}

.luck-modal-header h3 {
	margin: 0;
	font-size: 1.2rem;
	color: var(--color-text-primary);
	font-weight: 700;
}

.luck-modal-close {
	background: none;
	border: none;
	font-size: 1.8rem;
	color: var(--color-text-secondary);
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	line-height: 1;
	transition: color 0.2s;
}

.luck-modal-close:hover {
	color: var(--color-text-primary);
}

.luck-player-cell {
	min-width: 80px;
}

/* Luck Codes section: the Luck value body cell had no alignment and defaulted
   to left, while its header is right-aligned (.ranking-table th:nth-child(3/4)),
   so the "Luck" header and the numbers below it didn't line up. Right-align the
   body to match the header. */
.luck-codes-section .luck-code-cell {
	text-align: right;
}

.luck-codes-luck-number {
	text-align: center !important;
}

.luck-modal-body p {
	margin: 0 0 12px 0;
	color: var(--color-text-secondary);
	font-size: 0.95rem;
}

.luck-hash-input {
	width: 100%;
	padding: 12px;
	font-size: 1.1rem;
	border: 1px solid var(--color-divider);
	border-radius: 4px;
	box-sizing: border-box;
	text-transform: lowercase;
	font-family: 'Courier New', monospace;
	letter-spacing: 2px;
	text-align: center;
	transition: border-color 0.2s;
}

.luck-hash-input:focus {
	outline: none;
	border-color: var(--color-success);
}

.luck-hash-input::placeholder {
	letter-spacing: normal;
	font-family: 'Noto Sans', Arial, sans-serif;
}

.luck-result {
	margin-top: 16px;
	padding: 12px;
	border-radius: 4px;
	font-size: 0.95rem;
	text-align: center;
	display: none;
	font-weight: 500;
}

.luck-result.success {
	background: var(--color-surface-elevated);
	color: var(--color-success);
	border: 1px solid var(--color-success);
	display: block;
}

.luck-result.error {
	background: var(--color-surface-elevated);
	color: var(--color-error);
	border: 1px solid var(--color-error);
	display: block;
}

.luck-modal-footer {
	padding: 16px 20px;
	border-top: 1px solid var(--color-divider);
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

.luck-check-btn,
.luck-cancel-btn {
	padding: 10px 20px;
	font-size: 0.95rem;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s;
}

.luck-check-btn {
	background: var(--color-success);
	color: var(--color-surface);
}

.luck-check-btn:hover {
	background: var(--color-success-hover);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(63, 174, 124, 0.2);
}

.luck-cancel-btn {
	background: var(--color-divider);
	color: var(--color-text-secondary);
}

.luck-cancel-btn:hover {
	background: var(--color-text-hint);
	color: var(--color-text-primary);
}

/* Mobile responsive */
@media (max-width: 600px) {

	/* Keep a consistent horizontal inset on mobile so the table cards line up
	   with the tournament card (was 0, which let tables bleed to the screen
	   edges and clipped the last column). Wide tables still scroll inside
	   .table-scroll-wrapper. */
	.rankings-section,
	.squad-rankings-section,
	.luck-codes-section,
	.squad-match-results-section {
		padding-left: 12px;
		padding-right: 12px;
	}

	.luck-hash-cell {
		max-width: 150px;
	}

	.luck-modal-content {
		width: 95%;
		max-width: none;
	}

	.luck-modal-header,
	.luck-modal-body,
	.luck-modal-footer {
		padding: 16px;
	}

	.luck-modal-header h3 {
		font-size: 1.1rem;
	}

	.luck-hash-input {
		font-size: 1rem;
		padding: 10px;
	}

	.luck-check-btn,
	.luck-cancel-btn {
		padding: 8px 16px;
		font-size: 0.9rem;
	}
}
/* ── Player Roster (before activity start) ──────────────────────────────── */
.roster-section { margin-top: 1rem; }
.roster-table .roster-name-cell { text-align: left; font-weight: 600; }
.roster-status {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.6;
}
.roster-status-active    { background: #e6f4ea; color: #1e7e34; }
.roster-status-rest      { background: #fff4e5; color: #b76e00; }
.roster-status-requested { background: #eef2ff; color: #3b4cca; }
.roster-status-late      { background: #fff4e5; color: #b76e00; }
.roster-status-left      { background: #f0f0f0; color: #777; }
.roster-status-withdrawn { background: #fdecea; color: #b3261e; text-decoration: line-through; }
.roster-subtitle {
  margin: -0.25rem 0 0.75rem; color: #666; font-size: 0.92rem; text-align: center;
}
@media (max-width: 600px) {
  .roster-subtitle { font-size: 0.85rem; }
  .roster-status { font-size: 0.72rem; padding: 2px 8px; }
}
.roster-count {
  margin: 0 0 1rem; text-align: center; font-weight: 700; color: #1e7e34; font-size: 0.95rem;
}

/* ── Activity card: Format ──────────────────────────────────────────────── */
.meta-format .text { display: flex; flex-direction: column; gap: 2px; }
.meta-format .format-name { font-weight: 700; }
.meta-format .format-desc { font-size: 0.85rem; color: #666; line-height: 1.35; }
@media (max-width: 600px) {
  .meta-format .format-desc { font-size: 0.8rem; }
}

/* ── Activity card: Venue / Address / Map (labeled rows) ────────────────── */
.venue-card {
  margin-top: 8px; padding: 12px;
  border: 1px solid var(--color-divider); border-radius: 8px;
  background: var(--color-surface);
}
.venue-row { display: flex; gap: 10px; align-items: baseline; }
.venue-row + .venue-row { margin-top: 8px; }
.venue-label {
  flex: 0 0 76px; font-weight: 600; color: var(--color-text-secondary); font-size: 0.9rem;
}
.venue-value { flex: 1; min-width: 0; color: var(--color-text-primary); line-height: 1.4; }
.venue-map-link { color: var(--color-success); font-weight: 600; text-decoration: none; }
.venue-map-link:hover { color: var(--color-success-hover); text-decoration: underline; }
@media (max-width: 600px) {
  .venue-label { flex-basis: 68px; font-size: 0.85rem; }
  .venue-value { font-size: 0.9rem; }
}