/* HSC Tippspiel – Frontend
   Farben lassen sich im Theme über diese Variablen überschreiben. */

.hsc-tipp-form,
.hsc-tipp-table {
	--hsc-tipp-gold: #c8a02c;
	--hsc-tipp-dark: #111111;
	--hsc-tipp-line: #e2e2e2;
	--hsc-tipp-soft: #f7f7f7;
}

.hsc-tipp-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.2em;
}

.hsc-tipp-table th,
.hsc-tipp-table td {
	padding: 0.6em 0.7em;
	border-bottom: 1px solid var(--hsc-tipp-line);
	text-align: left;
	vertical-align: middle;
}

.hsc-tipp-table thead th {
	background: var(--hsc-tipp-dark);
	color: #ffffff;
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hsc-tipp-meta {
	display: block;
	font-size: 0.8em;
	color: #666666;
	margin-bottom: 0.15em;
}

.hsc-tipp-pairing {
	display: block;
	font-weight: 600;
}

.hsc-tipp-pairing em {
	font-style: normal;
	font-weight: 400;
	color: #666666;
	padding: 0 0.3em;
}

.hsc-tipp-col-tip {
	white-space: nowrap;
	text-align: right;
}

.hsc-tipp-col-tip input[type="number"] {
	width: 3.6em;
	padding: 0.35em;
	text-align: center;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
}

.hsc-tipp-col-tip input[type="number"]:focus {
	border-color: var(--hsc-tipp-gold);
	outline: 2px solid rgba(200, 160, 44, 0.35);
}

.hsc-tipp-sep {
	padding: 0 0.25em;
	font-weight: 700;
}

.hsc-tipp-button {
	background: var(--hsc-tipp-dark);
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	padding: 0.7em 1.4em;
	font-weight: 600;
	cursor: pointer;
}

.hsc-tipp-button:hover,
.hsc-tipp-button:focus {
	background: var(--hsc-tipp-gold);
	color: var(--hsc-tipp-dark);
}

.hsc-tipp-rules {
	font-size: 0.85em;
	color: #666666;
}

.hsc-tipp-notice {
	padding: 0.8em 1em;
	background: var(--hsc-tipp-soft, #f7f7f7);
	border-left: 4px solid #999999;
	margin: 0 0 1.2em;
}

.hsc-tipp-notice--ok {
	border-left-color: var(--hsc-tipp-gold, #c8a02c);
}

.hsc-tipp-ranking td:first-child {
	width: 3em;
	font-weight: 700;
}

.hsc-tipp-me {
	background: rgba(200, 160, 44, 0.14);
}

.hsc-tipp-questions {
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
}

.hsc-tipp-question {
	padding: 0.8em 0;
	border-bottom: 1px solid var(--hsc-tipp-line, #e2e2e2);
}

.hsc-tipp-question-text {
	display: block;
	font-weight: 600;
}

.hsc-tipp-question input[type="text"],
.hsc-tipp-question select {
	margin-top: 0.4em;
	padding: 0.4em;
	min-width: 12em;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
}

.hsc-tipp-answer-closed {
	display: block;
	margin-top: 0.3em;
	font-style: italic;
	color: #666666;
}

@media (max-width: 600px) {
	/* Tippabgabe: Begegnung und Eingabe untereinander. */
	.hsc-tipp-form .hsc-tipp-table thead {
		display: none;
	}

	.hsc-tipp-form .hsc-tipp-table tr {
		display: block;
		border-bottom: 1px solid var(--hsc-tipp-line, #e2e2e2);
		padding: 0.5em 0;
	}

	.hsc-tipp-form .hsc-tipp-table td {
		display: block;
		border: 0;
		padding: 0.25em 0;
	}

	.hsc-tipp-form .hsc-tipp-col-tip {
		text-align: left;
	}

	/* Rangliste bleibt eine Tabelle und darf seitlich scrollen. */
	.hsc-tipp-ranking {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}