:root { --font: "Bitter", Georgia, serif; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--clr-background); color: var(--clr-text); }
body {
	font: 300 18px/1.55 var(--font);
	padding: calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
	-webkit-tap-highlight-color: transparent;
}
.kzp { width: min(100%, 640px); margin: 0 auto; }
.hidden { display: none !important; }
strong { font-weight: 500; }

/* Kopf */
.kzp-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid currentColor; margin-bottom: 2rem; }
.kzp-titel, .kzp-klein, .word-label, .session-info, .player-badge, .kzp-menu-text {
	font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.kzp-titel { margin: 0; }
.kzp-klein { margin: 1.5rem 0 0.5rem; }
.kzp-gross { font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 300; line-height: 1.05; margin: 0 0 1.25rem; letter-spacing: -0.01em; }
.kzp-lead { font-size: 1.15rem; margin: 0 0 2rem; }
.kzp-hinweis { font-style: italic; margin-top: 1.5rem; }

/* Start */
.kzp-menu { border-top: 1px solid currentColor; }
.kzp-menu-punkt {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%;
	padding: 1.1rem 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit;
	font: inherit; text-align: left; cursor: pointer;
}
.kzp-menu-titel { font-size: 1.6rem; font-weight: 400; }
.kzp-menu-punkt:hover .kzp-menu-titel { color: var(--clr-primary); }

.kzp-zurueck, .kzp-link { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.kzp-zurueck { font-size: 0.9rem; margin-bottom: 1.5rem; }
.kzp-link { text-decoration: underline; text-underline-offset: 0.2em; font-size: 0.9rem; }
.kzp-zurueck:hover, .kzp-link:hover { color: var(--clr-primary); }

/* Regeln */
.kzp-text h2 { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin: 2rem 0 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--clr-gray-border); }
.kzp-text p, .kzp-text li { margin: 0 0 0.4rem; }
.kzp-text ol, .kzp-text ul { padding-left: 1.2rem; margin: 0; }
.kzp-beispiel .kzp-klein { margin: 0 0.4rem 0 0; }
.kzp-beispiel .kzp-klein + .kzp-klein, .kzp-beispiel .kzp-klein:not(:first-child) { margin-left: 1rem; }
.kzp-satz { font-size: 1.25rem; }
.kzp-satz strong { color: var(--clr-primary); }

/* Formulare */
.input, .select {
	display: block; width: 100%; margin: 0 0 0.75rem;
	font: 300 1.2rem var(--font); color: var(--clr-text); background: transparent;
	border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0.55rem 0;
}
.input::placeholder { color: inherit; opacity: 0.45; }
.select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.kzp-zeile { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.kzp-zeile .input { flex: 1 1 12rem; margin: 0; }
.kzp-block { margin-top: 2rem; }
.kzp-abschnitt { display: flex; justify-content: space-between; align-items: baseline; }

.kzp :is(.button-primary, .button-neutral) { margin: 0.5rem 0 0; font-size: 1.05rem; }


.share-link { font-size: 0.95rem; overflow-wrap: anywhere; padding: 0.5rem 0; border-bottom: 1px solid currentColor; }

/* Spiel */
.alert { padding: 0.5rem 0; border-bottom: 1px solid var(--clr-gray-border); margin-bottom: 1.5rem; font-size: 0.95rem; }
.status-indicator { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-right: 0.5rem; border: 1px solid currentColor; vertical-align: 0.05em; }
.status-indicator.active { background: var(--clr-primary); border-color: var(--clr-primary); }

.words-container { display: grid; gap: 1.5rem; }
.word-card { padding-top: 0.5rem; border-top: 1px solid currentColor; }
.word-display { font-size: clamp(2.6rem, 12vw, 4.5rem); font-weight: 300; line-height: 1.1; overflow-wrap: anywhere; }
.word-card-geheim .word-display { color: var(--clr-primary); font-style: italic; }
.start-player-info { margin-top: 1.5rem; }
.start-player-name { font-size: 1.5rem; font-weight: 400; }

.timer { font-size: clamp(3rem, 16vw, 6rem); font-weight: 300; font-variant-numeric: tabular-nums; margin: 1.5rem 0; line-height: 1; }
.timer.warning { color: var(--clr-primary); }
.timer.critical, .timer.time-up-alert { color: var(--clr-error); }
body.time-up-alert .timer { animation: kzp-blinken 0.5s steps(2) infinite; }
@keyframes kzp-blinken { 50% { opacity: 0.2; } }

.players-list { margin-top: 2.5rem; }
.player { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--clr-gray-border); }
.player-name { font-size: 1.1rem; }
.player.seeker .player-name { font-style: italic; }
.player-badge { background: none !important; color: var(--clr-primary); }

.toast { bottom: calc(16px + env(safe-area-inset-bottom)); white-space: pre-line; }

/* Ein Handy */
.kzp .button-gross { width: 100%; }
#reihum-name { margin-bottom: 2rem; overflow-wrap: anywhere; }
#reihum-offen .word-card { margin-bottom: 1.5rem; }
.reihum-balken { height: 3px; background: var(--clr-gray-border); margin-top: 2rem; }
.reihum-balken span { display: block; height: 100%; background: var(--clr-primary); transform-origin: left; }
#lokal-namen .input { margin-bottom: 0.4rem; }
.kzp-leise { opacity: 0.55; text-transform: none; letter-spacing: 0; font-weight: 300; font-size: 0.8rem; }

/* Leitung */
.einladen { display: flex; gap: 1.25rem; align-items: flex-start; }
.einladen > div { flex: 1; min-width: 0; }
.einladen-qr { width: 140px; height: 140px; background: #fff; padding: 6px; flex: 0 0 auto; }
.einladen-code { font-size: 2.4rem; font-weight: 400; letter-spacing: 0.12em; margin: 0 0 0.25rem; line-height: 1; }
.input-code { text-transform: uppercase; letter-spacing: 0.12em; }
.player.rolle { justify-content: space-between; align-items: center; }
.player.rolle .player-name { min-width: 0; overflow-wrap: anywhere; }
.rolle-knoepfe { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.rolle-weg { border: 0; background: none; color: inherit; font-size: 1.3rem; line-height: 1; padding: 0.2rem 0.3rem; cursor: pointer; opacity: 0.5; }
.rolle-weg:hover { opacity: 1; color: var(--clr-error); }
.player-badge + .player-badge { margin-left: 0.2rem; }
@media (max-width: 420px) {
	.einladen { flex-direction: column; }
	.einladen-qr { width: 180px; height: 180px; }
}
button { touch-action: manipulation; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }