/*
 * Farbschema: dieselbe Konvention wie in unseren anderen footballr.at
 * Features (siehe translator-engine-Plugin, tsnfi-* CSS-Blöcke): Dunkel ist
 * die Default-Palette, Light-Mode wird über exakt dieselbe, dort bereits
 * bewährte Selektor-Liste erzwungen (mehrere Light-Mode-Konventionen
 * gleichzeitig abgedeckt, inkl. Foxiz' echtem html.tsnfi-force-light) und
 * mit !important gesetzt, damit es sich zuverlässig gegen Theme-/Elementor-
 * CSS durchsetzt.
 */
.frp-pickem {
	--frp-accent: #34d399;
	--frp-accent-dark: #059669;
	--frp-bg: #0b0f14;
	--frp-bg-alt: #10161d;
	--frp-border: #1f2b36;
	--frp-text: #e6edf3;
	--frp-text-dim: #8b98a5;
	--frp-danger: #f87171;
	--frp-danger-bg: #2a1414;
	--frp-success-bg: #10261d;

	--frp-radius-lg: 18px;
	--frp-radius-md: 12px;

	font-family: inherit;
	color: var(--frp-text);
	background: var(--frp-bg);
	border: 1px solid var(--frp-border);
	border-radius: var(--frp-radius-lg);
	padding: 1.5em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

:is(html[data-theme="light"],body[data-theme="light"],html.light-mode,body.light-mode,html.is-light,body.is-light,html.rb-light-mode,body.rb-light-mode,html.tsnfi-force-light,body.tsnfi-force-light) .frp-pickem {
	--frp-accent: #059669 !important;
	--frp-accent-dark: #047857 !important;
	--frp-bg: #ffffff !important;
	--frp-bg-alt: #f3f5f7 !important;
	--frp-border: #dde3e8 !important;
	--frp-text: #10161d !important;
	--frp-text-dim: #5b6572 !important;
	--frp-danger: #c0362c !important;
	--frp-danger-bg: #fbeaea !important;
	--frp-success-bg: #e6f6ee !important;
}

.frp-pickem * {
	box-sizing: border-box;
}

.frp-pickem a {
	color: var(--frp-accent);
}

/* Header */
.frp-pickem__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em 1.5em;
	margin-bottom: 1.25em;
}

.frp-pickem__logo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--frp-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
	flex-shrink: 0;
}

.frp-pickem__title {
	font-size: 1.5em;
	font-weight: 800;
	font-style: italic;
	letter-spacing: 0.5px;
	margin: 0;
	text-transform: uppercase;
}

.frp-pickem__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	font-size: 0.85em;
	color: var(--frp-text-dim);
	margin-left: auto;
}

.frp-pickem__meta strong {
	color: var(--frp-accent);
}

/* Body layout: tiles + summary side by side */
.frp-pickem__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25em;
	margin-bottom: 1.25em;
}

.frp-pickem__closed-banner {
	grid-column: 1 / -1;
	background: #2a2410;
	border: 1px solid #6b5a1c;
	color: #f0d879;
	padding: 0.7em 1em;
	border-radius: var(--frp-radius-md);
	font-size: 0.9em;
}

/* Position tiles */
.frp-pickem__tiles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* align-items: start verhindert, dass Grid alle Tiles auf die Höhe der
	   höchsten Zeile "stretcht" - sonst gewinnt der Grid-Stretch gegen
	   aspect-ratio, sobald ein Tile durch einen langen Spielernamen mehr
	   Inhalt hat, und alle Tiles in der Reihe wachsen sichtbar mit. */
	align-items: start;
	gap: 0.75em;
}

.frp-pickem__tile {
	/* Am Desktop bewusst rechteckig statt quadratisch, um Höhe zu sparen -
	   quadratisch (aspect-ratio) gibt es nur im Mobile-Breakpoint unten. */
	height: 108px;
	width: 100%;
	align-self: start;
	background: var(--frp-bg-alt);
	border: 2px solid var(--frp-accent);
	border-radius: var(--frp-radius-lg);
	color: var(--frp-text);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	cursor: pointer;
	padding: 0.5em;
	overflow: hidden;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	text-align: center;
}

.frp-pickem__tile:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(52, 211, 153, 0.15);
}

.frp-pickem__tile:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.frp-pickem__tile-pos {
	font-size: 1.8em;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
}

.frp-pickem__tile-plus {
	font-size: 1.4em;
	font-weight: 700;
	color: var(--frp-accent);
	line-height: 1;
}

.frp-pickem__tile-player {
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	padding: 0 0.2em;
}

.frp-pickem__tile-team {
	font-size: 0.62em;
	color: var(--frp-text-dim);
}

.frp-pickem__tile--filled {
	background: linear-gradient(180deg, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.04));
}

/* Right summary panel - am Desktop ausgeblendet (Tiles zeigen Auswahl bereits
   an, das Panel war höher als die Tile-Reihe und unnötig). Nur auf Mobile
   sichtbar, siehe @media (max-width: 720px) weiter unten. */
.frp-pickem__summary {
	display: none;
	background: var(--frp-bg-alt);
	border: 1px solid var(--frp-border);
	border-radius: var(--frp-radius-lg);
	padding: 1em;
	flex-direction: column;
}

.frp-pickem__summary h4 {
	margin: 0 0 0.5em;
	color: var(--frp-accent);
	font-size: 1em;
}

.frp-pickem__summary-empty {
	color: var(--frp-text-dim);
	font-size: 0.9em;
}

.frp-pickem__summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85em;
	flex: 1;
}

.frp-pickem__summary-list li {
	display: flex;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.35em 0;
	border-bottom: 1px solid var(--frp-border);
}

.frp-pickem__summary-list li:last-child {
	border-bottom: none;
}

.frp-pickem__summary-pos {
	color: var(--frp-text-dim);
	font-weight: 700;
	flex-shrink: 0;
}

.frp-pickem__summary-name {
	text-align: right;
}

/* Tabs */
.frp-pickem__tabs {
	display: flex;
	gap: 1.5em;
	border-bottom: 1px solid var(--frp-border);
	margin-bottom: 1em;
}

.frp-pickem__tab {
	background: none;
	border: none;
	color: var(--frp-text-dim);
	padding: 0.6em 0.1em;
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.frp-pickem__tab--active {
	color: var(--frp-text);
	border-bottom-color: var(--frp-accent);
}

.frp-pickem__tabpanel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.9em;
	align-items: end;
	margin-bottom: 1em;
}

.frp-pickem__tabpanel[hidden] {
	display: none;
}

.frp-pickem__field label {
	display: block;
	font-size: 0.8em;
	color: var(--frp-text-dim);
	margin-bottom: 0.3em;
}

.frp-pickem__field input[type="text"],
.frp-pickem__field input[type="email"] {
	width: 100%;
	background: var(--frp-bg-alt);
	border: 1px solid var(--frp-border);
	color: var(--frp-text);
	padding: 0.55em 0.7em;
	border-radius: var(--frp-radius-md);
	font-size: 0.95em;
}

.frp-pickem__field input:focus {
	outline: none;
	border-color: var(--frp-accent);
}

.frp-pickem__checkbox {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.85em;
	color: var(--frp-text-dim);
	padding-bottom: 0.55em;
}

.frp-pickem__checkbox input {
	width: 17px;
	height: 17px;
	accent-color: var(--frp-accent);
}

.frp-pickem__load-btn {
	background: transparent;
	border: 1px solid var(--frp-border);
	color: var(--frp-text);
	border-radius: var(--frp-radius-md);
	padding: 0.55em 1em;
	cursor: pointer;
	white-space: nowrap;
}

/* "Aufstellung laden" Bereich - immer sichtbar, unabhängig vom Spielmodus */
.frp-pickem__load-section {
	background: var(--frp-bg-alt);
	border: 1px solid var(--frp-border);
	border-radius: var(--frp-radius-md);
	padding: 1em;
	margin-bottom: 1em;
}

.frp-pickem__load-section h4 {
	margin: 0 0 0.6em;
	font-size: 0.95em;
	color: var(--frp-text-dim);
}

.frp-pickem__subtabs {
	display: flex;
	gap: 0.5em;
	margin-bottom: 0.75em;
}

.frp-pickem__subtab {
	background: transparent;
	border: 1px solid var(--frp-border);
	color: var(--frp-text-dim);
	border-radius: 999px;
	padding: 0.3em 0.9em;
	font-size: 0.8em;
	font-weight: 600;
	cursor: pointer;
}

.frp-pickem__subtab--active {
	background: var(--frp-accent);
	border-color: var(--frp-accent);
	color: #04150e;
}

.frp-pickem__hint {
	font-size: 0.78em;
	color: var(--frp-text-dim);
	grid-column: 1 / -1;
	margin: -0.3em 0 0;
}

/* Footer / CTA row */
.frp-pickem__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
}

.frp-pickem__btn {
	background: linear-gradient(180deg, var(--frp-accent), var(--frp-accent-dark));
	color: #04150e;
	border: none;
	border-radius: var(--frp-radius-md);
	padding: 0.85em 1.6em;
	font-weight: 800;
	font-size: 1em;
	cursor: pointer;
}

.frp-pickem__btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.frp-pickem__privacy {
	font-size: 0.78em;
	color: var(--frp-text-dim);
	max-width: 320px;
	text-align: right;
}

/* Messages */
.frp-pickem__message {
	padding: 0.6em 0.9em;
	border-radius: var(--frp-radius-md);
	font-size: 0.88em;
	margin-bottom: 0.9em;
}

.frp-pickem__message--error {
	background: var(--frp-danger-bg);
	border: 1px solid #6e2a2a;
	color: var(--frp-danger);
}

.frp-pickem__message--success {
	background: var(--frp-success-bg);
	border: 1px solid #1c5c3a;
	color: var(--frp-accent);
}

.frp-pickem__code-box {
	background: var(--frp-bg-alt);
	border: 2px dashed var(--frp-accent);
	border-radius: var(--frp-radius-md);
	padding: 0.8em 1em;
	margin-bottom: 0.9em;
	text-align: center;
}

.frp-pickem__code-box strong {
	font-size: 1.4em;
	letter-spacing: 3px;
	color: var(--frp-accent);
	display: block;
	margin: 0.2em 0;
}

.frp-pickem__code-box small {
	color: var(--frp-text-dim);
}

/* Modal */
.frp-pickem-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 1em;
}

.frp-pickem-modal[hidden] {
	display: none;
}

.frp-pickem-modal__dialog {
	background: var(--frp-bg-alt);
	border: 1px solid var(--frp-border);
	border-radius: var(--frp-radius-lg);
	width: 100%;
	max-width: 420px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	color: var(--frp-text);
}

.frp-pickem-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 1em 0.5em;
}

.frp-pickem-modal__header h4 {
	margin: 0;
	color: var(--frp-accent);
}

.frp-pickem-modal__close {
	background: none;
	border: none;
	color: var(--frp-text-dim);
	font-size: 1.3em;
	cursor: pointer;
	line-height: 1;
}

.frp-pickem-modal__search {
	margin: 0 1em 0.75em;
	background: var(--frp-bg);
	border: 1px solid var(--frp-border);
	color: var(--frp-text);
	padding: 0.6em 0.8em;
	border-radius: var(--frp-radius-md);
}

.frp-pickem-modal__search:focus {
	outline: none;
	border-color: var(--frp-accent);
}

.frp-pickem-modal__list {
	overflow-y: auto;
	padding: 0 0.5em 1em;
}

.frp-pickem-modal__item {
	width: 100%;
	background: none;
	border: none;
	color: var(--frp-text);
	text-align: left;
	padding: 0.6em 0.75em;
	border-radius: var(--frp-radius-md);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 0.5em;
	font-size: 0.92em;
}

.frp-pickem-modal__item:hover,
.frp-pickem-modal__item--selected {
	background: rgba(52, 211, 153, 0.12);
}

.frp-pickem-modal__item-team {
	color: var(--frp-text-dim);
	font-size: 0.85em;
	white-space: nowrap;
}

.frp-pickem-modal__empty {
	color: var(--frp-text-dim);
	padding: 1em;
	text-align: center;
	font-size: 0.9em;
}

/* Responsive */
@media (max-width: 720px) {
	.frp-pickem__tiles {
		grid-template-columns: repeat(3, 1fr);
	}

	.frp-pickem__tile {
		/* Auf Mobile bleiben die Tiles quadratisch (3er-Grid sieht so besser aus). */
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.frp-pickem__summary {
		display: flex;
	}

	.frp-pickem__meta {
		margin-left: 0;
	}

	.frp-pickem__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.frp-pickem__btn {
		width: 100%;
	}

	.frp-pickem__privacy {
		max-width: none;
		text-align: left;
	}
}

@media (max-width: 420px) {
	.frp-pickem__tiles {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5em;
	}

	.frp-pickem__tile-pos {
		font-size: 1.4em;
	}
}