/**
 * Tatakte — Öffentliche CSS-Komponenten
 *
 * Wird auf Seiten geladen, die Shortcodes nutzen
 * ([tatakte_leaderboard], [tatakte_profile]). Bewusst eigenständig vom
 * Player-CSS, damit die Optik auch auf normalen Theme-Seiten gut aussieht.
 */

/* CSS-Variablen — nutzen das Tatakte-Akten-Design */
.tatakte-leaderboard,
.tatakte-profile {
	--tk-accent: #8B0000;
	--tk-accent-dark: #6B0000;
	--tk-dark: #2C3E50;
	--tk-darker: #1A1A1A;
	--tk-beige: #F0EDE5;
	--tk-paper: #FAFAF7;
	--tk-ink: #1A1A1A;
	--tk-muted: #6B7280;
	--tk-border: #D1CFC8;
	--tk-border-light: #E8E5DD;
	--tk-typewriter: 'Special Elite', 'Courier New', Courier, monospace;
	color: var(--tk-ink);
	max-width: 900px;
	margin: 1.5rem 0;
}

/* ========================
   LEADERBOARD
   ======================== */
.tatakte-leaderboard-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--tk-paper);
	border: 1px solid var(--tk-border-light);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.tatakte-leaderboard-table thead {
	background: var(--tk-darker);
	color: var(--tk-paper);
}
.tatakte-leaderboard-table th {
	padding: 0.8rem 0.9rem;
	text-align: left;
	font-family: var(--tk-typewriter);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-bottom: 3px solid var(--tk-accent);
}
.tatakte-leaderboard-table td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--tk-border-light);
	vertical-align: middle;
}
.tatakte-leaderboard-table tbody tr:hover {
	background: var(--tk-beige);
}
.tatakte-leaderboard-table tbody tr:last-child td {
	border-bottom: 0;
}

.tatakte-rank {
	font-family: var(--tk-typewriter);
	color: var(--tk-accent);
	font-weight: bold;
	font-size: 1.05rem;
	min-width: 50px;
}

.tatakte-player {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.tatakte-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--tk-border);
}
.tatakte-avatar-placeholder {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tk-beige);
	color: var(--tk-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tk-typewriter);
	font-weight: bold;
	font-size: 0.8rem;
	border: 1px solid var(--tk-border);
}
.tatakte-level-badge {
	display: inline-block;
	background: var(--tk-beige);
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.8rem;
	color: var(--tk-darker);
}
.tatakte-empty {
	text-align: center;
	color: var(--tk-muted);
	padding: 1.5rem;
	font-style: italic;
}

/* ========================
   PUBLIC PROFILE
   ======================== */
.tatakte-profile {
	background: var(--tk-paper);
	border: 1px solid var(--tk-border-light);
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.tatakte-profile-header {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	border-bottom: 2px solid var(--tk-border-light);
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
}
.tatakte-avatar-large {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--tk-accent);
	font-size: 1.5rem;
}
.tatakte-profile-name {
	margin: 0 0 0.25rem;
	font-family: var(--tk-typewriter);
	font-size: 1.5rem;
	color: var(--tk-darker);
}
.tatakte-profile-rank {
	color: var(--tk-accent);
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.4rem;
}
.tatakte-profile-stats {
	display: flex;
	gap: 1rem;
	font-size: 0.9rem;
	color: var(--tk-muted);
}
.tatakte-profile-stats strong {
	color: var(--tk-darker);
}
.tatakte-profile-section-title {
	font-family: var(--tk-typewriter);
	font-size: 1.1rem;
	margin: 0 0 0.75rem;
	color: var(--tk-darker);
}

.tatakte-played-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.tatakte-played-item {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	background: var(--tk-paper);
	border: 1px solid var(--tk-border-light);
	border-left: 4px solid var(--tk-muted);
	padding: 0.6rem 0.85rem;
	border-radius: 4px;
}
.tatakte-played-item.is-solved {
	border-left-color: #059669;
}
.tatakte-played-item.is-unsolved {
	border-left-color: var(--tk-accent);
}
.tatakte-played-cover {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 3px;
}
.tatakte-played-meta {
	font-size: 0.8rem;
	color: var(--tk-muted);
}

/* Mobile */
@media (max-width: 600px) {
	.tatakte-leaderboard-table th,
	.tatakte-leaderboard-table td {
		padding: 0.5rem 0.4rem;
		font-size: 0.85rem;
	}
	.tatakte-profile-header {
		flex-direction: column;
		text-align: center;
	}
	.tatakte-profile-stats {
		justify-content: center;
	}
}

/* ========================
   SHOP-KATALOG
   ======================== */
.tatakte-shop {
	--tk-accent: #8B0000;
	--tk-darker: #1A1A1A;
	--tk-paper: #FAFAF7;
	--tk-beige: #F0EDE5;
	--tk-muted: #6B7280;
	--tk-border: #D1CFC8;
	--tk-typewriter: 'Special Elite', 'Courier New', Courier, monospace;
	max-width: 1100px;
	margin: 1.5rem 0;
}
.tatakte-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}
.tatakte-shop-card {
	background: var(--tk-paper);
	border: 1px solid #E8E5DD;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
}
.tatakte-shop-card-cover {
	height: 160px;
	background: var(--tk-beige);
	background-size: cover;
	background-position: center;
	border-bottom: 3px solid var(--tk-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tatakte-shop-card-cover-placeholder {
	color: var(--tk-muted);
	font-size: 3rem;
	font-family: var(--tk-typewriter);
}
.tatakte-shop-card-body {
	padding: 1rem 1.25rem 1.25rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.tatakte-shop-card-title {
	font-family: var(--tk-typewriter);
	margin: 0 0 0.5rem;
	color: var(--tk-darker);
	font-size: 1.25rem;
}
.tatakte-shop-card-tags {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin: 0 0 0.75rem;
}
.tatakte-tag {
	font-size: 0.75rem;
	padding: 2px 8px;
	border-radius: 3px;
	background: var(--tk-beige);
	color: var(--tk-darker);
}
.tatakte-tag-price {
	background: var(--tk-accent);
	color: var(--tk-paper);
	font-weight: 600;
}
.tatakte-tag-fsk {
	background: #fef3c7;
	color: #78350f;
}
.tatakte-shop-card-desc {
	color: var(--tk-muted);
	font-size: 0.9rem;
	margin: 0 0 1rem;
	flex: 1;
}
.tatakte-shop-card-actions { margin-top: auto; }
.tatakte-btn-disabled {
	width: 100%;
	padding: 0.7rem 1rem;
	background: #e5e7eb;
	color: #6b7280;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	cursor: not-allowed;
	font-family: inherit;
	font-size: 0.9375rem;
}

/* ========================
   CART / CHECKOUT / THANKS
   ======================== */
.tatakte-shop-header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}
.tatakte-cart-link {
	background: var(--tk-darker);
	color: var(--tk-paper);
	padding: 0.5rem 1rem;
	border-radius: 4px;
	text-decoration: none;
	font-family: var(--tk-typewriter);
	font-size: 0.95rem;
}
.tatakte-cart-link:hover { background: var(--tk-accent); }

.tatakte-btn {
	display: inline-block;
	padding: 0.7rem 1.25rem;
	background: var(--tk-paper);
	color: var(--tk-darker);
	border: 1px solid var(--tk-border);
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: background 0.2s;
}
.tatakte-btn:hover { background: var(--tk-beige); }
.tatakte-btn-primary {
	background: var(--tk-accent);
	color: var(--tk-paper);
	border-color: var(--tk-accent);
}
.tatakte-btn-primary:hover { background: var(--tk-accent-dark, #6B0000); }
.tatakte-btn-block { width: 100%; text-align: center; }
.tatakte-btn-large { padding: 0.95rem 1.5rem; font-size: 1.05rem; }
.tatakte-btn:disabled, .tatakte-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.tatakte-cart-container,
.tatakte-checkout,
.tatakte-thanks {
	--tk-accent: #8B0000;
	--tk-accent-dark: #6B0000;
	--tk-darker: #1A1A1A;
	--tk-paper: #FAFAF7;
	--tk-beige: #F0EDE5;
	--tk-muted: #6B7280;
	--tk-border: #D1CFC8;
	--tk-typewriter: 'Special Elite', 'Courier New', Courier, monospace;
	max-width: 800px;
	margin: 1.5rem auto;
}
.tatakte-cart {
	background: var(--tk-paper);
	border: 1px solid #E8E5DD;
	border-radius: 8px;
	padding: 1.5rem;
}
.tatakte-cart-title {
	font-family: var(--tk-typewriter);
	margin: 0 0 1rem;
	color: var(--tk-darker);
}
.tatakte-cart-items { margin-bottom: 1.25rem; }
.tatakte-cart-item {
	display: grid;
	grid-template-columns: 60px 1fr auto auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--tk-border);
}
.tatakte-cart-item:last-child { border-bottom: 0; }
.tatakte-cart-item-cover {
	width: 60px; height: 60px;
	object-fit: cover;
	border-radius: 4px;
}
.tatakte-cart-item-cover-placeholder {
	width: 60px; height: 60px;
	background: var(--tk-beige);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem; color: var(--tk-muted); border-radius: 4px;
}
.tatakte-cart-item-price {
	font-family: var(--tk-typewriter);
	font-weight: bold;
	color: var(--tk-darker);
}
.tatakte-cart-remove {
	background: transparent; border: 0; color: var(--tk-muted);
	font-size: 1.5rem; cursor: pointer; padding: 0.25rem 0.5rem;
}
.tatakte-cart-remove:hover { color: var(--tk-accent); }

.tatakte-cart-empty { text-align: center; padding: 2rem; }

.tatakte-cart-coupon {
	background: var(--tk-beige);
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}
.tatakte-cart-coupon label {
	font-size: 0.85rem; color: var(--tk-muted);
	display: block; margin-bottom: 0.25rem;
}
.tatakte-cart-coupon-row {
	display: flex; gap: 0.5rem;
}
.tatakte-cart-coupon-row input {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--tk-border);
	border-radius: 4px;
	font-family: monospace;
	text-transform: uppercase;
}
.tatakte-cart-coupon-applied {
	color: #059669;
	font-size: 0.9rem;
	margin-top: 0.5rem;
}
.tatakte-cart-error {
	color: #dc2626;
	font-size: 0.9rem;
	margin-top: 0.5rem;
}

.tatakte-cart-totals {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem 1rem;
	margin: 1rem 0;
	padding: 0.5rem 0;
	border-top: 1px solid var(--tk-border);
}
.tatakte-cart-totals dt { color: var(--tk-muted); }
.tatakte-cart-totals dd { margin: 0; text-align: right; font-family: var(--tk-typewriter); }
.tatakte-cart-totals dt.is-total,
.tatakte-cart-totals dd.is-total {
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--tk-darker);
	border-top: 1px solid var(--tk-border);
	padding-top: 0.5rem;
	margin-top: 0.25rem;
}
.tatakte-cart-totals dt.is-tax,
.tatakte-cart-totals dd.is-tax {
	font-size: 0.8em; color: var(--tk-muted);
}

.tatakte-link {
	background: transparent; border: 0; color: var(--tk-accent);
	cursor: pointer; text-decoration: underline; padding: 0;
	font-size: inherit; font-family: inherit;
}

/* Checkout */
.tatakte-checkout-form {
	background: var(--tk-paper);
	border: 1px solid #E8E5DD;
	border-radius: 8px;
	padding: 1.5rem;
}
.tatakte-checkout-section {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--tk-border);
}
.tatakte-checkout-section:last-of-type { border-bottom: 0; }
.tatakte-checkout-section h3 {
	font-family: var(--tk-typewriter);
	margin: 0 0 1rem;
	color: var(--tk-darker);
	font-size: 1.05rem;
}
.tatakte-form-row { margin-bottom: 0.85rem; }
.tatakte-form-row label {
	display: block;
	color: var(--tk-darker);
	font-size: 0.9rem;
}
.tatakte-form-row input,
.tatakte-form-row textarea,
.tatakte-form-row select {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--tk-border);
	border-radius: 4px;
	font: inherit;
	margin-top: 0.2rem;
	background: #fff;
}
.tatakte-payment-option {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--tk-border);
	border-radius: 4px;
	margin-bottom: 0.5rem;
	cursor: pointer;
	background: #fff;
}
.tatakte-payment-option:has(input:checked) {
	border-color: var(--tk-accent);
	background: var(--tk-beige);
}
.tatakte-payment-option strong { display: block; }
.tatakte-payment-option small {
	display: block;
	color: var(--tk-muted);
	font-size: 0.85rem;
	margin-top: 0.25rem;
}
.tatakte-checkbox {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.4;
}
.tatakte-checkbox input { margin-top: 0.25rem; flex-shrink: 0; }
.tatakte-checkbox a { color: var(--tk-accent); }
.tatakte-checkout-fineprint {
	text-align: center;
	color: var(--tk-muted);
	font-size: 0.8rem;
	margin-top: 0.75rem;
}

.tatakte-notice {
	padding: 1rem 1.25rem;
	border-radius: 4px;
	margin-bottom: 1.25rem;
	background: #f3f4f6;
	border-left: 4px solid #6b7280;
}
.tatakte-notice-warning {
	background: #fef3c7;
	border-left-color: #f59e0b;
	color: #78350f;
}
.tatakte-notice-error {
	background: #fee2e2;
	border-left-color: #dc2626;
	color: #991b1b;
}

@media (max-width: 600px) {
	.tatakte-cart-item {
		grid-template-columns: 50px 1fr auto;
	}
	.tatakte-cart-item-cover, .tatakte-cart-item-cover-placeholder { width: 50px; height: 50px; }
	.tatakte-cart-remove { grid-column: 3; }
	.tatakte-cart-item-price { grid-column: 1 / -1; text-align: right; }
}

/* ===========================================================
   TOP-DETEKTIV:INNEN — Card-Grid Layout (Marketing-Variante)
   =========================================================== */
.tatakte-top-detectives {
	margin: 2rem 0;
}
.tatakte-top-detectives-title {
	text-align: center;
	font-family: var(--tk-typewriter, 'Special Elite', monospace);
	font-size: 2rem;
	margin-bottom: 1.5rem;
	color: var(--tk-accent, #8b1a1a);
}
.tatakte-top-detectives-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}
.tatakte-detective-card {
	position: relative;
	background: var(--tk-paper, #faf8f3);
	border: 1px solid var(--tk-border-light, #e5e2db);
	border-radius: 8px;
	padding: 1.5rem 1rem 1.25rem;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tatakte-detective-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.tatakte-detective-card-top {
	border-color: var(--tk-accent, #8b1a1a);
	border-width: 2px;
	background: linear-gradient(135deg, var(--tk-paper, #faf8f3) 0%, #f5e9d8 100%);
}
.tatakte-detective-rank-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--tk-accent, #8b1a1a);
	color: #fff;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-family: var(--tk-typewriter, monospace);
	font-size: 0.85rem;
	font-weight: bold;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(139,26,26,0.25);
}
.tatakte-detective-card-top .tatakte-detective-rank-badge {
	font-size: 1.1rem;
	background: transparent;
	color: inherit;
	box-shadow: none;
}
.tatakte-detective-avatar-wrap {
	margin: 0.75rem auto 0.75rem;
	width: 64px;
	height: 64px;
}
.tatakte-detective-avatar,
.tatakte-detective-avatar-placeholder {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tk-typewriter, monospace);
	font-weight: bold;
	font-size: 1.5rem;
	color: var(--tk-accent, #8b1a1a);
	background: var(--tk-beige, #f0e8d6);
	border: 2px solid var(--tk-paper, #faf8f3);
	object-fit: cover;
}
.tatakte-detective-name {
	font-family: var(--tk-typewriter, monospace);
	font-size: 1.05rem;
	font-weight: bold;
	margin-bottom: 0.25rem;
	color: #2a2a2a;
}
.tatakte-detective-level {
	font-size: 0.85rem;
	color: var(--tk-muted, #888);
	margin-bottom: 0.75rem;
	font-style: italic;
}
.tatakte-detective-stats {
	display: flex;
	justify-content: center;
	gap: 1rem;
	font-size: 0.85rem;
	color: #555;
}
.tatakte-detective-stats strong {
	color: var(--tk-accent, #8b1a1a);
}

@media (max-width: 480px) {
	.tatakte-top-detectives-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
	.tatakte-detective-card { padding: 1.25rem 0.5rem 1rem; }
	.tatakte-detective-name { font-size: 0.95rem; }
}

/* =============================================================
   LOADER — Body-Overlay (NICHT im Mountpoint, damit position:fixed
   nicht von Mesmerize-Theme-Transforms gebrochen wird)
   ============================================================= */

#tk-loader-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 99999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--tk-paper, #FAFAF7) !important;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace) !important;
	color: var(--tk-ink, #1A1A1A) !important;
	padding: 1.5rem !important;
	margin: 0 !important;
	animation: tk-loader-fade-in 0.3s ease-out;
}

/* v0.9.22: hideLoader() setzt data-hidden — überschreibt display:flex !important.
   Vorher konnte der inline-style "display:none" nicht gegen die !important-Regel
   gewinnen, der Loader blieb endlos sichtbar obwohl JS-Logik korrekt lief. */
#tk-loader-overlay[data-hidden="true"] {
	display: none !important;
}

@keyframes tk-loader-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Notiz-Karte mit Akzent-Strich links, leichter Schatten */
#tk-loader-overlay .tk-loader-page {
	max-width: 520px;
	width: 100%;
	background: #fff;
	border: 1px solid var(--tk-border, #D1CFC8);
	border-left: 4px solid var(--tk-accent, #8B0000);
	padding: 2.25rem 2.5rem;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.06),
		0 12px 28px rgba(0, 0, 0, 0.10);
	animation: tk-page-rise 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	text-align: left;
}

@keyframes tk-page-rise {
	from { opacity: 0; transform: translateY(12px) rotate(-0.5deg); }
	to   { opacity: 1; transform: translateY(0) rotate(0); }
}

#tk-loader-overlay .tk-loader-header {
	font-size: 0.9rem;
	font-weight: bold;
	letter-spacing: 0.3em;
	color: var(--tk-muted, #6B7280);
	text-transform: uppercase;
	margin: 0 0 0.5rem 0;
}

#tk-loader-overlay .tk-loader-divider {
	height: 1px;
	background: repeating-linear-gradient(
		to right,
		var(--tk-border, #D1CFC8) 0,
		var(--tk-border, #D1CFC8) 4px,
		transparent 4px,
		transparent 8px
	);
	margin: 0 0 1.5rem 0;
}

#tk-loader-overlay .tk-loader-main {
	font-size: 1.35rem;
	font-weight: bold;
	letter-spacing: 0.02em;
	line-height: 1.5;
	color: var(--tk-ink, #1A1A1A);
	margin: 0 0 0.6rem 0;
	word-break: break-word;
}

#tk-loader-overlay .tk-loader-prompt {
	color: var(--tk-accent, #8B0000);
	font-weight: bold;
	margin-right: 0.2rem;
}

#tk-loader-overlay .tk-loader-cursor {
	display: inline-block;
	margin-left: 2px;
	color: var(--tk-accent, #8B0000);
	font-weight: bold;
	animation: tk-cursor-blink 1s step-end infinite;
}

@keyframes tk-cursor-blink {
	0%, 50%   { opacity: 1; }
	51%, 100% { opacity: 0; }
}

#tk-loader-overlay .tk-loader-sub {
	font-size: 1rem;
	color: var(--tk-muted, #6B7280);
	font-style: italic;
	margin: 0 0 0 1.6rem;
	line-height: 1.4;
}

/* 5-Punkte-Spinner — eine Welle wandert von links nach rechts */
#tk-loader-overlay .tk-loader-spinner {
	display: flex;
	gap: 0.55rem;
	justify-content: center;
	margin: 1.8rem 0 0 0;
	padding: 0;
}

#tk-loader-overlay .tk-loader-spinner span {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--tk-accent, #8B0000);
	opacity: 0.25;
	animation: tk-spinner-wave 1.4s ease-in-out infinite;
}

#tk-loader-overlay .tk-loader-spinner span:nth-child(1) { animation-delay: 0s; }
#tk-loader-overlay .tk-loader-spinner span:nth-child(2) { animation-delay: 0.15s; }
#tk-loader-overlay .tk-loader-spinner span:nth-child(3) { animation-delay: 0.3s; }
#tk-loader-overlay .tk-loader-spinner span:nth-child(4) { animation-delay: 0.45s; }
#tk-loader-overlay .tk-loader-spinner span:nth-child(5) { animation-delay: 0.6s; }

@keyframes tk-spinner-wave {
	0%, 60%, 100% { opacity: 0.25; transform: scale(1); }
	30%           { opacity: 1; transform: scale(1.4); }
}

/* Atmosphärischer rotierender Spruch unten */
#tk-loader-overlay .tk-loader-flavor {
	margin: 1.6rem 0 0 0;
	padding-top: 1.2rem;
	border-top: 1px dashed var(--tk-border, #D1CFC8);
	font-size: 0.95rem;
	font-style: italic;
	color: var(--tk-muted, #6B7280);
	text-align: center;
	min-height: 1.6em;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

#tk-loader-overlay .tk-loader-flavor.tk-loader-flavor-flip {
	opacity: 0;
	transform: translateY(-6px) rotate(-1deg);
}

/* Mobile */
@media (max-width: 640px) {
	#tk-loader-overlay .tk-loader-page  { padding: 1.6rem 1.5rem; }
	#tk-loader-overlay .tk-loader-main  { font-size: 1.1rem; }
	#tk-loader-overlay .tk-loader-sub   { font-size: 0.92rem; margin-left: 1.2rem; }
	#tk-loader-overlay .tk-loader-flavor { font-size: 0.88rem; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	#tk-loader-overlay,
	#tk-loader-overlay .tk-loader-page,
	#tk-loader-overlay .tk-loader-cursor,
	#tk-loader-overlay .tk-loader-spinner span,
	#tk-loader-overlay .tk-loader-flavor {
		animation: none !important;
		transition: none !important;
	}
	#tk-loader-overlay .tk-loader-spinner span { opacity: 1; }
}

/* Hub-Top-Nav: "← Hauptseite" Link sichtbar lassen, links oben */
.tk-hub-nav {
	margin-bottom: 0.85rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--tk-border-light, #E8E5DD);
}
.tk-hub-nav .tk-btn-sm {
	font-size: 0.85rem;
	padding: 0.35rem 0.7rem;
}

/* =============================================================
   GUEST-JOIN-MODAL — Body-Overlay, Mobile-First
   Höchste CSS-Spezifität via #ID + !important damit Mesmerize PRO
   und andere Themes nicht reinpfuschen.
   ============================================================= */

#tk-guest-modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 100000 !important;
	display: none;
	align-items: flex-start !important;
	justify-content: center !important;
	background: var(--tk-paper, #FAFAF7) !important;
	overflow-y: auto !important;
	padding: 1.5rem 1rem !important;
	margin: 0 !important;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace) !important;
	color: var(--tk-ink, #1A1A1A) !important;
	box-sizing: border-box !important;
}

#tk-guest-modal-overlay .tk-gm {
	background: #fff !important;
	width: 100% !important;
	max-width: 720px !important;
	padding: 1.75rem 1.5rem !important;
	border: 1px solid var(--tk-border, #D1CFC8) !important;
	border-left: 4px solid var(--tk-accent, #8B0000) !important;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.06),
		0 12px 32px rgba(0, 0, 0, 0.10) !important;
	margin: 1rem auto !important;
	box-sizing: border-box !important;
}

#tk-guest-modal-overlay .tk-gm-back {
	display: inline-block !important;
	background: none !important;
	border: none !important;
	color: var(--tk-muted, #6B7280) !important;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	cursor: pointer !important;
	padding: 0.4rem 0.7rem !important;
	margin: 0 0 0.6rem -0.7rem !important;
	border-radius: 3px !important;
	text-decoration: none !important;
	min-height: 44px !important; /* Tap-Target */
}
#tk-guest-modal-overlay .tk-gm-back:hover,
#tk-guest-modal-overlay .tk-gm-back:focus {
	background: var(--tk-paper, #FAFAF7) !important;
	color: var(--tk-accent, #8B0000) !important;
	outline: none !important;
}

#tk-guest-modal-overlay .tk-gm-badge {
	display: inline-block !important;
	background: var(--tk-accent, #8B0000) !important;
	color: #fff !important;
	padding: 0.4rem 0.85rem !important;
	font-size: 0.85rem !important;
	font-weight: bold !important;
	letter-spacing: 0.04em !important;
	margin-bottom: 0.85rem !important;
	border-radius: 0 !important;
}

#tk-guest-modal-overlay .tk-gm-title {
	margin: 0 0 0.6rem 0 !important;
	font-size: 1.45rem !important;
	line-height: 1.25 !important;
	color: var(--tk-ink, #1A1A1A) !important;
	font-family: inherit !important;
	font-weight: bold !important;
}

#tk-guest-modal-overlay .tk-gm-intro {
	color: var(--tk-muted, #6B7280) !important;
	line-height: 1.5 !important;
	margin: 0 0 1.5rem 0 !important;
	font-size: 0.98rem !important;
	font-family: inherit !important;
}

/* GRID — auf Mobile (<700px): einspaltig, beide Karten gleich gross */
#tk-guest-modal-overlay .tk-gm-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 0.85rem !important;
}

@media (min-width: 700px) {
	#tk-guest-modal-overlay .tk-gm-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 1rem !important;
	}
}

/* CARDS — IDENTISCH gestylt (nicht <a> vs <button> Unterschied!) */
#tk-guest-modal-overlay .tk-gm-card {
	display: flex !important;
	flex-direction: column !important;
	background: #fff !important;
	border: 2px solid var(--tk-border, #D1CFC8) !important;
	border-radius: 4px !important;
	padding: 1.25rem 1.1rem 1.1rem !important;
	text-align: left !important;
	font-family: inherit !important;
	color: var(--tk-ink, #1A1A1A) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.18s ease !important;
	min-height: 200px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font-size: 1rem !important;
	margin: 0 !important;
}

#tk-guest-modal-overlay .tk-gm-card:hover,
#tk-guest-modal-overlay .tk-gm-card:focus,
#tk-guest-modal-overlay .tk-gm-card:active {
	border-color: var(--tk-accent, #8B0000) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
	outline: none !important;
}

#tk-guest-modal-overlay .tk-gm-card-account:hover,
#tk-guest-modal-overlay .tk-gm-card-account:focus { background: #FFF5F5 !important; }
#tk-guest-modal-overlay .tk-gm-card-guest:hover,
#tk-guest-modal-overlay .tk-gm-card-guest:focus   { background: #FAFAF7 !important; }

#tk-guest-modal-overlay .tk-gm-card-icon {
	font-size: 2.4rem !important;
	line-height: 1 !important;
	margin-bottom: 0.6rem !important;
}

#tk-guest-modal-overlay .tk-gm-card-title {
	font-size: 1.2rem !important;
	font-weight: bold !important;
	margin: 0 0 0.7rem 0 !important;
	color: var(--tk-ink, #1A1A1A) !important;
	line-height: 1.2 !important;
}

#tk-guest-modal-overlay .tk-gm-card-bullets {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 1rem 0 !important;
	flex: 1 !important;
}

#tk-guest-modal-overlay .tk-gm-card-bullets li {
	font-size: 0.9rem !important;
	color: var(--tk-muted, #6B7280) !important;
	padding: 0.2rem 0 0.2rem 1.3rem !important;
	position: relative !important;
	line-height: 1.45 !important;
	margin: 0 !important;
	list-style: none !important;
	background: transparent !important;
}

#tk-guest-modal-overlay .tk-gm-card-bullets li::before {
	content: '✓' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.2rem !important;
	color: var(--tk-accent, #8B0000) !important;
	font-weight: bold !important;
	font-size: 0.95rem !important;
}

#tk-guest-modal-overlay .tk-gm-card-cta {
	font-size: 0.92rem !important;
	font-weight: bold !important;
	color: var(--tk-accent, #8B0000) !important;
	letter-spacing: 0.02em !important;
	margin-top: auto !important;
}

/* Form (Schritt 2) */
#tk-guest-modal-overlay .tk-gm-form {
	margin: 1rem 0 1.25rem !important;
}

#tk-guest-modal-overlay .tk-gm-form input {
	width: 100% !important;
	padding: 0.95rem 1rem !important;
	font-size: 1.1rem !important;
	font-family: inherit !important;
	border: 2px solid var(--tk-border, #D1CFC8) !important;
	background: var(--tk-paper, #FAFAF7) !important;
	color: var(--tk-ink, #1A1A1A) !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
#tk-guest-modal-overlay .tk-gm-form input:focus {
	outline: none !important;
	border-color: var(--tk-accent, #8B0000) !important;
}
#tk-guest-modal-overlay .tk-gm-form input.tk-input-error {
	animation: tk-shake 0.5s !important;
	border-color: var(--tk-accent, #8B0000) !important;
}

#tk-guest-modal-overlay .tk-gm-error {
	color: var(--tk-accent, #8B0000) !important;
	font-size: 0.88rem !important;
	margin-top: 0.5rem !important;
	min-height: 1.2em !important;
}

#tk-guest-modal-overlay .tk-gm-submit {
	display: block !important;
	width: 100% !important;
	background: var(--tk-accent, #8B0000) !important;
	color: #fff !important;
	border: none !important;
	padding: 1rem 1.25rem !important;
	font-size: 1.05rem !important;
	font-weight: bold !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: background 0.15s !important;
	min-height: 50px !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 0 !important;
}
#tk-guest-modal-overlay .tk-gm-submit:hover,
#tk-guest-modal-overlay .tk-gm-submit:focus {
	background: var(--tk-accent-dark, #6B0000) !important;
	outline: none !important;
}
#tk-guest-modal-overlay .tk-gm-submit:disabled {
	opacity: 0.6 !important;
	cursor: wait !important;
}

@keyframes tk-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

/* =============================================================
   LOBBY-CODE-BOX — Großer prominenter Beitritts-Code (wieder hinzu)
   ============================================================= */

.tk-mp-code-box {
	background: var(--tk-paper, #FAFAF7);
	border: 2px dashed var(--tk-accent, #8B0000);
	padding: 2rem 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.tk-mp-code-label {
	font-size: 0.85rem;
	color: var(--tk-muted, #6B7280);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
	font-family: var(--tk-typewriter, monospace);
	font-weight: bold;
}

.tk-mp-code-display {
	font-family: var(--tk-typewriter, 'Courier New', monospace);
	font-size: clamp(2.2rem, 7vw, 3.6rem);
	letter-spacing: 0.18em;
	color: var(--tk-accent, #8B0000);
	font-weight: bold;
	line-height: 1.1;
	margin: 0.3rem 0 0.2rem;
	text-shadow:
		1px 1px 0 rgba(139, 0, 0, 0.08),
		2px 2px 0 rgba(139, 0, 0, 0.04);
	user-select: all;
}

.tk-mp-code-hint {
	color: var(--tk-muted, #6B7280);
	font-size: 0.92rem;
	line-height: 1.5;
	max-width: 560px;
	margin: 1rem auto 1.25rem;
}

.tk-mp-code-actions {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	flex-wrap: wrap;
}

.tk-mp-code-actions .tk-btn-sm {
	font-size: 0.9rem;
}

/* QR-Code in der Lobby */
.tk-qr-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1.25rem auto 1rem;
	padding: 0.6rem;
	background: #fff;
	border: 1px solid var(--tk-border-light, #E8E5DD);
	width: fit-content;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.tk-qr-container svg { display: block; }
.tk-qr-fallback {
	font-family: var(--tk-typewriter, monospace);
	font-size: 0.75rem;
	color: var(--tk-muted);
	word-break: break-all;
	max-width: 240px;
	padding: 1rem;
	text-align: center;
}

/* =============================================================
   v0.9.14 — MOBILE-LOBBY OPTIMIERUNGEN
   Tap-Targets, Spacing, Player-Liste, Übersichtlichkeit auf Smartphones
   ============================================================= */

@media (max-width: 600px) {
	.tk-mp-code-box {
		padding: 1.25rem 0.85rem;
		margin-bottom: 1rem;
	}
	.tk-mp-code-display {
		font-size: clamp(1.8rem, 9vw, 2.8rem);
		letter-spacing: 0.12em;
	}
	.tk-mp-code-hint {
		font-size: 0.88rem;
		margin: 0.75rem auto 1rem;
	}
	.tk-mp-code-actions {
		flex-direction: column;
		gap: 0.5rem;
	}
	.tk-mp-code-actions .tk-btn-sm {
		width: 100%;
		min-height: 48px; /* Tap-Target */
		font-size: 0.95rem;
	}

	/* QR auf Mobile etwas kleiner damit alles auf den Screen passt */
	.tk-qr-container {
		margin: 1rem auto 0.75rem;
	}
	.tk-qr-container svg {
		width: 200px !important;
		height: 200px !important;
	}
}

/* Player-Liste in der Lobby — übersichtlicher auf allen Größen */
.tk-mp-players {
	margin-top: 1rem;
}

.tk-mp-players h2,
.tk-lobby h2 {
	font-size: 1.05rem;
	margin: 0 0 0.6rem 0;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--tk-border-light, #E8E5DD);
	color: var(--tk-accent, #8B0000);
	letter-spacing: 0.04em;
}

.tk-mp-player-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.85rem;
	background: #fff;
	border: 1px solid var(--tk-border-light, #E8E5DD);
	margin-bottom: 0.4rem;
	border-radius: 4px;
	min-height: 56px; /* Tap-Target */
}

@media (max-width: 600px) {
	.tk-mp-player-row {
		padding: 0.55rem 0.7rem;
		gap: 0.6rem;
	}
}

/* "Spiel jetzt starten" - großer prominenter Button auf Mobile */
.tk-mp-start-section {
	text-align: center;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--tk-border, #D1CFC8);
}
.tk-mp-start-section .tk-btn-primary {
	min-height: 56px;
	padding: 1rem 2rem;
	font-size: 1.05rem;
}
@media (max-width: 600px) {
	.tk-mp-start-section .tk-btn-primary {
		width: 100%;
	}
}

/* Gast-Toggle Box mobil-freundlich */
.tk-mp-allow-guests-box {
	background: var(--tk-paper, #FAFAF7);
	padding: 0.85rem 1rem;
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 4px;
	margin: 1rem 0;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.tk-mp-allow-guests-box label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
	flex: 1;
	font-size: 0.95rem;
}
.tk-mp-allow-guests-box input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

/* Topbar / "Wartelobby · Falltitel" */
.tk-topbar {
	font-size: 0.9rem;
}
@media (max-width: 600px) {
	.tk-topbar {
		font-size: 0.85rem;
		padding: 0.5rem 0.75rem;
	}
}

/* =============================================================
   v0.9.16 — GAST-LANDING (in tk-hub Wrapper)
   Hochspezifische Selektoren damit Mesmerize PRO nicht überschreibt
   ============================================================= */

.tk-hub.tk-gl-wrap {
	max-width: 1100px !important;
	margin: 0 auto !important;
	padding: 2rem 1.25rem 4rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.tk-hub .tk-glh {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 1.5rem !important;
	margin-bottom: 2rem !important;
}

@media (max-width: 700px) {
	.tk-hub .tk-glh {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}
}

.tk-hub .tk-glh-card {
	background: #fff !important;
	border: 2px solid var(--tk-border, #D1CFC8) !important;
	border-radius: 4px !important;
	padding: 1.75rem 1.5rem !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
	box-sizing: border-box !important;
}

.tk-hub .tk-glh-join {
	border-left: 4px solid var(--tk-accent, #8B0000) !important;
}

.tk-hub .tk-glh-account {
	background: var(--tk-paper, #FAFAF7) !important;
}

.tk-hub .tk-glh-icon {
	font-size: 2.5rem !important;
	line-height: 1 !important;
	margin-bottom: 0.5rem !important;
}

.tk-hub .tk-glh-card h2 {
	margin: 0 0 0.5rem 0 !important;
	font-size: 1.35rem !important;
	color: var(--tk-ink, #1A1A1A) !important;
	border: none !important;
	padding: 0 !important;
	font-family: var(--tk-typewriter, 'Special Elite', monospace) !important;
}

.tk-hub .tk-glh-sub {
	color: var(--tk-muted, #6B7280) !important;
	font-size: 0.95rem !important;
	line-height: 1.5 !important;
	margin: 0 0 1.25rem 0 !important;
}

.tk-hub .tk-glh-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6rem !important;
	margin-top: auto !important;
}

.tk-hub .tk-glh-code-input {
	width: 100% !important;
	padding: 1rem 1rem !important;
	font-size: 1.3rem !important;
	font-family: var(--tk-typewriter, monospace) !important;
	letter-spacing: 0.15em !important;
	text-align: center !important;
	text-transform: uppercase !important;
	border: 2px solid var(--tk-border, #D1CFC8) !important;
	background: var(--tk-paper, #FAFAF7) !important;
	color: var(--tk-accent, #8B0000) !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
}

.tk-hub .tk-glh-code-input:focus {
	outline: none !important;
	border-color: var(--tk-accent, #8B0000) !important;
}

.tk-hub .tk-glh-code-input.tk-input-error {
	animation: tk-shake 0.5s !important;
	border-color: var(--tk-accent, #8B0000) !important;
}

.tk-hub .tk-glh-error {
	color: var(--tk-accent, #8B0000) !important;
	font-size: 0.88rem !important;
	min-height: 1.2em !important;
	margin: 0.4rem 0 0 0 !important;
	text-align: center !important;
}

.tk-hub .tk-glh-bullets {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 1.25rem 0 !important;
	flex: 1 !important;
}

.tk-hub .tk-glh-bullets li {
	padding: 0.4rem 0 0.4rem 1.5rem !important;
	position: relative !important;
	font-size: 0.95rem !important;
	color: var(--tk-ink, #1A1A1A) !important;
	line-height: 1.45 !important;
	background: transparent !important;
	margin: 0 !important;
	list-style: none !important;
}

.tk-hub .tk-glh-bullets li::before {
	content: '✓' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.4rem !important;
	color: var(--tk-accent, #8B0000) !important;
	font-weight: bold !important;
	font-size: 1rem !important;
}

/* Katalog-Vorschau */
.tk-hub .tk-gl-preview {
	margin-top: 2rem !important;
}

.tk-hub .tk-gl-preview h3 {
	font-size: 1.1rem !important;
	color: var(--tk-muted, #6B7280) !important;
	margin: 0 0 1rem 0 !important;
	text-align: center !important;
	border: none !important;
	padding: 0 !important;
	font-family: var(--tk-typewriter, monospace) !important;
}

.tk-hub .tk-gl-preview-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 1rem !important;
}

.tk-hub .tk-gl-preview-card {
	background: #fff !important;
	border: 1px solid var(--tk-border, #D1CFC8) !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
}

.tk-hub .tk-gl-preview-img {
	width: 100% !important;
	height: 140px !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: var(--tk-paper, #FAFAF7) !important;
}

.tk-hub .tk-gl-preview-body {
	padding: 0.85rem 0.9rem !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.4rem !important;
	flex: 1 !important;
}

.tk-hub .tk-gl-preview-meta {
	font-size: 0.8rem !important;
	color: var(--tk-muted, #6B7280) !important;
	margin-bottom: 0.4rem !important;
}

.tk-hub .tk-gl-preview-card .tk-btn {
	margin-top: auto !important;
	align-self: flex-start !important;
}

/* =============================================================
   v0.9.16 — DETAIL-MODAL (mit hoher Spezifität)
   ============================================================= */

#tk-detail-modal-overlay {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	z-index: 100001 !important;
	display: none;
	align-items: flex-start !important;
	justify-content: center !important;
	background: rgba(0, 0, 0, 0.6) !important;
	overflow-y: auto !important;
	padding: 1.5rem 1rem !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

#tk-detail-modal-overlay .tk-dm {
	position: relative !important;
	background: #fff !important;
	max-width: 720px !important;
	width: 100% !important;
	margin: 1rem auto !important;
	overflow: hidden !important;
	border-radius: 4px !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
	box-sizing: border-box !important;
}

#tk-detail-modal-overlay .tk-dm-close {
	position: absolute !important;
	top: 0.5rem !important;
	right: 0.5rem !important;
	width: 40px !important;
	height: 40px !important;
	border: none !important;
	background: rgba(255, 255, 255, 0.92) !important;
	font-size: 1.6rem !important;
	cursor: pointer !important;
	border-radius: 50% !important;
	z-index: 2 !important;
	color: var(--tk-ink, #1A1A1A) !important;
	line-height: 1 !important;
	font-family: inherit !important;
	padding: 0 !important;
}

#tk-detail-modal-overlay .tk-dm-img {
	width: 100% !important;
	height: 280px !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: var(--tk-paper, #FAFAF7) !important;
}

@media (max-width: 600px) {
	#tk-detail-modal-overlay .tk-dm-img { height: 200px !important; }
}

#tk-detail-modal-overlay .tk-dm-body {
	padding: 1.5rem !important;
}

#tk-detail-modal-overlay .tk-dm-body h2 {
	margin: 0 0 0.75rem 0 !important;
	font-size: 1.5rem !important;
	border: none !important;
	padding: 0 !important;
}

#tk-detail-modal-overlay .tk-dm-meta {
	display: flex !important;
	gap: 0.4rem !important;
	flex-wrap: wrap !important;
	margin-bottom: 1rem !important;
}

#tk-detail-modal-overlay .tk-dm-desc {
	color: var(--tk-ink, #1A1A1A) !important;
	line-height: 1.6 !important;
	margin-bottom: 1.5rem !important;
	white-space: pre-wrap !important;
}

#tk-detail-modal-overlay .tk-dm-actions {
	border-top: 1px solid var(--tk-border-light, #E8E5DD) !important;
	padding-top: 1rem !important;
	display: flex !important;
	gap: 0.6rem !important;
	flex-wrap: wrap !important;
}

/* =============================================================
   v0.9.16 — DSGVO-CONSENT-LIST
   ============================================================= */

#tk-guest-modal-overlay .tk-gm-consent-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.55rem !important;
	margin: 1rem 0 1.25rem !important;
	padding: 0 !important;
	list-style: none !important;
}

#tk-guest-modal-overlay .tk-gm-consent-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.7rem !important;
	padding: 0.7rem 0.85rem !important;
	background: var(--tk-paper, #FAFAF7) !important;
	border: 1px solid var(--tk-border-light, #E8E5DD) !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	min-height: 48px !important;
	font-size: 0.95rem !important;
	font-family: inherit !important;
	color: var(--tk-ink, #1A1A1A) !important;
	margin: 0 !important;
}

#tk-guest-modal-overlay .tk-gm-consent-item input[type="checkbox"] {
	width: 22px !important;
	height: 22px !important;
	margin: 0.1rem 0 0 0 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
}

#tk-guest-modal-overlay .tk-gm-consent-item a {
	color: var(--tk-accent, #8B0000) !important;
	text-decoration: underline !important;
}

/* =============================================================
   v0.9.18 — GÄSTE-ERLAUBNIS-TOGGLE in Lobby (Host-Ansicht)
   ============================================================= */

.tk-mp-allow-guests-box {
	background: var(--tk-paper, #FAFAF7) !important;
	border: 1px solid var(--tk-border-light, #E8E5DD) !important;
	border-left: 3px solid var(--tk-accent, #8B0000) !important;
	border-radius: 4px !important;
	padding: 0.85rem 1rem !important;
	margin: 1rem 0 1.5rem !important;
}

.tk-mp-allow-guests-box label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.75rem !important;
	cursor: pointer !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	font-family: inherit !important;
	color: var(--tk-ink, #1A1A1A) !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
}

.tk-mp-allow-guests-box label input[type="checkbox"] {
	width: 22px !important;
	height: 22px !important;
	margin: 0.05rem 0 0 0 !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
	accent-color: var(--tk-accent, #8B0000) !important;
}

.tk-mp-allow-guests-box label > span {
	flex: 1 !important;
}

.tk-mp-allow-guests-box label strong {
	font-weight: 600 !important;
	color: var(--tk-ink, #1A1A1A) !important;
	display: block !important;
	margin-bottom: 0.15rem !important;
}

/* =============================================================
   v0.9.24 — APP-TOPBAR (sticky, global)
   Drei Slots: Logo links, Discord mittig, Account rechts.
   Mobile-First, höchste Selektor-Spezifität via #tatakte-game-app damit
   Mesmerize / Theme-CSS nicht reinpfuscht.
   ============================================================= */
:root {
	--tk-app-topbar-h: 56px;
}
@media (max-width: 700px) {
	:root { --tk-app-topbar-h: 50px; }
}

#tatakte-game-app .tk-app-topbar {
	position: sticky;
	top: 0;
	z-index: 9000;
	background: var(--tk-darker, #0A0A0A);
	color: var(--tk-paper, #FAFAF7);
	border-bottom: 2px solid var(--tk-accent, #8B0000);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	width: 100%;
	min-height: var(--tk-app-topbar-h);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
}

#tatakte-game-app .tk-app-topbar-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.85rem;
	max-width: 1200px;
	margin: 0 auto;
	min-height: var(--tk-app-topbar-h);
	box-sizing: border-box;
}

#tatakte-game-app .tk-app-topbar-slot {
	display: flex;
	align-items: center;
	min-width: 0; /* damit ellipsis im Username greift */
}
#tatakte-game-app .tk-app-topbar-slot-left { justify-content: flex-start; }
#tatakte-game-app .tk-app-topbar-slot-center { justify-content: center; }
#tatakte-game-app .tk-app-topbar-slot-right { justify-content: flex-end; }

/* --- Logo / Brand --- */
#tatakte-game-app .tk-app-topbar-brand {
	display: flex;
	flex-direction: column;
	gap: 0;
	color: var(--tk-paper, #FAFAF7);
	text-decoration: none;
	line-height: 1;
	padding: 0.25rem 0.4rem;
	border-radius: 4px;
	transition: background 0.15s;
}
#tatakte-game-app .tk-app-topbar-brand:hover,
#tatakte-game-app .tk-app-topbar-brand:focus-visible {
	background: rgba(139, 0, 0, 0.25);
	outline: none;
}
#tatakte-game-app .tk-app-topbar-logo {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--tk-paper, #FAFAF7);
}
#tatakte-game-app .tk-app-topbar-tagline {
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	color: rgba(250, 250, 247, 0.75);
	margin-top: 0.1rem;
}
@media (max-width: 480px) {
	#tatakte-game-app .tk-app-topbar-tagline { display: none; }
	#tatakte-game-app .tk-app-topbar-logo { font-size: 0.95rem; letter-spacing: 0.12em; }
}

/* --- Logo-Bild-Variante (wenn Theme-Custom-Logo gesetzt) --- */
#tatakte-game-app .tk-app-topbar-brand--img {
	padding: 0.2rem 0.4rem;
}
#tatakte-game-app .tk-app-topbar-logo-img {
	display: block;
	height: calc(var(--tk-app-topbar-h) - 16px);
	max-height: 40px;
	width: auto;
	object-fit: contain;
}
@media (max-width: 480px) {
	#tatakte-game-app .tk-app-topbar-logo-img { max-height: 34px; }
}

/* --- Discord-Button (mittig, optional) --- */
#tatakte-game-app .tk-app-topbar-discord {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #5865F2; /* Discord Brand */
	color: #fff;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: filter 0.15s, transform 0.15s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
#tatakte-game-app .tk-app-topbar-discord:hover,
#tatakte-game-app .tk-app-topbar-discord:focus-visible {
	filter: brightness(1.1);
	transform: translateY(-1px);
	outline: none;
	color: #fff;
}
#tatakte-game-app .tk-app-topbar-discord-icon { font-size: 1rem; }
@media (max-width: 480px) {
	#tatakte-game-app .tk-app-topbar-discord-label { display: none; }
	#tatakte-game-app .tk-app-topbar-discord {
		padding: 0.35rem 0.55rem;
	}
}

/* --- Account-Slot --- */
#tatakte-game-app .tk-app-topbar-account {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--tk-paper, #FAFAF7);
	text-decoration: none;
	padding: 0.35rem 0.7rem;
	border-radius: 4px;
	border: 1px solid rgba(250, 250, 247, 0.25);
	font-size: 0.85rem;
	max-width: 220px;
	transition: background 0.15s, border-color 0.15s;
}
#tatakte-game-app .tk-app-topbar-account:hover,
#tatakte-game-app .tk-app-topbar-account:focus-visible {
	background: rgba(139, 0, 0, 0.25);
	border-color: var(--tk-accent, #8B0000);
	outline: none;
	color: var(--tk-paper, #FAFAF7);
}
#tatakte-game-app .tk-app-topbar-account-icon { font-size: 1rem; flex-shrink: 0; }
#tatakte-game-app .tk-app-topbar-account-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
@media (max-width: 480px) {
	#tatakte-game-app .tk-app-topbar-account { max-width: 120px; padding: 0.3rem 0.5rem; }
	#tatakte-game-app .tk-app-topbar-account-name { font-size: 0.8rem; }
}

#tatakte-game-app .tk-app-topbar-login {
	white-space: nowrap;
}

/* Game-Topbar (in renderTopbar/renderLobby genutzt) muss UNTER der App-Topbar
   sticken — sonst überlappen sich beide. CSS-Var ist Single Source of Truth. */
#tatakte-game-app .tk-topbar {
	top: var(--tk-app-topbar-h, 0) !important;
	z-index: 100;
}

/* =============================================================
   v0.9.24 — REVEAL-KOMPONENTE (Code/Link-Verschleierung)
   Toggle erfolgt AUSSCHLIESSLICH über data-revealed-Attribut, niemals
   inline-style — siehe Falle 1 im Build-Briefing (CSS-Spezifität bei
   display-Toggles war das große Learning aus v0.9.22).
   ============================================================= */
.tk-reveal {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.tk-reveal[data-revealed="false"] .tk-reveal-content { display: none; }
.tk-reveal[data-revealed="true"]  .tk-reveal-mask    { display: none; }

.tk-reveal-mask {
	letter-spacing: 0.12em;
	color: var(--tk-muted, #6B7280);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	user-select: none;
}
.tk-reveal-content {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	word-break: break-all;
}
.tk-reveal-eye {
	background: transparent;
	border: 1px solid var(--tk-border, #D1CFC8);
	border-radius: 4px;
	padding: 0.15rem 0.45rem;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	color: inherit;
	transition: background 0.15s, border-color 0.15s;
	flex-shrink: 0;
}
.tk-reveal-eye:hover,
.tk-reveal-eye:focus-visible {
	background: var(--tk-beige, #F4F0E8);
	border-color: var(--tk-accent, #8B0000);
	outline: none;
}

/* Inline-Variante (kleiner, für den Beitritts-Link in der Lobby) */
.tk-reveal-inline {
	font-size: 0.95rem;
	max-width: 100%;
	flex-wrap: wrap;
}
.tk-reveal-inline .tk-reveal-content {
	font-size: 0.85rem;
	color: var(--tk-darker, #0A0A0A);
}
.tk-reveal-inline .tk-reveal-mask {
	font-size: 0.85rem;
}

/* Code-Display in der Lobby ist groß und prominent — der Reveal-Wrapper
   übernimmt das Styling vom alten .tk-mp-code-display. */
.tk-mp-code-display.tk-reveal {
	justify-content: center;
}
.tk-mp-code-display.tk-reveal .tk-reveal-content,
.tk-mp-code-display.tk-reveal .tk-reveal-mask {
	display: inline-block;
}
.tk-mp-code-display.tk-reveal[data-revealed="false"] .tk-reveal-content { display: none; }
.tk-mp-code-display.tk-reveal[data-revealed="true"]  .tk-reveal-mask    { display: none; }
.tk-mp-code-display.tk-reveal .tk-reveal-eye {
	font-size: 1.2rem;
	padding: 0.25rem 0.6rem;
	margin-left: 0.4rem;
}

/* Lobby-Link-Zeile — Beitritts-Link mit eigenem Reveal */
.tk-mp-link-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0.6rem 0 0.85rem;
	padding: 0.5rem 0.75rem;
	background: var(--tk-paper, #FAFAF7);
	border: 1px dashed var(--tk-border, #D1CFC8);
	border-radius: 6px;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
}
.tk-mp-link-label {
	font-size: 0.8rem;
	color: var(--tk-muted, #6B7280);
}
@media (max-width: 480px) {
	.tk-mp-link-row { padding: 0.4rem 0.5rem; }
	.tk-mp-link-row .tk-reveal-content,
	.tk-mp-link-row .tk-reveal-mask { font-size: 0.75rem; }
}

/* =============================================================
   v0.9.24 — APP-LAYOUT-MODIFIER
   tk-hub--list  → 900px (Hub: Liste-Feel)
   tk-hub--app   → 720px (Lobby/Finale-Body: App-Feel)
   Mobile bleibt full-width via padding (vom Default-tk-hub geerbt).
   ============================================================= */
.tk-hub.tk-hub--list { max-width: 900px; }
.tk-hub.tk-hub--app  { max-width: 720px; }

/* Game-Scene auf 720px begrenzen, Sidebar bleibt unangetastet */
.tk-game-main .tk-scene { max-width: 720px; }

/* Finale: kein .tk-hub-Wrapper, daher direkt limitieren */
.tk-finale {
	max-width: 720px;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 4rem;
	width: 100%;
	box-sizing: border-box;
}

/* Sonderfall: Gast-Landing nutzt nach wie vor 1100px (Marketing-Feel). Die
   tk-gl-wrap-Regel weiter oben überschreibt tk-hub--list dank höherer
   Spezifität (.tk-hub.tk-gl-wrap mit !important). */

/* =============================================================
   v0.9.24 — HAUPTSEITE-BUTTON (Punkt 4)
   Eigene Modifier-Klasse tk-btn-home: prominenter, eher CTA-Style.
   ============================================================= */
/* =============================================================
   v0.9.25 — LIGHTBOX (Beweisbild-Vollansicht)
   Liegt über allem: Modal (z-index 100k), App-Topbar (9k), alles.
   Click auf Backdrop oder ESC schließt.
   ============================================================= */
.tk-lightbox {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100001 !important;
	background: rgba(0, 0, 0, 0.92) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 2rem 1rem !important;
	cursor: zoom-out !important;
	box-sizing: border-box !important;
}
.tk-lightbox-img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
	cursor: default !important;
}
.tk-lightbox-close {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	font-size: 1.5rem !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	line-height: 1 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.tk-lightbox-close:hover,
.tk-lightbox-close:focus-visible {
	background: rgba(139, 0, 0, 0.85) !important;
	border-color: var(--tk-accent, #8B0000) !important;
	outline: none !important;
}

/* Klickbares Bild im Evidence-Modal — Zoom-Cursor + 🔍-Overlay */
.tk-modal-image-btn {
	position: relative;
	display: block;
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 1rem;
	cursor: zoom-in;
	width: 100%;
}
.tk-modal-image-btn .tk-modal-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	transition: filter 0.15s;
}
.tk-modal-image-btn:hover .tk-modal-image,
.tk-modal-image-btn:focus-visible .tk-modal-image {
	filter: brightness(0.85);
}
.tk-modal-image-btn:focus-visible {
	outline: 2px solid var(--tk-accent, #8B0000);
	outline-offset: 2px;
}
.tk-modal-image-zoom {
	position: absolute;
	bottom: 0.6rem;
	right: 0.6rem;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 1.2rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}
.tk-modal-image-btn:hover .tk-modal-image-zoom,
.tk-modal-image-btn:focus-visible .tk-modal-image-zoom {
	opacity: 1;
}

/* =============================================================
   v0.9.25 — INVENTAR-THUMBNAILS (Sidebar)
   Beweise mit Bild zeigen 40px-Vorschau, ohne Bild ein Type-Icon.
   ============================================================= */
.tk-evidence-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.tk-evidence-thumb {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background-color: var(--tk-beige, #F4F0E8);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--tk-border-light, #E8E5DD);
}
.tk-evidence-thumb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	background-color: var(--tk-paper, #FAFAF7);
}
.tk-evidence-item-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

/* =============================================================
   v0.9.25 — MODE-TAGLINE („Live-Krimi · Solo oder Gruppenermittlung")
   ============================================================= */
.tk-mode-tagline {
	margin: 0.15rem 0 0;
	font-size: 0.8rem;
	color: var(--tk-muted, #6B7280);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	letter-spacing: 0.04em;
}
@media (max-width: 480px) {
	.tk-mode-tagline { font-size: 0.72rem; }
}

/* =============================================================
   v0.9.26 — HOST-VERTEILUNG (Phase 3.2)
   Empfänger-Tags im Inventar + Verteilungs-Modal mit Matrix.
   ============================================================= */

/* --- Tags im Empfänger-Inventar --- */
.tk-evidence-tag {
	display: inline-block;
	font-size: 0.65rem;
	padding: 0.05rem 0.4rem;
	border-radius: 3px;
	letter-spacing: 0.02em;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	margin-left: 0.3rem;
	white-space: nowrap;
}
.tk-evidence-tag-given {
	background: #fef3c7;
	color: #78350f;
	border: 1px solid #fde68a;
}
.tk-evidence-tag-secret {
	background: #1e1e2e;
	color: #fbbf24;
	border: 1px solid #444;
}
/* Heimliche Beweise zusätzlich am Border-Left subtil markieren */
.tk-evidence-item.tk-evidence-secret {
	border-left-color: #fbbf24 !important;
	background: linear-gradient(90deg, rgba(251, 191, 36, 0.06) 0%, transparent 100%);
}

/* --- Distribute-Modal --- */
.tk-modal-host-dist {
	max-width: 920px !important;
	width: 96vw !important;
}
.tk-dist-hint {
	font-size: 0.85rem;
	color: var(--tk-muted, #6B7280);
	margin: 0 0 1rem;
	padding: 0.6rem 0.8rem;
	background: var(--tk-paper, #FAFAF7);
	border-left: 3px solid var(--tk-accent, #8B0000);
	border-radius: 3px;
}

.tk-dist-table-wrap {
	overflow-x: auto;
	max-height: 60vh;
	overflow-y: auto;
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 4px;
}
.tk-dist-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 0.85rem;
}
.tk-dist-table thead th {
	background: var(--tk-darker, #0A0A0A);
	color: var(--tk-paper, #FAFAF7);
	padding: 0.5rem 0.4rem;
	text-align: center;
	font-weight: normal;
	font-size: 0.78rem;
	border-bottom: 2px solid var(--tk-accent, #8B0000);
	position: sticky;
	top: 0;
	z-index: 1;
}
.tk-dist-evid-head {
	text-align: left !important;
	min-width: 200px;
}
.tk-dist-recipient {
	min-width: 90px;
}
.tk-dist-recipient-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tk-accent, #8B0000);
	color: #fff;
	font-size: 0.7rem;
	margin-right: 0.3rem;
	vertical-align: middle;
}
.tk-dist-recipient-name {
	display: block;
	font-size: 0.7rem;
	margin-top: 0.2rem;
	color: rgba(250, 250, 247, 0.85);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 80px;
}
.tk-dist-recipient-guest {
	font-size: 0.6rem;
	margin-left: 0.2rem;
	opacity: 0.7;
}
.tk-dist-table tbody tr {
	border-bottom: 1px solid var(--tk-border-light, #E8E5DD);
}
.tk-dist-table tbody tr:hover {
	background: rgba(139, 0, 0, 0.04);
}
.tk-dist-table td {
	padding: 0.5rem 0.4rem;
	text-align: center;
	vertical-align: middle;
}
.tk-dist-evid {
	text-align: left !important;
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	min-width: 200px;
}
.tk-dist-evid .tk-evidence-thumb {
	width: 32px;
	height: 32px;
}
.tk-dist-evid-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tk-ink, #1A1A1A);
}

/* --- Cycle-Cells: drei Zustände, Click togglet durch --- */
.tk-dist-cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	font-size: 1rem;
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.1s;
	border: 1px solid var(--tk-border, #D1CFC8);
	background: #fff;
	color: var(--tk-ink, #1A1A1A);
	line-height: 1;
	padding: 0;
}
.tk-dist-cell:hover,
.tk-dist-cell:focus-visible {
	transform: scale(1.1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	outline: none;
}
.tk-dist-cell-none { color: var(--tk-muted, #6B7280); }
.tk-dist-cell-given {
	background: #fef3c7;
	border-color: #f59e0b;
}
.tk-dist-cell-secret {
	background: #1e1e2e;
	border-color: #fbbf24;
	color: #fbbf24;
}

@media (max-width: 600px) {
	.tk-dist-cell { width: 32px; height: 32px; font-size: 0.9rem; }
	.tk-dist-recipient-name { max-width: 60px; font-size: 0.65rem; }
	.tk-dist-recipient-avatar { width: 24px; height: 24px; font-size: 0.6rem; }
	.tk-dist-evid-title { font-size: 0.78rem; }
	.tk-dist-evid .tk-evidence-thumb { width: 28px; height: 28px; }
}

/* =============================================================
   v0.9.27 — STANDORT-PUSH (Phase 3.3)
   Banner für eigenen Standort + Select im Distribute-Modal-Header.
   ============================================================= */
.tk-loc-banner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	background: linear-gradient(90deg, rgba(139, 0, 0, 0.08) 0%, transparent 100%);
	border-left: 3px solid var(--tk-accent, #8B0000);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 0.85rem;
	color: var(--tk-ink, #1A1A1A);
	margin: 0;
}
.tk-loc-banner-icon { font-size: 1.05rem; flex-shrink: 0; }
.tk-loc-banner-label { color: var(--tk-muted, #6B7280); font-size: 0.78rem; }
.tk-loc-banner-place {
	font-weight: 700;
	color: var(--tk-accent, #8B0000);
	letter-spacing: 0.02em;
}
@media (max-width: 480px) {
	.tk-loc-banner { font-size: 0.78rem; padding: 0.4rem 0.7rem; }
	.tk-loc-banner-label { display: none; }
}

/* v0.9.28: „Hier untersuchen"-Button rechts im Standort-Banner (Phase 3.4) */
.tk-loc-banner {
	flex-wrap: wrap;
}
.tk-loc-banner-explore {
	margin-left: auto;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.tk-loc-banner-explore {
		margin-left: 0;
		margin-top: 0.3rem;
		flex-basis: 100%;
		text-align: center;
	}
}

/* =============================================================
   v0.9.31 — SPIELER-CHAT (Phase 3.7)
   Chat-Tab in der Sidebar mit Polling. Mobile-optimiert.
   ============================================================= */
.tk-chat {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 300px;
}
.tk-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: var(--tk-paper, #FAFAF7);
	border-radius: 4px;
	border: 1px solid var(--tk-border-light, #E8E5DD);
	margin-bottom: 0.5rem;
	max-height: 50vh;
}
.tk-chat-msg {
	background: #fff;
	border-radius: 6px;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--tk-border-light, #E8E5DD);
	font-size: 0.85rem;
	line-height: 1.4;
}
.tk-chat-msg-head {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-bottom: 0.15rem;
}
.tk-chat-msg-author {
	color: var(--tk-darker, #0A0A0A);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 0.78rem;
	font-weight: 700;
}
.tk-chat-msg-host {
	color: #d97706;
	font-size: 0.75rem;
}
.tk-chat-msg-time {
	color: var(--tk-muted, #6B7280);
	font-size: 0.7rem;
	margin-left: auto;
}
.tk-chat-msg-text {
	color: var(--tk-ink, #1A1A1A);
	word-wrap: break-word;
	white-space: pre-wrap;
}
.tk-chat-msg-system {
	background: rgba(254, 243, 199, 0.4);
	border-color: #fde68a;
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	color: #78350f;
}
.tk-chat-form {
	display: flex;
	gap: 0.4rem;
	padding: 0.5rem 0;
}
.tk-chat-input {
	flex: 1;
	margin: 0;
}
.tk-chat-send {
	flex-shrink: 0;
	min-width: 44px;
	font-size: 1rem;
	padding: 0.5rem 0.75rem;
}
@media (max-width: 480px) {
	.tk-chat-messages { max-height: 40vh; }
}

/* Standort-Dropdown im Distribute-Modal-Header pro Empfänger */
.tk-dist-recipient-loc {
	display: block;
	width: 100%;
	margin-top: 0.3rem;
	font-size: 0.65rem;
	padding: 0.2rem 0.3rem;
	background: rgba(255, 255, 255, 0.1);
	color: var(--tk-paper, #FAFAF7);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 3px;
	cursor: pointer;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
}
.tk-dist-recipient-loc option {
	color: var(--tk-ink, #1A1A1A);
	background: var(--tk-paper, #FAFAF7);
}

/* =============================================================
   v0.9.27 — GRUPPEN-VOTING (Phase 3.5)
   Banner mit Optionen-Bars + Compose-Modal.
   ============================================================= */
.tk-vote-banner {
	background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
	border-bottom: 2px solid #d97706;
	padding: 0.75rem 1rem;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
}
.tk-vote-banner-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}
.tk-vote-banner-icon { font-size: 1.1rem; }
.tk-vote-banner-q {
	flex: 1;
	color: #78350f;
	font-size: 0.95rem;
	font-weight: 700;
	min-width: 0;
}
.tk-vote-banner-meta {
	font-size: 0.78rem;
	background: #78350f;
	color: #fde68a;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-weight: 600;
	white-space: nowrap;
}
.tk-vote-banner-opts {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.tk-vote-opt {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.55rem 0.85rem;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(120, 53, 15, 0.3);
	border-radius: 4px;
	cursor: pointer;
	font-family: inherit;
	color: #1f2937;
	transition: transform 0.1s, box-shadow 0.1s;
	overflow: hidden;
}
.tk-vote-opt:hover,
.tk-vote-opt:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	outline: none;
}
.tk-vote-opt-bar {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	background: rgba(217, 119, 6, 0.18);
	transition: width 0.4s ease;
	z-index: 0;
}
.tk-vote-opt-label {
	position: relative;
	z-index: 1;
	flex: 1;
	font-size: 0.9rem;
	text-align: left;
}
.tk-vote-opt-count {
	position: relative;
	z-index: 1;
	font-weight: 700;
	color: #78350f;
	font-size: 0.95rem;
	margin-left: 0.5rem;
}
.tk-vote-opt-mine {
	border-color: #d97706;
	background: rgba(254, 243, 199, 0.95);
	box-shadow: inset 0 0 0 2px rgba(217, 119, 6, 0.45);
}
.tk-vote-opt-mine .tk-vote-opt-label::before {
	content: '✓ ';
	font-weight: 700;
	color: #d97706;
}
@media (max-width: 480px) {
	.tk-vote-banner-q { font-size: 0.85rem; }
	.tk-vote-opt-label { font-size: 0.82rem; }
}

/* Vote-Compose-Modal */
.tk-input {
	width: 100%;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--tk-border, #D1CFC8);
	border-radius: 4px;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 0.9rem;
	box-sizing: border-box;
	background: var(--tk-paper, #FAFAF7);
}
.tk-input:focus-visible {
	outline: 2px solid var(--tk-accent, #8B0000);
	outline-offset: 1px;
}
.tk-vote-compose-q-label,
.tk-vote-compose-opts-label {
	display: block;
	margin: 0.85rem 0 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--tk-muted, #6B7280);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.tk-vote-compose-q-label:first-of-type { margin-top: 0; }
.tk-vote-compose-opts {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}
.tk-vote-compose-opt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.tk-vote-compose-opt .tk-input { flex: 1; }
.tk-vote-compose-actions {
	margin-top: 1.25rem;
	display: flex;
	justify-content: flex-end;
}


/* =============================================================
   v0.9.35 — RESPONSIVES GAME-LAYOUT (Mobile / Tablet / Desktop / Large)
   Komplett-Refactor von v0.9.33. Vier Breakpoints:
     <  768px  Mobile        — Stack column, alles full width
     >= 768px  Tablet        — Side-by-side, Sidebar 280px
     >= 1024px Desktop       — Sidebar 340px, mehr Padding
     >= 1400px Large Desktop — Sidebar 380px, Container 1600px max
   Behebt drei Probleme aus v0.9.33:
     1. Topbar-Titel floss links aus dem Viewport (flex-basis 60% war
        falsch — flex: 1 1 0 ist korrekter, plus overflow: hidden auf
        dem Container als Sicherheitsnetz).
     2. Sidebar-Tabs wurden auf Desktop abgeschnitten weil 320px zu
        schmal für 3 Tabs mit Counter-Suffix waren — jetzt 340px+ und
        Tabs gleichmäßig mit flex: 1 1 0 verteilt + ellipsis als Backup.
     3. Hauptinhalt nutzte nur 720px auf großen Monitoren — jetzt
        nimmt die Szene den verfügbaren Platz und der Container
        skaliert auf 1400px (1600px auf Large Desktop) max.
   ============================================================= */

.tk-game {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--tk-paper, #FAFAF7);
	overflow-x: hidden; /* Sicherheitsnetz gegen horizontalen Scroll */
}

/* === TOPBAR === */
.tk-topbar {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap; /* default: alles in einer Zeile, wrap nur Mobile */
	gap: 0.5rem;
	padding: 0.5rem 1rem !important;
	background: var(--tk-darker, #0A0A0A);
	color: #fff;
	border-bottom: 2px solid var(--tk-accent, #8B0000);
	box-sizing: border-box;
	width: 100%;
	overflow: hidden; /* Sicherheitsnetz, falls Inhalt überfließt */
}

.tk-topbar-title {
	margin: 0;
	flex: 1 1 0; /* flex-basis 0 — nimmt was übrig, schrumpft auf 0 */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff;
	font-size: 0.95rem;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-weight: 700;
	text-align: left;
}

.tk-topbar-controls {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto; /* feste Größe, nicht schrumpfen */
	flex-shrink: 0;
	flex-wrap: nowrap;
}

.tk-topbar-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8rem;
	background: rgba(255, 255, 255, 0.08);
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
	white-space: nowrap;
	color: #ddd;
}
.tk-topbar-stat strong { color: #fff; }

/* Mobile: Topbar wrappt, Titel auf eigene Zeile */
@media (max-width: 767px) {
	.tk-topbar {
		flex-wrap: wrap;
		padding: 0.5rem 0.6rem !important;
	}
	.tk-topbar-title {
		flex-basis: 100%;
		font-size: 0.85rem;
		order: -1;
	}
	.tk-topbar-controls {
		flex-basis: 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0.3rem;
	}
	.tk-topbar .tk-btn-sm {
		padding: 0.3rem 0.55rem;
		font-size: 0.78rem;
	}
	.tk-topbar-stat {
		font-size: 0.75rem;
		padding: 0.2rem 0.4rem;
	}
}

/* Tablet+: Topbar in einer Zeile mit Padding-Anpassung */
@media (min-width: 768px) {
	.tk-topbar {
		padding: 0.6rem 1.5rem !important;
	}
	.tk-topbar-title {
		font-size: 1rem;
	}
}

/* === GAME-MAIN: Mobile column, Tablet+ row === */
.tk-game-main {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.tk-game-main {
		flex-direction: row;
		gap: 1.5rem;
		padding: 1.25rem;
		align-items: flex-start;
		max-width: 1400px;
		margin: 0 auto;
	}
}

@media (min-width: 1400px) {
	.tk-game-main {
		max-width: 1600px;
	}
}

/* === SCENE — nimmt verfügbaren Platz === */
.tk-scene,
.tk-game-main .tk-scene {
	flex: 1;
	min-width: 0; /* KRITISCH: verhindert dass lange Wörter Container überfließen */
	max-width: 100%;
	padding: 1rem;
	word-wrap: break-word;
	overflow-wrap: break-word;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.tk-scene,
	.tk-game-main .tk-scene {
		max-width: none; /* nicht mehr auf 720px begrenzt — nutzt verfügbaren Platz */
		padding: 1.5rem 2rem;
	}
}
@media (min-width: 1024px) {
	.tk-scene,
	.tk-game-main .tk-scene {
		padding: 2rem 2.5rem;
	}
}

/* === SIDEBAR: Mobile full width unten, Tablet+ rechts daneben === */
.tk-sidebar {
	width: 100%;
	box-sizing: border-box;
	background: var(--tk-paper-alt, #F5F2EA);
	border-top: 2px solid var(--tk-border-light, #E8E5DD);
	display: flex;
	flex-direction: column;
}

/* Tablet (768-1023px): kompakt aber nicht zu eng */
@media (min-width: 768px) and (max-width: 1023px) {
	.tk-sidebar,
	#tatakte-game-app .tk-sidebar {
		width: 320px !important;
		min-width: 320px;
	}
}

/* Desktop (1024-1399px) */
@media (min-width: 1024px) {
	.tk-sidebar,
	#tatakte-game-app .tk-sidebar {
		width: 380px !important;
		min-width: 380px;
	}
}

/* Large Desktop (1400+) */
@media (min-width: 1400px) {
	.tk-sidebar,
	#tatakte-game-app .tk-sidebar {
		width: 440px !important;
		min-width: 440px;
	}
}

@media (min-width: 768px) {
	.tk-sidebar {
		flex-shrink: 0;
		border-top: none;
		border-radius: 6px;
		border: 1px solid var(--tk-border-light, #E8E5DD);
		max-height: calc(100vh - var(--tk-app-topbar-h, 0px) - 100px);
		position: sticky;
		top: calc(var(--tk-app-topbar-h, 0px) + 70px);
		overflow: hidden; /* Container-Clip; Inhalte scrollen separat */
		align-self: flex-start;
	}
}

/* === SIDEBAR-TABS: gleichmäßig verteilt + Ellipsis als Backup === */
.tk-sidebar-tabs {
	display: flex;
	background: var(--tk-darker, #0A0A0A);
	flex-shrink: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.tk-sidebar-tabs::-webkit-scrollbar { display: none; }

.tk-sidebar-tab {
	flex: 1 1 0; /* gleichmäßig verteilt */
	min-width: 0;
	padding: 0.65rem 0.25rem;
	background: transparent;
	color: #bbb;
	border: none;
	/* v0.9.59: Statt Ellipsis bei zu wenig Platz, lieber kleinere Schrift erlauben.
	   Im PC-Test war "📝 N..." unklickbar weil abgeschnitten — Ellipsis macht's
	   schlimmer, nicht besser. Jetzt: flex-shrink mit Min-Width 0, alles bleibt
	   sichtbar, ggf. enger gepackt. Wrap erlaubt für sehr schmale Sidebars. */
	font-size: 0.78rem;
	cursor: pointer;
	white-space: nowrap;
	overflow: visible;
	border-bottom: 3px solid transparent;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	transition: color 0.15s, background 0.15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.tk-sidebar-tab {
		font-size: 0.82rem;
		padding: 0.7rem 0.35rem;
	}
}
.tk-sidebar-tab:hover { color: #fff; background: rgba(255,255,255,0.04); }
.tk-sidebar-tab:focus-visible { outline: 2px solid var(--tk-accent, #8B0000); outline-offset: -2px; }
.tk-sidebar-tab.is-active {
	color: #fff;
	border-bottom-color: var(--tk-accent, #8B0000);
	background: rgba(255,255,255,0.06);
}

/* Counter-Badge im Tab — nur sichtbar wenn n > 0.
   Wird sowohl für Beweise/Notizen (Total) als auch Chat (Unread) verwendet. */
.tk-sidebar-tab-badge {
	display: inline-block;
	background: var(--tk-accent, #8B0000);
	color: #fff;
	font-size: 0.62rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	font-weight: 700;
	min-width: 16px;
	text-align: center;
	line-height: 1.4;
	flex-shrink: 0;
}

/* === SIDEBAR-CONTENT === */
.tk-sidebar-content {
	padding: 0.85rem;
	box-sizing: border-box;
	flex: 1;
	overflow-y: auto;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
@media (min-width: 768px) {
	.tk-sidebar-content {
		padding: 1rem;
	}
}

.tk-sidebar-empty {
	text-align: center;
	color: var(--tk-muted, #6B7280);
	font-style: italic;
	padding: 2rem 1rem;
	font-size: 0.9rem;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal !important; /* falls irgendwo nowrap vererbt wird */
	max-width: 100%;
	box-sizing: border-box;
	hyphens: auto;
}

/* === LISTEN IN SIDEBAR === */
.tk-inventory-list,
.tk-notes-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* === FORMS IN SIDEBAR === */
.tk-note-form,
.tk-chat-form {
	width: 100%;
	box-sizing: border-box;
}
.tk-note-form textarea {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 0.4rem;
}

/* === Topbar-Buttons sehr schmal (< 480px) === */
@media (max-width: 480px) {
	.tk-topbar .tk-btn-sm {
		padding: 0.35rem 0.45rem;
		font-size: 0.78rem;
		max-width: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* =============================================================
   v0.9.38 — Phase 6.1: LEVEL-ANZEIGE PROMINENT (Mein-Konto)
   Polizei-Badge-Look mit großer L-Zahl + Rang-Titel + XP-Progress.
   Stats darunter als kompaktes Grid.
   ============================================================= */

.tk-level-card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: linear-gradient(135deg, var(--tk-paper, #FAFAF7) 0%, var(--tk-paper-alt, #F5F2EA) 100%);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-left: 5px solid var(--tk-accent, #8B0000);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

@media (max-width: 600px) {
	.tk-level-card {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
		padding: 1rem;
	}
}

/* Polizei-Stempel mit großer L-Zahl */
.tk-level-badge {
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--tk-darker, #0A0A0A);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 4px solid var(--tk-accent, #8B0000);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1), 0 4px 12px rgba(139, 0, 0, 0.25);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	position: relative;
}
.tk-level-badge-num {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}
.tk-level-badge-label {
	font-size: 0.6rem;
	letter-spacing: 0.15em;
	color: var(--tk-accent, #8B0000);
	font-weight: 700;
	margin-top: 0.1rem;
}

/* Titel + XP-Progress rechts vom Badge */
.tk-level-info {
	flex: 1;
	min-width: 0;
}

.tk-level-title {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--tk-darker, #0A0A0A);
	margin-bottom: 0.6rem;
	line-height: 1.2;
	word-wrap: break-word;
}
@media (max-width: 600px) {
	.tk-level-title { font-size: 1.15rem; }
}

.tk-level-progress-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.tk-level-progress-bar {
	width: 100%;
	height: 10px;
	background: rgba(0,0,0,0.08);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.tk-level-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--tk-accent, #8B0000) 0%, #C8102E 100%);
	border-radius: 999px;
	transition: width 0.5s ease-out;
}
.tk-level-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.78rem;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	gap: 0.5rem;
	flex-wrap: wrap;
}
.tk-level-xp-current {
	color: var(--tk-accent, #8B0000);
	font-weight: 700;
}
.tk-level-xp-next {
	color: var(--tk-muted, #6B7280);
}

/* Sekundäres Stats-Grid (Gewonnen, Bestenliste, Freispiele) */
.tk-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
}
.tk-stat-item {
	background: var(--tk-paper, #FAFAF7);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 6px;
	padding: 0.85rem;
	text-align: center;
}
.tk-stat-item-special {
	border-color: #059669;
	background: rgba(5, 150, 105, 0.04);
}
.tk-stat-value {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.5rem;
	color: var(--tk-darker, #0A0A0A);
	font-weight: 700;
	line-height: 1.1;
}
.tk-stat-item-special .tk-stat-value { color: #059669; }
.tk-stat-label {
	font-size: 0.75rem;
	color: var(--tk-muted, #6B7280);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 0.3rem;
}

/* =============================================================
   v0.9.39 — Phase 6.2: SPIELERSUCHE + PROFIL-MODAL
   ============================================================= */

.tk-player-search {
	position: relative;
}
.tk-player-search-input {
	width: 100%;
	padding: 0.7rem 0.9rem;
	font-size: 1rem;
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 6px;
	background: var(--tk-paper, #FAFAF7);
	box-sizing: border-box;
	font-family: inherit;
}
.tk-player-search-input:focus {
	outline: none;
	border-color: var(--tk-accent, #8B0000);
	box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.12);
}

.tk-player-search-results {
	margin-top: 0.6rem;
}
.tk-player-search-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.tk-player-search-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0.9rem;
	background: var(--tk-paper, #FAFAF7);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.tk-player-search-item:hover,
.tk-player-search-item:focus {
	border-color: var(--tk-accent, #8B0000);
	background: var(--tk-paper-alt, #F5F2EA);
	outline: none;
}
.tk-player-search-item:active { transform: translateY(1px); }
.tk-player-search-name {
	font-weight: 700;
	color: var(--tk-darker, #0A0A0A);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}
.tk-player-search-meta {
	font-size: 0.8rem;
	color: var(--tk-muted, #6B7280);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	flex-shrink: 0;
}

.tk-search-loading,
.tk-search-empty,
.tk-search-error {
	padding: 1rem;
	text-align: center;
	color: var(--tk-muted, #6B7280);
	font-style: italic;
	font-size: 0.9rem;
}
.tk-search-error { color: var(--tk-accent, #8B0000); }

/* === PROFIL-MODAL === */
.tk-profile-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 2rem 1rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.tk-profile-modal {
	background: var(--tk-paper, #FAFAF7);
	border-radius: 8px;
	max-width: 540px;
	width: 100%;
	padding: 1.5rem;
	position: relative;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	border-top: 4px solid var(--tk-accent, #8B0000);
}
.tk-modal-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: transparent;
	border: none;
	font-size: 1.6rem;
	cursor: pointer;
	color: var(--tk-muted, #6B7280);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.tk-modal-close:hover {
	background: rgba(0,0,0,0.06);
	color: var(--tk-darker, #0A0A0A);
}

.tk-profile-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.2rem;
	padding-right: 2rem; /* Platz für Close-Button */
}
.tk-profile-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--tk-accent, #8B0000);
	flex-shrink: 0;
	background: var(--tk-paper-alt, #F5F2EA);
}
.tk-profile-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	color: var(--tk-muted, #6B7280);
	background: var(--tk-paper-alt, #F5F2EA);
}
.tk-profile-header-info {
	flex: 1;
	min-width: 0;
}
.tk-profile-name {
	margin: 0 0 0.2rem 0;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.4rem;
	color: var(--tk-darker, #0A0A0A);
	word-wrap: break-word;
}
.tk-profile-rank {
	font-size: 0.9rem;
	color: var(--tk-accent, #8B0000);
	font-weight: 700;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
}

.tk-profile-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-bottom: 1.2rem;
}
.tk-profile-stat-item {
	background: var(--tk-paper-alt, #F5F2EA);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 6px;
	padding: 0.7rem;
	text-align: center;
}
.tk-profile-stat-item strong {
	display: block;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.3rem;
	color: var(--tk-darker, #0A0A0A);
	line-height: 1.1;
}
.tk-profile-stat-item span {
	font-size: 0.75rem;
	color: var(--tk-muted, #6B7280);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 0.2rem;
	display: block;
}

.tk-profile-section-h {
	font-size: 1rem;
	margin: 1.2rem 0 0.5rem 0;
	color: var(--tk-darker, #0A0A0A);
}
.tk-profile-cases {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.tk-profile-case {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 0.7rem;
	background: var(--tk-paper-alt, #F5F2EA);
	border-radius: 4px;
	font-size: 0.88rem;
}
.tk-profile-case-solved { border-left: 3px solid #059669; }
.tk-profile-case-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--tk-darker, #0A0A0A);
}
.tk-profile-case-result {
	font-size: 0.78rem;
	color: var(--tk-muted, #6B7280);
	flex-shrink: 0;
}
.tk-profile-case-solved .tk-profile-case-result { color: #059669; font-weight: 700; }
.tk-profile-empty {
	color: var(--tk-muted, #6B7280);
	font-style: italic;
	text-align: center;
	padding: 1rem;
}

/* =============================================================
   v0.9.40 — Phase 6.3: EXPORT-BUTTONS im Mein-Konto-View
   ============================================================= */

.tk-export-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}
.tk-export-actions .tk-btn {
	flex: 0 1 auto;
}
@media (max-width: 480px) {
	.tk-export-actions .tk-btn {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* =============================================================
   v0.9.43 — Phase 7.2: KRIMIDINNER-ROLLEN-UI
   Lobby-Picker + Sidebar-Tab im Game-View
   ============================================================= */

/* Lobby: Rollen-Sektion */
.tk-dinner-section {
	margin: 1.5rem 0;
	padding: 1rem;
	background: var(--tk-paper-alt, #F5F2EA);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-left: 4px solid var(--tk-accent, #8B0000);
	border-radius: 8px;
}

.tk-dinner-roles-list {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tk-dinner-role {
	background: var(--tk-paper, #FAFAF7);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 6px;
	padding: 0.85rem 1rem;
}
.tk-dinner-role-mine {
	border-color: var(--tk-accent, #8B0000);
	background: #FFF8F8;
}
.tk-dinner-role-taken {
	opacity: 0.65;
}

.tk-dinner-role-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.4rem;
}
.tk-dinner-role-title {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tk-darker, #0A0A0A);
}
.tk-dinner-role-status {
	font-size: 0.78rem;
	color: var(--tk-muted, #6B7280);
	font-style: italic;
}
.tk-dinner-role-mine-tag {
	color: var(--tk-accent, #8B0000) !important;
	font-style: normal !important;
	font-weight: 700;
}

.tk-dinner-role-desc {
	color: var(--tk-darker, #0A0A0A);
	font-size: 0.92rem;
	line-height: 1.5;
	margin-bottom: 0.7rem;
}
.tk-dinner-role-desc p { margin: 0 0 0.4rem 0; }
.tk-dinner-role-desc p:last-child { margin-bottom: 0; }

.tk-dinner-role-actions {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

/* Sidebar Rolle-Tab im Game-View */
.tk-role-card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.tk-role-title {
	margin: 0;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.15rem;
	color: var(--tk-darker, #0A0A0A);
	border-bottom: 2px solid var(--tk-accent, #8B0000);
	padding-bottom: 0.4rem;
}
.tk-role-murderer-badge {
	background: var(--tk-accent, #8B0000);
	color: #fff;
	padding: 0.5rem 0.7rem;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
}
.tk-role-section h4 {
	margin: 0 0 0.35rem 0;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tk-muted, #6B7280);
}
.tk-role-text {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--tk-darker, #0A0A0A);
}
.tk-role-text p { margin: 0 0 0.4rem 0; }
.tk-role-text p:last-child { margin-bottom: 0; }

.tk-role-private {
	background: rgba(139, 0, 0, 0.04);
	border-left: 3px solid var(--tk-accent, #8B0000);
	padding: 0.7rem 0.85rem;
	border-radius: 0 4px 4px 0;
}

.tk-role-secrets {
	background: rgba(218, 165, 32, 0.06);
	border-left: 3px solid #DAA520;
	padding: 0.7rem 0.85rem;
	border-radius: 0 4px 4px 0;
}
.tk-role-act {
	font-size: 0.88rem;
	margin-bottom: 0.4rem;
	line-height: 1.4;
}
.tk-role-act:last-child { margin-bottom: 0; }
.tk-role-act strong {
	display: inline-block;
	margin-right: 0.3rem;
	color: #946800;
}

.tk-role-act-hint {
	font-style: italic;
	color: var(--tk-muted, #6B7280);
	font-size: 0.85rem;
	text-align: center;
	padding: 0.6rem;
	border-top: 1px dashed var(--tk-border-light, #E8E5DD);
}

/* =============================================================
   v0.9.44 — Phase 7.3: AKT-MECHANIK
   Topbar-Akt-Indikator + Akt-Übergangs-Modal
   ============================================================= */

.tk-topbar-act {
	background: linear-gradient(90deg, rgba(218,165,32,0.2) 0%, rgba(218,165,32,0.08) 100%) !important;
	color: #FFD700 !important;
	border: 1px solid rgba(218,165,32,0.4);
}
.tk-topbar-act strong {
	color: #FFD700 !important;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
}

/* Akt-Übergangs-Modal */
.tk-act-transition-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.85);
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	animation: tk-fade-in 0.4s ease-out;
}
@keyframes tk-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.tk-act-transition-modal {
	background: var(--tk-paper, #FAFAF7);
	border: 3px solid #DAA520;
	border-radius: 12px;
	max-width: 500px;
	width: 100%;
	padding: 2.5rem 2rem;
	text-align: center;
	box-shadow: 0 0 60px rgba(218,165,32,0.4), 0 12px 40px rgba(0,0,0,0.5);
	position: relative;
	animation: tk-act-rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes tk-act-rise {
	from { transform: translateY(40px) scale(0.92); opacity: 0; }
	to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.tk-act-transition-banner {
	font-size: 4rem;
	line-height: 1;
	margin-bottom: 0.5rem;
	animation: tk-act-spin 1.2s ease-out;
}
@keyframes tk-act-spin {
	from { transform: rotate(-180deg) scale(0.4); opacity: 0; }
	to   { transform: rotate(0)       scale(1);   opacity: 1; }
}
.tk-act-transition-title {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 2rem;
	color: var(--tk-darker, #0A0A0A);
	margin: 0 0 0.5rem 0;
	letter-spacing: 0.05em;
}
.tk-act-transition-text {
	color: var(--tk-muted, #6B7280);
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.5rem 0;
}
@media (max-width: 480px) {
	.tk-act-transition-modal {
		padding: 1.8rem 1.2rem;
	}
	.tk-act-transition-banner { font-size: 3rem; }
	.tk-act-transition-title { font-size: 1.5rem; }
}

/* =============================================================
   v0.9.45 — Phase 7.4: AUFLÖSUNG & VOTING
   Voting-UI in Sidebar + Resultat-Modal
   ============================================================= */

/* Voting-Sektion in der Rolle-Tab */
.tk-dinner-voting-section {
	background: rgba(218, 165, 32, 0.1) !important;
	border-left: 3px solid #DAA520 !important;
	padding: 0.85rem !important;
	border-radius: 0 6px 6px 0;
	margin-top: 1rem;
}
.tk-dinner-voting-section h4 {
	margin: 0 0 0.5rem 0;
	color: #946800;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 1rem !important;
}
.tk-dinner-vote-status {
	font-size: 0.95rem;
	margin-bottom: 0.4rem;
	padding: 0.5rem 0.7rem;
	background: rgba(255,255,255,0.6);
	border-radius: 4px;
}
.tk-dinner-vote-hint,
.tk-dinner-vote-change-hint {
	font-size: 0.85rem;
	color: var(--tk-muted, #6B7280);
	margin-bottom: 0.6rem;
}
.tk-dinner-vote-list {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.tk-dinner-vote-item .tk-btn {
	width: 100%;
	text-align: left;
	justify-content: flex-start;
}

/* Resultat-Modal */
.tk-dinner-result-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.85);
	z-index: 100002;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 2rem 1rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.tk-dinner-result-modal {
	background: var(--tk-paper, #FAFAF7);
	border: 3px solid var(--tk-accent, #8B0000);
	border-radius: 12px;
	max-width: 600px;
	width: 100%;
	padding: 2rem 1.75rem;
	position: relative;
	box-shadow: 0 0 80px rgba(139, 0, 0, 0.5), 0 12px 50px rgba(0,0,0,0.6);
	animation: tk-act-rise 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.tk-dinner-result-banner {
	font-size: 4rem;
	line-height: 1;
	text-align: center;
	margin-bottom: 0.4rem;
	animation: tk-act-spin 1.2s ease-out;
}
.tk-dinner-result-title {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.8rem;
	color: var(--tk-darker, #0A0A0A);
	margin: 0 0 0.5rem 0;
	text-align: center;
	letter-spacing: 0.03em;
}
.tk-dinner-result-reveal {
	text-align: center;
	font-size: 1.05rem;
	color: var(--tk-darker, #0A0A0A);
	margin: 0 0 1.2rem 0;
}
.tk-dinner-result-reveal strong {
	color: var(--tk-accent, #8B0000);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.2rem;
}

.tk-dinner-result-self {
	margin-bottom: 1.2rem;
	text-align: center;
}
.tk-dinner-result-self-win {
	background: rgba(5, 150, 105, 0.12);
	color: #047857;
	padding: 0.85rem 1rem;
	border-radius: 6px;
	font-size: 1.05rem;
	font-weight: 700;
	border: 2px solid #059669;
}
.tk-dinner-result-self-loss {
	background: rgba(0, 0, 0, 0.04);
	color: var(--tk-muted, #6B7280);
	padding: 0.85rem 1rem;
	border-radius: 6px;
	font-size: 0.95rem;
	border: 1px dashed var(--tk-border-light, #E8E5DD);
}

.tk-dinner-result-section-h {
	font-size: 0.95rem;
	margin: 1.2rem 0 0.5rem 0;
	color: var(--tk-darker, #0A0A0A);
	border-bottom: 1px solid var(--tk-border-light, #E8E5DD);
	padding-bottom: 0.3rem;
}

.tk-dinner-result-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.tk-dinner-result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 0.85rem;
	background: var(--tk-paper-alt, #F5F2EA);
	border-radius: 6px;
	border-left: 3px solid transparent;
}
.tk-dinner-result-correct {
	border-left-color: #059669;
	background: rgba(5, 150, 105, 0.06);
}
.tk-dinner-result-murderer {
	border-left-color: var(--tk-accent, #8B0000);
	background: rgba(139, 0, 0, 0.06);
	font-weight: 700;
}
.tk-dinner-result-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tk-dinner-result-vote {
	font-size: 0.85rem;
	color: var(--tk-muted, #6B7280);
	flex-shrink: 0;
	font-style: italic;
}
.tk-dinner-result-correct .tk-dinner-result-vote {
	color: #047857;
	font-style: normal;
	font-weight: 700;
}

.tk-dinner-result-stats {
	margin: 1.2rem 0;
	text-align: center;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.05rem;
}

.tk-dinner-result-actions {
	text-align: center;
	margin-top: 1rem;
}
@media (max-width: 480px) {
	.tk-dinner-result-modal {
		padding: 1.5rem 1.1rem;
	}
	.tk-dinner-result-banner { font-size: 3rem; }
	.tk-dinner-result-title { font-size: 1.4rem; }
}

/* =============================================================
   v0.9.47 — Sidebar-Privatsphäre/Sichtbarkeits-Hinweise
   ============================================================= */
.tk-sidebar-hint {
	font-size: 0.78rem;
	color: var(--tk-muted, #6B7280);
	background: rgba(0,0,0,0.03);
	border-radius: 4px;
	padding: 0.5rem 0.7rem;
	margin: 0 0 0.75rem 0;
	font-style: italic;
	border-left: 2px solid var(--tk-border-light, #E8E5DD);
}

/* =============================================================
   v0.9.48 — Distribute-Cards-Layout + Standort-Push als eigene Modal
   ============================================================= */

/* Legende oben im Distribute-Modal */
.tk-dist-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.2rem;
	font-size: 0.82rem;
	color: var(--tk-muted, #6B7280);
	margin: 0 0 1rem 0;
	padding: 0.6rem 0.8rem;
	background: rgba(0,0,0,0.03);
	border-radius: 6px;
	border-left: 3px solid var(--tk-border-light, #E8E5DD);
}
.tk-dist-legend-row strong {
	color: var(--tk-darker, #0A0A0A);
	font-weight: 700;
	margin-right: 0.2rem;
}

/* Card-Layout */
.tk-dist-cards {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.tk-dist-card {
	background: var(--tk-paper-alt, #F5F2EA);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 8px;
	overflow: hidden;
}
.tk-dist-card-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
	background: var(--tk-paper, #FAFAF7);
	border-bottom: 1px solid var(--tk-border-light, #E8E5DD);
}
.tk-dist-card-head .tk-evidence-thumb {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}
.tk-dist-card-title {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--tk-darker, #0A0A0A);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tk-dist-card-body {
	padding: 0.4rem 0.85rem;
	display: flex;
	flex-direction: column;
}
.tk-dist-recipient-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.45rem 0;
	border-bottom: 1px dashed var(--tk-border-light, #E8E5DD);
}
.tk-dist-recipient-row:last-child {
	border-bottom: none;
}
.tk-dist-recipient-label {
	font-size: 0.92rem;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tk-dist-guest-tag {
	font-size: 0.82rem;
	color: var(--tk-muted, #6B7280);
}

/* Drei Status-Buttons als Toggle-Group */
.tk-dist-status-group {
	display: inline-flex;
	gap: 2px;
	background: var(--tk-paper, #FAFAF7);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 6px;
	padding: 2px;
	flex-shrink: 0;
}
.tk-dist-status-btn {
	background: transparent;
	border: none;
	border-radius: 4px;
	padding: 0.4rem 0.7rem;
	cursor: pointer;
	font-size: 1rem;
	transition: background 0.15s ease;
	min-width: 38px;
	color: var(--tk-muted, #6B7280);
}
.tk-dist-status-btn:hover { background: rgba(0,0,0,0.05); }
.tk-dist-status-btn.is-active {
	background: var(--tk-darker, #0A0A0A);
	color: #fff;
}
.tk-dist-status-given.is-active {
	background: #2563eb;
	color: #fff;
}
.tk-dist-status-secret.is-active {
	background: var(--tk-accent, #8B0000);
	color: #fff;
}

/* Standort-Push-Modal (eigenständig) */
.tk-modal-host-move {
	max-width: 500px;
	width: 100%;
}
.tk-move-intro {
	font-size: 0.88rem;
	color: var(--tk-muted, #6B7280);
	margin: 0 0 1rem 0;
	line-height: 1.5;
}
.tk-move-list {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.tk-move-row {
	background: var(--tk-paper-alt, #F5F2EA);
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.tk-move-row-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.tk-move-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tk-beige, #DCD3BF);
	color: var(--tk-accent, #8B0000);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tk-move-name {
	font-weight: 700;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tk-move-guest {
	font-size: 0.82rem;
	color: var(--tk-muted, #6B7280);
}
.tk-move-current-loc {
	font-size: 0.82rem;
	color: var(--tk-muted, #6B7280);
	padding: 0.3rem 0.5rem;
	background: rgba(0,0,0,0.03);
	border-radius: 4px;
}
.tk-move-current-loc strong {
	color: var(--tk-darker, #0A0A0A);
}
.tk-move-current-loc-none {
	font-style: italic;
}
.tk-move-select {
	width: 100%;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--tk-border-light, #E8E5DD);
	border-radius: 6px;
	background: var(--tk-paper, #FAFAF7);
	font-size: 0.95rem;
}

/* Mobile-Adaptionen */
@media (max-width: 480px) {
	.tk-dist-recipient-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0.35rem;
	}
	.tk-dist-recipient-label {
		font-weight: 700;
	}
	.tk-dist-status-group {
		justify-content: space-between;
	}
	.tk-dist-status-btn {
		flex: 1;
	}
	.tk-dist-legend {
		flex-direction: column;
		gap: 0.3rem;
	}
}

/* =============================================================
   v0.9.49 — Phase D: Krimidinner-Game-Stage
   Eigene Hauptbühne im Game-View bei play_mode=krimidinner.
   Keine Szenen-Cards, stattdessen großer Akt-Indikator + Texte.
   ============================================================= */

.tk-dinner-stage {
	padding: 1.5rem;
	max-width: 800px;
	margin: 0 auto;
	overflow-y: auto;
}

.tk-dinner-stage-header {
	text-align: center;
	padding: 1.5rem 1rem;
	margin-bottom: 1.5rem;
	background: linear-gradient(180deg, rgba(218,165,32,0.15) 0%, rgba(218,165,32,0.04) 100%);
	border: 2px solid rgba(218,165,32,0.4);
	border-radius: 12px;
	position: relative;
}
.tk-dinner-stage-header.tk-dinner-stage-voting {
	background: linear-gradient(180deg, rgba(139,0,0,0.15) 0%, rgba(139,0,0,0.04) 100%);
	border-color: rgba(139,0,0,0.4);
}
.tk-dinner-stage-act-num {
	display: block;
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 4rem;
	line-height: 1;
	color: #DAA520;
	font-weight: 900;
	margin-bottom: 0.3rem;
}
.tk-dinner-stage-voting .tk-dinner-stage-act-num {
	color: var(--tk-accent, #8B0000);
	font-size: 3rem;
}
.tk-dinner-stage-title {
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	font-size: 1.8rem;
	color: var(--tk-darker, #0A0A0A);
	margin: 0;
	letter-spacing: 0.04em;
}
.tk-dinner-stage-subtitle {
	color: var(--tk-muted, #6B7280);
	margin: 0.4rem 0 0 0;
	font-size: 0.95rem;
}

.tk-dinner-stage-text {
	background: var(--tk-paper-alt, #F5F2EA);
	padding: 1.2rem 1.5rem;
	border-radius: 8px;
	border-left: 4px solid #DAA520;
	margin-bottom: 1.5rem;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--tk-darker, #0A0A0A);
}
.tk-dinner-stage-text p { margin: 0 0 0.8rem 0; }
.tk-dinner-stage-text p:last-child { margin-bottom: 0; }

.tk-dinner-stage-empty {
	text-align: center;
	color: var(--tk-muted, #6B7280);
	font-style: italic;
	padding: 1rem;
	margin-bottom: 1.5rem;
}

/* Host-Panel — nur für Host sichtbar */
.tk-dinner-host-panel {
	background: rgba(139, 0, 0, 0.05);
	border: 1px dashed var(--tk-accent, #8B0000);
	border-radius: 8px;
	padding: 1rem 1.2rem;
	margin-top: 1rem;
}
.tk-dinner-host-panel-title {
	margin: 0 0 0.7rem 0;
	font-size: 1rem;
	color: var(--tk-accent, #8B0000);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
}
.tk-dinner-host-notes {
	background: rgba(255,255,255,0.6);
	padding: 0.75rem 0.9rem;
	border-radius: 6px;
	font-size: 0.92rem;
	line-height: 1.5;
	margin-bottom: 0.8rem;
	color: var(--tk-darker, #0A0A0A);
}
.tk-dinner-host-notes p { margin: 0 0 0.4rem 0; }
.tk-dinner-host-notes p:last-child { margin-bottom: 0; }
.tk-dinner-host-actions-hint {
	font-size: 0.88rem;
	color: var(--tk-muted, #6B7280);
}
.tk-dinner-host-actions-hint p { margin: 0; }

.tk-dinner-host-resolution-preview {
	margin-top: 0.7rem;
	background: rgba(0,0,0,0.04);
	border-radius: 6px;
	padding: 0.5rem 0.8rem;
}
.tk-dinner-host-resolution-preview summary {
	cursor: pointer;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--tk-accent, #8B0000);
}
.tk-dinner-host-resolution-body {
	margin-top: 0.5rem;
	padding: 0.6rem;
	background: rgba(255,255,255,0.7);
	border-radius: 4px;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Spieler-Hinweise */
.tk-dinner-player-hint {
	background: rgba(0,0,0,0.03);
	border-radius: 6px;
	padding: 0.85rem 1rem;
	margin-top: 1rem;
	text-align: center;
	color: var(--tk-darker, #0A0A0A);
}
.tk-dinner-player-hint p { margin: 0; font-size: 0.95rem; }

@media (max-width: 480px) {
	.tk-dinner-stage { padding: 1rem; }
	.tk-dinner-stage-act-num { font-size: 3rem; }
	.tk-dinner-stage-voting .tk-dinner-stage-act-num { font-size: 2.4rem; }
	.tk-dinner-stage-title { font-size: 1.4rem; }
}

/* =============================================================
   v0.9.50 — Krimidinner Lobby-Erweiterungen
   ============================================================= */

.tk-dinner-roles-count {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--tk-muted, #6B7280);
	background: rgba(0,0,0,0.06);
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
}

.tk-dinner-host-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	padding: 0.7rem 0.85rem;
	margin: 0.5rem 0 0.7rem 0;
	background: rgba(139,0,0,0.05);
	border: 1px dashed var(--tk-accent, #8B0000);
	border-radius: 6px;
}
.tk-dinner-host-actions-hint {
	flex-basis: 100%;
	font-size: 0.78rem;
	color: var(--tk-muted, #6B7280);
	font-style: italic;
	margin-top: 0.2rem;
}

/* =============================================================
   v0.9.53 — Modus-Tags + Mobile-Topbar-Polish
   ============================================================= */

/* Modus-Tags in Library/Catalog Cards */
.tk-tag-mode-dinner {
	background: rgba(139, 0, 0, 0.12);
	color: var(--tk-accent, #8B0000);
	border: 1px solid rgba(139, 0, 0, 0.25);
	font-weight: 700;
}
.tk-tag-mode-mp {
	background: rgba(37, 99, 235, 0.10);
	color: #2563eb;
	border: 1px solid rgba(37, 99, 235, 0.25);
}
.tk-tag-mode-solo {
	background: rgba(0, 0, 0, 0.05);
	color: var(--tk-muted, #6B7280);
	border: 1px solid rgba(0, 0, 0, 0.10);
}

/* Mobile-Topbar: flex-wrap aktivieren damit nicht horizontal rausgeschnitten wird.
   Bei vielen Host-Buttons (Move + Vote + Distribute + Akt-Controls + Pause + Vollbild
   + Abbrechen + Verlassen) werden auf 380px-Mobile schnell 8+ Buttons fällig. */
@media (max-width: 720px) {
	.tk-topbar {
		flex-wrap: wrap;
		gap: 0.4rem;
	}
	.tk-topbar-controls {
		flex-wrap: wrap;
		gap: 0.3rem;
		justify-content: flex-end;
	}
	.tk-topbar-controls .tk-btn-sm {
		padding: 0.35rem 0.55rem;
		font-size: 0.82rem;
	}
	.tk-topbar-stat {
		font-size: 0.82rem;
		padding: 0.2rem 0.4rem;
	}
}
@media (max-width: 480px) {
	/* Auf sehr schmalen Mobile-Screens: Title in eigener Zeile damit Buttons mehr Platz haben */
	.tk-topbar-title {
		flex-basis: 100%;
		font-size: 1rem;
		margin-bottom: 0.2rem;
	}
}

/* =============================================================
   v0.9.54 — Voting-Banner CSS-Härtung gegen Theme-Override
   Symptom: Banner-Header (Frage + Icon + Counter) unsichtbar in Bild,
   nur "1, 2, 3" Optionen sichtbar. Vermutet: Theme-CSS überschreibt
   .tk-vote-banner-head display:flex. Mit höherer Spezifität fixen.
   ============================================================= */
#tatakte-game-app .tk-vote-banner {
	display: block !important;
	background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
	border-bottom: 2px solid #d97706 !important;
	padding: 0.85rem 1rem !important;
}
#tatakte-game-app .tk-vote-banner-head {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	flex-wrap: wrap !important;
	margin-bottom: 0.6rem !important;
}
#tatakte-game-app .tk-vote-banner-q {
	flex: 1 1 100% !important;
	color: #78350f !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	min-width: 0 !important;
	display: block !important;
	margin: 0 !important;
}
#tatakte-game-app .tk-vote-banner-icon { display: inline-block !important; font-size: 1.2rem !important; }
#tatakte-game-app .tk-vote-banner-meta { display: inline-flex !important; }
#tatakte-game-app .tk-vote-banner-opts {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.4rem !important;
}
#tatakte-game-app .tk-vote-opt {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0.6rem 0.85rem !important;
	background: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(120, 53, 15, 0.35) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	color: #1f2937 !important;
	min-height: 2.5rem !important;
	position: relative !important;
}
#tatakte-game-app .tk-vote-opt-label {
	display: inline-block !important;
	flex: 1 !important;
	font-size: 0.95rem !important;
	color: #1f2937 !important;
	text-align: left !important;
	z-index: 1 !important;
	position: relative !important;
}
#tatakte-game-app .tk-vote-opt-count {
	display: inline-block !important;
	font-weight: 700 !important;
	color: #78350f !important;
	font-size: 1rem !important;
	margin-left: 0.5rem !important;
	z-index: 1 !important;
	position: relative !important;
}

/* Mobile: Banner-Frage in eigene Zeile mit Counter rechts */
@media (max-width: 600px) {
	#tatakte-game-app .tk-vote-banner-q { font-size: 0.95rem !important; }
	#tatakte-game-app .tk-vote-opt-label { font-size: 0.88rem !important; }
}

/* =============================================================
   v0.9.54 — tk-message Styling (Hints, Toasts, Errors)
   Dieser Style hat bisher gefehlt — Hints wurden als ungestylte
   <div> gerendert, daher das "Text oben abgeschnitten" Problem.
   ============================================================= */
#tatakte-game-app .tk-message {
	display: block;
	padding: 0.75rem 1rem;
	margin: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1.5;
	border-left: 4px solid;
	box-sizing: border-box;
	max-width: calc(100% - 2rem);
	word-wrap: break-word;
}
#tatakte-game-app .tk-message-info {
	background: #fef3c7;
	border-left-color: #d97706;
	color: #78350f;
}
#tatakte-game-app .tk-message-success {
	background: #d1fae5;
	border-left-color: #059669;
	color: #064e3b;
}
#tatakte-game-app .tk-message-error {
	background: #fee2e2;
	border-left-color: #dc2626;
	color: #7f1d1d;
}
#tatakte-game-app .tk-message-warning {
	background: #fef3c7;
	border-left-color: #d97706;
	color: #78350f;
}

/* Im Modal-Body: keine Margin, das Modal hat schon Padding */
#tatakte-game-app .tk-modal-body .tk-message {
	margin: 0 0 0.75rem 0;
	max-width: 100%;
}

/* =============================================================
   v0.9.60 — Sidebar-Layout: Theme-Override robust verhindern
   Symptom: Auf PC wird die Sidebar zu schmal (~280px statt 380px)
   und Inhalt abgeschnitten — wahrscheinlich Theme-Override.
   Fix: Höchste Spezifität (#tatakte-game-app) + !important auf
   alle layout-relevanten Properties.
   ============================================================= */
@media (min-width: 768px) {
	#tatakte-game-app .tk-game-main {
		display: flex !important;
		flex-direction: row !important;
		gap: 1.5rem !important;
		align-items: flex-start !important;
	}
	#tatakte-game-app .tk-sidebar {
		width: 360px !important;
		flex: 0 0 360px !important;  /* nicht wachsen, nicht schrumpfen */
		min-width: 360px !important;
		max-width: 360px !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
	}
	#tatakte-game-app .tk-game-main .tk-scene {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
}
@media (min-width: 1024px) {
	#tatakte-game-app .tk-sidebar {
		width: 380px !important;
		flex: 0 0 380px !important;
		min-width: 380px !important;
		max-width: 380px !important;
	}
}
/* Sidebar-Inhalt: niemals horizontal scrollbar oder overflow-hidden vererben */
#tatakte-game-app .tk-sidebar-content {
	overflow-x: hidden !important;
	overflow-y: auto !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
#tatakte-game-app .tk-sidebar-empty {
	white-space: normal !important;
	word-wrap: break-word !important;
	max-width: 100% !important;
}

/* =============================================================
   v0.9.60 — Standort-Push-Animation
   Wenn der Gast vom Host an einen anderen Ort versetzt wird,
   blitzt ein Toast-Modal kurz auf — auffällig aber nicht störend.
   ============================================================= */
.tk-location-toast {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.6);
	background: linear-gradient(135deg, #8B0000 0%, #6B0000 100%);
	color: #fff;
	padding: 1.5rem 2rem;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(192, 57, 43, 0.4);
	font-family: var(--tk-typewriter, 'Special Elite', 'Courier New', monospace);
	z-index: 10000;
	max-width: 90%;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	animation: tkLocationToastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
	           tkLocationToastOut 0.5s ease-in 3.5s forwards;
}
.tk-location-toast-icon {
	font-size: 3rem;
	display: block;
	margin-bottom: 0.5rem;
	animation: tkLocationPulse 0.6s ease-in-out 0.3s 2;
}
.tk-location-toast-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.tk-location-toast-place {
	font-size: 1.5rem;
	font-style: italic;
	color: #FFE5D9;
}
.tk-location-toast-hint {
	font-size: 0.85rem;
	margin-top: 0.75rem;
	opacity: 0.85;
	font-family: 'Inter', sans-serif;
}
@keyframes tkLocationToastIn {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-5deg); }
	60%  { transform: translate(-50%, -50%) scale(1.05) rotate(2deg); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
@keyframes tkLocationToastOut {
	0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) translateY(20px); }
}
@keyframes tkLocationPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.2); }
}
/* Backdrop dimmt den Bildschirm leicht ab */
.tk-location-toast-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9999;
	opacity: 0;
	animation: tkBackdropFadeIn 0.3s ease-out forwards,
	           tkBackdropFadeOut 0.4s ease-in 3.6s forwards;
	pointer-events: none;
}
@keyframes tkBackdropFadeIn { to { opacity: 1; } }
@keyframes tkBackdropFadeOut { to { opacity: 0; } }